Feat/Update Tailwind Colors (#616)

* added CDS colors to tailwind config

* updated 'gray' references to 'gray-10'

* Updated 'darkgray' and 'muted' references

* Updated 'yellow' color references to 'yellow-70'

* refactored color config for cleanliness

apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx

@@ -14,7 +14,7 @@ export function BestOfEthereum() {
         </p>
       </div>
       <div className="flex w-full max-w-[534px] flex-col space-y-2 lg:basis-1/2">
-        <div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray p-8">
+        <div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray-10 p-8">
           <h3 className="font-display text-8xl text-white lg:text-9xl">10x</h3>
           <div className="flex flex-col font-sans text-4xl uppercase text-white lg:text-5xl">
             <h3>Cheaper<br />Than<br />Ethereum</h3>

apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx

@@ -8,7 +8,7 @@ export function FaqSidebar() {
           <p className="font-mono text-3xl uppercase">Frequently Asked Questions</p>
         </div>
 
-        <div className="h-[1px] w-full bg-muted opacity-40" />
+        <div className="h-[1px] w-full bg-gray-60 opacity-40" />
 
         <QuestionAccordion
           question="When will I hear back about my application?"
@@ -74,7 +74,7 @@ export function FaqSidebar() {
           question="What will I be able to do upon graduation?"
           answer="You will learn to deploy smart contracts and connect a web frontend to them – the foundation of building any onchain app."
         />
-        <div className="mb-40 h-[1px] w-full bg-muted opacity-40" />
+        <div className="mb-40 h-[1px] w-full bg-gray-60 opacity-40" />
       </div>
     </div>
   );

apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx

@@ -11,7 +11,7 @@ export function QuestionAccordion({ question, answer }: QuestionAccordionProps)
   const toggleOpen = useCallback(() => setIsOpen((o) => !o), [setIsOpen]);
 
   return (
-    <div className="flex flex-col gap-6 border-b border-gray pb-6 pt-5">
+    <div className="flex flex-col gap-6 border-b border-gray-10 pb-6 pt-5">
       <button
         type="button"
         className="flex flex-row justify-between py-2 text-base font-medium text-white"

apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx

@@ -10,7 +10,7 @@ type FeatureCardProps = {
 
 export function HowItWorksCard({ featureItem: { number, title, description } }: FeatureCardProps) {
   return (
-    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-10   bg-gray p-8 md:w-[330px]">
+    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-10   bg-gray-10 p-8 md:w-[330px]">
       <p className="font-mono text-2xl uppercase text-white">{number}</p>
       <div className="flex flex-col space-y-4">
         {isValidElement(title) ? (
@@ -21,7 +21,7 @@ export function HowItWorksCard({ featureItem: { number, title, description } }:
         {isValidElement(description) ? (
           description
         ) : (
-          <p className="text-muted font-sans text-white">{description}</p>
+          <p className="text-gray-60 font-sans text-white">{description}</p>
         )}
       </div>
     </div>

apps/web/src/components/Commitment/Commitment.tsx

@@ -24,7 +24,7 @@ export function Commitment() {
           </Link>
         </div>
       </div>
-      <div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray p-4 lg:p-8">
+      <div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray-10 p-4 lg:p-8">
         <GradientCircle className="h-[90px] w-[90px] md:h-[100px] md:w-[100px] xl:h-[163px] xl:w-[163px]" />
         <GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />
         <GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />

apps/web/src/components/Ecosystem/Card.tsx

@@ -19,7 +19,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
       href={url}
       rel="noreferrer noopener"
       target="_blank"
-      className="flex w-full flex-col justify-start gap-8 bg-gray p-8 visited:opacity-50 hover:bg-darkgray"
+      className="flex w-full flex-col justify-start gap-8 bg-gray-10 p-8 visited:opacity-50 hover:bg-gray-dark"
     >
       <div className="flex flex-row justify-between">
         <div className="relative h-[80px] w-[80px] overflow-hidden rounded-[3px]">
@@ -32,7 +32,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col">
           <h3 className="font-mono text-xl uppercase text-white">{name}</h3>
-          <span className="muted truncate font-mono text-muted">
+          <span className="truncate font-mono text-gray-60">
             {getNiceDomainDisplayFromUrl(url)}
           </span>
         </div>

apps/web/src/components/Ecosystem/List.tsx

@@ -107,7 +107,7 @@ export function List() {
             NO RESULTS FOR “{searchText === '' ? selectedTag : searchText}
             ”
           </span>
-          <span className="font-sans text-muted">Try searching for another term</span>
+          <span className="font-sans text-gray-60">Try searching for another term</span>
         </div>
       )}
 

apps/web/src/components/Ecosystem/SearchBar.tsx

@@ -67,7 +67,7 @@ export function SearchBar({ setSearchText }: Props) {
 
   return (
     <div
-      className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-muted p-2 md:w-full lg:w-80"
+      className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-gray-60 p-2 md:w-full lg:w-80"
     >
       <SearchIcon />
 
@@ -76,7 +76,7 @@ export function SearchBar({ setSearchText }: Props) {
         id="appsSearchBar"
         value={text}
         onChange={onChange}
-        className="w-full bg-black font-sans text-base text-white placeholder:text-muted focus:outline-none"
+        className="w-full bg-black font-sans text-base text-white placeholder:text-gray-60 focus:outline-none"
         placeholder="Search"
         aria-label='Search for apps and integrations in the Base ecosystem'
       />

apps/web/src/components/Ecosystem/TagChip.tsx

@@ -14,8 +14,8 @@ export function TagChip({ tag, isSelected, setSelectedTag }: Props) {
   return (
     <button type="button" onClick={select}>
       <div
-        className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-muted px-8 hover:border-white ${
-          isSelected ? 'bg-muted' : ''
+        className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-60 px-8 hover:border-white ${
+          isSelected ? 'bg-gray-60' : ''
         }`}
       >
         <span className="text-center font-mono text-base uppercase text-white">{tag}</span>

apps/web/src/components/Features/FeatureCard.tsx

@@ -80,7 +80,7 @@ function Terminal() {
 
 export function FeatureCard({ featureItem: { icon, title, description } }: FeatureCardProps) {
   return (
-    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray p-8 md:w-[330px]">
+    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray-10 p-8 md:w-[330px]">
       {
         { ethereum: <Ethereum />, base: <Base />, terminal: <Terminal />, coinbase: <Coinbase /> }[
           icon

apps/web/src/components/Layout/Footer/Footer.tsx

@@ -14,7 +14,7 @@ export function Footer() {
   const handleCloseModal = useCallback(() => setIsOpen(false), []);
 
   return (
-    <footer className="z-10 mt-auto flex w-full justify-center bg-gray lg:pb-64">
+    <footer className="z-10 mt-auto flex w-full justify-center bg-gray-10 lg:pb-64">
       <div className="flex w-full max-w-[1440px] flex-col justify-between p-8 lg:flex-row">
         <div className="flex flex-col font-display text-sm text-white">
           <div className="bg-blue-300 flex w-32 flex-row items-start justify-start">

apps/web/src/components/Layout/Nav/MobileMenu.tsx

@@ -148,7 +148,7 @@ function MobileMenu({ color }: MobileMenuProps) {
       <AnimatePresence>
         {showMobileMenu && (
           <motion.nav
-            className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray p-8"
+            className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray-10 p-8"
             initial={mobileMenuInitial}
             animate={mobileMenuAnimation}
             exit={mobileMenuInitial}

apps/web/src/components/Layout/Nav/NftBanner.tsx

@@ -19,8 +19,8 @@ export function NftBanner() {
   }
 
   return (
-    <div className="z-10 flex w-full flex-row justify-center bg-yellow text-black">
-      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow p-2 pl-8 pr-6">
+    <div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
+      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
         <Link href={href}>
           <span className="text-xs  md:text-base">
             Claim your Base Quest Anniversary NFT today!

apps/web/src/components/Layout/Nav/OcsBanner.tsx

@@ -19,8 +19,8 @@ export function OcsBanner() {
   }
 
   return (
-    <div className="z-10 flex w-full flex-row justify-center bg-yellow text-black">
-      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow p-2 pl-8 pr-6">
+    <div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
+      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
         <Link href={href}>
           <span className="text-xs  md:text-base">Join the Onchain Summer Buildathon!</span>
         </Link>