@keenmate/pure-css 1.0.0-rc01

package/src/scss/_base-css-variables.scss

@@ -0,0 +1,648 @@
+// ============================================================================
+// BASE CSS VARIABLES OUTPUT MIXIN
+// ============================================================================
+// This mixin outputs all $base-* SCSS variables as --base-* CSS custom properties.
+// Include this in themes to enable web component theming.
+//
+// Usage in theme file:
+//   @import '../base-css-variables';
+//   :root {
+//     @include output-base-css-variables;
+//   }
+//
+// Web components consume these via fallback chains:
+//   --ms-accent-color: var(--base-accent-color, #3b82f6);
+// ============================================================================
+
+// Make variables resolvable when this file is loaded as a @use module
+// (e.g. from main.scss). Legacy @import callers (themes) are unaffected —
+// Sass places @use'd members into the importing file's global scope, where
+// theme-set overrides already live.
+@use 'variables/index' as *;
+
+@mixin output-base-css-variables {
+  // === Accent Colors ===
+  --base-accent-color: #{$base-accent-color};
+  --base-accent-color-hover: #{$base-accent-color-hover};
+  --base-accent-color-active: #{$base-accent-color-active};
+  --base-accent-color-light: #{$base-accent-color-light};
+  --base-accent-color-light-hover: #{$base-accent-color-light-hover};
+
+  // === Text Colors ===
+  --base-text-color-1: #{$base-text-color-1};
+  --base-text-color-2: #{$base-text-color-2};
+  --base-text-color-3: #{$base-text-color-3};
+  --base-text-color-4: #{$base-text-color-4};
+  --base-text-color-on-accent: #{$base-text-color-on-accent};
+
+  // === Background Colors (semantic) ===
+  --base-main-bg: #{$base-main-bg};
+  --base-page-bg: #{$base-page-bg};
+  --base-subtle-bg: #{$base-subtle-bg};
+  --base-inverse-bg: #{$base-inverse-bg};
+  --base-overlay-bg: #{$base-overlay-bg};
+  --base-shadow-color: #{$base-shadow-color};
+  --base-hover-bg: #{$base-hover-bg};
+  --base-active-bg: #{$base-active-bg};
+  --base-disabled-bg: #{$base-disabled-bg};
+  --base-elevated-bg: #{$base-elevated-bg};
+
+  // === Border Colors ===
+  --base-border-color: #{$base-border-color};
+  --base-border: #{$base-border};
+
+  // === Input Fields ===
+  --base-input-bg: #{$base-input-bg};
+  --base-input-color: #{$base-input-color};
+  --base-input-border: #{$base-input-border};
+  --base-input-border-hover: #{$base-input-border-hover};
+  --base-input-border-focus: #{$base-input-border-focus};
+  --base-input-placeholder-color: #{$base-input-placeholder-color};
+  --base-input-bg-disabled: #{$base-input-bg-disabled};
+
+  // === Input Size Heights ===
+  --base-input-size-xs-height: #{$base-input-size-xs-height};
+  --base-input-size-sm-height: #{$base-input-size-sm-height};
+  --base-input-size-md-height: #{$base-input-size-md-height};
+  --base-input-size-lg-height: #{$base-input-size-lg-height};
+  --base-input-size-xl-height: #{$base-input-size-xl-height};
+
+  // === Dropdown/Popover ===
+  --base-dropdown-bg: #{$base-dropdown-bg};
+  --base-dropdown-border: #{$base-dropdown-border};
+  --base-dropdown-box-shadow: #{$base-dropdown-box-shadow};
+
+  // === Tooltip ===
+  --base-tooltip-bg: #{$base-tooltip-bg};
+  --base-tooltip-text-color: #{$base-tooltip-text-color};
+
+  // === Contextual Colors - Success ===
+  --base-success-color: #{$base-success-color};
+  --base-success-color-hover: #{$base-success-color-hover};
+  --base-success-bg-light: #{$base-success-bg-light};
+  --base-success-bg-subtle: #{$base-success-bg-subtle};
+  --base-success-border: #{$base-success-border};
+  --base-success-text: #{$base-success-text};
+  --base-success-text-light: #{$base-success-text-light};
+  --base-text-on-success: #{$base-text-on-success};
+
+  // === Contextual Colors - Danger ===
+  --base-danger-color: #{$base-danger-color};
+  --base-danger-color-hover: #{$base-danger-color-hover};
+  --base-danger-bg-light: #{$base-danger-bg-light};
+  --base-danger-bg-subtle: #{$base-danger-bg-subtle};
+  --base-danger-border: #{$base-danger-border};
+  --base-danger-text: #{$base-danger-text};
+  --base-danger-text-light: #{$base-danger-text-light};
+  --base-text-on-danger: #{$base-text-on-danger};
+
+  // === Contextual Colors - Warning ===
+  --base-warning-color: #{$base-warning-color};
+  --base-warning-color-hover: #{$base-warning-color-hover};
+  --base-warning-bg-light: #{$base-warning-bg-light};
+  --base-warning-bg-subtle: #{$base-warning-bg-subtle};
+  --base-warning-border: #{$base-warning-border};
+  --base-warning-text: #{$base-warning-text};
+  --base-warning-text-light: #{$base-warning-text-light};
+  --base-text-on-warning: #{$base-text-on-warning};
+
+  // === Contextual Colors - Info ===
+  --base-info-color: #{$base-info-color};
+  --base-info-color-hover: #{$base-info-color-hover};
+  --base-info-bg-light: #{$base-info-bg-light};
+  --base-info-bg-subtle: #{$base-info-bg-subtle};
+  --base-info-border: #{$base-info-border};
+  --base-info-text: #{$base-info-text};
+  --base-info-text-light: #{$base-info-text-light};
+  --base-text-on-info: #{$base-text-on-info};
+
+  // === Interactive States ===
+  --base-hover-overlay: #{$base-hover-overlay};
+  --base-active-overlay: #{$base-active-overlay};
+  --base-focus-ring-color: #{$base-focus-ring-color};
+  --base-focus-ring-width: #{$base-focus-ring-width};
+
+  // === Typography ===
+  --base-font-family: #{$base-font-family};
+  --base-font-family-mono: #{$base-font-family-mono};
+  --base-font-size-2xs: #{$base-font-size-2xs};
+  --base-font-size-xs: #{$base-font-size-xs};
+  --base-font-size-sm: #{$base-font-size-sm};
+  --base-font-size-base: #{$base-font-size-base};
+  --base-font-size-lg: #{$base-font-size-lg};
+  --base-font-size-xl: #{$base-font-size-xl};
+  --base-font-size-2xl: #{$base-font-size-2xl};
+  --base-font-weight-normal: #{$base-font-weight-normal};
+  --base-font-weight-medium: #{$base-font-weight-medium};
+  --base-font-weight-semibold: #{$base-font-weight-semibold};
+  --base-font-weight-bold: #{$base-font-weight-bold};
+  --base-line-height-tight: #{$base-line-height-tight};
+  --base-line-height-normal: #{$base-line-height-normal};
+  --base-line-height-relaxed: #{$base-line-height-relaxed};
+
+  // === Border Radius ===
+  --base-border-radius-sm: #{$base-border-radius-sm};
+  --base-border-radius-md: #{$base-border-radius-md};
+  --base-border-radius-lg: #{$base-border-radius-lg};
+}
+
+// ============================================================================
+// ALERT COLOR DERIVATION MIXINS
+// ============================================================================
+// These mixins use color-mix() to automatically derive alert colors from
+// semantic base colors (--pa-success-bg, --pa-danger-bg, etc.)
+//
+// Light mode: dark text on subtle backgrounds
+// Dark mode: light text on tinted backgrounds
+//
+// Themes call the appropriate mixin instead of hardcoding 12+ CSS variables.
+// Override specific variables after the mixin call if needed.
+// ============================================================================
+
+// Light mode: dark text on subtle backgrounds
+@mixin output-pa-alert-variables-light {
+  // Success
+  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Danger
+  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Warning
+  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) #{$alert-border-opacity-light}%, transparent);
+
+  // Info
+  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) #{$alert-text-mix-light}, black);
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) #{$alert-bg-opacity-light}%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) #{$alert-border-opacity-light}%, transparent);
+}
+
+// Dark mode: white text on tinted backgrounds (white text is always readable)
+@mixin output-pa-alert-variables-dark {
+  // Success
+  --pa-alert-success-text: #ffffff;
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Danger
+  --pa-alert-danger-text: #ffffff;
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Warning
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) #{$alert-border-opacity-dark}%, transparent);
+
+  // Info
+  --pa-alert-info-text: #ffffff;
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) #{$alert-bg-opacity-dark}%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) #{$alert-border-opacity-dark}%, transparent);
+}
+
+// ============================================================================
+// DERIVED TOKENS — TEXT CONTRAST TIERS + SURFACE TINTS
+// ============================================================================
+// These tokens use `color-mix(... var(--pa-text-color-1) ...)` to derive
+// theme-aware contrast levels. They MUST be emitted at every selector that
+// could carry an override of --pa-text-color-1, because CSS custom property
+// substitution bakes nested var() references at the *defining element*, not
+// the using element. If we only defined these at `:root, .pa-mode-light`,
+// the light-mode text colour would be frozen into the value, and elements
+// inside `.pa-mode-dark` (which overrides --pa-text-color-1 at body) would
+// inherit the light-mode-baked tier values → low contrast on dark surfaces.
+//
+// Emitting at all three selectors causes each scope to recompute the tiers
+// against its own --pa-text-color-1. The selector list `:root, .pa-mode-light,
+// .pa-mode-dark` covers html, body in light mode, and body in dark mode —
+// regardless of which class layout each theme uses for mode switching.
+//
+// This is a TOP-LEVEL rule (not inside the mixin) because themes only call
+// the mixin from their light-mode block; they don't call it again in the
+// dark-mode block. Emitting at framework level means themes get correct
+// dark-mode tiers without changing any theme code.
+//
+// Override these per-theme by redefining them in the same scope you
+// override --pa-text-color-1.
+// ============================================================================
+
+:root,
+.pa-mode-light,
+.pa-mode-dark {
+  --pa-text-strong:    color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+  --pa-text-secondary: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
+  --pa-text-tertiary:  color-mix(in srgb, var(--pa-text-color-1) 55%, transparent);
+  --pa-surface-hover:  color-mix(in srgb, var(--pa-text-color-1) 4%, transparent);
+  --pa-surface-track:  color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+}
+
+// ============================================================================
+// PURE ADMIN THEME CSS VARIABLES OUTPUT MIXIN
+// ============================================================================
+// This mixin outputs all themeable SCSS variables as --pa-* CSS custom properties.
+// Components use var(--pa-*) for runtime theme switching capability.
+//
+// Usage in theme file:
+//   :root, .theme-light {
+//     @include output-pa-css-variables;
+//   }
+//   .theme-dark {
+//     @include output-pa-css-variables;
+//   }
+// ============================================================================
+
+@mixin output-pa-css-variables {
+  // =========================================================================
+  // COLOR SCHEME SIGNAL
+  // Tells the browser whether this scope is light or dark so native UA
+  // elements (scrollbars, form controls) and `light-dark()` resolve
+  // correctly. Drives web components (e.g. <web-multiselect>) that ship
+  // adaptive palettes via `light-dark()`. Override $theme-color-scheme
+  // before importing variables for always-dark themes; for dual-mode
+  // themes leave default `light` here and add `color-scheme: dark;` to
+  // the `.pa-mode-dark` block.
+  // =========================================================================
+  color-scheme: #{$theme-color-scheme};
+
+  // =========================================================================
+  // CORE COLORS
+  // =========================================================================
+
+  // Background colors
+  --pa-main-bg: #{$main-bg};
+  --pa-page-bg: #{$page-bg};
+  --pa-subtle-bg: #{$subtle-bg};
+
+  // Text colors
+  --pa-text-color-1: #{$text-color-1};
+  --pa-text-color-2: #{$text-color-2};
+
+  // Accent colors
+  --pa-accent: #{$accent-color};
+  --pa-accent-hover: #{$accent-hover};
+  // -light derives from --pa-accent at runtime so theme overrides cascade.
+  // SCSS-only consumers still get $accent-light from variables/_base.scss via the !default chain.
+  --pa-accent-light: color-mix(in srgb, var(--pa-accent) 5%, transparent);
+
+  // Links — derive from accent so theme overrides cascade automatically.
+  // Hover mixes 25% toward currentColor (inherited text colour at the use site),
+  // so it auto-darkens on light themes and auto-lightens on dark themes
+  // without per-mode declarations.
+  --pa-link-color: var(--pa-accent);
+  --pa-link-color-hover: color-mix(in srgb, var(--pa-link-color), currentColor 50%);
+  --pa-link-color-visited: var(--pa-link-color);
+
+  // Border. A pure pass-through of the base border colour — emit it as a live reference to
+  // --base-border-color (not a baked literal) so it follows a RUNTIME --base-* override (a
+  // theme toggling --base-border-color at :root/.pa-mode-dark), while the build-time value
+  // stays the fallback. Keeps utilities/components that read --pa-border-color theme-responsive.
+  --pa-border-color: var(--base-border-color, #{$border-color});
+
+  // =========================================================================
+  // ROLE COLORS — single source of truth for the four semantic roles.
+  // Button surfaces (--pa-btn-{success,warning,danger,info}-bg) and
+  // contextual surfaces (--pa-{success,warning,danger,info}-bg) below
+  // both reference these via var() so a theme can override one place
+  // and the change cascades everywhere.
+  //
+  // --pa-warning here is also the "off-target / approaching-limit" axis
+  // colour used by KPI components — orange-500, deliberately distinct
+  // from the previous Bootstrap yellow.
+  // =========================================================================
+
+  --pa-success: #{$base-success-color};
+  --pa-warning: #{$base-warning-color};
+  --pa-danger:  #{$base-danger-color};
+  --pa-info:    #{$base-info-color};
+
+  // =========================================================================
+  // SENTIMENT SCALE — 5-step direction-of-change.
+  // Used by KPI / data-display components for indicating directional
+  // movement (delta colours, sparkline trend colours, etc.).
+  // The middle three values alias the role colours so a theme that
+  // retunes --pa-success / --pa-danger automatically retunes the
+  // matching sentiment positions; the outliers (very-positive /
+  // very-negative) are explicit darker shades.
+  //
+  // Sentiment is on a *different axis* from role colours — direction
+  // (ordinal: -2 to +2) vs. urgency (categorical: success / warning /
+  // danger / info). They coexist intentionally.
+  // =========================================================================
+
+  --pa-very-positive: #{$base-very-positive};
+  --pa-positive:      var(--pa-success);
+  --pa-neutral:       #{$base-neutral};
+  --pa-negative:      var(--pa-danger);
+  --pa-very-negative: #{$base-very-negative};
+
+  // (Text contrast tiers and surface tints are emitted as a top-level rule
+  // OUTSIDE this mixin — see below — because their values use
+  // `var(--pa-text-color-1)` and CSS custom property substitution bakes
+  // nested var() at the *defining element*, not the using element. That
+  // means tier vars defined here at `:root, .pa-mode-light` would freeze
+  // the light-mode text colour into them; under `.pa-mode-dark` (which
+  // overrides --pa-text-color-1 at body) the tiers would still resolve
+  // against the light value. Emitting them at all three selectors
+  // simultaneously fixes the substitution scope.)
+
+  // =========================================================================
+  // CHART / SPARKLINE
+  // =========================================================================
+  // Single height token used by every KPI showcase that renders a sparkline
+  // / trendline (terminal grid, sparkline list, hero+supporting, bento).
+  // Centralised so the line proportions stay consistent across designs;
+  // override globally for taller or shorter trendlines, or per-component
+  // if a particular layout (e.g. a "hero" pattern) wants a different size.
+
+  --pa-chart-trendline-height: 3rem;
+  --pa-chart-trendline-stroke: 2.1;     // SVG user-space units (viewBox-relative)
+
+  // =========================================================================
+  // DETAIL POPOVER — Bloomberg-dark by default, regardless of host
+  // theme, for the terminal/data-dashboard aesthetic. Override the
+  // five tokens to adopt a theme-aware popover instead.
+  // =========================================================================
+
+  --pa-detail-bg:        rgba(15, 17, 21, 0.97);
+  --pa-detail-text:      #ffffff;
+  --pa-detail-row-label: rgba(255, 255, 255, 0.75);
+  --pa-detail-title:     rgba(255, 255, 255, 0.55);
+  --pa-detail-shadow:    0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
+
+  // =========================================================================
+  // LAYOUT COLORS
+  // =========================================================================
+
+  // Header
+  --pa-header-bg: #{$header-bg};
+  --pa-header-border-color: #{$header-border-color};
+  --pa-header-text: #{$header-text};
+  --pa-header-text-secondary: #{$header-text-secondary};
+  --pa-header-profile-name-color: #{$header-profile-name-color};
+
+  // Sidebar
+  --pa-sidebar-bg: #{$sidebar-bg};
+  --pa-sidebar-text: #{$sidebar-text};
+  --pa-sidebar-text-secondary: #{$sidebar-text-secondary};
+  --pa-sidebar-submenu-bg: #{$sidebar-submenu-bg};
+  --pa-sidebar-submenu-hover-bg: #{$sidebar-submenu-hover-bg};
+  --pa-sidebar-submenu-active-bg: #{$sidebar-submenu-active-bg};
+  --pa-sidebar-submenu-active-text: #{$sidebar-submenu-active-text};
+
+  // Footer
+  --pa-footer-bg: #{$footer-bg};
+  --pa-footer-border-color: #{$footer-border-color};
+
+  // =========================================================================
+  // BUTTON COLORS
+  // =========================================================================
+
+  // Primary (uses accent color)
+  --pa-btn-primary-bg: #{$btn-primary-bg};
+  --pa-btn-primary-bg-hover: #{$btn-primary-bg-hover};
+  // -light derives from --pa-btn-primary-bg at runtime so theme overrides cascade.
+  --pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
+  --pa-btn-primary-text: #{$btn-primary-text};
+
+  // Secondary
+  --pa-btn-secondary-bg: #{$btn-secondary-bg};
+  --pa-btn-secondary-bg-hover: #{$btn-secondary-bg-hover};
+  --pa-btn-secondary-text: #{$btn-secondary-text};
+  // Outline-variant border + text colour. Defaults to --pa-btn-secondary-bg
+  // so the resting outline matches the colour the hover fill animates to.
+  // Was previously $btn-secondary-text (#ffffff) which rendered invisible on
+  // any light theme — pre-existing bug, not a 2.7.0 regression.
+  --pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
+
+  // Success — bg references role colour for runtime cascade
+  --pa-btn-success-bg: var(--pa-success);
+  --pa-btn-success-bg-hover: #{$btn-success-bg-hover};
+  --pa-btn-success-text: #{$btn-success-text};
+
+  // Danger — bg references role colour for runtime cascade
+  --pa-btn-danger-bg: var(--pa-danger);
+  --pa-btn-danger-bg-hover: #{$btn-danger-bg-hover};
+  --pa-btn-danger-text: #{$btn-danger-text};
+
+  // Warning — bg references role colour for runtime cascade
+  --pa-btn-warning-bg: var(--pa-warning);
+  --pa-btn-warning-bg-hover: #{$btn-warning-bg-hover};
+  --pa-btn-warning-text: #{$btn-warning-text};
+
+  // Info — bg references role colour for runtime cascade
+  --pa-btn-info-bg: var(--pa-info);
+  --pa-btn-info-bg-hover: #{$btn-info-bg-hover};
+  --pa-btn-info-text: #{$btn-info-text};
+
+  // Light
+  --pa-btn-light-bg: #{$btn-light-bg};
+  --pa-btn-light-bg-hover: #{$btn-light-bg-hover};
+  --pa-btn-light-text: #{$btn-light-text};
+
+  // Dark
+  --pa-btn-dark-bg: #{$btn-dark-bg};
+  --pa-btn-dark-bg-hover: #{$btn-dark-bg-hover};
+  --pa-btn-dark-text: #{$btn-dark-text};
+
+  // =========================================================================
+  // CONTEXTUAL/SEMANTIC COLORS
+  // =========================================================================
+
+  // Success — bg references role colour for runtime cascade.
+  // -light/-subtle/-border derive from --pa-success at runtime so theme overrides cascade.
+  // -hover stays compile-time (color.adjust-derived darker shade, not opacity-based).
+  --pa-success-bg: var(--pa-success);
+  --pa-success-bg-hover: #{$success-bg-hover};
+  --pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
+  --pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
+  --pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
+  --pa-success-text: #{$success-text};
+  --pa-success-text-light: #{$success-text-light};
+
+  // Danger — bg references role colour for runtime cascade.
+  --pa-danger-bg: var(--pa-danger);
+  --pa-danger-bg-hover: #{$danger-bg-hover};
+  --pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+  --pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
+  --pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
+  --pa-danger-text: #{$danger-text};
+  --pa-danger-text-light: #{$danger-text-light};
+
+  // Warning — bg references role colour for runtime cascade.
+  --pa-warning-bg: var(--pa-warning);
+  --pa-warning-bg-hover: #{$warning-bg-hover};
+  --pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
+  --pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
+  --pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
+  --pa-warning-text: #{$warning-text};
+  --pa-warning-text-light: #{$warning-text-light};
+
+  // Info — bg references role colour for runtime cascade.
+  --pa-info-bg: var(--pa-info);
+  --pa-info-bg-hover: #{$info-bg-hover};
+  --pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
+  --pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
+  --pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
+  --pa-info-text: #{$info-text};
+  --pa-info-text-light: #{$info-text-light};
+
+  // =========================================================================
+  // CARD COLORS
+  // =========================================================================
+  --pa-card-bg: #{$card-bg};
+  --pa-card-header-bg: #{$card-header-bg};
+  --pa-card-footer-bg: #{$card-footer-bg};
+  --pa-card-tabs-bg: #{$card-tabs-bg};
+
+  // =========================================================================
+  // INPUT/FORM COLORS
+  // =========================================================================
+  --pa-input-bg: #{$input-bg};
+  --pa-input-border: #{$input-border};
+  --pa-input-text: #{$input-text};
+  --pa-input-focus-border-color: #{$input-focus-border-color};
+  --pa-select-focus-border-color: #{$select-focus-border-color};
+  --pa-textarea-focus-border-color: #{$textarea-focus-border-color};
+
+  // Checkbox
+  --pa-checkbox-border-color: #{$checkbox-border-color};
+  --pa-checkbox-border-color-hover: #{$checkbox-border-color-hover};
+  --pa-checkbox-border-color-checked: #{$checkbox-border-color-checked};
+  --pa-checkbox-bg: #{$checkbox-bg};
+  --pa-checkbox-bg-checked: #{$checkbox-bg-checked};
+  --pa-checkbox-bg-indeterminate: #{$checkbox-bg-indeterminate};
+  --pa-checkbox-checkmark-color: #{$checkbox-checkmark-color};
+  --pa-checkbox-focus-shadow: #{$checkbox-focus-shadow};
+
+  // Input group
+  --pa-input-group-prepend-bg: #{$input-group-prepend-bg};
+  --pa-input-group-prepend-text: #{$input-group-prepend-text};
+  --pa-input-group-append-bg: #{$input-group-append-bg};
+  --pa-input-group-append-text: #{$input-group-append-text};
+
+  // =========================================================================
+  // TABLE COLORS
+  // =========================================================================
+  --pa-table-bg: #{$table-bg};
+  --pa-table-header-bg: #{$table-header-bg};
+  --pa-table-stripe: #{$table-stripe};
+  --pa-table-hover-bg: #{$table-hover-bg};
+  --pa-table-hover-accent-color: #{$table-hover-accent-color};
+
+  // =========================================================================
+  // MODAL COLORS
+  // =========================================================================
+  --pa-modal-overlay-bg: #{$modal-overlay-bg};
+  --pa-modal-content-bg: #{$modal-content-bg};
+
+  // =========================================================================
+  // ALERT COLORS - Now derived via output-pa-alert-variables-light/dark mixins
+  // Themes must call the appropriate mixin after output-pa-css-variables
+  // =========================================================================
+
+  // =========================================================================
+  // BADGE COLORS
+  // =========================================================================
+  --pa-badge-success-bg: #{$badge-success-bg};
+  --pa-badge-success-text: #{$badge-success-text};
+  --pa-badge-warning-bg: #{$badge-warning-bg};
+  --pa-badge-warning-text: #{$badge-warning-text};
+  --pa-badge-info-bg: #{$badge-info-bg};
+  --pa-badge-info-text: #{$badge-info-text};
+  --pa-badge-danger-bg: #{$badge-danger-bg};
+  --pa-badge-danger-text: #{$badge-danger-text};
+
+  // Composite badge
+  --pa-composite-badge-icon-bg: #{$composite-badge-icon-bg};
+  --pa-composite-badge-label-bg: #{$composite-badge-label-bg};
+  --pa-composite-badge-label-text: #{$composite-badge-label-text};
+  --pa-composite-badge-label-hover-bg: #{$composite-badge-label-hover-bg};
+
+  // =========================================================================
+  // TOOLTIP & POPOVER COLORS
+  // =========================================================================
+  --pa-tooltip-bg: #{$tooltip-bg};
+  --pa-tooltip-text: #{$tooltip-text};
+  --pa-popover-content-bg: #{$popover-content-bg};
+  --pa-popover-text-light: #{$popover-text-light};
+  --pa-popover-text-dark: #{$popover-text-dark};
+
+  // =========================================================================
+  // LOADER COLORS
+  // =========================================================================
+  --pa-loader-overlay-bg: #{$loader-overlay-bg};
+
+  // =========================================================================
+  // PROFILE PANEL COLORS
+  // =========================================================================
+  --pa-profile-overlay-bg: #{$profile-overlay-bg};
+
+  // =========================================================================
+  // DETAIL PANEL COLORS
+  // =========================================================================
+  --pa-detail-panel-overlay-bg: #{$detail-panel-overlay-bg};
+  --pa-detail-panel-selected-bg: #{$detail-panel-selected-bg};
+  --pa-detail-panel-z-index: #{$detail-panel-z-index};
+
+  // =========================================================================
+  // COMMAND PALETTE COLORS
+  // =========================================================================
+  --pa-command-palette-backdrop-bg: #{$command-palette-backdrop-bg};
+  --pa-command-palette-item-hover-bg: #{$command-palette-item-hover-bg};
+  --pa-command-palette-item-active-bg: #{$command-palette-item-active-bg};
+  --pa-command-palette-highlight-bg: #{$command-palette-highlight-bg};
+  --pa-command-palette-highlight-text: #{$command-palette-highlight-text};
+  --pa-command-palette-key-bg: #{$subtle-bg};
+  --pa-command-palette-key-text: #{$text-color-1};
+  --pa-command-palette-key-font-size: #{$font-size-xs};
+  --pa-command-palette-key-font-weight: #{$font-weight-semibold};
+
+  // =========================================================================
+  // MULTISELECT COLORS
+  // =========================================================================
+  --pa-multiselect-dropdown-bg: #{$multiselect-dropdown-bg};
+  --pa-multiselect-dropdown-border: #{$multiselect-dropdown-border};
+  --pa-multiselect-dropdown-text: #{$multiselect-dropdown-text};
+  --pa-multiselect-hint-bg: #{$multiselect-hint-bg};
+  --pa-multiselect-hint-border: #{$multiselect-hint-border};
+  --pa-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
+  --pa-multiselect-pill-bg: #{$multiselect-pill-bg};
+  --pa-multiselect-pill-border: #{$multiselect-pill-border};
+
+  // =========================================================================
+  // CUSTOM THEME COLORS (1-9)
+  // Themes can override $color-1 through $color-9 to define branded colors
+  // =========================================================================
+  --pa-color-1: #{$color-1};
+  --pa-color-2: #{$color-2};
+  --pa-color-3: #{$color-3};
+  --pa-color-4: #{$color-4};
+  --pa-color-5: #{$color-5};
+  --pa-color-6: #{$color-6};
+  --pa-color-7: #{$color-7};
+  --pa-color-8: #{$color-8};
+  --pa-color-9: #{$color-9};
+
+  // Theme color slots - text/contrast colors
+  --pa-color-1-text: #{$color-1-text};
+  --pa-color-2-text: #{$color-2-text};
+  --pa-color-3-text: #{$color-3-text};
+  --pa-color-4-text: #{$color-4-text};
+  --pa-color-5-text: #{$color-5-text};
+  --pa-color-6-text: #{$color-6-text};
+  --pa-color-7-text: #{$color-7-text};
+  --pa-color-8-text: #{$color-8-text};
+  --pa-color-9-text: #{$color-9-text};
+
+  // =========================================================================
+  // STRUCTURAL (themeable via CSS variables)
+  // =========================================================================
+  --pa-border-radius-sm: #{$border-radius-sm};
+  --pa-border-radius: #{$border-radius};
+  --pa-border-radius-lg: #{$border-radius-lg};
+}

package/src/scss/_fonts.scss

@@ -0,0 +1,37 @@
+/* Pure Admin Visual Framework - Default Font Definitions */
+
+// Default framework fonts - themes can override these
+// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
+
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}