@keenmate/pure-admin-core 1.0.0 → 1.1.0

package/src/scss/core-components/_web-components-theme.scss

@@ -1,294 +1,294 @@
-/* Pure Admin - Web Components Theme Integration
- * Maps Pure Admin SCSS variables to web component CSS custom properties
- *
- * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-@use '../variables' as *;
-/*
- */
-
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-
-  /* Colors */
-  --drp-accent-color: #{$accent-color};
-  --drp-primary-bg: #{$btn-primary-bg};
-  --drp-primary-bg-hover: #{$btn-primary-bg-hover};
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
-  --drp-border-color: #{$border-color};
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #{$table-hover-bg};
-
-  /* Spacing */
-  --drp-spacing-xs: #{$spacing-xs};
-  --drp-spacing-sm: #{$spacing-sm};
-  --drp-spacing-md: #{$spacing-md};
-  --drp-spacing-base: #{$spacing-base};
-  --drp-spacing-lg: #{$spacing-lg};
-  --drp-spacing-xl: #{$spacing-xl};
-
-  /* Typography */
-  --drp-font-size-xs: #{$font-size-xs};
-  --drp-font-size-sm: #{$font-size-sm};
-  --drp-font-size-base: #{$font-size-base};
-  --drp-font-size-lg: #{$font-size-lg};
-  --drp-font-weight-normal: #{$font-weight-normal};
-  --drp-font-weight-medium: #{$font-weight-medium};
-  --drp-font-weight-semibold: #{$font-weight-semibold};
-
-  /* Animations */
-  --drp-transition-fast: #{$transition-fast};
-  --drp-transition-normal: #{$transition-normal};
-  --drp-easing-snappy: #{$easing-snappy};
-  --drp-easing-smooth: #{$easing-smooth};
-
-  /* Shadows */
-  --drp-shadow-sm: #{$shadow-sm};
-  --drp-shadow-md: #{$shadow-md};
-  --drp-shadow-lg: #{$shadow-lg};
-  --drp-shadow-xl: #{$shadow-xl};
-
-  /* Border radius */
-  --drp-border-radius: #{$border-radius};
-  --drp-border-radius-sm: #{$border-radius-sm};
-  --drp-border-radius-lg: #{$border-radius-lg};
-
-  /* Border width */
-  --drp-border-width-base: #{$border-width-base};
-  --drp-border-width-medium: #{$border-width-medium};
-
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-primary);
-  --drp-input-border-color: #{$input-border};
-  --drp-input-border-color-hover: #{$accent-color};
-  --drp-input-border-color-focus: #{$accent-color};
-  --drp-input-placeholder-color: var(--pa-text-secondary);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-secondary);
-
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: #{$accent-light};
-  --drp-input-focus-shadow-size: #{$focus-ring-width};
-
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-secondary);
-  --drp-input-icon-opacity: 1;
-
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: #{$font-size-xs};
-  --drp-input-size-xs-padding-v: #{$input-padding-v};
-  --drp-input-size-xs-padding-h: #{$input-padding-h};
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: #{$font-size-xs};
-  --drp-input-size-sm-padding-v: #{$input-padding-v};
-  --drp-input-size-sm-padding-h: #{$input-padding-h};
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: #{$font-size-sm};
-  --drp-input-size-md-padding-v: #{$input-padding-v};
-  --drp-input-size-md-padding-h: #{$input-padding-h};
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: #{$font-size-base};
-  --drp-input-size-lg-padding-v: #{$input-padding-v};
-  --drp-input-size-lg-padding-h: #{$input-padding-h};
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: #{$font-size-lg};
-  --drp-input-size-xl-padding-v: #{$input-padding-v};
-  --drp-input-size-xl-padding-h: #{$input-padding-h};
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-
-  /* ===== CALENDAR CONTAINER ===== */
-
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #{$border-color};
-  --drp-calendar-shadow: #{$shadow-xl};
-  --drp-calendar-border-radius: #{$border-radius};
-  --drp-calendar-padding: #{$spacing-base};
-  --drp-calendar-z-index: #{$z-index-dropdown};
-
-  /* ===== HEADER ===== */
-
-  --drp-header-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-header-font-size: #{$font-size-base};
-  --drp-header-font-weight: #{$font-weight-semibold};
-  --drp-header-text-color: var(--pa-text-primary);
-  --drp-header-bg-hover: #{$accent-hover};
-  --drp-header-bg-active: #{$accent-light};
-
-  /* ===== NAVIGATION ===== */
-
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-primary);
-  --drp-nav-border-color: #{$border-color};
-  --drp-nav-bg-hover: #{$accent-hover};
-  --drp-nav-bg-active: #{$accent-light};
-  --drp-nav-border-hover: #{$accent-color};
-
-  /* ===== WEEKDAY HEADER ===== */
-
-  --drp-weekday-font-size: #{$font-size-xs};
-  --drp-weekday-font-weight: #{$font-weight-semibold};
-  --drp-weekday-color: var(--pa-text-secondary);
-  --drp-weekday-padding: #{$spacing-xs};
-
-  /* ===== CALENDAR GRID ===== */
-
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: #{$font-size-sm};
-  --drp-day-border-radius: #{$border-radius-sm};
-
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-primary);
-  --drp-day-bg-hover: #{$accent-hover};
-  --drp-day-border-hover: transparent;
-
-  /* Today indicator */
-  --drp-day-today-border: #{$accent-color};
-
-  /* Selected state */
-  --drp-day-selected-bg: #{$accent-color};
-  --drp-day-selected-color: #ffffff;
-
-  /* Range state */
-  --drp-day-range-bg: #{$accent-light};
-  --drp-day-range-text: var(--pa-text-primary);
-
-  /* Focused state */
-  --drp-day-focused-outline: #{$accent-color};
-
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-secondary);
-  --drp-day-disabled-opacity: #{$opacity-disabled};
-
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-secondary);
-  --drp-day-other-month-opacity: #{$opacity-muted};
-
-  /* ===== BADGES ===== */
-
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #{$btn-primary-bg};
-  --drp-badge-success: #{$success-bg};
-  --drp-badge-warning: #{$warning-bg};
-  --drp-badge-danger: #{$danger-bg};
-  --drp-badge-info: #{$info-bg};
-
-  /* Number badges */
-  --drp-badge-number-bg: #{$danger-bg};
-  --drp-badge-number-color: #ffffff;
-
-  /* Count badges */
-  --drp-badge-count-bg: #{$accent-color};
-  --drp-badge-count-color: #ffffff;
-
-  /* Text badges */
-  --drp-badge-text-bg: #{$accent-light};
-  --drp-badge-text-color: var(--pa-text-primary);
-
-  /* ===== SUMMARY BAR ===== */
-
-  --drp-summary-bg: #{$card-header-bg};
-  --drp-summary-border-color: #{$border-color};
-  --drp-summary-text-color: var(--pa-text-primary);
-  --drp-summary-count-color: #{$accent-color};
-  --drp-summary-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-summary-font-size: #{$font-size-sm};
-  --drp-summary-font-weight: #{$font-weight-medium};
-
-  /* ===== BUTTONS ===== */
-
-  /* Today button */
-  --drp-button-today-bg: #{$btn-secondary-bg};
-  --drp-button-today-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-today-color: #{$btn-secondary-text};
-  --drp-button-today-border: #{$border-color};
-
-  /* Clear button */
-  --drp-button-clear-bg: #{$btn-secondary-bg};
-  --drp-button-clear-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-clear-color: #{$btn-secondary-text};
-  --drp-button-clear-border: #{$border-color};
-
-  /* Cancel button */
-  --drp-button-cancel-bg: #{$btn-secondary-bg};
-  --drp-button-cancel-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-cancel-color: #{$btn-secondary-text};
-  --drp-button-cancel-border: #{$border-color};
-
-  /* Apply button */
-  --drp-button-apply-bg: #{$btn-primary-bg};
-  --drp-button-apply-bg-hover: #{$btn-primary-bg-hover};
-  --drp-button-apply-color: #{$btn-primary-text};
-  --drp-button-apply-border: #{$btn-primary-bg};
-
-  /* Button sizing */
-  --drp-button-padding: #{$btn-padding-sm-v} #{$btn-padding-sm-h};
-  --drp-button-font-size: #{$font-size-sm};
-  --drp-button-border-radius: #{$border-radius};
-  --drp-button-gap: #{$spacing-sm};
-
-  /* ===== UNIFIED NAVIGATION ===== */
-
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-primary);
-  --drp-unified-range-bg-hover: #{$accent-hover};
-  --drp-unified-range-bg-active: #{$accent-light};
-
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-primary);
-
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
-
-  /* ===== ROLLING SELECTOR ===== */
-
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #{$border-color};
-  --drp-rolling-shadow: #{$shadow-md};
-  --drp-rolling-item-hover-bg: #{$accent-hover};
-  --drp-rolling-item-selected-bg: #{$accent-color};
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: #{$font-size-sm};
-  --drp-rolling-item-text-color: var(--pa-text-primary);
-  --drp-rolling-item-disabled-color: var(--pa-text-secondary);
-
-  /* ===== LOADING OVERLAY ===== */
-
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #{$accent-color};
-  --drp-loading-spinner-size: #{$spinner-size};
-
-  /* ===== MULTIPLE MONTHS ===== */
-
-  --drp-months-gap: #{$spacing-lg};
-}
+/* Pure Admin - Web Components Theme Integration
+ * Maps Pure Admin SCSS variables to web component CSS custom properties
+ *
+ * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
+ * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
+ */
+@use '../variables' as *;
+/*
+ */
+
+/* ========================================
+   Date Range Picker Variables (--drp-*)
+   v1.3.0+ Semantic Variable Architecture
+
+   NOTE: Variables set directly on web-daterangepicker
+   element to pierce shadow DOM (custom properties
+   cascade into shadow DOM when set on host element)
+   ======================================== */
+
+web-daterangepicker {
+  /* ===== BASE PRIMITIVES ===== */
+
+  /* Colors */
+  --drp-accent-color: #{$accent-color};
+  --drp-primary-bg: #{$btn-primary-bg};
+  --drp-primary-bg-hover: #{$btn-primary-bg-hover};
+  --drp-text-primary: var(--pa-text-color-1);
+  --drp-text-secondary: var(--pa-text-color-2);
+  --drp-border-color: #{$border-color};
+  --drp-card-bg: var(--pa-card-bg);
+  --drp-hover-bg: #{$table-hover-bg};
+
+  /* Spacing */
+  --drp-spacing-xs: #{$spacing-xs};
+  --drp-spacing-sm: #{$spacing-sm};
+  --drp-spacing-md: #{$spacing-md};
+  --drp-spacing-base: #{$spacing-base};
+  --drp-spacing-lg: #{$spacing-lg};
+  --drp-spacing-xl: #{$spacing-xl};
+
+  /* Typography */
+  --drp-font-size-xs: #{$font-size-xs};
+  --drp-font-size-sm: #{$font-size-sm};
+  --drp-font-size-base: #{$font-size-base};
+  --drp-font-size-lg: #{$font-size-lg};
+  --drp-font-weight-normal: #{$font-weight-normal};
+  --drp-font-weight-medium: #{$font-weight-medium};
+  --drp-font-weight-semibold: #{$font-weight-semibold};
+
+  /* Animations */
+  --drp-transition-fast: #{$transition-fast};
+  --drp-transition-normal: #{$transition-normal};
+  --drp-easing-snappy: #{$easing-snappy};
+  --drp-easing-smooth: #{$easing-smooth};
+
+  /* Shadows */
+  --drp-shadow-sm: #{$shadow-sm};
+  --drp-shadow-md: #{$shadow-md};
+  --drp-shadow-lg: #{$shadow-lg};
+  --drp-shadow-xl: #{$shadow-xl};
+
+  /* Border radius */
+  --drp-border-radius: #{$border-radius};
+  --drp-border-radius-sm: #{$border-radius-sm};
+  --drp-border-radius-lg: #{$border-radius-lg};
+
+  /* Border width */
+  --drp-border-width-base: #{$border-width-base};
+  --drp-border-width-medium: #{$border-width-medium};
+
+  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
+
+  /* Input colors */
+  --drp-input-background: var(--pa-input-bg);
+  --drp-input-color: var(--pa-text-color-1);
+  --drp-input-border-color: #{$input-border};
+  --drp-input-border-color-hover: #{$accent-color};
+  --drp-input-border-color-focus: #{$accent-color};
+  --drp-input-placeholder-color: var(--pa-text-color-2);
+  --drp-input-disabled-background: var(--pa-input-bg);
+  --drp-input-disabled-color: var(--pa-text-color-2);
+
+  /* Input focus effects */
+  --drp-input-focus-shadow-color: #{$accent-light};
+  --drp-input-focus-shadow-size: #{$focus-ring-width};
+
+  /* Input icon */
+  --drp-input-icon-color: var(--pa-text-color-2);
+  --drp-input-icon-opacity: 1;
+
+  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
+     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
+
+  /* Extra Small (31px) */
+  --drp-input-size-xs-font: #{$font-size-xs};
+  --drp-input-size-xs-padding-v: #{$input-padding-v};
+  --drp-input-size-xs-padding-h: #{$input-padding-h};
+  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
+  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
+
+  /* Small (33px - same height as xs, slightly larger icon) */
+  --drp-input-size-sm-font: #{$font-size-xs};
+  --drp-input-size-sm-padding-v: #{$input-padding-v};
+  --drp-input-size-sm-padding-h: #{$input-padding-h};
+  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
+  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
+
+  /* Medium/Default (maps to pa-input: 35px) */
+  --drp-input-size-md-font: #{$font-size-sm};
+  --drp-input-size-md-padding-v: #{$input-padding-v};
+  --drp-input-size-md-padding-h: #{$input-padding-h};
+  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
+  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
+
+  /* Large (maps to pa-input--lg: 38px) */
+  --drp-input-size-lg-font: #{$font-size-base};
+  --drp-input-size-lg-padding-v: #{$input-padding-v};
+  --drp-input-size-lg-padding-h: #{$input-padding-h};
+  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
+  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
+
+  /* Extra Large (maps to pa-input--xl: 41px) */
+  --drp-input-size-xl-font: #{$font-size-lg};
+  --drp-input-size-xl-padding-v: #{$input-padding-v};
+  --drp-input-size-xl-padding-h: #{$input-padding-h};
+  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
+  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
+
+  /* ===== CALENDAR CONTAINER ===== */
+
+  --drp-calendar-bg: var(--pa-card-bg);
+  --drp-calendar-border: #{$border-color};
+  --drp-calendar-shadow: #{$shadow-xl};
+  --drp-calendar-border-radius: #{$border-radius};
+  --drp-calendar-padding: #{$spacing-base};
+  --drp-calendar-z-index: #{$z-index-dropdown};
+
+  /* ===== HEADER ===== */
+
+  --drp-header-padding: #{$spacing-sm} #{$spacing-md};
+  --drp-header-font-size: #{$font-size-base};
+  --drp-header-font-weight: #{$font-weight-semibold};
+  --drp-header-text-color: var(--pa-text-color-1);
+  --drp-header-bg-hover: #{$accent-hover};
+  --drp-header-bg-active: #{$accent-light};
+
+  /* ===== NAVIGATION ===== */
+
+  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
+  --drp-nav-text-color: var(--pa-text-color-1);
+  --drp-nav-border-color: #{$border-color};
+  --drp-nav-bg-hover: #{$accent-hover};
+  --drp-nav-bg-active: #{$accent-light};
+  --drp-nav-border-hover: #{$accent-color};
+
+  /* ===== WEEKDAY HEADER ===== */
+
+  --drp-weekday-font-size: #{$font-size-xs};
+  --drp-weekday-font-weight: #{$font-weight-semibold};
+  --drp-weekday-color: var(--pa-text-color-2);
+  --drp-weekday-padding: #{$spacing-xs};
+
+  /* ===== CALENDAR GRID ===== */
+
+  --drp-day-size: 3.6rem; /* 36px (10px base) */
+  --drp-day-font-size: #{$font-size-sm};
+  --drp-day-border-radius: #{$border-radius-sm};
+
+  /* Day states */
+  --drp-day-text-color: var(--pa-text-color-1);
+  --drp-day-bg-hover: #{$accent-hover};
+  --drp-day-border-hover: transparent;
+
+  /* Today indicator */
+  --drp-day-today-border: #{$accent-color};
+
+  /* Selected state */
+  --drp-day-selected-bg: #{$accent-color};
+  --drp-day-selected-color: #ffffff;
+
+  /* Range state */
+  --drp-day-range-bg: #{$accent-light};
+  --drp-day-range-text: var(--pa-text-color-1);
+
+  /* Focused state */
+  --drp-day-focused-outline: #{$accent-color};
+
+  /* Disabled state */
+  --drp-day-disabled-color: var(--pa-text-color-2);
+  --drp-day-disabled-opacity: #{$opacity-disabled};
+
+  /* Other month */
+  --drp-day-other-month-color: var(--pa-text-color-2);
+  --drp-day-other-month-opacity: #{$opacity-muted};
+
+  /* ===== BADGES ===== */
+
+  /* Dot badges (original style) */
+  --drp-badge-size: 0.6rem; /* 6px (10px base) */
+  --drp-badge-primary: #{$btn-primary-bg};
+  --drp-badge-success: #{$success-bg};
+  --drp-badge-warning: #{$warning-bg};
+  --drp-badge-danger: #{$danger-bg};
+  --drp-badge-info: #{$info-bg};
+
+  /* Number badges */
+  --drp-badge-number-bg: #{$danger-bg};
+  --drp-badge-number-color: #ffffff;
+
+  /* Count badges */
+  --drp-badge-count-bg: #{$accent-color};
+  --drp-badge-count-color: #ffffff;
+
+  /* Text badges */
+  --drp-badge-text-bg: #{$accent-light};
+  --drp-badge-text-color: var(--pa-text-color-1);
+
+  /* ===== SUMMARY BAR ===== */
+
+  --drp-summary-bg: #{$card-header-bg};
+  --drp-summary-border-color: #{$border-color};
+  --drp-summary-text-color: var(--pa-text-color-1);
+  --drp-summary-count-color: #{$accent-color};
+  --drp-summary-padding: #{$spacing-sm} #{$spacing-md};
+  --drp-summary-font-size: #{$font-size-sm};
+  --drp-summary-font-weight: #{$font-weight-medium};
+
+  /* ===== BUTTONS ===== */
+
+  /* Today button */
+  --drp-button-today-bg: #{$btn-secondary-bg};
+  --drp-button-today-bg-hover: #{$btn-secondary-bg-hover};
+  --drp-button-today-color: #{$btn-secondary-text};
+  --drp-button-today-border: #{$border-color};
+
+  /* Clear button */
+  --drp-button-clear-bg: #{$btn-secondary-bg};
+  --drp-button-clear-bg-hover: #{$btn-secondary-bg-hover};
+  --drp-button-clear-color: #{$btn-secondary-text};
+  --drp-button-clear-border: #{$border-color};
+
+  /* Cancel button */
+  --drp-button-cancel-bg: #{$btn-secondary-bg};
+  --drp-button-cancel-bg-hover: #{$btn-secondary-bg-hover};
+  --drp-button-cancel-color: #{$btn-secondary-text};
+  --drp-button-cancel-border: #{$border-color};
+
+  /* Apply button */
+  --drp-button-apply-bg: #{$btn-primary-bg};
+  --drp-button-apply-bg-hover: #{$btn-primary-bg-hover};
+  --drp-button-apply-color: #{$btn-primary-text};
+  --drp-button-apply-border: #{$btn-primary-bg};
+
+  /* Button sizing */
+  --drp-button-padding: #{$btn-padding-sm-v} #{$btn-padding-sm-h};
+  --drp-button-font-size: #{$font-size-sm};
+  --drp-button-border-radius: #{$border-radius};
+  --drp-button-gap: #{$spacing-sm};
+
+  /* ===== UNIFIED NAVIGATION ===== */
+
+  /* Range selectors in unified nav */
+  --drp-unified-range-text-color: var(--pa-text-color-1);
+  --drp-unified-range-bg-hover: #{$accent-hover};
+  --drp-unified-range-bg-active: #{$accent-light};
+
+  /* Month/Year display */
+  --drp-unified-month-color: var(--pa-text-color-1);
+
+  /* Rolling selector disabled state */
+  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
+
+  /* ===== ROLLING SELECTOR ===== */
+
+  --drp-rolling-bg: var(--pa-card-bg);
+  --drp-rolling-border: #{$border-color};
+  --drp-rolling-shadow: #{$shadow-md};
+  --drp-rolling-item-hover-bg: #{$accent-hover};
+  --drp-rolling-item-selected-bg: #{$accent-color};
+  --drp-rolling-item-selected-text: #ffffff;
+  --drp-rolling-font-size: #{$font-size-sm};
+  --drp-rolling-item-text-color: var(--pa-text-color-1);
+  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
+
+  /* ===== LOADING OVERLAY ===== */
+
+  --drp-loading-bg: rgba(255, 255, 255, 0.8);
+  --drp-loading-spinner-color: #{$accent-color};
+  --drp-loading-spinner-size: #{$spinner-size};
+
+  /* ===== MULTIPLE MONTHS ===== */
+
+  --drp-months-gap: #{$spacing-lg};
+}

