@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

package/src/css/primitives/card/card.css.ts

@@ -15,15 +15,8 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root: string = _style(layers.primitives, {
-  backgroundColor: vars.color.bg,
-  color: vars.color.fg,
-
-  //
-  transition:
-    'background-color 100ms ease-in-out, border-color 100ms, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
-
-  vars: {
+const stateVars = {
+  enabled: {
     [vars.color.bg]: vars.color.tinted.default.bg[0],
     [vars.color.border]: vars.color.tinted.default.border[1],
     [vars.color.fg]: vars.color.tinted.default.fg[0],
@@ -32,18 +25,90 @@ export const root: string = _style(layers.primitives, {
     [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
   },
 
-  selectors: {
-    'button.&': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      outline: 'none',
-      font: 'inherit',
-      textAlign: 'inherit',
-      border: 'none',
-      // See https://caniuse.com/?search=width%3A%20stretch
-      width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+  hovered: {
+    [vars.color.bg]: vars.color.tinted.default.bg[1],
+    [vars.color.border]: vars.color.tinted.default.border[3],
+    [vars.color.fg]: vars.color.tinted.default.fg[1],
+    [vars.color.code.bg]: vars.color.tinted.default.bg[2],
+    [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+    [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
+    [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+  },
+
+  pressed: {
+    [vars.color.bg]: vars.color.tinted.default.bg[2],
+    [vars.color.border]: vars.color.tinted.default.border[4],
+    [vars.color.fg]: vars.color.tinted.default.fg[0],
+    [vars.color.code.bg]: vars.color.tinted.default.bg[3],
+    [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+    [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
+    [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+  },
+
+  selected: {
+    [vars.color.bg]: vars.color.solid.primary.bg[0],
+    [vars.color.border]: vars.color.solid.primary.border[1],
+    [vars.color.fg]: vars.color.solid.primary.fg[0],
+    [vars.color.code.bg]: vars.color.solid.primary.bg[1],
+    [vars.color.code.fg]: vars.color.solid.primary.fg[3],
+    [vars.color.muted.bg]: vars.color.solid.primary.bg[1],
+    [vars.color.muted.fg]: vars.color.solid.primary.fg[3],
+  },
+
+  disabled: {
+    [vars.color.bg]: vars.color.tinted.default.bg[0],
+    [vars.color.border]: vars.color.tinted.default.border[1],
+    [vars.color.fg]: vars.color.tinted.default.border[3],
+    [vars.color.code.bg]: vars.color.tinted.default.bg[0],
+    [vars.color.code.fg]: vars.color.tinted.default.border[2],
+    [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+    [vars.color.muted.fg]: vars.color.tinted.default.border[2],
+  },
+}
+
+export const root: string = _style(layers.primitives, {
+  'backgroundColor': vars.color.bg,
+  'color': vars.color.fg,
+
+  'vars': stateVars.enabled,
+
+  '@media': {
+    '(hover: hover)': {
+      selectors: {
+        [[
+          'a.&',
+          ':not(:active)',
+          ':not(:focus)',
+          ':not(:disabled)',
+          ':not([aria-pressed="true"])',
+          ':not([data-pressed])',
+          ':not([data-focused])',
+          ':not([data-selected])',
+          ':not([data-disabled])',
+          ':hover',
+        ].join('')]: {
+          vars: stateVars.hovered,
+        },
+
+        [[
+          'button.&',
+          ':not(:active)',
+          ':not(:focus)',
+          ':not(:disabled)',
+          ':not([aria-pressed="true"])',
+          ':not([data-pressed])',
+          ':not([data-focused])',
+          ':not([data-selected])',
+          ':not([data-disabled])',
+          ':hover',
+        ].join('')]: {
+          vars: stateVars.hovered,
+        },
+      },
     },
+  },
 
+  'selectors': {
     'a.&': {
       outline: 'none',
       textDecoration: 'none',
@@ -61,78 +126,64 @@ export const root: string = _style(layers.primitives, {
         `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)` as string,
     },
 
-    'a.&:not([data-disabled]):hover, button.&:not([data-disabled]):hover': {
-      vars: {
-        [vars.color.bg]: vars.color.tinted.default.bg[1],
-        [vars.color.border]: vars.color.tinted.default.border[3],
-        [vars.color.fg]: vars.color.tinted.default.fg[1],
-        [vars.color.code.bg]: vars.color.tinted.default.bg[2],
-        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
-        [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
+    // hovered
+    [[
+      //
+      'a.&:not([data-disabled])[data-hovered]',
+      'button.&:not([data-disabled])[data-hovered]',
+    ].join(',')]: {
+      vars: stateVars.hovered,
     },
 
-    'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
-      vars: {
-        [vars.color.bg]: vars.color.tinted.default.bg[2],
-        [vars.color.border]: vars.color.tinted.default.border[4],
-        [vars.color.fg]: vars.color.tinted.default.fg[0],
-        [vars.color.code.bg]: vars.color.tinted.default.bg[3],
-        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
-        [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
+    // pressed
+    [[
+      'a.&:not([data-disabled]):active',
+      'button.&:not([data-disabled]):active',
+      'a.&:not([data-disabled])[aria-pressed="true"]',
+      'button.&:not([data-disabled])[aria-pressed="true"]',
+      'a.&:not([data-disabled])[data-pressed]',
+      'button.&:not([data-disabled])[data-pressed]',
+    ].join(',')]: {
+      vars: stateVars.pressed,
     },
 
-    // toggle button
-    'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
-      {
-        vars: {
-          [vars.color.bg]: vars.color.tinted.default.bg[2],
-          [vars.color.border]: vars.color.tinted.default.border[4],
-          [vars.color.fg]: vars.color.tinted.default.fg[0],
-          [vars.color.code.bg]: vars.color.tinted.default.bg[3],
-          [vars.color.code.fg]: vars.color.tinted.default.fg[4],
-          [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
-          [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
-        },
-      },
+    // selected
+    [[
+      //
+      'a.&:not([data-disabled])[data-selected]',
+      'button.&:not([data-disabled])[data-selected]',
+    ].join(',')]: {
+      vars: stateVars.selected,
+    },
 
-    'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
-      vars: {
-        [vars.color.bg]: vars.color.tinted.default.bg[2],
-        [vars.color.border]: vars.color.tinted.default.border[4],
-        [vars.color.fg]: vars.color.tinted.default.fg[0],
-        [vars.color.code.bg]: vars.color.tinted.default.bg[3],
-        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
-        [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
+    // disabled
+    [[
+      //
+      'a.&:disabled',
+      'a.&[data-disabled]',
+      'button.&:disabled',
+      'button.&[data-disabled]',
+    ].join(',')]: {
+      vars: stateVars.disabled,
     },
 
-    'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
-      vars: {
-        [vars.color.bg]: vars.color.solid.primary.bg[0],
-        [vars.color.border]: vars.color.solid.primary.border[1],
-        [vars.color.fg]: vars.color.solid.primary.fg[0],
-        [vars.color.code.bg]: vars.color.solid.primary.bg[1],
-        [vars.color.code.fg]: vars.color.solid.primary.fg[3],
-        [vars.color.muted.bg]: vars.color.solid.primary.bg[1],
-        [vars.color.muted.fg]: vars.color.solid.primary.fg[3],
-      },
+    // focus ring
+    [[
+      //
+      'a.&[data-focus-ring]:focus',
+      'button.&[data-focus-ring]:focus',
+    ].join(',')]: {
+      outline: `${vars.card.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.card.focusRing.offset,
     },
 
-    'a&[data-disabled], button&[data-disabled]': {
-      vars: {
-        [vars.color.bg]: vars.color.tinted.default.bg[0],
-        [vars.color.border]: vars.color.tinted.default.border[1],
-        [vars.color.fg]: vars.color.tinted.default.border[3],
-        [vars.color.code.bg]: vars.color.tinted.default.bg[0],
-        [vars.color.code.fg]: vars.color.tinted.default.border[2],
-        [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-        [vars.color.muted.fg]: vars.color.tinted.default.border[2],
-      },
+    // focus ring - not focus visible
+    [[
+      //
+      'a.&[data-focus-ring]:focus:not(:focus-visible)',
+      'button.&[data-focus-ring]:focus:not(:focus-visible)',
+    ].join(',')]: {
+      outline: 'none',
     },
   },
 })
@@ -333,54 +384,6 @@ function buildToneRule(tone: CardTone): StyleRule {
     }
   }
 
-  // assign legacy vars
-  // todo: remove before release?
-  _assign(toneVars, {
-    '--card-accent-fg-color': vars.color.tinted.suggest.fg[4],
-  })
-  for (const color of AVATAR_COLORS) {
-    _assign(toneVars, {
-      [`--card-avatar-${color}-bg-color`]: vars.color.avatar[color].bg,
-      [`--card-avatar-${color}-fg-color`]: vars.color.avatar[color].fg,
-    })
-  }
-  _assign(toneVars, {
-    '--card-backdrop-color': vars.color.backdrop,
-  })
-  for (const tone of ELEMENT_TONES) {
-    _assign(toneVars, {
-      [`--card-badge-${tone}-bg-color`]: vars.color.tinted[tone].bg[1],
-      [`--card-badge-${tone}-dot-color`]: vars.color.tinted[tone].fg[4],
-      [`--card-badge-${tone}-fg-color`]: vars.color.tinted[tone].fg[2],
-      [`--card-badge-${tone}-icon-color`]: vars.color.tinted[tone].fg[4],
-    })
-  }
-  _assign(toneVars, {
-    '--card-bg-color': vars.color.bg,
-    '--card-bg2-color': vars.color.muted.bg,
-    '--card-border-color': vars.color.border,
-    '--card-code-bg-color': vars.color.code.bg,
-    '--card-code-fg-color': vars.color.code.fg,
-    '--card-fg-color': vars.color.fg,
-    '--card-focus-ring-color': vars.color.focusRing,
-    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
-    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
-    '--card-icon-color': vars.color.fg,
-    '--card-kbd-bg-color': vars.color.muted.bg,
-    '--card-kbd-border-color': vars.color.tinted.default.border[1],
-    '--card-kbd-fg-color': vars.color.muted.fg,
-    '--card-link-color': vars.color.link.fg,
-    '--card-link-fg-color': vars.color.link.fg,
-    '--card-muted-bg-color': vars.color.muted.bg,
-    '--card-muted-fg-color': vars.color.muted.fg,
-    '--card-shadow-outline-color': vars.color.shadow.outline,
-    '--card-shadow-umbra-color': vars.color.shadow.umbra,
-    '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
-    '--card-shadow-ambient-color': vars.color.shadow.ambient,
-    '--card-skeleton-from-color': vars.color.skeleton.from,
-    '--card-skeleton-to-color': vars.color.skeleton.to,
-  })
-
   return {
     vars: toneVars,
   }

package/src/css/primitives/checkbox/checkbox.css.ts

@@ -6,6 +6,7 @@ import {vars} from '../../vars.css'
 
 export const root: string = _style(layers.primitives, {
   position: 'relative',
+  flex: 'none',
 
   selectors: {
     '&:not([hidden])': {

package/src/css/primitives/code/code.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {root, scale} from './code.css'
 import type {CodeStyleProps} from './types'
 
@@ -15,5 +17,7 @@ export function code(props: CodeStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
   )
 }

package/src/css/primitives/code/types.ts

@@ -2,10 +2,16 @@ import type {FontCodeSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
+export interface CodeStyleProps
+  extends FlexStyleProps,
+    Omit<FontStyleProps, 'align'>,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   className?: string
   size?: ResponsiveProp<FontCodeSize>
 }

package/src/css/primitives/heading/heading.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {textAlign} from '../../props/textAlign/textAlign'
 import {muted, root, sizes} from './heading.css'
 import type {HeadingStyleProps} from './types'
@@ -17,6 +19,8 @@ export function heading(props: HeadingStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
     textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/heading/types.ts

@@ -2,11 +2,17 @@ import type {FontHeadingSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
+export interface HeadingStyleProps
+  extends FontStyleProps,
+    FlexStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/label/label.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {textAlign} from '../../props/textAlign/textAlign'
 import {muted, root, sizes} from './label.css'
 import type {LabelStyleProps} from './types'
@@ -17,6 +19,8 @@ export function label(props: LabelStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
     textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/label/types.ts

@@ -2,11 +2,17 @@ import type {FontLabelSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
+export interface LabelStyleProps
+  extends FlexStyleProps,
+    FontStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/radio/radio.css.ts

@@ -7,7 +7,7 @@ export const root: string = _style(layers.primitives, {
 
   selectors: {
     '&:not([hidden])': {
-      display: 'inline-block',
+      display: 'block',
     },
   },
 })

package/src/css/primitives/root/root.css.ts

@@ -2,8 +2,8 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const _root: string = _style(layers.primitives, {
+  containerType: 'inline-size',
   WebkitFontSmoothing: 'antialiased',
-  // minWidth: `${320 / 16}rem`, // 320px
 
   selectors: {
     'html.&': {

package/src/css/primitives/select/select.css.ts

@@ -3,7 +3,13 @@ import {globalStyle} from '@vanilla-extract/css'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root: string = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  },
+})
 
 export const input: string = _style(layers.primitives, {
   ':disabled': {

package/src/css/primitives/selectable/selectable.css.ts

@@ -35,93 +35,102 @@ export const tones: Record<ElementTone, string> = {
       const focused = vars.color.solid.primary
       const disabled = vars.color.tinted.default
 
+      const stateVars = {
+        enabled: {
+          [vars.color.bg]: tinted.bg[0],
+          [vars.color.border]: tinted.border[1],
+          [vars.color.fg]: tinted.fg[2],
+          [vars.color.muted.bg]: tinted.bg[1],
+          [vars.color.muted.fg]: tinted.fg[3],
+        },
+
+        hovered: {
+          [vars.color.bg]: tinted.bg[1],
+          [vars.color.border]: tinted.border[2],
+          [vars.color.fg]: tinted.fg[1],
+          [vars.color.muted.bg]: tinted.bg[2],
+          [vars.color.muted.fg]: tinted.fg[4],
+        },
+
+        pressed: {
+          [vars.color.bg]: tinted.bg[2],
+          [vars.color.border]: tinted.border[4],
+          [vars.color.fg]: tinted.fg[0],
+          [vars.color.muted.bg]: tinted.bg[3],
+          [vars.color.muted.fg]: tinted.fg[4],
+        },
+
+        focused: {
+          [vars.color.bg]: focused.bg[0],
+          [vars.color.border]: focused.border[1],
+          [vars.color.fg]: focused.fg[0],
+          [vars.color.muted.bg]: focused.bg[1],
+          [vars.color.muted.fg]: focused.fg[3],
+        },
+
+        disabled: {
+          [vars.color.bg]: disabled.bg[0],
+          [vars.color.border]: disabled.border[1],
+          [vars.color.fg]: disabled.border[4],
+          [vars.color.muted.bg]: disabled.bg[1],
+          [vars.color.muted.fg]: disabled.border[4],
+        },
+      } as const
+
       return [
         t,
         _style(layers.primitives, {
-          'vars': {
-            [vars.color.bg]: tinted.bg[0],
-            [vars.color.border]: tinted.border[1],
-            [vars.color.fg]: tinted.fg[2],
-          },
+          'vars': stateVars.enabled,
 
           '@media': {
             '(hover: hover)': {
               selectors: {
-                '&:not([data-pressed]):not([data-selected]):not([data-focused]):not([data-disabled]):not(:active):not(:focus):hover':
-                  {
-                    vars: {
-                      [vars.color.bg]: tinted.bg[1],
-                      [vars.color.border]: tinted.border[2],
-                      [vars.color.fg]: tinted.fg[1],
-                    },
-                  },
-
-                // '&:not([data-disabled]):hover': {
-                //   vars: {
-                //     [vars.color.bg]: tinted.bg[1],
-                //     [vars.color.border]: tinted.border[3],
-                //     [vars.color.fg]: tinted.fg[1],
-                //     [vars.color.muted.bg]: tinted.bg[2],
-                //     [vars.color.muted.fg]: tinted.fg[4],
-                //   },
-                // },
+                [[
+                  '&',
+                  ':not(:active)',
+                  ':not(:focus)',
+                  ':not(:disabled)',
+                  ':not([aria-pressed="true"])',
+                  ':not([data-pressed])',
+                  ':not([data-focused])',
+                  ':not([data-selected])',
+                  ':not([data-disabled])',
+                  ':hover',
+                ].join('')]: {
+                  vars: stateVars.hovered,
+                },
               },
             },
           },
 
           'selectors': {
-            // selected
-            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-selected]':
-              {
-                vars: {
-                  [vars.color.bg]: tinted.bg[2],
-                  [vars.color.border]: tinted.border[4],
-                  [vars.color.fg]: tinted.fg[0],
-                  [vars.color.muted.bg]: tinted.bg[3],
-                  [vars.color.muted.fg]: tinted.fg[4],
-                },
-              },
-
-            // focused
-            '&:not([data-disabled]):focus': {
-              vars: {
-                [vars.color.bg]: focused.bg[0],
-                [vars.color.border]: focused.border[1],
-                [vars.color.fg]: focused.fg[0],
-                [vars.color.muted.bg]: focused.bg[1],
-                [vars.color.muted.fg]: focused.fg[3],
-              },
+            // hovered
+            [['&:not([data-disabled])[data-hovered]'].join(',')]: {
+              vars: stateVars.hovered,
             },
-            '&:not([data-disabled])[data-focused]': {
-              vars: {
-                [vars.color.bg]: focused.bg[0],
-                [vars.color.border]: focused.border[1],
-                [vars.color.fg]: focused.fg[0],
-                [vars.color.muted.bg]: focused.bg[1],
-                [vars.color.muted.fg]: focused.fg[3],
-              },
+
+            // pressed
+            [[
+              '&:not([data-disabled]):active',
+              '&:not([data-disabled])[aria-pressed="true"]',
+              '&:not([data-disabled])[data-pressed]',
+            ].join(',')]: {
+              vars: stateVars.pressed,
             },
 
-            // // selected
-            // '&:not([data-disabled])[data-selected]': {
-            //   vars: {
-            //     [vars.color.bg]: focused.bg[0],
-            //     [vars.color.border]: focused.border[1],
-            //     [vars.color.fg]: focused.fg[0],
-            //     [vars.color.muted.bg]: focused.bg[1],
-            //     [vars.color.muted.fg]: focused.fg[3],
-            //   },
-            // },
+            // focused
+            // selected
+            [[
+              '&:not([data-disabled]):focus',
+              '&:not([data-disabled])[data-focused]',
+              '&:not([data-disabled])[data-selected]',
+            ].join(',')]: {
+              vars: stateVars.focused,
+            },
 
             // disabled
-            '&[data-disabled]': {
-              vars: {
-                [vars.color.bg]: disabled.bg[0],
-                [vars.color.border]: disabled.border[1],
-                [vars.color.fg]: disabled.border[4],
-                [vars.color.muted.bg]: disabled.bg[1],
-                [vars.color.muted.fg]: disabled.border[4],
-              },
+            [['&:disabled', '&[data-disabled]'].join(',')]: {
+              vars: stateVars.disabled,
             },
           },
         }),

package/src/css/primitives/switch/switch.css.ts

@@ -2,7 +2,16 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root: string = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {
+  flex: 'none',
+  position: 'relative',
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  },
+})
 
 export const input: string = _style(layers.primitives, {
   position: 'absolute',