@supertype.ai/foundations 0.1.28 → 0.1.30

package/src/theme.css

@@ -18,20 +18,31 @@
      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-terracotta-ink: var(--terracotta-ink);
   --color-ochre: var(--ochre);
-  --color-ochre-foreground: var(--ochre-foreground);
+  --color-ochre-ink: var(--ochre-ink);
   --color-moss: var(--moss);
-  --color-moss-foreground: var(--moss-foreground);
+  --color-moss-ink: var(--moss-ink);
   --color-fern: var(--fern);
-  --color-fern-foreground: var(--fern-foreground);
+  --color-fern-ink: var(--fern-ink);
   --color-sage: var(--sage);
-  --color-sage-foreground: var(--sage-foreground);
+  --color-sage-ink: var(--sage-ink);
   --color-stone: var(--stone);
-  --color-stone-foreground: var(--stone-foreground);
+  --color-stone-ink: var(--stone-ink);
   --color-fig: var(--fig);
-  --color-fig-foreground: var(--fig-foreground);
+  --color-fig-ink: var(--fig-ink);
   --color-cocoa: var(--cocoa);
+  --color-cocoa-ink: var(--cocoa-ink);
+
+  /* Deprecated aliases. Registered so an unmigrated call site keeps rendering;
+     the ESLint rules flag it so it does not stay unmigrated. */
+  --color-terracotta-foreground: var(--terracotta-foreground);
+  --color-ochre-foreground: var(--ochre-foreground);
+  --color-moss-foreground: var(--moss-foreground);
+  --color-fern-foreground: var(--fern-foreground);
+  --color-sage-foreground: var(--sage-foreground);
+  --color-stone-foreground: var(--stone-foreground);
+  --color-fig-foreground: var(--fig-foreground);
   --color-cocoa-foreground: var(--cocoa-foreground);
 
   --color-chart-1: var(--chart-1);
@@ -57,11 +68,19 @@
   --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. */
+     multiplicative scale would produce. `rounded-full` stays a pill.
+
+     The container rung was +4px, the one step in the run that was not 2, and 14px
+     on a card read softer than anything else the package draws — a panel rounder
+     than the button sitting inside it. At +2 the run below the marketing sizes is
+     6 / 8 / 10 / 12, evenly spaced, and the jump to `2xl` is left to say what it
+     was always meant to: this one is a feature card, not a container. Card,
+     Accordion, and the MDX pre/img/table frames all step down together, which is
+     the point of moving the token rather than the five call sites. */
   --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-xl: calc(var(--radius) + 2px); /* 12px — cards, panels, framed blocks */
   --radius-2xl: calc(var(--radius) + 8px); /* 18px — marketing feature cards */
   --radius-3xl: calc(var(--radius) + 12px); /* 22px */
   --radius-4xl: calc(var(--radius) + 16px); /* 26px */
@@ -72,40 +91,74 @@
      both, so its label stays light in both. */
   --tint-foreground: hsl(0, 0%, 100%);
 
+  /* Which way a control moves under the pointer: away from the page, so it
+     deepens on latte and lifts on espresso. How far is the state's own
+     business, and hover spends 18%.
+
+     The extreme rather than `--foreground`, because mixing toward an ink that
+     already sits near the fill gives a step the size of the gap between them:
+     `--primary` moved 4.9 ΔL* on latte against 6.2 on espresso from the same
+     declaration, and read as no hover at all. Against black and white every
+     tone clears 6 ΔL* in both themes. */
+  --hover-toward: hsl(0, 0%, 0%);
 
-  /* 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%);
+
+  /* Status, on the same three-cut rule as every other tone: the fill is a mark
+     (3:1), the `-ink` is that hue used as words (4.5:1), and the `-foreground`
+     is the label printed on the fill (4.5:1 against it). A filled status
+     control is a real thing — `Button tone="warn" variant="solid"` — so the
+     pair is measured rather than assumed. checkSignals holds all three. */
+  --success: hsl(142 75% 29%);
   --success-ink: hsl(142 68% 28%);
+  /* White clears 4.94:1 here. At the old 31% it measured 4.42:1, which passed
+     nothing and shipped anyway, because no component was checked against it. */
+  --success-foreground: var(--tint-foreground);
   /* 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);
+  /* The label on the warn fill, and one value for both themes: amber is a mark
+     in each, so the ink that reads on it is deep in each. 4.84:1 on latte,
+     6.70:1 on espresso. White measured 3.37:1 and 2.44:1. */
+  --warn-foreground: hsl(30 25% 12%);
   --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. */
+  /* Latte-warm greens, clays and stone. Both cuts of each hue, light theme.
+     `-ink`, not `-foreground`: in this package `-foreground` is the label printed
+     on a fill and `-ink` is the hue used as words, and these are the latter —
+     `checkSignals` holds them to 4.5:1 against the page, and printing one on its
+     own fill measures about 1.2:1. They shipped under the wrong suffix for long
+     enough that a docs page believed it and rendered them as bare squares. The
+     old names are kept below as aliases; the ESLint rules flag them. */
   --terracotta: hsl(10 54% 60%);
