--- name: glasskit-css description: GlassKit is a pure CSS glassmorphism component library (v1.5.0) with 24 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage. --- # GlassKit CSS – AI Component Reference > **Purpose:** This document is an AI-optimized reference for generating correct GlassKit HTML markup. > It replaces the need to parse `docs.html` and provides copy-paste-ready structures, rules, and composition patterns. --- ## 1. Setup & Boilerplate ### Including the Library ```html ``` ### Minimal Template ```html
``` ### Naming Convention - **Prefix:** All components use `glass-` (e.g. `glass-card`, `glass-btn`) - **Utilities:** Use `gl-` (e.g. `gl-stack`, `gl-row`, `gl-mt-md`) - **BEM logic:** `glass-component__element--modifier` - Element: `glass-card__text`, `glass-modal__header` - Modifier: `glass-btn--primary`, `glass-avatar--lg` - **State classes:** `is-active`, `is-open`, `is-visible` (standalone, not BEM) ### Theming The theme is controlled via `data-theme` on ``: ```html ``` Toggle theme via JavaScript: ```js function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme'); html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark'); } ``` --- ## 2. Design Tokens All visual values are controlled via CSS Custom Properties. For custom theming, override them in a `theme-override.css`. ### Colors | Token | Dark | Light | Usage | |---|---|---|---| | `--gl-color-primary` | `#f5a623` | `#e8852d` | Primary color, buttons, active elements | | `--gl-color-primary-dark` | `#d4692a` | `#c96a1e` | Gradient end value | | `--gl-color-primary-mid` | `#e07a24` | `#d97826` | Gradient midpoint | | `--gl-color-text` | `#ffffff` | `#1a2a36` | Default text color | | `--gl-color-text-muted` | `rgba(255,255,255,0.60)` | `rgba(26,42,54,0.55)` | Secondary text | | `--gl-color-text-heading` | `#ffffff` | `#0f1f2a` | Headings | | `--gl-color-success` | `#34c759` | `#28a745` | Success | | `--gl-color-error` | `#ff3b30` | `#dc3545` | Error | | `--gl-color-warning` | `#ffcc00` | `#e6a800` | Warning | ### Glass Surfaces | Token | Dark | Usage | |---|---|---| | `--gl-surface-1` | `rgba(255,255,255, 0.08)` | Subtlest surface (status) | | `--gl-surface-2` | `rgba(255,255,255, 0.10)` | Default (inputs, cards) | | `--gl-surface-3` | `rgba(255,255,255, 0.14)` | Nav pills, badges | | `--gl-surface-4` | `rgba(255,255,255, 0.16)` | Hover states | | `--gl-surface-5` | `rgba(255,255,255, 0.22)` | Strong hover | | `--gl-surface-milk` | `rgba(255,255,255, 0.55)` | Milky | | `--gl-surface-milk-strong` | `rgba(255,255,255, 0.75)` | Secondary button | | `--gl-surface-overlay` | `rgba(0,0,0, 0.50)` | Modal overlay | ### Borders | Token | Value | |---|---| | `--gl-border-subtle` | `rgba(255,255,255, 0.18)` | | `--gl-border-medium` | `rgba(255,255,255, 0.30)` | | `--gl-border-strong` | `rgba(255,255,255, 0.40)` | | `--gl-border-milk` | `rgba(255,255,255, 0.60)` | | `--gl-border-warm` | `rgba(255,200,100, 0.35)` | | `--gl-border-focus` | `rgba(245,166,35, 0.60)` | ### Blur | Token | Value | |---|---| | `--gl-blur` | `24px` (default) | | `--gl-blur-light` | `16px` | | `--gl-blur-soft` | `12px` | | `--gl-blur-heavy` | `40px` | ### Radii | Token | Value | Usage | |---|---|---| | `--gl-radius-xs` | `8px` | Small elements | | `--gl-radius-sm` | `12px` | Badges, small containers | | `--gl-radius-input` | `14px` | Inputs, textareas | | `--gl-radius-btn` | `16px` | Buttons | | `--gl-radius-card` | `24px` | Cards | | `--gl-radius-full` | `9999px` | Fully rounded | | `--gl-radius-pill` | `50%` | Circle shape | ### Spacing | Token | Value | |---|---| | `--gl-space-2xs` | `4px` | | `--gl-space-xs` | `8px` | | `--gl-space-sm` | `12px` | | `--gl-space-md` | `16px` | | `--gl-space-lg` | `20px` | | `--gl-space-xl` | `24px` | | `--gl-space-2xl` | `32px` | | `--gl-space-3xl` | `40px` | | `--gl-space-4xl` | `56px` | ### Shadows | Token | Usage | |---|---| | `--gl-shadow-card` | Cards | | `--gl-shadow-btn` | Default buttons | | `--gl-shadow-btn-primary` | Primary button (orange glow) | | `--gl-shadow-glow` | Glow effect | | `--gl-shadow-modal` | Modal dialog | | `--gl-shadow-toast` | Toast notifications | | `--gl-shadow-focus` | Focus ring | ### Typography | Token | Value | |---|---| | `--gl-font-size-xs` | `13px` | | `--gl-font-size-sm` | `14px` | | `--gl-font-size-base` | `15px` | | `--gl-font-size-btn` | `16px` | | `--gl-font-size-lg` | `18px` | | `--gl-font-size-title` | `24px` | | `--gl-font-size-modal` | `20px` | | `--gl-font-weight-normal` | `400` | | `--gl-font-weight-medium` | `500` | | `--gl-font-weight-semibold` | `600` | --- ## 3. Component Catalog ### 3.1 Background The outermost container element. Creates the aurora background with light effects. **Must always be used as the wrapper for all content.** ```html
``` With Tab-Bar (adds bottom padding): ```html
``` | Class | Description | |---|---| | `.glass-bg` | Full-screen background with aurora light effects | | `.glass-bg--has-tab-bar` | Modifier: bottom padding for tab bar (82px) | --- ### 3.2 Navigation Bar Transparent navigation bar. Typically contains `glass-pill` buttons. ```html ``` | Class | Description | |---|---| | `.glass-nav` | Flex container with `space-between`, padding | --- ### 3.3 Pill Button Round glass icon buttons (46×46px). Used in nav bars and as standalone action buttons. ```html ``` | Class | Description | |---|---| | `.glass-pill` | Round glass button (46×46px) | | `.glass-theme-toggle` | Specialized pill with automatic moon/sun switch | Theme Toggle (specialized pill): ```html ``` --- ### 3.4 Tab Bar Fixed bottom navigation with glass background. Requires `glass-bg--has-tab-bar` on the background container. ```html ``` | Class | Description | |---|---| | `.glass-tab-bar` | Container: fixed bottom, glass blur | | `.glass-tab-bar__item` | Individual tab | | `.glass-tab-bar__item.is-active` | Active tab (primary color) | | `.glass-tab-bar__icon` | Icon wrapper | | `.glass-tab-bar__badge` | Numeric badge inside icon | | `.glass-tab-bar__label` | Text label below icon | --- ### 3.5 Title Page title with text shadow effect. ```html

