@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/variables/_base.scss

@@ -1,228 +1,228 @@
-// ============================================================================
-// BASE VARIABLES - Single Source of Truth for Theming
-// ============================================================================
-// These $base-* SCSS variables are the PRIMARY source for all theme colors.
-// Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
-// Web components consume these via --base-* CSS custom properties.
-//
-// To create a theme: Override these variables, everything else auto-derives.
-// ============================================================================
-
-@use 'sass:color';
-
-// =============================================================================
-// ACCENT COLORS
-// Primary brand/interactive color and its variants
-// =============================================================================
-
-$base-accent-color: #007bff !default;
-$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%) !default;
-$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%) !default;
-$base-accent-color-light: rgba($base-accent-color, 0.05) !default;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default;
-
-// =============================================================================
-// TEXT COLORS
-// Hierarchical text colors for different emphasis levels
-// =============================================================================
-
-$base-text-color-1: #2c3e50 !default;  // Primary text (strongest)
-$base-text-color-2: #6c757d !default;  // Secondary text (muted)
-$base-text-color-3: #7a8a99 !default;  // Tertiary text (lighter)
-$base-text-color-4: #a3b1bf !default;  // Quaternary text (lightest)
-$base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
-
-// =============================================================================
-// BACKGROUND COLORS
-// Semantic background colors for different purposes
-// =============================================================================
-
-$base-main-bg: #ffffff !default;          // Primary background (cards, modals, content)
-$base-page-bg: #f8f9fa !default;          // Page background, subtle sections
-$base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
-$base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
-$base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
-$base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
-$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
-
-// Interactive state backgrounds
-$base-hover-bg: $base-subtle-bg !default;         // Hover state background
-$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
-$base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
-
-// Legacy aliases (backward compatibility)
-$base-surface-1: $base-main-bg !default;
-$base-surface-2: $base-page-bg !default;
-$base-surface-3: $base-subtle-bg !default;
-$base-surface-inverse: $base-inverse-bg !default;
-$base-primary-bg: $base-main-bg !default;
-$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
-
-// =============================================================================
-// BORDER COLORS
-// Border colors and shorthand
-// =============================================================================
-
-$base-border-color: #e1e5e9 !default;
-$base-border: 1px solid $base-border-color !default;
-
-// =============================================================================
-// INPUT FIELDS
-// Input field styling and states
-// =============================================================================
-
-$base-input-bg: $base-surface-1 !default;
-$base-input-color: #495057 !default;
-$base-input-border: 1px solid #ced4da !default;
-$base-input-border-hover: 1px solid #b8bfc6 !default;
-$base-input-border-focus: 1px solid $base-accent-color !default;
-$base-input-placeholder-color: $base-text-color-4 !default;
-$base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
-
-// Input size heights (unitless multipliers for x10px base)
-$base-input-size-xs-height: 3.1 !default;  // 31px
-$base-input-size-sm-height: 3.3 !default;  // 33px
-$base-input-size-md-height: 3.5 !default;  // 35px
-$base-input-size-lg-height: 3.8 !default;  // 38px
-$base-input-size-xl-height: 4.1 !default;  // 41px
-
-// =============================================================================
-// DROPDOWN / POPOVER
-// Floating element styling
-// =============================================================================
-
-$base-dropdown-bg: $base-surface-1 !default;
-$base-dropdown-border: 1px solid $base-border-color !default;
-$base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
-
-// =============================================================================
-// TOOLTIP
-// Tooltip styling
-// =============================================================================
-
-$base-tooltip-bg: $base-surface-inverse !default;
-$base-tooltip-text-color: #ffffff !default;
-
-// =============================================================================
-// CONTEXTUAL COLORS - SUCCESS
-// Success/positive semantic colors
-// =============================================================================
-
-$base-success-color: #28a745 !default;
-$base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
-$base-success-bg-light: rgba($base-success-color, 0.1) !default;
-$base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
-$base-success-border: rgba($base-success-color, 0.2) !default;
-$base-success-text: #155724 !default;
-$base-success-text-light: #d4edda !default;
-$base-text-on-success: #ffffff !default;
-
-// =============================================================================
-// CONTEXTUAL COLORS - DANGER
-// Danger/error semantic colors
-// =============================================================================
-
-$base-danger-color: #dc3545 !default;
-$base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
-$base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
-$base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
-$base-danger-border: rgba($base-danger-color, 0.2) !default;
-$base-danger-text: #721c24 !default;
-$base-danger-text-light: #f8d7da !default;
-$base-text-on-danger: #ffffff !default;
-
-// =============================================================================
-// CONTEXTUAL COLORS - WARNING
-// Warning semantic colors
-// =============================================================================
-
-$base-warning-color: #ffc107 !default;
-$base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
-$base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
-$base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
-$base-warning-border: rgba($base-warning-color, 0.2) !default;
-$base-warning-text: #856404 !default;
-$base-warning-text-light: #fff3cd !default;
-$base-text-on-warning: #212529 !default;  // Dark text for yellow backgrounds
-
-// =============================================================================
-// CONTEXTUAL COLORS - INFO
-// Info semantic colors
-// =============================================================================
-
-$base-info-color: #17a2b8 !default;
-$base-info-color-hover: color.adjust($base-info-color, $lightness: -10%) !default;
-$base-info-bg-light: rgba($base-info-color, 0.1) !default;
-$base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
-$base-info-border: rgba($base-info-color, 0.2) !default;
-$base-info-text: #0c5460 !default;
-$base-info-text-light: #d1ecf1 !default;
-$base-text-on-info: #ffffff !default;
-
-// =============================================================================
-// INTERACTIVE STATES
-// Generic interaction feedback colors
-// =============================================================================
-
-$base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
-$base-active-overlay: rgba(0, 0, 0, 0.08) !default;
-$base-focus-ring-color: $base-accent-color !default;
-$base-focus-ring-width: 3px !default;
-
-// =============================================================================
-// TYPOGRAPHY
-// Font families, sizes, weights, and line heights
-// =============================================================================
-
-$base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
-$base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-
-// Font sizes (unitless multipliers for x10px base)
-$base-font-size-2xs: 1.0 !default;   // 10px
-$base-font-size-xs: 1.2 !default;    // 12px
-$base-font-size-sm: 1.4 !default;    // 14px
-$base-font-size-base: 1.6 !default;  // 16px
-$base-font-size-lg: 1.8 !default;    // 18px
-$base-font-size-xl: 2.0 !default;    // 20px
-$base-font-size-2xl: 2.4 !default;   // 24px
-
-// Font weights
-$base-font-weight-normal: 400 !default;
-$base-font-weight-medium: 500 !default;
-$base-font-weight-semibold: 600 !default;
-$base-font-weight-bold: 700 !default;
-
-// Line heights
-$base-line-height-tight: 1.25 !default;
-$base-line-height-normal: 1.5 !default;
-$base-line-height-relaxed: 1.75 !default;
-
-// =============================================================================
-// BORDER RADIUS
-// Border radius sizes (unitless multipliers for x10px base)
-// =============================================================================
-
-$base-border-radius-sm: 0.4 !default;  // 4px
-$base-border-radius-md: 0.6 !default;  // 6px
-$base-border-radius-lg: 0.8 !default;  // 8px
-
-// =============================================================================
-// COMPONENT-SPECIFIC DERIVED VALUES
-// Variables that components need, derived from base
-// =============================================================================
-
-// Command palette input height (must be after $base-input-size-* variables)
-$command-palette-input-height: #{$base-input-size-lg-height}rem !default;
-
-// =============================================================================
-// ALERT COLOR DERIVATION PARAMETERS
-// Used by color-mix() mixins to derive alert colors from semantic base colors
-// Themes can override these to customize alert appearance
-// =============================================================================
-
-$alert-bg-opacity-light: 15 !default;       // Light mode: subtle bg (%)
-$alert-bg-opacity-dark: 45 !default;        // Dark mode: punchy, vibrant bg (%)
-$alert-border-opacity-light: 30 !default;   // Light mode border (%)
-$alert-border-opacity-dark: 70 !default;    // Dark mode border - more visible (%)
-$alert-text-mix-light: 60% !default;        // Mix with black for dark text
-$alert-text-mix-dark: 80% !default;         // Mix with white for light text
+// ============================================================================
+// BASE VARIABLES - Single Source of Truth for Theming
+// ============================================================================
+// These $base-* SCSS variables are the PRIMARY source for all theme colors.
+// Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
+// Web components consume these via --base-* CSS custom properties.
+//
+// To create a theme: Override these variables, everything else auto-derives.
+// ============================================================================
+
+@use 'sass:color';
+
+// =============================================================================
+// ACCENT COLORS
+// Primary brand/interactive color and its variants
+// =============================================================================
+
+$base-accent-color: #007bff !default;
+$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%) !default;
+$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%) !default;
+$base-accent-color-light: rgba($base-accent-color, 0.05) !default;
+$base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default;
+
+// =============================================================================
+// TEXT COLORS
+// Hierarchical text colors for different emphasis levels
+// =============================================================================
+
+$base-text-color-1: #2c3e50 !default;  // Primary text (strongest)
+$base-text-color-2: #6c757d !default;  // Secondary text (muted)
+$base-text-color-3: #7a8a99 !default;  // Tertiary text (lighter)
+$base-text-color-4: #a3b1bf !default;  // Quaternary text (lightest)
+$base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
+
+// =============================================================================
+// BACKGROUND COLORS
+// Semantic background colors for different purposes
+// =============================================================================
+
+$base-main-bg: #ffffff !default;          // Primary background (cards, modals, content)
+$base-page-bg: #f8f9fa !default;          // Page background, subtle sections
+$base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
+$base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
+$base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
+$base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
+$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+
+// Interactive state backgrounds
+$base-hover-bg: $base-subtle-bg !default;         // Hover state background
+$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
+$base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
+
+// Legacy aliases (backward compatibility)
+$base-surface-1: $base-main-bg !default;
+$base-surface-2: $base-page-bg !default;
+$base-surface-3: $base-subtle-bg !default;
+$base-surface-inverse: $base-inverse-bg !default;
+$base-primary-bg: $base-main-bg !default;
+$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
+
+// =============================================================================
+// BORDER COLORS
+// Border colors and shorthand
+// =============================================================================
+
+$base-border-color: #e1e5e9 !default;
+$base-border: 1px solid $base-border-color !default;
+
+// =============================================================================
+// INPUT FIELDS
+// Input field styling and states
+// =============================================================================
+
+$base-input-bg: $base-surface-1 !default;
+$base-input-color: #495057 !default;
+$base-input-border: 1px solid #ced4da !default;
+$base-input-border-hover: 1px solid #b8bfc6 !default;
+$base-input-border-focus: 1px solid $base-accent-color !default;
+$base-input-placeholder-color: $base-text-color-4 !default;
+$base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
+
+// Input size heights (unitless multipliers for x10px base)
+$base-input-size-xs-height: 3.1 !default;  // 31px
+$base-input-size-sm-height: 3.3 !default;  // 33px
+$base-input-size-md-height: 3.5 !default;  // 35px
+$base-input-size-lg-height: 3.8 !default;  // 38px
+$base-input-size-xl-height: 4.1 !default;  // 41px
+
+// =============================================================================
+// DROPDOWN / POPOVER
+// Floating element styling
+// =============================================================================
+
+$base-dropdown-bg: $base-surface-1 !default;
+$base-dropdown-border: 1px solid $base-border-color !default;
+$base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
+
+// =============================================================================
+// TOOLTIP
+// Tooltip styling
+// =============================================================================
+
+$base-tooltip-bg: $base-surface-inverse !default;
+$base-tooltip-text-color: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - SUCCESS
+// Success/positive semantic colors
+// =============================================================================
+
+$base-success-color: #28a745 !default;
+$base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
+$base-success-bg-light: rgba($base-success-color, 0.1) !default;
+$base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
+$base-success-border: rgba($base-success-color, 0.2) !default;
+$base-success-text: #155724 !default;
+$base-success-text-light: #d4edda !default;
+$base-text-on-success: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - DANGER
+// Danger/error semantic colors
+// =============================================================================
+
+$base-danger-color: #dc3545 !default;
+$base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
+$base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
+$base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
+$base-danger-border: rgba($base-danger-color, 0.2) !default;
+$base-danger-text: #721c24 !default;
+$base-danger-text-light: #f8d7da !default;
+$base-text-on-danger: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - WARNING
+// Warning semantic colors
+// =============================================================================
+
+$base-warning-color: #ffc107 !default;
+$base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
+$base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
+$base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
+$base-warning-border: rgba($base-warning-color, 0.2) !default;
+$base-warning-text: #856404 !default;
+$base-warning-text-light: #fff3cd !default;
+$base-text-on-warning: #212529 !default;  // Dark text for yellow backgrounds
+
+// =============================================================================
+// CONTEXTUAL COLORS - INFO
+// Info semantic colors
+// =============================================================================
+
+$base-info-color: #17a2b8 !default;
+$base-info-color-hover: color.adjust($base-info-color, $lightness: -10%) !default;
+$base-info-bg-light: rgba($base-info-color, 0.1) !default;
+$base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
+$base-info-border: rgba($base-info-color, 0.2) !default;
+$base-info-text: #0c5460 !default;
+$base-info-text-light: #d1ecf1 !default;
+$base-text-on-info: #ffffff !default;
+
+// =============================================================================
+// INTERACTIVE STATES
+// Generic interaction feedback colors
+// =============================================================================
+
+$base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
+$base-active-overlay: rgba(0, 0, 0, 0.08) !default;
+$base-focus-ring-color: $base-accent-color !default;
+$base-focus-ring-width: 3px !default;
+
+// =============================================================================
+// TYPOGRAPHY
+// Font families, sizes, weights, and line heights
+// =============================================================================
+
+$base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
+$base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+
+// Font sizes (unitless multipliers for x10px base)
+$base-font-size-2xs: 1.0 !default;   // 10px
+$base-font-size-xs: 1.2 !default;    // 12px
+$base-font-size-sm: 1.4 !default;    // 14px
+$base-font-size-base: 1.6 !default;  // 16px
+$base-font-size-lg: 1.8 !default;    // 18px
+$base-font-size-xl: 2.0 !default;    // 20px
+$base-font-size-2xl: 2.4 !default;   // 24px
+
+// Font weights
+$base-font-weight-normal: 400 !default;
+$base-font-weight-medium: 500 !default;
+$base-font-weight-semibold: 600 !default;
+$base-font-weight-bold: 700 !default;
+
+// Line heights
+$base-line-height-tight: 1.25 !default;
+$base-line-height-normal: 1.5 !default;
+$base-line-height-relaxed: 1.75 !default;
+
+// =============================================================================
+// BORDER RADIUS
+// Border radius sizes (unitless multipliers for x10px base)
+// =============================================================================
+
+$base-border-radius-sm: 0.4 !default;  // 4px
+$base-border-radius-md: 0.6 !default;  // 6px
+$base-border-radius-lg: 0.8 !default;  // 8px
+
+// =============================================================================
+// COMPONENT-SPECIFIC DERIVED VALUES
+// Variables that components need, derived from base
+// =============================================================================
+
+// Command palette input height (must be after $base-input-size-* variables)
+$command-palette-input-height: #{$base-input-size-lg-height}rem !default;
+
+// =============================================================================
+// ALERT COLOR DERIVATION PARAMETERS
+// Used by color-mix() mixins to derive alert colors from semantic base colors
+// Themes can override these to customize alert appearance
+// =============================================================================
+
+$alert-bg-opacity-light: 15 !default;       // Light mode: subtle bg (%)
+$alert-bg-opacity-dark: 45 !default;        // Dark mode: punchy, vibrant bg (%)
+$alert-border-opacity-light: 30 !default;   // Light mode border (%)
+$alert-border-opacity-dark: 70 !default;    // Dark mode border - more visible (%)
+$alert-text-mix-light: 60% !default;        // Mix with black for dark text
+$alert-text-mix-dark: 80% !default;         // Mix with white for light text