@womp/kookie-ui 0.16.0 → 0.17.0

package/src/components/tooltip.css

@@ -1,6 +1,6 @@
 .rt-TooltipContent {
   box-sizing: border-box;
-  padding: var(--space-1) var(--space-2);
+  padding: var(--space-2) var(--space-3);
   background-color: var(--gray-12);
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */

package/src/components/virtual-menu.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
-import { useThemeContext } from './theme.js';
 
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
@@ -194,15 +193,14 @@ function VirtualMenuRoot<T>({
   const parentRef = React.useRef<HTMLDivElement>(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);
   const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();
-  const { scaling } = useThemeContext();
 
   // Resolve item height: explicit prop > own size > parent menu > default size '2'.
   // Heights follow the theme scaling, like the --base-menu-item-height token.
   const estimatedItemSize =
     estimatedItemSizeProp ??
     (sizeProp
-      ? getMenuItemHeight(sizeProp, scaling)
-      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));
+      ? getMenuItemHeight(sizeProp)
+      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));
 
   // Validate props
   if (!itemLabel && !RenderItem) {

package/src/styles/tokens/base.css

@@ -5,5 +5,3 @@
 @import './shadow.css';
 @import './font-family.css';
 @import './typography.css';
-@import './blur.css';
-@import './opacity.css';

package/src/styles/tokens/color.css

@@ -8,11 +8,8 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity));
   --color-surface-solid: white;
-  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
-  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
 
   /*
    * v2's names for the page, its text and its neutral scale, so code written against either
@@ -32,21 +29,14 @@
   --neutral-10: var(--gray-10);
   --neutral-11: var(--gray-11);
   --neutral-12: var(--gray-12);
-
-  /* Material system defaults (solid) - controls color-mix blending for component backgrounds */
-  --material-blend: 100%;
-  --material-alpha: 0;
 }
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-opacity-percentage), transparent);
   --color-surface-solid: var(--gray-2);
-  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
-  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
 }
 
 /*                                     */
