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

package/src/theme/v3/buildTheme_v3.test.ts

@@ -1,40 +0,0 @@
-import {buildTheme_v3} from './buildTheme_v3'
-
-it('should build theme', () => {
-  const theme = buildTheme_v3({
-    tokens: {
-      color: {
-        '*': {
-          variant: {
-            tinted: {
-              '*': {
-                bg: {
-                  0: ['50', '950'],
-                },
-                fg: {
-                  0: ['900 50%', '100 50%'],
-                },
-              },
-            },
-          },
-        },
-        'primary': {
-          _hue: 'purple',
-        },
-        'positive': {
-          _hue: 'green',
-        },
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log('default', theme.color.light.card.default)
-  // eslint-disable-next-line no-console
-  console.log('primary', theme.color.light.card.primary)
-  // eslint-disable-next-line no-console
-  console.log(
-    'primary.variant.tinted.positive',
-    theme.color.light.card.primary.variant.tinted.positive,
-  )
-})

package/src/theme/v3/color/buildColor_v3.ts

@@ -1,193 +0,0 @@
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
-} from '../../v2'
-import {CardColorTokens} from './card'
-import {
-  ThemeColor_v3,
-  ThemeColorCard_v3,
-  ThemeColorElement,
-  ThemeColorScheme_v3,
-  ThemeColorVariant,
-} from './color'
-import {ElementColorTokens} from './element'
-import {renderColor, RenderColorContext} from './renderColor'
-import {ColorTokens} from './tokens'
-
-const debug = false
-
-let nodeLen = 0
-
-/** @internal */
-export function buildColor_v3(tokens: ColorTokens): ThemeColor_v3 {
-  return {
-    dark: buildColorScheme_v3(tokens, {scheme: 'dark'}),
-    light: buildColorScheme_v3(tokens, {scheme: 'light'}),
-  }
-}
-
-function buildColorScheme_v3(
-  tokens: ColorTokens,
-  options: {scheme: ThemeColorSchemeKey},
-): ThemeColorScheme_v3 {
-  const {scheme} = options
-
-  return {
-    card: THEME_COLOR_CARD_TONES.reduce(
-      (acc, tone) => {
-        acc[tone] = buildColorCard_v3(tokens[tone], {cardTone: tone, scheme})
-
-        return acc
-      },
-      {} as Record<ThemeColorCardToneKey, ThemeColorCard_v3>,
-    ),
-  }
-}
-
-function buildColorCard_v3(
-  tokens: CardColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    scheme: ThemeColorSchemeKey
-  },
-): ThemeColorCard_v3 {
-  const {cardTone, scheme} = options
-  const context: RenderColorContext = {bgVar: `--color-bg-1`, hue: tokens._hue, scheme}
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    avatar: THEME_COLOR_AVATAR_COLORS.reduce<ThemeColorAvatar_v2>((acc, hue) => {
-      const avatarTokens = tokens.avatar[hue]
-
-      acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-        fg: renderColor(avatarTokens.fg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-      }
-
-      return acc
-    }, {} as ThemeColorAvatar_v2),
-    backdrop: renderColor(tokens.backdrop, context),
-    focusRing: renderColor(tokens.focusRing, context),
-    shadow: {
-      outline: renderColor(tokens.shadow.outline, context),
-      umbra: renderColor(tokens.shadow.umbra, context),
-      penumbra: renderColor(tokens.shadow.penumbra, context),
-      ambient: renderColor(tokens.shadow.ambient, context),
-    },
-    skeleton: {
-      from: renderColor(tokens.skeleton.from, context),
-      to: renderColor(tokens.skeleton.to, context),
-    },
-    token: {
-      atrule: renderColor(tokens.token.atrule, context),
-      attrName: renderColor(tokens.token.attrName, context),
-      attrValue: renderColor(tokens.token.attrValue, context),
-      attribute: renderColor(tokens.token.attribute, context),
-      boolean: renderColor(tokens.token.boolean, context),
-      builtin: renderColor(tokens.token.builtin, context),
-      cdata: renderColor(tokens.token.cdata, context),
-      char: renderColor(tokens.token.char, context),
-      class: renderColor(tokens.token.class, context),
-      className: renderColor(tokens.token.className, context),
-      comment: renderColor(tokens.token.comment, context),
-      constant: renderColor(tokens.token.constant, context),
-      deleted: renderColor(tokens.token.deleted, context),
-      doctype: renderColor(tokens.token.doctype, context),
-      entity: renderColor(tokens.token.entity, context),
-      function: renderColor(tokens.token.function, context),
-      hexcode: renderColor(tokens.token.hexcode, context),
-      id: renderColor(tokens.token.id, context),
-      important: renderColor(tokens.token.important, context),
-      inserted: renderColor(tokens.token.inserted, context),
-      keyword: renderColor(tokens.token.keyword, context),
-      number: renderColor(tokens.token.number, context),
-      operator: renderColor(tokens.token.operator, context),
-      prolog: renderColor(tokens.token.prolog, context),
-      property: renderColor(tokens.token.property, context),
-      pseudoClass: renderColor(tokens.token.pseudoClass, context),
-      pseudoElement: renderColor(tokens.token.pseudoElement, context),
-      punctuation: renderColor(tokens.token.punctuation, context),
-      regex: renderColor(tokens.token.regex, context),
-      selector: renderColor(tokens.token.selector, context),
-      string: renderColor(tokens.token.string, context),
-      symbol: renderColor(tokens.token.symbol, context),
-      tag: renderColor(tokens.token.tag, context),
-      unit: renderColor(tokens.token.unit, context),
-      url: renderColor(tokens.token.url, context),
-      variable: renderColor(tokens.token.variable, context),
-    },
-    variant: {
-      solid: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-              cardTone,
-              debugId: `solid`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-      tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
-              cardTone,
-              debugId: `tinted`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-    },
-  }
-}
-
-function buildColorElement_v3(
-  tokens: ElementColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    debugId?: string
-    scheme: ThemeColorSchemeKey
-    tone?: ThemeColorStateToneKey
-  },
-): ThemeColorElement {
-  const {cardTone, debugId, scheme, tone} = options
-
-  const path = [scheme, cardTone, debugId, tone].filter(Boolean).join('/')
-
-  if (debug) {
-    // eslint-disable-next-line no-console
-    console.log(nodeLen, path)
-    nodeLen += 1
-  }
-
-  const context: RenderColorContext = {bgVar: `--bg`, hue: tokens._hue, scheme}
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    bg: {
-      0: renderColor(tokens.bg[0], context),
-      4: renderColor(tokens.bg[4], context),
-    },
-    border: {
-      0: renderColor(tokens.border[0], context),
-      4: renderColor(tokens.border[4], context),
-    },
-    fg: {
-      0: renderColor(tokens.fg[0], context),
-      4: renderColor(tokens.fg[4], context),
-    },
-  }
-}

