@womp/kookie-ui 0.17.0 → 0.19.0

package/tokens/base.css

@@ -249,6 +249,20 @@
   --slot-inset-2: calc(3px * var(--scale));
   --slot-inset-3: calc(4px * var(--scale));
   --slot-inset-4: calc(4px * var(--scale));
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * var(--scale));
   --overlay-w-1: calc(360px * var(--scale));
   --overlay-w-2: calc(440px * var(--scale));
   --overlay-w-3: calc(560px * var(--scale));
@@ -1331,6 +1345,7 @@
   --gray-track: var(--slate-track);
 }
 [data-radius] {
+  --radius-0: 0px;
   --radius-1: calc(6px * var(--scale) * var(--radius-factor));
   --radius-2: calc(8px * var(--scale) * var(--radius-factor));
   --radius-3: calc(10px * var(--scale) * var(--radius-factor));
@@ -1341,32 +1356,18 @@
   --radius-8: calc(28px * var(--scale) * var(--radius-factor));
   --radius-9: calc(32px * var(--scale) * var(--radius-factor));
   --radius-10: calc(40px * var(--scale) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scale) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scale) * var(--radius-factor));
-  --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));
-  --radius-surface-1: calc(6px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-5: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-9: calc(32px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scale) * var(--radius-surface-factor));
+  --radius-control-1: var(--radius-1);
+  --radius-control-2: var(--radius-2);
+  --radius-control-3: var(--radius-3);
+  --radius-control-4: var(--radius-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-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));
 }
 [data-radius='none'] {
   --radius-factor: 0;
@@ -1392,6 +1393,194 @@
   --radius-factor: 2;
   --radius-surface-factor: 1;
   --radius-full: 9999px;
+  --radius-control-1: calc(var(--control-height-1) / 2);
+  --radius-control-2: calc(var(--control-height-2) / 2);
+  --radius-control-3: calc(var(--control-height-3) / 2);
+  --radius-control-4: calc(var(--control-height-4) / 2);
+}
+.rt-SurfaceNest:where(.rt-r-size-1) {
+  --kui-sf-radius: var(--radius-surface-1);
+  --kui-sf-p: var(--surface-p-1);
+}
+.rt-SurfaceNest:where(.rt-r-size-1) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+}
+.rt-SurfaceNest:where(.rt-r-size-2) {
+  --kui-sf-radius: var(--radius-surface-2);
+  --kui-sf-p: var(--surface-p-2);
+}
+.rt-SurfaceNest:where(.rt-r-size-2) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+}
+.rt-SurfaceNest:where(.rt-r-size-3) {
+  --kui-sf-radius: var(--radius-surface-3);
+  --kui-sf-p: var(--surface-p-3);
+}
+.rt-SurfaceNest:where(.rt-r-size-3) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+}
+.rt-SurfaceNest:where(.rt-r-size-4) {
+  --kui-sf-radius: var(--radius-surface-4);
+  --kui-sf-p: var(--surface-p-4);
+}
+.rt-SurfaceNest:where(.rt-r-size-4) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+}
+@media (min-width: 520px) {
+  .rt-SurfaceNest:where(.xs\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 768px) {
+  .rt-SurfaceNest:where(.sm\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1024px) {
+  .rt-SurfaceNest:where(.md\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1280px) {
+  .rt-SurfaceNest:where(.lg\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1640px) {
+  .rt-SurfaceNest:where(.xl\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+.rt-SurfaceNest {
+  --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
+}
+:where(.rt-SurfaceNest) .rt-SurfaceNest {
+  --kui-sf-r: min(var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))), var(--kui-sf-radius, var(--radius-surface-2)));
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {

package/tokens.css

@@ -3310,6 +3310,8 @@
 }
 :where(.radix-themes) {
   --border-width-standard: 1px;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
   --raised-elevation-offset: -0.02em;
   --raised-active-padding-offset-1: 0.5px;
   --raised-active-padding-offset-2: 1px;
@@ -3593,6 +3595,20 @@
   --slot-inset-2: calc(3px * var(--scale));
   --slot-inset-3: calc(4px * var(--scale));
   --slot-inset-4: calc(4px * var(--scale));
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * var(--scale));
   --overlay-w-1: calc(360px * var(--scale));
   --overlay-w-2: calc(440px * var(--scale));
   --overlay-w-3: calc(560px * var(--scale));
@@ -4675,6 +4691,7 @@
   --gray-track: var(--slate-track);
 }
 [data-radius] {
+  --radius-0: 0px;
   --radius-1: calc(6px * var(--scale) * var(--radius-factor));
   --radius-2: calc(8px * var(--scale) * var(--radius-factor));
   --radius-3: calc(10px * var(--scale) * var(--radius-factor));
@@ -4685,32 +4702,18 @@
   --radius-8: calc(28px * var(--scale) * var(--radius-factor));
   --radius-9: calc(32px * var(--scale) * var(--radius-factor));
   --radius-10: calc(40px * var(--scale) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scale) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scale) * var(--radius-factor));
-  --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));
-  --radius-surface-1: calc(6px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-5: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-9: calc(32px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scale) * var(--radius-surface-factor));
+  --radius-control-1: var(--radius-1);
+  --radius-control-2: var(--radius-2);
+  --radius-control-3: var(--radius-3);
+  --radius-control-4: var(--radius-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-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));
 }
 [data-radius='none'] {
   --radius-factor: 0;
@@ -4736,6 +4739,194 @@
   --radius-factor: 2;
   --radius-surface-factor: 1;
   --radius-full: 9999px;
+  --radius-control-1: calc(var(--control-height-1) / 2);
+  --radius-control-2: calc(var(--control-height-2) / 2);
+  --radius-control-3: calc(var(--control-height-3) / 2);
+  --radius-control-4: calc(var(--control-height-4) / 2);
+}
+.rt-SurfaceNest:where(.rt-r-size-1) {
+  --kui-sf-radius: var(--radius-surface-1);
+  --kui-sf-p: var(--surface-p-1);
+}
+.rt-SurfaceNest:where(.rt-r-size-1) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+}
+.rt-SurfaceNest:where(.rt-r-size-2) {
+  --kui-sf-radius: var(--radius-surface-2);
+  --kui-sf-p: var(--surface-p-2);
+}
+.rt-SurfaceNest:where(.rt-r-size-2) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+}
+.rt-SurfaceNest:where(.rt-r-size-3) {
+  --kui-sf-radius: var(--radius-surface-3);
+  --kui-sf-p: var(--surface-p-3);
+}
+.rt-SurfaceNest:where(.rt-r-size-3) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+}
+.rt-SurfaceNest:where(.rt-r-size-4) {
+  --kui-sf-radius: var(--radius-surface-4);
+  --kui-sf-p: var(--surface-p-4);
+}
+.rt-SurfaceNest:where(.rt-r-size-4) > * {
+  --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+}
+@media (min-width: 520px) {
+  .rt-SurfaceNest:where(.xs\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.xs\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 768px) {
+  .rt-SurfaceNest:where(.sm\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.sm\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1024px) {
+  .rt-SurfaceNest:where(.md\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.md\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1280px) {
+  .rt-SurfaceNest:where(.lg\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.lg\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+@media (min-width: 1640px) {
+  .rt-SurfaceNest:where(.xl\:rt-r-size-1) {
+    --kui-sf-radius: var(--radius-surface-1);
+    --kui-sf-p: var(--surface-p-1);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-1) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-2) {
+    --kui-sf-radius: var(--radius-surface-2);
+    --kui-sf-p: var(--surface-p-2);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-2) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-3) {
+    --kui-sf-radius: var(--radius-surface-3);
+    --kui-sf-p: var(--surface-p-3);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-3) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-4) {
+    --kui-sf-radius: var(--radius-surface-4);
+    --kui-sf-p: var(--surface-p-4);
+  }
+  .rt-SurfaceNest:where(.xl\:rt-r-size-4) > * {
+    --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+  }
+}
+.rt-SurfaceNest {
+  --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
+}
+:where(.rt-SurfaceNest) .rt-SurfaceNest {
+  --kui-sf-r: min(var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))), var(--kui-sf-radius, var(--radius-surface-2)));
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {