diff --git a/packages/calcite-components/CHANGELOG_BETA.md b/packages/calcite-components/CHANGELOG_BETA.md
index 4e8510bf6e5..54d71c203f2 100644
--- a/packages/calcite-components/CHANGELOG_BETA.md
+++ b/packages/calcite-components/CHANGELOG_BETA.md
@@ -203,7 +203,7 @@ See [`CHANGELOG.md`](./CHANGELOG.md) for post-v1 changes.
     set to `hex` by default.
   - Removed ,`intlNoColor` property.
 
-  *note: color-picker-hex-input is `internal` component.*
+  _note: color-picker-hex-input is `internal` component._
 
 - **color-picker:**
   - Removed the property `intlB` , use `messsageOverrides.b` instead.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index 74d401644de..d42d0d8bcb3 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -13,10 +13,12 @@ import {
   openClose,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { findAll, getFocusedElementProp, isElementFocused, skipAnimations } from "../../tests/utils/puppeteer";
 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 { CSS, POSITION } from "./resources";
 import type { InputDatePicker } from "./input-date-picker";
@@ -2148,6 +2150,213 @@ describe("calcite-input-date-picker", () => {
     expect(await calendar.isVisible()).toBe(false);
     expect(await isElementFocused(page, "#input")).toBe(true);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-input-date-picker></calcite-input-date-picker>`, {
+        "--calcite-input-date-picker-shadow": {
+          targetProp: "boxShadow",
+        },
+        "--calcite-input-date-picker-calendar-shadow": {
+          targetProp: "boxShadow",
+        },
+        "--calcite-input-date-picker-actions-icon-color": {
+          shadowSelector: `.${CSS.inputWrapper} .${CSS.chevronIcon}`,
+          targetProp: "color",
+        },
+        "--calcite-input-date-picker-actions-icon-color-hover": {
+          shadowSelector: `.${CSS.inputWrapper} .${CSS.chevronIcon}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-input-date-picker-background-color": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-background-color",
+        },
+        "--calcite-input-date-picker-border-color": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-border-color",
+        },
+        "--calcite-input-date-picker-corner-radius": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-corner-radius",
+        },
+        "--calcite-input-date-picker-icon-color": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-icon-color",
+        },
+        "--calcite-input-date-picker-icon-color-hover": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-icon-color-hover",
+        },
+        "--calcite-input-date-picker-text-color": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-text-color",
+        },
+        "--calcite-input-date-picker-placeholder-text-color": {
+          shadowSelector: `.${CSS.input}`,
+          targetProp: "--calcite-input-placeholder-text-color",
+        },
+        "--calcite-input-date-picker-calendar-border-color": {
+          shadowSelector: "calcite-date-picker",
+          targetProp: "--calcite-date-picker-border-color",
+        },
+        "--calcite-input-date-picker-calendar-corner-radius": {
+          shadowSelector: "calcite-date-picker",
+          targetProp: "--calcite-date-picker-corner-radius",
+        },
+      });
+    });
+
+    describe("calcite-date-picker when open", () => {
+      themed(html`<calcite-input-date-picker open></calcite-input-date-picker>`, {
+        "--calcite-input-date-picker-calendar-text-color": [
+          {
+            shadowSelector: `calcite-date-picker >>> .${MONTH_CSS.weekHeader}`,
+            targetProp: "--calcite-date-picker-week-header-text-color",
+          },
+          {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> input`,
+            targetProp: "--calcite-date-picker-year-text-color",
+          },
+        ],
+        "--calcite-input-date-picker-calendar-actions-background-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} >>> calcite-action`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-input-date-picker-calendar-actions-background-color-hover": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-background-color-hover",
+          state: "hover",
+        },
+        "--calcite-input-date-picker-calendar-actions-background-color-press": {
+          shadowSelector: `calcite-date-picker >>> 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-input-date-picker-calendar-actions-text-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> .${MONTH_HEADER_CSS.chevronContainer} > calcite-action`,
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-input-date-picker-calendar-actions-text-color-press": {
+          shadowSelector: `calcite-date-picker >>> 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-input-date-picker-calendar-month-select-text-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-text-color",
+        },
+        "--calcite-input-date-picker-calendar-icon-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-icon-color",
+        },
+        "--calcite-input-date-picker-calendar-icon-color-hover": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-month-header >>> calcite-select`,
+          targetProp: "--calcite-select-icon-color-hover",
+          state: "hover",
+        },
+        "--calcite-input-date-picker-calendar-day-background-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day`,
+          targetProp: "--calcite-date-picker-day-background-color",
+        },
+        "--calcite-input-date-picker-calendar-day-background-color-hover": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day`,
+          targetProp: "--calcite-date-picker-day-background-color-hover",
+          state: "hover",
+        },
+        "--calcite-input-date-picker-calendar-day-text-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day`,
+          targetProp: "--calcite-date-picker-day-text-color",
+        },
+        "--calcite-input-date-picker-calendar-day-text-color-hover": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day`,
+          targetProp: "--calcite-date-picker-day-text-color-hover",
+          state: "hover",
+        },
+        "--calcite-input-date-picker-calendar-day-current-text-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day.${MONTH_CSS.currentDay}`,
+          targetProp: "--calcite-date-picker-current-day-text-color",
+        },
+      });
+    });
+
+    describe("selected", () => {
+      themed(html`<calcite-input-date-picker value="2024-01-31" open></calcite-input-date-picker>`, {
+        "--calcite-input-date-picker-calendar-selected-background-color": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[selected]`,
+          targetProp: "--calcite-date-picker-day-background-color-selected",
+        },
+        "--calcite-input-date-picker-calendar-day-text-color-selected": {
+          shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[selected]`,
+          targetProp: "--calcite-date-picker-day-text-color-selected",
+        },
+      });
+    });
+
+    describe("range", () => {
+      themed(
+        async () => {
+          const page = await newE2EPage();
+          await page.setContent(html`<calcite-input-date-picker range open></calcite-input-date-picker>`);
+          await page.$eval("calcite-input-date-picker", (el: InputDatePicker["el"]) => {
+            el.value = ["2025-01-01", "2025-02-20"];
+          });
+          await page.waitForChanges();
+          return { tag: "calcite-input-date-picker", page };
+        },
+        {
+          "--calcite-input-date-picker-border-color": {
+            shadowSelector: `.${CSS.dividerContainer}`,
+            targetProp: "borderColor",
+          },
+          "--calcite-input-date-picker-background-color": {
+            shadowSelector: `.${CSS.dividerContainer}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-input-date-picker-calendar-range-divider-color": {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month`,
+            targetProp: "--calcite-date-picker-range-calendar-divider-color",
+          },
+          "--calcite-input-date-picker-calendar-day-range-text-color": {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[highlighted]`,
+            targetProp: "--calcite-date-picker-day-range-text-color",
+          },
+          "--calcite-input-date-picker-calendar-selected-background-color": {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[highlighted]`,
+            targetProp: "--calcite-date-picker-day-range-background-color",
+          },
+          "--calcite-input-date-picker-calendar-day-outside-range-background-color-hover": {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250105']`,
+            targetProp: "--calcite-date-picker-day-outside-range-background-color-hover",
+            state: {
+              hover: `calcite-input-date-picker >>> calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250106']`,
+            },
+          },
+          "--calcite-input-date-picker-calendar-day-outside-range-text-color-hover": {
+            shadowSelector: `calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250105']`,
+            targetProp: "--calcite-date-picker-day-outside-range-text-color-hover",
+            state: {
+              hover: `calcite-input-date-picker >>> calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day[id='20250106']`,
+            },
+          },
+        },
+      );
+    });
+
+    describe("range with vertical layout", () => {
+      themed(html`<calcite-input-date-picker range layout="vertical"></calcite-input-date-picker>`, {
+        "--calcite-input-date-picker-background-color": {
+          shadowSelector: `.${CSS.verticalChevronContainer}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-input-date-picker-border-color": {
+          shadowSelector: `.${CSS.verticalChevronContainer}`,
+          targetProp: "borderColor",
+        },
+      });
+    });
+  });
 });
 
 describe("proximitySelectionDisabled", () => {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 04502437d60..0a922c064a1 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -1,3 +1,57 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ * 
+ * @prop --calcite-input-date-picker-border-color: Specifies the component's input border color.
+ * @prop --calcite-input-date-picker-divider-color: Specifies the component's divider color between two inputs when in range mode.
+ *
+ * @prop --calcite-input-date-picker-shadow: Specifies the component's input shadow.
+ * @prop --calcite-input-date-picker-calendar-shadow: the component's calendar shadow.
+ * 
+ * @prop --calcite-input-date-picker-icon-color: Specifies the component's in-field input icon color.
+ * @prop --calcite-input-date-picker-icon-color-hover: Specifies the component's in-field input icon color on hover.
+ * @prop --calcite-input-date-picker-actions-icon-color: Specifies the component's actions icon color.
+ * @prop --calcite-input-date-picker-actions-icon-color-hover: Specifies the component's actions icon color on hover.
+ * @prop --calcite-input-date-picker-calendar-icon-color: Specifies the component's calendar icon color.
+ * @prop --calcite-input-date-picker-calendar-icon-color-hover: Specifies the component's calendar icon color.
+ * 
+ * @prop --calcite-input-date-picker-background-color: Specifies the component's input background color.
+ * @prop --calcite-input-date-picker-calendar-actions-background-color: Specifies the background color of actions of the calendar.
+ * @prop --calcite-input-date-picker-calendar-actions-background-color-hover: Specifies the background color of actions of the calendar when hovered.
+ * @prop --calcite-input-date-picker-calendar-actions-background-color-press: Specifies the background color of actions of the calendar when pressed.
+ * @prop --calcite-input-date-picker-calendar-selected-background-color: Specifies the background color of selected day and day range of the calendar.
+ * @prop --calcite-input-date-picker-calendar-day-background-color: Specifies the background color of day of the calendar.
+ * @prop --calcite-input-date-picker-calendar-day-background-color-hover: Specifies the background color of day of the calendar when hovered.
+ * @prop --calcite-input-date-picker-calendar-day-outside-range-background-color-hover: Specifies the background color of day's outside current range of the component's date-picker when hovered.
+ * 
+ * @prop --calcite-input-date-picker-corner-radius: Specifies the component's input corner radius.
+ * @prop --calcite-input-date-picker-calendar-corner-radius: Specifies the component's calendar corner radius.
+ *
+ * @prop --calcite-input-date-picker-text-color: Specifies the component's input text color.
+ * @prop --calcite-input-date-picker-placeholder-text-color: Specifies the component's input placeholder text color.
+ * @prop --calcite-input-date-picker-calendar-actions-text-color: Specifies the text color of the component's calendar actions.
+ * @prop --calcite-input-date-picker-calendar-actions-text-color-press: Specifies the text color of the component's calendar actions when pressed.
+ * @prop --calcite-input-date-picker-calendar-text-color: Specifies the text color of the component's calendar week, year & suffix.
+ * @prop --calcite-input-date-picker-calendar-month-select-text-color: Specifies the text color of month select of the component's date-picker.
+ * @prop --calcite-input-date-picker-calendar-day-text-color: Specifies the text color of day of the component's date-picker.
+ * @prop --calcite-input-date-picker-calendar-day-text-color-hover: Specifies the text color of day of the component's date-picker when hovered.
+ * @prop --calcite-input-date-picker-calendar-day-current-text-color: Specifies the text color of current day of the component's date-picker.
+ * @prop --calcite-input-date-picker-calendar-day-text-color-selected: Specifies the text color of selected day of the component's date-picker.
+ * @prop --calcite-input-date-picker-calendar-day-range-text-color: Specifies the text color of select day range of the component's date-picker.
+ * @prop --calcite-input-date-picker-calendar-day-outside-range-text-color-hover: Specifies the text color of day's outside current range of the component's date-picker when hovered.
+ *
+ * @prop --calcite-input-date-picker-calendar-border-color: Specifies the component's calendar border color.
+ * @prop --calcite-input-date-picker-calendar-range-divider-color: Specifies the divider color between the component's date-picker 
+ */
+
+// AUTO-GENERATED — do not modify. Changes will be overwritten.
+//
+// Internal CSS custom properties for component use only. Overwriting is not recommended.
+//
+// --calcite-internal-date-picker-toggle-spacing
+// --calcite-internal-input-text-input-padding-inline-end
+
 :host {
   @extend %component-spacing;
   @include floating-ui-elem-anim(".menu-container");
@@ -5,33 +59,36 @@
     inline-block
     w-full
     overflow-visible
-    align-top
-    shadow-none;
+    align-top;
+
+  box-shadow: var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none));
 }
 
 @function get-trailing-text-input-padding($chevron-spacing) {
-  @return calc(var(--calcite-toggle-spacing) + $chevron-spacing);
+  @return calc(var(--calcite-internal-date-picker-toggle-spacing) + $chevron-spacing);
 }
 
 :host([scale="s"]) {
-  --calcite-toggle-spacing: theme("spacing.2");
-  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.4"))};
+  --calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-sm);
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(var(--calcite-spacing-lg))};
 }
 
 :host([scale="m"]) {
-  --calcite-toggle-spacing: theme("spacing.3");
-  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.6"))};
+  --calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-md);
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(var(--calcite-spacing-xxl))};
 }
 
 :host([scale="l"]) {
-  --calcite-toggle-spacing: theme("spacing.4");
-  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.8"))};
+  --calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-lg);
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(
+      var(--calcite-spacing-xxxl)
+    )};
 }
 
 @include disabled();
 
 .calendar-wrapper {
-  @apply shadow-none;
+  box-shadow: var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));
   transform: translate3d(0, 0, 0);
 }
 
@@ -39,17 +96,17 @@
   @apply relative;
 
   .chevron-icon {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3));
   }
 
   &:focus-within,
   &:active,
   &:hover {
     .chevron-icon {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1));
     }
     ~ .input-wrapper .chevron-icon {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1));
     }
   }
 }
@@ -58,7 +115,7 @@
   @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
   inset-block: 0;
-  padding-inline: var(--calcite-toggle-spacing);
+  padding-inline: var(--calcite-internal-date-picker-toggle-spacing);
 }
 
 :host([range]) {
@@ -76,22 +133,26 @@
 }
 
 .divider-container {
-  @apply flex items-stretch border-color-input
+  @apply flex items-stretch
   border
   border-l-0
   border-r-0
   border-solid;
-  background-color: var(--calcite-color-foreground-1);
+
+  background-color: var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input));
 }
 
 :host([layout="horizontal"]) .divider-container {
-  @apply w-px;
+  inline-size: var(--calcite-spacing-px);
 }
 
 .divider {
-  @apply inline-block w-px;
+  @apply inline-block;
+
   margin-block: var(--calcite-spacing-xxs);
-  background-color: var(--calcite-color-border-2);
+  background-color: var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));
+  inline-size: var(--calcite-spacing-px);
 }
 
 :host([layout="vertical"]) .divider-container {
@@ -113,7 +174,7 @@
 }
 
 .menu-container {
-  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
+  --calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);
   @include floating-ui-container();
 }
 
@@ -124,15 +185,15 @@
 }
 
 .vertical-chevron-container {
-  @apply flex items-center border border-solid border-color-input border-l-0;
+  @apply flex items-center border border-solid border-l-0;
   padding-inline: var(--calcite-spacing-md);
-  background-color: var(--calcite-color-foreground-1);
-
+  background-color: var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input));
   calcite-icon {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3));
 
     &:hover {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1));
     }
   }
 }
@@ -157,12 +218,67 @@
   &:hover {
     .vertical-chevron-container {
       calcite-icon {
-        color: var(--calcite-color-text-1);
+        color: var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1));
       }
     }
   }
 }
 
+.input {
+  --calcite-input-background-color: var(--calcite-input-date-picker-background-color);
+  --calcite-input-border-color: var(--calcite-input-date-picker-border-color);
+  --calcite-input-corner-radius: var(--calcite-input-date-picker-corner-radius);
+  --calcite-input-shadow: var(--calcite-input-date-picker-shadow);
+
+  --calcite-input-icon-color: var(--calcite-input-date-picker-icon-color);
+  --calcite-input-icon-color-hover: var(--calcite-input-date-picker-icon-color-hover);
+  --calcite-input-text-color: var(--calcite-input-date-picker-text-color);
+  --calcite-input-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color);
+}
+
+calcite-date-picker {
+  --calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);
+  --calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);
+  --calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);
+  --calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);
+  --calcite-date-picker-header-action-background-color: var(
+    --calcite-input-date-picker-calendar-actions-background-color
+  );
+  --calcite-date-picker-header-action-background-color-hover: var(
+    --calcite-input-date-picker-calendar-actions-background-color-hover
+  );
+  --calcite-date-picker-header-action-background-color-press: var(
+    --calcite-input-date-picker-calendar-actions-background-color-press
+  );
+  --calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);
+  --calcite-date-picker-header-action-text-color-press: var(
+    --calcite-input-date-picker-calendar-actions-text-color-press
+  );
+  --calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);
+  --calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);
+  --calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);
+  --calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);
+  --calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);
+  --calcite-date-picker-day-background-color-hover: var(
+    --calcite-input-date-picker-calendar-day-background-color-hover
+  );
+  --calcite-date-picker-day-background-color-selected: var(
+    --calcite-input-date-picker-calendar-selected-background-color
+  );
+  --calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);
+  --calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);
+  --calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);
+  --calcite-date-picker-current-day-text-color: var(--calcite-input-date-picker-calendar-day-current-text-color);
+  --calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);
+  --calcite-date-picker-day-range-background-color: var(--calcite-input-date-picker-calendar-selected-background-color);
+  --calcite-date-picker-day-outside-range-background-color-hover: var(
+    --calcite-input-date-picker-calendar-day-outside-range-background-color-hover
+  );
+  --calcite-date-picker-day-outside-range-text-color-hover: var(
+    --calcite-input-date-picker-calendar-day-outside-range-text-color-hover
+  );
+}
+
 @include form-validation-message();
 @include hidden-form-input();
 
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 3daeb03d82d..6d176ce8a95 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -32,6 +32,12 @@ import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
 import { inlineEditable, inlineEditableTokens } from "./custom-theme/inline-editable";
 import { input, inputTokens } from "./custom-theme/input";
+import {
+  inputDatePicker,
+  inputDatePickerRange,
+  inputDatePickerRangeVertical,
+  inputDatePickerTokens,
+} from "./custom-theme/input-date-picker";
 import {
   inputMessageInvalid,
   inputMessageValid,
@@ -206,6 +212,11 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     <div class="demo-row">
       <div class="demo-column">${filter}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${inputDatePicker}</div>
+      <div class="demo-column">${inputDatePickerRange}</div>
+      <div class="demo-column">${inputDatePickerRangeVertical}</div>
+    </div>
     <div class="demo-row">
       <div class="demo-column">${inputMessageInvalid}</div>
       <div class="demo-column">${inputMessageValid}</div>
@@ -266,6 +277,7 @@ const componentTokens = {
   ...inlineEditableTokens,
   ...inputNumberTokens,
   ...graphTokens,
+  ...inputDatePickerTokens,
   ...inputTokens,
   ...inputTextTokens,
   ...inputMessageTokens,
diff --git a/packages/calcite-components/src/custom-theme/input-date-picker.ts b/packages/calcite-components/src/custom-theme/input-date-picker.ts
new file mode 100644
index 00000000000..82c2f0d19db
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/input-date-picker.ts
@@ -0,0 +1,51 @@
+import { html } from "../../support/formatting";
+
+export const inputDatePickerTokens = {
+  calciteInputDatePickerBackgroundColor: "",
+  calciteInputDatePickerBorderColor: "",
+  calciteInputDatePickerDividerColor: "",
+  calciteInputDatePickerIconColor: "",
+  calciteInputDatePickerIconColorHover: "",
+  calciteInputDatePickerShadow: "",
+  calciteInputDatePickerInputBackgroundColor: "",
+  calciteInputDatePickerInputBorderColor: "",
+  calciteInputDatePickerInputCornerRadius: "",
+  calciteInputDatePickerInputShadow: "",
+  calciteInputDatePickerInputIconColor: "",
+  calciteInputDatePickerInputIconColorHover: "",
+  calciteInputDatePickerInputTextColor: "",
+  calciteInputDatePickerInputPlaceholderTextColor: "",
+  calciteInputDatePickerDatePickerBorderColor: "",
+  calciteInputDatePickerDatePickerCornerRadius: "",
+  calciteInputDatePickerDatePickerRangeCalendarDividerColor: "",
+  calciteInputDatePickerDatePickerWeekHeaderTextColor: "",
+  calciteInputDatePickerDatePickerHeaderActionBackgroundColor: "",
+  calciteInputDatePickerDatePickerHeaderActionBackgroundColorHover: "",
+  calciteInputDatePickerDatePickerHeaderActionBackgroundColorPress: "",
+  calciteInputDatePickerDatePickerHeaderActionTextColor: "",
+  calciteInputDatePickerDatePickerHeaderActionTextColorPress: "",
+  calciteInputDatePickerDatePickerYearTextColor: "",
+  calciteInputDatePickerDatePickerMonthSelectFontSize: "",
+  calciteInputDatePickerDatePickerMonthSelectTextColor: "",
+  calciteInputDatePickerDatePickerMonthSelectIconColor: "",
+  calciteInputDatePickerDatePickerMonthSelectIconColorHover: "",
+  calciteInputDatePickerDatePickerDayBackgroundColor: "",
+  calciteInputDatePickerDatePickerDayBackgroundColorHover: "",
+  calciteInputDatePickerDatePickerDayTextColor: "",
+  calciteInputDatePickerDatePickerDayTextColorHover: "",
+  calciteInputDatePickerDatePickerCurrentDayTextColor: "",
+  calciteInputDatePickerDatePickerDayBackgroundColorSelected: "",
+  calciteInputDatePickerDatePickerDayTextColorSelected: "",
+  calciteInputDatePickerDatePickerDayRangeTextColor: "",
+  calciteInputDatePickerDatePickerDayRangeBackgroundColor: "",
+  calciteInputDatePickerDatePickerDayOutsideRangeBackgroundColorHover: "",
+  calciteInputDatePickerDatePickerDayOutsideRangeTextColorHover: "",
+};
+
+export const inputDatePicker = html`<calcite-input-date-picker open></calcite-input-date-picker>`;
+export const inputDatePickerRange = html`<calcite-input-date-picker range open></calcite-input-date-picker>`;
+export const inputDatePickerRangeVertical = html`<calcite-input-date-picker
+  range
+  layout="vertical"
+  open
+></calcite-input-date-picker>`;