Page Title

``` | Class | Description | |---|---| | `.glass-title` | Large title (24px, bold, text-shadow) | --- ### 3.6 Card Glassmorphism container for content. Optionally with glow effect (frosted glass gradient + light streak). ```html

Content

Description text goes here.

``` | Class | Description | |---|---| | `.glass-card` | Base glass container (border-radius: 24px) | | `.glass-card--glow` | Frosted glass gradient with light streak effect | | `.glass-card__icon` | Centered icon wrapper (SVG, 48×48px) | | `.glass-card__text` | Description text (muted) | --- ### 3.7 Buttons Full-width buttons (56px height) with three variants and size modifiers. ```html ``` | Class | Description | |---|---| | `.glass-btn` | Base (56px height, width: 100%) | | `.glass-btn--primary` | Color gradient (orange) | | `.glass-btn--secondary` | Milky white, dark text | | `.glass-btn--tertiary` | Subtle glass, more transparent | | `.glass-btn--sm` | 44px height | | `.glass-btn--lg` | 64px height | | `.glass-btn--auto` | Width: auto instead of 100% | **Important:** Buttons default to `width: 100%`. Use `--auto` for inline/auto-width buttons. --- ### 3.8 Badge Tags and labels. ```html Default Active Done Error ``` | Class | Description | |---|---| | `.glass-badge` | Default (subtle glass) | | `.glass-badge--primary` | Primary color | | `.glass-badge--success` | Green | | `.glass-badge--error` | Red | --- ### 3.9 Avatar Glass circles in three sizes. For initials, icons, or images. ```html
S
M
L
``` | Class | Description | |---|---| | `.glass-avatar` | Default size (medium) | | `.glass-avatar--sm` | Small | | `.glass-avatar--lg` | Large | --- ### 3.10 Divider Horizontal separator line with fade effect. ```html
``` --- ### 3.11 Status Notice Info/notice card with icon and text. ```html

