@sanity/ui
Version:
The Sanity UI components.
1 lines • 244 kB
Source Map (JSON)
{"version":3,"file":"theme.mjs","sources":["../src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts","../src/theme/build/_deprecated/color/_solid/createSolidTones.ts","../src/theme/build/_deprecated/color/button/createButtonTones.ts","../src/theme/build/_deprecated/color/button/createButtonModes.ts","../src/theme/build/_deprecated/color/card/createCardStates.ts","../src/theme/build/_deprecated/color/defaults.ts","../src/theme/build/_deprecated/color/input/createInputModes.ts","../src/theme/build/_deprecated/color/muted/createMuted.ts","../src/theme/build/_deprecated/color/spot/createSpot.ts","../src/theme/build/_deprecated/color/factory.ts","../src/theme/defaults/config.ts","../src/theme/defaults/fonts.ts","../src/theme/versioning/themeColor_v0_v2.ts","../src/theme/versioning/getTheme_v2.ts","../src/theme/versioning/is_v0.ts","../src/theme/versioning/is_v2.ts","../src/theme/versioning/v0_v2.ts","../src/theme/versioning/v2_v0.ts","../src/theme/system/color/_constants.ts","../src/theme/system/color/_helpers.ts","../src/theme/config/system.ts","../src/theme/config/tokens/parseTokenKey.ts","../src/theme/config/tokens/parseTokenValue.ts","../src/theme/config/helpers.ts","../src/theme/build/colorToken/compileColorToken.ts","../src/theme/build/colorToken/colorToken.ts","../src/theme/defaults/colorTokens.ts","../src/theme/build/lib/isRecord.ts","../src/theme/build/merge.ts","../src/theme/build/resolveColorTokens.ts","../src/theme/build/buildColorTheme.ts","../src/theme/defaults/colorPalette.ts","../src/theme/build/lib/color-fns/blend/mix.ts","../src/theme/build/lib/color-fns/blend/multiply.ts","../src/theme/build/lib/color-fns/blend/screen.ts","../src/theme/build/lib/utils.ts","../src/theme/build/lib/color-fns/convert.ts","../src/theme/build/lib/color-fns/parse.ts","../src/theme/build/lib/color-fns/contrastRatio.ts","../src/theme/build/lib/color-fns/rgba.ts","../src/theme/build/mixThemeColor.ts","../src/theme/build/renderColorValue.ts","../src/theme/build/renderColorTheme.ts","../src/theme/build/buildTheme.ts","../src/theme/versioning/themeColor_v2_v2_9.ts","../src/theme/getScopedTheme.ts"],"sourcesContent":["import {\n ThemeColorBase,\n ThemeColorMuted,\n ThemeColorSelectable,\n ThemeColorSelectableStates,\n ThemeColorSolid,\n} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createSelectableTones(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n): ThemeColorSelectable {\n return {\n default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),\n primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),\n positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),\n caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),\n critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),\n }\n}\n\nfunction _createSelectableStates(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',\n): ThemeColorSelectableStates {\n return {\n enabled: opts.selectable({\n base,\n dark,\n solid,\n muted,\n state: 'enabled',\n tone,\n }),\n hovered: opts.selectable({\n base,\n dark,\n solid,\n muted,\n state: 'hovered',\n tone,\n }),\n pressed: opts.selectable({\n base,\n dark,\n solid,\n muted,\n state: 'pressed',\n tone,\n }),\n selected: opts.selectable({\n base,\n dark,\n solid,\n muted,\n state: 'selected',\n tone,\n }),\n disabled: opts.selectable({\n base,\n dark,\n solid,\n muted,\n state: 'disabled',\n tone,\n }),\n }\n}\n","import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createSolidTones(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n name: ThemeColorName,\n): ThemeColorSolid {\n return {\n default: {\n enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),\n },\n transparent: {\n enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),\n },\n primary: {\n enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),\n },\n positive: {\n enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),\n },\n caution: {\n enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),\n },\n critical: {\n enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),\n disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),\n hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),\n pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),\n selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),\n },\n }\n}\n","import {\n ThemeColorBase,\n ThemeColorButtonModeKey,\n ThemeColorButtonTones,\n ThemeColorMuted,\n ThemeColorSolid,\n} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createButtonTones(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n mode: ThemeColorButtonModeKey,\n): ThemeColorButtonTones {\n return {\n default: opts.button({\n base,\n dark,\n solid: solid.default,\n muted: muted.default,\n mode,\n }),\n primary: opts.button({\n base,\n dark,\n solid: solid.primary,\n muted: muted.primary,\n mode,\n }),\n positive: opts.button({\n base,\n dark,\n solid: solid.positive,\n muted: muted.positive,\n mode,\n }),\n caution: opts.button({\n base,\n dark,\n solid: solid.caution,\n muted: muted.caution,\n mode,\n }),\n critical: opts.button({\n base,\n dark,\n solid: solid.critical,\n muted: muted.critical,\n mode,\n }),\n }\n}\n","import {\n ThemeColorBase,\n ThemeColorButton,\n ThemeColorMuted,\n ThemeColorSolid,\n} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\nimport {createButtonTones} from './createButtonTones'\n\nexport function createButtonModes(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n): ThemeColorButton {\n return {\n default: createButtonTones(opts, base, dark, solid, muted, 'default'),\n ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),\n bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),\n }\n}\n","import {\n ThemeColorBase,\n ThemeColorCard,\n ThemeColorMuted,\n ThemeColorName,\n ThemeColorSolid,\n} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createCardStates(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n name: ThemeColorName,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n): ThemeColorCard {\n return {\n enabled: opts.card({\n base,\n dark,\n name,\n state: 'enabled',\n solid,\n muted,\n }),\n disabled: opts.card({\n base,\n dark,\n name,\n state: 'disabled',\n solid,\n muted,\n }),\n hovered: opts.card({\n base,\n dark,\n name,\n state: 'hovered',\n solid,\n muted,\n }),\n pressed: opts.card({\n base,\n dark,\n name,\n state: 'pressed',\n solid,\n muted,\n }),\n selected: opts.card({\n base,\n dark,\n name,\n state: 'selected',\n solid,\n muted,\n }),\n }\n}\n","import {ThemeColorBuilderOpts} from './factory'\n\nconst black = 'hsl(0, 0%, 0%)'\nconst white = 'hsl(0, 0%, 100%)'\n\nconst colors = {\n default: {\n lightest: 'hsl(0, 0%, 95%)',\n lighter: 'hsl(0, 0%, 70%)',\n light: 'hsl(0, 0%, 65%)',\n base: 'hsl(0, 0%, 50%)',\n dark: 'hsl(0, 0%, 35%)',\n darker: 'hsl(0, 0%, 20%)',\n darkest: 'hsl(0, 0%, 5%)',\n },\n transparent: {\n lightest: 'hsl(240, 100%, 95%)',\n lighter: 'hsl(240, 100%, 70%)',\n light: 'hsl(240, 100%, 65%)',\n base: 'hsl(240, 100%, 50%)',\n dark: 'hsl(240, 100%, 35%)',\n darker: 'hsl(240, 100%, 20%)',\n darkest: 'hsl(240, 100%, 5%)',\n },\n primary: {\n lightest: 'hsl(240, 100%, 95%)',\n lighter: 'hsl(240, 100%, 70%)',\n light: 'hsl(240, 100%, 65%)',\n base: 'hsl(240, 100%, 50%)',\n dark: 'hsl(240, 100%, 35%)',\n darker: 'hsl(240, 100%, 20%)',\n darkest: 'hsl(240, 100%, 5%)',\n },\n positive: {\n lightest: 'hsl(120, 100%, 95%)',\n lighter: 'hsl(120, 100%, 70%)',\n light: 'hsl(120, 100%, 65%)',\n base: 'hsl(120, 100%, 50%)',\n dark: 'hsl(120, 100%, 35%)',\n darker: 'hsl(120, 100%, 20%)',\n darkest: 'hsl(120, 100%, 5%)',\n },\n caution: {\n lightest: 'hsl(60, 100%, 95%)',\n lighter: 'hsl(60, 100%, 70%)',\n light: 'hsl(60, 100%, 65%)',\n base: 'hsl(60, 100%, 50%)',\n dark: 'hsl(60, 100%, 35%)',\n darker: 'hsl(60, 100%, 20%)',\n darkest: 'hsl(60, 100%, 5%)',\n },\n critical: {\n lightest: 'hsl(0, 100%, 95%)',\n lighter: 'hsl(0, 100%, 70%)',\n light: 'hsl(0, 100%, 65%)',\n base: 'hsl(0, 100%, 50%)',\n dark: 'hsl(0, 100%, 35%)',\n darker: 'hsl(0, 100%, 20%)',\n darkest: 'hsl(0, 100%, 5%)',\n },\n}\n\nconst spots = {\n gray: 'hsl(0, 0%, 50%)',\n red: 'hsl(0, 100%, 50%)',\n orange: 'hsl(30, 100%, 50%)',\n yellow: 'hsl(60, 100%, 50%)',\n green: 'hsl(120, 100%, 50%)',\n cyan: 'hsl(180, 100%, 50%)',\n blue: 'hsl(240, 100%, 50%)',\n purple: 'hsl(270, 100%, 50%)',\n magenta: 'hsl(300, 100%, 50%)',\n}\n\nconst tones = {\n transparent: {\n bg: [colors.transparent.darkest, colors.transparent.lightest],\n fg: [colors.transparent.lightest, colors.transparent.darkest],\n border: [colors.transparent.darker, colors.transparent.lighter],\n focusRing: [colors.transparent.base, colors.transparent.base],\n },\n primary: {\n bg: [colors.primary.darkest, colors.primary.lightest],\n fg: [colors.primary.lightest, colors.primary.darkest],\n border: [colors.primary.darker, colors.primary.lighter],\n focusRing: [colors.primary.base, colors.primary.base],\n },\n positive: {\n bg: [colors.positive.darkest, colors.positive.lightest],\n fg: [colors.positive.lightest, colors.positive.darkest],\n border: [colors.positive.darker, colors.positive.lighter],\n focusRing: [colors.positive.base, colors.positive.base],\n },\n caution: {\n bg: [colors.caution.darkest, colors.caution.lightest],\n fg: [colors.caution.lightest, colors.caution.darkest],\n border: [colors.caution.darker, colors.caution.lighter],\n focusRing: [colors.caution.base, colors.caution.base],\n },\n critical: {\n bg: [colors.critical.darkest, colors.critical.lightest],\n fg: [colors.critical.lightest, colors.critical.darkest],\n border: [colors.critical.darker, colors.critical.lighter],\n focusRing: [colors.critical.base, colors.critical.base],\n },\n}\n\nexport const defaultOpts: ThemeColorBuilderOpts = {\n base: ({dark, name}) => {\n if (name === 'default') {\n return {\n bg: dark ? black : white,\n fg: dark ? white : black,\n border: dark ? colors.default.darkest : colors.default.lightest,\n focusRing: colors.primary.base,\n shadow: {\n outline: black,\n umbra: black,\n penumbra: black,\n ambient: black,\n },\n skeleton: {\n from: dark ? white : black,\n to: dark ? white : black,\n },\n }\n }\n\n // Variants:\n // - primary\n // - positive\n // - caution\n // - critical\n return {\n bg: tones[name].bg[dark ? 0 : 1],\n fg: tones[name].fg[dark ? 0 : 1],\n border: tones[name].border[dark ? 0 : 1],\n focusRing: tones[name].focusRing[dark ? 0 : 1],\n shadow: {\n outline: black,\n umbra: black,\n penumbra: black,\n ambient: black,\n },\n skeleton: {\n from: dark ? white : black,\n to: dark ? white : black,\n },\n }\n },\n\n solid: ({base, dark, state, tone}) => {\n const color = colors[tone]\n\n if (state === 'hovered') {\n return {\n bg: dark ? color.light : color.dark,\n bg2: dark ? color.light : color.dark,\n border: dark ? color.lighter : color.darker,\n fg: dark ? color.darkest : color.lightest,\n icon: dark ? color.darkest : color.lightest,\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n }\n }\n\n return {\n bg: color.base,\n bg2: color.base,\n border: dark ? color.light : color.dark,\n fg: dark ? color.darkest : color.lightest,\n icon: dark ? color.darkest : color.lightest,\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n }\n },\n\n muted: ({base, dark, state, tone}) => {\n const color = colors[tone]\n\n if (state === 'hovered') {\n return {\n bg: dark ? color.darker : color.lighter,\n bg2: dark ? color.darker : color.lighter,\n border: dark ? color.lighter : color.darker,\n fg: dark ? color.lightest : color.darkest,\n icon: dark ? color.lightest : color.darkest,\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n }\n }\n\n return {\n bg: dark ? color.darkest : color.lightest,\n bg2: dark ? color.darkest : color.lightest,\n border: dark ? color.darker : color.lighter,\n fg: dark ? color.lighter : color.darker,\n icon: dark ? color.lighter : color.darker,\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n }\n },\n\n button: ({base, mode, muted, solid}) => {\n if (mode === 'bleed') {\n return {\n ...muted,\n enabled: {\n bg: 'transparent',\n bg2: 'transparent',\n fg: muted.enabled.fg,\n icon: muted.enabled.fg,\n border: 'transparent',\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n },\n hovered: {\n bg: muted.enabled.bg,\n bg2: muted.enabled.bg,\n fg: muted.hovered.fg,\n icon: muted.hovered.fg,\n border: 'transparent',\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n },\n }\n }\n\n if (mode === 'ghost')\n return {\n ...solid,\n enabled: muted.enabled,\n }\n\n return solid\n },\n\n card: ({base}) => {\n return {\n bg: black,\n bg2: black,\n fg: black,\n icon: black,\n border: black,\n muted: {\n fg: black,\n },\n accent: {\n fg: black,\n },\n link: {\n fg: black,\n },\n code: {\n bg: black,\n fg: black,\n },\n skeleton: base.skeleton,\n }\n },\n\n input: () => {\n return {\n bg: black,\n bg2: black,\n fg: black,\n border: black,\n placeholder: black,\n }\n },\n\n selectable: ({muted, state, tone}) => {\n return muted[tone][state]\n },\n\n spot: ({key}) => {\n return spots[key]\n },\n\n syntax: () => ({\n atrule: black,\n attrName: black,\n attrValue: black,\n attribute: black,\n boolean: black,\n builtin: black,\n cdata: black,\n char: black,\n class: black,\n className: black,\n comment: black,\n constant: black,\n deleted: black,\n doctype: black,\n entity: black,\n function: black,\n hexcode: black,\n id: black,\n important: black,\n inserted: black,\n keyword: black,\n number: black,\n operator: black,\n prolog: black,\n property: black,\n pseudoClass: black,\n pseudoElement: black,\n punctuation: black,\n regex: black,\n selector: black,\n string: black,\n symbol: black,\n tag: black,\n unit: black,\n url: black,\n variable: black,\n }),\n}\n","import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createInputModes(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n solid: ThemeColorSolid,\n muted: ThemeColorMuted,\n): ThemeColorInput {\n return {\n default: {\n enabled: opts.input({\n base,\n dark,\n mode: 'default',\n state: 'enabled',\n solid: solid.default,\n muted: muted.default,\n }),\n disabled: opts.input({\n base,\n dark,\n mode: 'default',\n state: 'disabled',\n solid: solid.default,\n muted: muted.default,\n }),\n hovered: opts.input({\n base,\n dark,\n mode: 'default',\n state: 'hovered',\n solid: solid.default,\n muted: muted.default,\n }),\n readOnly: opts.input({\n base,\n dark,\n mode: 'default',\n state: 'readOnly',\n solid: solid.default,\n muted: muted.default,\n }),\n },\n invalid: {\n enabled: opts.input({\n base,\n dark,\n mode: 'invalid',\n state: 'enabled',\n solid: solid.default,\n muted: muted.default,\n }),\n disabled: opts.input({\n base,\n dark,\n mode: 'invalid',\n state: 'disabled',\n solid: solid.default,\n muted: muted.default,\n }),\n hovered: opts.input({\n base,\n dark,\n mode: 'invalid',\n state: 'hovered',\n solid: solid.default,\n muted: muted.default,\n }),\n readOnly: opts.input({\n base,\n dark,\n mode: 'invalid',\n state: 'readOnly',\n solid: solid.default,\n muted: muted.default,\n }),\n },\n }\n}\n","import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createMutedTones(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n name: ThemeColorName,\n): ThemeColorMuted {\n return {\n default: {\n enabled: opts.muted({base, dark, tone: 'default', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'default', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'default', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'default', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'default', name, state: 'selected'}),\n },\n transparent: {\n enabled: opts.muted({base, dark, tone: 'transparent', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'transparent', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'transparent', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'transparent', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'transparent', name, state: 'selected'}),\n },\n primary: {\n enabled: opts.muted({base, dark, tone: 'primary', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'primary', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'primary', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'primary', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'primary', name, state: 'selected'}),\n },\n positive: {\n enabled: opts.muted({base, dark, tone: 'positive', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'positive', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'positive', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'positive', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'positive', name, state: 'selected'}),\n },\n caution: {\n enabled: opts.muted({base, dark, tone: 'caution', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'caution', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'caution', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'caution', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'caution', name, state: 'selected'}),\n },\n critical: {\n enabled: opts.muted({base, dark, tone: 'critical', name, state: 'enabled'}),\n disabled: opts.muted({base, dark, tone: 'critical', name, state: 'disabled'}),\n hovered: opts.muted({base, dark, tone: 'critical', name, state: 'hovered'}),\n pressed: opts.muted({base, dark, tone: 'critical', name, state: 'pressed'}),\n selected: opts.muted({base, dark, tone: 'critical', name, state: 'selected'}),\n },\n }\n}\n","import {ThemeColorBase, ThemeColorSpot} from '../../../../system'\nimport {ThemeColorBuilderOpts} from '../factory'\n\nexport function createSpot(\n opts: ThemeColorBuilderOpts,\n base: ThemeColorBase,\n dark: boolean,\n): ThemeColorSpot {\n return {\n gray: opts.spot({base, dark, key: 'gray'}),\n blue: opts.spot({base, dark, key: 'blue'}),\n purple: opts.spot({base, dark, key: 'purple'}),\n magenta: opts.spot({base, dark, key: 'magenta'}),\n red: opts.spot({base, dark, key: 'red'}),\n orange: opts.spot({base, dark, key: 'orange'}),\n yellow: opts.spot({base, dark, key: 'yellow'}),\n green: opts.spot({base, dark, key: 'green'}),\n cyan: opts.spot({base, dark, key: 'cyan'}),\n }\n}\n","import {\n ThemeColor,\n ThemeColorBase,\n ThemeColorButtonModeKey,\n ThemeColorButtonStates,\n ThemeColorGenericState,\n ThemeColorInputState,\n ThemeColorMuted,\n ThemeColorMutedTone,\n ThemeColorName,\n ThemeColorScheme,\n ThemeColorSchemes,\n ThemeColorSolid,\n ThemeColorSolidTone,\n ThemeColorSpotKey,\n ThemeColorSyntax,\n ThemeColorToneKey,\n} from '../../../system'\nimport {createSelectableTones} from './_selectable/createSelectableTones'\nimport {createSolidTones} from './_solid/createSolidTones'\nimport {createButtonModes} from './button/createButtonModes'\nimport {createCardStates} from './card/createCardStates'\nimport {defaultOpts} from './defaults'\nimport {createInputModes} from './input/createInputModes'\nimport {createMutedTones} from './muted/createMuted'\nimport {createSpot} from './spot/createSpot'\n\n/**\n * @public\n * @deprecated Use `buildColorTheme` instead.\n */\nexport interface ThemeColorBuilderOpts {\n base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase\n solid: (opts: {\n base: ThemeColorBase\n dark: boolean\n tone: ThemeColorName\n name: ThemeColorName\n state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'\n }) => ThemeColorGenericState\n muted: (opts: {\n base: ThemeColorBase\n dark: boolean\n tone: ThemeColorToneKey\n name: ThemeColorName\n state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'\n }) => ThemeColorGenericState\n card: (opts: {\n base: ThemeColorBase\n dark: boolean\n muted: ThemeColorMuted\n name: ThemeColorName\n solid: ThemeColorSolid\n state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'\n }) => ThemeColorGenericState\n button: (opts: {\n dark: boolean\n mode: ThemeColorButtonModeKey\n base: ThemeColorBase\n solid: ThemeColorSolidTone\n muted: ThemeColorMutedTone\n }) => ThemeColorButtonStates\n input: (opts: {\n base: ThemeColorBase\n solid: ThemeColorSolidTone\n muted: ThemeColorMutedTone\n dark: boolean\n mode: 'default' | 'invalid'\n state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'\n }) => ThemeColorInputState\n selectable: (opts: {\n dark: boolean\n base: ThemeColorBase\n solid: ThemeColorSolid\n muted: ThemeColorMuted\n state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'\n tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'\n }) => ThemeColorGenericState\n syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax\n spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string\n}\n\n/**\n * @public\n * @deprecated Use `ThemeConfig` instead.\n */\nexport type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>\n\n/**\n * @public\n * @deprecated Use `buildColorTheme` instead.\n */\nexport function createColorTheme(\n partialOpts: PartialThemeColorBuilderOpts = {},\n): ThemeColorSchemes {\n const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}\n\n return {\n light: _createColorScheme(builders, false),\n dark: _createColorScheme(builders, true),\n }\n}\n\n/**\n * @internal\n */\nfunction _createColorScheme(opts: ThemeColorBuilderOpts, dark: boolean): ThemeColorScheme {\n return {\n default: _createColor(opts, dark, 'default'),\n transparent: _createColor(opts, dark, 'transparent'),\n primary: _createColor(opts, dark, 'primary'),\n positive: _createColor(opts, dark, 'positive'),\n caution: _createColor(opts, dark, 'caution'),\n critical: _createColor(opts, dark, 'critical'),\n }\n}\n\n/**\n * @internal\n */\nfunction _createColor(\n opts: ThemeColorBuilderOpts,\n dark: boolean,\n name: ThemeColorName,\n): ThemeColor {\n const base = opts.base({dark, name})\n const solid = createSolidTones(opts, base, dark, name)\n const muted = createMutedTones(opts, base, dark, name)\n\n return {\n base,\n button: createButtonModes(opts, base, dark, solid, muted),\n card: createCardStates(opts, base, dark, name, solid, muted),\n dark,\n input: createInputModes(opts, base, dark, solid, muted),\n selectable: createSelectableTones(opts, base, dark, solid, muted),\n spot: createSpot(opts, base, dark),\n syntax: opts.syntax({base, dark}),\n solid,\n muted,\n }\n}\n","import {RootTheme_v2} from '../system'\n\nconst BORDER_WIDTH = 1\nconst OUTLINE_WIDTH = 0.5\n\nexport const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {\n _version: 2,\n avatar: {\n sizes: [\n {distance: -4, size: 19},\n {distance: -4, size: 25},\n {distance: -8, size: 33},\n {distance: -12, size: 49},\n ],\n focusRing: {offset: 1, width: 1},\n },\n button: {\n textWeight: 'medium',\n border: {width: BORDER_WIDTH},\n focusRing: {offset: -1, width: 1},\n },\n card: {\n border: {width: BORDER_WIDTH},\n focusRing: {offset: -1, width: 1},\n shadow: {outline: OUTLINE_WIDTH},\n },\n container: [320, 640, 960, 1280, 1600, 1920],\n media: [360, 600, 900, 1200, 1800, 2400],\n layer: {\n dialog: {zOffset: 600},\n popover: {zOffset: 400},\n tooltip: {zOffset: 200},\n },\n radius: [0, 1, 3, 6, 9, 12, 21],\n shadow: [\n null,\n {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},\n {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},\n {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},\n {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},\n {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},\n ],\n space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],\n input: {\n border: {\n width: BORDER_WIDTH,\n },\n checkbox: {\n size: 17,\n focusRing: {offset: -1, width: 1},\n },\n radio: {\n size: 17,\n markSize: 9,\n focusRing: {offset: -1, width: 1},\n },\n switch: {\n width: 25,\n height: 17,\n padding: 5,\n transitionDurationMs: 150,\n transitionTimingFunction: 'ease-out',\n focusRing: {offset: 1, width: 1},\n },\n select: {\n focusRing: {offset: -1, width: 1},\n },\n text: {\n focusRing: {offset: -1, width: 1},\n },\n },\n style: {\n button: {\n root: {\n transition: 'background-color 100ms,border-color 100ms,color 100ms',\n },\n },\n // card: {\n // root: {\n // transition: 'background-color 100ms,border-color 100ms,color 100ms',\n // },\n // },\n },\n}\n","import {ThemeFonts} from '../system'\n\nexport const defaultThemeFonts: ThemeFonts = {\n code: {\n family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',\n weights: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n sizes: [\n {\n ascenderHeight: 4,\n descenderHeight: 4,\n fontSize: 10,\n iconSize: 17,\n lineHeight: 15,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 5,\n descenderHeight: 5,\n fontSize: 13,\n iconSize: 21,\n lineHeight: 19,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 6,\n descenderHeight: 6,\n fontSize: 16,\n iconSize: 25,\n lineHeight: 23,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 7,\n descenderHeight: 7,\n fontSize: 19,\n iconSize: 29,\n lineHeight: 27,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 8,\n descenderHeight: 8,\n fontSize: 22,\n iconSize: 33,\n lineHeight: 31,\n letterSpacing: 0,\n },\n ],\n },\n heading: {\n family:\n 'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif',\n weights: {\n regular: 700,\n medium: 800,\n semibold: 900,\n bold: 900,\n },\n sizes: [\n {\n ascenderHeight: 5,\n descenderHeight: 5,\n fontSize: 13,\n iconSize: 17,\n lineHeight: 19,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 6,\n descenderHeight: 6,\n fontSize: 16,\n iconSize: 25,\n lineHeight: 23,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 7,\n descenderHeight: 7,\n fontSize: 21,\n iconSize: 33,\n lineHeight: 29,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 8,\n descenderHeight: 8,\n fontSize: 27,\n iconSize: 41,\n lineHeight: 35,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 9.5,\n descenderHeight: 8.5,\n fontSize: 33,\n iconSize: 49,\n lineHeight: 41,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 10.5,\n descenderHeight: 9.5,\n fontSize: 38,\n iconSize: 53,\n lineHeight: 47,\n letterSpacing: 0,\n },\n ],\n },\n label: {\n family:\n 'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", system-ui, sans-serif',\n weights: {\n regular: 600,\n medium: 700,\n semibold: 800,\n bold: 900,\n },\n sizes: [\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 8.1,\n iconSize: 13,\n lineHeight: 10,\n letterSpacing: 0.5,\n },\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 9.5,\n iconSize: 15,\n lineHeight: 11,\n letterSpacing: 0.5,\n },\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 10.8,\n iconSize: 17,\n lineHeight: 12,\n letterSpacing: 0.5,\n },\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 12.25,\n iconSize: 19,\n lineHeight: 13,\n letterSpacing: 0.5,\n },\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 13.6,\n iconSize: 21,\n lineHeight: 14,\n letterSpacing: 0.5,\n },\n {\n ascenderHeight: 2,\n descenderHeight: 2,\n fontSize: 15,\n iconSize: 23,\n lineHeight: 15,\n letterSpacing: 0.5,\n },\n ],\n },\n text: {\n family:\n 'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif',\n weights: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n sizes: [\n {\n ascenderHeight: 4,\n descenderHeight: 4,\n fontSize: 10,\n iconSize: 17,\n lineHeight: 15,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 5,\n descenderHeight: 5,\n fontSize: 13,\n iconSize: 21,\n lineHeight: 19,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 6,\n descenderHeight: 6,\n fontSize: 15,\n iconSize: 25,\n lineHeight: 23,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 7,\n descenderHeight: 7,\n fontSize: 18,\n iconSize: 29,\n lineHeight: 27,\n letterSpacing: 0,\n },\n {\n ascenderHeight: 8,\n descenderHeight: 8,\n fontSize: 21,\n iconSize: 33,\n lineHeight: 31,\n letterSpacing: 0,\n },\n ],\n },\n}\n","import {\n ThemeColor,\n ThemeColorCard_v2,\n ThemeColorGenericState,\n ThemeColorInputMode_v2,\n ThemeColorInputState,\n ThemeColorInputState_v2,\n ThemeColorInputStates,\n ThemeColorMuted,\n ThemeColorSelectable_v2,\n ThemeColorState_v2,\n} from '../system'\n\nconst cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()\n\n/** @internal */\nexport function themeColor_v0_v2(color_v0: ThemeColor): ThemeColorCard_v2 {\n const cached_v2 = cache.get(color_v0)\n\n if (cached_v2) return cached_v2\n\n const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled)\n\n const color_v2: ThemeColorCard_v2 = {\n _blend: color_v0._blend || (color_v0.dark ? 'screen' : 'multiply'),\n _dark: color_v0.dark,\n accent: base.accent,\n avatar: base.avatar,\n backdrop: color_v0.base.shadow.ambient,\n badge: base.badge,\n bg: color_v0.base.bg,\n border: color_v0.base.border,\n button: {\n default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),\n ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),\n bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed),\n },\n code: base.code,\n fg: color_v0.base.fg,\n focusRing: color_v0.base.focusRing,\n icon: base.muted.fg,\n input: {\n default: inputStatesThemeColor_v0_v2(color_v0.input.default),\n invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid),\n },\n kbd: base.kbd,\n link: base.link,\n muted: {\n ...base.muted,\n bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg,\n },\n selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),\n shadow: color_v0.base.shadow,\n skeleton: {\n from: color_v0.skeleton?.from || color_v0.base.border,\n to: color_v0.skeleton?.to || color_v0.base.border,\n },\n syntax: color_v0.syntax,\n }\n\n cache.set(color_v0, color_v2)\n\n return color_v2\n}\n\nfunction stateTonesThemeColor_v0_v2(\n v0: ThemeColor,\n t: Omit<ThemeColorMuted, 'transparent'>,\n): ThemeColorSelectable_v2 {\n return {\n default: {\n enabled: stateThemeColor_v0_v2(v0, t.default.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.default.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.default.pressed),\n selected: stateThemeColor_v0_v2(v0, t.default.selected),\n disabled: stateThemeColor_v0_v2(v0, t.default.disabled),\n },\n neutral: {\n enabled: stateThemeColor_v0_v2(v0, t.default.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.default.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.default.pressed),\n selected: stateThemeColor_v0_v2(v0, t.default.selected),\n disabled: stateThemeColor_v0_v2(v0, t.default.disabled),\n },\n primary: {\n enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),\n selected: stateThemeColor_v0_v2(v0, t.primary.selected),\n disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),\n },\n suggest: {\n enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),\n selected: stateThemeColor_v0_v2(v0, t.primary.selected),\n disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),\n },\n positive: {\n enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),\n selected: stateThemeColor_v0_v2(v0, t.positive.selected),\n disabled: stateThemeColor_v0_v2(v0, t.positive.disabled),\n },\n caution: {\n enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),\n selected: stateThemeColor_v0_v2(v0, t.caution.selected),\n disabled: stateThemeColor_v0_v2(v0, t.caution.disabled),\n },\n critical: {\n enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),\n hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),\n pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),\n selected: stateThemeColor_v0_v2(v0, t.critical.selected),\n disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),\n },\n }\n}\n\nfunction stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): ThemeColorState_v2 {\n return {\n ...state,\n avatar: {\n gray: {\n bg: v0.spot.gray,\n fg: v0.base.bg,\n },\n blue: {\n bg: v0.spot.blue,\n fg: v0.base.bg,\n },\n purple: {\n bg: v0.spot.purple,\n fg: v0.base.bg,\n },\n magenta: {\n bg: v0.spot.magenta,\n fg: v0.base.bg,\n },\n red: {\n bg: v0.spot.red,\n fg: v0.base.bg,\n },\n orange: {\n bg: v0.spot.orange,\n fg: v0.base.bg,\n },\n yellow: {\n bg: v0.spot.yellow,\n fg: v0.base.bg,\n },\n green: {\n bg: v0.spot.green,\n fg: v0.base.bg,\n },\n cyan: {\n bg: v0.spot.cyan,\n fg: v0.base.bg,\n },\n },\n badge: {\n default: {\n bg: v0.muted.default.enabled.bg,\n fg: v0.muted.default.enabled.fg,\n dot: v0.muted.default.enabled.muted.fg,\n icon: v0.muted.default.enabled.muted.fg,\n },\n neutral: {\n bg: v0.muted.transparent.enabled.bg,\n fg: v0.muted.transparent.enabled.fg,\n dot: v0.muted.transparent.enabled.muted.fg,\n icon: v0.muted.transparent.enabled.muted.fg,\n },\n primary: {\n bg: v0.muted.primary.enabled.bg,\n fg: v0.muted.primary.enabled.fg,\n dot: v0.muted.primary.enabled.muted.fg,\n icon: v0.muted.primary.enabled.muted.fg,\n },\n suggest: {\n bg: v0.muted.primary.enabled.bg,\n fg: v0.muted.primary.enabled.fg,\n dot: v0.muted.primary.enabled.muted.fg,\n icon: v0.muted.primary.enabled.muted.fg,\n },\n positive: {\n bg: v0.muted.positive.enabled.bg,\n fg: v0.muted.positive.enabled.fg,\n dot: v0.muted.positive.enabled.muted.fg,\n icon: v0.muted.positive.enabled.muted.fg,\n },\n caution: {\n bg: v0.muted.caution.enabled.bg,\n fg: v0.muted.caution.enabled.fg,\n dot: v0.muted.caution.enabled.muted.fg,\n icon: v0.muted.caution.enabled.muted.fg,\n },\n critical: {\n bg: v0.muted.critical.enabled.bg,\n fg: v0.muted.critical.enabled.fg,\n dot: v0.muted.critical.enabled.muted.fg,\n icon: v0.muted.critical.enabled.muted.fg,\n },\n },\n kbd: {\n bg: v0.muted.default.enabled.bg,\n fg: v0.muted.default.enabled.fg,\n border: v0.muted.default.enabled.border,\n },\n muted: {\n ...v0.muted.default.enabled.muted,\n bg: state.bg2 || state.bg,\n },\n skeleton: {\n from: state.skeleton?.from || state.border,\n to: state.skeleton?.to || state.border,\n },\n }\n}\n\nfunction inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputMode_v2 {\n return {\n enabled: inputStateThemeColor_v0_v2(states.enabled),\n disabled: inputStateThemeColor_v0_v2(states.disabled),\n readOnly: inputStateThemeColor_v0_v2(states.readOnly),\n hovered: inputStateThemeColor_v0_v2(states.hovered),\n }\n}\n\nfunction inputStateThemeColor_v0_v2(state: ThemeColorInputState): ThemeColorInputState_v2 {\n return {\n bg: state.bg,\n border: state.border,\n fg: state.fg,\n muted: {\n bg: state.bg2,\n },\n placeholder: state.placeholder,\n }\n}\n","import {defaultThemeConfig} from '../defaults/config'\nimport {Theme, Theme_v2} from '../system'\nimport {themeColor_v0_v2} from './themeColor_v0_v2'\n\nconst cache = new WeakMap<Theme, Theme_v2>()\n\n/** @public */\nexport function getTheme_v2(theme: Theme): Theme_v2 {\n if (theme.sanity.v2?._resolved) return theme.sanity.v2\n\n const cached_v2 = cache.get(theme)\n\n if (cached_v2) return cached_v2\n\n const v2: Theme_v2 = {\n _version: 2,\n _resolved: true,\n avatar: {\n ...defaultThemeConfig.avatar,\n ...theme.sanity.avatar,\n },\n button: {\n ...defaultThemeConfig.button,\n ...theme.sanity.button,\n },\n card: defaultThemeConfig.card,\n color: themeColor_v0_v2(theme.sanity.color),\n container: theme.sanity.container,\n font: theme.sanity.fonts,\n input: {\n ...defaultThemeConfig.input,\n ...theme.sanity.input,\n checkbox: {\n ...defaultThemeConfig.input.checkbox,\n ...theme.sanity.input.checkbox,\n },\n radio: {\n ...defaultThemeConfig.input.radio,\n ...theme.sanity.input.radio,\n },\n switch: {\n ...defaultThemeConfig.input.switch,\n ...theme.sanity.input.switch,\n },\n },\n layer: theme.sanity.layer ?? defaultThemeConfig.layer,\n media: theme.sanity.media,\n radius: theme.sanity.radius,\n shadow: theme.sanity.shadows,\n space: theme.sanity.space,\n style: theme.sanity.styles,\n }\n\n cache.set(theme, v2)\n\n return v2\n}\n","import {RootTheme, RootTheme_v2} from '../system'\n\n/** @internal */\nexport function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {\n return themeProp._version === 0\n}\n","import {RootTheme, RootTheme_v2} from '../system'\n\n/** @internal */\nexport function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {\n return themeProp._version === 2\n}\n","import {defaultThemeConfig} from '../defaults/config'\nimport {RootTheme, RootTheme_v2} from '../system'\nimport {themeColor_v0_v2} from './themeColor_v0_v2'\n\nconst cache = new WeakMap<RootTheme, RootTheme_v2>()\n\n/** @internal */\nexport function v0_v2(v0: RootTheme): RootTheme_v2 {\n if (v0.v2) return v0.v2\n\n const cached_v2 = cache.get(v0)\n\n if (cached_v2) return cached_v2\n\n const {\n avatar,\n button,\n color,\n container,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusRing: _unused_focusRing,\n fonts: font,\n input,\n layer,\n media,\n radius,\n shadows: shadow,\n space,\n styles: style,\n } = v0\n\n const v2: RootTheme_v2 = {\n _version: 2,\n avatar: {\n ...defaultThemeConfig.avatar,\n ...avatar,\n },\n button: {\n ...defaultThemeConfig.button,\n ...button,\n },\n card: defaultThemeConfig.card,\n color: {\n light: {\n transparent: themeColor_v0_v2(color.light.transparent),\n default: themeColor_v0_v2(color.light.default),\n neutral: themeColor_v0_v2(color.light.transparent),\n primary: themeColor_v0_v2(color.light.primary),\n suggest: themeColor_v0_v2(color.light.primary),\n positive: themeColor_v0_v2(color.light.positive),\n caution: themeColor_v0_v2(color.light.caution),\n critical: themeColor_v0_v2(color.light.critical),\n },\n dark: {\n transparent: themeColor_v0_v2(color.dark.transparent),\n default: themeColor_v0_v2(color.dark.default),\n neutral: themeColor_v0_v2(color.dark.transparent),\n primary: themeColor_v0_v2(color.dark.primary),\n suggest: themeColor_v0_v2(color.dark.primary),\n positive: themeColor_v0_v2(color.dark.positive),\n caution: themeColor_v0_v2(color.dark.caution),\n critical: themeColor_v0_v2(color.dark.critical),\n },\n },\n container,\n font,\n input: {\n ...defaultThemeConfig.input,\n ...input,\n checkbox: {\n ...defaultThemeConfig.input.checkbox,\n ...input.checkbox,\n },\n radio: {\n ...defaultThemeConfig.input.radio,\n ...input.radio,\n },\n switch: {\n ...defaultThemeConfig.input.switch,\n ...input.switch,\n },\n },\n layer: layer ?? defaultThemeConfig.layer,\n media,\n radius,\n shadow,\n space,\n style,\n }\n\n cache.set(v0, v2)\n\n return v2\n}\n","import {\n RootTheme,\n RootTheme_v2,\n ThemeColor,\n ThemeColorCard_v2,\n ThemeColorInputMode_v2,\n ThemeColorInputState,\n ThemeColorInputState_v2,\n ThemeColorInputStates,\n} from '../system'\n\nconst cache = new WeakMap<RootTheme_v2, RootTheme>()\n\n/** @internal */\nexport function v2_v0(v2: RootTheme_v2): RootTheme {\n const cachedTheme = cache.get(v2)\n\n if (cachedTheme) return cachedTheme\n\n const {\n avatar,\n button,\n color,\n container,\n font: fonts,\n input,\n media,\n radius,\n shadow: shadows,\n space,\n style: styles,\n } = v2\n\n return {\n _version: 0,\n avatar,\n button,\n container,\n color: {\n light: {\n transparent: themeColor_v2_v0(color.light.transparent),\n default: themeColor_v2_v0(color.light.default),\n primary: themeColor_v2_v0(color.light.primary),\n positive: themeColor_v2_v0(color.light.positive),\n caution: themeColor_v2_v0(color.light.caution),\n critical: themeColor_v2_v0(color.light.critical),\n