package/src/theme/v3/color/parseColor.test.ts

@@ -1,79 +0,0 @@
-import {parseColor} from './parseColor'
-
-it('should parse color', () => {
-  expect(parseColor('black/0.5')).toEqual({
-    color: {
-      type: 'black',
-    },
-    opacity: 0.5,
-  })
-
-  expect(parseColor('black')).toEqual({
-    color: {
-      type: 'black',
-    },
-  })
-
-  expect(parseColor('white')).toEqual({
-    color: {
-      type: 'white',
-    },
-  })
-
-  expect(parseColor('white/1')).toEqual({
-    color: {
-      type: 'white',
-    },
-    opacity: 1,
-  })
-
-  expect(parseColor('50')).toEqual({
-    color: {
-      type: 'hue',
-      tint: '50',
-    },
-  })
-
-  expect(parseColor('50/0.5')).toEqual({
-    color: {
-      type: 'hue',
-      tint: '50',
-    },
-    opacity: 0.5,
-  })
-
-  expect(parseColor('500/0.5')).toEqual({
-    color: {
-      type: 'hue',
-      tint: '500',
-    },
-    opacity: 0.5,
-  })
-
-  expect(parseColor('red/50')).toEqual({
-    color: {
-      type: 'hue',
-      hue: 'red',
-      tint: '50',
-    },
-  })
-
-  expect(parseColor('red/200/0.5 5%')).toEqual({
-    color: {
-      type: 'hue',
-      hue: 'red',
-      tint: '200',
-    },
-    opacity: 0.5,
-    mix: 5,
-  })
-
-  expect(parseColor('red/50 50%')).toEqual({
-    color: {
-      type: 'hue',
-      hue: 'red',
-      tint: '50',
-    },
-    mix: 50,
-  })
-})

