@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

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

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/components/menu/__workshop__/selectedItem.tsx

@@ -16,8 +16,10 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
+const INITIAL_INDEX = 1
+
 export default function SelectedItemStory() {
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
 
   return (
     <Box padding={[4, 5, 6]}>
@@ -26,12 +28,13 @@ export default function SelectedItemStory() {
 
         <MenuButton
           button={<Button text="Open menu" />}
-          id="selected-item-example"
+          id="menu-button"
           menu={
             <Menu>
               <MenuItem
                 icon={SearchIcon}
                 iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
+                id="menu-item-1"
                 onClick={() => setSelectedIndex(0)}
                 pressed={selectedIndex === 0}
                 selected={selectedIndex === 0}
@@ -40,6 +43,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ClockIcon}
                 iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
+                id="menu-item-2"
                 onClick={() => setSelectedIndex(1)}
                 pressed={selectedIndex === 1}
                 selected={selectedIndex === 1}
@@ -49,6 +53,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ExpandIcon}
                 iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
+                id="menu-item-3"
                 onClick={() => setSelectedIndex(2)}
                 pressed={selectedIndex === 2}
                 selected={selectedIndex === 2}

package/src/core/components/menu/menuButton.tsx

@@ -99,6 +99,16 @@ export const MenuButton = forwardRef(function MenuButton(
     setShouldFocus(null)
   }, [])
 
+  // Prevent mouse event propagation when the menu is open.
+  // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
+  // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
+  const handleMouseDown = useCallback(
+    (event: PointerEvent) => {
+      if (open) event.preventDefault()
+    },
+    [open],
+  )
+
   const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
@@ -231,13 +241,14 @@ export const MenuButton = forwardRef(function MenuButton(
             id,
             onClick: handleButtonClick,
             onKeyDown: handleButtonKeyDown,
+            onMouseDown: handleMouseDown,
             'aria-haspopup': true,
             'aria-expanded': open,
             ref: setButtonRef,
             selected: open,
           })
         : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef],
   )
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(

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/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/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);
     }

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

@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {
-  ThemeColorButtonStates_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorCard_v2,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {
-  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
   ThemeColorCardToneKey,
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
-import {defaultTheme} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
 
-const theme = defaultTheme
+const theme = buildTheme()
 
 export default function BuildStory(): ReactElement {
   return (
@@ -268,7 +268,7 @@ function StatePreview(props: {theme: ThemeColorState_v2}) {
   )
 }
 
-function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
+function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
   const {theme: button} = props
 
   return (
@@ -289,18 +289,24 @@ function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
         <div className="icon" style={{flex: 'none'}}>
           &copy;
         </div>
-        <div className="muted-fg" style={{flex: 'none'}}>
+        <div className="muted" style={{flex: 'none'}}>
           m
         </div>
-        <div className="accent-fg" style={{flex: 'none'}}>
+        <div className="accent" style={{flex: 'none'}}>
           a
         </div>
-        <div className="link-fg" style={{flex: 'none'}}>
+        <div className="link" style={{flex: 'none'}}>
           l
         </div>
         <div className="code" style={{flex: 'none'}}>
           c
         </div>
+        <div className="kbd" style={{flex: 'none'}}>
+          k
+        </div>
+        <div className="badge badge--default" style={{flex: 'none'}}>
+          b
+        </div>
         <div style={{flex: 'none'}}>
           <CheckeredBackground />
         </div>
@@ -424,7 +430,7 @@ function Skeleton() {
   )
 }
 
-function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputStates_v2}) {
+function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
   const {mode, theme: input} = props
 
   return (

package/src/core/theme/__workshop__/canvas.tsx

@@ -10,14 +10,14 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {
-  ThemeColorButtonStates_v2,
-  ThemeColorButtonTones_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorButton_v2,
+  ThemeColorCard_v2,
   ThemeColorScheme_v2,
-  ThemeColorSelectableStates_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
   ThemeColorState_v2,
-  ThemeColorCard_v2,
   getContrastRatio,
   mix,
   parseColor,
@@ -202,7 +202,7 @@ function ColorButton(props: {color: ThemeColorButton_v2}) {
   )
 }
 
-function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
+function ColorButtonMode(props: {color: ThemeColorButtonMode_v2}) {
   const {color} = props
 
   return (
@@ -243,7 +243,7 @@ function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
   )
 }
 
-function ColorGenericStates(props: {color: ThemeColorButtonStates_v2}) {
+function ColorGenericStates(props: {color: ThemeColorButtonTone_v2}) {
   const {color} = props
 
   return (
@@ -335,7 +335,7 @@ function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
   )
 }
 
-function ColorSelectableTone(props: {color: ThemeColorSelectableStates_v2}) {
+function ColorSelectableTone(props: {color: ThemeColorSelectableTone_v2}) {
   const {color} = props
 
   return (