@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/css/components/toast/toast.ts

@@ -1,21 +1,26 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function toastLayer() {
   return _comp('toast-layer')
 }
 
+/** @public */
 export function toast() {
   return _comp('toast')
 }
 
+/** @public */
 export function toastLoadingBar() {
   return _comp('toast-loading-bar')
 }
 
+/** @public */
 export function toastLoadingBarProgress() {
   return _comp('toast-loading-bar-progress')
 }
 
+/** @public */
 export function toastLoadingBarMask() {
   return _comp('toast-loading-bar-mask')
 }

package/src/css/components/tree/tree.ts

@@ -1,5 +1,6 @@
 import {_comp} from '../../_comp'
 
+/** @beta */
 export function treeItem(): string | undefined {
   return _comp('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,4 +1,5 @@
-export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
   return classNames
     .map((n) => typeof n === 'string' && n.trim())
     .filter(Boolean)
@@ -6,10 +7,11 @@ export function getClassNames(...classNames: Array<string | false | undefined>):
     .split(' ')
 }
 
+/** @public */
 export function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined {
-  return unique(getClassNames(...classNames)).join(' ') || undefined
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
 }
 
 function unique<T>(array: T[]): T[] {

package/src/css/constants.ts

@@ -1 +1,12 @@
+/** @public */
+export const BREAKPOINTS = {
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400,
+}
+
+/** @public */
 export const PREFIX = 's-'

package/src/css/index.ts

@@ -1,7 +1,7 @@
 export * from './aspects'
-export * from './compile/compilePalette'
-export * from './compile/compileSystem'
-export * from './compile/compileTheme'
+export * from './compilePalette'
+export * from './compileSystem'
+export * from './compileTheme'
 export * from './components/breadcrumbs'
 export * from './components/dialog'
 export * from './components/menu'
@@ -9,6 +9,7 @@ export * from './components/skeleton'
 export * from './components/toast'
 export * from './components/tree'
 export * from './composeClassNames'
+export * from './constants'
 export * from './primitives/_arrow'
 export * from './primitives/_input'
 export * from './primitives/_selectable'

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

@@ -20,49 +20,47 @@ const primitive: StyleRules = {
       },
 
       // top
-
       '[data-placement^="top"] > &': {
         bottom: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="top"] > & svg': {
         transform: 'rotate(0deg)',
       },
 
       // right
-
       '[data-placement^="right"] > &': {
         left: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="right"] > & svg': {
         transform: 'rotate(90deg)',
       },
 
       // left
-
       '[data-placement^="left"] > &': {
         right: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="left"] > & svg': {
         transform: 'rotate(-90deg)',
       },
 
       // bottom
-
       '[data-placement^="bottom"] > &': {
         top: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="bottom"] > & svg': {
         transform: 'rotate(180deg)',
       },
     },
   },
 
+  '.arrow-stroke-mask': {
+    // @ts-expect-error `y` is not a valid property in 'csstype'
+    y: vars.shadow.outline,
+  },
+
   '.arrow-stroke': {
     stroke: vars.color.shadow.outline,
+    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
   },
 
   '.arrow-shape': {

package/src/css/primitives/_arrow/_arrow.ts

@@ -5,10 +5,17 @@ export function _arrow(): string | undefined {
   return _comp('arrow')
 }
 
+/** @internal */
 export function _arrowStroke(): string | undefined {
   return _comp('arrow-stroke')
 }
 
+/** @internal */
+export function _arrowStrokeMask(): string | undefined {
+  return _comp('arrow-stroke-mask')
+}
+
+/** @internal */
 export function _arrowShape(): string | undefined {
   return _comp('arrow-shape')
 }

package/src/css/primitives/_input/input.ts

@@ -16,10 +16,12 @@ export function _input(props: InputStyleProps): string | undefined {
   )
 }
 
+/** @internal */
 export function _inputElement(): string | undefined {
   return _comp('input-element')
 }
 
+/** @internal */
 export function _inputPresentation(): string | undefined {
   return _comp('input-presentation')
 }

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

@@ -3,16 +3,15 @@ import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {Properties, Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
-import {toneMap} from './_contants'
 
 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)': {
@@ -43,36 +42,36 @@ const primitive: StyleRules = {
           },
 
           '&: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],
           },
         },
       },
@@ -89,7 +88,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,8 @@
 import {_comp} from '../../_comp'
 import {radius} from '../../aspects'
-import {toneMap} from './_contants'
 import {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _comp('selectable', toneMap[props.tone ?? 'default'], radius(props))
+  return _comp('selectable', props.tone ?? 'default', radius(props))
 }

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

@@ -7,6 +7,8 @@ import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.avatar': {
+    [varNames.color.fg]: vars.color.avatar.fg,
+
     'backgroundColor': vars.color.avatar.bg,
     'position': 'relative',
     'boxSizing': 'border-box',
@@ -19,12 +21,7 @@ const primitive: StyleRules = {
     'borderRadius': vars.avatar.size,
 
     '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         margin: 0,
@@ -35,12 +32,12 @@ const primitive: StyleRules = {
         outline: 'none',
       },
 
-      '&:is(button):focus': {
+      'button&:focus': {
         outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
         outlineOffset: 'var(--avatar-focus-ring-offset)',
       },
 
-      '&:is(button):focus:not(:focus-visible)': {
+      'button&:focus:not(:focus-visible)': {
         boxShadow: 'none',
       },
 

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

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

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

@@ -2,6 +2,7 @@ import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface AvatarStyleProps {
   color: ThemeColorAvatarColorKey
   size: ResponsiveProp<AvatarSize>

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

@@ -20,9 +20,7 @@ import {
 } from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type BoxSizing = 'content' | 'border'
 
 /** @public */

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

@@ -96,11 +96,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
       },
     },
   }
@@ -143,11 +154,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
       },
     },
   }
