@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

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

@@ -0,0 +1,15 @@
+/** @public */
+export const COLOR_VARIANTS = ['tinted', 'solid'] as const
+
+/** @public */
+export const AVATAR_COLORS = [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const

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

@@ -0,0 +1,14 @@
+import type {AVATAR_COLORS} from './_constants'
+import type {ColorValue} from './token'
+
+/** @public */
+export type AvatarColor = (typeof AVATAR_COLORS)[number]
+
+/** @public */
+export interface ThemeColorAvatarHue_v3 {
+  bg: ColorValue
+  fg: ColorValue
+}
+
+/** @public */
+export type ThemeColorAvatar_v3 = Record<AvatarColor, ThemeColorAvatarHue_v3>

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

@@ -1,7 +1,7 @@
-import {Hue} from '../../palette'
-import {ThemeColorStateToneKey} from '../../v2'
-import {ElementColorTokens} from './element'
-import {ColorToken} from './token'
+import type {ThemeColorStateToneKey} from '../../v2'
+import type {Hue} from '../palette'
+import type {ElementColorTokens} from './element'
+import type {ColorValue} from './token'
 
 /** @public */
 export interface CardColorTokens {
@@ -10,66 +10,66 @@ export interface CardColorTokens {
     Hue,
     {
       _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
+      bg: ColorValue
+      fg: ColorValue
     }
   >
-  backdrop: [ColorToken, ColorToken]
+  backdrop: ColorValue
   code: {
-    bg: [ColorToken, ColorToken]
-    fg: [ColorToken, ColorToken]
+    bg: ColorValue
+    fg: ColorValue
     token: {
-      atrule: [ColorToken, ColorToken]
-      attrName: [ColorToken, ColorToken]
-      attrValue: [ColorToken, ColorToken]
-      attribute: [ColorToken, ColorToken]
-      boolean: [ColorToken, ColorToken]
-      builtin: [ColorToken, ColorToken]
-      cdata: [ColorToken, ColorToken]
-      char: [ColorToken, ColorToken]
-      class: [ColorToken, ColorToken]
-      className: [ColorToken, ColorToken]
-      comment: [ColorToken, ColorToken]
-      constant: [ColorToken, ColorToken]
-      deleted: [ColorToken, ColorToken]
-      doctype: [ColorToken, ColorToken]
-      entity: [ColorToken, ColorToken]
-      function: [ColorToken, ColorToken]
-      hexcode: [ColorToken, ColorToken]
-      id: [ColorToken, ColorToken]
-      important: [ColorToken, ColorToken]
-      inserted: [ColorToken, ColorToken]
-      keyword: [ColorToken, ColorToken]
-      number: [ColorToken, ColorToken]
-      operator: [ColorToken, ColorToken]
-      prolog: [ColorToken, ColorToken]
-      property: [ColorToken, ColorToken]
-      pseudoClass: [ColorToken, ColorToken]
-      pseudoElement: [ColorToken, ColorToken]
-      punctuation: [ColorToken, ColorToken]
-      regex: [ColorToken, ColorToken]
-      selector: [ColorToken, ColorToken]
-      string: [ColorToken, ColorToken]
-      symbol: [ColorToken, ColorToken]
-      tag: [ColorToken, ColorToken]
-      unit: [ColorToken, ColorToken]
-      url: [ColorToken, ColorToken]
-      variable: [ColorToken, ColorToken]
+      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: [ColorToken, ColorToken]
+  focusRing: ColorValue
   link: {
-    fg: [ColorToken, ColorToken]
+    fg: ColorValue
   }
   shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: [ColorToken, ColorToken]
-    to: [ColorToken, ColorToken]
+    from: ColorValue
+    to: ColorValue
   }
 
   variant: {

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

@@ -1,100 +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'
 
 /** @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
   }
 }
 
 /** @public */
-export type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
+export type ThemeColorVariant = Record<ElementTone, ThemeColorElement>
 
 /** @public */
-export type ThemeColorVariantKey = 'tinted' | 'solid'
+export type ThemeColorVariantKey = (typeof COLOR_VARIANTS)[number] // 'tinted' | 'solid'
 
 /** @public */
 export interface ThemeColorCard_v3 {
   _hue: Hue
-  avatar: ThemeColorAvatar_v2
-  backdrop: string
+  avatar: ThemeColorAvatar_v3
+  backdrop: ColorValue
   code: {
-    bg: string
-    fg: string
+    bg: ColorValue
+    fg: 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
+      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: string
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
+  }
   shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: string
-    to: string
+    from: ColorValue
+    to: ColorValue
   }
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
 
 /** @public */
-export interface ThemeColorScheme_v3 {
-  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
-}
-
-/** @public */
-// color[scheme].card[cardTone][colorVariant][elementTone][property][level]
-export type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+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,4 +1,4 @@
-import {Hue, Tint} from '../../palette'
+import type {Hue, Tint} from '../palette'
 
 /** @public */
 export type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
@@ -10,9 +10,23 @@ export type ColorToken =
   | `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/defaultTokens.ts

@@ -1,75 +1,75 @@
-import {PartialTokens, Tokens} from './tokens'
+import type {PartialTokens, Tokens} from './tokens'
 
 /** @internal */
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
-      backdrop: ['black/0.5', 'gray/100/0.5'],
+      backdrop: ['gray-100/0.5', 'black/0.5'],
       code: {
-        bg: ['950', '50'],
-        fg: ['300', '700'],
+        bg: ['50', '950'],
+        fg: ['700', '300'],
         token: {
-          atrule: ['purple/300', 'purple/600'],
-          attrName: ['green/300', 'green/600'],
-          attrValue: ['yellow/300', 'yellow/600'],
-          attribute: ['yellow/300', 'yellow/600'],
-          boolean: ['purple/300', 'purple/600'],
-          builtin: ['purple/300', 'purple/600'],
-          cdata: ['yellow/300', 'yellow/600'],
-          char: ['yellow/300', 'yellow/600'],
-          class: ['orange/300', 'orange/600'],
-          className: ['cyan/300', 'cyan/600'],
-          comment: ['gray/600', 'gray/300'],
-          constant: ['purple/300', 'purple/600'],
-          deleted: ['red/300', 'red/600'],
-          entity: ['red/300', 'red/600'],
-          function: ['green/300', 'green/600'],
-          hexcode: ['blue/300', 'blue/600'],
-          id: ['purple/300', 'purple/600'],
-          important: ['purple/300', 'purple/600'],
-          inserted: ['green/300', 'green/600'],
-          keyword: ['magenta/300', 'magenta/600'],
-          number: ['purple/300', 'purple/600'],
-          operator: ['magenta/300', 'magenta/600'],
-          prolog: ['gray/300', 'gray/600'],
-          property: ['blue/300', 'blue/600'],
-          pseudoClass: ['yellow/300', 'yellow/600'],
-          pseudoElement: ['yellow/300', 'yellow/600'],
-          punctuation: ['gray/300', 'gray/600'],
-          regex: ['blue/300', 'blue/600'],
-          selector: ['red/300', 'red/600'],
-          string: ['yellow/300', 'yellow/600'],
-          symbol: ['purple/300', 'purple/600'],
-          tag: ['red/300', 'red/600'],
-          unit: ['orange/300', 'orange/600'],
-          url: ['red/300', 'red/600'],
-          variable: ['red/300', 'red/600'],
+          atrule: ['purple-600', 'purple-300'],
+          attrName: ['green-600', 'green-300'],
+          attrValue: ['yellow-600', 'yellow-300'],
+          attribute: ['yellow-600', 'yellow-300'],
+          boolean: ['purple-600', 'purple-300'],
+          builtin: ['purple-600', 'purple-300'],
+          cdata: ['yellow-600', 'yellow-300'],
+          char: ['yellow-600', 'yellow-300'],
+          class: ['orange-600', 'orange-300'],
+          className: ['cyan-600', 'cyan-300'],
+          comment: ['gray-300', 'gray-600'],
+          constant: ['purple-600', 'purple-300'],
+          deleted: ['red-600', 'red-300'],
+          entity: ['red-600', 'red-300'],
+          function: ['green-600', 'green-300'],
+          hexcode: ['blue-600', 'blue-300'],
+          id: ['purple-600', 'purple-300'],
+          important: ['purple-600', 'purple-300'],
+          inserted: ['green-600', 'green-300'],
+          keyword: ['magenta-600', 'magenta-300'],
+          number: ['purple-600', 'purple-300'],
+          operator: ['magenta-600', 'magenta-300'],
+          prolog: ['gray-600', 'gray-300'],
+          property: ['blue-600', 'blue-300'],
+          pseudoClass: ['yellow-600', 'yellow-300'],
+          pseudoElement: ['yellow-600', 'yellow-300'],
+          punctuation: ['gray-600', 'gray-300'],
+          regex: ['blue-600', 'blue-300'],
+          selector: ['red-600', 'red-300'],
+          string: ['yellow-600', 'yellow-300'],
+          symbol: ['purple-600', 'purple-300'],
+          tag: ['red-600', 'red-300'],
+          unit: ['orange-600', 'orange-300'],
+          url: ['red-600', 'red-300'],
+          variable: ['red-600', 'red-300'],
         },
       },
-      focusRing: ['blue/500', 'blue/500'],
+      focusRing: ['blue-500', 'blue-500'],
       link: {
-        fg: ['blue/400', 'blue/600'],
+        fg: ['blue-600', 'blue-400'],
       },
       shadow: {
-        outline: ['500/0.4', '500/0.3'],
-        umbra: ['black/0.2', '500/0.1'],
-        penumbra: ['black/0.14', '500/0.07'],
-        ambient: ['black/0.12', '500/0.06'],
+        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'],
       },
       variant: {
         tinted: {
           '*': {
             bg: {
-              0: ['950', '50'],
-              4: ['700', '300'],
+              0: ['50', '900'],
+              4: ['200', '700'],
             },
             border: {
-              0: ['700', '100'],
-              4: ['500', '300'],
+              0: ['100', '700 50%'],
+              4: ['300 75%', '500'],
             },
             fg: {
-              0: ['100', '900'],
-              4: ['300', '700'],
+              0: ['900', '100'],
+              4: ['700', '300'],
             },
           },
           'primary': {
@@ -96,26 +96,26 @@ export const defaultTokens: PartialTokens<Tokens> = {
         solid: {
           '*': {
             bg: {
-              0: ['400', '500'],
-              4: ['300', '600'],
+              0: ['500', '400'],
+              4: ['600', '300'],
             },
             border: {
-              0: ['200', '400'],
-              4: ['100', '500'],
+              0: ['400', '200'],
+              4: ['500', '100'],
             },
             fg: {
-              0: ['black', 'white'],
-              4: ['700', '200'],
+              0: ['white', 'black'],
+              4: ['200', '700'],
             },
           },
           'default': {
             bg: {
-              0: ['200', '800'],
-              4: ['white', 'black'],
+              0: ['800', '200'],
+              4: ['black', 'white'],
             },
             border: {
-              0: ['300', '700'],
-              4: ['200', '800'],
+              0: ['700', '300'],
+              4: ['800', '200'],
             },
           },
           'primary': {
@@ -141,16 +141,16 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['black', 'gray/50'],
-              4: ['800', '300 50%'],
+              0: ['gray-50', 'black'],
+              4: ['200', '800'],
             },
             border: {
-              0: ['800', '300 40%'],
-              4: ['600', '300'],
+              0: ['200 50%', '800 50%'],
+              4: ['300', '600'],
             },
             fg: {
-              0: ['100', 'black'],
-              4: ['400', '700'],
+              0: ['black', '100'],
+              4: ['700', '400'],
             },
           },
         },
@@ -161,28 +161,16 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['950', 'white'],
-              4: ['800', '200'],
+              0: ['white', '950'],
+              4: ['200', '800'],
             },
             border: {
-              0: ['800', '100'],
-              4: ['600', '400'],
+              0: ['200 50%', '800 50%'],
+              4: ['300 75%', '600'],
             },
             fg: {
-              0: ['white', 'black'],
-              4: ['400', '600'],
-            },
-          },
-        },
-      },
-    },
-    'neutral': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['700', '200'],
+              0: ['black', 'white'],
+              4: ['600', '400'],
             },
           },
         },

package/src/theme/v3/index.ts

@@ -1,6 +1,9 @@
+export * from './_constants'
+export * from './_parseColorToken'
 export * from './buildTheme_v3'
 export * from './color'
 export * from './defaultTokens'
+export * from './palette'
 export * from './resolveTokens'
 export * from './tokens'
 export * from './types'

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

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './types'