add range specific tokens

Esri · Jan 24, 2025 · cf487fd · cf487fd
1 parent 95d9607
commit cf487fd
Showing 1 changed file with 10 additions and 20 deletions.
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
@@ -84,38 +84,28 @@
   @apply focus-inset;
 }
 
+:host(:hover:not([disabled]):not([selected])) .day {
+  @apply focus-inset;
+}
+
 :host([selected]) .day {
   @apply font-medium;
   background-color: var(--calcite-date-picker-day-background-color-selected, var(--calcite-color-brand));
   color: var(--calcite-date-picker-day-text-color-selected, var(--calcite-color-foreground-1));
 }
 
-//range tokens
 :host([range-hover]:not([selected])) {
   .day {
-    background-color: var(--calcite-color-foreground-2);
-    color: var(--calcite-color-text-1);
-  }
-}
-
-:host([highlighted]:not([selected])) {
-  .day {
-    color: var(--calcite-color-brand);
-    background-color: var(--calcite-color-foreground-current);
-  }
-}
-
-:host(:hover[highlighted]:not([selected]).inside-range--hover) {
-  .day {
-    background-color: var(--calcite-color-foreground-current);
-    color: var(--calcite-color-brand);
-    @apply focus-inset;
+    background-color: var(--calcite-date-picker-day-range-inverted-background-color, var(--calcite-color-foreground-2));
+    color: var(--calcite-date-picker-day-range-inverted-text-color, var(--calcite-color-text-1));
   }
 }
 
-:host(:hover:not([highlighted]):not([selected]).outside-range--hover) {
+:host([highlighted]:not([selected])),
+:host(:hover[highlighted]:not([selected])) {
   .day {
-    @apply focus-inset;
+    color: var(--calcite-date-picker-day-range-text-color, var(--calcite-color-brand));
+    background-color: var(--calcite-date-picker-day-range-background-color, var(--calcite-color-foreground-current));
   }
 }