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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.12",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/dialog/dialog.tsx

@@ -11,7 +11,7 @@ import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '
 import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {ThemeColorSchemeKey, cssVars, useTheme} from '../../theme'
+import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {BORDER_OFFSET_X} from './constants'
@@ -139,7 +139,7 @@ const DialogHeader = styled(Box)<DialogHeaderProps>`
     left: ${BORDER_OFFSET_X}px;
     right: ${BORDER_OFFSET_X}px;
     bottom: -1px;
-    border-bottom: 1px solid ${cssVars.default['border-base']};
+    border-bottom: 1px solid var(--card-border-color);
     width: auto;
     opacity: ${(props) => (props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0)};
     transition: opacity 200ms ease-in;
@@ -164,7 +164,7 @@ const DialogFooter = styled(Box)<DialogFooterProps>`
     left: ${BORDER_OFFSET_X}px;
     right: ${BORDER_OFFSET_X}px;
     top: -1px;
-    border-top: 1px solid ${cssVars.default['border-base']};
+    border-top: 1px solid var(--card-border-color);
     width: auto;
     opacity: ${(props) => (props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0)};
     transition: opacity 200ms ease-in;

package/src/components/dialog/styles.ts

@@ -1,5 +1,4 @@
 import {_responsive, ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
 import {DialogPosition} from '../../types'
 import {CSSObject} from '../../types/styled'
 
@@ -10,7 +9,9 @@ export interface ResponsiveDialogPositionStyleProps {
   $position: DialogPosition[]
 }
 
-export function dialogStyle(): CSSObject {
+export function dialogStyle({theme}: ThemeProps): CSSObject {
+  const color = theme.sanity.color.base
+
   return {
     '&:not([hidden])': {
       display: 'flex',
@@ -23,7 +24,7 @@ export function dialogStyle(): CSSObject {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: cssVars.default['base-shadow-umbra-color'],
+    background: color.shadow.umbra,
   }
 }
 

package/src/components/menu/__workshop__/closableMenuButton.tsx

@@ -1,5 +1,5 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, cssVars} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
 import {useRef} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -23,7 +23,7 @@ export default function ClosableMenuButtonStory() {
                 <MenuItem text="Item 3" />
                 <MenuItem text="Item 4" />
               </Stack>
-              <Stack padding={1} style={{borderTop: `1px solid ${cssVars.default['border-base']}`}}>
+              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
                 <Button
                   icon={AddIcon}
                   onClick={() => {

package/src/components/menu/menuDivider.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import {cssVars} from '../../theme'
 
 /**
  * @public
@@ -7,6 +6,6 @@ import {cssVars} from '../../theme'
 export const MenuDivider = styled.hr`
   height: 1px;
   border: 0;
-  background: ${cssVars.default['border-base']};
+  background: var(--card-hairline-soft-color);
   margin: 0;
 `

package/src/components/menu/menuGroup.tsx

@@ -4,7 +4,7 @@ import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -45,8 +45,8 @@ export function MenuGroup(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useToneContext()
   const menu = useMenu()
+  const {scheme} = useRootTheme()
   const {
     activeElement,
     mount,

package/src/components/menu/menuItem.tsx

@@ -12,8 +12,8 @@ import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {ThemeColorToneKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
+import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 
@@ -30,7 +30,7 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
   selected?: boolean
   space?: number | number[]
   text?: React.ReactNode
-  tone?: ThemeColorToneKey
+  tone?: SelectableTone
 }
 
 /**
@@ -65,7 +65,7 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useToneContext()
+  const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
     activeElement,

package/src/components/skeleton/styles.ts

@@ -1,5 +1,4 @@
 import {css, keyframes} from 'styled-components'
-import {cssVars} from '../../theme'
 
 const keyframe = keyframes`
   0% {
@@ -13,11 +12,11 @@ const keyframe = keyframes`
 const animation = css`
   background-image: linear-gradient(
     to right,
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-to']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-from']}
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
   );
   background-position: 100%;
   background-size: 200% 100%;
@@ -41,11 +40,11 @@ export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
       $animated
         ? animation
         : css`
-            background-color: ${cssVars.default['skeleton-from']};
+            background-color: var(--card-skeleton-color-from);
           `}
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
-    background-color: ${cssVars.default['skeleton-from']};
+    background-color: var(--card-skeleton-color-from);
   }
 `

package/src/components/tree/style.ts

@@ -1,12 +1,6 @@
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
-import {
-  _colorVarStyleActive,
-  _colorVarStyleHover,
-  _colorVarStyleSelected,
-} from '../../styles/colorVars'
-import {cssVars} from '../../theme'
-import {cardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {_colorVarsStyle} from '../../styles/colorVars'
 
 export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
@@ -35,28 +29,34 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
   `
 }
 
-export function treeItemRootColorStyle(): ReturnType<typeof css> {
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+  const {theme} = props
+  const $tone = 'default'
+  const {base, muted, selectable} = theme.sanity.color
+  // @todo: remove use of `muted` here
+  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
+
   return css`
     /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
     &[role='none'] {
       & > [role='treeitem'] {
-        ${cardVariables}
+        ${_colorVarsStyle(base, tone.enabled)}
 
-        background-color:${cssVars.mutable['bg-color']};
+        background-color: var(--card-bg-color);
         color: var(--treeitem-fg-color);
       }
 
       &[data-selected] > [role='treeitem'] {
-        ${_colorVarStyleActive()}
+        ${_colorVarsStyle(base, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.hovered)}
         }
 
         & > [role='treeitem']:focus {
-          ${_colorVarStyleSelected()}
+          ${_colorVarsStyle(base, tone.selected)}
         }
       }
     }
@@ -64,22 +64,23 @@ export function treeItemRootColorStyle(): ReturnType<typeof css> {
     /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
     &[role='treeitem'] {
       & > [data-ui='TreeItem__box'] {
-        ${cardVariables}
-        background-color: ${cssVars.mutable['bg-color']};
-        color: ${cssVars.mutable['fg-color']};
+        ${_colorVarsStyle(base, tone.enabled)}
+
+        background-color: var(--card-bg-color);
+        color: var(--card-fg-color);
       }
 
       &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_colorVarStyleActive()}
+        ${_colorVarsStyle(base, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.hovered)}
         }
 
         &:focus > [data-ui='TreeItem__box'] {
-          ${_colorVarStyleSelected()}
+          ${_colorVarsStyle(base, tone.selected)}
         }
       }
     }

package/src/primitives/_selectable/style.ts

@@ -1,19 +1,13 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {
-  _colorVarStyleHover,
-  _selectableVarStyle,
-  _selectableVarStyleDisabled,
-} from '../../styles/colorVars'
-
-import {ThemeColorSchemeKey, ThemeColorToneKey, createCssVars, cssVars} from '../../theme'
+import {_colorVarsStyle} from '../../styles/colorVars'
+import {SelectableTone} from '../../types/selectable'
 
 /**
  * @internal
  */
 export interface SelectableStyleProps {
-  $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
+  $tone: SelectableTone
 }
 
 export function selectableBaseStyle(): ReturnType<typeof css> {
@@ -41,41 +35,43 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
 export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {theme, $tone, $scheme} = props
+  const {$tone, theme} = props
+  const {base, muted, selectable} = theme.sanity.color
+  // @todo: remove use of `muted` here
+  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
 
   return css`
-    ${$tone !== 'default' && createCssVars($scheme, theme.sanity.color.tones, $tone)}
-    ${_selectableVarStyle($tone)}
+    ${_colorVarsStyle(base, tone.enabled)}
 
-    background-color: ${cssVars.mutable['bg-color']};
-    color: ${cssVars[$tone]['text-secondary']};
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
     outline: none;
 
-    /* &:is(button) - Looks like a button in default mode */
+    /* &:is(button) */
     &[data-as='button'] {
       &:disabled {
-        ${_selectableVarStyleDisabled()}
+        ${_colorVarsStyle(base, tone.disabled)}
       }
 
       &:not(:disabled) {
         &[aria-pressed='true'] {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.pressed)}
         }
 
         &[data-selected],
         &[aria-selected='true'] > & {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_colorVarsStyle(base, tone.hovered)}
             }
 
             &:active {
-              ${_colorVarStyleHover()}
+              ${_colorVarsStyle(base, tone.pressed)}
             }
           }
         }
@@ -85,26 +81,26 @@ export function selectableColorStyle(
     /* &:is(a) */
     &[data-as='a'] {
       &[data-disabled] {
-        ${_selectableVarStyleDisabled()}
+        ${_colorVarsStyle(base, tone.disabled)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.pressed)}
         }
 
         &[data-selected] {
-          ${_colorVarStyleHover()}
+          ${_colorVarsStyle(base, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_colorVarsStyle(base, tone.hovered)}
             }
             &:active {
-              ${_colorVarStyleHover()}
+              ${_colorVarsStyle(base, tone.pressed)}
             }
           }
         }

package/src/primitives/avatar/avatar.tsx

@@ -2,14 +2,10 @@ import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'reac
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {useTheme} from '../../theme'
-
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {ThemeColorSpotKey, useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
-import {spotColor} from './spotColors'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
-import {ThemeColorSpotKey} from './types'
 
 /**
  * @public
@@ -67,10 +63,9 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
   const theme = useTheme()
-  const {scheme} = useToneContext()
-
-  const color = spotColor[colorKey][scheme].hex
+  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
 
+  // @todo: remove this
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2

package/src/primitives/avatar/avatarCounter.tsx

@@ -3,7 +3,6 @@ import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
 import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
@@ -33,11 +32,11 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     box-sizing: border-box;
     user-select: none;
     color: inherit;
-    color: ${cssVars.mutable['fg-color']};
-    background:  ${cssVars.mutable['bg-color']};
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
     box-shadow:
-      0 0 0 1px  ${cssVars.mutable['bg-color']},
-      inset 0 0 0 1.5px ${cssVars.default['border-base']});
+      0 0 0 1px var(--card-bg-color),
+      inset 0 0 0 1.5px var(--card-hairline-hard-color);
     padding: 0 ${rem(theme.sanity.space[2])};
 
     &:not([hidden]) {

package/src/primitives/avatar/styles.ts

@@ -1,6 +1,5 @@
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
@@ -65,7 +64,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     position: 'relative',
     boxSizing: 'border-box',
     userSelect: 'none',
-    boxShadow: `0 0 0 1px ${cssVars.mutable['bg-color']}`,
+    boxShadow: '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -124,11 +123,14 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
-export function avatarInitialsStyle(): CSSObject {
+export function avatarInitialsStyle(props: ThemeProps): CSSObject {
+  const {theme} = props
+  const {base} = theme.sanity.color
+
   return {
     width: '100%',
     height: '100%',
-    color: cssVars.default['text-primary'],
+    color: base.fg,
     alignItems: 'center',
     justifyContent: 'center',
     textTransform: 'uppercase',
@@ -144,7 +146,7 @@ export function avatarInitialsStyle(): CSSObject {
 function avatarBgStrokeStyle(): CSSObject {
   return {
     strokeWidth: '4px',
-    stroke: cssVars.mutable['bg-color'],
+    stroke: 'var(--card-bg-color)',
   }
 }
 

package/src/primitives/avatar/types.ts

@@ -13,17 +13,3 @@ export interface AvatarRootStyleProps {
 export interface ResponsiveAvatarSizeStyleProps {
   $size: AvatarSize[]
 }
-
-/**
- * @public
- */
-export type ThemeColorSpotKey =
-  | 'gray'
-  | 'blue'
-  | 'purple'
-  | 'magenta'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'cyan'

package/src/primitives/badge/styles.ts

@@ -1,15 +1,16 @@
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
+import {ThemeProps} from '../../styles'
 import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
 
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$mode, $tone} = props
+export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
+  const {$mode, $tone, theme} = props
+  const palette = theme.sanity.color[$mode === 'outline' ? 'muted' : 'solid']
+  const color = palette[$tone] || palette.default
 
   return {
-    backgroundColor: $mode === 'outline' ? cssVars[$tone]['bg-base'] : cssVars[$tone]['bg-tint'],
-    [mutableCardVariables['fg-color']]: cssVars[$tone]['text-secondary'],
-    boxShadow: $mode === 'outline' ? `inset 0 0 0 1px ${cssVars[$tone]['border-base']}` : undefined,
+    backgroundColor: color.enabled.bg,
+    color: color.enabled.fg,
+    boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
     cursor: 'default',
 
     '&:not([hidden])': {

package/src/primitives/box/__workshop__/responsive.tsx

@@ -1,4 +1,4 @@
-import {Box, Text, cssVars} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
 
 export default function ResponsiveStory() {
   return (
@@ -9,7 +9,7 @@ export default function ResponsiveStory() {
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
         sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: `1px solid ${cssVars.default['border-base']}`}}
+        style={{outline: '1px solid var(--card-border-color)'}}
       >
         <Text align="center" muted>
           This is a box with responsive props

package/src/primitives/button/button.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {cssVars, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
@@ -49,7 +49,7 @@ const LoadingBox = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${cssVars.mutable['bg-color']};
+  background-color: var(--card-bg-color);
   border-radius: inherit;
   z-index: 1;
   box-shadow: inherit;