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

package/package.json

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

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -62,7 +62,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -1,7 +1,8 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function StatesStory() {
+  const invalid = useBoolean('Invalid', false, 'Props')
   const onChange = useAction('onChange')
 
   return (
@@ -12,7 +13,12 @@ export default function StatesStory() {
             <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
-            <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
+            <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
+              id="enabled-example"
+              onChange={onChange}
+              value="This is some text"
+            />
           </Stack>
 
           <Stack space={3}>
@@ -20,6 +26,7 @@ export default function StatesStory() {
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               disabled
               id="disabled-example"
               onChange={onChange}
@@ -32,6 +39,7 @@ export default function StatesStory() {
               <label htmlFor="read-only-example">Read-only</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               id="read-only-example"
               readOnly
               onChange={onChange}

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/theme/__workshop__/debug/story.tsx

@@ -1,3 +1,4 @@
+import {CropIcon} from '@sanity/icons'
 import {
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
@@ -8,6 +9,7 @@ import {
   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'
@@ -27,17 +29,23 @@ export default function DebugStory() {
 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]} key={tone} />
+        <DebugCard card={scheme[tone]} features={{button, selectable}} key={tone} />
       ))}
     </Box>
   )
 }
 
-function DebugCard(props: {card: ThemeColorCard_v2}) {
-  const {card} = props
+function DebugCard(props: {
+  card: ThemeColorCard_v2
+  features: {button: boolean; selectable: boolean}
+}) {
+  const {card, features} = props
 
   // card.avatar
   // card.backdrop
@@ -56,27 +64,44 @@ function DebugCard(props: {card: ThemeColorCard_v2}) {
   return (
     <Box style={getStateVars(card)}>
       <DebugState />
-      <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 />
-                    {/* {state} */}
-                  </Box>
-                ))}
-              </Flex>
-            ))}
-          </Stack>
-        ))}
-      </Stack>
+
+      {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>
   )
 }
