@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/css/compile/compileRule.ts

@@ -1,97 +0,0 @@
-import {PREFIX} from '../constants'
-import {type Properties} from '../types'
-import {CompileRulesContext} from './types'
-
-// TODO: remove this
-export function compileRule(
-  selector: string,
-  props: Properties,
-  context: CompileRulesContext,
-): string {
-  let css = compileProperties(selector, props)
-
-  if (props['@nest']) {
-    css += compileNestedRules(selector, props['@nest'], context)
-  }
-
-  // @ts-expect-error - TODO: fix this
-  if (props['@keyframes']) {
-    // @ts-expect-error - TODO: fix this
-    for (const name in props['@keyframes']) {
-      // @ts-expect-error - TODO: fix this
-      context.keyframes[name] = props['@keyframes'][name]
-    }
-  }
-
-  if (props['@media']) {
-    for (const key in props['@media']) {
-      if (!context.media[key]) {
-        context.media[key] = {}
-      }
-
-      context.media[key][selector] = props['@media'][key]
-    }
-  }
-
-  return css
-}
-
-function compileProperties(selector: string, props: Properties) {
-  let css = '{'
-
-  for (const key in props) {
-    if (key === '@keyframes') continue // ignore
-    if (key === '@media') continue // ignore
-    if (key === '@nest') continue // ignore
-
-    const value = (props as Record<string, string>)[key]
-
-    const valueArr = Array.isArray(value) ? value : [value]
-
-    for (const v of valueArr) {
-      css += toSnakeCase(key) + ':' + v + ';'
-    }
-  }
-
-  if (css === '{') return ''
-
-  return selector + css + '}'
-}
-
-function compileNestedRules(
-  selector: string,
-  props: Record<string, Properties>,
-  context: CompileRulesContext,
-) {
-  if (!props) return ''
-
-  let css = ''
-
-  for (const [_selector, _props] of Object.entries(props)) {
-    css +=
-      '\n' +
-      compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context)
-  }
-
-  return css
-}
-
-export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
-  let css = `@media ${query}{`
-
-  for (const [selector, props] of Object.entries(rules)) {
-    // console.log('compileMediaQueryRule', {selector, props})
-
-    css += '\n  ' + compileProperties(selector, props)
-
-    if (props['@nest']) {
-      css += compileNestedRules(selector, props['@nest'], {keyframes: {}, media: {}})
-    }
-  }
-
-  return css + '\n}'
-}
-
-function toSnakeCase(value: string) {
-  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
-}

package/src/css/compile/compileRules.test.ts

@@ -1,36 +0,0 @@
-import {responsiveRules} from '../responsiveRules'
-import {Rules} from '../types'
-import {compileRules} from './compileRules'
-
-it('should compile deeply nested rules', () => {
-  const rules: Rules = {
-    card: {
-      '@nest': {
-        '&:is(a)': {
-          // @ts-expect-error - TODO: fix this
-          '@media': {
-            '(hover: hover)': {
-              background: 'red',
-            },
-          },
-        },
-      },
-    },
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})
-
-it.only('should compile responsive rules', () => {
-  const rules = responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})

package/src/css/compile/compileRules.ts

@@ -1,43 +0,0 @@
-import {scopeClassName} from '../scopeClassName'
-import {type Rules} from '../types'
-import {compileMediaQueryRule, compileRule} from './compileRule'
-import {CompileRulesContext} from './types'
-
-/** @public */
-export function compileRules(rules: Rules): string {
-  let css = ''
-
-  const context: CompileRulesContext = {
-    keyframes: {},
-    media: {},
-  }
-
-  for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(
-      `.${scopeClassName(className)}`.replace(/:/g, '\\:'),
-      props,
-      context,
-    )
-
-    css += ruleCss ? `${ruleCss}\n` : ''
-  }
-
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {\n`
-
-    for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key}`
-      keyframesCss += compileRule('', props, context).replace(/\n/g, '\n    ') + '\n'
-    }
-
-    keyframesCss += `\n}\n`
-
-    css += keyframesCss
-  }
-
-  for (const [query, queryRules] of Object.entries(context.media)) {
-    css += compileMediaQueryRule(query, queryRules) + '\n'
-  }
-
-  return css.replace(/\n{2,}/g, '\n').trimStart()
-}

