fix(theme): kill residual Safe green -> grey (static brand accent + badges)

v2.2.0 left green in the sidebar-active accent, brand icons, and 4 Tailwind
notification badges because they read palette static.textBrand (#12FF80) and
hardcoded rgba(18,255,128,.1) — not the secondary token. Neutralize:
- static.ts textBrand -> #636669 (constant grey, reads on light+dark)
- regenerate vars.css from palettes
- badge bg rgba(18,255,128,.1) -> rgba(99,102,105,.15)
Zero green remains in shipped source.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>

apps/web/src/components/common/SpaceSafeBar/SpaceNestedSafesButton.tsx

@@ -65,7 +65,7 @@ function SpaceNestedSafesButton(): ReactElement | null {
               <div className="relative flex items-center">
                 <GitMerge className="size-5 text-muted-foreground" />
                 {displayCount > 0 && (
-                  <span className="absolute left-[13px] -top-[5px] flex size-[14px] items-center justify-center rounded-full bg-[rgba(18,255,128,0.1)] text-[10px] font-medium leading-none text-secondary-foreground">
+                  <span className="absolute left-[13px] -top-[5px] flex size-[14px] items-center justify-center rounded-full bg-[rgba(99,102,105,0.15)] text-[10px] font-medium leading-none text-secondary-foreground">
                     {displayCount}
                   </span>
                 )}

apps/web/src/features/hypernative/components/HnDashboardBanner/styles.module.css

@@ -90,6 +90,6 @@
 
 .ctaButton:hover {
   border-color: #121312 !important;
-  background-color: rgba(18, 255, 128, 0.1) !important;
+  background-color: rgba(99, 102, 105, 0.1) !important;
   max-width: 100%;
 }

apps/web/src/features/spaces/components/HeaderNavigation/HeaderNavigation.tsx

@@ -139,7 +139,7 @@ export function HeaderNavigation({
 
         {messages > 0 && (
           <span
-            className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(18,255,128,0.1)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
+            className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(99,102,105,0.15)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
             aria-label={`${messages} unread messages`}
           >
             {messages > 99 ? '99+' : messages}
@@ -168,7 +168,7 @@ export function HeaderNavigation({
 
               {batchCount > 0 && (
                 <span
-                  className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(18,255,128,0.1)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
+                  className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(99,102,105,0.15)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
                   aria-label={`${batchCount} batched transactions`}
                 >
                   {batchCount > 99 ? '99+' : batchCount}

apps/web/src/features/walletconnect/components/WcHeaderWidget/WcIcon.tsx

@@ -46,7 +46,7 @@ const WcIcon = ({ sessionCount, sessionIcon, isError, onClick }: WcIconProps): R
 
         {!isError && sessionCount > 1 && (
           <span
-            className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(18,255,128,0.1)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
+            className="absolute z-10 flex items-center justify-center rounded-full bg-[rgba(99,102,105,0.15)] text-[10px] font-medium leading-none text-secondary-foreground min-w-[18px] h-[18px] px-1 -top-[2px] -right-[4px]"
             aria-label={`${sessionCount} WalletConnect sessions`}
           >
             {sessionCount}

apps/web/src/styles/vars.css

@@ -2,55 +2,55 @@
 
 :root {
   --color-text-primary: #121312;
-  --color-text-secondary: #a1a3a7;
-  --color-text-disabled: #dddee0;
-  --color-text-contrast: #ffffff;
+  --color-text-secondary: #A1A3A7;
+  --color-text-disabled: #DDDEE0;
+  --color-text-contrast: #FFFFFF;
   --color-primary-dark: #3c3c3c;
   --color-primary-main: #121312;
   --color-primary-light: #636669;
   --color-secondary-dark: #000000;
   --color-secondary-main: #121312;
   --color-secondary-light: #636669;
-  --color-secondary-background: #f4f4f4;
-  --color-border-main: #a1a3a7;
-  --color-border-light: #dcdee0;
-  --color-border-background: #f4f4f4;
-  --color-error-dark: #ac2c3b;
-  --color-error-main: #ff5f72;
-  --color-error-light: #ffb4bd;
-  --color-error-background: #ffe6ea;
-  --color-error1-main: #ffe0e6;
-  --color-error1-contrast-text: #8a1c27;
-  --color-success-dark: #028d4c;
-  --color-success-main: #00b460;
-  --color-success-light: #d3f2e4;
-  --color-success-background: #effaf1;
-  --color-info-dark: #52bfdc;
-  --color-info-main: #5fddff;
-  --color-info-light: #d7f6ff;
-  --color-info-background: #effcff;
-  --color-warning-dark: #c04c32;
-  --color-warning-main: #ff8061;
-  --color-warning-light: #ffbc9f;
-  --color-warning-background: #fff1e0;
-  --color-warning1-main: #ffecc2;
-  --color-warning1-text: #6c2d19;
-  --color-warning1-contrast-text: #ff8c00;
-  --color-background-default: #f5f5f5;
-  --color-background-main: #f5f5f5;
-  --color-background-sheet: #f5f5f5;
-  --color-background-paper: #ffffff;
-  --color-background-light: #f4f4f4;
-  --color-background-secondary: #dddee0;
+  --color-secondary-background: #F4F4F4;
+  --color-border-main: #A1A3A7;
+  --color-border-light: #DCDEE0;
+  --color-border-background: #F4F4F4;
+  --color-error-dark: #AC2C3B;
+  --color-error-main: #FF5F72;
+  --color-error-light: #FFB4BD;
+  --color-error-background: #FFE6EA;
+  --color-error1-main: #FFE0E6;
+  --color-error1-contrast-text: #8A1C27;
+  --color-success-dark: #028D4C;
+  --color-success-main: #00B460;
+  --color-success-light: #D3F2E4;
+  --color-success-background: #EFFAF1;
+  --color-info-dark: #52BFDC;
+  --color-info-main: #5FDDFF;
+  --color-info-light: #D7F6FF;
+  --color-info-background: #EFFCFF;
+  --color-warning-dark: #C04C32;
+  --color-warning-main: #FF8061;
+  --color-warning-light: #FFBC9F;
+  --color-warning-background: #FFF1E0;
+  --color-warning1-main: #FFECC2;
+  --color-warning1-text: #6C2D19;
+  --color-warning1-contrast-text: #FF8C00;
+  --color-background-default: #F4F4F4;
+  --color-background-main: #F4F4F4;
+  --color-background-sheet: #F4F4F4;
+  --color-background-paper: #FFFFFF;
+  --color-background-light: #F4F4F4;
+  --color-background-secondary: #DDDEE0;
   --color-background-skeleton: rgba(0, 0, 0, 0.04);
-  --color-background-disabled: #7878801f;
+  --color-background-disabled: #7878801F;
   --color-backdrop-main: #636669;
   --color-logo-main: #121312;
-  --color-logo-background: #eeeff0;
+  --color-logo-background: #EEEFF0;
   --color-static-main: #121312;
   --color-static-light: #636669;
-  --color-static-primary: #ffffff;
-  --color-static-text-secondary: #a1a3a7;
+  --color-static-primary: #FFFFFF;
+  --color-static-text-secondary: #A1A3A7;
   --color-static-text-brand: #121312;
   --space-1: 8px;
   --space-2: 16px;
@@ -66,113 +66,114 @@
   --space-12: 96px;
 }
 
-[data-theme='dark'] {
-  --color-text-primary: #ffffff;
+[data-theme="dark"] {
+  --color-text-primary: #FFFFFF;
   --color-text-secondary: #636669;
-  --color-text-disabled: #636669;
+  --color-text-disabled: rgba(255, 255, 255, 0.3);
   --color-text-contrast: #000000;
-  --color-primary-dark: #e0e0e0;
-  --color-primary-main: #ffffff;
-  --color-primary-light: #a1a3a7;
+  --color-primary-dark: #E0E0E0;
+  --color-primary-main: #FFFFFF;
+  --color-primary-light: #A1A3A7;
   --color-secondary-dark: #636669;
-  --color-secondary-main: #ffffff;
-  --color-secondary-light: #dddee0;
+  --color-secondary-main: #FFFFFF;
+  --color-secondary-light: #DDDEE0;
   --color-secondary-background: #303033;
   --color-border-main: #636669;
   --color-border-light: #303033;
   --color-border-background: #121312;
-  --color-error-dark: #ac2c3b;
-  --color-error-main: #ff5f72;
-  --color-error-light: #ffb4bd;
-  --color-error-background: #2f2527;
-  --color-error1-main: #4a2125;
-  --color-error1-contrast-text: #ffe0e6;
-  --color-success-dark: #388e3c;
-  --color-success-main: #00b460;
-  --color-success-light: #81c784;
-  --color-success-background: #1f2920;
-  --color-info-dark: #52bfdc;
-  --color-info-main: #5fddff;
-  --color-info-light: #b7f0ff;
-  --color-info-background: #19252c;
-  --color-warning-dark: #c04c32;
-  --color-warning-main: #ff8061;
-  --color-warning-light: #ffbc9f;
-  --color-warning-background: #2f2318;
-  --color-warning1-main: #4a3621;
-  --color-warning1-text: #ffe4cb;
-  --color-warning1-contrast-text: #ff8c00;
+  --color-error-dark: #AC2C3B;
+  --color-error-main: #FF5F72;
+  --color-error-light: #FFB4BD;
+  --color-error-background: #2F2527;
+  --color-error1-main: #4A2125;
+  --color-error1-contrast-text: #FFE0E6;
+  --color-success-dark: #388E3C;
+  --color-success-main: #00B460;
+  --color-success-light: #81C784;
+  --color-success-background: #1F2920;
+  --color-info-dark: #52BFDC;
+  --color-info-main: #5FDDFF;
+  --color-info-light: #B7F0FF;
+  --color-info-background: #19252C;
+  --color-warning-dark: #C04C32;
+  --color-warning-main: #FF8061;
+  --color-warning-light: #FFBC9F;
+  --color-warning-background: #2F2318;
+  --color-warning1-main: #4A3621;
+  --color-warning1-text: #FFE4CB;
+  --color-warning1-contrast-text: #FF8C00;
   --color-background-default: #121312;
   --color-background-main: #121312;
   --color-background-sheet: #121312;
-  --color-background-paper: #1c1c1c;
+  --color-background-paper: #1C1C1C;
   --color-background-light: #303033;
   --color-background-secondary: #303033;
   --color-background-skeleton: rgba(255, 255, 255, 0.04);
-  --color-background-disabled: #7878801f;
+  --color-background-disabled: #7878801F;
   --color-backdrop-main: #636669;
-  --color-logo-main: #ffffff;
+  --color-logo-main: #FFFFFF;
   --color-logo-background: #303033;
   --color-static-main: #121312;
   --color-static-light: #636669;
-  --color-static-primary: #ffffff;
-  --color-static-text-secondary: #a1a3a7;
-  --color-static-text-brand: #ffffff;
+  --color-static-primary: #FFFFFF;
+  --color-static-text-secondary: #A1A3A7;
+  --color-static-text-brand: #FFFFFF;
 }
 
 /* The same as above for the brief moment before JS loads */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --color-text-primary: #ffffff;
+    --color-text-primary: #FFFFFF;
     --color-text-secondary: #636669;
-    --color-text-disabled: #636669;
+    --color-text-disabled: rgba(255, 255, 255, 0.3);
     --color-text-contrast: #000000;
-    --color-primary-dark: #e0e0e0;
-    --color-primary-main: #ffffff;
-    --color-primary-light: #a1a3a7;
+    --color-primary-dark: #E0E0E0;
+    --color-primary-main: #FFFFFF;
+    --color-primary-light: #A1A3A7;
     --color-secondary-dark: #636669;
-    --color-secondary-main: #ffffff;
-    --color-secondary-light: #dddee0;
+    --color-secondary-main: #FFFFFF;
+    --color-secondary-light: #DDDEE0;
     --color-secondary-background: #303033;
     --color-border-main: #636669;
     --color-border-light: #303033;
     --color-border-background: #121312;
-    --color-error-dark: #ac2c3b;
-    --color-error-main: #ff5f72;
-    --color-error-light: #ffb4bd;
-    --color-error-background: #2f2527;
-    --color-error1-main: #4a2125;
-    --color-error1-contrast-text: #ffe0e6;
-    --color-success-dark: #388e3c;
-    --color-success-main: #00b460;
-    --color-success-light: #81c784;
-    --color-success-background: #1f2920;
-    --color-info-dark: #52bfdc;
-    --color-info-main: #5fddff;
-    --color-info-light: #b7f0ff;
-    --color-info-background: #19252c;
-    --color-warning-dark: #c04c32;
-    --color-warning-main: #ff8061;
-    --color-warning-light: #ffbc9f;
-    --color-warning-background: #2f2318;
-    --color-warning1-main: #4a3621;
-    --color-warning1-text: #ffe4cb;
-    --color-warning1-contrast-text: #ff8c00;
+    --color-error-dark: #AC2C3B;
+    --color-error-main: #FF5F72;
+    --color-error-light: #FFB4BD;
+    --color-error-background: #2F2527;
+    --color-error1-main: #4A2125;
+    --color-error1-contrast-text: #FFE0E6;
+    --color-success-dark: #388E3C;
+    --color-success-main: #00B460;
+    --color-success-light: #81C784;
+    --color-success-background: #1F2920;
+    --color-info-dark: #52BFDC;
+    --color-info-main: #5FDDFF;
+    --color-info-light: #B7F0FF;
+    --color-info-background: #19252C;
+    --color-warning-dark: #C04C32;
+    --color-warning-main: #FF8061;
+    --color-warning-light: #FFBC9F;
+    --color-warning-background: #2F2318;
+    --color-warning1-main: #4A3621;
+    --color-warning1-text: #FFE4CB;
+    --color-warning1-contrast-text: #FF8C00;
     --color-background-default: #121312;
     --color-background-main: #121312;
     --color-background-sheet: #121312;
-    --color-background-paper: #1c1c1c;
+    --color-background-paper: #1C1C1C;
     --color-background-light: #303033;
     --color-background-secondary: #303033;
     --color-background-skeleton: rgba(255, 255, 255, 0.04);
-    --color-background-disabled: #7878801f;
+    --color-background-disabled: #7878801F;
     --color-backdrop-main: #636669;
-    --color-logo-main: #ffffff;
+    --color-logo-main: #FFFFFF;
     --color-logo-background: #303033;
     --color-static-main: #121312;
     --color-static-light: #636669;
-    --color-static-primary: #ffffff;
-    --color-static-text-secondary: #a1a3a7;
-    --color-static-text-brand: #ffffff;
+    --color-static-primary: #FFFFFF;
+    --color-static-text-secondary: #A1A3A7;
+    --color-static-text-brand: #FFFFFF;
   }
 }
+

packages/theme/src/palettes/static.ts

@@ -10,7 +10,7 @@ const staticColors: StaticColors = {
   light: '#636669',
   primary: '#FFFFFF',
   textSecondary: '#A1A3A7',
-  textBrand: '#12FF80',
+  textBrand: '#636669',
 }
 
 export default staticColors