@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -3,544 +3,413 @@
     <VueDatePicker
       ref="datePicker"
       v-model="date"
-      offset="10"
       :inline="inline"
-      :timezone="utc ? 'utc' : undefined"
-      :class="{
-        dynamicPadding: multiCalendars,
-        singleCalWidth: !multiCalendars,
-        singleCalWithSidebar: !multiCalendars && leftSidebar,
-      }"
-      :text-input="!roundedEdges"
-      :ui="uiConfig"
-      :multi-calendars="multiCalendars"
       :locale="locale"
-      :time-config="{ enableTimePicker }"
-      :auto-apply="autoApply"
-      :close-on-auto-apply="closeOnAutoApply"
-      :input-attrs="{ clearable: false }"
-      :formats="{ input: formatInput }"
+      :teleport="teleport"
+      :timezone="utc ? 'utc' : undefined"
+      :disabled="disabled"
       :min-date="minDate"
       :max-date="maxDate"
-      :prevent-min-max-navigation="true"
-      :year-range="getAvailableDateRange"
-      :transitions="false"
-      :floating="{
-        arrow: menuArrow ?? false,
-        flip: autoPosition,
-        placement: 'bottom-start',
-      }"
-      :disabled="disabledState"
-      :keep-action-row="actionArea"
+      prevent-min-max-navigation
+      transitions
+      :multi-calendars="multiCalendars"
       :month-picker="monthPicker"
-      :teleport="teleport"
+      :year-range="getYearRange"
+      :auto-apply="autoApply"
       :config="{
-        closeOnScroll,
         monthChangeOnScroll: false,
+        closeOnAutoApply,
+        keepActionRow: !!$slots['action-row'],
       }"
-      v-bind="
+      :range="
         monthPicker
-          ? {}
+          ? undefined
           : {
-              range: {
-                autoRange: props.autoRange,
-                maxRange: props.maxRange,
-                partialRange: false,
-              },
-              startDate: Array.isArray(props.selectedDate)
-                ? props.selectedDate[0]
-                : (props.selectedDate as Date),
+              partialRange: false,
+              showLastInRange: false,
+              autoRange,
+              maxRange,
             }
       "
-      focus-start-date
-      @open="showDatepicker = true"
-      @closed="closeAction"
-      @update:model-value="handleDateChange"
-      @clear="emit('reset')"
+      :floating="{
+        arrow: menuArrow ?? false,
+        flip: autoPosition,
+        shift: autoPosition,
+        placement: 'bottom-start',
+      }"
+      :formats="{
+        month: 'LLLL',
+        input: customFormatCallback ? customFormatCallback : formatInput,
+      }"
+      :time-config="{
+        enableTimePicker,
+      }"
+      :input-attrs="{ clearable: false }"
+      :ui="{
+        calendar: 'calendar-wrapper',
+        navBtnNext: 'nav-btn-next',
+        navBtnPrev: 'nav-btn-prev',
+      }"
+      @open="
+        emit('open');
+        internalIsOpen = true;
+      "
+      @closed="
+        emit('closed');
+        internalIsOpen = false;
+      "
+      @keydown.esc="closeMenu"
+      @range-start="emit('range-start', $event)"
+      @range-end="emit('range-end', $event)"
     >
       <template #dp-input="{ value }">
-        <UiFilterButton
-          v-if="roundedEdges"
-          id="desktop-datepicker"
-          rounded
-          variant="transparent-rounded"
-          icon-size="small"
-          :active="activeState"
-          :disabled="disabledState"
-          chevron-icon="chevron-down"
-          :has-icon="true"
-          :icon-left="iconLeft"
-          :title="value || placeholderText"
-          @click="emit('open')"
-        />
-        <UiInput
-          v-else
-          id="desktop-datepicker"
-          :model-value="value"
-          :label="inputLabel"
-          :chevron="true"
-          :disabled="disabledState"
-          :placeholder="placeholderText"
-        />
-      </template>
-      <template v-if="leftSidebar" #left-sidebar>
-        <div
-          class="flex w-full flex-col md:w-37 md:border-r-2 md:border-r-gray-200"
+        <UiButton
+          class="flex justify-between"
+          :class="{
+            'border-neutral-subtle': internalIsOpen,
+            'w-full min-w-0': triggerWidth === 'full',
+            'flex-none': triggerWidth === 'fit',
+          }"
+          :appearance="value ? 'primary' : 'secondary-alt'"
+          :disabled
+          size="sm"
+          data-testid="datepicker-trigger"
         >
