@keenmate/web-daterangepicker 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Lightweight date picker web component with excellent keyboard navigation and range selection",
   "type": "module",
   "main": "./dist/web-daterangepicker.umd.js",

package/src/scss/_badges.scss

@@ -49,7 +49,7 @@
 .drp-date-picker__badge-cell.badge-number {
   background-color: var(--drp-badge-number-bg);
   color: var(--drp-badge-number-color);
-  font-size: 0.7rem;
+  font-size: calc(1.12 * var(--drp-rem));   // 11.2px (was 0.7rem)
   font-weight: 600;
 }
 
@@ -57,7 +57,7 @@
 .drp-date-picker__badge-cell.badge-count {
   background-color: var(--drp-badge-count-bg);
   color: var(--drp-badge-count-color);
-  font-size: 0.7rem;
+  font-size: calc(1.12 * var(--drp-rem));   // 11.2px (was 0.7rem)
   font-weight: 700;
 }
 
@@ -68,7 +68,7 @@
 .drp-date-picker__badge-cell.badge-text {
   background-color: var(--drp-badge-text-bg);
   color: var(--drp-badge-text-color);
-  font-size: 0.65rem;
+  font-size: calc(1.04 * var(--drp-rem));   // 10.4px (was 0.65rem)
   font-weight: 700;
   text-transform: uppercase;
 }

package/src/scss/_base.scss

@@ -8,11 +8,23 @@
 // ==============================================================================
 // CSS CUSTOM PROPERTIES (CSS VARIABLES)
 // ==============================================================================
