Pure Admin exports --base-* CSS custom properties that enable automatic theming for web components like web-daterangepicker, web-multiselect, and others.

Architecture

1. Pure Admin defines SCSS variables - $base-* variables in _variables.scss
2. Themes override as needed - Each theme can customize these base variables
3. Mixin outputs CSS properties - _base-css-variables.scss converts SCSS to CSS
4. Web components consume - Components use var(--base-*, fallback)

Data Flow

_variables.scss          themes/express.scss           Output CSS
────────────────        ─────────────────────        ─────────────
$base-accent-color:     $base-accent-color:          :root {
  #3b82f6 !default;  →    #dc2626;               →    --base-accent-color: #dc2626;
                        @include output-base-vars;     ...
                                                     }

Web Component Consumption

/* In web component CSS */
:host {
    --ms-accent-color: var(--base-accent-color, #3b82f6);
    --ms-text-color: var(--base-text-color-1, #333);
    --ms-input-bg: var(--base-input-background, #fff);
}

These are the --base-* CSS variable values from the currently selected theme:

Each theme follows this pattern to output base CSS variables:

// themes/express.scss
@import '../variables';

// Override accent color for theme
$accent-color: $express-red;

// Sync base variables with theme colors
$base-accent-color: $accent-color;
$base-accent-color-hover: $express-red-hover;
$base-accent-color-active: lighten($express-red, 15%);

// ... other theme overrides ...

@import '../core';
@import '../utilities';
@import '../base-css-variables';

// Output CSS variables in :root block
:root {
    --page-loader-bg: rgba(0, 0, 0, 0.95);
    --page-loader-spinner-border: #333;
    --page-loader-spinner-accent: #FFCC00;

    // Base CSS variables for web components
    @include output-base-css-variables;
}