@womp/kookie-ui 0.16.0 → 0.17.0

package/src/components/slider.css

@@ -1,6 +1,6 @@
 .rt-SliderRoot {
-  --slider-thumb-width: var(--space-3);
-  --slider-thumb-height: var(--space-2);
+  --slider-thumb-width: var(--space-4);
+  --slider-thumb-height: var(--space-3);
 
   position: relative;
   display: flex;
@@ -14,32 +14,8 @@
   /* disable browser handling of all panning and zooming gestures on touch devices */
   touch-action: none;
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-  :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 */
   isolation: isolate;
 
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-  &: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);
-  }
-
   &:where([data-orientation='horizontal']) {
     width: stretch;
     height: var(--slider-track-size);
@@ -129,29 +105,29 @@
     &:where(.rt-r-size-1) {
       --slider-track-size: var(--progress-slider-height-1);
       --slider-radius: var(--progress-slider-radius-1);
-      --slider-thumb-width: var(--space-3);
-      --slider-thumb-height: var(--space-2);
+      --slider-thumb-width: var(--space-4);
+      --slider-thumb-height: var(--space-3);
       --slider-thumb-radius: calc(var(--radius-1) * 0.75);
     }
     &:where(.rt-r-size-2) {
       --slider-track-size: var(--progress-slider-height-2);
       --slider-radius: var(--progress-slider-radius-2);
-      --slider-thumb-width: var(--space-4);
-      --slider-thumb-height: calc(var(--space-2) + var(--space-1));
+      --slider-thumb-width: var(--space-5);
+      --slider-thumb-height: calc(var(--space-3) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-2) * 0.75);
     }
     &:where(.rt-r-size-3) {
       --slider-track-size: var(--progress-slider-height-3);
       --slider-radius: var(--progress-slider-radius-3);
-      --slider-thumb-width: var(--space-4);
-      --slider-thumb-height: var(--space-3);
+      --slider-thumb-width: var(--space-5);
+      --slider-thumb-height: var(--space-4);
       --slider-thumb-radius: calc(var(--radius-3) * 0.75);
     }
     &:where(.rt-r-size-4) {
       --slider-track-size: var(--progress-slider-height-4);
       --slider-radius: var(--progress-slider-radius-4);
-      --slider-thumb-width: calc(var(--space-4) + var(--space-1));
-      --slider-thumb-height: calc(var(--space-3) + var(--space-1));
+      --slider-thumb-width: calc(var(--space-5) + var(--space-2));
+      --slider-thumb-height: calc(var(--space-4) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-4) * 0.75);
     }
   }
@@ -170,23 +146,6 @@
     background-color: var(--gray-2);
     box-shadow: inset 0 0 0 1px var(--gray-6);
 
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      background-color: var(--gray-2);
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
     &:where([data-disabled]) {
       box-shadow: inset 0 0 0 1px var(--gray-5);
     }
@@ -195,8 +154,6 @@
   & :where(.rt-SliderRange) {
     background-color: var(--accent-solid);
   }
-
-
 }
 
 /* soft */
