@sanity/ui 1.8.3 → 2.0.0-alpha.10

package/src/primitives/code/styles.ts

@@ -1,57 +1,66 @@
-import {css, ExecutionContext} from 'styled-components'
+import {purple, green, yellow, orange, cyan, gray, red, blue, magenta} from '@sanity/color'
+import {css} from 'styled-components'
+import {ThemeColorSchemeKey} from '../../theme'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 
-function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
-  const color = theme.sanity.color.syntax
+function codeSyntaxHighlightingStyle(scheme: ThemeColorSchemeKey) {
+  const dark = scheme === 'dark'
+  const mainShade = dark ? 400 : 600
+  const secondaryShade = dark ? 600 : 400
 
   return {
-    '&.atrule': {color: color.atrule},
-    '&.attr-name': {color: color.attrName},
-    '&.attr-value': {color: color.attrValue},
-    '&.attribute': {color: color.attribute},
-    '&.boolean': {color: color.boolean},
-    '&.builtin': {color: color.builtin},
-    '&.cdata': {color: color.cdata},
-    '&.char': {color: color.char},
-    '&.class': {color: color.class},
-    '&.class-name': {color: color.className},
-    '&.comment': {color: color.comment},
-    '&.constant': {color: color.constant},
-    '&.deleted': {color: color.deleted},
-    '&.doctype': {color: color.doctype},
-    '&.entity': {color: color.entity},
-    '&.function': {color: color.function},
-    '&.hexcode': {color: color.hexcode},
-    '&.id': {color: color.id},
-    '&.important': {color: color.important},
-    '&.inserted': {color: color.inserted},
-    '&.keyword': {color: color.keyword},
-    '&.number': {color: color.number},
-    '&.operator': {color: color.operator},
-    '&.prolog': {color: color.prolog},
-    '&.property': {color: color.property},
-    '&.pseudo-class': {color: color.pseudoClass},
-    '&.pseudo-element': {color: color.pseudoElement},
-    '&.punctuation': {color: color.punctuation},
-    '&.regex': {color: color.regex},
-    '&.selector': {color: color.selector},
-    '&.string': {color: color.string},
-    '&.symbol': {color: color.symbol},
-    '&.tag': {color: color.tag},
-    '&.unit': {color: color.unit},
-    '&.url': {color: color.url},
-    '&.variable': {color: color.variable},
+    '&.atrule': {color: purple[mainShade].hex},
+    '&.attr-name': {color: green[mainShade].hex},
+    '&.attr-value': {color: yellow[mainShade].hex},
+    '&.attribute': {color: yellow[mainShade].hex},
+    '&.boolean': {color: purple[mainShade].hex},
+    '&.builtin': {color: purple[mainShade].hex},
+    '&.cdata': {color: yellow[mainShade].hex},
+    '&.char': {color: yellow[mainShade].hex},
+    '&.class': {color: orange[mainShade].hex},
+    '&.class-name': {color: cyan[mainShade].hex},
+    '&.comment': {color: gray[secondaryShade].hex},
+    '&.constant': {color: purple[mainShade].hex},
+    '&.deleted': {color: red[mainShade].hex},
+    '&.doctype': {color: gray[secondaryShade].hex},
+    '&.entity': {color: red[mainShade].hex},
+    '&.function': {color: green[mainShade].hex},
+    '&.hexcode': {color: blue[mainShade].hex},
+    '&.id': {color: purple[mainShade].hex},
+    '&.important': {color: purple[mainShade].hex},
+    '&.inserted': {color: yellow[mainShade].hex},
+    '&.keyword': {color: magenta[mainShade].hex},
+    '&.number': {color: purple[mainShade].hex},
+    '&.operator': {color: magenta[mainShade].hex},
+    '&.prolog': {color: gray[secondaryShade].hex},
+    '&.property': {color: blue[mainShade].hex},
+    '&.pseudo-class': {color: yellow[mainShade].hex},
+    '&.pseudo-element': {color: yellow[mainShade].hex},
+    '&.punctuation': {color: gray[mainShade].hex},
+    '&.regex': {color: blue[mainShade].hex},
+    '&.selector': {color: red[mainShade].hex},
+    '&.string': {color: yellow[mainShade].hex},
+    '&.symbol': {color: purple[mainShade].hex},
+    '&.tag': {color: red[mainShade].hex},
+    '&.unit': {color: orange[mainShade].hex},
+    '&.url': {color: red[mainShade].hex},
+    '&.variable': {color: red[mainShade].hex},
   }
 }
 
