@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

package/src/theme/defaults/config.ts

@@ -1,84 +0,0 @@
-import {RootTheme_v2} from '../v2'
-
-const BORDER_WIDTH = 0.5
-const OUTLINE_WIDTH = 0.5
-
-export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
-  _version: 2,
-  avatar: {
-    sizes: [
-      {distance: -4, size: 19},
-      {distance: -4, size: 25},
-      {distance: -8, size: 33},
-      {distance: -12, size: 49},
-    ],
-    focusRing: {offset: 1, width: 1},
-  },
-  button: {
-    textWeight: 'medium',
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-  },
-  card: {
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-    shadow: {outline: OUTLINE_WIDTH},
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: {zOffset: 600},
-    popover: {zOffset: 400},
-    tooltip: {zOffset: 200},
-  },
-  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
-  shadow: [
-    null,
-    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
-    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
-    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
-    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: BORDER_WIDTH,
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {offset: -1, width: 1},
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {offset: -1, width: 1},
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-      focusRing: {offset: 1, width: 1},
-    },
-    select: {
-      focusRing: {offset: -1, width: 1},
-    },
-    text: {
-      focusRing: {offset: -1, width: 1},
-    },
-  },
-  style: {
-    button: {
-      root: {
-        transition: 'background-color 100ms,border-color 100ms,color 100ms',
-      },
-    },
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  },
-}

package/src/theme/defaults/fonts.ts

@@ -1,228 +0,0 @@
-import {ThemeFonts} from '../v0'
-
-export const defaultThemeFonts: ThemeFonts = {
-  code: {
-    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  heading: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 17,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: -0.25,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 27,
-        iconSize: 41,
-        lineHeight: 35,
-        letterSpacing: -0.5,
-      },
-      {
-        ascenderHeight: 9.5,
-        descenderHeight: 8.5,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 41,
-        letterSpacing: -1,
-      },
-      {
-        ascenderHeight: 10.5,
-        descenderHeight: 9.5,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 47,
-        letterSpacing: -1,
-      },
-    ],
-  },
-  label: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 500,
-      medium: 600,
-      semibold: 700,
-      bold: 800,
-    },
-    sizes: [
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 8.1,
-        iconSize: 13,
-        lineHeight: 10,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 1.5,
-        descenderHeight: 2.5,
-        fontSize: 9.5,
-        iconSize: 15,
-        lineHeight: 11,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 10.8,
-        iconSize: 17,
-        lineHeight: 12,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 12.25,
-        iconSize: 19,
-        lineHeight: 13,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 1.5,
-        descenderHeight: 2.5,
-        fontSize: 13.6,
-        iconSize: 21,
-        lineHeight: 14,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 15,
-        iconSize: 23,
-        lineHeight: 15,
-        letterSpacing: 0.5,
-      },
-    ],
-  },
-  text: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 15,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 18,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-}

package/src/theme/palette/constants.ts

@@ -1,15 +0,0 @@
-export const HUES = [
-  'gray',
-  'blue',
-  'purple',
-  'magenta',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'cyan',
-] as const
-
-export const TINTS = [
-  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
-] as const

package/src/theme/palette/types.ts

@@ -1,16 +0,0 @@
-import {type HUES, type TINTS} from './constants'
-
-export type Hue = (typeof HUES)[number]
-export type Tint = (typeof TINTS)[number]
-
-export type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<Hue, {h: number; c: number}>
-}

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,
-  })
-})