@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/theme/v3/color/color.ts

@@ -1,94 +1,98 @@
-import {Hue} from '../../palette'
-import {
-  ThemeColorAvatar_v2,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
+import type {
+  ThemeColorCardToneKey as CardTone,
+  ThemeColorStateToneKey as ElementTone,
 } from '../../v2'
+import type {Hue} from '../palette'
+import type {COLOR_VARIANTS} from './_constants'
+import type {ThemeColorAvatar_v3} from './avatar'
+import type {ColorValue} from './token'
 
-// export interface ThemeColorAvatarHue_v2 {}
-
+/** @public */
 export interface ThemeColorElement {
   _hue: Hue
   bg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
 }
 
-export type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
-
-export type ThemeColorVariantKey = 'tinted' | 'solid'
+/** @public */
+export type ThemeColorVariant = Record<ElementTone, ThemeColorElement>
 
-// export type ThemeColorCard_v3 = Record<ThemeColorVariantKey, ThemeColorVariant>
+/** @public */
+export type ThemeColorVariantKey = (typeof COLOR_VARIANTS)[number] // 'tinted' | 'solid'
 
+/** @public */
 export interface ThemeColorCard_v3 {
   _hue: Hue
-  avatar: ThemeColorAvatar_v2
-  backdrop: string
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
+  avatar: ThemeColorAvatar_v3
+  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
+    }
   }
-  token: {
-    atrule: string
-    attrName: string
-    attrValue: string
-    attribute: string
-    boolean: string
-    builtin: string
-    cdata: string
-    char: string
-    class: string
-    className: string
-    comment: string
-    constant: string
-    deleted: string
-    doctype: string
-    entity: string
-    function: string
-    hexcode: string
-    id: string
-    important: string
-    inserted: string
-    keyword: string
-    number: string
-    operator: string
-    prolog: string
-    property: string
-    pseudoClass: string
-    pseudoElement: string
-    punctuation: string
-    regex: string
-    selector: string
-    string: string
-    symbol: string
-    tag: string
-    unit: string
-    url: string
-    variable: string
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
+  }
+  shadow: {
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: string
-    to: string
+    from: ColorValue
+    to: ColorValue
   }
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
 
-export interface ThemeColorScheme_v3 {
-  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
-}
-
-// color[scheme].card[cardTone][colorVariant][elementTone][property][level]
-export type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+/** @public */
+export type ThemeColor_v3 = Record<CardTone, ThemeColorCard_v3>

package/src/theme/v3/color/element.ts

@@ -1,19 +1,19 @@
-import {Hue} from '../../palette'
-import {ColorToken} from './token'
+import type {Hue} from '../palette'
+import type {ColorValue} from './token'
 
 /** @public */
 export interface ElementColorTokens {
   _hue: Hue
   bg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
 }

package/src/theme/v3/color/index.ts

@@ -1,7 +1,7 @@
-export * from './buildColor_v3'
+export * from './_constants'
+export * from './avatar'
 export * from './card'
 export * from './color'
 export * from './element'
-export * from './renderColor'
 export * from './token'
 export * from './tokens'

package/src/theme/v3/color/token.ts

@@ -1,17 +1,32 @@
-import {Hue, Tint} from '../../palette'
+import type {Hue, Tint} from '../palette'
 
 /** @public */
 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}%`
+  | `${Hue}-${Tint}`
+  | `${Hue}-${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint} ${number}%`
   | `${Tint}`
   | `${Tint}/${ColorTokenOpacityValue}`
   | `${Tint} ${number}%`
+
+/**
+ * Theme color values are tuples of [light, dark] color tokens.
+ *
+ * @public
+ */
+export type ColorValue = [ColorToken, ColorToken]
+
+/** @public */
+export interface ResolvedColorToken {
+  color: {type: 'inherit'} | {type: 'black' | 'white'} | {type: 'hue'; hue: Hue; tint: Tint}
+  opacity: number
+  mix: number
+}

package/src/theme/v3/color/tokens.ts

@@ -1,5 +1,5 @@
-import {ThemeColorCardToneKey} from '../../v2'
-import {CardColorTokens} from './card'
+import type {ThemeColorCardToneKey} from '../../v2'
+import type {CardColorTokens} from './card'
 
 /** @public */
 export type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>

package/src/theme/v3/defaultFonts.ts

@@ -0,0 +1,250 @@
+import type {ThemeFonts_v3} from './types'
+
+export const defaultThemeFonts: ThemeFonts_v3 = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+        customIconSize: 28,
+      },
+    ],
+  },
+  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`,
+    weight: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: -0.25,
+        customIconSize: 28,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: -0.5,
+        customIconSize: 36,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: -1,
+        customIconSize: 44,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: -1,
+        customIconSize: 48,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weight: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+        customIconSize: 8,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+        customIconSize: 10,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+        customIconSize: 14,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+        customIconSize: 18,
+      },
+    ],
+  },
+  text: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+        customIconSize: 28,
+      },
+    ],
+  },
+}

package/src/theme/v3/defaultTokens.ts

@@ -0,0 +1,199 @@
+import type {PartialTokens, Tokens} from './tokens'
+
+/** @internal */
+export const defaultTokens: PartialTokens<Tokens> = {
+  color: {
+    '*': {
+      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: ['50', '900'],
+              4: ['200', '700'],
+            },
+            border: {
+              0: ['100', '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: ['200', '800'],
+            },
+            border: {
+              0: ['200 50%', '800 50%'],
+              4: ['300', '600'],
+            },
+            fg: {
+              0: ['black', '100'],
+              4: ['700', '400'],
+            },
+          },
+        },
+      },
+    },
+    'default': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['white', '950'],
+              4: ['200', '800'],
+            },
+            border: {
+              0: ['200 50%', '800 50%'],
+              4: ['300 75%', '600'],
+            },
+            fg: {
+              0: ['black', 'white'],
+              4: ['600', '400'],
+            },
+          },
+        },
+      },
+    },
+    'primary': {
+      _hue: 'blue',
+    },
+    'suggest': {
+      _hue: 'purple',
+    },
+    'positive': {
+      _hue: 'green',
+    },
+    'caution': {
+      _hue: 'yellow',
+    },
+    'critical': {
+      _hue: 'red',
+    },
+  },
+}