@sanity/ui 1.8.1 → 2.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.8.1",
+  "version": "2.0.0-alpha.1",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -46,53 +46,70 @@
     "watch": "pkg watch --strict",
     "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
     "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.16.1",
+    "framer-motion": "^10.16.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
-    "@sanity/semantic-release-preset": "^4.1.3",
+    "@sanity/semantic-release-preset": "^4.1.4",
     "@sanity/ui-workshop": "^1.2.11",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-docs": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/addon-themes": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/manager-api": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/theming": "^7.4.5",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.5.4",
+    "@types/node": "^20.5.9",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.17.4",
-    "cypress-real-events": "^1.10.0",
+    "cypress": "^13.1.0",
+    "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.2",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.14",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
@@ -101,17 +118,18 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.1.0",
+    "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
+    "storybook": "^7.4.5",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/autocomplete/autocomplete.tsx

@@ -31,6 +31,7 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {Radius} from '../../types'
 import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
@@ -64,7 +65,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
     Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
   renderOption?: (option: Option) => ReactElement

package/src/components/dialog/dialog.tsx

@@ -12,7 +12,7 @@ import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
-import {DialogPosition} from '../../types'
+import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {
   dialogStyle,
@@ -33,7 +33,7 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
    * @beta
    */
   __unstable_hideCloseButton?: boolean
-  cardRadius?: number | number[]
+  cardRadius?: Radius | Radius[]
   cardShadow?: number | number[]
   contentRef?: React.ForwardedRef<HTMLDivElement>
   footer?: React.ReactNode
@@ -66,7 +66,7 @@ interface DialogCardProps extends ResponsiveWidthProps {
   onClickOutside?: () => void
   onClose?: () => void
   portal?: string
-  radius: number | number[]
+  radius: Radius | Radius[]
   scheme?: ThemeColorSchemeKey
   shadow: number | number[]
 }

package/src/components/hotkeys/hotkeys.tsx

@@ -2,6 +2,7 @@ import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
+import {Radius} from '../../types'
 
 /**
  * @public
@@ -9,7 +10,7 @@ import {Inline, KBD} from '../../primitives'
 export interface HotkeysProps {
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   keys?: string[]
 }

package/src/components/menu/menuButton.tsx

@@ -2,7 +2,7 @@ import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, use
 import {isElement} from 'react-is'
 import {Popover, PopoverProps} from '../../primitives'
 import {ThemeColorSchemeKey} from '../../theme'
-import {Placement} from '../../types'
+import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'
 
 /**
@@ -34,7 +34,7 @@ export interface MenuButtonProps {
   /**
    * @deprecated Use `popover={{radius: 2}}` instead.
    */
-  popoverRadius?: number | number[]
+  popoverRadius?: Radius | Radius[]
   /**
    * @beta Do not use in production.
    * @deprecated Use `popover={{portal: true}}` instead.

package/src/components/menu/menuGroup.tsx

@@ -4,7 +4,7 @@ import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {SelectableTone} from '../../types/selectable'
+import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
 
@@ -17,7 +17,7 @@ export interface MenuGroupProps {
   icon?: React.ElementType | React.ReactNode
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone

package/src/components/tab/tab.tsx

@@ -38,7 +38,7 @@ export const Tab = forwardRef(function Tab(
     icon,
     id,
     focused,
-    fontSize,
+    fontSize = 1,
     label,
     onClick,
     onFocus,
@@ -88,6 +88,7 @@ export const Tab = forwardRef(function Tab(
       onBlur={handleBlur}
       onFocus={handleFocus}
       padding={padding}
+      radius="full"
       ref={setRef}
       role="tab"
       selected={selected}

package/src/primitives/avatar/styles.ts

@@ -57,7 +57,7 @@ function avatarArrowStyle(): CSSObject {
 
 export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
   const {$color, theme} = props
-  const {focusRing} = theme.sanity
+  const {focusRing} = theme.sanity.avatar
 
   return {
     backgroundColor: $color,

package/src/primitives/button/button.tsx

@@ -30,6 +30,7 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   selected?: boolean
   space?: number | number[]
   textAlign?: ButtonTextAlign
+  muted?: boolean
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
@@ -64,7 +65,7 @@ export const Button = forwardRef(function Button(
   const {
     children,
     disabled,
-    fontSize,
+    fontSize = 1,
     icon,
     iconRight,
     justify: justifyProp = 'center',
@@ -84,6 +85,7 @@ export const Button = forwardRef(function Button(
     textAlign,
     tone = 'default',
     type = 'button',
+    muted = false,
     ...restProps
   } = props
 
@@ -135,7 +137,7 @@ export const Button = forwardRef(function Button(
 
       {(icon || text || iconRight) && (
         <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify}>
+          <Flex as="span" justify={justify} gap={space}>
             {icon && (
               <Text size={fontSize}>
                 {isValidElement(icon) && icon}
@@ -144,12 +146,9 @@ export const Button = forwardRef(function Button(
             )}
 
             {text && (
-              <Box
-                flex={iconRight ? 1 : undefined}
-                marginLeft={icon ? space : undefined}
-                marginRight={iconRight ? space : undefined}
-              >
+              <Box flex={iconRight ? 1 : undefined}>
                 <Text
+                  muted={muted}
                   align={textAlign}
                   size={fontSize}
                   textOverflow="ellipsis"

package/src/primitives/button/styles.ts

@@ -42,6 +42,11 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
 }
 
 const buttonTheme = {border: {width: 1}}
+const defaultBoxShadow = '0px 2px 0px 0px rgba(112, 128, 155, 0.19);'
+
+function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+  return boxShadows.filter(Boolean).join(',')
+}
 
 /**
  * @internal
@@ -50,7 +55,8 @@ export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
   const {$mode, theme} = props
-  const {focusRing} = theme.sanity
+  const {focusRing} = theme.sanity.button
+  const shadow = props.$mode !== 'bleed'
   const base = theme.sanity.color.base
   const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
   const color = mode[props.$tone] || mode.default
@@ -64,11 +70,22 @@ export function buttonColorStyles(
       boxShadow: focusRingBorderStyle(border),
       '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
       "&:not([data-disabled='true'])": {
+        boxShadow: combineBoxShadow(
+          focusRingBorderStyle(border),
+          shadow ? defaultBoxShadow : undefined,
+        ),
         '&:focus': {
-          boxShadow: focusRingStyle({base, border, focusRing}),
+          boxShadow: focusRingStyle({
+            base,
+            border: {width: 2, color: base.bg},
+            focusRing,
+          }),
         },
         '&:focus:not(:focus-visible)': {
-          boxShadow: focusRingBorderStyle(border),
+          boxShadow: combineBoxShadow(
+            focusRingBorderStyle(border),
+            shadow ? defaultBoxShadow : undefined,
+          ),
         },
         '@media (hover: hover)': {
           '&:hover': _colorVarsStyle(base, color.hovered),

package/src/primitives/card/styles.ts

@@ -47,7 +47,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, $focusRing, theme} = props
-  const {focusRing} = theme.sanity
+  const {focusRing} = theme.sanity.card
   const {base, card, dark} = theme.sanity.color
   const border = {width: 0, color: 'var(--card-border-color)'}
 

package/src/primitives/checkbox/checkbox.tsx

@@ -47,6 +47,7 @@ export const Checkbox = forwardRef(function Checkbox(
     <Root className={className} data-ui="Checkbox" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
         {...restProps}
         checked={checked}
         disabled={disabled || readOnly}

package/src/primitives/checkbox/styles.ts

@@ -12,7 +12,8 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const color = theme.sanity.color.input
-  const {focusRing, input, radius} = theme.sanity
+  const {input, radius} = theme.sanity
+  const {focusRing} = input.checkbox
 
   return css`
     position: absolute;
@@ -49,27 +50,58 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 2 !important;
+          stroke-width: 1.2 !important;
         }
       }
     }
+    &:checked + span {
+      background: ${color.default.enabled.bg2};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.default.enabled.bg2,
+        width: input.border.width,
+      })};
+      color: ${color.default.enabled.bg};
+    }
+
+    /* focus */
+    &:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({focusRing})};
+    }
+
+    /* focus when checked - uses a different offset */
+    &:not(:disabled):focus:focus-visible&:checked + span {
+      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
+    }
 
