@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/src/theme/defaults/color.ts

@@ -0,0 +1,197 @@
+import type {ColorTokens, PartialTokens} from '../types'
+
+/** @internal */
+export const defaultColor: PartialTokens<ColorTokens> = {
+  '*': {
+    backdrop: ['gray-100/0.5', 'black/0.5'],
+    code: {
+      bg: ['50', '950'],
+      fg: ['700', '300'],
+      token: {
+        atrule: ['purple-600', 'purple-400'],
+        attrName: ['green-600', 'green-400'],
+        attrValue: ['yellow-600', 'yellow-400'],
+        attribute: ['yellow-600', 'yellow-400'],
+        boolean: ['purple-600', 'purple-400'],
+        builtin: ['purple-600', 'purple-400'],
+        cdata: ['yellow-600', 'yellow-400'],
+        char: ['yellow-600', 'yellow-400'],
+        class: ['orange-600', 'orange-400'],
+        className: ['cyan-600', 'cyan-400'],
+        comment: ['gray-400', 'gray-600'],
+        constant: ['purple-600', 'purple-400'],
+        deleted: ['red-600', 'red-400'],
+        entity: ['red-600', 'red-400'],
+        function: ['green-600', 'green-400'],
+        hexcode: ['blue-600', 'blue-400'],
+        id: ['purple-600', 'purple-400'],
+        important: ['purple-600', 'purple-400'],
+        inserted: ['green-600', 'green-400'],
+        keyword: ['magenta-600', 'magenta-400'],
+        number: ['purple-600', 'purple-400'],
+        operator: ['magenta-600', 'magenta-400'],
+        prolog: ['gray-600', 'gray-400'],
+        property: ['blue-600', 'blue-400'],
+        pseudoClass: ['yellow-600', 'yellow-400'],
+        pseudoElement: ['yellow-600', 'yellow-400'],
+        punctuation: ['gray-600', 'gray-400'],
+        regex: ['blue-600', 'blue-400'],
+        selector: ['red-600', 'red-400'],
+        string: ['yellow-600', 'yellow-400'],
+        symbol: ['purple-600', 'purple-400'],
+        tag: ['red-600', 'red-400'],
+        unit: ['orange-600', 'orange-400'],
+        url: ['red-600', 'red-400'],
+        variable: ['red-600', 'red-400'],
+      },
+    },
+    focusRing: ['blue-500', 'blue-500'],
+    link: {
+      fg: ['blue-600', 'blue-400'],
+    },
+    shadow: {
+      outline: ['600/0.3', '500/0.4'],
+      umbra: ['600/0.1', 'black/0.2'],
+      penumbra: ['600/0.07', 'black/0.14'],
+      ambient: ['600/0.06', 'black/0.12'],
+    },
+    skeleton: {
+      from: ['200 70%', '800 35%'],
+      to: ['200 40%', '800 50%'],
+    },
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['100 75%', '900 75%'],
+            4: ['300', '700'],
+          },
+          border: {
+            0: ['200', '700 50%'],
+            4: ['300 75%', '500'],
+          },
+          fg: {
+            0: ['900', '100'],
+            4: ['700', '300'],
+          },
+        },
+        'primary': {
+          _hue: 'blue',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'suggest': {
+          _hue: 'purple',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'positive': {
+          _hue: 'green',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'caution': {
+          _hue: 'yellow',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'critical': {
+          _hue: 'red',
+          bg: {0: ['inherit', 'inherit']},
+        },
+      },
+      solid: {
+        '*': {
+          bg: {
+            0: ['500', '400'],
+            4: ['600', '300'],
+          },
+          border: {
+            0: ['400', '200'],
+            4: ['500', '100'],
+          },
+          fg: {
+            0: ['white', 'black'],
+            4: ['200', '700'],
+          },
+        },
+        'default': {
+          bg: {
+            0: ['800', '200'],
+            4: ['black', 'white'],
+          },
+          border: {
+            0: ['700', '300'],
+            4: ['800', '200'],
+          },
+        },
+        'primary': {
+          _hue: 'blue',
+        },
+        'suggest': {
+          _hue: 'purple',
+        },
+        'positive': {
+          _hue: 'green',
+        },
+        'caution': {
+          _hue: 'yellow',
+        },
+        'critical': {
+          _hue: 'red',
+        },
+      },
+    },
+  },
+  'transparent': {
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['gray-50', 'black'],
+            4: ['300 75%', '700 75%'],
+          },
+          border: {
+            0: ['200', '800 75%'],
+            4: ['400', '700'],
+          },
+          fg: {
+            0: ['black', '100'],
+            4: ['700', '400'],
+          },
+        },
+      },
+    },
+  },
+  'default': {
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['white', '950'],
+            4: ['300 75%', '700'],
+          },
+          border: {
+            0: ['200', '800 75%'],
+            4: ['400', '700'],
+          },
+          fg: {
+            0: ['black', 'white'],
+            4: ['600', '400'],
+          },
+        },
+      },
+    },
+  },
+  'primary': {
+    _hue: 'blue',
+  },
+  'suggest': {
+    _hue: 'purple',
+  },
+  'positive': {
+    _hue: 'green',
+  },
+  'caution': {
+    _hue: 'yellow',
+  },
+  'critical': {
+    _hue: 'red',
+  },
+}

