bloom: {
borders: { width: "1px" };
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: {
Badge: { radius: "rounded" };
Button: { radius: "rounded" };
Combobox: { radius: "rounded" };
Drawer: { size: "sm" };
IconButton: { radius: "rounded" };
Input: { radius: "rounded" };
Select: { radius: "rounded" };
ToggleGroup: { radius: "rounded" };
};
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" };
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";
};
typography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
};
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" };
};
zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
} = ...
Type Declaration
-
Readonlyborders: { width: "1px" }
-
Readonlycolors: {
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" };
}
-
Readonlycomponents: {
Badge: { radius: "rounded" };
Button: { radius: "rounded" };
Combobox: { radius: "rounded" };
Drawer: { size: "sm" };
IconButton: { radius: "rounded" };
Input: { radius: "rounded" };
Select: { radius: "rounded" };
ToggleGroup: { radius: "rounded" };
}
-
Readonlydefaults: {
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";
}
-
Readonlydensity: {
comfortable: {
fontSize: "0.9375rem";
paddingX: "1.25rem";
paddingY: "0.875rem";
};
compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
}
-
ReadonlyfocusRing: { color: "primary"; offset: "3px"; width: "3px" }
-
ReadonlymodalSizes: { full: "100vw"; lg: "48rem"; md: "32rem"; sm: "24rem"; xl: "64rem" }
-
Readonlymotion: { base: "200ms"; easing: "cubic-bezier(0.2, 0, 0, 1)"; fast: "120ms" }
-
Readonlyneutrals: {
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" };
}
-
Readonlyradii: {
lg: "1.5rem";
md: "1rem";
rounded: "9999px";
sm: "0.75rem";
square: "0";
xl: "2rem";
}
-
Readonlyshadows: { lg: string; md: string; sm: string }
-
Readonlysizes: {
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";
};
}
-
Readonlyspacing: { lg: "1.75rem"; md: "1.25rem"; sm: "0.75rem"; xl: "2.5rem"; xs: "0.375rem" }
-
Readonlytypography: {
families: {
mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
};
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;
};
};
}
-
Readonlyvariants: {
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" };
}
-
ReadonlyzIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 }
Friendly and airy: violet on lavender, pill-shaped controls, rounded cards, large targets, soft tinted shadows.