feat(date-picker): add component tokens (#11380)

**Related Issue:** #7180 ## Summary Adds following tokens for `calcite-date-picker` component: `--calcite-date-picker-border-color`: Specifies the component's border color. `--calcite-date-picker-corner-radius`: Specifies the component's border radius. `--calcite-date-picker-range-calendar-divider-color`: Specifies the divider color between calendar's when `range="true"`. `--calcite-date-picker-week-header-text-color`: Specifies the week header text color. `--calcite-date-picker-header-action-background-color`: Specifies the background color of header action's of the component. `--calcite-date-picker-header-action-background-color-hover`: Specifies the background color of header action's of the component when hovered. `--calcite-date-picker-header-action-background-color-press`: Specifies the background color of header action's of the component when pressed. `--calcite-date-picker-header-action-text-color`: Specifies the text color of header action's of the component. `--calcite-date-picker-header-action-text-color-press`: Specifies the text color of header action's of the component when pressed. `--calcite-date-picker-year-text-color`: Specifies the text color of year & suffix of the component. `--calcite-date-picker-month-select-font-size`: Specifies the font size of month select of the component. `--calcite-date-picker-month-select-text-color`: Specifies the text color of month select of the component. `--calcite-date-picker-month-select-icon-color`: Specifies the icon color of month select of the component. `--calcite-date-picker-month-select-icon-color-hover`: Specifies the icon color of month select of the component when hovered. `--calcite-date-picker-day-background-color`: Specifies the background color of day of the component. `--calcite-date-picker-day-background-color-hover`: Specifies the background color of day of the component when hovered. `--calcite-date-picker-day-text-color`: Specifies the text color of day of the component. `--calcite-date-picker-day-text-color-hover`: Specifies the text color of day of the component when hovered. `--calcite-date-picker-current-day-text-color`: Specifies the text color of current day of the component. `--calcite-date-picker-day-background-color-selected`: Specifies the background color of selected day of the component. `--calcite-date-picker-day-text-color-selected`: Specifies the text color of selected day of the component. `--calcite-date-picker-day-range-text-color`: Specifies the text color of select day range of the component. `--calcite-date-picker-day-range-background-color`: Specifies the background color of select day range of the component. `--calcite-date-picker-day-outside-range-background-color-hover`: Specifies the background color of day's outside current range when hovered. `--calcite-date-picker-day-outside-range-text-color-hover`: Specifies the text color of day's outside current range when hovered.
Esri · Feb 8, 2025 · 85125dd · 85125dd
1 parent ddd715a
commit 85125dd
Show file tree

Hide file tree

Showing 9 changed files with 343 additions and 67 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
@@ -1,5 +1,5 @@
 :host {
-  @apply cursor-pointer flex relative text-color-3;
+  @apply cursor-pointer flex relative;
   outline: none;
 }
 
@@ -16,7 +16,6 @@
 
 .day {
   @apply text-n2h
-    text-color-3
     flex
     items-center
     justify-center
@@ -25,9 +24,10 @@
     w-full
     relative;
   line-height: var(--calcite-font-line-height-fixed-base);
-  background: none;
   block-size: var(--calcite-internal-day-size);
   outline-color: var(--calcite-color-transparent);
+  background-color: var(--calcite-date-picker-day-background-color);
+  color: var(--calcite-date-picker-day-text-color, var(--calcite-color-text-3));
 }
 
 .text {
@@ -63,13 +63,14 @@
 
 :host(:hover:not([disabled]):not([selected])) {
   & .day {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-date-picker-day-background-color-hover, var(--calcite-color-foreground-2));
+    color: var(--calcite-date-picker-day-text-color-hover, var(--calcite-color-text-1));
   }
 }
 
 :host(:not([range]):not([selected]).current-day) {
   & .day {
-    color: var(--calcite-color-text-1);
+    color: var(--calcite-date-picker-current-day-text-color, var(--calcite-color-text-1));
     font-weight: var(--calcite-font-weight-medium);
   }
 }
@@ -83,37 +84,31 @@
   @apply focus-inset;
 }
 
