@kushagradhawan/kookie-ui 0.1.10 → 0.1.12

package/styles.css

@@ -7074,8 +7074,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);
@@ -7093,8 +7093,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);
@@ -7112,8 +7112,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);
@@ -7131,8 +7131,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);
@@ -7151,8 +7151,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);
@@ -7170,8 +7170,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);
@@ -7189,8 +7189,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);
@@ -7208,8 +7208,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);
@@ -7229,8 +7229,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);
@@ -7248,8 +7248,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);
@@ -7267,8 +7267,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);
@@ -7286,8 +7286,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);
@@ -7307,8 +7307,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);
@@ -7326,8 +7326,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);
@@ -7345,8 +7345,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);
@@ -7364,8 +7364,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);
@@ -7385,8 +7385,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);
@@ -7404,8 +7404,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);
@@ -7423,8 +7423,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);
@@ -7442,8 +7442,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);
@@ -7463,8 +7463,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);
@@ -7482,8 +7482,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);
@@ -7501,8 +7501,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);
@@ -7520,8 +7520,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);
@@ -7979,6 +7979,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));
@@ -8888,7 +8917,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;
@@ -8929,7 +8960,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;
@@ -8948,6 +8981,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);
 }
@@ -8957,6 +8991,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);
@@ -8976,6 +9015,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);
 }
@@ -8985,6 +9025,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);
@@ -9005,6 +9050,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);
   }
@@ -9014,6 +9060,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);
@@ -9033,6 +9084,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);
   }
@@ -9042,6 +9094,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);
@@ -9063,6 +9120,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);
   }
@@ -9072,6 +9130,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);
@@ -9091,6 +9154,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);
   }
@@ -9100,6 +9164,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);
@@ -9121,6 +9190,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);
   }
@@ -9130,6 +9200,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);
@@ -9149,6 +9224,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);
   }
@@ -9158,6 +9234,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);
@@ -9179,6 +9260,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);
   }
@@ -9188,6 +9270,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);
@@ -9207,6 +9294,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);
   }
@@ -9216,6 +9304,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);
@@ -9237,6 +9330,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);
   }
@@ -9246,6 +9340,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);
@@ -9265,6 +9364,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);
   }
@@ -9274,6 +9374,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);
@@ -9297,6 +9402,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;
 }
@@ -9310,6 +9418,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);
@@ -9317,16 +9431,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);
@@ -10521,20 +10650,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);
@@ -10550,20 +10679,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);
@@ -10580,20 +10709,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);
@@ -10610,20 +10739,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);
@@ -10640,20 +10769,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);
@@ -10670,20 +10799,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);