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

package/src/primitives/code/styles.ts

@@ -1,66 +1,57 @@
-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'
+import {css, ExecutionContext} from 'styled-components'
 
-function codeSyntaxHighlightingStyle(scheme: ThemeColorSchemeKey) {
-  const dark = scheme === 'dark'
-  const mainShade = dark ? 400 : 600
-  const secondaryShade = dark ? 600 : 400
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
+  const color = theme.sanity.color.syntax
 
   return {
-    '&.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},
+    '&.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},
   }
 }
 
-export interface CodeBaseStyleProps {
-  $scheme: ThemeColorSchemeKey
-}
-
-export function codeBaseStyle(props: CodeBaseStyleProps): ReturnType<typeof css> {
+export function codeBaseStyle(): ReturnType<typeof css> {
   return css`
-    color: ${cssVars.default['text-code']};
+    color: var(--card-code-fg-color);
 
     & code {
       font-family: inherit;
 
       &.refractor .token {
-        ${codeSyntaxHighlightingStyle(props.$scheme)}
+        ${codeSyntaxHighlightingStyle}
       }
     }
 

package/src/primitives/heading/styles.ts

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

package/src/primitives/kbd/kbd.tsx

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

package/src/primitives/label/styles.ts

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

package/src/primitives/popover/popoverArrow.tsx

@@ -1,6 +1,5 @@
 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`
@@ -49,11 +48,11 @@ const Root = styled.div`
 `
 
 const BorderPath = styled.path`
-  fill: ${cssVars.default['base-shadow-outline-color']};
+  fill: var(--card-shadow-outline-color);
 `
 
 const ShapePath = styled.path`
-  fill: ${cssVars.mutable['bg-color']};
+  fill: var(--card-bg-color);
 `
 
 export const PopoverArrow = forwardRef(function PopoverArrow(

package/src/primitives/popover/popoverCard.tsx

@@ -3,7 +3,6 @@ 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'
@@ -67,8 +66,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(
@@ -111,17 +110,14 @@ 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,7 +1,6 @@
 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`
@@ -21,6 +20,7 @@ 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: ${cssVars.default['bg-base']};
+      background: ${color.default.enabled.bg};
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.default.enabled.border,
         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: ${cssVars.default['text-secondary']};
+        background: ${color.default.enabled.bg2};
         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: cssVars.default['border-base']},
+        border: {width: input.border.width, color: color.default.enabled.border},
         focusRing,
       })};
     }
 
     &:not(:disabled):focus:not(:focus-visible) + span {
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.default.enabled.border,
         width: input.border.width,
       })};
     }
@@ -85,33 +85,33 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
 
     /* customValidity */
     &[data-error] + span {
-      background-color: ${cssVars.critical['border-base']};
+      background-color: ${color.invalid.enabled.border};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: cssVars.critical['text-secondary'],
+        color: color.invalid.enabled.bg2,
       })};
       &::after {
-        background: ${cssVars.critical['text-secondary']};
+        background: ${color.invalid.enabled.bg2};
       }
     }
 
     /* 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.default.readOnly.border};
+      background: ${color.default.readOnly.bg};
 
       &::after {
-        background: ${cssVars.default['border-base']};
+        background: ${color.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.default.disabled.border};
+      background: ${color.default.disabled.bg};
 
       &::after {
-        background: ${cssVars.default['border-base']};
+        background: ${color.default.disabled.border};
       }
     }
   `

package/src/primitives/select/styles.ts

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

package/src/primitives/switch/styles.ts

@@ -1,7 +1,6 @@
 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> {
@@ -39,10 +38,11 @@ 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: ${cssVars.default['border-base']};
-    --switch-fg-color: ${cssVars.default['bg-base']};
+    --switch-bg-color: ${color.default.enabled.border};
+    --switch-fg-color: ${color.default.enabled.bg};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -79,30 +79,30 @@ 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: var(--card-focus-ring-color);
+      --switch-fg-color: ${color.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.default.hovered.border};
+        --switch-fg-color: ${color.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: var(--card-focus-ring-color);
+        --switch-fg-color: ${color.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.default.disabled.border};
+      --switch-fg-color: ${color.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.default.readOnly.border};
+      --switch-fg-color: ${color.default.readOnly.bg};
     }
   `
 }

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

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

package/src/primitives/text/styles.ts

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