From 180023f0e82c185a726307aaa576dc3a2b20a6bd Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Fri, 24 Jan 2025 14:01:20 -0600
Subject: [PATCH 01/13] feat(date-picker): add component tokens

---
 .../date-picker-day/date-picker-day.scss      | 20 +++++----
 .../date-picker-month-header.scss             | 45 ++++++++++---------
 .../date-picker-month/date-picker-month.scss  |  4 +-
 .../components/date-picker/date-picker.scss   | 11 ++---
 .../src/components/select/select.scss         |  7 ++-
 5 files changed, 44 insertions(+), 43 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
index 1bccad93d51..6bbf78bcb48 100644
--- 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: var(--calcite-date-picker-day-background-color, none);
+  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);
   }
 }
@@ -85,14 +86,15 @@
 
 :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));
 }
 
+//range tokens
 :host([range-hover]:not([selected])) {
   .day {
-    @apply bg-foreground-2;
-    @apply text-color-1;
+    background-color: var(--calcite-color-foreground-2);
+    color: var(--calcite-color-text-1);
   }
 }
 
diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index b4b69aef37a..99e9cf3412b 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/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
@@ -68,18 +62,21 @@
     w-full 
     h-full;
   --calcite-internal-action-padding-block: 0;
+  --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);
+
   &:focus {
     @apply focus-inset;
   }
 
   &:hover,
   &:focus {
-    @apply text-color-1 bg-foreground-2 fill-color-1;
+    @apply fill-color-1;
   }
 
-  &:active {
-    @apply bg-foreground-3;
-  }
   &[aria-disabled="true"] {
     @apply pointer-events-none;
   }