-export function codeBaseStyle(): ReturnType<typeof css> {
+export interface CodeBaseStyleProps {
+  $scheme: ThemeColorSchemeKey
+}
+
+export function codeBaseStyle(props: CodeBaseStyleProps): ReturnType<typeof css> {
   return css`
-    color: var(--card-code-fg-color);
+    color: ${cssVars.default['text-code']};
 
     & code {
       font-family: inherit;
 
       &.refractor .token {
-        ${codeSyntaxHighlightingStyle}
+        ${codeSyntaxHighlightingStyle(props.$scheme)}
       }
     }
 

package/src/primitives/heading/styles.ts

@@ -1,5 +1,6 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
+import {cssVars} from '../../theme'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
@@ -8,12 +9,12 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
   return css`
     ${$accent &&
     css`
-      color: var(--card-accent-fg-color);
+      color: ${cssVars.default['text-accent']}};
     `}
 
     ${$muted &&
     css`
-      color: var(--card-muted-fg-color);
+      color: ${cssVars.mutable['muted-fg-color']};
     `}
 
     & code {
@@ -24,7 +25,7 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
     & a {
       text-decoration: none;
       border-radius: 1px;
-      color: var(--card-link-color);
+      color: ${cssVars.default['text-link']};
       outline: none;
 
       @media (hover: hover) {
@@ -35,8 +36,8 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
 
       &:focus {
         box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
+          0 0 0 1px ${cssVars.mutable['bg-color']},
+          0 0 0 3px ${cssVars.positive['border-accent']};
       }
 
       &:focus:not(:focus-visible) {

package/src/primitives/kbd/kbd.tsx

@@ -2,8 +2,10 @@ import {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {cssVars} from '../../theme'
+import {Radius} from '../../types'
 import {Box} from '../box'
-import {Code} from '../code'
+import {Text} from '../text'
 
 /**
  * @public
@@ -12,14 +14,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: ${cssVars.default['bg-tint']};
     font: inherit;
-    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
 
     &:not([hidden]) {
       display: inline-block;
@@ -41,9 +42,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/label/styles.ts

@@ -1,5 +1,6 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
+import {cssVars} from '../../theme'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
@@ -12,12 +13,12 @@ export function labelBaseStyle(
 
     ${$accent &&
     css`
-      color: var(--card-accent-fg-color);
+      color: ${cssVars.default['text-accent']}};
     `}
 
     ${$muted &&
     css`
-      color: var(--card-muted-fg-color);
+      color: ${cssVars.mutable['muted-fg-color']};
     `}
 
     & code {

package/src/primitives/popover/popoverArrow.tsx

@@ -1,5 +1,6 @@
 import {forwardRef} from 'react'
 import styled from 'styled-components'
+import {cssVars} from '../../theme'
 import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
 
 const Root = styled.div`
@@ -48,11 +49,11 @@ const Root = styled.div`
 `
 
 const BorderPath = styled.path`
-  fill: var(--card-shadow-outline-color);
+  fill: ${cssVars.default['base-shadow-outline-color']};
 `
 
 const ShapePath = styled.path`
-  fill: var(--card-bg-color);
+  fill: ${cssVars.mutable['bg-color']};
 `
 
 export const PopoverArrow = forwardRef(function PopoverArrow(

package/src/primitives/popover/popoverCard.tsx

@@ -3,7 +3,8 @@ 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 {useToneContext} from '../../theme/toneContext/useToneContext'
+import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {useLayer} from '../../utils'
 import {Card} from '../card'
 import {Flex} from '../flex'
@@ -34,7 +35,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
@@ -66,8 +67,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(
@@ -110,14 +111,17 @@ export const PopoverCard = memo(
       <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}>

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

@@ -1,6 +1,7 @@
 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,8 +19,8 @@ export function radioBaseStyle(): ReturnType<typeof css> {
 
 export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.input
+  const {input} = theme.sanity
+  const {focusRing} = input.radio
   const dist = (input.radio.size - input.radio.markSize) / 2
 
   return css`
@@ -44,9 +45,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: ${color.default.enabled.bg};
+      background: ${cssVars.default['bg-base']};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
 
@@ -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: ${cssVars.default['text-secondary']};
         opacity: 0;
       }
     }
@@ -66,14 +67,14 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
     /* focused */
     &:not(:disabled):focus + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
+        border: {width: input.border.width, color: cssVars.default['border-base']},
         focusRing,
       })};
     }
 
     &:not(:disabled):focus:not(:focus-visible) + span {
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
     }
@@ -82,23 +83,35 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       opacity: 1;
     }
 
+    /* customValidity */
+    &[data-error] + span {
+      background-color: ${cssVars.critical['border-base']};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: cssVars.critical['text-secondary'],
+      })};
+      &::after {
+        background: ${cssVars.critical['text-secondary']};
+      }
+    }
+
     /* read only */
     &[data-read-only] + span {
-      box-shadow: 0 0 0 1px ${color.default.readOnly.border};
-      background: ${color.default.readOnly.bg};
+      box-shadow: 0 0 0 1px ${cssVars.default['border-base']};
+      background: ${cssVars.default['bg-tint']};
 
       &::after {
-        background: ${color.default.readOnly.fg};
+        background: ${cssVars.default['border-base']};
       }
     }
 
     /* disabled */
     &:not([data-read-only]):disabled + span {
-      box-shadow: 0 0 0 1px ${color.default.disabled.border};
-      background: ${color.default.disabled.bg};
+      box-shadow: 0 0 0 1px ${cssVars.default['border-base']};
+      background: ${cssVars.default['bg-tint']};
 
       &::after {
-        background: ${color.default.disabled.fg};
+        background: ${cssVars.default['border-base']};
       }
     }
   `

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

@@ -8,12 +8,13 @@ import {
   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: -webkit-fill-available;
     width: stretch;
 
     &:not([hidden]) {
@@ -44,25 +45,25 @@ function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
 
 function inputColorStyle(props: ThemeProps) {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.input
+  const {input} = theme.sanity
+  const {focusRing} = input.select
 
   return css`
     /* enabled */