+:host(:hover:not([disabled]):not([selected])) .day {
+  @apply focus-inset;
+}
+
 :host([selected]) .day {
   @apply font-medium;
-  background-color: var(--calcite-color-brand);
-  color: var(--calcite-color-foreground-1);
+  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));
 }
 
 :host([range-hover]:not([selected])) {
   .day {
-    @apply bg-foreground-2;
-    @apply text-color-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-outside-range-background-color-hover,
+      var(--calcite-color-foreground-2)
+    );
+    color: var(--calcite-date-picker-day-outside-range-text-color-hover, 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));
   }
 }
 

diff --git a/.../calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/.../calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -1,9 +1,5 @@
 :host {
   @apply block;
-  --calcite-select-internal-border-width: 0;
-  --calcite-select-internal-icon-border-inline-end-width: 0;
-  --calcite-internal-select-font-weight: var(--calcite-font-weight-medium);
-  --calcite-select-text-color: var(--calcite-color-text-1);
 }
 
 .header {
@@ -53,9 +49,7 @@
 }
 
 .chevron {
-  @apply text-color-3
-    bg-foreground-1
-    focus-base
+  @apply focus-base
     box-content
     flex
     flex-grow-0
@@ -67,18 +61,16 @@
     w-full 
     h-full;
   --calcite-internal-action-padding-block: 0;
-  &:focus {
-    @apply focus-inset;
-  }
+  --calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);
+  --calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);
+  --calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);
+  --calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);
+  --calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press);
 
-  &:hover,
   &:focus {
-    @apply text-color-1 bg-foreground-2 fill-color-1;
+    @apply focus-inset;
   }
 
-  &:active {
-    @apply bg-foreground-3;
-  }
   &[aria-disabled="true"] {
     @apply pointer-events-none;
   }
@@ -108,10 +100,9 @@
 
 .year,
 .suffix {
-  @apply bg-foreground-1;
   margin-inline: var(--calcite-spacing-xxs);
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-color-text-1);
+  color: var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));
   font-size: var(--calcite-font-size-md);
   line-height: var(--calcite-font-line-height-fixed-lg);
 }
@@ -137,21 +128,29 @@
 }
 
 .month-select {
+  --calcite-select-internal-border-width: 0;
+  --calcite-select-internal-icon-border-inline-end-width: 0;
   --calcite-select-spacing-inline: var(--calcite-spacing-xxs);
+  --calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));
+  --calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));
+  --calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);
+  --calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);
+
   --calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);
-  --calcite-select-font-size: var(--calcite-font-size-md);
-  --calcite-select-line-height: var(--calcite-font-line-height-fixed-lg);
+  --calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);
+  --calcite-internal-select-font-weight: var(--calcite-font-weight-medium);
 }
 
 :host([scale="s"]) .month-year-container {
   .month-select {
     --calcite-select-spacing-inline: var(--calcite-spacing-base);
+    --calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));
+
     --calcite-internal-select-spacing-block: var(--calcite-spacing-base);
     --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);
     --calcite-internal-select-block-size: #{$calcite-size-24};
-    --calcite-select-font-size: var(--calcite-font-size);
-    --calcite-select-line-height: var(--calcite-font-line-height-fixed-base);
+    --calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base);
   }
 
   .year {
@@ -168,11 +167,12 @@
 :host([scale="l"]) .month-year-container {
   .month-select {
     --calcite-select-spacing-inline: var(--calcite-spacing-sm);
+    --calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));
+
     --calcite-internal-select-spacing-block: var(--calcite-spacing-sm);
     --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);
     --calcite-internal-select-block-size: #{$calcite-size-44};
-    --calcite-select-font-size: var(--calcite-font-size-lg);
-    --calcite-select-line-height: var(--calcite-font-line-height-fixed-xl);
+    --calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl);
   }
   .year {
     inline-size: #{$calcite-size-48};

diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
@@ -20,14 +20,14 @@
 }
 
 .week-header {
-  @apply text-color-3
-    text-center
+  @apply text-center
     font-bold 
     flex 
     text-n2h 
     justify-center
     items-center;
   inline-size: calc(100% / 7);
+  color: var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-3));
 }
 
 .day-container {
@@ -92,7 +92,8 @@
 }
 
 .calendar--start {
-  @apply border-solid border-color-1 border-0;
+  @apply border-solid border-0;
+  border-color: var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1));
 }
 
 :host([range][layout="horizontal"]) .calendar--start {