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

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

@@ -1,7 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 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 checkboxBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -11,8 +11,7 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 }
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input, radius} = theme.sanity
+  const {color, input, radius} = getTheme_v2(props.theme)
   const {focusRing} = input.checkbox
 
   return css`
@@ -34,12 +33,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       width: ${rem(input.checkbox.size)};
       box-sizing: border-box;
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['border-base'],
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
       border-radius: ${rem(radius[2])};
       line-height: 1;
-      background-color: ${cssVars.default['bg-base']};
+      background-color: ${color.input.default.enabled.bg};
 
       & > svg {
         display: block;
@@ -50,17 +49,18 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 1.2 !important;
+          stroke-width: 1.5px !important;
         }
       }
     }
+
     &:checked + span {
-      background: ${cssVars.default['text-secondary']};
+      background: ${color.input.default.enabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['text-secondary'],
+        color: color.input.default.enabled.fg,
         width: input.border.width,
       })};
-      color: ${cssVars.default['bg-base']};
+      color: ${color.input.default.enabled.bg};
     }
 
     /* focus */
@@ -74,47 +74,47 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
     }
 
     &[data-error] + span {
-      background-color: ${cssVars.critical['border-base']};
+      background-color: ${color.input.invalid.enabled.border};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: cssVars.critical['text-secondary'],
+        color: color.input.invalid.enabled.muted.bg,
       })};
-      color: ${cssVars.default['text-secondary']};
+      color: ${color.input.default.disabled.fg};
     }
     &[data-error]&:checked + span {
-      background-color: ${cssVars.critical['text-secondary']};
-      color: ${cssVars.default['bg-base']};
+      background-color: ${color.input.invalid.enabled.muted.bg};
+      color: ${color.input.default.enabled.bg};
     }
     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: cssVars.critical['text-secondary']},
+        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
         focusRing: {width: 1, offset: 1},
       })};
     }
 
     &:disabled + span {
-      background-color: ${cssVars.default['bg-tint']};
+      background-color: ${color.input.default.disabled.bg};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: cssVars.default['border-base'],
+        color: color.input.default.disabled.border,
       })};
-      color: ${cssVars.default['text-secondary']};
+      color: ${color.input.default.disabled.fg};
     }
     &:disabled&:checked + span {
-      background-color: ${cssVars.default['border-base']};
+      background-color: ${color.input.default.disabled.muted.bg};
     }
 
     &[data-read-only] + span {
-      background-color: ${cssVars.default['bg-tint']};
+      background-color: ${color.input.default.readOnly.bg};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: cssVars.default['border-base'],
+        color: color.input.default.readOnly.border,
       })};
-      color: ${cssVars.default['text-secondary']};
+      color: ${color.input.default.readOnly.fg};
     }
 
     &[data-read-only]&:checked + span {
-      background-color: ${cssVars.default['border-base']};
+      background-color: ${color.input.default.readOnly.muted.bg};
     }
 
     &:checked + span > svg:first-child {

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

@@ -4,23 +4,20 @@ import Refractor from 'react-refractor'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {codeBaseStyle, CodeBaseStyleProps} from './styles'
+import {codeBaseStyle} from './styles'
 
 /**
  * @public
  */
 export interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
 }
 
-const Root = styled.pre<CodeBaseStyleProps & ResponsiveFontStyleProps>(
-  codeBaseStyle,
-  responsiveCodeFontStyle,
-)
+const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
 
 /**
  * @public
@@ -32,17 +29,9 @@ export const Code = forwardRef(function Code(
   const {children, language: languageProp, size = 2, weight, ...restProps} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language as any) : false
-  const {scheme} = useToneContext()
 
   return (
-    <Root
-      data-ui="Code"
-      {...restProps}
-      $size={useArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-      $scheme={scheme}
-    >
+    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>

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

@@ -0,0 +1,77 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css, ExecutionContext} from 'styled-components'
+
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
+  const {
+    color: {syntax: color},
+  } = getTheme_v2(theme)
+
+  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},
+  }
+}
+
+export function codeBaseStyle(): ReturnType<typeof css> {
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

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

@@ -17,6 +17,8 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
 )
 
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export const Container = forwardRef(function Container(

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

@@ -1,5 +1,5 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {
@@ -14,8 +14,7 @@ export function containerBaseStyle(): CSSObject {
 export function responsiveContainerWidthStyle(
   props: ResponsiveWidthStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {container, media} = theme.sanity
+  const {container, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),

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

@@ -26,6 +26,8 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
 )
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export const Flex = forwardRef(function Flex(
@@ -35,7 +37,6 @@ export const Flex = forwardRef(function Flex(
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
   return (
-    // @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
     <Root
       data-ui="Flex"
       {...restProps}

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

@@ -13,6 +13,8 @@ export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProp
 const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export const Grid = forwardRef(function Grid(

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

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -7,7 +8,6 @@ import {
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
@@ -43,6 +43,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export const Heading = forwardRef(function Heading(

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

@@ -1,31 +1,32 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 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> {
-  const {$accent, $muted, theme} = props
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   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 {
-      font-family: ${theme.sanity.fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
     }
 
     & a {
       text-decoration: none;
       border-radius: 1px;
-      color: ${cssVars.default['text-link']};
+      color: var(--card-link-color);
       outline: none;
 
       @media (hover: hover) {
@@ -36,8 +37,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 → core/primitives}/inline/inline.tsx

@@ -10,12 +10,15 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
  * @public
  */
 export interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
 const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export const Inline = forwardRef(function Inline(

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

@@ -1,5 +1,5 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
@@ -18,14 +18,14 @@ export function inlineBaseStyle(): CSSObject {
 }
 
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
+  const {media, space} = getTheme_v2(props.theme)
 
-  return _responsive(theme.sanity.media, props.$space, (spaceIndex) => {
-    const space = rem(theme.sanity.space[spaceIndex])
+  return _responsive(media, props.$space, (spaceIndex) => {
+    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
 
     return {
-      margin: `-${space} 0 0 -${space}`,
-      '& > div': {padding: `${space} 0 0 ${space}`},
+      margin: `-${_space} 0 0 -${_space}`,
+      '& > div': {padding: `${_space} 0 0 ${_space}`},
     }
   })
 }

package/src/{primitives → core/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,12 @@ export interface KBDProps {
 
 function kbdStyle() {
   return css`
