@keenmate/web-daterangepicker 1.6.0 → 1.7.0-rc01

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.6.0",
+  "version": "1.7.0-rc01",
   "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

@@ -13,10 +13,8 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--drp-spacing-xs);
-  margin-bottom: var(--drp-spacing-xs);
-  // Scale badge height with cell-scale
-  max-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
-  min-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
+  max-height: var(--drp-badge-row-height);
+  min-height: var(--drp-badge-row-height);
 }
 
 .drp-date-picker__badge-cell {
@@ -24,13 +22,11 @@
   align-items: center;
   justify-content: center;
   font-size: var(--drp-font-size-2xs);
-  // Scale badge padding with cell-scale
-  padding: calc(#{$drp-badge-padding-v} * var(--drp-cell-scale)) calc(#{$drp-badge-padding-h} * var(--drp-cell-scale));
+  padding: $drp-badge-padding-v $drp-badge-padding-h;
   border-radius: $drp-badge-border-radius;
   cursor: pointer;
   height: 100%;
-  // Scale badge height with cell-scale
-  max-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
+  max-height: var(--drp-badge-row-height);
 
   &:empty {
     visibility: hidden;

package/src/scss/_base.scss

@@ -23,52 +23,47 @@
   // 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.
+  //
+  // IMPORTANT: For web components, set --drp-rem on the <web-daterangepicker>
+  // element itself or on :root. Setting on wrapper divs won't work due to
+  // shadow DOM encapsulation.
   --drp-rem: 10px;
 
   // ===========================================================================
-  // SIZING SCALE SYSTEM (THREE INDEPENDENT MULTIPLIERS)
+  // SPACING
   // ===========================================================================
-  // Three independent multipliers for fine-grained control:
-  // - font-scale: Controls text sizes only
-  // - spacing-scale: Controls gaps, padding, margins only
-  // - cell-scale: Controls day cell dimensions and structural sizes only
 
-  --drp-font-scale: #{$drp-density-md};    // Default to 1.0 (medium)
-  --drp-spacing-scale: #{$drp-density-md}; // Default to 1.0 (medium)
-  --drp-cell-scale: #{$drp-density-md};    // Default to 1.0 (medium)
+  --drp-spacing-xs: #{$drp-spacing-xs};   // 4px
+  --drp-spacing-sm: #{$drp-spacing-sm};   // 8px
+  --drp-spacing-md: #{$drp-spacing-md};   // 16px
+  --drp-spacing-lg: #{$drp-spacing-lg};   // 24px
+  --drp-spacing-xl: #{$drp-spacing-xl};   // 32px
 
   // ===========================================================================
-  // BASE SPACING (semantic meaning never changes)
+  // BASE TYPOGRAPHY (with theme-designer integration)
   // ===========================================================================
-
-  --drp-spacing-xs-base: #{$drp-spacing-xs};   // Always 0.25rem (4px)
-  --drp-spacing-sm-base: #{$drp-spacing-sm};   // Always 0.5rem (8px)
-  --drp-spacing-md-base: #{$drp-spacing-md};   // Always 1rem (16px)
-  --drp-spacing-lg-base: #{$drp-spacing-lg};   // Always 1.5rem (24px)
-  --drp-spacing-xl-base: #{$drp-spacing-xl};   // Always 2rem (32px)
-
-  // Computed spacing (base × spacing-scale)
-  --drp-spacing-xs: calc(var(--drp-spacing-xs-base) * var(--drp-spacing-scale));
-  --drp-spacing-sm: calc(var(--drp-spacing-sm-base) * var(--drp-spacing-scale));
-  --drp-spacing-md: calc(var(--drp-spacing-md-base) * var(--drp-spacing-scale));
-  --drp-spacing-lg: calc(var(--drp-spacing-lg-base) * var(--drp-spacing-scale));
-  --drp-spacing-xl: calc(var(--drp-spacing-xl-base) * var(--drp-spacing-scale));
-
-  // ===========================================================================
-  // BASE TYPOGRAPHY (semantic meaning never changes)
-  // ===========================================================================
-
-  --drp-font-size-2xs-base: #{$drp-font-size-2xs};  // Always 0.625rem
-  --drp-font-size-xs-base: #{$drp-font-size-xs};    // Always 0.75rem
-  --drp-font-size-sm-base: #{$drp-font-size-sm};    // Always 0.875rem
-  --drp-font-size-base-base: #{$drp-font-size-base}; // Always 1rem
-  --drp-font-size-lg-base: #{$drp-font-size-lg};    // Always 1.125rem
-  --drp-font-size-xl-base: #{$drp-font-size-xl};    // Always 1.25rem
-  --drp-font-size-2xl-base: #{$drp-font-size-2xl};  // Always 1.5rem
-
-  // Font weights (not affected by density)
-  --drp-font-weight-medium: #{$drp-font-weight-medium};
-  --drp-font-weight-semibold: #{$drp-font-weight-semibold};
+  // Priority chain: --drp-* → --base-* → calc default
+
+  // Font sizes (unitless multipliers from theme-designer, multiplied by --drp-rem)
+  // Theme-designer outputs: --base-font-size-sm: 1.4 (unitless)
+  // Component computes: calc(1.4 * 10px) = 14px
+  --drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem));     // 10px
+  --drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem));     // 12px
+  --drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem));     // 14px
+  --drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem)); // 16px
+  --drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem));     // 18px
+  --drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem));       // 20px
+  --drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem));   // 24px
+
+  // Font weights (reference theme-designer base variables)
+  --drp-font-weight-normal: var(--base-font-weight-normal, 400);
+  --drp-font-weight-medium: var(--base-font-weight-medium, 500);
+  --drp-font-weight-semibold: var(--base-font-weight-semibold, 600);
+
+  // Line heights (reference theme-designer base variables)
+  --drp-line-height-tight: var(--base-line-height-tight, 1.25);
+  --drp-line-height-normal: var(--base-line-height-normal, 1.5);
+  --drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
 
   // ===========================================================================
   // COLORS (not affected by density)
