Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375@import "tailwindcss";@import "./markup.css";
@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;
/* ========================================================================= 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 prefers-color-scheme block below. ========================================================================= */
/* --- background --- */ --color-background-default: #ffffff; --color-background-subtle: #f9fafb; --color-background-inset: #f3f4f6; --color-background-muted: #e5e7eb; --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-neutral-emphasis: #1f2937;
/* --- 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-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) --- */ --color-shadow-inner-strong: #d1d5db; --color-shadow-inner-strong-hover: #d1d5db; --color-shadow-inner-subtle: #e5e7eb;
--shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* --- 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);}
/* ============================================================================= Type scale — synced from Figma "Font Styles" (node 1:186)
These are `typography-*` utilities rather than `--text-*` theme tokens on purpose: named `text-heading-3` & co. they collided with `text-<colour>` in tailwind-merge, which classes them as colours and drops the size as soon as a colour follows. Declare `font-size` first in each block — Tailwind sorts a custom utility by its first property, and that is what keeps an explicit `font-medium`/`font-bold` winning over the weight baked in here. ============================================================================= */
@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 { font-size: 1rem; line-height: 1.5rem;}
@utility typography-monospace-regular { font-size: 0.875rem; line-height: 1.375rem;}
@utility typography-monospace-small { font-size: 0.75rem; line-height: 1.25rem;}
@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; }
@media (prefers-color-scheme: dark) { :root { /* --- background (Dark) --- */ --color-background-default: #1f2937; --color-background-subtle: #374151; --color-background-inset: #374151; --color-background-muted: #4b5563; --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: #312e81; --color-background-info-subtle-hover: #3730a3; --color-background-info-emphasis: #4f46e5; --color-background-neutral-emphasis: #374151;
/* --- 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-highlight: #fef08a; --color-foreground-success: #4ade80; --color-foreground-success-strong: #bbf7d0; --color-foreground-success-disabled: #15803d; --color-foreground-danger: #f87171; --color-foreground-danger-strong: #fecaca; --color-foreground-danger-disabled: #f87171; --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: #1f2937; --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; } }
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; }}