package/src/theme/v3/color/renderColor.test.ts

@@ -1,19 +0,0 @@
-import {renderColor, RenderColorContext} from './renderColor'
-
-it('should render color', () => {
-  const context: RenderColorContext = {
-    bgVar: '--bg',
-    hue: 'gray',
-    scheme: 'light',
-  }
-
-  expect(renderColor(['500/0.2', '500/0.2'], context)).toBe(
-    `color-mix(in srgb, transparent, var(--gray-500) 20%)`,
-  )
-
-  expect(renderColor(['500', '500'], context)).toBe(`var(--gray-500)`)
-
-  expect(renderColor(['50 20%', '50 20%'], context)).toBe(
-    `color-mix(in srgb, var(--bg), var(--gray-50) 20%)`,
-  )
-})

package/src/theme/v3/color/renderColor.ts

@@ -1,33 +0,0 @@
-import {Hue} from '../../palette'
-import {ThemeColorSchemeKey} from '../../v2'
-import {parseColor} from './parseColor'
-import {ColorToken} from './token'
-
-type CSSVariableKey = `--${string}`
-
-export interface RenderColorContext {
-  bgVar: CSSVariableKey
-  hue: Hue
-  scheme: ThemeColorSchemeKey
-}
-
-export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
-  const {bgVar, hue, scheme} = context
-
-  const result = parseColor(token[scheme === 'dark' ? 0 : 1])
-
-  const colorVar =
-    result.color.type === 'hue'
-      ? `--${result.color.hue ?? hue}-${result.color.tint}`
-      : `--${result.color.type}`
-
-  if (result.mix !== undefined) {
-    return `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)`
-  }
-
-  if (result.opacity !== undefined) {
-    return `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)`
-  }
-
-  return `var(${colorVar})`
-}

package/src/theme/v3/defaults.ts