-          <div
-            class="flex items-center justify-between"
-            @click="mobileQuickfiltersOpen = !mobileQuickfiltersOpen"
-          >
-            <span
-              class="p-3 text-xs/4 font-semibold tracking-wider text-gray-700"
-            >
-              {{ props.quickFilterHeadline }}
-            </span>
+          <div class="flex min-w-0 items-center gap-2">
             <UiIcon
-              v-if="enableQuickfilterToggle"
-              name="chevron-down"
-              class="inline-flex rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300 md:hidden"
-              :class="{ 'rotate-180': mobileQuickfiltersOpen }"
+              v-if="leftTriggerIcon"
+              class="shrink-0"
+              :name="leftTriggerIcon"
+              size="sm"
             />
+            <span class="truncate">{{ value || triggerPlaceholderText }}</span>
           </div>
+          <UiIcon class="shrink-0" name="chevron-down" size="sm" />
+        </UiButton>
+      </template>
+      <template v-if="leftSidebar" #left-sidebar>
+        <div class="flex w-full flex-col gap-y-2 px-6 py-4">
+          <h2
+            class="text-xs/4 font-semibold tracking-wider text-neutral-subtle uppercase"
+          >
+            {{ quickFilterHeadline }}
+          </h2>
           <div
-            v-for="range in quickFilterRanges"
-            :key="range.label"
-            :class="[
-              !mobileQuickfiltersOpen && enableQuickfilterToggle
-                ? 'hidden'
-                : 'md:block',
-            ]"
+            class="flex flex-col flex-nowrap items-start gap-y-2 whitespace-nowrap"
           >
-            <UiFilterButton
-              :data-testid="range.label"
-              :variant="range.isSelected ? 'blue-blank' : 'blank'"
-              :title="range.label"
-              :has-icon="false"
-              @click="setRange(range)"
+            <button
+              v-for="filter in quickFilterRanges"
+              :key="filter.label"
+              :data-testid="filter.label"
+              class="text-sm font-semibold text-neutral-primary hover:text-primary"
+              :class="{ 'text-primary': quickFilterActive(filter.range) }"
+              @click="setQuickFilter(filter)"
             >
-            </UiFilterButton>
+              {{ filter.label }}
+            </button>
           </div>
         </div>
       </template>
-      <template #action-extra>
-        <slot name="actionArea">
-          <div v-if="actionAreaExtraContent.length > 0" class="p-2">
-            {{ actionAreaExtraContent }}
+      <template v-if="$slots['action-row']" #action-row="slotProps">
+        <slot name="action-row" v-bind="slotProps" />
+      </template>
+      <template
+        v-if="$slots['action-extra'] || actionExtraContent"
+        #action-extra="slotProps"
+      >
+        <slot name="action-extra" v-bind="{ ...slotProps, reset }">
+          <div v-if="actionExtraContent">
+            {{ actionExtraContent }}
           </div>
         </slot>
       </template>
-      <template #action-row="{ selectDate }">
-        <div
-          class="flex w-full justify-between border-t-2 border-t-gray-200 p-0"
-        >
-          <UiButton class="my-4 ml-4 p-0" color="white" @click="handleCancel"
-            >{{ cancel }}
-          </UiButton>
-          <UiButton
-            class="my-4 mr-4 p-0"
-            color="blue"
-            data-testid="ui-mobile-datepicker-submit-button"
-            @click="selectDate"
-            >{{ submit }}
-          </UiButton>
-        </div>
+      <template #arrow-left>
+        <UiIcon class="text-neutral-subtle" name="chevron-left" size="sm" />
+      </template>
+      <template #arrow-right>
+        <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
-
       <template #arrow>
-        <div ref="menu-arrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp__arrow_top"></div>
       </template>
     </VueDatePicker>
   </div>
 </template>
 
 <script setup lang="ts">
+import { type ActionRowSlotProps, VueDatePicker } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
-
-import { VueDatePicker } from "@vuepic/vue-datepicker";
-import { format, getYear, type Locale, startOfMonth } from "date-fns";
+import { format, getYear, type Locale } from "date-fns";
 import { de } from "date-fns/locale";