-  --terracotta-foreground: hsl(10 72% 40%);
+  --terracotta-ink: hsl(10 72% 40%);
   --ochre: hsl(44 60% 42%);
-  --ochre-foreground: hsl(44 78% 27%);
+  --ochre-ink: hsl(44 78% 27%);
   --moss: hsl(68 42% 41%);
-  --moss-foreground: hsl(68 60% 26%);
+  --moss-ink: hsl(68 60% 26%);
   --fern: hsl(133 30% 47%);
-  --fern-foreground: hsl(133 48% 30%);
+  --fern-ink: hsl(133 48% 30%);
   --sage: hsl(168 28% 47%);
-  --sage-foreground: hsl(168 46% 29%);
+  --sage-ink: hsl(168 46% 29%);
   --stone: hsl(202 24% 55%);
-  --stone-foreground: hsl(202 42% 36%);
+  --stone-ink: hsl(202 42% 36%);
   --fig: hsl(332 32% 61%);
-  --fig-foreground: hsl(332 50% 43%);
+  --fig-ink: hsl(332 50% 43%);
   --cocoa: hsl(20 16% 56%);
-  --cocoa-foreground: hsl(20 34% 39%);
+  --cocoa-ink: hsl(20 34% 39%);
+
+  /* Deprecated: these were always the ink, under shadcn's name for the opposite
+     thing. Use `-ink`; the ESLint rules flag the old name. */
+  --terracotta-foreground: var(--terracotta-ink);
+  --ochre-foreground: var(--ochre-ink);
+  --moss-foreground: var(--moss-ink);
+  --fern-foreground: var(--fern-ink);
+  --sage-foreground: var(--sage-ink);
+  --stone-foreground: var(--stone-ink);
+  --fig-foreground: var(--fig-ink);
+  --cocoa-foreground: var(--cocoa-ink);
 
   --background: hsl(43 33% 96%); /* #FAF8F3 */
   /* Near-black keyed to the latte hue, not a neutral #333: grey reads cold over
@@ -117,6 +170,12 @@
   --popover-foreground: hsl(30 14% 12%);
   --primary: hsl(133 11% 33%); /* #4A5D4E */
   --primary-foreground: hsl(0 0% 100%);
+  /* The third cut, the one `--secondary` and every status hue already shipped.
+     A fill is a mark and words are read, so one value doing both jobs is tuned
+     for neither — and that is why the espresso CTA measured Lc 48.9 against
+     this theme's 89.3. On latte the two happen to coincide, so this is an
+     alias here and a value of its own under .dark. */
+  --primary-ink: var(--primary);
   /* 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%);
@@ -131,13 +190,23 @@
   --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 */
+  /* Soft beige-grey, to keep a rule un-intrusive — but a rule still has to be
+     seen. L88 measured 1.20:1 on --background and 1.29:1 on --card, below the
+     1.34:1 the dark twin at L22 was rejected for, so the light theme shipped the
+     fainter hairline of the two. L80 puts --card at 1.56:1, within a point of
+     the dark theme's 1.57:1, so the same border reads the same weight in both. */
+  --border: hsl(40 15% 80%); /* #CFC8BA */
   --input: var(--border);
   --ring: hsl(133 11% 33%); /* the brand green */
+  /* A series is a fill: docs/cli.md promises every one of them clears 3:1 on the
+     page and on a card, and until `checkSignals` measured them two did not. The
+     sand was the worst in the palette at 2.18:1 — a 43° hue on a 43° ground, the
+     same colour 36 points apart in lightness. Saturation rises as it darkens, or
+     it lands as mud rather than as sand. The six stay 17.1 ΔE76 apart at their
+     closest (chart-4 against chart-6), which is where the floor sat before. */
   --chart-1: hsl(133 18% 45%);
-  --chart-2: hsl(14 47% 59%);
-  --chart-3: hsl(43 33% 60%);
+  --chart-2: hsl(14 47% 56%); /* 2.98:1 at L59 */
+  --chart-3: hsl(43 45% 42%); /* 2.18:1 at 33% L60 */
   --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
@@ -155,21 +224,27 @@
     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%);
+  /* Warm-keyed like every other ink here. It shipped as hsl(0 0% 25%), the one
+     neutral grey in the light theme, on a surface hued at 40° — the same cold
+     read L146 rules out for --foreground. Same lightness step, 9.43:1. */
+  --sidebar-foreground: hsl(30 12% 24%);
   --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%);
