@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.4

package/src/theme/defaults/colorTokens.ts

@@ -4,6 +4,9 @@ export const defaultColorTokens: ThemeColorTokens = {
   base: {
     '*': {
       _blend: ['multiply', 'screen'],
+      accent: {
+        fg: ['purple/600', 'purple/400'],
+      },
       avatar: {
         '*': {
           _blend: ['screen', 'multiply'],
@@ -19,6 +22,8 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           bg: ['100', '900'],
           fg: ['600', '400'],
+          icon: ['500', '500'],
+          dot: ['500', '500'],
         },
         positive: {
           bg: ['200/0.6', '900'],
@@ -33,7 +38,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       border: ['200', '800'],
       code: {
         bg: ['50', '950'],
-        fg: ['600', '400'],
+        fg: ['700', '300'],
       },
       fg: ['800', '200'],
       focusRing: ['blue/500', 'blue/500'],
@@ -43,7 +48,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['blue/600', 'blue/400'],
+        fg: ['blue/700', 'blue/300'],
       },
       muted: {
         bg: ['50', '950'],
@@ -100,8 +105,10 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
           badge: {
             '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
+              bg: ['900', '100'],
+              fg: ['400', '600'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
             },
           },
           bg: ['500', '400'],
@@ -113,8 +120,8 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['white', 'black'],
           icon: ['200', '800'],
           kbd: {
-            bg: ['900', '50'],
-            fg: ['white', 'black'],
+            bg: ['black', 'white'],
+            fg: ['200', '800'],
             border: ['800', '200'],
           },
           link: {
@@ -141,8 +148,21 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          badge: {
+            '*': {
+              bg: ['gray/700', 'gray/300'],
+              fg: ['white', 'black'],
+              dot: ['white', 'black'],
+              icon: ['white', 'black'],
+            },
+          },
           bg: ['200', '800'],
           icon: ['white', 'black'],
+          kbd: {
+            bg: ['black', 'white'],
+            fg: ['white', 'black'],
+            border: ['700', '300'],
+          },
         },
       },
       default: {
@@ -192,12 +212,29 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         '*': {
           _blend: ['multiply', 'screen'],
+          accent: {
+            fg: ['purple/700/0.6', 'purple/400/0.8'],
+          },
+          badge: {
+            '*': {
+              bg: ['100', '900'],
+              fg: ['600', '400'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
+            },
+          },
           bg: ['50', '950'],
+          border: ['100', '900'],
+          code: {
+            bg: ['500/0.1', '400/0.1'],
+            fg: ['700/0.6', '400/0.6'],
+          },
           fg: ['700', '400'],
           icon: ['600', '500'],
-          border: ['100', '900'],
-          accent: {
-            fg: ['purple/700/0.6', 'purple/400/0.8'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['600', '400'],
+            border: ['200', '800'],
           },
           link: {
             fg: ['blue/700/0.6', 'blue/400/0.8'],
@@ -206,20 +243,10 @@ export const defaultColorTokens: ThemeColorTokens = {
             bg: ['100', '950'],
             fg: ['700/0.6', '400/0.6'],
           },
-          code: {
-            bg: ['500/0.1', '400/0.1'],
-            fg: ['700/0.6', '400/0.6'],
-          },
           skeleton: {
             from: ['100', '900'],
             to: ['100/0.5', '900/0.5'],
           },
-          badge: {
-            '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
-            },
-          },
         },
         hovered: {
           bg: ['100', '900'],
@@ -235,21 +262,35 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          fg: ['200', '800'],
-          icon: ['200', '800'],
+          accent: {
+            fg: ['200', '800'],
+          },
+          badge: {
+            '*': {
+              _hue: 'gray',
+              bg: ['50', '950'],
+              fg: ['gray/200', 'gray/800'],
+              dot: ['gray/200', 'gray/800'],
+              icon: ['gray/200', 'gray/800'],
+            },
+          },
           border: ['100', '900'],
-          muted: {
-            fg: ['200/0.6', '900/0.6'],
+          code: {
+            bg: ['50', '950'],
+            fg: ['200', '800'],
           },
-          accent: {
-            fg: ['200/0.6', '900/0.6'],
+          fg: ['200', '800'],
+          icon: ['200', '800'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['200', '800'],
+            border: ['100', '900'],
           },
           link: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
-          code: {
-            bg: ['50/0.5', '950/0.5'],
-            fg: ['200/0.6', '900/0.6'],
+          muted: {
+            fg: ['200', '800'],
           },
         },
       },
@@ -268,34 +309,41 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         '*': {
           _blend: ['multiply', 'screen'],
+          accent: {
+            fg: ['purple/700/0.7', 'purple/300/0.7'],
+          },
+          badge: {
+            '*': {
+              bg: ['100', '900'],
+              fg: ['600', '400'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
+            },
+          },
           bg: ['white', 'black'],
-          fg: ['700', '300'],
-          icon: ['700/0.7', '300/0.7'],
           border: ['white/0', 'black/0'],
-          muted: {
+          code: {
             bg: ['100', '950'],
-            fg: ['700/0.7', '300/0.7'],
+            fg: ['600', '300'],
           },
-          accent: {
-            fg: ['purple/700/0.7', 'purple/300/0.7'],
+          fg: ['700', '300'],
+          icon: ['700/0.7', '300/0.7'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['600', '400'],
+            border: ['200', '800'],
           },
           link: {
             fg: ['blue/700/0.7', 'blue/300/0.7'],
           },
-          code: {
+          muted: {
             bg: ['100', '950'],
-            fg: ['600', '300'],
+            fg: ['700/0.7', '300/0.7'],
           },
           skeleton: {
             from: ['100', '900'],
             to: ['100/0.5', '900/0.5'],
           },
-          badge: {
-            '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
-            },
-          },
         },
         hovered: {
           bg: ['50', '950'],
@@ -314,19 +362,33 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          badge: {
+            '*': {
+              _hue: 'gray',
+              bg: ['50', '950'],
+              fg: ['gray/200', 'gray/800'],
+              dot: ['gray/200', 'gray/800'],
+              icon: ['gray/200', 'gray/800'],
+            },
+          },
           fg: ['200', '800'],
           muted: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
           accent: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
+          },
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['200', '800'],
+            border: ['100', '900'],
           },
           link: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
           code: {
-            bg: ['50/0.5', '950/0.5'],
-            fg: ['200/0.6', '900/0.6'],
+            bg: ['50', '950'],
+            fg: ['200', '800'],
           },
         },
       },
@@ -380,9 +442,18 @@ export const defaultColorTokens: ThemeColorTokens = {
             bg: ['500', '400'],
             fg: ['white', 'black'],
           },
-          //   yellow: {bg: ['600', '400']},
-          //   green: {bg: ['600', '400']},
-          //   cyan: {bg: ['600', '400']},
+          yellow: {bg: ['600', '400']},
+          green: {bg: ['600', '400']},
+          cyan: {bg: ['600', '400']},
+        },
+        badge: {
+          '*': {
+            // _blend: ['multiply', 'screen'],
+            bg: ['100', '900'],
+            fg: ['600', '400'],
+            dot: ['500', '500'],
+            icon: ['500', '500'],
+          },
         },
         border: ['200', '800'],
         muted: {
@@ -392,6 +463,11 @@ export const defaultColorTokens: ThemeColorTokens = {
         accent: {
           fg: ['purple/600', 'purple/400'],
         },
+        kbd: {
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['200', '800'],
+        },
         link: {
           fg: ['blue/700', 'blue/300'],
         },
@@ -403,21 +479,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           from: ['100', '900'],
           to: ['100/0.5', '900/0.5'],
         },
-        badge: {
-          '*': {
-            // _blend: ['multiply', 'screen'],
-            bg: ['100', '900'],
-            fg: ['600', '200'],
-            dot: ['300', '700'],
-            icon: ['600', '400'],
-          },
-        },
-        kbd: {
-          // _blend: ['multiply', 'screen'],
-          bg: ['white', 'black'],
-          fg: ['600', '400'],
-          border: ['200', '800'],
-        },
       },
       hovered: {
         bg: ['50', '950'],

package/src/theme/index.ts

@@ -1,12 +1,5 @@
-import {buildTheme} from './build'
-
 export * from './build'
 export * from './config'
 export * from './getScopedTheme'
 export * from './system'
 export * from './versioning'
-
-/**
- * @public
- */
-export const defaultTheme = buildTheme()

package/src/theme/system/color/_constants.ts

@@ -1,5 +1,8 @@
 import {COLOR_HUES} from '@sanity/color'
 
+/** @public */
+export const THEME_COLOR_SCHEMES = ['light', 'dark'] as const
+
 /** @public */
 export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 
@@ -7,7 +10,7 @@ export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 export const THEME_COLOR_CARD_TONES = [
   'transparent',
   'default',
-  'primary', // todo: rename to `accent` in the next breaking major version
+  'primary',
   'positive',
   'caution',
   'critical',
@@ -16,7 +19,7 @@ export const THEME_COLOR_CARD_TONES = [
 /** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary', // todo: rename to `accent` in the next breaking major version
+  'primary',
   'positive',
   'caution',
   'critical',

package/src/theme/system/color/_system.ts

@@ -5,6 +5,7 @@ import {
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_SCHEMES,
   THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
 } from './_constants'
@@ -12,7 +13,7 @@ import {
 /**
  * @public
  */
-export type ThemeColorSchemeKey = 'dark' | 'light'
+export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /** @public */
 export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]

package/src/theme/system/color/avatar.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
 
 /**
  * @public
@@ -12,14 +12,4 @@ export interface ThemeColorAvatarHue_v2 {
 /**
  * @public
  */
-export interface ThemeColorAvatar_v2 {
-  gray: ThemeColorAvatarHue_v2
-  blue: ThemeColorAvatarHue_v2
-  purple: ThemeColorAvatarHue_v2
-  magenta: ThemeColorAvatarHue_v2
-  red: ThemeColorAvatarHue_v2
-  orange: ThemeColorAvatarHue_v2
-  yellow: ThemeColorAvatarHue_v2
-  green: ThemeColorAvatarHue_v2
-  cyan: ThemeColorAvatarHue_v2
-}
+export type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

package/src/theme/system/color/button.ts

@@ -1,33 +1,17 @@
+import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
 /**
  * @public
  */
-export interface ThemeColorButtonStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
+export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /**
- * TODO: Rename to `ThemeColorButtonMode`.
  * @public
  */
-export interface ThemeColorButtonTones_v2 {
-  default: ThemeColorButtonStates_v2
-  primary: ThemeColorButtonStates_v2
-  positive: ThemeColorButtonStates_v2
-  caution: ThemeColorButtonStates_v2
-  critical: ThemeColorButtonStates_v2
-}
+export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
 
 /**
  * @public
  */
-export interface ThemeColorButton_v2 {
-  default: ThemeColorButtonTones_v2
-  ghost: ThemeColorButtonTones_v2
-  bleed: ThemeColorButtonTones_v2
-}
+export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

package/src/theme/system/color/input.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
 
 /**
  * @public
@@ -17,17 +17,9 @@ export interface ThemeColorInputState_v2 {
 /**
  * @public
  */
-export interface ThemeColorInputStates_v2 {
-  enabled: ThemeColorInputState_v2
-  disabled: ThemeColorInputState_v2
-  hovered: ThemeColorInputState_v2
-  readOnly: ThemeColorInputState_v2
-}
+export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
 
 /**
  * @public
  */
-export interface ThemeColorInput_v2 {
-  default: ThemeColorInputStates_v2
-  invalid: ThemeColorInputStates_v2
-}
+export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

package/src/theme/system/color/selectable.ts

@@ -1,23 +1,12 @@
+import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
 /**
  * @public
  */
-export interface ThemeColorSelectableStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
+export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /**
  * @public
  */
-export interface ThemeColorSelectable_v2 {
-  default: ThemeColorSelectableStates_v2
-  primary: ThemeColorSelectableStates_v2
-  positive: ThemeColorSelectableStates_v2
-  caution: ThemeColorSelectableStates_v2
-  critical: ThemeColorSelectableStates_v2
-}
+export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

package/src/theme/system/shadow.ts

@@ -9,12 +9,6 @@ export type ThemeBoxShadow = [
   number,
 ]
 
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` instead
- */
-export type BoxShadow = ThemeBoxShadow
-
 /**
  * @public
  */

package/src/theme/system/styles.ts

@@ -11,9 +11,3 @@ export interface ThemeStyles {
     root?: CSSObject
   }
 }
-
-/**
- * @deprecated Use `ThemeStyles` instead
- * @internal
- */
-export type Styles = ThemeStyles

package/src/theme/system/theme.ts

@@ -33,6 +33,7 @@ export interface RootTheme_v2 {
   radius: number[]
   shadow: Array<ThemeShadow | null>
   space: number[]
+  /** @internal */
   style?: ThemeStyles
 }
 
@@ -97,6 +98,7 @@ export interface BaseTheme {
    */
   space: number[]
   /**
+   * @internal
    * @deprecated Use `v2.style` instead
    */
   styles?: ThemeStyles

package/src/theme/system/v0/avatar.ts

@@ -1,6 +1,6 @@
 /**
  * @public
- * @deprecated Use `ThemeAvatar_v2` instead
+ * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
  */
 export interface ThemeAvatar {
   sizes: {

package/src/theme/system/v0/color/button.ts

@@ -2,13 +2,13 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export type ThemeColorButtonState = ThemeColorGenericState
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonStates_v2` instead.
  */
 export interface ThemeColorButtonStates {
   enabled: ThemeColorGenericState
@@ -21,7 +21,7 @@ export interface ThemeColorButtonStates {
 /**
  * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonTones_v2` instead.
  */
 export interface ThemeColorButtonTones {
   default: ThemeColorButtonStates
@@ -33,7 +33,7 @@ export interface ThemeColorButtonTones {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButton_v2` instead.
  */
 export interface ThemeColorButton {
   default: ThemeColorButtonTones

package/src/theme/system/v0/color/card.ts

@@ -2,13 +2,13 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export type ThemeColorCardState = ThemeColorGenericState
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorCard {
   enabled: ThemeColorGenericState

package/src/theme/system/v0/color/input.ts

@@ -2,7 +2,7 @@ import {ThemeColorBlendModeKey} from '../../color/_system'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputState_v2` instead.
  */
 export interface ThemeColorInputState {
   _blend?: ThemeColorBlendModeKey
@@ -15,7 +15,7 @@ export interface ThemeColorInputState {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
  */
 export interface ThemeColorInputStates {
   enabled: ThemeColorInputState
@@ -26,7 +26,7 @@ export interface ThemeColorInputStates {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInput_v2` instead.
  */
 export interface ThemeColorInput {
   default: ThemeColorInputStates

package/src/theme/system/v0/color/muted.ts

@@ -2,7 +2,7 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export interface ThemeColorMutedTone {
   enabled: ThemeColorGenericState
@@ -14,7 +14,7 @@ export interface ThemeColorMutedTone {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorMuted {
   default: ThemeColorMutedTone

package/src/theme/system/v0/color/solid.ts

@@ -2,7 +2,7 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export interface ThemeColorSolidTone {
   enabled: ThemeColorGenericState
@@ -14,7 +14,7 @@ export interface ThemeColorSolidTone {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorSolid {
   default: ThemeColorSolidTone