@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/css/primitives/_selectable/{rules.ts → _selectable.style.ts}

@@ -1,32 +1,30 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-import {toneMap} from './_contants'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
 
-export const _selectableRules: Rules = {
-  selectable: {
+const primitive: StyleRules = {
+  '.selectable': {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
 
-    '--color-bg': vars.color.tinted.bg[0],
-    '--color-border': vars.color.tinted.border[2],
-    '--color-fg': vars.color.tinted.fg[2],
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
 
-    '@nest': {
-      '&:is(button)': {
+    'nest': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         outline: 'none',
         font: 'inherit',
         textAlign: 'inherit',
         border: 0,
+        // @ts-expect-error - TODO: fix this
         width: ['-moz-available', '-webkit-fill-available', 'stretch'],
       },
 
-      /* &:is(a) */
-      '&:is(a)': {
+      'a&': {
         outline: 'none',
         textDecoration: 'none',
       },
@@ -36,42 +34,42 @@ export const _selectableRules: Rules = {
 
     '@media': {
       '(hover: hover)': {
-        '@nest': {
+        nest: {
           '&:not([data-disabled])': {
-            // cursor: 'pointer',
+            cursor: 'pointer',
           },
 
           '&:not([data-disabled]):hover': {
-            '--color-bg': vars.color.tinted.bg[1],
-            '--color-border': vars.color.tinted.border[3],
-            '--color-fg': vars.color.tinted.fg[1],
-            '--color-muted-bg': vars.color.tinted.bg[2],
-            '--color-muted-fg': vars.color.tinted.fg[4],
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4],
           },
 
           '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
             {
-              '--color-bg': vars.color.tinted.bg[2],
-              '--color-border': vars.color.tinted.border[4],
-              '--color-fg': vars.color.tinted.fg[0],
-              '--color-muted-bg': vars.color.tinted.bg[3],
-              '--color-muted-fg': vars.color.tinted.fg[4],
+              [varNames.color.bg]: vars.color.tinted.bg[2],
+              [varNames.color.border]: vars.color.tinted.border[4],
+              [varNames.color.fg]: vars.color.tinted.fg[0],
+              [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+              [varNames.color.muted.fg]: vars.color.tinted.fg[4],
             },
 
           '&:not([data-disabled]):focus': {
-            '--color-bg': vars.color.solid.bg[0],
-            '--color-border': vars.color.solid.border[1],
-            '--color-fg': vars.color.solid.fg[1],
-            '--color-muted-bg': vars.color.solid.bg[1],
-            '--color-muted-fg': vars.color.solid.fg[3],
+            [varNames.color.bg]: vars.color.solid.primary.bg[0],
+            [varNames.color.border]: vars.color.solid.primary.border[1],
+            [varNames.color.fg]: vars.color.solid.primary.fg[0],
+            [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+            [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
           },
 
           '&[data-disabled]': {
-            '--color-bg': vars.color.tinted.bg[0],
-            '--color-border': vars.color.tinted.border[1],
-            '--color-fg': vars.color.tinted.border[4],
-            '--color-muted-bg': vars.color.tinted.bg[1],
-            '--color-muted-fg': vars.color.tinted.border[4],
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.color.muted.fg]: vars.color.tinted.border[4],
           },
         },
       },
@@ -79,6 +77,8 @@ export const _selectableRules: Rules = {
   },
 }
 
+export const _selectableStyle: Style = {layers: {primitive}}
+
 function buildSelectableTones(): Record<string, Properties> {
   const rules: Record<string, Properties> = {}
 
@@ -86,7 +86,7 @@ function buildSelectableTones(): Record<string, Properties> {
     const target = varNames.color
     const source = vars.color
 
-    rules[`&.${toneMap[tone]}`] = {
+    rules[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
       [target.tinted.bg[1]]: source.tinted[tone].bg[1],
       [target.tinted.bg[2]]: source.tinted[tone].bg[2],

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

@@ -1,9 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
-import {toneMap} from './_contants'
-import {SelectableStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import {radius} from '../../aspects'
+import type {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return composeClassNames('selectable', toneMap[props.tone ?? 'default'], radius(props))
+  return _composeClassNames(_scopeClassNames('selectable', props.tone ?? 'default'), radius(props))
 }

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

@@ -1,6 +1,6 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles'
+import type {RadiusStyleProps} from '../../aspects'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {

package/src/css/primitives/avatar/{rules.ts → avatar.style.ts}

@@ -1,30 +1,26 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const avatarRules: Rules = {
-  'avatar': {
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
-
-    'width': vars.avatar.size,
-    'height': vars.avatar.size,
-    'borderRadius': vars.avatar.size,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
+import {AVATAR_COLORS, AVATAR_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.avatar': {
+    [varNames.color.fg]: vars.color.avatar.fg,
+
+    backgroundColor: vars.color.avatar.bg,
+    position: 'relative',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    boxShadow: `0 0 0 1px ${vars.color.bg}`,
+    lineHeight: 0,
+
+    width: vars.avatar.size,
+    height: vars.avatar.size,
+    borderRadius: vars.avatar.size,
 
-      // &:is(button)
-      '&:is(button)': {
+    nest: {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         margin: 0,
@@ -35,12 +31,12 @@ export const avatarRules: Rules = {
         outline: 'none',
       },
 
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
+      'button&:focus': {
+        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.avatar.focusRing.offset,
       },
 
-      '&:is(button):focus:not(:focus-visible)': {
+      'button&:focus:not(:focus-visible)': {
         boxShadow: 'none',
       },
 
@@ -49,7 +45,7 @@ export const avatarRules: Rules = {
         [varNames.color.avatar.fg]: vars.color.bg,
       },
 
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
+      ...AVATAR_COLORS.reduce(
         (acc, color) => {
           return {
             ...acc,
@@ -64,29 +60,19 @@ export const avatarRules: Rules = {
     },
   },
 
-  ...(AVATAR_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`avatar-${size}`, {
-        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-        [varNames.avatar.size]: vars.avatar.sizes[size].size,
-      }),
-    }
-  }, {} as Rules) as Rules),
-
-  'avatar-arrow': {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '@nest': {
+  '.avatar-arrow': {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    opacity: 0,
+    transition: 'all 0.2s linear',
+    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+
+    nest: {
       '& > svg': {
         display: 'block',
         width: '11px',
@@ -114,8 +100,8 @@ export const avatarRules: Rules = {
     },
   },
 
-  'avatar-image': {
-    '@nest': {
+  '.avatar-image': {
+    nest: {
       '& > img': {
         display: 'block',
         position: 'absolute',
@@ -142,20 +128,20 @@ export const avatarRules: Rules = {
     },
   },
 
-  'avatar-initials': {
+  '.avatar-initials': {
     color: vars.color.avatar.fg,
     borderRadius: vars.avatar.size,
   },
 
-  'avatar-counter': {
-    'color': vars.color.fg,
-    'backgroundColor': vars.color.bg,
-    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    'userSelect': 'none',
-    'borderRadius': vars.avatar.size,
-    'height': vars.avatar.size,
+  '.avatar-counter': {
+    color: vars.color.fg,
+    backgroundColor: vars.color.bg,
+    boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
+    userSelect: 'none',
+    borderRadius: vars.avatar.size,
+    height: vars.avatar.size,
 
-    '@nest': {
+    nest: {
       '&&': {
         minWidth: vars.avatar.size,
       },
@@ -166,11 +152,20 @@ export const avatarRules: Rules = {
     },
   },
 
-  'avatar-stack': {
-    '@nest': {
+  '.avatar-stack': {
+    nest: {
       '& > div + div': {
         marginLeft: vars.avatar.distance,
       },
     },
   },
 }
+
+for (const size of AVATAR_SIZE) {
+  _responsiveRule(primitive, `avatar-${size}`, {
+    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
+    [varNames.avatar.size]: vars.avatar.sizes[size].size,
+  })
+}
+
+export const avatarStyle: Style = {layers: {primitive}}

package/src/css/primitives/avatar/avatar.ts

@@ -1,27 +1,33 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {AvatarStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {AvatarStyleProps} from './types'
 
+/** @public */
 export function avatar(props: AvatarStyleProps): string | undefined {
-  return composeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
+  return _scopeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
+/** @public */
 export function avatarArrow(): string | undefined {
-  return composeClassNames('avatar-arrow')
+  return _scopeClassNames('avatar-arrow')
 }
 
+/** @public */
 export function avatarInitials(): string | undefined {
-  return composeClassNames('avatar-initials')
+  return _scopeClassNames('avatar-initials')
 }
 
+/** @public */
 export function avatarImage(): string | undefined {
-  return composeClassNames('avatar-image')
+  return _scopeClassNames('avatar-image')
 }
 
+/** @public */
 export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-counter', _resp('avatar', props.size))
+  return _scopeClassNames('avatar-counter', _resp('avatar', props.size))
 }
 
+/** @public */
 export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-stack', _resp('avatar', props.size))
+  return _scopeClassNames('avatar-stack', _resp('avatar', props.size))
 }

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

@@ -1,8 +1,9 @@
-import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {AvatarColor, AvatarSize} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface AvatarStyleProps {
-  color: ThemeColorAvatarColorKey
+  color: AvatarColor
   size: ResponsiveProp<AvatarSize>
 }

package/src/css/primitives/badge/badge.style.ts

@@ -0,0 +1,21 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.badge': {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    verticalAlign: 'top',
+  },
+}
+
+for (const tone of THEME_COLOR_STATE_TONES) {
+  primitive[`.badge-${tone}`] = {
+    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
+    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
+  }
+}
+
+export const badgeStyle: Style = {layers: {primitive}}

package/src/css/primitives/badge/badge.ts

@@ -1,8 +1,12 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
-import {BadgeStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import {radius} from '../../aspects'
+import type {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return composeClassNames('badge', props.tone && `badge-${props.tone}`, radius(props))
+  return _composeClassNames(
+    _scopeClassNames('badge', props.tone && `badge-${props.tone}`),
+    radius(props),
+  )
 }

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

@@ -1,6 +1,6 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles'
+import type {RadiusStyleProps} from '../../aspects'
 
 /** @public */
 export interface BadgeStyleProps extends RadiusStyleProps {

package/src/css/primitives/box/box.style.ts

@@ -0,0 +1,22 @@
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.box': {
+    nest: {
+      'iframe&': {
+        border: 'none',
+      },
+
+      'ul&, ol&': {
+        listStyle: 'none',
+      },
+
+      '&.muted': {
+        backgroundColor: vars.color.muted.bg,
+      },
+    },
+  },
+}
+
+export const boxStyle: Style = {layers: {primitive}}

package/src/css/primitives/box/box.ts

@@ -1,34 +1,38 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {
   border,
+  boxSizing,
   display,
   flex,
   flexItem,
   gap,
   grid,
   gridItem,
+  height,
   inset,
   margin,
   maxWidth,
+  minHeight,
+  minWidth,
   overflow,
   padding,
   pointerEvents,
   position,
   radius,
+  textAlign,
   width,
-} from '../../styles'
-import {BoxStyleProps} from './types'
+} from '../../aspects'
+import type {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return composeClassNames(
-    'box',
-    props.muted && 'muted',
+  return _composeClassNames(
+    _scopeClassNames('box', props.muted && 'muted', props.outline && `outline-${props.outline}`),
     border(props),
+    boxSizing({boxSizing: props.sizing}),
     display(props),
-    _resp(`h`, props.height),
-    _resp(`box`, props.sizing),
+    height(props),
     flex(props),
     flexItem(props),
     grid(props),
@@ -37,12 +41,14 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
-    props.outline && `outline-${props.outline}`,
+    minHeight(props),
+    minWidth(props),
     overflow(props),
     padding(props),
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(props),
   )
 }

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

@@ -1,32 +1,26 @@
-import {
+import type {
   BorderStyleProps,
+  BoxSizingStyleProps,
   DisplayStyleProps,
   FlexItemStyleProps,
   FlexStyleProps,
   GapStyleProps,
   GridItemStyleProps,
   GridStyleProps,
+  HeightStyleProps,
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
+  MinHeightStyleProps,
+  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  TextAlignStyleProps,
   WidthStyleProps,
-} from '../../styles'
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
+} from '../../aspects'
 
 /** @public */
 export interface BoxStyleProps
@@ -37,17 +31,20 @@ export interface BoxStyleProps
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
+    HeightStyleProps,
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinHeightStyleProps,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    TextAlignStyleProps,
     WidthStyleProps {
-  height?: ResponsiveProp<BoxHeight>
   muted?: boolean
   outline?: 'none'
-  sizing?: ResponsiveProp<BoxSizing>
+  sizing?: BoxSizingStyleProps['boxSizing']
 }