/*
* Blahaj for the web
*
* A light and dark color theme for websites, built from the same palette as
* the Blahaj editor and terminal themes.
*
* Link this file before the stylesheet of the site:
*
*
*
*
* The theme follows prefers-color-scheme. To pin a scheme, set
* data-theme="light" or data-theme="dark" on , or add the `light` or
* `dark` class to it.
*
* The page background and the code background are separate on purpose:
* Frost/Deep for the page, Glacier/Trench for code. A block of code keeps a
* visible edge without breaking the scheme into two unrelated surfaces.
*
* Named colors are fixed values. The semantic tokens pair their light and
* dark values with light-dark(), so a site only uses the semantic names.
*
* Tone scale, abyss to white:
* 0 Abyss #02040F 1 Deep #0B143F 2 Trench #0E1A47
* 3 Twilight #132261 4 Brine #243580 5 Ocean #1E3A8A
* 6 Foam #3A4A86 7 Shark #3B5BB2 8 Cobalt #2F5BC4
* 9 Mist #52659E 10 Tide #5870BC 11 Wave #7288C8
* 12 Squall #8394C9 13 Reef #7FB4FF 14 Shoal #9DB4F5
* 15 Ice #A7B8E2 16 Seafoam #B4C2E8 17 Haze #C3CDEA
* 18 Spray #DCE5F7 19 Frost #E7ECF9 20 Glacier #F1F4FC
* 21 Pearl #F5F7FD 22 White #FFFFFF
*/
@layer blahaj {
:root {
color-scheme: light dark;
accent-color: var(--blahaj-primary);
/* Tone scale: 0 is the deepest water, 22 is white. */
--blahaj-blue-0: #02040F; /* Abyss */
--blahaj-blue-1: #0B143F; /* Deep */
--blahaj-blue-2: #0E1A47; /* Trench */
--blahaj-blue-3: #132261; /* Twilight */
--blahaj-blue-4: #243580; /* Brine */
--blahaj-blue-5: #1E3A8A; /* Ocean */
--blahaj-blue-6: #3A4A86; /* Foam */
--blahaj-blue-7: #3B5BB2; /* Shark */
--blahaj-blue-8: #2F5BC4; /* Cobalt */
--blahaj-blue-9: #52659E; /* Mist */
--blahaj-blue-10: #5870BC; /* Tide */
--blahaj-blue-11: #7288C8; /* Wave */
--blahaj-blue-12: #8394C9; /* Squall */
--blahaj-blue-13: #7FB4FF; /* Reef */
--blahaj-blue-14: #9DB4F5; /* Shoal */
--blahaj-blue-15: #A7B8E2; /* Ice */
--blahaj-blue-16: #B4C2E8; /* Seafoam */
--blahaj-blue-17: #C3CDEA; /* Haze */
--blahaj-blue-18: #DCE5F7; /* Spray */
--blahaj-blue-19: #E7ECF9; /* Frost */
--blahaj-blue-20: #F1F4FC; /* Glacier */
--blahaj-blue-21: #F5F7FD; /* Pearl */
--blahaj-blue-22: #FFFFFF; /* White */
/* The ocean names of the scale. */
--blahaj-abyss: var(--blahaj-blue-0);
--blahaj-deep: var(--blahaj-blue-1);
--blahaj-trench: var(--blahaj-blue-2);
--blahaj-twilight: var(--blahaj-blue-3);
--blahaj-brine: var(--blahaj-blue-4);
--blahaj-ocean: var(--blahaj-blue-5);
--blahaj-foam: var(--blahaj-blue-6);
--blahaj-shark: var(--blahaj-blue-7);
--blahaj-cobalt: var(--blahaj-blue-8);
--blahaj-mist: var(--blahaj-blue-9);
--blahaj-tide: var(--blahaj-blue-10);
--blahaj-wave: var(--blahaj-blue-11);
--blahaj-squall: var(--blahaj-blue-12);
--blahaj-reef: var(--blahaj-blue-13);
--blahaj-shoal: var(--blahaj-blue-14);
--blahaj-ice: var(--blahaj-blue-15);
--blahaj-seafoam: var(--blahaj-blue-16);
--blahaj-haze: var(--blahaj-blue-17);
--blahaj-spray: var(--blahaj-blue-18);
--blahaj-frost: var(--blahaj-blue-19);
--blahaj-glacier: var(--blahaj-blue-20);
--blahaj-pearl: var(--blahaj-blue-21);
--blahaj-white: var(--blahaj-blue-22);
/* Accents outside the blue scale. */
--blahaj-ember: #A15207;
--blahaj-amber: #FFB234;
--blahaj-coral: #A83B6C;
--blahaj-blush: #F0A0BE;
--blahaj-kelp: #1A6B4C;
--blahaj-seagrass: #6FD3A0;
--blahaj-urchin: #7A3B99;
--blahaj-orchid: #D3A8F5;
--blahaj-lagoon: #136A7A;
--blahaj-shallows: #79D9E9;
/* Page and raised surfaces. */
--blahaj-background: light-dark(var(--blahaj-frost), var(--blahaj-deep));
--blahaj-surface: light-dark(var(--blahaj-pearl), var(--blahaj-twilight));
--blahaj-surface-raised: light-dark(
var(--blahaj-white),
var(--blahaj-brine)
);
/* Text. */
--blahaj-text: light-dark(var(--blahaj-deep), var(--blahaj-frost));
--blahaj-text-inverted: light-dark(
var(--blahaj-white),
var(--blahaj-deep)
);
--blahaj-text-muted: light-dark(var(--blahaj-foam), var(--blahaj-seafoam));
--blahaj-text-subtle: light-dark(var(--blahaj-mist), var(--blahaj-ice));
/* Borders. */
--blahaj-border: light-dark(var(--blahaj-wave), var(--blahaj-tide));
--blahaj-border-subtle: light-dark(var(--blahaj-haze), var(--blahaj-brine));
--blahaj-border-strong: light-dark(var(--blahaj-ocean), var(--blahaj-reef));
/* Interactive colors. */
--blahaj-primary: light-dark(var(--blahaj-ocean), var(--blahaj-shoal));
--blahaj-primary-hover: light-dark(var(--blahaj-shark), var(--blahaj-reef));
--blahaj-on-primary: light-dark(var(--blahaj-white), var(--blahaj-deep));
--blahaj-accent: light-dark(var(--blahaj-coral), var(--blahaj-blush));
--blahaj-focus: light-dark(var(--blahaj-ocean), var(--blahaj-shoal));
/* Selection, overlays, and shade. */
--blahaj-selection: light-dark(var(--blahaj-haze), #3B5BB266);
--blahaj-selection-text: light-dark(
var(--blahaj-deep),
var(--blahaj-frost)
);
--blahaj-overlay-hover: light-dark(#0B143F0A, #E7ECF90A);
--blahaj-overlay-active: light-dark(#0B143F14, #E7ECF914);
--blahaj-overlay-selected: light-dark(#0B143F1F, #E7ECF91F);
--blahaj-shadow: light-dark(#0B143F1A, #02040F66);
/* Status colors. They reuse the ANSI accents, so an admonition, a
terminal, and a code block agree on what red, green, and blue
mean. */
--blahaj-info: light-dark(var(--blahaj-cobalt), var(--blahaj-reef));
--blahaj-important: light-dark(
var(--blahaj-urchin),
var(--blahaj-orchid)
);
--blahaj-warning: light-dark(var(--blahaj-ember), var(--blahaj-amber));
--blahaj-caution: light-dark(var(--blahaj-coral), var(--blahaj-blush));
--blahaj-tip: light-dark(var(--blahaj-kelp), var(--blahaj-seagrass));
/* Code blocks. The code background is one step away from the page:
Glacier/Trench rather than Frost/Deep. */
--blahaj-code-background: light-dark(
var(--blahaj-glacier),
var(--blahaj-trench)
);
--blahaj-code-text: light-dark(var(--blahaj-deep), var(--blahaj-frost));
--blahaj-code-border: light-dark(var(--blahaj-haze), var(--blahaj-brine));
--blahaj-code-selection: light-dark(var(--blahaj-haze), #3B5BB266);
--blahaj-code-highlight: light-dark(
var(--blahaj-haze),
var(--blahaj-brine)
);
--blahaj-code-highlight-text: light-dark(
var(--blahaj-deep),
var(--blahaj-frost)
);
/* Syntax colors. */
--blahaj-syntax-comment: light-dark(
var(--blahaj-mist),
var(--blahaj-squall)
);
--blahaj-syntax-keyword: light-dark(
var(--blahaj-cobalt),
var(--blahaj-reef)
);
--blahaj-syntax-function: light-dark(
var(--blahaj-ember),
var(--blahaj-amber)
);
--blahaj-syntax-type: light-dark(var(--blahaj-ocean), var(--blahaj-ice));
--blahaj-syntax-string: light-dark(
var(--blahaj-coral),
var(--blahaj-blush)
);
--blahaj-syntax-variable: light-dark(
var(--blahaj-deep),
var(--blahaj-frost)
);
--blahaj-syntax-property: light-dark(
var(--blahaj-foam),
var(--blahaj-seafoam)
);
--blahaj-syntax-number: light-dark(
var(--blahaj-ember),
var(--blahaj-amber)
);
--blahaj-syntax-operator: light-dark(
var(--blahaj-foam),
var(--blahaj-seafoam)
);
--blahaj-syntax-punctuation: light-dark(
var(--blahaj-foam),
var(--blahaj-seafoam)
);
--blahaj-syntax-tag: light-dark(var(--blahaj-coral), var(--blahaj-blush));
--blahaj-syntax-attribute: light-dark(
var(--blahaj-ember),
var(--blahaj-amber)
);
--blahaj-syntax-error: light-dark(
var(--blahaj-coral),
var(--blahaj-blush)
);
--blahaj-syntax-inserted: light-dark(
var(--blahaj-ocean),
var(--blahaj-ice)
);
--blahaj-syntax-deleted: light-dark(
var(--blahaj-coral),
var(--blahaj-blush)
);
--blahaj-syntax-heading: light-dark(
var(--blahaj-cobalt),
var(--blahaj-reef)
);
--blahaj-syntax-link: light-dark(var(--blahaj-ocean), var(--blahaj-ice));
--blahaj-syntax-line-number: light-dark(
var(--blahaj-mist),
var(--blahaj-squall)
);
}
:root[data-theme="light"],
:root.light {
color-scheme: light;
}
:root[data-theme="dark"],
:root.dark {
color-scheme: dark;
}
/* Optional base styles. A site can override any of these; the tokens
above are the part worth keeping. */
body {
background-color: var(--blahaj-background);
color: var(--blahaj-text);
}
a {
color: var(--blahaj-primary);
}
a:hover {
color: var(--blahaj-primary-hover);
}
:focus-visible {
outline: 2px solid var(--blahaj-focus);
outline-offset: 2px;
}
::selection {
background-color: var(--blahaj-selection);
color: var(--blahaj-selection-text);
}
}