-    background-color: ${color.default.enabled.bg};
-    color: ${color.default.enabled.fg};
+    background-color: ${cssVars.default['bg-base']};
+    color: ${cssVars.default['text-primary']};
     box-shadow: ${focusRingBorderStyle({
-      color: color.default.enabled.border,
+      color: cssVars.default['border-base'],
       width: input.border.width,
     })};
 
     /* hovered */
     @media (hover: hover) {
       &:not(:disabled):hover {
-        background-color: ${color.default.hovered.bg};
-        color: ${color.default.hovered.fg};
+        background-color: ${cssVars.default['bg-base-hover']};
+        color: ${cssVars.default['text-primary']};
         box-shadow: ${focusRingBorderStyle({
-          color: color.default.hovered.border,
+          color: cssVars.default['border-base-hover'],
           width: input.border.width,
         })};
       }
@@ -71,27 +72,27 @@ function inputColorStyle(props: ThemeProps) {
     /* focused */
     &:not(:disabled):focus {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
+        border: {width: input.border.width, color: cssVars.default['border-base']},
         focusRing,
       })};
     }
 
     /* read-only */
     &[data-read-only] {
-      background-color: ${color.default.readOnly.bg};
-      color: ${color.default.readOnly.fg};
+      background-color: ${cssVars.default['bg-tint']};
+      color: ${cssVars.default['text-primary']};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.readOnly.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
     }
 
     /* disabled */
     &:not([data-read-only]):disabled {
-      background-color: ${color.default.disabled.bg};
-      color: ${color.default.disabled.fg};
+      background-color: ${cssVars.default['bg-tint']};
+      color: ${cssVars.default['text-primary']};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.disabled.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
     }
