@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

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

@@ -0,0 +1,93 @@
+import {THEME_COLOR_AVATAR_COLORS, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {Properties, Rules} from '../../types'
+
+export const cardRules: Rules = {
+  card: {
+    'backgroundColor': 'var(--card-bg-color)',
+    'color': 'var(--card-fg-color)',
+
+    /* deprecated variables (kept for legacy) */
+    '--card-accent-fg-color': 'var(--color-accent-fg)',
+
+    ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
+      return {
+        ...acc,
+        [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
+        [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`,
+      }
+    }, {} as Properties),
+
+    '--card-backdrop-color': 'var(--color-backdrop)',
+
+    ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
+        [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
+        [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
+        [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`,
+      }
+    }, {} as Properties),
+
+    '--card-bg-color': 'var(--color-bg)',
+    '--card-border-color': 'var(--color-border)',
+    '--card-code-bg-color': 'var(--color-code-bg)',
+    '--card-code-fg-color': 'var(--color-code-fg)',
+    '--card-fg-color': 'var(--color-fg)',
+    '--card-focus-ring-color': 'var(--color-focus-ring)',
+
+    '--card-icon-color': 'var(--color-icon)',
+
+    '--card-kbd-bg-color': 'var(--color-kbd-bg)',
+    '--card-kbd-border-color': 'var(--color-kbd-border)',
+    '--card-kbd-fg-color': 'var(--color-kbd-fg)',
+
+    '--card-link-fg-color': 'var(--color-link-fg)',
+
+    '--card-muted-bg-color': 'var(--color-muted-bg)',
+    '--card-muted-fg-color': 'var(--color-muted-fg)',
+
+    '--card-shadow-outline-color': 'var(--color-shadow-outline)',
+    '--card-shadow-umbra-color': 'var(--color-shadow-umbra)',
+    '--card-shadow-penumbra-color': 'var(--color-shadow-penumbra)',
+    '--card-shadow-ambient-color': 'var(--color-shadow-ambient)',
+
+    '--card-skeleton-from-color': 'var(--color-skeleton-from)',
+    '--card-skeleton-to-color': 'var(--color-skeleton-to)',
+
+    /*
+      '--card-bg-image': checkered
+        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
+        : undefined,
+
+      '--card-bg-image': checkered
+        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
+        : undefined,
+
+      '--card-bg2-color': color.muted.bg,
+      '--card-link-color': color.link.fg,
+      '--card-hairline-soft-color': color.border,
+      '--card-hairline-hard-color': color.border, */
+
+    '@nest': {
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        outline: 'none',
+        font: 'inherit',
+        textAlign: 'inherit',
+        border: 0,
+        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+      },
+
+      '&[data-as="a"]': {
+        outline: 'none',
+        textDecoration: 'none',
+      },
+
+      '&[data-as="pre"]': {
+        font: 'inherit',
+      },
+    },
+  },
+}

package/src/{core/primitives/checkbox/styles.ts → css/primitives/checkbox/__styles.ts}

