@womp/kookie-ui 0.18.0 → 0.20.0

package/src/components/table.css

@@ -32,17 +32,8 @@
   box-shadow: var(--table-row-box-shadow);
   box-sizing: border-box;
   vertical-align: inherit;
-  padding: var(--table-cell-padding);
-  /* Works as min-height */
-  height: var(--table-cell-min-height);
-
-  /* Inset with Table */
-  .rt-Inset :where(&:first-child) {
-    padding-left: var(--inset-padding-left, var(--table-cell-padding));
-  }
-  .rt-Inset :where(&:last-child) {
-    padding-right: var(--inset-padding-right, var(--table-cell-padding));
-  }
+  /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
+  padding: var(--table-cell-py) var(--table-cell-px);
 }
 .rt-TableColumnHeaderCell {
   font-weight: 600;
@@ -60,33 +51,47 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
-      --table-cell-padding: var(--space-3);
-      --table-cell-min-height: calc(36px * var(--scale));
+      --table-border-radius: var(--radius-surface-1);
+      --table-cell-py: var(--layout-space-2);
+      --table-cell-px: var(--layout-space-3);
 
       & :where(.rt-TableRootTable) {
-        font-size: var(--font-size-2);
-        line-height: var(--line-height-2);
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
-      --table-cell-padding: var(--space-4);
-      --table-cell-min-height: calc(44px * var(--scale));
+      --table-border-radius: var(--radius-surface-2);
+      --table-cell-py: var(--layout-space-3);
+      --table-cell-px: var(--layout-space-4);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
-      --table-cell-padding: var(--space-5);
-      --table-cell-min-height: var(--space-9);
+      --table-border-radius: var(--radius-surface-3);
+      --table-cell-py: var(--layout-space-4);
+      --table-cell-px: var(--layout-space-5);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      --table-border-radius: var(--radius-surface-4);
+      --table-cell-py: var(--layout-space-5);
+      --table-cell-px: var(--layout-space-6);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+        letter-spacing: var(--letter-spacing-4);
       }
     }
   }

package/src/components/text-field.css

@@ -245,7 +245,7 @@
       --text-field-gap: var(--control-gap-1);
       --text-field-icon-size: var(--icon-size-1);
       --text-field-slot-inset: var(--slot-inset-1);
-      --text-field-border-radius: var(--radius-pill-1);
+      --text-field-border-radius: var(--radius-control-1);
       --text-field-native-icon-size: var(--icon-size-1);
       font-size: var(--font-size-1);
       letter-spacing: var(--letter-spacing-1);
@@ -269,7 +269,7 @@
       --text-field-gap: var(--control-gap-2);
       --text-field-icon-size: var(--icon-size-2);
       --text-field-slot-inset: var(--slot-inset-2);
-      --text-field-border-radius: var(--radius-pill-2);
+      --text-field-border-radius: var(--radius-control-2);
       --text-field-native-icon-size: var(--icon-size-2);
       font-size: var(--font-size-2);
       letter-spacing: var(--letter-spacing-2);
@@ -294,7 +294,7 @@
       --text-field-gap: var(--control-gap-3);
       --text-field-icon-size: var(--icon-size-3);
       --text-field-slot-inset: var(--slot-inset-3);
-      --text-field-border-radius: var(--radius-pill-3);
+      --text-field-border-radius: var(--radius-control-3);
       --text-field-native-icon-size: var(--icon-size-3);
       font-size: var(--font-size-3);
       letter-spacing: var(--letter-spacing-3);
@@ -318,7 +318,7 @@
       --text-field-gap: var(--control-gap-4);
       --text-field-icon-size: var(--icon-size-4);
       --text-field-slot-inset: var(--slot-inset-4);
-      --text-field-border-radius: var(--radius-pill-4);
+      --text-field-border-radius: var(--radius-control-4);
       --text-field-native-icon-size: var(--icon-size-4);
       font-size: var(--font-size-4);
       letter-spacing: var(--letter-spacing-4);

package/src/components/text.css

