Theming and Tokens
Customize AuraGlass with CSS variables, theme providers, component variants, and persona themes without forking the package.
#Token Hierarchy
AuraGlass theming is CSS-variable first. The package stylesheet defines the material tokens, component variants read those tokens, and app shells can override them at `:root`, `[data-theme]`, or a local product wrapper. This keeps brand changes portable without forking package internals.
Use broad tokens for product identity and local wrapper tokens for specific surfaces. A billing page might use tighter radius and stronger borders, while a media tool can use deeper tint and softer glow. Keep accessibility tokens such as focus rings and contrast-aware text colors intact unless you are replacing them with equal or stronger values.
#Theme Recipes
Use a theme recipe when a product section needs a distinct identity. Aurora can carry launch dashboards and AI products with saturated accents. Frost works for light SaaS billing and settings. Graphite is better for operational admin surfaces. Minimal lowers blur and glow when the product values speed and restraint.
Avoid changing every token at once. Start with background, surface fill, border, accent, radius, and blur. Then check focus states, disabled controls, charts, and overlays over real app backdrops.
.billing-theme {
--glass-bg-default: rgba(248, 250, 252, 0.72);
--glass-bg-strong: rgba(255, 255, 255, 0.86);
--glass-border-default: rgba(15, 23, 42, 0.14);
--glass-border-focus: rgba(14, 165, 233, 0.72);
--glass-radius-lg: 16px;
--glass-backdrop-blur: 16px;
}#Per-Component Overrides
Use documented props for ordinary variation: `variant`, `tone`, `depth`, `tint`, `size`, `compact`, and `contained` where a component supports them. Use `className` or `style` when a section needs a local token override. Avoid descendant selectors against internal package markup because those make upgrades brittle.
For constrained documentation cards, dashboards, and embeds, prefer 3.1 containment props such as `contained`, `compact`, `height`, `maxHeight`, `showHeader`, `showToolbar`, and `showToggle={false}` where available. Those props exist so package components can fit real layouts without leaking fixed overlays or viewport assumptions.
<GlassCard
className="billing-theme"
depth="medium"
tint="neutral"
style={{ '--glass-backdrop-blur': '18px' }}
>
<GlassButton variant="primary">Save plan</GlassButton>
</GlassCard>#Theme QA
A theme is not complete when the hero card looks good. Verify text contrast over the actual backdrop, focus ring visibility, selected and disabled states, danger/warning/success states, overlay layering, mobile density, and reduced-motion behavior.
If a theme uses bright imagery, video, charts, or gradients behind glass, increase surface opacity before increasing blur. More blur can look premium, but it does not automatically improve readability.