package/src/theme/{v2/defaults/config.ts → defaults/common.ts}

@@ -1,10 +1,9 @@
-import type {RootTheme_v2} from '../theme'
+import type {Theme} from '../types'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
 
-export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
-  _version: 2,
+export const defaultTheme: Omit<Theme, '_version' | '_tokens' | 'color' | 'font' | 'palette'> = {
   avatar: {
     sizes: [
       {distance: -4, size: 19},
@@ -33,7 +32,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
   },
   radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
-    null,
+    undefined,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
     {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
@@ -69,16 +68,4 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  style: {
-    button: {
-      root: {
-        transition: 'background-color 100ms,border-color 100ms,color 100ms',
-      },
-    },
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  },
 }

package/src/theme/{v3/defaultFonts.ts → defaults/fonts.ts}

@@ -1,6 +1,6 @@
-import type {ThemeFonts_v3} from './types'
+import type {Fonts} from '../types'
 
-export const defaultThemeFonts: ThemeFonts_v3 = {
+export const defaultFonts: Fonts = {
   code: {
     family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
     weight: {

package/src/theme/index.ts

@@ -1,6 +1,5 @@
-export * from './getScopedTheme'
+export * from './_parseColorToken'
+export * from './buildTheme'
+export * from './constants'
+export * from './resolveTokens'
 export * from './types'
-export * from './v0'
-export * from './v2'
-export * from './v3'
-export * from './versioning'

package/src/theme/{v3/resolveTokens.ts → resolveTokens.ts}

@@ -1,13 +1,13 @@
-import {
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  type ThemeColorCardToneKey,
-  type ThemeColorStateToneKey,
-} from '../v2'
-import type {CardColorTokens} from './color/card'
-import type {ElementColorTokens} from './color/element'
+import {CARD_TONES, ELEMENT_TONES} from './constants'
 import {merge} from './merge'
-import type {PartialTokens, Tokens} from './tokens'
+import type {
+  CardColorTokens,
+  CardTone,
+  ElementColorTokens,
+  ElementTone,
+  PartialTokens,
+  Tokens,
+} from './types'
 
 const defaultElementTokens: ElementColorTokens = {
   _hue: 'gray',
@@ -31,14 +31,14 @@ export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
     color: {
       '*': resolveCardColorTokens(tokens.color?.['*']),
 
-      ...THEME_COLOR_CARD_TONES.reduce(
+      ...CARD_TONES.reduce(
         (acc, tone) => {
           return {
             ...acc,
             [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
           }
         },
-        {} as Record<ThemeColorCardToneKey, CardColorTokens>,
+        {} as Record<CardTone, CardColorTokens>,
       ),
     },
   }
@@ -157,7 +157,7 @@ function resolveCardColorTokens(
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
+        ...ELEMENT_TONES.reduce(
           (acc, tone) => {
             acc[tone] = resolveElementTokens(
               merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
@@ -165,12 +165,12 @@ function resolveCardColorTokens(
 
             return acc
           },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+          {} as Record<ElementTone, ElementColorTokens>,
         ),
       },
       tinted: {
         '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
+        ...ELEMENT_TONES.reduce(
           (acc, tone) => {
             acc[tone] = resolveElementTokens(
               merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
@@ -178,7 +178,7 @@ function resolveCardColorTokens(
 
             return acc
           },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+          {} as Record<ElementTone, ElementColorTokens>,
         ),
       },
     },

package/src/theme/types.ts

@@ -1,28 +1,368 @@
-import type {ThemeColor} from './v0'
-import type {RootTheme_v0} from './v0/theme'
-import type {RootTheme_v2, Theme_v2} from './v2/theme'
-import type {Theme_v3} from './v3'
+import type {ColorHues, ColorTint} from '@sanity/color'
+
+import type {
+  AVATAR_COLORS,
+  AVATAR_SIZE,
+  BUTTON_MODES,
+  CARD_TONES,
+  COLOR_SCHEMES,
+  COLOR_VARIANTS,
+  CONTAINER,
+  CONTAINER_SCALE,
+  ELEMENT_TONES,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  HUES,
+  RADIUS,
+  SHADOW,
+  SPACE,
+  TINTS,
+} from './constants'
+
+/** @public */
+export type Hue = (typeof HUES)[number]
+
+/** @public */
+export type Tint = (typeof TINTS)[number]
+
+/** @public */
+export type AvatarColor = (typeof AVATAR_COLORS)[number]
 
 /** @public */
-export interface RootTheme extends RootTheme_v0 {
-  v2?: RootTheme_v2
-  v3?: Theme_v3
+export type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+export type ColorToken =
+  | `inherit`
+  | `black`
+  | `black/${ColorTokenOpacityValue}`
+  | `white`
+  | `white/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint}`
+  | `${Hue}-${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint} ${number}%`
+  | `${Tint}`
+  | `${Tint}/${ColorTokenOpacityValue}`
+  | `${Tint} ${number}%`
+
+/** @public */
+export interface ResolvedColorToken {
+  color: {type: 'inherit'} | {type: 'black' | 'white'} | {type: 'hue'; hue: Hue; tint: Tint}
+  opacity: number
+  mix: number
 }
 
 /** @public */
-export type BaseTheme = RootTheme
+export type ColorTokens = Record<'*' | CardTone, CardColorTokens>
+
+/** @public */
+export interface Tokens {
+  color: ColorTokens
+}
+
+/** @public */
+export type PartialTokens<T> = T extends [ColorToken, ColorToken]
+  ? T
+  : T extends {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+    ? {
+        [P in keyof T]?: PartialTokens<T[P]>
+      }
+    : T
 
 /**
- * Used for the `theme` prop in `styled-components`’s `ThemeProvider`.
+ * Theme color values are tuples of [light, dark] color tokens.
  *
  * @public
  */
+export type ColorValue = [ColorToken, ColorToken]
+
+/** @public */
+export interface AvatarColorProperties {
+  _hue: Hue
+  bg: ColorValue
+  fg: ColorValue
+}
+
+/** @public */
+export type AvatarsColor = Record<AvatarColor, AvatarColorProperties>
+
+/** @public */
+export interface ElementColorTokens {
+  _hue: Hue
+  bg: {
+    0: ColorValue
+    4: ColorValue
+  }
+  border: {
+    0: ColorValue
+    4: ColorValue
+  }
+  fg: {
+    0: ColorValue
+    4: ColorValue
+  }
+}
+
+/** @public */
+export type ElementsColorTokens = Record<'*' | ElementTone, ElementColorTokens>
+
+/** @public */
+export type ColorVariant = (typeof COLOR_VARIANTS)[number]
+
+/** @public */
+export interface CardColorTokens {
+  _hue: Hue
+  avatar: AvatarsColor
+  backdrop: ColorValue
+  code: {
+    bg: ColorValue
+    fg: ColorValue
+    token: {
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
+    }
+  }
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
+  }
+  shadow: {
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
+  }
+  skeleton: {
+    from: ColorValue
+    to: ColorValue
+  }
+  variant: Record<ColorVariant, ElementsColorTokens>
+}
+
+/** @public */
+export type Color = Record<CardTone, CardColorTokens>
+
+/** @public */
+export interface Input {
+  checkbox: {
+    size: number
+    focusRing: FocusRing
+  }
+  radio: {
+    size: number
+    markSize: number
+    focusRing: FocusRing
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+    focusRing: FocusRing
+  }
+  border: {
+    width: number
+  }
+  select: {
+    focusRing: FocusRing
+  }
+  text: {
+    focusRing: FocusRing
+  }
+}
+
+/** @public */
+export type ColorScheme = (typeof COLOR_SCHEMES)[number]
+
+/** @public */
+export type CardTone = (typeof CARD_TONES)[number]
+
+/** @public */
+export type ElementTone = (typeof ELEMENT_TONES)[number]
+
+/** @public */
+export type ButtonMode = (typeof BUTTON_MODES)[number]
+
+/** @public */
+export interface ThemeAvatar {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: FocusRing
+}
+
+/** @public */
+export type BoxShadow = [
+  // offsetX, offsetY, blurRadius, spreadRadius
+  number,
+  number,
+  number,
+  number,
+]
+
+/** @public */
+export interface ShadowProperties {
+  umbra: BoxShadow
+  penumbra: BoxShadow
+  ambient: BoxShadow
+}
+
+/** @public */
+export interface Layer {
+  dialog: {zOffset: number}
+  popover: {zOffset: number}
+  tooltip: {zOffset: number}
+}
+
+/** @public */
+export interface FontWeights {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/** @public */
+export interface FocusRing {
+  offset: number
+  width: number
+}
+
+/** @public */
+export type AvatarSize = (typeof AVATAR_SIZE)[number]
+
+/** @public */
+export type ContainerScale = (typeof CONTAINER_SCALE)[number]
+
+/** @public */
+export type ContainerWidth = (typeof CONTAINER)[number]
+
+/** @public */
+export type Radius = (typeof RADIUS)[number] // | 'full'
+
+/** @public */
+export type Space = (typeof SPACE)[number]
+
+/** @public */
+export type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/** @public */
+export type FontCodeSize = (typeof FONT_CODE_SIZE)[number]
+
+/** @public */
+export type FontHeadingSize = (typeof FONT_HEADING_SIZE)[number]
+
+/** @public */
+export type FontLabelSize = (typeof FONT_LABEL_SIZE)[number]
+
+/** @public */
+export type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
+
+/** @public */
+export type Shadow = (typeof SHADOW)[number]
+
+/** @public */
+export interface Options {
+  tokens?: PartialTokens<Tokens>
+}
+
+/** @public */
+export interface Palette {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
+/** @public */
+export interface FontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
+export interface Font {
+  family: string
+  featureSettings?: string
+  weight: FontWeights
+  scale: FontSize[]
+}
+
+/** @public */
+export interface Fonts {
+  code: Font
+  heading: Font
+  label: Font
+  text: Font
+}
+
+/** @public */
 export interface Theme {
-  sanity: Omit<RootTheme, 'color' | 'v2'> & {
-    /**
-     * @deprecated Use `v2.color` instead
-     */
-    color: ThemeColor
-    v2?: Theme_v2
+  _version: 3
+  _tokens: Tokens
+  avatar: ThemeAvatar
+  button: {
+    border: {width: number}
+    focusRing: FocusRing
+    textWeight: FontWeight
+  }
+  card: {
+    border: {width: number}
+    focusRing: FocusRing
+    shadow: {outline: number}
   }
+  color: Color
+  container: number[]
+  font: Fonts
+  input: Input
+  layer: Layer
+  media: number[]
+  palette: Palette
+  radius: Record<Radius, number>
+  shadow: Record<Shadow, ShadowProperties | undefined>
+  space: Record<Space, number>
 }