Barazo default frontend barazo.forum

style(ui): switch Radix neutral scale from slate to sand (#187)

Slate (cool/blue-tinted) clashed with the Flexoki warm tones used
across the Singi Labs design system. Sand (warm neutral) aligns with
the brand palette (#1C1B1A dark bg, #FFFCF0 light fg).

- Replace slate.css/slate-dark.css imports with sand equivalents
- Remap all --color-slate-* tokens to --color-sand-*
- Update semantic mappings and dark mode overrides
- Update hardcoded primary-foreground from #1c2024 to #21201c (sand-12)

authored by

Guido X Jansen and committed by
GitHub
58d75be4 65c65ffd

+47 -47
+47 -47
src/app/globals.css
··· 5 5 6 6 @import '@radix-ui/colors/gray.css'; 7 7 @import '@radix-ui/colors/gray-dark.css'; 8 - @import '@radix-ui/colors/slate.css'; 9 - @import '@radix-ui/colors/slate-dark.css'; 8 + @import '@radix-ui/colors/sand.css'; 9 + @import '@radix-ui/colors/sand-dark.css'; 10 10 @import '@radix-ui/colors/cyan.css'; 11 11 @import '@radix-ui/colors/cyan-dark.css'; 12 12 @import '@radix-ui/colors/purple.css'; ··· 43 43 --color-gray-11: var(--gray-11); 44 44 --color-gray-12: var(--gray-12); 45 45 46 - /* Slate scale (subtle backgrounds) */ 47 - --color-slate-1: var(--slate-1); 48 - --color-slate-2: var(--slate-2); 49 - --color-slate-3: var(--slate-3); 50 - --color-slate-4: var(--slate-4); 51 - --color-slate-5: var(--slate-5); 52 - --color-slate-6: var(--slate-6); 53 - --color-slate-7: var(--slate-7); 54 - --color-slate-8: var(--slate-8); 55 - --color-slate-9: var(--slate-9); 56 - --color-slate-10: var(--slate-10); 57 - --color-slate-11: var(--slate-11); 58 - --color-slate-12: var(--slate-12); 46 + /* Sand scale (warm neutral backgrounds) */ 47 + --color-sand-1: var(--sand-1); 48 + --color-sand-2: var(--sand-2); 49 + --color-sand-3: var(--sand-3); 50 + --color-sand-4: var(--sand-4); 51 + --color-sand-5: var(--sand-5); 52 + --color-sand-6: var(--sand-6); 53 + --color-sand-7: var(--sand-7); 54 + --color-sand-8: var(--sand-8); 55 + --color-sand-9: var(--sand-9); 56 + --color-sand-10: var(--sand-10); 57 + --color-sand-11: var(--sand-11); 58 + --color-sand-12: var(--sand-12); 59 59 60 60 /* Primary accent - Cyan (Flexoki-inspired) */ 61 61 --color-cyan-1: var(--cyan-1); ··· 128 128 --color-red-12: var(--red-12); 129 129 130 130 /* Semantic mapping */ 131 - --color-background: var(--slate-1); 132 - --color-foreground: var(--slate-12); 133 - --color-muted: var(--slate-3); 134 - --color-muted-foreground: var(--slate-11); 135 - --color-border: var(--slate-6); 136 - --color-border-hover: var(--slate-7); 137 - --color-input: var(--slate-3); 138 - --color-input-focus: var(--slate-4); 131 + --color-background: var(--sand-1); 132 + --color-foreground: var(--sand-12); 133 + --color-muted: var(--sand-3); 134 + --color-muted-foreground: var(--sand-11); 135 + --color-border: var(--sand-6); 136 + --color-border-hover: var(--sand-7); 137 + --color-input: var(--sand-3); 138 + --color-input-focus: var(--sand-4); 139 139 --color-ring: var(--cyan-8); 140 - --color-ring-offset: var(--slate-1); 140 + --color-ring-offset: var(--sand-1); 141 141 142 142 /* Primary (Cyan) - cyan-9 is bright, needs dark text for AA contrast 143 - Hardcoded from --slate-12 to avoid CSS var resolution issues in a11y tools */ 143 + Hardcoded from --sand-12 to avoid CSS var resolution issues in a11y tools */ 144 144 --color-primary: var(--cyan-9); 145 - --color-primary-foreground: #1c2024; 145 + --color-primary-foreground: #21201c; 146 146 --color-primary-hover: var(--cyan-10); 147 147 --color-primary-active: var(--cyan-11); 148 148 --color-primary-muted: var(--cyan-3); ··· 168 168 169 169 /* Success (Green) */ 170 170 --color-success: var(--green-9); 171 - --color-success-foreground: var(--slate-12); 171 + --color-success-foreground: var(--sand-12); 172 172 --color-success-hover: var(--green-10); 173 173 --color-success-muted: var(--green-3); 174 174 175 175 /* Warning (Orange) */ 176 176 --color-warning: var(--orange-9); 177 - --color-warning-foreground: var(--slate-12); 177 + --color-warning-foreground: var(--sand-12); 178 178 --color-warning-hover: var(--orange-10); 179 179 --color-warning-muted: var(--orange-3); 180 180 ··· 185 185 --color-info-muted: var(--purple-3); 186 186 187 187 /* Card/Surface */ 188 - --color-card: var(--slate-2); 189 - --color-card-foreground: var(--slate-12); 190 - --color-card-hover: var(--slate-3); 191 - --color-popover: var(--slate-1); 192 - --color-popover-foreground: var(--slate-12); 188 + --color-card: var(--sand-2); 189 + --color-card-foreground: var(--sand-12); 190 + --color-card-hover: var(--sand-3); 191 + --color-popover: var(--sand-1); 192 + --color-popover-foreground: var(--sand-12); 193 193 194 194 /* Shadows */ 195 195 --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); ··· 209 209 210 210 .dark { 211 211 /* Dark mode uses Radix dark color scales */ 212 - --color-background: var(--slate-dark-1); 213 - --color-foreground: var(--slate-dark-12); 214 - --color-muted: var(--slate-dark-3); 215 - --color-muted-foreground: var(--slate-dark-11); 216 - --color-border: var(--slate-dark-6); 217 - --color-border-hover: var(--slate-dark-7); 218 - --color-input: var(--slate-dark-3); 219 - --color-input-focus: var(--slate-dark-4); 212 + --color-background: var(--sand-dark-1); 213 + --color-foreground: var(--sand-dark-12); 214 + --color-muted: var(--sand-dark-3); 215 + --color-muted-foreground: var(--sand-dark-11); 216 + --color-border: var(--sand-dark-6); 217 + --color-border-hover: var(--sand-dark-7); 218 + --color-input: var(--sand-dark-3); 219 + --color-input-focus: var(--sand-dark-4); 220 220 --color-ring: var(--cyan-dark-8); 221 - --color-ring-offset: var(--slate-dark-1); 221 + --color-ring-offset: var(--sand-dark-1); 222 222 223 - --color-card: var(--slate-dark-2); 224 - --color-card-foreground: var(--slate-dark-12); 225 - --color-card-hover: var(--slate-dark-3); 226 - --color-popover: var(--slate-dark-1); 227 - --color-popover-foreground: var(--slate-dark-12); 223 + --color-card: var(--sand-dark-2); 224 + --color-card-foreground: var(--sand-dark-12); 225 + --color-card-hover: var(--sand-dark-3); 226 + --color-popover: var(--sand-dark-1); 227 + --color-popover-foreground: var(--sand-dark-12); 228 228 } 229 229 230 230 /* Container -- Tailwind v4 no longer includes mx-auto/padding by default */