@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/avatar.css

@@ -2,7 +2,7 @@
  * Avatar Component Styles
  *
  * ARCHITECTURE:
- * - Base styles: Layout, accessibility, material system
+ * - Base styles: Layout, accessibility
  * - Sizes: Responsive avatar dimensions and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/disabled selectors
@@ -17,10 +17,6 @@
  ***************************************************************************************************/
 
 .rt-AvatarRoot {
-  /* Avatar takes no material: it stays solid inside a translucent theme or surface. */
-  --material-blend: 100%;
-  --material-alpha: 0;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -31,31 +27,29 @@
   flex-shrink: 0;
   position: relative;
 
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
-  isolation: isolate
-
-  /* Component-level overrides */
+  isolation: isolate;
 }
 
 /* Interactive states for avatars used as buttons/links */
 /* 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;
 
-  /* Reduced motion support */
-
   &:where(:focus-visible) {
     outline: var(--focus-outline-width) solid var(--focus-8);
     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;
   }
 
@@ -133,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-5);
+      --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-6);
+      --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-7);
+      --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-8);
+      --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-9);
+      --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);
@@ -273,11 +268,7 @@
 .rt-AvatarRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
   & :where(.rt-AvatarFallback) {
     color: var(--v-color);
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-a) calc(var(--material-alpha) * 100%),
-      var(--v-bg) var(--material-blend)
-    );
+    background-color: var(--v-bg);
   }
 
   &:where([data-disabled]) :where(.rt-AvatarFallback) {
@@ -289,11 +280,7 @@
 /* Border variants: outline and surface */
 .rt-AvatarRoot:where(.rt-variant-outline, .rt-variant-surface) {
   & :where(.rt-AvatarFallback) {
-    box-shadow: inset 0 0 0 1px color-mix(
-      in srgb,
-      var(--v-border-a) calc(var(--material-alpha) * 100%),
-      var(--v-border) var(--material-blend)
-    );
+    box-shadow: inset 0 0 0 1px var(--v-border);
   }
 
   &:where([data-disabled]) :where(.rt-AvatarFallback) {
@@ -303,15 +290,11 @@
 
 /* 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])) {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-hover-a) calc(var(--material-alpha) * 100%),
-        var(--v-bg-hover) var(--material-blend)
-      );
+      background-color: var(--v-bg-hover);
 
       & :where(.rt-AvatarFallback) {
         background-color: inherit;
@@ -321,11 +304,7 @@
 
   /* Active state */
   &:where(:active:not(:disabled, [data-disabled])) {
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-active-a) calc(var(--material-alpha) * 100%),
-      var(--v-bg-active) var(--material-blend)
-    );
+    background-color: var(--v-bg-active);
 
     & :where(.rt-AvatarFallback) {
       background-color: inherit;
@@ -334,15 +313,11 @@
 }
 
 /* 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])) {
-      box-shadow: inset 0 0 0 1px color-mix(
-        in srgb,
-        var(--v-border-hover-a) calc(var(--material-alpha) * 100%),
-        var(--v-border-hover) var(--material-blend)
-      );
+      box-shadow: inset 0 0 0 1px var(--v-border-hover);
 
       & :where(.rt-AvatarFallback) {
         box-shadow: inherit;
@@ -352,11 +327,7 @@
 
   /* Active border */
   &:where(:active:not(:disabled, [data-disabled])) {
-    box-shadow: inset 0 0 0 1px color-mix(
-      in srgb,
-      var(--v-border-active-a) calc(var(--material-alpha) * 100%),
-      var(--v-border-active) var(--material-blend)
-    );
+    box-shadow: inset 0 0 0 1px var(--v-border-active);
 
     & :where(.rt-AvatarFallback) {
       box-shadow: inherit;
@@ -372,12 +343,9 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Solid variant - uses 10% blend for translucent (more opaque than other variants) */
 .rt-AvatarRoot:where(.rt-variant-solid) {
-  --solid-blend: calc(100% - (var(--material-alpha) * 90%));
-
   & :where(.rt-AvatarFallback) {
-    background-color: color-mix(in srgb, var(--accent-solid-a) calc(var(--material-alpha) * 100%), var(--accent-solid) var(--solid-blend));
+    background-color: var(--accent-solid);
     color: var(--accent-solid-contrast);
   }
 
@@ -389,10 +357,10 @@
 }
 
 /* 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: color-mix(in srgb, var(--accent-solid-hover-a) calc(var(--material-alpha) * 100%), var(--accent-solid-hover) var(--solid-blend));
+      background-color: var(--accent-solid-hover);
 
       /* Filter the fallback, not the root, so the status dot and badge stay untouched */
       & :where(.rt-AvatarFallback) {
@@ -403,7 +371,7 @@
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    background-color: color-mix(in srgb, var(--accent-solid-active-a) calc(var(--material-alpha) * 100%), var(--accent-solid-active) var(--solid-blend));
+    background-color: var(--accent-solid-active);
 
     & :where(.rt-AvatarFallback) {
       background-color: inherit;
@@ -420,7 +388,7 @@
     position: relative;
     top: 0;
     color: var(--accent-ink);
-    background-color: color-mix(in srgb, var(--color-surface-translucent) calc(var(--material-alpha) * 100%), var(--color-surface-solid) var(--material-blend));
+    background-color: var(--color-surface-solid);
     box-shadow: var(--shadow-2);
   }
 
@@ -433,10 +401,10 @@
 }
 
 /* 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: color-mix(in srgb, var(--gray-a2) calc(var(--material-alpha) * 100%), var(--gray-2) var(--material-blend));
+      background-color: var(--gray-2);
       box-shadow: var(--shadow-2);
 
       & :where(.rt-AvatarFallback) {
@@ -449,7 +417,7 @@
   &:where(:active:not(:disabled, [data-disabled])) {
     padding-top: var(--raised-active-padding-offset-2);
     padding-bottom: 0;
-    background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
+    background-color: var(--gray-3);
 
     & :where(.rt-AvatarFallback) {
       padding-top: inherit;

package/src/components/badge.css

@@ -10,26 +10,15 @@
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
-  
+
   /* Fix Chrome background bleeding on rounded corners */
   background-clip: padding-box;
-  
+
   /* Force Chrome to recalculate styles when radius changes */
   will-change: border-radius;
 
-  /* Material system defaults (solid) */
-  --material-blend: 100%;
-  --material-alpha: 0;
-
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-
-  /* Reduced motion support */
-
   /* Forced colors support */
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -44,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-1) * 0.5) calc(var(--space-1) * 1.5);
-      gap: calc(var(--space-1) * 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-1) * 0.25) var(--space-1);
-        gap: var(--space-1);
-      }
     }
     &: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-1) var(--space-2);
