@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/{primitives → core/primitives}/popover/popover.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   MutableRefObject,
   RefCallback,
@@ -21,7 +22,7 @@ import {
   useRef,
 } from 'react'
 import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -59,6 +60,7 @@ export interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -72,19 +74,23 @@ export interface PopoverProps
   width?: PopoverWidth | PopoverWidth[]
 }
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
-    const theme = useTheme()
+    const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-      arrow: arrowProp = true,
+      arrow: arrowProp = false,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -94,6 +100,8 @@ export const Popover = memo(
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onActivate,
       open,
       overflow = 'hidden',
       padding: paddingProp,
@@ -107,7 +115,7 @@ export const Popover = memo(
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
@@ -127,7 +135,11 @@ export const Popover = memo(
     // Update width when
     // - media index changes
     // - `width` property changes
-    const width = calcCurrentWidth({mediaIndex, theme, width: widthArrayProp})
+    const width = calcCurrentWidth({
+      container,
+      mediaIndex,
+      width: widthArrayProp,
+    })
     const widthRef = useRef(width)
 
     useEffect(() => {
@@ -184,11 +196,7 @@ export const Popover = memo(
       }
 
       // Define distance between reference and floating element
-      ret.push(
-        offset({
-          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        }),
-      )
+      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
 
       // Track sizes
       if (constrainSize || matchReferenceWidth) {

package/src/{primitives → core/primitives}/popover/popoverCard.tsx

@@ -1,15 +1,17 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
-import {ThemeColorSchemeKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
-import {useLayer} from '../../utils'
+import {Arrow, useLayer} from '../../utils'
 import {Card} from '../card'
 import {Flex} from '../flex'
-import {DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_MARGINS} from './constants'
-import {PopoverArrow} from './popoverArrow'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
 
 const Root = styled(Card)({
   '&:not([hidden])': {
@@ -67,8 +69,8 @@ export const PopoverCard = memo(
       y: yProp,
       ...restProps
     } = props
+
     const {zIndex} = useLayer()
-    const toneContext = useToneContext()
 
     // Get margins: [top, right, bottom, left]
     const margins: PopoverMargins = useMemo(
@@ -92,36 +94,28 @@ export const PopoverCard = memo(
       [strategy, style, width, x, y, zIndex],
     )
 
-    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-    const arrowStyle: CSSProperties = useMemo(() => {
-      const style: CSSProperties = {
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
         left: arrowX !== null ? arrowX : undefined,
         top: arrowY !== null ? arrowY : undefined,
         right: undefined,
         bottom: undefined,
-      }
-
-      if (staticSide) style[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH
-
-      return style
-    }, [arrowX, arrowY, staticSide])
+      }),
+      [arrowX, arrowY],
+    )
 
     return (
       <Root
         data-ui="Popover"
         {...restProps}
-        data-tone={tone}
         data-placement={placement}
         radius={radius}
         ref={ref}
         scheme={scheme}
         shadow={shadow}
         sizing="border"
-        // The popover creates a new html element, so it's out of context of the css variables generated in the cards.
-        updateCssVars
-        tone={tone === 'inherit' ? toneContext.tone : tone}
         style={rootStyle}
+        tone={tone}
       >
         <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>
@@ -129,7 +123,15 @@ export const PopoverCard = memo(
           </Flex>
         </Flex>
 
-        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
       </Root>
     )
   }),

package/src/{primitives → core/primitives}/popover/types.ts

@@ -2,5 +2,5 @@
 export type PopoverUpdateCallback = () => void
 
 /** @public */
-// TODO: remove `auto` from PopoverWidth
+// todo: remove `auto` from PopoverWidth
 export type PopoverWidth = number | 'auto'

package/src/{primitives → core/primitives}/radio/radio.tsx

@@ -14,6 +14,8 @@ const Root = styled.div(radioBaseStyle)
 const Input = styled.input(inputElementStyle)
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export const Radio = forwardRef(function Radio(

package/src/{primitives → core/primitives}/radio/styles.ts

@@ -1,7 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 
 export function radioBaseStyle(): ReturnType<typeof css> {
   return css`
@@ -18,9 +18,7 @@ export function radioBaseStyle(): ReturnType<typeof css> {
 }
 
 export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.radio
+  const {color, input} = getTheme_v2(props.theme)
   const dist = (input.radio.size - input.radio.markSize) / 2
 
   return css`
@@ -45,9 +43,9 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       height: ${rem(input.radio.size)};
       width: ${rem(input.radio.size)};
       border-radius: ${rem(input.radio.size / 2)};
-      background: ${cssVars.default['bg-base']};
+      background: ${color.input.default.enabled.bg};
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
 
@@ -59,7 +57,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: ${cssVars.default['text-secondary']};
+        background: ${color.input.default.enabled.fg};
         opacity: 0;
       }
     }
@@ -67,14 +65,14 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
     /* focused */
     &:not(:disabled):focus + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: cssVars.default['border-base']},
-        focusRing,
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.radio.focusRing,
       })};
     }
 
     &:not(:disabled):focus:not(:focus-visible) + span {
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
     }
@@ -85,33 +83,33 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
 
     /* customValidity */
     &[data-error] + span {
-      background-color: ${cssVars.critical['border-base']};
+      background-color: ${color.input.invalid.enabled.border};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: cssVars.critical['text-secondary'],
+        color: color.input.invalid.enabled.muted.bg,
       })};
       &::after {
-        background: ${cssVars.critical['text-secondary']};
+        background: ${color.input.invalid.enabled.muted.bg};
       }
     }
 
     /* read only */
     &[data-read-only] + span {
-      box-shadow: 0 0 0 1px ${cssVars.default['border-base']};
-      background: ${cssVars.default['bg-tint']};
+      box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      background: ${color.input.default.readOnly.bg};
 
       &::after {
-        background: ${cssVars.default['border-base']};
+        background: ${color.input.default.readOnly.border};
       }
     }
 
     /* disabled */
     &:not([data-read-only]):disabled + span {
-      box-shadow: 0 0 0 1px ${cssVars.default['border-base']};
-      background: ${cssVars.default['bg-tint']};
+      box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      background: ${color.input.default.disabled.bg};
 
       &::after {
-        background: ${cssVars.default['border-base']};
+        background: ${color.input.default.disabled.border};
       }
     }
   `

package/src/{primitives → core/primitives}/select/select.tsx

@@ -1,4 +1,4 @@
-import {SelectIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
@@ -30,6 +30,8 @@ const Input = styled.select<{
 const IconBox = styled(Box)(selectStyle.iconBox)
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export const Select = forwardRef(function Select(
@@ -70,7 +72,7 @@ export const Select = forwardRef(function Select(
 
       <IconBox padding={padding}>
         <Text size={fontSize}>
-          <SelectIcon />
+          <ChevronDownIcon />
         </Text>
       </IconBox>
     </Root>

package/src/{primitives → core/primitives}/select/styles.ts

@@ -1,3 +1,5 @@
+import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
@@ -7,14 +9,12 @@ import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
 } from '../../styles/internal'
-import {ThemeFontSize} from '../../theme'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-import {CSSObject} from '../../types/styled'
 
 function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
     width: stretch;
 
     &:not([hidden]) {
@@ -24,14 +24,13 @@ function rootStyle(): ReturnType<typeof css> {
 }
 
 function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const font = theme.sanity.fonts.text
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
-    font-family: ${font.family};
+    font-family: ${font.text.family};
     color: inherit;
     width: 100%;
     outline: none;
@@ -44,26 +43,24 @@ function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
 }
 
 function inputColorStyle(props: ThemeProps) {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.select
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     /* enabled */
-    background-color: ${cssVars.default['bg-base']};
-    color: ${cssVars.default['text-primary']};
+    background-color: ${color.input.default.enabled.bg};
+    color: ${color.input.default.enabled.fg};
     box-shadow: ${focusRingBorderStyle({
-      color: cssVars.default['border-base'],
+      color: color.input.default.enabled.border,
       width: input.border.width,
     })};
 
     /* hovered */
     @media (hover: hover) {
       &:not(:disabled):hover {
-        background-color: ${cssVars.default['bg-base-hover']};
-        color: ${cssVars.default['text-primary']};
+        background-color: ${color.input.default.hovered.bg};
+        color: ${color.input.default.hovered.fg};
         box-shadow: ${focusRingBorderStyle({
-          color: cssVars.default['border-base-hover'],
+          color: color.input.default.hovered.border,
           width: input.border.width,
         })};
       }
@@ -72,27 +69,27 @@ function inputColorStyle(props: ThemeProps) {
     /* focused */
     &:not(:disabled):focus {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: cssVars.default['border-base']},
-        focusRing,
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.select.focusRing,
       })};
     }
 
     /* read-only */
     &[data-read-only] {
-      background-color: ${cssVars.default['bg-tint']};
-      color: ${cssVars.default['text-primary']};
+      background-color: ${color.input.default.readOnly.bg};
+      color: ${color.input.default.readOnly.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.input.default.readOnly.border,
         width: input.border.width,
       })};
     }
 
     /* disabled */
     &:not([data-read-only]):disabled {
-      background-color: ${cssVars.default['bg-tint']};
-      color: ${cssVars.default['text-primary']};
+      background-color: ${color.input.default.disabled.bg};
+      color: ${color.input.default.disabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.input.default.disabled.border,
         width: input.border.width,
       })};
     }
@@ -104,11 +101,11 @@ function textSize(size: ThemeFontSize) {
 }
 
 function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
-  const {theme, $fontSize} = props
-  const {sizes} = theme.sanity.fonts.text
+  const {$fontSize} = props
+  const {font, media} = getTheme_v2(props.theme)
 
-  return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
-    textSize(sizes[sizeIndex] || sizes[2]),
+  return _responsive(media, $fontSize, (sizeIndex) =>
+    textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
   )
 }
 
@@ -131,7 +128,9 @@ function inputStyle(): Array<
   ]
 }
 
-function iconBoxStyle(): ReturnType<typeof css> {
+function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
+  const {color} = getTheme_v2(props.theme)
+
   return css`
     pointer-events: none;
     position: absolute;
@@ -139,23 +138,23 @@ function iconBoxStyle(): ReturnType<typeof css> {
     right: 0;
 
     /* enabled */
-    ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
+    --card-fg-color: ${color.input.default.enabled.fg};
 
     /* hover */
     @media (hover: hover) {
       select:not(disabled):not(:read-only):hover + && {
-        ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
+        --card-fg-color: ${color.input.default.hovered.fg};
       }
     }
 
     /* disabled */
     select:disabled + && {
-      ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
+      --card-fg-color: ${color.input.default.disabled.fg};
     }
 
     /* read-only */
     select[data-read-only] + && {
-      ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
+      --card-fg-color: ${color.input.default.readOnly.fg};
     }
   `
 }

package/src/{primitives → core/primitives}/spinner/spinner.tsx

@@ -28,6 +28,8 @@ const Root = styled(Text)`
 `
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export const Spinner = forwardRef(function Spinner(

package/src/{primitives → core/primitives}/stack/stack.tsx

@@ -15,6 +15,8 @@ export interface StackProps extends BoxProps {
 const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export const Stack = forwardRef(function Stack(

package/src/{primitives → core/primitives}/stack/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]
@@ -23,8 +23,7 @@ export function stackBaseStyle(): CSSObject {
 export function responsiveStackSpaceStyle(
   props: ResponsiveStackSpaceStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex]),

package/src/{primitives → core/primitives}/switch/__workshop__/example.tsx

@@ -13,7 +13,7 @@ export default function ExampleStory() {
       <Flex align="center" as="label">
         <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
         <Box marginLeft={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Label
           </Text>
         </Box>

package/src/core/primitives/switch/__workshop__/props.tsx

@@ -0,0 +1,21 @@
+import {Flex, Switch} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useCallback} from 'react'
+
+export default function PropsStory() {
+  const checked = useBoolean('Checked', false)
+  const indeterminate = useBoolean('Indeterminate', false)
+  const readOnly = useBoolean('Read only', false)
+  const handleChange = useCallback(() => undefined, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Switch
+        checked={checked}
+        indeterminate={indeterminate}
+        onChange={handleChange}
+        readOnly={readOnly}
+      />
+    </Flex>
+  )
+}

package/src/{primitives → core/primitives}/switch/styles.ts

@@ -1,7 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 
 /* Root */
 export function switchBaseStyles(): ReturnType<typeof css> {
@@ -36,13 +36,11 @@ export function switchInputStyles(): ReturnType<typeof css> {
 
 /* Representation */
 export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.switch
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
-    --switch-bg-color: ${cssVars.default['border-base']};
-    --switch-fg-color: ${cssVars.default['bg-base']};
+    --switch-bg-color: ${color.input.default.enabled.border};
+    --switch-fg-color: ${color.input.default.enabled.bg};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -71,7 +69,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
 
     /* Focus styles */
     input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({focusRing})};
+      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
     }
 
     input:focus:not(:focus-visible) + && {
@@ -79,38 +77,37 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: ${cssVars.positive['border-accent']};
-      --switch-fg-color: ${cssVars.positive['bg-base']};
+      --switch-bg-color: ${color.input.default.enabled.fg};
+      --switch-fg-color: ${color.input.default.enabled.bg};
     }
 
     @media (hover: hover) {
       input:not(:disabled):hover + && {
-        --switch-bg-color: ${cssVars.default['border-base']};
-        --switch-fg-color: ${cssVars.default['bg-base']};
+        --switch-bg-color: ${color.input.default.hovered.border};
+        --switch-fg-color: ${color.input.default.hovered.bg};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${cssVars.positive['border-accent']};
-        --switch-fg-color: ${cssVars.positive['bg-base']};
+        --switch-bg-color: ${color.input.default.enabled.fg};
+        --switch-fg-color: ${color.input.default.enabled.bg};
       }
     }
 
     input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${cssVars.default['border-base']};
-      --switch-fg-color: ${cssVars.default['bg-tint']};
+      --switch-bg-color: ${color.input.default.disabled.border};
+      --switch-fg-color: ${color.input.default.disabled.bg};
     }
 
     input[data-read-only]:disabled + && {
-      --switch-bg-color: ${cssVars.default['border-base']};
-      --switch-fg-color: ${cssVars.default['bg-tint']};
+      --switch-bg-color: ${color.input.default.readOnly.border};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
     }
   `
 }
 
 /* Track */
 export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
+  const {input} = getTheme_v2(props.theme)
 
   return css`
     &:not([hidden]) {
@@ -130,8 +127,8 @@ export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
 export function switchThumbStyles(
   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$indeterminate, theme} = props
-  const {input} = theme.sanity
+  const {$indeterminate} = props
+  const {input} = getTheme_v2(props.theme)
   const trackWidth = input.switch.width
   const trackHeight = input.switch.height
   const trackPadding = input.switch.padding

package/src/{primitives → core/primitives}/switch/switch.tsx

@@ -23,6 +23,10 @@ const Track = styled.span(switchTrackStyles)
 const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export const Switch = forwardRef(function Switch(