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

package/src/css/system.style.ts

@@ -0,0 +1,154 @@
+import {_mergeStyles} from './_mergeStyles'
+import {borderStyle} from './aspects/border/border.style'
+import {displayStyle} from './aspects/display/display.style'
+import {flexAlignStyle} from './aspects/flex/flexAlign.style'
+import {flexDirectionStyle} from './aspects/flex/flexDirection.style'
+import {flexJustifyStyle} from './aspects/flex/flexJustify.style'
+import {flexWrapStyle} from './aspects/flex/flexWrap.style'
+import {flexStyle} from './aspects/flexItem/flex.style'
+import {fontStyle} from './aspects/font/font.style'
+import {gapStyle} from './aspects/gap/gap.style'
+import {gridAutoColumnsStyle} from './aspects/grid/gridAutoColumns.style'
+import {gridAutoFlowStyle} from './aspects/grid/gridAutoFlow.style'
+import {gridAutoRowsStyle} from './aspects/grid/gridAutoRows.style'
+import {gridColumnsStyle} from './aspects/grid/gridColumns.style'
+import {gridRowsStyle} from './aspects/grid/gridRows.style'
+import {gridColumnStyle} from './aspects/gridItem/gridColumn.style'
+import {gridColumnEndStyle} from './aspects/gridItem/gridColumnEnd.style'
+import {gridColumnStartStyle} from './aspects/gridItem/gridColumnStart.style'
+import {gridRowStyle} from './aspects/gridItem/gridRow.style'
+import {gridRowEndStyle} from './aspects/gridItem/gridRowEnd.style'
+import {gridRowStartStyle} from './aspects/gridItem/gridRowStart.style'
+import {heightStyle} from './aspects/height/height.style'
+import {insetStyle} from './aspects/inset/inset.style'
+import {marginStyle} from './aspects/margin/margin.style'
+import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
+import {outlineStyle} from './aspects/outline/outline.style'
+import {overflowStyle} from './aspects/overflow/overflow.style'
+import {paddingStyle} from './aspects/padding/padding.style'
+import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
+import {positionStyle} from './aspects/position/position.style'
+import {radiusStyle} from './aspects/radius/radius.style'
+import {shadowStyle} from './aspects/shadow/shadow.style'
+import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
+import {widthStyle} from './aspects/width/width.style'
+import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
+import {dialogStyle} from './components/dialog/dialog.style'
+import {menuStyle} from './components/menu/menu.style'
+import {skeletonStyle} from './components/skeleton/skeleton.style'
+import {toastStyle} from './components/toast/toast.style'
+import {treeStyle} from './components/tree/tree.style'
+import {_arrowStyle} from './primitives/_arrow/_arrow.style'
+import {_inputStyle} from './primitives/_input/_input.style'
+import {_selectableStyle} from './primitives/_selectable/_selectable.style'
+import {avatarStyle} from './primitives/avatar/avatar.style'
+import {badgeStyle} from './primitives/badge/badge.style'
+import {boxStyle} from './primitives/box/box.style'
+import {buttonStyle} from './primitives/button/button.style'
+import {cardStyle} from './primitives/card/card.style'
+import {checkboxStyle} from './primitives/checkbox/checkbox.style'
+import {codeStyle} from './primitives/code/code.style'
+import {containerStyle} from './primitives/container/container.style'
+import {headingStyle} from './primitives/heading/heading.style'
+import {kbdStyle} from './primitives/kbd/kbd.style'
+import {labelStyle} from './primitives/label/label.style'
+import {popoverStyle} from './primitives/popover/popover.style'
+import {radioStyle} from './primitives/radio/radio.style'
+import {selectStyle} from './primitives/select/select.style'
+import {spinnerStyle} from './primitives/spinner/spinner.style'
+import {switchStyle} from './primitives/switch/switch.style'
+import {textStyle} from './primitives/text/text.style'
+import {textAreaStyle} from './primitives/textArea/textArea.style'
+import {textInputStyle} from './primitives/textInput/textInput.style'
+import {tokenStyle} from './primitives/token/token.style'
+import {tooltipStyle} from './primitives/tooltip/tooltip.style'
+import {type Style} from './types'
+import {srOnlyStyle} from './utils/srOnly/srOnly.style'
+
+export const systemStyle: Style = _mergeStyles([
+  // NOTE: order matters in CSS
+
+  {
+    // define order of layers
+    layers: {
+      theme: {},
+      base: {},
+      util: {},
+      primitive: {},
+    },
+  },
+
+  // aspects
+  borderStyle,
+  displayStyle,
+  flexStyle,
+  flexAlignStyle,
+  flexDirectionStyle,
+  flexJustifyStyle,
+  flexWrapStyle,
+  fontStyle,
+  gapStyle,
+  gridAutoColumnsStyle,
+  gridAutoFlowStyle,
+  gridAutoRowsStyle,
+  gridColumnsStyle,
+  gridRowsStyle,
+  gridColumnStyle,
+  gridColumnStartStyle,
+  gridColumnEndStyle,
+  gridRowStyle,
+  gridRowStartStyle,
+  gridRowEndStyle,
+  heightStyle,
+  insetStyle,
+  marginStyle,
+  maxWidthStyle,
+  outlineStyle,
+  overflowStyle,
+  paddingStyle,
+  pointerEventsStyle,
+  positionStyle,
+  radiusStyle,
+  shadowStyle,
+  textOverflowStyle,
+  widthStyle,
+
+  // utils
+  srOnlyStyle,
+
+  // primitives
+  _arrowStyle,
+  _inputStyle,
+  _selectableStyle,
+  avatarStyle,
+  badgeStyle,
+  boxStyle,
+  buttonStyle,
+  cardStyle,
+  checkboxStyle,
+  codeStyle,
+  containerStyle,
+  headingStyle,
+  kbdStyle,
+  labelStyle,
+  maxWidthStyle,
+  popoverStyle,
+  radioStyle,
+  selectStyle,
+  spinnerStyle,
+  switchStyle,
+  textAreaStyle,
+  textInputStyle,
+  textOverflowStyle,
+  textStyle,
+  tokenStyle,
+  tooltipStyle,
+
+  // components
+  breadcrumbsStyle,
+  dialogStyle,
+  menuStyle,
+  skeletonStyle,
+  toastStyle,
+  treeStyle,
+])