-// Define CSS custom properties with SCSS fallbacks for runtime customization
-// Using :host for Shadow DOM (web component) and :root for Light DOM (direct class usage)
+// Define CSS custom properties with SCSS fallbacks for runtime customization.
+// Using :host for Shadow DOM (web component) and :root for Light DOM (direct class usage).
+//
+// CSS custom properties inherit through the Shadow DOM boundary, so external
+// :root definitions will cascade into the component. The :host/:root selector
+// here sets defaults that can be overridden.
 
 :host,
 :root {
+  // ===========================================================================
+  // BASE REM UNIT
+  // ===========================================================================
+  // Internal 10px-based unit for clean math. Override to scale the component.
+  // Default 10px produces same visual output as standard 16px rem.
+  // Set to 1rem in Pure Admin (10px base) to scale with document.
+  --drp-rem: 10px;
+
   // ===========================================================================
   // SIZING SCALE SYSTEM (THREE INDEPENDENT MULTIPLIERS)
   // ===========================================================================
@@ -62,7 +74,7 @@
   // COLORS (not affected by density)
   // ===========================================================================
 
-  --drp-card-bg: #{$drp-calendar-bg};
+  --drp-dropdown-background: #{$drp-calendar-bg};
   --drp-border-color: #{$drp-border-color};
   --drp-primary-bg: #{$drp-color-neutral-lighter};
   --drp-primary-bg-hover: #{$drp-color-neutral-light};
@@ -70,10 +82,15 @@
   --drp-accent-color-hover: #{$drp-color-accent-dark};
   --drp-text-primary: #{$drp-color-neutral-darkest};
   --drp-text-secondary: #{$drp-color-neutral-dark};
-  --drp-accent-text-color: #{$drp-color-white};
+  --drp-text-on-accent: #{$drp-color-white};
   --drp-button-text-color: #{$drp-color-white};
-  --drp-tooltip-bg: #{$drp-tooltip-bg};
-  --drp-tooltip-color: #{$drp-tooltip-color};
+  --drp-tooltip-background: #{$drp-tooltip-bg};
+  --drp-tooltip-text-color: #{$drp-tooltip-color};
+
+  // Loading overlay (for async operations)
+  --drp-loading-overlay-background: rgba(255, 255, 255, 0.8);
+  --drp-loading-spinner-color: var(--drp-border-color);
+  --drp-loading-spinner-accent: var(--drp-accent-color);
 
   // ===========================================================================
   // OTHER PROPERTIES (not affected by density)
@@ -94,13 +111,13 @@
   // Semantic variables for input customization (loosely coupled)
 
   // Input colors
-  --drp-input-background: var(--drp-card-bg);
+  --drp-input-background: var(--drp-dropdown-background);
   --drp-input-color: var(--drp-text-primary);
   --drp-input-border-color: var(--drp-border-color);
   --drp-input-border-color-hover: var(--drp-accent-color);
   --drp-input-border-color-focus: var(--drp-accent-color);
   --drp-input-placeholder-color: var(--drp-text-secondary);
-  --drp-input-disabled-background: var(--drp-primary-bg);
+  --drp-input-background-disabled: var(--drp-primary-bg);
 
   // Input focus state
   --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
@@ -117,31 +134,31 @@
   --drp-input-size-xs-font: #{$font-size-xs};
   --drp-input-size-xs-padding-v: #{$padding-xs};
   --drp-input-size-xs-padding-h: #{$padding-xs};
-  --drp-input-size-xs-height: 1.5rem;
+  --drp-input-size-xs-height: calc(3.1 * var(--drp-rem));   // 31px
   --drp-input-size-xs-icon-size: 0.75em;
 
   --drp-input-size-sm-font: #{$drp-font-size-sm};
   --drp-input-size-sm-padding-v: #{$drp-spacing-xs};
   --drp-input-size-sm-padding-h: #{$drp-spacing-sm};
-  --drp-input-size-sm-height: 2rem;
+  --drp-input-size-sm-height: calc(3.3 * var(--drp-rem));   // 33px
   --drp-input-size-sm-icon-size: 0.875em;
 
   --drp-input-size-md-font: #{$drp-font-size-base};
   --drp-input-size-md-padding-v: #{$drp-spacing-sm};
   --drp-input-size-md-padding-h: #{$padding-base};
-  --drp-input-size-md-height: 2.5rem;
+  --drp-input-size-md-height: calc(3.5 * var(--drp-rem));   // 35px
   --drp-input-size-md-icon-size: 1em;
 
   --drp-input-size-lg-font: #{$drp-font-size-lg};
   --drp-input-size-lg-padding-v: #{$drp-spacing-md};
   --drp-input-size-lg-padding-h: #{$drp-spacing-md};
-  --drp-input-size-lg-height: 3rem;
+  --drp-input-size-lg-height: calc(3.8 * var(--drp-rem));   // 38px
   --drp-input-size-lg-icon-size: 1.125em;
 
   --drp-input-size-xl-font: #{$font-size-xl};
   --drp-input-size-xl-padding-v: #{$drp-spacing-md};
   --drp-input-size-xl-padding-h: #{$drp-spacing-lg};
-  --drp-input-size-xl-height: 3.5rem;
+  --drp-input-size-xl-height: calc(4.1 * var(--drp-rem));   // 41px
   --drp-input-size-xl-icon-size: 1.25em;
 
   // ===========================================================================
@@ -164,7 +181,7 @@
   --drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);
   --drp-rolling-item-bg-hover: var(--drp-primary-bg);
   --drp-rolling-item-bg-selected: var(--drp-accent-color);
-  --drp-rolling-item-color-selected: var(--drp-accent-text-color);
+  --drp-rolling-item-color-selected: var(--drp-text-on-accent);
   --drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
 
   // ===========================================================================
@@ -178,13 +195,13 @@
   --drp-day-border-hover: var(--drp-accent-color);
   --drp-day-today-border: var(--drp-accent-color);
   --drp-day-selected-bg: var(--drp-accent-color);
-  --drp-day-selected-color: var(--drp-accent-text-color);
+  --drp-day-selected-color: var(--drp-text-on-accent);
   --drp-day-selected-bg-hover: var(--drp-accent-color-hover);
   --drp-day-focused-outline: var(--drp-accent-color);
   --drp-day-disabled-color: var(--drp-text-secondary);
   --drp-day-other-month-color: var(--drp-text-secondary);
   --drp-day-range-bg: var(--drp-accent-color);
-  --drp-day-range-color: var(--drp-accent-text-color);
+  --drp-day-range-color: var(--drp-text-on-accent);
 
   // ===========================================================================
   // SUMMARY & ACTIONS SEMANTIC VARIABLES