@@ -188,11 +210,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
       },
     },
   }

package/src/css/primitives/button/button.ts

@@ -1,27 +1,9 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
 import {_comp} from '../../_comp'
-import {
-  display,
-  DisplayStyleProps,
-  flexItem,
-  FlexItemStyleProps,
-  radius,
-  RadiusStyleProps,
-  width,
-  WidthStyleProps,
-} from '../../aspects'
+import {display, flexItem, radius, width} from '../../aspects'
 import {toneMap, variantMap} from './_constants'
+import {ButtonStyleProps} from './types'
 
-export interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexItemStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
-}
-
+/** @public */
 export function button(props: ButtonStyleProps): string | undefined {
   const {mode, tone} = props
 
@@ -36,6 +18,7 @@ export function button(props: ButtonStyleProps): string | undefined {
   )
 }
 
+/** @public */
 export function buttonLoadingBox(): string | undefined {
   return 'button-loading-box'
 }

package/src/css/primitives/button/index.ts

@@ -1 +1,2 @@
 export * from './button'
+export * from './types'

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

@@ -0,0 +1,18 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+import {
+  DisplayStyleProps,
+  FlexItemStyleProps,
+  RadiusStyleProps,
+  WidthStyleProps,
+} from '../../aspects'
+
+/** @public */
+export interface ButtonStyleProps
+  extends DisplayStyleProps,
+    FlexItemStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {
+  mode?: ThemeColorButtonModeKey
+  tone?: ThemeColorStateToneKey
+}

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

@@ -8,7 +8,6 @@ import {
 import {ColorCardVarNames, ColorCardVars, Properties, Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
-import {toneMap} from './_constants'
 
 const primitive: StyleRules = {
   '.card': {
@@ -96,7 +95,7 @@ const primitive: StyleRules = {
       //   '--color-muted-fg': vars.color.solid.fg[3],
       // },
 
-      'a&[data-disabled]), button&[data-disabled]': {
+      'a&[data-disabled], button&[data-disabled]': {
         [varNames.color.bg]: vars.color.tinted.default.bg[2],
         [varNames.color.border]: vars.color.tinted.default.border[4],
         [varNames.color.fg]: vars.color.tinted.default.fg[0],
@@ -165,11 +164,13 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     '--card-shadow-umbra-color': vars.color.shadow.umbra,
     '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
     '--card-shadow-ambient-color': vars.color.shadow.ambient,
+
+    // todo
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
   })
 
-  primitive[`.card.${toneMap[tone]}`] = toneProps
+  primitive[`.card.${tone}`] = toneProps
 }
 
 export const cardStyle: Style = {layers: {primitive}}
@@ -179,10 +180,6 @@ function _assignToneProps(
   _varNames: ColorCardVarNames,
   _vars: ColorCardVars,
 ) {
-  Object.assign(toneProps, {
-    [_varNames.accent.fg]: _vars.accent.fg,
-  })
-
   for (const hue of THEME_COLOR_AVATAR_COLORS) {
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg
     toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg

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

@@ -1,12 +1,12 @@
 import {_comp} from '../../_comp'
 import {shadow} from '../../aspects'
-import {toneMap} from './_constants'
 import {CardStyleProps} from './types'
 
+/** @public */
 export function card(props: CardStyleProps): string | undefined {
   return _comp(
     props.scheme,
-    toneMap[props.tone ?? 'default'],
+    props.tone ?? 'default',
     'card',
     props.checkered && 'card-checkered',
     shadow(props),

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

@@ -1,9 +1,9 @@
 import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
 import {ShadowStyleProps} from '../../aspects'
-import {BoxStyleProps} from '../box'
 
-export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
+/** @public */
+export interface CardStyleProps extends ShadowStyleProps {
   checkered?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'

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

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function checkbox(): string | undefined {
   return _comp('checkbox')
 }
 
+/** @public */
 export function checkboxInput(): string | undefined {
   return _comp('checkbox-input')
 }

package/src/css/primitives/container/container.ts

@@ -2,6 +2,7 @@ import {_comp} from '../../_comp'
 import {maxWidth} from '../../aspects'
 import {ContainerStyleProps} from './types'
 
+/** @public */
 export function container(props: ContainerStyleProps): string | undefined {
   return _comp('container', maxWidth({maxWidth: props.width}))
 }

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

@@ -2,6 +2,7 @@ import {ContainerWidth} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }

package/src/css/primitives/kbd/kbd.ts

@@ -2,6 +2,7 @@ import {_comp} from '../../_comp'
 import {radius} from '../../aspects'
 import {KBDStyleProps} from './types'
 
+/** @public */
 export function kbd(props: KBDStyleProps): string | undefined {
   return _comp('kbd', radius(props))
 }

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

@@ -1,12 +1,17 @@
+import {FontLabelSize} from '@sanity/ui/theme'
+
 import {FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
-/** @public */
+/**
+ * @public
+ * @deprecated Use `FontLabelSize` from `@sanity/ui/theme` instead
+ */
 export type LabelSize = number
 
 /** @public */
 export interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
   muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+  size?: ResponsiveProp<FontLabelSize>
 }