@womp/kookie-ui 0.19.0 → 0.21.0

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/hooks/use-prop-synced-state.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 /**
  * State that tracks a prop but can also be set imperatively — the shape `Theme`
- * needs, where a prop sets the value and `ThemePanel` can change it at runtime.
+ * needs, where a prop sets the value and the context setters can change it at runtime.
  *
  * Adjusts state during render rather than syncing in a `useEffect`. An effect
  * would commit one render carrying the *old* value and schedule a second one,

package/src/hooks/use-toggle-state.ts

@@ -30,7 +30,7 @@ interface UseToggleStateOptions {
  *   pressed,
  *   onPressedChange,
  *   getAccessibleName,
- *   componentName: 'ToggleButton',
+ *   componentName: 'Toggle',
  * });
  * ```
  */

package/src/props/color.prop.ts

@@ -27,7 +27,7 @@ const accentColorPropDef = {
   color: PropDef<(typeof accentColors)[number]>;
 };
 
-// For components whose colour comes from their content (Badge, Avatar, Code): they rest gray, and `color` picks a category when it means something.
+// For components whose colour comes from their content (Chip, Avatar, Code): they rest gray, and `color` picks a category when it means something.
 const grayAccentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/emphasis.prop.ts

@@ -2,9 +2,9 @@ import type { PropDef } from './prop-def.js';
 
 const emphases = ['loud', 'medium', 'quiet'] as const;
 
-// Text-first components only (Text, Heading, Blockquote, Code, DataList.Label).
+// Text-first components only (Text, Heading, Blockquote, Code).
 // No colour + emphasis reads the gray ink ladder; colour + emphasis reads the accent ink ladder.
-// Components that need a different default (DataList.Label: 'medium') spread this def and override `default`.
+// Components that need a different default spread this def and override `default`.
 const emphasisPropDef = {
   emphasis: {
     type: 'enum',

package/src/props/index.ts

@@ -22,46 +22,33 @@ export * from './width.props.js';
 // Component props
 export * from '../components/alert-dialog.props.js';
 export * from '../components/avatar.props.js';
-export * from '../components/badge.props.js';
 export * from '../components/blockquote.props.js';
 export * from '../components/box.props.js';
 export * from '../components/button.props.js';
 export * from '../components/card.props.js';
-export * from '../components/checkbox-cards.props.js';
 export * from '../components/checkbox-group.props.js';
 export * from '../components/checkbox.props.js';
+export * from '../components/chip.props.js';
 export * from '../components/code.props.js';
-export * from '../components/container.props.js';
 export * from '../components/context-menu.props.js';
-export * from '../components/data-list.props.js';
 export * from '../components/dialog.props.js';
 export * from '../components/dropdown-menu.props.js';
-export * from '../components/em.props.js';
 export * from '../components/flex.props.js';
 export * from '../components/grid.props.js';
 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/kbd.props.js';
 export * from '../components/link.props.js';
 export * from '../components/popover.props.js';
 export * from '../components/progress.props.js';
-export * from '../components/quote.props.js';
 export * from '../components/radio.props.js';
-export * from '../components/radio-cards.props.js';
 export * from '../components/radio-group.props.js';
 export * from '../components/scroll-area.props.js';
-export * from '../components/section.props.js';
 export * from '../components/segmented-control.props.js';
 export * from '../components/select.props.js';
 export * from '../components/separator.props.js';
-export * from '../components/skeleton.props.js';
 export * from '../components/slider.props.js';
 export * from '../components/spinner.props.js';
-export * from '../components/strong.props.js';
 export * from '../components/switch.props.js';
-export * from '../components/tab-nav.props.js';
 export * from '../components/table.props.js';
 export * from '../components/tabs.props.js';
 export * from '../components/text-area.props.js';

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/color.css

@@ -1056,7 +1056,7 @@
   --accent-solid-contrast: var(--accent-contrast);
   --accent-solid-selection: var(--accent-7);
   --accent-solid-selection-contrast: var(--accent-12);
-  /* Thin marks (Tabs indicator, RadioCards outline): light yellow uses step 10 here */
+  /* Thin marks (Tabs indicator): light yellow uses step 10 here */
   --accent-solid-indicator: var(--accent-indicator);
   /* Thumb that sits on a solid fill (Switch, Slider) */
   --accent-solid-thumb: white;

package/src/styles/tokens/radius.css

@@ -9,6 +9,8 @@
  *    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)
@@ -36,6 +38,10 @@
   --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-1: calc(10px * var(--scale) * var(--radius-surface-factor));
   --radius-surface-2: calc(16px * var(--scale) * var(--radius-surface-factor));
@@ -82,6 +88,12 @@
   --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);
 }
 
 /*

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);
-  }
 }