@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

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/core/styles/flex/flexItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../../constants'
 import {_responsive} from '../helpers'
 import {ThemeProps} 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/core/styles/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+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/core/styles/font/responsiveFont.ts

@@ -1,4 +1,4 @@
-import {ThemeFontSize, ThemeFontKey} from '@sanity/ui/theme'
+import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} 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/core/styles/font/textAlignStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+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/core/styles/grid/gridItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+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/core/styles/grid/gridStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+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/core/styles/helpers.ts

@@ -1,4 +1,4 @@
-import {Theme} from '@sanity/ui/theme'
+import {Theme, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../constants'
 
@@ -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/core/styles/input/responsiveInputPaddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+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),

package/src/core/styles/input/textInputStyle.ts

@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {CardTone} from '../../types'
@@ -42,9 +42,8 @@ export function textInputRootStyle(): ReturnType<typeof css> {
 export function textInputBaseStyle(
   props: TextInputInputStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {theme, $scheme, $tone, $weight} = props
-  const font = theme.sanity.fonts.text
-  const color = theme.sanity.color.input
+  const {$scheme, $tone, $weight} = props
+  const {color, font} = getTheme_v2(props.theme)
 
   return css`
     appearance: none;
@@ -54,8 +53,8 @@ export function textInputBaseStyle(
     outline: none;
     width: 100%;
     box-sizing: border-box;
-    font-family: ${font.family};
-    font-weight: ${($weight && font.weights[$weight]) || font.weights.regular};
+    font-family: ${font.text.family};
+    font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular};
     margin: 0;
     position: relative;
     z-index: 1;
@@ -83,42 +82,41 @@ export function textInputBaseStyle(
     }
 
     &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --input-fg-color: ${color.default.enabled.fg};
-      --input-placeholder-color: ${color.default.enabled.placeholder};
+      --input-fg-color: ${color.input.default.enabled.fg};
+      --input-placeholder-color: ${color.input.default.enabled.placeholder};
 
       /* enabled */
       &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.default.enabled.fg};
-        --input-placeholder-color: ${color.default.enabled.placeholder};
+        --input-fg-color: ${color.input.default.enabled.fg};
+        --input-placeholder-color: ${color.input.default.enabled.placeholder};
       }
 
       /* disabled */
       &:not(:invalid):disabled {
-        --input-fg-color: ${color.default.disabled.fg};
-        --input-placeholder-color: ${color.default.disabled.placeholder};
+        --input-fg-color: ${color.input.default.disabled.fg};
+        --input-placeholder-color: ${color.input.default.disabled.placeholder};
       }
 
       /* invalid */
       &:invalid {
-        --input-fg-color: ${color.invalid.enabled.fg};
-        --input-placeholder-color: ${color.invalid.enabled.placeholder};
+        --input-fg-color: ${color.input.invalid.enabled.fg};
+        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
       }
 
       /* readOnly */
       &:read-only {
-        --input-fg-color: ${color.default.readOnly.fg};
-        --input-placeholder-color: ${color.default.readOnly.placeholder};
+        --input-fg-color: ${color.input.default.readOnly.fg};
+        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
       }
     }
   `
 }
 
 export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {fonts, media} = theme.sanity
+  const {font, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$fontSize, (sizeIndex) => {
-    const size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2]
+    const size = font.text.sizes[sizeIndex] || font.text.sizes[2]
 
     return {
       fontSize: rem(size.fontSize),
@@ -130,10 +128,8 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing, theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.text
-  const color = theme.sanity.color.input
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     --input-box-shadow: none;
@@ -156,25 +152,25 @@ export function textInputRepresentationStyle(
     border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
 
     &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.default.enabled.bg};
-      --card-fg-color: ${color.default.enabled.fg};
+      --card-bg-color: ${color.input.default.enabled.bg};
+      --card-fg-color: ${color.input.default.enabled.fg};
 
       /* enabled */
       *:not(:disabled) + &[data-border] {
         --input-box-shadow: ${focusRingBorderStyle({
-          color: color.default.enabled.border,
+          color: color.input.default.enabled.border,
           width: input.border.width,
         })};
       }
 
       /* invalid */
       *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.invalid.enabled.bg};
-        --card-fg-color: ${color.invalid.enabled.fg};
+        --card-bg-color: ${color.input.invalid.enabled.bg};
+        --card-fg-color: ${color.input.invalid.enabled.fg};
 
         &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
-            color: color.invalid.enabled.border,
+            color: color.input.invalid.enabled.border,
             width: input.border.width,
           })};
         }
@@ -186,26 +182,26 @@ export function textInputRepresentationStyle(
           --input-box-shadow: ${$unstableDisableFocusRing
             ? undefined
             : focusRingStyle({
-                border: {color: color.default.enabled.border, width: input.border.width},
-                focusRing,
+                border: {color: color.input.default.enabled.border, width: input.border.width},
+                focusRing: input.text.focusRing,
               })};
         }
 
         &:not([data-border]) {
           --input-box-shadow: ${$unstableDisableFocusRing
             ? undefined
-            : focusRingStyle({focusRing})};
+            : focusRingStyle({focusRing: input.text.focusRing})};
         }
       }
 
       /* disabled */
       *:disabled + & {
-        --card-bg-color: ${color.default.disabled.bg} !important;
-        --card-fg-color: ${color.default.disabled.fg} !important;
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
 
         &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.disabled.border,
+            color: color.input.default.disabled.border,
             width: input.border.width,
           })};
         }
@@ -213,20 +209,20 @@ export function textInputRepresentationStyle(
 
       /* readOnly */
       *:read-only + & {
-        --card-bg-color: ${color.default.readOnly.bg} !important;
-        --card-fg-color: ${color.default.readOnly.fg} !important;
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
       }
 
       /* hovered */
       @media (hover: hover) {
         *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.default.hovered.bg};
-          --card-fg-color: ${color.default.hovered.fg};
+          --card-bg-color: ${color.input.default.hovered.bg};
+          --card-fg-color: ${color.input.default.hovered.fg};
         }
 
         *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.hovered.border,
+            color: color.input.default.hovered.border,
             width: input.border.width,
           })};
         }

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,10 +1,9 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '@sanity/ui/theme'
+import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme = getScopedTheme(defaultTheme, 'light', 'default')
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,10 +1,9 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '@sanity/ui/theme'
+import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme = getScopedTheme(defaultTheme, 'light', 'default')
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/core/styles/radius/radiusStyle.ts

@@ -1,11 +1,10 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'
 
 export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media, radius} = theme.sanity
+  const {media, radius} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$radius, (value) => {
     let borderRadius: string | 0 = 0

package/src/core/styles/shadow/shadowStyle.ts

@@ -1,4 +1,4 @@
-import {ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
+import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_RECORD} from '../../constants'
 import {rem, _responsive} from '../helpers'
@@ -21,10 +21,9 @@ function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSO
 }
 
 export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {card, media, shadows} = theme.sanity
+  const {card, media, shadow} = getTheme_v2(props.theme)
 
-  return _responsive(media, props.$shadow, (shadow) =>
-    shadowStyle(shadows[shadow], card.shadow.outline),
+  return _responsive(media, props.$shadow, (index) =>
+    shadowStyle(shadow[index], card.shadow.outline),
   )
 }