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

package/src/css/__theme/resolveTheme.ts

@@ -0,0 +1,865 @@
+// 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(' ')
+// }
+
+export {}