@sanity/ui 2.1.4 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "keywords": [
     "sanity",
     "ui",
@@ -116,10 +116,10 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@commitlint/cli": "^19.2.2",
+    "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.6.6",
+    "@sanity/pkg-utils": "^6.8.10",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.12",
     "@storybook/addon-a11y": "^8.0.8",
@@ -142,15 +142,15 @@
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@types/react-is": "^18.2.4",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "commitizen": "^4.3.0",
-    "cypress": "^13.7.3",
+    "cypress": "^13.8.1",
     "cypress-real-events": "^1.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
@@ -160,7 +160,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
@@ -172,9 +172,9 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.2.5",
     "prettier-plugin-packagejson": "^2.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^23.0.8",
@@ -183,7 +183,7 @@
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.4.5",
-    "vite": "^5.2.9",
+    "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
@@ -192,7 +192,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.0.1",
+  "packageManager": "pnpm@9.0.6",
   "engines": {
     "node": ">=14.0.0"
   },

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -15,5 +15,15 @@ export default defineScope({
       title: 'Avatar stack',
       component: lazy(() => import('./stack')),
     },
+    {
+      name: 'within-button',
+      title: 'Within button',
+      component: lazy(() => import('./withinButton')),
+    },
+    {
+      name: 'within-menu-item',
+      title: 'Within menu item',
+      component: lazy(() => import('./withinMenuItem')),
+    },
   ],
 })

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

@@ -0,0 +1,62 @@
+import {useBoolean} from '@sanity/ui-workshop'
+import {Box} from '../../box'
+import {Button} from '../../button'
+import {Container} from '../../container'
+import {Flex} from '../../flex'
+import {Stack} from '../../stack'
+import {Text} from '../../text'
+import {Avatar} from '../avatar'
+import {AvatarStack} from '../avatarStack'
+
+export default function WithinButtonStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+
+  return (
+    <Container width={1}>
+      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+        <Button disabled={disabled} padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Default button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="ghost" padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Ghost button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="bleed" padding={1}>
+          <Flex align="center" gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Bleed button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+      </Stack>
+    </Container>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {useBoolean} from '@sanity/ui-workshop'
+import {Menu, MenuItem} from '../../../components'
+import {Layer} from '../../../utils'
+import {Box} from '../../box'
+import {Card} from '../../card'
+import {Container} from '../../container'
+import {Flex} from '../../flex'
+import {Text} from '../../text'
+import {Avatar} from '../avatar'
+import {AvatarStack} from '../avatarStack'
+
+export default function WithinMenuItemStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+
+  return (
+    <Container width={1}>
+      <Layer>
+        <Box paddingX={4} paddingY={[5, 6, 7]}>
+          <Card radius={3} shadow={3}>
+            <Menu space={1}>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <Flex align="center" gap={2} padding={2}>
+                  <Box flex={1}>
+                    <Text size={1}>Menu item 1</Text>
+                  </Box>
+                  <Box flex="none">
+                    <AvatarStack>
+                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="purple" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+            </Menu>
+          </Card>
+        </Box>
+      </Layer>
+    </Container>
+  )
+}

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

