@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

package/src/theme/versioning/v0_v2.ts

@@ -0,0 +1,72 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {RootTheme, RootTheme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<RootTheme, RootTheme_v2>()
+
+/** @internal */
+export function v0_v2(v0: RootTheme): RootTheme_v2 {
+  if (v0.v2) return v0.v2
+
+  const cached_v2 = cache.get(v0)
+
+  if (cached_v2) return cached_v2
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusRing: _unused_focusRing,
+    fonts: font,
+    input,
+    layer,
+    media,
+    radius,
+    shadows: shadow,
+    space,
+    styles: style,
+  } = v0
+
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar,
+    button: {
+      ...defaultThemeConfig.button,
+      ...button,
+    },
+    card: defaultThemeConfig.card,
+    color: {
+      light: {
+        transparent: themeColor_v0_v2(color.light.transparent),
+        default: themeColor_v0_v2(color.light.default),
+        primary: themeColor_v0_v2(color.light.primary),
+        positive: themeColor_v0_v2(color.light.positive),
+        caution: themeColor_v0_v2(color.light.caution),
+        critical: themeColor_v0_v2(color.light.critical),
+      },
+      dark: {
+        transparent: themeColor_v0_v2(color.dark.transparent),
+        default: themeColor_v0_v2(color.dark.default),
+        primary: themeColor_v0_v2(color.dark.primary),
+        positive: themeColor_v0_v2(color.dark.positive),
+        caution: themeColor_v0_v2(color.dark.caution),
+        critical: themeColor_v0_v2(color.dark.critical),
+      },
+    },
+    container,
+    font,
+    input,
+    layer: layer ?? defaultThemeConfig.layer,
+    media,
+    radius,
+    shadow,
+    space,
+    style,
+  }
+
+  cache.set(v0, v2)
+
+  return v2
+}

package/src/theme/versioning/v2_v0.ts

@@ -0,0 +1,126 @@
+import {
+  RootTheme,
+  RootTheme_v2,
+  ThemeColor,
+  ThemeColorCard_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+  ThemeColorInputStates,
+  ThemeColorInputStates_v2,
+} from '../system'
+
+const cache = new WeakMap<RootTheme_v2, RootTheme>()
+
+/** @internal */
+export function v2_v0(v2: RootTheme_v2): RootTheme {
+  const cachedTheme = cache.get(v2)
+
+  if (cachedTheme) return cachedTheme
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    font: fonts,
+    input,
+    media,
+    radius,
+    shadow: shadows,
+    space,
+    style: styles,
+  } = v2
+
+  return {
+    _version: 0,
+    avatar,
+    button,
+    container,
+    color: {
+      light: {
+        transparent: themeColor_v2_v0(color.light.transparent),
+        default: themeColor_v2_v0(color.light.default),
+        primary: themeColor_v2_v0(color.light.primary),
+        positive: themeColor_v2_v0(color.light.positive),
+        caution: themeColor_v2_v0(color.light.caution),
+        critical: themeColor_v2_v0(color.light.critical),
+      },
+      dark: {
+        transparent: themeColor_v2_v0(color.dark.transparent),
+        default: themeColor_v2_v0(color.dark.default),
+        primary: themeColor_v2_v0(color.dark.primary),
+        positive: themeColor_v2_v0(color.dark.positive),
+        caution: themeColor_v2_v0(color.dark.caution),
+        critical: themeColor_v2_v0(color.dark.critical),
+      },
+    },
+    focusRing: input.text.focusRing,
+    fonts,
+    input,
+    media,
+    radius,
+    shadows,
+    space,
+    styles,
+
+    v2,
+  }
+}
+
+function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
+  return {
+    base: {
+      bg: color_v2.bg,
+      fg: color_v2.fg,
+      border: color_v2.border,
+      focusRing: color_v2.focusRing,
+      shadow: color_v2.shadow,
+    },
+    button: color_v2.button,
+    card: color_v2.selectable.default,
+    dark: color_v2._dark,
+    input: {
+      default: inputStatesThemeColor_v2_v0(color_v2.input.default),
+      invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid),
+    },
+    muted: {
+      ...color_v2.button.ghost,
+      transparent: color_v2.button.ghost.default,
+    },
+    solid: {
+      ...color_v2.button.default,
+      transparent: color_v2.button.default.default,
+    },
+    spot: {
+      gray: color_v2.avatar.gray.bg,
+      blue: color_v2.avatar.blue.bg,
+      purple: color_v2.avatar.purple.bg,
+      magenta: color_v2.avatar.magenta.bg,
+      red: color_v2.avatar.red.bg,
+      orange: color_v2.avatar.orange.bg,
+      yellow: color_v2.avatar.yellow.bg,
+      green: color_v2.avatar.green.bg,
+      cyan: color_v2.avatar.cyan.bg,
+    },
+    syntax: color_v2.syntax,
+  }
+}
+
+function inputStatesThemeColor_v2_v0(t: ThemeColorInputStates_v2): ThemeColorInputStates {
+  return {
+    enabled: inputStateThemeColor_v2_v0(t.enabled),
+    disabled: inputStateThemeColor_v2_v0(t.disabled),
+    readOnly: inputStateThemeColor_v2_v0(t.readOnly),
+    hovered: inputStateThemeColor_v2_v0(t.hovered),
+  }
+}
+
+function inputStateThemeColor_v2_v0(t: ThemeColorInputState_v2): ThemeColorInputState {
+  return {
+    bg: t.bg,
+    bg2: t.muted.bg,
+    border: t.border,
+    fg: t.fg,
+    placeholder: t.placeholder,
+  }
+}

