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

package/src/css/theme/resolveTheme.ts

@@ -1,863 +0,0 @@
-import {
-  _parseColorToken,
-  AVATAR_COLORS,
-  AVATAR_SIZE,
-  COLOR_VARIANTS,
-  type ColorToken,
-  CONTAINER_SCALE,
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  type Hue,
-  HUES,
-  RADIUS,
-  SHADOW,
-  SPACE,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  type Theme_v3,
-  type ThemeBoxShadow,
-  type ThemeColorCard_v3,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-  type ThemeColorStateToneKey,
-  type ThemeColorVariantKey,
-  TINTS,
-} from '@sanity/ui/theme'
-
-import {_fromEntries} from '../_fromEntries'
-import {buildVarContract} from './lib/contract'
-
-/**
- * Resolve CSS theme
- *
- * @public
- */
-export function resolveTheme(options: {theme: Theme_v3}) {
-  const {theme} = options
-
-  const paletteResult = buildVarContract(
-    {
-      palette: {
-        black: theme.palette.black.hex,
-        white: theme.palette.white.hex,
-        ..._fromEntries(
-          HUES.map((hue) => [
-            hue,
-            _fromEntries(TINTS.map((tint) => [tint, theme.palette.hues[hue][tint].hex])),
-          ]),
-        ),
-      },
-    },
-    {layer: 'palette', prefix: 's'},
-  )
-
-  const themeResult = buildVarContract(
-    {
-      arrow: {
-        size: null,
-      },
-      avatar: {
-        distance: null,
-        size: null,
-        focusRing: {
-          offset: px(theme.avatar.focusRing.offset),
-          width: px(theme.avatar.focusRing.width),
-        },
-
-        sizes: _fromEntries(
-          AVATAR_SIZE.map((s) => [
-            s,
-            {
-              distance: rem(theme.avatar.sizes[s].distance),
-              size: rem(theme.avatar.sizes[s].size),
-            },
-          ]),
-        ),
-      },
-      button: {
-        boxShadow: null,
-        focusRing: {
-          offset: px(theme.button.focusRing.offset),
-          width: px(theme.button.focusRing.width),
-        },
-        border: {
-          width: px(theme.button.border.width),
-        },
-      },
-      card: {
-        shadow: {
-          outline: px(theme.card.shadow.outline),
-        },
-      },
-      color: {
-        backdrop: null,
-        bg: null,
-        border: null,
-
-        code: {
-          bg: null,
-          fg: null,
-
-          token: {
-            atrule: null,
-            attrName: null,
-            attrValue: null,
-            attribute: null,
-            boolean: null,
-            builtin: null,
-            cdata: null,
-            char: null,
-            class: null,
-            className: null,
-            comment: null,
-            constant: null,
-            deleted: null,
-            doctype: null,
-            entity: null,
-            function: null,
-            hexcode: null,
-            id: null,
-            important: null,
-            inserted: null,
-            keyword: null,
-            number: null,
-            operator: null,
-            prolog: null,
-            property: null,
-            pseudoClass: null,
-            pseudoElement: null,
-            punctuation: null,
-            regex: null,
-            selector: null,
-            string: null,
-            symbol: null,
-            tag: null,
-            unit: null,
-            url: null,
-            variable: null,
-          },
-        },
-
-        fg: null,
-        focusRing: null,
-
-        link: {
-          fg: null,
-        },
-
-        avatar: {
-          bg: null,
-          fg: null,
-
-          ..._fromEntries(
-            AVATAR_COLORS.map((c) => [
-              c,
-              {
-                bg: null,
-                fg: null,
-              },
-            ]),
-          ),
-        },
-
-        button: {},
-
-        input: {
-          checkbox: {
-            bg: null,
-            border: null,
-            fg: null,
-          },
-
-          radio: {
-            bg: null,
-            border: null,
-            fg: null,
-          },
-
-          text: {
-            bg: null,
-            fg: null,
-            border: null,
-            placeholder: null,
-            invalid: {
-              bg: null,
-              border: null,
-              fg: null,
-            },
-          },
-
-          switch: {
-            bg: null,
-            fg: null,
-          },
-        },
-
-        muted: {
-          bg: null,
-          fg: null,
-        },
-
-        shadow: {
-          outline: null,
-          umbra: null,
-          penumbra: null,
-          ambient: null,
-        },
-
-        skeleton: {
-          from: null,
-          to: null,
-        },
-
-        light: _fromEntries(
-          THEME_COLOR_CARD_TONES.map((t) => [
-            t,
-            buildCardContract({
-              theme,
-              scheme: 'light',
-              tone: t,
-            }),
-          ]),
-        ),
-
-        dark: _fromEntries(
-          THEME_COLOR_CARD_TONES.map((t) => [
-            t,
-            buildCardContract({
-              theme,
-              scheme: 'dark',
-              tone: t,
-            }),
-          ]),
-        ),
-
-        // tones
-        ..._fromEntries(
-          THEME_COLOR_CARD_TONES.map((t) => [
-            t,
-            {
-              avatar: {
-                ..._fromEntries(AVATAR_COLORS.map((c) => [c, {bg: null, fg: null}])),
-              },
-              backdrop: null,
-              code: {
-                bg: null,
-                fg: null,
-
-                token: {
-                  atrule: null,
-                  attrName: null,
-                  attrValue: null,
-                  attribute: null,
-                  boolean: null,
-                  builtin: null,
-                  cdata: null,
-                  char: null,
-                  class: null,
-                  className: null,
-                  comment: null,
-                  constant: null,
-                  deleted: null,
-                  doctype: null,
-                  entity: null,
-                  function: null,
-                  hexcode: null,
-                  id: null,
-                  important: null,
-                  inserted: null,
-                  keyword: null,
-                  number: null,
-                  operator: null,
-                  prolog: null,
-                  property: null,
-                  pseudoClass: null,
-                  pseudoElement: null,
-                  punctuation: null,
-                  regex: null,
-                  selector: null,
-                  string: null,
-                  symbol: null,
-                  tag: null,
-                  unit: null,
-                  url: null,
-                  variable: null,
-                },
-              },
-              focusRing: null,
-              link: {
-                fg: null,
-              },
-              shadow: {
-                outline: null,
-                umbra: null,
-                penumbra: null,
-                ambient: null,
-              },
-              skeleton: {
-                from: null,
-                to: null,
-              },
-
-              ..._fromEntries(
-                COLOR_VARIANTS.map((v) => [
-                  v,
-                  {
-                    bg: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-
-                    fg: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-
-                    border: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-
-                    ..._fromEntries(
-                      THEME_COLOR_STATE_TONES.map((t) => [
-                        t,
-                        {
-                          bg: {
-                            0: null,
-                            1: null,
-                            2: null,
-                            3: null,
-                            4: null,
-                          },
-
-                          fg: {
-                            0: null,
-                            1: null,
-                            2: null,
-                            3: null,
-                            4: null,
-                          },
-
-                          border: {
-                            0: null,
-                            1: null,
-                            2: null,
-                            3: null,
-                            4: null,
-                          },
-                        },
-                      ]),
-                    ),
-                  },
-                ]),
-              ),
-            },
-          ]),
-        ),
-
-        ..._fromEntries(
-          COLOR_VARIANTS.map((v) => [
-            v,
-            {
-              bg: {
-                0: null,
-                1: null,
-                2: null,
-                3: null,
-                4: null,
-              },
-
-              fg: {
-                0: null,
-                1: null,
-                2: null,
-                3: null,
-                4: null,
-              },
-
-              border: {
-                0: null,
-                1: null,
-                2: null,
-                3: null,
-                4: null,
-              },
-
-              ..._fromEntries(
-                THEME_COLOR_STATE_TONES.map((t) => [
-                  t,
-                  {
-                    bg: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-
-                    fg: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-
-                    border: {
-                      0: null,
-                      1: null,
-                      2: null,
-                      3: null,
-                      4: null,
-                    },
-                  },
-                ]),
-              ),
-            },
-          ]),
-        ),
-      },
-      container: _fromEntries(CONTAINER_SCALE.map((c) => [c, px(theme.container[c])])),
-      font: {
-        family: null,
-        fontSize: null,
-        letterSpacing: null,
-        lineHeight: null,
-        ascenderHeight: null,
-        descenderHeight: null,
-        iconSize: null,
-        featureSettings: null,
-        fontWeight: null,
-
-        capHeight: null,
-        iconOffset: null,
-        customIconSize: null,
-        customIconOffset: null,
-
-        code: {
-          family: theme.font.code.family,
-          featureSettings: theme.font.code.featureSettings ?? 'normal',
-          weight: {
-            regular: String(theme.font.code.weight.regular),
-            medium: String(theme.font.code.weight.medium),
-            semibold: String(theme.font.code.weight.semibold),
-            bold: String(theme.font.code.weight.bold),
-          },
-          sizes: _fromEntries(
-            FONT_CODE_SIZE.map((s) => [
-              s,
-              {
-                fontSize: rem(theme.font.code.sizes[s].fontSize),
-                lineHeight: rem(theme.font.code.sizes[s].lineHeight),
-                letterSpacing: rem(theme.font.code.sizes[s].letterSpacing),
-                ascenderHeight: rem(theme.font.code.sizes[s].ascenderHeight),
-                descenderHeight: rem(theme.font.code.sizes[s].descenderHeight),
-                iconSize: rem(theme.font.code.sizes[s].iconSize),
-                customIconSize: rem(theme.font.code.sizes[s].customIconSize),
-              },
-            ]),
-          ),
-        },
-
-        heading: {
-          family: theme.font.heading.family,
-          featureSettings: theme.font.heading.featureSettings ?? 'normal',
-          weight: {
-            regular: String(theme.font.heading.weight.regular),
-            medium: String(theme.font.heading.weight.medium),
-            semibold: String(theme.font.heading.weight.semibold),
-            bold: String(theme.font.heading.weight.bold),
-          },
-          sizes: _fromEntries(
-            FONT_HEADING_SIZE.map((s) => [
-              s,
-              {
-                fontSize: rem(theme.font.heading.sizes[s].fontSize),
-                lineHeight: rem(theme.font.heading.sizes[s].lineHeight),
-                letterSpacing: rem(theme.font.heading.sizes[s].letterSpacing),
-                ascenderHeight: rem(theme.font.heading.sizes[s].ascenderHeight),
-                descenderHeight: rem(theme.font.heading.sizes[s].descenderHeight),
-                iconSize: rem(theme.font.heading.sizes[s].iconSize),
-                customIconSize: rem(theme.font.heading.sizes[s].customIconSize),
-              },
-            ]),
-          ),
-        },
-
-        label: {
-          family: theme.font.label.family,
-          featureSettings: theme.font.label.featureSettings ?? 'normal',
-          weight: {
-            regular: String(theme.font.label.weight.regular),
-            medium: String(theme.font.label.weight.medium),
-            semibold: String(theme.font.label.weight.semibold),
-            bold: String(theme.font.label.weight.bold),
-          },
-          sizes: _fromEntries(
-            FONT_LABEL_SIZE.map((s) => [
-              s,
-              {
-                fontSize: rem(theme.font.label.sizes[s].fontSize),
-                lineHeight: rem(theme.font.label.sizes[s].lineHeight),
-                letterSpacing: rem(theme.font.label.sizes[s].letterSpacing),
-                ascenderHeight: rem(theme.font.label.sizes[s].ascenderHeight),
-                descenderHeight: rem(theme.font.label.sizes[s].descenderHeight),
-                iconSize: rem(theme.font.label.sizes[s].iconSize),
-                customIconSize: rem(theme.font.label.sizes[s].customIconSize),
-              },
-            ]),
-          ),
-        },
-
-        text: {
-          family: theme.font.text.family,
-          featureSettings: theme.font.text.featureSettings ?? 'normal',
-          weight: {
-            regular: String(theme.font.text.weight.regular),
-            medium: String(theme.font.text.weight.medium),
-            semibold: String(theme.font.text.weight.semibold),
-            bold: String(theme.font.text.weight.bold),
-          },
-          sizes: _fromEntries(
-            FONT_TEXT_SIZE.map((s) => [
-              s,
-              {
-                fontSize: rem(theme.font.text.sizes[s].fontSize),
-                lineHeight: rem(theme.font.text.sizes[s].lineHeight),
-                letterSpacing: rem(theme.font.text.sizes[s].letterSpacing),
-                ascenderHeight: rem(theme.font.text.sizes[s].ascenderHeight),
-                descenderHeight: rem(theme.font.text.sizes[s].descenderHeight),
-                iconSize: rem(theme.font.text.sizes[s].iconSize),
-                customIconSize: rem(theme.font.text.sizes[s].customIconSize),
-              },
-            ]),
-          ),
-        },
-
-        skeleton: {
-          lineHeight: null,
-          ascenderHeight: null,
-          descenderHeight: null,
-        },
-
-        weight: {
-          regular: null,
-          medium: null,
-          semibold: null,
-          bold: null,
-        },
-      },
-      input: {
-        gap: null,
-        descenderHeight: null,
-        ascenderHeight: null,
-        fontSize: null,
-        lineHeight: null,
-        letterSpacing: null,
-        padding: null,
-
-        border: {
-          width: px(theme.input.border.width),
-        },
-
-        checkbox: {
-          size: px(theme.input.checkbox.size),
-
-          focusRing: {
-            offset: px(theme.input.checkbox.focusRing.offset),
-            width: px(theme.input.checkbox.focusRing.width),
-          },
-        },
-
-        radio: {
-          focusRing: {
-            offset: px(theme.input.radio.focusRing.offset),
-            width: px(theme.input.radio.focusRing.width),
-          },
-
-          markSize: px(theme.input.radio.markSize),
-          size: px(theme.input.radio.size),
-        },
-
-        select: {
-          focusRing: {
-            offset: px(theme.input.select.focusRing.offset),
-            width: px(theme.input.select.focusRing.width),
-          },
-        },
-
-        text: {
-          focusRing: {
-            offset: px(theme.input.text.focusRing.offset),
-            width: px(theme.input.text.focusRing.width),
-          },
-        },
-
-        switch: {
-          width: px(theme.input.switch.width),
-          height: px(theme.input.switch.height),
-
-          focusRing: {
-            offset: px(theme.input.switch.focusRing.offset),
-            width: px(theme.input.switch.focusRing.width),
-          },
-
-          padding: px(theme.input.switch.padding),
-
-          thumb: {
-            offset: null,
-            size: null,
-          },
-
-          transitionDurationMs: `${theme.input.switch.transitionDurationMs}ms`,
-          transitionTimingFunction: theme.input.switch.transitionTimingFunction,
-        },
-      },
-      radius: _fromEntries(RADIUS.map((r) => [r, px(theme.radius[r])])),
-      shadow: _fromEntries(
-        SHADOW.map((s) => [
-          s,
-          {
-            umbra: toBoxShadow(theme.shadow[s]?.umbra),
-            penumbra: toBoxShadow(theme.shadow[s]?.penumbra),
-            ambient: toBoxShadow(theme.shadow[s]?.ambient),
-          },
-        ]),
-      ),
-      space: _fromEntries(SPACE.map((s) => [s, px(theme.space[s])])),
-    },
-    {layer: 'theme', prefix: 's'},
-  )
-
-  return {
-    vars: Object.freeze({
-      ...paletteResult.vars,
-      ...themeResult.vars,
-    }),
-    varNames: Object.freeze({
-      ...paletteResult.varNames,
-      ...themeResult.varNames,
-    }),
-    properties: Object.freeze({
-      ...paletteResult.properties,
-      ...themeResult.properties,
-    }),
-  }
-
-  function renderColor(t: ColorToken, options: {bgValue?: string; defaultHue: Hue}) {
-    const {bgValue = 'transparent'} = options
-
-    const color = _parseColorToken(t, options)
-
-    if (color.type === 'inherit') {
-      return bgValue
-    }
-
-    let value = '#000'
-
-    if (color.type === 'color') {
-      value = paletteResult.vars.palette[color.name]
-    }
-
-    if (color.type === 'tint') {
-      value = paletteResult.vars.palette[color.hue][color.tint]
-    }
-
-    if (color.opacity < 1) {
-      value = `color-mix(in srgb, transparent, ${value} ${color.opacity * 100}%)`
-    }
-
-    if (color.mix < 1) {
-      value = `color-mix(in srgb, ${bgValue}, ${value} ${color.mix * 100}%)`
-    }
-
-    return value
-  }
-
-  function buildCardContract(options: {
-    theme: Theme_v3
-    scheme: ThemeColorSchemeKey
-    tone: ThemeColorCardToneKey
-  }) {
-    const {theme, scheme, tone} = options
-    const card = theme.color[tone]
-    const i = scheme === 'dark' ? 1 : 0
-
-    const defaultElement = buildElementContract({
-      card,
-      variant: 'tinted',
-      tone: 'default',
-      scheme,
-    })
-
-    const bgValue = defaultElement.bg[0]
-
-    const cardOptions = {bgValue, defaultHue: card._hue}
-
-    return {
-      avatar: _fromEntries(
-        AVATAR_COLORS.map((c) => [
-          c,
-          {
-            bg: renderColor(card.avatar[c].bg[i], {defaultHue: c}),
-            fg: renderColor(card.avatar[c].fg[i], {defaultHue: c}),
-          },
-        ]),
-      ),
-      backdrop: renderColor(card.backdrop[i], cardOptions),
-      code: {
-        bg: renderColor(card.code.bg[i], cardOptions),
-        fg: renderColor(card.code.fg[i], cardOptions),
-        token: {
-          atrule: renderColor(card.code.token.atrule[i], cardOptions),
-          attrName: renderColor(card.code.token.attrName[i], cardOptions),
-          attrValue: renderColor(card.code.token.attrValue[i], cardOptions),
-          attribute: renderColor(card.code.token.attribute[i], cardOptions),
-          boolean: renderColor(card.code.token.boolean[i], cardOptions),
-          builtin: renderColor(card.code.token.builtin[i], cardOptions),
-          cdata: renderColor(card.code.token.cdata[i], cardOptions),
-          char: renderColor(card.code.token.char[i], cardOptions),
-          class: renderColor(card.code.token.class[i], cardOptions),
-          className: renderColor(card.code.token.className[i], cardOptions),
-          comment: renderColor(card.code.token.comment[i], cardOptions),
-          constant: renderColor(card.code.token.constant[i], cardOptions),
-          deleted: renderColor(card.code.token.deleted[i], cardOptions),
-          doctype: renderColor(card.code.token.doctype[i], cardOptions),
-          entity: renderColor(card.code.token.entity[i], cardOptions),
-          function: renderColor(card.code.token.function[i], cardOptions),
-          hexcode: renderColor(card.code.token.hexcode[i], cardOptions),
-          id: renderColor(card.code.token.id[i], cardOptions),
-          important: renderColor(card.code.token.important[i], cardOptions),
-          inserted: renderColor(card.code.token.inserted[i], cardOptions),
-          keyword: renderColor(card.code.token.keyword[i], cardOptions),
-          number: renderColor(card.code.token.number[i], cardOptions),
-          operator: renderColor(card.code.token.operator[i], cardOptions),
-          prolog: renderColor(card.code.token.prolog[i], cardOptions),
-          property: renderColor(card.code.token.property[i], cardOptions),
-          pseudoClass: renderColor(card.code.token.pseudoClass[i], cardOptions),
-          pseudoElement: renderColor(card.code.token.pseudoElement[i], cardOptions),
-          punctuation: renderColor(card.code.token.punctuation[i], cardOptions),
-          regex: renderColor(card.code.token.regex[i], cardOptions),
-          selector: renderColor(card.code.token.selector[i], cardOptions),
-          string: renderColor(card.code.token.string[i], cardOptions),
-          symbol: renderColor(card.code.token.symbol[i], cardOptions),
-          tag: renderColor(card.code.token.tag[i], cardOptions),
-          unit: renderColor(card.code.token.unit[i], cardOptions),
-          url: renderColor(card.code.token.url[i], cardOptions),
-          variable: renderColor(card.code.token.variable[i], cardOptions),
-        },
-      },
-      focusRing: renderColor(card.focusRing[i], cardOptions),
-      link: {
-        fg: renderColor(card.link.fg[i], cardOptions),
-      },
-      shadow: {
-        outline: renderColor(card.shadow.outline[i], cardOptions),
-        umbra: renderColor(card.shadow.umbra[i], cardOptions),
-        penumbra: renderColor(card.shadow.penumbra[i], cardOptions),
-        ambient: renderColor(card.shadow.ambient[i], cardOptions),
-      },
-      skeleton: {
-        from: renderColor(card.skeleton.from[i], cardOptions),
-        to: renderColor(card.skeleton.to[i], cardOptions),
-      },
-
-      ..._fromEntries(
-        COLOR_VARIANTS.map((v) => [
-          v,
-          _fromEntries(
-            THEME_COLOR_STATE_TONES.map((e) => [
-              e,
-              v === 'tinted' && e === 'default'
-                ? defaultElement
-                : buildElementContract({
-                    card,
-                    variant: v,
-                    tone: e,
-                    scheme,
-                    bgValue,
-                  }),
-            ]),
-          ),
-        ]),
-      ),
-    } as const
-  }
-
-  function buildElementContract(options: {
-    bgValue?: string
-    card: ThemeColorCard_v3
-    variant: ThemeColorVariantKey
-    tone: ThemeColorStateToneKey
-    scheme: ThemeColorSchemeKey
-  }) {
-    const {bgValue, card, variant: v, tone: e, scheme} = options
-    const element = card.variant[v][e]
-    const elementOptions = {bgValue, defaultHue: element._hue}
-    const i = scheme === 'dark' ? 1 : 0
-
-    const bg = {
-      0: renderColor(element.bg[0][i], elementOptions),
-      4: renderColor(element.bg[4][i], elementOptions),
-    }
-
-    const border = {
-      0: renderColor(element.border[0][i], elementOptions),
-      4: renderColor(element.border[4][i], elementOptions),
-    }
-
-    const fg = {
-      0: renderColor(element.fg[0][i], elementOptions),
-      4: renderColor(element.fg[4][i], elementOptions),
-    }
-
-    return {
-      bg: {
-        0: bg[0],
-        1: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 25%)`,
-        2: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 50%)`,
-        3: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 75%)`,
-        4: bg[4],
-      },
-      border: {
-        0: border[0],
-        1: `color-mix(in srgb, ${border[0]}, ${border[4]} 25%)`,
-        2: `color-mix(in srgb, ${border[0]}, ${border[4]} 50%)`,
-        3: `color-mix(in srgb, ${border[0]}, ${border[4]} 75%)`,
-        4: border[4],
-      },
-      fg: {
-        0: fg[0],
-        1: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 25%)`,
-        2: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 50%)`,
-        3: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 75%)`,
-        4: fg[4],
-      },
-    }
-  }
-}
-
-function px(value: number): string {
-  return `${value}px`
-}
-
-function rem(value: number): string {
-  return `${value / 16}rem`
-}
-
-function toBoxShadow(value: ThemeBoxShadow | undefined): string {
-  if (!value) return 'none'
-
-  return value.map((n) => px(n)).join(' ')
-}