@@ -132,28 +122,10 @@
 /*                                     */
 
 .radix-themes {
-  &:where([data-material='solid']) {
-    --color-panel: var(--color-panel-solid);
-    --color-surface: var(--color-surface-solid);
-    --color-dialog: var(--color-dialog-solid);
-    --backdrop-filter-panel: none;
-    --backdrop-filter-components: none;
-    --backdrop-filter-dialog: none;
-    /* Material system for component backgrounds */
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-  &:where([data-material='translucent']) {
-    --color-panel: var(--color-panel-translucent);
-    --color-surface: var(--color-surface-translucent);
-    --color-dialog: var(--color-dialog-translucent);
-    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-    --backdrop-filter-dialog: var(--backdrop-filter-dialog-enabled);
-    /* Material system for component backgrounds */
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
+  /* Solid is the only material, so these always resolve to the opaque surfaces. */
+  --color-panel: var(--color-panel-solid);
+  --color-surface: var(--color-surface-solid);
+  --color-dialog: var(--color-dialog-solid);
 }
 
 /*                                     */

package/src/styles/tokens/constants.css

@@ -1,34 +1,6 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 :where(.radix-themes) {
-  /* Backdrop blur constants - using new blur tokens */
-  --backdrop-blur-components: var(--blur-4);
-  --backdrop-blur-panel: var(--blur-5);
-  --backdrop-blur-dialog: var(--blur-6);
-
-  /*
-   * The filter a translucent surface uses when blur is enabled. Everything that
-   * opts into a backdrop filter reads one of these rather than writing
-   * `blur(...)` itself, so `[data-blur='none']` and
-   * `prefers-reduced-transparency` can switch the property off entirely — see
-   * tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: blur(var(--backdrop-blur-components));
-  --backdrop-filter-panel-enabled: blur(var(--backdrop-blur-panel));
-  --backdrop-filter-dialog-enabled: blur(var(--backdrop-blur-dialog));
-
-  /* Dialog background opacity constants (stronger than panel) */
-  --dialog-opacity: var(--opacity-9);
-  --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
-
-  /* Panel background opacity constants */
-  --panel-opacity: var(--opacity-8);
-  --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
-
-  /* Surface background opacity constants */
-  --surface-opacity: var(--opacity-7);
-  --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
-
   /* Standard border width constants */
   --border-width-standard: 1px;
 
@@ -53,21 +25,21 @@
   --trigger-icon-size-4: 12px;
 
   /* Content icon size constants (for buttons, menu items) */
-  --content-icon-size-1: calc(var(--space-5) * 0.55);
-  --content-icon-size-2: calc(var(--space-6) * 0.525);
-  --content-icon-size-3: calc(var(--space-7) * 0.5125);
-  --content-icon-size-4: calc(var(--space-8) * 0.5);
+  --content-icon-size-1: calc(var(--space-6) * 0.55);
+  --content-icon-size-2: calc(var(--space-7) * 0.525);
+  --content-icon-size-3: calc(var(--space-8) * 0.5125);
+  --content-icon-size-4: calc(var(--space-9) * 0.5);
 
   /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
-  --indicator-icon-size-1: calc(9px * var(--scaling));
-  --indicator-icon-size-2: calc(10px * var(--scaling));
-  --indicator-icon-size-3: calc(12px * var(--scaling));
+  --indicator-icon-size-1: calc(9px * var(--scale));
+  --indicator-icon-size-2: calc(10px * var(--scale));
+  --indicator-icon-size-3: calc(12px * var(--scale));
 
   /* Select-specific indicator icon sizes */
-  --select-indicator-icon-size-1: calc(8px * var(--scaling));
-  --select-indicator-icon-size-2: calc(10px * var(--scaling));
-  --select-indicator-icon-size-3: calc(10px * var(--scaling));
-  --select-indicator-icon-size-4: calc(12px * var(--scaling));
+  --select-indicator-icon-size-1: calc(8px * var(--scale));
+  --select-indicator-icon-size-2: calc(10px * var(--scale));
+  --select-indicator-icon-size-3: calc(10px * var(--scale));
+  --select-indicator-icon-size-4: calc(12px * var(--scale));
 
   /* Select component specific constants */
   --select-item-indicator-width-factor: 1.2;
@@ -92,10 +64,10 @@
   --slider-focus-ring-outer: 5px;
 
   /* Shared Progress and Slider sizing tokens */
-  --progress-slider-height-1: var(--space-1);
-  --progress-slider-height-2: calc(var(--space-1) * 1.5);
-  --progress-slider-height-3: var(--space-2);
-  --progress-slider-height-4: calc(var(--space-2) * 1.25);
+  --progress-slider-height-1: var(--space-2);
+  --progress-slider-height-2: calc(var(--space-2) * 1.5);
+  --progress-slider-height-3: var(--space-3);
+  --progress-slider-height-4: calc(var(--space-3) * 1.25);
 
   /* Shared Progress and Slider radius tokens */
   --progress-slider-radius-1: var(--radius-1);
@@ -113,16 +85,16 @@
   --spacing-multiplier-large: 1.25;
 
   /* Component gap spacing constants (shared between Button, Select, etc.) */
-  --component-gap-1: var(--space-1);
-  --component-gap-2: var(--space-1);
-  --component-gap-3: calc(var(--space-1) * 1.5);
-  --component-gap-4: var(--space-2);
+  --component-gap-1: var(--space-2);
+  --component-gap-2: var(--space-2);
+  --component-gap-3: calc(var(--space-2) * 1.5);
+  --component-gap-4: var(--space-3);
 
   /* Ghost variant gap constants */
-  --component-gap-ghost-1: var(--space-1);
-  --component-gap-ghost-2: calc(var(--space-1) * 1.5);
-  --component-gap-ghost-3: calc(var(--space-1) * 1.5);
-  --component-gap-ghost-4: var(--space-2);
+  --component-gap-ghost-1: var(--space-2);
+  --component-gap-ghost-2: calc(var(--space-2) * 1.5);
+  --component-gap-ghost-3: calc(var(--space-2) * 1.5);
+  --component-gap-ghost-4: var(--space-3);
 
   /* Focus outline constants */
   --focus-outline-width: 2px;

package/src/styles/tokens/layout.css

@@ -1,2 +1,2 @@
-@import './scaling.css';
+/* The layout-only bundle needs the spacing scale (and --scale) its props resolve to. */
 @import './space.css';

package/src/styles/tokens/radius.css

@@ -21,22 +21,22 @@
 
 [data-radius] {
   /* Controls & marks */
-  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
-  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
-  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
-  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
+  --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(--scaling) * var(--radius-factor));
-  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
-  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
-  --radius-8: calc(28px * var(--scaling) * 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(--scaling) * var(--radius-factor));
-  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scaling) * 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. */
@@ -54,22 +54,22 @@
   --radius-pill-12: max(var(--radius-12), var(--radius-full));
 
   /* Surfaces — same ramp, damped factor, no pill */
-  --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
+  --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));
 
   /*  */
