@womp/kookie-ui 0.16.0 → 0.17.0

package/layout.css

@@ -1,35 +1,69 @@
-.radix-themes:where([data-scaling='90%']) {
-    --scaling: 0.9;
-}
-.radix-themes:where([data-scaling='95%']) {
-    --scaling: 0.95;
-}
-.radix-themes:where([data-scaling='100%']) {
-    --scaling: 1;
-}
-.radix-themes:where([data-scaling='105%']) {
-    --scaling: 1.05;
-}
-.radix-themes:where([data-scaling='110%']) {
-    --scaling: 1.1;
-}
 .radix-themes {
-    --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-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));
+    --scale: 1;
+    --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));
+    --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);
+    --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);
+    --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);
+    --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));
+    --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));
+    --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));
+    --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));
+    --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));
     --container-1: 448px;
     --container-2: 688px;
     --container-3: 880px;
@@ -70,109 +104,109 @@
         flex-shrink: 0;
 }
 .rt-Section:where(.rt-r-size-1) {
-    padding-top: var(--space-5);
-    padding-bottom: var(--space-5);
+    padding-top: var(--space-6);
+    padding-bottom: var(--space-6);
 }
 .rt-Section:where(.rt-r-size-2) {
-    padding-top: var(--space-7);
-    padding-bottom: var(--space-7);
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
 }
 .rt-Section:where(.rt-r-size-3) {
-    padding-top: var(--space-9);
-    padding-bottom: var(--space-9);
+    padding-top: var(--space-10);
+    padding-bottom: var(--space-10);
 }
 .rt-Section:where(.rt-r-size-4) {
-    padding-top: calc(80px * var(--scaling));
-    padding-bottom: calc(80px * var(--scaling));
+    padding-top: calc(80px * var(--scale));
+    padding-bottom: calc(80px * var(--scale));
 }
 @media (min-width: 520px) {
     .rt-Section:where(.xs\:rt-r-size-1) {
-        padding-top: var(--space-5);
-        padding-bottom: var(--space-5);
+        padding-top: var(--space-6);
+        padding-bottom: var(--space-6);
     }
     .rt-Section:where(.xs\:rt-r-size-2) {
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
+        padding-top: var(--space-8);
+        padding-bottom: var(--space-8);
     }
     .rt-Section:where(.xs\:rt-r-size-3) {
-        padding-top: var(--space-9);
-        padding-bottom: var(--space-9);
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-10);
     }
     .rt-Section:where(.xs\:rt-r-size-4) {
-        padding-top: calc(80px * var(--scaling));
-        padding-bottom: calc(80px * var(--scaling));
+        padding-top: calc(80px * var(--scale));
+        padding-bottom: calc(80px * var(--scale));
     }
 }
 @media (min-width: 768px) {
     .rt-Section:where(.sm\:rt-r-size-1) {
-        padding-top: var(--space-5);
-        padding-bottom: var(--space-5);
+        padding-top: var(--space-6);
+        padding-bottom: var(--space-6);
     }
     .rt-Section:where(.sm\:rt-r-size-2) {
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
+        padding-top: var(--space-8);
+        padding-bottom: var(--space-8);
     }
     .rt-Section:where(.sm\:rt-r-size-3) {
-        padding-top: var(--space-9);
-        padding-bottom: var(--space-9);
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-10);
     }
     .rt-Section:where(.sm\:rt-r-size-4) {
-        padding-top: calc(80px * var(--scaling));
-        padding-bottom: calc(80px * var(--scaling));
+        padding-top: calc(80px * var(--scale));
+        padding-bottom: calc(80px * var(--scale));
     }
 }
 @media (min-width: 1024px) {
     .rt-Section:where(.md\:rt-r-size-1) {
-        padding-top: var(--space-5);
-        padding-bottom: var(--space-5);
+        padding-top: var(--space-6);
+        padding-bottom: var(--space-6);
     }
     .rt-Section:where(.md\:rt-r-size-2) {
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
+        padding-top: var(--space-8);
+        padding-bottom: var(--space-8);
     }
     .rt-Section:where(.md\:rt-r-size-3) {
-        padding-top: var(--space-9);
-        padding-bottom: var(--space-9);
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-10);
     }
     .rt-Section:where(.md\:rt-r-size-4) {
-        padding-top: calc(80px * var(--scaling));
-        padding-bottom: calc(80px * var(--scaling));
+        padding-top: calc(80px * var(--scale));
+        padding-bottom: calc(80px * var(--scale));
     }
 }
 @media (min-width: 1280px) {
     .rt-Section:where(.lg\:rt-r-size-1) {
-        padding-top: var(--space-5);
-        padding-bottom: var(--space-5);
+        padding-top: var(--space-6);
+        padding-bottom: var(--space-6);
     }
     .rt-Section:where(.lg\:rt-r-size-2) {
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
+        padding-top: var(--space-8);
+        padding-bottom: var(--space-8);
     }
     .rt-Section:where(.lg\:rt-r-size-3) {
-        padding-top: var(--space-9);
-        padding-bottom: var(--space-9);
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-10);
     }
     .rt-Section:where(.lg\:rt-r-size-4) {
-        padding-top: calc(80px * var(--scaling));
-        padding-bottom: calc(80px * var(--scaling));
+        padding-top: calc(80px * var(--scale));
+        padding-bottom: calc(80px * var(--scale));
     }
 }
 @media (min-width: 1640px) {
     .rt-Section:where(.xl\:rt-r-size-1) {
-        padding-top: var(--space-5);
-        padding-bottom: var(--space-5);
+        padding-top: var(--space-6);
+        padding-bottom: var(--space-6);
     }
     .rt-Section:where(.xl\:rt-r-size-2) {
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
+        padding-top: var(--space-8);
+        padding-bottom: var(--space-8);
     }
     .rt-Section:where(.xl\:rt-r-size-3) {
-        padding-top: var(--space-9);
-        padding-bottom: var(--space-9);
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-10);
     }
     .rt-Section:where(.xl\:rt-r-size-4) {
-        padding-top: calc(80px * var(--scaling));
-        padding-bottom: calc(80px * var(--scaling));
+        padding-top: calc(80px * var(--scale));
+        padding-bottom: calc(80px * var(--scale));
     }
 }
 .rt-Container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -102,6 +102,7 @@
     "src/**",
     "dist/**",
     "schemas/**",
