@womp/kookie-ui 0.13.1 → 0.13.3

package/src/components/toolbar.css

@@ -27,28 +27,28 @@
 
   &:where(.rt-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
-    --toolbar-radius: max(var(--radius-1), var(--radius-full));
+    --toolbar-radius: var(--radius-pill-1);
     --toolbar-gap: var(--space-1);
     --toolbar-title-gap: var(--space-2);
   }
 
   &:where(.rt-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
-    --toolbar-radius: max(var(--radius-2), var(--radius-full));
+    --toolbar-radius: var(--radius-pill-2);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
-    --toolbar-radius: max(var(--radius-3), var(--radius-full));
+    --toolbar-radius: var(--radius-pill-3);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
-    --toolbar-radius: max(var(--radius-4), var(--radius-full));
+    --toolbar-radius: var(--radius-pill-4);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);
   }

package/src/styles/scrollbar.css

@@ -22,8 +22,10 @@
   border-radius: 4px;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-a7);
+@media (hover: hover) {
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-a7);
+  }
 }
 
 ::-webkit-scrollbar-corner {

package/src/styles/tokens/constants.css

@@ -150,11 +150,11 @@
   --progress-slider-radius-4: var(--radius-4);
 
   /* Outlier radius for size 5 to 9. */
-  /* --progress-slider-radius-5: max(var(--radius-1), var(--radius-full)); */
-  /* --progress-slider-radius-6: max(var(--radius-2), var(--radius-full)); */
-  /* --progress-slider-radius-7: max(var(--radius-3), var(--radius-full)); */
-  /* --progress-slider-radius-8: max(var(--radius-4), var(--radius-full)); */
-  /* --progress-slider-radius-9: max(var(--radius-5), var(--radius-full)); */
+  /* --progress-slider-radius-5: var(--radius-pill-1); */
+  /* --progress-slider-radius-6: var(--radius-pill-2); */
+  /* --progress-slider-radius-7: var(--radius-pill-3); */
+  /* --progress-slider-radius-8: var(--radius-pill-4); */
+  /* --progress-slider-radius-9: var(--radius-pill-5); */
 
   /* Size multipliers */
   --size-multiplier-small: 0.75;

package/src/styles/tokens/index.css

@@ -33,6 +33,3 @@
 
 @import './constants.css';
 @import './base.css';
-@import './blur.css';
-@import './opacity.css';
-@import './transition.css';

package/src/styles/tokens/radius.css

@@ -5,7 +5,8 @@
  *
  * `--radius-*`         CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
  *                      switches, tabs. These scale aggressively with the theme
- *                      and opt into `--radius-full` to become pills.
+ *                      and opt into `--radius-full` to become pills, through
+ *                      `--radius-pill-*`.
  *
  * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
  *                      callouts. These damp as the theme grows and never go
@@ -37,6 +38,21 @@
   --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
   --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
 
+  /* Controls that turn into a pill when the theme radius is `full`. Use these instead of
+     repeating `max(var(--radius-N), var(--radius-full))` in each component. */
+  --radius-pill-1: max(var(--radius-1), var(--radius-full));
+  --radius-pill-2: max(var(--radius-2), var(--radius-full));
+  --radius-pill-3: max(var(--radius-3), var(--radius-full));
+  --radius-pill-4: max(var(--radius-4), var(--radius-full));
+  --radius-pill-5: max(var(--radius-5), var(--radius-full));
+  --radius-pill-6: max(var(--radius-6), var(--radius-full));
+  --radius-pill-7: max(var(--radius-7), var(--radius-full));
+  --radius-pill-8: max(var(--radius-8), var(--radius-full));
+  --radius-pill-9: max(var(--radius-9), var(--radius-full));
+  --radius-pill-10: max(var(--radius-10), var(--radius-full));
+  --radius-pill-11: max(var(--radius-11), var(--radius-full));
+  --radius-pill-12: max(var(--radius-12), var(--radius-full));
+
   /* Surfaces — same ramp, damped factor, no pill */
   --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
   --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));