@sanity/ui 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/primitives/card/styles.ts

@@ -1,7 +1,13 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
+import {
+  _colorVarStyleActive,
+  _colorVarStyleDisabled,
+  _colorVarStyleHover,
+  _colorVarStyleSelected,
+} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
+import {createCssVars, cssVars} from '../../theme/lib/theme/color/cssVariables'
 import {CardStyleProps} from './types'
 
 export function cardStyle(
@@ -19,7 +25,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
     css`
       background-size: ${space[3]}px ${space[3]}px;
       background-position: 50% 50%;
-      background-image: var(--card-bg-image);
+      background-image: ${cssVars.mutable['bg-image']};
     `}
 
     &[data-as='button'] {
@@ -46,18 +52,20 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, theme} = props
+  const {$checkered, $focusRing, theme, $tone, $scheme, $updateCssVars} = props
   const {focusRing} = theme.sanity.card
-  const {base, card, dark} = theme.sanity.color
-  const border = {width: 0, color: 'var(--card-border-color)'}
 
-  return css`
-    color-scheme: ${dark ? 'dark' : 'light'};
+  const border = {width: 0, color: cssVars.positive['border-accent']}
 
-    ${_colorVarsStyle(base, card.enabled, $checkered)}
+  return css`
+    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */
+    ${$updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone)}
+    color-scheme: ${$scheme === 'dark' ? 'dark' : 'light'};
+    ${$checkered &&
+    `--card-bg-image: repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`}
 
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
+    background-color: ${cssVars.mutable['bg-color']};
+    color: ${cssVars.default['text-primary']};
 
     /* &:is(button) */
     &[data-as='button'] {
@@ -67,34 +75,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &:disabled {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_colorVarStyleDisabled($checkered)}
       }
 
       &:not(:disabled) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_colorVarStyleActive()}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_colorVarStyleSelected()}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_colorVarStyleHover()}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_colorVarStyleActive()}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({border, focusRing})
             : undefined};
         }
 
@@ -110,34 +118,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &[data-disabled] {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_colorVarStyleDisabled($checkered)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_colorVarStyleActive()}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_colorVarStyleSelected()}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_colorVarStyleHover()}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_colorVarStyleActive()}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({border, focusRing})
             : undefined};
         }
 

package/src/primitives/card/types.ts

@@ -1,4 +1,4 @@
-import {ThemeColorToneKey} from '../../theme'
+import {ThemeColorSchemeKey, ThemeColorToneKey} from '../../theme'
 
 /**
  * @internal
@@ -7,4 +7,6 @@ export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
+  $scheme: ThemeColorSchemeKey
+  $updateCssVars: boolean
 }

package/src/primitives/checkbox/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 checkboxBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -11,7 +12,6 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const color = theme.sanity.color.input
   const {input, radius} = theme.sanity
   const {focusRing} = input.checkbox
 
@@ -34,12 +34,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       width: ${rem(input.checkbox.size)};
       box-sizing: border-box;
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
       border-radius: ${rem(radius[2])};
       line-height: 1;
-      background-color: ${color.default.enabled.bg};
+      background-color: ${cssVars.default['bg-base']};
 
       & > svg {
         display: block;
@@ -55,12 +55,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       }
     }
     &:checked + span {
-      background: ${color.default.enabled.bg2};
+      background: ${cssVars.default['text-secondary']};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.bg2,
+        color: cssVars.default['text-secondary'],
         width: input.border.width,
       })};
-      color: ${color.default.enabled.bg};
+      color: ${cssVars.default['bg-base']};
     }
 
     /* focus */
@@ -74,47 +74,47 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
     }
 
     &[data-error] + span {
-      background-color: ${color.invalid.enabled.border};
+      background-color: ${cssVars.critical['border-base']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.invalid.enabled.bg2,
+        color: cssVars.critical['text-secondary'],
       })};
-      color: ${color.default.disabled.fg};
+      color: ${cssVars.default['text-secondary']};
     }
     &[data-error]&:checked + span {
-      background-color: ${color.invalid.enabled.bg2};
-      color: ${color.default.enabled.bg};
+      background-color: ${cssVars.critical['text-secondary']};
+      color: ${cssVars.default['bg-base']};
     }
     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.invalid.readOnly.bg2},
+        border: {width: input.border.width, color: cssVars.critical['text-secondary']},
         focusRing: {width: 1, offset: 1},
       })};
     }
 
     &:disabled + span {
-      background-color: ${color.default.disabled.bg};
+      background-color: ${cssVars.default['bg-tint']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.disabled.border,
+        color: cssVars.default['border-base'],
       })};
-      color: ${color.default.disabled.fg};
+      color: ${cssVars.default['text-secondary']};
     }
     &:disabled&:checked + span {
-      background-color: ${color.default.disabled.bg2};
+      background-color: ${cssVars.default['border-base']};
     }
 
     &[data-read-only] + span {
-      background-color: ${color.default.readOnly.bg};
+      background-color: ${cssVars.default['bg-tint']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.readOnly.border,
+        color: cssVars.default['border-base'],
       })};
-      color: ${color.default.readOnly.fg};
+      color: ${cssVars.default['text-secondary']};
     }
 
     &[data-read-only]&:checked + span {
-      background-color: ${color.default.readOnly.bg2};
+      background-color: ${cssVars.default['border-base']};
     }
 
     &:checked + span > svg:first-child {

package/src/primitives/code/code.tsx

@@ -4,7 +4,8 @@ import Refractor from 'react-refractor'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {codeBaseStyle} from './styles'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {codeBaseStyle, CodeBaseStyleProps} from './styles'
 
 /**
  * @public
@@ -16,7 +17,10 @@ export interface CodeProps {
   weight?: string
 }
 
-const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+const Root = styled.pre<CodeBaseStyleProps & ResponsiveFontStyleProps>(
+  codeBaseStyle,
+  responsiveCodeFontStyle,
+)
 
 /**
  * @public
@@ -28,9 +32,17 @@ export const Code = forwardRef(function Code(
   const {children, language: languageProp, size = 2, weight, ...restProps} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language as any) : false
+  const {scheme} = useToneContext()
 
   return (
-    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <Root
+      data-ui="Code"
+      {...restProps}
+      $size={useArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+      $scheme={scheme}
+    >
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>

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,6 +2,7 @@ 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 {Text} from '../text'
@@ -18,7 +19,7 @@ export interface KBDProps {
 
 function kbdStyle() {
   return css`
-    background: var(--card-bg2-color);
+    background: ${cssVars.default['bg-tint']};
     font: inherit;
 
     &:not([hidden]) {

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,6 +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 {useToneContext} from '../../theme/toneContext/useToneContext'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {useLayer} from '../../utils'
 import {Card} from '../card'
@@ -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/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`
@@ -20,7 +21,6 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.radio
-  const color = theme.sanity.color.input
   const dist = (input.radio.size - input.radio.markSize) / 2
 
   return css`
@@ -45,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,
       })};
 
@@ -59,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.bg2};
+        background: ${cssVars.default['text-secondary']};
         opacity: 0;
       }
     }
@@ -67,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,
       })};
     }
@@ -85,33 +85,33 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
 
     /* customValidity */
     &[data-error] + span {
-      background-color: ${color.invalid.enabled.border};
+      background-color: ${cssVars.critical['border-base']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.invalid.enabled.bg2,
+        color: cssVars.critical['text-secondary'],
       })};
       &::after {
-        background: ${color.invalid.enabled.bg2};
+        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.border};
+        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.border};
+        background: ${cssVars.default['border-base']};
       }
     }
   `