@@ -133,31 +128,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-padding-h: calc(0.8 * var(--drp-rem)); // 8px (aligned with web-multiselect, was 4px)
   --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-font: calc(1.3 * var(--drp-rem));    // 13px (aligned with web-multiselect)
+  --drp-input-size-sm-padding-v: calc(0.5 * var(--drp-rem)); // 5px (aligned with web-multiselect)
   --drp-input-size-sm-padding-h: #{$drp-spacing-sm};
   --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-font: calc(1.4 * var(--drp-rem));     // 14px (aligned with web-multiselect, was 16px)
   --drp-input-size-md-padding-v: #{$drp-spacing-sm};
   --drp-input-size-md-padding-h: #{$padding-base};
   --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-font: calc(1.6 * var(--drp-rem));     // 16px (aligned with web-multiselect, was 18px)
+  --drp-input-size-lg-padding-v: calc(1.0 * var(--drp-rem)); // 10px (aligned with web-multiselect, was 16px)
+  --drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem)); // 14px (aligned with web-multiselect, was 16px)
   --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-font: calc(1.8 * var(--drp-rem));     // 18px (aligned with web-multiselect, was 20px)
+  --drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem)); // 12px (aligned with web-multiselect, was 16px)
+  --drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem)); // 16px (aligned with web-multiselect, was 24px)
   --drp-input-size-xl-height: calc(4.1 * var(--drp-rem));   // 41px
   --drp-input-size-xl-icon-size: 1.25em;
 
