/* design tokens, the dark variant and utilities, without preflight or page
styles: app.css builds the app on top of this, and the docs site imports it
to render these components under starlight (docs/src/styles/global.css) */
@custom-variant dark {
@media (prefers-color-scheme: dark) {
&:where(:not([data-theme="light"], [data-theme="light"] *)) {
@slot;
}
}
&:where([data-theme="dark"], [data-theme="dark"] *) {
@slot;
}
}
/* the inverse of dark, for surfaces drawn dark-first (the landing page) */
@custom-variant light {
@media (prefers-color-scheme: light) {
&:where(:not([data-theme="dark"], [data-theme="dark"] *)) {
@slot;
}
}
&:where([data-theme="light"], [data-theme="light"] *) {
@slot;
}
}
@custom-variant mobile (@media (pointer: coarse) and (width < 48rem));
@theme {
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--font-sans: "TimelessSans", "TimelessSans Fallback", ui-sans-serif, system-ui, sans-serif;
--font-mono:
"IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--font-sans--font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
--font-weight-medium: 510;
--font-weight-semibold: 590;
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
--ease-spring: linear(
0,
0.009,
0.035 2.1%,
0.141,
0.281 6.7%,
0.723 12.9%,
0.938 16.7%,
1.017,
1.077,
1.121,
1.149 24.3%,
1.159,
1.163,
1.161,
1.154 29.9%,
1.129 32.8%,
1.051 39.6%,
1.017 43.1%,
0.991,
0.977 51%,
0.974 53.8%,
0.975 57.1%,
0.997 69.8%,
1.003 76.9%,
1.004 83.8%,
1
);
--spacing-none: 0px;
--spacing-3xs: 0.125rem;
--spacing-2xs: 0.25rem;
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.25rem;
--spacing-xl: 1.5rem;
--spacing-2xl: 2rem;
--spacing-3xl: 2.5rem;
--spacing-4xl: 3rem;
--spacing-5xl: 4rem;
--spacing-word: 0.236em;
--container-*: initial;
--container-compact: 28rem;
--container-narrow: 32rem;
--container-medium: 42rem;
--container-wide: 48rem;
--container-page: 64rem;
--container-hero: 80rem;
--color-background-default: #ffffff;
--color-background-subtle: #fafafa;
--color-background-inset: #f2f2f2;
--color-background-muted: #e5e5e5;
--color-background-strong: #d4d4d4;
--color-background-canvas: #f5f5f5;
--color-background-highlight: #e0e7ff;
--color-background-success-subtle: #dcfce7;
--color-background-success-subtle-hover: #bbf7d0;
--color-background-success-emphasis: #008931;
--color-background-success-emphasis-hover: #15803d;
--color-background-danger-subtle: #ffe4e6;
--color-background-danger-subtle-hover: #fecdd3;
--color-background-danger-emphasis: #fda4af;
--color-background-danger-emphasis-hover: #fb7185;
--color-background-warning-subtle: #fffbeb;
--color-background-warning-subtle-hover: #fef3c7;
--color-background-warning-emphasis: #f59e0b;
--color-background-info-subtle: #eef2ff;
--color-background-info-subtle-hover: #e0e7ff;
--color-background-info-emphasis: #5750f1;
--color-background-info-emphasis-hover: #4a41e0;
--color-background-emphasis: #0a0a0a;
/* --- background / navigation ---
The settings sidebar aliases *invert* between modes, so these cannot be
spelled as an existing pair: light recesses the frame (subtle) and raises
the active item (default), dark does the exact opposite. */
--color-background-navigation-frame: #f5f5f5;
--color-background-navigation-item: #ffffff;
--color-foreground-default: #0a0a0a;
--color-foreground-muted: #525252;
--color-foreground-subtle: #6e6e6e;
--color-foreground-placeholder: #a3a3a3;
--color-foreground-disabled: #d4d4d4;
--color-foreground-on-emphasis: #ffffff;
--color-foreground-inverted: #f5f5f5;
--color-foreground-highlight: #3730a3;
--color-foreground-success: #00822a;
--color-foreground-success-strong: #166534;
--color-foreground-success-disabled: #16a34a80;
--color-foreground-danger: #d4003e;
--color-foreground-danger-strong: #9f1239;
--color-foreground-danger-subtle: #fb7185;
--color-foreground-danger-disabled: #fda4af;
--color-foreground-warning: #b85900;
--color-foreground-warning-strong: #92400e;
--color-foreground-warning-disabled: #fcd34d;
--color-foreground-info: #4338ca;
--color-foreground-info-strong: #3730a3;
--color-foreground-link-default: #0a0a0a;
--color-foreground-link-hover: #5750f1;
--color-foreground-link-disabled: #a3a3a3;
--color-foreground-link-danger: #d4003e;
--color-foreground-link-danger-hover: #a63f3f;
--color-foreground-link-success: #00822a;
--color-foreground-link-success-hover: #31814e;
--color-foreground-link-warning: #b85900;
--color-foreground-link-warning-hover: #b05e00;
--color-foreground-link-info: #5750f1;
--color-foreground-link-info-hover: #6d67f5;
--color-border-default: #e5e5e5;
--color-border-subtle: #f0f0f0;
--color-border-strong: #d4d4d4;
--color-border-disabled: #e5e5e5;
--color-border-focus: #7c75e5;
--color-border-focus-success: #22c55e;
--color-border-focus-danger: #f43f5e;
--color-border-success: #15803d;
--color-border-warning: #fcd34d;
--color-border-danger: #fda4af;
--color-border-danger-subtle: #fecdd3;
--color-border-navigation-item-active: #e5e5e5;
--color-drawing-accent: #6d67f5;
--color-drawing-accent-recess: color-mix(in srgb, var(--color-drawing-accent), black 14%);
--color-drawing-accent-edge: color-mix(in srgb, var(--color-drawing-accent), black 38%);
--color-shadow-inner-strong: #d4d4d4;
--color-shadow-inner-strong-hover: #d4d4d4;
--color-shadow-inner-subtle: #e5e5e5;
--color-shadow-ambient-strong: rgb(0 0 0 / 0.08);
--color-shadow-ambient-subtle: rgb(0 0 0 / 0.04);
--color-shadow-ring: var(--color-alpha-dark-10);
--color-inverse-background: #262626;
--color-inverse-foreground: #f5f5f5;
--color-inverse-border: #404040;
--color-inverse-shadow-inner: #171717;
--shadow-small: 0 1px 2px var(--color-shadow-ambient-strong);
--shadow-regular:
0 10px 28px -8px var(--color-shadow-ambient-strong),
0 2px 6px var(--color-shadow-ambient-subtle);
--shadow-large:
0 24px 48px -12px var(--color-shadow-ambient-strong),
0 6px 14px var(--color-shadow-ambient-subtle);
--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
--color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
--color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
--color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
--color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
--color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
--color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
--color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
--color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
--color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
--color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
--color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
--color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
--color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
--color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
--color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
--color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
--color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
--color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
--color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
--color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
--color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
--color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
--color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
--color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
--color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
--color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
--color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
--color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
--color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
--color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
--color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
--color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
--color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
--color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
--color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
--color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
/* --- terminal (pipeline logs) --- catppuccin latte, same values the
appview's terminal-to-html palette uses. dark is macchiato, below. */
--color-ansi-black: #6c6f85;
--color-ansi-red: #d20f39;
--color-ansi-green: #218500;
--color-ansi-yellow: #ad6000;
--color-ansi-blue: #1e66f5;
--color-ansi-magenta: #8839ef;
--color-ansi-cyan: #008087;
--color-ansi-white: #4c4f69;
--color-ansi-bright-black: #6f7284;
--color-ansi-bright-red: #d63547;
--color-ansi-bright-green: #218500;
--color-ansi-bright-yellow: #8a703a;
--color-ansi-bright-blue: #007f95;
--color-ansi-bright-magenta: #b8489d;
--color-ansi-bright-cyan: #007ab7;
--color-ansi-bright-white: #70737e;
--color-syntax-foreground: #4c4f69;
--color-syntax-comment: #56586b;
--color-syntax-string: #006900;
--color-syntax-keyword: #781fdb;
--color-syntax-function: #004bd9;
--color-syntax-constant: #b41100;
--color-syntax-parameter: #b6002d;
--color-syntax-punctuation: #56586b;
--color-syntax-link: #004bd9;
--color-syntax-inserted: #006900;
--color-syntax-deleted: #b60023;
--color-syntax-changed: #904400;
--animate-spin-step: spin-step 2.5s infinite;
--animate-stack-pop: stack-pop 620ms var(--ease-spring) both;
--animate-stack-shift: stack-shift 520ms var(--ease-spring) both;
--animate-marquee-up: marquee-up 40s linear infinite;
--animate-marquee-down: marquee-down 40s linear infinite;
--animate-marquee-left: marquee-left 40s linear infinite;
@keyframes stack-pop {
from {
opacity: 0;
transform: translateY(-0.75rem) scale(0.85);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes stack-shift {
from {
transform: translateY(-2.5rem);
}
to {
transform: none;
}
}
@keyframes marquee-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@keyframes marquee-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes marquee-down {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
@keyframes spin-step {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
50% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
100% {
transform: rotate(360deg);
}
}
}
@utility hit-area-y-* {
&::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block: calc(var(--spacing) * --value(number) * -1);
}
}
@utility typography-heading-0 {
font-size: 5rem;
line-height: 1;
font-weight: 600;
letter-spacing: -0.25px;
}
@utility typography-heading-1 {
font-size: 3rem;
line-height: 1.1667;
font-weight: 500;
}
@utility typography-heading-2 {
font-size: 1.875rem;
line-height: 1.2;
font-weight: 600;
}
@utility typography-heading-3 {
font-size: 1.5rem;
line-height: 1.25;
font-weight: 500;
}
@utility typography-heading-4 {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 500;
}
@utility typography-paragraph-large {
font-size: 1rem;
line-height: 1.625;
}
@utility typography-paragraph-body {
font-size: 0.9375rem;
line-height: 1.6;
}
@utility typography-paragraph-regular {
font-size: 0.8125rem;
line-height: 1.5385;
}
@utility typography-paragraph-small {
font-size: 0.75rem;
line-height: 1.3333;
}
@utility typography-paragraph-mini {
font-size: 0.625rem;
line-height: 1.6;
}
@utility typography-monospace-large {
@apply font-mono;
font-size: 1rem;
line-height: 1.5;
}
@utility typography-monospace-regular {
@apply font-mono;
font-size: 0.8125rem;
line-height: 1.5385;
}
@utility typography-monospace-small {
@apply font-mono;
font-size: 0.75rem;
line-height: 1.3333;
}
@utility popover-transition {
opacity: 0;
scale: 0.95;
transform-origin: center;
&[data-popover-origin="top-left"] {
transform-origin: top left;
}
&[data-popover-origin="top-center"] {
transform-origin: top center;
}
&[data-popover-origin="top-right"] {
transform-origin: top right;
}
&[data-popover-origin="center-left"] {
transform-origin: center left;
}
&[data-popover-origin="center-center"] {
transform-origin: center;
}
&[data-popover-origin="center-right"] {
transform-origin: center right;
}
&[data-popover-origin="bottom-left"] {
transform-origin: bottom left;
}
&[data-popover-origin="bottom-center"] {
transform-origin: bottom center;
}
&[data-popover-origin="bottom-right"] {
transform-origin: bottom right;
}
transition:
opacity 120ms ease-out,
scale 120ms ease-out,
overlay 120ms allow-discrete,
display 120ms allow-discrete;
&:is(:popover-open, :modal) {
opacity: 1;
scale: 1;
}
@starting-style {
&:is(:popover-open, :modal) {
opacity: 0;
scale: 0.95;
}
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
@utility edge-ring {
@apply ring ring-shadow-ring;
@variant forced-colors {
outline: 1px solid;
}
}
@utility edge-ring-inset {
@apply inset-ring inset-ring-shadow-ring;
@variant forced-colors {
outline: 1px solid;
outline-offset: -1px;
}
}
@utility defer-render-* {
content-visibility: auto;
contain-intrinsic-height: auto --spacing(--value(number));
}
@utility hit-area {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-* {
position: relative;
--hit-area-t: --spacing(--value(number) * -1);
--hit-area-t: calc(--value([*]) * -1);
--hit-area-b: --spacing(--value(number) * -1);
--hit-area-b: calc(--value([*]) * -1);
--hit-area-l: --spacing(--value(number) * -1);
--hit-area-l: calc(--value([*]) * -1);
--hit-area-r: --spacing(--value(number) * -1);
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-l-* {
position: relative;
--hit-area-l: --spacing(--value(number) * -1);
--hit-area-l: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-r-* {
position: relative;
--hit-area-r: --spacing(--value(number) * -1);
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-t-* {
position: relative;
--hit-area-t: --spacing(--value(number) * -1);
--hit-area-t: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-b-* {
position: relative;
--hit-area-b: --spacing(--value(number) * -1);
--hit-area-b: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-x-* {
position: relative;
--hit-area-l: --spacing(--value(number) * -1);
--hit-area-l: calc(--value([*]) * -1);
--hit-area-r: --spacing(--value(number) * -1);
--hit-area-r: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-y-* {
position: relative;
--hit-area-t: --spacing(--value(number) * -1);
--hit-area-t: calc(--value([*]) * -1);
--hit-area-b: --spacing(--value(number) * -1);
--hit-area-b: calc(--value([*]) * -1);
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
}
}
@utility hit-area-debug {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--hit-area-t, 0px);
right: var(--hit-area-r, 0px);
bottom: var(--hit-area-b, 0px);
left: var(--hit-area-l, 0px);
pointer-events: inherit;
@apply border border-dashed border-blue-500;
@apply bg-blue-500/10;
}
&:hover::before {
@apply border border-dashed border-green-500;
@apply bg-green-500/10;
}
}
/* debug only. */
@utility debug-border {
--debug-hue: 0;
--debug-depth: 0;
--debug-width: 1px;
outline: var(--debug-width) solid hsl(calc(var(--debug-hue) + var(--debug-depth)) 100% 50%);
/* an outline is drawn outward from the outline edge, so the offset has to cancel the
whole width — otherwise a thick one bleeds past the box it is marking */
outline-offset: calc(-1 * var(--debug-width));
&:nth-child(6n + 2) {
--debug-hue: 60;
}
&:nth-child(6n + 3) {
--debug-hue: 120;
}
&:nth-child(6n + 4) {
--debug-hue: 180;
}
&:nth-child(6n + 5) {
--debug-hue: 240;
}
&:nth-child(6n) {
--debug-hue: 300;
}
}
@layer utilities {
.debug-border .debug-border {
--debug-depth: 25;
--debug-width: 2px;
}
.debug-border .debug-border .debug-border {
--debug-depth: 50;
--debug-width: 3px;
}
.debug-border .debug-border .debug-border .debug-border {
--debug-depth: 75;
--debug-width: 4px;
}
}
@utility swap-layer {
grid-area: 1 / 1;
transition-property: opacity, scale, translate, filter;
transition-duration: var(--swap-duration);
transition-timing-function: var(--swap-easing);
}
@utility swap-icon-out {
opacity: 0;
scale: 0.25;
filter: blur(4px);
@media (prefers-reduced-motion: reduce) {
scale: 1;
filter: none;
}
}
@utility swap-label-out {
opacity: 0;
translate: 0 3px;
filter: blur(3px);
@media (prefers-reduced-motion: reduce) {
translate: none;
filter: none;
}
}
@utility text-swap {
display: inline-block;
transform: translateY(0);
filter: blur(0);
opacity: 1;
will-change: transform, filter, opacity;
transition:
transform var(--text-swap-dur) var(--text-swap-ease),
filter var(--text-swap-dur) var(--text-swap-ease),
opacity var(--text-swap-dur) var(--text-swap-ease);
&[data-swap="exit"] {
transform: translateY(calc(var(--text-swap-translate-y) * -1));
filter: blur(var(--text-swap-blur));
opacity: 0;
}
&[data-swap="enter"] {
transform: translateY(var(--text-swap-translate-y));
filter: blur(var(--text-swap-blur));
opacity: 0;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
@utility bone-pulse {
/* fade-in has to be second so it overrides pulse during its 120ms */
animation:
var(--animate-pulse),
bone-fade-in 120ms ease-out;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
@keyframes bone-fade-in {
from {
opacity: 0;
}
}
@utility row-breathe {
animation: row-breathe 1.2s ease-in-out infinite;
background-color: var(--color-background-muted);
border-radius: var(--radius-md, 0.5rem);
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
@keyframes row-breathe {
0%,
100% {
opacity: 0.88;
}
50% {
opacity: 1;
}
}
@layer base {
:root {
--text-swap-dur: 150ms;
--text-swap-translate-y: 4px;
--text-swap-blur: 2px;
--text-swap-ease: ease-in-out;
}
}
/* unlayered, so the dark values beat the light @theme values wherever those
land: the theme layer in the app, unlayered in the docs */
:root {
@variant dark {
--color-background-default: #141414;
--color-background-subtle: #1a1a1a;
--color-background-inset: #1f1f1f;
--color-background-muted: #2a2a2a;
--color-background-strong: #474747;
--color-background-canvas: #0a0a0a;
--color-background-highlight: #2c2675;
--color-background-success-subtle: #14532d;
--color-background-success-subtle-hover: #166534;
--color-background-success-emphasis: #15803d;
--color-background-success-emphasis-hover: #166534;
--color-background-danger-subtle: #4c0519;
--color-background-danger-subtle-hover: #881337;
--color-background-danger-emphasis: #be123c;
--color-background-danger-emphasis-hover: #9f1239;
--color-background-warning-subtle: #451a03;
--color-background-warning-subtle-hover: #78350f;
--color-background-warning-emphasis: #d97706;
--color-background-info-subtle: #1c1a45;
--color-background-info-subtle-hover: #27235f;
--color-background-info-emphasis: #6a63f0;
--color-background-info-emphasis-hover: #6e67de;
--color-background-emphasis: #f5f5f5;
/* --- background / navigation (Dark) --- inverted vs light, see above */
--color-background-navigation-frame: #141414;
--color-background-navigation-item: #1f1f1f;
--color-foreground-default: #fafafa;
--color-foreground-muted: #c4c4c4;
--color-foreground-subtle: #a4a4a4;
--color-foreground-placeholder: #8d8d8d;
--color-foreground-disabled: #474747;
--color-foreground-on-emphasis: #ffffff;
--color-foreground-inverted: #0a0a0a;
--color-foreground-highlight: #c7cffe;
--color-foreground-success: #4ade80;
--color-foreground-success-strong: #bbf7d0;
--color-foreground-success-disabled: #15803d;
--color-foreground-danger: #fb7185;
--color-foreground-danger-strong: #fecdd3;
--color-foreground-danger-disabled: #9f1239;
--color-foreground-warning: #fbbf24;
--color-foreground-warning-strong: #fde68a;
--color-foreground-warning-disabled: #b45309;
--color-foreground-info: #a5acfb;
--color-foreground-info-strong: #c7cffe;
--color-foreground-link-default: #fafafa;
--color-foreground-link-hover: #a5acfb;
--color-foreground-link-disabled: #737373;
--color-foreground-link-danger: #fb7185;
--color-foreground-link-danger-hover: #f9ecec;
--color-foreground-link-success: #22c55e;
--color-foreground-link-success-hover: #e0f5e7;
--color-foreground-link-warning: #f59e0b;
--color-foreground-link-warning-hover: #fbbf24;
--color-foreground-link-info: #8b85f7;
--color-foreground-link-info-hover: #a5acfb;
--color-border-default: #2c2c2c;
--color-border-subtle: #222222;
--color-border-strong: #444444;
--color-border-disabled: #2a2a2a;
--color-border-focus: #8b85f7;
--color-border-focus-success: #22c55e;
--color-border-focus-danger: #f43f5e;
--color-border-success: #15803d;
--color-border-warning: #92400e;
--color-border-danger: #9f1239;
--color-border-navigation-item-active: #2a2a2a;
--color-shadow-inner-strong: #000000;
--color-shadow-inner-strong-hover: #141414;
--color-shadow-inner-subtle: #0a0a0a;
--color-shadow-ambient-strong: rgb(0 0 0 / 0.35);
--color-shadow-ambient-subtle: rgb(0 0 0 / 0.2);
--color-inverse-background: #ffffff;
--color-inverse-foreground: #171717;
--color-inverse-border: #e5e5e5;
--color-inverse-shadow-inner: #e5e5e5;
/* --- terminal (Dark) --- catppuccin macchiato */
--color-ansi-black: #a5adcb;
--color-ansi-red: #ed8796;
--color-ansi-green: #a6da95;
--color-ansi-yellow: #eed49f;
--color-ansi-blue: #8aadf4;
--color-ansi-magenta: #c6a0f6;
--color-ansi-cyan: #8bd5ca;
--color-ansi-white: #cad3f5;
--color-ansi-bright-black: #8087a2;
--color-ansi-bright-red: #f5bde6;
--color-ansi-bright-green: #a6da95;
--color-ansi-bright-yellow: #f5a97f;
--color-ansi-bright-blue: #7dc4e4;
--color-ansi-bright-magenta: #f4dbd6;
--color-ansi-bright-cyan: #91d7e3;
--color-ansi-bright-white: #f0c6c6;
--color-syntax-foreground: #cdd6f4;
--color-syntax-comment: #afb6cf;
--color-syntax-string: #a6e3a1;
--color-syntax-keyword: #cca7f8;
--color-syntax-function: #8cb8fe;
--color-syntax-constant: #fab387;
--color-syntax-parameter: #eda2ae;
--color-syntax-punctuation: #afb6cf;
--color-syntax-link: #8cb8fe;
--color-syntax-inserted: #a6e3a1;
--color-syntax-deleted: #ff98b5;
--color-syntax-changed: #f9e2af;
}
}
:root[data-palette="classic-light"] {
--color-background-default: #ffffff;
--color-background-subtle: #f9fafb;
--color-background-inset: #f3f4f6;
--color-background-muted: #e5e7eb;
--color-background-strong: #d1d5db;
--color-background-canvas: #f1f5f9;
--color-background-emphasis: #111827;
--color-background-navigation-frame: #f1f5f9;
--color-background-navigation-item: #ffffff;
--color-foreground-default: #111827;
--color-foreground-muted: #4b5563;
--color-foreground-subtle: #6b7280;
--color-foreground-placeholder: #9ca3af;
--color-foreground-disabled: #d1d5db;
--color-foreground-inverted: #f3f4f6;
--color-foreground-link-default: #111827;
--color-foreground-link-disabled: #9ca3af;
--color-border-default: #e5e7eb;
--color-border-subtle: #f3f4f6;
--color-border-strong: #d1d5db;
--color-border-disabled: #e5e7eb;
--color-border-navigation-item-active: #e5e7eb;
--color-shadow-inner-strong: #d1d5db;
--color-shadow-inner-strong-hover: #d1d5db;
--color-shadow-inner-subtle: #e5e7eb;
--color-inverse-background: #1f2937;
--color-inverse-foreground: #f3f4f6;
--color-inverse-border: #374151;
--color-inverse-shadow-inner: #111827;
--color-shadow-ring: var(--color-border-default);
}
:root[data-palette="classic-dark"] {
--color-background-default: #1f2937;
--color-background-subtle: #243040;
--color-background-inset: #2b3544;
--color-background-muted: #374151;
--color-background-strong: #4b5563;
--color-background-canvas: #111827;
--color-background-emphasis: #f3f4f6;
--color-background-navigation-frame: #1f2937;
--color-background-navigation-item: #2b3544;
--color-foreground-default: #f3f4f6;
--color-foreground-muted: #d1d5db;
--color-foreground-subtle: #9ca3af;
--color-foreground-placeholder: #6b7280;
--color-foreground-disabled: #4b5563;
--color-foreground-inverted: #111827;
--color-foreground-link-default: #f3f4f6;
--color-foreground-link-disabled: #6b7280;
--color-border-default: #374151;
--color-border-subtle: #2b3544;
--color-border-strong: #4b5563;
--color-border-disabled: #374151;
--color-border-navigation-item-active: #374151;
--color-shadow-inner-strong: #030712;
--color-shadow-inner-strong-hover: #1f2937;
--color-shadow-inner-subtle: #111827;
--color-inverse-background: #f9fafb;
--color-inverse-foreground: #111827;
--color-inverse-border: #e5e7eb;
--color-inverse-shadow-inner: #e5e7eb;
--color-shadow-ring: var(--color-border-default);
}
:root[data-palette="ash"] {
--color-background-default: #313338;
--color-background-subtle: #383a40;
--color-background-inset: #3e4047;
--color-background-muted: #4a4c54;
--color-background-strong: #5d6069;
--color-background-canvas: #1e1f22;
--color-background-highlight: #3c4270;
--color-background-info-subtle: #383c5c;
--color-background-info-subtle-hover: #3f4470;
--color-background-info-emphasis: #5865f2;
--color-background-info-emphasis-hover: #4752c4;
--color-background-navigation-frame: #313338;
--color-background-navigation-item: #3e4047;
--color-foreground-default: #eceef0;
--color-foreground-muted: #c4c9cf;
--color-foreground-subtle: #a3a9b1;
--color-foreground-placeholder: #7c7f88;
--color-foreground-disabled: #5d6069;
--color-foreground-inverted: #1e1f22;
--color-foreground-link-default: #eceef0;
--color-foreground-link-hover: #00a8fc;
--color-foreground-link-disabled: #7c7f88;
--color-foreground-link-info: #00a8fc;
--color-foreground-link-info-hover: #4fc3ff;
--color-border-default: #4e5058;
--color-border-subtle: #404249;
--color-border-strong: #686b74;
--color-border-disabled: #4e5058;
--color-border-focus: #5865f2;
--color-border-navigation-item-active: #4e5058;
--color-drawing-accent: #5865f2;
--color-shadow-inner-strong-hover: #313338;
--color-shadow-inner-subtle: #111214;
--color-shadow-ring: var(--color-border-default);
}
:root[data-palette="snow"] {
--color-background-default: #ffffff;
--color-background-subtle: #fafafa;
--color-background-inset: #f4f5f6;
--color-background-muted: #e8eaee;
--color-background-strong: #d4d7dc;
--color-background-canvas: #ffffff;
--color-background-highlight: #edeff9;
--color-background-info-subtle: #edeff9;
--color-background-info-subtle-hover: #e2e5f6;
--color-background-info-emphasis: #5e6ad2;
--color-background-info-emphasis-hover: #4c56b8;
--color-background-navigation-frame: #ffffff;
--color-background-navigation-item: #f4f5f6;
--color-foreground-default: #282a30;
--color-foreground-muted: #4e535b;
--color-foreground-subtle: #6e747b;
--color-foreground-placeholder: #a0a4ab;
--color-foreground-disabled: #d4d7dc;
--color-foreground-link-default: #282a30;
--color-foreground-link-hover: #5e6ad2;
--color-foreground-link-disabled: #a0a4ab;
--color-foreground-link-info: #5e6ad2;
--color-foreground-link-info-hover: #4c56b8;
--color-border-default: #e9eaed;
--color-border-subtle: #f4f5f6;
--color-border-strong: #d4d7dc;
--color-border-disabled: #e9eaed;
--color-border-focus: #5e6ad2;
--color-border-navigation-item-active: #e9eaed;
--color-drawing-accent: #5e6ad2;
--color-shadow-inner-strong: #d4d7dc;
--color-shadow-inner-strong-hover: #d4d7dc;
--color-shadow-inner-subtle: #e9eaed;
--color-shadow-ring: var(--color-border-default);
}