@@ -1,7 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {css} from '../../../core/lib/styled'
+import {rem, ThemeProps} from '../../../core/styles'
+import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
 
 export function checkboxBaseStyles(): ReturnType<typeof css> {
   return css`

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

@@ -0,0 +1,9 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function checkbox(): string {
+  return composeClassNames('checkbox')
+}
+
+export function checkboxInput(): string {
+  return composeClassNames('checkbox-input')
+}

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

@@ -0,0 +1 @@
+export * from './checkbox'

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

@@ -0,0 +1,136 @@
+import {Rules} from '../../types'
+
+export const checkboxRules: Rules = {
+  'checkbox': {
+    position: 'relative',
+    display: 'inline-block',
+  },
+
+  'checkbox-input': {
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'width': '100%',
+    'height': '100%',
+    'outline': 'none',
+    'opacity': 0,
+    'zIndex': 1,
+    'padding': 0,
+    'margin': 0,
+
+    '@nest': {
+      '& + span': {
+        'position': 'relative',
+        'display': 'block',
+        'width': `var(--input-checkbox-size)`,
+        'height': `var(--input-checkbox-size)`,
+        'boxSizing': 'border-box',
+        'borderRadius': `var(--radius-2)`,
+        'lineHeight': 1,
+        'backgroundColor': `var(--color-checkbox-bg)`,
+        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
+        'color': `var(--color-checkbox-fg)`,
+
+        '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
+        '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
+        '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '& + span > svg': {
+        display: 'block',
+        position: 'absolute',
+        opacity: 0,
+        height: '100%',
+        width: '100%',
+      },
+
+      '& + span > svg > path': {
+        vectorEffect: 'non-scaling-stroke',
+        strokeWidth: '1.5px !important',
+      },
+
+      '&:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
+        '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
+        '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.fg,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '&:checked + span > svg:first-child': {
+        opacity: 1,
+      },
+
+      // focus
+      '&:not(:disabled):focus:focus-visible + span': {
+        // box-shadow: ${focusRingStyle({focusRing})},
+      },
+
+      // focus when checked - uses a different offset
+      '&:not(:disabled):focus:focus-visible&:checked + span': {
+        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      },
+
+      '&[data-error] + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
+        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.invalid.enabled.muted.bg,
+        // })},
+      },
+
+      '&[data-error]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
+      },
+
+      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
+        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+        //   focusRing: {width: 1, offset: 1},
+        // })},
+      },
+
+      '&:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-disabled-bg)',
+        '--color-checkbox-border': 'var(--color-input-default-disabled-border)',
+        '--color-checkbox-fg': 'var(--color-input-default-disabled-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.disabled.border,
+        // })},
+      },
+
+      '&:disabled:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      },
+
+      '&[data-read-only] + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
+        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
+        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.readOnly.border,
+        // })},
+      },
+
+      '&[data-read-only]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
+      },
+
+      '&:indeterminate + span > svg:last-child': {
+        opacity: 1,
+      },
+    },
+  },
+}

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

@@ -0,0 +1,9 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {font} from '../../styles/font'
+import {CodeStyleProps} from './types'
+
+/** @public */
+export function code(props: CodeStyleProps): string {
+  return composeClassNames('code', 'block', font(props), _resp(`code`, props.size))
+}

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

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

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

@@ -0,0 +1,71 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const codeRules: Rules = {
+  code: {
+    '--font-weight-regular': `var(--font-code-weight-regular)`,
+    '--font-weight-medium': `var(--font-code-weight-medium)`,
+    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
+    '--font-weight-bold': `var(--font-code-weight-bold)`,
+
+    '--font-family': `var(--font-code-family)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& > code': {
+        font: 'inherit',
+      },
+
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  ...responsiveRules('code-0', {
+    '--font-size': 'var(--font-code-0-size)',
+    '--font-line-height': 'var(--font-code-0-line-height)',
+    '--font-letter-spacing': 'var(--font-code-0-letter-spacing)',
+    '--font-icon-size': 'var(--font-code-0-icon-size)',
+    '--font-ascender-height': 'var(--font-code-0-ascender-height)',
+    '--font-descender-height': 'var(--font-code-0-descender-height)',
+  }),
+
+  ...responsiveRules('code-1', {
+    '--font-size': 'var(--font-code-1-size)',
+    '--font-line-height': 'var(--font-code-1-line-height)',
+    '--font-letter-spacing': 'var(--font-code-1-letter-spacing)',
+    '--font-icon-size': 'var(--font-code-1-icon-size)',
+    '--font-ascender-height': 'var(--font-code-1-ascender-height)',
+    '--font-descender-height': 'var(--font-code-1-descender-height)',
+  }),
+
+  ...responsiveRules('code-2', {
+    '--font-size': 'var(--font-code-2-size)',
+    '--font-line-height': 'var(--font-code-2-line-height)',
+    '--font-letter-spacing': 'var(--font-code-2-letter-spacing)',
+    '--font-icon-size': 'var(--font-code-2-icon-size)',
+    '--font-ascender-height': 'var(--font-code-2-ascender-height)',
+    '--font-descender-height': 'var(--font-code-2-descender-height)',
+  }),
+
+  ...responsiveRules('code-3', {
+    '--font-size': 'var(--font-code-3-size)',
+    '--font-line-height': 'var(--font-code-3-line-height)',
+    '--font-letter-spacing': 'var(--font-code-3-letter-spacing)',
+    '--font-icon-size': 'var(--font-code-3-icon-size)',
+    '--font-ascender-height': 'var(--font-code-3-ascender-height)',
+    '--font-descender-height': 'var(--font-code-3-descender-height)',
+  }),
+
+  ...responsiveRules('code-4', {
+    '--font-size': 'var(--font-code-4-size)',
+    '--font-line-height': 'var(--font-code-4-line-height)',
+    '--font-letter-spacing': 'var(--font-code-4-letter-spacing)',
+    '--font-icon-size': 'var(--font-code-4-icon-size)',
+    '--font-ascender-height': 'var(--font-code-4-ascender-height)',
+    '--font-descender-height': 'var(--font-code-4-descender-height)',
+  }),
+}

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

