@womp/kookie-ui 0.16.0 → 0.18.0

package/src/styles/tokens/constants.css

@@ -1,37 +1,13 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 :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;
 
+  /* One focus ring: outline var(--focus-ring-width) solid var(--focus-8), offset var(--focus-ring-offset) */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
   /* Raised variant 3D effect constants - simplified for button-like components */
   --raised-elevation-offset: -0.02em;
   --raised-active-padding-offset-1: 0.5px;
@@ -53,21 +29,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 +68,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 +89,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,110 @@
+/*
+ * 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));
-
-  /*  */
-  --space-5: calc(24px * var(--scaling));
-  --space-6: calc(32px * var(--scaling));
-  --space-7: calc(40px * var(--scaling));
-  --space-8: calc(48px * var(--scaling));
-
-  /* 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);
-
-  /*  */
-  --space-9: calc(64px * var(--scaling));
-  --space-10: calc(80px * var(--scaling));
-  --space-11: calc(96px * var(--scaling));
-  --space-12: calc(112px * 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));
+
+  /* 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);
+
+  /* 3. Roles */
+
+  /* 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));
+
+  /* Marks: the box of a checkbox or radio by index, and the switch and slider tracks. */
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * 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 */