@sanity/ui
Version:
The Sanity UI components.
2,130 lines • 110 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var color = require("@sanity/color");
function createSelectableTones(opts, base, dark, solid, muted) {
return {
default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
};
}
function _createSelectableStates(opts, base, dark, solid, muted, tone) {
return {
enabled: opts.selectable({
base,
dark,
solid,
muted,
state: "enabled",
tone
}),
hovered: opts.selectable({
base,
dark,
solid,
muted,
state: "hovered",
tone
}),
pressed: opts.selectable({
base,
dark,
solid,
muted,
state: "pressed",
tone
}),
selected: opts.selectable({
base,
dark,
solid,
muted,
state: "selected",
tone
}),
disabled: opts.selectable({
base,
dark,
solid,
muted,
state: "disabled",
tone
})
};
}
function createSolidTones(opts, base, dark, name) {
return {
default: {
enabled: opts.solid({
base,
dark,
tone: "default",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "default",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "default",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "default",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "default",
name,
state: "selected"
})
},
transparent: {
enabled: opts.solid({
base,
dark,
tone: "transparent",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "transparent",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "transparent",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "transparent",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "transparent",
name,
state: "selected"
})
},
primary: {
enabled: opts.solid({
base,
dark,
tone: "primary",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "primary",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "primary",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "primary",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "primary",
name,
state: "selected"
})
},
positive: {
enabled: opts.solid({
base,
dark,
tone: "positive",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "positive",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "positive",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "positive",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "positive",
name,
state: "selected"
})
},
caution: {
enabled: opts.solid({
base,
dark,
tone: "caution",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "caution",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "caution",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "caution",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "caution",
name,
state: "selected"
})
},
critical: {
enabled: opts.solid({
base,
dark,
tone: "critical",
name,
state: "enabled"
}),
disabled: opts.solid({
base,
dark,
tone: "critical",
name,
state: "disabled"
}),
hovered: opts.solid({
base,
dark,
tone: "critical",
name,
state: "hovered"
}),
pressed: opts.solid({
base,
dark,
tone: "critical",
name,
state: "pressed"
}),
selected: opts.solid({
base,
dark,
tone: "critical",
name,
state: "selected"
})
}
};
}
function createButtonTones(opts, base, dark, solid, muted, mode) {
return {
default: opts.button({
base,
dark,
solid: solid.default,
muted: muted.default,
mode
}),
primary: opts.button({
base,
dark,
solid: solid.primary,
muted: muted.primary,
mode
}),
positive: opts.button({
base,
dark,
solid: solid.positive,
muted: muted.positive,
mode
}),
caution: opts.button({
base,
dark,
solid: solid.caution,
muted: muted.caution,
mode
}),
critical: opts.button({
base,
dark,
solid: solid.critical,
muted: muted.critical,
mode
})
};
}
function createButtonModes(opts, base, dark, solid, muted) {
return {
default: createButtonTones(opts, base, dark, solid, muted, "default"),
ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
};
}
function createCardStates(opts, base, dark, name, solid, muted) {
return {
enabled: opts.card({
base,
dark,
name,
state: "enabled",
solid,
muted
}),
disabled: opts.card({
base,
dark,
name,
state: "disabled",
solid,
muted
}),
hovered: opts.card({
base,
dark,
name,
state: "hovered",
solid,
muted
}),
pressed: opts.card({
base,
dark,
name,
state: "pressed",
solid,
muted
}),
selected: opts.card({
base,
dark,
name,
state: "selected",
solid,
muted
})
};
}
const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
default: {
lightest: "hsl(0, 0%, 95%)",
lighter: "hsl(0, 0%, 70%)",
light: "hsl(0, 0%, 65%)",
base: "hsl(0, 0%, 50%)",
dark: "hsl(0, 0%, 35%)",
darker: "hsl(0, 0%, 20%)",
darkest: "hsl(0, 0%, 5%)"
},
transparent: {
lightest: "hsl(240, 100%, 95%)",
lighter: "hsl(240, 100%, 70%)",
light: "hsl(240, 100%, 65%)",
base: "hsl(240, 100%, 50%)",
dark: "hsl(240, 100%, 35%)",
darker: "hsl(240, 100%, 20%)",
darkest: "hsl(240, 100%, 5%)"
},
primary: {
lightest: "hsl(240, 100%, 95%)",
lighter: "hsl(240, 100%, 70%)",
light: "hsl(240, 100%, 65%)",
base: "hsl(240, 100%, 50%)",
dark: "hsl(240, 100%, 35%)",
darker: "hsl(240, 100%, 20%)",
darkest: "hsl(240, 100%, 5%)"
},
positive: {
lightest: "hsl(120, 100%, 95%)",
lighter: "hsl(120, 100%, 70%)",
light: "hsl(120, 100%, 65%)",
base: "hsl(120, 100%, 50%)",
dark: "hsl(120, 100%, 35%)",
darker: "hsl(120, 100%, 20%)",
darkest: "hsl(120, 100%, 5%)"
},
caution: {
lightest: "hsl(60, 100%, 95%)",
lighter: "hsl(60, 100%, 70%)",
light: "hsl(60, 100%, 65%)",
base: "hsl(60, 100%, 50%)",
dark: "hsl(60, 100%, 35%)",
darker: "hsl(60, 100%, 20%)",
darkest: "hsl(60, 100%, 5%)"
},
critical: {
lightest: "hsl(0, 100%, 95%)",
lighter: "hsl(0, 100%, 70%)",
light: "hsl(0, 100%, 65%)",
base: "hsl(0, 100%, 50%)",
dark: "hsl(0, 100%, 35%)",
darker: "hsl(0, 100%, 20%)",
darkest: "hsl(0, 100%, 5%)"
}
}, spots = {
gray: "hsl(0, 0%, 50%)",
red: "hsl(0, 100%, 50%)",
orange: "hsl(30, 100%, 50%)",
yellow: "hsl(60, 100%, 50%)",
green: "hsl(120, 100%, 50%)",
cyan: "hsl(180, 100%, 50%)",
blue: "hsl(240, 100%, 50%)",
purple: "hsl(270, 100%, 50%)",
magenta: "hsl(300, 100%, 50%)"
}, tones = {
transparent: {
bg: [colors.transparent.darkest, colors.transparent.lightest],
fg: [colors.transparent.lightest, colors.transparent.darkest],
border: [colors.transparent.darker, colors.transparent.lighter],
focusRing: [colors.transparent.base, colors.transparent.base]
},
primary: {
bg: [colors.primary.darkest, colors.primary.lightest],
fg: [colors.primary.lightest, colors.primary.darkest],
border: [colors.primary.darker, colors.primary.lighter],
focusRing: [colors.primary.base, colors.primary.base]
},
positive: {
bg: [colors.positive.darkest, colors.positive.lightest],
fg: [colors.positive.lightest, colors.positive.darkest],
border: [colors.positive.darker, colors.positive.lighter],
focusRing: [colors.positive.base, colors.positive.base]
},
caution: {
bg: [colors.caution.darkest, colors.caution.lightest],
fg: [colors.caution.lightest, colors.caution.darkest],
border: [colors.caution.darker, colors.caution.lighter],
focusRing: [colors.caution.base, colors.caution.base]
},
critical: {
bg: [colors.critical.darkest, colors.critical.lightest],
fg: [colors.critical.lightest, colors.critical.darkest],
border: [colors.critical.darker, colors.critical.lighter],
focusRing: [colors.critical.base, colors.critical.base]
}
}, defaultOpts = {
base: ({
dark,
name
}) => name === "default" ? {
bg: dark ? black : white,
fg: dark ? white : black,
border: dark ? colors.default.darkest : colors.default.lightest,
focusRing: colors.primary.base,
shadow: {
outline: black,
umbra: black,
penumbra: black,
ambient: black
},
skeleton: {
from: dark ? white : black,
to: dark ? white : black
}
} : {
bg: tones[name].bg[dark ? 0 : 1],
fg: tones[name].fg[dark ? 0 : 1],
border: tones[name].border[dark ? 0 : 1],
focusRing: tones[name].focusRing[dark ? 0 : 1],
shadow: {
outline: black,
umbra: black,
penumbra: black,
ambient: black
},
skeleton: {
from: dark ? white : black,
to: dark ? white : black
}
},
solid: ({
base,
dark,
state,
tone
}) => {
const color2 = colors[tone];
return state === "hovered" ? {
bg: dark ? color2.light : color2.dark,
bg2: dark ? color2.light : color2.dark,
border: dark ? color2.lighter : color2.darker,
fg: dark ? color2.darkest : color2.lightest,
icon: dark ? color2.darkest : color2.lightest,
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
} : {
bg: color2.base,
bg2: color2.base,
border: dark ? color2.light : color2.dark,
fg: dark ? color2.darkest : color2.lightest,
icon: dark ? color2.darkest : color2.lightest,
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
};
},
muted: ({
base,
dark,
state,
tone
}) => {
const color2 = colors[tone];
return state === "hovered" ? {
bg: dark ? color2.darker : color2.lighter,
bg2: dark ? color2.darker : color2.lighter,
border: dark ? color2.lighter : color2.darker,
fg: dark ? color2.lightest : color2.darkest,
icon: dark ? color2.lightest : color2.darkest,
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
} : {
bg: dark ? color2.darkest : color2.lightest,
bg2: dark ? color2.darkest : color2.lightest,
border: dark ? color2.darker : color2.lighter,
fg: dark ? color2.lighter : color2.darker,
icon: dark ? color2.lighter : color2.darker,
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
};
},
button: ({
base,
mode,
muted,
solid
}) => mode === "bleed" ? {
...muted,
enabled: {
bg: "transparent",
bg2: "transparent",
fg: muted.enabled.fg,
icon: muted.enabled.fg,
border: "transparent",
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
},
hovered: {
bg: muted.enabled.bg,
bg2: muted.enabled.bg,
fg: muted.hovered.fg,
icon: muted.hovered.fg,
border: "transparent",
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
}
} : mode === "ghost" ? {
...solid,
enabled: muted.enabled
} : solid,
card: ({
base
}) => ({
bg: black,
bg2: black,
fg: black,
icon: black,
border: black,
muted: {
fg: black
},
accent: {
fg: black
},
link: {
fg: black
},
code: {
bg: black,
fg: black
},
skeleton: base.skeleton
}),
input: () => ({
bg: black,
bg2: black,
fg: black,
border: black,
placeholder: black
}),
selectable: ({
muted,
state,
tone
}) => muted[tone][state],
spot: ({
key
}) => spots[key],
syntax: () => ({
atrule: black,
attrName: black,
attrValue: black,
attribute: black,
boolean: black,
builtin: black,
cdata: black,
char: black,
class: black,
className: black,
comment: black,
constant: black,
deleted: black,
doctype: black,
entity: black,
function: black,
hexcode: black,
id: black,
important: black,
inserted: black,
keyword: black,
number: black,
operator: black,
prolog: black,
property: black,
pseudoClass: black,
pseudoElement: black,
punctuation: black,
regex: black,
selector: black,
string: black,
symbol: black,
tag: black,
unit: black,
url: black,
variable: black
})
};
function createInputModes(opts, base, dark, solid, muted) {
return {
default: {
enabled: opts.input({
base,
dark,
mode: "default",
state: "enabled",
solid: solid.default,
muted: muted.default
}),
disabled: opts.input({
base,
dark,
mode: "default",
state: "disabled",
solid: solid.default,
muted: muted.default
}),
hovered: opts.input({
base,
dark,
mode: "default",
state: "hovered",
solid: solid.default,
muted: muted.default
}),
readOnly: opts.input({
base,
dark,
mode: "default",
state: "readOnly",
solid: solid.default,
muted: muted.default
})
},
invalid: {
enabled: opts.input({
base,
dark,
mode: "invalid",
state: "enabled",
solid: solid.default,
muted: muted.default
}),
disabled: opts.input({
base,
dark,
mode: "invalid",
state: "disabled",
solid: solid.default,
muted: muted.default
}),
hovered: opts.input({
base,
dark,
mode: "invalid",
state: "hovered",
solid: solid.default,
muted: muted.default
}),
readOnly: opts.input({
base,
dark,
mode: "invalid",
state: "readOnly",
solid: solid.default,
muted: muted.default
})
}
};
}
function createMutedTones(opts, base, dark, name) {
return {
default: {
enabled: opts.muted({
base,
dark,
tone: "default",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "default",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "default",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "default",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "default",
name,
state: "selected"
})
},
transparent: {
enabled: opts.muted({
base,
dark,
tone: "transparent",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "transparent",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "transparent",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "transparent",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "transparent",
name,
state: "selected"
})
},
primary: {
enabled: opts.muted({
base,
dark,
tone: "primary",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "primary",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "primary",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "primary",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "primary",
name,
state: "selected"
})
},
positive: {
enabled: opts.muted({
base,
dark,
tone: "positive",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "positive",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "positive",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "positive",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "positive",
name,
state: "selected"
})
},
caution: {
enabled: opts.muted({
base,
dark,
tone: "caution",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "caution",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "caution",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "caution",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "caution",
name,
state: "selected"
})
},
critical: {
enabled: opts.muted({
base,
dark,
tone: "critical",
name,
state: "enabled"
}),
disabled: opts.muted({
base,
dark,
tone: "critical",
name,
state: "disabled"
}),
hovered: opts.muted({
base,
dark,
tone: "critical",
name,
state: "hovered"
}),
pressed: opts.muted({
base,
dark,
tone: "critical",
name,
state: "pressed"
}),
selected: opts.muted({
base,
dark,
tone: "critical",
name,
state: "selected"
})
}
};
}
function createSpot(opts, base, dark) {
return {
gray: opts.spot({
base,
dark,
key: "gray"
}),
blue: opts.spot({
base,
dark,
key: "blue"
}),
purple: opts.spot({
base,
dark,
key: "purple"
}),
magenta: opts.spot({
base,
dark,
key: "magenta"
}),
red: opts.spot({
base,
dark,
key: "red"
}),
orange: opts.spot({
base,
dark,
key: "orange"
}),
yellow: opts.spot({
base,
dark,
key: "yellow"
}),
green: opts.spot({
base,
dark,
key: "green"
}),
cyan: opts.spot({
base,
dark,
key: "cyan"
})
};
}
function createColorTheme(partialOpts = {}) {
const builders = {
...defaultOpts,
...partialOpts
};
return {
light: _createColorScheme(builders, !1),
dark: _createColorScheme(builders, !0)
};
}
function _createColorScheme(opts, dark) {
return {
default: _createColor(opts, dark, "default"),
transparent: _createColor(opts, dark, "transparent"),
primary: _createColor(opts, dark, "primary"),
positive: _createColor(opts, dark, "positive"),
caution: _createColor(opts, dark, "caution"),
critical: _createColor(opts, dark, "critical")
};
}
function _createColor(opts, dark, name) {
const base = opts.base({
dark,
name
}), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
return {
base,
button: createButtonModes(opts, base, dark, solid, muted),
card: createCardStates(opts, base, dark, name, solid, muted),
dark,
input: createInputModes(opts, base, dark, solid, muted),
selectable: createSelectableTones(opts, base, dark, solid, muted),
spot: createSpot(opts, base, dark),
syntax: opts.syntax({
base,
dark
}),
solid,
muted
};
}
const defaultThemeConfig = {
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: 1
},
focusRing: {
offset: -1,
width: 1
}
},
card: {
border: {
width: 1
},
focusRing: {
offset: -1,
width: 1
},
shadow: {
outline: 0.5
}
},
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, 3, 6, 9, 12, 21],
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: 1
},
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',
// },
// },
}
}, defaultThemeFonts = {
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',
weights: {
regular: 700,
medium: 800,
semibold: 900,
bold: 900
},
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
}, {
ascenderHeight: 8,
descenderHeight: 8,
fontSize: 27,
iconSize: 41,
lineHeight: 35,
letterSpacing: 0
}, {
ascenderHeight: 9.5,
descenderHeight: 8.5,
fontSize: 33,
iconSize: 49,
lineHeight: 41,
letterSpacing: 0
}, {
ascenderHeight: 10.5,
descenderHeight: 9.5,
fontSize: 38,
iconSize: 53,
lineHeight: 47,
letterSpacing: 0
}]
},
label: {
family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
weights: {
regular: 600,
medium: 700,
semibold: 800,
bold: 900
},
sizes: [{
ascenderHeight: 2,
descenderHeight: 2,
fontSize: 8.1,
iconSize: 13,
lineHeight: 10,
letterSpacing: 0.5
}, {
ascenderHeight: 2,
descenderHeight: 2,
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: 2,
descenderHeight: 2,
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
}]
}
}, cache$4 = /* @__PURE__ */ new WeakMap();
function themeColor_v0_v2(color_v0) {
const cached_v2 = cache$4.get(color_v0);
if (cached_v2) return cached_v2;
const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
_blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
_dark: color_v0.dark,
accent: base.accent,
avatar: base.avatar,
backdrop: color_v0.base.shadow.ambient,
badge: base.badge,
bg: color_v0.base.bg,
border: color_v0.base.border,
button: {
default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
},
code: base.code,
fg: color_v0.base.fg,
focusRing: color_v0.base.focusRing,
icon: base.muted.fg,
input: {
default: inputStatesThemeColor_v0_v2(color_v0.input.default),
invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
},
kbd: base.kbd,
link: base.link,
muted: {
...base.muted,
bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
},
selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
shadow: color_v0.base.shadow,
skeleton: {
from: color_v0.skeleton?.from || color_v0.base.border,
to: color_v0.skeleton?.to || color_v0.base.border
},
syntax: color_v0.syntax
};
return cache$4.set(color_v0, color_v2), color_v2;
}
function stateTonesThemeColor_v0_v2(v0, t) {
return {
default: {
enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
selected: stateThemeColor_v0_v2(v0, t.default.selected),
disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
},
neutral: {
enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
selected: stateThemeColor_v0_v2(v0, t.default.selected),
disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
},
primary: {
enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
selected: stateThemeColor_v0_v2(v0, t.primary.selected),
disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
},
suggest: {
enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
selected: stateThemeColor_v0_v2(v0, t.primary.selected),
disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
},
positive: {
enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
selected: stateThemeColor_v0_v2(v0, t.positive.selected),
disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
},
caution: {
enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
selected: stateThemeColor_v0_v2(v0, t.caution.selected),
disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
},
critical: {
enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
selected: stateThemeColor_v0_v2(v0, t.critical.selected),
disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
}
};
}
function stateThemeColor_v0_v2(v0, state) {
return {
...state,
avatar: {
gray: {
bg: v0.spot.gray,
fg: v0.base.bg
},
blue: {
bg: v0.spot.blue,
fg: v0.base.bg
},
purple: {
bg: v0.spot.purple,
fg: v0.base.bg
},
magenta: {
bg: v0.spot.magenta,
fg: v0.base.bg
},
red: {
bg: v0.spot.red,
fg: v0.base.bg
},
orange: {
bg: v0.spot.orange,
fg: v0.base.bg
},
yellow: {
bg: v0.spot.yellow,
fg: v0.base.bg
},
green: {
bg: v0.spot.green,
fg: v0.base.bg
},
cyan: {
bg: v0.spot.cyan,
fg: v0.base.bg
}
},
badge: {
default: {
bg: v0.muted.default.enabled.bg,
fg: v0.muted.default.enabled.fg,
dot: v0.muted.default.enabled.muted.fg,
icon: v0.muted.default.enabled.muted.fg
},
neutral: {
bg: v0.muted.transparent.enabled.bg,
fg: v0.muted.transparent.enabled.fg,
dot: v0.muted.transparent.enabled.muted.fg,
icon: v0.muted.transparent.enabled.muted.fg
},
primary: {
bg: v0.muted.primary.enabled.bg,
fg: v0.muted.primary.enabled.fg,
dot: v0.muted.primary.enabled.muted.fg,
icon: v0.muted.primary.enabled.muted.fg
},
suggest: {
bg: v0.muted.primary.enabled.bg,
fg: v0.muted.primary.enabled.fg,
dot: v0.muted.primary.enabled.muted.fg,
icon: v0.muted.primary.enabled.muted.fg
},
positive: {
bg: v0.muted.positive.enabled.bg,
fg: v0.muted.positive.enabled.fg,
dot: v0.muted.positive.enabled.muted.fg,
icon: v0.muted.positive.enabled.muted.fg
},
caution: {
bg: v0.muted.caution.enabled.bg,
fg: v0.muted.caution.enabled.fg,
dot: v0.muted.caution.enabled.muted.fg,
icon: v0.muted.caution.enabled.muted.fg
},
critical: {
bg: v0.muted.critical.enabled.bg,
fg: v0.muted.critical.enabled.fg,
dot: v0.muted.critical.enabled.muted.fg,
icon: v0.muted.critical.enabled.muted.fg
}
},
kbd: {
bg: v0.muted.default.enabled.bg,
fg: v0.muted.default.enabled.fg,
border: v0.muted.default.enabled.border
},
muted: {
...v0.muted.default.enabled.muted,
bg: state.bg2 || state.bg
},
skeleton: {
from: state.skeleton?.from || state.border,
to: state.skeleton?.to || state.border
}
};
}
function inputStatesThemeColor_v0_v2(states) {
return {
enabled: inputStateThemeColor_v0_v2(states.enabled),
disabled: inputStateThemeColor_v0_v2(states.disabled),
readOnly: inputStateThemeColor_v0_v2(states.readOnly),
hovered: inputStateThemeColor_v0_v2(states.hovered)
};
}
function inputStateThemeColor_v0_v2(state) {
return {
bg: state.bg,
border: state.border,
fg: state.fg,
muted: {
bg: state.bg2
},
placeholder: state.placeholder
};
}
const cache$3 = /* @__PURE__ */ new WeakMap();
function getTheme_v2(theme) {
if (theme.sanity.v2?._resolved) return theme.sanity.v2;
const cached_v2 = cache$3.get(theme);
if (cached_v2) return cached_v2;
const v2 = {
_version: 2,
_resolved: !0,
avatar: {
...defaultThemeConfig.avatar,
...theme.sanity.avatar
},
button: {
...defaultThemeConfig.button,
...theme.sanity.button
},
card: defaultThemeConfig.card,
color: themeColor_v0_v2(theme.sanity.color),
container: theme.sanity.container,
font: theme.sanity.fonts,
input: {
...defaultThemeConfig.input,
...theme.sanity.input,
checkbox: {
...defaultThemeConfig.input.checkbox,
...theme.sanity.input.checkbox
},
radio: {
...defaultThemeConfig.input.radio,
...theme.sanity.input.radio
},
switch: {
...defaultThemeConfig.input.switch,
...theme.sanity.input.switch
}
},
layer: theme.sanity.layer ?? defaultThemeConfig.layer,
media: theme.sanity.media,
radius: theme.sanity.radius,
shadow: theme.sanity.shadows,
space: theme.sanity.space,
style: theme.sanity.styles
};
return cache$3.set(theme, v2), v2;
}
function is_v0(themeProp) {
return themeProp._version === 0;
}
function is_v2(themeProp) {
return themeProp._version === 2;
}
const cache$2 = /* @__PURE__ */ new WeakMap();
function v0_v2(v0) {
if (v0.v2) return v0.v2;
const cached_v2 = cache$2.get(v0);
if (cached_v2) return cached_v2;
const {
avatar,
button,
color: color2,
container,
fonts: font,
input,
layer,
media,
radius,
shadows: shadow,
space,
styles: style
} = v0, v2 = {
_version: 2,
avatar: {
...defaultThemeConfig.avatar,
...avatar
},
button: {
...defaultThemeConfig.button,
...button
},
card: defaultThemeConfig.card,
color: {
light: {
transparent: themeColor_v0_v2(color2.light.transparent),
default: themeColor_v0_v2(color2.light.default),
neutral: themeColor_v0_v2(color2.light.transparent),
primary: themeColor_v0_v2(color2.light.primary),
suggest: themeColor_v0_v2(color2.light.primary),
positive: themeColor_v0_v2(color2.light.positive),
caution: themeColor_v0_v2(color2.light.caution),
critical: themeColor_v0_v2(color2.light.critical)
},
dark: {
transparent: themeColor_v0_v2(color2.dark.transparent),
default: themeColor_v0_v2(color2.dark.default),
neutral: themeColor_v0_v2(color2.dark.transparent),
primary: themeColor_v0_v2(color2.dark.primary),
suggest: themeColor_v0_v2(color2.dark.primary),
positive: themeColor_v0_v2(color2.dark.positive),
caution: themeColor_v0_v2(color2.dark.caution),
critical: themeColor_v0_v2(color2.dark.critical)
}
},
container,
font,
input: {
...defaultThemeConfig.input,
...input,
checkbox: {
...defaultThemeConfig.input.checkbox,
...input.checkbox
},
radio: {
...defaultThemeConfig.input.radio,
...input.radio
},
switch: {
...defaultThemeConfig.input.switch,
...input.switch
}
},
layer: layer ?? defaultThemeConfig.layer,
media,
radius,
shadow,
space,
style
};
return cache$2.set(v0, v2), v2;
}
const cache$1 = /* @__PURE__ */ new WeakMap();
function v2_v0(v2) {
const cachedTheme = cache$1.get(v2);
if (cachedTheme) return cachedTheme;
const {
avatar,
button,
color: color2,
container,
font: fonts,
input,
media,
radius,
shadow: shadows,
space,
style: styles
} = v2;
return {
_version: 0,
avatar,
button,
container,
color: {
light: {
transparent: themeColor_v2_v0(color2.light.transparent),
default: themeColor_v2_v0(color2.light.default),
primary: themeColor_v2_v0(color2.light.primary),
positive: themeColor_v2_v0(color2.light.positive),
caution: themeColor_v2_v0(color2.light.caution),
critical: themeColor_v2_v0(color2.light.critical)
},
dark: {
transparent: themeColor_v2_v0(color2.dark.transparent),
default: themeColor_v2_v0(color2.dark.default),
primary: themeColor_v2_v0(color2.dark.primary),
positive: themeColor_v2_v0(color2.dark.positive),
caution: themeColor_v2_v0(color2.dark.caution),
critical: themeColor_v2_v0(color2.dark.critical)
}
},
focusRing: input.text.focusRing,
fonts,
input,
media,
radius,
shadows,
space,
styles,
v2
};
}
function themeColor_v2_v0(color_v2) {
return {
base: {
bg: color_v2.bg,
fg: color_v2.fg,
border: color_v2.border,
focusRing: color_v2.focusRing,
shadow: color_v2.shadow
},
button: color_v2.button,
card: color_v2.selectable.default,
dark: color_v2._dark,
input: {
default: inputStatesThemeColor_v2_v0(color_v2.input.default),
invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid)
},
muted: {
...color_v2.button.ghost,
transparent: color_v2.button.ghost.default
},
solid: {
...color_v2.button.default,
transparent: color_v2.button.default.default
},
selectable: color_v2.selectable,
spot: {
gray: color_v2.avatar.gray.bg,
blue: color_v2.avatar.blue.bg,
purple: color_v2.avatar.purple.bg,
magenta: color_v2.avatar.magenta.bg,
red: color_v2.avatar.red.bg,
orange: color_v2.avatar.orange.bg,
yellow: color_v2.avatar.yellow.bg,
green: color_v2.avatar.green.bg,
cyan: color_v2.avatar.cyan.bg
},
syntax: color_v2.syntax
};
}
function inputStatesThemeColor_v2_v0(t) {
return {
enabled: inputStateThemeColor_v2_v0(t.enabled),
disabled: inputStateThemeColor_v2_v0(t.disabled),
readOnly: inputStateThemeColor_v2_v0(t.readOnly),
hovered: inputStateThemeColor_v2_v0(t.hovered)
};
}
function inputStateThemeColor_v2_v0(t) {
return {
bg: t.bg,
bg2: t.muted.bg,
border: t.border,
fg: t.fg,
placeholder: t.placeholder
};
}
const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
"transparent",
"default",
"neutral",
"primary",
// deprecated
"suggest",
"positive",
"caution",
"critical"
], THEME_COLOR_STATE_TONES = [
"default",
"neutral",
"primary",
// deprecated
"suggest",
"positive",
"caution",
"critical"
], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = color.COLOR_HUES;
function isColorBlendModeValue(str) {
return THEME_COLOR_BLEND_MODES.includes(str);
}
function isColorHueKey(str) {
return color.COLOR_HUES.includes(str);
}
function isColorTintKey(str) {
return color.COLOR_TINTS.includes(str);
}
function isColorButtonMode(str) {
return THEME_COLOR_BUTTON_MODES.includes(str);
}
const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
function parseTokenKey(str) {
const segments = str.split("/"), segment0 = segments.shift() || "";
if (isColorConfigBaseTone(segment0)) {
const key = segments.join("/");
if (isColorConfigBaseKey(key))
return {
type: "base",
tone: segment0,
key
};
if (isColorConfigBlendKey(key))
return {
type: "base",
tone: segment0,
key
};
}
if (segment0 === "button") {
const segment1 = segments.shift() || "";
if (isColorConfigStateTone(segment1)) {
const segment2 = segments.shift() || "";
if (isColorButtonMode(segment2)) {
const key = segments.join("/");
if (isColorConfigStateKey(key))
return {
type: "button",
tone: segment1,
mode: segment2,
key
};
if (isColorConfigBlendKey(key))
return {
type: "button",
tone: segment1,
mode: segment2,
key
};
}
}
}
}
function isColorMixPercentValue(str) {
return /^\d+%$/.test(str);
}
function parseTokenValue(str) {
const segments = str.split("/");
let nextSegment = segments.shift() || "";
const [segment0, segment0mix] = nextSegment.split(" ");
if (isColorTintKey(segment0)) {
const tint = segment0, segment1 = segments.shift() || "";
if (isColorMixPercentValue(segment0mix)) {
const mix2 = Number(segment0mix.slice(0, -1)) / 100;
return {
type: "color",
tint,
mix: mix2
};
}
if (isColorOpacityValue(segment1)) {
const opacity = Number(segment1);
return {
type: "color",
tint,
opacity
};
}
return {
type: "color",
tint
};
}
if (isColorValue(segment0)) {
const key = segment0, segment1 = segments.shift() || "";
if (isColorMixPercentValue(segment0mix)) {
const mix2 = Number(segment0mix.slice(0, -1)) / 100;
return {
type: "color",
key,
mix: mix2
};
}
if (isColorOpacityValue(segment1)) {
const opacity = Number(segment1);
return {
type: "color",
key,
opacity
};
}
return {
type: "color",
key
};
}
if (isColorHueKey(segment0)) {
const hue = segment0;
nextSegment = segments.shift() || "";
const [segment1, segment1mix] = nextSegment.split(" ");
if (isColorTintKey(segment1)) {
const tint = segment1, segment2 = segments.shift() || "";
if (isColorMixPercentValue(segment1mix)) {
const mix2 = Number(segment1mix.slice(0, -1)) / 100;
return {
type: "color",
hue,
tint,
mix: mix2
};
}
if (isColorOpacityValue(segment2)) {
const opacity = Number(segment2);
return {
type: "color",
hue,
tint,
opacity
};
}
return {
type: "color",
hue,
tint
};
}
return {
type: "hue",
value: hue
};
}
if (isColorBlendModeValue(segment0))
return {
type: "blendMode",
value: segment0
};
}
function isColorConfigBaseTone(str) {
return COLOR_CONFIG_CARD_TONES.includes(str);
}
function isColorConfigBaseKey(str) {
return COLOR_CONFIG_CARD_KEYS.includes(str);
}
function isColorConfigStateKey(str) {
return COLOR_CONFIG_STATE_KEYS.includes(str);
}
function isColorConfigStateTone(str) {
return COLOR_CONFIG_STATE_TONES.includes(str);
}
function isColorConfigBlendKey(str) {
return COLOR_CONFIG_BLEND_KEYS.includes(str);
}
function isColorTokenValue(str) {
return parseTokenValue(str)?.type === "color" || parseTokenValue(str)?.type === "hue";
}
function isColorValue(str) {
return str === "black" || str === "white";
}
function isColorOpacityValue(str) {
return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
}
function compileColorTokenValue(node) {
let key = "";
return node.key === "black" || node.key === "white" ? key = node.key : key = `${node.hue}/${node.tint}`, node.mix !== void 0 ? `${key} ${node.mix * 100}%` : (node.opacity !== void 0 && (key += `/${node.opacity}`), key);
}
const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
const {
hue,
scheme
} = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
if (!node || node.type !== "color")
throw new Error(`Invalid color token: ${value[0]}`);
return compileColorTokenValue({
...node,
hue: node.hue || hue
});
}
const defaultColorTokens = {
base: {
"*": {
_blend: ["multiply", "screen"],
accent: {
fg: ["purple/600", "purple/400"]
},
avatar: {
"*": {
_blend: ["screen", "multiply"],
bg: ["500", "400"],
fg: ["white", "black"]
}
},
backdrop: ["gray/200/0.5", "black/0.5"],
badge: {
"*": {
bg: ["100", "900"],
fg: ["600", "400"],
icon: ["500", "500"],
dot: ["500", "500"]
},
positive: {
bg: ["2