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

package/src/primitives/select/styles.ts

@@ -8,6 +8,8 @@ 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> {
@@ -45,24 +47,23 @@ function inputColorStyle(props: ThemeProps) {
   const {theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.select
-  const color = theme.sanity.color.input
 
   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/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> {
@@ -38,11 +39,10 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
   const {theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.switch
-  const color = theme.sanity.color.input
 
   return css`
-    --switch-bg-color: ${color.default.enabled.border};
-    --switch-fg-color: ${color.default.enabled.bg};
+    --switch-bg-color: ${cssVars.default['border-base']};
+    --switch-fg-color: ${cssVars.default['bg-base']};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -79,30 +79,30 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: var(--card-focus-ring-color);
-      --switch-fg-color: ${color.default.enabled.bg};
+      --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.border};
-        --switch-fg-color: ${color.default.hovered.bg};
+        --switch-bg-color: ${cssVars.default['border-base']};
+        --switch-fg-color: ${cssVars.default['bg-base']};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: var(--card-focus-ring-color);
-        --switch-fg-color: ${color.default.enabled.bg};
+        --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.border};
-      --switch-fg-color: ${color.default.disabled.bg};
+      --switch-bg-color: ${cssVars.default['border-base']};
+      --switch-fg-color: ${cssVars.default['bg-tint']};
     }
 
     input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.default.readOnly.border};
-      --switch-fg-color: ${color.default.readOnly.bg};
+      --switch-bg-color: ${cssVars.default['border-base']};
+      --switch-fg-color: ${cssVars.default['bg-tint']};
     }
   `
 }

package/src/primitives/text/__workshop__/colored.tsx

@@ -1,27 +1,26 @@
-import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
+import {Flex, Text, useTheme} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
+import {useToneContext} from '../../../theme/toneContext/useToneContext'
+import {spotColor} from '../../avatar/spotColors'
 
-const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>((props: {
-  color?: ThemeColorSpotKey
-  theme: Theme
-}) => {
-  const {spot} = props.theme.sanity.color
-
+const ColoredText = styled(Text)<{color: string}>((props: {color: string}) => {
   return css`
-    color: ${spot[props.color || 'gray']};
+    color: ${props.color};
   `
 })
 
 export default function ColoredTextStory() {
   const theme = useTheme()
-  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+  const selectedColor = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+  const {scheme} = useToneContext()
+  const color = spotColor[selectedColor ?? 'gray'][scheme]
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" color={color} size={4} theme={theme} weight="bold">
-        {color}
+      <ColoredText align="center" color={color.hex} size={4} theme={theme} weight="bold">
+        {color.title}
       </ColoredText>
     </Flex>
   )

package/src/primitives/text/styles.ts

@@ -1,5 +1,6 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
+import {cssVars} from '../../theme'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
@@ -8,29 +9,29 @@ export function textBaseStyle(
   const {weights} = theme.sanity.fonts.text
 
   return css`
-    color: var(--card-fg-color);
+    color: ${cssVars.mutable['fg-color']};
 
     ${$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 {
       font-family: ${theme.sanity.fonts.code.family};
       border-radius: 1px;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
+      background-color: ${cssVars.default['bg-tint-code']};
+      color: ${cssVars.default['text-code']};
     }
 
     & a {
       text-decoration: none;
       border-radius: 1px;
-      color: var(--card-link-color);
+      color: ${cssVars.default['text-link']};
       outline: none;
 
       @media (hover: hover) {
@@ -41,8 +42,8 @@ export function textBaseStyle(
 
       &: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) {
@@ -62,7 +63,7 @@ export function textBaseStyle(
 
     & [data-sanity-icon] {
       vertical-align: baseline;
-      color: var(--card-icon-color);
+      color: ${cssVars.mutable['icon-color']};
     }
   `
 }

package/src/primitives/textArea/textArea.tsx

@@ -13,7 +13,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
@@ -25,6 +25,7 @@ export interface TextAreaProps extends ResponsiveRadiusProps {
   fontSize?: number | number[]
   padding?: number | number[]
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 const Root = styled.span(textInputRootStyle)
@@ -60,15 +61,14 @@ export const TextArea = forwardRef(function TextArea(
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
+    tone = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
-  const rootTheme = useRootTheme()
-
   useCustomValidity(ref, customValidity)
 
   return (
@@ -76,25 +76,21 @@ export const TextArea = forwardRef(function TextArea(
       <InputRoot>
         <Input
           data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
           {...restProps}
           $fontSize={useArrayProp(fontSize)}
           $padding={useArrayProp(padding)}
-          $scheme={rootTheme.scheme}
           $space={useArrayProp(0)}
-          $tone={rootTheme.tone}
+          $tone={tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
           $radius={useArrayProp(radius)}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
+          $tone={tone}
           data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
         />
       </InputRoot>
     </Root>

package/src/primitives/textInput/textInput.tsx

@@ -16,7 +16,8 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
@@ -70,6 +71,7 @@ export interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -156,19 +158,21 @@ export const TextInput = forwardRef(function TextInput(
     onClear,
     padding: paddingProp = 3,
     prefix,
-    radius: radiusProp = 1,
+    radius: radiusProp = 2,
     readOnly,
     space: spaceProp = 3,
     suffix,
     customValidity,
     type = 'text',
     weight,
+    tone: toneProp = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
-  const rootTheme = useRootTheme()
+  const toneContext = useToneContext()
+  const tone = toneProp === 'default' ? toneContext.tone : toneProp
 
   const fontSize = useArrayProp(fontSizeProp)
   const padding = useArrayProp(paddingProp)
@@ -221,11 +225,9 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
-        $scheme={rootTheme.scheme}
-        $tone={rootTheme.tone}
+        $tone={tone}
         data-border={border ? '' : undefined}
-        data-scheme={rootTheme.scheme}
-        data-tone={rootTheme.tone}
+        data-tone={tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -253,10 +255,10 @@ export const TextInput = forwardRef(function TextInput(
       iconRight,
       padding,
       radius,
-      rootTheme,
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
+      tone,
     ],
   )
 
@@ -339,22 +341,20 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput" tone={rootTheme.tone}>
+    <Root data-ui="TextInput" tone={tone}>
       {prefixNode}
 
       <InputRoot>
         <Input
           data-as="input"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
           {...restProps}
           $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
-          $scheme={rootTheme.scheme}
           $space={space}
-          $tone={rootTheme.tone}
+          $tone={tone}
           $weight={weight}
           disabled={disabled}
           readOnly={readOnly}

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

@@ -1,4 +1,13 @@
-import {Button, Card, Flex, Text, Tooltip, TooltipDelayGroupProvider, Stack} from '@sanity/ui'
+import {
+  Button,
+  Card,
+  Flex,
+  Text,
+  Tooltip,
+  TooltipDelayGroupProvider,
+  Stack,
+  cssVars,
+} from '@sanity/ui'
 import {useBoolean, useSelect, useText, useNumber} from '@sanity/ui-workshop'
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -28,7 +37,11 @@ export default function PropsStory() {
       >
         <Stack
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          style={{
+            outline: `1px solid ${cssVars.default['border-base']}`,
+            width: '100%',
+            maxWidth: '640px',
+          }}
           space={4}
         >
           <Text align="center" size={3}>
@@ -52,7 +65,11 @@ export default function PropsStory() {
         </Stack>
         <Stack
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          style={{
+            outline: `1px solid ${cssVars.default['border-base']}`,
+            width: '100%',
+            maxWidth: '640px',
+          }}
           space={4}
         >
           <Text align="center" size={3}>

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,5 +1,6 @@
 import {forwardRef} from 'react'
 import styled from 'styled-components'
+import {cssVars} from '../../theme'
 
 const Root = styled.div`
   position: absolute;
@@ -63,11 +64,11 @@ const Root = styled.div`
 `
 
 const Border = styled.path`
-  fill: var(--card-shadow-outline-color);
+  fill: ${cssVars.default['base-shadow-outline-color']};
 `
 
 const Shape = styled.path`
-  fill: var(--card-bg-color);
+  fill: ${cssVars.mutable['bg-color']};
 `
 
 interface TooltipArrowProps {}

package/src/styles/border/borderStyle.ts

@@ -1,9 +1,10 @@
+import {cssVars} from '../../theme'
 import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
-const BORDER_VALUE = '1px solid var(--card-border-color)'
+const BORDER_VALUE = `1px solid ${cssVars.default['border-base']}`
 
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,43 +1,84 @@
-import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+import {ThemeColorToneKey, cssVars} from '../../theme'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
 import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
+ * Card overrides in disabled states
  */
-export function _colorVarsStyle(
-  base: ThemeColorBase,
-  color: ThemeColorGenericState,
-  checkered = false,
-): CSSObject {
+export function _colorVarStyleDisabled(checkered = false): CSSObject {
   return {
-    // Base
-    // @todo: rename to "--base-"?
-    '--card-shadow-outline-color': base.shadow.outline,
-    '--card-shadow-umbra-color': base.shadow.umbra,
-    '--card-shadow-penumbra-color': base.shadow.penumbra,
-    '--card-shadow-ambient-color': base.shadow.ambient,
-    '--card-focus-ring-color': base.focusRing,
-    '--card-icon-color': color.iconColor,
+    [getToneCssVar('default', 'text-link')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-accent')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-code')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-primary')]: cssVars.default['text-secondary'],
 
-    // Card
-    '--card-bg-color': color.bg,
-    '--card-bg2-color': color.bg2,
-    '--card-bg-image': checkered
-      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
+    [mutableCardVariables['fg-color']]: cssVars.primary['text-secondary'],
+    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-secondary'],
+    [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
+    [mutableCardVariables['accent-color']]: cssVars.primary['base-bg-card'],
+    [mutableCardVariables['bg-color']]: cssVars.primary['bg-tint'],
+    [mutableCardVariables['bg-image']]: checkered
+      ? `repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`
       : undefined,
-    '--card-fg-color': color.fg,
-    '--card-border-color': color.border,
-    '--card-muted-fg-color': color.muted?.fg,
-    '--card-accent-fg-color': color.accent?.fg,
-    '--card-link-fg-color': color.link?.fg,
-    '--card-code-bg-color': color.code?.bg,
-    '--card-code-fg-color': color.code?.fg,
-    '--card-skeleton-color-from': color.skeleton?.from,
-    '--card-skeleton-color-to': color.skeleton?.to,
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in selected states
+ */
+export function _colorVarStyleSelected(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-accent'],
+    [mutableCardVariables['fg-color']]: cssVars.default['bg-base'],
+    [mutableCardVariables['muted-fg-color']]: cssVars.default['base-bg-card'],
+    [mutableCardVariables['accent-color']]: cssVars.default['base-bg-card'],
+    [mutableCardVariables['icon-color']]: cssVars.primary['bg-base'],
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in hover
+ */
+export function _colorVarStyleHover(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-hover'],
+    [getToneCssVar('default', 'bg-tint')]: cssVars.default['bg-base-active'],
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in active / pressed states
+ */
+export function _colorVarStyleActive(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-active'],
+  }
+}
 
-    // @todo: deprecate
-    '--card-link-color': color.link?.fg,
-    '--card-hairline-soft-color': color.border,
-    '--card-hairline-hard-color': color.border,
+/**
+ * @internal
+ * Selectable needs to redefine bg-color and fg-color
+ */
+export function _selectableVarStyle(tone: ThemeColorToneKey): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: 'inherit',
+    [mutableCardVariables['fg-color']]:
+      tone === 'default' ? cssVars.default['text-primary'] : cssVars.default['text-secondary'],
+  }
+}
+
+/**
+ * @internal
+ * Selectable overrides in disabled states, same as card but with different bg-color
+ */
+export function _selectableVarStyleDisabled(): CSSObject {
+  return {
+    ..._colorVarStyleDisabled(),
+    [mutableCardVariables['bg-color']]: undefined,
   }
 }

package/src/styles/focusRing/index.ts

@@ -1,4 +1,4 @@
-import {FocusRing} from '../../theme'
+import {FocusRing, cssVars} from '../../theme'
 
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
@@ -12,13 +12,15 @@ export function focusRingStyle(opts: {
   const {base, border, focusRing} = opts
   const focusRingOutsetWidth = focusRing.offset + focusRing.width
   const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : 'var(--card-bg-color)'
+  const bgColor = base ? base.bg : cssVars.mutable['bg-color']
 
   return [
-    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+    focusRingInsetWidth > 0 &&
+      `inset 0 0 0 ${focusRingInsetWidth}px ${cssVars.positive['border-accent']}`,
     border && focusRingBorderStyle(border),
     focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
+    focusRingOutsetWidth > 0 &&
+      `0 0 0 ${focusRingOutsetWidth}px ${cssVars.positive['border-accent']}`,
   ]
     .filter(Boolean)
     .join(',')