From ae5e5c65b166cf3939ec2626ae9477a41aa5489f Mon Sep 17 00:00:00 2001 From: oppiliappan Date: Sun, 4 Oct 2026 09:44:51 +0100 Subject: [PATCH] web: bring back the oqqz colour tokens Co-Authored-By: Claude Opus 5.5 (1M context) --- web/src/app.css | 531 ++++++++++++++---------------------------------- 1 file changed, 155 insertions(+), 376 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index 5bf6db1e7..87b2bf4fc 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -87,316 +87,95 @@ html { --container-page: 64rem; --container-hero: 80rem; - --color-wool-100: oklch(100% 0 0); - --color-wool-200: oklch(98.9% 0 0); - --color-wool-300: oklch(97% 0 0); - --color-wool-400: oklch(93.9% 0 0); - --color-wool-500: oklch(89.2% 0 0); - --color-wool-600: oklch(82.2% 0 0); - --color-wool-700: oklch(72.7% 0 0); - --color-wool-800: oklch(61.2% 0 0); - --color-wool-900: oklch(48.8% 0 0); - --color-wool-1000: oklch(37.3% 0 0); - --color-wool-1100: oklch(27.8% 0 0); - --color-wool-1200: oklch(20.8% 0 0); - --color-wool-1300: oklch(16.1% 0 0); - --color-wool-1400: oklch(13% 0 0); - --color-wool-1500: oklch(11.1% 0 0); - --color-wool-1600: oklch(10% 0 0); - - --color-red-50: oklch(97.1% 0.017 8.38); - --color-red-100: oklch(93.6% 0.041 8.717); - --color-red-200: oklch(88.5% 0.078 9.334); - --color-red-300: oklch(80.8% 0.135 10.571); - --color-red-400: oklch(70.4% 0.205 13.216); - --color-red-500: oklch(63.7% 0.24 16.331); - --color-red-600: oklch(57.7% 0.245 18.325); - --color-red-700: oklch(50.5% 0.222 18.518); - --color-red-800: oklch(44.4% 0.194 17.899); - --color-red-900: oklch(39.6% 0.161 16.723); - --color-red-950: oklch(25.8% 0.112 17.042); - - --color-orange-50: oklch(98% 0.017 73.684); - --color-orange-100: oklch(95.4% 0.04 75.164); - --color-orange-200: oklch(90.1% 0.079 70.697); - --color-orange-300: oklch(83.7% 0.132 66.29); - --color-orange-400: oklch(75% 0.185 55.934); - --color-orange-500: oklch(70.5% 0.214 47.604); - --color-orange-600: oklch(64.6% 0.222 41.116); - --color-orange-700: oklch(55.3% 0.197 38.402); - --color-orange-800: oklch(47% 0.16 37.304); - --color-orange-900: oklch(40.8% 0.127 38.172); - --color-orange-950: oklch(26.6% 0.083 36.259); - - --color-amber-50: oklch(98.7% 0.022 79.277); - --color-amber-100: oklch(96.2% 0.059 79.617); - --color-amber-200: oklch(92.4% 0.12 79.746); - --color-amber-300: oklch(87.9% 0.169 75.605); - --color-amber-400: oklch(82.8% 0.189 68.429); - --color-amber-500: oklch(76.9% 0.188 54.08); - --color-amber-600: oklch(66.6% 0.179 42.318); - --color-amber-700: oklch(55.5% 0.163 32.998); - --color-amber-800: oklch(47.3% 0.137 30.201); - --color-amber-900: oklch(41.4% 0.112 29.904); - --color-amber-950: oklch(27.9% 0.077 29.635); - - --color-yellow-50: oklch(98.7% 0.028 102.212); - --color-yellow-100: oklch(97.3% 0.074 103.193); - --color-yellow-200: oklch(94.5% 0.132 101.54); - --color-yellow-300: oklch(90.5% 0.183 98.111); - --color-yellow-400: oklch(85.2% 0.199 91.936); - --color-yellow-500: oklch(79.5% 0.185 86.047); - --color-yellow-600: oklch(68.1% 0.164 75.834); - --color-yellow-700: oklch(55.4% 0.138 66.442); - --color-yellow-800: oklch(47.6% 0.117 61.907); - --color-yellow-900: oklch(42.1% 0.098 57.708); - --color-yellow-950: oklch(28.6% 0.069 53.813); - - --color-lime-50: oklch(98.6% 0.04 129.757); - --color-lime-100: oklch(96.7% 0.084 131.328); - --color-lime-200: oklch(93.8% 0.148 133.321); - --color-lime-300: oklch(89.7% 0.208 135.665); - --color-lime-400: oklch(84.1% 0.238 137.85); - --color-lime-500: oklch(76.8% 0.235 139.85); - --color-lime-600: oklch(64.8% 0.211 140.684); - --color-lime-700: oklch(53.2% 0.176 140.589); - --color-lime-800: oklch(45.3% 0.145 139.933); - --color-lime-900: oklch(40.5% 0.121 140.063); - --color-lime-950: oklch(27.4% 0.09 141.109); - - --color-green-50: oklch(98.2% 0.03 155.826); - --color-green-100: oklch(96.2% 0.065 156.743); - --color-green-200: oklch(92.5% 0.137 155.995); - --color-green-300: oklch(87.1% 0.263 154.449); - --color-green-400: oklch(79.2% 0.291 151.711); - --color-green-500: oklch(72.3% 0.28 149.579); - --color-green-600: oklch(62.7% 0.245 149.214); - --color-green-700: oklch(52.7% 0.202 150.069); - --color-green-800: oklch(44.8% 0.166 151.328); - --color-green-900: oklch(39.3% 0.142 152.535); - --color-green-950: oklch(26.6% 0.095 152.934); - - --color-emerald-50: oklch(97.9% 0.022 166.113); - --color-emerald-100: oklch(95% 0.055 163.051); - --color-emerald-200: oklch(90.5% 0.096 164.15); - --color-emerald-300: oklch(84.5% 0.145 164.978); - --color-emerald-400: oklch(76.5% 0.177 163.223); - --color-emerald-500: oklch(69.6% 0.17 162.48); - --color-emerald-600: oklch(59.6% 0.147 163.225); - --color-emerald-700: oklch(50.8% 0.121 165.612); - --color-emerald-800: oklch(43.2% 0.098 166.913); - --color-emerald-900: oklch(37.8% 0.08 168.94); - --color-emerald-950: oklch(26.2% 0.054 172.552); - - --color-teal-50: oklch(98.4% 0.015 180.72); - --color-teal-100: oklch(95.3% 0.053 180.801); - --color-teal-200: oklch(91% 0.098 180.426); - --color-teal-300: oklch(85.5% 0.139 181.071); - --color-teal-400: oklch(77.7% 0.152 181.912); - --color-teal-500: oklch(70.4% 0.141 182.503); - --color-teal-600: oklch(60% 0.12 184.704); - --color-teal-700: oklch(51.1% 0.098 186.391); - --color-teal-800: oklch(43.7% 0.081 188.216); - --color-teal-900: oklch(38.6% 0.066 188.416); - --color-teal-950: oklch(27.7% 0.048 192.524); - - --color-cyan-50: oklch(98.4% 0.02 200.873); - --color-cyan-100: oklch(95.6% 0.047 203.388); - --color-cyan-200: oklch(91.7% 0.083 205.041); - --color-cyan-300: oklch(86.5% 0.129 207.078); - --color-cyan-400: oklch(78.9% 0.154 211.53); - --color-cyan-500: oklch(71.5% 0.144 215.221); - --color-cyan-600: oklch(60.9% 0.128 221.723); - --color-cyan-700: oklch(52% 0.107 223.128); - --color-cyan-800: oklch(45% 0.088 224.283); - --color-cyan-900: oklch(39.8% 0.073 227.392); - --color-cyan-950: oklch(30.2% 0.058 229.695); - - --color-sky-50: oklch(97.7% 0.013 236.62); - --color-sky-100: oklch(95.1% 0.028 236.824); - --color-sky-200: oklch(90.1% 0.061 230.902); - --color-sky-300: oklch(82.8% 0.114 230.318); - --color-sky-400: oklch(74.6% 0.161 232.661); - --color-sky-500: oklch(68.5% 0.169 237.323); - --color-sky-600: oklch(58.8% 0.159 241.966); - --color-sky-700: oklch(50% 0.136 242.749); - --color-sky-800: oklch(44.3% 0.113 240.79); - --color-sky-900: oklch(39.1% 0.093 240.876); - --color-sky-950: oklch(29.3% 0.069 243.157); - - --color-blue-50: oklch(97% 0.015 254.604); - --color-blue-100: oklch(93.2% 0.033 255.585); - --color-blue-200: oklch(88.2% 0.061 254.128); - --color-blue-300: oklch(80.9% 0.107 251.813); - --color-blue-400: oklch(70.7% 0.167 254.624); - --color-blue-500: oklch(62.3% 0.215 259.815); - --color-blue-600: oklch(54.6% 0.245 262.881); - --color-blue-700: oklch(48.8% 0.243 264.376); - --color-blue-800: oklch(42.4% 0.2 265.638); - --color-blue-900: oklch(37.9% 0.148 265.522); - --color-blue-950: oklch(28.2% 0.093 267.935); - - --color-indigo-50: oklch(96.2% 0.018 280.314); - --color-indigo-100: oklch(93% 0.034 280.788); - --color-indigo-200: oklch(87% 0.065 282.039); - --color-indigo-300: oklch(78.5% 0.115 282.713); - --color-indigo-400: oklch(67.3% 0.182 284.935); - --color-indigo-500: oklch(58.5% 0.233 285.117); - --color-indigo-600: oklch(51.1% 0.262 284.966); - --color-indigo-700: oklch(45.7% 0.24 285.023); - --color-indigo-800: oklch(39.8% 0.195 285.366); - --color-indigo-900: oklch(35.9% 0.144 286.697); - --color-indigo-950: oklch(25.7% 0.09 289.288); - - --color-violet-50: oklch(96.9% 0.017 293.756); - --color-violet-100: oklch(94.3% 0.031 294.588); - --color-violet-200: oklch(89.4% 0.06 293.283); - --color-violet-300: oklch(81.1% 0.115 293.571); - --color-violet-400: oklch(70.2% 0.187 293.541); - --color-violet-500: oklch(60.6% 0.252 292.717); - --color-violet-600: oklch(54.1% 0.281 293.009); - --color-violet-700: oklch(49.1% 0.271 292.581); - --color-violet-800: oklch(43.2% 0.234 292.759); - --color-violet-900: oklch(38% 0.193 293.745); - --color-violet-950: oklch(28.3% 0.145 291.089); - - --color-purple-50: oklch(97.7% 0.014 308.299); - --color-purple-100: oklch(94.6% 0.034 307.174); - --color-purple-200: oklch(90.2% 0.064 306.703); - --color-purple-300: oklch(82.7% 0.121 306.383); - --color-purple-400: oklch(71.4% 0.205 305.504); - --color-purple-500: oklch(62.7% 0.266 303.9); - --color-purple-600: oklch(55.8% 0.288 302.321); - --color-purple-700: oklch(49.6% 0.266 301.924); - --color-purple-800: oklch(43.8% 0.22 303.724); - --color-purple-900: oklch(38.1% 0.178 304.987); - --color-purple-950: oklch(29.1% 0.151 302.717); - - --color-fuchsia-50: oklch(97.7% 0.018 320.058); - --color-fuchsia-100: oklch(95.2% 0.039 318.852); - --color-fuchsia-200: oklch(90.3% 0.08 319.62); - --color-fuchsia-300: oklch(83.3% 0.15 321.434); - --color-fuchsia-400: oklch(74% 0.241 322.16); - --color-fuchsia-500: oklch(66.7% 0.295 322.15); - --color-fuchsia-600: oklch(59.1% 0.293 322.896); - --color-fuchsia-700: oklch(51.8% 0.256 323.949); - --color-fuchsia-800: oklch(45.2% 0.215 324.591); - --color-fuchsia-900: oklch(40.1% 0.175 325.612); - --color-fuchsia-950: oklch(29.3% 0.141 325.661); - - --color-pink-50: oklch(97.1% 0.015 343.198); - --color-pink-100: oklch(94.8% 0.03 342.258); - --color-pink-200: oklch(89.9% 0.064 343.231); - --color-pink-300: oklch(82.3% 0.124 346.018); - --color-pink-400: oklch(71.8% 0.205 349.761); - --color-pink-500: oklch(65.6% 0.242 354.308); - --color-pink-600: oklch(59.2% 0.249 0.584); - --color-pink-700: oklch(52.5% 0.225 3.958); - --color-pink-800: oklch(45.9% 0.19 3.815); - --color-pink-900: oklch(40.8% 0.157 2.432); - --color-pink-950: oklch(28.4% 0.113 3.907); - - --color-rose-50: oklch(96.9% 0.016 12.422); - --color-rose-100: oklch(94.1% 0.032 12.58); - --color-rose-200: oklch(89.2% 0.061 10.001); - --color-rose-300: oklch(81% 0.121 11.638); - --color-rose-400: oklch(71.2% 0.197 13.428); - --color-rose-500: oklch(64.5% 0.246 16.439); - --color-rose-600: oklch(58.6% 0.253 17.585); - --color-rose-700: oklch(51.4% 0.224 16.935); - --color-rose-800: oklch(45.5% 0.191 13.697); - --color-rose-900: oklch(41% 0.163 10.272); - --color-rose-950: oklch(27.1% 0.109 12.094); - - --color-background-default: var(--color-white); - --color-background-subtle: var(--color-wool-100); - --color-background-inset: var(--color-wool-300); - --color-background-muted: var(--color-wool-400); - --color-background-strong: var(--color-wool-600); - --color-background-canvas: var(--color-wool-300); - --color-background-highlight: var(--color-yellow-200); - --color-background-success-subtle: var(--color-green-100); - --color-background-success-subtle-hover: var(--color-green-200); - --color-background-success-emphasis: var(--color-green-600); - --color-background-success-emphasis-hover: var(--color-green-700); - --color-background-danger-subtle: var(--color-red-100); - --color-background-danger-subtle-hover: var(--color-red-200); - --color-background-danger-emphasis: var(--color-red-300); - --color-background-danger-emphasis-hover: var(--color-red-400); - --color-background-warning-subtle: var(--color-amber-50); - --color-background-warning-subtle-hover: var(--color-amber-100); - --color-background-warning-emphasis: var(--color-amber-500); - --color-background-info-subtle: var(--color-indigo-50); - --color-background-info-subtle-hover: var(--color-indigo-100); - --color-background-info-emphasis: var(--color-indigo-600); + --color-background-default: #ffffff; + --color-background-subtle: #fafafa; + --color-background-inset: #f2f2f2; + --color-background-muted: #e5e5e5; + --color-background-strong: #d4d4d4; + --color-background-canvas: #f5f5f5; + --color-background-highlight: #e0e7ff; + --color-background-success-subtle: #dcfce7; + --color-background-success-subtle-hover: #bbf7d0; + --color-background-success-emphasis: #16a34a; + --color-background-success-emphasis-hover: #15803d; + --color-background-danger-subtle: #ffe4e6; + --color-background-danger-subtle-hover: #fecdd3; + --color-background-danger-emphasis: #fda4af; + --color-background-danger-emphasis-hover: #fb7185; + --color-background-warning-subtle: #fffbeb; + --color-background-warning-subtle-hover: #fef3c7; + --color-background-warning-emphasis: #f59e0b; + --color-background-info-subtle: #eef2ff; + --color-background-info-subtle-hover: #e0e7ff; + --color-background-info-emphasis: #5750f1; --color-background-info-emphasis-hover: #4a41e0; - --color-background-emphasis: var(--color-wool-1500); + --color-background-emphasis: #0a0a0a; /* --- background / navigation --- The settings sidebar aliases *invert* between modes, so these cannot be spelled as an existing pair: light recesses the frame (subtle) and raises the active item (default), dark does the exact opposite. */ - --color-background-navigation-frame: var(--color-wool-100); - --color-background-navigation-item: var(--color-white); - - --color-foreground-default: var(--color-wool-1500); - --color-foreground-muted: var(--color-wool-1000); - --color-foreground-subtle: var(--color-wool-900); - --color-foreground-placeholder: var(--color-wool-700); - --color-foreground-disabled: var(--color-wool-600); - --color-foreground-on-emphasis: var(--color-white); - --color-foreground-inverted: var(--color-wool-300); - --color-foreground-highlight: var(--color-yellow-800); - --color-foreground-success: var(--color-green-600); - --color-foreground-success-strong: var(--color-green-800); - --color-foreground-success-disabled: color-mix(in oklab, var(--color-green-600) 50%, transparent); - --color-foreground-danger: var(--color-red-600); - --color-foreground-danger-strong: var(--color-red-800); - --color-foreground-danger-subtle: var(--color-red-400); - --color-foreground-danger-disabled: var(--color-red-300); - --color-foreground-warning: var(--color-amber-600); - --color-foreground-warning-strong: var(--color-amber-800); - --color-foreground-warning-disabled: var(--color-amber-300); - --color-foreground-info: var(--color-indigo-700); - --color-foreground-info-strong: var(--color-indigo-800); - --color-foreground-link-default: var(--color-wool-1500); - --color-foreground-link-hover: var(--color-wool-1200); - --color-foreground-link-disabled: var(--color-wool-700); - --color-foreground-link-danger: var(--color-red-600); - --color-foreground-link-danger-hover: var(--color-red-500); - --color-foreground-link-success: var(--color-green-600); - --color-foreground-link-success-hover: var(--color-green-500); - --color-foreground-link-warning: var(--color-amber-600); - --color-foreground-link-warning-hover: var(--color-amber-500); - --color-foreground-link-info: var(--color-indigo-600); - --color-foreground-link-info-hover: var(--color-indigo-500); - - --color-border-default: var(--color-wool-400); - --color-border-subtle: var(--color-wool-300); - --color-border-strong: var(--color-wool-600); - --color-border-disabled: var(--color-wool-400); - --color-border-focus: var(--color-wool-700); - --color-border-focus-success: var(--color-green-500); - --color-border-focus-danger: var(--color-red-500); - --color-border-success: var(--color-green-700); - --color-border-danger: var(--color-red-300); - --color-border-danger-subtle: var(--color-red-200); - --color-border-navigation-item-active: var(--color-wool-400); + --color-background-navigation-frame: #f5f5f5; + --color-background-navigation-item: #ffffff; + + --color-foreground-default: #0a0a0a; + --color-foreground-muted: #525252; + --color-foreground-subtle: #737373; + --color-foreground-placeholder: #a3a3a3; + --color-foreground-disabled: #d4d4d4; + --color-foreground-on-emphasis: #ffffff; + --color-foreground-inverted: #f5f5f5; + --color-foreground-highlight: #3730a3; + --color-foreground-success: #16a34a; + --color-foreground-success-strong: #166534; + --color-foreground-success-disabled: #16a34a80; + --color-foreground-danger: #e11d48; + --color-foreground-danger-strong: #9f1239; + --color-foreground-danger-subtle: #fb7185; + --color-foreground-danger-disabled: #fda4af; + --color-foreground-warning: #d97706; + --color-foreground-warning-strong: #92400e; + --color-foreground-warning-disabled: #fcd34d; + --color-foreground-info: #4338ca; + --color-foreground-info-strong: #3730a3; + --color-foreground-link-default: #0a0a0a; + --color-foreground-link-hover: #5750f1; + --color-foreground-link-disabled: #a3a3a3; + --color-foreground-link-danger: #e11d48; + --color-foreground-link-danger-hover: #f43f5e; + --color-foreground-link-success: #16a34a; + --color-foreground-link-success-hover: #22c55e; + --color-foreground-link-warning: #d97706; + --color-foreground-link-warning-hover: #f59e0b; + --color-foreground-link-info: #5750f1; + --color-foreground-link-info-hover: #6d67f5; + + --color-border-default: #e5e5e5; + --color-border-subtle: #f0f0f0; + --color-border-strong: #d4d4d4; + --color-border-disabled: #e5e5e5; + --color-border-focus: #8b85f7; + --color-border-focus-success: #22c55e; + --color-border-focus-danger: #f43f5e; + --color-border-success: #15803d; + --color-border-danger: #fda4af; + --color-border-danger-subtle: #fecdd3; + --color-border-navigation-item-active: #e5e5e5; --color-drawing-accent: #6d67f5; --color-drawing-accent-recess: color-mix(in srgb, var(--color-drawing-accent), black 14%); --color-drawing-accent-edge: color-mix(in srgb, var(--color-drawing-accent), black 38%); - --color-shadow-inner-strong: var(--color-wool-600); - --color-shadow-inner-strong-hover: var(--color-wool-600); - --color-shadow-inner-subtle: var(--color-wool-400); - --color-shadow-ambient-strong: transparent; - --color-shadow-ambient-subtle: transparent; + --color-shadow-inner-strong: #d4d4d4; + --color-shadow-inner-strong-hover: #d4d4d4; + --color-shadow-inner-subtle: #e5e5e5; + --color-shadow-ambient-strong: rgb(0 0 0 / 0.08); + --color-shadow-ambient-subtle: rgb(0 0 0 / 0.04); - --color-inverse-background: var(--color-wool-1300); - --color-inverse-foreground: var(--color-wool-300); - --color-inverse-border: var(--color-wool-1200); - --color-inverse-shadow-inner: var(--color-wool-1500); + --color-inverse-background: #262626; + --color-inverse-foreground: #f5f5f5; + --color-inverse-border: #404040; + --color-inverse-shadow-inner: #171717; --shadow-small: 0 1px 2px var(--color-shadow-ambient-strong); --shadow-regular: @@ -925,7 +704,7 @@ html { @utility row-breathe { animation: row-breathe 1.2s ease-in-out infinite; background-color: var(--color-background-muted); - border-radius: var(--radius-md, 0.375rem); + border-radius: var(--radius-sm, 0.25rem); @media (prefers-reduced-motion: reduce) { animation: none; @@ -1005,86 +784,86 @@ html { :root { @variant dark { - --color-background-default: var(--color-wool-1300); - --color-background-subtle: var(--color-wool-1200); - --color-background-inset: var(--color-wool-1100); - --color-background-muted: var(--color-wool-1000); - --color-background-strong: var(--color-wool-900); - --color-background-canvas: var(--color-wool-1500); - --color-background-highlight: var(--color-yellow-900); - --color-background-success-subtle: var(--color-green-900); - --color-background-success-subtle-hover: var(--color-green-800); - --color-background-success-emphasis: var(--color-green-700); - --color-background-success-emphasis-hover: var(--color-green-800); - --color-background-danger-subtle: var(--color-red-900); - --color-background-danger-subtle-hover: var(--color-red-800); - --color-background-danger-emphasis: var(--color-red-700); - --color-background-danger-emphasis-hover: var(--color-red-800); - --color-background-warning-subtle: var(--color-amber-900); - --color-background-warning-subtle-hover: var(--color-amber-800); - --color-background-warning-emphasis: var(--color-amber-600); - --color-background-info-subtle: var(--color-indigo-950); - --color-background-info-subtle-hover: var(--color-indigo-900); - --color-background-info-emphasis: var(--color-indigo-600); + --color-background-default: #141414; + --color-background-subtle: #1a1a1a; + --color-background-inset: #1f1f1f; + --color-background-muted: #2a2a2a; + --color-background-strong: #474747; + --color-background-canvas: #0a0a0a; + --color-background-highlight: #2c2675; + --color-background-success-subtle: #14532d; + --color-background-success-subtle-hover: #166534; + --color-background-success-emphasis: #15803d; + --color-background-success-emphasis-hover: #166534; + --color-background-danger-subtle: #4c0519; + --color-background-danger-subtle-hover: #881337; + --color-background-danger-emphasis: #be123c; + --color-background-danger-emphasis-hover: #9f1239; + --color-background-warning-subtle: #451a03; + --color-background-warning-subtle-hover: #78350f; + --color-background-warning-emphasis: #d97706; + --color-background-info-subtle: #1c1a45; + --color-background-info-subtle-hover: #27235f; + --color-background-info-emphasis: #6d67f5; --color-background-info-emphasis-hover: #837ef8; - --color-background-emphasis: var(--color-wool-300); + --color-background-emphasis: #f5f5f5; /* --- background / navigation (Dark) --- inverted vs light, see above */ - --color-background-navigation-frame: var(--color-wool-1300); - --color-background-navigation-item: var(--color-wool-1200); - - --color-foreground-default: var(--color-wool-300); - --color-foreground-muted: var(--color-wool-700); - --color-foreground-subtle: var(--color-wool-900); - --color-foreground-placeholder: var(--color-wool-700); - --color-foreground-disabled: var(--color-wool-900); - --color-foreground-on-emphasis: var(--color-white); - --color-foreground-inverted: var(--color-wool-1500); - --color-foreground-highlight: var(--color-yellow-200); - --color-foreground-success: var(--color-green-400); - --color-foreground-success-strong: var(--color-green-200); - --color-foreground-success-disabled: var(--color-green-700); - --color-foreground-danger: var(--color-red-400); - --color-foreground-danger-strong: var(--color-red-600); - --color-foreground-danger-disabled: var(--color-red-300); - --color-foreground-warning: var(--color-amber-400); - --color-foreground-warning-strong: var(--color-amber-200); - --color-foreground-warning-disabled: var(--color-amber-400); - --color-foreground-info: var(--color-indigo-400); - --color-foreground-info-strong: var(--color-indigo-200); - --color-foreground-link-default: var(--color-wool-300); - --color-foreground-link-hover: var(--color-wool-600); - --color-foreground-link-disabled: var(--color-wool-900); - --color-foreground-link-danger: var(--color-red-500); - --color-foreground-link-danger-hover: var(--color-red-400); - --color-foreground-link-success: var(--color-green-500); - --color-foreground-link-success-hover: var(--color-green-400); - --color-foreground-link-warning: var(--color-amber-500); - --color-foreground-link-warning-hover: var(--color-amber-400); - --color-foreground-link-info: var(--color-indigo-500); - --color-foreground-link-info-hover: var(--color-indigo-400); - - --color-border-default: var(--color-wool-1200); - --color-border-subtle: var(--color-wool-1100); - --color-border-strong: var(--color-wool-900); - --color-border-disabled: var(--color-wool-1000); - --color-border-focus: var(--color-wool-600); - --color-border-focus-success: var(--color-green-500); - --color-border-focus-danger: var(--color-red-500); - --color-border-success: var(--color-green-700); - --color-border-danger: var(--color-red-800); - --color-border-navigation-item-active: var(--color-wool-1000); - - --color-shadow-inner-strong: var(--color-wool-1600); - --color-shadow-inner-strong-hover: var(--color-wool-1300); - --color-shadow-inner-subtle: var(--color-wool-1500); - --color-shadow-ambient-strong: transparent; - --color-shadow-ambient-subtle: transparent; - - --color-inverse-background: var(--color-white); - --color-inverse-foreground: var(--color-wool-1500); - --color-inverse-border: var(--color-wool-400); - --color-inverse-shadow-inner: var(--color-wool-400); + --color-background-navigation-frame: #141414; + --color-background-navigation-item: #1f1f1f; + + --color-foreground-default: #ededed; + --color-foreground-muted: #a3a3a3; + --color-foreground-subtle: #737373; + --color-foreground-placeholder: #737373; + --color-foreground-disabled: #474747; + --color-foreground-on-emphasis: #ffffff; + --color-foreground-inverted: #0a0a0a; + --color-foreground-highlight: #c7cffe; + --color-foreground-success: #4ade80; + --color-foreground-success-strong: #bbf7d0; + --color-foreground-success-disabled: #15803d; + --color-foreground-danger: #fb7185; + --color-foreground-danger-strong: #fecdd3; + --color-foreground-danger-disabled: #9f1239; + --color-foreground-warning: #fbbf24; + --color-foreground-warning-strong: #fde68a; + --color-foreground-warning-disabled: #b45309; + --color-foreground-info: #a5acfb; + --color-foreground-info-strong: #c7cffe; + --color-foreground-link-default: #ededed; + --color-foreground-link-hover: #a5acfb; + --color-foreground-link-disabled: #737373; + --color-foreground-link-danger: #fb7185; + --color-foreground-link-danger-hover: #fda4af; + --color-foreground-link-success: #22c55e; + --color-foreground-link-success-hover: #4ade80; + --color-foreground-link-warning: #f59e0b; + --color-foreground-link-warning-hover: #fbbf24; + --color-foreground-link-info: #8b85f7; + --color-foreground-link-info-hover: #a5acfb; + + --color-border-default: #262626; + --color-border-subtle: #1c1c1c; + --color-border-strong: #404040; + --color-border-disabled: #2a2a2a; + --color-border-focus: #8b85f7; + --color-border-focus-success: #22c55e; + --color-border-focus-danger: #f43f5e; + --color-border-success: #15803d; + --color-border-danger: #9f1239; + --color-border-navigation-item-active: #2a2a2a; + + --color-shadow-inner-strong: #000000; + --color-shadow-inner-strong-hover: #141414; + --color-shadow-inner-subtle: #0a0a0a; + --color-shadow-ambient-strong: rgb(0 0 0 / 0.35); + --color-shadow-ambient-subtle: rgb(0 0 0 / 0.2); + + --color-inverse-background: #ffffff; + --color-inverse-foreground: #171717; + --color-inverse-border: #e5e5e5; + --color-inverse-shadow-inner: #e5e5e5; /* --- terminal (Dark) --- catppuccin macchiato */ --color-ansi-black: #a5adcb; -- 2.51.2