@keenmate/web-daterangepicker 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.1.0",
+  "version": "1.3.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

@@ -47,16 +47,16 @@
 
 // Number Badge (e.g., day number, count)
 .drp-date-picker__badge-cell.badge-number {
-  background-color: $drp-badge-number-bg;
-  color: $drp-badge-number-color;
+  background-color: var(--drp-badge-number-bg);
+  color: var(--drp-badge-number-color);
   font-size: 0.7rem;
   font-weight: 600;
 }
 
 // Count Badge (e.g., number of events)
 .drp-date-picker__badge-cell.badge-count {
-  background-color: $drp-badge-count-bg;
-  color: $drp-badge-count-color;
+  background-color: var(--drp-badge-count-bg);
+  color: var(--drp-badge-count-color);
   font-size: 0.7rem;
   font-weight: 700;
 }
@@ -66,8 +66,8 @@
 // should be defined by the application, not the component library.
 // See index.html examples for how to customize badge colors for your use case.
 .drp-date-picker__badge-cell.badge-text {
-  background-color: $drp-badge-text-bg;
-  color: $drp-badge-text-color;
+  background-color: var(--drp-badge-text-bg);
+  color: var(--drp-badge-text-color);
   font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;

package/src/scss/_base.scss

@@ -9,9 +9,10 @@
 // CSS CUSTOM PROPERTIES (CSS VARIABLES)
 // ==============================================================================
 // Define CSS custom properties with SCSS fallbacks for runtime customization
-// Using :host instead of :root for proper shadow DOM support
+// Using :host for Shadow DOM (web component) and :root for Light DOM (direct class usage)
 
-:host {
+:host,
+:root {
   // ===========================================================================
   // SIZING SCALE SYSTEM (THREE INDEPENDENT MULTIPLIERS)
   // ===========================================================================
@@ -86,24 +87,220 @@
   --drp-input-padding-h: #{$drp-input-padding-h};
   --drp-grid-columns: #{$drp-grid-columns};
   --drp-grid-rows: #{$drp-grid-rows};
+
+  // ===========================================================================
+  // INPUT FIELD SEMANTIC VARIABLES
+  // ===========================================================================
+  // Semantic variables for input customization (loosely coupled)
+
+  // Input colors
+  --drp-input-background: var(--drp-card-bg);
+  --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);
+
+  // Input focus state
+  --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
+  --drp-input-focus-shadow-size: 3px;
+
+  // Input icon
+  --drp-input-icon-opacity: #{$drp-input-icon-opacity};
+
+  // ===========================================================================
+  // INPUT SIZE VARIANTS (BASE VALUES)
+  // ===========================================================================
+  // Three size variants for the input element
+
+  --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-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-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-icon-size: 1.125em;
+
+  // ===========================================================================
+  // HEADER & NAVIGATION SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-header-text-color: var(--drp-text-primary);
+  --drp-header-bg-hover: var(--drp-primary-bg);
+  --drp-header-bg-active: var(--drp-primary-bg-hover);
+
+  --drp-nav-text-color: var(--drp-text-primary);
+  --drp-nav-border-color: var(--drp-border-color);
+  --drp-nav-bg-hover: var(--drp-primary-bg);
+  --drp-nav-bg-active: var(--drp-primary-bg-hover);
+  --drp-nav-border-hover: var(--drp-accent-color);
+
+  --drp-rolling-bg: var(--drp-primary-bg);
+  --drp-rolling-border-color: var(--drp-border-color);
+  --drp-rolling-scrollbar-thumb: var(--drp-border-color);
+  --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-bg-selected-hover: var(--drp-accent-color-hover);
+
+  // ===========================================================================
+  // CALENDAR GRID & DAY CELLS SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-weekday-color: var(--drp-text-secondary);
+
+  --drp-day-text-color: var(--drp-text-primary);
+  --drp-day-bg-hover: var(--drp-primary-bg);
+  --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-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);
+
+  // ===========================================================================
+  // SUMMARY & ACTIONS SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-summary-text-color: var(--drp-text-secondary);
+  --drp-summary-border-color: var(--drp-border-color);
+  --drp-summary-count-color: var(--drp-accent-color);
+
+  --drp-button-border-color: var(--drp-border-color);
+  --drp-button-bg-hover: var(--drp-primary-bg);
+  --drp-button-border-hover: var(--drp-accent-color);
+  --drp-button-today-color: var(--drp-accent-color);
+  --drp-button-clear-color: var(--drp-text-secondary);
+  --drp-button-cancel-color: var(--drp-text-secondary);
+  --drp-button-apply-bg: var(--drp-accent-color);
+  --drp-button-apply-color: var(--drp-button-text-color);
+  --drp-button-apply-border: var(--drp-accent-color);
+  --drp-button-apply-bg-hover: var(--drp-accent-color-hover);
+
+  // ===========================================================================
+  // BADGE SYSTEM SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-badge-number-bg: var(--drp-accent-color);
+  --drp-badge-number-color: var(--drp-accent-text-color);
+  --drp-badge-count-bg: #{$drp-color-error};
+  --drp-badge-count-color: #{$drp-color-white};
+  --drp-badge-text-bg: var(--drp-text-secondary);
+  --drp-badge-text-color: #{$drp-color-white};
+
+  // ===========================================================================
+  // UNIFIED NAV SEMANTIC VARIABLES
+  // ===========================================================================
+
+  --drp-unified-range-text-color: var(--drp-text-primary);
+  --drp-unified-range-bg-hover: var(--drp-primary-bg);
+  --drp-unified-range-bg-active: var(--drp-primary-bg-hover);
+  --drp-unified-month-color: var(--drp-text-secondary);
+  --drp-unified-rolling-disabled-color: var(--drp-text-secondary);
 }
 
 // ==============================================================================
 // DATE PICKER INPUT FIELD
 // ==============================================================================
 
