@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/_internal/base-radio.css

@@ -17,8 +17,9 @@
 
   isolation: isolate;
 
+  /* Disabled is a colour remap (per variant below), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
 
   &::before {
@@ -46,8 +47,8 @@
   }
 
   &:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }
 
@@ -57,16 +58,20 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* The box is v2's mark ladder (16/20/24/26), the same box Checkbox has at each size. */
 @breakpoints {
   .rt-BaseRadioRoot {
     &:where(.rt-r-size-1) {
-      --radio-size: calc(var(--space-5) * 0.875);
+      --radio-size: var(--mark-1, calc(16px * var(--scale)));
     }
     &:where(.rt-r-size-2) {
-      --radio-size: var(--space-5);
+      --radio-size: var(--mark-2, calc(20px * var(--scale)));
     }
     &:where(.rt-r-size-3) {
-      --radio-size: calc(var(--space-5) * 1.25);
+      --radio-size: var(--mark-3, calc(24px * var(--scale)));
+    }
+    &:where(.rt-r-size-4) {
+      --radio-size: var(--mark-4, calc(26px * var(--scale)));
     }
   }
 }
@@ -213,3 +218,60 @@
     background-color: var(--gray-a8);
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * INTERACTION                                                                                     *
+ *                                                                                                 *
+ * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseRadioRoot {
+  --radio-unchecked-hover: var(--accent-a2);
+  --radio-unchecked-active: var(--accent-a3);
+  --radio-checked-hover: var(--accent-4);
+  --radio-checked-active: var(--accent-5);
+
+  &:where(.rt-variant-solid) {
+    --radio-checked-hover: var(--accent-solid-hover);
+    --radio-checked-active: var(--accent-solid-active);
+  }
+  &:where(.rt-variant-raised) {
+    --radio-unchecked-hover: var(--color-surface-solid);
+    --radio-unchecked-active: var(--accent-3);
+  }
+  &:where(.rt-variant-soft) {
+    --radio-unchecked-hover: var(--accent-4);
+    --radio-unchecked-active: var(--accent-5);
+  }
+  &:where(.rt-variant-outline) {
+    --radio-checked-hover: var(--accent-3);
+    --radio-checked-active: var(--accent-4);
+  }
+  &:where(.rt-variant-surface) {
+    --radio-unchecked-hover: var(--accent-3);
+    --radio-unchecked-active: var(--accent-4);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled]))::before {
+      background-color: var(--radio-unchecked-hover);
+    }
+    &:where(:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      background-color: var(--radio-checked-hover);
+    }
+    &:where(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
+    }
+  }
+  &:where(:active:not(:disabled, [data-disabled]))::before {
+    background-color: var(--radio-unchecked-active);
+  }
+  &:where(:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    background-color: var(--radio-checked-active);
+  }
+  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    box-shadow: inset 0 0 0 1px var(--radio-checked-active);
+  }
+}

package/src/components/_internal/base-radio.props.ts