@@ -59,11 +59,6 @@
 
 @breakpoints {
   .rt-Text {
-    &:where(.rt-r-size-0) {
-      font-size: var(--font-size-0);
-      --line-height: var(--line-height-0);
-      --letter-spacing: var(--letter-spacing-0);
-    }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       --line-height: var(--line-height-1);
@@ -109,20 +104,5 @@
       --line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
-    &:where(.rt-r-size-10) {
-      font-size: var(--font-size-10);
-      --line-height: var(--line-height-10);
-      --letter-spacing: var(--letter-spacing-10);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: var(--font-size-11);
-      --line-height: var(--line-height-11);
-      --letter-spacing: var(--letter-spacing-11);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: var(--font-size-12);
-      --line-height: var(--line-height-12);
-      --letter-spacing: var(--letter-spacing-12);
-    }
   }
 }

package/src/components/text.props.tsx

@@ -11,7 +11,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const as = ['span', 'div', 'label', 'p'] as const;
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const textPropDefs = {
   as: { type: 'enum', values: as, default: 'span' },

package/src/components/toolbar.css

@@ -27,28 +27,28 @@
 
   &:where(.rt-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
-    --toolbar-radius: var(--radius-pill-1);
+    --toolbar-radius: var(--radius-control-1);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
-    --toolbar-radius: var(--radius-pill-2);
+    --toolbar-radius: var(--radius-control-2);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
-    --toolbar-radius: var(--radius-pill-3);
+    --toolbar-radius: var(--radius-control-3);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);
   }
 
   &:where(.rt-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
-    --toolbar-radius: var(--radius-pill-4);
+    --toolbar-radius: var(--radius-control-4);
     --toolbar-gap: var(--space-4);
     --toolbar-title-gap: var(--space-6);
   }

package/src/components/virtual-menu.tsx

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
 
+import type { MenuSize } from './_internal/menu-context.js';
+
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
  *
