/* cbui/variants/aero */ /* ========================================================================== * Aero Flavor — Soft pill shapes + Liquid Glass plasticity * * Aero shares the pill geometry of the Soft flavor and adds *plasticity* on * top: solid buttons get a multi-layer drop shadow + inner sheen so they * look like physical objects you could press, not flat paint. The effect is * what differentiates Aero from Soft — same shape, different physical weight. * * • solid buttons: embossed shadow + top sheen + hover lift * • soft / outline: subtle frost + tinted hover backdrop blur * • ghost: flat at rest, frosted on hover * • cards / modals: backdrop blur + frosted surface * * Effects are gated: * .cbui-cap-button-shadow → drop shadow + sheen on buttons * :not(.a11y-reduced-motion) → hover-lift + active press-down * :not(.a11y-reduced-transparency) → backdrop blur effects * * Capability classes are emitted by the chrome / Storybook scope wrapper based * on user prefs. The motion gate uses the standard a11y class so the OS-level * prefers-reduced-motion is honoured uniformly across all modules. * * Applied via [data-flavor="aero"] on a container. * ========================================================================== */ [data-flavor="aero"] { --aero-glass-blur: 10px; --aero-glass-saturation: 140%; /* Asymmetric "Bringer pill" embossed shadow — top-left highlight, bottom-right depth. Multi-layer for a soft falloff. */ --aero-shadow-emboss: -0.75px -0.75px 0.75px rgb(0 0 0 / 0.06), -0.75px -0.75px 0.4px rgb(0 0 0 / 0.04), 0.75px 0.75px 1.5px rgb(0 0 0 / 0.18), 0.75px 0.75px 0.75px rgb(0 0 0 / 0.12); --aero-shadow-emboss-hover: 0 0 8px rgb(0 0 0 / 0.22), -0.75px -0.75px 0.75px rgb(0 0 0 / 0.06), -0.75px -0.75px 0.4px rgb(0 0 0 / 0.04), 0.75px 0.75px 1.5px rgb(0 0 0 / 0.18), 0.75px 0.75px 0.75px rgb(0 0 0 / 0.12); /* Inner highlight on the top edge — the "Apple sheen" trick. The colour is calibrated for solid coloured surfaces; pure white at moderate alpha. */ --aero-inner-sheen: inset 0 1px 0 rgb(255 255 255 / 0.28); /* Subtle bottom bevel on solid surfaces — gives the illusion of curvature. Pairs with the top sheen above. */ --aero-inner-bevel: inset 0 -1px 0 rgb(0 0 0 / 0.10); /* No edge ring needed in light mode — the surrounding white background and shadow are enough definition. */ --aero-edge: transparent; } [data-flavor="aero"][data-scheme="dark"], .dark [data-flavor="aero"] { /* Dark mode does NOT use the asymmetric outer shadow — at low light it reads as fog rather than depth. We replace it with a clean inset treatment: a brighter top edge (sheen), a darker bottom edge (bevel), and a tight 1px outer ring on hover for focus. This is the modern dark-mode look (think Linear, Vercel, GitHub). */ --aero-shadow-emboss: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.30), 0 1px 2px rgb(0 0 0 / 0.40); --aero-shadow-emboss-hover: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -1px 0 rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.10); /* The sheen is encoded in the shadow above; keep this var defined for backwards-compat callers but make it a no-op. */ --aero-inner-sheen: 0 0 transparent; --aero-inner-bevel: 0 0 transparent; /* Dark mode edge ring — kept subtle; the inset bevel does most of the definition work now. */ --aero-edge: rgb(0 0 0 / 0.45); } /* ── Cards ────────────────────────────────────────────────────────────── * * Aero treats Card variants like Buttons: only the LOUD variant (elevated) * gets the full plastic recipe (emboss + sheen + bevel). The QUIET variants * stay flat: * • flat — no Aero treatment, the bg-subtle surface is the affordance * • outlined — translucent frosted surface + diluted border (chrome cue) * • elevated — frosted surface + emboss/sheen/bevel + 1px anchor edge * * Same loud-vs-quiet rule that keeps Outline/Ghost/Link buttons flat in * Aero — see the §1a Quality Bar entry "Aero-Plastik ist exklusiv für * solid-Variants". */ [data-flavor="aero"] .cbui-card-outlined { background-color: color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } /* Elevated in Aero is the loud, "physical card hovering above the page" variant — it needs an OPAQUE surface that reads heavier than the translucent outlined treatment, otherwise both look the same in dark mode. The plastic recipe (emboss + sheen + bevel below) gives the actual lift; the glass blur is dropped because elevated is a tile, not a window. */ [data-flavor="aero"] .cbui-card-elevated { background-color: var(--color-bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Only retune the neutral border — toned outlined cards keep their tone-coloured border so the semantic cue survives the glass treatment. (Same loud-vs-quiet thinking as the Navbar Aero rules.) */ [data-flavor="aero"] .cbui-card-outlined.cbui-card-tone-neutral { border-color: color-mix(in srgb, var(--color-border) 60%, transparent); } /* Elevated is the loud Card variant in Aero — full plastic recipe like solid buttons. Anchor edge + emboss + sheen + bevel. */ [data-flavor="aero"] .cbui-card-elevated { border-color: var(--aero-edge); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-card-elevated { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* Interactive elevated Aero cards: keep the plastic on hover/focus, add a subtle hover lift and focus ring. */ [data-flavor="aero"]:not(.a11y-reduced-motion) .cbui-card-elevated.cbui-card-interactive:hover { transform: translateY(-1px); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-card-elevated.cbui-card-interactive:hover { box-shadow: var(--aero-shadow-emboss-hover), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-card-elevated.cbui-card-interactive:focus-visible { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel), 0 0 0 var(--focus-ring-offset, 2px) var(--color-bg-base), 0 0 0 calc(var(--focus-ring-offset, 2px) + var(--focus-ring-width, 2px)) var(--color-focus-ring, var(--color-primary)); } /* ───────────────────────────────────────────────────────────────────────── * BUTTONS — solid variants get the Bringer-style emboss + hover glow. * * The new variant model: solid buttons all share the .cbui-button-solid * class regardless of tone. So a single rule applies the plasticity. * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-solid { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-solid:hover { box-shadow: var(--aero-shadow-emboss-hover), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-solid:active { /* Pressed state: shrink the outer shadow and intensify the inner bevel, giving the illusion the button just dipped into the surface. */ box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.18), inset 0 -1px 0 rgb(255 255 255 / 0.10); } /* Dark-mode edge ring on solid variants — gives the shadow something to anchor against. Light mode keeps --aero-edge: transparent. */ [data-flavor="aero"] .cbui-button-solid { border-color: var(--aero-edge); } /* Focus-visible composition — the emboss shadow has higher specificity than the base focus rule, so we re-emit both layers explicitly when the button is keyboard-focused. The ring sits *outside* the emboss, both stay visible. */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-solid:focus-visible { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel), 0 0 0 var(--focus-ring-offset, 2px) var(--color-bg-base), 0 0 0 calc(var(--focus-ring-offset, 2px) + var(--focus-ring-width, 2px)) var(--color-focus-ring, var(--color-primary)); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-soft.cbui-button-tone-neutral:focus-visible { box-shadow: var(--aero-inner-sheen), 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 var(--focus-ring-offset, 2px) var(--color-bg-base), 0 0 0 calc(var(--focus-ring-offset, 2px) + var(--focus-ring-width, 2px)) var(--color-focus-ring, var(--color-primary)); } /* Soft + neutral (the old "secondary" treatment) — frosted surface in Aero. Using the soft+neutral combo because that's what visually maps onto the old secondary button: a quiet filled-but-defined affordance. */ [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-neutral { background-color: color-mix(in srgb, var(--color-surface) 70%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); border-color: color-mix(in srgb, var(--color-border) 70%, transparent); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-button-soft.cbui-button-tone-neutral { box-shadow: var(--aero-inner-sheen), 0 1px 2px rgb(0 0 0 / 0.06); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-neutral:hover { background-color: color-mix(in srgb, var(--color-surface) 92%, transparent); } /* Outline + Ghost are quiet variants — they MUST NOT pick up the solid- button plasticity (emboss / sheen / lift). Aero reserves the physical- pill treatment for `solid` only; everything else stays a flat affordance so the loud/quiet visual contrast is preserved. The earlier Aero rules that added inner-sheen on outline-hover and a backdrop blur on ghost-hover are intentionally omitted. */ /* Soft (coloured tones) — STRONGER tint than the base flavor, to match Aero's higher visual energy. Tones that aren't listed fall back to the base CSS. */ [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 22%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-primary:hover { background-color: color-mix(in srgb, var(--color-primary) 32%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-primary:active { background-color: color-mix(in srgb, var(--color-primary) 42%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 22%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-danger:hover { background-color: color-mix(in srgb, var(--color-danger) 32%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-danger:active { background-color: color-mix(in srgb, var(--color-danger) 42%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 22%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-warning:hover { background-color: color-mix(in srgb, var(--color-warning) 32%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-warning:active { background-color: color-mix(in srgb, var(--color-warning) 42%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-info { background-color: color-mix(in srgb, var(--color-info) 22%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-info:hover { background-color: color-mix(in srgb, var(--color-info) 32%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-info:active { background-color: color-mix(in srgb, var(--color-info) 42%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-success { background-color: color-mix(in srgb, var(--color-success) 22%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-success:hover { background-color: color-mix(in srgb, var(--color-success) 32%, transparent); } [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-success:active { background-color: color-mix(in srgb, var(--color-success) 42%, transparent); } /* ── Motion (gated by reducedMotion a11y class) ───────────────────────── */ /* Lift is part of the Aero solid plasticity — outline / ghost / link buttons stay flat. They are quieter affordances and a hover-lift would make them feel like physical pills, blurring the loud/quiet visual contrast. */ [data-flavor="aero"]:not(.a11y-reduced-motion) .cbui-button-solid:not(.cbui-button-disabled):not([disabled]):hover { transform: translateY(-1px); } [data-flavor="aero"]:not(.a11y-reduced-motion) .cbui-button-solid:not(.cbui-button-disabled):not([disabled]):active { transform: translateY(0); } /* ── Reduced transparency fallback ────────────────────────────────────── */ [data-flavor="aero"].a11y-reduced-transparency .cbui-card-outlined, [data-flavor="aero"].a11y-reduced-transparency .cbui-card-elevated, [data-flavor="aero"].a11y-reduced-transparency .cbui-button-soft.cbui-button-tone-neutral { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-surface); } /* surface means opaque bg-base in every flavour (CB-3704). aero.css is unlayered and would otherwise beat the layered .cbui-card-mod-surface rule with the 86 % glass fill. */ [data-flavor="aero"] .cbui-card.cbui-card-mod-surface { background-color: var(--color-bg-base); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ───────────────────────────────────────────────────────────────────────── * MODAL — Aero plastic, exclusive to the loud `elevated` variant. * * Mirrors the Card-elevated recipe (anchor edge + emboss + sheen + bevel). * Outlined modals keep their neutral border and the soft default shadow — * the loud-vs-quiet contrast is preserved. * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-modal-elevated { background-color: var(--color-bg-elevated); border-color: var(--aero-edge); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-flavor="aero"].cbui-cap-button-shadow .cbui-modal-elevated { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel), 0 24px 64px rgb(0 0 0 / 0.35); } /* LocalModal — scope-bound elevated panel. Mirrors the Modal plastic, since the elevated panel is the same loud/elevated surface (CB-27). */ [data-flavor="aero"] .cbui-local-modal-elevated { background-color: var(--color-bg-elevated); border-color: var(--aero-edge); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-flavor="aero"].cbui-cap-button-shadow .cbui-local-modal-elevated { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel), 0 24px 64px rgb(0 0 0 / 0.35); } /* size=full is edge-to-edge + frameless — suppress the Aero emboss/border. */ [data-flavor="aero"] .cbui-local-modal-elevated.cbui-local-modal-size-full, [data-flavor="aero"].cbui-cap-button-shadow .cbui-local-modal-elevated.cbui-local-modal-size-full { border: 0; box-shadow: none; } /* Aero scope picks up a subtle 3px backdrop blur via the --overlay-backdrop-blur token (set in AeroFlavor). No flavor-scoped ::backdrop rule needed — the base CSS already reads the token. */ /* ───────────────────────────────────────────────────────────────────────── * DRAWER — Aero plastic on the panel surface. * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-drawer { background-color: var(--color-bg-elevated); border-color: var(--aero-edge); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-drawer { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* ───────────────────────────────────────────────────────────────────────── * POPOVER — Aero glass treatment. * Subtle blur on the panel + tone-tinted backdrop fill. * ───────────────────────────────────────────────────────────────────────── */ /* Aero adds frosted-glass behind the popover but keeps the popover's own border (defined in tooltip.css via color-mix on --color-text). The earlier `border-color: var(--aero-edge)` override killed the visible border in light mode — aero-edge is transparent on light, only appearing on dark. */ [data-flavor="aero"] .cbui-popover { background-color: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } [data-flavor="aero"].a11y-reduced-transparency .cbui-popover { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } /* ───────────────────────────────────────────────────────────────────────── * TOAST — Aero plastic on solid variant. * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-toast-solid { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* ───────────────────────────────────────────────────────────────────────── * NAVBAR — Aero plastic. * * Solid bars get a translucent backdrop blur even without +bg-blur — the bar * IS the surface, so the glass treatment is the baseline. Floating bars * additionally get the emboss + sheen + bevel composition (same recipe as * solid Aero buttons but at bar scale). * ───────────────────────────────────────────────────────────────────────── */ /* Use --cbui-navbar-bg as the source so tone classes (which override that variable to e.g. --color-primary) keep their colour — Aero just wraps the tone-coloured surface in a translucent glass treatment. The :not(.cbui-navbar-transparent-until-scroll) guard yields the bar to the transparent-until-scroll variant so the at-rest transparent state actually paints transparent in Aero too. */ [data-flavor="aero"] .cbui-navbar-solid.cbui-navbar-tone-neutral:not(.cbui-navbar-transparent-until-scroll) { background-color: color-mix(in srgb, var(--cbui-navbar-bg) 82%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } /* The base navbar.css rule sets the divider on whichever side matches the placement (border-bottom for top, border-top for bottom); we use the `border-color` shorthand here so this Aero override stays placement-neutral — only the side with non-zero border-width actually paints. */ [data-flavor="aero"] .cbui-navbar-solid.cbui-navbar-tone-neutral.cbui-navbar-with-divider { border-color: color-mix(in srgb, var(--color-border) 60%, transparent); } /* transparent_until_scroll — Aero's scrolled state mirrors the standard solid+blur recipe; the not-scrolled state must defeat any Aero defaults. */ [data-flavor="aero"] .cbui-navbar-transparent-until-scroll:not(.is-scrolled) { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; } [data-flavor="aero"] .cbui-navbar-transparent-until-scroll.is-scrolled { background-color: color-mix(in srgb, var(--color-bg-elevated) 82%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } [data-flavor="aero"] .cbui-navbar-floating.cbui-navbar-tone-neutral { background-color: color-mix(in srgb, var(--cbui-navbar-bg) 86%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } /* Tone-coloured floating bars: keep the tone background, just add the plastic shadow + sheen for the lifted-card effect. */ [data-flavor="aero"] .cbui-navbar-floating:not(.cbui-navbar-tone-neutral) { border: 1px solid var(--cbui-navbar-border); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-navbar-floating { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-navbar-floating.is-scrolled { box-shadow: var(--aero-shadow-emboss-hover), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* ───────────────────────────────────────────────────────────────────────── * WINDOW — Aero plastic (UiWindow, Wave 3a). * * Aero plastik is EXCLUSIVE to the floating frame: a floating window IS a * floating object, so heavy plastic is right here (the inverse of the * table.css lesson, where a table is a working surface). The docked frame * stays quiet — loud-vs-quiet. The header band gets a frosted translucency, * and the focused window carries the full emboss + sheen + bevel + a deep * cast shadow; background windows keep just the emboss so the stack still * reads as layered. * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-window-frame-floating { background-color: var(--color-bg-elevated); /* Drive the border via the token so the focus cascade keeps working — the focused window re-points --cbui-window-frame-border to the accent. */ --cbui-window-frame-border: var(--aero-edge); } [data-flavor="aero"] .cbui-window-frame-floating .cbui-window-frame-header { /* The frosted header reads --cbui-window-header-bg, so the focus tint (accent-washed surface) flows through automatically. */ background-color: color-mix(in srgb, var(--cbui-window-header-bg) 80%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } [data-flavor="aero"].a11y-reduced-transparency .cbui-window-frame-floating .cbui-window-frame-header { background-color: var(--cbui-window-header-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Focused window — the accent border, explicit so it beats the per-frame border token rules above regardless of source order. */ [data-flavor="aero"] .cbui-window-focused .cbui-window-frame { --cbui-window-frame-border: var(--cbui-window-accent); } /* Window shadow stays at Clean defaults across ALL flavors — Aero's plastic emboss/sheen/bevel on the floating frame is intentionally NOT layered here. The window is a piece of chrome the eye returns to many times per session; the Clean drop-shadow is the right amount of lift, the Aero plastic was reading "loud". (Card / Button / Navbar plastic stays — those are decorative objects, not chrome.) */ /* Docked frame — quiet: just the Aero edge, no plastic. */ [data-flavor="aero"] .cbui-window-frame-docked { background-color: var(--color-bg-elevated); --cbui-window-frame-border: var(--aero-edge); } /* NavItem + Brand share one frosted-hover treatment in Aero — both use the .cbui-nav-item-base recipe in CSS. The :not() chains keep the at-rest state transparent for transparent-until-scroll bars. */ [data-flavor="aero"]:not(.a11y-reduced-transparency) .cbui-nav-item:hover, [data-flavor="aero"]:not(.a11y-reduced-transparency) .cbui-navbar-brand:hover { backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); } /* Reduced-transparency fallback for navbar */ [data-flavor="aero"].a11y-reduced-transparency .cbui-navbar-solid, [data-flavor="aero"].a11y-reduced-transparency .cbui-navbar-floating { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } [data-flavor="aero"].a11y-reduced-transparency .cbui-nav-item:hover, [data-flavor="aero"].a11y-reduced-transparency .cbui-navbar-brand:hover { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ───────────────────────────────────────────────────────────────────────── * HEADER & TOOLBAR — Aero plastic on the shared .cbui-bar recipe. * * Same liquid-glass baseline as Navbar (frosted backdrop on solid+neutral), * but using the bar tokens so any future .cbui-bar consumer gets the same * treatment automatically. The :not(.cbui-bar-navbar) guard keeps these rules * from double-applying to Navbar (which has its own rules above). * ───────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-bar-solid.cbui-bar-tone-neutral:not(.cbui-bar-navbar) { background-color: color-mix(in srgb, var(--cbui-bar-bg) 82%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } [data-flavor="aero"] .cbui-bar-solid.cbui-bar-tone-neutral:not(.cbui-bar-navbar).cbui-bar-with-divider-bottom, [data-flavor="aero"] .cbui-bar-solid.cbui-bar-tone-neutral:not(.cbui-bar-navbar).cbui-bar-with-divider-top { border-color: color-mix(in srgb, var(--color-border) 60%, transparent); } [data-flavor="aero"].a11y-reduced-transparency .cbui-bar-solid:not(.cbui-bar-navbar) { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-bar-solid:not(.cbui-bar-navbar) { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-navbar-solid, [data-flavor="aero"] .cbui-navbar-floating { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } } /* OS-level prefers-* still honoured outside the scope system */ @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-card, [data-flavor="aero"] .cbui-button-soft.cbui-button-tone-neutral { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-surface); } } @media (prefers-reduced-motion: reduce) { [data-flavor="aero"] .cbui-button-solid:hover, [data-flavor="aero"] .cbui-button-solid:active { transform: none; } } /* ────────────────────────────────────────────────────────────────────────── * Nav (vertical) — Aero plastic: the same liquid-glass treatment as Navbar, * adapted for vertical layouts. Only neutral-toned Navs get the frosted bg * (tone-coloured Navs keep their tone). Floating Navs additionally pick up * the emboss + sheen + bevel composition for the lifted-card look. * ────────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-nav-default.cbui-nav-tone-neutral { background-color: color-mix(in srgb, var(--cbui-nav-bg) 82%, transparent); } [data-flavor="aero"] .cbui-nav-floating.cbui-nav-tone-neutral { background-color: color-mix(in srgb, var(--cbui-nav-bg) 86%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } [data-flavor="aero"] .cbui-nav-floating:not(.cbui-nav-tone-neutral) { border: 1px solid var(--cbui-nav-border); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-nav-floating { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* Reduced-transparency fallback */ [data-flavor="aero"].a11y-reduced-transparency .cbui-nav-default, [data-flavor="aero"].a11y-reduced-transparency .cbui-nav-floating { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-nav-default, [data-flavor="aero"] .cbui-nav-floating { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } } /* ────────────────────────────────────────────────────────────────────────── * Tabnav — Aero plastic. * The loud-only rule applies here too: BOTH segmented variants — segmented * and segmented-pill — get the full plastic recipe (frosted capsule + lifted * active item with emboss + sheen + bevel, same recipe as Aero Buttons and * Cards). Underline / pill / enclosed / plain stay flat to preserve the * loud-vs-quiet contrast. The `pill` variant is intentionally calmer than * `segmented-pill` — the latter opts into the lifted-capsule treatment. * ────────────────────────────────────────────────────────────────────────── */ /* Segmented (both sub-variants) — glass capsule. Container bg comes from the base `--cbui-tabnav-segmented-fill` token (subtle text-tint), so light Aero stays a soft gray distinct from the white active card, and dark Aero stays a subtle light wash distinct from the near-black active card. The Aero-specific bits are only the backdrop-filter (frosted glass) + a softened border so the capsule edge reads against the page underneath. */ [data-flavor="aero"] .cbui-tabnav-segmented .cbui-tabnav-strip-wrapper, [data-flavor="aero"] .cbui-tabnav-segmented-pill .cbui-tabnav-strip-wrapper { backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); } /* Segmented (both sub-variants) active item — full Aero plastic recipe: emboss + inner sheen + inner bevel. Same shadow stack as Aero Buttons and elevated Cards. Uses the `--cbui-tabnav-segmented-active` token (not raw `--color-bg-elevated`) so the dark-mode override that lifts the surface noticeably above the container takes effect — without that, the active card and the container both resolve to bg-elevated in dark mode and the contrast disappears. */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented .cbui-tabnav-item-active, [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented .cbui-tabnav-item[aria-selected="true"], [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented .cbui-tabnav-item[aria-current="page"], [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented-pill .cbui-tabnav-item-active, [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented-pill .cbui-tabnav-item[aria-selected="true"], [data-flavor="aero"].cbui-cap-button-shadow .cbui-tabnav-segmented-pill .cbui-tabnav-item[aria-current="page"] { background-color: var(--cbui-tabnav-segmented-active); box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* Non-segmented Aero stays close to the base design; we only tint the bg-fill container so it reads as glass rather than a flat panel. */ [data-flavor="aero"] .cbui-tabnav-mod-bg-fill .cbui-tabnav-strip-wrapper { background-color: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent); backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } /* Reduced-transparency fallback */ [data-flavor="aero"].a11y-reduced-transparency .cbui-tabnav-segmented .cbui-tabnav-strip-wrapper, [data-flavor="aero"].a11y-reduced-transparency .cbui-tabnav-segmented-pill .cbui-tabnav-strip-wrapper, [data-flavor="aero"].a11y-reduced-transparency .cbui-tabnav-mod-bg-fill .cbui-tabnav-strip-wrapper { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-tabnav-segmented .cbui-tabnav-strip-wrapper, [data-flavor="aero"] .cbui-tabnav-segmented-pill .cbui-tabnav-strip-wrapper, [data-flavor="aero"] .cbui-tabnav-mod-bg-fill .cbui-tabnav-strip-wrapper { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } } /* ────────────────────────────────────────────────────────────────────────── * STEPPER — Aero * * Plastic rule: only the *filled* indicator states get plastic (complete + * current). Upcoming stays quiet (outlined). The panel-variant gets full * card plastic on its step boxes, mirroring `.cbui-card-elevated`. * * Connector stays a flat 2px line — the directional accent doesn't need * embossing and would muddy the row at small thicknesses. * ────────────────────────────────────────────────────────────────────────── */ /* Filled indicators get the plastic recipe. Anchor border keeps shadow * legible; emboss + sheen + bevel match the solid-button family. */ [data-flavor="aero"] .cbui-stepper-step-complete .cbui-stepper-step-indicator, [data-flavor="aero"] .cbui-stepper-step-error .cbui-stepper-step-indicator { border-color: var(--aero-edge); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-stepper-step-complete .cbui-stepper-step-indicator, [data-flavor="aero"].cbui-cap-button-shadow .cbui-stepper-step-error .cbui-stepper-step-indicator { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } /* Current indicator keeps the focus halo, but adds a subtle inner sheen so * it doesn't read as a flat outlined chip on glassy backgrounds. */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-stepper-step-current .cbui-stepper-step-indicator { box-shadow: var(--cbui-stepper-current-ring), var(--aero-inner-sheen); } /* dot variant: filled dots get a tiny anchor border for legibility. */ [data-flavor="aero"] .cbui-stepper-dot .cbui-stepper-step-indicator { box-shadow: 0 0 0 1px color-mix(in srgb, var(--aero-edge) 50%, transparent); } /* panel variant — each step box. * * Aero plastic applies ONLY to the active panels (current + error). Non- * current panels are kept neutral, deliberately WITHOUT the Aero-edge * border override: we want non-current panels to use the universal * `--color-border` so their visual weight matches between light and dark * mode. The Aero-edge border (white-tint) was invisible in light and * visible in dark — an inconsistency the user (rightfully) flagged. */ [data-flavor="aero"] .cbui-stepper-panel .cbui-stepper-step-current { background: var(--cbui-stepper-current-panel-bg); } [data-flavor="aero"] .cbui-stepper-panel .cbui-stepper-step-error { background: var(--cbui-stepper-error-panel-bg); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-stepper-panel .cbui-stepper-step-current { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-stepper-panel .cbui-stepper-step-error { box-shadow: var(--aero-shadow-emboss), var(--aero-inner-sheen), var(--aero-inner-bevel); } [data-flavor="aero"] .cbui-stepper-panel .cbui-stepper-step-interactive:hover:not(.cbui-stepper-step-disabled, .cbui-stepper-step-current) { transform: translateY(-1px); } /* Chrome modifiers — frosted bar around the strip. */ [data-flavor="aero"] .cbui-stepper-mod-bg-fill .cbui-stepper-chrome, [data-flavor="aero"] .cbui-stepper-mod-bg-blur .cbui-stepper-chrome { background-color: color-mix(in srgb, var(--color-bg-elevated) 80%, transparent); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: var(--aero-edge); } [data-flavor="aero"].a11y-reduced-transparency .cbui-stepper-mod-bg-fill .cbui-stepper-chrome, [data-flavor="aero"].a11y-reduced-transparency .cbui-stepper-mod-bg-blur .cbui-stepper-chrome { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-stepper-mod-bg-fill .cbui-stepper-chrome, [data-flavor="aero"] .cbui-stepper-mod-bg-blur .cbui-stepper-chrome { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-elevated); } } /* ────────────────────────────────────────────────────────────────────────── * Inputs + Textareas — Aero plastic. * * The loud-only rule applies here too: only the `default` Input/Textarea * variant picks up the inset sheen + bevel treatment. `filled` and `flush` * stay flat in every flavor so the loud-vs-quiet contrast survives. * * The treatment is intentionally subtle — inputs are working surfaces, not * pressable objects. We give them an *inset* sheen (light pouring in from * the top edge) and a faint bottom bevel, which together suggest "this is * a recessed field carved into glass". No outer drop-shadow (would compete * with focus-ring) and no hover-lift transform (an input lifting on hover * would be disorienting). * ────────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-input-default, [data-flavor="aero"] .cbui-textarea-default { background-color: color-mix(in srgb, var(--color-bg-base) 92%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(0 0 0 / 0.04); } [data-flavor="aero"] .cbui-input-default:hover:not(:disabled):not(:focus), [data-flavor="aero"] .cbui-textarea-default:hover:not(:disabled):not(:focus) { background-color: var(--color-bg-base); } /* Focus keeps the plastic inset and adds the variant's standard soft tone-mixed glow on top — the base CBUI input focus, composed with Aero's plastic. Themes that want the gapped ring instead can apply the `+focus-ring` modifier or override this rule. */ [data-flavor="aero"] .cbui-input-default:focus, [data-flavor="aero"] .cbui-input-default:focus-visible, [data-flavor="aero"] .cbui-input-default[data-cbui-demo-state="focused"], [data-flavor="aero"] .cbui-textarea-default:focus, [data-flavor="aero"] .cbui-textarea-default:focus-visible, [data-flavor="aero"] .cbui-textarea-default[data-cbui-demo-state="focused"] { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--cbui-input-tone-ring) var(--cbui-input-glow-alpha), transparent); } /* Dark mode: less white in the inset highlight (otherwise reads as a glowing edge); the bottom bevel goes deeper to suggest depth without a fully filled surface. The glow-alpha is bumped on the base rule for dark mode so the soft glow stays visible on dark surfaces. */ [data-flavor="aero"][data-scheme="dark"] .cbui-input-default, [data-flavor="aero"][data-scheme="dark"] .cbui-textarea-default, .dark [data-flavor="aero"] .cbui-input-default, .dark [data-flavor="aero"] .cbui-textarea-default { background-color: color-mix(in srgb, var(--color-bg-base) 95%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.30); } [data-flavor="aero"][data-scheme="dark"] .cbui-input-default:focus, [data-flavor="aero"][data-scheme="dark"] .cbui-textarea-default:focus, .dark [data-flavor="aero"] .cbui-input-default:focus, .dark [data-flavor="aero"] .cbui-textarea-default:focus { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 -1px 0 rgb(0 0 0 / 0.30), 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--cbui-input-tone-ring) var(--cbui-input-glow-alpha), transparent); } /* +focus-ring modifier in Aero: replaces the soft glow with the gap+ring composition while keeping the plastic insets. */ [data-flavor="aero"] .cbui-input.cbui-input-mod-focus-ring:focus, [data-flavor="aero"] .cbui-input.cbui-input-mod-focus-ring:focus-visible, [data-flavor="aero"] .cbui-textarea.cbui-textarea-mod-focus-ring:focus, [data-flavor="aero"] .cbui-textarea.cbui-textarea-mod-focus-ring:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 0 0 var(--cbui-input-ring-gap) var(--cbui-input-ring-gap-color), 0 0 0 calc(var(--cbui-input-ring-gap) + var(--cbui-input-ring-width)) var(--cbui-input-tone-ring); } /* Reduced-transparency fallback — drop the insets, keep the glow. */ [data-flavor="aero"].a11y-reduced-transparency .cbui-input-default, [data-flavor="aero"].a11y-reduced-transparency .cbui-textarea-default { background-color: var(--color-bg-base); box-shadow: none; } [data-flavor="aero"].a11y-reduced-transparency .cbui-input-default:focus, [data-flavor="aero"].a11y-reduced-transparency .cbui-textarea-default:focus { box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--cbui-input-tone-ring) var(--cbui-input-glow-alpha), transparent); } @media (prefers-reduced-transparency: reduce) { [data-flavor="aero"] .cbui-input-default, [data-flavor="aero"] .cbui-textarea-default { background-color: var(--color-bg-base); box-shadow: none; } [data-flavor="aero"] .cbui-input-default:focus, [data-flavor="aero"] .cbui-textarea-default:focus { box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--cbui-input-tone-ring) var(--cbui-input-glow-alpha), transparent); } } /* ────────────────────────────────────────────────────────────────────── * Switch — Aero default is the pill thumb (Apple Liquid Glass look). * * Aero's design language leans toward soft, glassy, mid-radius surfaces; * the pill thumb fits that vocabulary far better than the round dot. * Re-applies the same widening that the `+pill` modifier does, but as * the flavor's default — every Switch in Aero is pill-thumbed unless * a future opposing modifier forces it round. * * Track widens slightly per size to give the wider thumb travel room; * the thumb-w / track-w / pad / thumb-d math is identical to * `.cbui-switch-mod-pill` in switch.css. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-switch { --cbui-switch-track-w: 2.625rem; --cbui-switch-thumb-w: calc(var(--cbui-switch-thumb-d) * 1.5); } [data-flavor="aero"] .cbui-switch.cbui-switch-size-sm { --cbui-switch-track-w: 2.125rem; --cbui-switch-thumb-w: calc(var(--cbui-switch-thumb-d) * 1.5); } [data-flavor="aero"] .cbui-switch.cbui-switch-size-lg { --cbui-switch-track-w: 3.125rem; --cbui-switch-thumb-w: calc(var(--cbui-switch-thumb-d) * 1.5); } /* ────────────────────────────────────────────────────────────────────── * Aero — SecretInput action buttons default to icon-only * * In Aero, the input field already carries its own emboss / sheen * plastic and the tinted action buttons compete with it visually. * Switching to icon-only by default lets the reveal / copy glyphs read * as plain affordances floating in the input gutter while keeping the * larger 2.5rem touch-target width unchanged. The token-override * approach means call-sites can still force-set the tinted treatment * via class composition if they need it. * * This is the canonical pattern for "flavor opts a component into a * different default style" — flip the relevant tokens on the host * via a `[data-flavor="X"] .cbui-COMPONENT { … }` rule and the rest of * the component CSS cascades naturally. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-secret-input { --cbui-secret-input-action-bg: transparent; --cbui-secret-input-action-hover-bg: color-mix(in srgb, currentColor 8%, transparent); --cbui-secret-input-action-active-bg: color-mix(in srgb, currentColor 16%, transparent); --cbui-secret-input-action-divider: 0; } /* ────────────────────────────────────────────────────────────────────── * Aero — Table + Timeline (UiData, Wave 4) * * A data table is quiet content chrome, not a floating object, so Aero * stays restrained here: the `bordered` variant picks up the Aero edge + * a soft lift, and the header band gets a frosted translucency. No emboss * plastic on rows — the eye scans them, plasticity would be noise. The * loud-vs-quiet rule still holds: only the icon-marker on a Timeline (a * small, deliberate object) gets the embossed plastic. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-table-wrap-bordered { border-color: var(--aero-edge); } [data-flavor="aero"].cbui-cap-button-shadow .cbui-table-wrap-bordered { box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px -6px rgb(0 0 0 / 0.14); } [data-flavor="aero"] .cbui-table-head th { background-color: color-mix(in srgb, var(--color-bg-subtle) 82%, transparent); } [data-flavor="aero"]:not(.a11y-reduced-transparency) .cbui-table-sticky-header .cbui-table-head th { backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); -webkit-backdrop-filter: blur(var(--aero-glass-blur)) saturate(var(--aero-glass-saturation)); } [data-flavor="aero"].a11y-reduced-transparency .cbui-table-head th { background-color: var(--color-bg-subtle); } /* A head cell pinned sideways (stickyFirstColumn corner, with or without the select cell) is opaque like the * pinned data cells: the translucent fill and the blur above would let the head text of the columns scrolling * past shine through it (CB-2939). Same tone, no alpha, no blur. */ [data-flavor="aero"] .cbui-table-sticky-first > .cbui-table-head > tr > th:first-child:not(.cbui-table-colgroup), [data-flavor="aero"] .cbui-table-sticky-first-select > .cbui-table-head > tr > th:nth-child(-n+2):not(.cbui-table-colgroup) { background-color: var(--color-bg-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; } /* The same for a pinned column of the ResourceDisplay (`cbui-table-cell-pinned`: selection and title column, CB-4118): * they are pinned by class, not by position, so the two rules above do not reach them. */ [data-flavor="aero"] .cbui-table-head > tr > th.cbui-table-cell-pinned:not(.cbui-table-colgroup) { background-color: var(--color-bg-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Timeline — only the icon marker (a deliberate small object) gets plastic. */ [data-flavor="aero"].cbui-cap-button-shadow .cbui-timeline-item-marker-icon .cbui-timeline-item-marker { box-shadow: 0 0 0 4px var(--cbui-timeline-marker-bg), var(--aero-shadow-emboss), var(--aero-inner-sheen); } /* ────────────────────────────────────────────────────────────────────── * Aero — Disclosure / Attachment (UiComponent) * * The chat body is a MultiColumnLayout — it carries its own flavor * surfaces, so no chat-specific Aero rule is needed. The chat composer * field is intentionally left ALONE in every flavor: it must read as a * permanent, normal-Textarea-style chrome (Light Mode Aero once swapped * its border to --aero-edge / transparent, which made the field look * borderless — that is wrong). Only Disclosure detail bodies and * Attachment chips pick up the Aero edge. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-disclosure-tone-neutral .cbui-disclosure-body, [data-flavor="aero"] .cbui-disclosure-tone-muted .cbui-disclosure-body, [data-flavor="aero"] .cbui-attachment { border-color: var(--aero-edge); } /* ────────────────────────────────────────────────────────────────────── * Aero — ListGroup (UiComponent) * * Aero deactivates the hover surface on a list. The plastic chrome of the * surrounding window / card already carries the "clickable" affordance — * a hover wash inside reads loud. The CLICK / FOCUS surfaces (active / * selected / focus-visible) stay; only the gratuitous hover bg is muted. * Tonal hover (danger / warning / etc.) is also muted for the same reason. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="aero"] .cbui-list-interactive .cbui-list-item:hover, [data-flavor="aero"] .cbui-list-interactive .cbui-list-item:active, [data-flavor="aero"] .cbui-list-interactive .cbui-list-item-tone-danger:hover, [data-flavor="aero"] .cbui-list-interactive .cbui-list-item-tone-warning:hover, [data-flavor="aero"] .cbui-list-interactive .cbui-list-item-tone-success:hover, [data-flavor="aero"] .cbui-list-interactive .cbui-list-item-tone-info:hover { background-color: transparent; } /* Active hover is allowed to lift a touch (existing rule), but its hover tint relies on the base hover bg's existence — re-state the active wash so the existing :hover override above does not flatten it. */ [data-flavor="aero"] .cbui-list-interactive .cbui-list-item-active:hover { background-color: var(--cbui-list-item-active-bg); } /* The hover-based divider suppression in list.css is already scoped to a * positive flavor list (clean / soft / sharp / glass) — it does NOT fire * in Aero. No override needed here. The active / selected / label / * separator divider suppressions DO still fire (those reflect intrinsic * row state, not interaction) — that's correct: hovering the active row * must NOT reveal a divider that was hidden because of the active state. */ /* cbui/variants/glass */ /* ========================================================================== * Glass Flavor — Full Liquid-Glass Treatment * * Strong backdrop-filter, saturation boost, tinted borders. * Applied via [data-flavor="glass"] on a container. * ========================================================================== */ [data-flavor="glass"] { --glass-blur: 20px; --glass-saturation: 180%; --glass-opacity: 0.7; --glass-border-opacity: 0.3; } /* Glass treatment is reserved for the LOUD card variants (outlined / elevated) — flat stays the affordance for "embedded card on a tinted surface" and keeps its solid bg-subtle. Same loud-vs-quiet rule as Aero. */ [data-flavor="glass"] .cbui-card-outlined, [data-flavor="glass"] .cbui-card-elevated { position: relative; overflow: hidden; } [data-flavor="glass"] .cbui-card-outlined::before, [data-flavor="glass"] .cbui-card-elevated::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); background: color-mix(in srgb, var(--color-surface) calc(var(--glass-opacity) * 100%), transparent); border: 1px solid color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), transparent); border-radius: inherit; z-index: 0; } [data-flavor="glass"] .cbui-card-outlined > *, [data-flavor="glass"] .cbui-card-elevated > * { position: relative; z-index: 1; } [data-flavor="glass"] .cbui-button { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-flavor="glass"] .cbui-button-ghost { background: color-mix(in srgb, var(--color-surface) 60%, transparent); border: 1px solid color-mix(in srgb, white 20%, transparent); } [data-flavor="glass"] .cbui-button-ghost:hover { background: color-mix(in srgb, var(--color-surface) 80%, transparent); } /* Glass frosting is reserved for the LOUD Input/Textarea variant (default). `filled` and `flush` are the quiet variants and stay flat — same loud-vs- quiet rule as Cards, Buttons, Navs. */ [data-flavor="glass"] .cbui-input-default, [data-flavor="glass"] .cbui-textarea-default { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: color-mix(in srgb, var(--color-surface) 50%, transparent); } [data-flavor="glass"] .cbui-input-default:focus, [data-flavor="glass"] .cbui-textarea-default:focus { background-color: color-mix(in srgb, var(--color-surface) 70%, transparent); } [data-flavor="glass"] .cbui-modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-flavor="glass"] .cbui-dropdown-menu { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); background: color-mix(in srgb, var(--color-surface) calc(var(--glass-opacity) * 100%), transparent); border: 1px solid color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), transparent); } /* Reduced transparency support */ @media (prefers-reduced-transparency: reduce) { [data-flavor="glass"] .cbui-card-outlined::before, [data-flavor="glass"] .cbui-card-elevated::before, [data-flavor="glass"] .cbui-button, [data-flavor="glass"] .cbui-button-ghost, [data-flavor="glass"] .cbui-input-default, [data-flavor="glass"] .cbui-textarea-default, [data-flavor="glass"] .cbui-modal-overlay, [data-flavor="glass"] .cbui-dropdown-menu { backdrop-filter: none; -webkit-backdrop-filter: none; } [data-flavor="glass"] .cbui-card-outlined::before, [data-flavor="glass"] .cbui-card-elevated::before { background: var(--color-surface); opacity: 1; } [data-flavor="glass"] .cbui-button-ghost, [data-flavor="glass"] .cbui-input-default, [data-flavor="glass"] .cbui-textarea-default, [data-flavor="glass"] .cbui-dropdown-menu { background: var(--color-surface); } } /* Dark mode adjustments */ .dark [data-flavor="glass"] { --glass-opacity: 0.5; --glass-border-opacity: 0.15; } /* ────────────────────────────────────────────────────────────────────────── * Tabnav — Glass treatment for both segmented sub-variants and the bg-fill * / bg-blur modifiers. Same loud-only rule as Aero: only the segmented * capsules get the full frosted-backdrop + raised-active-item treatment. * ────────────────────────────────────────────────────────────────────────── */ /* Glass container — backdrop blur + border only. Background colour comes from the base `--cbui-tabnav-segmented-fill` token so the container is visibly distinct from the active card in both light and dark schemes (instead of resolving to the same surface colour). */ [data-flavor="glass"] .cbui-tabnav-segmented .cbui-tabnav-strip-wrapper, [data-flavor="glass"] .cbui-tabnav-segmented-pill .cbui-tabnav-strip-wrapper, [data-flavor="glass"] .cbui-tabnav-mod-bg-fill .cbui-tabnav-strip-wrapper { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), transparent); } /* Use the `--cbui-tabnav-segmented-active` token so the dark-mode lift (24% white-mix) takes effect — without it, the active surface would resolve to a colour close to the glass container and lose contrast. */ [data-flavor="glass"] .cbui-tabnav-segmented .cbui-tabnav-item-active, [data-flavor="glass"] .cbui-tabnav-segmented .cbui-tabnav-item[aria-selected="true"], [data-flavor="glass"] .cbui-tabnav-segmented .cbui-tabnav-item[aria-current="page"], [data-flavor="glass"] .cbui-tabnav-segmented-pill .cbui-tabnav-item-active, [data-flavor="glass"] .cbui-tabnav-segmented-pill .cbui-tabnav-item[aria-selected="true"], [data-flavor="glass"] .cbui-tabnav-segmented-pill .cbui-tabnav-item[aria-current="page"] { background-color: var(--cbui-tabnav-segmented-active); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.18); } @media (prefers-reduced-transparency: reduce) { [data-flavor="glass"] .cbui-tabnav-segmented .cbui-tabnav-strip-wrapper, [data-flavor="glass"] .cbui-tabnav-segmented-pill .cbui-tabnav-strip-wrapper, [data-flavor="glass"] .cbui-tabnav-mod-bg-fill .cbui-tabnav-strip-wrapper { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg-elevated); } } /* ────────────────────────────────────────────────────────────────────────── * Stepper — Glass treatment. Frosted backdrops on the panel-variant boxes * and the chrome modifier. Indicators stay solid (a translucent step number * reads as a bug, not a feature). * ────────────────────────────────────────────────────────────────────────── */ /* Glass panels — only the active panels (current + error) carry the * frosted backdrop + tinted background. Non-current panels keep the * universal `--color-border` (set by the base panel rule) — using the * Glass-tinted-white border previously gave inconsistent visibility * between light (invisible) and dark (visible) modes. */ /* Glass identity on active panels = backdrop-filter (frosted view through * to the page bg behind), NOT a white-mix surface. The previous white-mix * recipe made the active panel render as a LIGHT surface in dark mode * (~rgb 163) — which collided with the description text colour * (`--color-text-secondary`, also ~rgb 163 in dark) and rendered the * description invisible. The base panel-bg recipe (tone-mix on transparent) * adapts naturally to both schemes: dark page → tinted-dark panel, * light page → tinted-light panel. Text contrast stays predictable. */ [data-flavor="glass"] .cbui-stepper-panel .cbui-stepper-step-current, [data-flavor="glass"] .cbui-stepper-panel .cbui-stepper-step-error { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } [data-flavor="glass"] .cbui-stepper-mod-bg-fill .cbui-stepper-chrome, [data-flavor="glass"] .cbui-stepper-mod-bg-blur .cbui-stepper-chrome { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), transparent); background: color-mix(in srgb, white calc(var(--glass-opacity) * 100%), transparent); } @media (prefers-reduced-transparency: reduce) { [data-flavor="glass"] .cbui-stepper-panel .cbui-stepper-step, [data-flavor="glass"] .cbui-stepper-mod-bg-fill .cbui-stepper-chrome, [data-flavor="glass"] .cbui-stepper-mod-bg-blur .cbui-stepper-chrome { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg-elevated); } } /* ────────────────────────────────────────────────────────────────────── * Glass — Table + Timeline (UiData, Wave 4) * * Glass frosts the header band of a table and the icon / avatar markers of * a timeline. The table body stays clear so the data reads at full * contrast — frosting rows would hurt legibility. Gated on * prefers-reduced-transparency. * ────────────────────────────────────────────────────────────────────── */ [data-flavor="glass"] .cbui-table-wrap-bordered { border-color: color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), var(--color-border)); } [data-flavor="glass"] .cbui-table-head th { background-color: color-mix(in srgb, var(--color-bg-subtle) calc(var(--glass-opacity) * 100% + 30%), transparent); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } [data-flavor="glass"] .cbui-timeline-item-marker-icon .cbui-timeline-item-marker, [data-flavor="glass"] .cbui-timeline-item-marker-avatar .cbui-timeline-item-marker { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } @media (prefers-reduced-transparency: reduce) { [data-flavor="glass"] .cbui-table-head th { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-bg-subtle); } [data-flavor="glass"] .cbui-timeline-item-marker-icon .cbui-timeline-item-marker, [data-flavor="glass"] .cbui-timeline-item-marker-avatar .cbui-timeline-item-marker { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ────────────────────────────────────────────────────────────────────── * Glass — Window (UiWindow, Wave 3a) * * Glass treatment is reserved for the LOUD floating frame — a floating * window is a deliberate object, so the liquid-glass surface is right * here. The docked frame stays solid (a working surface). Both the frame * surface and the header band frost; the body stays clear so window * content reads at full contrast (same call as the table body). * ────────────────────────────────────────────────────────────────────── */ [data-flavor="glass"] .cbui-window-frame-floating { background-color: color-mix(in srgb, var(--color-surface) calc(var(--glass-opacity) * 100%), transparent); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); /* Drive the border via the token so the focus cascade keeps working. */ --cbui-window-frame-border: color-mix(in srgb, white calc(var(--glass-border-opacity) * 100%), var(--color-border)); } [data-flavor="glass"] .cbui-window-frame-floating .cbui-window-frame-header { /* Frost the focus-driven --cbui-window-header-bg token so the focus tint flows through. */ background-color: color-mix(in srgb, var(--cbui-window-header-bg) calc(var(--glass-opacity) * 100% + 20%), transparent); } [data-flavor="glass"] .cbui-window-frame-floating .cbui-window-frame-body { background-color: transparent; } /* Focused window — the accent border, explicit so it beats the border token rule above regardless of source order. */ [data-flavor="glass"] .cbui-window-focused .cbui-window-frame { --cbui-window-frame-border: var(--cbui-window-accent); } @media (prefers-reduced-transparency: reduce) { [data-flavor="glass"] .cbui-window-frame-floating { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-surface); } [data-flavor="glass"] .cbui-window-frame-floating .cbui-window-frame-header { background-color: var(--cbui-window-header-bg); } [data-flavor="glass"] .cbui-window-frame-floating .cbui-window-frame-body { background-color: var(--color-surface); } } /* cbui/base */ /* ========================================================================== * CloudBringer UI Framework — base.css * * Reset + layer order declarations for the new Ui* module family. * No @import statements here — the cbui.js entrypoint loads every stylesheet * individually so AssetMapper can resolve each hashed URL correctly. * * Loaded via: import 'cbui/base' from assets/cbui.js * ========================================================================== */ /* Layer order declaration. Anything unlayered wins over these. */ @layer cbui-reset, cbui-base, components, cbui-utilities; /* -------------------------------------------------------------------------- * Color-scheme — tells the browser the surface tone so native UI * (date / time / color pickers, scrollbars, form-control defaults) * paints itself accordingly. Without this property the browser renders * a light picker popup even when our scheme is dark, which feels * broken. Storybook scopes carry data-scheme so each side picks its * own native UI tone; in production .dark on drives it. * -------------------------------------------------------------------------- */ [data-scheme="light"] { color-scheme: light; } [data-scheme="dark"] { color-scheme: dark; } .dark { color-scheme: dark; } /* -------------------------------------------------------------------------- * Minimal Reset — scoped to cbui/cbui_storybook entrypoints only. * Intentionally small. Not a full Tailwind Preflight clone. * -------------------------------------------------------------------------- */ @layer cbui-reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; line-height: 1.5; } body { margin: 0; font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--color-text); background-color: var(--color-bg-base); } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: inherit; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; } code, kbd, samp, pre { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 1em; } } /* -------------------------------------------------------------------------- * Z-index bands — the framework-wide stacking scale. * * Three ordered bands: page content < window stack < free overlays. * UiWindow's WindowManager re-sorts the open windows and assigns them * z-indices starting at --cbui-z-window-base; the band is wide enough for * far more windows than anyone opens at once. Free overlays that are NOT * native (Popover / Tooltip / Dropdown) belong above the window * band so they escape a focused window. * * Native overlays (Modal / Drawer) use .showModal() and the * browser top-layer — they sit above ALL of these automatically and need * no token. That is why the codebase had no z-index system until windows * arrived: nothing before windows needed cross-component coordination. * * Framework-structural, mode/flavor-independent — lives here, not in a * Flavor. -------------------------------------------------------------- */ @layer cbui-base { :root { --cbui-z-page: 0; --cbui-z-window-base: 1000; --cbui-z-window-ceiling: 1899; --cbui-z-overlay: 1900; --cbui-z-toast: 1950; /* ------------------------------------------------------------------ * Bar / Header height scale — the shared vocabulary used by every * "bar-shaped" component (Navbar, Header, Toolbar) AND by the * dedicated header section of card-shaped components (Card, Modal, * Drawer, WindowFrame). Surfaces that need to align — e.g. the * Workspace top-bar and the top-Drawer header — pick the same * stage so their chromes match pixel-for-pixel. * * Default per component = md. * -------------------------------------------------------------- */ --cbui-bar-h-xs: 2.25rem; /* 36px — compact toolbars / footer chips */ --cbui-bar-h-sm: 2.75rem; /* 44px — sub-navigation, dense surfaces */ --cbui-bar-h-md: 3.25rem; /* 52px — the everyday default */ --cbui-bar-h-lg: 4rem; /* 64px — hero / app-shell header */ --cbui-bar-h-xl: 4.75rem; /* 76px — oversized / marketing chrome */ /* ------------------------------------------------------------------ * Motion scale (CB-2645) — the shared vocabulary for how long and how * fast something moves. Both durations become 0ms under reduced motion * (OS setting or the .a11y-reduced-motion class), so anything that * reads them stands still without a rule of its own. * -------------------------------------------------------------- */ --cbui-motion-duration-short: 150ms; --cbui-motion-duration-medium: 300ms; --cbui-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --cbui-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); } @media (prefers-reduced-motion: reduce) { :root { --cbui-motion-duration-short: 0ms; --cbui-motion-duration-medium: 0ms; } } .a11y-reduced-motion { --cbui-motion-duration-short: 0ms; --cbui-motion-duration-medium: 0ms; } } /* -------------------------------------------------------------------------- * Image utilities — real, reusable classes for any (and background * boxes). These are the centralised image treatments: change them once here * and every consumer (Avatar, FilePreview, prose, media grids, gallery * tiles) gets the update. There is intentionally NO Image Twig component — * `loading="lazy"`/`decoding="async"` are native HTML, the rest is CSS, so * these utility classes are the right place for the abstraction. * * Lives in the cbui-utilities layer (last layer → wins over component * defaults) so a utility on an inside a component always applies. * Token-only: every value flows through theme custom properties, so all of * it is light/dark safe automatically. * * Demonstrated live in Storybook → Content → Images. * -------------------------------------------------------------------------- */ @layer cbui-utilities { /* ── Responsive base ────────────────────────────────────────────── * The everyday image: fills its container width, never overflows, * keeps its intrinsic proportions. `display:block` also kills the * inline-baseline whitespace gap. (The reset already gives every * max-width:100% + display:block; this class adds the explicit * width:100% + height:auto so the image actively fills its parent.) */ .cbui-img { display: block; width: 100%; height: auto; max-width: 100%; } /* ── Aspect-ratio box ───────────────────────────────────────────── * Reserves the final height BEFORE the image loads (no layout shift / * no CLS): the box gets its height from aspect-ratio while the image * is still downloading. Pair with an object-fit utility so the source * fills the reserved box. Default ratio is 1:1; add a ratio modifier * to change it. `width:100%` makes the box track its container. */ .cbui-aspect { display: block; width: 100%; aspect-ratio: 1 / 1; } .cbui-aspect-square { aspect-ratio: 1 / 1; } .cbui-aspect-4-3 { aspect-ratio: 4 / 3; } .cbui-aspect-3-2 { aspect-ratio: 3 / 2; } .cbui-aspect-16-9 { aspect-ratio: 16 / 9; } .cbui-aspect-3-4 { aspect-ratio: 3 / 4; } /* portrait */ .cbui-aspect-21-9 { aspect-ratio: 21 / 9; } /* cinematic */ /* ── Object-fit ─────────────────────────────────────────────────── * How a fixed-size box is filled. `cover` crops to fill (no * distortion, edges clipped); `contain` fits the whole image inside * (no crop, leaves gutters). Both require the box to have a height — * either an aspect-ratio box above, or an explicit height/width. */ .cbui-img-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cbui-img-contain { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ── Letterbox ──────────────────────────────────────────────────── * `contain` leaves gutters where the image doesn't fill the box. Left * transparent those gutters show whatever is behind, which reads as a * hole. The letterbox fills the gutter with a neutral surface token * (NOT transparent) so the framing is intentional and dark-mode safe. * Apply to the BOX; the contained goes inside. */ .cbui-img-letterbox { background-color: var(--color-bg-muted); overflow: hidden; } /* ── Rounded steps ──────────────────────────────────────────────── * The reset applies NO radius to images — opt in with one of these. * Steps map to the shape tokens so they stay in sync with the active * flavor. `full` produces a circle ONLY on a 1:1 box; on any other * ratio it yields an ellipse — pair it with .cbui-aspect-square (or an * equal width/height). Use overflow:hidden on aspect/letterbox boxes * so the rounding clips the contained image too. */ .cbui-img-rounded-sm { border-radius: var(--radius-sm); overflow: hidden; } .cbui-img-rounded-md { border-radius: var(--radius-md); overflow: hidden; } .cbui-img-rounded-lg { border-radius: var(--radius-lg); overflow: hidden; } .cbui-img-rounded-xl { border-radius: var(--radius-xl); overflow: hidden; } .cbui-img-rounded-full { border-radius: var(--radius-full); overflow: hidden; } } /* cbui/components/alert */ /* cbui-alert * * Two-axis variant model (shared with Button/Badge): * variant = visual treatment: solid | outline | ghost | (null → auto) * tone = semantic colour: neutral | primary | accent | success | danger | warning | info * * Modifiers (composable via + in the variant string): * border-pale — de-saturates the box border (outline only) * bg-fill — adds soft tinted background (outline / ghost) * border-accent-start — 3px accent bar on inline-start (LTR: left) * border-accent-end — 3px accent bar on inline-end (LTR: right) * border-accent-top — 3px accent bar on block-start (top) * border-accent-bottom — 3px accent bar on block-end (bottom) * bg-gradient-horizontal — subtle left→right tint gradient * * Each variant+tone combination sets --cbui-alert-accent to the correct * tone colour so accent-bar modifiers do not need per-tone rules. * * AUTO variant (.cbui-alert-auto): flavor-driven default. * Base CSS applies the Clean flavor default (ghost+bg-fill+border-accent-start). * Override with [data-flavor="X"] .cbui-alert-auto rules in flavor CSS files. */ @layer components { /* ─────────────────────────────────────────────────────────────────── */ /* BASE */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: var(--alert-padding, 1rem); border-radius: var(--alert-radius); border: var(--alert-border-width) solid transparent; font-size: var(--font-size-md, 1rem); line-height: 1.5; position: relative; } /* Same trap as `.cbui-button[hidden]` (button.css): the base rule's explicit `display: flex` beats the User-Agent `[hidden] { display: none }` rule, so an Alert toggled hidden by JS stayed visible (CB-1503 browser defect A — the "Prüfen" step showed both the success AND failure Alert at once after a probe, because neither ever actually disappeared). */ .cbui-alert[hidden] { display: none; } .cbui-alert-icon { flex-shrink: 0; display: inline-flex; font-size: 1.375rem; /* 22px */ margin-top: 0.0625rem; } .cbui-alert-body { flex: 1; min-width: 0; } .cbui-alert-title { font-weight: var(--font-weight-semibold, 600); margin-bottom: 0.25rem; } .cbui-alert-dismiss { flex-shrink: 0; align-self: flex-start; /* Pull into the alert's own padding so it doesn't add visual width */ margin-block-start: -0.25rem; margin-inline-end: -0.25rem; } /* On solid alerts the ghost button's tone colour is invisible against the filled background — inherit the alert's contrast text instead. Extra .cbui-button class raises specificity above the ghost tone rules. */ .cbui-alert-solid .cbui-alert-dismiss.cbui-button { color: currentColor; opacity: 0.75; &:hover { opacity: 1; background-color: var(--cbui-shade-soft); } } .cbui-alert-hidden { display: none; } /* ─────────────────────────────────────────────────────────────────── */ /* FLUSH — edgeless page/window band (the "Banner" use-case) */ /* */ /* Zeros all four corners and the inline margin so the alert reads */ /* as a full-bleed band whose shape follows its container. The */ /* border-radius shorthand wins over the flavor --alert-radius AND */ /* over the *-sharp accent-bar corner overrides. */ /* */ /* In a padded host, opt the host into .cbui-flush-host so the band */ /* bleeds out to the container edges (negative inline margin equal to */ /* the host's inline padding, exposed as --flush-host-pad). */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-flush { border-radius: 0; margin-inline: 0; } .cbui-flush-host > .cbui-alert-flush { margin-inline: calc(-1 * var(--flush-host-pad, 1.5rem)); } /* ─────────────────────────────────────────────────────────────────── */ /* COMPACT density — tighter band, vertically centred */ /* */ /* Orthogonal to flush. Thinner block padding + centre alignment for */ /* a ribbon feel. Keeps the inline padding from --alert-padding. */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-compact { align-items: center; padding-block: 0.5rem; } /* Title margin collapses the centred single-line ribbon — drop it. */ .cbui-alert-compact .cbui-alert-title { margin-bottom: 0; } /* ─────────────────────────────────────────────────────────────────── */ /* AUTO variant — flavor-driven default */ /* */ /* Clean flavor default: ghost+bg-fill+border-accent-start. */ /* Override per flavor in the flavor CSS file: */ /* [data-flavor="X"] .cbui-alert-auto { ... } */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-auto { border: none; border-inline-start: var(--alert-accent-width, 3px) solid; } .cbui-alert-auto.cbui-alert-tone-neutral { background-color: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-text-secondary); --cbui-alert-accent: var(--color-border-strong); } .cbui-alert-auto.cbui-alert-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); border-color: var(--color-primary); color: var(--color-primary); --cbui-alert-accent: var(--color-primary); } .cbui-alert-auto.cbui-alert-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 10%, transparent); border-color: var(--color-accent); color: var(--color-accent); --cbui-alert-accent: var(--color-accent); } .cbui-alert-auto.cbui-alert-tone-info { background-color: color-mix(in srgb, var(--color-info) 10%, transparent); border-color: var(--color-info); color: var(--color-info); --cbui-alert-accent: var(--color-info); } .cbui-alert-auto.cbui-alert-tone-success { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); border-color: var(--color-success); color: var(--color-success); --cbui-alert-accent: var(--color-success); } .cbui-alert-auto.cbui-alert-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); border-color: var(--color-warning); color: var(--color-warning); --cbui-alert-accent: var(--color-warning); } .cbui-alert-auto.cbui-alert-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); border-color: var(--color-danger); color: var(--color-danger); --cbui-alert-accent: var(--color-danger); } /* Dark mode: tints need more presence on dark backgrounds */ .dark .cbui-alert-auto.cbui-alert-tone-primary, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 16%, transparent); } .dark .cbui-alert-auto.cbui-alert-tone-accent, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 16%, transparent); } .dark .cbui-alert-auto.cbui-alert-tone-info, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-info { background-color: color-mix(in srgb, var(--color-info) 16%, transparent); } .dark .cbui-alert-auto.cbui-alert-tone-success, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-success { background-color: color-mix(in srgb, var(--color-success) 16%, transparent); } .dark .cbui-alert-auto.cbui-alert-tone-warning, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 16%, transparent); } .dark .cbui-alert-auto.cbui-alert-tone-danger, [data-scheme="dark"] .cbui-alert-auto.cbui-alert-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 16%, transparent); } /* ─────────────────────────────────────────────────────────────────── */ /* SOLID variant — filled background, contrast-colour text */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-solid.cbui-alert-tone-neutral { background-color: var(--color-text); color: var(--color-bg-base); --cbui-alert-accent: color-mix(in srgb, var(--color-text) 60%, black); } .cbui-alert-solid.cbui-alert-tone-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); --cbui-alert-accent: color-mix(in srgb, var(--color-primary) 60%, black); } .cbui-alert-solid.cbui-alert-tone-accent { background-color: var(--color-accent); color: var(--color-text-on-accent); --cbui-alert-accent: color-mix(in srgb, var(--color-accent) 60%, black); } .cbui-alert-solid.cbui-alert-tone-info { background-color: var(--color-info); color: var(--color-text-on-info); --cbui-alert-accent: color-mix(in srgb, var(--color-info) 60%, black); } .cbui-alert-solid.cbui-alert-tone-success { background-color: var(--color-success); color: var(--color-text-on-success); --cbui-alert-accent: color-mix(in srgb, var(--color-success) 60%, black); } .cbui-alert-solid.cbui-alert-tone-warning { background-color: var(--color-warning); color: var(--color-text-on-warning); --cbui-alert-accent: color-mix(in srgb, var(--color-warning) 60%, black); } .cbui-alert-solid.cbui-alert-tone-danger { background-color: var(--color-danger); color: var(--color-text-on-danger); --cbui-alert-accent: color-mix(in srgb, var(--color-danger) 60%, black); } /* ─────────────────────────────────────────────────────────────────── */ /* OUTLINE variant — transparent + tone-coloured box border + text */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-outline { background-color: transparent; } .cbui-alert-outline.cbui-alert-tone-neutral { border-color: var(--color-border-strong); color: var(--color-text-secondary); --cbui-alert-accent: var(--color-border-strong); } .cbui-alert-outline.cbui-alert-tone-primary { border-color: var(--color-primary); color: var(--color-primary); --cbui-alert-accent: var(--color-primary); } .cbui-alert-outline.cbui-alert-tone-accent { border-color: var(--color-accent); color: var(--color-accent); --cbui-alert-accent: var(--color-accent); } .cbui-alert-outline.cbui-alert-tone-info { border-color: var(--color-info); color: var(--color-info); --cbui-alert-accent: var(--color-info); } .cbui-alert-outline.cbui-alert-tone-success { border-color: var(--color-success); color: var(--color-success); --cbui-alert-accent: var(--color-success); } .cbui-alert-outline.cbui-alert-tone-warning { border-color: var(--color-warning); color: var(--color-warning); --cbui-alert-accent: var(--color-warning); } .cbui-alert-outline.cbui-alert-tone-danger { border-color: var(--color-danger); color: var(--color-danger); --cbui-alert-accent: var(--color-danger); } /* ─────────────────────────────────────────────────────────────────── */ /* GHOST variant — transparent, no border, tone-coloured text */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-ghost { background-color: transparent; border: none; } .cbui-alert-ghost.cbui-alert-tone-neutral { color: var(--color-text-secondary); --cbui-alert-accent: var(--color-border-strong); } .cbui-alert-ghost.cbui-alert-tone-primary { color: var(--color-primary); --cbui-alert-accent: var(--color-primary); } .cbui-alert-ghost.cbui-alert-tone-accent { color: var(--color-accent); --cbui-alert-accent: var(--color-accent); } .cbui-alert-ghost.cbui-alert-tone-info { color: var(--color-info); --cbui-alert-accent: var(--color-info); } .cbui-alert-ghost.cbui-alert-tone-success { color: var(--color-success); --cbui-alert-accent: var(--color-success); } .cbui-alert-ghost.cbui-alert-tone-warning { color: var(--color-warning); --cbui-alert-accent: var(--color-warning); } .cbui-alert-ghost.cbui-alert-tone-danger { color: var(--color-danger); --cbui-alert-accent: var(--color-danger); } /* ─────────────────────────────────────────────────────────────────── */ /* border-pale modifier — de-saturates the box border (outline only) */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-neutral { border-color: color-mix(in srgb, var(--color-border-strong) 60%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-primary { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-accent { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-info { border-color: color-mix(in srgb, var(--color-info) 45%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-success { border-color: color-mix(in srgb, var(--color-success) 45%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-warning { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); } .cbui-alert-outline.cbui-alert-mod-border-pale.cbui-alert-tone-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); } /* ─────────────────────────────────────────────────────────────────── */ /* bg-fill modifier — adds soft tinted background (outline / ghost) */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-mod-bg-fill.cbui-alert-tone-neutral { background-color: var(--color-bg-subtle); } .cbui-alert-mod-bg-fill.cbui-alert-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); } .cbui-alert-mod-bg-fill.cbui-alert-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 10%, transparent); } .cbui-alert-mod-bg-fill.cbui-alert-tone-info { background-color: color-mix(in srgb, var(--color-info) 10%, transparent); } .cbui-alert-mod-bg-fill.cbui-alert-tone-success { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); } .cbui-alert-mod-bg-fill.cbui-alert-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); } .cbui-alert-mod-bg-fill.cbui-alert-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); } /* Dark mode boosts */ .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-primary, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 16%, transparent); } .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-accent, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 16%, transparent); } .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-info, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-info { background-color: color-mix(in srgb, var(--color-info) 16%, transparent); } .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-success, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-success { background-color: color-mix(in srgb, var(--color-success) 16%, transparent); } .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-warning, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 16%, transparent); } .dark .cbui-alert-mod-bg-fill.cbui-alert-tone-danger, [data-scheme="dark"] .cbui-alert-mod-bg-fill.cbui-alert-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 16%, transparent); } /* ─────────────────────────────────────────────────────────────────── */ /* ACCENT BAR modifiers — tone-coloured edge bar */ /* */ /* Uses --cbui-alert-accent, which every variant+tone rule sets. */ /* */ /* Two variants: */ /* border-accent-* — bar only, corner radius preserved */ /* border-accent-*-sharp — bar + zero radius on the bar side */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-mod-border-accent-start { border-inline-start: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); } .cbui-alert-mod-border-accent-end { border-inline-end: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); } .cbui-alert-mod-border-accent-top { border-block-start: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); } .cbui-alert-mod-border-accent-bottom { border-block-end: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); } /* Sharp variants — also zero the corner radius on the bar side */ .cbui-alert-mod-border-accent-start-sharp { border-inline-start: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); border-start-start-radius: 0; border-end-start-radius: 0; } .cbui-alert-mod-border-accent-end-sharp { border-inline-end: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); border-start-end-radius: 0; border-end-end-radius: 0; } .cbui-alert-mod-border-accent-top-sharp { border-block-start: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); border-start-start-radius: 0; border-start-end-radius: 0; } .cbui-alert-mod-border-accent-bottom-sharp { border-block-end: var(--alert-accent-width, 3px) solid var(--cbui-alert-accent, currentColor); border-end-start-radius: 0; border-end-end-radius: 0; } /* ─────────────────────────────────────────────────────────────────── */ /* bg-gradient-horizontal modifier */ /* */ /* Left→right gradient from a subtle tint to transparent. */ /* Works well combined with +border-accent-start for a */ /* "fade from the bar" look. */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-alert-mod-bg-gradient-horizontal { background-color: transparent; background-image: linear-gradient( to right, color-mix(in srgb, var(--cbui-alert-accent, currentColor) 22%, transparent) 0%, color-mix(in srgb, var(--cbui-alert-accent, currentColor) 7%, transparent) 100% ); } /* On outline, only keep the inline-start border — the rest clashes with the gradient fade. */ .cbui-alert-outline.cbui-alert-mod-bg-gradient-horizontal { border-block-color: transparent; border-inline-end-color: transparent; } /* ─────────────────────────────────────────────────────────────────── */ /* FLAVOR OVERRIDES — auto variant */ /* */ /* Each flavor can change the default style for .cbui-alert-auto by */ /* overriding the structural border properties here. */ /* Per-tone colours from the base rules still apply unless overridden. */ /* ─────────────────────────────────────────────────────────────────── */ /* Aero: outline+bg-fill+border-accent-start */ [data-flavor="aero"] .cbui-alert-auto { border-style: solid; border-width: var(--alert-border-width); border-inline-start-width: var(--alert-accent-width, 3px); } /* Flush in Aero: a flush alert is a full-bleed band, not a floating object, so the Aero auto box border (block + inline-end edges) reads as a broken frame hugging the squared-off, edge-to-edge band. Drop those edges and keep only the inline-start accent bar — same clean full-bleed band as the Clean flavor. The non-flush Aero auto plastik (4-sided border) is untouched. */ [data-flavor="aero"] .cbui-alert-auto.cbui-alert-flush { border-block-width: 0; border-inline-end-width: 0; } /* ─────────────────────────────────────────────────────────────────── */ /* HIGH CONTRAST (a11y-high-contrast) */ /* ─────────────────────────────────────────────────────────────────── */ .a11y-high-contrast .cbui-alert-auto, .a11y-high-contrast .cbui-alert-ghost { border: 2px solid currentColor; border-inline-start-width: var(--alert-accent-width, 3px); background-color: var(--color-bg-base); } .a11y-high-contrast .cbui-alert-outline { border-width: 2px; } } /* cbui/components/badge */ /* cbui-badge — small label for status, categories, counts and tags. * * Two-axis variant model (shared with Button): * variant = visual treatment: solid | outline | ghost * tone = semantic colour: neutral | primary | accent | success | danger * | warning | info | muted * + categorical (16 hues around the wheel): * orange | amber | yellow | lime | green | emerald | teal | cyan * | sky | blue | indigo | violet | purple | fuchsia | pink | rose * * Composing the variant string: * '+' joins variant + modifier(s) → "outline+border-pale", "ghost+bg-fill" * ',' separates variant from tone → "outline,success", "ghost+bg-fill,danger" * * Modifiers: * border-pale — de-saturate the border (works on outline) * bg-fill — add a soft tinted background (works on outline, ghost) * * Modifier composition produces: * outline → full tone border, no fill * outline+border-pale → de-saturated tone border, no fill * outline+bg-fill → full tone border + soft tinted fill * outline+border-pale+bg-fill → de-saturated border + soft tinted fill (chip look) * ghost+bg-fill → tinted fill, no border (formerly "soft") * * Sizes: * xs | sm | md * * Other modifiers (independent props): * icon — leading SVG icon * dot — leading status circle * ring — outer 2px ring in the page background colour, for badges anchored * to other elements (notification counters) * interactive (auto, when rendered as ) — cursor + hover lift * * Accessibility: * .a11y-high-contrast → solid backgrounds, opaque borders, no transparent overlays */ @layer components { /* Universal shade overlay token — used for the interactive hover state. Matches Button's --cbui-shade-soft so the two components share the same visual rhythm. Light mode darkens with black; dark mode lightens with white. */ :where(.cbui-badge) { --cbui-shade-soft: rgb(0 0 0 / 0.08); /* Icon-only-at-width capability (S0.5 Batch B). A host with its own container query flips ONE custom property to collapse every badge in a row to icon-only — instead of 23 hand-rolled `.badge-text` wrapper classes across three bundles. `labels="never"` (the static case) sets these via .cbui-badge-labels-never below; a host's own @container rule sets them directly on an ancestor, e.g.: @container my-listpane (max-width: 22rem) { .my-tags { --cbui-badge-labels: none; --cbui-badge-pad-x-current: 0.375rem; } } `:where()` keeps this at zero specificity so either override wins. */ --cbui-badge-labels: inline; } .cbui-badge > .cbui-badge-label { display: var(--cbui-badge-labels); } .cbui-badge-labels-never { --cbui-badge-labels: none; --cbui-badge-pad-x-current: 0.375rem; } .dark :where(.cbui-badge), [data-scheme="dark"] :where(.cbui-badge) { --cbui-shade-soft: rgb(255 255 255 / 0.12); } .cbui-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: var(--badge-radius); padding-inline: var(--cbui-badge-pad-x-current, var(--badge-padding-x, 0.625rem)); padding-block: var(--badge-padding-y, 0.125rem); font-size: var(--badge-font-size, var(--font-size-md, 1rem)); font-weight: 500; /* line-height 1.2 (instead of 1) gives ascender breathing room above the glyph that matches the descender space below — without it, numerals and capitals visually sit too low in the pill. */ line-height: 1.2; /* A badge never inherits an upper-case heading (CB-1683); the deliberate `upper` modifier below sets it itself. */ text-transform: none; white-space: nowrap; border: 1px solid transparent; text-decoration: none; /* solid background goes on `background-color`; the interactive hover overlay lives on `background-image` — same trick Button uses so the overlay doesn't fight the variant background. */ background-image: linear-gradient(transparent, transparent); transition: background-color 150ms ease, background-image 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; &:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring, var(--color-primary)); outline-offset: var(--focus-ring-offset); } } /* ── Sizes ────────────────────────────────────────────────────────── Type never renders below --font-size-md; size steers padding and line height only (Matthias 2026-10-17). */ .cbui-badge-xs { padding-inline: 0.375rem; padding-block: 0; font-size: var(--font-size-md, 1rem); line-height: 1; gap: 0.25rem; } .cbui-badge-sm { padding-inline: 0.5rem; padding-block: 0; font-size: var(--font-size-md, 1rem); line-height: 1.125; } /* ─────────────────────────────────────────────────────────────────── */ /* SOLID variant — filled, contrast text */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-badge-solid.cbui-badge-tone-neutral { background-color: var(--color-text); color: var(--color-bg-base); } .cbui-badge-solid.cbui-badge-tone-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); } .cbui-badge-solid.cbui-badge-tone-accent { background-color: var(--color-accent); color: var(--color-text-on-accent); } .cbui-badge-solid.cbui-badge-tone-success { background-color: var(--color-success); color: var(--color-text-on-success); } .cbui-badge-solid.cbui-badge-tone-danger { background-color: var(--color-danger); color: var(--color-text-on-danger); } .cbui-badge-solid.cbui-badge-tone-warning { background-color: var(--color-warning); color: var(--color-text-on-warning); } .cbui-badge-solid.cbui-badge-tone-info { background-color: var(--color-info); color: var(--color-text-on-info); } .cbui-badge-solid.cbui-badge-tone-muted { background-color: var(--color-muted); color: var(--color-text-on-muted); } /* Categorical (16 hues, ordered around the colour wheel) */ .cbui-badge-solid.cbui-badge-tone-orange { background-color: var(--color-orange); color: var(--color-text-on-orange); } .cbui-badge-solid.cbui-badge-tone-amber { background-color: var(--color-amber); color: var(--color-text-on-amber); } .cbui-badge-solid.cbui-badge-tone-yellow { background-color: var(--color-yellow); color: var(--color-text-on-yellow); } .cbui-badge-solid.cbui-badge-tone-lime { background-color: var(--color-lime); color: var(--color-text-on-lime); } .cbui-badge-solid.cbui-badge-tone-green { background-color: var(--color-green); color: var(--color-text-on-green); } .cbui-badge-solid.cbui-badge-tone-emerald { background-color: var(--color-emerald); color: var(--color-text-on-emerald); } .cbui-badge-solid.cbui-badge-tone-teal { background-color: var(--color-teal); color: var(--color-text-on-teal); } .cbui-badge-solid.cbui-badge-tone-cyan { background-color: var(--color-cyan); color: var(--color-text-on-cyan); } .cbui-badge-solid.cbui-badge-tone-sky { background-color: var(--color-sky); color: var(--color-text-on-sky); } .cbui-badge-solid.cbui-badge-tone-blue { background-color: var(--color-blue); color: var(--color-text-on-blue); } .cbui-badge-solid.cbui-badge-tone-indigo { background-color: var(--color-indigo); color: var(--color-text-on-indigo); } .cbui-badge-solid.cbui-badge-tone-violet { background-color: var(--color-violet); color: var(--color-text-on-violet); } .cbui-badge-solid.cbui-badge-tone-purple { background-color: var(--color-purple); color: var(--color-text-on-purple); } .cbui-badge-solid.cbui-badge-tone-fuchsia { background-color: var(--color-fuchsia); color: var(--color-text-on-fuchsia); } .cbui-badge-solid.cbui-badge-tone-pink { background-color: var(--color-pink); color: var(--color-text-on-pink); } .cbui-badge-solid.cbui-badge-tone-rose { background-color: var(--color-rose); color: var(--color-text-on-rose); } /* ─────────────────────────────────────────────────────────────────── */ /* OUTLINE variant — transparent + tone-coloured border + text */ /* */ /* Modifiers: */ /* +border-pale → de-saturate the border (45% mix with surface) */ /* +bg-fill → add a soft tinted background behind the border */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-badge-outline { background-color: transparent; } .cbui-badge-outline.cbui-badge-tone-neutral { color: var(--color-text-secondary); border-color: var(--color-border-strong); } .cbui-badge-outline.cbui-badge-tone-primary { color: var(--color-primary); border-color: var(--color-primary); } .cbui-badge-outline.cbui-badge-tone-accent { color: var(--color-accent); border-color: var(--color-accent); } .cbui-badge-outline.cbui-badge-tone-success { color: var(--color-success); border-color: var(--color-success); } .cbui-badge-outline.cbui-badge-tone-danger { color: var(--color-danger); border-color: var(--color-danger); } .cbui-badge-outline.cbui-badge-tone-warning { color: var(--color-warning); border-color: var(--color-warning); } .cbui-badge-outline.cbui-badge-tone-info { color: var(--color-info); border-color: var(--color-info); } .cbui-badge-outline.cbui-badge-tone-muted { color: var(--color-muted); border-color: var(--color-muted); } /* Categorical */ .cbui-badge-outline.cbui-badge-tone-orange { color: var(--color-orange); border-color: var(--color-orange); } .cbui-badge-outline.cbui-badge-tone-amber { color: var(--color-amber); border-color: var(--color-amber); } .cbui-badge-outline.cbui-badge-tone-yellow { color: var(--color-yellow); border-color: var(--color-yellow); } .cbui-badge-outline.cbui-badge-tone-lime { color: var(--color-lime); border-color: var(--color-lime); } .cbui-badge-outline.cbui-badge-tone-green { color: var(--color-green); border-color: var(--color-green); } .cbui-badge-outline.cbui-badge-tone-emerald { color: var(--color-emerald); border-color: var(--color-emerald); } .cbui-badge-outline.cbui-badge-tone-teal { color: var(--color-teal); border-color: var(--color-teal); } .cbui-badge-outline.cbui-badge-tone-cyan { color: var(--color-cyan); border-color: var(--color-cyan); } .cbui-badge-outline.cbui-badge-tone-sky { color: var(--color-sky); border-color: var(--color-sky); } .cbui-badge-outline.cbui-badge-tone-blue { color: var(--color-blue); border-color: var(--color-blue); } .cbui-badge-outline.cbui-badge-tone-indigo { color: var(--color-indigo); border-color: var(--color-indigo); } .cbui-badge-outline.cbui-badge-tone-violet { color: var(--color-violet); border-color: var(--color-violet); } .cbui-badge-outline.cbui-badge-tone-purple { color: var(--color-purple); border-color: var(--color-purple); } .cbui-badge-outline.cbui-badge-tone-fuchsia { color: var(--color-fuchsia); border-color: var(--color-fuchsia); } .cbui-badge-outline.cbui-badge-tone-pink { color: var(--color-pink); border-color: var(--color-pink); } .cbui-badge-outline.cbui-badge-tone-rose { color: var(--color-rose); border-color: var(--color-rose); } /* Modifier: border-pale — de-saturated border (works on outline) */ .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-neutral { border-color: color-mix(in srgb, var(--color-border-strong) 60%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-primary { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-accent { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-success { border-color: color-mix(in srgb, var(--color-success) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-warning { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-info { border-color: color-mix(in srgb, var(--color-info) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-muted { border-color: color-mix(in srgb, var(--color-muted) 45%, transparent); } /* Categorical */ .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-orange { border-color: color-mix(in srgb, var(--color-orange) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-amber { border-color: color-mix(in srgb, var(--color-amber) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-yellow { border-color: color-mix(in srgb, var(--color-yellow) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-lime { border-color: color-mix(in srgb, var(--color-lime) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-green { border-color: color-mix(in srgb, var(--color-green) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-emerald { border-color: color-mix(in srgb, var(--color-emerald) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-teal { border-color: color-mix(in srgb, var(--color-teal) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-cyan { border-color: color-mix(in srgb, var(--color-cyan) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-sky { border-color: color-mix(in srgb, var(--color-sky) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-blue { border-color: color-mix(in srgb, var(--color-blue) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-indigo { border-color: color-mix(in srgb, var(--color-indigo) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-violet { border-color: color-mix(in srgb, var(--color-violet) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-purple { border-color: color-mix(in srgb, var(--color-purple) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-fuchsia { border-color: color-mix(in srgb, var(--color-fuchsia) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-pink { border-color: color-mix(in srgb, var(--color-pink) 45%, transparent); } .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-rose { border-color: color-mix(in srgb, var(--color-rose) 45%, transparent); } /* In dark mode, the de-saturated border drops out — boost from 45% → 55% */ .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-primary, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-primary { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); color: color-mix(in srgb, var(--color-primary) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-accent, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-accent { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); color: color-mix(in srgb, var(--color-accent) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-success, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-success { border-color: color-mix(in srgb, var(--color-success) 55%, transparent); color: color-mix(in srgb, var(--color-success) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-danger, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-danger { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); color: color-mix(in srgb, var(--color-danger) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-warning, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-warning { border-color: color-mix(in srgb, var(--color-warning) 55%, transparent); color: color-mix(in srgb, var(--color-warning) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-info, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-info { border-color: color-mix(in srgb, var(--color-info) 55%, transparent); color: color-mix(in srgb, var(--color-info) 80%, white); } .dark .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-muted, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-border-pale.cbui-badge-tone-muted { border-color: color-mix(in srgb, var(--color-muted) 55%, transparent); color: color-mix(in srgb, var(--color-muted) 80%, white); } /* Modifier: bg-fill — soft tinted background (works on outline and ghost) */ .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-neutral { background-color: var(--color-bg-subtle); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-success { background-color: color-mix(in srgb, var(--color-success) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-info { background-color: color-mix(in srgb, var(--color-info) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-muted { background-color: color-mix(in srgb, var(--color-muted) 14%, transparent); } /* Categorical */ .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-orange { background-color: color-mix(in srgb, var(--color-orange) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-amber { background-color: color-mix(in srgb, var(--color-amber) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-yellow { background-color: color-mix(in srgb, var(--color-yellow) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-lime { background-color: color-mix(in srgb, var(--color-lime) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-green { background-color: color-mix(in srgb, var(--color-green) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-emerald { background-color: color-mix(in srgb, var(--color-emerald) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-teal { background-color: color-mix(in srgb, var(--color-teal) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-cyan { background-color: color-mix(in srgb, var(--color-cyan) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-sky { background-color: color-mix(in srgb, var(--color-sky) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-blue { background-color: color-mix(in srgb, var(--color-blue) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-indigo { background-color: color-mix(in srgb, var(--color-indigo) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-violet { background-color: color-mix(in srgb, var(--color-violet) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-purple { background-color: color-mix(in srgb, var(--color-purple) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-fuchsia { background-color: color-mix(in srgb, var(--color-fuchsia) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-pink { background-color: color-mix(in srgb, var(--color-pink) 14%, transparent); } .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-rose { background-color: color-mix(in srgb, var(--color-rose) 14%, transparent); } /* Dark-mode boost for fill modifier */ .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-primary, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-accent, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-success, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-success { background-color: color-mix(in srgb, var(--color-success) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-danger, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-warning, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-info, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-info { background-color: color-mix(in srgb, var(--color-info) 22%, transparent); } .dark .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-muted, [data-scheme="dark"] .cbui-badge-outline.cbui-badge-mod-bg-fill.cbui-badge-tone-muted { background-color: color-mix(in srgb, var(--color-muted) 22%, transparent); } /* ghost+bg-fill — tinted fill, no border (replaces soft variant). Applies the same 14% tint as outline+bg-fill, plus uses normal badge padding. Tone-coloured text comes from the ghost variant rules above. */ .cbui-badge-ghost.cbui-badge-mod-bg-fill { padding-inline: var(--cbui-badge-pad-x-current, var(--badge-padding-x, 0.625rem)); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-neutral { background-color: var(--color-bg-subtle); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-success { background-color: color-mix(in srgb, var(--color-success) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-info { background-color: color-mix(in srgb, var(--color-info) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-muted { background-color: color-mix(in srgb, var(--color-muted) 14%, transparent); } /* Categorical */ .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-orange { background-color: color-mix(in srgb, var(--color-orange) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-amber { background-color: color-mix(in srgb, var(--color-amber) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-yellow { background-color: color-mix(in srgb, var(--color-yellow) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-lime { background-color: color-mix(in srgb, var(--color-lime) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-green { background-color: color-mix(in srgb, var(--color-green) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-emerald { background-color: color-mix(in srgb, var(--color-emerald) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-teal { background-color: color-mix(in srgb, var(--color-teal) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-cyan { background-color: color-mix(in srgb, var(--color-cyan) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-sky { background-color: color-mix(in srgb, var(--color-sky) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-blue { background-color: color-mix(in srgb, var(--color-blue) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-indigo { background-color: color-mix(in srgb, var(--color-indigo) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-violet { background-color: color-mix(in srgb, var(--color-violet) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-purple { background-color: color-mix(in srgb, var(--color-purple) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-fuchsia { background-color: color-mix(in srgb, var(--color-fuchsia) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-pink { background-color: color-mix(in srgb, var(--color-pink) 14%, transparent); } .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-rose { background-color: color-mix(in srgb, var(--color-rose) 14%, transparent); } /* Dark mode boost */ .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-primary, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-primary { background-color: color-mix(in srgb, var(--color-primary) 22%, transparent); color: color-mix(in srgb, var(--color-primary) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-accent, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-accent { background-color: color-mix(in srgb, var(--color-accent) 22%, transparent); color: color-mix(in srgb, var(--color-accent) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-success, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-success { background-color: color-mix(in srgb, var(--color-success) 22%, transparent); color: color-mix(in srgb, var(--color-success) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-danger, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-danger { background-color: color-mix(in srgb, var(--color-danger) 22%, transparent); color: color-mix(in srgb, var(--color-danger) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-warning, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-warning { background-color: color-mix(in srgb, var(--color-warning) 22%, transparent); color: color-mix(in srgb, var(--color-warning) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-info, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-info { background-color: color-mix(in srgb, var(--color-info) 22%, transparent); color: color-mix(in srgb, var(--color-info) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-muted, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-muted { background-color: color-mix(in srgb, var(--color-muted) 22%, transparent); color: color-mix(in srgb, var(--color-muted) 80%, white); } /* Categorical dark mode boost */ .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-orange, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-orange { background-color: color-mix(in srgb, var(--color-orange) 22%, transparent); color: color-mix(in srgb, var(--color-orange) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-amber, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-amber { background-color: color-mix(in srgb, var(--color-amber) 22%, transparent); color: color-mix(in srgb, var(--color-amber) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-yellow, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-yellow { background-color: color-mix(in srgb, var(--color-yellow) 22%, transparent); color: color-mix(in srgb, var(--color-yellow) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-lime, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-lime { background-color: color-mix(in srgb, var(--color-lime) 22%, transparent); color: color-mix(in srgb, var(--color-lime) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-green, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-green { background-color: color-mix(in srgb, var(--color-green) 22%, transparent); color: color-mix(in srgb, var(--color-green) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-emerald, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-emerald { background-color: color-mix(in srgb, var(--color-emerald) 22%, transparent); color: color-mix(in srgb, var(--color-emerald) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-teal, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-teal { background-color: color-mix(in srgb, var(--color-teal) 22%, transparent); color: color-mix(in srgb, var(--color-teal) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-cyan, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-cyan { background-color: color-mix(in srgb, var(--color-cyan) 22%, transparent); color: color-mix(in srgb, var(--color-cyan) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-sky, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-sky { background-color: color-mix(in srgb, var(--color-sky) 22%, transparent); color: color-mix(in srgb, var(--color-sky) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-blue, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-blue { background-color: color-mix(in srgb, var(--color-blue) 22%, transparent); color: color-mix(in srgb, var(--color-blue) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-indigo, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-indigo { background-color: color-mix(in srgb, var(--color-indigo) 22%, transparent); color: color-mix(in srgb, var(--color-indigo) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-violet, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-violet { background-color: color-mix(in srgb, var(--color-violet) 22%, transparent); color: color-mix(in srgb, var(--color-violet) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-purple, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-purple { background-color: color-mix(in srgb, var(--color-purple) 22%, transparent); color: color-mix(in srgb, var(--color-purple) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-fuchsia, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-fuchsia { background-color: color-mix(in srgb, var(--color-fuchsia) 22%, transparent); color: color-mix(in srgb, var(--color-fuchsia) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-pink, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-pink { background-color: color-mix(in srgb, var(--color-pink) 22%, transparent); color: color-mix(in srgb, var(--color-pink) 80%, white); } .dark .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-rose, [data-scheme="dark"] .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-rose { background-color: color-mix(in srgb, var(--color-rose) 22%, transparent); color: color-mix(in srgb, var(--color-rose) 80%, white); } /* ─────────────────────────────────────────────────────────────────── */ /* GHOST variant — transparent + tone-coloured text, no border */ /* ─────────────────────────────────────────────────────────────────── */ .cbui-badge-ghost { background-color: transparent; border-color: transparent; padding-inline: 0.25rem; } .cbui-badge-ghost.cbui-badge-tone-neutral { color: var(--color-text-secondary); } .cbui-badge-ghost.cbui-badge-tone-primary { color: var(--color-primary); } .cbui-badge-ghost.cbui-badge-tone-accent { color: var(--color-accent); } .cbui-badge-ghost.cbui-badge-tone-success { color: var(--color-success); } .cbui-badge-ghost.cbui-badge-tone-danger { color: var(--color-danger); } .cbui-badge-ghost.cbui-badge-tone-warning { color: var(--color-warning); } .cbui-badge-ghost.cbui-badge-tone-info { color: var(--color-info); } .cbui-badge-ghost.cbui-badge-tone-muted { color: var(--color-muted); } /* Categorical */ .cbui-badge-ghost.cbui-badge-tone-orange { color: var(--color-orange); } .cbui-badge-ghost.cbui-badge-tone-amber { color: var(--color-amber); } .cbui-badge-ghost.cbui-badge-tone-yellow { color: var(--color-yellow); } .cbui-badge-ghost.cbui-badge-tone-lime { color: var(--color-lime); } .cbui-badge-ghost.cbui-badge-tone-green { color: var(--color-green); } .cbui-badge-ghost.cbui-badge-tone-emerald { color: var(--color-emerald); } .cbui-badge-ghost.cbui-badge-tone-teal { color: var(--color-teal); } .cbui-badge-ghost.cbui-badge-tone-cyan { color: var(--color-cyan); } .cbui-badge-ghost.cbui-badge-tone-sky { color: var(--color-sky); } .cbui-badge-ghost.cbui-badge-tone-blue { color: var(--color-blue); } .cbui-badge-ghost.cbui-badge-tone-indigo { color: var(--color-indigo); } .cbui-badge-ghost.cbui-badge-tone-violet { color: var(--color-violet); } .cbui-badge-ghost.cbui-badge-tone-purple { color: var(--color-purple); } .cbui-badge-ghost.cbui-badge-tone-fuchsia { color: var(--color-fuchsia); } .cbui-badge-ghost.cbui-badge-tone-pink { color: var(--color-pink); } .cbui-badge-ghost.cbui-badge-tone-rose { color: var(--color-rose); } /* ── Interactive (anchor) — hover only fires when rendered as ─── */ .cbui-badge-interactive { cursor: pointer; user-select: none; } /* Universal shade overlay — works on every variant that has a fill (solid, soft, outline+fill, outline+pale+fill) by sitting on background-image instead of background-color. Same darken/lighten rhythm as Button. */ .cbui-badge-interactive:hover { background-image: linear-gradient(var(--cbui-shade-soft), var(--cbui-shade-soft)); } /* Outline (without fill) and ghost have no background to overlay — introduce a currentColor tint as the visible hover affordance. */ .cbui-badge-outline:not(.cbui-badge-mod-bg-fill).cbui-badge-interactive:hover, .cbui-badge-ghost.cbui-badge-interactive:hover { background-color: color-mix(in srgb, currentColor 10%, transparent); background-image: none; } /* ── Ring modifier — punches the badge off any background ────────── */ /* ── Shape overrides — per-instance corner-radius control ─────────── The flavor sets the global default via --badge-radius (its component token). These classes let individual badges opt out of that default. Values map to the global radius scale so the result always feels "in-system" with the current flavor: pill — always a full pill regardless of flavor rounded — radius-md in the current flavor (medium rounding) square — radius-none = 0 (sharp corners) ───────────────────────────────────────────────────────────────────── */ .cbui-badge-shape-pill { --badge-radius: var(--radius-full); } .cbui-badge-shape-rounded { --badge-radius: var(--radius-lg); } .cbui-badge-shape-square { --badge-radius: var(--radius-none); } /* ── block modifier — fills available width, content centred ────── */ .cbui-badge-mod-block { display: flex; width: 100%; justify-content: center; } /* ── upper modifier — uppercase text with tracked letter-spacing ── */ .cbui-badge-mod-upper { text-transform: uppercase; letter-spacing: 0.06em; } /* Implementation: a 2px box-shadow in the page surface colour. We use box-shadow rather than border to keep the badge layout (padding, dimensions) identical to non-ringed badges — the ring sits *outside* the box. The shadow uses the canvas/page colour so the badge looks "lifted" off whatever is underneath: a navbar, an avatar, a button. */ .cbui-badge-ring { box-shadow: 0 0 0 2px var(--cbui-badge-ring-color, var(--color-bg-base)); } /* ── Dot indicator ────────────────────────────────────────────────── */ .cbui-badge-dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: currentColor; flex: none; } /* Solid badges: dot needs to render against the filled background */ .cbui-badge-solid .cbui-badge-dot { background-color: currentColor; opacity: 0.9; } /* When a badge is *only* a dot (no text), make it a tight pill */ .cbui-badge-with-dot:empty, .cbui-badge-with-dot:has(> .cbui-badge-dot:only-child) { padding-inline: 0.375rem; } /* ── Icon glyph ───────────────────────────────────────────────────── */ .cbui-badge-glyph { display: inline-flex; flex: none; width: 1em; height: 1em; } .cbui-badge-glyph-xs { width: 0.875em; height: 0.875em; } .cbui-badge-glyph-sm { width: 1em; height: 1em; } /* ── High Contrast ────────────────────────────────────────────────── */ .a11y-high-contrast .cbui-badge { border-width: 2px; transition: none; } /* Solid: keep colour, ensure opaque border for definition */ .a11y-high-contrast .cbui-badge-solid { border-color: currentColor; } /* ghost+bg-fill in HC: becomes solid for stronger contrast */ .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-neutral { background-color: var(--color-text); color: var(--color-bg-base); border-color: var(--color-text); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-accent { background-color: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-success { background-color: var(--color-success); color: var(--color-text-on-success); border-color: var(--color-success); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-danger { background-color: var(--color-danger); color: var(--color-text-on-danger); border-color: var(--color-danger); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-warning { background-color: var(--color-warning); color: var(--color-text-on-warning); border-color: var(--color-warning); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-info { background-color: var(--color-info); color: var(--color-text-on-info); border-color: var(--color-info); border-width: 2px; } .a11y-high-contrast .cbui-badge-ghost.cbui-badge-mod-bg-fill.cbui-badge-tone-muted { background-color: var(--color-muted); color: var(--color-text-on-muted); border-color: var(--color-muted); border-width: 2px; } /* Outline already has visible borders — just bump the weight, recover full opacity on the border-pale modifier */ .a11y-high-contrast .cbui-badge-outline { border-color: currentColor; } .a11y-high-contrast .cbui-badge-outline.cbui-badge-mod-border-pale { border-color: currentColor; } /* Ghost in HC: gain a visible border so it doesn't fade away */ .a11y-high-contrast .cbui-badge-ghost { border-color: currentColor; padding-inline: 0.5rem; } /* ── Badge Group ───────────────────────────────────────────────────── Connects 2–3 badges into one visual unit. Outer corners keep the normal --badge-radius; inner junctions become straight edges with a single 1px separator line. Usage: Label Value The separator colour defaults to --color-border-strong and can be overridden with --cbui-badge-group-sep on any ancestor or the group element itself. ───────────────────────────────────────────────────────────────────── */ /* The group is the vessel — it owns the outer border and pill rounding. Child badges have no border and no radius of their own; only the first/last get inner radii to keep their background from overflowing the rounded corners without needing overflow:hidden (which would clip focus-visible rings). */ .cbui-badge-group { display: inline-flex; align-items: stretch; border-radius: var(--badge-radius); border: 1px solid var(--cbui-badge-group-sep, var(--color-border-strong)); } /* fill: full container width, entries share it equally (flex 1 1 0 + min-width 0 makes the split independent of the content; the badge's own justify-content keeps the text centred). */ .cbui-badge-group.cbui-badge-group-fill { display: flex; width: 100%; } .cbui-badge-group-fill > .cbui-badge { flex: 1 1 0; min-width: 0; justify-content: center; } /* The separator is an inset shadow here, not a border: a border on every entry but the first would make those entries one pixel wider than the first. */ .cbui-badge-group.cbui-badge-group-fill > .cbui-badge + .cbui-badge { border-inline-start: none; box-shadow: inset 1px 0 0 var(--cbui-badge-group-sep, var(--color-border-strong)); } .cbui-badge-group > .cbui-badge { border-radius: 0; border: none; } .cbui-badge-group > .cbui-badge:first-child { border-start-start-radius: calc(var(--badge-radius) - 1px); border-end-start-radius: calc(var(--badge-radius) - 1px); } .cbui-badge-group > .cbui-badge:last-child { border-start-end-radius: calc(var(--badge-radius) - 1px); border-end-end-radius: calc(var(--badge-radius) - 1px); } /* Internal separator line between adjacent badges */ .cbui-badge-group > .cbui-badge + .cbui-badge { border-inline-start: 1px solid var(--cbui-badge-group-sep, var(--color-border-strong)); } } /* ── Positioning helper ───────────────────────────────────────────── For the "notification badge in the corner of an element" pattern. Wrap the parent in .cbui-badge-anchor and place a ringed Badge inside marked with .cbui-badge-anchored-tr (or -tl, -br, -bl).