@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

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.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': {
@@ -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>
 }

package/src/css/primitives/popover/popover.ts

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

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

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

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

@@ -3,10 +3,12 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input, _inputPresentation} from '../_input'
 import {SelectStyleProps} from './types'
 
+/** @public */
 export function select(props: SelectStyleProps): string | undefined {
   return composeClassNames(_comp('select'), _input(props))
 }
 
+/** @public */
 export function selectPresentation(): string | undefined {
   return composeClassNames(_comp('select-presentation'), _inputPresentation())
 }

package/src/css/primitives/spinner/spinner.ts

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function spinner(): string | undefined {
   return _comp('spinner')
 }
 
+/** @public */
 export function animatedSpinnerIcon(): string | undefined {
   return _comp('animated-spinner-icon')
 }

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

@@ -1,21 +1,26 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function _switch(): string | undefined {
   return _comp('switch')
 }
 
+/** @public */
 export function _switchElement(): string | undefined {
   return _comp('switch-element')
 }
 
+/** @public */
 export function _switchPresentation(): string | undefined {
   return _comp('switch-presentation')
 }
 
+/** @public */
 export function _switchThumb(): string | undefined {
   return _comp('switch-thumb')
 }
 
+/** @public */
 export function _switchTrack(): string | undefined {
   return _comp('switch-track')
 }

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

@@ -1,10 +1,14 @@
 import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export type TextSize = number
 
 /** @public */
 export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+  /**
+   * @deprecated Will be removed in next major version
+   */
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>

package/src/css/primitives/textArea/textArea.ts

@@ -3,6 +3,7 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextAreaStyleProps} from './types'
 
+/** @public */
 export function textArea(props: TextAreaStyleProps): string | undefined {
   return composeClassNames(_comp('text-area'), _input(props))
 }

package/src/css/primitives/textInput/textInput.ts

@@ -3,6 +3,7 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
+/** @public */
 export function textInput(props: TextInputStyleProps): string | undefined {
   return composeClassNames(_input(props), _comp('text-input'))
 }

package/src/css/primitives/tooltip/tooltip.ts

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

package/src/css/scopeClassName.ts

@@ -1,5 +1,6 @@
 import {PREFIX} from './constants'
 
+/** @public */
 export function scopeClassName(className: string | undefined) {
   if (className === undefined) return undefined
   return `${PREFIX}${className.trim()}`

package/src/css/types.ts

@@ -128,8 +128,8 @@ export type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+/** @public */
 export type ColorCardVarName =
-  | `--color-${Scheme}-${CardTone}-accent-fg`
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${Scheme}-${CardTone}-backdrop`
@@ -183,8 +183,8 @@ export type ColorCardVarName =
   | `--color-${Scheme}-${CardTone}-skeleton-from`
   | `--color-${Scheme}-${CardTone}-skeleton-to`
 
+/** @public */
 export type ColorCardToneScopedVarName =
-  | `--color-${CardTone}-accent-fg`
   | `--color-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${CardTone}-backdrop`
@@ -240,7 +240,6 @@ export type ColorCardToneScopedVarName =
 
 /** @public */
 export type CardScopedVarName =
-  | `--color-accent-fg`
   | `--color-avatar-bg`
   | `--color-avatar-fg`
   | `--color-avatar-${AvatarColor}-bg`
@@ -326,12 +325,14 @@ export type CardScopedVarName =
   | `--padding-bottom`
   | `--padding-left`
 
+/** @public */
 export type AvatarScopedVarName =
   | `--avatar-bg-color`
   | `--avatar-fg-color`
   | `--avatar-distance`
   | `--avatar-size`
 
+/** @public */
 export type LegacyCardScopedVarName =
   // legacy
   | `--card-accent-fg-color`
@@ -371,6 +372,7 @@ export type LegacyCardScopedVarName =
 export type ElementColorVariantScopedVarName =
   `--color-${ElementColorVariant}-${ElementColorVariantKey}`
 
+/** @public */
 export type ButtonScopedVarName = '--button-box-shadow'
 
 /** @public */
@@ -497,15 +499,13 @@ export interface ColorElementVarNames {
   }
 }
 
+/** @public */
 export interface ColorVariantVarNames
   extends ColorElementVarNames,
     Record<ElementTone, ColorElementVarNames> {}
 
 /** @public */
 export interface ColorCardVarNames {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames>
   backdrop: VarName
   code: {
@@ -577,10 +577,8 @@ export interface ColorCardVarNames {
 /** @public */
 export type ColorSchemeVarNames = Record<CardTone, ColorCardVarNames>
 
+/** @public */
 export interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
   bg: VarName
   border: VarName
@@ -603,6 +601,7 @@ export interface FontSizeVarNames {
   iconSize: VarName
 }
 
+/** @public */
 export interface FontVarNames<Size extends number> {
   family: VarName
   featureSettings: VarName
@@ -768,9 +767,6 @@ export interface ColorVariantVars extends Record<ElementTone, ColorElementVars>,
 
 /** @public */
 export interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
   avatar: ColorAvatarVars
   backdrop: CSSVar
   code: {
@@ -863,6 +859,7 @@ export interface ColorAvatarColorVars {
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ColorSchemeVars extends Record<CardTone, ColorCardVars> {}
 
+/** @public */
 export interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   avatar: ColorAvatarVars & ColorAvatarColorVars
   bg: CSSVar

package/src/css/util.ts

@@ -1,25 +1,30 @@
 import {type ThemeBoxShadow} from '@sanity/ui/theme'
 
+/** @internal */
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
 }
 
+/** @internal */
 export function isArray(value: unknown): value is unknown[] {
   return Array.isArray(value)
 }
 
+/** @internal */
 export function rem(value: number): string {
   if (value === 0) return '0'
 
   return `${value / 16}rem`
 }
 
+/** @internal */
 export function px(value: number): string {
   if (value === 0) return '0'
 
   return `${value}px`
 }
 
+/** @internal */
 export function toBoxShadow(value: ThemeBoxShadow | undefined): string {
   if (!value) return 'none'
 

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

@@ -1,5 +1,7 @@
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
 
+/** @public */
 export function srOnly(): string | undefined {
-  return composeClassNames('sr-only')
+  return _comp(composeClassNames('sr-only'))
 }