@sanity/ui 1.8.3 → 2.0.0-alpha.10

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,6 +63,7 @@ export function textBaseStyle(
 
     & [data-sanity-icon] {
       vertical-align: baseline;
+      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,9 @@ 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'
 import {Card} from '../card'
@@ -64,11 +66,12 @@ export interface TextInputProps {
   onClear?: () => void
   padding?: number | number[]
   prefix?: React.ReactNode
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -155,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)
@@ -220,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}>
@@ -252,10 +255,10 @@ export const TextInput = forwardRef(function TextInput(
       iconRight,
       padding,
       radius,
-      rootTheme,
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
+      tone,
     ],
   )
 
@@ -338,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/tooltip.tsx

@@ -81,7 +81,7 @@ export const Tooltip = forwardRef(function Tooltip(
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding,
+    padding = 3,
     placement: placementProp = 'bottom',
     portal,
     scheme,
@@ -303,7 +303,7 @@ export const Tooltip = forwardRef(function Tooltip(
         data-ui="Tooltip__card"
         data-placement={placement}
         padding={padding}
-        radius={2}
+        radius={3}
         scheme={scheme}
         shadow={shadow}
       >

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/primitives/types.ts

@@ -17,6 +17,7 @@ import {
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
+  Radius,
 } from '../types'
 
 /**
@@ -113,7 +114,7 @@ export interface ResponsivePaddingProps {
  * @public
  */
 export interface ResponsiveRadiusProps {
-  radius?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 /**
@@ -131,7 +132,7 @@ export interface ResponsiveWidthProps {
 }
 
 /**
- * @beta
+ * @public
  */
 export type Delay =
   | number

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,41 +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,
+    [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-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,3 +1,5 @@
+import {FocusRing, cssVars} from '../../theme'
+
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
 }
@@ -5,18 +7,20 @@ export function focusRingBorderStyle(border: {color: string; width: number}): st
 export function focusRingStyle(opts: {
   base?: {bg: string}
   border?: {color: string; width: number}
-  focusRing: {offset: number; width: number}
+  focusRing: FocusRing
 }): string {
   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(',')