-import { computed, ref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, ref, type ShallowRef, useTemplateRef } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
-import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-import UiInput from "../UiInput/UiInput.vue";
-
-type DateType = Date | [Date, Date] | string | { month: number; year: number };
 
 export interface PresetRange {
   label: string;
   range: [Date, Date] | { year: number; month: number };
-  isSelected?: boolean;
   name?: string;
-  style?: Record<string, string>;
-  slot?: string;
 }
+export type DateType =
+  | Date
+  | [Date, Date]
+  | string
+  | { month: number; year: number };
 
-const emit = defineEmits<{
-  "date-changed": [DateType];
-  close: [];
-  open: [];
-  reset: [];
-  "quickfilter-changed": [PresetRange];
-}>();
+const datePicker =
+  useTemplateRef<InstanceType<typeof VueDatePicker>>("datePicker");
 
-const props = withDefaults(
-  defineProps<{
-    definesRange?: boolean;
-    multiCalendars?: boolean;
-    enableTimePicker?: boolean;
-    autoApply?: boolean;
-    closeOnAutoApply?: boolean;
-    roundedEdges?: boolean;
-    locale?: Locale;
-    placeholderText?: string;
-    quickFilterRanges?: PresetRange[];
-    quickFilterHeadline?: string;
-    selectedDate?: DateType;
-    autoPosition?: boolean;
-    leftSidebar?: boolean;
-    actionArea?: boolean;
-    actionAreaExtraContent?: string;
-    cancel?: string;
-    submit?: string;
-    firstAvailableDate?: number;
-    minDate?: Date | string;
-    maxDate?: Date;
-    autoRange?: string | number | undefined;
-    maxRange?: number | string | undefined;
-    activeState?: boolean;
-    disabledState?: boolean;
-    monthPicker?: boolean;
-    customFormatCallback?: (date: Date | [Date, Date]) => string;
-    inputLabel?: string;
-    iconLeft?: UiIconName | null;
-    inline?: boolean;
-    utc?: boolean;
-    teleport?: boolean | string;
-    closeOnScroll?: boolean;
-    enableQuickfilterToggle?: boolean;
-  }>(),
-  {
-    definesRange: true,
-    multiCalendars: true,
-    locale: () => de,
-    enableTimePicker: false,
-    autoApply: true,
-    closeOnAutoApply: true,
-    placeholderText: "",
-    roundedEdges: true,
-    quickFilterHeadline: "",
-    quickFilterRanges: () => [],
-    selectedDate: "",
-    autoPosition: false,
-    leftSidebar: true,
-    actionArea: true,
-    actionAreaExtraContent: "",
-    cancel: "",
-    submit: "",
-    firstAvailableDate: 1948,
-    minDate: () => new Date("1948-01-01"),
-    maxDate: undefined,
-    autoRange: undefined,
-    maxRange: undefined,
-    activeState: false,
-    disabledState: false,
-    monthPicker: false,
-    inputLabel: "",
-    iconLeft: null,
-    inline: false,
-    utc: true,
-    teleport: undefined,
-    closeOnScroll: false,
-    enableQuickfilterToggle: true,
-    customFormatCallback: undefined,
-  },
-);
-
-const datePickerRef = useTemplateRef("datePicker");
-const menuArrow = ref();
-
-const date = ref<DateType>();
-
-const uiConfig = ref({
-  menu: "datepicker-wrapper",
-  calendar: "datepicker-calendar-instance",
-  calendarCell: "datepicker-cell",
-});
-
-watchEffect(() => {
-  date.value = props.selectedDate;
-});
+const menuArrow =
+  useTemplateRef<Readonly<ShallowRef<HTMLDivElement>>>("menuArrow");
 
-const showDatepicker = ref(false);
-const closePicker = () => {
-  datePickerRef.value?.closeMenu();
-};
-
-const setRange = (range: PresetRange): void => {
-  date.value = range.range;
-  emit("quickfilter-changed", range);
-  closePicker();
-};
+defineSlots<{
+  "action-row"?: (props: ActionRowSlotProps) => any;
+  "action-extra"?: (props: {
+    selectCurrentDate: () => void;
+    reset: () => void;
+  }) => any;
+}>();
 
