@kushagradhawan/kookie-ui 0.1.10 → 0.1.12

package/components.css

@@ -2337,8 +2337,8 @@
     letter-spacing: var(--letter-spacing-1);
 }
 .rt-Button:where(.rt-r-size-1) :where(svg) {
-    width: 16px;
-    height: 16px;
+    width: var(--space-4);
+    height: var(--space-4);
 }
 .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -2356,8 +2356,8 @@
     letter-spacing: var(--letter-spacing-2);
 }
 .rt-Button:where(.rt-r-size-2) :where(svg) {
-    width: 18px;
-    height: 18px;
+    width: var(--space-4);
+    height: var(--space-4);
 }
 .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -2375,8 +2375,8 @@
     letter-spacing: var(--letter-spacing-3);
 }
 .rt-Button:where(.rt-r-size-3) :where(svg) {
-    width: 20px;
-    height: 20px;
+    width: var(--space-5);
+    height: var(--space-5);
 }
 .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -2394,8 +2394,8 @@
     letter-spacing: var(--letter-spacing-4);
 }
 .rt-Button:where(.rt-r-size-4) :where(svg) {
-    width: 22px;
-    height: 22px;
+    width: var(--space-5);
+    height: var(--space-5);
 }
 .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -2414,8 +2414,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2433,8 +2433,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2452,8 +2452,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2471,8 +2471,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2492,8 +2492,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2511,8 +2511,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2530,8 +2530,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2549,8 +2549,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2570,8 +2570,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2589,8 +2589,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2608,8 +2608,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2627,8 +2627,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2648,8 +2648,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2667,8 +2667,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2686,8 +2686,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2705,8 +2705,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2726,8 +2726,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2745,8 +2745,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2764,8 +2764,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2783,8 +2783,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -3252,6 +3252,35 @@
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
     background-color: var(--focus-a2);
 }
+.rt-Card:where(.rt-variant-soft) {
+    --card-border-width: 0px;
+    --card-background-color: var(--gray-a3);
+}
+.rt-Card:where(.rt-variant-soft)::before {
+    background-color: var(--card-background-color);
+}
+.rt-Card:where(.rt-variant-soft)::after {
+    box-shadow: none;
+    border: none;
+    outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible) {
+    outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible)::after {
+    outline: none;
+}
+@media (hover: hover) {
+    .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+        background-color: var(--gray-a4);
+    }
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+    background-color: var(--gray-a4);
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+    background-color: var(--gray-a5);
+}
 @media (pointer: coarse) {
     .rt-Card:where(:any-link, button, label):where(:active:not(:focus-visible, [data-state='open']))::before {
         background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
@@ -4161,7 +4190,9 @@
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    height: var(--base-menu-item-height);
+    min-height: var(--base-menu-item-height);
+    padding-top: var(--base-menu-item-padding-y);
+    padding-bottom: var(--base-menu-item-padding-y);
     padding-left: var(--base-menu-item-padding-left);
     padding-right: var(--base-menu-item-padding-right);
     box-sizing: border-box;
@@ -4202,7 +4233,9 @@
 .rt-BaseMenuLabel {
     display: flex;
     align-items: center;
-    height: var(--base-menu-item-height);
+    min-height: var(--base-menu-item-height);
+    padding-top: var(--base-menu-item-padding-y);
+    padding-bottom: var(--base-menu-item-padding-y);
     padding-left: var(--base-menu-item-padding-left);
     padding-right: var(--base-menu-item-padding-right);
     box-sizing: border-box;
@@ -4221,6 +4254,7 @@
     --base-menu-content-padding: var(--space-1);
     --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
     --base-menu-item-padding-right: var(--space-2);
+    --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
     --base-menu-item-height: var(--space-5);
     border-radius: var(--radius-3);
 }
@@ -4230,6 +4264,11 @@
     letter-spacing: var(--letter-spacing-1);
     border-radius: var(--radius-1);
 }
+.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+    width: var(--space-4);
+    height: var(--space-4);
+    flex-shrink: 0;
+}
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
@@ -4249,6 +4288,7 @@
     --base-menu-content-padding: var(--space-2);
     --base-menu-item-padding-left: var(--space-3);
     --base-menu-item-padding-right: var(--space-3);
