fix styling for ComboBox, DatePicker, Menu, Select for isExpanded

Author: LFDanLu

starters/docs/src/Form.css

@@ -81,7 +81,7 @@
     height: var(--spacing-4);
   }
 
-  &:where([data-hovered], [data-pressed]) {
+  &:where([data-hovered], [data-pressed], [data-expanded]) {
     background: var(--tint-300);
     color: var(--tint-1200);
   }
@@ -91,7 +91,8 @@
     color: HighlightText;
   }
 
-  &[data-pressed] {
+  &[data-pressed],
+  &[data-expanded] {
     scale: 0.9;
   }
 
@@ -104,4 +105,4 @@
     background: none;
     color: var(--text-color-disabled);
   }
-}
+}

starters/docs/src/Menu.css

@@ -63,7 +63,7 @@
   }
 
   &[data-open],
-  &[data-expanded] {
+  &[data-pressed] {
     background: var(--highlight-hover);
   }
 

starters/docs/src/Select.css

@@ -11,7 +11,7 @@
     width: 100%;
     min-width: 0;
 
-    &[data-expanded] {
+    &[data-pressed] {
       scale: 1;
     }
   }

starters/docs/src/utilities.css

@@ -35,7 +35,7 @@
         inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */
     }
 
-    &:where([data-pressed]) {
+    &:where([data-pressed], [data-expanded]) {
       --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
     }
 

starters/tailwind/src/Button.tsx

@@ -14,10 +14,10 @@ let button = tv({
   base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:w-8 font-sans text-sm text-center transition rounded-lg cursor-default [-webkit-tap-highlight-color:transparent]',
   variants: {
     variant: {
-      primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white',
-      secondary: 'border-black/10 bg-neutral-50 hover:bg-neutral-100 pressed:bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 dark:text-neutral-100',
-      destructive: 'bg-red-700 hover:bg-red-800 pressed:bg-red-900 text-white',
-      quiet: 'border-0 bg-transparent hover:bg-neutral-200 pressed:bg-neutral-300 text-neutral-800 dark:hover:bg-neutral-700 dark:pressed:bg-neutral-600 dark:text-neutral-100'
+      primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white expanded:bg-blue-800',
+      secondary: 'border-black/10 bg-neutral-50 hover:bg-neutral-100 pressed:bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 dark:text-neutral-100 expanded:bg-neutral-200 dark:expanded:bg-neutral-500',
+      destructive: 'bg-red-700 hover:bg-red-800 pressed:bg-red-900 text-white expanded:bg-red-900',
+      quiet: 'border-0 bg-transparent hover:bg-neutral-200 pressed:bg-neutral-300 text-neutral-800 dark:hover:bg-neutral-700 dark:pressed:bg-neutral-600 dark:text-neutral-100 expanded:bg-neutral-300 dark:expanded:bg-neutral-600'
     },
     isDisabled: {
       true: 'border-transparent dark:border-transparent bg-neutral-100 dark:bg-neutral-800 text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'

starters/tailwind/src/FieldButton.tsx

@@ -11,7 +11,7 @@ export interface ButtonProps extends RACButtonProps {
 
 let button = tv({
   extend: focusRing,
-  base: 'relative inline-flex items-center border-0 font-sans text-sm text-center transition rounded-md cursor-default p-1 flex items-center justify-center text-neutral-600 bg-transparent hover:bg-black/[5%] pressed:bg-black/10 dark:text-neutral-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent [-webkit-tap-highlight-color:transparent]',
+  base: 'relative inline-flex items-center border-0 font-sans text-sm text-center transition rounded-md cursor-default p-1 flex items-center justify-center text-neutral-600 bg-transparent hover:bg-black/[5%] pressed:bg-black/10 dark:text-neutral-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent [-webkit-tap-highlight-color:transparent] expanded:bg-black/10 dark:expanded:bg-white/20',
   variants: {
     isDisabled: {
       true: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] border-black/5 dark:border-white/5'

starters/tailwind/src/Select.tsx

@@ -21,7 +21,7 @@ const styles = tv({
   base: 'flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[180px] transition bg-neutral-50 dark:bg-neutral-700 [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
-      false: 'text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]',
+      false: 'text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark] expanded:bg-neutral-200 dark:expanded:bg-neutral-500',
       true: 'border-transparent dark:border-transparent text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] bg-neutral-100 dark:bg-neutral-800'
     }
   }