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

Merge pull request #415 from basecamp/colors

Browse Source 
Colors
This commit is contained in:
Jason Zimdars
2025-04-25 16:24:42 -05:00
committed by GitHub
parent f12970c697 0fa0622b06
commit 6ab31d7ad2
40 changed files with 379 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+237 -62
View File
@@ -20,78 +20,253 @@
--text-xx-large: 2.5rem;
/* Borders */
--border: 1px solid var(--color-subtle);
--border: 1px solid var(--color-ink-lighter);
/* 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-black: 27.13% 0.1035 284.77;
/* OKLCH colors: Fixed */
--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;
/* Color abstractions */
--color-negative: oklch(var(--lch-red));
--color-positive: oklch(var(--lch-green));
--color-positive-light: oklch(var(--lch-green-light));
--color-bg: oklch(var(--lch-white));
--color-ink: oklch(var(--lch-black));
--color-ink-reversed: oklch(var(--lch-white));
--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));
/* OKLCH colors: Light mode */
--lch-canvas: var(--lch-white);
--lch-ink-inverted: var(--lch-white);
--lch-ink-darkest: 26% 0.05 264;
--lch-ink-darker: 40% 0.026 262;
--lch-ink-dark: 57% 0.014 260;
--lch-ink-medium: 70% 0.008 258;
--lch-ink-light: 84% 0.005 256;
--lch-ink-lighter: 92% 0.003 254;
--lch-ink-lightest: 96% 0.002 252;
--lch-uncolor-darkest: 26% 0.018 40;
--lch-uncolor-darker: 40% 0.03 50;
--lch-uncolor-dark: 57% 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: 26% 0.105 34;
--lch-red-darker: 40% 0.154 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 46;
--lch-yellow-darkest: 26% 0.0729 40;
--lch-yellow-darker: 40% 0.12 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: 26% 0.064 109;
--lch-lime-darker: 40% 0.101 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: 26% 0.071 149;
--lch-green-darker: 40% 0.12 148;
--lch-green-dark: 55% 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: 26% 0.059 214;
--lch-aqua-darker: 40% 0.093 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: 26% 0.126 264;
--lch-blue-darker: 40% 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: 26% 0.148 292;
--lch-violet-darker: 40% 0.2 290;
--lch-violet-dark: 58% 0.216 288;
--lch-violet-medium: 70% 0.178 286;
--lch-violet-light: 84% 0.07 284;
--lch-violet-lighter: 92% 0.03 282;
--lch-violet-lightest: 96% 0.015 280;
--lch-purple-darkest: 26% 0.131 314;
--lch-purple-darker: 40% 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: 26% 0.12 348;
--lch-pink-darker: 40% 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;
/* Colors: Named */
--color-black: oklch(var(--lch-black));
--color-white: oklch(var(--lch-white));
--color-ink: oklch(var(--lch-ink-darkest));
--color-ink-darkest: oklch(var(--lch-ink-darkest));
--color-ink-darker: oklch(var(--lch-ink-darker));
--color-ink-dark: oklch(var(--lch-ink-dark));
--color-ink-medium: oklch(var(--lch-ink-medium));
--color-ink-light: oklch(var(--lch-ink-light));
--color-ink-lighter: oklch(var(--lch-ink-lighter));
--color-ink-lightest: oklch(var(--lch-ink-lightest));
--color-ink-inverted: oklch(var(--lch-ink-inverted));
/* Colors: Abstractions */
--color-canvas: oklch(var(--lch-canvas));
--color-negative: oklch(var(--lch-red-dark));
--color-positive: oklch(var(--lch-green-dark));
--color-link: oklch(var(--lch-blue-dark));
--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-terminal-bg: oklch(var(--lch-blue-darkest));
--color-terminal-text: oklch(var(--lch-green-medium));
/* Colors: Cards */
--color-card-1: oklch(var(--lch-ink-dark));
--color-card-2: oklch(var(--lch-uncolor-dark));
--color-card-3: oklch(var(--lch-yellow-dark));
--color-card-4: oklch(var(--lch-lime-dark));
--color-card-5: oklch(var(--lch-aqua-dark));
--color-card-6: oklch(var(--lch-blue-dark));
--color-card-7: oklch(var(--lch-violet-dark));
--color-card-8: oklch(var(--lch-purple-dark));
--color-card-9: oklch(var(--lch-pink-dark));
@media (prefers-color-scheme: dark) {
--lch-black: 100% 0 0;
--lch-white: 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-canvas: 20% 0.0195 232.58;
--lch-ink-inverted: var(--lch-black);
--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);
--lch-ink-darkest: 96.02% 0.0034 260;
--lch-ink-darker: 86% 0.0061 260;
--lch-ink-dark: 73.97% 0.009 260;
--lch-ink-medium: 62% 0.0122 260;
--lch-ink-light: 40% 0.0148 260;
--lch-ink-lighter: 30% 0.0178 260;
--lch-ink-lightest: 25% 0.0204 260;
--lch-uncolor-darkest: 96.09% 0.0076 100;
--lch-uncolor-darker: 86% 0.021 90;
--lch-uncolor-dark: 73.93% 0.041 80;
--lch-uncolor-medium: 62% 0.0552 70;
--lch-uncolor-light: 40% 0.0387 60;
--lch-uncolor-lighter: 30% 0.012 50;
--lch-uncolor-lightest: 25% 0.0017 40;
--lch-red-darkest: 95.85% 0.0218 46;
--lch-red-darker: 86% 0.086 44;
--lch-red-dark: 73.95% 0.139 42;
--lch-red-medium: 62% 0.154 40;
--lch-red-light: 40% 0.088 38;
--lch-red-lighter: 30% 0.032 36;
--lch-red-lightest: 25% 0.011 34;
--lch-yellow-darkest: 96% 0.056 100;
--lch-yellow-darker: 86% 0.103 90;
--lch-yellow-dark: 74.06% 0.136 80;
--lch-yellow-medium: 62.1% 0.146 70;
--lch-yellow-light: 40% 0.0736 60;
--lch-yellow-lighter: 30% 0.026 50;
--lch-yellow-lightest: 25% 0.01 40;
--lch-lime-darkest: 96.04% 0.066 115;
--lch-lime-darker: 86% 0.098 114;
--lch-lime-dark: 73.97% 0.121 113;
--lch-lime-medium: 62% 0.128 112;
--lch-lime-light: 40% 0.0637 111;
--lch-lime-lighter: 30% 0.024 110;
--lch-lime-lightest: 25% 0.012 109;
--lch-green-darkest: 96.12% 0.035 143;
--lch-green-darker: 86% 0.082 144;
--lch-green-dark: 73.99% 0.117 145;
--lch-green-medium: 62% 0.1261 146;
--lch-green-light: 40% 0.065 147;
--lch-green-lighter: 30% 0.03 148;
--lch-green-lightest: 25% 0.018 149;
--lch-aqua-darkest: 96.15% 0.0244 202;
--lch-aqua-darker: 86% 0.06 204;
--lch-aqua-dark: 73.92% 0.095 206;
--lch-aqua-medium: 62% 0.106 208;
--lch-aqua-light: 40% 0.0594 210;
--lch-aqua-lighter: 30% 0.028 212;
--lch-aqua-lightest: 25% 0.017 214;
--lch-blue-darkest: 95.93% 0.0217 252;
--lch-blue-darker: 86% 0.068 254;
--lch-blue-dark: 74% 0.1293 256;
--lch-blue-medium: 62% 0.159 258;
--lch-blue-light: 40% 0.094 260;
--lch-blue-lighter: 30% 0.0452 262;
--lch-blue-lightest: 25% 0.0318 264;
--lch-violet-darkest: 95.97% 0.019 280;
--lch-violet-darker: 86% 0.068 282;
--lch-violet-dark: 74.08% 0.142 284;
--lch-violet-medium: 62% 0.184 286;
--lch-violet-light: 40% 0.108 288;
--lch-violet-lighter: 30% 0.048 290;
--lch-violet-lightest: 25% 0.025 292;
--lch-purple-darkest: 95.99% 0.0217 302;
--lch-purple-darker: 86% 0.068 304;
--lch-purple-dark: 73.98% 0.141 306;
--lch-purple-medium: 62% 0.177 308;
--lch-purple-light: 40% 0.099 310;
--lch-purple-lighter: 30% 0.04 312;
--lch-purple-lightest: 25% 0.017 314;
--lch-pink-darkest: 95.84% 0.0308 336;
--lch-pink-darker: 86% 0.074 338;
--lch-pink-dark: 74.04% 0.1294 340;
--lch-pink-medium: 62% 0.166 342;
--lch-pink-light: 40% 0.085 344;
--lch-pink-lighter: 30% 0.03 346;
--lch-pink-lightest: 25% 0.011 348;
--color-container: oklch(var(--lch-aqua-lighter));
--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/base.css
+2 -2
View File
@@ -11,14 +11,14 @@
--font-sans: system-ui;
--font-serif: ui-serif, serif;
--font-mono: ui-monospace, monospace;
--hover-color: var(--color-subtle-dark);
--hover-color: var(--color-ink-medium);
--hover-size: 0.15rem;
--hover-filter: brightness(1);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
background: var(--color-bg);
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
interpolate-size: allow-keywords;
app/assets/stylesheets/buttons.css
+8 -8
View File
@@ -4,9 +4,9 @@
--btn-border-radius: 2em;
align-items: center;
background-color: var(--btn-background, var(--color-bg));
background-color: var(--btn-background, var(--color-canvas));
border-radius: var(--btn-border-radius);
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
color: var(--btn-color, var(--color-ink));
cursor: pointer;
display: inline-flex;
@@ -112,7 +112,7 @@
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-ink);
.checked {
@@ -137,13 +137,13 @@
/* Variants */
.btn--link {
--btn-background: var(--color-link);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-link);
}
.btn--negative {
--btn-background: var(--color-negative);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-negative);
}
@@ -163,7 +163,7 @@
.btn--positive {
--btn-background: var(--color-positive);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-positive);
}
@@ -173,12 +173,12 @@
.btn--reversed {
--btn-background: var(--color-ink);
--btn-color: var(--color-bg);
--btn-color: var(--color-canvas);
--outline-color: var(--color-ink);
}
:is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
--btn-border-color: var(--color-bg);
--btn-border-color: var(--color-canvas);
}
.btn--success {
app/assets/stylesheets/card-columns.css
+5 -9
View File
@@ -10,7 +10,7 @@
}
.card-columns {
border-block-start: 1px solid var(--color-subtle);
border-block-start: 1px solid var(--color-ink-lighter);
display: grid;
grid-template-columns: repeat(2, 50%);
margin: auto;
@@ -77,14 +77,10 @@
--text-xx-large: 1.6em;
--text-small: 1.1em;
background-color: var(--color-bg);
box-shadow: 0 0 0 1px var(--color-subtle);
background-color: var(--color-canvas);
box-shadow: 0 0 0 1px var(--color-ink-lighter);
line-height: 1.2;
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 1px var(--color-subtle-dark);
}
.avatar {
block-size: 2.75em;
inline-size: 2.75em;
@@ -92,7 +88,7 @@
}
.card--drafted {
--card-color: var(--color-subtle-dark) !important;
--card-color: var(--color-ink-medium) !important;
border-color: var(--card-color) !important;
border-style: dashed !important;
@@ -125,7 +121,7 @@
/* -------------------------------------------------------------------------- */
.cards--closed {
border-block-start: 1px solid var(--color-subtle);
border-block-start: 1px solid var(--color-ink-lighter);
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
app/assets/stylesheets/card-perma.css
+4 -4
View File
@@ -4,7 +4,7 @@
.card-perma {
--actions-block-inset: 1.5rem;
--actions-inline-inset: 4rem;
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
--padding-inline: calc(var(--block-space-double) + var(--block-space));
--padding-block: calc(var(--block-space-double) + var(--block-space-half));
@@ -96,7 +96,7 @@
&:has(input:checked) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
}
}
}
@@ -111,7 +111,7 @@
.btn:not(.popup__item, .btn--plain, .btn--reversed) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
}
.btn--plain {
@@ -121,7 +121,7 @@
}
.btn--reversed {
--btn-background: var(--color-bg);
--btn-background: var(--color-canvas);
--btn-color: var(--card-color);
}
}
app/assets/stylesheets/cards.css
+20 -14
View File
@@ -7,7 +7,7 @@
--border-size: 0;
aspect-ratio: var(--card-aspect-ratio, auto);
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
border-radius: 0.5em;
box-shadow: var(--shadow);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -22,21 +22,27 @@
.avatar {
--avatar-size: 2.75em;
}
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
}
}
.card--golden.card--doing {
--border-color: var(--color-bg) !important;
--border-color: var(--color-canvas) !important;
--lch-golden: var(--lch-yellow-light);
background-color: var(--color-bg);
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-color: var(--color-canvas);
background-image: linear-gradient(60deg,
oklch(var(--lch-golden) / 0.35) 0%,
oklch(var(--lch-golden) / 0.15) 20%,
oklch(var(--lch-golden) / 0) 60%,
oklch(var(--lch-golden) / 0.5) 100%
);
box-shadow:
0 0 0.5em 0.2em var(--color-golden),
0 0 1em 0.4em var(--color-golden) !important;
outline: 1px solid var(--color-golden);
0 0 0.5em 0.2em oklch(var(--lch-golden) / 0.35),
0 0 1em 0.4em oklch(var(--lch-golden) / 0.35) !important;
outline: 1px solid oklch(var(--lch-golden) / 0.35);
@media (prefers-color-scheme: dark) {
--lch-golden: var(--lch-blue-medium);
}
}
.card__background {
@@ -165,7 +171,7 @@
--btn-icon-size: 1em;
--card-padding-block: calc(var(--block-space) * 1.25);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-bg));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
color: var(--btn-color);
font-weight: 700;
@@ -225,7 +231,7 @@
.card__closed {
align-items: center;
aspect-ratio: 8/5;
background-color: var(--color-bg);
background-color: var(--color-canvas);
border: var(--block-space-half) solid var(--card-color);
border-radius: 0.2em;
color: var(--card-color);
@@ -250,7 +256,7 @@
}
.card__closed-title {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-size: 1.5em;
font-weight: 900;
line-height: 1.2;
app/assets/stylesheets/color-picker.css
+3 -20
View File
@@ -2,34 +2,17 @@
--panel-border-color: var(--card-color);
--panel-border-radius: 2em;
--panel-border-size: 2px;
--panel-padding: 0.5em 0.7em;
--panel-padding: 0.5em;
--panel-size: auto;
inline-size: auto !important;
inset: 0 auto auto 0;
inset: 50% auto auto calc(-1 * var(--panel-padding));
max-inline-size: var(--panel-size) !important;
position: absolute;
translate: 0 -50%;
z-index: 2;
&[open] {
display: flex;
}
.color-picker__color {
--btn-size: 2em;
}
}
.color-picker__button {
font-size: 0.75em;
.cards & {
display: none;
}
+ .panel {
--panel-size: auto;
inset: 0 0 auto auto;
}
}
app/assets/stylesheets/comments.css
+1 -1
View File
@@ -63,7 +63,7 @@
}
.comment__content {
background-color: var(--color-subtle-light);
background-color: var(--color-ink-lightest);
border-radius: 0.2em;
padding:
var(--comment-padding-block)
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/events.css
+3 -3
View File
@@ -16,7 +16,7 @@
}
.events__day-header {
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: var(--grid-lines);
display: block;
position: relative;
@@ -24,7 +24,7 @@
}
.events__day-header-content {
background-color: var(--color-bg);
background-color: var(--color-canvas);
display: inline-flex;
font-size: 0.8em;
inset: calc(var(--grid-lines) - 1em) auto -1em;
@@ -54,7 +54,7 @@
.events--none {
background-color: var(--color-container);
border-block-start: var(--grid-lines) solid var(--color-bg);
border-block-start: var(--grid-lines) solid var(--color-canvas);
padding-block: 3em;
margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
}
app/assets/stylesheets/expander.css
+1 -1
View File
@@ -107,6 +107,6 @@
&:hover,
&:focus-visible {
background-color: oklch(var(--lch-white) / 15%);
background-color: oklch(var(--lch-canvas) / 15%);
}
}
app/assets/stylesheets/filters.css
+1 -1
View File
@@ -67,7 +67,7 @@
block-size: 100%;
border-block: 0;
border-inline-end: 0;
border-inline-start: 1px solid var(--color-subtle);
border-inline-start: 1px solid var(--color-ink-lighter);
content: "";
display: inline-flex;
inline-size: 0;
app/assets/stylesheets/flash.css
+1 -1
View File
@@ -12,7 +12,7 @@
animation: appear-then-fade 3s 300ms both;
background-color: var(--flash-background, var(--color-ink));
border-radius: 4em;
color: var(--flash-color, var(--color-ink-reversed));
color: var(--flash-color, var(--color-ink-inverted));
display: inline-flex;
font-size: var(--font-size-medium);
margin: 0 auto;
app/assets/stylesheets/house.css
+7 -7
View File
@@ -15,7 +15,7 @@
/* Toolbar */
house-md-toolbar {
background-color: inherit;
border-block-end: 1px solid var(--color-subtle-dark);
border-block-end: 1px solid var(--color-ink-medium);
border-radius: 0;
color: currentColor;
display: inline-flex;
@@ -49,7 +49,7 @@
}
&:is(:focus, :hover) {
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
}
&:is(:active) {
@@ -94,7 +94,7 @@
&[status="failed"] {
background-color: var(--color-negative);
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-weight: bold;
padding: 0.5em;
}
@@ -113,13 +113,13 @@
cursor: pointer;
house-md-upload[status="failed"] & {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
display: inline-block;
}
&::before {
content: '×';
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-size: 24px;
font-weight: bold;
position: absolute;
@@ -140,7 +140,7 @@
.md-progress-bar {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
border-radius: 0.5em;
block-size: 1ex;
display: block;
@@ -155,7 +155,7 @@
&::-webkit-progress-bar {
border-radius: 0.5em;
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
}
&::-webkit-progress-inner-element {
app/assets/stylesheets/inputs.css
+6 -6
View File
@@ -4,7 +4,7 @@
accent-color: var(--input-accent-color, var(--color-ink));
background-color: var(--input-background, transparent);
border-radius: var(--input-border-radius, 0.5em);
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
color: var(--input-color, var(--color-ink));
font-size: max(16px, 1em);
inline-size: 100%;
@@ -96,7 +96,7 @@
}
option {
background-color: var(--color-bg);
background-color: var(--color-canvas);
color: var(--color-ink);
}
}
@@ -140,7 +140,7 @@
&:has(:focus-visible) {
.switch__btn {
box-shadow:
0 0 0 var(--outline-size) var(--color-bg),
0 0 0 var(--outline-size) var(--color-canvas),
0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
}
}
@@ -153,7 +153,7 @@
}
.switch__btn {
background-color: var(--color-subtle-dark);
background-color: var(--color-ink-medium);
border-radius: 2em;
cursor: pointer;
inset: 0;
@@ -161,7 +161,7 @@
transition: 150ms ease;
&::before {
background-color: var(--color-ink-reversed);
background-color: var(--color-ink-inverted);
block-size: 1.35em;
border-radius: 50%;
content: "";
@@ -173,7 +173,7 @@
}
.switch__input:disabled + & {
background-color: var(--color-subtle-dark) !important;
background-color: var(--color-ink-medium) !important;
cursor: not-allowed;
}
app/assets/stylesheets/layout.css
+2 -2
View File
@@ -53,7 +53,7 @@
}
a:not([class]) {
background-color: var(--color-subtle-light);
background-color: var(--color-ink-lightest);
border-radius: 2em;
color: var(--color-ink);
font-weight: 500;
@@ -62,7 +62,7 @@
@media (hover: hover) {
&:hover {
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
text-decoration: none;
}
}
app/assets/stylesheets/lightbox.css
+1 -1
View File
@@ -2,7 +2,7 @@
.lightbox {
--backdrop-speed: 150ms;
background-color: oklch(var(--lch-white) / 0.66);
background-color: oklch(var(--lch-canvas) / 0.66);
block-size: 100dvh;
border: 0;
inline-size: 100dvw;
app/assets/stylesheets/markdown-content.css
+4 -4
View File
@@ -27,7 +27,7 @@
}
:where(hr) {
border-color: var(--color-subtle-dark);
border-color: var(--color-ink-medium);
border-style: var(--border-style, solid) none none;
margin: 2lh auto;
}
@@ -37,8 +37,8 @@
}
:is(pre, code, .pre, .code) {
background-color: var(--color-subtle-light);
border: 1px solid var(--color-subtle);
background-color: var(--color-ink-lightest);
border: 1px solid var(--color-ink-lighter);
border-radius: 0.3em;
font-family: var(--font-mono);
font-size: 0.85em;
@@ -80,7 +80,7 @@
}
:where(table, th, td) {
border: 1px solid var(--color-subtle-dark);
border: 1px solid var(--color-ink-medium);
}
:where(table) {
app/assets/stylesheets/notifications.css
+5 -5
View File
@@ -46,11 +46,11 @@
padding: var(--padding);
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
--border-color: var(--color-ink-medium);
}
.notificiations-list--read & {
--border-color: var(--color-subtle);
--border-color: var(--color-ink-lighter);
box-shadow: none !important;
}
@@ -62,7 +62,7 @@
.notification__unread_indicator {
--btn-background: var(--color-marker);
--btn-border-color: var(--color-bg);
--btn-border-color: var(--color-canvas);
--btn-icon-size: 0.7em;
--btn-padding: 0;
--btn-size: 1.2em;
@@ -78,8 +78,8 @@
@media (hover: hover) {
&:hover {
--btn-background: var(--color-subtle-dark);
--btn-border-color: var(--color-subtle-dark);
--btn-background: var(--color-ink-medium);
--btn-border-color: var(--color-ink-medium);
scale: 1;
app/assets/stylesheets/panels.css
+2 -6
View File
@@ -1,16 +1,12 @@
@layer components {
.panel {
background-color: var(--color-bg);
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
background-color: var(--color-canvas);
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
border-radius: var(--panel-border-radius, 1em);
color: var(--color-ink);
inline-size: var(--panel-size, 60ch);
max-inline-size: 100%;
padding: var(--panel-padding, calc(var(--block-space) * 2));
@media (prefers-color-scheme: dark) {
--panel-border-color: var(--color-subtle-dark);
}
}
.panels--two-up {
app/assets/stylesheets/pins.css
+1 -1
View File
@@ -30,7 +30,7 @@
--block-space-half: 0.5em;
--text-xx-large: 2em;
border: 1px solid var(--color-bg);
border: 1px solid var(--color-canvas);
view-transition-name: unset !important;
}
app/assets/stylesheets/popup.css
+2 -2
View File
@@ -24,7 +24,7 @@
}
.popup__group {
background: var(--color-subtle-light);
background: var(--color-ink-lightest);
max-inline-size: 100%;
padding-inline: var(--inline-space);
@@ -40,7 +40,7 @@
}
.popup__item {
--btn-background: var(--color-subtle-light);
--btn-background: var(--color-ink-lightest);
--btn-border-radius: 0.3em;
--btn-border-size: 0;
--btn-font-weight: 500;
app/assets/stylesheets/reactions.css
+3 -3
View File
@@ -1,7 +1,7 @@
@layer components {
.reactions {
--column-gap: 0.4ch;
--reaction-border-color: var(--color-subtle);
--reaction-border-color: var(--color-ink-lighter);
--row-gap: 0;
margin-block-start: calc(var(--block-space-half) / 2);
@@ -30,7 +30,7 @@
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--reaction-border-color: var(--color-subtle-dark);
--reaction-border-color: var(--color-ink-medium);
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
}
@@ -52,7 +52,7 @@
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--reaction-border-color: var(--color-subtle-dark);
--reaction-border-color: var(--color-ink-medium);
}
}
}
app/assets/stylesheets/syntax.css
+2 -2
View File
@@ -39,7 +39,7 @@
}
.gr {
color: var(--color-subtle-light);
color: var(--color-ink-lightest);
}
.gd {
@@ -83,7 +83,7 @@
}
.err {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
background-color: var(--markup-deleted);
}
app/assets/stylesheets/terminals.css
+10 -10
View File
@@ -2,8 +2,8 @@
.terminal {
--row-gap: 0.2lh;
background-color: var(--color-ink);
color: var(--color-positive);
background-color: var(--color-terminal-bg);
color: var(--color-terminal-text);
font-family: var(--font-mono);
font-size: var(--text-normal);
inset: auto 0 0 0;
@@ -12,29 +12,29 @@
z-index: 1;
@media (prefers-color-scheme: dark) {
background-color: var(--color-always-black);
border-block-start: 1px solid var(--color-subtle-dark);
background-color: var(--color-black);
border-block-start: 1px solid var(--color-ink-lighter);
}
.terminal__input {
--input-border-color: transparent;
--input-border-radius: 0.3em;
--hover-color: transparent;
--input-color: var(--color-positive);
--input-color: var(--color-terminal-text);
--outline-size: 0;
--outline-color: transparent;
accent-color: var(--color-positive);
caret-color: var(--color-positive);
accent-color: var(--color-terminal-text);
caret-color: var(--color-terminal-text);
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;
}
}
@@ -43,7 +43,7 @@
.terminal__link {
--hover-size: 0;
color: var(--color-positive);
color: var(--color-terminal-text);
}
.terminal__menu {
app/assets/stylesheets/trays.css
+2 -2
View File
@@ -61,11 +61,11 @@
.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;
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
display: flex;
gap: var(--inline-space-half);
justify-content: space-between;
app/assets/stylesheets/utilities.css
+9 -9
View File
@@ -14,9 +14,9 @@
.txt-align-end { text-align: end; }
.txt-ink { color: var(--color-ink); }
.txt-reversed { color: var(--color-ink-reversed); }
.txt-reversed { color: var(--color-ink-inverted); }
.txt-negative { color: var(--color-negative); }
.txt-subtle { color: var(--color-subtle-dark); }
.txt-subtle { color: var(--color-ink-medium); }
.txt-alert { color: var(--color-marker); }
.txt-undecorated { text-decoration: none; }
.txt-tight-lines { line-height: 1.2; }
@@ -148,10 +148,10 @@
.position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }
/* Fills */
.fill { background-color: var(--color-bg); }
.fill { background-color: var(--color-canvas); }
.fill-black { background-color: var(--color-ink); }
.fill-white { background-color: var(--color-ink-reversed); }
.fill-shade { background-color: var(--color-subtle-light); }
.fill-white { background-color: var(--color-ink-inverted); }
.fill-shade { background-color: var(--color-ink-lightest); }
.fill-selected { background-color: var(--color-selected); }
.fill-highlight { background-color: var(--color-highlight); }
.fill-transparent { background-color: transparent; }
@@ -159,10 +159,10 @@
.translucent { opacity: var(--opacity, 0.66); }
/* Borders */
.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.borderless { border: 0; }
/* Border radius */
app/assets/stylesheets/workflows.css
+1 -1
View File
@@ -20,7 +20,7 @@
.workflow-stage--current {
--btn-background: var(--card-color);
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
@media (hover: hover) {
&:hover {
app/views/cards/_messages.html.erb
+1 -1
View File
@@ -16,7 +16,7 @@
</div>
<div class="txt-align-center full-width flex flex-column margin-block-start-double">
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-subtle)">
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
<%= button_to_delete_card(@card) %>
</div>
</div>
app/views/collections/_access_toggle.erb
+1 -1
View File
@@ -9,7 +9,7 @@
</div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<%= icon_tag "check", class: "toggler__visible-when-on margin-inline-end" %>
app/views/collections/edit.html.erb
+2 -2
View File
@@ -33,10 +33,10 @@
<div class="panel shadow center flex flex-column">
<%= render "collections/edit/auto_close", collection: @collection %>
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-subtle);" aria-hidden="true" />
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
<%= render "collections/edit/workflows", collection: @collection %>
<hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle); margin-block-start: auto;" aria-hidden="true" />
<hr class="separator--horizontal full-width" style="--border-color: var(--color-ink-medium); margin-block-start: auto;" aria-hidden="true" />
<%= form_with model: @collection, class: "txt-align-center", method: :delete do |form| %>
<%= form.button class: "btn txt-negative borderless txt-small", data: { turbo_confirm: "Are you sure you want to permanently delete this Collection?" } do %>
app/views/collections/edit/_users.html.erb
+2 -2
View File
@@ -10,7 +10,7 @@
<div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
<label for="collection_all_access" class="switch">
<%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
@@ -19,7 +19,7 @@
</label>
</li>
<hr class="separator--horizontal margin-inline" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
<hr class="separator--horizontal margin-inline" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
<% if User.active.count > 20 %>
<div class="pad-inline">
app/views/events/event/_layout.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<%= link_to event.notifiable_target,
class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg));
style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
data: { related_element_target: "related",
related_element_group_value: card.id,
app/views/filters/_dialog.html.erb
+1 -1
View File
@@ -31,7 +31,7 @@
<% end %>
</div>
<%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %>
<%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-ink-lighter)" do %>
<% Array(params[:terms]).each do |term| %>
<%= hidden_field_tag "terms[]", term, id: nil %>
<% end %>
app/views/notifications/settings/_collection.html.erb
+1 -1
View File
@@ -4,7 +4,7 @@
<%= collection.name %>
</h2>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<label class="switch flex-item-no-shrink">
<%= access_involvement_advance_button(collection, user) %>
app/views/tags/index.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<h1>All tags</h1>
<ul class="txt-align-start">
<% @tags.each do |tag| %>
<li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-subtle)">
<li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-ink-lighter)">
<span>
<strong class="txt-nowrap"><%= tag.title %></strong>
</span>
app/views/users/_user.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
<%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
</strong>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
<label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>" arial-label="Role: <%= user.admin? ? "Administrator" : "Member" %>">
app/views/workflows/_workflow.html.erb
+2 -2
View File
@@ -8,9 +8,9 @@
<% end %>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
<div class="flex flex-column gap margin-block-start">
<div class="flex flex-column gap-half margin-block-start">
<%= turbo_frame_tag dom_id(workflow, :stages) do %>
<%= render partial: "workflows/stages/stage", collection: workflow.stages %>
app/views/workflows/stages/_color.html.erb
+9 -9
View File
@@ -1,14 +1,21 @@
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--reversed txt-x-small" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
<button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
<%= icon_tag "art" %>
<span class="for-screen-reader">Change color</span>
</button>
<dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<form method="dialog">
<button class="btn txt-small" title="Close (esc)">
<%= icon_tag "remove" %>
<span class="for-screen-reader">Close</span>
</button>
</form>
<%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
<% Card::COLORS.each do |color| %>
<span class="color-picker__color">
<label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= color %>">
<label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
<%= form.radio_button :color, color %>
<%= icon_tag "check", class: "checked" %>
<span class="for-screen-reader"><%= color %></span>
@@ -16,12 +23,5 @@
</span>
<% end %>
<% end %>
<form method="dialog">
<button class="btn txt-small" title="Close (esc)">
<%= icon_tag "remove" %>
<span class="for-screen-reader">Close</span>
</button>
</form>
</dialog>
</div>
public/406-unsupported-browser.html
+13 -13
View File
@@ -12,17 +12,17 @@
}
body {
--lch-black: 0% 0 0;
--lch-gray: 75% 0.005 96;
--lch-white: 100% 0 0;
--lch-ink: 0% 0 0;
--lch-ink-lighter: 75% 0.005 96;
--lch-ink-inverted: 100% 0 0;
--color-border: oklch(var(--lch-gray));
--color-bg: oklch(var(--lch-white));
--color-text: oklch(var(--lch-black));
--color-border: oklch(var(--lch-ink-lighter));
--color-canvas: oklch(var(--lch-ink-inverted));
--color-text: oklch(var(--lch-ink));
--btn-size: 2.65em;
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: 100dvh;
color: var(--color-text);
display: grid;
@@ -32,9 +32,9 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@media (prefers-color-scheme: dark) {
--lch-black: 100% 0 0;
--lch-gray: 44.95% 0 0;
--lch-white: 0% 0 0;
--lch-ink: 100% 0 0;
--lch-ink-lighter: 45% 0 0;
--lch-ink-inverted: 0% 0 0;
}
}
@@ -65,12 +65,12 @@
inline-size: 30dvh;
svg {
fill: var(--color-bg);
fill: var(--color-canvas);
grid-area: 1/1;
max-inline-size: 66%;
@media (prefers-color-scheme: dark) {
fill: var(--color-bg);
fill: var(--color-canvas);
}
}
}
@@ -91,7 +91,7 @@
.btn {
align-items: center;
aspect-ratio: 1;
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: var(--btn-size);
border-radius: 50%;
border: 1px solid var(--color-border);