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

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,14 +29,15 @@
     }
 
     &[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;
     }
   }
 }
 
 .tabsSelect {
-  @apply md:hidden!;
+  @apply !
+    md:hidden;
 }

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;

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

@@ -1,20 +1,20 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply flex
+  @apply border-brand-600
+    dark:border-brand-400
+    flex
     max-w-2xl
     flex-col
     items-start
     gap-4
     self-stretch
     border-l-2
-    border-green-600
     py-2
     pl-5
     text-lg
     font-semibold
     text-neutral-900
-    dark:border-green-400
     dark:text-white;
 
   & cite {

packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -5,8 +5,8 @@
     truncate;
 
   &.active {
-    @apply rounded
-      bg-green-800
+    @apply bg-brand-800
+      rounded
       px-2
       py-1
       font-semibold
@@ -15,7 +15,7 @@
       dark:text-white;
 
     &:hover {
-      @apply bg-green-700
+      @apply bg-brand-700
         text-white;
     }
   }

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

@@ -63,7 +63,7 @@
 
   &:hover,
   &:focus-visible {
-    @apply bg-green-600
+    @apply bg-brand-600
       text-white;
   }
 }

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

@@ -23,8 +23,8 @@
         text-neutral-200;
 
       &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
+        @apply border-b-brand-400
+          text-brand-400;
       }
     }
 

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

@@ -32,7 +32,7 @@
   }
 
   &.property {
-    @apply bg-green-600;
+    @apply bg-brand-600;
   }
 
   &.class {

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

@@ -1,7 +1,9 @@
 @reference "../../styles/index.css";
 
 .glowingBackdrop {
-  @apply absolute
+  @apply after:bg-brand-300
+    dark:after:bg-brand-700
+    absolute
     top-0
     left-0
     -z-10
@@ -13,11 +15,9 @@
     after:aspect-square
     after:w-[300px]
     after:rounded-full
-    after:bg-green-300
     after:blur-[120px]
     after:content-['']
-    md:opacity-100
-    dark:after:bg-green-700;
+    md:opacity-100;
 
   svg {
     @apply absolute

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

@@ -35,19 +35,19 @@
 }
 
 .dropDownItem {
-  @apply cursor-pointer
+  @apply data-[highlighted]:bg-brand-600
+    cursor-pointer
     px-2.5
     py-1.5
     text-sm
     font-medium
     text-neutral-800
     outline-hidden
-    data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;
 }
 
 .currentDropDown {
-  @apply bg-green-600
+  @apply bg-brand-600
     text-white;
 }

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

@@ -21,7 +21,7 @@
     after:content-[''];
 
   &.announcements {
-    @apply after:from-green-700/90;
+    @apply after:from-brand-700/90;
   }
 
   &.release {

packages/ui-components/src/Common/Search/Results/Hit/index.module.css

@@ -1,7 +1,8 @@
 @reference "../../../../styles/index.css";
 
 .link {
-  @apply flex
+  @apply focus-visible:border-brand-600
+    flex
     items-center
     gap-4
     rounded-xl
@@ -15,7 +16,6 @@
     outline-none
     hover:bg-neutral-200
     focus:bg-neutral-200
-    focus-visible:border-green-600
     focus-visible:bg-transparent
     motion-safe:transition-colors
     dark:bg-zinc-950

packages/ui-components/src/Common/Search/Results/Tabs/index.module.css

@@ -29,9 +29,9 @@
 }
 
 .facetTabItemSelected {
-  @apply border-2
-    border-green-600
-    dark:border-green-400;
+  @apply border-brand-600
+    dark:border-brand-400
+    border-2;
 }
 
 .facetTabsList {