From 5ee36e09e8519a5d1a5f3fd1a28d20c583fbfb01 Mon Sep 17 00:00:00 2001 From: eti Date: Thu, 1 Oct 2026 17:21:05 +0200 Subject: [PATCH] web: link color tokens to a retuned palette and a wool gray scale Signed-off-by: eti --- web/src/app.css | 519 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 370 insertions(+), 149 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index 87b2bf4fc..d8235634f 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -87,95 +87,316 @@ html { --container-page: 64rem; --container-hero: 80rem; - --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-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.082 171.826); + --color-green-100: oklch(96.2% 0.168 172.743); + --color-green-200: oklch(92.5% 0.296 171.995); + --color-green-300: oklch(87.1% 0.376 170.449); + --color-green-400: oklch(79.2% 0.398 167.711); + --color-green-500: oklch(72.3% 0.399 165.579); + --color-green-600: oklch(62.7% 0.394 165.214); + --color-green-700: oklch(52.7% 0.371 166.069); + --color-green-800: oklch(44.8% 0.347 167.328); + --color-green-900: oklch(39.3% 0.316 168.535); + --color-green-950: oklch(26.6% 0.254 168.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-info-emphasis-hover: #4a41e0; - --color-background-emphasis: #0a0a0a; + --color-background-emphasis: var(--color-wool-1500); /* --- 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: #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-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-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: #d4d4d4; - --color-shadow-inner-strong-hover: #d4d4d4; - --color-shadow-inner-subtle: #e5e5e5; + --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: rgb(0 0 0 / 0.08); --color-shadow-ambient-subtle: rgb(0 0 0 / 0.04); - --color-inverse-background: #262626; - --color-inverse-foreground: #f5f5f5; - --color-inverse-border: #404040; - --color-inverse-shadow-inner: #171717; + --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); --shadow-small: 0 1px 2px var(--color-shadow-ambient-strong); --shadow-regular: @@ -784,86 +1005,86 @@ html { :root { @variant dark { - --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-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-info-emphasis-hover: #837ef8; - --color-background-emphasis: #f5f5f5; + --color-background-emphasis: var(--color-wool-300); /* --- background / navigation (Dark) --- inverted vs light, see above */ - --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-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: 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; + --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); /* --- terminal (Dark) --- catppuccin macchiato */ --color-ansi-black: #a5adcb; -- 2.51.2