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

package/src/css/theme/resolveTheme.ts

@@ -0,0 +1,852 @@
+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,
+        iconOffset: null,
+
+        code: {
+          family: theme.font.code.family,
+          featureSettings: theme.font.code.featureSettings ?? 'normal',
+          weight: {
+            regular: String(theme.font.code.weights.regular),
+            medium: String(theme.font.code.weights.medium),
+            semibold: String(theme.font.code.weights.semibold),
+            bold: String(theme.font.code.weights.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),
+              },
+            ]),
+          ),
+        },
+
+        heading: {
+          family: theme.font.heading.family,
+          featureSettings: theme.font.heading.featureSettings ?? 'normal',
+          weight: {
+            regular: String(theme.font.heading.weights.regular),
+            medium: String(theme.font.heading.weights.medium),
+            semibold: String(theme.font.heading.weights.semibold),
+            bold: String(theme.font.heading.weights.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),
+              },
+            ]),
+          ),
+        },
+
+        label: {
+          family: theme.font.label.family,
+          featureSettings: theme.font.label.featureSettings ?? 'normal',
+          weight: {
+            regular: String(theme.font.label.weights.regular),
+            medium: String(theme.font.label.weights.medium),
+            semibold: String(theme.font.label.weights.semibold),
+            bold: String(theme.font.label.weights.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),
+              },
+            ]),
+          ),
+        },
+
+        text: {
+          family: theme.font.text.family,
+          featureSettings: theme.font.text.featureSettings ?? 'normal',
+          weight: {
+            regular: String(theme.font.text.weights.regular),
+            medium: String(theme.font.text.weights.medium),
+            semibold: String(theme.font.text.weights.semibold),
+            bold: String(theme.font.text.weights.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),
+              },
+            ]),
+          ),
+        },
+
+        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 cardOptions = {defaultHue: card._hue}
+    const i = scheme === 'dark' ? 1 : 0
+
+    const defaultElement = buildElementContract({
+      card,
+      variant: 'tinted',
+      tone: 'default',
+      scheme,
+    })
+
+    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: defaultElement.bg[0],
+                  }),
+            ]),
+          ),
+        ]),
+      ),
+    } 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(' ')
+}