@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/theme/defaults/fonts.ts

@@ -1,250 +0,0 @@
-import type {Fonts} from '../types'
-
-export const defaultFonts: Fonts = {
-  code: {
-    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-    weight: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    scale: [
-      {
-        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: 18.75,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-        customIconSize: 24,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        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',
-    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
-    weight: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900,
-    },
-    scale: [
-      {
-        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,
-    },
-    scale: [
-      {
-        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,
-    },
-    scale: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 9.75,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-        customIconSize: 12,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 12.5,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-        customIconSize: 16,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 15.25,
-        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: 20.75,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-        customIconSize: 28,
-      },
-    ],
-  },
-}

package/src/theme/index.ts

@@ -1,5 +0,0 @@
-export * from './_parseColorToken'
-export * from './buildTheme'
-export * from './constants'
-export * from './resolveTokens'
-export * from './types'

package/src/theme/merge.ts

@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
-  return (records.filter(Boolean) as T[]).reduce(_merge, {} as T)
-}
-
-function _merge<T extends Record<string, any>>(acc: T, source: T): T {
-  for (const key of Object.keys(source)) {
-    const prevValue = acc[key]
-    const nextValue = source[key]
-
-    if (isRecord(prevValue) && isRecord(nextValue)) {
-      ;(acc as any)[key] = merge(prevValue, nextValue)
-    } else {
-      ;(acc as any)[key] = nextValue
-    }
-  }
-
-  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

@@ -1,204 +0,0 @@
-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],
-    },
-  }
-}