-      gap: calc(var(--space-1) * 1.5);
+      padding: var(--space-2) var(--space-3);
+      gap: var(--space-2);
       border-radius: var(--radius-pill-1);
-      
+
       &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.25);
-        gap: var(--space-1);
+        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-1) calc(var(--space-2) * 1.25);
-      gap: var(--space-2);
+      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-1) * 0.75) var(--space-2);
-        gap: calc(var(--space-1) * 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-1) * 1.25) calc(var(--space-2) * 1.5);
-      gap: calc(var(--space-2) * 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-1) calc(var(--space-2) * 1.25);
-        gap: var(--space-2);
+        padding: var(--space-2) var(--space-3);
       }
     }
   }
@@ -110,9 +93,7 @@
 /* solid */
 
 .rt-Badge:where(.rt-variant-solid) {
-  --solid-blend: calc(100% - (var(--material-alpha) * 90%));
-
-  background-color: color-mix(in srgb, var(--accent-solid-a) calc(var(--material-alpha) * 100%), var(--accent-solid) var(--solid-blend));
+  background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 
   &:where([data-disabled]) {
@@ -120,16 +101,15 @@
     background-color: var(--gray-a3);
     outline: none;
     filter: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
 /* surface */
 
 .rt-Badge:where(.rt-variant-surface) {
-  background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
+  background-color: var(--accent-2);
+  box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 }
 
@@ -141,26 +121,24 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
 .rt-Badge:where(.rt-variant-soft) {
-  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+  background-color: var(--accent-3);
 
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
 /* outline */
 
 .rt-Badge:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
+  box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 }
 
@@ -180,5 +158,5 @@
   box-shadow: var(--shadow-2);
 
   --raised-surface: var(--color-surface-solid);
-  background-color: var(--raised-surface)
+  background-color: var(--raised-surface);
 }

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,

package/src/components/blockquote.css

@@ -1,5 +1,5 @@
 .rt-Blockquote {
   box-sizing: border-box;
-  border-left: max(var(--space-1), 0.25em) solid var(--accent-a6);
-  padding-left: min(var(--space-5), max(var(--space-3), 0.5em));
+  border-left: max(var(--space-2), 0.25em) solid var(--accent-a6);
+  padding-left: min(var(--space-6), max(var(--space-4), 0.5em));
 }