@sanity/ui 2.1.4-canary.0 → 2.1.5

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),

package/src/theme/defaults/colorTokens.ts

@@ -94,9 +94,9 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
           avatar: {
             '*': {
-              _blend: ['multiply', 'screen'],
-              bg: ['white', 'black'],
-              fg: ['black', 'white'],
+              _blend: ['screen', 'multiply'],
+              bg: ['500', '400'],
+              fg: ['white', 'black'],
             },
           },
           badge: {
@@ -147,6 +147,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['100 70%', '900 70%'],
           },
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['gray/500', 'gray/400'],
+              fg: ['white', 'black'],
+            },
+          },
           badge: {
             '*': {
               bg: ['gray/700', 'gray/300'],
@@ -156,9 +163,13 @@ export const defaultColorTokens: ThemeColorTokens = {
             },
           },
           bg: ['300', '600'],
+          code: {
+            bg: ['950', '50'],
+            fg: ['300', '600'],
+          },
           fg: ['300', '600'],
           muted: {
-            bg: ['300', '600'],
+            bg: ['950', '50'],
             fg: ['300', '600'],
           },
           kbd: {
@@ -173,6 +184,13 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       default: {
         '*': {
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['500', '400'],
+              fg: ['white', 'black'],
+            },
+          },
           bg: ['800', '200'],
           muted: {
             bg: ['950', '50'],
@@ -197,6 +215,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['purple/700 60%', 'purple/300 70%'],
           },
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['500', '400'],
+              fg: ['white', 'black'],
+            },
+          },
           badge: {
             '*': {
               bg: ['100', '900'],
@@ -247,6 +272,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['200', '800'],
           },
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['gray/100', 'gray/900'],
+              fg: ['white', 'black'],
+            },
+          },
           badge: {
             '*': {
               _hue: 'gray',
@@ -264,7 +296,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['400', '600'],
           icon: ['300', '700'],
           muted: {
-            fg: ['400', '600'],
+            fg: ['300', '700'],
           },
           kbd: {
             bg: ['white', 'black'],
@@ -294,6 +326,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['purple/700 70%', 'purple/300 70%'],
           },
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['500', '400'],
+              fg: ['white', 'black'],
+            },
+          },
           badge: {
             '*': {
               bg: ['100', '900'],
@@ -346,6 +385,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['200', '800'],
           },
+          avatar: {
+            '*': {
+              _blend: ['screen', 'multiply'],
+              bg: ['gray/100', 'gray/900'],
+              fg: ['white', 'black'],
+            },
+          },
           badge: {
             '*': {
               _hue: 'gray',
@@ -397,8 +443,9 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['800', '200'],
       },
       disabled: {
-        fg: ['200', '800'],
+        fg: ['400', '600'],
         border: ['100', '900'],
+        placeholder: ['200', '800 50%'],
       },
     },
     invalid: {
@@ -415,6 +462,13 @@ export const defaultColorTokens: ThemeColorTokens = {
         accent: {
           fg: ['purple/700 70%', 'purple/300 70%'],
         },
+        avatar: {
+          '*': {
+            _blend: ['screen', 'multiply'],
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+        },
         badge: {
           '*': {
             bg: ['100', '900'],
@@ -440,7 +494,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['blue/700 70%', 'blue/300 70%'],
         },
         muted: {
-          bg: ['100', '950'],
+          bg: ['50', '950'],
           fg: ['700 75%', '300 75%'],
         },
         skeleton: {
@@ -491,7 +545,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['blue/200', 'blue/600'],
         },
         muted: {
-          bg: ['950', '50'],
+          bg: ['500 10%', '400 10%'],
           fg: ['100 70%', '900 70%'],
         },
         skeleton: {
@@ -504,6 +558,13 @@ export const defaultColorTokens: ThemeColorTokens = {
         accent: {
           fg: ['200', '800'],
         },
+        avatar: {
+          '*': {
+            _blend: ['screen', 'multiply'],
+            bg: ['gray/100', 'gray/900'],
+            fg: ['white', 'black'],
+          },
+        },
         badge: {
           '*': {
             _hue: 'gray',
@@ -529,6 +590,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['200', '800'],
         },
         muted: {
+          bg: ['50 50%', '950 50%'],
           fg: ['200', '800'],
         },
       },