/* ============================================================================ * Aqua theme for BaseX — teal "Liquid Glass" aesthetic * * USAGE (any BaseX-consuming app) * -------------------------------- * 1. Drop this file into your public/ folder. * 2. Add `` to index.html. * 3. Toggle `document.body.classList.toggle('theme-aqua')` to activate. * * That's it. Nothing in the framework changes; this file overrides BaseX * via the cascade-layer model — all framework styles live in * `@layer bx.components`, so the unlayered rules in this file win without * a single `!important`. * * STRUCTURE * --------- * 1. Quicksand font (Google Fonts @import) * 2. Tier 1 — token overrides (--bx-* custom properties) * 3. Tier 2 — CSS recipes (gradients, glass, layered shadows, per-variant) * * The few rules tagged "SHOWCASE-SPECIFIC" target `bxs-sidebar`, the * Nexxus-Framework showcase's sidebar component. Strip them or rename the * selector when adapting this file to your own app. * ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); /* ───────────────────────────────────────────────────────────────────────── * Tier 1 — Token overrides * Scoped under `body.theme-aqua` so the theme is opt-in per-page. * ───────────────────────────────────────────────────────────────────────── */ body.theme-aqua { /* Brand — teal primary (UI / signature surfaces), tradewind secondary (accent from the AI/Orbit gradient). */ --bx-brand-primary: #006269; --bx-brand-primary-contrast: #ffffff; --bx-brand-secondary: #57bcb1; --bx-brand-secondary-contrast: #ffffff; /* Status palette — Aqua spec colors */ --bx-brand-success: #059669; --bx-brand-success-contrast: #ffffff; --bx-brand-warning: #d97706; --bx-brand-warning-contrast: #ffffff; --bx-brand-error: #dc2626; --bx-brand-error-contrast: #ffffff; --bx-brand-info: #2563eb; --bx-brand-info-contrast: #ffffff; /* Surfaces */ --bx-background-page: #f1f5f6; --bx-background-content: #f8fafb; --bx-background-control: #ffffff; /* Borders */ --bx-border-color: rgba(0, 50, 55, 0.12); --bx-border-radius: 10px; /* Typography */ --bx-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bx-font-color-dark: #2e2d2c; --bx-font-color-muted: #475569; /* Buttons — full-radius pill is core Aqua DNA */ --bx-button-border-radius: 9999px; /* Form inputs — Aqua favors spacious controls */ --bx-form-control-padding: 8px; --bx-form-control-border-radius: 10px; /* Main menu — slightly rounder items. Background stays a solid token so the framework's rgb-brightness-mult() on hover keeps working; the gradient itself lives in Tier 2 below. */ --bx-main-menu-border-radius: 12px; } /* ───────────────────────────────────────────────────────────────────────── * Tier 2 — CSS recipes * Unlayered selectors that target framework classes. Because the framework * lives in @layer bx.components, these rules win without !important. * ───────────────────────────────────────────────────────────────────────── */ /* ── Buttons — glass shadow on all, AI gradient on primary variant ── */ body.theme-aqua .bx-button:not(.bx-button-link):not(.ng-disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } body.theme-aqua .bx-button:not(.bx-button-link):not(.ng-disabled):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06); } body.theme-aqua .bx-button:not(.bx-button-link):not(.ng-disabled):active { transform: translateY(0) scale(0.98); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); } /* Per-variant: primary buttons get the AI gradient (teal → tradewind). Requires the framework to emit `bx-button-variant-primary` on the host, which BxButtonComponent does as of the per-variant class hook. */ body.theme-aqua .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled) { background: linear-gradient(135deg, #006269 0%, #57bcb1 100%); } body.theme-aqua .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled):hover { background: linear-gradient(135deg, #004d52 0%, #4ba59b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(0, 98, 105, 0.22), 0 2px 4px rgba(0, 0, 0, 0.06); } /* Link buttons — Aqua red as the CTA accent */ body.theme-aqua .bx-button.bx-button-link:not(.ng-disabled) { color: #e30613; } body.theme-aqua .bx-button.bx-button-link:not(.ng-disabled):hover { color: #c5000a; } /* ── Inputs — font-size is hardcoded on bx-input so it needs a recipe ── */ body.theme-aqua bx-input { font-size: 16px; line-height: 20px; } /* ── Page tabs (pills variant) — glass-light container, crisp slider ── */ body.theme-aqua bx-content-tabs[static] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(231, 238, 240, 0.85) 100%); border: 1px solid rgba(0, 50, 55, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } body.theme-aqua bx-content-tabs[static] .bx-tabs-slider { background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* ── Main menu — glass gradient surface, frosted active tile ── */ /* The visual surface differs: bx-main-menu uses an absolutely-positioned .main-menu-content overlay; bxs-sidebar (SHOWCASE-SPECIFIC) paints the host directly so the gradient flows behind the brand header too. */ body.theme-aqua bx-main-menu .main-menu-content, body.theme-aqua bxs-sidebar /* SHOWCASE-SPECIFIC */ { background: linear-gradient(180deg, #006269 0%, #004d52 100%); } /* Per-item background blocks transparent so the gradient shows through */ body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item-background { background: transparent; } /* Active tile: frosted white glass pill with teal text/icon. The framework's bx-main-menu sets color to var(--bxMainMenuBackground) on .active naturally; the showcase sidebar's base SCSS sets it to font-color (white in aqua mode) instead. We pin it to brand-primary here so both look right — teal foreground on a frosted-white pill. */ body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active, body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search-result { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); color: var(--bx-brand-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12); } body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active > bx-icon { color: var(--bx-brand-primary); } /* Active notch (:before) — tradewind accent on the framework menu */ body.theme-aqua bx-main-menu .menu-item.menu-link.active:before { background: #57bcb1; } /* Hover (non-active): frosted overlay over the gradient */ body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:hover:not(.active), body.theme-aqua :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:focus-within:not(.active) { background: rgba(255, 255, 255, 0.08); } /* Section labels — softer separator on the framework menu */ body.theme-aqua bx-main-menu .menu-item.menu-label .menu-item-background:after { background: rgba(255, 255, 255, 0.2); } /* ── Status badges — tinted-glass pills ── */ /* Drops the two-tone icon-block design. Each variant becomes a single tinted pill using color-mix() on the brand tokens, so it adapts if any brand color changes elsewhere. */ body.theme-aqua bx-status-badge { border-radius: 9999px; box-shadow: none; padding: 2px 12px 2px 4px; gap: 4px; font-weight: 500; } body.theme-aqua bx-status-badge > .badge-icon { background-color: transparent; color: inherit; padding: 2px 4px; font-size: 16px; } body.theme-aqua bx-status-badge > .badge-suffix { color: color-mix(in srgb, currentColor 60%, transparent); font-weight: 400; } body.theme-aqua bx-status-badge.status-primary { background: color-mix(in srgb, var(--bx-brand-primary) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-primary) 18%, transparent); } body.theme-aqua bx-status-badge.status-secondary { background: color-mix(in srgb, var(--bx-brand-secondary) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-secondary) 18%, transparent); } body.theme-aqua bx-status-badge.status-success { background: color-mix(in srgb, var(--bx-brand-success) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-success) 18%, transparent); } body.theme-aqua bx-status-badge.status-warning { background: color-mix(in srgb, var(--bx-brand-warning) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-warning) 18%, transparent); } body.theme-aqua bx-status-badge.status-danger { background: color-mix(in srgb, var(--bx-brand-error) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-error) 18%, transparent); } body.theme-aqua bx-status-badge.status-info { background: color-mix(in srgb, var(--bx-brand-info) 8%, transparent); border-color: color-mix(in srgb, var(--bx-brand-info) 18%, transparent); } body.theme-aqua bx-status-badge.status-light { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); color: var(--bx-font-color-muted); } body.theme-aqua bx-status-badge.status-dark { background: rgba(46, 45, 44, 0.08); border-color: rgba(46, 45, 44, 0.2); color: #2e2d2c; }