From b28f34dec6684857ed90f3101aeaacc96129def2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 17 Apr 2025 15:22:01 -0500 Subject: [PATCH] Convert LCH var names --- app/assets/stylesheets/_global.css | 121 ++++++++++++++------------- app/assets/stylesheets/cards.css | 2 +- app/assets/stylesheets/dialog.css | 2 +- app/assets/stylesheets/terminals.css | 6 +- app/assets/stylesheets/trays.css | 2 +- public/406-unsupported-browser.html | 6 +- 6 files changed, 74 insertions(+), 65 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 5252d7c47..6537bb8c3 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -23,78 +23,87 @@ --border: 1px solid var(--color-subtle); /* Shadows */ - --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6); + --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02), + 0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2), + 0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3), + 0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4), + 0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5), + 0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6); /* Components */ --btn-size: 2.65em; /* Color values */ - --lch-ink: 27.13% 0.1035 284.77; - --lch-ink-inverted: 100% 0 0; + --lch-black: 0% 0 0; + --lch-white: 100% 0 0; - --lch-gray-light: 96% 0.005 96; - --lch-gray: 92% 0.005 96; - --lch-gray-dark: 75% 0.005 96; - --lch-blue: 54% 0.15 255; - --lch-blue-light: 95% 0.03 255; - --lch-blue-dark: 80% 0.08 255; - --lch-golden: 83% 0.1128 72.43; - --lch-orange: 70% 0.2 44; - --lch-red: 51% 0.2 31; - --lch-green: 65.59% 0.234 142.49; - --lch-green-light: 95% 0.03 142.49; - --lch-yellow: 92.62% 0.1 91.5; - --lch-always-black: 0% 0 0; - --lch-always-white: 100% 0 0; - --lch-light-blue: 84.94% 0.048 216.62; + --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-yellow-light: 83% 0.1128 72.43; + --lch-yellow-lighter: 92.62% 0.1 91.5; + + --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)); + --color-white: oklch(var(--lch-white)); + + --color-canvas: oklch(var(--lch-white)); + --color-ink: oklch(var(--lch-ink)); + --color-ink-inverted: oklch(var(--lch-ink-inverted)); - --color-canvas: oklch(var(--lch-ink-inverted)); + --color-negative: oklch(var(--lch-red-dark)); + --color-positive: oklch(var(--lch-green-medium)); + --color-positive-light: oklch(var(--lch-green-lightest)); - --color-negative: oklch(var(--lch-red)); - --color-positive: oklch(var(--lch-green)); - --color-positive-light: oklch(var(--lch-green-light)); - --color-link: oklch(var(--lch-blue)); - --color-subtle-light: oklch(var(--lch-gray-light)); - --color-subtle: oklch(var(--lch-gray)); - --color-subtle-dark: oklch(var(--lch-gray-dark)); - --color-selected: oklch(var(--lch-blue-light)); - --color-selected-dark: oklch(var(--lch-blue-dark)); - --color-highlight: oklch(var(--lch-yellow)); - --color-marker: oklch(var(--lch-orange)); - --color-always-black: oklch(var(--lch-always-black)); - --color-always-white: oklch(var(--lch-always-white)); - --color-container: oklch(var(--lch-light-blue)); - --color-golden: oklch(var(--lch-golden)); + --color-link: oklch(var(--lch-blue-dark)); + --color-subtle-light: oklch(var(--lch-ink-lightest)); + --color-subtle: oklch(var(--lch-ink-lighter)); + --color-subtle-dark: oklch(var(--lch-ink-medium)); + --color-selected: oklch(var(--lch-blue-lighter)); + --color-selected-dark: oklch(var(--lch-blue-light)); + --color-highlight: oklch(var(--lch-yellow-lighter)); + --color-marker: oklch(var(--lch-red-medium)); + --color-container: oklch(var(--lch-aqua-light)); + --color-golden: oklch(var(--lch-yellow-light)); @media (prefers-color-scheme: dark) { --lch-ink: 100% 0 0; --lch-ink-inverted: 0% 0 0; - --lch-gray-light: 25.2% 0 0; - --lch-gray: 30.12% 0 0; - --lch-gray-dark: 44.95% 0 0; - --lch-blue: 72.25% 0.16 248; - --lch-blue-light: 28.11% 0.053 248; - --lch-blue-dark: 42.25% 0.07 248; - --lch-red: 73.8% 0.184 29.18; - --lch-green: 75% 0.21 141.89; - --lch-green-light: 28.11% 0.02 142.49; - --lch-yellow: 40.9% 0.06 88.9; - --lch-light-blue: 20.62% 0.048 216.62; + --lch-ink-lightest: 25.2% 0 0; + --lch-ink-lighter: 30.12% 0 0; + --lch-ink-medium: 44.95% 0 0; + --lch-blue-dark: 72.25% 0.16 248; + --lch-blue-lighter: 28.11% 0.053 248; + --lch-blue-light: 42.25% 0.07 248; + --lch-red-dark: 73.8% 0.184 29.18; + --lch-green-medium: 75% 0.21 141.89; + --lch-green-lightest: 28.11% 0.02 142.49; + --lch-yellow-lighter: 40.9% 0.06 88.9; + --lch-aqua-light: 20.62% 0.048 216.62; - --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1); + --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42), + 0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6), + 0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7), + 0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8), + 0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9), + 0 1.2em 1.6em -2em oklch(var(--lch-black) / 1); } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 304ac51c2..a39b8b5ef 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -32,7 +32,7 @@ --border-color: var(--color-canvas) !important; background-color: var(--color-canvas); - background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%); + background-image: linear-gradient(90deg, oklch(var(--lch-yellow-light) / 0.5) 0%, oklch(var(--lch-yellow-light) / 0.1) 50%, oklch(var(--lch-yellow-light) / 0.75) 100%); box-shadow: 0 0 0.5em 0.2em var(--color-golden), 0 0 1em 0.4em var(--color-golden) !important; diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css index ea7e10e15..93d40ee1d 100644 --- a/app/assets/stylesheets/dialog.css +++ b/app/assets/stylesheets/dialog.css @@ -15,7 +15,7 @@ transform var(--speed); &::backdrop { - background-color: var(--color-always-black); + background-color: var(--color-black); opacity: 0; transform: scale(1); transition: diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index d431d3cfa..cf60ed210 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -12,7 +12,7 @@ z-index: 1; @media (prefers-color-scheme: dark) { - background-color: var(--color-always-black); + background-color: var(--color-black); border-block-start: 1px solid var(--color-subtle-dark); } @@ -29,12 +29,12 @@ font-family: inherit; &::placeholder { - color: var(--color-always-white); + color: var(--color-white); opacity: 0.5; } .terminal__link & { - color: var(--color-always-white); + color: var(--color-white); opacity: 0.5; } } diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 806ea2d61..ecd042d1c 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -61,7 +61,7 @@ .tray__actions { --border-style: dashed; - --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink)); + --border-color: color-mix(in srgb, var(--color-white) 40%, var(--color-ink)); --hover-size: 0; align-items: center; diff --git a/public/406-unsupported-browser.html b/public/406-unsupported-browser.html index 93c900dad..f78ac9454 100644 --- a/public/406-unsupported-browser.html +++ b/public/406-unsupported-browser.html @@ -13,10 +13,10 @@ body { --lch-ink: 0% 0 0; - --lch-gray: 75% 0.005 96; + --lch-ink-lighter: 75% 0.005 96; --lch-ink-inverted: 100% 0 0; - --color-border: oklch(var(--lch-gray)); + --color-border: oklch(var(--lch-ink-lighter)); --color-canvas: oklch(var(--lch-ink-inverted)); --color-text: oklch(var(--lch-ink)); @@ -33,7 +33,7 @@ @media (prefers-color-scheme: dark) { --lch-ink: 100% 0 0; - --lch-gray: 45% 0 0; + --lch-ink-lighter: 45% 0 0; --lch-ink-inverted: 0% 0 0; } }