package/src/scss/core-components/badges/_composite-badge-variants.scss

@@ -37,8 +37,8 @@
       color: $btn-secondary-text;
     }
     .pa-composite-badge__label {
-      background-color: $bg-secondary;
-      color: var(--pa-text-secondary);
+      background-color: $page-bg;
+      color: var(--pa-text-color-2);
       &:hover {
         background-color: $table-hover-bg;
       }
@@ -182,7 +182,7 @@
     }
     .pa-composite-badge__label {
       background-color: $table-hover-bg;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       &:hover {
         background-color: $border-color;
       }

package/src/scss/core-components/badges/_labels.scss

@@ -11,7 +11,7 @@
   gap: $spacing-xs;
   padding: 0.4rem 0.8rem;         // Match badge default
   background-color: var(--pa-accent-light);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: $font-size-xs;       // 1.2rem (12px) - match badge default
   font-weight: $font-weight-medium;
   line-height: $line-height-tight;

package/src/scss/core-components/forms/_checkboxes-radios.scss

@@ -24,7 +24,7 @@
   gap: $spacing-sm;
   cursor: pointer;
   font-size: $font-size-sm;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   user-select: none;
 
   // Hide native checkbox (visually hidden but accessible)
@@ -172,7 +172,7 @@
   gap: $form-scale;
   cursor: pointer;
   font-size: $font-size-sm;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 
   input {
     margin: 0;

package/src/scss/core-components/forms/_form-inputs.scss

@@ -12,7 +12,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
 
   &:focus {
@@ -30,7 +30,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
 
   &:focus {
@@ -47,7 +47,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
   resize: vertical;
   min-height: $textarea-min-height;
@@ -59,7 +59,7 @@
   }
 
   &::placeholder {
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
   }
 }