package/src/css/compile/compileSystem.ts

@@ -1,10 +0,0 @@
-// import {rules} from '../rules'
-import {systemStyle} from '../system.style'
-import {compileStyle} from './compileStyle'
-// import {compileRules} from './compileRules'
-
-/** @public */
-export function compileSystem(): string {
-  // return compileRules(rules)
-  return compileStyle(systemStyle)
-}

package/src/css/compile/compileTheme_v3.ts

@@ -1,401 +0,0 @@
-import {
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  HUES,
-  renderColor,
-  RenderColorContext,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  type Theme_v3,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-} from '@sanity/ui/theme'
-
-import {Properties} from '../types'
-import {px, rem, toBoxShadow} from '../util'
-import {compileRule} from './compileRule'
-
-export function compileTheme_v3(theme: Theme_v3): string {
-  return compileRule(':root', compileThemeProperties(theme), {keyframes: {}, media: {}})
-}
-
-function compileThemeProperties(theme: Theme_v3): Properties {
-  return {
-    ...buildAvatarThemeProperties(theme),
-    ...buildButtonThemeProperties(theme),
-    ...buildContainerThemeProperties(theme),
-    ...buildFontCodeThemeProperties(theme),
-    ...buildFontHeadingThemeProperties(theme),
-    ...buildFontLabelThemeProperties(theme),
-    ...buildFontTextThemeProperties(theme),
-    ...buildInputThemeProperties(theme),
-    ...buildRadiusThemeProperties(theme),
-    ...buildShadowThemeProperties(theme),
-    ...buildSpaceThemeProperties(theme),
-    ...buildColorThemeProperties(theme),
-  }
-}
-
-function buildAvatarThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--avatar-focus-ring-offset`]: px(theme.avatar.focusRing.offset),
-    [`--avatar-focus-ring-width`]: px(theme.avatar.focusRing.width),
-    [`--avatar-0-distance`]: px(theme.avatar.sizes[0].distance),
-    [`--avatar-0-size`]: px(theme.avatar.sizes[0].size),
-    [`--avatar-1-distance`]: px(theme.avatar.sizes[1].distance),
-    [`--avatar-1-size`]: px(theme.avatar.sizes[1].size),
-    [`--avatar-2-distance`]: px(theme.avatar.sizes[2].distance),
-    [`--avatar-2-size`]: px(theme.avatar.sizes[2].size),
-    [`--avatar-3-distance`]: px(theme.avatar.sizes[3].distance),
-    [`--avatar-3-size`]: px(theme.avatar.sizes[3].size),
-  }
-}
-
-function buildButtonThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--button-border-width`]: px(theme.button.border.width),
-    [`--button-focus-ring-offset`]: px(theme.button.focusRing.offset),
-    [`--button-focus-ring-width`]: px(theme.button.focusRing.width),
-    // [`--button-text-weight`]: theme.button.textWeight,
-  }
-}
-
-function buildContainerThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--container-0`]: px(theme.container[0]),
-    [`--container-1`]: px(theme.container[1]),
-    [`--container-2`]: px(theme.container[2]),
-    [`--container-3`]: px(theme.container[3]),
-    [`--container-4`]: px(theme.container[4]),
-    [`--container-5`]: px(theme.container[5]),
-  }
-}
-
-function buildFontCodeThemeProperties(theme: Theme_v3): Properties {
-  const props: Properties = {
-    '--font-code-family': theme.font.code.family,
-    '--font-code-feature-settings': theme.font.code.featureSettings,
-    '--font-code-weight-regular': `${theme.font.code.weights.regular}`,
-    '--font-code-weight-medium': `${theme.font.code.weights.medium}`,
-    '--font-code-weight-semibold': `${theme.font.code.weights.semibold}`,
-    '--font-code-weight-bold': `${theme.font.code.weights.bold}`,
-  }
-
-  for (const size of FONT_CODE_SIZE) {
-    props[`--font-code-${size}-size`] = rem(theme.font.code.sizes[size].fontSize)
-    props[`--font-code-${size}-line-height`] = rem(theme.font.code.sizes[size].lineHeight)
-    props[`--font-code-${size}-ascender-height`] = px(theme.font.code.sizes[size].ascenderHeight)
-    props[`--font-code-${size}-descender-height`] = px(theme.font.code.sizes[size].descenderHeight)
-    // props[`--font-code-${size}-cap-height`] =
-    //   `calc(var(--font-code-${size}-line-height) - var(--font-code-${size}-ascender-height) - var(--font-code-${size}-descender-height))`
-    props[`--font-code-${size}-letter-spacing`] = px(theme.font.code.sizes[size].letterSpacing)
-    props[`--font-code-${size}-icon-size`] = px(theme.font.code.sizes[size].iconSize)
-  }
-
-  return props
-}
-
-function buildFontHeadingThemeProperties(theme: Theme_v3): Properties {
-  const props: Properties = {
-    '--font-heading-family': theme.font.heading.family,
-    '--font-heading-feature-settings': theme.font.heading.featureSettings,
-    '--font-heading-weight-regular': `${theme.font.heading.weights.regular}`,
-    '--font-heading-weight-medium': `${theme.font.heading.weights.medium}`,
-    '--font-heading-weight-semibold': `${theme.font.heading.weights.semibold}`,
-    '--font-heading-weight-bold': `${theme.font.heading.weights.bold}`,
-  }
-
-  for (const size of FONT_HEADING_SIZE) {
-    props[`--font-heading-${size}-size`] = rem(theme.font.heading.sizes[size].fontSize)
-    props[`--font-heading-${size}-line-height`] = rem(theme.font.heading.sizes[size].lineHeight)
-    props[`--font-heading-${size}-ascender-height`] = px(
-      theme.font.heading.sizes[size].ascenderHeight,
-    )
-    props[`--font-heading-${size}-descender-height`] = px(
-      theme.font.heading.sizes[size].descenderHeight,
-    )
-    props[`--font-heading-${size}-letter-spacing`] = px(
-      theme.font.heading.sizes[size].letterSpacing,
-    )
-    // props[`--font-heading-${size}-cap-height`] =
-    //   `calc(var(--font-heading-${size}-line-height) - var(--font-heading-${size}-ascender-height) - var(--font-heading-${size}-descender-height))`
-    props[`--font-heading-${size}-icon-size`] = px(theme.font.heading.sizes[size].iconSize)
-  }
-
-  return props
-}
-
-function buildFontLabelThemeProperties(theme: Theme_v3): Properties {
-  const props: Properties = {
-    '--font-label-family': theme.font.label.family,
-    '--font-label-feature-settings': theme.font.label.featureSettings,
-    '--font-label-weight-regular': `${theme.font.label.weights.regular}`,
-    '--font-label-weight-medium': `${theme.font.label.weights.medium}`,
-    '--font-label-weight-semibold': `${theme.font.label.weights.semibold}`,
-    '--font-label-weight-bold': `${theme.font.label.weights.bold}`,
-  }
-
-  for (const size of FONT_LABEL_SIZE) {
-    props[`--font-label-${size}-size`] = rem(theme.font.label.sizes[size].fontSize)
-    props[`--font-label-${size}-line-height`] = rem(theme.font.label.sizes[size].lineHeight)
-    props[`--font-label-${size}-ascender-height`] = px(theme.font.label.sizes[size].ascenderHeight)
-    props[`--font-label-${size}-descender-height`] = px(
-      theme.font.label.sizes[size].descenderHeight,
-    )
-    // props[`--font-label-${size}-cap-height`] =
-    //   `calc(var(--font-label-${size}-line-height) - var(--font-label-${size}-ascender-height) - var(--font-label-${size}-descender-height))`
-    props[`--font-label-${size}-letter-spacing`] = px(theme.font.label.sizes[size].letterSpacing)
-    props[`--font-label-${size}-icon-size`] = px(theme.font.label.sizes[size].iconSize)
-  }
-
-  return props
-}
-
-function buildFontTextThemeProperties(theme: Theme_v3): Properties {
-  const props: Properties = {
-    '--font-text-family': theme.font.text.family,
-    '--font-text-feature-settings': theme.font.text.featureSettings,
-    '--font-text-weight-regular': `${theme.font.text.weights.regular}`,
-    '--font-text-weight-medium': `${theme.font.text.weights.medium}`,
-    '--font-text-weight-semibold': `${theme.font.text.weights.semibold}`,
-    '--font-text-weight-bold': `${theme.font.text.weights.bold}`,
-  }
-
-  for (const size of FONT_TEXT_SIZE) {
-    props[`--font-text-${size}-size`] = rem(theme.font.text.sizes[size].fontSize)
-    props[`--font-text-${size}-line-height`] = rem(theme.font.text.sizes[size].lineHeight)
-    props[`--font-text-${size}-ascender-height`] = px(theme.font.text.sizes[size].ascenderHeight)
-    props[`--font-text-${size}-descender-height`] = px(theme.font.text.sizes[size].descenderHeight)
-    // props[`--font-text-${size}-cap-height`] =
-    //   `calc(var(--font-text-${size}-line-height) - var(--font-text-${size}-ascender-height) - var(--font-text-${size}-descender-height))`
-    props[`--font-text-${size}-letter-spacing`] = px(theme.font.text.sizes[size].letterSpacing)
-    props[`--font-text-${size}-icon-size`] = px(theme.font.text.sizes[size].iconSize)
-  }
-
-  return props
-}
-
-function buildInputThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--input-border-width`]: px(theme.input.border.width),
-    [`--input-checkbox-focus-ring-offset`]: px(theme.input.checkbox.focusRing.offset),
-    [`--input-checkbox-focus-ring-width`]: px(theme.input.checkbox.focusRing.width),
-    [`--input-checkbox-size`]: px(theme.input.checkbox.size),
-    [`--input-radio-focus-ring-offset`]: px(theme.input.radio.focusRing.offset),
-    [`--input-radio-focus-ring-width`]: px(theme.input.radio.focusRing.width),
-    [`--input-radio-mark-size`]: px(theme.input.radio.markSize),
-    [`--input-radio-size`]: px(theme.input.radio.size),
-    [`--input-select-focus-ring-offset`]: px(theme.input.select.focusRing.offset),
-    [`--input-select-focus-ring-width`]: px(theme.input.select.focusRing.width),
-    [`--input-switch-focus-ring-offset`]: px(theme.input.switch.focusRing.offset),
-    [`--input-switch-focus-ring-width`]: px(theme.input.switch.focusRing.width),
-    [`--input-switch-height`]: px(theme.input.switch.height),
-    [`--input-switch-padding`]: px(theme.input.switch.padding),
-    [`--input-switch-transition-duration-ms`]: `${theme.input.switch.transitionDurationMs}ms`,
-    [`--input-switch-transition-timing-function`]: theme.input.switch.transitionTimingFunction,
-    [`--input-switch-width`]: px(theme.input.switch.width),
-    [`--input-text-focus-ring-offset`]: px(theme.input.text.focusRing.offset),
-    [`--input-text-focus-ring-width`]: px(theme.input.text.focusRing.width),
-  }
-}
-
-function buildRadiusThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--radius-0`]: rem(theme.radius[0]),
-    [`--radius-1`]: rem(theme.radius[1]),
-    [`--radius-2`]: rem(theme.radius[2]),
-    [`--radius-3`]: rem(theme.radius[3]),
-    [`--radius-4`]: rem(theme.radius[4]),
-    [`--radius-5`]: rem(theme.radius[5]),
-    [`--radius-6`]: rem(theme.radius[6]),
-  }
-}
-
-function buildShadowThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--shadow-outline`]: `0 0 0 ${theme.card.shadow.outline}px`,
-    [`--shadow-0-umbra`]: toBoxShadow(theme.shadow[0]?.umbra),
-    [`--shadow-0-penumbra`]: toBoxShadow(theme.shadow[0]?.penumbra),
-    [`--shadow-0-ambient`]: toBoxShadow(theme.shadow[0]?.ambient),
-    [`--shadow-1-umbra`]: toBoxShadow(theme.shadow[1]?.umbra),
-    [`--shadow-1-penumbra`]: toBoxShadow(theme.shadow[1]?.penumbra),
-    [`--shadow-1-ambient`]: toBoxShadow(theme.shadow[1]?.ambient),
-    [`--shadow-2-umbra`]: toBoxShadow(theme.shadow[2]?.umbra),
-    [`--shadow-2-penumbra`]: toBoxShadow(theme.shadow[2]?.penumbra),
-    [`--shadow-2-ambient`]: toBoxShadow(theme.shadow[2]?.ambient),
-    [`--shadow-3-umbra`]: toBoxShadow(theme.shadow[3]?.umbra),
-    [`--shadow-3-penumbra`]: toBoxShadow(theme.shadow[3]?.penumbra),
-    [`--shadow-3-ambient`]: toBoxShadow(theme.shadow[3]?.ambient),
-    [`--shadow-4-umbra`]: toBoxShadow(theme.shadow[4]?.umbra),
-    [`--shadow-4-penumbra`]: toBoxShadow(theme.shadow[4]?.penumbra),
-    [`--shadow-4-ambient`]: toBoxShadow(theme.shadow[4]?.ambient),
-    [`--shadow-5-umbra`]: toBoxShadow(theme.shadow[5]?.umbra),
-    [`--shadow-5-penumbra`]: toBoxShadow(theme.shadow[5]?.penumbra),
-    [`--shadow-5-ambient`]: toBoxShadow(theme.shadow[5]?.ambient),
-  }
-}
-
-function buildSpaceThemeProperties(theme: Theme_v3): Properties {
-  return {
-    [`--space-0`]: rem(theme.space[0]),
-    [`--space-0_5`]: rem(theme.space[1] / 2),
-    [`--space-1`]: rem(theme.space[1]),
-    [`--space-2`]: rem(theme.space[2]),
-    [`--space-3`]: rem(theme.space[3]),
-    [`--space-4`]: rem(theme.space[4]),
-    [`--space-5`]: rem(theme.space[5]),
-    [`--space-6`]: rem(theme.space[6]),
-    [`--space-7`]: rem(theme.space[7]),
-    [`--space-8`]: rem(theme.space[8]),
-    [`--space-9`]: rem(theme.space[9]),
-  }
-}
-
-const THEME_COLOR_SCHEMES = ['dark', 'light'] as const
-const THEME_COLOR_VARIANTS = ['tinted', 'solid'] as const
-
-function buildColorThemeProperties(theme: Theme_v3): Properties {
-  const props: Properties = {}
-
-  for (const scheme of THEME_COLOR_SCHEMES) {
-    for (const cardTone of THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme, {scheme, cardTone}))
-      Object.assign(props, buildColorCardThemeProperties(theme, {scheme, cardTone}))
-
-      // card variants: tinted, solid
-      for (const colorVariant of THEME_COLOR_VARIANTS) {
-        for (const elementTone of THEME_COLOR_STATE_TONES) {
-          const tokens = theme._tokens.color[cardTone].variant[colorVariant][elementTone]
-          const prefix = `--color-${scheme}-${cardTone}-${colorVariant}-${elementTone}` as const
-
-          const context: RenderColorContext = {
-            bgVar: `${prefix}-bg-0`,
-            hue: tokens._hue,
-            scheme,
-          }
-
-          Object.assign(props, {
-            [`${prefix}-bg-0`]: renderColor(tokens.bg[0], context),
-            [`${prefix}-bg-1`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 25%)`,
-            [`${prefix}-bg-2`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 50%)`,
-            [`${prefix}-bg-3`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 75%)`,
-            [`${prefix}-bg-4`]: renderColor(tokens.bg[4], context),
-
-            [`${prefix}-border-0`]: renderColor(tokens.border[0], context),
-            [`${prefix}-border-1`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 25%)`,
-            [`${prefix}-border-2`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 50%)`,
-            [`${prefix}-border-3`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 75%)`,
-            [`${prefix}-border-4`]: renderColor(tokens.border[4], context),
-
-            [`${prefix}-fg-0`]: renderColor(tokens.fg[0], context),
-            [`${prefix}-fg-1`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 25%)`,
-            [`${prefix}-fg-2`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 50%)`,
-            [`${prefix}-fg-3`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 75%)`,
-            [`${prefix}-fg-4`]: renderColor(tokens.fg[4], context),
-          } satisfies Properties)
-        }
-      }
-    }
-  }
-
-  return props as Properties
-}
-
-function buildColorAvatarThemeProperties(
-  theme: Theme_v3,
-  options: {scheme: ThemeColorSchemeKey; cardTone: ThemeColorCardToneKey},
-): Properties {
-  const {scheme, cardTone} = options
-  const tokens = theme._tokens.color[cardTone]
-  const prefix = `--color-${scheme}-${cardTone}` as const
-
-  const props: Properties = {}
-
-  for (const hue of HUES) {
-    const context: RenderColorContext = {
-      bgVar: `${prefix}-bg-0`,
-      hue: tokens.avatar[hue]._hue ?? hue,
-      scheme,
-    }
-
-    Object.assign(props, {
-      [`${prefix}-avatar-${hue}-bg`]: renderColor(tokens.avatar[hue].bg, context),
-      [`${prefix}-avatar-${hue}-fg`]: renderColor(tokens.avatar[hue].fg, context),
-    } satisfies Properties)
-  }
-
-  return props
-}
-
-function buildColorCardThemeProperties(
-  theme: Theme_v3,
-  options: {scheme: ThemeColorSchemeKey; cardTone: ThemeColorCardToneKey},
-): Properties {
-  const {scheme, cardTone} = options
-  const tokens = theme._tokens.color[cardTone]
-  const prefix = `--color-${scheme}-${cardTone}` as const
-  const context: RenderColorContext = {bgVar: `${prefix}-bg-0`, hue: tokens._hue, scheme}
-
-  const props: Properties = {
-    // backdrop
-    [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
-
-    // code
-    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
-
-    // code / token
-    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
-
-    // focus ring
-    [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
-
-    // link
-    [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
-
-    // shadow
-    [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
-    [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
-    [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
-  }
-
-  return props
-}

package/src/css/compile/types.ts

@@ -1,6 +0,0 @@
-import {Properties} from '../types'
-
-export interface CompileRulesContext {
-  keyframes: Record<string, Record<string, Properties>>
-  media: Record<string, Record<string, Properties>>
-}

package/src/css/components/breadcrumbs/rules.ts

@@ -1,25 +0,0 @@
-import {Rules} from '../../types'
-
-export const breadcrumbsRules: Rules = {
-  breadcrumbs: {
-    lineHeight: 0,
-  },
-}
-
-// import {styled} from '../../lib/styled'
-// import {Button} from '../../primitives'
-
-// export const Root = styled.ol`
-//   margin: 0;
-//   padding: 0;
-//   display: flex;
-//   list-style: none;
-//   align-items: center;
-//   white-space: nowrap;
-//   line-height: 0;
-// `
-
-// export const ExpandButton = styled(Button)`
-//   appearance: none;
-//   margin: -4px;
-// `