@womp/kookie-ui 0.15.1 → 0.17.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,12 +27,7 @@
   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 */
@@ -46,8 +37,6 @@
 .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);
@@ -136,35 +125,35 @@
 @breakpoints {
   .rt-AvatarRoot {
     &:where(.rt-r-size-1) {
-      --avatar-size: var(--space-5);
+      --avatar-size: var(--space-6);
       --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(--space-7);
       --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(--space-8);
       --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(--space-9);
       --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: var(--space-10);
       --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);
@@ -273,11 +262,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 +274,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) {
@@ -307,11 +288,7 @@
   /* 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 +298,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;
@@ -338,11 +311,7 @@
   /* 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 +321,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 +337,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);
   }
 
@@ -392,7 +354,7 @@
 .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 +365,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 +382,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);
   }
 
@@ -436,7 +398,7 @@
 .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 +411,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;
@@ -50,52 +39,52 @@
       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: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
+      gap: calc(var(--space-2) * 1.5);
       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);
+        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-1) var(--space-2);
-      gap: calc(var(--space-1) * 1.5);
+      padding: var(--space-2) var(--space-3);
+      gap: calc(var(--space-2) * 1.5);
       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: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.25);
+        gap: 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) calc(var(--space-3) * 1.25);
+      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: calc(var(--space-2) * 0.75) var(--space-3);
+        gap: calc(var(--space-2) * 1.5);
       }
     }
     &: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: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
+      gap: calc(var(--space-3) * 1.25);
       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) calc(var(--space-3) * 1.25);
+        gap: var(--space-3);
       }
     }
   }
@@ -110,9 +99,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]) {
@@ -128,8 +115,8 @@
 /* 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);
 }
 
@@ -147,7 +134,7 @@
 }
 
 .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);
@@ -160,7 +147,7 @@
 /* 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 +167,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/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));
 }

package/src/components/button.css

@@ -36,7 +36,7 @@
  * This creates a more subtle, text-like appearance
  */
 .rt-Button {
-  --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
+  --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-2));
 
   &:where(.rt-variant-ghost) {
     padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
@@ -50,7 +50,7 @@
      * Designed for toolbars, dense interfaces, and space-constrained contexts
      */
     &:where(.rt-r-size-1) {
-      --button-padding-inline-base: var(--space-2);
+      --button-padding-inline-base: var(--space-3);
       gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -81,8 +81,8 @@
        */
       &:where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-1);
-        --button-ghost-padding-x: var(--space-2);
-        --button-ghost-padding-y: var(--space-1);
+        --button-ghost-padding-x: var(--space-3);
+        --button-ghost-padding-y: var(--space-2);
         --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
@@ -92,7 +92,7 @@
      * Default size for most interface contexts and general use
      */
     &:where(.rt-r-size-2) {
-      --button-padding-inline-base: var(--space-3);
+      --button-padding-inline-base: var(--space-4);
       gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
@@ -114,8 +114,8 @@
       /* Ghost variant padding for size 2 */
       &:where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-2);
-        --button-ghost-padding-x: var(--space-2);
-        --button-ghost-padding-y: var(--space-1);
+        --button-ghost-padding-x: var(--space-3);
+        --button-ghost-padding-y: var(--space-2);
         --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
@@ -125,7 +125,7 @@
      * Recommended for important actions and mobile touch targets
      */
     &:where(.rt-r-size-3) {
-      --button-padding-inline-base: var(--space-3);
+      --button-padding-inline-base: var(--space-4);
       gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
@@ -147,8 +147,8 @@
       /* Ghost variant padding for size 3 */
       &:where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-3);
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+        --button-ghost-padding-x: var(--space-4);
+        --button-ghost-padding-y: calc(var(--space-2) * 1.5);
         --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
@@ -158,7 +158,7 @@
      * Designed for hero sections and maximum visual impact
      */
     &:where(.rt-r-size-4) {
-      --button-padding-inline-base: var(--space-4);
+      --button-padding-inline-base: var(--space-5);
       gap: var(--component-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
@@ -180,8 +180,8 @@
       /* Ghost variant padding for size 4 */
       &:where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
-        --button-ghost-padding-x: var(--space-4);
-        --button-ghost-padding-y: var(--space-2);
+        --button-ghost-padding-x: var(--space-5);
+        --button-ghost-padding-y: var(--space-3);
         --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }

package/src/components/card.props.tsx

@@ -4,19 +4,16 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5'] as const;
 const variants = ['raised', 'surface', 'outline', 'ghost', 'soft'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const cardPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },
   inset: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   flush: PropDef<boolean>;
   inset: PropDef<boolean>;
 };

package/src/components/card.tsx

@@ -14,18 +14,16 @@ type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
 interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
-  const { asChild, className, material, flush, inset, ...cardProps } = extractProps(
+  const { asChild, className, flush, inset, ...cardProps } = extractProps(
     props,
     cardPropDefs,
     marginPropDefs,
   );
-  const effectiveMaterial = material;
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp
       ref={forwardedRef}
       {...cardProps}
-      data-material={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
       data-inset={inset ? 'true' : undefined}
       className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}