-    &:not(:disabled):focus + span {
+    &[data-error] + span {
+      background-color: ${color.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.invalid.enabled.bg2,
+      })};
+      color: ${color.default.disabled.fg};
+    }
+    &[data-error]&:checked + span {
+      background-color: ${color.invalid.enabled.bg2};
+      color: ${color.default.enabled.bg};
+    }
+    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
-        focusRing,
+        border: {width: input.border.width, color: color.invalid.readOnly.bg2},
+        focusRing: {width: 1, offset: 1},
       })};
     }
 
-    &:not(:disabled):focus:not(:focus-visible) + span {
+    &:disabled + span {
+      background-color: ${color.default.disabled.bg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
         width: input.border.width,
+        color: color.default.disabled.border,
       })};
+      color: ${color.default.disabled.fg};
     }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
+    &:disabled&:checked + span {
+      background-color: ${color.default.disabled.bg2};
     }
 
     &[data-read-only] + span {
@@ -81,15 +113,13 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       color: ${color.default.readOnly.fg};
     }
 
-    &:not([data-read-only]):disabled + span {
-      background-color: ${color.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.default.disabled.border,
-      })};
-      color: ${color.default.disabled.fg};
+    &[data-read-only]&:checked + span {
+      background-color: ${color.default.readOnly.bg2};
     }
 
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
     &:indeterminate + span > svg:last-child {
       opacity: 1;
     }

package/src/primitives/kbd/kbd.tsx