-  --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
+  --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-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scaling) * 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));
 }
 
 

package/src/styles/tokens/space.css

@@ -1,27 +1,94 @@
+/*
+ * The scale, shared with Kookie UI v2. Three layers, each read by the one above:
+ *
+ * 1. The space palette: raw distances, 2px to 128px.
+ * 2. Layout space: what every distance between things reads (layout props, gaps). It equals
+ *    the palette today; it is the one place a density would re-pick steps.
+ * 3. Roles: one ladder per job, one step per size index 1 to 4. A component reads a role,
+ *    never a palette step: a surface pads --surface-p-N, a panel --panel-p-N, a control
+ *    --control-px-N.
+ */
 .radix-themes {
+  --scale: 1;
 
-  /*  */
-  --space-1: calc(4px * var(--scaling));
-  --space-2: calc(8px * var(--scaling));
-  --space-3: calc(12px * var(--scaling));
-  --space-4: calc(16px * var(--scaling));
+  /* 1. Palette */
+  --space-1: calc(2px * var(--scale));
+  --space-2: calc(4px * var(--scale));
+  --space-3: calc(8px * var(--scale));
+  --space-4: calc(12px * var(--scale));
+  --space-5: calc(16px * var(--scale));
+  --space-6: calc(24px * var(--scale));
+  --space-7: calc(32px * var(--scale));
+  --space-8: calc(40px * var(--scale));
+  --space-9: calc(48px * var(--scale));
+  --space-10: calc(64px * var(--scale));
+  --space-11: calc(96px * var(--scale));
+  --space-12: calc(128px * var(--scale));
 
-  /*  */
-  --space-5: calc(24px * var(--scaling));
-  --space-6: calc(32px * var(--scaling));
-  --space-7: calc(40px * var(--scaling));
-  --space-8: calc(48px * var(--scaling));
+  /* 2. Layout space */
+  --layout-space-1: var(--space-1);
+  --layout-space-2: var(--space-2);
+  --layout-space-3: var(--space-3);
+  --layout-space-4: var(--space-4);
+  --layout-space-5: var(--space-5);
+  --layout-space-6: var(--space-6);
+  --layout-space-7: var(--space-7);
+  --layout-space-8: var(--space-8);
+  --layout-space-9: var(--space-9);
+  --layout-space-10: var(--space-10);
+  --layout-space-11: var(--space-11);
+  --layout-space-12: var(--space-12);
 
-  /* Control heights. One ladder for every control: size N is the same height in
-     Button, Menu, Sidebar, Tabs, TextField, Select, SegmentedControl and Toolbar. */
-  --control-height-1: var(--space-5);
-  --control-height-2: var(--space-6);
-  --control-height-3: var(--space-7);
-  --control-height-4: var(--space-8);
+  /* 3. Roles */
 
-  /*  */
-  --space-9: calc(64px * var(--scaling));
-  --space-10: calc(80px * var(--scaling));
-  --space-11: calc(96px * var(--scaling));
-  --space-12: calc(112px * var(--scaling));
+  /* A surface (Card, Dialog, a Shell pane) pads by its index. */
+  --surface-p-1: var(--layout-space-5);
+  --surface-p-2: var(--layout-space-6);
+  --surface-p-3: var(--layout-space-7);
+  --surface-p-4: var(--layout-space-8);
+
+  /* A panel that hugs rows (menus, popover lists, notices) pads tighter. */
+  --panel-p-1: var(--layout-space-3);
+  --panel-p-2: var(--layout-space-4);
+  --panel-p-3: var(--layout-space-5);
+  --panel-p-4: var(--layout-space-6);
+
+  /* Controls: a designed ladder of its own, not palette steps. */
+  --control-height-1: calc(28px * var(--scale));
+  --control-height-2: calc(32px * var(--scale));
+  --control-height-3: calc(40px * var(--scale));
+  --control-height-4: calc(48px * var(--scale));
+  --control-px-1: calc(8px * var(--scale));
+  --control-px-2: calc(10px * var(--scale));
+  --control-px-3: calc(13px * var(--scale));
+  --control-px-4: calc(16px * var(--scale));
+  /* A bare edge under a full radius pads wider, because the curve cuts into the text. */
+  --control-px-pill-1: calc(12px * var(--scale));
+  --control-px-pill-2: calc(14px * var(--scale));
+  --control-px-pill-3: calc(17px * var(--scale));
+  --control-px-pill-4: calc(20px * var(--scale));
+  --control-gap-1: var(--space-2);
+  --control-gap-2: var(--space-3);
+  --control-gap-3: var(--space-3);
+  --control-gap-4: var(--space-4);
+  --icon-size-1: calc(16px * var(--scale));
+  --icon-size-2: calc(16px * var(--scale));
+  --icon-size-3: calc(20px * var(--scale));
+  --icon-size-4: calc(24px * var(--scale));
+  /* A row inside a panel hugs its line: line height plus this inset above and below. */
+  --row-inset-1: calc(4px * var(--scale));
+  --row-inset-2: calc(5px * var(--scale));
+  --row-inset-3: calc(5px * var(--scale));
+  --row-inset-4: calc(6px * var(--scale));
+  /* A control hosted inside another sits this far in from its host's edge. */
+  --slot-inset-1: calc(3px * var(--scale));
+  --slot-inset-2: calc(3px * var(--scale));
+  --slot-inset-3: calc(4px * var(--scale));
+  --slot-inset-4: calc(4px * var(--scale));
+
+  /* Overlay widths by index. */
+  --overlay-w-1: calc(360px * var(--scale));
+  --overlay-w-2: calc(440px * var(--scale));
+  --overlay-w-3: calc(560px * var(--scale));
+  --overlay-w-4: calc(720px * var(--scale));
 }