-const formatRange = (dateRange: [Date, Date]): string => {
-  const startDate = format(dateRange[0], "dd.MM.yyyy");
-  const endDate = format(dateRange[1], "dd.MM.yyyy");
+const date = defineModel<DateType>();
 
-  return startDate + "-" + endDate;
-};
+const emit = defineEmits<{
+  closed: [];
+  open: [];
+  "range-start": [Date];
+  "range-end": [Date];
+  "quick-filter-changed": [PresetRange];
+}>();
 
-const formatSingle = (date: Date): string => {
-  const selectedDate = format(new Date(date), "dd.MM.yyyy");
-  const selectedMonth = format(startOfMonth(new Date(date)), "MMMM yyyy", {
-    locale: props.locale,
-  });
-  return props.monthPicker ? selectedMonth : selectedDate;
-};
-
-const formatInput = (date: Date | [Date, Date]): string => {
-  if (props.customFormatCallback) {
-    return props.customFormatCallback(date);
-  } else {
-    return props.definesRange
-      ? formatRange(date as [Date, Date])
-      : formatSingle(date as Date);
-  }
-};
+const {
+  autoApply = true,
+  closeOnAutoApply = true,
+  inline = false,
+  disabled = false,
+  locale = de,
+  utc = undefined,
+  teleport = false,
+  minDate = new Date("1948-01-01"),
+  maxDate = undefined,
+  autoRange = undefined,
+  maxRange = undefined,
+  multiCalendars = false,
+  monthPicker = false,
+  enableTimePicker = false,
+  autoPosition = true,
+  triggerPlaceholderText = undefined,
+  customFormatCallback = undefined,
+  leftTriggerIcon = undefined,
+  triggerWidth = "fit",
+  leftSidebar = false,
+  quickFilterHeadline = undefined,
+  quickFilterRanges = [],
+  actionExtraContent = undefined,
+} = defineProps<{
+  autoApply?: boolean;
+  locale?: Locale;
+  disabled?: boolean;
+  minDate?: Date | string | number;
+  maxDate?: Date | string | number;
+  inline?: boolean;
+  teleport?: string | boolean | HTMLElement;
+  monthPicker?: boolean;
+  multiCalendars?: boolean;
+  utc?: boolean;
+
+  // Time Config
+  enableTimePicker?: boolean;
+
+  // Floating Config
+  autoPosition?: boolean;
+
+  // Range Config
+  autoRange?: string | number;
+  maxRange?: string | number;
+
+  // General Config
+  closeOnAutoApply?: boolean;
+
+  // Slots
+  triggerPlaceholderText?: string;
+  triggerWidth?: "full" | "fit";
+  customFormatCallback?: (date: Date | [Date, Date]) => string;
+  leftTriggerIcon?: UiIconName;
+  leftSidebar?: boolean;
+  quickFilterHeadline?: string;
+  quickFilterRanges?: PresetRange[];
+  actionExtraContent?: string;
+}>();
 