@@ -89,7 +114,12 @@ function DebugState() {
       space={3}
       style={{border: '1px solid var(--card-border-color)'}}
     >
-      <Text size={1}>Text</Text>
+      <Flex gap={3}>
+        <Text size={1}>Text</Text>
+        <Text size={1}>
+          <CropIcon />
+        </Text>
+      </Flex>
       <Text muted size={1}>
         Muted
       </Text>
@@ -116,13 +146,20 @@ function DebugState() {
 
 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-accent-fg-color': state.accent.fg,
+
+    '--card-icon-color': state.icon,
+
     '--card-muted-fg-color': state.muted.fg,
-    '--card-code-bg-color': state.code.bg,
-    '--card-code-fg-color': state.code.fg,
 
     '--card-kbd-bg-color': state.kbd.bg,
     '--card-kbd-border-color': state.kbd.border,

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

package/src/theme/defaults/colorTokens.ts

@@ -35,10 +35,11 @@ export const defaultColorTokens: ThemeColorTokens = {
       border: ['200', '800'],
       code: {
         bg: ['50', '950'],
-        fg: ['600', '300'],
+        fg: ['600', '400'],
       },
       fg: ['800', '200'],
       focusRing: ['blue/500', 'blue/500'],
+      icon: ['600', '400'],
       kbd: {
         bg: ['white', 'black'],
         fg: ['600', '400'],
@@ -49,7 +50,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       muted: {
         bg: ['50', '950'],
-        fg: ['700 70%', '300 70%'],
+        fg: ['700 75%', '300 75%'],
       },
       shadow: {
         outline: ['500/0.3', '500/0.4'],
@@ -64,14 +65,10 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     transparent: {
       bg: ['50', 'black'],
-      fg: ['600', '400'],
-      muted: {
-        fg: ['600', '400'],
-      },
     },
     default: {
       bg: ['white', '950'],
-      fg: ['black', '200'],
+      fg: ['800', '200'],
       muted: {
         fg: ['600', '400'],
       },
@@ -95,6 +92,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['purple/300', 'purple/700'],
           },
+          avatar: {
+            '*': {
+              _blend: ['multiply', 'screen'],
+              bg: ['white', 'black'],
+              fg: ['black', 'white'],
+            },
+          },
           badge: {
             '*': {
               bg: ['900', '100'],
@@ -110,18 +114,18 @@ export const defaultColorTokens: ThemeColorTokens = {
             fg: ['200', '600'],
           },
           fg: ['white', 'black'],
-          icon: ['200', '800'],
+          icon: ['100 70%', '900 70%'],
           kbd: {
             bg: ['black', 'white'],
-            fg: ['200', '800'],
+            fg: ['200', '600'],
             border: ['800', '200'],
           },
           link: {
-            fg: ['blue/200', 'blue/700'],
+            fg: ['blue/200', 'blue/600'],
           },
           muted: {
             bg: ['950', '50'],
-            fg: ['100 70%', '600'],
+            fg: ['100 70%', '900 70%'],
           },
           skeleton: {
             from: ['900', '100'],
@@ -140,6 +144,9 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          accent: {
+            fg: ['100 70%', '900 70%'],
+          },
           badge: {
             '*': {
               bg: ['gray/700', 'gray/300'],
@@ -149,12 +156,14 @@ export const defaultColorTokens: ThemeColorTokens = {
             },
           },
           bg: ['200', '800'],
-          icon: ['white', 'black'],
           kbd: {
             bg: ['black', 'white'],
             fg: ['white', 'black'],
             border: ['700', '300'],
           },
+          link: {
+            fg: ['100 70%', '900 70%'],
+          },
         },
       },
       default: {
@@ -198,7 +207,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             fg: ['700 60%', '400 60%'],
           },
           fg: ['600', '400'],
-          icon: ['600', '500'],
+          icon: ['700 60%', '300 60%'],
           kbd: {
             bg: ['white', 'black'],
             fg: ['600', '400'],
@@ -291,14 +300,14 @@ export const defaultColorTokens: ThemeColorTokens = {
           bg: ['white', 'black'],
           border: ['white/0', 'black/0'],
           code: {
-            bg: ['100', '950'],
-            fg: ['600', '300'],
+            bg: ['50', '950'],
+            fg: ['700 75%', '300 75%'],
           },
           fg: ['700', '300'],
-          icon: ['700 70%', '300 70%'],
+          icon: ['700 75%', '300 75%'],
           kbd: {
             bg: ['white', 'black'],
-            fg: ['600', '400'],
+            fg: ['700', '300'],
             border: ['200', '800'],
           },
           link: {
@@ -306,7 +315,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
           muted: {
             bg: ['100', '950'],
-            fg: ['700 70%', '300 70%'],
+            fg: ['700 75%', '300 75%'],
           },
           skeleton: {
             from: ['100', '900'],
@@ -315,7 +324,6 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         hovered: {
           bg: ['50', '950'],
-          fg: ['700', '300'],
           icon: ['700 70%', '400 70%'],
         },
         pressed: {
@@ -330,6 +338,9 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          accent: {
+            fg: ['200', '800'],
+          },
           badge: {
             '*': {
               _hue: 'gray',
@@ -339,13 +350,12 @@ export const defaultColorTokens: ThemeColorTokens = {
               icon: ['gray/200', 'gray/800'],
             },
           },
-          fg: ['200', '800'],
-          muted: {
-            fg: ['200', '800'],
-          },
-          accent: {
+          code: {
+            bg: ['50', '950'],
             fg: ['200', '800'],
           },
+          fg: ['200', '800'],
+          icon: ['200', '800'],
           kbd: {
             bg: ['white', 'black'],
             fg: ['200', '800'],
@@ -354,8 +364,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           link: {
             fg: ['200', '800'],
           },
-          code: {
-            bg: ['50', '950'],
+          muted: {
             fg: ['200', '800'],
           },
         },
@@ -398,15 +407,8 @@ export const defaultColorTokens: ThemeColorTokens = {
     '*': {
       '*': {
         _blend: ['multiply', 'screen'],
-        bg: ['white', 'black'],
-        fg: ['800', '200'],
-        icon: ['700 70%', '300 70%'],
-        avatar: {
-          '*': {
-            _blend: ['screen', 'multiply'],
-            bg: ['500', '400'],
-            fg: ['white', 'black'],
-          },
+        accent: {
+          fg: ['purple/700 70%', 'purple/300 70%'],
         },
         badge: {
           '*': {
@@ -416,25 +418,25 @@ export const defaultColorTokens: ThemeColorTokens = {
             icon: ['500', '500'],
           },
         },
+        bg: ['white', 'black'],
         border: ['200', '800'],
-        muted: {
+        code: {
           bg: ['50', '950'],
-          fg: ['700', '300'],
-        },
-        accent: {
-          fg: ['purple/600', 'purple/400'],
+          fg: ['600', '400'],
         },
+        fg: ['700', '300'],
+        icon: ['700 75%', '300 75%'],
         kbd: {
           bg: ['white', 'black'],
           fg: ['600', '400'],
           border: ['200', '800'],
         },
         link: {
-          fg: ['blue/700', 'blue/300'],
+          fg: ['blue/700 70%', 'blue/300 70%'],
         },
-        code: {
-          bg: ['50', '950'],
-          fg: ['700', '300'],
+        muted: {
+          bg: ['100', '950'],
+          fg: ['700 75%', '300 75%'],
         },
         skeleton: {
           from: ['100', '900'],
@@ -449,9 +451,9 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       selected: {
         _blend: ['screen', 'multiply'],
-        bg: ['500', '400'],
-        fg: ['white', 'black'],
-        icon: ['200', '800'],
+        accent: {
+          fg: ['purple/300', 'purple/700'],
+        },
         avatar: {
           '*': {
             _blend: ['multiply', 'screen'],
@@ -461,31 +463,31 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         badge: {
           '*': {
-            bg: ['700', '300'],
-            fg: ['white', 'black'],
-            dot: ['300', '700'],
-            icon: ['300', '700'],
+            bg: ['900', '100'],
+            fg: ['400', '600'],
+            dot: ['500', '500'],
+            icon: ['500', '500'],
           },
         },
+        bg: ['500', '400'],
         border: ['500 20%', '400 20%'],
-        muted: {
-          bg: ['950', '50'],
-          fg: ['200', '800'],
-        },
-        accent: {
-          fg: ['purple/200', 'purple/800'],
+        code: {
+          bg: ['500 20%', '400 20%'],
+          fg: ['200', '600'],
         },
+        fg: ['white', 'black'],
+        icon: ['100 70%', '900 70%'],
         kbd: {
-          bg: ['black/0', 'white/0'],
-          fg: ['white', 'black'],
-          border: ['gray/700', 'gray/300'],
+          bg: ['black', 'white'],
+          fg: ['200', '600'],
+          border: ['800', '200'],
         },
         link: {
-          fg: ['blue/200', 'blue/800'],
+          fg: ['blue/200', 'blue/600'],
         },
-        code: {
-          bg: ['500 20%', '400 20%'],
-          fg: ['300', '700'],
+        muted: {
+          bg: ['950', '50'],
+          fg: ['100 70%', '900 70%'],
         },
         skeleton: {
           from: ['900', '100'],
@@ -493,19 +495,35 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
       },
       disabled: {
+        _hue: 'gray',
+        accent: {
+          fg: ['200', '800'],
+        },
+        badge: {
+          '*': {
+            _hue: 'gray',
+            bg: ['50', '950'],
+            fg: ['gray/200', 'gray/800'],
+            dot: ['gray/200', 'gray/800'],
+            icon: ['gray/200', 'gray/800'],
+          },
+        },
+        border: ['100', '900'],
+        code: {
+          bg: ['50', '950'],
+          fg: ['200', '800'],
+        },
         fg: ['200', '800'],
         icon: ['200', '800'],
-        muted: {
+        kbd: {
+          bg: ['white', 'black'],
           fg: ['200', '800'],
-        },
-        accent: {
-          fg: ['purple/200', 'purple/800'],
+          border: ['100', '900'],
         },
         link: {
-          fg: ['blue/200', 'blue/800'],
+          fg: ['200', '800'],
         },
-        code: {
-          bg: ['50', '950'],
+        muted: {
           fg: ['200', '800'],
         },
       },