-    background: ${cssVars.default['bg-tint']};
+    --card-bg-color: var(--card-kbd-bg-color);
+    --card-border-color: var(--card-kbd-border-color);
+    --card-fg-color: var(--card-kbd-fg-color);
+
+    box-shadow: inset 0 0 0 1px var(--card-border-color);
+    background: var(--card-bg-color);
     font: inherit;
 
     &:not([hidden]) {
@@ -31,18 +35,20 @@ function kbdStyle() {
 const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export const KBD = forwardRef(function KBD(
   props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
+  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
 
   return (
     <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
-        <Text as="span" muted size={fontSize} weight="medium">
+        <Text as="span" size={fontSize} weight="semibold">
           {children}
         </Text>
       </Box>

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

@@ -1,8 +1,8 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
 
@@ -40,6 +40,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export const Label = forwardRef(function Label(

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

@@ -1,28 +1,28 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$accent, $muted, theme} = props
-  const {fonts} = theme.sanity
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     text-transform: uppercase;
 
     ${$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: ${fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
     }
 

package/src/{primitives → core/primitives}/popover/__workshop__/RecursiveStory.tsx

@@ -1,12 +1,5 @@
-import {
-  Button,
-  Flex,
-  LayerProvider,
-  Placement,
-  Popover,
-  ThemeColorToneKey,
-  useLayer,
-} from '@sanity/ui'
+import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {

package/src/{primitives → core/primitives}/popover/__workshop__/TestStory.tsx

@@ -22,6 +22,7 @@ export default function TestStory(): ReactElement {
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
@@ -31,7 +32,9 @@ export default function TestStory(): ReactElement {
 
   const updateRef = useRef<PopoverUpdateCallback>()
 
-  const button = <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+  const button = (
+    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
+  )
 
   return (
     <Card
@@ -67,7 +70,7 @@ export default function TestStory(): ReactElement {
               {mount && (
                 <Popover
                   arrow={arrow}
-                  content={<Text>{text}</Text>}
+                  content={<Text size={1}>{text}</Text>}
                   constrainSize={constrainSize}
                   fallbackPlacements={['left', 'bottom', 'right', 'top']}
                   matchReferenceWidth={matchReferenceWidth}
@@ -75,7 +78,7 @@ export default function TestStory(): ReactElement {
                   overflow="hidden"
                   padding={3}
                   placement={placement}
-                  portal
+                  portal={portal}
                   preventOverflow={preventOverflow}
                   radius={radius}
                   updateRef={updateRef}

package/src/{primitives → core/primitives}/popover/constants.ts

@@ -2,8 +2,9 @@ import {Placement, PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
-export const DEFAULT_POPOVER_ARROW_WIDTH = 27
-export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
+export const DEFAULT_POPOVER_ARROW_WIDTH = 19
+export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
+export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['bottom', 'left', 'right'],

package/src/{primitives → core/primitives}/popover/helpers.ts

@@ -1,18 +1,17 @@
-import {Theme} from '../../theme'
 import {DEFAULT_POPOVER_PADDING} from './constants'
 import {PopoverWidth} from './types'
 
 export function calcCurrentWidth(params: {
   mediaIndex: number
-  theme: Theme
+  container: number[]
   width: PopoverWidth[]
 }): number | undefined {
-  const {mediaIndex, theme, width} = params
+  const {container, mediaIndex, width} = params
 
   const w = width[mediaIndex]
   const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
 
-  return typeof currentWidth === 'number' ? theme.sanity.container[currentWidth] : undefined
+  return typeof currentWidth === 'number' ? container[currentWidth] : undefined
 }
 
 export function calcMaxWidth(params: {