@@ -2,7 +2,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseRadioPropDefs = {

package/src/components/_internal/base-tab-list.css

@@ -61,11 +61,14 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * Height is the control ladder. The hover pill pads by --control-px-N; half a control gap on each
+ * side of it sets neighbouring pills one --control-gap-N apart.
+ */
 .rt-BaseTabListTrigger {
   box-sizing: border-box;
   height: var(--tab-height);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
+  padding-inline: var(--tab-padding-x);
 }
 
 .rt-BaseTabListTriggerInner,
@@ -82,20 +85,20 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       --tab-height: var(--control-height-1);
-      --tab-padding-x: var(--space-2);
-      --tab-inner-padding-x: var(--space-2);
+      --tab-padding-x: calc(var(--control-gap-1) / 2);
+      --tab-inner-padding-x: var(--control-px-1);
       --tab-inner-padding-y: calc(var(--space-2) * var(--spacing-multiplier-small));
       --tab-inner-border-radius: var(--radius-1);
 
       /* Icon sizing for size 1 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
+        width: var(--icon-size-1);
+        height: var(--icon-size-1);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-1);
+        gap: var(--control-gap-1);
       }
     }
     &:where(.rt-r-size-2) {
@@ -103,20 +106,20 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       --tab-height: var(--control-height-2);
-      --tab-padding-x: var(--space-3);
-      --tab-inner-padding-x: var(--space-3);
+      --tab-padding-x: calc(var(--control-gap-2) / 2);
+      --tab-inner-padding-x: var(--control-px-2);
       --tab-inner-padding-y: var(--space-2);
       --tab-inner-border-radius: var(--radius-2);
 
       /* Icon sizing for size 2 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
+        width: var(--icon-size-2);
+        height: var(--icon-size-2);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-2);
+        gap: var(--control-gap-2);
       }
     }
     &:where(.rt-r-size-3) {
@@ -124,20 +127,20 @@
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       --tab-height: var(--control-height-3);
-      --tab-padding-x: var(--space-4);
-      --tab-inner-padding-x: var(--space-4);
+      --tab-padding-x: calc(var(--control-gap-3) / 2);
+      --tab-inner-padding-x: var(--control-px-3);
       --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-3);
 
       /* Icon sizing for size 3 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
+        width: var(--icon-size-3);
+        height: var(--icon-size-3);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-3);
+        gap: var(--control-gap-3);
       }
     }
     &:where(.rt-r-size-4) {
@@ -145,20 +148,20 @@
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       --tab-height: var(--control-height-4);
-      --tab-padding-x: var(--space-4);
-      --tab-inner-padding-x: var(--space-5);
+      --tab-padding-x: calc(var(--control-gap-4) / 2);
+      --tab-inner-padding-x: var(--control-px-4);
       --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-4);
 
       /* Icon sizing for size 4 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-4);
-        height: var(--content-icon-size-4);
+        width: var(--icon-size-4);
+        height: var(--icon-size-4);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-4);
+        gap: var(--control-gap-4);
       }
     }
   }
@@ -188,18 +191,23 @@
       background-color: var(--accent-a3);
     }
   }
+  /* Hover is one step up, press two. */
+  &:where(:active:not([data-disabled])) :where(.rt-BaseTabListTriggerInner) {
+    background-color: var(--gray-a4);
+  }
   &:where([data-state='active'], [data-active]) {
     color: var(--gray-12);
   }
+  /* Drawn inside the trigger: the scrolling list clips anything outside it. */
   &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
     scroll-margin: var(--space-3);
   }
   &:where([data-state='active'], [data-active])::before {
     box-sizing: border-box;
     content: '';
-    height: var(--focus-outline-width); /* Consistent with focus outline thickness */
+    height: var(--focus-ring-width, 2px); /* Consistent with focus ring thickness */
     position: absolute;
     bottom: 0;
     left: 0;
@@ -222,7 +230,7 @@
   }
 }
 
