@supertype.ai/foundations 0.1.24

package/src/shiki.css

@@ -0,0 +1,23 @@
+/* Picks which of `--shiki-light` / `--shiki-dark` wins. Keyed off the inline
+   custom properties, never a class: a host is free to swap in its own <pre> or
+   <code> and drop `.shiki` with it, but the token spans always survive.
+   Import after tokens.css and after any host's own code CSS. */
+[style*="--shiki-light"] {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style, inherit);
+  font-weight: var(--shiki-light-font-weight, inherit);
+}
+
+.dark [style*="--shiki-dark"] {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style, inherit);
+  font-weight: var(--shiki-dark-font-weight, inherit);
+}
+
+[style*="--shiki-light-bg"] {
+  background-color: var(--shiki-light-bg);
+}
+
+.dark [style*="--shiki-dark-bg"] {
+  background-color: var(--shiki-dark-bg);
+}

package/src/theme.css

@@ -0,0 +1,272 @@
+/* The latte/espresso palette. tokens.css names these roles; this is the only
+   place they get values. Unlayered on purpose: inside a layer, this file's :root
+   would tie with a .dark on specificity and light would win in both themes. */
+
+@theme inline {
+  /* Beyond what tokens.css already registers. */
+  --color-tint-foreground: var(--tint-foreground);
+
+  /* Tertiary ink: placeholders, disabled labels, the "…" in a truncation. Held
+     to 3:1 rather than 4.5:1, so nothing load-bearing may be written in it. */
+  --color-subtle-foreground: var(--subtle-foreground);
+
+  /* The accent as text; --secondary is the fill and --secondary-foreground the
+     label printed on it. */
+  --color-secondary-ink: var(--secondary-ink);
+
+  /* Identity and kind, never state. A pale wash of one hue is identical to any
+     other's, so the ink is what tells two swatches apart. checkSignals holds the
+     fill to 3:1 and the ink to 4.5:1. */
+  --color-terracotta: var(--terracotta);
+  --color-terracotta-foreground: var(--terracotta-foreground);
+  --color-ochre: var(--ochre);
+  --color-ochre-foreground: var(--ochre-foreground);
+  --color-moss: var(--moss);
+  --color-moss-foreground: var(--moss-foreground);
+  --color-fern: var(--fern);
+  --color-fern-foreground: var(--fern-foreground);
+  --color-sage: var(--sage);
+  --color-sage-foreground: var(--sage-foreground);
+  --color-stone: var(--stone);
+  --color-stone-foreground: var(--stone-foreground);
+  --color-fig: var(--fig);
+  --color-fig-foreground: var(--fig-foreground);
+  --color-cocoa: var(--cocoa);
+  --color-cocoa-foreground: var(--cocoa-foreground);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Only layers that leave the page plane cast a shadow. `recessed` is the one
+     inward shadow: a surface things sit on, not one floating above the page. */
+  --shadow-raised: var(--elevation-raised);
+  --shadow-overlay: var(--elevation-overlay);
+  --shadow-recessed: var(--elevation-recessed);
+
+  /* Additive scale off a 10px `lg` — fixed pixel offsets, so no oddball values a
+     multiplicative scale would produce. `rounded-full` stays a pill. */
+  --radius-sm: calc(var(--radius) - 4px); /* 6px */
+  --radius-md: calc(var(--radius) - 2px); /* 8px  — inputs, menus, small controls */
+  --radius-lg: var(--radius); /* 10px — buttons, default control */
+  --radius-xl: calc(var(--radius) + 4px); /* 14px — cards */
+  --radius-2xl: calc(var(--radius) + 8px); /* 18px — marketing feature cards */
+  --radius-3xl: calc(var(--radius) + 12px); /* 22px */
+  --radius-4xl: calc(var(--radius) + 16px); /* 26px */
+}
+
+:root {
+  /* Ink for any tinted surface. Does NOT flip with the theme: a tint is tinted in
+     both, so its label stays light in both. */
+  --tint-foreground: hsl(0, 0%, 100%);
+
+
+  /* Status, on the same two-token rule as the categorical set below: the fill is
+     a mark (3:1), the ink is the same hue as words (4.5:1). Nothing prints a
+     label on a status fill — orange cannot carry white text at any lightness. */
+  --success: hsl(142 75% 31%);
+  --success-ink: hsl(142 68% 28%);
+  /* Was 52%, which measured 2.27:1 on latte — a dot you could not see. */
+  --warn: hsl(30 100% 43%);
+  --warn-ink: hsl(22 85% 36%);
+  /* Deprecated: --warn-foreground was always this ink, under shadcn's name for
+     the opposite thing. Use --warn-ink; the ESLint rules flag the old name. */
+  --warn-foreground: var(--warn-ink);
+  --info: hsl(211 80% 43%);
+  --info-ink: hsl(211 80% 40%);
+  /* Danger ships as an ink only: a vivid brick red harmonised toward terracotta. */
+  --danger: hsl(5 72% 43%);
+
+  /* Latte-warm greens, clays and stone. Both cuts of each hue, light theme. */
+  --terracotta: hsl(10 54% 60%);
+  --terracotta-foreground: hsl(10 72% 40%);
+  --ochre: hsl(44 60% 42%);
+  --ochre-foreground: hsl(44 78% 27%);
+  --moss: hsl(68 42% 41%);
+  --moss-foreground: hsl(68 60% 26%);
+  --fern: hsl(133 30% 47%);
+  --fern-foreground: hsl(133 48% 30%);
+  --sage: hsl(168 28% 47%);
+  --sage-foreground: hsl(168 46% 29%);
+  --stone: hsl(202 24% 55%);
+  --stone-foreground: hsl(202 42% 36%);
+  --fig: hsl(332 32% 61%);
+  --fig-foreground: hsl(332 50% 43%);
+  --cocoa: hsl(20 16% 56%);
+  --cocoa-foreground: hsl(20 34% 39%);
+
+  --background: hsl(43 33% 96%); /* #FAF8F3 */
+  /* Near-black keyed to the latte hue, not a neutral #333: grey reads cold over
+     surfaces hued at 40-43°, and the APCA headroom keeps three ink tiers apart. */
+  --foreground: hsl(30 14% 12%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(30 14% 12%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(30 14% 12%);
+  --primary: hsl(133 11% 33%); /* #4A5D4E */
+  --primary-foreground: hsl(0 0% 100%);
+  /* Three tokens, because the accent pulls opposite ways: fill, the label on it,
+     and the accent as text. Tuning any one for another sinks the third. */
+  --secondary: hsl(14, 67%, 72%);
+  --secondary-foreground: hsl(14, 69%, 14%);
+  --secondary-ink: hsl(14 67% 38%);
+  --muted: hsl(40 20% 92%); /* #EBE7E0 */
+  /* Warm-keyed, and set by APCA rather than WCAG: 41% cleared AA at 72.5 Lc, and
+     the dominant pairing is a 12px rung where the 75 floor must be beaten. */
+  --muted-foreground: hsl(30 8% 34%);
+  --subtle-foreground: hsl(0 0% 52%);
+  --accent: hsl(133 15% 90%); /* the hover tint */
+  --accent-foreground: hsl(133 11% 33%);
+  --destructive: hsl(0 50% 36%);
+  --destructive-foreground: hsl(0 0% 98%);
+  /* Soft beige-grey, to keep a rule un-intrusive. */
+  --border: hsl(40 15% 88%); /* #E3DFD8 */
+  --input: var(--border);
+  --ring: hsl(133 11% 33%); /* the brand green */
+  --chart-1: hsl(133 18% 45%);
+  --chart-2: hsl(14 47% 59%);
+  --chart-3: hsl(43 33% 60%);
+  --chart-4: hsl(200 20% 50%);
+  --chart-5: hsl(30 12% 40%);
+  /* A muted teal: the one cool hue the warm set leaves open, and far enough from
+     the slate at 200 to read as its own colour. */
+  --chart-6: hsl(178 35% 40%);
+  --radius: 0.625rem; /* 10px */
+  /* Keyed off the espresso foreground hue, not pure black, so a shadow sits
+     naturally on a latte surface. */
+  --elevation-raised:
+    0 1px 2px -1px hsl(30 18% 12% / 0.1), 0 4px 12px -2px hsl(30 18% 12% / 0.1);
+  --elevation-overlay:
+    0 6px 16px -4px hsl(30 18% 12% / 0.14),
+    0 16px 40px -12px hsl(30 18% 12% / 0.22);
+  --elevation-recessed:
+    inset 0 1px 3px hsl(30 18% 12% / 0.07),
+    inset 0 0 0 1px hsl(30 18% 12% / 0.03);
+  --sidebar: hsl(40 25% 94%); /* #F5F2EC */
+  --sidebar-foreground: hsl(0 0% 25%);
+  --sidebar-primary: hsl(133 11% 33%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(133 15% 88%);
+  --sidebar-accent-foreground: hsl(133 11% 25%);
+  --sidebar-border: hsl(40 15% 88%);
+  --sidebar-ring: hsl(133 11% 33%);
+}
+
+.dark {
+  /* --success does not flip: the same green clears 3:1 on espresso as on latte. */
+  --success-ink: hsl(142 55% 58%);
+  --warn: hsl(30 90% 55%);
+  --warn-ink: hsl(33 60% 72%);
+  --warn-foreground: var(--warn-ink);
+  --info: hsl(211 75% 60%);
+  --info-ink: hsl(211 75% 64%);
+  /* Soft terracotta-red. The light cut measured ~2.9:1 on espresso and read muddy. */
+  --danger: hsl(8 60% 64%);
+
+  /* Espresso twins: fills darken and inks lift to hold the same two bars. */
+  --terracotta: hsl(10 54% 47%);
+  --terracotta-foreground: hsl(10 66% 66%);
+  --ochre: hsl(44 60% 33%);
+  --ochre-foreground: hsl(44 72% 45%);
+  --moss: hsl(68 42% 32%);
+  --moss-foreground: hsl(68 54% 43%);
+  --fern: hsl(133 30% 37%);
+  --fern-foreground: hsl(133 42% 49%);
+  --sage: hsl(168 28% 37%);
+  --sage-foreground: hsl(168 40% 49%);
+  --stone: hsl(202 24% 42%);
+  --stone-foreground: hsl(202 36% 60%);
+  --fig: hsl(332 32% 49%);
+  --fig-foreground: hsl(332 44% 67%);
+  --cocoa: hsl(20 16% 44%);
+  --cocoa-foreground: hsl(20 28% 62%);
+
+  /* 4 points of lightness at L10 reads flat where the same 4 at L96 reads raised;
+     ssite wrote `bg-card dark:bg-muted` at 109 sites before the ground dropped.
+     The lift goes here: --card cannot rise without sinking terracotta's fill. */
+  --background: hsl(30 10% 7%);
+  --foreground: hsl(43 20% 92%);
+  /* Unchanged, and now 7 points above the ground rather than 4 — what those 109
+     sites were reaching for, without moving anything measured against --card. */
+  --card: hsl(30 8% 14%);
+  --card-foreground: hsl(43 20% 92%);
+  --popover: hsl(30 8% 14%);
+  --popover-foreground: hsl(43 20% 92%);
+  --primary: hsl(133 18% 58%); /* #7A9E7E */
+  --primary-foreground: hsl(30 10% 13%);
+  /* Espresso twin: the fill darkens under a white label, the ink lifts as text. */
+  --secondary: hsl(14, 64%, 37%);
+  --secondary-foreground: hsl(0 0% 100%);
+  --secondary-ink: hsl(14 60% 66%);
+  --muted: hsl(30 8% 18%);
+  /* The clearest case here of APCA and WCAG disagreeing: 62% passed WCAG at 7.06
+     and measured 52.1 Lc. Stops at 80, or the step below --foreground closes. */
+  --muted-foreground: hsl(43 16% 80%);
+  /* Raised alongside the secondary so the gap survives; 50% sat a hair over
+     where text stops resolving. */
+  --subtle-foreground: hsl(43 10% 59%);
+  --accent: hsl(133 12% 20%);
+  --accent-foreground: hsl(133 18% 78%);
+  /* Overwhelmingly an ink: sixty `text-destructive` sites, no fill carrying text.
+     The light value measured 2.08:1 here — a colour, not words. */
+  --destructive: hsl(0 65% 67%);
+  /* The ink is light here, so anything printed on it must be dark. Nothing does
+     today; white would arm a 1.3:1 trap for whoever tries first. */
+  --destructive-foreground: hsl(30 10% 10%);
+  /* L22 gave a 1.34:1 hairline on --card, which is where the
+     `dark:border-white/[0.2]` patches came from. L26 stops short of a rule. */
+  --border: hsl(30 8% 26%);
+  --input: var(--border);
+  --ring: hsl(133 18% 58%);
+  --chart-1: hsl(133 18% 58%);
+  --chart-2: hsl(14 45% 55%);
+  --chart-3: hsl(43 20% 70%);
+  --chart-4: hsl(200 15% 55%);
+  --chart-5: hsl(30 8% 35%);
+  --chart-6: hsl(178 30% 52%);
+  /* A warm tint reads as haze on espresso: deep black, more spread. */
+  --elevation-raised:
+    0 1px 2px -1px hsl(0 0% 0% / 0.4), 0 4px 12px -2px hsl(0 0% 0% / 0.45);
+  --elevation-overlay:
+    0 6px 16px -4px hsl(0 0% 0% / 0.5), 0 16px 40px -12px hsl(0 0% 0% / 0.6);
+  /* A recess in the dark is a well, not a stain: a hairline of light catches
+     the bottom lip to sell the depth. */
+  --elevation-recessed:
+    inset 0 2px 5px hsl(0 0% 0% / 0.4), inset 0 -1px 0 hsl(43 20% 92% / 0.04);
+  --sidebar: hsl(30 10% 13%);
+  --sidebar-foreground: hsl(43 20% 90%);
+  --sidebar-primary: hsl(133 18% 58%);
+  --sidebar-primary-foreground: hsl(133 20% 10%);
+  --sidebar-accent: hsl(30 8% 19%);
+  --sidebar-accent-foreground: hsl(43 20% 85%);
+  --sidebar-border: hsl(30 8% 20%);
+  --sidebar-ring: hsl(133 18% 58%);
+}
+
+/* The accordion panel's open/close, so the component does not depend on a
+   consumer having imported tw-animate-css. Base UI publishes the measured
+   height as --accordion-panel-height on the panel. */
+@theme {
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--accordion-panel-height, auto); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--accordion-panel-height, auto); }
+    to { height: 0; }
+  }
+}