+    "codemods/**",
     "schemas-json.d.ts",
     "tokens/**",
     "layout/**",

package/schemas/base-button.json

@@ -139,14 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "material": {
-          "description": "Material type for visual rendering and depth effects",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

package/schemas/button.json

@@ -139,14 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "material": {
-          "description": "Material type for visual rendering and depth effects",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

package/schemas/icon-button.json

@@ -139,14 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "material": {
-          "description": "Material type for visual rendering and depth effects",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

package/schemas/index.json

@@ -146,14 +146,6 @@
               "description": "Loading state that shows a spinner and disables interaction",
               "type": "boolean"
             },
-            "material": {
-              "description": "Material type for visual rendering and depth effects",
-              "type": "string",
-              "enum": [
-                "solid",
-                "translucent"
-              ]
-            },
             "flush": {
               "default": false,
               "description": "Flush mode that removes visual padding for seamless text integration",
@@ -416,14 +408,6 @@
               "description": "Loading state that shows a spinner and disables interaction",
               "type": "boolean"
             },
-            "material": {
-              "description": "Material type for visual rendering and depth effects",
-              "type": "string",
-              "enum": [
-                "solid",
-                "translucent"
-              ]
-            },
             "flush": {
               "default": false,
               "description": "Flush mode that removes visual padding for seamless text integration",
@@ -739,14 +723,6 @@
               "description": "Loading state that shows a spinner and disables interaction",
               "type": "boolean"
             },
-            "material": {
-              "description": "Material type for visual rendering and depth effects",
-              "type": "string",
-              "enum": [
-                "solid",
-                "translucent"
-              ]
-            },
             "flush": {
               "default": false,
               "description": "Flush mode that removes visual padding for seamless text integration",
@@ -1043,14 +1019,6 @@
               "description": "Loading state that shows a spinner and disables interaction",
               "type": "boolean"
             },
-            "material": {
-              "description": "Material type for visual rendering and depth effects",
-              "type": "string",
-              "enum": [
-                "solid",
-                "translucent"
-              ]
-            },
             "flush": {
               "default": false,
               "description": "Flush mode that removes visual padding for seamless text integration",
@@ -1374,14 +1342,6 @@
               "description": "Loading state that shows a spinner and disables interaction",
               "type": "boolean"
             },
-            "material": {
-              "description": "Material type for visual rendering and depth effects",
-              "type": "string",
-              "enum": [
-                "solid",
-                "translucent"
-              ]
-            },
             "flush": {
               "default": false,
               "description": "Flush mode that removes visual padding for seamless text integration",

package/schemas/toggle-button.json

@@ -139,14 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "material": {
-          "description": "Material type for visual rendering and depth effects",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

package/schemas/toggle-icon-button.json

@@ -139,14 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "material": {
-          "description": "Material type for visual rendering and depth effects",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

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

@@ -1,12 +1,12 @@
 /**
  * Base Button Component Styles
- * 
+ *
  * This file contains the foundational styling for all button components in the
  * Kookie User Interface design system. It provides the base styles that are
  * extended by Button, IconButton, and other button variants.
- * 
+ *
  * ARCHITECTURE:
- * - Base styles: Layout, accessibility, material system
+ * - Base styles: Layout, accessibility
  * - Sizes: Responsive height and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/open/disabled selectors
@@ -21,20 +21,6 @@
  ***************************************************************************************************/
 
 .rt-BaseButton {
-  /*
-   * Component-level material override
-   * When button has explicit material prop, override the inherited theme values.
-   */
-  &:where([data-material='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-
-  &:where([data-material='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
-
   /* Reset all inherited styles to ensure consistent base */
   all: unset;
   box-sizing: border-box;
@@ -63,26 +49,9 @@
     flex-direction: row-reverse;
   }
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parent elements */
+  /* Own stacking context so inner layers (spinner) stay contained */
   isolation: isolate;
 
-  /* Component-level material overrides */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
   /* Forced colors support for high contrast mode */
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -108,11 +77,6 @@
     cursor: wait;
   }
 
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    backdrop-filter: none;
-  }
-
   /* Stabilize SVGs during scale transforms (prevent wobble, especially Firefox) */
   /* stylelint-disable-next-line selector-max-type */
   & :where(svg) {
@@ -121,7 +85,6 @@
     transform-box: fill-box;
     shape-rendering: geometricPrecision;
   }
-
 }
 
 /* Full width mode */
@@ -263,11 +226,7 @@
 .rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
   /* Rest state */
   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);
 
   /* Focus visible */
   &:where(:focus-visible) {
@@ -278,41 +237,25 @@
   /* Hover state */
   @media (hover: hover) {
     &:where(:hover:not([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);
       box-shadow: var(--v-shadow-hover, none);
     }
   }
 
   /* Open state (menu trigger) */
   &:where([data-state='open']) {
-    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);
   }
 
   /* Active state */
   &:where(:active:not([data-state='open'], [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);
     box-shadow: var(--shadow-1);
   }
 
   /* Pressed state (toggle on) */
   &:where([data-state='on']) {
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-pressed-a) calc(var(--material-alpha) * 100%),
-      var(--v-bg-pressed) var(--material-blend)
-    );
+    background-color: var(--v-bg-pressed);
   }
 
   /* Disabled state */
@@ -327,40 +270,24 @@
 /* Border variants: outline and surface */
 .rt-BaseButton:where(.rt-variant-outline, .rt-variant-surface) {
   /* Rest state border */
-  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);
 
   /* Hover state border */
   @media (hover: hover) {
     &:where(:hover:not([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);
     }
   }
 
   /* Open state border (outline uses hover color, surface uses active color) */
   &:where([data-state='open']) {
-    box-shadow: inset 0 0 0 1px color-mix(
-      in srgb,
-      var(--v-border-open-a) calc(var(--material-alpha) * 100%),
-      var(--v-border-open) var(--material-blend)
-    );
+    box-shadow: inset 0 0 0 1px var(--v-border-open);
   }
 
   /* Active and pressed state border */
   &:where(:active:not([data-state='open'], [data-disabled])),
   &:where([data-state='on']) {
-    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);
   }
 
   /* Disabled state border */
@@ -412,11 +339,6 @@
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
 
-  /* Translucent theme override */
-  &:where([data-material='translucent']) {
-    background-color: var(--color-surface-translucent);
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
@@ -424,7 +346,7 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      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);
     }
   }
@@ -432,7 +354,7 @@
   &:where([data-state='open']),
   &:where(:active:not([data-state='open'], [data-disabled])),
   &:where([data-state='on']:not([data-disabled])) {
-    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);
     box-shadow: var(--shadow-1);
   }
 
@@ -456,10 +378,7 @@
 
 /* Solid variant - fills with the accent solid tokens (gray resolves to step 12 automatically) */
 .rt-BaseButton:where(.rt-variant-solid) {
-  /* Solid uses 10% blend for translucent (more opaque than other variants) */
-  --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(:focus-visible) {
@@ -469,14 +388,14 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      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: var(--accent-solid-hover-filter);
       box-shadow: var(--shadow-2);
     }
   }
 
   &:where([data-state='open']) {
-    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: var(--accent-solid-open-filter);
   }
 
@@ -485,7 +404,7 @@
   }
 
   &:where([data-state='on']) {
-    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);
     opacity: 0.9;
   }