package/src/css/types.ts

@@ -366,6 +366,8 @@ export type LegacyCardScopedVarName =
 export type ElementColorVariantScopedVarName =
   `--color-${ElementColorVariant}-${ElementColorVariantKey}`
 
+export type ButtonScopedVarName = '--button-box-shadow'
+
 /** @public */
 export type InputScopedVarName =
   | `--color-input-bg`
@@ -389,65 +391,104 @@ export type SwitchScopedVarName =
   | '--switch-thumb-size'
 
 /** @public */
-export type CSSVarName =
+export type VarName =
   | AvatarScopedVarName
   | LegacyCardScopedVarName
   | PaletteVarName
   | ThemeVarName
   | ColorCardVarName
+  // scoped var names
+  | ButtonScopedVarName
   | ColorCardToneScopedVarName
   | CardScopedVarName
   | ElementColorVariantScopedVarName
   | InputScopedVarName
   | SwitchScopedVarName
 
+/** @public */
+export type PropertiesWithVars = CSS.Properties &
+  Partial<Record<VarName, string>> & {
+    _prefix?: boolean
+  }
+
+/** @public */
+export type PropertiesWithVarsAndNested = PropertiesWithVars & {
+  '@nest'?: Record<string, PropertiesWithVars>
+}
+
+/** @public */
+export type Properties = PropertiesWithVarsAndNested & {
+  '@media'?: Record<string, PropertiesWithVarsAndNested>
+}
+
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface CustomCSSProperties extends Record<CSSVarName, string> {}
+export interface CustomCSSProperties extends Record<VarName, string> {}
 
 /** @public */