+// Input element itself (actual <input> tag)
+.drp-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--drp-input-size-md-font);
+  line-height: 1.5;
+  color: var(--drp-input-color);
+  background-color: var(--drp-input-background);
+  border: var(--drp-border-width-base) solid var(--drp-input-border-color);
+  border-radius: var(--drp-border-radius);
+  padding: var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);
+  padding-right: calc(var(--drp-input-size-md-padding-h) * 2.5); // Extra space for calendar icon
+  height: var(--drp-input-size-md-height);
+  box-sizing: border-box;
+  transition: border-color var(--drp-transition-fast) var(--drp-easing-snappy),
+              box-shadow var(--drp-transition-fast) var(--drp-easing-snappy);
+
+  &::placeholder {
+    color: var(--drp-input-placeholder-color);
+    opacity: 0.6;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--drp-input-border-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--drp-input-border-color-focus);
+    box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
+  }
+
+  &:disabled {
+    opacity: #{$drp-opacity-disabled};
+    cursor: not-allowed;
+    background-color: var(--drp-input-disabled-background);
+  }
+
+  // Size variants
+  &.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);
+    padding-right: calc(var(--drp-input-size-sm-padding-h) * 2.5);
+    height: var(--drp-input-size-sm-height);
+  }
+
+  &.drp-input--lg {
+    font-size: var(--drp-input-size-lg-font);
+    padding: var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);
+    padding-right: calc(var(--drp-input-size-lg-padding-h) * 2.5);
+    height: var(--drp-input-size-lg-height);
+  }
+}
+
+// Input wrapper container (for positioning calendar icon)
 .drp-date-picker-input {
   position: relative;
   cursor: pointer;
+  display: inline-block;
+  width: 100%;
 
+  // Calendar icon
   &::after {
     content: '📅';
     position: absolute;
-    right: var(--drp-input-padding-h);
+    right: var(--drp-input-size-md-padding-h);
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-    opacity: $drp-input-icon-opacity;
+    opacity: var(--drp-input-icon-opacity);
+    font-size: var(--drp-input-size-md-icon-size);
+  }
+
+  // Size variant icon positioning
+  &.drp-date-picker-input--sm::after {
+    right: var(--drp-input-size-sm-padding-h);
+    font-size: var(--drp-input-size-sm-icon-size);
+  }
+
+  &.drp-date-picker-input--lg::after {
+    right: var(--drp-input-size-lg-padding-h);
+    font-size: var(--drp-input-size-lg-icon-size);
   }
 }
 

