From 82c2c4b5bd25f20f4ce131068c69bfa4f0aa5f60 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 17 Apr 2025 15:33:35 -0500 Subject: [PATCH] Add new light mode lch values --- app/assets/stylesheets/_global.css | 101 ++++++++++++++++++++++++----- 1 file changed, 86 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 6537bb8c3..3c3d90a37 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -37,27 +37,98 @@ --lch-black: 0% 0 0; --lch-white: 100% 0 0; - --lch-ink: 27.13% 0.1035 284.77; - --lch-ink-lightest: 96% 0.005 96; - --lch-ink-lighter: 92% 0.005 96; - --lch-ink-medium: 75% 0.005 96; - --lch-ink-inverted: var(--lch-white); - --lch-red-dark: 51% 0.2 31; - --lch-red-medium: 70% 0.2 44; + --lch-ink-darkest: 32% 0.008 260; + --lch-ink-darker: 42% 0.007 260; + --lch-ink-dark: 56.5% 0.006 260; + --lch-ink-medium: 70% 0.005 260; + --lch-ink-light: 84% 0.004 260; + --lch-ink-lighter: 92% 0.003 260; + --lch-ink-lightest: 96% 0.002 260; - --lch-yellow-light: 83% 0.1128 72.43; - --lch-yellow-lighter: 92.62% 0.1 91.5; + --lch-uncolor-darkest: 32% 0.018 40; + --lch-uncolor-darker: 42% 0.03 50; + --lch-uncolor-dark: 58% 0.04 60; + --lch-uncolor-medium: 70% 0.044 70; + --lch-uncolor-light: 84% 0.028 80; + --lch-uncolor-lighter: 92% 0.014 90; + --lch-uncolor-lightest: 96% 0.012 100; + + --lch-red-darkest: 32% 0.105 34; + --lch-red-darker: 43.1% 0.166 36; + --lch-red-dark: 59% 0.19 38; + --lch-red-medium: 70.4% 0.19 40; + --lch-red-light: 84% 0.07 42; + --lch-red-lighter: 92% 0.03 44; + --lch-red-lightest: 96% 0.013 48; + + --lch-yellow-darkest: 32% 0.0729 40; + --lch-yellow-darker: 42% 0.124 50; + --lch-yellow-dark: 58% 0.156 60; + --lch-yellow-medium: 76% 0.17 70; + --lch-yellow-light: 84% 0.12 80; + --lch-yellow-lighter: 92% 0.076 90; + --lch-yellow-lightest: 96% 0.034 100; + + --lch-lime-darkest: 32% 0.066 109; + --lch-lime-darker: 42% 0.104 110; + --lch-lime-dark: 56.5% 0.142 111; + --lch-lime-medium: 71% 0.158 112; + --lch-lime-light: 84% 0.08 113; + --lch-lime-lighter: 92% 0.046 114; + --lch-lime-lightest: 96% 0.034 115; + + --lch-green-darkest: 32% 0.0705 149; + --lch-green-darker: 42% 0.12 148; + --lch-green-dark: 55.5% 0.162 147; + --lch-green-medium: 70% 0.19 146; + --lch-green-light: 84% 0.07 145; + --lch-green-lighter: 92% 0.044 144; + --lch-green-lightest: 96% 0.022 143; + + --lch-aqua-darkest: 32% 0.059 214; + --lch-aqua-darker: 42% 0.097 212; + --lch-aqua-dark: 55.5% 0.122 210; + --lch-aqua-medium: 70% 0.13 208; + --lch-aqua-light: 84% 0.04 206; + --lch-aqua-lighter: 92% 0.02 204; + --lch-aqua-lightest: 96% 0.012 202; + + --lch-blue-darkest: 32% 0.106 264; + --lch-blue-darker: 42% 0.166 262; + --lch-blue-dark: 57% 0.19 260; + --lch-blue-medium: 70% 0.169 258; + --lch-blue-light: 84% 0.06 256; + --lch-blue-lighter: 92% 0.026 254; + --lch-blue-lightest: 96% 0.016 252; + + --lch-violet-darkest: 32% 0.144 292; + --lch-violet-darker: 42% 0.2 290; + --lch-violet-dark: 58% 0.216 288; + --lch-violet-medium: 70% 0.178 286; + --lch-violet-light: 84% 0.07 284.3; + --lch-violet-lighter: 92% 0.03 282; + --lch-violet-lightest: 96% 0.015 280; + + --lch-purple-darkest: 32% 0.127 314; + --lch-purple-darker: 42% 0.178 312; + --lch-purple-dark: 58% 0.21 310; + --lch-purple-medium: 70% 0.22 308; + --lch-purple-light: 84% 0.07 306; + --lch-purple-lighter: 92% 0.03 304; + --lch-purple-lightest: 96% 0.019 302; + + --lch-pink-darkest: 32% 0.12 348; + --lch-pink-darker: 42% 0.16 346; + --lch-pink-dark: 59% 0.188 344; + --lch-pink-medium: 70% 0.198 342; + --lch-pink-light: 84% 0.07 340; + --lch-pink-lighter: 92% 0.03 338; + --lch-pink-lightest: 96% 0.02 336; - --lch-green-medium: 65.59% 0.234 142.49; - --lch-green-lightest: 95% 0.03 142.49; - --lch-aqua-light: 84.94% 0.048 216.62; - --lch-blue-dark: 54% 0.15 255; - --lch-blue-light: 80% 0.08 255; - --lch-blue-lighter: 95% 0.03 255; /* Color abstractions */ --color-black: oklch(var(--lch-black));