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

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -4,43 +4,80 @@ import {
   THEME_COLOR_INPUT_STATES,
   THEME_COLOR_STATE_TONES,
   THEME_COLOR_STATES,
-  ThemeColorBadge_v2,
-  ThemeColorButton_v2,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorInput_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  ThemeColorSelectable_v2,
-  ThemeColorSelectableTone_v2,
-  ThemeColorState_v2,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
+  type ThemeColorBadge_v2,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorInput_v2,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputState_v2,
+  type ThemeColorSelectable_v2,
+  type ThemeColorSelectableTone_v2,
+  type ThemeColorState_v2,
+  type ThemeColorStateKey,
+  type ThemeColorStateToneKey,
 } from '../v2'
-import {ThemeColorCard_v3, ThemeColorElement, ThemeColorVariantKey} from '../v3'
+import {
+  _parseColorToken,
+  type ColorToken,
+  type ColorValue,
+  type Hue,
+  type ThemeColorCard_v3,
+  type ThemeColorElement,
+  type ThemeColorVariantKey,
+  type ThemePalette_v3,
+} from '../v3'
+
+function renderColor(colorToken: ColorToken, options: {defaultHue: Hue; palette: ThemePalette_v3}) {
+  const {defaultHue, palette} = options
+
+  const color = _parseColorToken(colorToken, {defaultHue})
+
+  if (color.type === 'color') {
+    return palette[color.name].hex
+  }
+
+  if (color.type === 'tint') {
+    return palette.hues[color.hue][color.tint].hex
+  }
+
+  return '#000'
+}
 
 export function themeColor_v3_v2(options: {
   color: ThemeColorCard_v3
   dark: boolean
+  palette: ThemePalette_v3
 }): ThemeColorCard_v2 {
-  const {color, dark} = options
+  const {color, dark, palette} = options
+
+  const i = dark ? 1 : 0
+
+  const defaultHue = color._hue
+
+  const colorOptions = {defaultHue, palette}
 
   return {
     _blend: 'screen',
     _dark: dark,
     ...buildColorState({
       cardColor: color,
+      dark,
+      palette,
       state: 'enabled',
       tone: 'default',
       variant: 'tinted',
     }),
-    backdrop: color.backdrop,
+
+    backdrop: renderColor(color.backdrop[i], colorOptions),
     button: THEME_COLOR_BUTTON_MODES.reduce<ThemeColorButton_v2>((modes, mode) => {
       modes[mode] = THEME_COLOR_STATE_TONES.reduce<ThemeColorButtonMode_v2>((tones, tone) => {
         tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorButtonTone_v2>((states, state) => {
           states[state] = buildColorState({
             cardColor: color,
+            dark,
+            palette,
             state,
             tone,
             variant: mode === 'default' ? 'solid' : 'tinted',
@@ -58,10 +95,15 @@ export function themeColor_v3_v2(options: {
 
       return modes
     }, {} as ThemeColorButton_v2),
-    focusRing: color.focusRing,
+
+    focusRing: renderColor(color.focusRing[i], colorOptions),
     input: THEME_COLOR_INPUT_MODES.reduce<ThemeColorInput_v2>((modes, mode) => {
       modes[mode] = THEME_COLOR_INPUT_STATES.reduce<ThemeColorInputMode_v2>((states, state) => {
-        states[state] = buildInputState(color.variant.tinted.default)
+        states[state] = buildInputState(color.variant.tinted.default, {
+          dark,
+          defaultHue,
+          palette,
+        })
 
         return states
       }, {} as ThemeColorInputMode_v2)
@@ -72,7 +114,8 @@ export function themeColor_v3_v2(options: {
       tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorSelectableTone_v2>((states, state) => {
         states[state] = buildColorState({
           cardColor: color,
-          // cardVars: vars,
+          dark,
+          palette,
           state,
           tone,
           variant: 'tinted',
@@ -83,8 +126,52 @@ export function themeColor_v3_v2(options: {
 
       return tones
     }, {} as ThemeColorSelectable_v2),
-    shadow: color.shadow,
-    syntax: color.code.token,
+
+    shadow: {
+      outline: renderColor(color.shadow.outline[i], colorOptions),
+      umbra: renderColor(color.shadow.umbra[i], colorOptions),
+      penumbra: renderColor(color.shadow.penumbra[i], colorOptions),
+      ambient: renderColor(color.shadow.ambient[i], colorOptions),
+    },
+
+    syntax: {
+      atrule: renderColor(color.code.token.atrule[i], colorOptions),
+      attrName: renderColor(color.code.token.attrName[i], colorOptions),
+      attrValue: renderColor(color.code.token.attrValue[i], colorOptions),
+      attribute: renderColor(color.code.token.attribute[i], colorOptions),
+      boolean: renderColor(color.code.token.boolean[i], colorOptions),
+      builtin: renderColor(color.code.token.builtin[i], colorOptions),
+      cdata: renderColor(color.code.token.cdata[i], colorOptions),
+      char: renderColor(color.code.token.char[i], colorOptions),
+      class: renderColor(color.code.token.class[i], colorOptions),
+      className: renderColor(color.code.token.className[i], colorOptions),
+      comment: renderColor(color.code.token.comment[i], colorOptions),
+      constant: renderColor(color.code.token.constant[i], colorOptions),
+      deleted: renderColor(color.code.token.deleted[i], colorOptions),
+      doctype: renderColor(color.code.token.doctype[i], colorOptions),
+      entity: renderColor(color.code.token.entity[i], colorOptions),
+      function: renderColor(color.code.token.function[i], colorOptions),
+      hexcode: renderColor(color.code.token.hexcode[i], colorOptions),
+      id: renderColor(color.code.token.id[i], colorOptions),
+      important: renderColor(color.code.token.important[i], colorOptions),
+      inserted: renderColor(color.code.token.inserted[i], colorOptions),
+      keyword: renderColor(color.code.token.keyword[i], colorOptions),
+      number: renderColor(color.code.token.number[i], colorOptions),
+      operator: renderColor(color.code.token.operator[i], colorOptions),
+      prolog: renderColor(color.code.token.prolog[i], colorOptions),
+      property: renderColor(color.code.token.property[i], colorOptions),
+      pseudoClass: renderColor(color.code.token.pseudoClass[i], colorOptions),
+      pseudoElement: renderColor(color.code.token.pseudoElement[i], colorOptions),
+      punctuation: renderColor(color.code.token.punctuation[i], colorOptions),
+      regex: renderColor(color.code.token.regex[i], colorOptions),
+      selector: renderColor(color.code.token.selector[i], colorOptions),
+      string: renderColor(color.code.token.string[i], colorOptions),
+      symbol: renderColor(color.code.token.symbol[i], colorOptions),
+      tag: renderColor(color.code.token.tag[i], colorOptions),
+      unit: renderColor(color.code.token.unit[i], colorOptions),
+      url: renderColor(color.code.token.url[i], colorOptions),
+      variable: renderColor(color.code.token.variable[i], colorOptions),
+    },
   }
 }
 
@@ -127,80 +214,170 @@ const stateShades: Record<
 
 function mix(
   tokens: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   },
   index: ElementTokenIndex,
+  options: {
+    dark: boolean
+    defaultHue: Hue
+    palette: ThemePalette_v3
+  },
 ) {
+  const {dark, defaultHue, palette} = options
+  const colorOptions = {defaultHue, palette}
+  const i = dark ? 1 : 0
+
+  const from = renderColor(tokens[0][i], colorOptions)
+  const to = renderColor(tokens[4][i], colorOptions)
+
   if (index === 0) {
-    return tokens[0]
+    return from
   }
 
   if (index === 4) {
-    return tokens[4]
+    return to
   }
 
-  return `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`
+  return `color-mix(in oklch, ${from}, ${to} ${index * 25}%)`
 }
 
 function buildColorState(options: {
   cardColor: ThemeColorCard_v3
+  dark: boolean
+  palette: ThemePalette_v3
   state: ThemeColorStateKey
   tone: ThemeColorStateToneKey
   variant: ThemeColorVariantKey
 }): ThemeColorState_v2 {
-  const {cardColor, state, tone, variant} = options
+  const {cardColor, dark, palette, state, tone, variant} = options
   const color = cardColor.variant[variant][tone]
 
   const shades = stateShades[state]
 
+  const defaultHue = cardColor._hue
+  const colorOptions = {defaultHue, palette}
+
+  const i = dark ? 1 : 0
+
+  // cardColor.avatar.blue.bg
+
   return {
     accent: {
-      fg: color.fg[4],
+      fg: renderColor(color.fg[4][i], colorOptions),
     },
-    avatar: cardColor.avatar,
+
+    avatar: {
+      gray: {
+        bg: renderColor(cardColor.avatar.gray.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.gray.fg[i], colorOptions),
+      },
+      blue: {
+        bg: renderColor(cardColor.avatar.blue.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.blue.fg[i], colorOptions),
+      },
+      purple: {
+        bg: renderColor(cardColor.avatar.purple.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.purple.fg[i], colorOptions),
+      },
+      magenta: {
+        bg: renderColor(cardColor.avatar.magenta.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.magenta.fg[i], colorOptions),
+      },
+      red: {
+        bg: renderColor(cardColor.avatar.red.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.red.fg[i], colorOptions),
+      },
+      orange: {
+        bg: renderColor(cardColor.avatar.orange.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.orange.fg[i], colorOptions),
+      },
+      yellow: {
+        bg: renderColor(cardColor.avatar.yellow.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.yellow.fg[i], colorOptions),
+      },
+      green: {
+        bg: renderColor(cardColor.avatar.green.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.green.fg[i], colorOptions),
+      },
+      cyan: {
+        bg: renderColor(cardColor.avatar.cyan.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.cyan.fg[i], colorOptions),
+      },
+    },
+
+    // avatar: cardColor.avatar,
     badge: THEME_COLOR_STATE_TONES.reduce<ThemeColorBadge_v2>((tones, tone) => {
       tones[tone] = {
-        bg: mix(color.bg, 1),
-        fg: mix(color.fg, 1),
-        dot: mix(color.fg, 3),
-        icon: mix(color.fg, 3),
+        bg: mix(color.bg, 1, {dark, defaultHue, palette}),
+
+        fg: mix(color.fg, 1, {dark, defaultHue, palette}),
+
+        dot: mix(color.fg, 3, {dark, defaultHue, palette}),
+
+        icon: mix(color.fg, 3, {dark, defaultHue, palette}),
       }
 
       return tones
     }, {} as ThemeColorBadge_v2),
-    bg: mix(color.bg, shades.bg[0]),
-    border: mix(color.border, shades.border[0]),
-    fg: mix(color.fg, shades.fg[0]),
+
+    bg: mix(color.bg, shades.bg[0], {dark, defaultHue, palette}),
+
+    border: mix(color.border, shades.border[0], {dark, defaultHue, palette}),
+
+    fg: mix(color.fg, shades.fg[0], {dark, defaultHue, palette}),
     code: {
-      bg: mix(color.bg, shades.bg[1]),
-      fg: mix(color.fg, shades.fg[2]),
+      bg: mix(color.bg, shades.bg[1], {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     },
-    icon: mix(color.fg, shades.fg[2]),
+
+    icon: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     kbd: {
-      bg: mix(color.bg, 0),
-      fg: mix(color.fg, 0),
-      border: mix(color.bg, 0),
+      bg: mix(color.bg, 0, {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, 0, {dark, defaultHue, palette}),
+
+      border: mix(color.bg, 0, {dark, defaultHue, palette}),
     },
     link: {
-      fg: mix(color.fg, shades.fg[2]),
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     },
     muted: {
-      bg: mix(color.bg, shades.bg[1]),
-      fg: mix(color.fg, shades.fg[2]),
+      bg: mix(color.bg, shades.bg[1], {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
+    },
+
+    skeleton: {
+      from: renderColor(cardColor.skeleton.from[i], colorOptions),
+      to: renderColor(cardColor.skeleton.to[i], colorOptions),
     },
-    skeleton: cardColor.skeleton,
   }
 }
 
-function buildInputState(colorElement: ThemeColorElement): ThemeColorInputState_v2 {
+function buildInputState(
+  colorElement: ThemeColorElement,
+  options: {
+    dark: boolean
+    defaultHue: Hue
+    palette: ThemePalette_v3
+  },
+): ThemeColorInputState_v2 {
+  const {dark, defaultHue, palette} = options
+  const colorOptions = {defaultHue, palette}
+  const i = dark ? 1 : 0
+
   return {
-    bg: colorElement.bg[0],
-    border: colorElement.bg[0],
-    fg: colorElement.fg[0],
+    bg: renderColor(colorElement.bg[0][i], colorOptions),
+
+    border: renderColor(colorElement.bg[0][i], colorOptions),
+
+    fg: renderColor(colorElement.fg[0][i], colorOptions),
     muted: {
-      bg: colorElement.bg[0],
+      bg: renderColor(colorElement.bg[0][i], colorOptions),
     },
-    placeholder: colorElement.fg[0],
+
+    placeholder: renderColor(colorElement.fg[0][i], colorOptions),
   }
 }

package/src/theme/versioning/v0_v2.ts

@@ -1,6 +1,6 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
+import {defaultThemeConfig} from '../v2/defaults/config'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()

package/src/theme/versioning/v2_v0.ts

@@ -1,12 +1,12 @@
-import {RootTheme} from '../types'
-import {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
-import {
+import type {RootTheme} from '../types'
+import type {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
+import type {
   RootTheme_v2,
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
 } from '../v2'
-import {Theme_v3} from '../v3'
+import type {Theme_v3} from '../v3'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 

package/src/theme/versioning/v3_v2.ts

@@ -1,10 +1,10 @@
-// import {vars} from '@sanity/ui/css'
-
-import {RootTheme_v2} from '../v2'
-import {Theme_v3} from '../v3'
+import type {RootTheme_v2} from '../v2'
+import type {Theme_v3} from '../v3'
 import {themeColor_v3_v2} from './themeColor_v3_v2'
 
 export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
+  const palette = theme_v3.palette
+
   return {
     _version: 2,
     avatar: theme_v3.avatar,
@@ -13,86 +13,86 @@ export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
     color: {
       dark: {
         transparent: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.transparent,
+          color: theme_v3.color.transparent,
           dark: true,
-          // vars: vars.color.dark.transparent,
+          palette,
         }),
         default: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.default,
+          color: theme_v3.color.default,
           dark: true,
-          // vars: vars.color.dark.default,
+          palette,
         }),
         neutral: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.neutral,
+          color: theme_v3.color.neutral,
           dark: true,
-          // vars: vars.color.dark.neutral,
+          palette,
         }),
         primary: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.primary,
+          color: theme_v3.color.primary,
           dark: true,
-          // vars: vars.color.dark.primary,
+          palette,
         }),
         suggest: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.suggest,
+          color: theme_v3.color.suggest,
           dark: true,
-          // vars: vars.color.dark.suggest,
+          palette,
         }),
         positive: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.positive,
+          color: theme_v3.color.positive,
           dark: true,
-          // vars: vars.color.dark.positive,
+          palette,
         }),
         caution: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.caution,
+          color: theme_v3.color.caution,
           dark: true,
-          // vars: vars.color.dark.caution,
+          palette,
         }),
         critical: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.critical,
+          color: theme_v3.color.critical,
           dark: true,
-          // vars: vars.color.dark.critical,
+          palette,
         }),
       },
       light: {
         transparent: themeColor_v3_v2({
-          color: theme_v3.color.light.card.transparent,
+          color: theme_v3.color.transparent,
           dark: false,
-          // vars: vars.color.light.transparent,
+          palette,
         }),
         default: themeColor_v3_v2({
-          color: theme_v3.color.light.card.default,
+          color: theme_v3.color.default,
           dark: false,
-          // vars: vars.color.light.default,
+          palette,
         }),
         neutral: themeColor_v3_v2({
-          color: theme_v3.color.light.card.neutral,
+          color: theme_v3.color.neutral,
           dark: false,
-          // vars: vars.color.light.neutral,
+          palette,
         }),
         primary: themeColor_v3_v2({
-          color: theme_v3.color.light.card.primary,
+          color: theme_v3.color.primary,
           dark: false,
-          // vars: vars.color.light.primary,
+          palette,
         }),
         suggest: themeColor_v3_v2({
-          color: theme_v3.color.light.card.suggest,
+          color: theme_v3.color.suggest,
           dark: false,
-          // vars: vars.color.light.suggest,
+          palette,
         }),
         positive: themeColor_v3_v2({
-          color: theme_v3.color.light.card.positive,
+          color: theme_v3.color.positive,
           dark: false,
-          // vars: vars.color.light.positive,
+          palette,
         }),
         caution: themeColor_v3_v2({
-          color: theme_v3.color.light.card.caution,
+          color: theme_v3.color.caution,
           dark: false,
-          // vars: vars.color.light.caution,
+          palette,
         }),
         critical: themeColor_v3_v2({
-          color: theme_v3.color.light.card.critical,
+          color: theme_v3.color.critical,
           dark: false,
-          // vars: vars.color.light.critical,
+          palette,
         }),
       },
     },
@@ -101,8 +101,8 @@ export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
     input: theme_v3.input,
     layer: theme_v3.layer,
     media: theme_v3.media,
-    radius: theme_v3.radius,
+    radius: Object.values(theme_v3.radius),
     shadow: theme_v3.shadow,
-    space: theme_v3.space,
+    space: Object.values(theme_v3.space),
   }
 }

package/dist/ui-palette.css

@@ -1,105 +0,0 @@
-@layer s-palette {
-  :root {
-    --black: #0d0e12;
-    --white: #ffffff;
-    --gray-50: #f6f6f8;
-    --gray-100: #eeeef1;
-    --gray-200: #e3e4e8;
-    --gray-300: #bbbdc9;
-    --gray-400: #9499ad;
-    --gray-500: #727892;
-    --gray-600: #515870;
-    --gray-700: #383d51;
-    --gray-800: #252837;
-    --gray-900: #1b1d27;
-    --gray-950: #13141b;
-    --blue-50: #f5f8ff;
-    --blue-100: #e5edff;
-    --blue-200: #dbe5ff;
-    --blue-300: #a8bfff;
-    --blue-400: #7595ff;
-    --blue-500: #556bfc;
-    --blue-600: #4043e7;
-    --blue-700: #2927aa;
-    --blue-800: #192457;
-    --blue-900: #161a41;
-    --blue-950: #101228;
-    --purple-50: #f8f5ff;
-    --purple-100: #f1ebff;
-    --purple-200: #ece1fe;
-    --purple-300: #ccb1fc;
-    --purple-400: #b087f7;
-    --purple-500: #8f57ef;
-    --purple-600: #721fe5;
-    --purple-700: #4c1a9e;
-    --purple-800: #2f1862;
-    --purple-900: #23173f;
-    --purple-950: #181128;
-    --magenta-50: #fef6f9;
-    --magenta-100: #fde8ef;
-    --magenta-200: #fcdee9;
-    --magenta-300: #f7abc5;
-    --magenta-400: #f0709b;
-    --magenta-500: #e72767;
-    --magenta-600: #b11651;
-    --magenta-700: #7c1342;
-    --magenta-800: #4b1130;
-    --magenta-900: #341325;
-    --magenta-950: #1f0f14;
-    --red-50: #fff6f5;
-    --red-100: #ffe7e5;
-    --red-200: #ffdedc;
-    --red-300: #fdada5;
-    --red-400: #f77769;
-    --red-500: #ef4434;
-    --red-600: #cc2819;
-    --red-700: #8b2018;
-    --red-800: #4d1714;
-    --red-900: #321615;
-    --red-950: #1e1011;
-    --orange-50: #fff7f0;
-    --orange-100: #ffeadb;
-    --orange-200: #ffddc7;
-    --orange-300: #ffb685;
-    --orange-400: #ff8e42;
-    --orange-500: #fa6400;
-    --orange-600: #b14802;
-    --orange-700: #7c3404;
-    --orange-800: #461e07;
-    --orange-900: #32160b;
-    --orange-950: #21120d;
-    --yellow-50: #fefae1;
-    --yellow-100: #fcf3bb;
-    --yellow-200: #f9e994;
-    --yellow-300: #f7d455;
-    --yellow-400: #f9bc15;
-    --yellow-500: #d28a04;
-    --yellow-600: #965908;
-    --yellow-700: #653a0b;
-    --yellow-800: #3b220c;
-    --yellow-900: #271a11;
-    --yellow-950: #181410;
-    --green-50: #e7fef5;
-    --green-100: #c5fce8;
-    --green-200: #a9f9dc;
-    --green-300: #59f3ba;
-    --green-400: #0ff0a1;
-    --green-500: #04b97a;
-    --green-600: #01794f;
-    --green-700: #015133;
-    --green-800: #023120;
-    --green-900: #06231a;
-    --green-950: #071715;
-    --cyan-50: #e7fefe;
-    --cyan-100: #c5fcfc;
-    --cyan-200: #96f8f8;
-    --cyan-300: #62efef;
-    --cyan-400: #18e2e2;
-    --cyan-500: #04b8be;
-    --cyan-600: #037782;
-    --cyan-700: #024950;
-    --cyan-800: #042f34;
-    --cyan-900: #072227;
-    --cyan-950: #0d181c;
-  }
-}

package/dist/ui-palette.min.css

@@ -1 +0,0 @@
-@layer s-palette{:root{--black:#0d0e12;--white:#fff;--gray-50:#f6f6f8;--gray-100:#eeeef1;--gray-200:#e3e4e8;--gray-300:#bbbdc9;--gray-400:#9499ad;--gray-500:#727892;--gray-600:#515870;--gray-700:#383d51;--gray-800:#252837;--gray-900:#1b1d27;--gray-950:#13141b;--blue-50:#f5f8ff;--blue-100:#e5edff;--blue-200:#dbe5ff;--blue-300:#a8bfff;--blue-400:#7595ff;--blue-500:#556bfc;--blue-600:#4043e7;--blue-700:#2927aa;--blue-800:#192457;--blue-900:#161a41;--blue-950:#101228;--purple-50:#f8f5ff;--purple-100:#f1ebff;--purple-200:#ece1fe;--purple-300:#ccb1fc;--purple-400:#b087f7;--purple-500:#8f57ef;--purple-600:#721fe5;--purple-700:#4c1a9e;--purple-800:#2f1862;--purple-900:#23173f;--purple-950:#181128;--magenta-50:#fef6f9;--magenta-100:#fde8ef;--magenta-200:#fcdee9;--magenta-300:#f7abc5;--magenta-400:#f0709b;--magenta-500:#e72767;--magenta-600:#b11651;--magenta-700:#7c1342;--magenta-800:#4b1130;--magenta-900:#341325;--magenta-950:#1f0f14;--red-50:#fff6f5;--red-100:#ffe7e5;--red-200:#ffdedc;--red-300:#fdada5;--red-400:#f77769;--red-500:#ef4434;--red-600:#cc2819;--red-700:#8b2018;--red-800:#4d1714;--red-900:#321615;--red-950:#1e1011;--orange-50:#fff7f0;--orange-100:#ffeadb;--orange-200:#ffddc7;--orange-300:#ffb685;--orange-400:#ff8e42;--orange-500:#fa6400;--orange-600:#b14802;--orange-700:#7c3404;--orange-800:#461e07;--orange-900:#32160b;--orange-950:#21120d;--yellow-50:#fefae1;--yellow-100:#fcf3bb;--yellow-200:#f9e994;--yellow-300:#f7d455;--yellow-400:#f9bc15;--yellow-500:#d28a04;--yellow-600:#965908;--yellow-700:#653a0b;--yellow-800:#3b220c;--yellow-900:#271a11;--yellow-950:#181410;--green-50:#e7fef5;--green-100:#c5fce8;--green-200:#a9f9dc;--green-300:#59f3ba;--green-400:#0ff0a1;--green-500:#04b97a;--green-600:#01794f;--green-700:#015133;--green-800:#023120;--green-900:#06231a;--green-950:#071715;--cyan-50:#e7fefe;--cyan-100:#c5fcfc;--cyan-200:#96f8f8;--cyan-300:#62efef;--cyan-400:#18e2e2;--cyan-500:#04b8be;--cyan-600:#037782;--cyan-700:#024950;--cyan-800:#042f34;--cyan-900:#072227;--cyan-950:#0d181c}}

package/src/css/_comp.test.ts

@@ -1,7 +0,0 @@
-import {_comp} from './_comp'
-
-it('should compose class names', () => {
-  const result = _comp('foo', 'bar baz', undefined, false)
-
-  expect(result).toBe('s-foo s-bar s-baz')
-})

package/src/css/_comp.ts

@@ -1,11 +0,0 @@
-import {_getClassNames} from './composeClassNames'
-import {scopeClassName} from './scopeClassName'
-
-export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
-  return (
-    _getClassNames(...classNames)
-      .filter(Boolean)
-      .map(scopeClassName)
-      .join(' ') || undefined
-  )
-}