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

package/src/theme/{build/defaults → defaults}/colorTokens.ts

@@ -1,36 +1,54 @@
-import {ThemeColorTokens} from '../../config'
+import {ThemeColorTokens} from '../config'
 
 export const defaultColorTokens: ThemeColorTokens = {
-  avatar: {
-    '*': {
-      _blend: ['screen', 'multiply'],
-      _hue: 'gray',
-      bg: ['500', '400'],
-      fg: ['white', 'black'],
-    },
-    blue: {_hue: 'blue'},
-    purple: {_hue: 'purple'},
-    magenta: {_hue: 'magenta'},
-    red: {_hue: 'red'},
-    orange: {_hue: 'orange'},
-    yellow: {_hue: 'yellow', bg: ['600', '400']},
-    green: {_hue: 'green', bg: ['600', '400']},
-    cyan: {_hue: 'cyan', bg: ['600', '400']},
-  },
-  badge: {
-    '*': {
-      _blend: ['multiply', 'screen'],
-      bg: ['100', '900'],
-      fg: ['800', '200'],
-    },
-  },
   base: {
     '*': {
       _blend: ['multiply', 'screen'],
+      avatar: {
+        '*': {
+          _blend: ['screen', 'multiply'],
+          bg: ['500', '400'],
+          fg: ['white', 'black'],
+        },
+        yellow: {bg: ['600', '400']},
+        green: {bg: ['600', '400']},
+        cyan: {bg: ['600', '400']},
+      },
+      backdrop: ['gray/200/0.2', 'black/0.5'],
+      badge: {
+        '*': {
+          bg: ['100', '900'],
+          fg: ['600', '400'],
+        },
+        positive: {
+          bg: ['200/0.6', '900'],
+          fg: ['700', '500'],
+        },
+        caution: {
+          bg: ['200/0.7', '900'],
+          fg: ['700', '500'],
+        },
+      },
       bg: ['50', '950'],
+      border: ['200', '800'],
+      code: {
+        bg: ['50', '950'],
+        fg: ['600', '400'],
+      },
       fg: ['800', '200'],
-      border: ['200', '900'],
       focusRing: ['blue/500', 'blue/500'],
+      kbd: {
+        bg: ['white', 'black'],
+        fg: ['600', '400'],
+        border: ['200', '800'],
+      },
+      link: {
+        fg: ['blue/600', 'blue/400'],
+      },
+      muted: {
+        bg: ['50', '950'],
+        fg: ['600', '400'],
+      },
       shadow: {
         outline: ['500/0.3', '500/0.4'],
         umbra: ['gray/500/0.1', 'black/0.2'],
@@ -55,12 +73,21 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     positive: {
       _hue: 'green',
+      shadow: {
+        outline: ['600/0.3', '500/0.25'],
+      },
     },
     caution: {
       _hue: 'yellow',
+      shadow: {
+        outline: ['600/0.3', '500/0.25'],
+      },
     },
     critical: {
       _hue: 'red',
+      shadow: {
+        outline: ['500/0.3', '500/0.3'],
+      },
     },
   },
   button: {
@@ -68,22 +95,33 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         '*': {
           _blend: ['screen', 'multiply'],
+          accent: {
+            fg: ['purple/200', 'purple/700'],
+          },
+          badge: {
+            '*': {
+              dot: ['300', '700'],
+              icon: ['600', '400'],
+            },
+          },
           bg: ['500', '400'],
-          bg2: ['900', '50'],
-          fg: ['white', 'black'],
-          icon: ['200', '900'],
           border: ['500/0', '400/0'],
-          muted: {
+          code: {
+            bg: ['500/0.2', '400/0.2'],
             fg: ['200', '700'],
           },
-          accent: {
-            fg: ['purple/200', 'purple/700'],
+          fg: ['white', 'black'],
+          icon: ['200', '800'],
+          kbd: {
+            bg: ['900', '50'],
+            fg: ['white', 'black'],
+            border: ['800', '200'],
           },
           link: {
             fg: ['blue/200', 'blue/700'],
           },
-          code: {
-            bg: ['500/0.2', '400/0.2'],
+          muted: {
+            bg: ['900', '50'],
             fg: ['200', '700'],
           },
           skeleton: {
@@ -103,7 +141,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          bg: ['200', '900'],
+          bg: ['200', '800'],
           icon: ['white', 'black'],
         },
       },
@@ -155,19 +193,19 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           _blend: ['multiply', 'screen'],
           bg: ['50', '950'],
-          bg2: ['100', '950'],
           fg: ['700', '400'],
           icon: ['600', '500'],
-          border: ['200', '900'],
-          muted: {
-            fg: ['700/0.6', '400/0.6'],
-          },
+          border: ['100', '900'],
           accent: {
             fg: ['purple/700/0.6', 'purple/400/0.8'],
           },
           link: {
             fg: ['blue/700/0.6', 'blue/400/0.8'],
           },
+          muted: {
+            bg: ['100', '950'],
+            fg: ['700/0.6', '400/0.6'],
+          },
           code: {
             bg: ['500/0.1', '400/0.1'],
             fg: ['700/0.6', '400/0.6'],
@@ -176,24 +214,30 @@ export const defaultColorTokens: ThemeColorTokens = {
             from: ['100', '900'],
             to: ['100/0.5', '900/0.5'],
           },
+          badge: {
+            '*': {
+              dot: ['300', '700'],
+              icon: ['600', '400'],
+            },
+          },
         },
         hovered: {
           bg: ['100', '900'],
-          fg: ['700', '400'],
+          fg: ['700', '300'],
         },
         pressed: {
           bg: ['100', '900'],
-          fg: ['800', '300'],
+          fg: ['800', '200'],
         },
         selected: {
           bg: ['100', '900'],
-          fg: ['800', '300'],
+          fg: ['800', '200'],
         },
         disabled: {
           _hue: 'gray',
-          fg: ['200', '900'],
-          icon: ['200', '900'],
-          border: ['100', '950'],
+          fg: ['200', '800'],
+          icon: ['200', '800'],
+          border: ['100', '900'],
           muted: {
             fg: ['200/0.6', '900/0.6'],
           },
@@ -209,9 +253,14 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
       },
-      critical: {
+      positive: {
+        '*': {
+          border: ['600/0.2', '800'],
+        },
+      },
+      caution: {
         '*': {
-          border: ['500/0.2', '900'],
+          border: ['600/0.2', '800'],
         },
       },
     },
@@ -220,18 +269,18 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           _blend: ['multiply', 'screen'],
           bg: ['white', 'black'],
-          bg2: ['100', '950'],
-          fg: ['700', '400'],
-          icon: ['600', '500'],
+          fg: ['700', '300'],
+          icon: ['700/0.7', '300/0.7'],
           border: ['white/0', 'black/0'],
           muted: {
-            fg: ['600', '300'],
+            bg: ['100', '950'],
+            fg: ['700/0.7', '300/0.7'],
           },
           accent: {
-            fg: ['purple/600', 'purple/300'],
+            fg: ['purple/700/0.7', 'purple/300/0.7'],
           },
           link: {
-            fg: ['blue/600', 'blue/300'],
+            fg: ['blue/700/0.7', 'blue/300/0.7'],
           },
           code: {
             bg: ['100', '950'],
@@ -241,22 +290,31 @@ export const defaultColorTokens: ThemeColorTokens = {
             from: ['100', '900'],
             to: ['100/0.5', '900/0.5'],
           },
+          badge: {
+            '*': {
+              dot: ['300', '700'],
+              icon: ['600', '400'],
+            },
+          },
         },
         hovered: {
           bg: ['50', '950'],
-          fg: ['700', '400'],
+          fg: ['700', '300'],
+          icon: ['700/0.7', '400/0.7'],
         },
         pressed: {
           bg: ['100', '900'],
-          fg: ['800', '300'],
+          fg: ['800', '200'],
+          icon: ['800/0.7', '200/0.7'],
         },
         selected: {
           bg: ['100', '900'],
-          fg: ['800', '300'],
+          fg: ['800', '200'],
+          icon: ['800/0.7', '200/0.7'],
         },
         disabled: {
           _hue: 'gray',
-          fg: ['200', '900'],
+          fg: ['200', '800'],
           muted: {
             fg: ['200/0.6', '900/0.6'],
           },
@@ -274,73 +332,16 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
     },
   },
-  card: {
-    '*': {
-      _blend: ['multiply', 'screen'],
-      bg: ['white', 'black'],
-      bg2: ['100', '950'],
-      fg: ['black', 'white'],
-      icon: ['500', '400'],
-      border: ['200', '900'],
-      muted: {
-        fg: ['gray/600', 'gray/400'],
-      },
-      accent: {
-        fg: ['purple/600', 'purple/300'],
-      },
-      link: {
-        fg: ['blue/700', 'blue/300'],
-      },
-      code: {
-        bg: ['100', '950'],
-        fg: ['gray/600', 'gray/400'],
-      },
-      skeleton: {
-        from: ['100', '900'],
-        to: ['100/0.5', '900/0.5'],
-      },
-    },
-    hovered: {
-      bg: ['100', '950'],
-    },
-    pressed: {
-      bg: ['100', '900'],
-    },
-    selected: {
-      _blend: ['screen', 'multiply'],
-      bg: ['500', '400'],
-      border: ['800', '200'],
-      bg2: ['950', '50'],
-      fg: ['white', 'black'],
-    },
-    disabled: {
-      _hue: 'gray',
-      fg: ['200', '900'],
-      icon: ['200', '800'],
-      border: ['100', '900/0.5'],
-      muted: {
-        fg: ['200/0.5', '800/0.5'],
-      },
-      accent: {
-        fg: ['200/0.6', '800/0.6'],
-      },
-      link: {
-        fg: ['200/0.6', '800/0.6'],
-      },
-      code: {
-        bg: ['100/0.6', '950/0.6'],
-        fg: ['200/0.6', '800/0.6'],
-      },
-    },
-  },
   input: {
     '*': {
       '*': {
         _blend: ['multiply', 'screen'],
         bg: ['white', 'black'],
-        bg2: ['50', '950'],
+        border: ['200', '800'],
         fg: ['black', '200'],
-        border: ['200', '900'],
+        muted: {
+          bg: ['50', '950'],
+        },
         placeholder: ['400', '600/0.5'],
       },
 
@@ -366,38 +367,57 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
     },
   },
-  kbd: {
-    _blend: ['multiply', 'screen'],
-    bg: ['white', 'black'],
-    fg: ['600', '400'],
-    border: ['200', '900'],
-  },
   selectable: {
     '*': {
       '*': {
         _blend: ['multiply', 'screen'],
         bg: ['white', 'black'],
-        bg2: ['50', '950'],
-        fg: ['900', '200'],
-        icon: ['600', '400'],
-        border: ['200', '900'],
+        fg: ['800', '200'],
+        icon: ['700/0.7', '300/0.7'],
+        avatar: {
+          '*': {
+            _blend: ['screen', 'multiply'],
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+          //   yellow: {bg: ['600', '400']},
+          //   green: {bg: ['600', '400']},
+          //   cyan: {bg: ['600', '400']},
+        },
+        border: ['200', '800'],
         muted: {
-          fg: ['700', '400'],
+          bg: ['50', '950'],
+          fg: ['700', '300'],
         },
         accent: {
           fg: ['purple/600', 'purple/400'],
         },
         link: {
-          fg: ['blue/700', 'blue/400'],
+          fg: ['blue/700', 'blue/300'],
         },
         code: {
           bg: ['100', '950'],
-          fg: ['700', '400'],
+          fg: ['700', '300'],
         },
         skeleton: {
           from: ['100', '900'],
           to: ['100/0.5', '900/0.5'],
         },
+        badge: {
+          '*': {
+            // _blend: ['multiply', 'screen'],
+            bg: ['100', '900'],
+            fg: ['600', '200'],
+            dot: ['300', '700'],
+            icon: ['600', '400'],
+          },
+        },
+        kbd: {
+          // _blend: ['multiply', 'screen'],
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['200', '800'],
+        },
       },
       hovered: {
         bg: ['50', '950'],
@@ -408,18 +428,42 @@ export const defaultColorTokens: ThemeColorTokens = {
       selected: {
         _blend: ['screen', 'multiply'],
         bg: ['500', '400'],
-        bg2: ['900', '50'],
         fg: ['white', 'black'],
-        icon: ['200', '900'],
+        icon: ['200', '800'],
+        avatar: {
+          '*': {
+            _blend: ['multiply', 'screen'],
+            bg: ['white', 'black'],
+            fg: ['black', 'white'],
+          },
+          // magenta: {_hue: 'green'},
+          // yellow: {bg: ['600', '400']},
+          // green: {bg: ['600', '400']},
+          // cyan: {bg: ['600', '400']},
+        },
+        badge: {
+          '*': {
+            // _blend: ['multiply', 'screen'],
+            // _blend: ['screen', 'multiply'],
+            bg: ['700', '300'],
+            fg: ['white', 'black'],
+          },
+        },
         border: ['500/0.2', '400/0.2'],
         muted: {
-          fg: ['200', '700'],
+          bg: ['900', '50'],
+          fg: ['200', '800'],
         },
         accent: {
-          fg: ['purple/200', 'purple/700'],
+          fg: ['purple/200', 'purple/800'],
+        },
+        kbd: {
+          bg: ['black/0', 'white/0'],
+          fg: ['white', 'black'],
+          border: ['gray/700', 'gray/300'],
         },
         link: {
-          fg: ['blue/200', 'blue/700'],
+          fg: ['blue/200', 'blue/800'],
         },
         code: {
           bg: ['500/0.2', '400/0.2'],
@@ -429,6 +473,15 @@ export const defaultColorTokens: ThemeColorTokens = {
           from: ['900', '100'],
           to: ['900/0.5', '100/0.5'],
         },
+        // badge: {
+        //   '*': {
+        //     _blend: ['multiply', 'screen'],
+        //     bg: ['900', '100'],
+        //     fg: ['white', 'black'],
+        //     dot: ['700', '300'],
+        //     icon: ['400', '600'],
+        //   },
+        // },
       },
       disabled: {
         fg: ['200', '800'],

package/src/theme/{build/defaults → defaults}/config.ts

@@ -1,21 +1,22 @@
-import {RootTheme} from '../../system'
+import {RootTheme_v2} from '../system'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
 
-export const defaultThemeConfig: Omit<RootTheme, 'color' | 'fonts'> = {
+export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
+  _version: 2,
   avatar: {
     sizes: [
-      {distance: -3, size: 25},
-      {distance: -6, size: 35},
-      {distance: -9, size: 55},
+      {distance: -4, size: 25},
+      {distance: -8, size: 33},
+      {distance: -12, size: 49},
     ],
     focusRing: {offset: 1, width: 1},
   },
   button: {
     textWeight: 'medium',
     border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 2},
+    focusRing: {offset: -1, width: 1},
   },
   card: {
     border: {width: BORDER_WIDTH},
@@ -23,13 +24,14 @@ export const defaultThemeConfig: Omit<RootTheme, 'color' | 'fonts'> = {
     shadow: {outline: OUTLINE_WIDTH},
   },
   container: [480, 640, 960, 1280, 1600, 1920],
-  focusRing: {
-    offset: 1,
-    width: 2,
-  },
   media: [360, 600, 900, 1200, 1800, 2400],
+  layer: {
+    dialog: {zOffset: 600},
+    popover: {zOffset: 400},
+    tooltip: {zOffset: 200},
+  },
   radius: [0, 1, 3, 6, 9, 12, 21],
-  shadows: [
+  shadow: [
     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]},
@@ -66,7 +68,7 @@ export const defaultThemeConfig: Omit<RootTheme, 'color' | 'fonts'> = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  styles: {
+  style: {
     button: {
       root: {
         transition: 'background-color 100ms,border-color 100ms,color 100ms',

package/src/theme/{build/defaults → defaults}/fonts.ts

@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../../system'
+import {ThemeFonts} from '../system'
 
 export const defaultThemeFonts: ThemeFonts = {
   code: {
@@ -193,15 +193,15 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 6,
         descenderHeight: 6,
-        fontSize: 16,
+        fontSize: 15,
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7.5,
-        descenderHeight: 6.5,
-        fontSize: 19,
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
         iconSize: 29,
         lineHeight: 27,
         letterSpacing: 0,
@@ -209,7 +209,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 8.5,
         descenderHeight: 7.5,
-        fontSize: 22,
+        fontSize: 21,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,

package/src/theme/getScopedTheme.ts

@@ -0,0 +1,81 @@
+import {defaultThemeConfig} from './defaults/config'
+import {RootTheme, RootTheme_v2, Theme, ThemeColorCardToneKey, ThemeColorSchemeKey} from './system'
+import {is_v2, v0_v2, v2_v0} from './versioning'
+
+// cache[scheme][tone][rootTheme] = theme
+const cache = new Map<
+  ThemeColorSchemeKey,
+  Map<ThemeColorCardToneKey, WeakMap<RootTheme | RootTheme_v2, Theme>>
+>()
+
+/** @internal */
+export function getScopedTheme(
+  themeProp: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+): Theme {
+  const cachedTheme = _getCachedTheme(themeProp, scheme, tone)
+
+  if (cachedTheme) return cachedTheme
+
+  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
+  const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
+
+  const colorScheme_v0 = v0.color[scheme] || v0.color.light
+  const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default
+  const layer_v0 = v0.layer || defaultThemeConfig.layer
+
+  const colorScheme_v2 = v2.color[scheme] || v2.color.light
+  const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
+  const layer_v2 = v2.layer || defaultThemeConfig.layer
+
+  const theme: Theme = {
+    sanity: {
+      ...v0,
+      color: color_v0,
+      layer: layer_v0,
+      v2: {
+        ...v2,
+        color: color_v2,
+        layer: layer_v2,
+      },
+    },
+  }
+
+  _setCachedTheme(themeProp, scheme, tone, theme)
+
+  return theme
+}
+
+function _getCachedTheme(
+  rootTheme: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+) {
+  const schemeCache = cache.get(scheme)
+
+  if (!schemeCache) return undefined
+
+  const toneCache = schemeCache.get(tone)
+
+  if (!toneCache) return undefined
+
+  return toneCache.get(rootTheme)
+}
+
+function _setCachedTheme(
+  rootTheme: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+  theme: Theme,
+) {
+  if (!cache.has(scheme)) cache.set(scheme, new Map())
+
+  const schemeCache = cache.get(scheme)!
+
+  if (!schemeCache.has(tone)) schemeCache.set(tone, new WeakMap())
+
+  const toneCache = schemeCache.get(tone)!
+
+  toneCache.set(rootTheme, theme)
+}

package/src/theme/index.ts

@@ -1,4 +1,12 @@
+import {buildTheme} from './build'
+
 export * from './build'
 export * from './config'
-export * from './themes/studio'
+export * from './getScopedTheme'
 export * from './system'
+export * from './versioning'
+
+/**
+ * @public
+ */
+export const defaultTheme = buildTheme()