@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/core/primitives/button/styles.ts

@@ -0,0 +1,116 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
+
+/**
+ * @internal
+ */
+export function buttonBaseStyles(
+  props: {$width?: ButtonWidth} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$width} = props
+  const {style} = getTheme_v2(props.theme)
+
+  return css`
+    ${style?.button};
+
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+    vertical-align: top;
+
+    ${$width === 'fill' &&
+    css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `
+}
+
+function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+  return boxShadows.filter(Boolean).join(',')
+}
+
+/**
+ * @internal
+ */
+export function buttonColorStyles(
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
+): CSSObject[] {
+  const {$mode} = props
+  const {button, color: baseColor, style} = getTheme_v2(props.theme)
+  const shadow = props.$mode === 'ghost'
+  const mode = baseColor.button[$mode] || baseColor.button.default
+  const color = mode[props.$tone] || mode.default
+  const border = {
+    width: button.border.width,
+    color: 'var(--card-border-color)',
+  }
+  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
+  const defaultBoxShadow = undefined
+
+  return [
+    _cardColorStyle(baseColor, color.enabled),
+    {
+      backgroundColor: 'var(--card-bg-color)',
+      color: 'var(--card-fg-color)',
+      boxShadow: focusRingBorderStyle(border),
+      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
+      "&:not([data-disabled='true'])": {
+        boxShadow: combineBoxShadow(
+          focusRingBorderStyle(border),
+          shadow ? defaultBoxShadow : undefined,
+        ),
+        '&:focus': {
+          boxShadow: focusRingStyle({
+            base: baseColor,
+            border: {width: 2, color: baseColor.bg},
+            focusRing: button.focusRing,
+          }),
+        },
+        '&:focus:not(:focus-visible)': {
+          boxShadow: combineBoxShadow(
+            focusRingBorderStyle(border),
+            shadow ? defaultBoxShadow : undefined,
+          ),
+        },
+        '@media (hover: hover)': {
+          '&:hover': _cardColorStyle(baseColor, color.hovered),
+          '&:active': _cardColorStyle(baseColor, color.pressed),
+          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
+        },
+        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
+      },
+    },
+    style?.button?.root,
+  ].filter(Boolean) as CSSObject[]
+}

package/src/{primitives → core/primitives}/card/__workshop__/asButton.tsx

@@ -9,7 +9,7 @@ export default function AsButtonStory() {
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Enabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -23,7 +23,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -33,7 +33,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Disabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -48,7 +48,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -58,7 +58,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Selected
             </Text>
             <Stack marginTop={3} space={2}>
@@ -72,7 +72,7 @@ export default function AsButtonStory() {
                     tone={tone}
                   >
                     <Stack space={2}>
-                      <Text weight="semibold">{title}</Text>
+                      <Text weight="medium">{title}</Text>
                       <Text muted>Muted</Text>
                       <Text accent>Accent</Text>
                     </Stack>

package/src/{primitives → core/primitives}/card/__workshop__/asComponent.tsx

@@ -19,7 +19,7 @@ export default function AsComponentStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+      <Card as={CustomLink} data-as="a" {...props} padding={3}>
         <Text>As component</Text>
       </Card>
     </Flex>

package/src/{primitives → core/primitives}/card/__workshop__/selected.tsx

@@ -1,36 +1,27 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
+import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
+import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
-import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../../theme/lib/theme/color/cssVariables/createCssVars'
 
-const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
-  $tone,
-}: {
-  $tone: ThemeColorToneKey
-}) => {
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
+  props: {
+    $tone: ThemeColorStateToneKey
+  } & ThemeProps,
+) => {
+  const {$tone} = props
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.button.default[$tone]
+
   return css`
     &:not([data-selected]) {
-      ${mutableCardVariables['fg-color']}: ${$tone ? cssVars[$tone]['text-secondary'] : undefined};
-      ${mutableCardVariables['muted-fg-color']} ${$tone
-        ? cssVars[$tone]['text-secondary']
-        : undefined};
+      --card-fg-color: ${tone.enabled.bg};
+      --card-muted-fg-color: ${tone.enabled.bg};
     }
 
     [data-ui='Card']:disabled & {
-      ${mutableCardVariables['fg-color']}: inherit;
-      ${mutableCardVariables['muted-fg-color']} inherit;
+      --card-fg-color: inherit;
+      --card-muted-fg-color: inherit;
     }
   `
 })
