@sanity/ui 2.0.0-alpha.14 → 2.0.0-alpha.16

package/src/theme/_internal/build/colorTheme/resolveColorTokens.ts

@@ -0,0 +1,121 @@
+import {
+  BaseColorTokens,
+  ButtonColorTokens,
+  ButtonModeColorTokens,
+  ColorConfigStateTone,
+  ColorTokens,
+  StateColorTokens,
+} from '../../config'
+import {
+  COLOR_BASE_TONES,
+  COLOR_BUTTON_MODES,
+  COLOR_STATES,
+  COLOR_STATE_TONES,
+} from '../../constants'
+import {ColorBaseTone, ColorButtonMode, ColorState, ColorStateTone} from '../../types'
+
+/**
+ * Convert a tree of color tokens from a sparse format to a dense format.
+ */
+export function resolveColorTokens(sparseTokens: ColorTokens): ColorTokens {
+  const denseTokens: ColorTokens = {...sparseTokens}
+
+  // base tones
+  for (const tone of COLOR_BASE_TONES) {
+    denseTokens[tone] = resolveBaseColorTones(sparseTokens, tone)
+  }
+
+  // button
+  denseTokens.button = resolveButtonColorTokens(sparseTokens)
+
+  return denseTokens
+}
+
+function resolveBaseColorTones(sparseTokens: ColorTokens, tone: ColorBaseTone): BaseColorTokens {
+  const spec0 = sparseTokens?.[tone]
+  const spec1 = sparseTokens?.['*']
+
+  return {
+    ...spec1,
+    ...spec0,
+    shadow: {...spec1?.shadow, ...spec0?.shadow},
+    skeleton: {...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}
+
+function resolveButtonColorTokens(
+  sparseTokens: ColorTokens,
+): Partial<Record<ColorConfigStateTone, ButtonColorTokens>> {
+  const tokens: Partial<Record<ColorConfigStateTone, ButtonColorTokens>> = {}
+
+  for (const tone of COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonToneColorTokens(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveButtonToneColorTokens(
+  sparseTokens: ColorTokens,
+  tone: ColorStateTone,
+): ButtonColorTokens {
+  const tokens: ButtonColorTokens = {
+    ...sparseTokens.button?.[tone],
+    ...sparseTokens.button?.['*'],
+  }
+
+  for (const mode of COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonModeColorTokens(sparseTokens, tone, mode)
+  }
+
+  return tokens
+}
+
+function resolveButtonModeColorTokens(
+  sparseTokens: ColorTokens,
+  tone: ColorStateTone,
+  mode: ColorButtonMode,
+): ButtonModeColorTokens {
+  const spec0 = sparseTokens.button?.[tone]?.[mode]
+  const spec1 = sparseTokens.button?.['*']?.[mode]
+  const tokens = {...spec1, ...spec0}
+
+  for (const state of COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state)
+  }
+
+  return tokens
+}
+
+function resolveButtonStateColorTokens(
+  tokens: ColorTokens,
+  tone: ColorStateTone,
+  mode: ColorButtonMode,
+  state: ColorState,
+): StateColorTokens {
+  const spec0 = tokens?.button?.[tone]?.[mode]?.[state]
+  const spec1 = tokens?.button?.[tone]?.[mode]?.['*']
+  const spec2 = tokens?.button?.['*']?.[mode]?.[state]
+  const spec3 = tokens?.button?.['*']?.[mode]?.['*']
+
+  const hue =
+    spec0?._hue ||
+    spec1?._hue ||
+    spec2?._hue ||
+    spec3?._hue ||
+    tokens?.button?.[tone]?._hue ||
+    tokens?.[tone]?._hue
+
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {...spec3?.muted, ...spec2?.muted, ...spec1?.muted, ...spec0?.muted},
+    accent: {...spec3?.accent, ...spec2?.accent, ...spec1?.accent, ...spec0?.accent},
+    link: {...spec3?.link, ...spec2?.link, ...spec1?.link, ...spec0?.link},
+    code: {...spec3?.code, ...spec2?.code, ...spec1?.code, ...spec0?.code},
+    skeleton: {...spec3?.skeleton, ...spec2?.skeleton, ...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}

package/src/theme/_internal/build/defaults/colorTokens.ts

@@ -6,6 +6,17 @@ export const defaultColorTokens: ColorTokens = {
     bg: ['50', '950'],
     fg: ['800', '200'],
     border: ['200', '800'],
+    focusRing: ['cyan/500', 'cyan/500'],
+    shadow: {
+      outline: ['500/0.25', '400/0.3'],
+      umbra: ['500/0.1', 'black/0.4'],
+      penumbra: ['500/0.07', 'black/0.28'],
+      ambient: ['500/0.06', 'black/0.24'],
+    },
+    skeleton: {
+      from: ['100', '900'],
+      to: ['100/0.5', '900/0.5'],
+    },
   },
   transparent: {
     bg: ['50', 'black'],
@@ -33,7 +44,11 @@ export const defaultColorTokens: ColorTokens = {
         '*': {
           _blend: ['screen', 'multiply'],
           bg: ['500', '400'],
+          bg2: ['950', '50'],
           border: ['500/0', '400/0'],
+          muted: {
+            fg: ['200', '700'],
+          },
         },
         hovered: {
           bg: ['600', '300'],
@@ -47,15 +62,19 @@ export const defaultColorTokens: ColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          bg: ['100', '900'],
+          bg: ['200', '900'],
         },
       },
       ghost: {
         '*': {
           _blend: ['multiply', 'screen'],
           bg: ['white', 'black'],
+          bg2: ['50', '950'],
           fg: ['600', '400'],
           border: ['200', '800'],
+          muted: {
+            fg: ['600/0.6', '400/0.6'],
+          },
         },
         hovered: {
           bg: ['50', '950'],
@@ -71,16 +90,20 @@ export const defaultColorTokens: ColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          fg: ['100', '900'],
-          border: ['100', '900'],
+          fg: ['200', '900'],
+          border: ['100', '950'],
         },
       },
       bleed: {
         '*': {
           _blend: ['multiply', 'screen'],
           bg: ['white', 'black'],
+          bg2: ['50', '950'],
           fg: ['600', '400'],
           border: ['white/0', 'black/0'],
+          muted: {
+            fg: ['600/0.6', '400/0.6'],
+          },
         },
         hovered: {
           bg: ['50', '950'],
@@ -96,7 +119,7 @@ export const defaultColorTokens: ColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          fg: ['100', '900'],
+          fg: ['200', '900'],
         },
       },
     },
@@ -116,7 +139,7 @@ export const defaultColorTokens: ColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          bg: ['100', '900'],
+          bg: ['200', '900'],
         },
       },
     },

package/src/theme/_internal/build/helpers.ts

@@ -8,12 +8,13 @@ import {
 import {ColorTokenValue, parseTokenValue, TokenColorValueNode} from '../config'
 import {ColorHueValue} from '../types'
 
-export function resolveColorTokenValue(options: {
+export interface ColorTokenContext {
   hue: ColorHueValue
   scheme: 'light' | 'dark'
-  value: ColorTokenValue
-}): string {
-  const {hue, scheme, value} = options
+}
+
+export function resolveColorTokenValue(context: ColorTokenContext, value: ColorTokenValue): string {
+  const {hue, scheme} = context
   const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
 
   if (!node || node.type !== 'color') {

package/src/theme/_internal/config/types.ts

@@ -21,6 +21,17 @@ export interface BaseColorTokens {
   bg?: ColorTokenValue
   fg?: ColorTokenValue
   border?: ColorTokenValue
+  focusRing?: ColorTokenValue
+  shadow?: {
+    outline?: ColorTokenValue
+    umbra?: ColorTokenValue
+    penumbra?: ColorTokenValue
+    ambient?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
 }
 
 export interface StateColorTokens {

package/src/theme/_internal/types.ts

@@ -54,12 +54,31 @@ export type TMP_ButtonColorTheme = Record<ColorStateTone, TMP_ButtonModesColorTh
 export interface TMP_BaseColorTheme {
   _blend: ColorBlendModeValue
   dark: boolean
+  // base: ThemeColorBase
   base: {
     bg: string
     fg: string
     border: string
+    focusRing: string
+    shadow: {
+      outline: string
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+    skeleton: {
+      from: string
+      to: string
+    }
   }
   button: TMP_ButtonColorTheme
+  // card: ThemeColorCard
+  // input: ThemeColorInput
+  // selectable?: ThemeColorSelectable
+  // spot: ThemeColorSpot
+  // syntax: ThemeColorSyntax
+  // solid: ThemeColorSolid
+  // muted: ThemeColorMuted
 }
 
 export type TMP_ColorTheme = Record<ColorBaseTone, TMP_BaseColorTheme>