CONFIGUREConfirm before publishing
Styling and CSS properties
Palettes, the Brand settings behind them, and the custom properties the components read.
Where styles come from
The embed loads luxe-tokens.css, which sets the --luxe-* tokens on :root, and writes --luxe-* and --lx-* overrides on :root only for the Brand settings you change. The drawer, picker and tray shadow roots inherit them. Precedence: Brand settings, then the palette, then Luxe defaults.
Prefer the Brand settings. They cover colour, type, buttons, corners, slots and badges without code.
Palettes
| Palette | Accent 700 | Accent 500 | Accent 50 |
|---|---|---|---|
| Rosewood (default) | #8F5647 | #B87A6B | #FDF7F5 |
| Champagne | #A17D4A | #C9A36F | #FDF9F2 |
| Obsidian | #0F0C09 | #2B2521 | #F4F2EF |
| Eucalyptus | #4C6449 | #6F8A6B | #F3F6F1 |
| Amethyst | #6A4F63 | #8E6F85 | #F9F4F7 |
| Theme | From the theme's button colours |
Component hooks (--lx-*)
| Property | Set by | Default |
|---|---|---|
--lx-cta-bg, --lx-cta-fg, --lx-cta-border, --lx-cta-shadow | Button | Accent 700 on accent contrast |
--lx-cta-radius | Corners | 4px |
--lx-cta-case, --lx-cta-tracking | Uppercase buttons | none, .01em |
--lx-control-radius, --lx-card-radius, --lx-chip-radius | Corners | 4px, 8px, 2px |
--lx-slot-radius | Corners, Set slots | 9999px (pill) |
--lx-badge-bg, --lx-badge-fg, --lx-badge-ring | Badges | Free: accent 700 on on-accent; Kit: ink 900 on ink 100; ring none |
--lx-badge-radius | Corners | 2px |
--lx-display-style, --lx-display-weight | Display style and weight | normal, 400 |
--lx-label-case, --lx-label-tracking | Small labels | uppercase, .08em |
--lx-progress-fill, --lx-progress-on | Automatic contrast | Accent 700 |
Corners: Sharp sets every radius to 0; Round sets buttons, chips and badges to pills, controls 12px, cards 20px.
Design tokens (--luxe-*)
| Group | Properties |
|---|---|
| Colour | --luxe-color-ink-100/200/300/500/700/900, accent-50/500/700, accent-contrast, accent-text, on-accent, success, warning, critical, info, focus, scrim |
| Type | --luxe-font-display, --luxe-font-body, --luxe-font-mono, --luxe-type-<name>-size (display-xl 56 to caption 11) |
| Space | --luxe-space-0…9: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96px |
| Radius | --luxe-radius-xs/s/m/l/full: 2, 4, 8, 16, 9999px |
| Motion | --luxe-duration-instant…deliberate: 100 to 620ms; --luxe-ease-* |
| Shadow | --luxe-shadow-0…4 |
| Layers | --luxe-z-*: base 0, raised 10, overlay 100, drawer 200, modal 300, toast 400, debug 9999 |
Example
/* Square buttons and a quieter badge, in theme CSS */
:root,
:root[data-luxe-preset] {
--lx-cta-radius: 0;
--lx-badge-bg: transparent;
--lx-badge-fg: currentColor;
--lx-badge-ring: inset 0 0 0 1px currentColor;
}Use :root, :root[data-luxe-preset] in theme CSS: the hooks the embed writes for changed Brand settings win over a plain :root. Brand > Badges: Outline gives the same badge without code.
Was this page helpful?