bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert LCH var names

Browse Source
This commit is contained in:
Andy Smith
2025-04-17 15:22:01 -05:00
parent e00edb444d
commit b28f34dec6
6 changed files with 74 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+65 -56
View File
@@ -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);
}
}
app/assets/stylesheets/cards.css
+1 -1
View File
@@ -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;
app/assets/stylesheets/dialog.css
+1 -1
View File
@@ -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:
app/assets/stylesheets/terminals.css
+3 -3
View File
@@ -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;
}
}
app/assets/stylesheets/trays.css
+1 -1
View File
@@ -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;
public/406-unsupported-browser.html
+3 -3
View File
@@ -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;
}
}