package/src/scss/_calendar-grid.scss

@@ -20,7 +20,7 @@
   text-align: center;
   font-size: var(--drp-font-size-xs);
   font-weight: var(--drp-font-weight-semibold);
-  color: var(--drp-text-secondary);
+  color: var(--drp-weekday-color);
   padding: var(--drp-spacing-xs);
   text-transform: uppercase;
 }
@@ -52,7 +52,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--drp-font-size-sm);
-  color: var(--drp-text-primary);
+  color: var(--drp-day-text-color);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
   // Scale border width with cell-scale
@@ -60,15 +60,15 @@
   position: relative; // For absolute positioning of labels
 
   &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
-    background-color: var(--drp-primary-bg);
-    border-color: var(--drp-accent-color);
+    background-color: var(--drp-day-bg-hover);
+    border-color: var(--drp-day-border-hover);
   }
 
   // --------------------------------------
   // Today
   // --------------------------------------
   &--today {
-    border-color: var(--drp-accent-color);
+    border-color: var(--drp-day-today-border);
     font-weight: var(--drp-font-weight-semibold);
   }
 
@@ -76,12 +76,12 @@
   // Selected
   // --------------------------------------
   &--selected {
-    background-color: var(--drp-accent-color);
-    color: var(--drp-accent-text-color);
+    background-color: var(--drp-day-selected-bg);
+    color: var(--drp-day-selected-color);
     font-weight: var(--drp-font-weight-semibold);
 
     &:hover {
-      background-color: var(--drp-accent-color-hover);
+      background-color: var(--drp-day-selected-bg-hover);
     }
   }
 
@@ -90,7 +90,7 @@
   // --------------------------------------
   &--focused {
     // Scale outline with cell-scale
-    outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-accent-color);
+    outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-day-focused-outline);
     outline-offset: calc(#{$drp-day-focused-outline-offset} * var(--drp-cell-scale));
   }
 
@@ -98,7 +98,7 @@
   // Disabled
   // --------------------------------------
   &--disabled {
-    color: var(--drp-text-secondary);
+    color: var(--drp-day-disabled-color);
     opacity: $drp-day-disabled-opacity;
     cursor: not-allowed;
     position: relative;
@@ -132,7 +132,7 @@
   // Other month days (previous/next month)
   // --------------------------------------
   &--other-month {
-    color: var(--drp-text-secondary);
+    color: var(--drp-day-other-month-color);
     opacity: $drp-day-other-month-opacity;
 
     // Reset opacity when other-month days are part of range selection
@@ -149,8 +149,8 @@
   // --------------------------------------
   &--range-start,
   &--range-end {
-    background-color: var(--drp-accent-color);
-    color: var(--drp-accent-text-color);
+    background-color: var(--drp-day-range-bg);
+    color: var(--drp-day-range-color);
     font-weight: var(--drp-font-weight-semibold);
     cursor: grab;
     user-select: none;
@@ -161,10 +161,10 @@
   }
 
   &--in-range {
-    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-bg-opacity * 100%, transparent);
+    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-bg-opacity * 100%, transparent);
 
     &:hover {
-      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
+      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
     }
   }
 
@@ -179,14 +179,14 @@
   }
 
   &--drag-preview {
-    background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-bg-opacity * 100%, transparent);
+    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-bg-opacity * 100%, transparent);
     // Scale border width with cell-scale
-    border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-accent-color);
+    border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-day-range-bg);
 
     &.drp-date-picker__day--range-start,
     &.drp-date-picker__day--range-end {
-      background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
-      color: var(--drp-accent-text-color);
+      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
+      color: var(--drp-day-range-color);
     }
   }
 
@@ -227,7 +227,7 @@
 // (e.g., when outside rollingYearRange/rollingMonthRange or minDate/maxDate)
 
 .drp-date-picker__rolling-item--disabled {
-  color: var(--drp-text-secondary);
+  color: var(--drp-unified-rolling-disabled-color);
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none; // Prevent clicking