/*
* hero-bootstrap-bridge.css — Single source of truth for Hero OS <-> Bootstrap 5.3 theming
*
* This file bridges Hero OS CSS custom properties (--color-*) to Bootstrap 5.3
* CSS variables (--bs-*). Include AFTER Bootstrap CSS in every admin UI template:
*
*
*
*
* The Hero OS shell sends theme colors via postMessage (hero:theme protocol).
* The receiver JS sets --color-* vars and data-bs-theme on .
* This CSS file maps those vars to Bootstrap, so all components follow the theme.
*
* Served by hero_proxy_ui at /hero-bootstrap-bridge.css.
*
* IMPORTANT: We must NOT use self-referencing fallbacks like
* --bs-body-bg: var(--color-background, var(--bs-body-bg));
* because that creates a circular reference (guaranteed-invalid in CSS),
* which makes all Bootstrap variables resolve to empty/transparent.
* Instead, only override when the Hero OS variable is actually set.
*/
/* =============================================================================
Section 1: Hero OS -> Bootstrap variable mapping (only when Hero vars exist)
Uses @property or initial-value-aware patterns to avoid circular references.
These rules only take effect when the Hero OS shell has injected --color-*
variables via the hero:theme postMessage protocol.
============================================================================= */
/* Only override Bootstrap vars when Hero OS color vars are actually set.
We use separate selectors per variable so each one independently activates. */
html[data-bs-theme][style*="--color-background"] {
--bs-body-bg: var(--color-background);
}
html[data-bs-theme][style*="--color-text"] {
--bs-body-color: var(--color-text);
}
html[data-bs-theme][style*="--color-surface"] {
--bs-secondary-bg: var(--color-surface);
--bs-tertiary-bg: var(--color-surface);
}
html[data-bs-theme][style*="--color-text-muted"] {
--bs-secondary-color: var(--color-text-muted);
}
html[data-bs-theme][style*="--color-border"] {
--bs-border-color: var(--color-border);
}
html[data-bs-theme][style*="--color-primary"] {
--bs-primary: var(--color-primary);
--bs-link-color: var(--color-primary);
--bs-link-hover-color: var(--color-primary);
}
html[data-bs-theme][style*="--color-secondary"] {
--bs-secondary: var(--color-secondary);
}
html[data-bs-theme][style*="--color-success"] {
--bs-success: var(--color-success);
}
html[data-bs-theme][style*="--color-error"] {
--bs-danger: var(--color-error);
}
html[data-bs-theme][style*="--color-warning"] {
--bs-warning: var(--color-warning);
}
html[data-bs-theme][style*="--color-info"] {
--bs-info: var(--color-info);
}
/* =============================================================================
Section 2: Safety-net overrides for dark-forcing Bootstrap classes
Templates may still use bg-dark, text-white, navbar-dark, table-dark.
These rules neutralize them in light mode so they follow the theme.
In dark mode, Bootstrap's defaults already work correctly.
============================================================================= */
[data-bs-theme="light"] .bg-dark {
background-color: var(--bs-secondary-bg) !important;
}
[data-bs-theme="light"] .text-white {
color: var(--bs-body-color) !important;
}
[data-bs-theme="light"] .text-light {
color: var(--bs-body-color) !important;
}
[data-bs-theme="light"] .navbar-dark {
--bs-navbar-color: var(--bs-body-color);
--bs-navbar-hover-color: var(--bs-emphasis-color);
--bs-navbar-active-color: var(--bs-emphasis-color);
--bs-navbar-brand-color: var(--bs-body-color);
--bs-navbar-brand-hover-color: var(--bs-emphasis-color);
}
[data-bs-theme="light"] .table-dark {
--bs-table-bg: var(--bs-body-bg);
--bs-table-color: var(--bs-body-color);
--bs-table-border-color: var(--bs-border-color);
--bs-table-striped-bg: var(--bs-secondary-bg);
--bs-table-hover-bg: var(--bs-secondary-bg);
}
[data-bs-theme="light"] .btn-close-white {
filter: none;
}
/* Form controls that were forced dark */
[data-bs-theme="light"] .form-control.bg-dark,
[data-bs-theme="light"] .form-select.bg-dark {
background-color: var(--bs-body-bg) !important;
color: var(--bs-body-color) !important;
}
/* =============================================================================
Section 3: Shared component refinements
Subtle improvements that make Bootstrap components look better when
themed with Hero OS colors. These apply in both light and dark modes,
but only when the Hero OS variables are present.
============================================================================= */
/* Cards follow surface color (only when Hero vars are set) */
html[style*="--color-surface"] .card {
--bs-card-bg: var(--color-surface);
}
html[style*="--color-border"] .card {
--bs-card-border-color: var(--color-border);
}
/* Navbar follows surface color */
html[style*="--color-surface"] .navbar {
--bs-navbar-bg: var(--color-surface);
}
/* Modal follows surface color */
html[style*="--color-surface"] .modal-content {
--bs-modal-bg: var(--color-surface);
}
html[style*="--color-border"] .modal-content {
--bs-modal-border-color: var(--color-border);
}
/* Dropdown follows surface color */
html[style*="--color-surface"] .dropdown-menu {
--bs-dropdown-bg: var(--color-surface);
}
html[style*="--color-border"] .dropdown-menu {
--bs-dropdown-border-color: var(--color-border);
}
/* Active/selected items use primary color */
html[style*="--color-primary"] .nav-link.active,
html[style*="--color-primary"] .nav-pills .nav-link.active,
html[style*="--color-primary"] .page-link.active,
html[style*="--color-primary"] .active > .page-link {
--bs-nav-pills-link-active-bg: var(--color-primary);
}
/* =============================================================================
Section 4: Typography bridge
Map Hero OS typography vars to Bootstrap when available.
============================================================================= */
html[style*="--font-family"] {
--bs-body-font-family: var(--font-family);
}
html[style*="--font-family-mono"] {
--bs-font-monospace: var(--font-family-mono);
}