@@ -130,10 +131,7 @@ function inputStyle(): Array<
   ]
 }
 
-function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const color = theme.sanity.color.input
-
+function iconBoxStyle(): ReturnType<typeof css> {
   return css`
     pointer-events: none;
     position: absolute;
@@ -141,23 +139,23 @@ function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
     right: 0;
 
     /* enabled */
-    --card-fg-color: ${color.default.enabled.fg};
+    ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
 
     /* hover */
     @media (hover: hover) {
       select:not(disabled):not(:read-only):hover + && {
-        --card-fg-color: ${color.default.hovered.fg};
+        ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
       }
     }
 
     /* disabled */
     select:disabled + && {
-      --card-fg-color: ${color.default.disabled.fg};
+      ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
     }
 
     /* read-only */
     select[data-read-only] + && {
-      --card-fg-color: ${color.default.readOnly.fg};
+      ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']};
     }
   `
 }

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

@@ -8,8 +8,8 @@ export default function PropsStory() {
   const indeterminate = useBoolean('Indeterminate', false)
   const readOnly = useBoolean('Read only', false)
   const theme = useTheme()
-  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.focusRing.offset)
-  const focusRingWidth = useNumber('Focus ring width', theme.sanity.focusRing.width)
+  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.input.switch.focusRing.offset)
+  const focusRingWidth = useNumber('Focus ring width', theme.sanity.input.switch.focusRing.width)
   const handleChange = useCallback(() => undefined, [])
 
   const customTheme = useMemo(
@@ -18,8 +18,8 @@ export default function PropsStory() {
       sanity: {
         ...theme.sanity,
         focusRing: {
-          offset: focusRingOffset || theme.sanity.focusRing.offset,
-          width: focusRingWidth || theme.sanity.focusRing.width,
+          offset: focusRingOffset || theme.sanity.input.switch.focusRing.offset,
+          width: focusRingWidth || theme.sanity.input.switch.focusRing.width,
         },
       },
     }),

package/src/primitives/switch/styles.ts

@@ -1,6 +1,7 @@
 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,12 +37,12 @@ export function switchInputStyles(): ReturnType<typeof css> {
 /* Representation */
 export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.button.default
+  const {input} = theme.sanity
+  const {focusRing} = input.switch
 
   return css`
-    --switch-bg-color: ${color.default.enabled.bg};
-    --switch-fg-color: ${color.default.enabled.fg};
+    --switch-bg-color: ${cssVars.default['border-base']};
+    --switch-fg-color: ${cssVars.default['bg-base']};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -78,25 +79,30 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: ${color.positive.enabled.bg};
-      --switch-fg-color: ${color.positive.enabled.fg};
+      --switch-bg-color: ${cssVars.positive['border-accent']};
+      --switch-fg-color: ${cssVars.positive['bg-base']};
     }
 
     @media (hover: hover) {
       input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.default.hovered.bg};
-        --switch-fg-color: ${color.default.hovered.fg};
+        --switch-bg-color: ${cssVars.default['border-base']};
+        --switch-fg-color: ${cssVars.default['bg-base']};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.positive.hovered.bg};
-        --switch-fg-color: ${color.positive.hovered.fg};
+        --switch-bg-color: ${cssVars.positive['border-accent']};
+        --switch-fg-color: ${cssVars.positive['bg-base']};
       }
     }
 
     input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.default.disabled.bg};
-      --switch-fg-color: ${color.default.disabled.fg};
+      --switch-bg-color: ${cssVars.default['border-base']};
+      --switch-fg-color: ${cssVars.default['bg-tint']};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${cssVars.default['border-base']};
+      --switch-fg-color: ${cssVars.default['bg-tint']};
     }
   `
 }
@@ -149,6 +155,7 @@ export function switchThumbStyles(
     transition-timing-function: ${input.switch.transitionTimingFunction};
     background: var(--switch-fg-color);
     transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
 
     ${checked &&
     css`