@@ -210,7 +227,7 @@
   // ===========================================================================
 
   --drp-badge-number-bg: var(--drp-accent-color);
-  --drp-badge-number-color: var(--drp-accent-text-color);
+  --drp-badge-number-color: var(--drp-text-on-accent);
   --drp-badge-count-bg: #{$drp-color-error};
   --drp-badge-count-color: #{$drp-color-white};
   --drp-badge-text-bg: var(--drp-text-secondary);
@@ -266,7 +283,7 @@
   &:disabled {
     opacity: #{$drp-opacity-disabled};
     cursor: not-allowed;
-    background-color: var(--drp-input-disabled-background);
+    background-color: var(--drp-input-background-disabled);
   }
 
   // Size variants
@@ -347,7 +364,7 @@
 .drp-date-picker {
   position: absolute;
   z-index: $drp-z-index-dropdown;
-  background: var(--drp-card-bg);
+  background: var(--drp-dropdown-background);
   border: var(--drp-border-width-base) solid var(--drp-border-color);
   border-radius: var(--drp-border-radius);
   box-shadow: var(--drp-shadow-xl);

package/src/scss/_header-navigation.scss

@@ -262,7 +262,7 @@
 
   display: none;
   z-index: 100; // Above everything
-  background: var(--drp-card-bg); // White background to cover calendar below
+  background: var(--drp-dropdown-background); // White background to cover calendar below
   gap: var(--drp-spacing-xs); // Match normal rolling selector gap
 
   &--visible {

package/src/scss/_loading.scss

@@ -12,19 +12,19 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: var(--drp-loading-overlay-background);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: $drp-z-index-dropdown;
-    border-radius: $drp-border-radius;
+    border-radius: var(--drp-border-radius);
 }
 
 .drp-date-picker__loading-spinner {
     width: 40px;
     height: 40px;
-    border: 4px solid $drp-color-neutral-light;
-    border-top-color: $drp-color-accent;
+    border: 4px solid var(--drp-loading-spinner-color);
+    border-top-color: var(--drp-loading-spinner-accent);
     border-radius: 50%;
     animation: drp-spin 0.8s linear infinite;
 }

package/src/scss/_tooltips.scss

@@ -12,8 +12,8 @@
 .drp-date-picker__tooltip {
   position: absolute;
   z-index: $drp-z-index-tooltip;
-  background-color: var(--drp-tooltip-bg);
-  color: var(--drp-tooltip-color);
+  background-color: var(--drp-tooltip-background);
+  color: var(--drp-tooltip-text-color);
   padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
   border-radius: var(--drp-border-radius);
   font-size: var(--drp-font-size-xs);
@@ -31,7 +31,7 @@
   // Tooltip arrow
   &-arrow {
     position: absolute;
-    background-color: var(--drp-tooltip-bg);
+    background-color: var(--drp-tooltip-background);
     width: $drp-tooltip-arrow-size;
     height: $drp-tooltip-arrow-size;
     transform: rotate(45deg);

package/src/scss/_variables.scss

@@ -10,24 +10,26 @@
 // ==============================================================================
 // These are foundational values that can be used across the component
 
-$padding-xs: 0.25rem !default;
-$padding-sm: 0.5rem !default;
-$padding-base: 0.75rem !default;
-$padding-md: 1rem !default;
-$padding-lg: 1.5rem !default;
-
-$border-radius-sm: 0.25rem !default;
-$border-radius-base: 0.375rem !default;
-$border-radius-md: 0.5rem !default;
+// All values use calc() with --drp-rem (10px base) for clean math
+// Formula: old_rem_value × 16 ÷ 10 = multiplier
+$padding-xs: calc(0.4 * var(--drp-rem)) !default;      // 4px (was 0.25rem)
+$padding-sm: calc(0.8 * var(--drp-rem)) !default;      // 8px (was 0.5rem)
+$padding-base: calc(1.2 * var(--drp-rem)) !default;    // 12px (was 0.75rem)
+$padding-md: calc(1.6 * var(--drp-rem)) !default;      // 16px (was 1rem)
+$padding-lg: calc(2.4 * var(--drp-rem)) !default;      // 24px (was 1.5rem)
+
+$border-radius-sm: calc(0.4 * var(--drp-rem)) !default;   // 4px (was 0.25rem)
+$border-radius-base: calc(0.6 * var(--drp-rem)) !default; // 6px (was 0.375rem)
+$border-radius-md: calc(0.8 * var(--drp-rem)) !default;   // 8px (was 0.5rem)
 $border-radius-full: 9999px !default;
 
-$font-size-2xs: 0.625rem !default;
-$font-size-xs: 0.75rem !default;
-$font-size-sm: 0.875rem !default;
-$font-size-base: 1rem !default;
-$font-size-lg: 1.125rem !default;
-$font-size-xl: 1.25rem !default;
-$font-size-2xl: 1.5rem !default;
+$font-size-2xs: calc(1 * var(--drp-rem)) !default;     // 10px (was 0.625rem)
+$font-size-xs: calc(1.2 * var(--drp-rem)) !default;    // 12px (was 0.75rem)
+$font-size-sm: calc(1.4 * var(--drp-rem)) !default;    // 14px (was 0.875rem)
+$font-size-base: calc(1.6 * var(--drp-rem)) !default;  // 16px (was 1rem)
+$font-size-lg: calc(1.8 * var(--drp-rem)) !default;    // 18px (was 1.125rem)
+$font-size-xl: calc(2 * var(--drp-rem)) !default;      // 20px (was 1.25rem)
+$font-size-2xl: calc(2.4 * var(--drp-rem)) !default;   // 24px (was 1.5rem)
 
 $border-width-base: 1px !default;
 
@@ -35,11 +37,11 @@ $border-width-base: 1px !default;
 // SPACING SCALE
 // ==============================================================================
 
-$drp-spacing-xs: 0.25rem !default;
-$drp-spacing-sm: 0.5rem !default;
-$drp-spacing-md: 1rem !default;
-$drp-spacing-lg: 1.5rem !default;
-$drp-spacing-xl: 2rem !default;
+$drp-spacing-xs: calc(0.4 * var(--drp-rem)) !default;   // 4px (was 0.25rem)
+$drp-spacing-sm: calc(0.8 * var(--drp-rem)) !default;   // 8px (was 0.5rem)
+$drp-spacing-md: calc(1.6 * var(--drp-rem)) !default;   // 16px (was 1rem)
+$drp-spacing-lg: calc(2.4 * var(--drp-rem)) !default;   // 24px (was 1.5rem)
+$drp-spacing-xl: calc(3.2 * var(--drp-rem)) !default;   // 32px (was 2rem)
 
 // ==============================================================================
 // COLOR PALETTE
@@ -164,7 +166,7 @@ $drp-month-year-border-radius: $drp-border-radius !default;
 // --------------------------------------
 // Navigation Buttons
 // --------------------------------------
-$drp-nav-size: 2rem !default;
+$drp-nav-size: calc(3.2 * var(--drp-rem)) !default;   // 32px (was 2rem)
 $drp-nav-font-size: $drp-font-size-lg !default;
 $drp-nav-border-color: $drp-border-color !default;
 $drp-nav-border-width: $drp-border-width-base !default;
@@ -190,7 +192,7 @@ $drp-rolling-scrollbar-thumb-hover: $drp-color-accent !default;
 $drp-rolling-item-padding-v: $drp-spacing-xs !default;  // Half of sm (0.25rem instead of 0.5rem)
 $drp-rolling-item-padding-h: $drp-spacing-md !default;
 $drp-rolling-item-font-size: $drp-font-size-sm !default;
-$drp-rolling-item-min-height: 2rem !default;
+$drp-rolling-item-min-height: calc(3.2 * var(--drp-rem)) !default;   // 32px (was 2rem)
 $drp-rolling-item-justify-content: center !default;
 $drp-rolling-item-bg-hover: $drp-color-neutral-lighter !default;
 $drp-rolling-item-bg-selected: $drp-color-accent !default;