package/src/styles/tokens/typography.css

@@ -1,17 +1,17 @@
 .radix-themes {
-  --font-size-0: calc(10px * var(--scaling));
-  --font-size-1: calc(12px * var(--scaling));
-  --font-size-2: calc(14px * var(--scaling));
-  --font-size-3: calc(16px * var(--scaling));
-  --font-size-4: calc(18px * var(--scaling));
-  --font-size-5: calc(20px * var(--scaling));
-  --font-size-6: calc(24px * var(--scaling));
-  --font-size-7: calc(28px * var(--scaling));
-  --font-size-8: calc(35px * var(--scaling));
-  --font-size-9: calc(60px * var(--scaling));
-  --font-size-10: calc(72px * var(--scaling));
-  --font-size-11: calc(86px * var(--scaling));
-  --font-size-12: calc(104px * var(--scaling));
+  --font-size-0: calc(10px * var(--scale));
+  --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;
@@ -22,19 +22,19 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
 
-  --line-height-0: calc(12px * var(--scaling));
-  --line-height-1: calc(16px * var(--scaling));
-  --line-height-2: calc(20px * var(--scaling));
-  --line-height-3: calc(24px * var(--scaling));
-  --line-height-4: calc(26px * var(--scaling));
-  --line-height-5: calc(28px * var(--scaling));
-  --line-height-6: calc(30px * var(--scaling));
-  --line-height-7: calc(36px * var(--scaling));
-  --line-height-8: calc(40px * var(--scaling));
-  --line-height-9: calc(60px * var(--scaling));
-  --line-height-10: calc(76px * var(--scaling));
-  --line-height-11: calc(90px * var(--scaling));
-  --line-height-12: calc(108px * var(--scaling));
+  --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;
@@ -68,19 +68,19 @@
   --heading-leading-trim-end: var(--default-leading-trim-end);
   --heading-letter-spacing: 0em;
 
-  --heading-line-height-0: calc(12px * var(--scaling));
-  --heading-line-height-1: calc(16px * var(--scaling));
-  --heading-line-height-2: calc(18px * var(--scaling));
-  --heading-line-height-3: calc(22px * var(--scaling));
-  --heading-line-height-4: calc(24px * var(--scaling));
-  --heading-line-height-5: calc(26px * var(--scaling));
-  --heading-line-height-6: calc(30px * var(--scaling));
-  --heading-line-height-7: calc(36px * var(--scaling));
-  --heading-line-height-8: calc(40px * var(--scaling));
-  --heading-line-height-9: calc(60px * var(--scaling));
-  --heading-line-height-10: calc(76px * var(--scaling));
-  --heading-line-height-11: calc(90px * var(--scaling));
-  --heading-line-height-12: calc(108px * var(--scaling));
+  --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));
 
   /* Code */