@@ -251,9 +246,9 @@
 // Input element itself (actual <input> tag)
 .drp-input {
   width: 100%;
-  font-family: inherit;
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
   font-size: var(--drp-input-size-md-font);
-  line-height: 1.5;
+  line-height: var(--drp-line-height-normal);
   color: var(--drp-input-color);
   background-color: var(--drp-input-background);
   border: var(--drp-border-width-base) solid var(--drp-input-border-color);
@@ -364,6 +359,7 @@
 .drp-date-picker {
   position: absolute;
   z-index: $drp-z-index-dropdown;
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
   background: var(--drp-dropdown-background);
   border: var(--drp-border-width-base) solid var(--drp-border-color);
   border-radius: var(--drp-border-radius);
@@ -374,15 +370,8 @@
   box-sizing: border-box;
   user-select: none;
 
-  // Computed font sizes (base × font-scale)
-  // Must be defined here (not in :host) so they use the correct --drp-font-scale value
-  --drp-font-size-2xs: calc(var(--drp-font-size-2xs-base) * var(--drp-font-scale));
-  --drp-font-size-xs: calc(var(--drp-font-size-xs-base) * var(--drp-font-scale));
-  --drp-font-size-sm: calc(var(--drp-font-size-sm-base) * var(--drp-font-scale));
-  --drp-font-size-base: calc(var(--drp-font-size-base-base) * var(--drp-font-scale));
-  --drp-font-size-lg: calc(var(--drp-font-size-lg-base) * var(--drp-font-scale));
-  --drp-font-size-xl: calc(var(--drp-font-size-xl-base) * var(--drp-font-scale));
-  --drp-font-size-2xl: calc(var(--drp-font-size-2xl-base) * var(--drp-font-scale));
+  // Badge row height
+  --drp-badge-row-height: #{$drp-badge-max-height};
 
   // Hide by default
   &:not(.drp-date-picker--visible) {
@@ -443,8 +432,7 @@
 
 .drp-date-picker__month {
   flex: 1;
-  // Scale month width with cell-scale for proper cell sizing
-  min-width: calc(#{$drp-month-min-width} * var(--drp-cell-scale));
+  min-width: $drp-month-min-width;
 
   // Make month a flex column container so calendar-container can fill vertical space
   display: flex;
@@ -452,7 +440,7 @@
 
   // Allow shrinking for inline mode
   .drp-date-picker--inline & {
-    min-width: calc(#{$drp-month-min-width-inline} * var(--drp-cell-scale));
+    min-width: $drp-month-min-width-inline;
   }
 
   // Grid layout: remove min-width to allow proper grid sizing

package/src/scss/_calendar-grid.scss

@@ -55,8 +55,7 @@
   color: var(--drp-day-text-color);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
-  // Scale border width with cell-scale
-  border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) solid $drp-day-border-color;
+  border: $drp-day-border-width solid $drp-day-border-color;
   position: relative; // For absolute positioning of labels
 
   &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
@@ -89,9 +88,8 @@
   // Focused (keyboard navigation)
   // --------------------------------------
   &--focused {
-    // Scale outline with cell-scale
-    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));
+    outline: $drp-day-focused-outline-width solid var(--drp-day-focused-outline);
+    outline-offset: $drp-day-focused-outline-offset;
   }
 
   // --------------------------------------
@@ -180,8 +178,7 @@
 
   &--drag-preview {
     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-day-range-bg);
+    border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-day-range-bg);
 
     &.drp-date-picker__day--range-start,
     &.drp-date-picker__day--range-end {

package/src/scss/_header-navigation.scss

@@ -58,9 +58,8 @@
 // ==============================================================================
 
 .drp-date-picker__nav {
-  // Scale nav button size with cell-scale
-  width: calc(#{$drp-nav-size} * var(--drp-cell-scale));
-  height: calc(#{$drp-nav-size} * var(--drp-cell-scale));
+  width: $drp-nav-size;
+  height: $drp-nav-size;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -164,9 +163,7 @@
   padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
   cursor: pointer;
   font-size: #{$drp-rolling-item-font-size};
-  // Scale item height with cell-scale for consistent sizing
-  min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
-  // Prevent flex item from growing beyond min-height
+  min-height: $drp-rolling-item-min-height;
   flex-shrink: 0;
 
   // Flexbox for vertical and horizontal centering
@@ -305,7 +302,7 @@
     padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
     cursor: pointer;
     font-size: #{$drp-rolling-item-font-size};
-    min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
+    min-height: $drp-rolling-item-min-height;
     flex-shrink: 0;
     display: flex;
     align-items: center;

package/src/scss/_modifiers.scss

@@ -1,224 +1,9 @@
 // ==============================================================================
 // DATE RANGE PICKER - MODIFIERS
 // ==============================================================================
-// Three independent sizing systems for fine-grained control
 
 @use 'variables' as *;
 
-// ==============================================================================
-// FONT SCALE CLASSES
-// ==============================================================================
-// Controls text sizing only
-// Example: font-size="lg" makes text 1.5× larger
-
-.drp-date-picker.drp-font-xs {
-  --drp-font-scale: #{$drp-density-xs}; // 0.6× scale (60%)
-}
-
-.drp-date-picker.drp-font-sm {
-  --drp-font-scale: #{$drp-density-sm}; // 0.8× scale (80%)
-}
-
-.drp-date-picker.drp-font-md {
-  --drp-font-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
-}
-
-.drp-date-picker.drp-font-lg {
-  --drp-font-scale: #{$drp-density-lg}; // 1.5× scale (150%)
-}
-
-.drp-date-picker.drp-font-xl {
-  --drp-font-scale: #{$drp-density-xl}; // 2.0× scale (200%)
-}
-
-// ==============================================================================
-// SPACING SCALE CLASSES
-// ==============================================================================
-// Controls gaps, padding, margins only
-// Example: spacing="xs" makes layout 0.6× more compact
-
-.drp-date-picker.drp-spacing-xs {
-  --drp-spacing-scale: #{$drp-density-xs}; // 0.6× scale (60%)
-}
-
-.drp-date-picker.drp-spacing-sm {
-  --drp-spacing-scale: #{$drp-density-sm}; // 0.8× scale (80%)
-}
-
-.drp-date-picker.drp-spacing-md {
-  --drp-spacing-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
-}
-
-.drp-date-picker.drp-spacing-lg {
-  --drp-spacing-scale: #{$drp-density-lg}; // 1.5× scale (150%)
-}
-
-.drp-date-picker.drp-spacing-xl {
-  --drp-spacing-scale: #{$drp-density-xl}; // 2.0× scale (200%)
-}
-
-// ==============================================================================
-// CELL SCALE CLASSES
-// ==============================================================================
-// Controls day cell dimensions and structural sizes only
-// Example: cell-size="sm" makes cells 0.8× smaller
-
-.drp-date-picker.drp-cell-xs {
-  --drp-cell-scale: #{$drp-density-xs}; // 0.6× scale (60%)
-}
-
-.drp-date-picker.drp-cell-sm {
-  --drp-cell-scale: #{$drp-density-sm}; // 0.8× scale (80%)
-}
-
-.drp-date-picker.drp-cell-md {
-  --drp-cell-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
-}
-
-.drp-date-picker.drp-cell-lg {
-  --drp-cell-scale: #{$drp-density-lg}; // 1.5× scale (150%)
-}
-
-.drp-date-picker.drp-cell-xl {
-  --drp-cell-scale: #{$drp-density-xl}; // 2.0× scale (200%)
-}
-
-// ==============================================================================
-// RESPONSIVE SCALING
-// ==============================================================================
-// Automatically reduces scale at smaller breakpoints for each sizing system
-// Example: xl (2.0×) → lg (1.5×) @ 1200px → md (1.0×) @ 768px
-
-.drp-responsive {
-  // Font scale responsive adjustments
-  &.drp-font-xl {
-    @media (max-width: 1200px) {
-      --drp-font-scale: #{$drp-density-lg};
-    }
-    @media (max-width: 768px) {
-      --drp-font-scale: #{$drp-density-md};
-    }
-  }
-
-  &.drp-font-lg {
-    @media (max-width: 1200px) {
-      --drp-font-scale: #{$drp-density-md};
-    }
-    @media (max-width: 768px) {
-      --drp-font-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-font-md {
-    @media (max-width: 768px) {
-      --drp-font-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-font-sm {
-    @media (max-width: 768px) {
-      --drp-font-scale: #{$drp-density-xs};
-    }
-  }
-
-  // Spacing scale responsive adjustments
-  &.drp-spacing-xl {
-    @media (max-width: 1200px) {
-      --drp-spacing-scale: #{$drp-density-lg};
-    }
-    @media (max-width: 768px) {
-      --drp-spacing-scale: #{$drp-density-md};
-    }
-  }
-
-  &.drp-spacing-lg {
-    @media (max-width: 1200px) {
-      --drp-spacing-scale: #{$drp-density-md};
-    }
-    @media (max-width: 768px) {
-      --drp-spacing-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-spacing-md {
-    @media (max-width: 768px) {
-      --drp-spacing-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-spacing-sm {
-    @media (max-width: 768px) {
-      --drp-spacing-scale: #{$drp-density-xs};
-    }
-  }
-
-  // Cell scale responsive adjustments
-  &.drp-cell-xl {
-    @media (max-width: 1200px) {
-      --drp-cell-scale: #{$drp-density-lg};
-    }
-    @media (max-width: 768px) {
-      --drp-cell-scale: #{$drp-density-md};
-    }
-  }
-
-  &.drp-cell-lg {
-    @media (max-width: 1200px) {
-      --drp-cell-scale: #{$drp-density-md};
-    }
-    @media (max-width: 768px) {
-      --drp-cell-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-cell-md {
-    @media (max-width: 768px) {
-      --drp-cell-scale: #{$drp-density-sm};
-    }
-  }
-
-  &.drp-cell-sm {
-    @media (max-width: 768px) {
-      --drp-cell-scale: #{$drp-density-xs};
-    }
-  }
-}
-
-// ==============================================================================
-// SIZE VARIANT MODIFIERS (LEGACY - DEPRECATED)
-// ==============================================================================
-// These are deprecated in favor of the three independent scale systems above
-// Kept for backward compatibility only - will be removed in v3.0.0
-// Migration: Use spacing="xs" font-size="xs" cell-size="xs" attributes instead
-
-.drp-date-picker--xs {
-  --drp-font-scale: #{$drp-density-xs};
-  --drp-spacing-scale: #{$drp-density-xs};
-  --drp-cell-scale: #{$drp-density-xs};
-  min-width: calc(280px * #{$drp-density-xs});
-}
-
-.drp-date-picker--sm {
-  --drp-font-scale: #{$drp-density-sm};
-  --drp-spacing-scale: #{$drp-density-sm};
-  --drp-cell-scale: #{$drp-density-sm};
-  min-width: calc(280px * #{$drp-density-sm});
-}
-
-.drp-date-picker--lg {
-  --drp-font-scale: #{$drp-density-lg};
-  --drp-spacing-scale: #{$drp-density-lg};
-  --drp-cell-scale: #{$drp-density-lg};
-  min-width: calc(280px * #{$drp-density-lg});
-}
-
-.drp-date-picker--xl {
-  --drp-font-scale: #{$drp-density-xl};
-  --drp-spacing-scale: #{$drp-density-xl};
-  --drp-cell-scale: #{$drp-density-xl};
-  min-width: calc(280px * #{$drp-density-xl});
-}
-
 // ==============================================================================
 // TRANSITIONS (OPT-IN FOR PERFORMANCE)
 // ==============================================================================

package/src/scss/_summary-actions.scss

@@ -50,6 +50,7 @@
   border-radius: var(--drp-border-radius);
   background: transparent;
   cursor: pointer;
+  font-family: inherit;
   font-size: var(--drp-font-size-sm);
   font-weight: var(--drp-font-weight-medium);
 

package/src/scss/_variables.scss

@@ -340,16 +340,3 @@ $drp-button-apply-bg-hover: $drp-color-accent-dark !default;
 $drp-months-gap: $drp-spacing-lg !default;
 $drp-grid-columns: 3 !default;
 $drp-grid-rows: 2 !default;
-
-// ==============================================================================
-// DENSITY MULTIPLIERS
-// ==============================================================================
-// Used to scale the entire calendar proportionally (spacing, fonts, cells, etc.)
-// Applied via --drp-density CSS custom property
-// Range: 0.6× (very compact) to 2.0× (very large) for dramatic visual differences
-
-$drp-density-xs: 0.6 !default;   // 60% - Very compact
-$drp-density-sm: 0.8 !default;   // 80% - Compact
-$drp-density-md: 1 !default;     // 100% - Normal (baseline)
-$drp-density-lg: 1.5 !default;   // 150% - Large
-$drp-density-xl: 2.0 !default;   // 200% - Very large