extract colors into tailwind config

kontent-ai · Jun 24, 2024 · dcc831e · dcc831e
1 parent 55abec1
commit dcc831e
Show file tree

Hide file tree

Showing 21 changed files with 137 additions and 192 deletions.
diff --git a/components/landingPage/ui/heroImage.tsx b/components/landingPage/ui/heroImage.tsx
@@ -1,8 +1,6 @@
 import Image from "next/image";
 import { FC, ReactNode } from "react";
 
-import { mainColorMdBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
 
 type Props = Readonly<{
@@ -29,7 +27,7 @@ export const HeroImage: FC<Props> = (props) => (
         />
       </div>
       <div
-        className={`${mainColorMdBgClass[siteCodename]} relative w-fit h-full flex max-w-3xl flex-col items-center md:items-start justify-end min-[900px]:justify-center pt-20 pb-32 md:pb-12 pr-6 min-[900px]:px-6`}
+        className="md:bg-mainBackgroundColor relative w-fit h-full flex max-w-3xl flex-col items-center md:items-start justify-end min-[900px]:justify-center pt-20 pb-32 md:pb-12 pr-6 min-[900px]:px-6"
       >
         {props.children}
       </div>

diff --git a/components/listingPage/ArticleItem.tsx b/components/listingPage/ArticleItem.tsx
@@ -2,9 +2,7 @@ import Image from "next/image"
 import Link from "next/link";
 import { FC } from "react";
 
-import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
 import { formatDate } from "../../lib/utils/dateTime";
-import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -41,7 +39,7 @@ export const ArticleItem: FC<Props> = props => (
         <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 no-underline line-clamp-2 ">{props.title}</h5>
         <p className="mb-0 font-normal text-gray-700 line-clamp-6">{props.description}</p>
       </div>
-      <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 border text-white py-2 px-4 md:rounded`}>
+      <button className="group-hover:bg-mainHoverColor bg-mainButtonColor block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 border text-white py-2 px-4 md:rounded">
         <span>Continue reading</span>
       </button>
     </Link>

diff --git a/components/listingPage/ProductItem.tsx b/components/listingPage/ProductItem.tsx
@@ -2,8 +2,6 @@ import Image from "next/image"
 import Link from "next/link";
 import { FC } from "react";
 
-import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
-import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -36,7 +34,7 @@ export const ProductItem: FC<Props> = props => (
           />
         </figure>
         {props.price && <p className="m-0 text-center text-xl font-normal pb-2">{`${props.price}€`}</p>}
-        <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} text-white block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border py-2 px-4 rounded`}>Detail</button>
+        <button className="group-hover:bg-mainColorHover bg-mainButtonColor text-white block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border py-2 px-4 rounded">Detail</button>
       </div>
     </Link>
   </li>

diff --git a/components/shared/Fact.tsx b/components/shared/Fact.tsx
@@ -1,8 +1,6 @@
 import Image from "next/image";
 import { FC } from "react";
 
-import { mainColorAfterBgClass } from "../../lib/constants/colors";
-import { siteCodename } from "../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -27,7 +25,7 @@ export const FactComponent: FC<Props> = (props) => {
     >
       {image && (
         <div
-          className={`w-full md:w-1/2 h-[400px] relative drop-shadow-lg after:absolute ${props.isReversed ? "after:left-3" : "after:right-3"} after:top-3 ${mainColorAfterBgClass[siteCodename]} after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
+          className={`w-full md:w-1/2 h-[400px] relative drop-shadow-lg after:absolute ${props.isReversed ? "after:left-3" : "after:right-3"} after:top-3 after:mainAfterColor after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
           {...createElementSmartLink(contentTypes.fact.elements.image.codename)}
         >
           <Image

diff --git a/components/shared/internalLinks/CTAButton.tsx b/components/shared/internalLinks/CTAButton.tsx
@@ -1,12 +1,7 @@
 import Link from "next/link";
 import React from "react";
 
-import {
-  mainColorButtonClass,
-  mainColorHoverClass,
-} from "../../../lib/constants/colors";
 import { resolveReference } from "../../../lib/routing";
-import { siteCodename } from "../../../lib/utils/env";
 import { Action, Fact, Nav_NavigationItem } from "../../../models";
 
 type Props = {
@@ -22,7 +17,7 @@ export const CTAButton = (props: Props) => {
   return (
     <Link href={factUrl ?? ""}>
       <button
-        className={`${mainColorButtonClass[siteCodename]} bottom-0 group left-0 ${mainColorHoverClass[siteCodename]} text-white font-bold mt-10 py-2 px-4 rounded`}
+        className="bg-mainButtonColor bottom-0 group left-0 hover:bg-mainHoverColor text-white font-bold mt-10 py-2 px-4 rounded"
       >
         <span>{props.reference.elements.referenceLabel.value}</span>
       </button>

diff --git a/components/shared/richText/Callout.tsx b/components/shared/richText/Callout.tsx
@@ -7,10 +7,8 @@ import { FC } from "react";
 
 import {
   calloutTypeColor,
-  mainColorBorderClass,
 } from "../../../lib/constants/colors";
 import { isCalloutType } from "../../../lib/types/calloutType";
-import { siteCodename } from "../../../lib/utils/env";
 import { Component_Callout, contentTypes } from "../../../models";
 import { RichTextElement } from "./RichTextElement";
 
@@ -20,7 +18,7 @@ type Props = Readonly<{
 
 export const CalloutComponent: FC<Props> = (props) => (
   <div
-    className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}
+    className="p-5 border-2 rounded-3xl border-mainBorderColor"
   >
     <div className={`w-5 ${createIconColor(props.item)}`}>
       {renderTypeIcon(props.item)}

diff --git a/components/shared/richText/RichTextElement.tsx b/components/shared/richText/RichTextElement.tsx
@@ -19,8 +19,6 @@ import Image from "next/image";
 import { FC } from "react";
 
 import { sanitizeFirstChildText } from "../../../lib/anchors";
-import { mainColorAnchor } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   Action,
   Block_ContentChunk,
@@ -43,7 +41,6 @@ type ElementProps = Readonly<{
 export const createDefaultResolvers = (
   element: Elements.RichTextElement,
   isElementInsideTable: boolean = false,
-  siteCodename: keyof typeof mainColorAnchor,
   componentIndex = 0
 ): Partial<PortableTextReactComponents> => ({
   types: {
@@ -180,7 +177,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -193,7 +190,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -206,7 +203,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -219,7 +216,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -232,7 +229,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -245,7 +242,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -261,7 +258,7 @@ export const RichTextElement: FC<ElementProps> = (props) => {
   return (
     <PortableText
       value={portableText}
-      components={createDefaultResolvers(props.element, false, siteCodename)}
+      components={createDefaultResolvers(props.element, false)}
     />
   );
 };
@@ -275,10 +272,6 @@ type RichTextValueProps = Readonly<{
 const RichTextValue: FC<RichTextValueProps> = (props) => (
   <PortableText
     value={props.value}
-    components={createDefaultResolvers(
-      props.element,
-      props.isInsideTable,
-      siteCodename
-    )}
+    components={createDefaultResolvers(props.element, props.isInsideTable)}
   />
 );
diff --git a/components/shared/ui/footer.tsx b/components/shared/ui/footer.tsx
@@ -1,14 +1,11 @@
 import { FC } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
-
 type Props = Readonly<{
   className?: string;
 }>;
 
 export const Footer: FC<Props> = () => (
-  <footer className={`${mainColorBgClass[siteCodename]} w-screen`}>
+  <footer className="bg-mainBackgroundColor w-screen">
     <div className="flex items-center mx-auto max-w-screen-xl h-16 px-4 text-white">
       <p>Ficto Healthtech - Leading the way in medical advancements...</p>
     </div>

diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import { FC, useEffect, useState } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
 import { perCollectionSiteName } from "../../../lib/constants/labels";
 import {
   ResolutionContext,
@@ -75,7 +74,7 @@ const MenuList: FC<MenuListProps> = (props) => {
               ? ""
               : "border-l-transparent border-t-transparent"
           }
-        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full ${mainColorBgClass[siteCodename]} md:bg-transparent group grow`}
+        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full bg-mainBackgroundColor md:bg-transparent group grow`}
           onClick={() => props.handleClick(i)}
         >
           {link.elements.subitems.value.length > 0 ? (
@@ -176,7 +175,7 @@ export const Menu: FC<Props> = (props) => {
   return (
     <div
       className={`w-full fixed z-50 transition-all ease-in-out duration-200 ${
-        (!isScrollable || isScrolled || smallMenuActive) ? mainColorBgClass[siteCodename] :  "bg-opacity-0"
+        (!isScrollable || isScrolled || smallMenuActive) ? 'bg-mainBackgroundColor' :  "bg-opacity-0"
       }`}
     >
       <div className="flex justify-between items-center mx-auto max-w-screen-xl md:h-16 pr-4">

diff --git a/components/shared/visualContainer/Grid.tsx b/components/shared/visualContainer/Grid.tsx
@@ -2,49 +2,47 @@ import Image from "next/image";
 import Link from "next/link";
 import React, { FC } from "react";
 
-import { mainColorAnchor } from "../../../lib/constants/colors";
 import { resolveReference } from "../../../lib/routing";
-import { siteCodename } from "../../../lib/utils/env";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Fact } from "../../../models";
-
-type Props = Readonly<{
-  items: ReadonlyArray<Fact>;
-  title: string;
-  subtitle: string;
-  codename: string;
-}>;
-
-const GridItem: FC<{ item: Fact }> = ({ item }) => (
-  <div
-    className="md:p-4 flex flex-col items-center"
-    key={item.system.id}
-  >
-    {item.elements.image.value[0] && (
-      <div className="relative max-w-sm w-full h-[400px]">
-        <Image
-          src={item.elements.image.value[0].url}
-          alt={item.elements.title.value}
-          fill
-          style={{ objectFit: "cover" }}
-          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
-          className="rounded-lg transition ease-in-out group-hover:brightness-50 duration-300"
-          quality={75}
-        />
-        <div className="font-semibold text-white invisible group-hover:visible absolute top-1/2 left-10 transition delay-300 duration-300 ease-in-out">
-          {item.elements.referenceLabel.value}
-        </div>
-      </div>
-    )}
-    <div className="font-semibold text-3xl w-full md:px-4 pt-10 pb-2">
-      {item.elements.title.value}
-    </div>
-    <div className="md:px-4 justify-center w-full">
-      {item.elements.message.value}
-    </div>
-  </div>
-);
-
+
+type Props = Readonly<{
+  items: ReadonlyArray<Fact>;
+  title: string;
+  subtitle: string;
+  codename: string;
+}>;
+
+const GridItem: FC<{ item: Fact }> = ({ item }) => (
+  <div
+    className="md:p-4 flex flex-col items-center"
+    key={item.system.id}
+  >
+    {item.elements.image.value[0] && (
+      <div className="relative max-w-sm w-full h-[400px]">
+        <Image
+          src={item.elements.image.value[0].url}
+          alt={item.elements.title.value}
+          fill
+          style={{ objectFit: "cover" }}
+          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
+          className="rounded-lg transition ease-in-out group-hover:brightness-50 duration-300"
+          quality={75}
+        />
+        <div className="font-semibold text-white invisible group-hover:visible absolute top-1/2 left-10 transition delay-300 duration-300 ease-in-out">
+          {item.elements.referenceLabel.value}
+        </div>
+      </div>
+    )}
+    <div className="font-semibold text-3xl w-full md:px-4 pt-10 pb-2">
+      {item.elements.title.value}
+    </div>
+    <div className="md:px-4 justify-center w-full">
+      {item.elements.message.value}
+    </div>
+  </div>
+);
+
 export const GridComponent: FC<Props> = (props) => (
   <div className="vis-container px-10 w-full relative">
     {props.title && (
@@ -56,7 +54,7 @@ export const GridComponent: FC<Props> = (props) => (
         )}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={"#" + props.codename}
         >
           {props.title}
@@ -91,4 +89,4 @@ export const GridComponent: FC<Props> = (props) => (
       )}
     </div>
   </div>
-);
+);
diff --git a/components/shared/visualContainer/HeroUnit.tsx b/components/shared/visualContainer/HeroUnit.tsx
@@ -1,7 +1,5 @@
 import { FC } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -22,7 +20,7 @@ export const HeroUnitComponent: FC<Props> = (props) => {
       url={fact.elements.image.value[0]?.url || ""}
       itemId={props.item.system.id}
     >
-      <div className={`p-5 text-white ${mainColorBgClass[siteCodename]} w-full`}>
+      <div className="p-5 text-white bg-mainBackgroundColor w-full">
         <div
           className="flex md:w-fit"
           {...createItemSmartLink(fact.system.id)}

diff --git a/components/shared/visualContainer/Stack.tsx b/components/shared/visualContainer/Stack.tsx
@@ -1,10 +1,5 @@
 import { FC, useState } from "react";
 
-import {
-  mainColorAnchor,
-  mainColorBorderClass,
-} from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -45,7 +40,7 @@ export const StackComponent: FC<Props> = (props) => {
           )}
         >
           <a
-            className={mainColorAnchor[siteCodename]}
+            className="border-mainAnchorColor"
             href={"#" + props.codename}
           >
             {props.title}
@@ -106,7 +101,7 @@ const Headers: FC<HeadersProps> = (props) => {
         <li
           key={i}
           className={`grow w-fit justify-center md:justify-between md:pl-5 flex overflow-hidden p-2 cursor-pointer ${props.selectedHeaderIndex === i
-            ? `border-b-2 ${mainColorBorderClass[siteCodename]}`
+            ? `border-b-2 border-mainBorderColor`
             : ""
             }`}
           onClick={() => props.onHeaderSelected(i)}