package/src/tokens.css

@@ -0,0 +1,43 @@
+/* The structural roles, and nothing else. This file names them and binds the
+   dark variant; theme.css assigns every one a value. An app that skips theme.css
+   must declare all of them itself — `foundations doctor` fails if neither holds. */
+
+/* Binds `dark:` to the `.dark` class. Without it Tailwind v4 follows the OS
+   setting and ignores the app's toggle, silently. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Named for meaning, not hue: a `success` a project renders blue still reads
+     right. Each status hue ships twice — the fill is a mark, the ink is words. */
+  --color-success: var(--success);
+  --color-success-ink: var(--success-ink);
+  --color-warn: var(--warn);
+  --color-warn-ink: var(--warn-ink);
+  --color-info: var(--info);
+  --color-info-ink: var(--info-ink);
+  --color-danger: var(--danger);
+
+  /* Deprecated: this was always an ink. Use `warn-ink`. */
+  --color-warn-foreground: var(--warn-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}

package/src/type.css

@@ -0,0 +1,73 @@
+/* Editorial ramp: Tailwind's default sizes, untouched. Density is a product
+   concern — viably runs its own dense ramp and opts marketing back out to these. */
+
+@theme {
+  /* Below Tailwind's 12px floor. Without them these get written as `text-[11px]`. */
+  --text-3xs: 0.625rem;
+  --text-3xs--line-height: 1.3;
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1.35;
+
+  /* The heading ladder, and the reason it is four rungs of its own rather than
+     four picks off the body ramp: a heading's size is a RATIO to the body under
+     it, and the two surfaces set body at different rungs — 13px in the product,
+     18px on `.editorial`. A heading pinned to `--text-base` therefore reads one
+     step above body on one surface and two steps BELOW it on the other, which is
+     how h3 and h4 ended up smaller than the paragraphs they introduce and why
+     `larger` and `entry` were added to climb back out. No shared rung can be
+     both 14px and 20px; a rung of the heading's own can.
+
+     Dense values here, editorial below — the same shape `--heading-weight` uses.
+     The ladder off 13px body: 1.08 / 1.23 / 1.38 / 1.69. */
+  --text-h4: 0.875rem; /* 14 — the card / panel title */
+  --text-h4--line-height: 1.35;
+  --text-h3: 1rem; /* 16 */
+  --text-h3--line-height: 1.3;
+  --text-h2: 1.125rem; /* 18 — the section heading */
+  --text-h2--line-height: 1.25;
+  --text-h1: 1.375rem; /* 22 — the page title */
+  --text-h1--line-height: 1.2;
+
+  /* Plain @theme, never `inline`: inline bakes the family into the utility and
+     `.editorial` could no longer redirect it per subtree.
+     Consumers bind these with `${font.variable}`, never `${font.className}`. */
+  --font-sans: var(--font-ubuntu-sans, ui-sans-serif), system-ui, sans-serif;
+  --font-mono:
+    var(--font-ubuntu-sans-mono, ui-monospace), SFMono-Regular, monospace;
+  --font-heading: var(--font-sans);
+}
+
+@layer base {
+  :root {
+    /* 680, not 600: Ubuntu Sans steps 500→600 by 9.3% where Geist stepped 11.9%,
+       and panel titles stopped separating from the labels inside them. */
+    --heading-weight: 680;
+  }
+
+  /* Headline serif over sans body copy. Body stays sans — Average's 0.456 x-height
+     reads classical at 40px and cramped at reading size. */
+  .editorial {
+    --font-heading: var(--font-average, ui-serif), Georgia, serif;
+    --heading-weight: 400;
+
+    /* The same ladder off an 18px reading rung: 1.11 / 1.33 / 1.67 / 2. Every
+       rung clears the body it sits over — the contract the product values above
+       keep too, and the one the shared rungs could not. */
+    --text-h4: 1.25rem; /* 20 */
+    --text-h4--line-height: 1.4;
+    --text-h3: 1.5rem; /* 24 */
+    --text-h3--line-height: 1.3;
+    --text-h2: 1.875rem; /* 30 */
+    --text-h2--line-height: 1.2;
+    --text-h1: 2.25rem; /* 36 */
+    --text-h1--line-height: 1.1;
+  }
+}
+
+/* Unlayered on purpose: `font-medium` sits in @layer utilities, which outranks
+   any specificity reachable from @layer base. Average has one weight, so a
+   literal 500 anywhere under `.editorial` would be synthesised. */
+.editorial .font-heading,
+.editorial.font-heading {
+  font-weight: var(--heading-weight);
+}