295 lines
No EOL
8.6 KiB
SCSS
295 lines
No EOL
8.6 KiB
SCSS
/* Catppuccin Mocha */
|
|
:root[data-theme="mocha"], :root {
|
|
--color-surface-0: #313244;
|
|
/* Base */
|
|
--color-surface-1: #45475a;
|
|
/* Mantle */
|
|
--color-surface-2: #585b70;
|
|
/* Surface */
|
|
--color-text: #cdd6f4;
|
|
--color-base: #1e1e2e;
|
|
/* Text */
|
|
--color-accent: #a6e3a1;
|
|
/* Green */
|
|
--color-accent-hover: #89d58d;
|
|
/* Hover Green */
|
|
--color-border: #585b70;
|
|
/* Overlay */
|
|
--color-rosewater: #f5e0dc;
|
|
--color-flamingo: #f2cdcd;
|
|
--color-pink: #f5c2e7;
|
|
--color-mauve: #cba6f7;
|
|
--color-red: #f38ba8;
|
|
--color-maroon: #eba0ac;
|
|
--color-peach: #fab387;
|
|
--color-yellow: #f9e2af;
|
|
--color-teal: #94e2d5;
|
|
--color-sky: #89dceb;
|
|
--color-sapphire: #74c7ec;
|
|
--color-blue: #89b4fa;
|
|
--color-lavender: #b4befe;
|
|
--color-overlay-0: #6c7086;
|
|
--color-overlay-1: #7f849c;
|
|
--color-overlay-2: #9399b2;
|
|
}
|
|
|
|
/* Catppuccin Latte */
|
|
:root[data-theme="latte"] {
|
|
--color-surface-0: #ccd0da;
|
|
/* Base */
|
|
--color-surface-1: #bcc0cc;
|
|
/* Mantle */
|
|
--color-surface-2: #acb0be;
|
|
/* Surface */
|
|
--color-text: #4c4f69;
|
|
--color-base: #eff1f5;
|
|
/* Text */
|
|
--color-accent: #d7827e;
|
|
/* Peach */
|
|
--color-accent-hover: #e04f58;
|
|
/* Hover Peach */
|
|
--color-border: #9ca0b0;
|
|
/* Overlay */
|
|
--color-rosewater: #dc8a78;
|
|
--color-flamingo: #dd7878;
|
|
--color-pink: #ea76cb;
|
|
--color-mauve: #8839ef;
|
|
--color-red: #d20f39;
|
|
--color-maroon: #e64553;
|
|
--color-peach: #fe640b;
|
|
--color-yellow: #df8e1d;
|
|
--color-teal: #40a02b;
|
|
--color-sky: #04a5e5;
|
|
--color-sapphire: #209fb5;
|
|
--color-blue: #1e66f5;
|
|
--color-lavender: #7287fd;
|
|
--color-overlay-0: #6c6f85;
|
|
--color-overlay-1: #8c8fa1;
|
|
--color-overlay-2: #9ca0b0;
|
|
}
|
|
|
|
:root[data-theme="yule-night"] {
|
|
--color-surface-0: #1b1d28;
|
|
/* Deep midnight */
|
|
--color-surface-1: #252936;
|
|
/* Frosty steel */
|
|
--color-surface-2: #343a48;
|
|
/* Snow shadow */
|
|
--color-text: #d4e6f4;
|
|
/* Pale moonlight */
|
|
--color-accent: #a3cf8e;
|
|
/* Pine green */
|
|
--color-accent-hover: #7fb36a;
|
|
/* Mistletoe */
|
|
--color-border: #475266;
|
|
/* Frosty edges */
|
|
}
|
|
|
|
:root[data-theme="yule-day"] {
|
|
--color-surface-0: #f5f3ed;
|
|
/* Fresh snow */
|
|
--color-surface-1: #ece7df;
|
|
/* Frosty beige */
|
|
--color-surface-2: #dcd3c3;
|
|
/* Hearth ash */
|
|
--color-text: #4e4b43;
|
|
/* Warm bark */
|
|
--color-accent: #7ea86a;
|
|
/* Pine green */
|
|
--color-accent-hover: #577a46;
|
|
/* Darker pine */
|
|
--color-border: #9d9684;
|
|
/* Frosted wood */
|
|
}
|
|
|
|
:root[data-theme="midsummer-twilight"] {
|
|
--color-surface-0: #241f36;
|
|
/* Starry violet */
|
|
--color-surface-1: #2e2746;
|
|
/* Dusky purple */
|
|
--color-surface-2: #403659;
|
|
/* Twilight shadow */
|
|
--color-text: #f6d8e8;
|
|
/* Fading pink */
|
|
--color-accent: #ffd983;
|
|
/* Sunflower gold */
|
|
--color-accent-hover: #f4be5c;
|
|
/* Saffron yellow */
|
|
--color-border: #6b5a89;
|
|
/* Lavender dusk */
|
|
}
|
|
|
|
:root[data-theme="midsummer-daylight"] {
|
|
--color-surface-0: #faf8eb;
|
|
/* Bright sunlight */
|
|
--color-surface-1: #f2e7c4;
|
|
/* Sunlit field */
|
|
--color-surface-2: #e6d399;
|
|
/* Wheat gold */
|
|
--color-text: #3b3a24;
|
|
/* Tree bark */
|
|
--color-accent: #f5c34e;
|
|
/* Summer gold */
|
|
--color-accent-hover: #d69a30;
|
|
/* Sunset orange */
|
|
--color-border: #a38a5b;
|
|
/* Golden shadows */
|
|
}
|
|
|
|
:root[data-theme="fireworks-night"] {
|
|
--color-surface-0: #0a0e1a;
|
|
/* Starry sky */
|
|
--color-surface-1: #121b32;
|
|
/* Midnight blue */
|
|
--color-surface-2: #1f2945;
|
|
/* Smoke cloud */
|
|
--color-text: #ffffff;
|
|
/* Brilliant white */
|
|
--color-accent: #ff4c4c;
|
|
/* Firework red */
|
|
--color-accent-hover: #ff726f;
|
|
/* Flaming red */
|
|
--color-border: #3b4e7e;
|
|
/* Steel blue */
|
|
}
|
|
|
|
:root[data-theme="parade-day"] {
|
|
--color-surface-0: #fafafa;
|
|
/* White fabric */
|
|
--color-surface-1: #eaeaea;
|
|
/* Pale silver */
|
|
--color-surface-2: #c9d3e3;
|
|
/* Cerulean mist */
|
|
--color-text: #2b2b2b;
|
|
/* Midnight blue */
|
|
--color-accent: #ff3b3b;
|
|
/* Firework red */
|
|
--color-accent-hover: #cc2a2a;
|
|
/* Deep crimson */
|
|
--color-border: #8795b4;
|
|
/* Cloud blue */
|
|
}
|
|
|
|
:root[data-theme="harvest-twilight"] {
|
|
--color-surface-0: #1d1b13;
|
|
/* Shadowed wheat field */
|
|
--color-surface-1: #29231a;
|
|
/* Earthen soil */
|
|
--color-surface-2: #4b3b27;
|
|
/* Golden dusk */
|
|
--color-text: #f2e5ce;
|
|
/* Pale harvest moon */
|
|
--color-accent: #e4a672;
|
|
/* Pumpkin orange */
|
|
--color-accent-hover: #c88752;
|
|
/* Rusted leaves */
|
|
--color-border: #5d4633;
|
|
/* Bark brown */
|
|
}
|
|
|
|
:root[data-theme="golden-hour"] {
|
|
--color-surface-0: #fef6e6;
|
|
/* Golden wheat */
|
|
--color-surface-1: #fdecc8;
|
|
/* Honey glow */
|
|
--color-surface-2: #fcd399;
|
|
/* Pumpkin yellow */
|
|
--color-text: #533c24;
|
|
/* Harvest bark */
|
|
--color-accent: #e78a4b;
|
|
/* Autumn orange */
|
|
--color-accent-hover: #d06b34;
|
|
/* Deep amber */
|
|
--color-border: #a88a5f;
|
|
/* Field shadows */
|
|
}
|
|
|
|
:root[data-theme="stargazer"] {
|
|
--color-surface-0: #0d1321;
|
|
/* Midnight sky */
|
|
--color-surface-1: #1c2533;
|
|
/* Cloudy night */
|
|
--color-surface-2: #283142;
|
|
/* Subtle twilight */
|
|
--color-text: #d6e0f5;
|
|
/* Starlight */
|
|
--color-accent: #62b6cb;
|
|
/* Cool cyan */
|
|
--color-accent-hover: #89d3ed;
|
|
/* Soft teal */
|
|
--color-border: #3e506a;
|
|
/* Lunar blue */
|
|
}
|
|
|
|
:root[data-theme="daydreamer"] {
|
|
--color-surface-0: #f9f9fc;
|
|
/* Light paper */
|
|
--color-surface-1: #eceef3;
|
|
/* Morning mist */
|
|
--color-surface-2: #d7dcea;
|
|
/* Overcast sky */
|
|
--color-text: #2e3440;
|
|
/* Quiet gray */
|
|
--color-accent: #5e81ac;
|
|
/* Blue-gray calm */
|
|
--color-accent-hover: #81a1c1;
|
|
/* Brighter sky blue */
|
|
--color-border: #b2c4d4;
|
|
/* Subtle frost */
|
|
}
|
|
|
|
// Use SCSS features to create 100-950 shades of all colors (tailwindify)
|
|
// Increments of 100, 200, (steps of 100) until 900, 950, HSL
|
|
// 100 being 90% lightness, 950 being 5% lightness
|
|
// 100 being the most light (nearly white), 950 being the least light (nearly black)
|
|
// Generate 100-900
|
|
|
|
// These are root variables that don't care what the theme is
|
|
// for loop, 100 increment each
|
|
@for $j from 1 through 9 {
|
|
$i: $j * 100;
|
|
// Compute lightness value before setting color
|
|
$lightness: 100% - $j * 10%;
|
|
|
|
|
|
:root {
|
|
// Take brightness of active color (var(--color-surface-1)) and adjust its lightness
|
|
--color-surface-1-#{$i}: hsl(hue(var(--color-surface-1)), 100%, #{$lightness});
|
|
--color-surface-2-#{$i}: hsl(hue(var(--color-surface-2)), 100%, #{$lightness});
|
|
--color-text-#{$i}: hsl(hue(var(--color-text)), 100%, #{$lightness});
|
|
--color-accent-#{$i}: hsl(hue(var(--color-accent)), 100%, #{$lightness});
|
|
--color-accent-hover-#{$i}: hsl(hue(var(--color-accent-hover)), 100%, #{$lightness});
|
|
--color-border-#{$i}: hsl(hue(var(--color-border)), 100%, #{$lightness});
|
|
--color-rosewater-#{$i}: hsl(hue(var(--color-rosewater)), 100%, #{$lightness});
|
|
--color-flamingo-#{$i}: hsl(hue(var(--color-flamingo)), 100%, #{$lightness});
|
|
--color-pink-#{$i}: hsl(hue(var(--color-pink)), 100%, #{$lightness});
|
|
--color-mauve-#{$i}: hsl(hue(var(--color-mauve)), 100%, #{$lightness});
|
|
--color-red-#{$i}: hsl(hue(var(--color-red)), 100%, #{$lightness});
|
|
--color-maroon-#{$i}: hsl(hue(var(--color-maroon)), 100%, #{$lightness});
|
|
--color-peach-#{$i}: hsl(hue(var(--color-peach)), 100%, #{$lightness});
|
|
--color-yellow-#{$i}: hsl(hue(var(--color-yellow)), 100%, #{$lightness});
|
|
--color-blue-#{$i}: hsl(hue(var(--color-blue)), 100%, #{$lightness});
|
|
--color-teal-#{$i}: hsl(hue(var(--color-teal)), 100%, #{$lightness});
|
|
--color-sky-#{$i}: hsl(hue(var(--color-sky)), 100%, #{$lightness});
|
|
--color-sapphire-#{$i}: hsl(hue(var(--color-sapphire)), 100%, #{$lightness});
|
|
--color-lavender-#{$i}: hsl(hue(var(--color-lavender)), 100%, #{$lightness});
|
|
--color-overlay-0-#{$i}: hsl(hue(var(--color-overlay-0)), 100%, #{$lightness});
|
|
--color-overlay-1-#{$i}: hsl(hue(var(--color-overlay-1)), 100%, #{$lightness});
|
|
--color-overlay-2-#{$i}: hsl(hue(var(--color-overlay-2)), 100%, #{$lightness});
|
|
--color-base-#{$i}: hsl(hue(var(--color-base)), 100%, #{$lightness});
|
|
}
|
|
}
|
|
|
|
p, h1, h2, h3, h4, h5, h6, small, a, span, div, li, td, th, label, input, textarea, select, button {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
// Set background for things like buttons, dropdowns, etc.
|
|
button, input, select, textarea {
|
|
@apply border-accent border rounded-sm m-1;
|
|
background-color: var(--color-surface-1);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-base);
|
|
} |