@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/__workshop__/constants.ts

@@ -17,9 +17,10 @@ import {
 import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0 (default)': 0,
-  '1': 1,
+  '0': 0,
+  '1 (default)': 1,
   '2': 2,
+  '3': 3,
 }
 
 export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {

package/src/core/_compat.ts

@@ -1,73 +1,23 @@
-// re-export for backwards compatibility
-export {
-  COLOR_CONFIG_CARD_KEYS,
-  COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_BLEND_KEYS,
-  COLOR_CONFIG_STATE_KEYS,
-  COLOR_CONFIG_STATE_TONES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_BLEND_MODES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  buildTheme,
-  createColorTheme,
-  hexToRgb,
-  hslToRgb,
-  isColorBlendModeValue,
-  isColorButtonMode,
-  isColorConfigBaseKey,
-  isColorConfigBaseTone,
-  isColorConfigBlendKey,
-  isColorConfigStateKey,
-  isColorConfigStateTone,
-  isColorHueKey,
-  isColorOpacityValue,
-  isColorTintKey,
-  isColorTokenValue,
-  isColorValue,
-  multiply,
-  parseColor,
-  parseTokenKey,
-  parseTokenValue,
-  rgbToHex,
-  rgbToHsl,
-  rgba,
-  rgbaToRGBA,
-  screen,
-  defaultTheme as studioTheme,
-  type BaseTheme,
-  type BoxShadow,
-  type CSSObject,
-  type ColorBlendModeTokenValue,
-  type ColorConfigCardKey,
-  type ColorConfigCardTone,
-  type ColorConfigBlendKey,
-  type ColorConfigOpacityValue,
-  type ColorConfigStateKey,
-  type ColorConfigStateTone,
-  type ColorConfigValue,
-  type HSL,
+// This file re-exports API members which existed in the `@sanity/ui` export in v1.
+
+import {
+  type BaseTheme as _BaseTheme,
+  type ThemeBoxShadow,
+  type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
-  type RGB,
-  type RGBA,
-  type RootTheme,
-  type Theme,
+  type RGB as _RGB,
+  type RootTheme as _RootTheme,
+  type ThemeStyles,
+  type Theme as _Theme,
   type ThemeAvatar,
   type ThemeColor,
   type ThemeColorBase,
-  type ThemeColorBaseTokens,
-  type ThemeColorCardToneKey,
-  type ThemeColorBlendModeKey,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
-  type ThemeColorButtonModeKey,
-  type ThemeColorButtonState,
+  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
   type ThemeColorButtonStates,
-  type ThemeColorButtonTokens,
   type ThemeColorButtonTones,
   type ThemeColorCard,
-  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -76,40 +26,239 @@ export {
   type ThemeColorMutedTone,
   type ThemeColorName,
   type ThemeColorScheme,
-  type ThemeColorSchemeKey,
+  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax as _ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeFont as _ThemeFont,
+  type ThemeFontKey as _ThemeFontKey,
+  type ThemeFontSize as _ThemeFontSize,
+  type ThemeFontWeight as _ThemeFontWeight,
+  type ThemeFontWeightKey as _ThemeFontWeightKey,
+  type ThemeFonts as _ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer as _ThemeLayer,
+  type ThemeShadow as _ThemeShadow,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
   type ThemeColorSelectableState,
+  buildTheme,
+} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
+ */
+export type BaseTheme = _BaseTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
+ */
+export type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
+ */
+export type HSL = _HSL
+
+/**
+ * @public
+ * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
+ */
+export type RGB = _RGB
+
+/**
+ * @public
+ * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
+ */
+export type RootTheme = _RootTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
+ */
+export type Theme = _Theme
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSchemeKey = _ThemeColorSchemeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSyntax = _ThemeColorSyntax
+
+/**
+ * @public
+ * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFont = _ThemeFont
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontKey = _ThemeFontKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontSize = _ThemeFontSize
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeight = _ThemeFontWeight
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeightKey = _ThemeFontWeightKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFonts = _ThemeFonts
+
+/**
+ * @public
+ * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
+ */
+export type ThemeLayer = _ThemeLayer
+
+/**
+ * @public
+ * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
+ */
+export type ThemeShadow = _ThemeShadow
+
+export {
+  type PartialThemeColorBuilderOpts,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
   type ThemeColorSpot,
   type ThemeColorSpotKey,
-  type ThemeColorStateKey,
-  type ThemeColorStateTokens,
-  type ThemeColorStateToneKey,
-  type ThemeColorStatesTokens,
-  type ThemeColorSyntax,
-  type ThemeColorTokenValue,
-  type ThemeColorTokens,
   type ThemeColorToneKey,
-  type ThemeConfig,
-  type ThemeFocusRing,
-  type ThemeFont,
-  type ThemeFontKey,
-  type ThemeFontSize,
-  type ThemeFontWeight,
-  type ThemeFontWeightKey,
-  type ThemeFonts,
   type ThemeInput,
-  type ThemeLayer,
-  type ThemeShadow,
-  type ThemeStyles,
-  type TokenBaseKeyNode,
-  type TokenBlendModeValueNode,
-  type TokenButtonKeyNode,
-  type TokenColorValueNode,
-  type TokenHueValueNode,
-  type TokenKeyNode,
-  type TokenValueNode,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
+  type ThemeColorSelectableState,
+}
+
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  rgba as _rgba,
+  screen as _screen,
 } from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export const studioTheme = buildTheme()

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,9 +1,12 @@
 /** @jest-environment node */
-import {defaultTheme} from '@sanity/ui/theme'
+
+import {buildTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
+const theme = buildTheme()
+
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -14,7 +17,7 @@ describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
     expect(
       renderToStaticMarkup(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),
@@ -23,7 +26,7 @@ describe('useMediaIndex', () => {
   it(`SSR to markup for hydration doesn't throw`, () => {
     expect(
       renderToString(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/avatar.tsx

@@ -69,12 +69,12 @@ export const Avatar = forwardRef(function Avatar(
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
+  const {avatar} = useTheme_v2()
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
-  const {avatar} = useTheme_v2()
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
@@ -111,7 +111,17 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
+  const initialsSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root
@@ -175,7 +185,7 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize}>
+            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
               {initials}
             </InitialsLabel>
           </Initials>

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -5,7 +5,7 @@ import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
-import {Text} from '../text'
+import {Label} from '../label'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {avatar, media} = getTheme_v2(props.theme)
@@ -67,15 +67,26 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {count, size: sizeProp = 0} = props
+  const {count, size: sizeProp = 1} = props
   const size = useArrayProp(sizeProp)
-  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
+  const fontSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize} weight="medium">
+      <Label as="span" size={fontSize} weight="medium">
         {count}
-      </Text>
+      </Label>
     </Root>
   )
 })

package/src/core/primitives/avatar/avatarStack.tsx

@@ -63,7 +63,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
   const children = childrenToElementArray(childrenProp).filter(
@@ -81,7 +81,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
       {len === 0 && (
         <div>
-          <AvatarCounter count={len} />
+          <AvatarCounter count={len} size={size} />
         </div>
       )}
 

package/src/core/primitives/kbd/kbd.tsx

@@ -26,6 +26,8 @@ function kbdStyle() {
     background: var(--card-bg-color);
     font: inherit;
 
+    vertical-align: top;
+
     &:not([hidden]) {
       display: inline-block;
     }

package/src/core/primitives/tooltip/tooltip.tsx

@@ -105,7 +105,7 @@ export const Tooltip = forwardRef(function Tooltip(
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding = 3,
+    padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const theme = getScopedTheme(defaultTheme, 'light', 'default')
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const theme = getScopedTheme(defaultTheme, 'light', 'default')
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/core/theme/__workshop__/build/Root.tsx

@@ -159,6 +159,7 @@ export const Root = styled.div((props) => {
       --link-fg: var(--card-enabled-link-fg);
       --code-bg: var(--card-enabled-code-bg);
       --code-fg: var(--card-enabled-code-fg);
+      --kbd-bg: var(--card-enabled-kbd-bg);
       --skeleton-from: var(--card-enabled-skeleton-from);
       --skeleton-to: var(--card-enabled-skeleton-to);
 
@@ -322,15 +323,15 @@ export const Root = styled.div((props) => {
       color: var(--icon);
     }
 
-    .muted-fg {
+    .muted {
       color: var(--muted-fg);
     }
 
-    .accent-fg {
+    .accent {
       color: var(--accent-fg);
     }
 
-    .link-fg {
+    .link {
       color: var(--link-fg);
     }
 
@@ -339,6 +340,22 @@ export const Root = styled.div((props) => {
       color: var(--code-fg);
     }
 
+    .kbd {
+      background-color: var(--kbd-bg);
+      color: var(--kbd-fg);
+    }
+
+    .badge {
+      background-color: var(--badge-bg);
+      color: var(--badge-fg);
+    }
+
+    .badge--default {
+      --badge-bg: var(--badge-default-bg);
+      --badge-fg: var(--badge-default-fg);
+      --badge-border: var(--badge-default-border);
+    }
+
     .skeleton-from {
       color: var(--skeleton-from);
     }