-/* Disabled: the same treatment as a disabled menu item. It keeps no hover fill. */
+/* Disabled: the same treatment as a disabled menu item, a colour remap with no opacity. It keeps no hover or press fill. */
 .rt-BaseTabListTrigger:where([data-disabled]) {
   color: var(--gray-a8);
   cursor: default;

package/src/components/accordion.tsx

@@ -10,6 +10,7 @@ import {
   accordionContentPropDefs,
 } from './accordion.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type {
   AccordionRootOwnProps,
@@ -27,7 +28,8 @@ interface AccordionRootProps
     AccordionRootOwnProps {}
 
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, accordionRootPropDefs.size);
     const { className, flush, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 

package/src/components/avatar.css

@@ -34,7 +34,7 @@
 /* stylelint-disable selector-max-type */
 .rt-AvatarRoot:where(button),
 .rt-AvatarRoot:where(a),
-.rt-AvatarRoot:where([role="button"]) {
+.rt-AvatarRoot:where([role='button']) {
   cursor: pointer;
 
   &:where(:focus-visible) {
@@ -42,9 +42,14 @@
     outline-offset: var(--focus-outline-offset);
   }
 
+  /* Disabled is a colour remap: the element still hit-tests, so the cursor stops promising a press. */
   &:where(:disabled),
   &:where([data-disabled]) {
-    cursor: not-allowed;
+    cursor: default;
+  }
+
+  /* A link has no native disabled: keep a disabled one from navigating. */
+  &:where(a[data-disabled]) {
     pointer-events: none;
   }
 
@@ -122,66 +127,67 @@
   }
 }
 
+/* Box ladder is v2's: sizes 1-4 are the control heights, 5-9 are 56/64/80/96/128. */
 @breakpoints {
   .rt-AvatarRoot {
     &:where(.rt-r-size-1) {
-      --avatar-size: var(--space-6);
+      --avatar-size: var(--control-height-1);
       --avatar-fallback-one-letter-font-size: var(--font-size-2);
       --avatar-fallback-two-letters-font-size: var(--font-size-1);
       border-radius: var(--radius-pill-1);
       letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
-      --avatar-size: var(--space-7);
+      --avatar-size: var(--control-height-2);
       --avatar-fallback-one-letter-font-size: var(--font-size-3);
       --avatar-fallback-two-letters-font-size: var(--font-size-2);
       border-radius: var(--radius-pill-2);
       letter-spacing: var(--letter-spacing-2);
     }
     &:where(.rt-r-size-3) {
-      --avatar-size: var(--space-8);
+      --avatar-size: var(--control-height-3);
       --avatar-fallback-one-letter-font-size: var(--font-size-4);
       --avatar-fallback-two-letters-font-size: var(--font-size-3);
       border-radius: var(--radius-pill-3);
       letter-spacing: var(--letter-spacing-3);
     }
     &:where(.rt-r-size-4) {
-      --avatar-size: var(--space-9);
+      --avatar-size: var(--control-height-4);
       --avatar-fallback-one-letter-font-size: var(--font-size-5);
       --avatar-fallback-two-letters-font-size: var(--font-size-4);
       border-radius: var(--radius-pill-4);
       letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
-      --avatar-size: var(--space-10);
+      --avatar-size: calc(56px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-6);
       --avatar-fallback-two-letters-font-size: var(--font-size-5);
       border-radius: var(--radius-pill-5);
       letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
-      --avatar-size: 80px;
+      --avatar-size: var(--space-10);
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
       border-radius: var(--radius-pill-6);
       letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
-      --avatar-size: 96px;
+      --avatar-size: calc(80px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
       border-radius: var(--radius-pill-7);
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
-      --avatar-size: 128px;
+      --avatar-size: calc(96px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-8);
       --avatar-fallback-two-letters-font-size: var(--font-size-7);
       border-radius: var(--radius-pill-8);
       letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
-      --avatar-size: 160px;
+      --avatar-size: var(--space-12);
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
       --avatar-fallback-two-letters-font-size: var(--font-size-8);
       border-radius: var(--radius-pill-9);
@@ -284,7 +290,7 @@
 
 /* Shared interactive states for soft, outline, surface */
 /* stylelint-disable selector-max-type */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
   /* Hover state */
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
@@ -307,7 +313,7 @@
 }
 
 /* Border interactive states for outline and surface */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-outline, .rt-variant-surface) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-outline, .rt-variant-surface) {
   /* Hover border */
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
@@ -351,7 +357,7 @@
 }
 
 /* Solid interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-solid) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-solid) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: var(--accent-solid-hover);
@@ -395,7 +401,7 @@
 }
 
 /* Raised interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-raised) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-raised) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: var(--gray-2);

package/src/components/badge.css

@@ -33,58 +33,52 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
 @breakpoints {
   .rt-Badge {
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-0);
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
-      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
-      gap: calc(var(--space-2) * 1.5);
+      padding: var(--space-1) var(--space-2);
+      gap: var(--space-2);
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
-
-      &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-2) * 0.25) var(--space-2);
-        gap: var(--space-2);
-      }
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-2) var(--space-3);
-      gap: calc(var(--space-2) * 1.5);
+      gap: var(--space-2);
       border-radius: var(--radius-pill-1);
 
       &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.25);
-        gap: var(--space-2);
+        padding: var(--space-1) var(--space-2);
       }
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      padding: var(--space-2) calc(var(--space-3) * 1.25);
+      padding: var(--space-2) var(--space-4);
       gap: var(--space-3);
       border-radius: var(--radius-pill-2);
 
       &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-2) * 0.75) var(--space-3);
-        gap: calc(var(--space-2) * 1.5);
+        padding: var(--space-1) var(--space-3);
+        gap: var(--space-2);
       }
     }
     &:where(.rt-r-size-4) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
-      gap: calc(var(--space-3) * 1.25);
+      padding: var(--space-2) var(--space-4);
+      gap: var(--space-3);
       border-radius: var(--radius-pill-3);
 
       &:where(.rt-variant-ghost) {
-        padding: var(--space-2) calc(var(--space-3) * 1.25);
-        gap: var(--space-3);
+        padding: var(--space-2) var(--space-3);
       }
     }
   }
@@ -107,8 +101,7 @@
     background-color: var(--gray-a3);
     outline: none;
     filter: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -128,8 +121,7 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -139,8 +131,7 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 

package/src/components/badge.props.tsx

@@ -9,7 +9,7 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 
 const badgePropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...grayAccentColorPropDef,
   ...radiusPropDef,