+  /* A sidebar rule sits on --sidebar, not the page, and that surface is lighter
+     than --background — so it needs 2 points more than --border to read the same
+     (1.49:1, against the dark twin's 1.49:1). */
+  --sidebar-border: hsl(40 15% 77%);
   --sidebar-ring: hsl(133 11% 33%);
 }
 
 .dark {
+  --hover-toward: hsl(0, 0%, 100%);
   /* --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. */
@@ -177,21 +252,29 @@
 
   /* Espresso twins: fills darken and inks lift to hold the same two bars. */
   --terracotta: hsl(10 54% 47%);
-  --terracotta-foreground: hsl(10 66% 66%);
+  --terracotta-ink: hsl(10 66% 66%);
   --ochre: hsl(44 60% 33%);
-  --ochre-foreground: hsl(44 72% 45%);
+  --ochre-ink: hsl(44 72% 45%);
   --moss: hsl(68 42% 32%);
-  --moss-foreground: hsl(68 54% 43%);
+  --moss-ink: hsl(68 54% 43%);
   --fern: hsl(133 30% 37%);
-  --fern-foreground: hsl(133 42% 49%);
+  --fern-ink: hsl(133 42% 49%);
   --sage: hsl(168 28% 37%);
-  --sage-foreground: hsl(168 40% 49%);
+  --sage-ink: hsl(168 40% 49%);
   --stone: hsl(202 24% 42%);
-  --stone-foreground: hsl(202 36% 60%);
+  --stone-ink: hsl(202 36% 60%);
   --fig: hsl(332 32% 49%);
-  --fig-foreground: hsl(332 44% 67%);
+  --fig-ink: hsl(332 44% 67%);
   --cocoa: hsl(20 16% 44%);
-  --cocoa-foreground: hsl(20 28% 62%);
+  --cocoa-ink: hsl(20 28% 62%);
+  --terracotta-foreground: var(--terracotta-ink);
+  --ochre-foreground: var(--ochre-ink);
+  --moss-foreground: var(--moss-ink);
+  --fern-foreground: var(--fern-ink);
+  --sage-foreground: var(--sage-ink);
+  --stone-foreground: var(--stone-ink);
+  --fig-foreground: var(--fig-ink);
+  --cocoa-foreground: var(--cocoa-ink);
 
   /* 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.
@@ -204,8 +287,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%);
+  /* Split in two, so each cut is tuned for its own job. The fill takes a white
+     label at Lc 83.0 against latte's 89.3, and still clears 3:1 as a mark on
+     espresso (3.36:1). The ink reads as words at Lc 73.8 against latte's 79.1.
+     Both sit inside the 15 Lc the themes are held to; the single token they
+     replace sat 30 Lc adrift on both counts. */
+  --primary: hsl(133 34% 34%);
+  --primary-foreground: var(--tint-foreground);
+  --primary-ink: hsl(133 26% 76%);
   /* 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%);
@@ -220,8 +309,12 @@
   --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 light value measured 2.08:1 here — a colour, not words.
+     L67 read 4.48:1 on --muted, which is AA to two decimal places and under it
+     to three, on a surface with several hundred call sites. L68 is the smallest
+     step that clears with room to spare (4.64:1) rather than landing back on the
+     line; --background and --card, already clear, rise with it. */
+  --destructive: hsl(0 65% 68%);
   /* 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%);
@@ -234,7 +327,9 @@
   --chart-2: hsl(14 45% 55%);
   --chart-3: hsl(43 20% 70%);
   --chart-4: hsl(200 15% 55%);
-  --chart-5: hsl(30 8% 35%);
+  /* The espresso twin of the light sand: 2.26:1 on --card, the same failure the
+     light theme carried, in the theme that usually gets tuned first. */
+  --chart-5: hsl(30 8% 46%);
   --chart-6: hsl(178 30% 52%);
   /* A warm tint reads as haze on espresso: deep black, more spread. */
   --elevation-raised:
@@ -251,7 +346,9 @@
   --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%);
+  /* L20 measured 1.28:1 on --sidebar, the same too-faint rule the light theme
+     shipped. L24 is the twin of the light 1.49:1. */
+  --sidebar-border: hsl(30 8% 24%);
   --sidebar-ring: hsl(133 18% 58%);
 }
 

package/src/tokens.css

@@ -15,6 +15,7 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-ink: var(--primary-ink);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -25,18 +26,18 @@
   --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. */
+     right. The fill is a mark, the ink is words, the foreground is the label
+     printed on the fill. */
   --color-success: var(--success);
   --color-success-ink: var(--success-ink);
+  --color-success-foreground: var(--success-foreground);
   --color-warn: var(--warn);
   --color-warn-ink: var(--warn-ink);
+  --color-warn-foreground: var(--warn-foreground);
   --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

@@ -39,7 +39,7 @@
 
 @layer base {
   :root {
-    /* 680, not 600: Ubuntu Sans steps 500→600 by 9.3% where Geist stepped 11.9%,
+    /* 680, not 600: Ubuntu Sans steps 500 to 600 by 9.3% where Geist stepped 11.9%,
        and panel titles stopped separating from the labels inside them. */
     --heading-weight: 680;
   }