/*! * @be-partner-labs/ds v1.8.0 — components/theme * © 2026 Be Partner Labs. MIT License. * * CDN: * npm: @import "@be-partner-labs/ds/components/theme"; * Docs: https://ds.bepartnerlabs.com/components/theme/ */ @layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities; /* ─── Starlight token overrides — BPL palette ──────────────── Starlight dark = :root default. Light = [data-theme='light']. --sl-color-black is the PAGE BG (dark=near-black, light=white) --sl-color-white is the LIGHTEST TEXT. */ :root { --sl-font: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif; --sl-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Accent — dark mode mint */ --sl-color-accent-low: #1a3d2e; --sl-color-accent: #6fd9ae; --sl-color-accent-high: #4dc896; /* Gray scale — dark mode: 1=lightest text → 6=nav bg → black=page bg */ --sl-color-white: #f2eee6; --sl-color-gray-1: #cbc5bb; --sl-color-gray-2: #9e9a93; --sl-color-gray-3: #4a5248; --sl-color-gray-4: #2d3b30; --sl-color-gray-5: #242118; --sl-color-gray-6: #1e1c17; --sl-color-black: #16140f; /* Semantic overrides — belt and suspenders */ --sl-color-bg: #16140f; --sl-color-bg-nav: #1e1c17; --sl-color-bg-sidebar: #1e1c17; --sl-color-bg-inline-code: #242118; --sl-color-text: #f2eee6; --sl-color-text-accent: #6fd9ae; --sl-color-hairline: #2d3b30; --sl-color-hairline-light: #1f2920; --sl-color-hairline-shade: #16140f; } [data-theme='light'] { /* Accent — light mode deeper mint for contrast */ --sl-color-accent-low: #ddf5ec; --sl-color-accent: #2e9e72; --sl-color-accent-high: #1a6644; /* Gray scale — light mode: 1=darkest text → 6=sidebar bg → black=page bg */ --sl-color-white: #181715; --sl-color-gray-1: #3a3733; --sl-color-gray-2: #6b6760; --sl-color-gray-3: #9e9a93; --sl-color-gray-4: #cbc5bb; --sl-color-gray-5: #e5e0d8; --sl-color-gray-6: #f2efe9; --sl-color-gray-7: #f2efe9; --sl-color-black: #f8f6f2; /* Semantic overrides */ --sl-color-bg: #f8f6f2; --sl-color-bg-nav: #f2efe9; --sl-color-bg-sidebar: #f2efe9; --sl-color-bg-inline-code: #ede9e2; --sl-color-text: #181715; --sl-color-text-accent: #2e9e72; --sl-color-hairline: #e5e0d8; --sl-color-hairline-light: #ede9e2; --sl-color-hairline-shade: #cbc5bb; } /* ─── Smooth theme transitions for Starlight layout elements ── --sl-color-* vars are not @property registered, so we can't animate them directly. Instead, transition the concrete CSS properties on the key structural elements. */ @layer bp-utilities { :root { --_theme-duration: 220ms; --_theme-ease: cubic-bezier(0.4, 0, 0.2, 1); } .page, .sidebar, header.header, nav.sidebar-content, .content-panel, .right-sidebar, .sl-markdown-content, :root body, .sl-flex { transition: background-color var(--_theme-duration) var(--_theme-ease), border-color var(--_theme-duration) var(--_theme-ease), color var(--_theme-duration) var(--_theme-ease); } } @layer bp-components { /** * .bp-theme-toggle * Theme toggle button. Sets data-theme on . * The ripple effect is pure CSS via @keyframes. */ .bp-theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--bp-radius-full); background: none; border: 1px solid var(--bp-color-border); cursor: pointer; color: var(--bp-color-text); position: relative; overflow: hidden; transition: background-color var(--bp-duration-fast) var(--bp-ease), border-color var(--bp-duration-fast) var(--bp-ease), color var(--bp-duration-fast) var(--bp-ease); } .bp-theme-toggle:hover { background-color: var(--bp-color-bg-subtle); border-color: var(--bp-color-border-strong); } .bp-theme-toggle:focus-visible { outline: none; box-shadow: var(--bp-focus-ring); } /* Ripple effect on click */ .bp-theme-toggle::after { content: ''; position: absolute; inset: 0; background-color: var(--bp-primary); border-radius: inherit; opacity: 0; transform: scale(0); pointer-events: none; } .bp-theme-toggle:active::after { animation: bp-ripple var(--bp-duration-normal) var(--bp-ease) forwards; } @keyframes bp-ripple { from { opacity: 0.25; transform: scale(0); } to { opacity: 0; transform: scale(2); } } /* Icon swap based on current theme */ .bp-theme-toggle .icon-sun { display: none; } .bp-theme-toggle .icon-moon { display: block; } [data-theme='dark'] .bp-theme-toggle .icon-sun { display: block; } [data-theme='dark'] .bp-theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bp-theme-toggle .icon-sun { display: block; } :root:not([data-theme='light']) .bp-theme-toggle .icon-moon { display: none; } } }