@@ -1,69 +1,93 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import {CropIcon} from '@sanity/icons'
 import {
   THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_SCHEMES,
   THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
+  ThemeColorCardToneKey,
   ThemeColorCard_v2,
+  ThemeColorSchemeKey,
   ThemeColorScheme_v2,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
-import {useBoolean} from '@sanity/ui-workshop'
-import {CSSProperties} from 'react'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {CSSProperties, useMemo} from 'react'
 import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
 import {useRootTheme} from '../../useRootTheme'
 
+interface Features {
+  base: boolean
+  button: boolean
+  schemes: ThemeColorSchemeKey[]
+  selectable: boolean
+  tones: ThemeColorCardToneKey[]
+}
+
+const SCHEME_OPTIONS: {[key: string]: ThemeColorSchemeKey | 'all'} = {
+  All: 'all',
+  Dark: 'dark',
+  Light: 'light',
+}
+
+const TONE_OPTIONS: {[key: string]: ThemeColorCardToneKey | 'all'} = {
+  All: 'all',
+  Transparent: 'transparent',
+  Default: 'default',
+  Primary: 'primary',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
 export default function DebugStory() {
   const {color} = useRootTheme().theme.v2!
 
+  const scheme = useSelect('Color scheme', SCHEME_OPTIONS, 'all', 'Props') || 'all'
+  const tone = useSelect('Tone', TONE_OPTIONS, 'default', 'Props') || 'all'
+
+  const base = useBoolean('Base', true, 'Props') || false
+  const button = useBoolean('Button', false, 'Props') || false
+  const selectable = useBoolean('Selectable', false, 'Props') || false
+
+  const features: Features = useMemo(
+    () => ({
+      base,
+      button,
+      schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
+      selectable,
+      tones: tone == 'all' ? ['transparent', 'default'] : [tone],
+    }),
+    [base, button, scheme, selectable, tone],
+  )
+
   return (
     <Flex>
-      {THEME_COLOR_SCHEMES.map((scheme) => (
-        <DebugScheme key={scheme} scheme={color[scheme]} />
+      {features.schemes.map((scheme) => (
+        <DebugScheme features={features} key={scheme} scheme={color[scheme]} />
       ))}
     </Flex>
   )
 }
 
-function DebugScheme(props: {scheme: ThemeColorScheme_v2}) {
-  const {scheme} = props
-
-  const button = useBoolean('Button', false, 'Props') || false
-  const selectable = useBoolean('Selectable', false, 'Props') || false
+function DebugScheme(props: {features: Features; scheme: ThemeColorScheme_v2}) {
+  const {features, scheme} = props
 
   return (
     <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
-      {THEME_COLOR_CARD_TONES.map((tone) => (
-        <DebugCard card={scheme[tone]} features={{button, selectable}} key={tone} />
+      {features.tones.map((tone) => (
+        <DebugCard card={scheme[tone]} features={features} key={tone} />
       ))}
     </Box>
   )
 }
 
-function DebugCard(props: {
-  card: ThemeColorCard_v2
-  features: {button: boolean; selectable: boolean}
-}) {
+function DebugCard(props: {card: ThemeColorCard_v2; features: Features}) {
   const {card, features} = props
 
-  // card.avatar
-  // card.backdrop
-  // card.badge
-  // card.button
-  // card.focusRing
-  // card.icon
-  // card.input
-  // card.kbd
-  // card.link
-  // card.selectable
-  // card.shadow
-  // card.skeleton
-  // card.syntax
-
   return (
     <Box style={getStateVars(card)}>
-      <DebugState />
+      {features.base && <DebugState />}
 
       {features.button && (
         <Stack padding={2} space={1}>
@@ -120,12 +144,19 @@ function DebugState() {
           <CropIcon />
         </Text>
       </Flex>
-      <Text muted size={1}>
-        Muted
-      </Text>
+      <Box padding={1} style={{backgroundColor: 'var(--card-muted-bg-color)'}}>
+        <Text muted size={1}>
+          Muted
+        </Text>
+      </Box>
       <Text accent size={1}>
         Accent
       </Text>
+      <Text size={1}>
+        <a href="#" style={{color: 'var(--card-link-fg-color)'}}>
+          Link
+        </a>
+      </Text>
       <Text size={1}>
         <code>Code</code>
       </Text>
@@ -140,6 +171,155 @@ function DebugState() {
         ))}
       </Flex>
       <div style={{borderBottom: '1px solid var(--card-border-color)'}} />
+      <Flex>
+        <Box
+          flex={1}
+          paddingBottom={3}
+          style={{backgroundColor: 'var(--card-skeleton-from-color)'}}
+        />
+        <Box
+          flex={1}
+          paddingBottom={3}
+          style={{backgroundColor: 'var(--card-skeleton-to-color)'}}
+        />
+      </Flex>
+      <Flex style={{gap: 1}}>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-gray-fg-color)',
+              backgroundColor: 'var(--card-avatar-gray-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-red-fg-color)',
+              backgroundColor: 'var(--card-avatar-red-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-orange-fg-color)',
+              backgroundColor: 'var(--card-avatar-orange-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-yellow-fg-color)',
+              backgroundColor: 'var(--card-avatar-yellow-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-green-fg-color)',
+              backgroundColor: 'var(--card-avatar-green-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-cyan-fg-color)',
+              backgroundColor: 'var(--card-avatar-cyan-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-blue-fg-color)',
+              backgroundColor: 'var(--card-avatar-blue-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-purple-fg-color)',
+              backgroundColor: 'var(--card-avatar-purple-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+        <Box
+          flex={1}
+          overflow="hidden"
+          padding={1}
+          style={
+            {
+              '--card-fg-color': 'var(--card-avatar-magenta-fg-color)',
+              backgroundColor: 'var(--card-avatar-magenta-bg-color)',
+            } as any
+          }
+        >
+          <Text size={1} weight="bold">
+            A
+          </Text>
+        </Box>
+      </Flex>
     </Stack>
   )
 }
@@ -148,22 +328,24 @@ function getStateVars(state: ThemeColorState_v2) {
   return {
     '--card-accent-fg-color': state.accent.fg,
 
-    '--card-code-bg-color': state.code.bg,
-    '--card-code-fg-color': state.code.fg,
-
-    '--card-bg-color': state.bg,
-
-    '--card-border-color': state.border,
-
-    '--card-fg-color': state.fg,
-
-    '--card-icon-color': state.icon,
-
-    '--card-muted-fg-color': state.muted.fg,
-
-    '--card-kbd-bg-color': state.kbd.bg,
-    '--card-kbd-border-color': state.kbd.border,
-    '--card-kbd-fg-color': state.kbd.fg,
+    '--card-avatar-gray-bg-color': state.avatar.gray.bg,
+    '--card-avatar-gray-fg-color': state.avatar.gray.fg,
+    '--card-avatar-red-bg-color': state.avatar.red.bg,
+    '--card-avatar-red-fg-color': state.avatar.red.fg,
+    '--card-avatar-orange-bg-color': state.avatar.orange.bg,
+    '--card-avatar-orange-fg-color': state.avatar.orange.fg,
+    '--card-avatar-yellow-bg-color': state.avatar.yellow.bg,
+    '--card-avatar-yellow-fg-color': state.avatar.yellow.fg,
+    '--card-avatar-green-bg-color': state.avatar.green.bg,
+    '--card-avatar-green-fg-color': state.avatar.green.fg,
+    '--card-avatar-cyan-bg-color': state.avatar.cyan.bg,
+    '--card-avatar-cyan-fg-color': state.avatar.cyan.fg,
+    '--card-avatar-blue-bg-color': state.avatar.blue.bg,
+    '--card-avatar-blue-fg-color': state.avatar.blue.fg,
+    '--card-avatar-purple-bg-color': state.avatar.purple.bg,
+    '--card-avatar-purple-fg-color': state.avatar.purple.fg,
+    '--card-avatar-magenta-bg-color': state.avatar.magenta.bg,
+    '--card-avatar-magenta-fg-color': state.avatar.magenta.fg,
 
     '--card-badge-default-bg-color': state.badge.default.bg,
     '--card-badge-default-dot-color': state.badge.default.dot,
@@ -190,6 +372,29 @@ function getStateVars(state: ThemeColorState_v2) {
     '--card-badge-critical-fg-color': state.badge.critical.fg,
     '--card-badge-critical-icon-color': state.badge.critical.icon,
 
+    '--card-bg-color': state.bg,
+
+    '--card-border-color': state.border,
+
+    '--card-code-bg-color': state.code.bg,
+    '--card-code-fg-color': state.code.fg,
+
+    '--card-fg-color': state.fg,
+
+    '--card-icon-color': state.icon,
+
+    '--card-kbd-bg-color': state.kbd.bg,
+    '--card-kbd-border-color': state.kbd.border,
+    '--card-kbd-fg-color': state.kbd.fg,
+
+    '--card-link-fg-color': state.link.fg,
+
+    '--card-muted-bg-color': state.muted.bg,
+    '--card-muted-fg-color': state.muted.fg,
+
+    '--card-skeleton-from-color': state.skeleton.from,
+    '--card-skeleton-to-color': state.skeleton.to,
+
     backgroundColor: 'var(--card-bg-color)',
     color: 'var(--card-fg-color)',
   } as CSSProperties

package/src/theme/build/renderColorTheme.ts

@@ -364,7 +364,7 @@ function renderThemeColorState(
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions),
     },
-    avatar: renderThemeColorAvatar(value.avatar, {baseBg, colorPalette, blendMode}),
+    avatar: renderThemeColorAvatar(value.avatar, {baseBg: bg, colorPalette, blendMode}),
     badge: renderThemeColorBadge(value.badge, {baseBg: bg, colorPalette, blendMode}),
     bg,
     border: renderColorValue(value.border, colorOptions),