Skip to main content

Theme Effects

Effect functions produce CSS/style values from the active ThemeBuildConfig and are used internally by buildTheme(). You can also call them directly when you need a specific effect value outside of a component.

Import​

import {
  getShadowSystem,
  getScrollbarCSS,
  getGlassEffect,
  getAnimationPreset,
  getGradientStyle,
  getSurfaceStyle,
  getButtonStyle,
  getBorderWidth,
  getTableHeaderStyle,
  getIconStyle,
  getInputStyle,
} from "@xocialive/ui-components/themes";

getScrollbarCSS(config, isDark)​

Returns a raw CSS string for MUI CssBaseline styleOverrides. The string format is intentional — MUI's styleOverrides for CssBaseline does not support object format for pseudo-element selectors.

// ✅ Correct — raw CSS string
MuiCssBaseline: {
  styleOverrides: getScrollbarCSS(config, isDark),
}

// ❌ Wrong — object format breaks pseudo-element selectors
MuiCssBaseline: {
  styleOverrides: {
    "*": { "&::-webkit-scrollbar": { width: "6px" } },
  },
}

getShadowSystem(intensity, isDark)​

Returns a string[] of 25 box-shadow values indexed by MUI's shadow scale (0–24).

getGlassEffect(intensity, isDark)​

Returns { background, backdropFilter, border } for glassmorphism surfaces.

getButtonStyle(style)​

Returns MUI Components['MuiButton'] overrides for the selected button style variant.

Effect type exports​

type ShadowIntensity = "none" | "subtle" | "medium" | "strong";
type GlassIntensity = "none" | "subtle" | "medium" | "heavy";
type AnimationSpeed = "none" | "slow" | "normal" | "fast";
type GradientStyle = "none" | "subtle" | "vibrant" | "duotone";
type SurfaceStyle = "flat" | "elevated" | "glass" | "bordered";
type ButtonStyle = "default" | "rounded" | "sharp" | "soft";
type BorderWidth = "thin" | "normal" | "thick";
type TableHeaderStyle = "default" | "filled" | "bordered" | "minimal";
type ScrollbarStyle = "default" | "thin" | "hidden" | "styled";
type IconStyle = "default" | "rounded" | "sharp" | "outlined";
type InputStyle = "default" | "filled" | "outlined" | "underlined";