@@ -90,7 +92,7 @@ interface VirtualMenuProps<T> {
    * Only set manually when using VirtualMenu outside of a menu context.
    * @default '2' (or inherited from context)
    */
-  size?: '1' | '2';
+  size?: MenuSize;
   /**
    * Estimated height of each item in pixels.
    * Can be a number (same for all) or a function (per-item).

package/src/props/index.ts

@@ -43,7 +43,6 @@ export * from '../components/heading.props.js';
 export * from '../components/hover-card.props.js';
 export * from '../components/icon-button.props.js';
 export * from '../components/image.props.js';
-export * from '../components/inset.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
 export * from '../components/popover.props.js';

package/src/props/margin.props.ts

@@ -1,7 +1,7 @@
 import type { PropDef, GetPropDefTypes } from './prop-def.js';
 
 // prettier-ignore
-const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12'] as const;
+const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12', 'bleed'] as const;
 
 const marginPropDefs = {
   /**

package/src/props/weight.prop.ts

@@ -1,6 +1,7 @@
 import type { PropDef } from './prop-def.js';
 
-const weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;
+/** v2's three weights (§15). No bold: a larger size or stronger emphasis says importance. */
+const weights = ['regular', 'medium', 'semibold'] as const;
 
 const weightPropDef = {
   weight: {

package/src/styles/tokens/radius.css

@@ -1,78 +1,59 @@
 /*
  * RADIUS
  *
- * Two channels, one theme.
+ * v2's structure, v1's roundness.
  *
- * `--radius-*`         CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
- *                      switches, tabs. These scale aggressively with the theme
- *                      and opt into `--radius-full` to become pills, through
- *                      `--radius-pill-*`.
- *
- * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
- *                      callouts. These damp as the theme grows and never go
- *                      pill. A surface at `full` is exactly as round as a
- *                      surface at `medium`; `--radius-surface-factor` is
- *                      capped at 1.
- *
- * The gap between the two channels is the point: round controls read as
- * touchable, restrained surfaces read as architectural. Widening the theme
- * widens that contrast instead of inflating everything at once.
+ * 1. The palette: --radius-0 to --radius-10, plus --radius-full. Raw corners, scaled by the
+ *    Theme radius through --radius-factor. --radius-full is 9999px at `full` and 0px below it.
+ * 2. Roles: one ladder per job, four steps each, one step per size index. A component reads a
+ *    role, never a palette step.
+ *    --radius-control-N  a control's corner. Half the control height at `full` (a capsule),
+ *                        the palette step N below it.
+ *    --radius-row-N      a row's corner inside a panel that hugs rows. Half the row's own
+ *                        height at `full`, --radius-control-N below it.
+ *    --radius-surface-N  a surface's corner: cards, tables, panes, popovers, menus.
+ *    --radius-overlay-N  a detached surface's corner: dialogs and sheets.
+ *    Surfaces and overlays damp as the theme grows (--radius-surface-factor, capped at 1)
+ *    and never go pill.
+ * 3. Nesting: a pane inside a pane is concentric. Inner corner = outer corner minus outer
+ *    padding, never below 0. See the end of this file.
  */
 
 [data-radius] {
-  /* Controls & marks */
+  /* 1. Palette */
+  --radius-0: 0px;
   --radius-1: calc(6px * var(--scale) * var(--radius-factor));
   --radius-2: calc(8px * var(--scale) * var(--radius-factor));
   --radius-3: calc(10px * var(--scale) * var(--radius-factor));
   --radius-4: calc(12px * var(--scale) * var(--radius-factor));
-
-  /*  */
   --radius-5: calc(16px * var(--scale) * var(--radius-factor));
   --radius-6: calc(20px * var(--scale) * var(--radius-factor));
   --radius-7: calc(24px * var(--scale) * var(--radius-factor));
   --radius-8: calc(28px * var(--scale) * var(--radius-factor));
-
-  /*  */
   --radius-9: calc(32px * var(--scale) * var(--radius-factor));
   --radius-10: calc(40px * var(--scale) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scale) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scale) * var(--radius-factor));
-
-  /* Controls that turn into a pill when the theme radius is `full`. Use these instead of
-     repeating `max(var(--radius-N), var(--radius-full))` in each component. */
-  --radius-pill-1: max(var(--radius-1), var(--radius-full));
-  --radius-pill-2: max(var(--radius-2), var(--radius-full));
-  --radius-pill-3: max(var(--radius-3), var(--radius-full));
-  --radius-pill-4: max(var(--radius-4), var(--radius-full));
-  --radius-pill-5: max(var(--radius-5), var(--radius-full));
-  --radius-pill-6: max(var(--radius-6), var(--radius-full));
-  --radius-pill-7: max(var(--radius-7), var(--radius-full));
-  --radius-pill-8: max(var(--radius-8), var(--radius-full));
-  --radius-pill-9: max(var(--radius-9), var(--radius-full));
-  --radius-pill-10: max(var(--radius-10), var(--radius-full));
-  --radius-pill-11: max(var(--radius-11), var(--radius-full));
-  --radius-pill-12: max(var(--radius-12), var(--radius-full));
 
-  /* Surfaces — same ramp, damped factor, no pill */
-  --radius-surface-1: calc(6px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scale) * var(--radius-surface-factor));
+  /* 2. Roles */
+  --radius-control-1: var(--radius-1);
+  --radius-control-2: var(--radius-2);
+  --radius-control-3: var(--radius-3);
+  --radius-control-4: var(--radius-4);
+  --radius-row-1: var(--radius-control-1);
+  --radius-row-2: var(--radius-control-2);
+  --radius-row-3: var(--radius-control-3);
+  --radius-row-4: var(--radius-control-4);
 
-  /*  */
-  --radius-surface-5: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-1: calc(10px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-2: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-3: calc(22px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-4: calc(28px * var(--scale) * var(--radius-surface-factor));
 
-  /*  */
-  --radius-surface-9: calc(32px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-1: calc(14px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-2: calc(20px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-3: calc(24px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-4: calc(28px * var(--scale) * var(--radius-surface-factor));
 }
 
-
 [data-radius='none'] {
   --radius-factor: 0;
   --radius-surface-factor: 0;
@@ -101,4 +82,79 @@
   --radius-factor: 2;
   --radius-surface-factor: 1;
   --radius-full: 9999px;
+
+  /* A control at `full` is a capsule: half its own height. */
+  --radius-control-1: calc(var(--control-height-1) / 2);
+  --radius-control-2: calc(var(--control-height-2) / 2);
+  --radius-control-3: calc(var(--control-height-3) / 2);
+  --radius-control-4: calc(var(--control-height-4) / 2);
+
+  /* A row in a panel hugs its line, so its capsule is half the line plus both insets. */
+  --radius-row-1: calc((var(--line-height-1) + 2 * var(--row-inset-1)) / 2);
+  --radius-row-2: calc((var(--line-height-2) + 2 * var(--row-inset-2)) / 2);
+  --radius-row-3: calc((var(--line-height-3) + 2 * var(--row-inset-3)) / 2);
+  --radius-row-4: calc((var(--line-height-4) + 2 * var(--row-inset-4)) / 2);
+}
+
+/*
+ * 3. Nesting (v2 §6, §10)
+ *
+ * A surface opts in with `rt-SurfaceNest` next to its `rt-r-size-N` class. At its size it
+ * publishes on ITSELF:
+ *   --kui-sf-radius  its corner (--radius-surface-N)
+ *   --kui-sf-p       its padding (--surface-p-N)
+ *   --kui-sf-r       the corner to draw: its own, or the nested corner when inside another
+ * and on its CHILDREN:
+ *   --kui-nest       outer corner minus outer padding
+ *
+ * --kui-nest is written from the size tokens, not from --kui-sf-radius and --kui-sf-p: a
+ * direct child that is itself a surface would resolve those against its own declarations.
+ * It inherits, so it crosses any Flex, Grid or Box in between. Two levels: the inner surface
+ * publishes from its own size, not from the corner it was handed.
+ *
+ * The component draws `border-radius: var(--kui-sf-r)` and pads by `var(--kui-sf-p)`.
+ * An element that states `--kui-nest: initial` hands the inner surface its own corner back.
+ */
+@breakpoints {
+  .rt-SurfaceNest {
+    &:where(.rt-r-size-1) {
+      --kui-sf-radius: var(--radius-surface-1);
+      --kui-sf-p: var(--surface-p-1);
+    }
+    &:where(.rt-r-size-1) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+    }
+    &:where(.rt-r-size-2) {
+      --kui-sf-radius: var(--radius-surface-2);
+      --kui-sf-p: var(--surface-p-2);
+    }
+    &:where(.rt-r-size-2) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+    }
+    &:where(.rt-r-size-3) {
+      --kui-sf-radius: var(--radius-surface-3);
+      --kui-sf-p: var(--surface-p-3);
+    }
+    &:where(.rt-r-size-3) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+    }
+    &:where(.rt-r-size-4) {
+      --kui-sf-radius: var(--radius-surface-4);
+      --kui-sf-p: var(--surface-p-4);
+    }
+    &:where(.rt-r-size-4) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+    }
+  }
+}
+
+.rt-SurfaceNest {
+  --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
+}
+
+:where(.rt-SurfaceNest) .rt-SurfaceNest {
+  --kui-sf-r: min(
+    var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))),
+    var(--kui-sf-radius, var(--radius-surface-2))
+  );
 }