-const getAvailableDateRange = computed<[number, number]>(() => {
-  const nextTenYears = getYear(new Date()) + 10;
-  return [props.firstAvailableDate, nextTenYears];
+const internalIsOpen = ref(false);
+const getYearRange = computed<[number, number]>(() => {
+  return [getYear(minDate), getYear(maxDate || new Date())];
 });
 
-const handleDateChange = (event: DateType) => {
-  emit("date-changed", event);
-  showDatepicker.value = false;
-  closePicker();
-};
-
-const handleCancel = () => {
-  date.value = props.selectedDate;
-  showDatepicker.value = false;
-  closePicker();
-};
-
-const closeAction = () => {
-  emit("close");
-  showDatepicker.value = false;
-};
-
-watch(
-  () => props.selectedDate,
-  () => (date.value = props.selectedDate),
-);
-
-const mobileQuickfiltersOpen = ref(false);
-</script>
-
-<style>
-@reference "../../tailwindPreset.css";
+function closeMenu() {
+  datePicker.value?.closeMenu();
+}
 
-.singleCalWidth .dp__instance_calendar {
-  @apply md:w-[269px];
+function reset() {
+  date.value = undefined;
+  closeMenu();
 }
 
-.singleCalWithSidebar .dp__menu_content_wrapper {
-  @apply md:w-[428px];
+function setQuickFilter(value: PresetRange) {
+  date.value = value.range;
+  emit("quick-filter-changed", value);
+  closeMenu();
 }
 
-.dynamicArrow .dp__arrow_top {
-  @apply hidden;
+function isMonthYear(date: DateType): date is { month: number; year: number } {
+  return typeof date === "object" && "month" in date && "year" in date;
 }
 
-.dynamicPadding .dp__month_year_wrap {
-  @apply px-12;
+function quickFilterActive(
+  quickFilterDate: [Date, Date] | { year: number; month: number },
+) {
+  const internalDate = date.value;
+  if (!internalDate) return false;
+  if (Array.isArray(internalDate) && Array.isArray(quickFilterDate)) {
+    const [start, end] = internalDate;
+    const [quickFilterStart, quickFilterEnd] = quickFilterDate;
+    return (
+      start.toDateString() == quickFilterStart.toDateString() &&
+      end.toDateString() == quickFilterEnd.toDateString()
+    );
+  } else if (isMonthYear(internalDate) && isMonthYear(quickFilterDate)) {
+    return (
+      internalDate.year === quickFilterDate.year &&
+      internalDate.month === quickFilterDate.month
+    );
+  }
+  return false;
 }
 
-.dynamicArrow .dp__menu {
-  @apply border-t-0 rounded-t-none;
-  box-shadow:
-    0 2px 6px -2px rgb(0 0 0 / 0.25),
-    0 2px 6px -2px rgb(0 0 0 / 0.25) !important;
-  border-bottom-right-radius: 1rem !important;
-  border-bottom-left-radius: 1rem !important;
+function formatMonth(date: Date) {
+  return format(date, "LLLL yyyy", {
+    locale,
+  });
 }
 
-.datepicker-wrapper {
-  @apply bg-white;
-  @apply font-sans;
-  @apply text-gray-900;
-  @apply text-xs;
-  @apply font-medium;
-  @apply z-10;
-  @apply rounded-2xl;
-  @apply shadow-lg;
+function formatInput(date: Date | [Date, Date]): string {
+  const DATE_FORMAT = "dd.MM.yyyy";
+  if (Array.isArray(date)) {
+    const [start, end] = date;
+    if (start.toISOString() == end.toISOString())
+      return format(start, DATE_FORMAT, { locale });
+    return `${format(start, DATE_FORMAT, { locale })} - ${format(end, DATE_FORMAT, { locale })}`;
+  }
+  return monthPicker ? formatMonth(date) : format(date, "dd.MM.yyyy");
 }
+</script>
+<style>
+@reference "../../tailwindPreset.css";
 
-.dp__menu_content_wrapper {
-  @apply grid md:flex md:flex-row md:flex-wrap md:w-[794px];
+.dp__arrow_top {
+  left: 10%;
 }
 
-.dp__instance_calendar {
-  @apply md:w-[634px];
+.dp__menu {
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-lg);
 }
 
-.dp__action_extra {
-  @apply order-3 md:order-0 md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
+.dp--year-select,
+.dp__month_year_select {
+  border-radius: var(--radius-2xl);
 }
 
-.dp__action_extra:empty {
-  @apply hidden;
+.nav-btn-prev,
+.nav-btn-next {
+  padding: 0.25rem;
 }
 
-.dp__menu_content_wrapper > .dp__action_extra {
-  @apply md:max-w-full;
+.dp__flex_display {
+  gap: 2rem;
 }
 
 .dp__sidebar_left {
-  @apply block md:flex py-0 order-2 md:order-none;
+  padding: 0;
 }
 
-.dp__action_row {
-  @apply p-0;
+.dp__cell_inner {
+  border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner {
-  @apply rounded-full;
+.dp__cell_inner:hover {
+  border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_disabled:hover {
-  @apply bg-transparent;
-  @apply text-gray-500;
+.dp__today {
+  border: 1px solid var(--color-neutral-primary);
 }
 
 .dp__cell_auto_range,
 .dp__cell_auto_range_start,
 .dp__cell_auto_range_end {
-  @apply border-none text-gray-900 bg-gray-300;
-}
-
-.datepicker-cell:active {
-  @apply rounded-full;
-}
-
-.datepicker-cell:hover {
-  @apply rounded-full bg-gray-300 text-gray-900;
-}
-
-.dp__button.dp__overlay_action {
-  @apply hidden;
-}
-
-.dp__range_between {
-  @apply bg-gray-200!;
-  @apply border-none;
-  @apply text-gray-900;
-}
-
-.datepicker-calendar-instance {
-  @apply px-3;
-  @apply py-3;
-}
-
-.dp__month_year_wrap {
-  width: inherit !important;
-}
-
-.dp__month_year_row {
-  @apply mt-3;
-  @apply mx-3;
-  @apply leading-6;
-  @apply text-base;
-  @apply font-medium;
-  @apply text-gray-900;
-  justify-content: space-between;
+  border: none;
+  color: var(--color-neutral-primary);
+  background-color: var(--color-neutral-faint);
 }
 
 .dp__month_year_select {
-  width: inherit;
-  @apply p-3;
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-primary);
 }
 
-.dp__overlay {
-  @apply rounded-3xl;
-}
-
-.dp__inner_nav > svg {
-  @apply text-gray-800;
-  @apply w-4 h-4;
-}
-
-.dp__inner_nav:hover > svg {
-  @apply fill-white;
-}
-
-.dp__calendar_next {
-  margin-left: 0;
+.dp__calendar_header_separator {
+  display: none;
 }
 
 .dp__calendar_header {
-  @apply text-xs;
-  @apply text-gray-600;
-  @apply font-semibold;
-}
-
-.dp__preset_ranges {
-  @apply font-sans;
-  @apply text-gray-800;
-  @apply font-semibold;
-  @apply p-5;
-  @apply flex;
-  @apply flex-col;
-  @apply justify-evenly;
-  @apply w-44;
-  @apply border-r-2;
-  @apply border-r-gray-200;
-}
-
-.dp__arrow_top {
-  left: 10%;
-}
-
-.dp__inner_nav_disabled {
-  @apply bg-transparent;
+  gap: 0.25rem;
+  align-items: center;
+  font-size: var(--text-xs);
+  color: var(--color-neutral-subtle);
+  font-weight: var(--font-weight-semibold);
 }
 
-.dp__inner_nav_disabled:hover {
-  @apply bg-transparent;
+.dp__calendar_header_item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-subtle);
 }
 
-.dp__inner_nav_disabled > svg {
-  @apply fill-gray-400;
+.dp__calendar_row {
+  gap: 0.25rem;
 }
 
-.dp__inner_nav_disabled > svg:hover {
-  @apply fill-gray-400;
-}
-
-.dp__overlay_cell_active,
-.dp__month_year_select {
-  @apply rounded-full;
-}
-
-.dp__overlay_cell:hover,
-.dp__month_year_select:hover {
-  @apply rounded-full bg-gray-300 text-gray-900;
+.dp__action_row,
+.dp__action_extra {
+  justify-content: end;
+  gap: 1rem;
+  border-top: 1px solid var(--color-neutral-faint);
+  padding: 0.5rem 1rem;
 }
 
 .dp__theme_light {
-  --dp-font-family: "Inter";
-  --dp-background-color: #ffffff;
-  --dp-text-color: rgba(33, 33, 33, 1);
-  --dp-hover-color: #003edb;
-  --dp-hover-icon-color: white;
-  --dp-hover-text-color: #ffffff;
-  --dp-primary-color: #003edb;
-  --dp-primary-text-color: #ffffff;
-  --dp-secondary-color: #bababa;
-  --dp-border-color: rgba(255, 255, 255, 0.99);
-  --dp-menu-padding: 0;
+  --dp-font-family: var(--font-sans);
+  --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
+  --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/
+  --dp-calendar-header-cell-padding: 0.25rem; /*Adjust padding in calendar header cells*/
+  --dp-menu-padding: 1rem;
+  --dp-cell-size: 2rem; /*Font sizes*/
+  --dp-font-size: var(--text-xs); /*Default font-size*/
+  --dp-background-color: var(--color-surface-level-1);
+  --dp-primary-color: var(--color-primary);
+  --dp-hover-color: var(--color-neutral-faint);
+  --dp-hover-text-color: var(--color-neutral-primary);
+  --dp-hover-icon-color: var(--color-neutral);
+  --dp-primary-disabled-color: var(--color-neutral-soft);
+  --dp-primary-text-color: var(--color-neutral);
+  --dp-secondary-color: #c0c4cc;
+  --dp-border-color: var(--color-neutral-pale);
+  --dp-menu-border-color: var(--color-neutral-pale);
+  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
+  --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
 }
 </style>