chore(css): use "brand" over "green" (#8915)

* chore(css): use "brand" over "green"

* fixup!

Author: avivkeller

apps/site/components/Blog/BlogPostCard/index.module.css

@@ -6,13 +6,13 @@
 }
 
 .subtitle {
-  @apply mt-6
+  @apply text-brand-600
+    dark:text-brand-400
+    mt-6
     mb-2
     inline-block
     text-xs
-    font-semibold
-    text-green-600
-    dark:text-green-400;
+    font-semibold;
 }
 
 .title {

apps/site/components/Common/LinkWithArrow/index.module.css

@@ -9,8 +9,8 @@
 }
 
 .button {
-  @apply text-green-600
-    hover:text-green-900
-    dark:text-green-400
-    dark:hover:text-green-200;
+  @apply text-brand-600
+    hover:text-brand-900
+    dark:text-brand-400
+    dark:hover:text-brand-200;
 }

packages/ui-components/__design__/colors.stories.tsx

@@ -5,14 +5,14 @@ export const Colors: StoryObj = {
     <div className="flex flex-row justify-between">
       <div className="flex w-full flex-col items-center justify-between gap-1">
         <div className="flex flex-row gap-1">
-          <div className="h-20 w-20 bg-green-100" />
-          <div className="h-20 w-20 bg-green-200" />
-          <div className="h-20 w-20 bg-green-300" />
-          <div className="h-20 w-20 bg-green-400" />
-          <div className="h-20 w-20 bg-green-600" />
-          <div className="h-20 w-20 bg-green-700" />
-          <div className="h-20 w-20 bg-green-800" />
-          <div className="h-20 w-20 bg-green-900" />
+          <div className="bg-brand-100 h-20 w-20" />
+          <div className="bg-brand-200 h-20 w-20" />
+          <div className="bg-brand-300 h-20 w-20" />
+          <div className="bg-brand-400 h-20 w-20" />
+          <div className="bg-brand-600 h-20 w-20" />
+          <div className="bg-brand-700 h-20 w-20" />
+          <div className="bg-brand-800 h-20 w-20" />
+          <div className="bg-brand-900 h-20 w-20" />
         </div>
         <div className="flex flex-row gap-1">
           <div className="h-20 w-20 bg-neutral-100" />

packages/ui-components/src/Common/AlertBox/index.module.css

@@ -63,10 +63,10 @@
   }
 
   &.success {
-    @apply bg-green-600;
+    @apply bg-brand-600;
 
     .title {
-      @apply bg-green-700;
+      @apply bg-brand-700;
     }
   }
 

packages/ui-components/src/Common/Badge/index.module.css

@@ -19,7 +19,7 @@
   }
 
   &.default {
-    @apply bg-green-600;
+    @apply bg-brand-600;
   }
 
   &.error {

packages/ui-components/src/Common/BadgeGroup/index.module.css

@@ -25,20 +25,20 @@
   }
 
   &.default {
-    @apply border-green-200
-      bg-green-100
-      dark:border-green-700
+    @apply border-brand-200
+      bg-brand-100
+      dark:border-brand-700
       dark:bg-neutral-900;
 
     .icon {
-      @apply text-green-500
-        dark:text-green-300;
+      @apply text-brand-500
+        dark:text-brand-300;
     }
 
     .message,
     .message a:not(:hover) {
-      @apply text-green-700
-        dark:text-green-300;
+      @apply text-brand-700
+        dark:text-brand-300;
     }
   }
 

packages/ui-components/src/Common/Banner/index.module.css

@@ -30,7 +30,7 @@
 }
 
 .default {
-  @apply bg-green-600;
+  @apply bg-brand-600;
 }
 
 .error {

packages/ui-components/src/Common/BaseButton/index.module.css

@@ -46,26 +46,26 @@
   }
 
   &.primary {
-    @apply rounded-sm
+    @apply border-brand-600
+      bg-brand-600
+      rounded-sm
       border
-      border-green-600
-      bg-green-600
       text-white
       shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
-      @apply border-green-700
-        bg-green-700
+      @apply border-brand-700
+        bg-brand-700
         text-white;
     }
 
     &:focus {
-      @apply border-green-700
-        bg-green-700;
+      @apply border-brand-700
+        bg-brand-700;
     }
 
     &[aria-disabled='true'] {
-      @apply bg-green-600
+      @apply bg-brand-600
         opacity-50;
     }
   }
@@ -100,10 +100,13 @@
 
   &.special {
     @apply before:bg-gradient-glow-backdrop
+      border-brand-600/30
+      bg-brand-600/10
+      after:from-brand-600/0
+      after:via-brand-600
+      after:to-brand-600/0
       rounded-lg
       border
-      border-green-600/30
-      bg-green-600/10
       text-white
       shadow-xs
       before:absolute
@@ -124,21 +127,18 @@
       after:h-px
       after:w-2/5
       after:bg-linear-to-r
-      after:from-green-600/0
-      after:via-green-600
-      after:to-green-600/0
       after:content-[''];
 
     &[aria-disabled='true'] {
       @apply opacity-50;
     }
 
     &:hover:not([aria-disabled='true']) {
-      @apply bg-green-600/20;
+      @apply bg-brand-600/20;
     }
 
     &:focus {
-      @apply bg-green-600/20;
+      @apply bg-brand-600/20;
     }
   }
 

packages/ui-components/src/Common/BaseLinkTabs/index.module.css

@@ -29,10 +29,10 @@
     }
 
     &[data-state='active'] {
-      @apply border-b-green-600
-        text-green-600
-        dark:border-b-green-400
-        dark:text-green-400;
+      @apply border-b-brand-600
+        text-brand-600
+        dark:border-b-brand-400
+        dark:text-brand-400;
     }
   }
 }

packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css

@@ -7,7 +7,8 @@
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply flex
+  @apply aria-current:bg-brand-600
+    flex
     size-10
     cursor-pointer
     items-center
@@ -17,7 +18,6 @@
     py-2.5
     text-neutral-800
     aria-current:cursor-default
-    aria-current:bg-green-600
     aria-current:text-white
     motion-safe:transition-colors
     dark:text-neutral-200;