package/src/styles/tokens/typography.css

@@ -1,54 +1,38 @@
 .radix-themes {
-  --font-size-0: calc(10px * var(--scale));
+  /* Type: v2's nine steps and three weights. Fonts are v1's own (font-family.css). */
   --font-size-1: calc(12px * var(--scale));
   --font-size-2: calc(14px * var(--scale));
   --font-size-3: calc(16px * var(--scale));
   --font-size-4: calc(18px * var(--scale));
   --font-size-5: calc(20px * var(--scale));
   --font-size-6: calc(24px * var(--scale));
-  --font-size-7: calc(28px * var(--scale));
-  --font-size-8: calc(35px * var(--scale));
-  --font-size-9: calc(60px * var(--scale));
-  --font-size-10: calc(72px * var(--scale));
-  --font-size-11: calc(86px * var(--scale));
-  --font-size-12: calc(104px * var(--scale));
-
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
+  --font-size-7: calc(32px * var(--scale));
+  --font-size-8: calc(44px * var(--scale));
+  --font-size-9: calc(64px * var(--scale));
+
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
 
-  --line-height-0: calc(12px * var(--scale));
   --line-height-1: calc(16px * var(--scale));
   --line-height-2: calc(20px * var(--scale));
   --line-height-3: calc(24px * var(--scale));
   --line-height-4: calc(26px * var(--scale));
   --line-height-5: calc(28px * var(--scale));
-  --line-height-6: calc(30px * var(--scale));
-  --line-height-7: calc(36px * var(--scale));
-  --line-height-8: calc(40px * var(--scale));
-  --line-height-9: calc(60px * var(--scale));
-  --line-height-10: calc(76px * var(--scale));
-  --line-height-11: calc(90px * var(--scale));
-  --line-height-12: calc(108px * var(--scale));
-
-  --letter-spacing-0: 0.005em;
-  --letter-spacing-1: 0.0025em;
+  --line-height-6: calc(32px * var(--scale));
+  --line-height-7: calc(40px * var(--scale));
+  --line-height-8: calc(52px * var(--scale));
+  --line-height-9: calc(70px * var(--scale));
+
+  --letter-spacing-1: 0em;
   --letter-spacing-2: 0em;
   --letter-spacing-3: 0em;
-  --letter-spacing-4: -0.0025em;
-  --letter-spacing-5: -0.005em;
-  --letter-spacing-6: -0.00625em;
-  --letter-spacing-7: -0.0075em;
-  --letter-spacing-8: -0.01em;
+  --letter-spacing-4: -0.005em;
+  --letter-spacing-5: -0.0075em;
+  --letter-spacing-6: -0.01em;
+  --letter-spacing-7: -0.015em;
+  --letter-spacing-8: -0.02em;
   --letter-spacing-9: -0.025em;
-  --letter-spacing-10: -0.03em;
-  --letter-spacing-11: -0.035em;
-  --letter-spacing-12: -0.04em;
 
   /* default values (typefaces live in font-family.css) */
 
@@ -67,24 +51,14 @@
   --heading-leading-trim-start: var(--default-leading-trim-start);
   --heading-leading-trim-end: var(--default-leading-trim-end);
   --heading-letter-spacing: 0em;
-
-  --heading-line-height-0: calc(12px * var(--scale));
-  --heading-line-height-1: calc(16px * var(--scale));
-  --heading-line-height-2: calc(18px * var(--scale));
-  --heading-line-height-3: calc(22px * var(--scale));
-  --heading-line-height-4: calc(24px * var(--scale));
-  --heading-line-height-5: calc(26px * var(--scale));
-  --heading-line-height-6: calc(30px * var(--scale));
-  --heading-line-height-7: calc(36px * var(--scale));
-  --heading-line-height-8: calc(40px * var(--scale));
-  --heading-line-height-9: calc(60px * var(--scale));
-  --heading-line-height-10: calc(76px * var(--scale));
-  --heading-line-height-11: calc(90px * var(--scale));
-  --heading-line-height-12: calc(108px * var(--scale));
+  /* The weight every Heading uses unless it sets `weight` (v2 §15: medium). Change it here, once. */
+  --heading-font-weight: var(--font-weight-medium);
+  /* No heading line heights: Heading reads --line-height-N, the same ramp as Text (v2 §15). */
 
   /* Code */
 
-  --code-font-size-adjust: 0.95;
+  /* Mono glyphs read a step large at the same size, so Code shrinks them by this factor (v2). */
+  --mono-scale: 0.925;
   --code-font-style: normal;
   --code-font-weight: inherit;
   --code-letter-spacing: -0.007em;
@@ -97,8 +71,6 @@
 
   --strong-font-size-adjust: 1;
   --strong-font-style: inherit;
-  /* The weight every Heading uses unless it sets `weight`. Change it here, once. */
-  --heading-font-weight: var(--font-weight-bold);
   --strong-font-weight: var(--font-weight-medium);
   --strong-letter-spacing: 0em;
 

package/src/styles/utilities/font-weight.css

@@ -1,16 +1,4 @@
 @breakpoints {
-  .rt-r-weight-thin {
-    font-weight: var(--font-weight-thin);
-  }
-
-  .rt-r-weight-extralight {
-    font-weight: var(--font-weight-extralight);
-  }
-
-  .rt-r-weight-light {
-    font-weight: var(--font-weight-light);
-  }
-
   .rt-r-weight-regular {
     font-weight: var(--font-weight-regular);
   }
@@ -22,12 +10,4 @@
   .rt-r-weight-semibold {
     font-weight: var(--font-weight-semibold);
   }
-
-  .rt-r-weight-bold {
-    font-weight: var(--font-weight-bold);
-  }
-
-  .rt-r-weight-extrabold {
-    font-weight: var(--font-weight-extrabold);
-  }
 }