export declare const VIREO_THEME_BASE_OPTIONS: {
readonly cssVariables: true;
readonly motion: {
readonly reducedMotion: "system";
};
readonly shape: {
readonly borderRadius: 10;
};
readonly shadows: Shadows;
readonly spacing: 8;
readonly transitions: {
readonly duration: {
readonly shortest: 110;
readonly shorter: 150;
readonly short: 150;
readonly standard: 180;
readonly complex: 270;
readonly enteringScreen: 210;
readonly leavingScreen: 150;
};
readonly easing: {
readonly easeInOut: "cubic-bezier(0.2, 0, 0, 1)";
readonly easeOut: "cubic-bezier(0, 0, 0, 1)";
readonly easeIn: "cubic-bezier(0.3, 0, 1, 1)";
readonly sharp: "cubic-bezier(0.3, 0, 1, 1)";
};
};
readonly typography: {
readonly fontFamily: string;
readonly h1: {
readonly fontSize: "2.5rem";
readonly fontWeight: 700;
readonly letterSpacing: "-0.035em";
readonly lineHeight: 1.12;
};
readonly h2: {
readonly fontSize: "2rem";
readonly fontWeight: 700;
readonly letterSpacing: "-0.025em";
readonly lineHeight: 1.18;
};
readonly h3: {
readonly fontSize: "1.5rem";
readonly fontWeight: 650;
readonly letterSpacing: "-0.018em";
readonly lineHeight: 1.25;
};
readonly h4: {
readonly fontSize: "1.25rem";
readonly fontWeight: 650;
readonly letterSpacing: "-0.012em";
readonly lineHeight: 1.3;
};
readonly h5: {
readonly fontSize: "1.125rem";
readonly fontWeight: 650;
readonly lineHeight: 1.35;
};
readonly h6: {
readonly fontSize: "1rem";
readonly fontWeight: 650;
readonly lineHeight: 1.4;
};
readonly body1: {
readonly fontSize: "1rem";
readonly lineHeight: 1.55;
};
readonly body2: {
readonly fontSize: "0.875rem";
readonly lineHeight: 1.5;
};
readonly subtitle1: {
readonly fontSize: "1rem";
readonly fontWeight: 600;
readonly lineHeight: 1.45;
};
readonly subtitle2: {
readonly fontSize: "0.875rem";
readonly fontWeight: 600;
readonly lineHeight: 1.45;
};
readonly caption: {
readonly fontSize: "0.75rem";
readonly lineHeight: 1.4;
};
readonly button: {
readonly fontSize: "0.875rem";
readonly fontWeight: 650;
readonly letterSpacing: 0;
readonly lineHeight: 1.25;
readonly textTransform: "none";
};
};
readonly components: {
readonly MuiButton: {
readonly defaultProps: {
readonly disableElevation: true;
};
readonly styleOverrides: {
readonly root: {
readonly "@media (forced-colors: active)": {
readonly "&.MuiButton-contained": {
readonly backgroundColor: "ButtonFace";
readonly border: "1px solid ButtonText";
readonly color: "ButtonText";
readonly forcedColorAdjust: "none";
};
};
};
};
};
readonly MuiButtonBase: {
readonly styleOverrides: {
readonly root: ({ theme }: import("@mui/material").ButtonBaseOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "nativeButton" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "type"> & {
component?: React.ElementType | undefined;
} & Record<string, unknown> & {
ownerState: import("@mui/material").ButtonBaseOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "nativeButton" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "type"> & {
component?: React.ElementType | undefined;
} & Record<string, unknown>;
} & {
theme: Omit<Theme, "components" | "palette"> & import("@mui/material").CssVarsTheme;
}) => {
"&.Mui-focusVisible": {
outline: string;
outlineOffset: number;
};
};
};
};
readonly MuiCard: {
readonly defaultProps: {
readonly elevation: 0;
readonly variant: "outlined";
};
};
readonly MuiChip: {
readonly styleOverrides: {
readonly root: {
readonly "@media (forced-colors: active)": {
readonly "&.MuiChip-filled": {
readonly backgroundColor: "Canvas";
readonly border: "1px solid CanvasText";
readonly color: "CanvasText";
readonly forcedColorAdjust: "none";
};
};
};
};
};
readonly MuiCssBaseline: {
readonly styleOverrides: (theme: Omit<Theme, "components" | "palette"> & import("@mui/material").CssVarsTheme) => {
body: {
backgroundColor: string;
};
"::selection": {
backgroundColor: string;
color: string;
};
};
};
readonly MuiPaper: {
readonly styleOverrides: {
readonly root: {
readonly backgroundImage: "none";
};
};
};
};
};@vireocodedev/ui · 0.3.2
@vireocodedev/ui/theme
11 public exports generated from the shipped declaration graph.
Showing all 11 exports
export declare const VIREO_THEME_FOUNDATIONS: {
readonly light: {
readonly palette: {
readonly mode: "light";
readonly primary: {
readonly main: "#0170a3";
readonly light: "#36c7fa";
readonly dark: "#004d73";
readonly contrastText: "#ffffff";
};
readonly secondary: {
readonly main: "#6941c6";
readonly light: "#9e77ed";
readonly dark: "#53389e";
readonly contrastText: "#ffffff";
};
readonly error: {
readonly main: "#b42318";
readonly contrastText: "#ffffff";
};
readonly warning: {
readonly main: "#b54708";
readonly contrastText: "#ffffff";
};
readonly info: {
readonly main: "#026aa2";
readonly contrastText: "#ffffff";
};
readonly success: {
readonly main: "#027a48";
readonly contrastText: "#ffffff";
};
readonly background: {
readonly default: "#f8fafc";
readonly paper: "#ffffff";
};
readonly divider: "#cbd5e1";
readonly text: {
readonly primary: "#101828";
readonly secondary: "#475467";
readonly disabled: "#98a2b3";
};
readonly action: {
readonly hover: "rgba(16, 24, 40, 0.05)";
readonly selected: "rgba(1, 112, 163, 0.10)";
readonly focus: "rgba(1, 112, 163, 0.14)";
readonly disabled: "rgba(16, 24, 40, 0.38)";
readonly disabledBackground: "rgba(16, 24, 40, 0.08)";
};
};
readonly vireo: {
readonly surface: {
readonly canvas: "#f8fafc";
readonly raised: "#ffffff";
readonly sunken: "#f2f4f7";
readonly overlay: "#ffffff";
};
readonly border: {
readonly subtle: "#e4e7ec";
readonly strong: "#98a2b3";
};
readonly focus: {
readonly ring: "#0170a3";
};
};
};
readonly dark: {
readonly palette: {
readonly mode: "dark";
readonly primary: {
readonly main: "#36c7fa";
readonly light: "#7cd9fd";
readonly dark: "#0170a3";
readonly contrastText: "#101828";
};
readonly secondary: {
readonly main: "#b692f6";
readonly light: "#d6bbfb";
readonly dark: "#7f56d9";
readonly contrastText: "#101828";
};
readonly error: {
readonly main: "#fda29b";
readonly contrastText: "#101828";
};
readonly warning: {
readonly main: "#fec84b";
readonly contrastText: "#101828";
};
readonly info: {
readonly main: "#7cd9fd";
readonly contrastText: "#101828";
};
readonly success: {
readonly main: "#6ce9a6";
readonly contrastText: "#101828";
};
readonly background: {
readonly default: "#080d18";
readonly paper: "#1d2939";
};
readonly divider: "#344054";
readonly text: {
readonly primary: "#f9fafb";
readonly secondary: "#98a2b3";
readonly disabled: "#667085";
};
readonly action: {
readonly hover: "rgba(249, 250, 251, 0.07)";
readonly selected: "rgba(54, 199, 250, 0.14)";
readonly focus: "rgba(54, 199, 250, 0.18)";
readonly disabled: "rgba(249, 250, 251, 0.38)";
readonly disabledBackground: "rgba(249, 250, 251, 0.10)";
};
};
readonly vireo: {
readonly surface: {
readonly canvas: "#080d18";
readonly raised: "#1d2939";
readonly sunken: "#101828";
readonly overlay: "#263448";
};
readonly border: {
readonly subtle: "#344054";
readonly strong: "#667085";
};
readonly focus: {
readonly ring: "#7cd9fd";
};
};
};
};valueVIREO_THEME_SHADOWS
export declare const VIREO_THEME_SHADOWS: Shadows;export type VireoPaletteSurfaces = VireoSemanticTokens["surface"] & {
/** Default content surface. Kept as an alias for existing `surface.base` consumers. */
base: string;
};export type VireoSemanticTokenOptions = {
[TGroup in keyof VireoSemanticTokens]?: Partial<VireoSemanticTokens[TGroup]>;
};export type VireoSemanticTokens = {
surface: {
canvas: string;
raised: string;
sunken: string;
overlay: string;
};
border: {
subtle: string;
strong: string;
};
focus: {
ring: string;
};
};typeVireoThemeMode
export type VireoThemeMode = Extract<PaletteMode, "light" | "dark">;export type VireoThemeOptions = Omit<ThemeOptions, "palette" | "vireo"> & {
mode?: VireoThemeMode;
palette?: Omit<PaletteOptions, "mode">;
vireo?: VireoSemanticTokenOptions;
};functioncreateDarkTheme
/**
* @deprecated Prefer `createVireoTheme({ mode: "dark" })` so both schemes share one source of truth.
* Derives a dark theme while preserving the source theme's non-color foundations and brand palette channels.
*/
export declare function createDarkTheme(lightTheme: Theme, overrides?: ThemeOptions): Theme;functioncreateVireoTheme
Creates the canonical Vireo MUI theme with coherent light/dark, type, surface, elevation, and motion defaults.
/** Creates the canonical Vireo MUI theme with coherent light/dark, type, surface, elevation, and motion defaults. */
export declare function createVireoTheme({ mode, palette, vireo, ...options }?: VireoThemeOptions): Theme;functionreverseNumericScale
Reverses the numeric entries of an arbitrary shade scale without changing named entries.
/** Reverses the numeric entries of an arbitrary shade scale without changing named entries. */
export declare function reverseNumericScale<T extends Record<string, unknown>>(scale: T): Partial<T>;