@@ -0,0 +1,10 @@
+import {FontStyleProps} from '@sanity/ui/css'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export type CodeSize = number
+
+/** @public */
+export interface CodeStyleProps extends FontStyleProps {
+  size?: ResponsiveProp<CodeSize>
+}

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

@@ -0,0 +1,7 @@
+import {composeClassNames} from '../../composeClassNames'
+import {maxWidth} from '../../styles/maxWidth'
+import {ContainerStyleProps} from './types'
+
+export function container(props: ContainerStyleProps): string {
+  return composeClassNames('container', maxWidth({maxWidth: props.width}))
+}

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

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

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

@@ -0,0 +1,8 @@
+import {Rules} from '../../types'
+
+export const containerRules: Rules = {
+  container: {
+    margin: '0 auto',
+    width: '100%',
+  },
+}

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

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

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

@@ -0,0 +1,16 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {font} from '../../styles/font'
+import {HeadingStyleProps} from './types'
+
+/** @public */
+export function heading(props: HeadingStyleProps): string {
+  return composeClassNames(
+    'heading',
+    'block',
+    font(props),
+    props.accent && 'heading-accent',
+    props.muted && 'heading-muted',
+    _resp(`heading`, props.size),
+  )
+}

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

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

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

@@ -0,0 +1,84 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const headingRules: Rules = {
+  'heading': {
+    '--font-weight-regular': `var(--font-heading-weight-regular)`,
+    '--font-weight-medium': `var(--font-heading-weight-medium)`,
+    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
+    '--font-weight-bold': `var(--font-heading-weight-bold)`,
+
+    '--font-family': `var(--font-heading-family)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  'heading-accent': {
+    '--fg-color': 'var(--color-accent-fg)',
+  },
+
+  'heading-muted': {
+    '--fg-color': 'var(--color-muted-fg)',
+  },
+
+  ...responsiveRules('heading-0', {
+    '--font-size': 'var(--font-heading-0-size)',
+    '--font-line-height': 'var(--font-heading-0-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-0-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-0-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-0-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-0-descender-height)',
+  }),
+
+  ...responsiveRules('heading-1', {
+    '--font-size': 'var(--font-heading-1-size)',
+    '--font-line-height': 'var(--font-heading-1-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-1-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-1-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-1-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-1-descender-height)',
+  }),
+
+  ...responsiveRules('heading-2', {
+    '--font-size': 'var(--font-heading-2-size)',
+    '--font-line-height': 'var(--font-heading-2-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-2-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-2-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-2-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-2-descender-height)',
+  }),
+
+  ...responsiveRules('heading-3', {
+    '--font-size': 'var(--font-heading-3-size)',
+    '--font-line-height': 'var(--font-heading-3-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-3-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-3-icon-size)',
+    '--font-ascender-height': 'var(--font-label-3-ascender-height)',
+    '--font-descender-height': 'var(--font-label-3-descender-height)',
+  }),
+
+  ...responsiveRules('heading-4', {
+    '--font-size': 'var(--font-heading-4-size)',
+    '--font-line-height': 'var(--font-heading-4-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-4-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-4-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-4-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-4-descender-height)',
+  }),
+
+  ...responsiveRules('heading-5', {
+    '--font-size': 'var(--font-heading-5-size)',
+    '--font-line-height': 'var(--font-heading-5-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-5-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-5-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-5-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-5-descender-height)',
+  }),
+}

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

@@ -0,0 +1,12 @@
+import {FontStyleProps} from '@sanity/ui/css'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export type HeadingSize = number
+
+/** @public */
+export interface HeadingStyleProps extends FontStyleProps {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<HeadingSize>
+}

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

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

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

@@ -0,0 +1,7 @@
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles/radius'
+import {KBDStyleProps} from './types'
+
+export function kbd(props: KBDStyleProps): string {
+  return composeClassNames('kbd', radius(props))
+}

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

@@ -0,0 +1,20 @@
+import {Rules} from '../../types'
+
+export const kbdRules: Rules = {
+  kbd: {
+    '--card-bg-color': 'var(--card-kbd-bg-color)',
+    '--card-border-color': 'var(--card-kbd-border-color)',
+    '--card-fg-color': 'var(--card-kbd-fg-color)',
+
+    'boxShadow': 'inset 0 0 0 1px var(--card-border-color)',
+    'background': 'var(--card-bg-color)',
+    'font': 'inherit',
+    'verticalAlign': 'top',
+
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,5 @@
+import {RadiusStyleProps} from '../../styles/radius'
+
+export interface KBDStyleProps extends RadiusStyleProps {
+  //
+}

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

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

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

@@ -0,0 +1,16 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {font} from '../../styles/font'
+import {LabelStyleProps} from './types'
+
+/** @public */
+export function label(props: LabelStyleProps): string {
+  return composeClassNames(
+    'label',
+    'block',
+    font(props),
+    props.accent && 'label-accent',
+    props.muted && 'label-muted',
+    _resp(`label`, props.size),
+  )
+}

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

@@ -0,0 +1,85 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const labelRules: Rules = {
+  'label': {
+    '--font-weight-regular': `var(--font-label-weight-regular)`,
+    '--font-weight-medium': `var(--font-label-weight-medium)`,
+    '--font-weight-semibold': `var(--font-label-weight-semibold)`,
+    '--font-weight-bold': `var(--font-label-weight-bold)`,
+
+    '--font-family': `var(--font-label-family)`,
+
+    'color': 'var(--color-fg)',
+    'textTransform': 'uppercase',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  'label-accent': {
+    '--fg-color': 'var(--color-accent-fg)',
+  },
+
+  'label-muted': {
+    '--fg-color': 'var(--color-muted-fg)',
+  },
+
+  ...responsiveRules('label-0', {
+    '--font-size': 'var(--font-label-0-size)',
+    '--font-line-height': 'var(--font-label-0-line-height)',
+    '--font-letter-spacing': 'var(--font-label-0-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-0-icon-size)',
+    '--font-ascender-height': 'var(--font-label-0-ascender-height)',
+    '--font-descender-height': 'var(--font-label-0-descender-height)',
+  }),
+
+  ...responsiveRules('label-1', {
+    '--font-size': 'var(--font-label-1-size)',
+    '--font-line-height': 'var(--font-label-1-line-height)',
+    '--font-letter-spacing': 'var(--font-label-1-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-1-icon-size)',
+    '--font-ascender-height': 'var(--font-label-1-ascender-height)',
+    '--font-descender-height': 'var(--font-label-1-descender-height)',
+  }),
+
+  ...responsiveRules('label-2', {
+    '--font-size': 'var(--font-label-2-size)',
+    '--font-line-height': 'var(--font-label-2-line-height)',
+    '--font-letter-spacing': 'var(--font-label-2-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-2-icon-size)',
+    '--font-ascender-height': 'var(--font-label-2-ascender-height)',
+    '--font-descender-height': 'var(--font-label-2-descender-height)',
+  }),
+
+  ...responsiveRules('label-3', {
+    '--font-size': 'var(--font-label-3-size)',
+    '--font-line-height': 'var(--font-label-3-line-height)',
+    '--font-letter-spacing': 'var(--font-label-3-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-3-icon-size)',
+    '--font-ascender-height': 'var(--font-label-3-ascender-height)',
+    '--font-descender-height': 'var(--font-label-3-descender-height)',
+  }),
+
+  ...responsiveRules('label-4', {
+    '--font-size': 'var(--font-label-4-size)',
+    '--font-line-height': 'var(--font-label-4-line-height)',
+    '--font-letter-spacing': 'var(--font-label-4-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-4-icon-size)',
+    '--font-ascender-height': 'var(--font-label-4-ascender-height)',
+    '--font-descender-height': 'var(--font-label-4-descender-height)',
+  }),
+
+  ...responsiveRules('label-5', {
+    '--font-size': 'var(--font-label-5-size)',
+    '--font-line-height': 'var(--font-label-5-line-height)',
+    '--font-letter-spacing': 'var(--font-label-5-letter-spacing)',
+    '--font-icon-size': 'var(--font-label-5-icon-size)',
+    '--font-ascender-height': 'var(--font-label-5-ascender-height)',
+    '--font-descender-height': 'var(--font-label-5-descender-height)',
+  }),
+}

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

@@ -0,0 +1,12 @@
+import {FontStyleProps} from '@sanity/ui/css'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export type LabelSize = number
+
+/** @public */
+export interface LabelStyleProps extends FontStyleProps {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<LabelSize>
+}