Theme the widget
The Brandfine widget is scoped under .bf-widget and driven by ~25 CSS custom properties. Brand it with one CSS rule.
The widget's visual surface is theme-agnostic by design — every
selector is scoped under .bf-widget, and every color, radius,
font size, and shadow is exposed as a CSS custom property. To
brand the widget for your site, override the variables you care
about. No theme override file, no !important wars.
The recommended pattern
Add a CSS snippet to your theme's customizer, a Custom CSS plugin, or your child theme's stylesheet. Example — match a warm clay / sage brand:
.bf-widget {
--bf-color-primary: #c2654e;
--bf-color-primary-hover: #a85439;
--bf-color-accent: #2e5a6b;
--bf-radius: 16px;
}That's the entire customization for most cases.
All available variables
Colors
| Variable | Default | What it colors |
|---|---|---|
--bf-color-primary | #0B1F2A | Submit button background, selected calendar day, focused state |
--bf-color-primary-fg | #ffffff | Text on the primary color |
--bf-color-primary-hover | #1a3543 | Submit button hover |
--bf-color-accent | #2E5A6B | Focus ring, calendar dots, status pill |
--bf-color-text | #0B1F2A | Body text |
--bf-color-text-muted | #6b7280 | Secondary text (subtitles, fineprint) |
--bf-color-border | #e5e7eb | Default border |
--bf-color-border-strong | #d1d5db | Hover-state border |
--bf-color-surface | #ffffff | Card background |
--bf-color-surface-soft | #f9fafb | Lighter "rest" surface (empty state) |
--bf-color-surface-hover | #f3f4f6 | Hover state for clickable cells |
--bf-color-error | #b91c1c | Error icons, required-field marker |
--bf-color-warning | #92400e | Banner warnings (e.g. "slot taken") |
--bf-color-success | #047857 | Success-card icon |
Each surface color has a matching *-bg for tinted backgrounds.
Typography
| Variable | Default | Notes |
|---|---|---|
--bf-font-family | system stack | Inherits from your theme if you want — set to inherit. |
--bf-font-size | 14px | Base body size |
--bf-font-size-sm | 12px | Hints, labels |
--bf-font-size-lg | 18px | Widget title |
--bf-line-height | 1.5 | Base line height |
Layout
| Variable | Default | Notes |
|---|---|---|
--bf-radius | 12px | Outer card radius |
--bf-radius-sm | 8px | Inputs, slot buttons, internal elements |
--bf-radius-full | 999px | Pills, icon buttons |
--bf-shadow | subtle | Card shadow |
--bf-max-width | 520px | Widget caps at this width — set higher for wider hero placements |
--bf-pad | 22px | Outer padding |
--bf-gap | 12px | Default vertical gap |
--bf-gap-lg | 20px | Section gap |
Dark mode
The widget respects prefers-color-scheme: dark automatically.
When the visitor's OS is in dark mode AND your theme doesn't pin
a color scheme, the widget palette inverts to a dark surface.
To force light mode (e.g. you have a dark hero that needs the widget to stay light):
<div class="bf-widget bf-widget--force-light" ...>(Pass align="center" etc. via the shortcode — to add classes,
use a wrapper div around [brandfine_appointments] or a Code
block.)
To force dark mode unconditionally, override the variables
yourself in CSS — there's no built-in --force-dark modifier.
Examples
Soft pastel / Mediterranean
.bf-widget {
--bf-color-primary: #2e5a6b;
--bf-color-accent: #c2654e;
--bf-color-surface: #f1ece3;
--bf-color-surface-soft: #ebe5d8;
--bf-color-border: rgba(11, 31, 42, 0.12);
--bf-radius: 18px;
}Bold high-contrast
.bf-widget {
--bf-color-primary: #ff6b00;
--bf-color-primary-hover: #e95f00;
--bf-color-accent: #ff6b00;
--bf-color-text: #111111;
--bf-radius: 6px;
}Match the page typography exactly
.bf-widget {
--bf-font-family: inherit;
}Defensive resets
The widget already resets the following on its root to avoid unwanted inheritance from your theme:
font-family,font-size,line-height(set by the variables above, default to neutral system stack)color,text-alignbox-sizing: border-box(on the root and every descendant)
If your theme bleeds something else (e.g. letter-spacing
applied to all elements), open an issue and we'll add a defensive
reset for it.