mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-05-09 15:44:55 -04:00
Add dark mode colors
This commit is contained in:
MartinBraquet
@@ -102,12 +102,6 @@
|
||||
--color-ink-900: 30 26 20; /* Deep Warm Black (#1E1A14) */
|
||||
--color-ink-500: 140 128 112; /* Muted Warm Gray (#8C8070) */
|
||||
|
||||
/* Canvas - Backgrounds & Surfaces */
|
||||
--color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
|
||||
--color-canvas-100: 237 232 224; /* Background - Warm Beige (#EDE8E0) */
|
||||
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
|
||||
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
|
||||
|
||||
/* Green - Accents */
|
||||
--color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
|
||||
|
||||
@@ -127,49 +121,34 @@
|
||||
--color-ink-950: 0 0 0;
|
||||
--color-ink-1000: 0 0 0; /* black */
|
||||
|
||||
/* Medium Contrast */
|
||||
/*--color-ink-0: 255 255 255; !* white *!*/
|
||||
/*--color-ink-50: 245 245 245;*/
|
||||
/*--color-ink-100: 230 230 230;*/
|
||||
/*--color-ink-200: 200 200 200;*/
|
||||
/*--color-ink-300: 170 170 170;*/
|
||||
/*--color-ink-400: 140 140 140;*/
|
||||
/*--color-ink-500: 110 110 110;*/
|
||||
/*--color-ink-600: 85 85 85;*/
|
||||
/*--color-ink-700: 60 60 60;*/
|
||||
/*--color-ink-800: 40 40 40;*/
|
||||
/*--color-ink-900: 25 25 25;*/
|
||||
/*--color-ink-950: 12 12 12;*/
|
||||
/*--color-ink-1000: 0 0 0; !* black *!*/
|
||||
|
||||
/* Background / Canvas Grey Scale */
|
||||
/* Canvas - Backgrounds & Surfaces */
|
||||
--color-canvas-0: 255 255 255; /* white */
|
||||
--color-canvas-25: 242 240 232;
|
||||
/*--color-canvas-50: 248 247 255;*/
|
||||
/*--color-canvas-100: 220 220 220;*/
|
||||
/*--color-canvas-200: 210 210 210;*/
|
||||
--color-canvas-300: 190 190 190;
|
||||
--color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
|
||||
--color-canvas-100: 237 232 224; /* Main Page Background - Warm Beige (#EDE8E0) */
|
||||
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
|
||||
--color-canvas-300: 222 203 178;
|
||||
--color-canvas-400: 160 160 160;
|
||||
--color-canvas-500: 130 130 130;
|
||||
--color-canvas-600: 100 100 100;
|
||||
--color-canvas-700: 75 75 75;
|
||||
--color-canvas-800: 50 50 50;
|
||||
--color-canvas-900: 30 30 30;
|
||||
/*--color-canvas-950: 15 15 15;*/
|
||||
--color-canvas-900: 68 52 34; /* Sidebar pressed */
|
||||
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
|
||||
--color-canvas-1000: 0 0 0; /* black */
|
||||
|
||||
/* Primary - Warm Amber */
|
||||
--color-primary-950: 250 243 233; /* #FAF3E9 */
|
||||
--color-primary-900: 243 228 206; /* #F3E4CE */
|
||||
--color-primary-800: 232 201 157; /* #E8C99D */
|
||||
--color-primary-700: 220 171 113; /* #DCAB71 */
|
||||
--color-primary-600: 208 147 82; /* #D09352 */
|
||||
--color-primary-50: 250 243 233; /* #FAF3E9 */
|
||||
--color-primary-100: 243 228 206; /* #F3E4CE */
|
||||
--color-primary-200: 232 201 157; /* #E8C99D */
|
||||
--color-primary-300: 220 171 113; /* #DCAB71 */
|
||||
--color-primary-400: 208 147 82; /* #D09352 */
|
||||
--color-primary-500: 193 127 62; /* #C17F3E - Base */
|
||||
--color-primary-400: 166 104 46; /* #A6682E */
|
||||
--color-primary-300: 133 80 34; /* #855022 */
|
||||
--color-primary-200: 101 58 24; /* #653A18 */
|
||||
--color-primary-100: 71 39 16; /* #472710 */
|
||||
--color-primary-50: 43 21 8; /* #2B1508 */
|
||||
--color-primary-600: 166 104 46; /* #A6682E */
|
||||
--color-primary-700: 133 80 34; /* #855022 */
|
||||
--color-primary-800: 101 58 24; /* #653A18 */
|
||||
--color-primary-900: 71 39 16; /* #472710 */
|
||||
--color-primary-950: 43 21 8; /* #2B1508 */
|
||||
|
||||
--color-yes-0: 255 255 255;
|
||||
--color-yes-50: 249 249 249;
|
||||
@@ -239,53 +218,50 @@
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Ink - Text becomes light */
|
||||
--color-ink-950: 255 255 255; /* Purest highlight */
|
||||
--color-ink-900: 247 244 239; /* Main Body Text (Old Card color) */
|
||||
--color-ink-500: 176 160 140; /* Muted Text - shifted to warm tan */
|
||||
|
||||
/* Green - Sage looks great on dark brown */
|
||||
--color-green-500: 125 160 131; /* Lightened Sage */
|
||||
|
||||
/* High Contrast */
|
||||
--color-ink-1000: 255 255 255; /* white */
|
||||
--color-ink-950: 255 255 255;
|
||||
--color-ink-900: 255 255 255;
|
||||
/*--color-ink-950: 255 255 255;*/
|
||||
/*--color-ink-900: 255 255 255;*/
|
||||
--color-ink-800: 255 255 255;
|
||||
--color-ink-700: 255 255 255;
|
||||
--color-ink-600: 255 255 255;
|
||||
--color-ink-500: 200 200 200;
|
||||
/*--color-ink-500: 200 200 200;*/
|
||||
--color-ink-400: 100 100 100;
|
||||
--color-ink-300: 100 100 100;
|
||||
--color-ink-200: 0 0 0;
|
||||
--color-ink-100: 0 0 0;
|
||||
--color-ink-50: 0 0 0;
|
||||
--color-ink-0: 0 0 0; /* black */
|
||||
/* Medium Contrast */
|
||||
/*--color-ink-1000: 255 255 255; !* white *!*/
|
||||
/*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
|
||||
/*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
|
||||
/*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
|
||||
/*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
|
||||
/*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
|
||||
/*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
|
||||
/*--color-ink-400: 115 115 115; !* #737373 *!*/
|
||||
/*--color-ink-300: 89 89 89; !* #595959 *!*/
|
||||
/*--color-ink-200: 64 64 64; !* #404040 *!*/
|
||||
/*--color-ink-100: 34 34 34; !* #222222 *!*/
|
||||
/*--color-ink-50: 17 17 17; !* #111111 *!*/
|
||||
/*--color-ink-0: 0 0 0; !* black *!*/
|
||||
|
||||
/* Canvas - Backgrounds become dark */
|
||||
--color-canvas-0: 0 0 0;
|
||||
--color-canvas-25: 20 20 20;
|
||||
--color-canvas-50: 20 20 20;
|
||||
--color-canvas-100: 40 40 40;
|
||||
--color-canvas-200: 60 60 60;
|
||||
--color-canvas-300: 90 90 90;
|
||||
--color-canvas-50: 35 31 26; /* Elevated surfaces (Cards) */
|
||||
--color-canvas-100: 26 22 18; /* Main Page Background (#2C2416) */
|
||||
--color-canvas-200: 68 52 34; /* UI Elements/Tags */
|
||||
--color-canvas-300: 78 62 44;
|
||||
--color-canvas-950: 15 13 10; /* Deepest depth (Sidebar/Bottom) */
|
||||
|
||||
--color-primary-50: 10 14 26; /* Deepest Navy (Background-adjacent) */
|
||||
--color-primary-100: 15 23 42; /* Dark Navy Layer */
|
||||
--color-primary-200: 30 41 59; /* Slate Blue */
|
||||
--color-primary-300: 30 58 138; /* Deep Brand Blue */
|
||||
--color-primary-400: 29 78 216; /* Strong Royal Blue */
|
||||
--color-primary-500: 59 130 246; /* Your Standard Blue (Anchor) */
|
||||
--color-primary-600: 96 165 250; /* Bright Sky Blue */
|
||||
--color-primary-700: 147 197 253; /* Light Luminous Blue */
|
||||
--color-primary-800: 191 219 254; /* Soft Pastel Blue */
|
||||
--color-primary-900: 219 234 254; /* Pale Ice Blue */
|
||||
--color-primary-950: 240 247 255; /* Brightest Blue-White */
|
||||
/* Dark Mode Primary - Luminous Amber */
|
||||
--color-primary-50: 43 21 8; /* Deepest Shadow (Old 950) */
|
||||
--color-primary-100: 71 39 16; /* Deep Bronze */
|
||||
--color-primary-200: 101 58 24; /* Muted Gold */
|
||||
--color-primary-300: 133 80 34; /* Antique Brass */
|
||||
--color-primary-400: 166 104 46; /* Warm Gold */
|
||||
--color-primary-500: 193 127 62; /* YOUR BASE (#C17F3E) */
|
||||
--color-primary-600: 208 147 82; /* Lighter (Hover State in Dark) */
|
||||
--color-primary-700: 220 171 113; /* Bright (Active State in Dark) */
|
||||
--color-primary-800: 232 201 157; /* Highlight Tint */
|
||||
--color-primary-900: 243 228 206; /* Near-Cream Tint */
|
||||
--color-primary-950: 250 243 233; /* Glow Tint */
|
||||
|
||||
--color-no-950: 255 255 255; /* white */
|
||||
--color-no-900: 242 242 242;
|
||||
@@ -318,7 +294,7 @@
|
||||
--color-green-200: 187 247 208;
|
||||
--color-green-300: 134 239 172;
|
||||
--color-green-400: 74 222 128;
|
||||
--color-green-500: 34 197 94; /* standard green */
|
||||
/*--color-green-500: 34 197 94; !* standard green *!*/
|
||||
--color-green-600: 22 163 74;
|
||||
--color-green-700: 21 128 61;
|
||||
--color-green-800: 22 101 52;
|
||||
|
||||
Reference in New Issue
Block a user