Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917/* 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;
--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: #16a34a; --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: #737373; --color-foreground-placeholder: #a3a3a3; --color-foreground-disabled: #d4d4d4; --color-foreground-on-emphasis: #ffffff; --color-foreground-inverted: #f5f5f5; --color-foreground-highlight: #3730a3; --color-foreground-success: #16a34a; --color-foreground-success-strong: #166534; --color-foreground-success-disabled: #16a34a80; --color-foreground-danger: #e11d48; --color-foreground-danger-strong: #9f1239; --color-foreground-danger-subtle: #fb7185; --color-foreground-danger-disabled: #fda4af; --color-foreground-warning: #d97706; --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: #e11d48; --color-foreground-link-danger-hover: #f43f5e; --color-foreground-link-success: #16a34a; --color-foreground-link-success-hover: #22c55e; --color-foreground-link-warning: #d97706; --color-foreground-link-warning-hover: #f59e0b; --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: #8b85f7; --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: #40a02b; --color-ansi-yellow: #df8e1d; --color-ansi-blue: #1e66f5; --color-ansi-magenta: #8839ef; --color-ansi-cyan: #179299; --color-ansi-white: #4c4f69; --color-ansi-bright-black: #8c8fa1; --color-ansi-bright-red: #e64553; --color-ansi-bright-green: #40a02b; --color-ansi-bright-yellow: #e5c890; --color-ansi-bright-blue: #209fb5; --color-ansi-bright-magenta: #ea76cb; --color-ansi-bright-cyan: #04a5e5; --color-ansi-bright-white: #bcc0cc;
--color-syntax-foreground: #4c4f69; --color-syntax-comment: #7c7f93; --color-syntax-string: #40a02b; --color-syntax-keyword: #8839ef; --color-syntax-function: #1e66f5; --color-syntax-constant: #fe640b; --color-syntax-parameter: #e64553; --color-syntax-punctuation: #7c7f93; --color-syntax-link: #1e66f5; --color-syntax-inserted: #40a02b; --color-syntax-deleted: #d20f39; --color-syntax-changed: #df8e1d;
--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: 5rem; font-weight: 600; letter-spacing: -0.25px;}
@utility typography-heading-1 { font-size: 3rem; line-height: 3.5rem; font-weight: 500;}
@utility typography-heading-2 { font-size: 1.875rem; line-height: 1.875rem; font-weight: 600;}
@utility typography-heading-3 { font-size: 1.5rem; line-height: 1.875rem; font-weight: 500;}
@utility typography-heading-4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500;}
@utility typography-paragraph-large { font-size: 1rem; line-height: 1.5rem;}
@utility typography-paragraph-body { font-size: 0.9375rem; line-height: 1.5rem;}
@utility typography-paragraph-regular { font-size: 0.8125rem; line-height: 1.25rem;}
@utility typography-paragraph-small { font-size: 0.75rem; line-height: 1rem;}
@utility typography-paragraph-mini { font-size: 0.625rem; line-height: 1rem;}
@utility typography-monospace-large { @apply font-mono; font-size: 1rem; line-height: 1.5rem;}
@utility typography-monospace-regular { @apply font-mono; font-size: 0.8125rem; line-height: 1.25rem;}
@utility typography-monospace-small { @apply font-mono; font-size: 0.75rem; line-height: 1rem;}
@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: #6d67f5; --color-background-info-emphasis-hover: #837ef8; --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: #ededed; --color-foreground-muted: #a3a3a3; --color-foreground-subtle: #737373; --color-foreground-placeholder: #737373; --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: #ededed; --color-foreground-link-hover: #a5acfb; --color-foreground-link-disabled: #737373; --color-foreground-link-danger: #fb7185; --color-foreground-link-danger-hover: #fda4af; --color-foreground-link-success: #22c55e; --color-foreground-link-success-hover: #4ade80; --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: #262626; --color-border-subtle: #1c1c1c; --color-border-strong: #404040; --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: #9399b2; --color-syntax-string: #a6e3a1; --color-syntax-keyword: #cba6f7; --color-syntax-function: #89b4fa; --color-syntax-constant: #fab387; --color-syntax-parameter: #eba0ac; --color-syntax-punctuation: #9399b2; --color-syntax-link: #89b4fa; --color-syntax-inserted: #a6e3a1; --color-syntax-deleted: #f38ba8; --color-syntax-changed: #f9e2af; }}