No documents captured yet.

``` | Class | Description | |---|---| | `.glass-status` | Container with subtle glass surface | --- ### 3.12 Modal Centered dialog with blur overlay. Controlled via the `is-active` state class on the overlay. ```html

Delete contract?

This action cannot be undone.

``` Danger variant: ```html ``` | Class | Description | |---|---| | `.glass-modal-overlay` | Fullscreen container with blur | | `.glass-modal-overlay.is-active` | Visible + animated | | `.glass-modal` | Dialog box | | `.glass-modal__header` | Header area | | `.glass-modal__title` | Title (20px, bold) | | `.glass-modal__body` | Content area | | `.glass-modal__footer` | Action bar | | `.glass-modal__action` | Action button in footer | | `.glass-modal__action--primary` | Primary action (colored) | | `.glass-modal__action--danger` | Dangerous action (red) | **Important:** `is-active` goes on `.glass-modal-overlay`, **not** on `.glass-modal`. JavaScript to open/close: ```js // Open document.querySelector('.glass-modal-overlay').classList.add('is-active'); // Close document.querySelector('.glass-modal-overlay').classList.remove('is-active'); ``` --- ### 3.13 Toast Temporary notification. Visible via `is-visible`. Three variants. ```html
Saved successfully!
``` | Class | Description | |---|---| | `.glass-toast` | Base container | | `.glass-toast--success` | Green accent | | `.glass-toast--error` | Red accent | | `.glass-toast--warning` | Yellow accent | | `.glass-toast.is-visible` | Visible + faded in | | `.glass-toast__icon` | Icon (SVG) | | `.glass-toast__text` | Message text | --- ### 3.14 Input Text fields with glass background. Wrapped in a `glass-input-group` with label and optional hint. ```html
Optional help text
``` Error state: ```html
Please enter a valid email address
``` Disabled: ```html ``` | Class | Description | |---|---| | `.glass-input-group` | Wrapper for label + input + hint | | `.glass-label` | Label (small, muted, uppercase) | | `.glass-input` | Text input (glass background) | | `.glass-input--error` | Red border for error state | | `.glass-hint` | Help text below input | | `.glass-hint--error` | Red help text | --- ### 3.15 Textarea Multi-line text field. ```html ``` | Class | Description | |---|---| | `.glass-textarea` | Multi-line glass input | --- ### 3.16 Select Dropdown with glass styling and custom chevron. ```html ``` | Class | Description | |---|---| | `.glass-select` | Styled dropdown | --- ### 3.17 Search Search field with embedded search icon. ```html
``` | Class | Description | |---|---| | `.glass-search` | Wrapper (position: relative) | | `.glass-search__icon` | Positioned search icon (left) | **Important:** The input inside `.glass-search` uses the regular `.glass-input` class. --- ### 3.18 Toggle Switch iOS-style switch. ```html ``` | Class | Description | |---|---| | `.glass-toggle` | Outer label (flex container) | | `.glass-toggle__input` | Hidden checkbox input | | `.glass-toggle__track` | Visible track | | `.glass-toggle__thumb` | Movable thumb | | `.glass-toggle__label` | Text label | **State:** `:checked` on the input activates the toggle visually. --- ### 3.19 Checkbox Animated checkbox with checkmark SVG. ```html ``` | Class | Description | |---|---| | `.glass-checkbox` | Outer label | | `.glass-checkbox__input` | Hidden checkbox input | | `.glass-checkbox__box` | Visible box with checkmark SVG | | `.glass-checkbox__label` | Text label | --- ### 3.20 Radio Button Animated radio button with dot. ```html ``` | Class | Description | |---|---| | `.glass-radio` | Outer label | | `.glass-radio__input` | Hidden radio input | | `.glass-radio__circle` | Visible circle | | `.glass-radio__dot` | Inner dot (visible on :checked) | | `.glass-radio__label` | Text label | **Important:** Radio buttons in the same group need the same `name` attribute value. --- ### 3.21 Range Slider Slider with gradient thumb. Used in a group with header and value display. ```html
75%
``` | Class | Description | |---|---| | `.glass-range-group` | Wrapper | | `.glass-range-header` | Flex container for label + value | | `.glass-range-value` | Value display (right) | | `.glass-range` | The actual slider | --- ### 3.22 Progress Bar Progress bar with optional shimmer effect. ```html
Upload 68%
``` | Class | Description | |---|---| | `.glass-progress` | Base container | | `.glass-progress--sm` | Narrow track (4px) | | `.glass-progress--lg` | Wide track (12px) | | `.glass-progress--success` | Green bar | | `.glass-progress--error` | Red bar | | `.glass-progress__header` | Flex container for label + value | | `.glass-progress__label` | Label (left) | | `.glass-progress__value` | Percentage value (right) | | `.glass-progress__track` | Background track | | `.glass-progress__fill` | Filled area (width via `style="width: X%"`) | **Important:** Progress width is controlled via inline `style="width: X%"` on `.glass-progress__fill`. --- ### 3.23 Accordion Collapsible content sections. Controlled via `is-open` on items. ```html
The answer to question one.
The answer to question two.
``` | Class | Description | |---|---| | `.glass-accordion` | Container | | `.glass-accordion__item` | Individual item | | `.glass-accordion__item.is-open` | Expanded item | | `.glass-accordion__trigger` | Clickable header button | | `.glass-accordion__trigger-icon` | Chevron icon (rotates on open) | | `.glass-accordion__content` | Wrapper for animated height | | `.glass-accordion__body` | Actual content | --- ### 3.24 List iOS-style grouped settings list. Items can carry a leading icon, a title with optional subtitle, and a trailing element (chevron, value, button). Dividers between items are drawn automatically via `::after` — **never add divider markup manually**. ```html ``` ```html ``` ```html
Recommendations
``` | Class | Description | |---|---| | `.glass-list` | Grouped surface container | | `.glass-list--flush` | Edge-to-edge variant (no side margin / radius). Assumes parent has `--gl-space-lg` horizontal padding. | | `.glass-list--bare` | Strips background, border & shadow — for embedding inside `.glass-popover` or `.glass-card`. | | `.glass-list__section-header` | Section label above a `.glass-list` — uppercase, small, muted | | `.glass-list__item` | List row (use `
  • `, ``, or `
    • Share
    • Duplicate
    • Delete
    ``` | Class | Description | |---|---| | `.glass-popover-anchor` | Positioning context — wraps trigger + popover | | `.glass-popover` | Floating glass surface, hidden until `.is-open` | | `.glass-popover.is-open` | Visible state — fade + scale animation | | `.glass-popover--top` | Opens upward (above the trigger) | | `.glass-popover--start` | Aligns left edge with trigger | | `.glass-popover--end` | Aligns right edge with trigger | **Note:** name your toggle function anything except `togglePopover` — that name collides with the native `HTMLElement.togglePopover()` method (HTML Popover API) and inline `onclick` handlers will throw `NotSupportedError`. Use a prefix like `gkTogglePopover` or `myToggle`. --- ## 4. Utility Classes ### Stack (Vertical) Flexbox column with gap. ```html
    Item 1
    Item 2
    ``` | Class | Gap | |---|---| | `.gl-stack` | Default | | `.gl-stack--2xs` | 4px | | `.gl-stack--xs` | 8px | | `.gl-stack--sm` | 12px | | `.gl-stack--md` | 16px | | `.gl-stack--lg` | 20px | | `.gl-stack--xl` | 24px | ### Row (Horizontal) Flexbox row with gap. ```html
    Tag 1 Tag 2
    ``` | Class | Gap | |---|---| | `.gl-row` | Default | | `.gl-row--xs` | 8px | | `.gl-row--sm` | 12px | | `.gl-row--md` | 16px | ### Margin | Class | Value | |---|---| | `.gl-mt-sm` | margin-top: 12px | | `.gl-mt-md` | margin-top: 16px | | `.gl-mt-lg` | margin-top: 20px | | `.gl-mt-xl` | margin-top: 24px | | `.gl-mb-sm` | margin-bottom: 12px | | `.gl-mb-md` | margin-bottom: 16px | | `.gl-mb-lg` | margin-bottom: 20px | | `.gl-mb-xl` | margin-bottom: 24px | ### Text | Class | Description | |---|---| | `.gl-text-center` | text-align: center | | `.gl-text-muted` | Muted text color | | `.gl-text-sm` | Smaller font size | ### Layout | Class | Description | |---|---| | `.gl-px` | Horizontal padding | | `.gl-w-full` | width: 100% | | `.gl-flex-1` | flex: 1 | --- ## 5. State Classes Overview | State Class | Used on | Description | |---|---|---| | `.is-active` | `.glass-modal-overlay`, `.glass-tab-bar__item` | Element is active/visible | | `.is-open` | `.glass-accordion__item`, `.glass-popover` | Accordion item expanded / popover visible | | `.is-visible` | `.glass-toast` | Toast is visible | | `:checked` | Toggle, Checkbox, Radio (on the input) | Native checked state | | `:focus` | Input, Textarea, Select, Range | Focus ring | | `:disabled` | `.glass-input` | Disabled input | --- ## 6. Composition Patterns ### Login Screen ```html

    Sign In

    ``` ### Dashboard with Cards ```html

    Capture and upload documents.

    Manage and archive contracts.

    ``` ### Form Page ```html

    New Contract

    ``` ### Delete Confirmation (Modal) ```html

    Delete contract?

    Do you want to permanently delete this contract? This action cannot be undone.

    ``` ### Settings Page ```html

    Settings

    100%
    Advanced options go here…
    ``` ### iOS-style Settings Screen (List + Popover) A grouped settings screen using `glass-list` for the rows and `glass-popover` for an inline action menu. Reproduces the layout of native iOS Settings screens. ```html
    Account
    • Marcel Jungherz
      marcel@jungherz.com
    • Subscriptions
      $34.94
    Notifications
    • Push notifications
      On
    • Email digest
      Weekly
    • Reset to defaults
    ``` Key points in this composition: - **Two grouped sections** — labeled by `.glass-list__section-header` above each list, matching iOS settings. - **Auto-dividers** — no `
    ` between rows; the `::after` pseudo-element handles them. - **Mixed trailing types** — chevron, value text, value + chevron, all in the same list. - **Centered destructive action** — last item uses `--center` for a "Reset to defaults" style row, gets a full-width divider above (no leading icon → standard padding inset). - **Popover in nav** — `glass-popover--end` aligns the menu to the right edge of the trigger so it doesn't overflow the viewport. - **Bare list inside popover** — `glass-list--bare` strips the inner glass surface so the popover stays the only glass layer. --- ### Progress + Toast ```html
    Upload 100%
    Upload successful!
    ``` --- ## 7. Rules & Common Mistakes ### ✅ Always follow 1. **`glass-bg` as outermost container** – Without the background wrapper, the aurora background is missing and glass effects won't render correctly. 2. **`glass-bg--has-tab-bar`** – When a tab bar is present, this modifier must be set on `glass-bg`, otherwise the tab bar covers the bottom content. 3. **Buttons are full-width** – `glass-btn` has `width: 100%`. Always add `glass-btn--auto` for inline buttons. 4. **Wrap inputs in `glass-input-group`** – For correct label/hint spacing. 5. **Place state classes correctly:** - `is-active` → on `.glass-modal-overlay` (not on `.glass-modal`) - `is-active` → on `.glass-tab-bar__item` - `is-open` → on `.glass-accordion__item` - `is-open` → on `.glass-popover` (not on the trigger or anchor) - `is-visible` → on `.glass-toast` 6. **SVG icons** – GlassKit uses inline SVGs (stroke-based, not fill). Typical attributes: `viewBox="0 0 24 24"`, stroke via `currentColor`. 7. **`data-theme`** – Always set on ``, never on `` or deeper elements. 8. **List dividers are automatic** – Never add a `
    ` or divider element between `.glass-list__item`s. The divider is rendered via `::after` and respects `:has(.glass-list__leading)` for the inset. 9. **Popover toggle naming** – Never name your popover toggle JS function `togglePopover`. It collides with the native `HTMLElement.togglePopover()` method. Use a prefix like `gkTogglePopover`. ### ❌ Common Mistakes | Mistake | Correction | |---|---| | `is-active` on `.glass-modal` instead of `.glass-modal-overlay` | Set `is-active` on the overlay | | `glass-btn` without variant (`--primary` etc.) | Always specify a variant | | Inputs without `glass-input-group` wrapper | Wrap in `glass-input-group` | | `glass-tab-bar` without `glass-bg--has-tab-bar` | Add modifier to the background container | | `data-theme` on `` | Set on `` | | Progress width via class instead of inline style | Use `style="width: X%"` on `.glass-progress__fill` | | Toggle without `__track > __thumb` nesting | Follow correct BEM hierarchy | | Manually adding `
    ` or divider element between `.glass-list__item`s | Remove it — dividers are automatic via `::after` | | Putting `glass-list` inside `glass-popover` without `--bare` | Add `.glass-list--bare` to strip the double glass surface | | JS function named `togglePopover()` | Rename to `gkTogglePopover()` or similar to avoid native API clash | | Putting `.is-open` on the trigger button instead of `.glass-popover` | The state class belongs on the popover element | --- ## 8. Quick Class Reference | Component | Base Class | Modifiers / States | |---|---|---| | Background | `.glass-bg` | `--has-tab-bar` | | Navigation | `.glass-nav` | – | | Pill Button | `.glass-pill` | – | | Theme Toggle | `.glass-theme-toggle` | – | | Title | `.glass-title` | – | | Card | `.glass-card` | `--glow` | | Button | `.glass-btn` | `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto` | | Badge | `.glass-badge` | `--primary`, `--success`, `--error` | | Avatar | `.glass-avatar` | `--sm`, `--lg` | | Divider | `.glass-divider` | – | | Status | `.glass-status` | – | | Input | `.glass-input` | `--error`, `:disabled` | | Input Group | `.glass-input-group` | – | | Label | `.glass-label` | – | | Hint | `.glass-hint` | `--error` | | Textarea | `.glass-textarea` | – | | Select | `.glass-select` | – | | Search | `.glass-search` | – | | Toggle | `.glass-toggle` | `:checked` | | Checkbox | `.glass-checkbox` | `:checked` | | Radio | `.glass-radio` | `:checked` | | Range | `.glass-range` | – | | Progress | `.glass-progress` | `--sm`, `--lg`, `--success`, `--error` | | Modal | `.glass-modal-overlay` | `.is-active` | | Toast | `.glass-toast` | `--success`, `--error`, `--warning`, `.is-visible` | | Tab Bar | `.glass-tab-bar` | `.is-active` on items | | Accordion | `.glass-accordion` | `.is-open` on items | | List | `.glass-list` | `--flush`, `--bare`, `__item--interactive`, `__item--center`, `__item--danger`, `__item--accent`, `__leading--lg`, `__subtitle--wrap`, `__value`, `__section-header` | | Popover | `.glass-popover` | `--top`, `--start`, `--end`, `.is-open` | --- ## 9. Web Components / Shadow DOM GlassKit ships a Constructable Stylesheet for Shadow DOM usage: ```js import { glassSheet } from '@jungherz-de/glasskit/glasskit-styles.js'; class MyCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.adoptedStyleSheets = [glassSheet]; shadow.innerHTML = `

    `; } } customElements.define('my-card', MyCard); ``` | Export | Type | Description | |---|---|---| | `glassSheet` | `CSSStyleSheet` | Constructable Stylesheet for `adoptedStyleSheets` | | `css` | `string` | CSS as string (fallback) | **Note:** CSS Custom Properties (`--gl-*`) penetrate the shadow boundary automatically. Theme switching works globally. --- ## 10. Custom Theming Load custom brand colors via `theme-override.css` after the base library: ```css :root { --gl-color-primary: #007AFF; --gl-color-primary-dark: #0055CC; --gl-color-primary-mid: #0066E0; --gl-border-warm: rgba(0, 122, 255, 0.35); --gl-border-focus: rgba(0, 122, 255, 0.60); --gl-shadow-btn-primary: 0 6px 24px rgba(0, 100, 220, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15); --gl-shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.3); } ``` Included theme templates in `theme-override.css`: - 🔵 Ocean Blue - 🟢 Emerald Green - 🌹 Rose - 🎨 Custom (empty, ready to fill)