@womp/kookie-ui 0.21.0 → 0.22.1

package/src/styles/tokens/radius.css

@@ -43,15 +43,15 @@
   --radius-row-3: var(--radius-control-3);
   --radius-row-4: var(--radius-control-4);
 
-  --radius-surface-1: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(22px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-1: calc(8px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-2: calc(12px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-3: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-4: calc(20px * var(--scale) * var(--radius-surface-factor));
 
-  --radius-overlay-1: calc(14px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-2: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-3: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-4: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-1: calc(12px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-2: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-3: calc(20px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-4: calc(24px * var(--scale) * var(--radius-surface-factor));
 }
 
 [data-radius='none'] {
@@ -99,7 +99,7 @@
 /*
  * 3. Nesting (v2 §6, §10)
  *
- * A surface opts in with `rt-SurfaceNest` next to its `rt-r-size-N` class. At its size it
+ * A surface opts in with `kui-SurfaceNest` next to its `kui-r-size-N` class. At its size it
  * publishes on ITSELF:
  *   --kui-sf-radius  its corner (--radius-surface-N)
  *   --kui-sf-p       its padding (--surface-p-N)
@@ -116,43 +116,43 @@
  * An element that states `--kui-nest: initial` hands the inner surface its own corner back.
  */
 @breakpoints {
-  .rt-SurfaceNest {
-    &:where(.rt-r-size-1) {
+  .kui-SurfaceNest {
+    &:where(.kui-r-size-1) {
       --kui-sf-radius: var(--radius-surface-1);
       --kui-sf-p: var(--surface-p-1);
     }
-    &:where(.rt-r-size-1) > * {
+    &:where(.kui-r-size-1) > * {
       --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --kui-sf-radius: var(--radius-surface-2);
       --kui-sf-p: var(--surface-p-2);
     }
-    &:where(.rt-r-size-2) > * {
+    &:where(.kui-r-size-2) > * {
       --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --kui-sf-radius: var(--radius-surface-3);
       --kui-sf-p: var(--surface-p-3);
     }
-    &:where(.rt-r-size-3) > * {
+    &:where(.kui-r-size-3) > * {
       --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --kui-sf-radius: var(--radius-surface-4);
       --kui-sf-p: var(--surface-p-4);
     }
-    &:where(.rt-r-size-4) > * {
+    &:where(.kui-r-size-4) > * {
       --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
     }
   }
 }
 
-.rt-SurfaceNest {
+.kui-SurfaceNest {
   --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
 }
 
-:where(.rt-SurfaceNest) .rt-SurfaceNest {
+:where(.kui-SurfaceNest) .kui-SurfaceNest {
   --kui-sf-r: min(
     var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))),
     var(--kui-sf-radius, var(--radius-surface-2))

package/src/styles/tokens/shadow.css

@@ -1,130 +1,130 @@
 /* prettier-ignore */
-:where(.radix-themes) {
+:where(.kui-theme) {
   --shadow-1:
-    0 0 0 0.25px var(--gray-a6),
+    0 0 0 0.25px var(--neutral-a6),
     inset 0 1px 1px 0 var(--black-a2);
 
   --shadow-2:
-    0 0 0 0.25px var(--gray-a3),
+    0 0 0 0.25px var(--neutral-a3),
     0 1px 3px 0 var(--black-a2),
     0 1px 2px -1px var(--black-a2);
 
   --shadow-3:
-    0 0 0 0.25px var(--gray-a6),
+    0 0 0 0.25px var(--neutral-a6),
     0 4px 6px -1px var(--black-a2),
     0 2px 4px -2px var(--black-a2);
 
   --shadow-4:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 10px 15px -3px var(--black-a3),
     0 4px 6px -4px var(--black-a3);
 
   --shadow-5:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 20px 25px -5px var(--black-a3),
     0 8px 10px -6px var(--black-a3);
 
   --shadow-6:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 25px 50px -12px var(--black-a5);
 }
 
 /* prettier-ignore */
 @supports (color: color-mix(in oklab, white, black)) {
-  :where(.radix-themes) {
+  :where(.kui-theme) {
     --shadow-1:
-      0 0 0 0.25px var(--gray-a6),
+      0 0 0 0.25px var(--neutral-a6),
       inset 0 1px 1px 0 var(--black-a2);
 
     --shadow-2:
-      0 0 0 0.25px var(--gray-a3),
+      0 0 0 0.25px var(--neutral-a3),
       0 1px 3px 0 var(--black-a2),
       0 1px 2px -1px var(--black-a2);
 
     --shadow-3:
-      0 0 0 0.25px var(--gray-a6),
+      0 0 0 0.25px var(--neutral-a6),
       0 4px 6px -1px var(--black-a2),
       0 2px 4px -2px var(--black-a2);
 
     --shadow-4:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 10px 15px -3px var(--black-a3),
       0 4px 6px -4px var(--black-a3);
 
     --shadow-5:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 20px 25px -5px var(--black-a3),
       0 8px 10px -6px var(--black-a3);
 
     --shadow-6:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 25px 50px -12px var(--black-a5);
   }
 }
 
 /* prettier-ignore */
 :is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+:is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
   
   --shadow-1:
-    inset 0 0 0 0.5px var(--gray-a6),
+    inset 0 0 0 0.5px var(--neutral-a6),
     inset 0 1px 1px 0 var(--black-a3);
 
   --shadow-2:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 1px 3px 0 var(--black-a3),
     0 1px 2px -1px var(--black-a3);
 
   --shadow-3:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 4px 6px -1px var(--black-a3),
     0 2px 4px -2px var(--black-a3);
 
   --shadow-4:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 10px 15px -3px var(--black-a3),
     0 4px 6px -4px var(--black-a3);
 
   --shadow-5:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 20px 25px -5px var(--black-a3),
     0 8px 10px -6px var(--black-a3);
 
   --shadow-6:
-    0 0 0 0.5px var(--gray-a6),
+    0 0 0 0.5px var(--neutral-a6),
     0 25px 50px -12px var(--black-a5);
 }
 
 /* prettier-ignore */
 @supports (color: color-mix(in oklab, white, black)) {
   :is(.dark, .dark-theme),
-  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  :is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
     --shadow-1:
-      inset 0 0 0 0.5px var(--gray-a6),
+      inset 0 0 0 0.5px var(--neutral-a6),
       inset 0 1px 1px 0 var(--black-a3);
 
     --shadow-2:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 1px 3px 0 var(--black-a3),
       0 1px 2px -1px var(--black-a3);
 
     --shadow-3:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 4px 6px -1px var(--black-a3),
       0 2px 4px -2px var(--black-a3);
 
     --shadow-4:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 10px 15px -3px var(--black-a3),
       0 4px 6px -4px var(--black-a3);
 
     --shadow-5:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 20px 25px -5px var(--black-a3),
       0 8px 10px -6px var(--black-a3);
 
     --shadow-6:
-      0 0 0 0.5px var(--gray-a6),
+      0 0 0 0.5px var(--neutral-a6),
       0 25px 50px -12px var(--black-a5);
   }
 }

package/src/styles/tokens/space.css

@@ -8,7 +8,7 @@
  *    never a palette step: a surface pads --surface-p-N, a panel --panel-p-N, a control
  *    --control-px-N.
  */
-.radix-themes {
+.kui-theme {
   --scale: 1;
 
   /* 1. Palette */

package/src/styles/tokens/typography.css

@@ -1,4 +1,4 @@
-.radix-themes {
+.kui-theme {
   /* Type: v2's nine steps and three weights. Fonts are v1's own (font-family.css). */
   --font-size-1: calc(12px * var(--scale));
   --font-size-2: calc(14px * var(--scale));
@@ -96,7 +96,7 @@
   --tab-inactive-word-spacing: 0em;
 }
 
-.radix-themes {
+.kui-theme {
   overflow-wrap: break-word;
   font-family: var(--default-font-family);
   font-synthesis: none;

package/src/styles/utilities/align-content.css

@@ -1,33 +1,33 @@
 @breakpoints {
-  .rt-r-ac-start {
+  .kui-r-ac-start {
     align-content: start;
   }
 
-  .rt-r-ac-center {
+  .kui-r-ac-center {
     align-content: center;
   }
 
-  .rt-r-ac-end {
+  .kui-r-ac-end {
     align-content: end;
   }
 
-  .rt-r-ac-baseline {
+  .kui-r-ac-baseline {
     align-content: baseline;
   }
 
-  .rt-r-ac-stretch {
+  .kui-r-ac-stretch {
     align-content: stretch;
   }
 
-  .rt-r-ac-space-between {
+  .kui-r-ac-space-between {
     align-content: space-between;
   }
 
-  .rt-r-ac-space-around {
+  .kui-r-ac-space-around {
     align-content: space-around;
   }
 
-  .rt-r-ac-space-evenly {
+  .kui-r-ac-space-evenly {
     align-content: space-evenly;
   }
 }

package/src/styles/utilities/align-items.css

@@ -1,21 +1,21 @@
 @breakpoints {
-  .rt-r-ai-start {
+  .kui-r-ai-start {
     align-items: flex-start;
   }
 
-  .rt-r-ai-center {
+  .kui-r-ai-center {
     align-items: center;
   }
 
-  .rt-r-ai-end {
+  .kui-r-ai-end {
     align-items: flex-end;
   }
 
-  .rt-r-ai-baseline {
+  .kui-r-ai-baseline {
     align-items: baseline;
   }
 
-  .rt-r-ai-stretch {
+  .kui-r-ai-stretch {
     align-items: stretch;
   }
 }

package/src/styles/utilities/align-self.css

@@ -1,21 +1,21 @@
 @breakpoints {
-  .rt-r-as-start {
+  .kui-r-as-start {
     align-self: start;
   }
 
-  .rt-r-as-center {
+  .kui-r-as-center {
     align-self: center;
   }
 
-  .rt-r-as-end {
+  .kui-r-as-end {
     align-self: end;
   }
 
-  .rt-r-as-baseline {
+  .kui-r-as-baseline {
     align-self: baseline;
   }
 
-  .rt-r-as-stretch {
+  .kui-r-as-stretch {
     align-self: stretch;
   }
 }

package/src/styles/utilities/display.css

@@ -1,37 +1,37 @@
 @breakpoints {
-  .rt-r-display-block {
+  .kui-r-display-block {
     display: block;
   }
 
-  .rt-r-display-inline {
+  .kui-r-display-inline {
     display: inline;
   }
 
-  .rt-r-display-inline-block {
+  .kui-r-display-inline-block {
     display: inline-block;
   }
 
-  .rt-r-display-flex {
+  .kui-r-display-flex {
     display: flex;
   }
 
-  .rt-r-display-inline-flex {
+  .kui-r-display-inline-flex {
     display: inline-flex;
   }
 
-  .rt-r-display-grid {
+  .kui-r-display-grid {
     display: grid;
   }
 
-  .rt-r-display-inline-grid {
+  .kui-r-display-inline-grid {
     display: inline-grid;
   }
 
-  .rt-r-display-none {
+  .kui-r-display-none {
     display: none;
   }
 
-  .rt-r-display-contents {
+  .kui-r-display-contents {
     display: contents;
   }
 }

package/src/styles/utilities/flex-basis.css

@@ -1,28 +1,28 @@
-.rt-r-fb {
+.kui-r-fb {
   flex-basis: var(--flex-basis);
 }
 @media (--xs) {
-  .xs\:rt-r-fb {
+  .xs\:kui-r-fb {
     flex-basis: var(--flex-basis-xs);
   }
 }
 @media (--sm) {
-  .sm\:rt-r-fb {
+  .sm\:kui-r-fb {
     flex-basis: var(--flex-basis-sm);
   }
 }
 @media (--md) {
-  .md\:rt-r-fb {
+  .md\:kui-r-fb {
     flex-basis: var(--flex-basis-md);
   }
 }
 @media (--lg) {
-  .lg\:rt-r-fb {
+  .lg\:kui-r-fb {
     flex-basis: var(--flex-basis-lg);
   }
 }
 @media (--xl) {
-  .xl\:rt-r-fb {
+  .xl\:kui-r-fb {
     flex-basis: var(--flex-basis-xl);
   }
 }

package/src/styles/utilities/flex-direction.css

@@ -1,17 +1,17 @@
 @breakpoints {
-  .rt-r-fd-row {
+  .kui-r-fd-row {
     flex-direction: row;
   }
 
-  .rt-r-fd-column {
+  .kui-r-fd-column {
     flex-direction: column;
   }
 
-  .rt-r-fd-row-reverse {
+  .kui-r-fd-row-reverse {
     flex-direction: row-reverse;
   }
 
-  .rt-r-fd-column-reverse {
+  .kui-r-fd-column-reverse {
     flex-direction: column-reverse;
   }
 }

package/src/styles/utilities/flex-grow.css

@@ -1,40 +1,40 @@
 @breakpoints {
-  .rt-r-fg {
+  .kui-r-fg {
     /* Keep this selector here to maintain the source order */
   }
-  .rt-r-fg-0 {
+  .kui-r-fg-0 {
     flex-grow: 0;
   }
-  .rt-r-fg-1 {
+  .kui-r-fg-1 {
     flex-grow: 1;
   }
 }
 
-.rt-r-fg {
+.kui-r-fg {
   flex-grow: var(--flex-grow);
 }
 @media (--xs) {
-  .xs\:rt-r-fg {
+  .xs\:kui-r-fg {
     flex-grow: var(--flex-grow-xs);
   }
 }
 @media (--sm) {
-  .sm\:rt-r-fg {
+  .sm\:kui-r-fg {
     flex-grow: var(--flex-grow-sm);
   }
 }
 @media (--md) {
-  .md\:rt-r-fg {
+  .md\:kui-r-fg {
     flex-grow: var(--flex-grow-md);
   }
 }
 @media (--lg) {
-  .lg\:rt-r-fg {
+  .lg\:kui-r-fg {
     flex-grow: var(--flex-grow-lg);
   }
 }
 @media (--xl) {
-  .xl\:rt-r-fg {
+  .xl\:kui-r-fg {
     flex-grow: var(--flex-grow-xl);
   }
 }

package/src/styles/utilities/flex-shrink.css

@@ -1,40 +1,40 @@
 @breakpoints {
-  .rt-r-fs {
+  .kui-r-fs {
     /* Keep this selector here to maintain the source order */
   }
-  .rt-r-fs-0 {
+  .kui-r-fs-0 {
     flex-shrink: 0;
   }
-  .rt-r-fs-1 {
+  .kui-r-fs-1 {
     flex-shrink: 1;
   }
 }
 
-.rt-r-fs {
+.kui-r-fs {
   flex-shrink: var(--flex-shrink);
 }
 @media (--xs) {
-  .xs\:rt-r-fs {
+  .xs\:kui-r-fs {
     flex-shrink: var(--flex-shrink-xs);
   }
 }
 @media (--sm) {
-  .sm\:rt-r-fs {
+  .sm\:kui-r-fs {
     flex-shrink: var(--flex-shrink-sm);
   }
 }
 @media (--md) {
-  .md\:rt-r-fs {
+  .md\:kui-r-fs {
     flex-shrink: var(--flex-shrink-md);
   }
 }
 @media (--lg) {
-  .lg\:rt-r-fs {
+  .lg\:kui-r-fs {
     flex-shrink: var(--flex-shrink-lg);
   }
 }
 @media (--xl) {
-  .xl\:rt-r-fs {
+  .xl\:kui-r-fs {
     flex-shrink: var(--flex-shrink-xl);
   }
 }

package/src/styles/utilities/flex-wrap.css

@@ -1,13 +1,13 @@
 @breakpoints {
-  .rt-r-fw-nowrap {
+  .kui-r-fw-nowrap {
     flex-wrap: nowrap;
   }
 
-  .rt-r-fw-wrap {
+  .kui-r-fw-wrap {
     flex-wrap: wrap;
   }
 
-  .rt-r-fw-wrap-reverse {
+  .kui-r-fw-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
 }

package/src/styles/utilities/font-weight.css

@@ -1,13 +1,13 @@
 @breakpoints {
-  .rt-r-weight-regular {
+  .kui-r-weight-regular {
     font-weight: var(--font-weight-regular);
   }
 
-  .rt-r-weight-medium {
+  .kui-r-weight-medium {
     font-weight: var(--font-weight-medium);
   }
 
-  .rt-r-weight-semibold {
+  .kui-r-weight-semibold {
     font-weight: var(--font-weight-semibold);
   }
 }