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

package/src/core/styles/card/_cardColorStyle.ts

@@ -12,6 +12,8 @@ export function _cardColorStyle(
   return {
     // from base
 
+    '--card-backdrop-color': base.backdrop,
+
     '--card-focus-ring-color': base.focusRing,
 
     '--card-shadow-outline-color': base.shadow.outline,

package/src/core/styles/input/textInputStyle.ts

@@ -195,9 +195,10 @@ export function textInputRepresentationStyle(
       }
 
       /* disabled */
-      *:disabled + & {
+      *:not(:invalid):disabled + & {
         --card-bg-color: ${color.input.default.disabled.bg} !important;
         --card-fg-color: ${color.input.default.disabled.fg} !important;
+        --card-icon-color: ${color.input.default.disabled.fg} !important;
 
         &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
@@ -207,12 +208,30 @@ export function textInputRepresentationStyle(
         }
       }
 
+      *:invalid:disabled + & {
+        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
       /* readOnly */
-      *:read-only + & {
+      *:not(:invalid):read-only + & {
         --card-bg-color: ${color.input.default.readOnly.bg} !important;
         --card-fg-color: ${color.input.default.readOnly.fg} !important;
       }
 
+      *:invalid:read-only + & {
+        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+      }
+
       /* hovered */
       @media (hover: hover) {
         *:not(:disabled):not(:read-only):not(:invalid):hover + & {
@@ -220,12 +239,24 @@ export function textInputRepresentationStyle(
           --card-fg-color: ${color.input.default.hovered.fg};
         }
 
+        *:invalid:not(:disabled):not(:read-only):hover + & {
+          --card-bg-color: ${color.input.invalid.hovered.bg};
+          --card-fg-color: ${color.input.invalid.hovered.fg};
+        }
+
         *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
             color: color.input.default.hovered.border,
             width: input.border.width,
           })};
         }
+
+        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.hovered.border,
+            width: input.border.width,
+          })};
+        }
       }
     }
   `

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 (

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

@@ -0,0 +1,196 @@
+import {CropIcon} from '@sanity/icons'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorCard_v2,
+  ThemeColorScheme_v2,
+  ThemeColorState_v2,
+} from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
+import {CSSProperties} from 'react'
+import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
+import {useRootTheme} from '../../useRootTheme'
+
+export default function DebugStory() {
+  const {color} = useRootTheme().theme.v2!
+
+  return (
+    <Flex>
+      {THEME_COLOR_SCHEMES.map((scheme) => (
+        <DebugScheme 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
+
+  return (
+    <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
+      {THEME_COLOR_CARD_TONES.map((tone) => (
+        <DebugCard card={scheme[tone]} features={{button, selectable}} key={tone} />
+      ))}
+    </Box>
+  )
+}
+
+function DebugCard(props: {
+  card: ThemeColorCard_v2
+  features: {button: boolean; selectable: boolean}
+}) {
+  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.button && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_BUTTON_MODES.map((mode) => (
+            <Stack key={mode} space={1}>
+              {THEME_COLOR_STATE_TONES.map((stateTone) => (
+                <Flex key={stateTone} gap={1}>
+                  {/* {mode} */}
+                  {THEME_COLOR_STATES.map((state) => (
+                    <Box
+                      flex={1}
+                      key={state}
+                      style={getStateVars(card.button[mode][stateTone][state])}
+                    >
+                      <DebugState />
+                    </Box>
+                  ))}
+                </Flex>
+              ))}
+            </Stack>
+          ))}
+        </Stack>
+      )}
+
+      {features.selectable && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_STATE_TONES.map((stateTone) => (
+            <Flex key={stateTone} gap={1}>
+              {/* {mode} */}
+              {THEME_COLOR_STATES.map((state) => (
+                <Box flex={1} key={state} style={getStateVars(card.selectable[stateTone][state])}>
+                  <DebugState />
+                </Box>
+              ))}
+            </Flex>
+          ))}
+        </Stack>
+      )}
+    </Box>
+  )
+}
+
+function DebugState() {
+  return (
+    <Stack
+      overflow="auto"
+      padding={4}
+      space={3}
+      style={{border: '1px solid var(--card-border-color)'}}
+    >
+      <Flex gap={3}>
+        <Text size={1}>Text</Text>
+        <Text size={1}>
+          <CropIcon />
+        </Text>
+      </Flex>
+      <Text muted size={1}>
+        Muted
+      </Text>
+      <Text accent size={1}>
+        Accent
+      </Text>
+      <Text size={1}>
+        <code>Code</code>
+      </Text>
+      <div>
+        <KBD>Cmd</KBD>
+      </div>
+      <Flex gap={1}>
+        {THEME_COLOR_STATE_TONES.map((stateTone) => (
+          <Box flex="none" key={stateTone}>
+            <Badge tone={stateTone}>{stateTone}</Badge>
+          </Box>
+        ))}
+      </Flex>
+      <div style={{borderBottom: '1px solid var(--card-border-color)'}} />
+    </Stack>
+  )
+}
+
+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-badge-default-bg-color': state.badge.default.bg,
+    '--card-badge-default-dot-color': state.badge.default.dot,
+    '--card-badge-default-fg-color': state.badge.default.fg,
+    '--card-badge-default-icon-color': state.badge.default.icon,
+
+    '--card-badge-primary-bg-color': state.badge.primary.bg,
+    '--card-badge-primary-dot-color': state.badge.primary.dot,
+    '--card-badge-primary-fg-color': state.badge.primary.fg,
+    '--card-badge-primary-icon-color': state.badge.primary.icon,
+
+    '--card-badge-positive-bg-color': state.badge.positive.bg,
+    '--card-badge-positive-dot-color': state.badge.positive.dot,
+    '--card-badge-positive-fg-color': state.badge.positive.fg,
+    '--card-badge-positive-icon-color': state.badge.positive.icon,
+
+    '--card-badge-caution-bg-color': state.badge.caution.bg,
+    '--card-badge-caution-dot-color': state.badge.caution.dot,
+    '--card-badge-caution-fg-color': state.badge.caution.fg,
+    '--card-badge-caution-icon-color': state.badge.caution.icon,
+
+    '--card-badge-critical-bg-color': state.badge.critical.bg,
+    '--card-badge-critical-dot-color': state.badge.critical.dot,
+    '--card-badge-critical-fg-color': state.badge.critical.fg,
+    '--card-badge-critical-icon-color': state.badge.critical.icon,
+
+    backgroundColor: 'var(--card-bg-color)',
+    color: 'var(--card-fg-color)',
+  } as CSSProperties
+}

package/src/core/theme/__workshop__/index.ts

@@ -5,6 +5,11 @@ export default defineScope({
   name: 'theme',
   title: 'Theme',
   stories: [
+    {
+      name: 'debug',
+      title: 'Debug',
+      component: lazy(() => import('./debug/story')),
+    },
     {
       name: 'build',
       title: 'Build theme',

package/src/core/theme/theme.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {defaultTheme} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
@@ -24,7 +24,7 @@ describe('theme', () => {
         const value: ThemeContextValue = {
           version: 0.0,
           scheme: 'light',
-          theme: defaultTheme,
+          theme: buildTheme(),
           tone: 'default',
         }
 

package/src/core/types/avatar.ts

@@ -6,7 +6,7 @@ export type AvatarPosition = 'top' | 'bottom' | 'inside'
 /**
  * @public
  */
-export type AvatarSize = 0 | 1 | 2
+export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public

package/src/core/types/button.ts

@@ -1,5 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {ThemeColorButtonModeKey} from '../_compat'
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public

package/src/core/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export function ConditionalWrapper({
   children,
   condition,

package/src/core/utils/conditionalWrapper/index.ts

@@ -0,0 +1 @@
+export * from './conditionalWrapper'

package/src/core/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './arrow'
 export * from './boundaryElement'
+export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'

package/src/theme/build/_deprecated/color/factory.ts

@@ -27,7 +27,7 @@ import {createSpot} from './spot/createSpot'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `buildColorTheme` instead.
  */
 export interface ThemeColorBuilderOpts {
   base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
@@ -82,13 +82,13 @@ export interface ThemeColorBuilderOpts {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeConfig` instead.
  */
 export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
 
 /**
  * @public
- * @deprecated Use `buildTheme` instead
+ * @deprecated Use `buildColorTheme` instead.
  */
 export function createColorTheme(
   partialOpts: PartialThemeColorBuilderOpts = {},

package/src/theme/build/buildColorTheme.test.ts

@@ -65,7 +65,7 @@ test('buildColorTheme: base', () => {
     light: {
       transparent: {
         bg: 'gray/50',
-        fg: 'gray/600',
+        fg: 'gray/800',
       },
       default: {
         bg: 'white',
@@ -79,7 +79,7 @@ test('buildColorTheme: base', () => {
     dark: {
       transparent: {
         bg: 'black',
-        fg: 'gray/400',
+        fg: 'gray/200',
       },
       default: {
         bg: 'gray/950',