@@ -109,10 +106,10 @@
 
 .year,
 .suffix {
-  @apply bg-foreground-1;
+  background-color: var(--calcite-date-picker-year-background-color, var(--calcite-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);
 }
@@ -123,8 +120,8 @@
   focus-base
   border-none
   inline-block
-  bg-transparent
   text-center;
+  background-color: var(--calcite-date-picker-year-background-color, var(--calcite-color-transparent));
   inline-size: #{$calcite-size-44};
   &:hover {
     @apply duration-100 ease-in-out;
@@ -139,20 +136,27 @@
 
 .month-select {
   --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-select-border-color: var(--calcite-date-picker-month-select-border-color, var(--calcite-color-transparent));
+
   --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 {
@@ -169,11 +173,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
index 7b714f306da..ceab3809af3 100644
--- 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 {
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 783823950e7..b0d7d0a7394 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -1,13 +1,8 @@
 :host {
   @extend %component-host;
-  @apply align-top
-    border
-    border-color-1
-    border-solid
-    inline-block
-    overflow-visible
-    rounded-none
-    w-full;
+  @apply align-top inline-block overflow-visible w-full border-solid border;
+  border-color: var(--calcite-date-picker-border-color, var(--calcite-color-border-1));
+  border-radius: var(--calcite-date-picker-corner-radius, 0);
 }
 
 :host([scale="s"]) {
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index c6850a11b78..9be181649aa 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -80,11 +80,11 @@
   font-size: var(--calcite-select-font-size, var(--calcite-internal-select-font-size));
   color: var(--calcite-select-text-color, var(--calcite-color-text-2));
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-width: var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));
+  border-width: var(--calcite-border-width-sm);
   padding-inline: var(--calcite-select-spacing-inline);
   padding-block: var(--calcite-internal-select-spacing-block);
   border-inline-end-width: theme("borderWidth.0");
-  line-height: var(--calcite-select-line-height, normal);
+  line-height: var(--calcite-internal-select-line-height, normal);
   &:focus {
     @apply focus-inset;
   }
@@ -99,8 +99,7 @@ select:disabled {
   @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
   inset-inline-end: theme("inset.0");
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-inline-width: theme("borderWidth.0")
-    var(--calcite-select-internal-icon-border-inline-end-width, theme("borderWidth.DEFAULT"));
+  border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
   padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
   .icon {
     color: var(--calcite-select-icon-color, var(--calcite-color-text-3));

From cf487fd93c4aa79f40cc123b04265900f9cdd960 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Fri, 24 Jan 2025 16:29:25 -0600
Subject: [PATCH 02/13] add range specific tokens

---
 .../date-picker-day/date-picker-day.scss      | 30 +++++++------------
 1 file changed, 10 insertions(+), 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
index 6bbf78bcb48..f2fc6b8a5e6 100644
--- 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));
   }
 }
 

From 221f17b74bb5a2aa37804686d99dcc7de3122d89 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 27 Jan 2025 11:41:04 -0600
Subject: [PATCH 03/13] add docs

---
 .../date-picker-month-header.scss             |  2 --
 .../components/date-picker/date-picker.scss   | 33 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index d316d38dead..6cadcad2097 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -105,7 +105,6 @@
 
 .year,
 .suffix {
-  background-color: var(--calcite-date-picker-year-background-color, var(--calcite-foreground-1));
   margin-inline: var(--calcite-spacing-xxs);
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));
@@ -120,7 +119,6 @@
   border-none
   inline-block
   text-center;
-  background-color: var(--calcite-date-picker-year-background-color, var(--calcite-color-transparent));
   inline-size: #{$calcite-size-44};
   &:hover {
     @apply duration-100 ease-in-out;
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index b0d7d0a7394..3ea67836209 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -1,3 +1,36 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-date-picker-border-color: Specifies the component's border color.
+ * @prop --calcite-date-picker-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-date-picker-week-header-text-color: Specifies the week header text color.
+ * @prop --calcite-date-picker-header-action-background-color: Specifies the background color of header action's of the component.
+ * @prop --calcite-date-picker-header-action-background-color-hover: Specifies the background color of header action's of the component when hovered.
+ * @prop --calcite-date-picker-header-action-background-color-press: Specifies the background color of header action's of the component when pressed.
+ * @prop --calcite-date-picker-header-action-text-color: Specifies the text color of header action's of the component.
+ * @prop --calcite-date-picker-header-action-text-color-press: Specifies the text color of header action's of the component when pressed.
+ * @prop --calcite-date-picker-year-text-color: Specifies the text color of year & suffix of the component.
+ * @prop --calcite-date-picker-month-select-font-size: Specifies the font size of month select of the component.
+ * @prop --calcite-date-picker-month-select-text-color: Specifies the text color of month select of the component.
+ * @prop --calcite-date-picker-month-select-icon-color: Specifies the icon color of month select of the component.
+ * @prop --calcite-date-picker-month-select-icon-color-hover: Specifies the icon color of month select of the component when hovered.
+ * @prop --calcite-date-picker-month-select-border-color: Specifies the border color of month select of the component.
+ * @prop --calcite-date-picker-day-background-color: Specifies the background color of day of the component.
+ * @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of day of the component when hovered.
+ * @prop --calcite-date-picker-day-text-color: Specifies the text color of day of the component.
+ * @prop --calcite-date-picker-day-text-color-hover: Specifies the text color of day of the component when hovered.
+ * @prop --calcite-date-picker-current-day-text-color: Specifies the text color of current day of the component.
+ * @prop --calcite-date-picker-day-background-color-selected: Specifies the background color of selected day of the component.
+ * @prop --calcite-date-picker-day-text-color-selected: Specifies the text color of selected day of the component.
+ * @prop --calcite-date-picker-day-range-text-color: Specifies the text color of select day range of the component.
+ * @prop --calcite-date-picker-day-range-background-color: Specifies the background color of select day range of the component.
+ * @prop --calcite-date-picker-day-range-inverted-background-color: Specifies the background color of inverted select day range of the component.
+ * @prop --calcite-date-picker-day-range-inverted-text-color: Specifies the text color of inverted select day range of the component.
+ * 
+*/
+
 :host {
   @extend %component-host;
   @apply align-top inline-block overflow-visible w-full border-solid border;

From 792e0c5a7cf584d18954858cd68b7cebf2d1c03a Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Tue, 28 Jan 2025 17:00:29 -0600
Subject: [PATCH 04/13] add e2e & story

---
 .../date-picker-day/date-picker-day.scss      |   7 +-
 .../date-picker-month/date-picker-month.scss  |   3 +-
 .../components/date-picker/date-picker.e2e.ts | 172 ++++++++++++++++++
 .../components/date-picker/date-picker.scss   |   5 +-
 .../src/custom-theme.stories.ts               |   3 +-
 .../src/custom-theme/date-picker.ts           |  39 +++-
 6 files changed, 222 insertions(+), 7 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
index f2fc6b8a5e6..53fa74da0ac 100644
--- 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
@@ -96,8 +96,11 @@
 
 :host([range-hover]:not([selected])) {
   .day {
-    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));
+    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));
   }
 }
 
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
index ceab3809af3..5c3112f38cf 100644
--- 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
@@ -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 {
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
index 2d0d76ec253..2bb2149e66d 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
@@ -8,6 +8,7 @@ import { formatTimePart } from "../../utils/time";
 import { Position } from "../interfaces";
 import { CSS as MONTH_CSS } from "../date-picker-month/resources";
 import { CSS as MONTH_HEADER_CSS } from "../date-picker-month-header/resources";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import type { DatePicker } from "./date-picker";
 
 describe("calcite-date-picker", () => {
@@ -1032,6 +1033,177 @@ describe("calcite-date-picker", () => {
     await page.waitForChanges();
     expect(await datePicker.getProperty("value")).toEqual(["2020-09-15", "2020-09-30"]);
   });
+
+  describe("theme", () => {
+    describe("default", async () => {
+      const datePickerHTML: string = html`<calcite-date-picker></calcite-date-picker>`;
+      const componentTokens: ComponentTestTokens = {
+        "--calcite-date-picker-border-color": {
+          selector: "calcite-date-picker",
+          targetProp: "borderColor",
+        },
+        "--calcite-date-picker-corner-radius": {
+          selector: "calcite-date-picker",
+          targetProp: "borderRadius",
+        },
+        "--calcite-date-picker-week-header-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `.${MONTH_CSS.weekHeader}`,
+          targetProp: "color",
+        },
+        "--calcite-date-picker-header-action-background-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} >>> calcite-action`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-date-picker-header-action-background-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-background-color-hover",
+          state: "hover",
+        },
+        "--calcite-date-picker-header-action-background-color-press": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-background-color-press",
+          state: { press: { attribute: "class", value: `${MONTH_HEADER_CSS.chevron}` } },
+        },
+        "--calcite-date-picker-header-action-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-date-picker-header-action-text-color-press": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-text-color-press",
+          state: { press: { attribute: "class", value: `${MONTH_HEADER_CSS.chevron}` } },
+        },
+        "--calcite-date-picker-year-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>>  input`,
+          targetProp: "color",
+        },
+        "--calcite-date-picker-month-select-font-size": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-font-size",
+        },
+        "--calcite-date-picker-month-select-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-text-color",
+        },
+        "--calcite-date-picker-month-select-icon-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-icon-color",
+        },
+        "--calcite-date-picker-month-select-icon-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-icon-color-hover",
+          state: "hover",
+        },
+        "--calcite-date-picker-month-select-border-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-border-color",
+        },
+        "--calcite-date-picker-day-background-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day >>> .day`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-date-picker-day-background-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day >>> .day`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-date-picker-day-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day >>> .day`,
+          targetProp: "color",
+        },
+        "--calcite-date-picker-day-text-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day >>> .day`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-date-picker-current-day-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day.${MONTH_CSS.currentDay} >>> .day`,
+          targetProp: "color",
+        },
+      };
+      themed(datePickerHTML, componentTokens);
+    });
+
+    describe("selected", () => {
+      const datePickerHTML: string = html`<calcite-date-picker value="2024-01-31"></calcite-date-picker>`;
+      const componentTokens: ComponentTestTokens = {
+        "--calcite-date-picker-day-background-color-selected": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[selected] >>> .day`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-date-picker-day-text-color-selected": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[selected] >>> .day`,
+          targetProp: "color",
+        },
+      };
+      themed(datePickerHTML, componentTokens);
+    });
+
+    describe("range", () => {
+      const rangeDatePickerHTML: string = html`
+        <calcite-date-picker range></calcite-date-picker>
+        <script>
+          const datePicker = document.querySelector("calcite-date-picker");
+          datePicker.value = ["2025-01-01", "2025-02-20"];
+        </script>
+      `;
+      const componentTokens: ComponentTestTokens = {
+        "--calcite-date-picker-range-calendar-divider-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> .${MONTH_CSS.calendarStart}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-date-picker-day-range-text-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[highlighted] >>> .day`,
+          targetProp: "color",
+        },
+        "--calcite-date-picker-day-range-background-color": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[highlighted] >>> .day`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-date-picker-day-outside-range-background-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[id='20250105'] >>> .day`,
+          targetProp: "backgroundColor",
+          state: {
+            hover:
+              "calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250106'] >>> .day",
+          },
+        },
+        "--calcite-date-picker-day-outside-range-text-color-hover": {
+          selector: "calcite-date-picker",
+          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day[id='20250105'] >>> .day`,
+          targetProp: "color",
+          state: {
+            hover:
+              "calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250106'] >>> .day",
+          },
+        },
+      };
+      themed(rangeDatePickerHTML, componentTokens);
+    });
+  });
 });
 
 async function setActiveDate(page: E2EPage, date: string): Promise<void> {
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 3ea67836209..b9a47a9b987 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -5,6 +5,7 @@
  *
  * @prop --calcite-date-picker-border-color: Specifies the component's border color.
  * @prop --calcite-date-picker-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-date-picker-range-calendar-divider-color: Specifies the divider color between calendar's when `range="true"`.
  * @prop --calcite-date-picker-week-header-text-color: Specifies the week header text color.
  * @prop --calcite-date-picker-header-action-background-color: Specifies the background color of header action's of the component.
  * @prop --calcite-date-picker-header-action-background-color-hover: Specifies the background color of header action's of the component when hovered.
@@ -26,8 +27,8 @@
  * @prop --calcite-date-picker-day-text-color-selected: Specifies the text color of selected day of the component.
  * @prop --calcite-date-picker-day-range-text-color: Specifies the text color of select day range of the component.
  * @prop --calcite-date-picker-day-range-background-color: Specifies the background color of select day range of the component.
- * @prop --calcite-date-picker-day-range-inverted-background-color: Specifies the background color of inverted select day range of the component.
- * @prop --calcite-date-picker-day-range-inverted-text-color: Specifies the text color of inverted select day range of the component.
+ * @prop --calcite-date-picker-day-outside-range-background-color-hover: Specifies the background color of day's outside curent range when hovered.
+ * @prop --calcite-date-picker-day-outside-range-text-color-hover: Specifies the text color of day's outside curent range when hovered.
  * 
 */
 
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index deb7ca35fe5..87a88644ce8 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -22,7 +22,7 @@ import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem } from "./custom-theme/combobox-item";
-import { datePicker } from "./custom-theme/date-picker";
+import { datePicker, datePickerTokens } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
@@ -162,6 +162,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...datePickerTokens,
   ...handleTokens,
   ...graphTokens,
   ...inputTokens,
diff --git a/packages/calcite-components/src/custom-theme/date-picker.ts b/packages/calcite-components/src/custom-theme/date-picker.ts
index 8cdcb71fe2f..9d3f20a411b 100644
--- a/packages/calcite-components/src/custom-theme/date-picker.ts
+++ b/packages/calcite-components/src/custom-theme/date-picker.ts
@@ -1,3 +1,40 @@
 import { html } from "../../support/formatting";
 
-export const datePicker = html`<calcite-date-picker scale="m" value="2020-11-27"></calcite-date-picker>`;
+export const datePickerTokens = {
+  calciteDatePickerBorderColor: "",
+  calciteDatePickerCornerRadius: "",
+  calciteDatePickerRangeCalendarDividerColor: "",
+  calciteDatePickerWeekHeaderTextColor: "",
+  calciteDatePickerHeaderActionBackgroundColor: "",
+  calciteDatePickerHeaderActionBackgroundColorHover: "",
+  calciteDatePickerHeaderActionBackgroundColorPress: "",
+  calciteDatePickerHeaderActionTextColor: "",
+  calciteDatePickerHeaderActionTextColorPress: "",
+  calciteDatePickerYearTextColor: "",
+  calciteDatePickerMonthSelectFontSize: "",
+  calciteDatePickerMonthSelectTextColor: "",
+  calciteDatePickerMonthSelectIconColor: "",
+  calciteDatePickerMonthSelectIconColorHover: "",
+  calciteDatePickerMonthSelectBorderColor: "",
+  calciteDatePickerDayBackgroundColor: "",
+  calciteDatePickerDayBackgroundColorHover: "",
+  calciteDatePickerDayTextColor: "",
+  calciteDatePickerDayTextColorHover: "",
+  calciteDatePickerCurrentDayTextColor: "",
+  calciteDatePickerDayBackgroundColorSelected: "",
+  calciteDatePickerDayTextColorSelected: "",
+  calciteDatePickerDayRangeTextColor: "",
+  calciteDatePickerDayRangeBackgroundColor: "",
+  calciteDatePickerDayOutsideRangeBackgroundColorHover: "",
+  calciteDatePickerDayOutsideRangeTextColorHover: "",
+};
+
+export const datePicker = html`
+  <calcite-date-picker value="2020-11-27"></calcite-date-picker>
+  <br />
+  <calcite-date-picker range></calcite-date-picker>
+  <script>
+    const datePicker = document.querySelector("calcite-date-picker[range]");
+    datePicker.value = ["2025-01-01", "2025-02-20"];
+  </script>
+`;

From 18c9ad8cd4e50bfbc6bd950502f01c5f7a049e79 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 11:14:18 -0600
Subject: [PATCH 05/13] refactor

---
 .../src/custom-theme.stories.ts                 | 17 +++++++++++++----
 .../src/custom-theme/date-picker.ts             |  6 +++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 87a88644ce8..7f1a9803c3c 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -22,7 +22,7 @@ import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem } from "./custom-theme/combobox-item";
-import { datePicker, datePickerTokens } from "./custom-theme/date-picker";
+import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
@@ -114,6 +114,12 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       .demo-column > * {
         margin-bottom: 2rem;
       }
+      .demo-row {
+        display: flex;
+      }
+      .demo-row > .demo-column {
+        flex: 0 0 auto;
+      }
     </style>
     <div class="demo">
       <div class="demo-column">
@@ -133,9 +139,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${chips} ${pagination} ${slider}
       </div>
       <div class="demo-column">
-        ${datePicker} ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon}
-        ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip}
-        ${comboboxItem}
+        ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
+        ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
       </div>
       <div class="demo-column">
         ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating}
@@ -143,6 +148,10 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
       <div class="demo-column">${menuItem}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${datePicker}</div>
+      <div class="demo-column">${datePickerRange}</div>
+    </div>
   </div>`;
 
 const componentTokens = {
diff --git a/packages/calcite-components/src/custom-theme/date-picker.ts b/packages/calcite-components/src/custom-theme/date-picker.ts
index 9d3f20a411b..586c345ca98 100644
--- a/packages/calcite-components/src/custom-theme/date-picker.ts
+++ b/packages/calcite-components/src/custom-theme/date-picker.ts
@@ -29,9 +29,9 @@ export const datePickerTokens = {
   calciteDatePickerDayOutsideRangeTextColorHover: "",
 };
 
-export const datePicker = html`
-  <calcite-date-picker value="2020-11-27"></calcite-date-picker>
-  <br />
+export const datePicker = html` <calcite-date-picker value="2020-11-27"></calcite-date-picker> `;
+
+export const datePickerRange = html`
   <calcite-date-picker range></calcite-date-picker>
   <script>
     const datePicker = document.querySelector("calcite-date-picker[range]");

From 31ad38c389dacb453895161dd846daf92ef2c857 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 12:06:46 -0600
Subject: [PATCH 06/13] fix typo

---
 .../src/components/date-picker/date-picker.scss               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index b9a47a9b987..707b6bda7de 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -27,8 +27,8 @@
  * @prop --calcite-date-picker-day-text-color-selected: Specifies the text color of selected day of the component.
  * @prop --calcite-date-picker-day-range-text-color: Specifies the text color of select day range of the component.
  * @prop --calcite-date-picker-day-range-background-color: Specifies the background color of select day range of the component.
- * @prop --calcite-date-picker-day-outside-range-background-color-hover: Specifies the background color of day's outside curent range when hovered.
- * @prop --calcite-date-picker-day-outside-range-text-color-hover: Specifies the text color of day's outside curent range when hovered.
+ * @prop --calcite-date-picker-day-outside-range-background-color-hover: Specifies the background color of day's outside current range when hovered.
+ * @prop --calcite-date-picker-day-outside-range-text-color-hover: Specifies the text color of day's outside current range when hovered.
  * 
 */
 

From 406a5cf1719870d24208332230e5ff950de38bab Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 12:25:36 -0600
Subject: [PATCH 07/13] cleanup

---
 .../date-picker-month-header/date-picker-month-header.scss   | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index 6cadcad2097..ca66631c844 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -71,11 +71,6 @@
     @apply focus-inset;
   }
 
-  &:hover,
-  &:focus {
-    @apply fill-color-1;
-  }
-
   &[aria-disabled="true"] {
     @apply pointer-events-none;
   }

From a7f3b60c8dfecfd401e4d3e8392e3ace44a7c906 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 15:27:38 -0600
Subject: [PATCH 08/13] debug screenshot tests

---
 .../src/components/date-picker-day/date-picker-day.scss    | 2 +-
 .../calcite-components/src/components/select/select.scss   | 7 ++++---
 2 files changed, 5 insertions(+), 4 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
index 53fa74da0ac..d7fe912ba2e 100644
--- 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
@@ -26,7 +26,7 @@
   line-height: var(--calcite-font-line-height-fixed-base);
   block-size: var(--calcite-internal-day-size);
   outline-color: var(--calcite-color-transparent);
-  background: var(--calcite-date-picker-day-background-color, none);
+  background-color: var(--calcite-date-picker-day-background-color);
   color: var(--calcite-date-picker-day-text-color, var(--calcite-color-text-3));
 }
 
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index 9be181649aa..01a782782ba 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -80,10 +80,11 @@
   font-size: var(--calcite-select-font-size, var(--calcite-internal-select-font-size));
   color: var(--calcite-select-text-color, var(--calcite-color-text-2));
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-width: var(--calcite-border-width-sm);
+  //debug
+  border-width: 0;
   padding-inline: var(--calcite-select-spacing-inline);
   padding-block: var(--calcite-internal-select-spacing-block);
-  border-inline-end-width: theme("borderWidth.0");
+  border-inline-end-width: 0;
   line-height: var(--calcite-internal-select-line-height, normal);
   &:focus {
     @apply focus-inset;
@@ -99,7 +100,7 @@ select:disabled {
   @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
   inset-inline-end: theme("inset.0");
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
+  border-inline-width: 0 var(--calcite-spacing-px);
   padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
   .icon {
     color: var(--calcite-select-icon-color, var(--calcite-color-text-3));

From 6b6f4347b13f42594aee08be71332a837bc48d02 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 16:22:04 -0600
Subject: [PATCH 09/13] refactor

---
 .../calcite-components/src/components/select/select.scss     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index 01a782782ba..e89aca10b25 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -80,8 +80,7 @@
   font-size: var(--calcite-select-font-size, var(--calcite-internal-select-font-size));
   color: var(--calcite-select-text-color, var(--calcite-color-text-2));
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  //debug
-  border-width: 0;
+  border-width: var(--calcite-border-width-sm);
   padding-inline: var(--calcite-select-spacing-inline);
   padding-block: var(--calcite-internal-select-spacing-block);
   border-inline-end-width: 0;
@@ -100,7 +99,7 @@ select:disabled {
   @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
   inset-inline-end: theme("inset.0");
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-inline-width: 0 var(--calcite-spacing-px);
+  border-inline-width: 0 var(--calcite-border-width-sm);
   padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
   .icon {
     color: var(--calcite-select-icon-color, var(--calcite-color-text-3));

From 9c5c2941338e0ab6a18648c6a3546886c675b676 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 Jan 2025 16:42:07 -0600
Subject: [PATCH 10/13] add demo

---
 .../src/demos/date-picker.html                | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html
index 57583066433..43d735ac16c 100644
--- a/packages/calcite-components/src/demos/date-picker.html
+++ b/packages/calcite-components/src/demos/date-picker.html
@@ -215,6 +215,43 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
         <div class="child" id="localeDatePickerContainerS"></div>
         <div class="child" id="localeDatePickerContainerL"></div>
       </div>
+
+      <hr />
+      <!-- Theme-ing -->
+
+      <div class="parent">
+        <div class="child right-aligned-text">Theme</div>
+        <demo-theme
+          tokens="--calcite-date-picker-border-color: red;
+    --calcite-date-picker-corner-radius: 22px;
+    --calcite-date-picker-range-calendar-divider-color: blue;
+    --calcite-date-picker-week-header-text-color: green;
+    --calcite-date-picker-header-action-background-color: pink;
+    --calcite-date-picker-header-action-background-color-hover: yellow;
+    --calcite-date-picker-header-action-background-color-press: blue;
+    --calcite-date-picker-header-action-text-color: orange;
+    --calcite-date-picker-header-action-text-color-press: red;
+    --calcite-date-picker-year-text-color: purple;
+    --calcite-date-picker-month-select-text-color: purple;
+    --calcite-date-picker-month-select-icon-color: orange;
+    --calcite-date-picker-month-select-icon-color-hover: red;
+    --calcite-date-picker-month-select-border-color: grey;
+    --calcite-date-picker-day-background-color: yellow;
+    --calcite-date-picker-day-background-color-hover: red;
+    --calcite-date-picker-day-text-color: green;
+    --calcite-date-picker-day-text-color-hover: orange;
+    --calcite-date-picker-current-day-text-color: red;
+    --calcite-date-picker-day-background-color-selected: skyblue;
+    --calcite-date-picker-day-text-color-selected: blue;
+    --calcite-date-picker-day-range-text-color: blue;
+    --calcite-date-picker-day-range-background-color: orange;
+    --calcite-date-picker-day-outside-range-background-color-hover: red;
+    --calcite-date-picker-day-outside-range-text-color-hover: white"
+        >
+          <calcite-date-picker></calcite-date-picker>
+          <calcite-date-picker range id="theme"></calcite-date-picker>
+        </demo-theme>
+      </div>
       <script type="module">
         import { locales } from "./_assets/locales.ts";
 
@@ -284,6 +321,9 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
         );
 
         createLocaleDatePicker({ lang: selectedLang, numberingSystem: selectedNumberingSystem });
+
+        const themedDatePicker = document.getElementById("theme");
+        themedDatePicker.value = ["2025-01-15", "2025-02-15"];
       </script>
     </demo-dom-swapper>
   </body>

From 003c4cb97809a9e75e0e413fcc8add9791666e6c Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 5 Feb 2025 16:58:09 -0600
Subject: [PATCH 11/13] remove month select border color token

---
 .../date-picker-month-header/date-picker-month-header.scss   | 3 ++-
 .../src/components/date-picker/date-picker.e2e.ts            | 5 -----
 .../src/components/date-picker/date-picker.scss              | 1 -
 packages/calcite-components/src/custom-theme/date-picker.ts  | 1 -
 packages/calcite-components/src/demos/date-picker.html       | 1 -
 5 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index ca66631c844..15d7a4745ed 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -127,12 +127,13 @@
 }
 
 .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-select-border-color: var(--calcite-date-picker-month-select-border-color, var(--calcite-color-transparent));
 
   --calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
index 2bb2149e66d..7f430f55798 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
@@ -1105,11 +1105,6 @@ describe("calcite-date-picker", () => {
           targetProp: "--calcite-select-icon-color-hover",
           state: "hover",
         },
-        "--calcite-date-picker-month-select-border-color": {
-          selector: "calcite-date-picker",
-          shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
-          targetProp: "--calcite-select-border-color",
-        },
         "--calcite-date-picker-day-background-color": {
           selector: "calcite-date-picker",
           shadowSelector: `calcite-date-picker-month >>> calcite-date-picker-day >>> .day`,
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 707b6bda7de..29665e22f3a 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -17,7 +17,6 @@
  * @prop --calcite-date-picker-month-select-text-color: Specifies the text color of month select of the component.
  * @prop --calcite-date-picker-month-select-icon-color: Specifies the icon color of month select of the component.
  * @prop --calcite-date-picker-month-select-icon-color-hover: Specifies the icon color of month select of the component when hovered.
- * @prop --calcite-date-picker-month-select-border-color: Specifies the border color of month select of the component.
  * @prop --calcite-date-picker-day-background-color: Specifies the background color of day of the component.
  * @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of day of the component when hovered.
  * @prop --calcite-date-picker-day-text-color: Specifies the text color of day of the component.
diff --git a/packages/calcite-components/src/custom-theme/date-picker.ts b/packages/calcite-components/src/custom-theme/date-picker.ts
index 586c345ca98..b8ef9202579 100644
--- a/packages/calcite-components/src/custom-theme/date-picker.ts
+++ b/packages/calcite-components/src/custom-theme/date-picker.ts
@@ -15,7 +15,6 @@ export const datePickerTokens = {
   calciteDatePickerMonthSelectTextColor: "",
   calciteDatePickerMonthSelectIconColor: "",
   calciteDatePickerMonthSelectIconColorHover: "",
-  calciteDatePickerMonthSelectBorderColor: "",
   calciteDatePickerDayBackgroundColor: "",
   calciteDatePickerDayBackgroundColorHover: "",
   calciteDatePickerDayTextColor: "",
diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html
index 43d735ac16c..a9029df6886 100644
--- a/packages/calcite-components/src/demos/date-picker.html
+++ b/packages/calcite-components/src/demos/date-picker.html
@@ -235,7 +235,6 @@ <h1 style="margin: 0 auto; text-align: center">Date-picker</h1>
     --calcite-date-picker-month-select-text-color: purple;
     --calcite-date-picker-month-select-icon-color: orange;
     --calcite-date-picker-month-select-icon-color-hover: red;
-    --calcite-date-picker-month-select-border-color: grey;
     --calcite-date-picker-day-background-color: yellow;
     --calcite-date-picker-day-background-color-hover: red;
     --calcite-date-picker-day-text-color: green;

From e75f7a49b674a00f4aeeaed54112171e6b1efced Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 5 Feb 2025 17:50:34 -0600
Subject: [PATCH 12/13] revert select changes

---
 .../calcite-components/src/components/select/select.scss     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index e89aca10b25..aeafa4414e7 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -80,7 +80,7 @@
   font-size: var(--calcite-select-font-size, var(--calcite-internal-select-font-size));
   color: var(--calcite-select-text-color, var(--calcite-color-text-2));
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-width: var(--calcite-border-width-sm);
+  border-width: var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));
   padding-inline: var(--calcite-select-spacing-inline);
   padding-block: var(--calcite-internal-select-spacing-block);
   border-inline-end-width: 0;
@@ -99,7 +99,8 @@ select:disabled {
   @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
   inset-inline-end: theme("inset.0");
   border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
-  border-inline-width: 0 var(--calcite-border-width-sm);
+  border-inline-width: theme("borderWidth.0")
+    var(--calcite-select-internal-icon-border-inline-end-width, theme("borderWidth.DEFAULT"));
   padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
   .icon {
     color: var(--calcite-select-icon-color, var(--calcite-color-text-3));

From 5d460d2f5e1688ae5966b845d06221840cdebb14 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 5 Feb 2025 18:09:43 -0600
Subject: [PATCH 13/13] fix darkmode

---
 .../date-picker-month-header/date-picker-month-header.scss       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index 15d7a4745ed..d912aec38a5 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -113,6 +113,7 @@
   focus-base
   border-none
   inline-block
+  bg-transparent
   text-center;
   inline-size: #{$calcite-size-44};
   &:hover {