@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,6 +1,6 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
 
-import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../v2'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
 import {
   ColorConfigBlendKey,
   ColorConfigCardKey,

package/src/theme/config/types.ts

@@ -1,14 +1,15 @@
 import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
 
 import {
+  ThemeAvatar_v2,
   ThemeFocusRing,
   ThemeFonts,
   ThemeFontWeightKey,
+  ThemeInput_v2,
   ThemeLayer,
   ThemeShadow,
   ThemeStyles,
-} from '../v0'
-import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
+} from '../system'
 import {ThemeColorTokens} from './tokens'
 
 /** @public */

package/src/theme/defaults/config.ts

@@ -1,4 +1,4 @@
-import {RootTheme_v2} from '../v2'
+import {RootTheme_v2} from '../system'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
+  radius: [0, 1, 3, 6, 9, 12, 21],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/defaults/fonts.ts

@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../v0'
+import {ThemeFonts} from '../system'
 
 export const defaultThemeFonts: ThemeFonts = {
   code: {
@@ -55,11 +55,10 @@ export const defaultThemeFonts: ThemeFonts = {
   heading: {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
+      regular: 700,
+      medium: 800,
+      semibold: 900,
       bold: 900,
     },
     sizes: [
@@ -85,7 +84,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 21,
         iconSize: 33,
         lineHeight: 29,
-        letterSpacing: -0.25,
+        letterSpacing: 0,
       },
       {
         ascenderHeight: 8,
@@ -93,7 +92,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 27,
         iconSize: 41,
         lineHeight: 35,
-        letterSpacing: -0.5,
+        letterSpacing: 0,
       },
       {
         ascenderHeight: 9.5,
@@ -101,7 +100,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 33,
         iconSize: 49,
         lineHeight: 41,
-        letterSpacing: -1,
+        letterSpacing: 0,
       },
       {
         ascenderHeight: 10.5,
@@ -109,7 +108,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 38,
         iconSize: 53,
         lineHeight: 47,
-        letterSpacing: -1,
+        letterSpacing: 0,
       },
     ],
   },
@@ -117,10 +116,10 @@ export const defaultThemeFonts: ThemeFonts = {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
     weights: {
-      regular: 500,
-      medium: 600,
-      semibold: 700,
-      bold: 800,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
     },
     sizes: [
       {
@@ -132,8 +131,8 @@ export const defaultThemeFonts: ThemeFonts = {
         letterSpacing: 0.5,
       },
       {
-        ascenderHeight: 1.5,
-        descenderHeight: 2.5,
+        ascenderHeight: 2,
+        descenderHeight: 2,
         fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
@@ -156,8 +155,8 @@ export const defaultThemeFonts: ThemeFonts = {
         letterSpacing: 0.5,
       },
       {
-        ascenderHeight: 1.5,
-        descenderHeight: 2.5,
+        ascenderHeight: 2,
+        descenderHeight: 2,
         fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,

package/src/theme/getScopedTheme.ts

@@ -1,11 +1,14 @@
 import {defaultThemeConfig} from './defaults/config'
-import {RootTheme, Theme} from './types'
-import {ThemeColor} from './v0'
-import {RootTheme_v2, ThemeColorCardToneKey, ThemeColorSchemeKey} from './v2'
-import {is_v2} from './versioning/is_v2'
+import {
+  RootTheme,
+  RootTheme_v2,
+  Theme,
+  ThemeColor,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+} from './system'
+import {is_v2, v0_v2, v2_v0} from './versioning'
 import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
-import {v0_v2} from './versioning/v0_v2'
-import {v2_v0} from './versioning/v2_v0'
 
 // cache[scheme][tone][rootTheme] = theme
 const cache = new Map<

package/src/theme/index.ts

@@ -1,11 +1,5 @@
-export * from './_constants'
-export * from './_types'
 export * from './build'
 export * from './config'
 export * from './getScopedTheme'
-export * from './palette'
-export * from './types'
-export * from './v0'
-export * from './v2'
-export * from './v3'
+export * from './system'
 export * from './versioning'

package/src/theme/system/avatar.ts

@@ -0,0 +1,14 @@
+import {ThemeFocusRing} from './focusRing'
+
+/**
+ * @public
+ */
+export interface ThemeAvatar_v2 {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}

package/src/theme/system/font.ts

@@ -0,0 +1,52 @@
+/**
+ * @public
+ */
+export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+
+/**
+ * @public
+ */
+export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/**
+ * @public
+ */
+export interface ThemeFontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFontWeight {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFont {
+  family: string
+  weights: ThemeFontWeight
+  sizes: ThemeFontSize[]
+  /** @deprecated No longer supported. */
+  horizontalOffset?: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFonts {
+  code: ThemeFont
+  heading: ThemeFont
+  label: ThemeFont
+  text: ThemeFont
+}

package/src/theme/system/index.ts

@@ -0,0 +1,11 @@
+export * from './avatar'
+export * from './color'
+export * from './css'
+export * from './focusRing'
+export * from './font'
+export * from './input'
+export * from './layer'
+export * from './shadow'
+export * from './styles'
+export * from './theme'
+export * from './v0'

package/src/theme/system/input.ts

@@ -0,0 +1,33 @@
+import {ThemeFocusRing} from './focusRing'
+
+/**
+ * @public
+ */
+export interface ThemeInput_v2 {
+  checkbox: {
+    size: number
+    focusRing: ThemeFocusRing
+  }
+  radio: {
+    size: number
+    markSize: number
+    focusRing: ThemeFocusRing
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+    focusRing: ThemeFocusRing
+  }
+  border: {
+    width: number
+  }
+  select: {
+    focusRing: ThemeFocusRing
+  }
+  text: {
+    focusRing: ThemeFocusRing
+  }
+}

package/src/theme/system/theme.ts

@@ -0,0 +1,138 @@
+import {ThemeAvatar_v2} from './avatar'
+import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
+import {ThemeFocusRing} from './focusRing'
+import {ThemeFonts, ThemeFontWeightKey} from './font'
+import {ThemeInput_v2} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+import {ThemeStyles} from './styles'
+import {ThemeAvatar, ThemeColor, ThemeColorSchemes, ThemeInput} from './v0'
+
+/**
+ * @public
+ */
+export interface RootTheme_v2 {
+  _version: 2
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color: ThemeColorSchemes_v2
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+  /** @internal */
+  style?: ThemeStyles
+}
+
+/**
+ * @public
+ */
+export interface BaseTheme {
+  _version?: 0
+  /**
+   * @deprecated Use `v2.avatar` instead
+   */
+  avatar: ThemeAvatar
+  /**
+   * @deprecated Use `v2.button` instead
+   */
+  button: {
+    textWeight: ThemeFontWeightKey
+  }
+  /**
+   * @deprecated Use `v2.color` instead
+   */
+  color: ThemeColorSchemes
+  /**
+   * @deprecated Use `v2.container` instead
+   */
+  container: number[]
+  /**
+   * @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
+   */
+  focusRing: {
+    offset: number
+    width: number
+  }
+  /**
+   * @deprecated Use `v2.font` instead
+   */
+  fonts: ThemeFonts
+  /**
+   * @deprecated Use `v2.input` instead
+   */
+  input: ThemeInput
+  /**
+   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
+   * @beta
+   * @deprecated Use `v2.layer` instead
+   */
+  layer?: ThemeLayer
+  /**
+   * @deprecated Use `v2.media` instead
+   */
+  media: number[]
+  /**
+   * @deprecated Use `v2.radius` instead
+   */
+  radius: number[]
+  /**
+   * @deprecated Use `v2.shadow` instead
+   */
+  shadows: Array<ThemeShadow | null>
+  /**
+   * @deprecated Use `v2.space` instead
+   */
+  space: number[]
+  /**
+   * @internal
+   * @deprecated Use `v2.style` instead
+   */
+  styles?: ThemeStyles
+
+  v2?: RootTheme_v2
+}
+
+/**
+ * @public
+ */
+export type RootTheme = BaseTheme
+
+/**
+ * @public
+ */
+export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
+  color: ThemeColorCard_v2
+  /**
+   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
+   * with sanity V2 components accessing a v1 <ThemeProvider>.
+   * See https://github.com/sanity-io/ui/pull/1203 for more info.
+   */
+  _resolved: boolean
+}
+
+/**
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
+    color: ThemeColor
+    v2?: Theme_v2
+  }
+}

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

@@ -0,0 +1,35 @@
+import {ThemeColorBlendModeKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
+export interface ThemeColorGenericState {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  /**
+   * @beta
+   */
+  bg2?: string
+  border: string
+  fg: string
+  icon: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}

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

@@ -0,0 +1,40 @@
+import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
+import {ThemeColorGenericState} from './_generic'
+import {ThemeColorName} from './_system'
+import {ThemeColorBase} from './base'
+import {ThemeColorButton} from './button'
+import {ThemeColorCard} from './card'
+import {ThemeColorInput} from './input'
+import {ThemeColorMuted} from './muted'
+import {ThemeColorSelectable} from './selectable'
+import {ThemeColorSolid} from './solid'
+import {ThemeColorSpot} from './spot'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColor_v2` instead.
+ */
+export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'>> {
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  dark: boolean
+  input: ThemeColorInput
+  muted: ThemeColorMuted
+  selectable?: ThemeColorSelectable
+  solid: ThemeColorSolid
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorScheme_v2` instead.
+ */
+export type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemes_v2` instead.
+ */
+export type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>

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

@@ -0,0 +1,34 @@
+import {ThemeColorBlendModeKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInputState_v2` instead.
+ */
+export interface ThemeColorInputState {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  bg2: string
+  border: string
+  fg: string
+  placeholder: string
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
+ */
+export interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInput_v2` instead.
+ */
+export interface ThemeColorInput {
+  default: ThemeColorInputStates
+  invalid: ThemeColorInputStates
+}

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

@@ -0,0 +1,13 @@
+import {ThemeColorAvatarColorKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatarColorKey` instead
+ */
+export type ThemeColorSpotKey = ThemeColorAvatarColorKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatar_v2` instead
+ */
+export type ThemeColorSpot = Record<ThemeColorSpotKey, string>

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

@@ -0,0 +1,3 @@
+export * from './avatar'
+export * from './color'
+export * from './input'

package/src/theme/versioning/getTheme_v2.ts

@@ -1,6 +1,5 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {Theme} from '../types'
-import {Theme_v2} from '../v2'
+import {Theme, Theme_v2} from '../system'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()

package/src/theme/versioning/index.ts

@@ -1 +1,5 @@
 export * from './getTheme_v2'
+export * from './is_v0'
+export * from './is_v2'
+export * from './v0_v2'
+export * from './v2_v0'

package/src/theme/versioning/is_v0.ts

@@ -1,5 +1,4 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import {RootTheme, RootTheme_v2} from '../system'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {

package/src/theme/versioning/is_v2.ts

@@ -1,5 +1,4 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import {RootTheme, RootTheme_v2} from '../system'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -1,17 +1,15 @@
 import {
   ThemeColor,
+  ThemeColorCard_v2,
   ThemeColorGenericState,
+  ThemeColorInputMode_v2,
   ThemeColorInputState,
+  ThemeColorInputState_v2,
   ThemeColorInputStates,
   ThemeColorMuted,
-} from '../v0'
-import {
-  ThemeColorCard_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
   ThemeColorSelectable_v2,
   ThemeColorState_v2,
-} from '../v2'
+} from '../system'
 
 const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
 

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -1,4 +1,4 @@
-import {ThemeColorCard_v2} from '../v2'
+import type {ThemeColorCard_v2} from '../system'
 
 /**
  * Apply `neutral` and `suggest` if they're not already part of the color object,

package/src/theme/versioning/v0_v2.ts

@@ -1,6 +1,5 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import {RootTheme, RootTheme_v2} from '../system'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()

package/src/theme/versioning/v2_v0.ts

@@ -1,17 +1,18 @@
-import {RootTheme} from '../types'
-import {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
 import {
+  RootTheme,
   RootTheme_v2,
+  ThemeColor,
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
+  ThemeColorInputState,
   ThemeColorInputState_v2,
-} from '../v2'
-import {Theme_v3} from '../v3'
+  ThemeColorInputStates,
+} from '../system'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 
 /** @internal */
-export function v2_v0(v2: RootTheme_v2, v3?: Theme_v3): RootTheme {
+export function v2_v0(v2: RootTheme_v2): RootTheme {
   const cachedTheme = cache.get(v2)
 
   if (cachedTheme) return cachedTheme
@@ -63,7 +64,6 @@ export function v2_v0(v2: RootTheme_v2, v3?: Theme_v3): RootTheme {
     styles,
 
     v2,
-    v3,
   }
 }
 

package/bin/ui.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv-flow').config()
-
-require('../dist/cli.js')