@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

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

@@ -2,7 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   position: 'absolute',
   width: vars.arrow.size,
   height: vars.arrow.size,
@@ -30,7 +30,7 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const svg = _style(layers.primitives, {
+export const svg: string = _style(layers.primitives, {
   display: 'block',
   transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`,
 
@@ -53,16 +53,16 @@ export const svg = _style(layers.primitives, {
   },
 })
 
-export const strokeMask = _style(layers.primitives, {
+export const strokeMask: string = _style(layers.primitives, {
   // @ts-expect-error `y` is not a valid property in 'csstype'
   y: vars.shadow.outline,
 })
 
-export const stroke = _style(layers.primitives, {
+export const stroke: string = _style(layers.primitives, {
   stroke: vars.color.shadow.outline,
   strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
 })
 
-export const fill = _style(layers.primitives, {
+export const fill: string = _style(layers.primitives, {
   fill: vars.color.bg,
 })

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

@@ -7,13 +7,13 @@ import {layers} from '../../layers.css'
 import type {ResponsiveRuleOptions} from '../../types'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   position: 'relative',
 })
 
-export const border = _style(layers.primitives, {})
+export const border: string = _style(layers.primitives, {})
 
-export const element = _style(layers.primitives, {
+export const element: string = _style(layers.primitives, {
   WebkitFontSmoothing: 'inherit',
   appearance: 'none',
   border: 0,
@@ -108,7 +108,7 @@ export const element = _style(layers.primitives, {
   },
 })
 
-export const presentation = _style(layers.primitives, {
+export const presentation: string = _style(layers.primitives, {
   backgroundColor: vars.color.input.text.bg,
   borderRadius: 'inherit',
   boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,

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

@@ -1,11 +1,11 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
@@ -28,9 +28,9 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const tones = {
+export const tones: Record<ElementTone, string> = {
   ..._fromEntries(
-    THEME_COLOR_STATE_TONES.map((t) => {
+    ELEMENT_TONES.map((t) => {
       const tinted = vars.color.tinted[t]
       const focused = vars.color.solid.primary
       const disabled = vars.color.tinted.default

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

@@ -1,9 +1,9 @@
-import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ElementTone} from '@sanity/ui/theme'
 
 import type {RadiusStyleProps} from '../../props/radius/types'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {
   className?: string
-  tone?: ThemeColorStateToneKey
+  tone?: ElementTone
 }

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

@@ -1,4 +1,4 @@
-import {AVATAR_COLORS, AVATAR_SIZE, type AvatarSize} from '@sanity/ui/theme'
+import {AVATAR_COLORS, AVATAR_SIZE, type AvatarColor, type AvatarSize} from '@sanity/ui/theme'
 import {globalStyle} from '@vanilla-extract/css'
 
 import {_fromEntries} from '../../_fromEntries'
@@ -8,7 +8,7 @@ import {layers} from '../../layers.css'
 import type {ResponsiveRuleOptions} from '../../types'
 import {vars} from '../../vars.css'
 
-export const stack = _style(layers.primitives, {})
+export const stack: string = _style(layers.primitives, {})
 
 globalStyle(`${stack} > * + *`, {
   '@layer': {
@@ -18,7 +18,7 @@ globalStyle(`${stack} > * + *`, {
   },
 })
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   // display: 'block',
   backgroundColor: vars.color.avatar.bg,
   position: 'relative',
@@ -68,7 +68,7 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const colors = {
+export const colors: Record<AvatarColor, string> = {
   ..._fromEntries(
     AVATAR_COLORS.map((c) => [
       c,
@@ -82,7 +82,7 @@ export const colors = {
   ),
 }
 
-export const arrow = _style(layers.primitives, {
+export const arrow: string = _style(layers.primitives, {
   position: 'absolute',
   boxSizing: 'border-box',
   zIndex: 0,
@@ -112,7 +112,7 @@ export const arrow = _style(layers.primitives, {
   },
 })
 
-export const arrowSvg = _style(layers.primitives, {
+export const arrowSvg: string = _style(layers.primitives, {
   display: 'block',
   width: '11px',
   height: '7px',
@@ -122,7 +122,7 @@ export const arrowSvg = _style(layers.primitives, {
   transform: 'translateX(-6px)',
 })
 
-export const image = _style(layers.primitives, {
+export const image: string = _style(layers.primitives, {
   position: 'absolute',
   top: 0,
   left: 0,
@@ -145,7 +145,7 @@ globalStyle(`${image} img`, {
   borderRadius: 'inherit',
 })
 
-export const imageOutline = _style(layers.primitives, {
+export const imageOutline: string = _style(layers.primitives, {
   display: 'block',
   position: 'absolute',
   top: 0,
@@ -159,12 +159,12 @@ export const imageOutline = _style(layers.primitives, {
   ].join(', '),
 })
 
-export const initials = _style(layers.primitives, {
+export const initials: string = _style(layers.primitives, {
   color: vars.color.avatar.fg,
   borderRadius: 'inherit',
 })
 
-export const counter = _style(layers.primitives, {
+export const counter: string = _style(layers.primitives, {
   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(', '),

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

@@ -1,19 +1,19 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
   whiteSpace: 'nowrap',
 })
 
-export const tones = {
+export const tones: Record<ElementTone, string> = {
   ..._fromEntries(
-    THEME_COLOR_STATE_TONES.map((t) => [
+    ELEMENT_TONES.map((t) => [
       t,
       _style(layers.primitives, {
         vars: {

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

@@ -1,7 +1,13 @@
-import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {FontTextSize, ElementTone} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type BadgeTone = ElementTone
 
 /** @public */
 export interface BadgeStyleProps {
   className?: string
-  tone?: ThemeColorStateToneKey
+  fontSize?: ResponsiveProp<FontTextSize>
+  tone?: BadgeTone
 }

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

@@ -2,7 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   selectors: {
     'iframe.&': {
       border: 'none',
@@ -14,6 +14,6 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const muted = _style(layers.primitives, {
+export const muted: string = _style(layers.primitives, {
   backgroundColor: vars.color.muted.bg,
 })

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

@@ -1,11 +1,11 @@
-import {AVATAR_COLORS, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {AVATAR_COLORS, type ButtonMode, ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   WebkitFontSmoothing: 'inherit',
   alignItems: 'center',
   appearance: 'none',
@@ -45,13 +45,13 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const modes = {
+export const modes: Record<ButtonMode, string> = {
   default: _style(layers.primitives, {}),
   ghost: _style(layers.primitives, {boxShadow: vars.button.boxShadow}),
   bleed: _style(layers.primitives, {}),
 }
 
-export const loadingBox = _style(layers.primitives, {
+export const loadingBox: string = _style(layers.primitives, {
   position: 'absolute',
   top: 0,
   left: 0,
@@ -63,9 +63,9 @@ export const loadingBox = _style(layers.primitives, {
   opacity: 0.8,
 })
 
-export const tones = {
+export const tones: Record<ElementTone, string> = {
   ..._fromEntries(
-    THEME_COLOR_STATE_TONES.map((t) => {
+    ELEMENT_TONES.map((t) => {
       const solid = vars.color.solid[t]
       const tinted = vars.color.tinted[t]
 

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

@@ -7,7 +7,7 @@ import {loadingBox, modes, root, tones} from './button.css'
 import type {ButtonStyleProps} from './types'
 
 /** @public */
-export function button(props: ButtonStyleProps) {
+export function button(props: ButtonStyleProps): string | undefined {
   return _composeClassNames(
     props.className,
     root,
@@ -21,6 +21,6 @@ export function button(props: ButtonStyleProps) {
 }
 
 /** @public */
-export function buttonLoadingBox() {
+export function buttonLoadingBox(): string {
   return loadingBox
 }

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

@@ -1,4 +1,4 @@
-import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ButtonMode, ElementTone} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {RadiusStyleProps} from '../../props/radius/types'
@@ -7,6 +7,6 @@ import type {WidthStyleProps} from '../../props/width/types'
 /** @public */
 export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
   className?: string
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
+  mode?: ButtonMode
+  tone?: ElementTone
 }

package/src/css/primitives/card/__workshop__/color.tsx

@@ -3,12 +3,12 @@
 import {Box, Card, Code} from '@sanity/ui'
 import {vars} from '@sanity/ui/css'
 import {
+  CARD_TONES,
+  type CardTone,
+  COLOR_SCHEMES,
   COLOR_VARIANTS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_SCHEMES,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-  type ThemeColorVariantKey,
+  type ColorScheme,
+  type ColorVariant,
 } from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
@@ -19,7 +19,7 @@ interface ColorRecordNode extends Record<string, ColorNode> {}
 
 type ColorNode = string | ColorRecordNode
 
-export default function ColorStory() {
+export default function ColorStory(): React.JSX.Element {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
@@ -29,15 +29,15 @@ export default function ColorStory() {
           return null
         }
 
-        if (THEME_COLOR_SCHEMES.includes(key as ThemeColorSchemeKey)) {
+        if (COLOR_SCHEMES.includes(key as ColorScheme)) {
           return null
         }
 
-        if (THEME_COLOR_CARD_TONES.includes(key as ThemeColorCardToneKey)) {
+        if (CARD_TONES.includes(key as CardTone)) {
           return null
         }
 
-        if (COLOR_VARIANTS.includes(key as ThemeColorVariantKey)) {
+        if (COLOR_VARIANTS.includes(key as ColorVariant)) {
           // return null
         }
 

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'css/card',
   title: 'Card',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./color')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,11 +1,11 @@
 import {
   AVATAR_COLORS,
+  CARD_TONES,
+  type CardTone,
+  COLOR_SCHEMES,
   COLOR_VARIANTS,
-  THEME_COLOR_CARD_TONES as CARD_TONES,
-  THEME_COLOR_SCHEMES as COLOR_SCHEMES,
-  THEME_COLOR_STATE_TONES as STATE_TONES,
-  type ThemeColorCardToneKey as CardTone,
-  type ThemeColorSchemeKey as ColorScheme,
+  type ColorScheme,
+  ELEMENT_TONES,
 } from '@sanity/ui/theme'
 import {type StyleRule} from '@vanilla-extract/css'
 
@@ -15,7 +15,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
@@ -137,7 +137,7 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const schemes = _fromEntries(
+export const schemes: Record<ColorScheme, string> = _fromEntries(
   COLOR_SCHEMES.map((s) => [
     s,
     _style(layers.primitives, {
@@ -161,8 +161,8 @@ function buildSchemeVars(scheme: ColorScheme) {
 
     _assign(schemeVars, {
       [target.backdrop]: source.backdrop,
-      [target.bg]: source.tinted.default.bg[0],
-      [target.border]: source.tinted.default.border[0],
+      // [target.bg]: source.tinted.default.bg[0],
+      // [target.border]: source.tinted.default.border[0],
 
       [target.code.fg]: source.code.fg,
       [target.code.bg]: source.code.bg,
@@ -204,15 +204,9 @@ function buildSchemeVars(scheme: ColorScheme) {
       [target.code.token.url]: source.code.token.url,
       [target.code.token.variable]: source.code.token.variable,
 
-      [target.fg]: source.tinted.default.fg[0],
-
       [target.focusRing]: source.focusRing,
       [target.link.fg]: source.link.fg,
 
-      [target.muted.bg]: source.tinted.default.bg[4],
-      [target.muted.border]: source.tinted.default.border[4],
-      [target.muted.fg]: source.tinted.default.fg[4],
-
       [target.shadow.outline]: source.shadow.outline,
       [target.shadow.umbra]: source.shadow.umbra,
       [target.shadow.penumbra]: source.shadow.penumbra,
@@ -223,7 +217,7 @@ function buildSchemeVars(scheme: ColorScheme) {
     })
 
     for (const variant of COLOR_VARIANTS) {
-      for (const elementTone of STATE_TONES) {
+      for (const elementTone of ELEMENT_TONES) {
         const _target = vars.color[tone][variant][elementTone]
         const _source = vars.color[scheme][tone][variant][elementTone]
 
@@ -242,7 +236,7 @@ function buildSchemeVars(scheme: ColorScheme) {
   return schemeVars
 }
 
-export const tones = _fromEntries(
+export const tones: Record<CardTone, string> = _fromEntries(
   CARD_TONES.map((t) => [t, _style(layers.primitives, buildToneRule(t))]),
 )
 
@@ -338,7 +332,7 @@ function buildToneRule(tone: CardTone): StyleRule {
   })
 
   for (const variant of COLOR_VARIANTS) {
-    for (const elementTone of STATE_TONES) {
+    for (const elementTone of ELEMENT_TONES) {
       const _target = vars.color[variant][elementTone]
       const _source = vars.color[tone][variant][elementTone]
 

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

@@ -1,9 +1,9 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 
 /** @public */
 export interface CardStyleProps {
   className?: string
   checkered?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey | 'inherit'
+  scheme?: ColorScheme
+  tone?: CardTone | 'inherit'
 }

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

@@ -4,7 +4,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   position: 'relative',
 
   selectors: {
@@ -14,7 +14,7 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const input = _style(layers.primitives, {
+export const input: string = _style(layers.primitives, {
   position: 'absolute',
   top: 0,
   left: 0,
@@ -27,7 +27,7 @@ export const input = _style(layers.primitives, {
   margin: 0,
 })
 
-export const presentation = _style(layers.primitives, {
+export const presentation: string = _style(layers.primitives, {
   position: 'relative',
   display: 'block',
   width: vars.input.checkbox.size,

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

@@ -2,16 +2,16 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {input, presentation, root} from './checkbox.css'
 
 /** @public */
-export function checkbox(props: {className?: string}) {
+export function checkbox(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function checkboxInput() {
+export function checkboxInput(): string {
   return input
 }
 
 /** @public */
-export function checkboxPresentation() {
+export function checkboxPresentation(): string {
   return presentation
 }

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

@@ -1,13 +1,14 @@
-import {FONT_CODE_SIZE} from '@sanity/ui/theme'
+import {FONT_CODE_SIZE, type FontCodeSize} from '@sanity/ui/theme'
 import {globalStyle} from '@vanilla-extract/css'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_responsiveStyle} from '../../_responsiveStyle.css'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   vars: {
     [vars.font.family]: vars.font.code.family,
     [vars.font.featureSettings]: vars.font.code.featureSettings,
@@ -247,7 +248,7 @@ globalStyle(`${root} .token.variable`, {
   },
 })
 
-export const scale = {
+export const scale: ResponsiveRuleOptions<FontCodeSize> = {
   ..._fromEntries(
     FONT_CODE_SIZE.map((s) => {
       const v = vars.font.code.scale[s]

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

@@ -1,12 +1,11 @@
+import type {FontCodeSize} from '@sanity/ui/theme'
+
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
 import type {ResponsiveProp} from '../../types'
 
-/** @public */
-export type CodeSize = number
-
 /** @public */
 export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
   className?: string
-  size?: ResponsiveProp<CodeSize>
+  size?: ResponsiveProp<FontCodeSize>
 }

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

@@ -1,4 +1,4 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})

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

@@ -1,13 +1,14 @@
-import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
+import {FONT_HEADING_SIZE, type FontHeadingSize} from '@sanity/ui/theme'
 import {globalStyle} from '@vanilla-extract/css'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_responsiveStyle} from '../../_responsiveStyle.css'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   vars: {
     [vars.font.family]: vars.font.heading.family,
     [vars.font.featureSettings]: vars.font.heading.featureSettings,
@@ -57,11 +58,11 @@ globalStyle(`${root} svg`, {
   },
 })
 
-export const muted = _style(layers.primitives, {
+export const muted: string = _style(layers.primitives, {
   color: vars.color.muted.fg,
 })
 
-export const sizes = {
+export const sizes: ResponsiveRuleOptions<FontHeadingSize> = {
   ..._fromEntries(
     FONT_HEADING_SIZE.map((s) => {
       const v = vars.font.heading.scale[s]

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

@@ -1,17 +1,14 @@
+import type {FontHeadingSize} from '@sanity/ui/theme'
+
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
-/** @public */
-export type HeadingSize = number
-
 /** @public */
 export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
-  /** @deprecated No longer in use */
-  accent?: boolean
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean
-  size?: ResponsiveProp<HeadingSize>
+  size?: ResponsiveProp<FontHeadingSize>
 }

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

@@ -2,7 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
   backgroundColor: vars.color.muted.bg,
   font: 'inherit',