@sanity/ui 2.0.0-alpha.8 → 2.0.0-beta.1

package/src/core/styles/card/_cardColorStyle.ts

@@ -0,0 +1,99 @@
+import {ThemeColorState_v2, ThemeColorCard_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ */
+export function _cardColorStyle(
+  base: ThemeColorCard_v2,
+  color: ThemeColorState_v2,
+  checkered = false,
+): CSSObject {
+  return {
+    // from base
+
+    '--card-focus-ring-color': base.focusRing,
+
+    '--card-shadow-outline-color': base.shadow.outline,
+    '--card-shadow-umbra-color': base.shadow.umbra,
+    '--card-shadow-penumbra-color': base.shadow.penumbra,
+    '--card-shadow-ambient-color': base.shadow.ambient,
+
+    // from state
+
+    '--card-accent-fg-color': color.accent.fg,
+
+    '--card-avatar-gray-bg-color': color.avatar.gray.bg,
+    '--card-avatar-gray-fg-color': color.avatar.gray.fg,
+    '--card-avatar-blue-bg-color': color.avatar.blue.bg,
+    '--card-avatar-blue-fg-color': color.avatar.blue.fg,
+    '--card-avatar-purple-bg-color': color.avatar.purple.bg,
+    '--card-avatar-purple-fg-color': color.avatar.purple.fg,
+    '--card-avatar-magenta-bg-color': color.avatar.magenta.bg,
+    '--card-avatar-magenta-fg-color': color.avatar.magenta.fg,
+    '--card-avatar-red-bg-color': color.avatar.red.bg,
+    '--card-avatar-red-fg-color': color.avatar.red.fg,
+    '--card-avatar-orange-bg-color': color.avatar.orange.bg,
+    '--card-avatar-orange-fg-color': color.avatar.orange.fg,
+    '--card-avatar-yellow-bg-color': color.avatar.yellow.bg,
+    '--card-avatar-yellow-fg-color': color.avatar.yellow.fg,
+    '--card-avatar-green-bg-color': color.avatar.green.bg,
+    '--card-avatar-green-fg-color': color.avatar.green.fg,
+    '--card-avatar-cyan-bg-color': color.avatar.cyan.bg,
+    '--card-avatar-cyan-fg-color': color.avatar.cyan.fg,
+
+    '--card-bg-color': color.bg,
+    '--card-bg-image': checkered
+      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
+      : undefined,
+
+    '--card-border-color': color.border,
+
+    '--card-badge-default-bg-color': color.badge.default.bg,
+    '--card-badge-default-dot-color': color.badge.default.dot,
+    '--card-badge-default-fg-color': color.badge.default.fg,
+    '--card-badge-default-icon-color': color.badge.default.icon,
+    '--card-badge-primary-bg-color': color.badge.primary.bg,
+    '--card-badge-primary-dot-color': color.badge.primary.dot,
+    '--card-badge-primary-fg-color': color.badge.primary.fg,
+    '--card-badge-primary-icon-color': color.badge.primary.icon,
+    '--card-badge-positive-bg-color': color.badge.positive.bg,
+    '--card-badge-positive-dot-color': color.badge.positive.dot,
+    '--card-badge-positive-fg-color': color.badge.positive.fg,
+    '--card-badge-positive-icon-color': color.badge.positive.icon,
+    '--card-badge-caution-bg-color': color.badge.caution.bg,
+    '--card-badge-caution-dot-color': color.badge.caution.dot,
+    '--card-badge-caution-fg-color': color.badge.caution.fg,
+    '--card-badge-caution-icon-color': color.badge.caution.icon,
+    '--card-badge-critical-bg-color': color.badge.critical.bg,
+    '--card-badge-critical-dot-color': color.badge.critical.dot,
+    '--card-badge-critical-fg-color': color.badge.critical.fg,
+    '--card-badge-critical-icon-color': color.badge.critical.icon,
+
+    '--card-code-bg-color': color.code.bg,
+    '--card-code-fg-color': color.code.fg,
+
+    '--card-fg-color': color.fg,
+
+    '--card-icon-color': color.icon,
+
+    '--card-kbd-bg-color': color.kbd.bg,
+    '--card-kbd-border-color': color.kbd.border,
+    '--card-kbd-fg-color': color.kbd.fg,
+
+    '--card-link-fg-color': color.link.fg,
+
+    '--card-muted-bg-color': color.muted.bg,
+    '--card-muted-fg-color': color.muted.fg,
+
+    '--card-skeleton-color-from': color.skeleton.from,
+    '--card-skeleton-color-to': color.skeleton.to,
+
+    // deprecated variables (kept for legacy)
+
+    '--card-bg2-color': color.muted.bg,
+    '--card-link-color': color.link.fg,
+    '--card-hairline-soft-color': color.border,
+    '--card-hairline-hard-color': color.border,
+  }
+}

package/src/core/styles/card/index.ts

@@ -0,0 +1 @@
+export * from './_cardColorStyle'

package/src/{styles → core/styles}/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../../constants'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'
@@ -18,8 +18,7 @@ export function flexItemStyle(): Array<
 export function responsiveFlexItemStyle(
   props: ResponsiveFlexItemStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   if (!props.$flex) return EMPTY_ARRAY
 

package/src/{styles → core/styles}/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
@@ -25,8 +25,7 @@ export function responsiveFlexStyle(): Array<
 export function responsiveFlexAlignStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$align, (align) => {
     return {alignItems: align}
@@ -34,8 +33,7 @@ export function responsiveFlexAlignStyle(
 }
 
 function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gap, (gap) => ({
     gap: gap ? rem(space[gap]) : undefined,
@@ -43,8 +41,7 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
 }
 
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$wrap, (wrap) => {
     return {flexWrap: wrap}
@@ -54,8 +51,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
 export function responsiveFlexJustifyStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$justify, (justify) => {
     return {justifyContent: justify}
@@ -65,8 +61,7 @@ export function responsiveFlexJustifyStyle(
 export function responsiveFlexDirectionStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$direction, (direction) => {
     return {flexDirection: direction}

package/src/{styles → core/styles}/focusRing/index.ts

@@ -1,4 +1,4 @@
-import {FocusRing, cssVars} from '../../theme'
+import {ThemeFocusRing} from '@sanity/ui/theme'
 
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
@@ -7,20 +7,18 @@ export function focusRingBorderStyle(border: {color: string; width: number}): st
 export function focusRingStyle(opts: {
   base?: {bg: string}
   border?: {color: string; width: number}
-  focusRing: FocusRing
+  focusRing: ThemeFocusRing
 }): string {
   const {base, border, focusRing} = opts
   const focusRingOutsetWidth = focusRing.offset + focusRing.width
   const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : cssVars.mutable['bg-color']
+  const bgColor = base ? base.bg : 'var(--card-bg-color)'
 
   return [
-    focusRingInsetWidth > 0 &&
-      `inset 0 0 0 ${focusRingInsetWidth}px ${cssVars.positive['border-accent']}`,
+    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
     border && focusRingBorderStyle(border),
     focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 &&
-      `0 0 0 ${focusRingOutsetWidth}px ${cssVars.positive['border-accent']}`,
+    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
   ]
     .filter(Boolean)
     .join(',')

package/src/{styles → core/styles}/font/codeFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/headingFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/labelFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/responsiveFont.ts

@@ -1,5 +1,5 @@
-import {ThemeFontSize, ThemeFontKey} from '../../theme'
-import {CSSObject} from '../../types/styled'
+import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'
@@ -12,9 +12,9 @@ export function responsiveFont(
   fontKey: ThemeFontKey,
   props: ResponsiveFontStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {$size, $weight, theme} = props
-  const {fonts, media} = theme.sanity
-  const {family, sizes, weights} = fonts[fontKey]
+  const {$size, $weight} = props
+  const {font, media} = getTheme_v2(props.theme)
+  const {family, sizes, weights} = font[fontKey]
   const fontWeight = ($weight && weights[$weight]) || weights.regular
 
   // @todo: make this configurable

package/src/{styles → core/styles}/font/textAlignStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'
@@ -10,9 +10,9 @@ import {ResponsiveTextAlignStyleProps} from './types'
 export function responsiveTextAlignStyle(
   props: ResponsiveTextAlignStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
+  const {media} = getTheme_v2(props.theme)
 
-  return _responsive(theme.sanity.media, props.$align, (textAlign) => {
+  return _responsive(media, props.$align, (textAlign) => {
     return {textAlign}
   })
 }

package/src/{styles → core/styles}/font/textFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/types.ts

@@ -1,4 +1,4 @@
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {TextAlign} from '../../types'
 
 /**

package/src/{styles → core/styles}/grid/gridItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
@@ -27,8 +27,7 @@ const GRID_ITEM_COLUMN = {
 }
 
 function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$row, (row) => {
     if (typeof row === 'number') {
@@ -40,8 +39,7 @@ function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeP
 }
 
 function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart,
@@ -49,15 +47,13 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
 }
 
 function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$column, (column) => {
     if (typeof column === 'number') {
@@ -69,8 +65,7 @@ function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & The
 }
 
 function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart,
@@ -78,8 +73,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
 }
 
 function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnEnd, (columnEnd) => ({
     gridColumnEnd: columnEnd,

package/src/{styles → core/styles}/grid/gridStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
@@ -43,8 +43,7 @@ export function responsiveGridStyle(): Array<
 }
 
 function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow,
@@ -52,8 +51,7 @@ function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoRows, (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
@@ -61,8 +59,7 @@ function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoCols, (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
@@ -70,8 +67,7 @@ function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columns, (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
@@ -79,8 +75,7 @@ function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps
 }
 
 function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rows, (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
@@ -88,8 +83,7 @@ function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gap, (gap) => ({
     gridGap: gap ? rem(space[gap]) : undefined,
@@ -97,8 +91,7 @@ function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapX, (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : undefined,
@@ -106,8 +99,7 @@ function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : undefined,

package/src/{styles → core/styles}/helpers.ts

@@ -1,6 +1,6 @@
+import {Theme, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../constants'
-import {Theme} from '../theme'
-import {CSSObject} from '../types/styled'
 
 /**
  * @internal
@@ -64,7 +64,9 @@ export function _getResponsiveSpace(
     return null
   }
 
-  return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
-    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex])),
+  const {media, space} = getTheme_v2(theme)
+
+  return _responsive(media, spaceIndexes, (spaceIndex) =>
+    _fillCSSObject(props, rem(space[spaceIndex])),
   )
 }

package/src/{styles → core/styles}/input/responsiveInputPaddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 
@@ -13,8 +13,8 @@ export interface TextInputResponsivePaddingStyleProps {
 export function responsiveInputPaddingStyle(
   props: TextInputResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
-  const {fonts, media, space: spaceScale} = theme.sanity
+  const {$fontSize, $iconLeft, $iconRight, $padding, $space} = props
+  const {font, media, space} = getTheme_v2(props.theme)
   const len = Math.max($padding.length, $space.length, $fontSize.length)
   const _padding: number[] = []
   const _space: number[] = []
@@ -27,10 +27,10 @@ export function responsiveInputPaddingStyle(
   }
 
   return _responsive(media, _padding, (_, i) => {
-    const size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2]
+    const size = font.text.sizes[_fontSize[i]] || font.text.sizes[2]
     const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight
-    const p = spaceScale[_padding[i]]
-    const s = spaceScale[_space[i]]
+    const p = space[_padding[i]]
+    const s = space[_space[i]]
 
     const styles = {
       paddingTop: rem(p - size.ascenderHeight),