@@ -2,8 +2,9 @@ import {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {Radius} from '../../types'
 import {Box} from '../box'
-import {Code} from '../code'
+import {Text} from '../text'
 
 /**
  * @public
@@ -12,14 +13,13 @@ export interface KBDProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 function kbdStyle() {
   return css`
-    background: var(--card-bg-color);
+    background: var(--card-bg2-color);
     font: inherit;
-    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
 
     &:not([hidden]) {
       display: inline-block;
@@ -41,9 +41,9 @@ export const KBD = forwardRef(function KBD(
   return (
     <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
-        <Code as="span" muted size={fontSize}>
+        <Text as="span" muted size={fontSize} weight="medium">
           {children}
-        </Code>
+        </Text>
       </Box>
     </Root>
   )

package/src/primitives/popover/constants.ts

@@ -1,7 +1,21 @@
-import {PopoverMargins} from '../../types'
+import {Placement, PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
 export const DEFAULT_POPOVER_ARROW_WIDTH = 27
 export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
+export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
+  top: ['bottom', 'left', 'right'],
+  'top-start': ['bottom-start', 'left-start', 'right-start'],
+  'top-end': ['bottom-end', 'left-end', 'right-end'],
+  bottom: ['top', 'left', 'right'],
+  'bottom-start': ['top-start', 'left-start', 'right-start'],
+  'bottom-end': ['top-end', 'left-end', 'right-end'],
+  left: ['right', 'top', 'bottom'],
+  'left-start': ['right-start', 'top-start', 'bottom-start'],
+  'left-end': ['right-end', 'top-end', 'bottom-end'],
+  right: ['left', 'top', 'bottom'],
+  'right-start': ['left-start', 'top-start', 'bottom-start'],
+  'right-end': ['left-end', 'top-end', 'bottom-end'],
+}

package/src/primitives/popover/popover.tsx

@@ -28,6 +28,7 @@ import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
   DEFAULT_POPOVER_MARGINS,
+  DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
@@ -89,7 +90,8 @@ export const Popover = memo(
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       open,

package/src/primitives/popover/popoverCard.tsx

@@ -3,7 +3,7 @@ import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
 import {FLOATING_STATIC_SIDES} from '../../constants'
 import {ThemeColorSchemeKey} from '../../theme'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {useLayer} from '../../utils'
 import {Card} from '../card'
 import {Flex} from '../flex'
@@ -34,7 +34,7 @@ export const PopoverCard = memo(
       overflow?: BoxOverflow
       padding?: number | number[]
       placement?: Placement
-      radius?: number | number[]
+      radius?: Radius | Radius[]
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
       strategy: Strategy

package/src/primitives/radio/radio.tsx

@@ -29,6 +29,7 @@ export const Radio = forwardRef(function Radio(
     <Root className={className} data-ui="Radio" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
         {...restProps}
         disabled={disabled || readOnly}
         readOnly={readOnly}

package/src/primitives/radio/styles.ts

@@ -18,7 +18,8 @@ export function radioBaseStyle(): ReturnType<typeof css> {
 
 export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
+  const {input} = theme.sanity
+  const {focusRing} = input.radio
   const color = theme.sanity.color.input
   const dist = (input.radio.size - input.radio.markSize) / 2
 
@@ -58,7 +59,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
         height: ${rem(input.radio.markSize)};
         width: ${rem(input.radio.markSize)};
         border-radius: ${rem(input.radio.markSize / 2)};
-        background: ${color.default.enabled.fg};
+        background: ${color.default.enabled.bg2};
         opacity: 0;
       }
     }
@@ -82,13 +83,25 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       opacity: 1;
     }
 
+    /* customValidity */
+    &[data-error] + span {
+      background-color: ${color.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.invalid.enabled.bg2,
+      })};
+      &::after {
+        background: ${color.invalid.enabled.bg2};
+      }
+    }
+
     /* read only */
     &[data-read-only] + span {
       box-shadow: 0 0 0 1px ${color.default.readOnly.border};
       background: ${color.default.readOnly.bg};
 
       &::after {
-        background: ${color.default.readOnly.fg};
+        background: ${color.default.readOnly.border};
       }
     }
 
@@ -98,7 +111,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       background: ${color.default.disabled.bg};
 
       &::after {
-        background: ${color.default.disabled.fg};
+        background: ${color.default.disabled.border};
       }
     }
   `

package/src/primitives/select/select.tsx

@@ -2,6 +2,7 @@ import {SelectIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
+import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
 import {selectStyle} from './styles'
@@ -12,7 +13,7 @@ import {selectStyle} from './styles'
 export interface SelectProps {
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   customValidity?: string
 }
@@ -22,7 +23,7 @@ const Root = styled.div(selectStyle.root)
 const Input = styled.select<{
   $fontSize: number[]
   $padding: number[]
-  $radius: number[]
+  $radius: Radius[]
   $space: number[]
 }>(selectStyle.input)
 

package/src/primitives/select/styles.ts

@@ -43,7 +43,8 @@ function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
 
 function inputColorStyle(props: ThemeProps) {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
+  const {input} = theme.sanity
+  const {focusRing} = input.select
   const color = theme.sanity.color.input
 
   return css`