-export interface Properties extends CSS.PropertiesFallback, Partial<CustomCSSProperties> {
-  '@keyframes'?: Record<string, Record<string, Properties>>
-  '@media'?: Record<string, Properties>
-  '@nest'?: Record<string, Properties>
+export type StyleSelector = `.${string}` | `#${string}` | `:root`
+
+/** @public */
+export type StyleRules = Partial<Record<StyleSelector, Properties>>
+
+/** @public */
+export type StyleKeyframes = Record<string, Record<string, Properties>>
+
+/** @public */
+export type StyleLayers = Record<string, StyleRules>
+
+/** @public */
+export type Style = {
+  // todo
+  // containers?: StyleContainers
+  keyframes?: StyleKeyframes
+  layers?: StyleLayers
+  rules?: StyleRules
 }
 
+// /** @public */
+// export interface Properties extends CSS.PropertiesFallback, Partial<CustomCSSProperties> {
+//   '@keyframes'?: Record<string, Record<string, Properties>>
+//   '@media'?: Record<string, Properties>
+//   '@nest'?: Record<string, Properties>
+// }
+
 /** @public */
 export interface Rules {
   [className: string]: Properties
 }
 
 /** @public */
-export type CSSVar = `var(${CSSVarName})`
+export type CSSVar = `var(${VarName})`
 
 /** @public */
 export interface ColorAvatarColorVarNames {
-  bg: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  fg: VarName
 }
 
 /** @public */
 export interface ColorElementVarNames {
   bg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
   border: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
   fg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
 }
 
@@ -458,65 +499,65 @@ export interface ColorVariantVarNames
 /** @public */
 export interface ColorCardVarNames {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames>
-  backdrop: CSSVarName
-  focusRing: CSSVarName
+  backdrop: VarName
+  focusRing: VarName
   link: {
-    fg: CSSVarName
+    fg: VarName
   }
   muted: {
-    bg: CSSVarName
-    fg: CSSVarName
+    bg: VarName
+    fg: VarName
   }
   shadow: {
-    outline: CSSVarName
-    umbra: CSSVarName
-    penumbra: CSSVarName
-    ambient: CSSVarName
+    outline: VarName
+    umbra: VarName
+    penumbra: VarName
+    ambient: VarName
   }
   skeleton: {
-    from: CSSVarName
-    to: CSSVarName
+    from: VarName
+    to: VarName
   }
   token: {
-    atrule: CSSVarName
-    attrName: CSSVarName
-    attrValue: CSSVarName
-    attribute: CSSVarName
-    boolean: CSSVarName
-    builtin: CSSVarName
-    cdata: CSSVarName
-    char: CSSVarName
-    class: CSSVarName
-    className: CSSVarName
-    comment: CSSVarName
-    constant: CSSVarName
-    deleted: CSSVarName
-    doctype: CSSVarName
-    entity: CSSVarName
-    function: CSSVarName
-    hexcode: CSSVarName
-    id: CSSVarName
-    important: CSSVarName
-    inserted: CSSVarName
-    keyword: CSSVarName
-    number: CSSVarName
-    operator: CSSVarName
-    prolog: CSSVarName
-    property: CSSVarName
-    pseudoClass: CSSVarName
-    pseudoElement: CSSVarName
-    punctuation: CSSVarName
-    regex: CSSVarName
-    selector: CSSVarName
-    string: CSSVarName
-    symbol: CSSVarName
-    tag: CSSVarName
-    unit: CSSVarName
-    url: CSSVarName
-    variable: CSSVarName
+    atrule: VarName
+    attrName: VarName
+    attrValue: VarName
+    attribute: VarName
+    boolean: VarName
+    builtin: VarName
+    cdata: VarName
+    char: VarName
+    class: VarName
+    className: VarName
+    comment: VarName
+    constant: VarName
+    deleted: VarName
+    doctype: VarName
+    entity: VarName
+    function: VarName
+    hexcode: VarName
+    id: VarName
+    important: VarName
+    inserted: VarName
+    keyword: VarName
+    number: VarName
+    operator: VarName
+    prolog: VarName
+    property: VarName
+    pseudoClass: VarName
+    pseudoElement: VarName
+    punctuation: VarName
+    regex: VarName
+    selector: VarName
+    string: VarName
+    symbol: VarName
+    tag: VarName
+    unit: VarName
+    url: VarName
+    variable: VarName
   }
   // variant: {
   solid: ColorVariantVarNames
@@ -529,32 +570,32 @@ export type ColorSchemeVarNames = Record<CardTone, ColorCardVarNames>
 
 export interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
-  bg: CSSVarName
-  border: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  border: VarName
+  fg: VarName
   input: {
-    bg: CSSVarName
-    border: CSSVarName
-    fg: CSSVarName
-    placeholder: CSSVarName
+    bg: VarName
+    border: VarName
+    fg: VarName
+    placeholder: VarName
   }
 }
 
 /** @public */
 export interface FontSizeVarNames {
-  ascenderHeight: CSSVarName
-  descenderHeight: CSSVarName
-  fontSize: CSSVarName
-  lineHeight: CSSVarName
-  letterSpacing: CSSVarName
-  iconSize: CSSVarName
+  ascenderHeight: VarName
+  descenderHeight: VarName
+  fontSize: VarName
+  lineHeight: VarName
+  letterSpacing: VarName
+  iconSize: VarName
 }
 
 export interface FontVarNames<Size extends number> {
-  family: CSSVarName
+  family: VarName
   sizes: Record<Size, FontSizeVarNames>
 }
 
@@ -563,14 +604,15 @@ export interface VarNames {
   color: Record<Scheme, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
+  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
-    distance: CSSVarName
+    distance: VarName
     focusRing: {
-      offset: CSSVarName
-      width: CSSVarName
+      offset: VarName
+      width: VarName
     }
-    size: CSSVarName
-    sizes: Record<AvatarSize, {distance: CSSVarName; size: CSSVarName}>
+    size: VarName
+    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
   }
   font: {
     code: FontVarNames<FontCodeSize>
@@ -579,17 +621,17 @@ export interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
-    fontSize: CSSVarName
-    lineHeight: CSSVarName
-    letterSpacing: CSSVarName
-    ascenderHeight: CSSVarName
-    descenderHeight: CSSVarName
+    fontSize: VarName
+    lineHeight: VarName
+    letterSpacing: VarName
+    ascenderHeight: VarName
+    descenderHeight: VarName
     // capHeight: CSSVarName
-
-    gap: CSSVarName
-    padding: CSSVarName
+    gap: VarName
+    padding: VarName
   }
-  space: Record<Space, CSSVarName>
+  radius: Record<Radius, VarName>
+  space: Record<Space, VarName>
 }
 
 /** @public */
