style: added blue-darker to color theme

pixelbakery · Jan 7, 2025 · e367073 · e367073
1 parent 12804dd
commit e367073
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/components/pageSpecific/caseStudies/CaseStudies_QuickFacts.tsx b/components/pageSpecific/caseStudies/CaseStudies_QuickFacts.tsx
@@ -135,14 +135,14 @@ export default function CaseStudies_QuickFacts({ client, website, quickfacts }:
                 <Link
                   href={website}
                   target='_blank'
-                  className='w-full py-2 text-lg duration-300 ease-in-out opacity-100 text-wrap lg:text-xl font-geologica hover:opacity-50'
+                  className='w-full py-2 text-lg duration-300 ease-in-out opacity-100 text-wrap lg:text-xl font-geologica hover:opacity-50 text-blue-darker'
                 >
                   <span className='inline-block'>
                     {client} <NorthEastArrowIcon className='inline ml-1' />
                   </span>
                 </Link>
               ) : (
-                <p className='py-2 text-2xl font-geologica'>{client}</p>
+                <p className='py-2 text-2xl font-geologica text-blue-darker'>{client}</p>
               )}
             </div>
           )}
@@ -156,16 +156,16 @@ export default function CaseStudies_QuickFacts({ client, website, quickfacts }:
               {industryEntry.link ? (
                 <Link
                   href={industryEntry.link}
-                  className='flex flex-row justify-start max-w-lg py-2 text-lg duration-300 ease-in-out lg:text-xl xl:justify-between font-geologica hover:opacity-60'
+                  className='flex flex-row justify-start max-w-lg py-2 text-lg duration-300 ease-in-out lg:text-xl xl:justify-between font-geologica hover:opacity-60 text-blue-darker'
                 >
-                  <span className='hidden pr-2 md:block'>{industryEntry.emoji}</span>
-                  <span className='flex-grow inline'> {industryEntry.label}</span>
-                  <span className='self-center inline ml-1 text-sm leading-tight lg:-mb-1 lg:ml-0 justify-self-start'>
+                  <span className='hidden pr-2 md:block text-blue-darker'>{industryEntry.emoji}</span>
+                  <span className='flex-grow inline text-blue-darker'> {industryEntry.label}</span>
+                  <span className='self-center inline ml-1 text-sm leading-tight lg:-mb-1 lg:ml-0 justify-self-start text-blue-darker'>
                     <ChevronRightIcon />
                   </span>
                 </Link>
               ) : (
-                <p className='py-2 text-xl font-geologica'>
+                <p className='py-2 text-xl font-geologica text-blue-darker'>
                   {industryEntry.emoji} {industryEntry.label}
                 </p>
               )}
@@ -174,35 +174,35 @@ export default function CaseStudies_QuickFacts({ client, website, quickfacts }:
 
           {/* SERVICES */}
           {serviceTypes.length > 0 && (
-            <div className='col-span-6 md:col-span-3 xl:col-span-3 2xl:pl-12'>
+            <div className='col-span-6 md:col-span-3 xl:col-span-3 2xl:pl-12 '>
               <H3 className='text-lg uppercase lg:mb-4' color='cream' overrideSizes>
                 Service(s)
               </H3>
               <ul
                 className={cn(
-                  'justify-between w-full flex flex-col py-2 my-0 text-lg lg:text-xl list-none list-outside divide-y divide-solid divide-blue-darker font-geologica',
+                  'justify-between w-full flex flex-col py-2 my-0 text-lg lg:text-xl list-none list-outside divide-y divide-solid divide-blue-darker font-geologica text-blue-darker',
                 )}
               >
                 {serviceTypes.map((serviceID) => {
                   const srv = SERVICES[serviceID] || SERVICES['other']
                   return (
                     <li
                       key={serviceID}
-                      className='w-full pt-1 mb-1 lg:pt-3 lg:mb-3 first:pt-0 last:mb-0'
+                      className='w-full pt-1 mb-1 lg:pt-3 lg:mb-3 first:pt-0 last:mb-0 text-blue-darker'
                     >
                       {srv.link ? (
                         <Link
                           href={srv.link}
-                          className='flex flex-row justify-between w-full my-0 duration-300 ease-in-out hover:opacity-60 '
+                          className='flex flex-row justify-between w-full my-0 duration-300 ease-in-out hover:opacity-60 text-blue-darker'
                         >
-                          <span className='hidden mr-2 md:block'>{srv.emoji}</span>
-                          <span className='flex-grow inline'> {srv.label}</span>
-                          <span className='self-center text-sm justify-self-end place-self-end'>
+                          <span className='hidden mr-2 md:block text-blue-darker'>{srv.emoji}</span>
+                          <span className='flex-grow inline text-blue-darker'> {srv.label}</span>
+                          <span className='self-center text-sm justify-self-end place-self-end text-blue-darker'>
                             <ChevronRightIcon />
                           </span>
                         </Link>
                       ) : (
-                        <span className='flex flex-row align-start gap-x-4 lg:gap-x-12'>
+                        <span className='flex flex-row align-start gap-x-4 lg:gap-x-12 text-blue-darker'>
                           {srv.emoji} {srv.label}
                         </span>
                       )}
@@ -220,11 +220,11 @@ export default function CaseStudies_QuickFacts({ client, website, quickfacts }:
               </H3>
               <ul
                 className={cn(
-                  'w-full flex flex-col py-0 my-0 text-xl list-none list-outside divide-y divide-solid divide-blue-darker font-geologica',
+                  'w-full flex flex-col py-0 my-0 text-xl list-none list-outside divide-y divide-solid divide-blue-darker font-geologica text-blue-darker',
                 )}
               >
                 {awardsList.map((award, idx) => (
-                  <li key={idx} className='w-full pt-1 mb-1 lg:pt-3 lg:mb-3 first:pt-0 last:mb-0'>
+                  <li key={idx} className='w-full pt-1 mb-1 lg:pt-3 lg:mb-3 first:pt-0 last:mb-0 text-blue-darker'>
                     {award}
                   </li>
                 ))}

diff --git a/lib/colorHelper.ts b/lib/colorHelper.ts
@@ -3,6 +3,7 @@ export const textColorVariants = {
   white: 'text-white',
   egg: 'text-egg',
   cream: 'text-cream',
+  'blue-darker': 'text-blue-darker',
   blue: 'text-blue',
   'blue-light': 'text-blue-light',
   'blue-dark': 'text-blue-dark',
@@ -17,7 +18,6 @@ export const textColorVariants = {
   wine: 'text-wine',
   banana: 'text-banana',
   'banana-light': 'text-banana-light',
-
   pinkLight: 'text-pinkLight',
   'wine-100': 'text-wine-100',
   'wine-200': 'text-wine-200',
@@ -33,6 +33,7 @@ export const backgroundColorVariants = {
   transparent: 'bg-transparent',
   white: 'bg-white',
   egg: 'bg-egg',
+  'blue-darker': 'bg-blue-darker',
   blue: 'bg-blue',
   'blue-light': 'bg-blue-light',
   'blue-dark': 'bg-blue-dark',

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import type { Config } from 'tailwindcss'
+import type { Config,  } from 'tailwindcss'
 
 module.exports = {
   content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
@@ -17,6 +17,7 @@ module.exports = {
         light: 'rgb(204, 238, 255)',
         DEFAULT: 'rgb(56, 204, 255)',
         dark: 'rgb(0, 81, 116)',
+        darker: 'rgb(0, 25, 36)',
       },
       peach: 'rgb(255, 94, 100)',
       error: 'rgb(255,0,51)',
@@ -36,9 +37,8 @@ module.exports = {
       current: 'currentColor',
       none: 'none',
     },
-
-    stroke: (theme) => theme('colors'),
-    fill: (theme) => theme('colors'),
+  stroke: ({ theme }:any) => theme('colors'), //Sloppy, I know :(
+  fill: ({ theme}: any) => theme('colors'),
 
     extend: {
       animation: {