themes: {
artDeco: {
borders: { frame: "3px"; width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#e7a3b0"; light: "#923946" };
info: { dark: "#a1c6e1"; light: "#325d7c" };
neutral: { dark: "#bcc8c5"; light: "#414d4c" };
primary: { dark: "#d9b868"; light: "#896613" };
success: { dark: "#9ad1b5"; light: "#285d50" };
warning: { dark: "#ebbe87"; light: "#945c21" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: {
radius: "square";
shadow: "sm";
slots: { root: { border: "double"; borderWidth: "frame" } };
};
Dialog: {
radius: "square";
slots: {
header: { textStyle: "heading" };
root: { border: "double"; borderWidth: "frame" };
};
};
Drawer: {
size: "sm";
slots: { root: { border: "double"; borderWidth: "frame" } };
};
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: {
slots: {
header: {
border: "double";
borderWidth: "frame";
textStyle: "label";
};
};
};
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "square";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.75rem";
paddingY: "0.5rem";
};
};
focusRing: { color: "primary"; offset: "4px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#080d0c"; light: "#f2f3ed" };
border: { dark: "#a68c4c"; light: "#806c36" };
muted: { dark: "#b7c3b9"; light: "#56635e" };
surface: { dark: "#17221f"; light: "#ffffff" };
text: { dark: "#f3eee0"; light: "#17221f" };
};
radii: {
lg: "0";
md: "0";
rounded: "9999px";
sm: "0";
square: "0";
xl: "0";
};
shadows: {
lg: "0 24px 56px -12px light-dark(rgb(23 34 31 / 0.28), rgb(0 0 0 / 0.75))";
md: "0 12px 32px -8px light-dark(rgb(23 34 31 / 0.2), rgb(0 0 0 / 0.6))";
sm: "0 0 0 1px light-dark(#806c36, #a68c4c), 0 0 0 4px light-dark(#f2f3ed, #080d0c), 0 0 0 5px light-dark(#806c36, #a68c4c)";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.875rem";
};
md: {
fontSize: "0.875rem";
height: "2.75rem";
iconSize: "1rem";
paddingX: "1.5rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.125rem";
height: "3.75rem";
iconSize: "1.5rem";
paddingX: "2.25rem";
};
xs: {
fontSize: "0.75rem";
height: "1.875rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.875rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.75rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "sans";
letterSpacing: "0.04em";
lineHeight: 1.5;
size: "0.8125rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "0.08em";
lineHeight: 1.2;
size: "2.25rem";
weight: 500;
};
heading: {
family: "sans";
letterSpacing: "0.06em";
lineHeight: 1.3;
size: "1.5rem";
weight: 500;
};
label: {
family: "sans";
letterSpacing: "0.1em";
lineHeight: 1.5;
size: "0.75rem";
weight: 600;
};
subheading: {
family: "sans";
letterSpacing: "0.035em";
lineHeight: 1.4;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "neutral"; text: "color" };
soft: { background: "tint"; border: "neutral"; text: "color" };
solid: { background: "fill"; border: "neutral"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
bloom: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fb7185"; light: "#e11d48" };
info: { dark: "#7dd3fc"; light: "#0369a1" };
neutral: { dark: "#b5aecf"; light: "#6b6485" };
primary: { dark: "#c4b5fd"; light: "#7c3aed" };
success: { dark: "#5eead4"; light: "#0f8a5f" };
warning: { dark: "#fdba74"; light: "#c2410c" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Badge: { radius: "rounded" };
Button: { radius: "rounded" };
Combobox: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
IconButton: { radius: "rounded" };
Input: { radius: "rounded" };
Select: { radius: "rounded" };
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
ToggleGroup: { radius: "rounded" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "lg";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.9375rem";
paddingX: "1.25rem";
paddingY: "0.875rem";
};
compact: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.5rem";
};
};
focusRing: { color: "primary"; offset: "3px"; width: "3px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#14111f"; light: "#f7f4ff" };
border: { dark: "#342c4d"; light: "#e6dff7" };
muted: { dark: "#aaa3c4"; light: "#6b6485" };
surface: { dark: "#1f1a30"; light: "#ffffff" };
text: { dark: "#efeafc"; light: "#2a2540" };
};
radii: {
lg: "1.5rem";
md: "1rem";
rounded: "9999px";
sm: "0.75rem";
square: "0";
xl: "2rem";
};
shadows: { lg: string; md: string; sm: string };
sizes: {
lg: {
fontSize: "1.0625rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.625rem";
};
md: {
fontSize: "0.9375rem";
height: "2.75rem";
iconSize: "1.125rem";
paddingX: "1.25rem";
};
sm: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.1875rem";
height: "3.75rem";
iconSize: "1.5rem";
paddingX: "2rem";
};
xs: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.875rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.55; size: "1rem"; weight: 500 };
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.1;
size: "2.5rem";
weight: 800;
};
heading: {
family: "sans";
lineHeight: 1.2;
size: "1.625rem";
weight: 800;
};
label: {
family: "sans";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.1875rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
brutalist: {
borders: { heavy: "4px"; width: "2px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff5ca1"; light: "#c2005a" };
info: { dark: "#7aa2ff"; light: "#2f6bff" };
neutral: { dark: "#f5f5f5"; light: "#1a1a1a" };
primary: { dark: "#ff5a4d"; light: "#ff3d2e" };
success: { dark: "#3dfc9a"; light: "#00b862" };
warning: { dark: "#ffb14a"; light: "#ff8a00" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { slots: { root: { border: "double"; borderWidth: "heavy" } } };
Dialog: { slots: { footer: { background: "tint"; padding: "md" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: {
color: "neutral";
offset: "3px";
style: "dashed";
width: "3px";
};
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0f0f0f"; light: "#fffdf2" };
border: { dark: "#ffffff"; light: "#000000" };
muted: { dark: "#cfcfcf"; light: "#3d3d3d" };
surface: { dark: "#1a1a1a"; light: "#ffffff" };
text: { dark: "#ffffff"; light: "#000000" };
};
radii: {
lg: "0";
md: "0";
rounded: "9999px";
sm: "0";
square: "0";
xl: "0";
};
shadows: {
lg: "8px 8px 0 0 light-dark(#000000, #ffffff)";
md: "5px 5px 0 0 light-dark(#000000, #ffffff)";
sm: "3px 3px 0 0 light-dark(#000000, #ffffff)";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.25rem";
};
md: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
sm: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
xl: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.5rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.5rem";
xl: "2rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.55;
size: "0.875rem";
weight: 400;
};
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.75rem";
weight: 400;
};
code: {
family: "mono";
lineHeight: 1.5;
size: "0.8125rem";
weight: 400;
};
display: {
family: "sans";
letterSpacing: "-0.04em";
lineHeight: 1;
size: "2.5rem";
weight: 800;
};
heading: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.15;
size: "1.5rem";
weight: 800;
};
label: {
family: "sans";
letterSpacing: "0.04em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.125rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "neutral" };
outline: { background: "none"; border: "neutral"; text: "neutral" };
soft: { background: "tint"; border: "neutral"; text: "neutral" };
solid: { background: "fill"; border: "neutral"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
circuit: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fda4af"; light: "#c02d4d" };
info: { dark: "#a5b4fc"; light: "#3b54b0" };
neutral: { dark: "#adc6db"; light: "#465d73" };
primary: { dark: "#67e8f9"; light: "#006c83" };
success: { dark: "#6ee7b7"; light: "#14734f" };
warning: { dark: "#fcd34d"; light: "#925900" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: { slots: { footer: { background: "tint"; padding: "md" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Tabs: { slots: { trigger: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.875rem";
paddingY: "0.75rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
};
focusRing: { color: "primary"; offset: "3px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#07111f"; light: "#edf4f8" };
border: { dark: "#36546f"; light: "#b4c9dc" };
muted: { dark: "#9bb4cc"; light: "#50677e" };
surface: { dark: "#11243a"; light: "#fafdff" };
text: { dark: "#e2f0fb"; light: "#102a43" };
};
radii: {
lg: "6px";
md: "4px";
rounded: "9999px";
sm: "2px";
square: "0";
xl: "8px";
};
shadows: {
lg: "0 20px 48px light-dark(rgb(16 42 67 / 0.2), rgb(0 0 0 / 0.7))";
md: "0 8px 24px light-dark(rgb(16 42 67 / 0.14), rgb(0 0 0 / 0.55))";
sm: "0 0 0 1px light-dark(rgb(0 108 131 / 0.08), rgb(103 232 249 / 0.08))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.125rem";
iconSize: "1.25rem";
paddingX: "1.5rem";
};
md: {
fontSize: "0.875rem";
height: "2.625rem";
iconSize: "1.125rem";
paddingX: "1.125rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.125rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.125rem";
height: "3.625rem";
iconSize: "1.5rem";
paddingX: "1.875rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.625rem";
xl: "2.25rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"Segoe UI\", system-ui, -apple-system, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.55;
size: "0.9375rem";
weight: 400;
};
caption: {
family: "mono";
lineHeight: 1.5;
size: "0.75rem";
weight: 400;
};
code: {
family: "mono";
lineHeight: 1.5;
size: "0.8125rem";
weight: 400;
};
display: {
family: "sans";
letterSpacing: "-0.035em";
lineHeight: 1.15;
size: "2.25rem";
weight: 600;
};
heading: {
family: "sans";
letterSpacing: "-0.025em";
lineHeight: 1.25;
size: "1.5rem";
weight: 600;
};
label: {
family: "mono";
letterSpacing: "0.025em";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
compact: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#f87171"; light: "#b91c1c" };
info: { dark: "#60a5fa"; light: "#1d4ed8" };
neutral: { dark: "#9aa5b1"; light: "#52606d" };
primary: { dark: "#2dd4bf"; light: "#0f766e" };
success: { dark: "#4ade80"; light: "#15803d" };
warning: { dark: "#facc15"; light: "#a16207" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "compact";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.8125rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
compact: { fontSize: "0.75rem"; paddingX: "0.5rem"; paddingY: "0.25rem" };
};
focusRing: { color: "info"; offset: "1px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0b0f14"; light: "#eef1f4" };
border: { dark: "#2a333d"; light: "#cbd2d9" };
muted: { dark: "#9aa5b1"; light: "#52606d" };
surface: { dark: "#141a21"; light: "#ffffff" };
text: { dark: "#e4e7eb"; light: "#1f2933" };
};
radii: {
lg: "4px";
md: "3px";
rounded: "9999px";
sm: "2px";
square: "0";
xl: "6px";
};
shadows: {
lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))";
md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))";
sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))";
};
sizes: {
lg: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
md: {
fontSize: "0.8125rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
sm: {
fontSize: "0.75rem";
height: "1.5rem";
iconSize: "0.75rem";
paddingX: "0.5rem";
};
xl: {
fontSize: "1rem";
height: "2.75rem";
iconSize: "1.125rem";
paddingX: "1rem";
};
xs: {
fontSize: "0.6875rem";
height: "1.25rem";
iconSize: "0.75rem";
paddingX: "0.375rem";
};
};
spacing: {
lg: "0.75rem";
md: "0.5rem";
sm: "0.25rem";
xl: "1rem";
xs: "0.125rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 400;
};
caption: {
family: "sans";
lineHeight: 1.4;
size: "0.75rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.45; size: "0.75rem"; weight: 400 };
display: {
family: "sans";
lineHeight: 1.25;
size: "1.5rem";
weight: 600;
};
heading: {
family: "sans";
lineHeight: 1.3;
size: "1.125rem";
weight: 600;
};
label: {
family: "sans";
letterSpacing: "0.02em";
lineHeight: 1.35;
size: "0.75rem";
weight: 600;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "0.9375rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "neutral"; text: "neutral" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
cyberpunk: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff739b"; light: "#cf234d" };
info: { dark: "#59efff"; light: "#006e80" };
neutral: { dark: "#c6b4e6"; light: "#534369" };
primary: { dark: "#ff70de"; light: "#ad007c" };
success: { dark: "#bdff5b"; light: "#267400" };
warning: { dark: "#ffe55b"; light: "#8a5c00" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: {
radius: "md";
slots: { header: { textStyle: "heading" }; root: { shadow: "lg" } };
};
Drawer: { size: "sm"; slots: { root: { shadow: "md" } } };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.8125rem";
paddingX: "0.875rem";
paddingY: "0.75rem";
};
compact: {
fontSize: "0.75rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
};
focusRing: { color: "info"; offset: "4px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#090516"; light: "#f2ebfc" };
border: { dark: "#8d53a5"; light: "#ae78bd" };
muted: { dark: "#c0a9d5"; light: "#695176" };
surface: { dark: "#1c1233"; light: "#fffbff" };
text: { dark: "#f8eeff"; light: "#29113d" };
};
radii: {
lg: "4px";
md: "2px";
rounded: "9999px";
sm: "0";
square: "0";
xl: "6px";
};
shadows: {
lg: "0 0 0 1px light-dark(rgb(173 0 124 / 0.4), rgb(255 112 222 / 0.7)), 0 0 48px light-dark(rgb(173 0 124 / 0.2), rgb(255 112 222 / 0.25))";
md: "0 0 0 1px light-dark(rgb(0 110 128 / 0.4), rgb(89 239 255 / 0.6)), 0 0 28px light-dark(rgb(0 110 128 / 0.14), rgb(89 239 255 / 0.2))";
sm: "0 0 0 1px light-dark(rgb(173 0 124 / 0.3), rgb(255 112 222 / 0.5)), 0 0 16px light-dark(rgb(173 0 124 / 0.1), rgb(255 112 222 / 0.18))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.125rem";
iconSize: "1.25rem";
paddingX: "1.5rem";
};
md: {
fontSize: "0.875rem";
height: "2.625rem";
iconSize: "1.125rem";
paddingX: "1.125rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.125rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.125rem";
height: "3.625rem";
iconSize: "1.5rem";
paddingX: "1.875rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.625rem";
xl: "2.25rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
};
fonts: { body: "mono"; heading: "mono"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: {
family: "mono";
lineHeight: 1.6;
size: "0.875rem";
weight: 400;
};
caption: {
family: "mono";
lineHeight: 1.5;
size: "0.75rem";
weight: 400;
};
code: {
family: "mono";
lineHeight: 1.5;
size: "0.8125rem";
weight: 400;
};
display: {
family: "mono";
letterSpacing: "-0.045em";
lineHeight: 1.15;
size: "2.25rem";
weight: 700;
};
heading: {
family: "mono";
letterSpacing: "-0.025em";
lineHeight: 1.25;
size: "1.5rem";
weight: 700;
};
label: {
family: "mono";
letterSpacing: "0.04em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 600;
};
subheading: {
family: "mono";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "color"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
editorial: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fda4af"; light: "#9f1239" };
info: { dark: "#93c5fd"; light: "#1e3a8a" };
neutral: { dark: "#a8a29e"; light: "#57534e" };
primary: { dark: "#fb923c"; light: "#9a3412" };
success: { dark: "#a3e635"; light: "#3f6212" };
warning: { dark: "#fcd34d"; light: "#a16207" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Dialog: {
slots: {
footer: { background: "tint"; padding: "md" };
header: { textStyle: "subheading" };
};
};
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "square";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: {
color: "primary";
offset: "3px";
style: "double";
width: "3px";
};
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#1c1917"; light: "#f6f1e7" };
border: { dark: "#48413b"; light: "#d6cdbd" };
muted: { dark: "#aaa39b"; light: "#57534e" };
surface: { dark: "#262220"; light: "#fffdf8" };
text: { dark: "#f5efe3"; light: "#1c1917" };
};
radii: {
lg: "3px";
md: "2px";
rounded: "9999px";
sm: "1px";
square: "0";
xl: "4px";
};
shadows: {
lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))";
md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))";
sm: "none";
};
sizes: {
lg: {
fontSize: "1.0625rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "2.625rem";
iconSize: "1rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.1875rem";
height: "3.875rem";
iconSize: "1.375rem";
paddingX: "2.125rem";
};
xs: {
fontSize: "0.8125rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "2rem";
md: "1.25rem";
sm: "0.75rem";
xl: "3rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.5;
size: "0.875rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.03em";
lineHeight: 1.05;
size: "2.75rem";
weight: 300;
};
heading: {
family: "sans";
letterSpacing: "-0.015em";
lineHeight: 1.2;
size: "1.75rem";
weight: 300;
};
label: {
family: "sans";
letterSpacing: "0.08em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.25rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
studio: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff9fc0"; light: "#c42b5c" };
info: { dark: "#cbaaff"; light: "#6b35bd" };
neutral: { dark: "#bcbcd4"; light: "#4d4d65" };
primary: { dark: "#a8b5ff"; light: "#2842d7" };
success: { dark: "#d5ef68"; light: "#407200" };
warning: { dark: "#ffdc62"; light: "#a86a00" };
};
components: {
Alert: {
color: "success";
gap: "sm";
padding: "md";
radius: "lg";
textStyle: "label";
};
Avatar: { radius: "rounded" };
Badge: { color: "success"; radius: "sm" };
Button: { radius: "md" };
Card: { radius: "xl"; shadow: "sm" };
Dialog: { radius: "xl"; slots: { header: { textStyle: "heading" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "1rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.5rem";
};
};
focusRing: { color: "primary"; offset: "3px"; width: "3px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#121225"; light: "#f3f3fa" };
border: { dark: "#535373"; light: "#c9c9df" };
muted: { dark: "#b2b2cc"; light: "#66667e" };
surface: { dark: "#22223b"; light: "#ffffff" };
text: { dark: "#f4f4ff"; light: "#20203c" };
};
radii: {
lg: "16px";
md: "10px";
rounded: "9999px";
sm: "6px";
square: "0";
xl: "24px";
};
shadows: {
lg: "0 20px 48px -8px light-dark(rgb(40 66 215 / 0.25), rgb(0 0 0 / 0.75))";
md: "0 8px 24px -4px light-dark(rgb(40 66 215 / 0.2), rgb(0 0 0 / 0.6))";
sm: "0 3px 0 light-dark(rgb(40 66 215 / 0.1), rgb(0 0 0 / 0.35))";
};
sizes: {
lg: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.25rem";
height: "4rem";
iconSize: "1.75rem";
paddingX: "2.25rem";
};
xs: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Avenir Next\", \"Trebuchet MS\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.55; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.045em";
lineHeight: 1;
size: "3rem";
weight: 900;
};
heading: {
family: "sans";
letterSpacing: "-0.025em";
lineHeight: 1.15;
size: "1.875rem";
weight: 800;
};
label: {
family: "sans";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.25rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
vermeer: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#eaa49a"; light: "#993e3b" };
info: { dark: "#91c6cf"; light: "#2c6c75" };
neutral: { dark: "#c2bba4"; light: "#626049" };
primary: { dark: "#94bdf5"; light: "#234e9a" };
success: { dark: "#aacb83"; light: "#416234" };
warning: { dark: "#e8c567"; light: "#8d6416" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: { radius: "xl"; slots: { header: { textStyle: "heading" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "1rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.5rem";
};
};
focusRing: { color: "primary"; offset: "3px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#202a27"; light: "#f3e8cc" };
border: { dark: "#69735b"; light: "#bcab80" };
muted: { dark: "#c2bba4"; light: "#626049" };
surface: { dark: "#2f3933"; light: "#fff8e6" };
text: { dark: "#faf0d8"; light: "#2e3126" };
};
radii: {
lg: "12px";
md: "8px";
rounded: "9999px";
sm: "4px";
square: "0";
xl: "18px";
};
shadows: {
lg: "0 20px 48px -8px light-dark(rgb(94 65 20 / 0.28), rgb(0 0 0 / 0.7))";
md: "0 8px 24px -4px light-dark(rgb(94 65 20 / 0.22), rgb(0 0 0 / 0.55))";
sm: "0 2px 0 light-dark(rgb(141 100 22 / 0.22), rgb(0 0 0 / 0.45))";
};
sizes: {
lg: {
fontSize: "1.125rem";
height: "3.375rem";
iconSize: "1.25rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "2.875rem";
iconSize: "1.125rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.25rem";
height: "3.875rem";
iconSize: "1.5rem";
paddingX: "2rem";
};
xs: {
fontSize: "0.8125rem";
height: "1.875rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.125rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Segoe UI\", system-ui, sans-serif";
serif: "Georgia, \"Palatino Linotype\", Palatino, serif";
};
fonts: { body: "serif"; heading: "serif"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "serif"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "serif";
lineHeight: 1.5;
size: "0.875rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "serif";
letterSpacing: "-0.025em";
lineHeight: 1.15;
size: "2.75rem";
weight: 400;
};
heading: {
family: "serif";
lineHeight: 1.25;
size: "1.875rem";
weight: 400;
};
label: {
family: "serif";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "serif";
lineHeight: 1.35;
size: "1.25rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
yarcl: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#f87171"; light: "#dc2626" };
info: { dark: "#38bdf8"; light: "#0369a1" };
neutral: { dark: "#a3a9b8"; light: "#4b5263" };
primary: { dark: "#8aa2ff"; light: "#2d4bb8" };
success: { dark: "#4ade80"; light: "#15803d" };
warning: { dark: "#fbbf24"; light: "#b45309" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: { color: "primary"; offset: "2px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0f1115"; light: "#f8f9fb" };
border: { dark: "#2e333d"; light: "#d0d5dd" };
muted: { dark: "#8b93a1"; light: "#667085" };
surface: { dark: "#181b21"; light: "#ffffff" };
text: { dark: "#e6e8ec"; light: "#101828" };
};
radii: {
lg: "0.5rem";
md: "0.375rem";
rounded: "9999px";
sm: "0.25rem";
square: "0";
xl: "0.75rem";
};
shadows: {
lg: "0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))";
md: "0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))";
sm: "0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.25rem";
};
md: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
sm: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
xl: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.5rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.5rem";
xl: "2rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.5; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.4;
size: "0.8125rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.1;
size: "2.25rem";
weight: 800;
};
heading: {
family: "sans";
letterSpacing: "-0.01em";
lineHeight: 1.25;
size: "1.5rem";
weight: 700;
};
label: {
family: "sans";
lineHeight: 1.4;
size: "0.875rem";
weight: 500;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
};
} = ...
Type Declaration
-
artDeco: {
borders: { frame: "3px"; width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#e7a3b0"; light: "#923946" };
info: { dark: "#a1c6e1"; light: "#325d7c" };
neutral: { dark: "#bcc8c5"; light: "#414d4c" };
primary: { dark: "#d9b868"; light: "#896613" };
success: { dark: "#9ad1b5"; light: "#285d50" };
warning: { dark: "#ebbe87"; light: "#945c21" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: {
radius: "square";
shadow: "sm";
slots: { root: { border: "double"; borderWidth: "frame" } };
};
Dialog: {
radius: "square";
slots: {
header: { textStyle: "heading" };
root: { border: "double"; borderWidth: "frame" };
};
};
Drawer: {
size: "sm";
slots: { root: { border: "double"; borderWidth: "frame" } };
};
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: {
slots: {
header: {
border: "double";
borderWidth: "frame";
textStyle: "label";
};
};
};
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "square";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.75rem";
paddingY: "0.5rem";
};
};
focusRing: { color: "primary"; offset: "4px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#080d0c"; light: "#f2f3ed" };
border: { dark: "#a68c4c"; light: "#806c36" };
muted: { dark: "#b7c3b9"; light: "#56635e" };
surface: { dark: "#17221f"; light: "#ffffff" };
text: { dark: "#f3eee0"; light: "#17221f" };
};
radii: {
lg: "0";
md: "0";
rounded: "9999px";
sm: "0";
square: "0";
xl: "0";
};
shadows: {
lg: "0 24px 56px -12px light-dark(rgb(23 34 31 / 0.28), rgb(0 0 0 / 0.75))";
md: "0 12px 32px -8px light-dark(rgb(23 34 31 / 0.2), rgb(0 0 0 / 0.6))";
sm: "0 0 0 1px light-dark(#806c36, #a68c4c), 0 0 0 4px light-dark(#f2f3ed, #080d0c), 0 0 0 5px light-dark(#806c36, #a68c4c)";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.875rem";
};
md: {
fontSize: "0.875rem";
height: "2.75rem";
iconSize: "1rem";
paddingX: "1.5rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.125rem";
height: "3.75rem";
iconSize: "1.5rem";
paddingX: "2.25rem";
};
xs: {
fontSize: "0.75rem";
height: "1.875rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.875rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.75rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "sans";
letterSpacing: "0.04em";
lineHeight: 1.5;
size: "0.8125rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "0.08em";
lineHeight: 1.2;
size: "2.25rem";
weight: 500;
};
heading: {
family: "sans";
letterSpacing: "0.06em";
lineHeight: 1.3;
size: "1.5rem";
weight: 500;
};
label: {
family: "sans";
letterSpacing: "0.1em";
lineHeight: 1.5;
size: "0.75rem";
weight: 600;
};
subheading: {
family: "sans";
letterSpacing: "0.035em";
lineHeight: 1.4;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "neutral"; text: "color" };
soft: { background: "tint"; border: "neutral"; text: "color" };
solid: { background: "fill"; border: "neutral"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
bloom: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fb7185"; light: "#e11d48" };
info: { dark: "#7dd3fc"; light: "#0369a1" };
neutral: { dark: "#b5aecf"; light: "#6b6485" };
primary: { dark: "#c4b5fd"; light: "#7c3aed" };
success: { dark: "#5eead4"; light: "#0f8a5f" };
warning: { dark: "#fdba74"; light: "#c2410c" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Badge: { radius: "rounded" };
Button: { radius: "rounded" };
Combobox: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
IconButton: { radius: "rounded" };
Input: { radius: "rounded" };
Select: { radius: "rounded" };
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
ToggleGroup: { radius: "rounded" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "lg";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.9375rem";
paddingX: "1.25rem";
paddingY: "0.875rem";
};
compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
};
focusRing: { color: "primary"; offset: "3px"; width: "3px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#14111f"; light: "#f7f4ff" };
border: { dark: "#342c4d"; light: "#e6dff7" };
muted: { dark: "#aaa3c4"; light: "#6b6485" };
surface: { dark: "#1f1a30"; light: "#ffffff" };
text: { dark: "#efeafc"; light: "#2a2540" };
};
radii: {
lg: "1.5rem";
md: "1rem";
rounded: "9999px";
sm: "0.75rem";
square: "0";
xl: "2rem";
};
shadows: { lg: string; md: string; sm: string };
sizes: {
lg: {
fontSize: "1.0625rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.625rem";
};
md: {
fontSize: "0.9375rem";
height: "2.75rem";
iconSize: "1.125rem";
paddingX: "1.25rem";
};
sm: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.1875rem";
height: "3.75rem";
iconSize: "1.5rem";
paddingX: "2rem";
};
xs: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.875rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.55; size: "1rem"; weight: 500 };
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.1;
size: "2.5rem";
weight: 800;
};
heading: {
family: "sans";
lineHeight: 1.2;
size: "1.625rem";
weight: 800;
};
label: {
family: "sans";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.1875rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
brutalist: {
borders: { heavy: "4px"; width: "2px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff5ca1"; light: "#c2005a" };
info: { dark: "#7aa2ff"; light: "#2f6bff" };
neutral: { dark: "#f5f5f5"; light: "#1a1a1a" };
primary: { dark: "#ff5a4d"; light: "#ff3d2e" };
success: { dark: "#3dfc9a"; light: "#00b862" };
warning: { dark: "#ffb14a"; light: "#ff8a00" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { slots: { root: { border: "double"; borderWidth: "heavy" } } };
Dialog: { slots: { footer: { background: "tint"; padding: "md" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: {
color: "neutral";
offset: "3px";
style: "dashed";
width: "3px";
};
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0f0f0f"; light: "#fffdf2" };
border: { dark: "#ffffff"; light: "#000000" };
muted: { dark: "#cfcfcf"; light: "#3d3d3d" };
surface: { dark: "#1a1a1a"; light: "#ffffff" };
text: { dark: "#ffffff"; light: "#000000" };
};
radii: {
lg: "0";
md: "0";
rounded: "9999px";
sm: "0";
square: "0";
xl: "0";
};
shadows: {
lg: "8px 8px 0 0 light-dark(#000000, #ffffff)";
md: "5px 5px 0 0 light-dark(#000000, #ffffff)";
sm: "3px 3px 0 0 light-dark(#000000, #ffffff)";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.25rem";
};
md: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
sm: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
xl: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.5rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.5rem";
xl: "2rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.55;
size: "0.875rem";
weight: 400;
};
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.75rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.8125rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.04em";
lineHeight: 1;
size: "2.5rem";
weight: 800;
};
heading: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.15;
size: "1.5rem";
weight: 800;
};
label: {
family: "sans";
letterSpacing: "0.04em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.125rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "neutral" };
outline: { background: "none"; border: "neutral"; text: "neutral" };
soft: { background: "tint"; border: "neutral"; text: "neutral" };
solid: { background: "fill"; border: "neutral"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
circuit: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fda4af"; light: "#c02d4d" };
info: { dark: "#a5b4fc"; light: "#3b54b0" };
neutral: { dark: "#adc6db"; light: "#465d73" };
primary: { dark: "#67e8f9"; light: "#006c83" };
success: { dark: "#6ee7b7"; light: "#14734f" };
warning: { dark: "#fcd34d"; light: "#925900" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: { slots: { footer: { background: "tint"; padding: "md" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Tabs: { slots: { trigger: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.875rem";
paddingY: "0.75rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
};
focusRing: { color: "primary"; offset: "3px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#07111f"; light: "#edf4f8" };
border: { dark: "#36546f"; light: "#b4c9dc" };
muted: { dark: "#9bb4cc"; light: "#50677e" };
surface: { dark: "#11243a"; light: "#fafdff" };
text: { dark: "#e2f0fb"; light: "#102a43" };
};
radii: {
lg: "6px";
md: "4px";
rounded: "9999px";
sm: "2px";
square: "0";
xl: "8px";
};
shadows: {
lg: "0 20px 48px light-dark(rgb(16 42 67 / 0.2), rgb(0 0 0 / 0.7))";
md: "0 8px 24px light-dark(rgb(16 42 67 / 0.14), rgb(0 0 0 / 0.55))";
sm: "0 0 0 1px light-dark(rgb(0 108 131 / 0.08), rgb(103 232 249 / 0.08))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.125rem";
iconSize: "1.25rem";
paddingX: "1.5rem";
};
md: {
fontSize: "0.875rem";
height: "2.625rem";
iconSize: "1.125rem";
paddingX: "1.125rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.125rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.125rem";
height: "3.625rem";
iconSize: "1.5rem";
paddingX: "1.875rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.625rem";
xl: "2.25rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"Segoe UI\", system-ui, -apple-system, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.55;
size: "0.9375rem";
weight: 400;
};
caption: {
family: "mono";
lineHeight: 1.5;
size: "0.75rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.8125rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.035em";
lineHeight: 1.15;
size: "2.25rem";
weight: 600;
};
heading: {
family: "sans";
letterSpacing: "-0.025em";
lineHeight: 1.25;
size: "1.5rem";
weight: 600;
};
label: {
family: "mono";
letterSpacing: "0.025em";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
compact: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#f87171"; light: "#b91c1c" };
info: { dark: "#60a5fa"; light: "#1d4ed8" };
neutral: { dark: "#9aa5b1"; light: "#52606d" };
primary: { dark: "#2dd4bf"; light: "#0f766e" };
success: { dark: "#4ade80"; light: "#15803d" };
warning: { dark: "#facc15"; light: "#a16207" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "compact";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.8125rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
compact: { fontSize: "0.75rem"; paddingX: "0.5rem"; paddingY: "0.25rem" };
};
focusRing: { color: "info"; offset: "1px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0b0f14"; light: "#eef1f4" };
border: { dark: "#2a333d"; light: "#cbd2d9" };
muted: { dark: "#9aa5b1"; light: "#52606d" };
surface: { dark: "#141a21"; light: "#ffffff" };
text: { dark: "#e4e7eb"; light: "#1f2933" };
};
radii: {
lg: "4px";
md: "3px";
rounded: "9999px";
sm: "2px";
square: "0";
xl: "6px";
};
shadows: {
lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))";
md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))";
sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))";
};
sizes: {
lg: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
md: {
fontSize: "0.8125rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
sm: {
fontSize: "0.75rem";
height: "1.5rem";
iconSize: "0.75rem";
paddingX: "0.5rem";
};
xl: {
fontSize: "1rem";
height: "2.75rem";
iconSize: "1.125rem";
paddingX: "1rem";
};
xs: {
fontSize: "0.6875rem";
height: "1.25rem";
iconSize: "0.75rem";
paddingX: "0.375rem";
};
};
spacing: {
lg: "0.75rem";
md: "0.5rem";
sm: "0.25rem";
xl: "1rem";
xs: "0.125rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 400;
};
caption: {
family: "sans";
lineHeight: 1.4;
size: "0.75rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.45; size: "0.75rem"; weight: 400 };
display: {
family: "sans";
lineHeight: 1.25;
size: "1.5rem";
weight: 600;
};
heading: {
family: "sans";
lineHeight: 1.3;
size: "1.125rem";
weight: 600;
};
label: {
family: "sans";
letterSpacing: "0.02em";
lineHeight: 1.35;
size: "0.75rem";
weight: 600;
};
subheading: {
family: "sans";
lineHeight: 1.35;
size: "0.9375rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "neutral"; text: "neutral" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
cyberpunk: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff739b"; light: "#cf234d" };
info: { dark: "#59efff"; light: "#006e80" };
neutral: { dark: "#c6b4e6"; light: "#534369" };
primary: { dark: "#ff70de"; light: "#ad007c" };
success: { dark: "#bdff5b"; light: "#267400" };
warning: { dark: "#ffe55b"; light: "#8a5c00" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: {
radius: "md";
slots: { header: { textStyle: "heading" }; root: { shadow: "lg" } };
};
Drawer: { size: "sm"; slots: { root: { shadow: "md" } } };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "sm";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.8125rem";
paddingX: "0.875rem";
paddingY: "0.75rem";
};
compact: {
fontSize: "0.75rem";
paddingX: "0.625rem";
paddingY: "0.375rem";
};
};
focusRing: { color: "info"; offset: "4px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#090516"; light: "#f2ebfc" };
border: { dark: "#8d53a5"; light: "#ae78bd" };
muted: { dark: "#c0a9d5"; light: "#695176" };
surface: { dark: "#1c1233"; light: "#fffbff" };
text: { dark: "#f8eeff"; light: "#29113d" };
};
radii: {
lg: "4px";
md: "2px";
rounded: "9999px";
sm: "0";
square: "0";
xl: "6px";
};
shadows: {
lg: "0 0 0 1px light-dark(rgb(173 0 124 / 0.4), rgb(255 112 222 / 0.7)), 0 0 48px light-dark(rgb(173 0 124 / 0.2), rgb(255 112 222 / 0.25))";
md: "0 0 0 1px light-dark(rgb(0 110 128 / 0.4), rgb(89 239 255 / 0.6)), 0 0 28px light-dark(rgb(0 110 128 / 0.14), rgb(89 239 255 / 0.2))";
sm: "0 0 0 1px light-dark(rgb(173 0 124 / 0.3), rgb(255 112 222 / 0.5)), 0 0 16px light-dark(rgb(173 0 124 / 0.1), rgb(255 112 222 / 0.18))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3.125rem";
iconSize: "1.25rem";
paddingX: "1.5rem";
};
md: {
fontSize: "0.875rem";
height: "2.625rem";
iconSize: "1.125rem";
paddingX: "1.125rem";
};
sm: {
fontSize: "0.8125rem";
height: "2.125rem";
iconSize: "1rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.125rem";
height: "3.625rem";
iconSize: "1.5rem";
paddingX: "1.875rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.875rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.625rem";
xl: "2.25rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
sans: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
};
fonts: { body: "mono"; heading: "mono"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: {
family: "mono";
lineHeight: 1.6;
size: "0.875rem";
weight: 400;
};
caption: {
family: "mono";
lineHeight: 1.5;
size: "0.75rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.8125rem"; weight: 400 };
display: {
family: "mono";
letterSpacing: "-0.045em";
lineHeight: 1.15;
size: "2.25rem";
weight: 700;
};
heading: {
family: "mono";
letterSpacing: "-0.025em";
lineHeight: 1.25;
size: "1.5rem";
weight: 700;
};
label: {
family: "mono";
letterSpacing: "0.04em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 600;
};
subheading: {
family: "mono";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "color"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
editorial: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#fda4af"; light: "#9f1239" };
info: { dark: "#93c5fd"; light: "#1e3a8a" };
neutral: { dark: "#a8a29e"; light: "#57534e" };
primary: { dark: "#fb923c"; light: "#9a3412" };
success: { dark: "#a3e635"; light: "#3f6212" };
warning: { dark: "#fcd34d"; light: "#a16207" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Dialog: {
slots: {
footer: { background: "tint"; padding: "md" };
header: { textStyle: "subheading" };
};
};
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "square";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: {
color: "primary";
offset: "3px";
style: "double";
width: "3px";
};
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#1c1917"; light: "#f6f1e7" };
border: { dark: "#48413b"; light: "#d6cdbd" };
muted: { dark: "#aaa39b"; light: "#57534e" };
surface: { dark: "#262220"; light: "#fffdf8" };
text: { dark: "#f5efe3"; light: "#1c1917" };
};
radii: {
lg: "3px";
md: "2px";
rounded: "9999px";
sm: "1px";
square: "0";
xl: "4px";
};
shadows: {
lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))";
md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))";
sm: "none";
};
sizes: {
lg: {
fontSize: "1.0625rem";
height: "3.25rem";
iconSize: "1.25rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "2.625rem";
iconSize: "1rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.875rem";
};
xl: {
fontSize: "1.1875rem";
height: "3.875rem";
iconSize: "1.375rem";
paddingX: "2.125rem";
};
xs: {
fontSize: "0.8125rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "2rem";
md: "1.25rem";
sm: "0.75rem";
xl: "3rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "heading";
h4: "subheading";
h5: "subheading";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.5;
size: "0.875rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.03em";
lineHeight: 1.05;
size: "2.75rem";
weight: 300;
};
heading: {
family: "sans";
letterSpacing: "-0.015em";
lineHeight: 1.2;
size: "1.75rem";
weight: 300;
};
label: {
family: "sans";
letterSpacing: "0.08em";
lineHeight: 1.4;
size: "0.8125rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.25rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
studio: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#ff9fc0"; light: "#c42b5c" };
info: { dark: "#cbaaff"; light: "#6b35bd" };
neutral: { dark: "#bcbcd4"; light: "#4d4d65" };
primary: { dark: "#a8b5ff"; light: "#2842d7" };
success: { dark: "#d5ef68"; light: "#407200" };
warning: { dark: "#ffdc62"; light: "#a86a00" };
};
components: {
Alert: {
color: "success";
gap: "sm";
padding: "md";
radius: "lg";
textStyle: "label";
};
Avatar: { radius: "rounded" };
Badge: { color: "success"; radius: "sm" };
Button: { radius: "md" };
Card: { radius: "xl"; shadow: "sm" };
Dialog: { radius: "xl"; slots: { header: { textStyle: "heading" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "1rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
};
focusRing: { color: "primary"; offset: "3px"; width: "3px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#121225"; light: "#f3f3fa" };
border: { dark: "#535373"; light: "#c9c9df" };
muted: { dark: "#b2b2cc"; light: "#66667e" };
surface: { dark: "#22223b"; light: "#ffffff" };
text: { dark: "#f4f4ff"; light: "#20203c" };
};
radii: {
lg: "16px";
md: "10px";
rounded: "9999px";
sm: "6px";
square: "0";
xl: "24px";
};
shadows: {
lg: "0 20px 48px -8px light-dark(rgb(40 66 215 / 0.25), rgb(0 0 0 / 0.75))";
md: "0 8px 24px -4px light-dark(rgb(40 66 215 / 0.2), rgb(0 0 0 / 0.6))";
sm: "0 3px 0 light-dark(rgb(40 66 215 / 0.1), rgb(0 0 0 / 0.35))";
};
sizes: {
lg: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.25rem";
height: "4rem";
iconSize: "1.75rem";
paddingX: "2.25rem";
};
xs: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.25rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Avenir Next\", \"Trebuchet MS\", system-ui, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.55; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.45;
size: "0.8125rem";
weight: 500;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.045em";
lineHeight: 1;
size: "3rem";
weight: 900;
};
heading: {
family: "sans";
letterSpacing: "-0.025em";
lineHeight: 1.15;
size: "1.875rem";
weight: 800;
};
label: {
family: "sans";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "sans";
lineHeight: 1.3;
size: "1.25rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
vermeer: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#eaa49a"; light: "#993e3b" };
info: { dark: "#91c6cf"; light: "#2c6c75" };
neutral: { dark: "#c2bba4"; light: "#626049" };
primary: { dark: "#94bdf5"; light: "#234e9a" };
success: { dark: "#aacb83"; light: "#416234" };
warning: { dark: "#e8c567"; light: "#8d6416" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Card: { radius: "lg"; shadow: "sm" };
Dialog: { radius: "xl"; slots: { header: { textStyle: "heading" } } };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "1rem";
paddingX: "1rem";
paddingY: "0.875rem";
};
compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
};
focusRing: { color: "primary"; offset: "3px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#202a27"; light: "#f3e8cc" };
border: { dark: "#69735b"; light: "#bcab80" };
muted: { dark: "#c2bba4"; light: "#626049" };
surface: { dark: "#2f3933"; light: "#fff8e6" };
text: { dark: "#faf0d8"; light: "#2e3126" };
};
radii: {
lg: "12px";
md: "8px";
rounded: "9999px";
sm: "4px";
square: "0";
xl: "18px";
};
shadows: {
lg: "0 20px 48px -8px light-dark(rgb(94 65 20 / 0.28), rgb(0 0 0 / 0.7))";
md: "0 8px 24px -4px light-dark(rgb(94 65 20 / 0.22), rgb(0 0 0 / 0.55))";
sm: "0 2px 0 light-dark(rgb(141 100 22 / 0.22), rgb(0 0 0 / 0.45))";
};
sizes: {
lg: {
fontSize: "1.125rem";
height: "3.375rem";
iconSize: "1.25rem";
paddingX: "1.75rem";
};
md: {
fontSize: "1rem";
height: "2.875rem";
iconSize: "1.125rem";
paddingX: "1.375rem";
};
sm: {
fontSize: "0.875rem";
height: "2.25rem";
iconSize: "1rem";
paddingX: "1rem";
};
xl: {
fontSize: "1.25rem";
height: "3.875rem";
iconSize: "1.5rem";
paddingX: "2rem";
};
xs: {
fontSize: "0.8125rem";
height: "1.875rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
};
spacing: {
lg: "1.75rem";
md: "1.125rem";
sm: "0.75rem";
xl: "2.5rem";
xs: "0.375rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "\"Segoe UI\", system-ui, sans-serif";
serif: "Georgia, \"Palatino Linotype\", Palatino, serif";
};
fonts: { body: "serif"; heading: "serif"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "serif"; lineHeight: 1.6; size: "1rem"; weight: 400 };
caption: {
family: "serif";
lineHeight: 1.5;
size: "0.875rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "serif";
letterSpacing: "-0.025em";
lineHeight: 1.15;
size: "2.75rem";
weight: 400;
};
heading: {
family: "serif";
lineHeight: 1.25;
size: "1.875rem";
weight: 400;
};
label: {
family: "serif";
lineHeight: 1.4;
size: "0.9375rem";
weight: 700;
};
subheading: {
family: "serif";
lineHeight: 1.35;
size: "1.25rem";
weight: 700;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
-
yarcl: {
borders: { width: "1px" };
breakpoints: {
lg: "64rem";
md: "48rem";
sm: "40rem";
xl: "80rem";
xs: "30rem";
};
colors: {
danger: { dark: "#f87171"; light: "#dc2626" };
info: { dark: "#38bdf8"; light: "#0369a1" };
neutral: { dark: "#a3a9b8"; light: "#4b5263" };
primary: { dark: "#8aa2ff"; light: "#2d4bb8" };
success: { dark: "#4ade80"; light: "#15803d" };
warning: { dark: "#fbbf24"; light: "#b45309" };
};
components: {
Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
Avatar: { radius: "rounded" };
Drawer: { size: "sm" };
EmptyState: {
color: "neutral";
gap: "sm";
padding: "lg";
textStyle: "body";
};
Stepper: { radius: "rounded" };
Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
};
defaults: {
color: "primary";
density: "comfortable";
errorColor: "danger";
floatingShadow: "md";
gap: "md";
helperStyle: "caption";
labelStyle: "label";
modalSize: "md";
padding: "lg";
radius: "md";
size: "md";
softVariant: "soft";
textStyle: "body";
variant: "solid";
};
density: {
comfortable: {
fontSize: "0.875rem";
paddingX: "0.75rem";
paddingY: "0.625rem";
};
compact: {
fontSize: "0.8125rem";
paddingX: "0.5rem";
paddingY: "0.25rem";
};
};
focusRing: { color: "primary"; offset: "2px"; width: "2px" };
labels: {
actions: "Actions";
audioLevel: "Input level";
avatarOverflow: (count: number) => string;
breadcrumb: "Breadcrumb";
chooseAction: "Choose action";
chooseColor: "Choose color";
chooseDate: "Choose date";
chooseFile: "Choose file";
chooseFiles: "Choose files";
close: "Close";
colorPresets: "Suggested colors";
commandPalette: "Command palette";
currentImage: "Current image";
currentImageName: "current image";
decrease: "Decrease";
dismiss: "Dismiss";
dropFile: "or drop a file here";
dropFiles: "or drop files here";
dropReplacement: "or drop a replacement here";
expandBreadcrumb: "Show all breadcrumbs";
increase: "Increase";
loading: "Loading";
loadingResults: "Loading…";
nextMonth: "Next month";
nextPage: "Next page";
noResults: "No results";
notifications: "Notifications";
page: (page: number) => string;
pageSummary: (page: number, count: number) => string;
pagination: "Pagination";
pauseAudio: "Pause audio";
playAudio: "Play audio";
previewImage: (name: string) => string;
previousMonth: "Previous month";
previousPage: "Previous page";
progress: "Progress";
progressValue: (value: number, max: number) => string;
remove: "Remove";
removeItem: (name: string) => string;
replaceFile: "Replace file";
searchCommands: "Search commands…";
seekAudio: "Seek audio";
selectAllRows: "Select all rows";
selectedImage: "selected image";
selectedItems: "Selected";
shortcutAlt: "Alt";
shortcutControl: "Ctrl";
shortcutMeta: "Meta";
shortcutShift: "Shift";
sliderMaximum: "Maximum";
sliderMinimum: "Minimum";
stepCompleted: "Completed";
};
modalSizes: {
full: "100vw";
lg: "48rem";
md: "32rem";
sm: "24rem";
xl: "64rem";
};
motion: {
base: "200ms";
easing: "cubic-bezier(0.2, 0, 0, 1)";
fast: "120ms";
};
neutrals: {
bg: { dark: "#0f1115"; light: "#f8f9fb" };
border: { dark: "#2e333d"; light: "#d0d5dd" };
muted: { dark: "#8b93a1"; light: "#667085" };
surface: { dark: "#181b21"; light: "#ffffff" };
text: { dark: "#e6e8ec"; light: "#101828" };
};
radii: {
lg: "0.5rem";
md: "0.375rem";
rounded: "9999px";
sm: "0.25rem";
square: "0";
xl: "0.75rem";
};
shadows: {
lg: "0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))";
md: "0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))";
sm: "0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))";
};
sizes: {
lg: {
fontSize: "1rem";
height: "3rem";
iconSize: "1.25rem";
paddingX: "1.25rem";
};
md: {
fontSize: "0.875rem";
height: "2.5rem";
iconSize: "1rem";
paddingX: "1rem";
};
sm: {
fontSize: "0.8125rem";
height: "2rem";
iconSize: "0.875rem";
paddingX: "0.75rem";
};
xl: {
fontSize: "1.125rem";
height: "3.5rem";
iconSize: "1.5rem";
paddingX: "1.5rem";
};
xs: {
fontSize: "0.75rem";
height: "1.75rem";
iconSize: "0.75rem";
paddingX: "0.625rem";
};
};
spacing: {
lg: "1.5rem";
md: "1rem";
sm: "0.5rem";
xl: "2rem";
xs: "0.25rem";
};
timing: {
hoverCloseDelay: 150;
hoverOpenDelay: 300;
toastDuration: 5000;
tooltipDelay: 400;
typeaheadTimeout: 1000;
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
};
fonts: { body: "sans"; heading: "sans"; mono: "mono" };
headings: {
h1: "display";
h2: "heading";
h3: "subheading";
h4: "subheading";
h5: "label";
h6: "label";
};
styles: {
body: { family: "sans"; lineHeight: 1.5; size: "1rem"; weight: 400 };
caption: {
family: "sans";
lineHeight: 1.4;
size: "0.8125rem";
weight: 400;
};
code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
display: {
family: "sans";
letterSpacing: "-0.02em";
lineHeight: 1.1;
size: "2.25rem";
weight: 800;
};
heading: {
family: "sans";
letterSpacing: "-0.01em";
lineHeight: 1.25;
size: "1.5rem";
weight: 700;
};
label: { family: "sans"; lineHeight: 1.4; size: "0.875rem"; weight: 500 };
subheading: {
family: "sans";
lineHeight: 1.35;
size: "1.125rem";
weight: 600;
};
};
};
variants: {
ghost: { background: "none"; border: "none"; text: "color" };
outline: { background: "none"; border: "color"; text: "color" };
soft: { background: "tint"; border: "none"; text: "color" };
solid: { background: "fill"; border: "color"; text: "on" };
};
widths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" };
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
}
Every bundled theme, keyed by id, including the library defaults as
yarcl. All of them satisfy ThemeContract, so they're interchangeable.