package/src/core/styles/colorVars/colorVarsStyle.ts

@@ -1,43 +0,0 @@
-import {ThemeColorBase, ThemeColorGenericState} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
-
-/**
- * @internal
- */
-export function _colorVarsStyle(
-  base: ThemeColorBase,
-  color: ThemeColorGenericState,
-  checkered = false,
-): CSSObject {
-  return {
-    // Base
-    // @todo: rename to "--base-"?
-    '--card-shadow-outline-color': base.shadow.outline,
-    '--card-shadow-umbra-color': base.shadow.umbra,
-    '--card-shadow-penumbra-color': base.shadow.penumbra,
-    '--card-shadow-ambient-color': base.shadow.ambient,
-    '--card-focus-ring-color': base.focusRing,
-    '--card-icon-color': color.icon,
-
-    // Card
-    '--card-bg-color': color.bg,
-    '--card-bg2-color': color.bg2,
-    '--card-bg-image': checkered
-      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
-      : undefined,
-    '--card-fg-color': color.fg,
-    '--card-border-color': color.border,
-    '--card-muted-fg-color': color.muted?.fg,
-    '--card-accent-fg-color': color.accent?.fg,
-    '--card-link-fg-color': color.link?.fg,
-    '--card-code-bg-color': color.code?.bg,
-    '--card-code-fg-color': color.code?.fg,
-    '--card-skeleton-color-from': color.skeleton?.from,
-    '--card-skeleton-color-to': color.skeleton?.to,
-
-    // @todo: deprecate
-    '--card-link-color': color.link?.fg,
-    '--card-hairline-soft-color': color.border,
-    '--card-hairline-hard-color': color.border,
-  }
-}

package/src/core/styles/colorVars/index.ts

@@ -1 +0,0 @@
-export * from './colorVarsStyle'

package/src/core/theme/defaults.ts

@@ -1,7 +0,0 @@
-import {ThemeLayer} from '@sanity/ui/theme'
-
-export const DEFAULT_THEME_LAYER: ThemeLayer = {
-  dialog: {zOffset: 600},
-  popover: {zOffset: 400},
-  tooltip: {zOffset: 200},
-}

package/src/theme/system/_system.ts

@@ -1,95 +0,0 @@
-import type {StyledObject} from 'styled-components'
-import {ThemeAvatar} from './avatar'
-import {ThemeColor} from './color'
-import {ThemeColorSchemes} from './color'
-import {ThemeFonts, ThemeFontWeightKey} from './fonts'
-import {ThemeInput} from './input'
-import {ThemeLayer} from './layer'
-import {ThemeShadow} from './shadow'
-
-/**
- * Workaround types that are missing in v6
- * https://github.com/styled-components/styled-components/issues/4062
- * @internal
- * */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CSSObject = StyledObject<any>
-
-/**
- * @public
- */
-export interface ThemeStyles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
-
-/**
- * @deprecated Use `ThemeStyles` instead
- * @public
- */
-export type Styles = ThemeStyles
-
-/**
- * @public
- */
-export interface ThemeFocusRing {
-  offset: number
-  width: number
-}
-
-/**
- * @public
- */
-export interface BaseTheme<
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  Styles extends {} = {},
-> {
-  avatar: ThemeAvatar
-  button: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    textWeight: ThemeFontWeightKey
-  }
-  card: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    shadow: {outline: number}
-  }
-  color: ThemeColorSchemes
-  container: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
-  focusRing: {
-    offset: number
-    width: number
-  }
-  fonts: ThemeFonts
-  input: ThemeInput
-  /**
-   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
-   * @beta
-   */
-  layer?: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadows: Array<ThemeShadow | null>
-  space: number[]
-  styles?: Styles
-}
-
-/**
- * @public
- */
-export type RootTheme = BaseTheme<ThemeStyles>
-
-/**
- * @public
- */
-export interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
-}

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

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