@@ -766,6 +808,7 @@ export interface Vars {
     light: ColorSchemeVars
   } & ScopedColorVars &
     Record<CardTone, ColorCardVars>
+  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
@@ -790,5 +833,6 @@ export interface Vars {
       }
     }
   }
+  radius: Record<Radius, CSSVar>
   space: Record<Space, CSSVar>
 }

package/src/css/utils/srOnly/srOnly.style.ts

@@ -0,0 +1,14 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.sr-only': {
+    display: 'block',
+    width: 0,
+    height: 0,
+    position: 'absolute',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+}
+
+export const srOnlyStyle: Style = {layers: {primitive}}

package/src/css/varNames.ts

@@ -9,6 +9,8 @@ import {
   type FontHeadingSize,
   type FontLabelSize,
   type FontTextSize,
+  RADIUS,
+  Radius,
   SPACE,
   type Space,
   THEME_COLOR_STATE_TONES,
@@ -19,8 +21,8 @@ import {
 import {
   type ColorCardVarNames,
   type ColorVariantVarNames,
-  type CSSVarName,
   type FontSizeVarNames,
+  type VarName,
   type VarNames,
 } from './types'
 
@@ -39,10 +41,10 @@ export const varNames: VarNames = {
           [size]: {
             distance: `--avatar-${size}-distance`,
             size: `--avatar-${size}-size`,
-          } satisfies {distance: CSSVarName; size: CSSVarName},
+          } satisfies {distance: VarName; size: VarName},
         }
       },
-      {} as Record<AvatarSize, {distance: CSSVarName; size: CSSVarName}>,
+      {} as Record<AvatarSize, {distance: VarName; size: VarName}>,
     ),
   },
   color: {
@@ -193,6 +195,14 @@ export const varNames: VarNames = {
       critical: buildColorCardVarNames({scheme: 'light', tone: 'critical'}),
     },
   },