+    --base-menu-item-padding-y: var(--space-1);
     --base-menu-item-height: var(--space-6);
     border-radius: var(--radius-4);
 }
@@ -4258,6 +4298,11 @@
     letter-spacing: var(--letter-spacing-2);
     border-radius: var(--radius-2);
 }
+.rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+    width: var(--space-4);
+    height: var(--space-4);
+    flex-shrink: 0;
+}
 .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuLabel) {
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
@@ -4278,6 +4323,7 @@
         --base-menu-content-padding: var(--space-1);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
+        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -4287,6 +4333,11 @@
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
     }
+    .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
@@ -4306,6 +4357,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-4);
     }
@@ -4315,6 +4367,11 @@
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
     }
+    .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
@@ -4336,6 +4393,7 @@
         --base-menu-content-padding: var(--space-1);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
+        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -4345,6 +4403,11 @@
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
     }
+    .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
@@ -4364,6 +4427,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-4);
     }
@@ -4373,6 +4437,11 @@
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
     }
+    .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
@@ -4394,6 +4463,7 @@
         --base-menu-content-padding: var(--space-1);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
+        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -4403,6 +4473,11 @@
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
     }
+    .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
@@ -4422,6 +4497,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-4);
     }
@@ -4431,6 +4507,11 @@
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
     }
+    .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
@@ -4452,6 +4533,7 @@
         --base-menu-content-padding: var(--space-1);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
+        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -4461,6 +4543,11 @@
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
     }
+    .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
@@ -4480,6 +4567,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-4);
     }
@@ -4489,6 +4577,11 @@
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
     }
+    .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
@@ -4510,6 +4603,7 @@
         --base-menu-content-padding: var(--space-1);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
+        --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -4519,6 +4613,11 @@
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
     }
+    .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
@@ -4538,6 +4637,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-4);
     }
@@ -4547,6 +4647,11 @@
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
     }
+    .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
@@ -4570,6 +4675,9 @@
     color: var(--gray-a8);
     cursor: default;
 }
+.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    color: var(--gray-a10);
+}
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
     color: inherit;
 }
@@ -4583,6 +4691,12 @@
 .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
     color: var(--accent-contrast);
 }
+.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
+    color: inherit !important;
+}
 .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-12);
     color: var(--accent-1);
@@ -4590,16 +4704,31 @@
 .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
     color: var(--accent-1);
 }
+.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
+    color: inherit !important;
+}
 .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
 }
+.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']) {
+    color: inherit !important;
+}
 .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     background-color: var(--accent-a3);
 }
 .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-a4);
 }
+.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    color: var(--gray-11) !important;
+}
 .rt-ContextMenuContent {
     max-height: var(--radix-context-menu-content-available-height);
     transform-origin: var(--radix-context-menu-content-transform-origin);
@@ -5794,20 +5923,20 @@
     width: var(--base-button-height);
 }
 .rt-IconButton:where(.rt-r-size-1) :where(svg) {
-    width: 16px;
-    height: 16px;
+    width: var(--space-4);
+    height: var(--space-4);
 }
 .rt-IconButton:where(.rt-r-size-2) :where(svg) {
-    width: 18px;
-    height: 18px;
+    width: var(--space-4);
+    height: var(--space-4);
 }
 .rt-IconButton:where(.rt-r-size-3) :where(svg) {
-    width: 20px;
-    height: 20px;
+    width: var(--space-5);
+    height: var(--space-5);
 }
 .rt-IconButton:where(.rt-r-size-4) :where(svg) {
-    width: 22px;
-    height: 22px;
+    width: var(--space-5);
+    height: var(--space-5);
 }
 .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -5823,20 +5952,20 @@
 }
 @media (min-width: 520px) {
     .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5853,20 +5982,20 @@
 }
 @media (min-width: 768px) {
     .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5883,20 +6012,20 @@
 }
 @media (min-width: 1024px) {
     .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5913,20 +6042,20 @@
 }
 @media (min-width: 1280px) {
     .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5943,20 +6072,20 @@
 }
 @media (min-width: 1640px) {
     .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 16px;
-        height: 16px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 18px;
-        height: 18px;
+        width: var(--space-4);
+        height: var(--space-4);
     }
     .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 20px;
-        height: 20px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 22px;
-        height: 22px;
+        width: var(--space-5);
+        height: var(--space-5);
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);