@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/src/theme/config/system.ts

@@ -9,7 +9,7 @@ import {
   ThemeColorBlendModeKey,
 } from '../system'
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_KEYS = [
   '_hue',
   'bg',
@@ -30,7 +30,7 @@ export const COLOR_CONFIG_STATE_KEYS = [
 /** @public */
 export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_KEYS = [
   ...COLOR_CONFIG_STATE_KEYS,
   '_hue',
@@ -47,7 +47,7 @@ export const COLOR_CONFIG_CARD_KEYS = [
 /** @public */
 export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
 
 /** @public */
@@ -75,37 +75,37 @@ export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
 /** @public */
 export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
 
 /** @public */
 export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
 
 /** @public */
 export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
 
 /** @public */
 export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
 
 /** @public */
 export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
 
 /** @public */
 export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
 
 /** @public */

package/src/theme/config/tokens/color/types.ts

@@ -10,6 +10,7 @@ import {
   ThemeColorTokenValue,
 } from '../../system'
 
+/** @public */
 export interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -17,6 +18,7 @@ export interface ThemeColorAvatarHueTokens {
   fg?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorAvatarTokens {
   '*'?: ThemeColorAvatarHueTokens
   gray?: ThemeColorAvatarHueTokens
@@ -30,8 +32,8 @@ export interface ThemeColorAvatarTokens {
   cyan?: ThemeColorAvatarHueTokens
 }
 
+/** @public */
 export interface ThemeColorBadgeTokens {
-  // _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -39,6 +41,7 @@ export interface ThemeColorBadgeTokens {
   icon?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
   backdrop?: ThemeColorTokenValue
@@ -50,6 +53,7 @@ export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   }
 }
 
+/** @public */
 export interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -59,6 +63,7 @@ export interface ThemeColorBadgeToneTokens {
   icon?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorBadgeTokens {
   '*'?: ThemeColorBadgeToneTokens
   default?: ThemeColorBadgeToneTokens
@@ -68,6 +73,7 @@ export interface ThemeColorBadgeTokens {
   critical?: ThemeColorBadgeToneTokens
 }
 
+/** @public */
 export interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -102,13 +108,16 @@ export interface ThemeColorStateTokens {
   }
 }
 
+/** @public */
 export type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>
 
+/** @public */
 export interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
   _hue?: ColorHueKey
 }
 
+/** @public */
 export interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -121,11 +130,13 @@ export interface ThemeColorInputStateTokens {
   placeholder?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorInputTokens
   extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
   _hue?: ColorHueKey
 }
 
+/** @public */
 export interface ThemeColorTokens {
   base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
   button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>

package/src/theme/config/tokens/parseTokenKey.ts

@@ -8,6 +8,7 @@ import {
 } from '../helpers'
 import {TokenKeyNode} from './types'
 
+/** @internal */
 export function parseTokenKey(str: string): TokenKeyNode | undefined {
   const segments = str.split('/')
   const segment0 = segments.shift() || ''

package/src/theme/config/tokens/parseTokenValue.ts

@@ -2,6 +2,7 @@ import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system
 import {isColorOpacityValue, isColorValue} from '../helpers'
 import {TokenValueNode} from './types'
 
+/** @internal */
 export function parseTokenValue(str: string): TokenValueNode | undefined {
   const segments = str.split('/')
   const segment0 = segments.shift() || ''

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/defaults/config.ts

@@ -7,6 +7,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
   _version: 2,
   avatar: {
     sizes: [
+      {distance: -4, size: 19},
       {distance: -4, size: 25},
       {distance: -8, size: 33},
       {distance: -12, size: 49},

package/src/theme/defaults/fonts.ts

@@ -125,7 +125,15 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 9.8,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
         letterSpacing: 0.5,
@@ -133,7 +141,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 11.25,
+        fontSize: 10.8,
         iconSize: 17,
         lineHeight: 12,
         letterSpacing: 0.5,
@@ -141,7 +149,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 12.75,
+        fontSize: 12.25,
         iconSize: 19,
         lineHeight: 13,
         letterSpacing: 0.5,
@@ -149,7 +157,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 14,
+        fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,
         letterSpacing: 0.5,
@@ -157,7 +165,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 15.5,
+        fontSize: 15,
         iconSize: 23,
         lineHeight: 15,
         letterSpacing: 0.5,

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>