+  container: {
+    0: `--container-0`,
+    1: `--container-1`,
+    2: `--container-2`,
+    3: `--container-3`,
+    4: `--container-4`,
+    5: `--container-5`,
+  },
   font: {
     code: {
       family: `--font-code-family`,
@@ -282,9 +292,12 @@ export const varNames: VarNames = {
     gap: `--input-gap`,
     padding: `--input-padding`,
   },
+  radius: Object.fromEntries(
+    RADIUS.map((radius) => [radius, `--radius-${radius}` as VarName]),
+  ) as Record<Radius, VarName>,
   space: Object.fromEntries(
-    SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as CSSVarName]),
-  ) as Record<Space, CSSVarName>,
+    SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as VarName]),
+  ) as Record<Space, VarName>,
 } as const
 
 function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): ColorCardVarNames {

package/src/css/vars.ts

@@ -9,6 +9,8 @@ import {
   type FontHeadingSize,
   type FontLabelSize,
   type FontTextSize,
+  RADIUS,
+  Radius,
   SPACE,
   type Space,
   THEME_COLOR_AVATAR_COLORS,
@@ -184,6 +186,14 @@ export const vars: Vars = {
     ),
   },
   color: colorVars,
+  container: {
+    0: `var(${varNames.container[0]})`,
+    1: `var(${varNames.container[1]})`,
+    2: `var(${varNames.container[2]})`,
+    3: `var(${varNames.container[3]})`,
+    4: `var(${varNames.container[4]})`,
+    5: `var(${varNames.container[5]})`,
+  },
   font: {
     code: {
       family: `var(${varNames.font.code.family})`,
@@ -280,6 +290,9 @@ export const vars: Vars = {
       },
     },
   },
+  radius: Object.fromEntries(
+    RADIUS.map((radius) => [radius, `var(${varNames.radius[radius]})` as const]),
+  ) as Record<Radius, CSSVar>,
   space: Object.fromEntries(
     SPACE.map((space) => [space, `var(${varNames.space[space]})` as const]),
   ) as Record<Space, CSSVar>,

package/src/theme/_constants.ts

@@ -2,7 +2,7 @@
 export const AVATAR_SIZE = [0, 1, 2, 3] as const
 
 /** @public */
-export const CONTAINER = [0, 1, 2, 3, 4, 5] as const
+export const CONTAINER = [0, 1, 2, 3, 4, 5, 'auto'] as const
 
 /** @public */
 export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const

package/src/theme/_types.ts

@@ -14,10 +14,10 @@ import {
 export type AvatarSize = (typeof AVATAR_SIZE)[number]
 
 /** @public */
-export type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
+export type ContainerWidth = (typeof CONTAINER)[number]
 
 /** @public */
-export type Radius = (typeof RADIUS)[number] | 'full'
+export type Radius = (typeof RADIUS)[number] // | 'full'
 
 /** @public */
 export type Space = (typeof SPACE)[number]

package/src/theme/build/buildTheme.ts

@@ -1,12 +1,12 @@
 import {type ThemeConfig} from '../config'
 import {type RootTheme} from '../types'
-import {buildTheme_v3, type Theme_v3} from '../v3'
+import {buildTheme_v3} from '../v3'
 import {v2_v0} from '../versioning/v2_v0'
 import {v3_v2} from '../versioning/v3_v2'
 
 /** @internal */
 export function buildTheme(_config?: ThemeConfig): RootTheme {
-  const v3: Theme_v3 = buildTheme_v3({v2: _config})
+  const v3 = buildTheme_v3({v2: _config})
 
   return v2_v0(v3_v2(v3), v3)
 }

package/src/theme/defaults/colorTokens.ts

@@ -368,12 +368,12 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['50', '950'],
+          bg: ['50', '900'],
           fg: ['800', '200'],
           icon: ['800 70%', '300 70%'],
         },
         'pressed': {
-          bg: ['100', '900'],
+          bg: ['100', '800'],
           fg: ['800', '200'],
           icon: ['800 70%', '200 70%'],
         },