/* Themes the builder's Theme select previews, set on by docs/demos/_runtime/runtime.js. Only the --theme-* contract is set here: that's the whole surface a theme may change, so a broken look is a real bug. */ body[data-theme="default"] { /* Bootstrap's own 0.375rem reads as a rounded chip on Hero Banner's display-size CTA, so the default look pins it square directly — documented in retheme-hero-banner.md. Unused by every other component. */ --hero-banner-cta-radius: 0; --theme-color-primary: #0d6efd; --theme-color-primary-ink: #fff; --theme-color-secondary: #6c757d; --theme-color-ink: #212529; --theme-color-ink-muted: rgb(33 37 41 / 75%); --theme-color-surface: #fff; --theme-color-surface-subtle: #f8f9fa; --theme-color-surface-inverse: #212529; --theme-color-border: #dee2e6; --theme-color-border-strong: #dee2e6; --theme-font-size-sm: 0.875rem; --theme-leading-tight: 1.2; --theme-leading-heading: 1.2; --theme-leading-normal: 1.5; --theme-tracking-eyebrow: 0; --theme-heading-weight: 500; --theme-eyebrow-case: none; --theme-measure: 44rem; --theme-radius: 0.375rem; --theme-radius-lg: 0.5rem; --theme-radius-pill: 50rem; } /* The Dark column of docs/tokens.md, which examples.md prints in full. Kept out of the Theme select; only that page's embeds select it by URL. */ body[data-theme="dark"] { --theme-color-primary: #ffb443; --theme-color-primary-ink: #050505; --theme-color-secondary: #b8b8b8; --theme-color-ink: #f5f5f5; --theme-color-ink-muted: #b8b8b8; --theme-color-surface: #050505; --theme-color-surface-subtle: #0a0a0a; --theme-color-surface-inverse: #f5f5f5; --theme-color-border: #222; --theme-color-border-strong: #333; --theme-font-heading: manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --theme-font-body: manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --theme-font-size-sm: 0.8125rem; --theme-leading-tight: 1.04; --theme-leading-heading: 1.2; --theme-leading-normal: 1.55; --theme-tracking-tight: -0.03em; --theme-tracking-eyebrow: 0.14em; --theme-heading-weight: 800; --theme-eyebrow-case: uppercase; --theme-measure: 44rem; --theme-radius: 0.25rem; --theme-radius-lg: 0.375rem; --theme-radius-pill: 0.25rem; } /* A sample client brand, built on the tokens docs/retheme-hero-banner.md sets in step 1. The --bs-* lines stand in for the client's compiled Bootstrap ($dark, $light, $font-family-base), which is what light/dark variants use. */ body[data-theme="custom"] { --theme-color-primary: #10564f; --theme-color-primary-ink: #fff; --theme-color-secondary: #c2583a; --theme-color-ink: #1c2622; --theme-color-ink-muted: #5d6863; --theme-color-surface: #fbf8f2; --theme-color-surface-subtle: #f1eadf; --theme-color-surface-inverse: #12241f; --theme-color-border: #e5ddd0; --theme-color-border-strong: #cdbfaa; --theme-font-heading: fraunces, georgia, serif; --theme-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --theme-font-size-sm: 0.8125rem; --theme-leading-tight: 1.08; --theme-leading-heading: 1.12; --theme-leading-normal: 1.7; --theme-tracking-tight: -0.02em; --theme-tracking-eyebrow: 0.16em; --theme-heading-weight: 600; --theme-eyebrow-case: uppercase; --theme-measure: 40rem; --theme-spacer-2: 0.625rem; --theme-spacer-3: 1.25rem; --theme-spacer-4: 2rem; --theme-spacer-5: 3.5rem; --theme-radius: 0.75rem; --theme-radius-lg: 1.25rem; --theme-radius-pill: 50rem; --theme-container-lg: 1100px; --bs-body-font-family: var(--theme-font-body); --bs-body-color: #1c2622; --bs-body-bg: #fbf8f2; --bs-primary: #10564f; --bs-primary-rgb: 16, 86, 79; --bs-link-color: #10564f; --bs-link-color-rgb: 16, 86, 79; --bs-link-hover-color: #c2583a; --bs-link-hover-color-rgb: 194, 88, 58; --bs-dark: #12241f; --bs-dark-rgb: 18, 36, 31; --bs-light: #f1eadf; --bs-light-rgb: 241, 234, 223; --bs-border-color: #e5ddd0; --bs-border-radius: 0.75rem; --bs-border-radius-lg: 1.25rem; } /* Step 4 of the same walkthrough: the promo-card layout its component override adds, as that override's SCSS compiles ($spacers 4 = 1.5rem; $primary and $border-radius-lg being the theme's own). Offered by extra_options in docs/builders/hero_banner.yml. */ /* The slide still carries .carousel-item, which floats: with no .carousel-inner around it, the wrapper would collapse to nothing. */ .hero-banner--promo-card .carousel-item { float: none; margin-right: 0; } /* The content block carries Bootstrap's .position-relative and .py-5 utilities, both !important, so position and padding need it too. */ .hero-banner--promo-card .hero__banner .hero__banner-content { position: absolute !important; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; max-width: 20rem; padding: 1.5rem !important; background: var(--theme-color-primary, var(--bs-primary)); border-radius: var(--bs-border-radius-lg, 0.5rem); } .hero-banner--promo-card .hero__banner .hero__banner-content .row > * { flex: 0 0 100%; max-width: 100%; }