@@ -1,205 +0,0 @@
-import {PaletteConfig} from '../palette'
-import {PartialTokens, Tokens} from './tokens'
-
-export const defaultPalette: PaletteConfig = {
-  chroma: {min: 0.005, max: 0.2325},
-  luminosity: {min: 0.1875, max: 1},
-  hues: {
-    gray: {h: 277, c: 0.04},
-    blue: {h: 273, c: 0.185},
-    purple: {h: 295, c: 0.4},
-    magenta: {h: 12, c: 0.4},
-    red: {h: 30, c: 0.4},
-    orange: {h: 68, c: 0.4},
-    yellow: {h: 90, c: 0.4},
-    green: {h: 171, c: 0.4},
-    cyan: {h: 194, c: 0.4},
-  },
-}
-
-export const defaultTokens: PartialTokens<Tokens> = {
-  color: {
-    '*': {
-      // backdrop: ['black/0.2', '200/0.2'],
-      backdrop: ['black/0.5', 'gray/100/0.5'],
-      focusRing: ['blue/500', 'blue/300'],
-      link: {
-        fg: ['blue/400', 'blue/600'],
-      },
-      shadow: {
-        outline: ['500/0.4', '500/0.3'],
-        umbra: ['black/0.2', '500/0.1'],
-        penumbra: ['black/0.14', '500/0.07'],
-        ambient: ['black/0.12', '500/0.06'],
-      },
-      token: {
-        atrule: ['purple/300', 'purple/600'],
-        attrName: ['green/300', 'green/600'],
-        attrValue: ['yellow/300', 'yellow/600'],
-        attribute: ['yellow/300', 'yellow/600'],
-        boolean: ['purple/300', 'purple/600'],
-        builtin: ['purple/300', 'purple/600'],
-        cdata: ['yellow/300', 'yellow/600'],
-        char: ['yellow/300', 'yellow/600'],
-        class: ['orange/300', 'orange/600'],
-        className: ['cyan/300', 'cyan/600'],
-        comment: ['gray/600', 'gray/300'],
-        constant: ['purple/300', 'purple/600'],
-        deleted: ['red/300', 'red/600'],
-        entity: ['red/300', 'red/600'],
-        function: ['green/300', 'green/600'],
-        hexcode: ['blue/300', 'blue/600'],
-        id: ['purple/300', 'purple/600'],
-        important: ['purple/300', 'purple/600'],
-        inserted: ['green/300', 'green/600'],
-        keyword: ['magenta/300', 'magenta/600'],
-        number: ['purple/300', 'purple/600'],
-        operator: ['magenta/300', 'magenta/600'],
-        prolog: ['gray/300', 'gray/600'],
-        property: ['blue/300', 'blue/600'],
-        pseudoClass: ['yellow/300', 'yellow/600'],
-        pseudoElement: ['yellow/300', 'yellow/600'],
-        punctuation: ['gray/300', 'gray/600'],
-        regex: ['blue/300', 'blue/600'],
-        selector: ['red/300', 'red/600'],
-        string: ['yellow/300', 'yellow/600'],
-        symbol: ['purple/300', 'purple/600'],
-        tag: ['red/300', 'red/600'],
-        unit: ['orange/300', 'orange/600'],
-        url: ['red/300', 'red/600'],
-        variable: ['red/300', 'red/600'],
-      },
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['800', '150'],
-            },
-            border: {
-              0: ['800', '150'],
-              4: ['600', '350'],
-            },
-            fg: {
-              0: ['100', '900'],
-              4: ['300', '700'],
-            },
-          },
-          'primary': {
-            _hue: 'blue',
-          },
-          'suggest': {
-            _hue: 'purple',
-          },
-          'positive': {
-            _hue: 'green',
-          },
-          'caution': {
-            _hue: 'yellow',
-          },
-          'critical': {
-            _hue: 'red',
-          },
-        },
-        solid: {
-          '*': {
-            bg: {
-              0: ['300', '500'],
-              4: ['200', '600'],
-            },
-            border: {
-              0: ['200', '400'],
-              4: ['100', '500'],
-            },
-            fg: {
-              0: ['black', 'white'],
-              4: ['600', '400'],
-            },
-          },
-          'default': {
-            bg: {
-              0: ['200', '800'],
-              4: ['white', 'black'],
-            },
-            border: {
-              0: ['300', '700'],
-              4: ['200', '800'],
-            },
-          },
-          'primary': {
-            _hue: 'blue',
-          },
-          'suggest': {
-            _hue: 'purple',
-          },
-          'positive': {
-            _hue: 'green',
-          },
-          'caution': {
-            _hue: 'yellow',
-          },
-          'critical': {
-            _hue: 'red',
-          },
-        },
-      },
-    },
-    'transparent': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['black', 'gray/50'],
-              4: ['900', '150'],
-            },
-            border: {
-              0: ['900', '150'],
-              4: ['700', '350'],
-            },
-            fg: {
-              0: ['150', 'black'],
-              4: ['550', '600'],
-            },
-          },
-        },
-      },
-    },
-    'default': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['gray/950', 'white'],
-              4: ['850', '100'],
-            },
-            border: {
-              0: ['850', '100'],
-              4: ['650', '300'],
-            },
-            fg: {
-              0: ['white', 'black'],
-              4: ['400', '600'],
-            },
-          },
-        },
-      },
-    },
-    'primary': {
-      _hue: 'blue',
-    },
-    'suggest': {
-      _hue: 'purple',
-    },
-    'positive': {
-      _hue: 'green',
-    },
-    'caution': {
-      _hue: 'yellow',
-    },
-    'critical': {
-      _hue: 'red',
-    },
-  },
-}
-
-// export const defaultTheme = buildTheme_v3()