@@ -204,20 +161,6 @@
 .rt-SliderRoot:where(.rt-variant-soft) {
   & :where(.rt-SliderTrack) {
     background-color: var(--gray-3);
-
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      background-color: var(--gray-3);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
   }
 
   & :where(.rt-SliderRange) {
@@ -235,20 +178,6 @@
   & :where(.rt-SliderTrack) {
     /* Base state: no background, just border */
     box-shadow: inset 0 0 0 1px var(--gray-6);
-
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-material='translucent']) {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
   }
 
   & :where(.rt-SliderRange) {
@@ -297,7 +226,7 @@
   top: 100%;
   left: 0;
   right: 0;
-  margin-top: var(--space-2);
+  margin-top: var(--space-3);
   pointer-events: auto;
   height: 44px;
 }
@@ -308,10 +237,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
   background: none;
   border: none;
-  padding: var(--space-2);
+  padding: var(--space-3);
   cursor: pointer;
   min-height: 44px;
   min-width: 44px;
@@ -325,7 +254,7 @@
     :where(.rt-SliderTickMark) {
       background-color: var(--gray-12) !important;
     }
-    
+
     :where(.rt-SliderTickLabel) {
       color: var(--gray-12) !important;
       font-weight: var(--font-weight-medium);
@@ -337,7 +266,7 @@
   :where(.rt-SliderTickMark) {
     background-color: var(--gray-12) !important;
   }
-  
+
   :where(.rt-SliderTickLabel) {
     color: var(--gray-12) !important;
     font-weight: var(--font-weight-medium);
@@ -351,7 +280,7 @@
 
 .rt-SliderTickMark {
   width: 1px;
-  height: var(--space-2);
+  height: var(--space-3);
   background-color: var(--gray-6);
   border-radius: 1px;
 }

package/src/components/spinner.css

@@ -85,16 +85,16 @@
 @breakpoints {
   .rt-Spinner {
     &:where(.rt-r-size-1) {
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-    &:where(.rt-r-size-2) {
       width: var(--space-4);
       height: var(--space-4);
     }
+    &:where(.rt-r-size-2) {
+      width: var(--space-5);
+      height: var(--space-5);
+    }
     &:where(.rt-r-size-3) {
-      width: calc(1.25 * var(--space-4));
-      height: calc(1.25 * var(--space-4));
+      width: calc(1.25 * var(--space-5));
+      height: calc(1.25 * var(--space-5));
     }
   }
 }

package/src/components/switch.css

@@ -14,19 +14,8 @@
   --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
   --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-
-  /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
 
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-
   &::before {
     content: '';
     display: block;
@@ -70,16 +59,16 @@
 @breakpoints {
   .rt-SwitchRoot {
     &:where(.rt-r-size-1) {
-      --switch-height: var(--space-4);
+      --switch-height: var(--space-5);
     }
     &:where(.rt-r-size-2) {
-      --switch-height: calc(var(--space-5));
+      --switch-height: calc(var(--space-6));
     }
     &:where(.rt-r-size-3) {
-      --switch-height: var(--space-6);
+      --switch-height: var(--space-7);
     }
     &:where(.rt-r-size-4) {
-      --switch-height: var(--space-7);
+      --switch-height: var(--space-8);
     }
   }
 }
@@ -95,32 +84,22 @@
 .rt-SwitchRoot:where(.rt-variant-surface) {
   &::before {
     background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
     box-shadow: none;
   }
-  
-
 }
 
 /* soft */
 
 .rt-SwitchRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--gray-3)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    background-color: var(--gray-3);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
   }
@@ -131,19 +110,13 @@
 .rt-SwitchRoot:where(.rt-variant-outline) {
   &::before {
     /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--gray-6)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
     box-shadow: none;
   }
-  
-
 }
 
 /* all disabled Switches */

package/src/components/switch.props.tsx

@@ -9,14 +9,6 @@ const switchPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
-  /**
-   * Material type for visual rendering and depth effects
-   * Controls how the switch renders its visual elements
-   */
-  /**
-   * Panel background type (deprecated)
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

package/src/components/tab-nav.tsx

@@ -20,12 +20,11 @@ interface TabNavRootProps
     MarginProps,
     TabNavOwnProps {}
 const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
-  const { children, className, color, material: materialProp, ...rootProps } = extractProps(
+  const { children, className, color, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,
     marginPropDefs,
   );
-  const material = materialProp;
   return (
     <NavigationMenu.Root
       className="rt-TabNavRoot"
@@ -36,7 +35,6 @@ const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props,
     >
       <NavigationMenu.List
         className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
-        data-material={material}
       >
         {children}
       </NavigationMenu.List>

package/src/components/table.css

@@ -60,9 +60,9 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
-      --table-cell-padding: var(--space-2);
-      --table-cell-min-height: calc(36px * var(--scaling));
+      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --table-cell-padding: var(--space-3);
+      --table-cell-min-height: calc(36px * var(--scale));
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
@@ -70,9 +70,9 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
-      --table-cell-padding: var(--space-3);
-      --table-cell-min-height: calc(44px * var(--scaling));
+      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --table-cell-padding: var(--space-4);
+      --table-cell-min-height: calc(44px * var(--scale));
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
@@ -80,9 +80,9 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
-      --table-cell-padding: var(--space-4);
-      --table-cell-min-height: var(--space-8);
+      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --table-cell-padding: var(--space-5);
+      --table-cell-min-height: var(--space-9);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-3);
@@ -101,18 +101,10 @@
 /* surface */
 
 .rt-TableRoot:where(.rt-variant-surface) {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
   box-sizing: border-box;
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+  background-color: var(--color-panel-solid);
   background-clip: padding-box;
   position: relative;
 

package/src/components/tabs.tsx

@@ -36,16 +36,14 @@ interface TabsListProps
     MarginProps,
     TabsListOwnProps {}
 const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
-  const { className, color, material: materialProp, ...listProps } = extractProps(
+  const { className, color, ...listProps } = extractProps(
     props,
     tabsListPropDefs,
     marginPropDefs,
   );
-  const material = materialProp;
   return (
     <TabsPrimitive.List
       data-accent-color={color}
-      data-material={material}
       {...listProps}
       asChild={false}
       ref={forwardedRef}