package/src/theme/themes/studio/config.ts

@@ -1,69 +0,0 @@
-import {RootTheme} from '../../system'
-
-const STROKE_WIDTH = 1
-const OUTLINE_WIDTH = 0.5
-
-export const config: Omit<RootTheme, 'color' | 'fonts'> = {
-  avatar: {
-    sizes: [
-      {distance: -3, size: 19},
-      {distance: -6, size: 25},
-      {distance: -9, size: 35},
-    ],
-    focusRing: {offset: 0, width: 1},
-  },
-  button: {
-    textWeight: 'medium',
-    border: {width: STROKE_WIDTH},
-    focusRing: {offset: -1, width: 1},
-  },
-  card: {
-    border: {width: STROKE_WIDTH},
-    focusRing: {offset: -1, width: 1},
-    shadow: {outline: OUTLINE_WIDTH},
-  },
-  container: [480, 640, 960, 1280, 1600, 1920],
-  focusRing: {
-    offset: -1,
-    width: 1,
-  },
-  media: [360, 600, 900, 1200, 1800, 2400],
-  radius: [0, 1, 3, 6, 9, 12, 21],
-  shadows: [
-    null,
-    {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]},
-    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
-    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: STROKE_WIDTH,
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {offset: -1, width: 1},
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {offset: -1, width: 1},
-    },
-    switch: {
-      width: 21,
-      height: 13,
-      padding: 2,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-      focusRing: {offset: 1, width: 1},
-    },
-    select: {
-      focusRing: {offset: -1, width: 1},
-    },
-    text: {
-      focusRing: {offset: -1, width: 1},
-    },
-  },
-}

package/src/theme/themes/studio/fonts.ts

@@ -1,219 +0,0 @@
-import {ThemeFonts} from '../../system'
-
-export const fonts: ThemeFonts = {
-  code: {
-    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  heading: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
-      bold: 900,
-    },
-    sizes: [
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 17,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 27,
-        iconSize: 41,
-        lineHeight: 35,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 9.5,
-        descenderHeight: 8.5,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 41,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 10.5,
-        descenderHeight: 9.5,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 47,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  label: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900,
-    },
-    sizes: [
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 9.8,
-        iconSize: 15,
-        lineHeight: 11,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 11.25,
-        iconSize: 17,
-        lineHeight: 12,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 12.75,
-        iconSize: 19,
-        lineHeight: 13,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 14,
-        iconSize: 21,
-        lineHeight: 14,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 15.5,
-        iconSize: 23,
-        lineHeight: 15,
-        letterSpacing: 0.5,
-      },
-    ],
-  },
-  text: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7.5,
-        descenderHeight: 6.5,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8.5,
-        descenderHeight: 7.5,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-}

package/src/theme/themes/studio/index.ts

@@ -1 +0,0 @@
-export * from './studioTheme'

package/src/theme/themes/studio/studioTheme.test.ts

@@ -1,27 +0,0 @@
-import {getContrastRatio} from '../../build'
-import {studioTheme} from './studioTheme'
-
-const AA_MIN = 4.5
-
-it('should …', () => {
-  expect(
-    getContrastRatio(
-      studioTheme.color.light.default.base.bg,
-      studioTheme.color.light.default.base.fg,
-    ),
-  ).toBeGreaterThan(AA_MIN)
-
-  expect(
-    getContrastRatio(
-      studioTheme.color.light.default.card.enabled.bg,
-      studioTheme.color.light.default.card.enabled.fg,
-    ),
-  ).toBeGreaterThan(AA_MIN)
-
-  expect(
-    getContrastRatio(
-      studioTheme.color.light.default.card.enabled.bg,
-      studioTheme.color.light.default.card.enabled.muted.fg,
-    ),
-  ).toBeGreaterThan(AA_MIN)
-})

package/src/theme/themes/studio/studioTheme.ts

@@ -1,8 +0,0 @@
-import {buildTheme} from '../../build'
-import {config} from './config'
-import {fonts} from './fonts'
-
-/**
- * @public
- */
-export const studioTheme = buildTheme({...config, fonts})