@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/theme/defaults/fonts.ts

@@ -1,15 +1,15 @@
-import {ThemeFonts} from '../system'
+import type {Fonts} from '../types'
 
-export const defaultThemeFonts: ThemeFonts = {
+export const defaultFonts: Fonts = {
   code: {
     family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-    weights: {
+    weight: {
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700,
     },
-    sizes: [
+    scale: [
       {
         ascenderHeight: 4,
         descenderHeight: 4,
@@ -17,6 +17,7 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 17,
         lineHeight: 15,
         letterSpacing: 0,
+        customIconSize: 12,
       },
       {
         ascenderHeight: 5,
@@ -25,6 +26,7 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 21,
         lineHeight: 19,
         letterSpacing: 0,
+        customIconSize: 16,
       },
       {
         ascenderHeight: 6,
@@ -33,35 +35,39 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
+        customIconSize: 20,
       },
       {
         ascenderHeight: 7,
         descenderHeight: 7,
-        fontSize: 19,
+        fontSize: 18.75,
         iconSize: 29,
         lineHeight: 27,
         letterSpacing: 0,
+        customIconSize: 24,
       },
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 22,
+        fontSize: 21.5,
         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',
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
+    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
+    weight: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
       bold: 900,
     },
-    sizes: [
+    scale: [
       {
         ascenderHeight: 5,
         descenderHeight: 5,
@@ -69,6 +75,7 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 17,
         lineHeight: 19,
         letterSpacing: 0,
+        customIconSize: 12,
       },
       {
         ascenderHeight: 6,
@@ -77,6 +84,7 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
+        customIconSize: 20,
       },
       {
         ascenderHeight: 7,
@@ -84,7 +92,8 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 21,
         iconSize: 33,
         lineHeight: 29,
-        letterSpacing: 0,
+        letterSpacing: -0.25,
+        customIconSize: 28,
       },
       {
         ascenderHeight: 8,
@@ -92,7 +101,8 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 27,
         iconSize: 41,
         lineHeight: 35,
-        letterSpacing: 0,
+        letterSpacing: -0.5,
+        customIconSize: 36,
       },
       {
         ascenderHeight: 9.5,
@@ -100,7 +110,8 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 33,
         iconSize: 49,
         lineHeight: 41,
-        letterSpacing: 0,
+        letterSpacing: -1,
+        customIconSize: 44,
       },
       {
         ascenderHeight: 10.5,
@@ -108,20 +119,21 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 38,
         iconSize: 53,
         lineHeight: 47,
-        letterSpacing: 0,
+        letterSpacing: -1,
+        customIconSize: 48,
       },
     ],
   },
   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,
+    weight: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
     },
-    sizes: [
+    scale: [
       {
         ascenderHeight: 2,
         descenderHeight: 2,
@@ -129,14 +141,16 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 13,
         lineHeight: 10,
         letterSpacing: 0.5,
+        customIconSize: 8,
       },
       {
-        ascenderHeight: 2,
-        descenderHeight: 2,
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
         fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
         letterSpacing: 0.5,
+        customIconSize: 10,
       },
       {
         ascenderHeight: 2,
@@ -145,6 +159,7 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 17,
         lineHeight: 12,
         letterSpacing: 0.5,
+        customIconSize: 12,
       },
       {
         ascenderHeight: 2,
@@ -153,14 +168,16 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 19,
         lineHeight: 13,
         letterSpacing: 0.5,
+        customIconSize: 14,
       },
       {
-        ascenderHeight: 2,
-        descenderHeight: 2,
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
         fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,
         letterSpacing: 0.5,
+        customIconSize: 16,
       },
       {
         ascenderHeight: 2,
@@ -169,42 +186,46 @@ export const defaultThemeFonts: ThemeFonts = {
         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',
-    weights: {
+    weight: {
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700,
     },
-    sizes: [
+    scale: [
       {
         ascenderHeight: 4,
         descenderHeight: 4,
-        fontSize: 10,
+        fontSize: 9.75,
         iconSize: 17,
         lineHeight: 15,
         letterSpacing: 0,
+        customIconSize: 12,
       },
       {
         ascenderHeight: 5,
         descenderHeight: 5,
-        fontSize: 13,
+        fontSize: 12.5,
         iconSize: 21,
         lineHeight: 19,
         letterSpacing: 0,
+        customIconSize: 16,
       },
       {
         ascenderHeight: 6,
         descenderHeight: 6,
-        fontSize: 15,
+        fontSize: 15.25,
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
+        customIconSize: 20,
       },
       {
         ascenderHeight: 7,
@@ -213,14 +234,16 @@ export const defaultThemeFonts: ThemeFonts = {
         iconSize: 29,
         lineHeight: 27,
         letterSpacing: 0,
+        customIconSize: 24,
       },
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 21,
+        fontSize: 20.75,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,
+        customIconSize: 28,
       },
     ],
   },

package/src/theme/index.ts

@@ -1,5 +1,5 @@
-export * from './build'
-export * from './config'
-export * from './getScopedTheme'
-export * from './system'
-export * from './versioning'
+export * from './_parseColorToken'
+export * from './buildTheme'
+export * from './constants'
+export * from './resolveTokens'
+export * from './types'

package/src/theme/{build/merge.ts → merge.ts}

@@ -1,13 +1,7 @@
-import {isRecord} from './lib/isRecord'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
-  const _records = records.filter(Boolean) as T[]
-
-  if (_records.length === 0) {
-    return {} as T
-  }
-
-  return _records.reduce(_merge, {} as T)
+  return (records.filter(Boolean) as T[]).reduce(_merge, {} as T)
 }
 
 function _merge<T extends Record<string, any>>(acc: T, source: T): T {
@@ -24,3 +18,7 @@ function _merge<T extends Record<string, any>>(acc: T, source: T): T {
 
   return acc
 }
+
+function isRecord(value: unknown): value is Record<string, any> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}

package/src/theme/resolveTokens.ts

@@ -0,0 +1,204 @@
+import {CARD_TONES, ELEMENT_TONES} from './constants'
+import {merge} from './merge'
+import type {
+  CardColorTokens,
+  CardTone,
+  ElementColorTokens,
+  ElementTone,
+  PartialTokens,
+  Tokens,
+} from './types'
+
+const defaultElementTokens: ElementColorTokens = {
+  _hue: 'gray',
+  bg: {
+    0: ['950', '50'],
+    4: ['700', '300'],
+  },
+  border: {
+    0: ['700', '300'],
+    4: ['400', '600'],
+  },
+  fg: {
+    0: ['100', '900'],
+    4: ['400', '600'],
+  },
+}
+
+/** @internal */
+export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
+  return {
+    color: {
+      '*': resolveCardColorTokens(tokens.color?.['*']),
+
+      ...CARD_TONES.reduce(
+        (acc, tone) => {
+          return {
+            ...acc,
+            [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
+          }
+        },
+        {} as Record<CardTone, CardColorTokens>,
+      ),
+    },
+  }
+}
+
+function resolveCardColorTokens(
+  tokens: PartialTokens<CardColorTokens> | undefined,
+): CardColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    avatar: {
+      gray: {
+        _hue: tokens?.avatar?.gray?._hue ?? 'gray',
+        bg: tokens?.avatar?.gray?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.gray?.fg ?? ['white', '900'],
+      },
+      blue: {
+        _hue: tokens?.avatar?.blue?._hue ?? 'blue',
+        bg: tokens?.avatar?.blue?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.blue?.fg ?? ['white', '900'],
+      },
+      purple: {
+        _hue: tokens?.avatar?.purple?._hue ?? 'purple',
+        bg: tokens?.avatar?.purple?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.purple?.fg ?? ['white', '900'],
+      },
+      magenta: {
+        _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
+        bg: tokens?.avatar?.magenta?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['white', '900'],
+      },
+      red: {
+        _hue: tokens?.avatar?.red?._hue ?? 'red',
+        bg: tokens?.avatar?.red?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.red?.fg ?? ['white', '900'],
+      },
+      orange: {
+        _hue: tokens?.avatar?.orange?._hue ?? 'orange',
+        bg: tokens?.avatar?.orange?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.orange?.fg ?? ['white', '900'],
+      },
+      yellow: {
+        _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
+        bg: tokens?.avatar?.yellow?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['white', '900'],
+      },
+      green: {
+        _hue: tokens?.avatar?.green?._hue ?? 'green',
+        bg: tokens?.avatar?.green?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.green?.fg ?? ['white', '900'],
+      },
+      cyan: {
+        _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
+        bg: tokens?.avatar?.cyan?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['white', '900'],
+      },
+    },
+    backdrop: tokens?.backdrop ?? ['100', '900'],
+    code: {
+      bg: tokens?.code?.bg ?? ['50', '950'],
+      fg: tokens?.code?.fg ?? ['600', '400'],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ['600', '400'],
+        attribute: tokens?.code?.token?.attribute ?? ['600', '400'],
+        attrName: tokens?.code?.token?.attrName ?? ['600', '400'],
+        attrValue: tokens?.code?.token?.attrValue ?? ['600', '400'],
+        boolean: tokens?.code?.token?.boolean ?? ['600', '400'],
+        builtin: tokens?.code?.token?.builtin ?? ['600', '400'],
+        cdata: tokens?.code?.token?.cdata ?? ['600', '400'],
+        char: tokens?.code?.token?.char ?? ['600', '400'],
+        class: tokens?.code?.token?.class ?? ['600', '400'],
+        className: tokens?.code?.token?.className ?? ['600', '400'],
+        comment: tokens?.code?.token?.comment ?? ['400', '600'],
+        constant: tokens?.code?.token?.constant ?? ['600', '400'],
+        deleted: tokens?.code?.token?.deleted ?? ['600', '400'],
+        doctype: tokens?.code?.token?.doctype ?? ['600', '400'],
+        entity: tokens?.code?.token?.entity ?? ['600', '400'],
+        function: tokens?.code?.token?.function ?? ['600', '400'],
+        hexcode: tokens?.code?.token?.hexcode ?? ['600', '400'],
+        id: tokens?.code?.token?.id ?? ['600', '400'],
+        important: tokens?.code?.token?.important ?? ['600', '400'],
+        inserted: tokens?.code?.token?.inserted ?? ['600', '400'],
+        keyword: tokens?.code?.token?.keyword ?? ['600', '400'],
+        number: tokens?.code?.token?.number ?? ['600', '400'],
+        operator: tokens?.code?.token?.operator ?? ['600', '400'],
+        prolog: tokens?.code?.token?.prolog ?? ['600', '400'],
+        property: tokens?.code?.token?.property ?? ['600', '400'],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['600', '400'],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['600', '400'],
+        punctuation: tokens?.code?.token?.punctuation ?? ['600', '400'],
+        regex: tokens?.code?.token?.regex ?? ['600', '400'],
+        selector: tokens?.code?.token?.selector ?? ['600', '400'],
+        string: tokens?.code?.token?.string ?? ['600', '400'],
+        symbol: tokens?.code?.token?.symbol ?? ['600', '400'],
+        tag: tokens?.code?.token?.tag ?? ['600', '400'],
+        unit: tokens?.code?.token?.unit ?? ['600', '400'],
+        url: tokens?.code?.token?.url ?? ['600', '400'],
+        variable: tokens?.code?.token?.variable ?? ['600', '400'],
+      },
+    },
+    focusRing: tokens?.focusRing ?? ['500', '500'],
+    link: {
+      fg: tokens?.link?.fg ?? ['600', '400'],
+    },
+    shadow: {
+      outline: tokens?.shadow?.outline ?? ['500', '500'],
+      umbra: tokens?.shadow?.umbra ?? ['500', '500'],
+      penumbra: tokens?.shadow?.penumbra ?? ['500', '500'],
+      ambient: tokens?.shadow?.ambient ?? ['500', '500'],
+    },
+    skeleton: {
+      from: tokens?.skeleton?.from ?? ['100', '900'],
+      to: tokens?.skeleton?.to ?? ['50', '950'],
+    },
+
+    variant: {
+      solid: {
+        '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
+        ...ELEMENT_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ElementTone, ElementColorTokens>,
+        ),
+      },
+      tinted: {
+        '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
+        ...ELEMENT_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ElementTone, ElementColorTokens>,
+        ),
+      },
+    },
+  }
+}
+
+function resolveElementTokens(tokens?: PartialTokens<ElementColorTokens>): ElementColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    bg: {
+      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
+      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4],
+    },
+    border: {
+      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
+      4: tokens?.border?.[4] ?? defaultElementTokens.border[4],
+    },
+    fg: {
+      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
+      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4],
+    },
+  }
+}