Andy Smith
101 lines
3.4 KiB
CSS
101 lines
3.4 KiB
CSS
@layer reset, base, components, modules, utilities;
|
|
|
|
:root {
|
|
/* Spacing */
|
|
--inline-space: 1ch;
|
|
--inline-space-half: calc(var(--inline-space) / 2);
|
|
--inline-space-double: calc(var(--inline-space) * 2);
|
|
--block-space: 1rem;
|
|
--block-space-half: calc(var(--block-space) / 2);
|
|
--block-space-double: calc(var(--block-space) * 2);
|
|
|
|
/* Text */
|
|
--text-xx-small: 0.55rem;
|
|
--text-x-small: 0.7rem;
|
|
--text-small: 0.8rem;
|
|
--text-normal: 1rem;
|
|
--text-medium: 1.1rem;
|
|
--text-large: 1.5rem;
|
|
--text-x-large: 1.8rem;
|
|
--text-xx-large: 2.5rem;
|
|
|
|
/* Borders */
|
|
--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);
|
|
|
|
/* Components */
|
|
--btn-size: 2.65em;
|
|
|
|
/* Color values */
|
|
--lch-ink: 27.13% 0.1035 284.77;
|
|
--lch-ink-inverted: 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-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));
|
|
--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));
|
|
|
|
@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;
|
|
|
|
--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);
|
|
}
|
|
}
|