@sanity/ui 2.0.0-alpha.4 → 2.0.0-alpha.6

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']};
       }
     }
   `

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']};
     }
   `
 }