@keenmate/web-daterangepicker 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.3.0",
+  "version": "1.5.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)
   // ===========================================================================
@@ -112,26 +124,38 @@
   // ===========================================================================
   // INPUT SIZE VARIANTS (BASE VALUES)
   // ===========================================================================
-  // Three size variants for the input element
+  // Five size variants for the input element (xs, sm, md, lg, xl)
+
+  --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: 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: calc(4.1 * var(--drp-rem));   // 41px
+  --drp-input-size-xl-icon-size: 1.25em;
+
   // ===========================================================================
   // HEADER & NAVIGATION SEMANTIC VARIABLES
   // ===========================================================================
@@ -258,6 +282,13 @@
   }
 
   // Size variants
+  &.drp-input--xs {
+    font-size: var(--drp-input-size-xs-font);
+    padding: var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);
+    padding-right: calc(var(--drp-input-size-xs-padding-h) * 2.5);
+    height: var(--drp-input-size-xs-height);
+  }
+
   &.drp-input--sm {
     font-size: var(--drp-input-size-sm-font);
     padding: var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);
@@ -271,6 +302,13 @@
     padding-right: calc(var(--drp-input-size-lg-padding-h) * 2.5);
     height: var(--drp-input-size-lg-height);
   }
+
+  &.drp-input--xl {
+    font-size: var(--drp-input-size-xl-font);
+    padding: var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);
+    padding-right: calc(var(--drp-input-size-xl-padding-h) * 2.5);
+    height: var(--drp-input-size-xl-height);
+  }
 }
 
 // Input wrapper container (for positioning calendar icon)
@@ -293,6 +331,11 @@
   }
 
   // Size variant icon positioning
+  &.drp-date-picker-input--xs::after {
+    right: var(--drp-input-size-xs-padding-h);
+    font-size: var(--drp-input-size-xs-icon-size);
+  }
+
   &.drp-date-picker-input--sm::after {
     right: var(--drp-input-size-sm-padding-h);
     font-size: var(--drp-input-size-sm-icon-size);
@@ -302,6 +345,11 @@
     right: var(--drp-input-size-lg-padding-h);
     font-size: var(--drp-input-size-lg-icon-size);
   }
+
+  &.drp-date-picker-input--xl::after {
+    right: var(--drp-input-size-xl-padding-h);
+    font-size: var(--drp-input-size-xl-icon-size);
+  }
 }
 
 // ==============================================================================

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;