@@ -72,7 +63,7 @@ export default function SelectedStory() {
 }
 
 function Preview({selected}: {selected: boolean}) {
-  const theme = useRootTheme()
+  const rootTheme = useRootTheme()
 
   return (
     <Flex>
@@ -83,14 +74,14 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
-          $tone={theme.tone === 'default' ? 'caution' : 'default'}
+          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
         >
           <EditIcon />
         </TextWithTone>
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
-          $tone={theme.tone === 'default' ? 'positive' : 'default'}
+          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />
         </TextWithTone>

package/src/{primitives → core/primitives}/card/card.tsx

@@ -1,3 +1,4 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -10,9 +11,7 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorName, ThemeColorSchemeKey} from '../../theme'
-import {ToneProvider} from '../../theme/toneContext/toneProvider'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {ThemeColorProvider, useRootTheme} from '../../theme'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -40,12 +39,6 @@ export interface CardProps
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
-  /**
-   * @internal
-   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
-   * So if it's inheriting styles from the parent, it needs to create a new cars context
-   */
-  updateCssVars?: boolean
 }
 
 const Root = styled(Box)<
@@ -55,30 +48,10 @@ const Root = styled(Box)<
     ResponsiveShadowStyleProps
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
-const Wrapper = ({
-  shouldAddContext,
-  scheme,
-  tone,
-  children,
-}: {
-  shouldAddContext: boolean
-  scheme: ThemeColorSchemeKey
-  tone: ThemeColorName
-  children: React.ReactElement
-}): React.ReactElement => {
-  // Avoid creating a new react context if the card is just inheriting styles from the parent.
-  if (shouldAddContext) {
-    return (
-      <ToneProvider scheme={scheme} tone={tone}>
-        {children}
-      </ToneProvider>
-    )
-  }
-
-  return children
-}
-
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export const Card = forwardRef(function Card(
@@ -96,28 +69,25 @@ export const Card = forwardRef(function Card(
     borderLeft,
     pressed,
     radius = 0,
-    scheme: schemeProp,
+    scheme,
     selected,
     shadow,
     tone: toneProp = 'default',
-    updateCssVars = false,
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
-  const toneContext = useToneContext()
-  const tone = toneProp === 'inherit' ? toneContext.tone : toneProp
-  const scheme = schemeProp ?? toneContext.scheme
-  const shouldAddContext = scheme !== toneContext.scheme || tone !== toneContext.tone
+  const rootTheme = useRootTheme()
+  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
-    <Wrapper shouldAddContext={shouldAddContext} scheme={scheme} tone={tone}>
+    <ThemeColorProvider scheme={scheme} tone={tone}>
       <Root
         data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={scheme}
+        data-scheme={rootTheme.scheme}
         data-ui="Card"
         data-tone={tone}
-        $scheme={scheme ?? toneContext.scheme}
         {...restProps}
         $border={useArrayProp(border)}
         $borderTop={useArrayProp(borderTop)}
@@ -129,7 +99,6 @@ export const Card = forwardRef(function Card(
         $radius={useArrayProp(radius)}
         $shadow={useArrayProp(shadow)}
         $tone={tone}
-        $updateCssVars={updateCssVars || shouldAddContext}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
         data-selected={selected ? '' : undefined}
@@ -137,6 +106,6 @@ export const Card = forwardRef(function Card(
         ref={ref}
         selected={selected}
       />
-    </Wrapper>
+    </ThemeColorProvider>
   )
 })

package/src/{primitives → core/primitives}/card/styles.ts

@@ -1,13 +1,8 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {
-  _colorVarStyleActive,
-  _colorVarStyleDisabled,
-  _colorVarStyleHover,
-  _colorVarStyleSelected,
-} from '../../styles/colorVars'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
-import {createCssVars, cssVars} from '../../theme/lib/theme/color/cssVariables'
+import {_cardColorStyle} from '../../styles/card'
+import {focusRingStyle} from '../../styles/focusRing'
 import {CardStyleProps} from './types'
 
 export function cardStyle(
@@ -17,15 +12,15 @@ export function cardStyle(
 }
 
 export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, theme} = props
-  const space = theme.sanity.space
+  const {$checkered} = props
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     ${$checkered &&
     css`
       background-size: ${space[3]}px ${space[3]}px;
       background-position: 50% 50%;
-      background-image: ${cssVars.mutable['bg-image']};
+      background-image: var(--card-bg-image);
     `}
 
     &[data-as='button'] {
@@ -35,6 +30,8 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 
@@ -52,20 +49,17 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, theme, $tone, $scheme, $updateCssVars} = props
-  const {focusRing} = theme.sanity.card
-
-  const border = {width: 0, color: cssVars.positive['border-accent']}
+  const {$checkered, $focusRing} = props
+  const {card, color, style} = getTheme_v2(props.theme)
+  const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
   return css`
-    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */
-    ${$updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone)}
-    color-scheme: ${$scheme === 'dark' ? 'dark' : 'light'};
-    ${$checkered &&
-    `--card-bg-image: repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`}
+    color-scheme: ${color._dark ? 'dark' : 'light'};
 
-    background-color: ${cssVars.mutable['bg-color']};
-    color: ${cssVars.default['text-primary']};
+    ${_cardColorStyle(color, color, $checkered)}
+
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
 
     /* &:is(button) */
     &[data-as='button'] {
@@ -75,40 +69,36 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &:disabled {
-        ${_colorVarStyleDisabled($checkered)}
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
       }
 
       &:not(:disabled) {
         &[data-pressed] {
-          ${_colorVarStyleActive()}
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
         }
 
         &[data-selected] {
-          ${_colorVarStyleSelected()}
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
             }
 
             &:active {
-              ${_colorVarStyleActive()}
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
             }
           }
         }
 
-        &:focus {
+        &:focus-visible {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({border, focusRing})
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
             : undefined};
         }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
       }
     }
 
@@ -118,43 +108,39 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &[data-disabled] {
-        ${_colorVarStyleDisabled($checkered)}
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarStyleActive()}
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
         }
 
         &[data-selected] {
-          ${_colorVarStyleSelected()}
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
             }
 
             &:active {
-              ${_colorVarStyleActive()}
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
             }
           }
         }
 
-        &:focus {
+        &:focus-visible {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({border, focusRing})
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
             : undefined};
         }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
       }
     }
 
-    ${theme.sanity.styles?.card?.root}
+    ${style?.card?.root}
   `
 }

package/src/{primitives → core/primitives}/card/types.ts

@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey, ThemeColorToneKey} from '../../theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 
 /**
  * @internal
@@ -7,6 +7,4 @@ export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
-  $updateCssVars: boolean
 }

package/src/{primitives → core/primitives}/checkbox/__workshop__/example.tsx

@@ -15,7 +15,7 @@ export default function ExampleStory() {
           onChange={handleChange}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/props.tsx

@@ -23,7 +23,7 @@ export default function PropsStory() {
           readOnly={readOnly}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/readOnly.tsx

@@ -6,7 +6,7 @@ export default function ReadOnlyStory() {
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/checkbox.tsx

@@ -16,6 +16,8 @@ const Root = styled.div(checkboxBaseStyles)
 const Input = styled.input(inputElementStyles)
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export const Checkbox = forwardRef(function Checkbox(