Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556@import "tailwindcss";@import "./markup.css";@import "./pierre.css";@import "./logs.css";
/* dark follows the system unless an ancestor pins the theme, so Storybook (and later the theme setting) can force either mode with data-theme on <html> */@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; }}
@theme { --font-sans: "InterVariable", "system-ui", sans-serif, 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, "cv05" 1, "tnum" 1;
/* ========================================================================= Semantic color tokens — synced from Figma "Design System" › semantic colors Names mirror the Figma variables verbatim (`/` → `-`). Light-mode values here; dark-mode overrides live in the dark variant block below. ========================================================================= */
/* --- background --- */ --color-background-default: #ffffff; --color-background-subtle: #f9fafb; --color-background-inset: #f3f4f6; --color-background-muted: #e5e7eb; --color-background-strong: #d1d5db; --color-background-canvas: #f3f4f6; --color-background-highlight: #fef08a; --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: #ffe2e2; --color-background-danger-subtle-hover: #fecaca; --color-background-danger-emphasis: #fca5a5; --color-background-danger-emphasis-hover: #f87171; --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: #4f46e5; --color-background-emphasis: #111827;
/* --- 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: #f9fafb; --color-background-navigation-item: #ffffff;
/* --- foreground --- */ --color-foreground-default: #111827; --color-foreground-muted: #4b5563; --color-foreground-subtle: #6b7280; --color-foreground-placeholder: #9ca3af; --color-foreground-disabled: #d1d5db; --color-foreground-on-emphasis: #ffffff; --color-foreground-inverted: #f3f4f6; --color-foreground-highlight: #854d0e; --color-foreground-success: #16a34a; --color-foreground-success-strong: #166534; --color-foreground-success-disabled: #16a34a80; --color-foreground-danger: #dc2626; --color-foreground-danger-strong: #991b1b; --color-foreground-danger-subtle: #f87171; --color-foreground-danger-disabled: #fca5a5; --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: #111827; --color-foreground-link-hover: #374151; --color-foreground-link-disabled: #9ca3af; --color-foreground-link-danger: #dc2626; --color-foreground-link-danger-hover: #ef4444; --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: #4f46e5; --color-foreground-link-info-hover: #6366f1;
/* --- border --- */ --color-border-default: #e5e7eb; --color-border-subtle: #f3f4f6; --color-border-strong: #d1d5db; --color-border-disabled: #e5e7eb; --color-border-focus: #9ca3af; --color-border-focus-success: #22c55e; --color-border-focus-danger: #ef4444; --color-border-success: #15803d; --color-border-danger: #fca5a5; --color-border-danger-subtle: #fecaca; --color-border-navigation-item-active: #e5e7eb;
/* --- shadow (inner depth, eg.: for the button component) --- */ --color-shadow-inner-strong: #d1d5db; --color-shadow-inner-strong-hover: #d1d5db; --color-shadow-inner-subtle: #e5e7eb; --color-shadow-ambient-strong: var(--color-alpha-dark-10); --color-shadow-ambient-subtle: var(--color-alpha-dark-5);
/* --- shadow --- */ --shadow-small: 0 2px 4px var(--color-shadow-ambient-strong); --shadow-regular: 0 4px 12px var(--color-shadow-ambient-subtle), 0 2px 4px var(--color-shadow-ambient-subtle); --shadow-large: 0 6px 16px var(--color-shadow-ambient-subtle), 0 4px 6px var(--color-shadow-ambient-subtle);
/* --- alpha --- */ --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;
/* --- animations --- */ --animate-spin-step: spin-step 2.5s infinite;
@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 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.6875rem;}
@utility typography-paragraph-regular { font-size: 0.875rem; line-height: 1.5rem;}
@utility typography-paragraph-small { font-size: 0.75rem; line-height: 1.25rem;}
@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.875rem; line-height: 1.375rem;}
@utility typography-monospace-small { @apply font-mono; font-size: 0.75rem; line-height: 1.25rem;}
@utility popover-transition { opacity: 0; scale: 0.98; 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.98; } }
@media (prefers-reduced-motion: reduce) { transition: none; }}
/* 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 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-sm, 0.25rem);
@media (prefers-reduced-motion: reduce) { animation: none; }}
@keyframes row-breathe { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; }}
@layer base { @font-face { font-family: "InterVariable"; src: url("/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 600; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations"); font-weight: 100 600; font-style: italic; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
html { font-size: 16px; scrollbar-gutter: stable; }
:root { @variant dark { /* --- background (Dark) --- */ --color-background-default: #1f2937; --color-background-subtle: #374151; --color-background-inset: #374151; --color-background-muted: #4b5563; --color-background-strong: #6b7280; --color-background-canvas: #111827; --color-background-highlight: #713f12; --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: #7f1d1d; --color-background-danger-subtle-hover: #991b1b; --color-background-danger-emphasis: #b91c1c; --color-background-danger-emphasis-hover: #991b1b; --color-background-warning-subtle: #78350f; --color-background-warning-subtle-hover: #92400e; --color-background-warning-emphasis: #d97706; --color-background-info-subtle: #1e1b4b; --color-background-info-subtle-hover: #312e81; --color-background-info-emphasis: #4f46e5; --color-background-emphasis: #f3f4f6;
/* --- background / navigation (Dark) --- inverted vs light, see above */ --color-background-navigation-frame: #1f2937; --color-background-navigation-item: #374151;
/* --- foreground (Dark) --- */ --color-foreground-default: #f3f4f6; --color-foreground-muted: #9ca3af; --color-foreground-subtle: #6b7280; --color-foreground-placeholder: #9ca3af; --color-foreground-disabled: #6b7280; --color-foreground-on-emphasis: #ffffff; --color-foreground-inverted: #111827; --color-foreground-highlight: #fef08a; --color-foreground-success: #4ade80; --color-foreground-success-strong: #bbf7d0; --color-foreground-success-disabled: #15803d; --color-foreground-danger: #ef4444; --color-foreground-danger-strong: #dc2626; --color-foreground-danger-disabled: #fca5a5; --color-foreground-warning: #fbbf24; --color-foreground-warning-strong: #fde68a; --color-foreground-warning-disabled: #fbbf24; --color-foreground-info: #818cf8; --color-foreground-info-strong: #c7d2fe; --color-foreground-link-default: #f3f4f6; --color-foreground-link-hover: #d1d5db; --color-foreground-link-disabled: #6b7280; --color-foreground-link-danger: #ef4444; --color-foreground-link-danger-hover: #f87171; --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: #6366f1; --color-foreground-link-info-hover: #818cf8;
/* --- border (Dark) --- */ --color-border-default: #374151; --color-border-subtle: #2d3643; --color-border-strong: #6b7280; --color-border-disabled: #4b5563; --color-border-focus: #d1d5db; --color-border-focus-success: #22c55e; --color-border-focus-danger: #ef4444; --color-border-success: #15803d; --color-border-danger: #991b1b; --color-border-navigation-item-active: #4b5563;
/* --- shadow (Dark) --- */ --color-shadow-inner-strong: #030712; --color-shadow-inner-strong-hover: #1f2937; --color-shadow-inner-subtle: #111827; --color-shadow-ambient-strong: transparent; --color-shadow-ambient-subtle: transparent;
/* --- 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; } }
body { @apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200; font-size: 14px; }
a { @apply text-foreground-default no-underline hover:text-foreground-muted; }}