Merge pull request #3285 from codecrafters-io/update-text-color-to-gray700

style: replace all instances of slate-700 text color with gray-700

Author: rohitpaulk

app/components/affiliate-page/join-affiliate-program-container.hbs

@@ -1,4 +1,4 @@
-<h1 class="font-bold text-xl sm:text-4xl text-slate-600 text-center w-fit mb-3 mx-auto shrink-0">
+<h1 class="font-bold text-xl sm:text-4xl text-gray-600 text-center w-fit mb-3 mx-auto shrink-0">
   Refer one friend to CodeCrafters.<br />
   Earn up to $594. Right away.
 </h1>

app/components/pay-page/monthly-challenge-banner.hbs

@@ -11,7 +11,7 @@
       {{this.monthlyChallengeBanner.payPageBannerTitle}}
     </div>
 
-    <div class="font-bold pt-4 pb-8 w-fit text-lg lg:text-2xl text-slate-600 group-hover/monthly-challenge-banner:text-slate-700">
+    <div class="font-bold pt-4 pb-8 w-fit text-lg lg:text-2xl text-gray-600 group-hover/monthly-challenge-banner:text-gray-700">
       Complete 1 challenge.<br />
       {{this.monthlyChallengeBanner.payPageCta}}
     </div>

app/components/referrals-page/join-referral-program-container.hbs

@@ -1,4 +1,4 @@
-<h1 class="font-bold text-xl sm:text-4xl text-slate-600 text-center w-fit mb-3 mx-auto shrink-0">
+<h1 class="font-bold text-xl sm:text-4xl text-gray-600 text-center w-fit mb-3 mx-auto shrink-0">
   Gift one week, get one week.
 </h1>
 

app/tailwind.config.js

@@ -78,14 +78,13 @@ module.exports = {
       black: 'black',
       blue: colors.sky,
       current: 'currentColor',
-      gray: colors.slate,
+      gray: colors.gray,
       green: colors.green,
       indigo: colors.indigo,
       purple: colors.purple,
       pink: colors.pink,
       red: colors.red,
       sky: colors.sky,
-      slate: colors.slate,
       teal: colors.teal,
       transparent: 'transparent',
       yellow: colors.yellow,
@@ -101,9 +100,9 @@ module.exports = {
       },
       colors: {
         gray: {
-          825: mixOklch(colors.slate[800], colors.slate[900], 0.25),
-          850: mixOklch(colors.slate[800], colors.slate[900], 0.5),
-          925: mixOklch(colors.slate[900], colors.slate[950], 0.5),
+          825: mixOklch(colors.gray[800], colors.gray[900], 0.25),
+          850: mixOklch(colors.gray[800], colors.gray[900], 0.5),
+          925: mixOklch(colors.gray[900], colors.gray[950], 0.5),
         },
       },
       fontSize: {
@@ -112,16 +111,16 @@ module.exports = {
       typography: {
         DEFAULT: {
           css: {
-            '--tw-prose-bold': colors.slate[800],
-            '--tw-prose-code': colors.slate[700],
+            '--tw-prose-bold': colors.gray[800],
+            '--tw-prose-code': colors.gray[700],
             '--tw-prose-links': colors.sky[500],
-            '--tw-prose-pre-bg': colors.slate[100],
-            '--tw-prose-pre-code': colors.slate[700],
-            '--tw-prose-invert-bold': colors.slate[200],
-            '--tw-prose-invert-code': colors.slate[300],
-            '--tw-prose-invert-headings': colors.slate[200],
+            '--tw-prose-pre-bg': colors.gray[100],
+            '--tw-prose-pre-code': colors.gray[700],
+            '--tw-prose-invert-bold': colors.gray[200],
+            '--tw-prose-invert-code': colors.gray[300],
+            '--tw-prose-invert-headings': colors.gray[200],
             '--tw-prose-invert-links': colors.sky[500],
-            '--tw-prose-invert-pre-bg': colors.slate[800],
+            '--tw-prose-invert-pre-bg': colors.gray[800],
             maxWidth: '90ch', // Default is 65ch
             a: {
               fontWeight: '600',

app/templates/institution.hbs

@@ -39,7 +39,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <InstitutionPage::ClaimOfferButton @onClick={{this.handleClaimOfferButtonClick}} />
-      <div class="text-xs text-slate-700 text-center">Get a free 1 year membership</div>
+      <div class="text-xs text-gray-700 text-center">Get a free 1 year membership</div>
     </div>
 
     <h2 class="text-2xl font-bold text-gray-925 md:text-3xl text-center mt-16">
@@ -54,7 +54,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <InstitutionPage::ClaimOfferButton @onClick={{this.handleClaimOfferButtonClick}} />
-      <div class="text-xs text-slate-700 text-center">Get a free 1 year membership</div>
+      <div class="text-xs text-gray-700 text-center">Get a free 1 year membership</div>
     </div>
   </div>
 </div>

app/templates/join.hbs

@@ -41,7 +41,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <AffiliateLinkPage::AcceptReferralButton @affiliateLink={{this.model.affiliateLink}} />
-      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
+      <div class="text-xs text-gray-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
     </div>
 
     <h2 class="text-2xl font-bold text-gray-925 md:text-3xl text-center mt-16">
@@ -56,7 +56,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <AffiliateLinkPage::AcceptReferralButton @affiliateLink={{this.model.affiliateLink}} />
-      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
+      <div class="text-xs text-gray-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
     </div>
   </div>
 </div>