origam 2.16.0 → 2.17.0

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -3,6 +3,7 @@
 		<template v-if="loaderConfig.kind === 'skeleton'">
 			<tr
 					v-for="rowIndex in SKELETON_ROW_COUNT"
+					:id="skeletonRowId(rowIndex)"
 					:key="`skeleton-row_${rowIndex}`"
 					class="origam-data-table-rows origam-data-table-rows--skeleton"
 					aria-busy="true"
@@ -18,8 +19,11 @@
 		</template>
 		<template v-else>
 			<tr
+					:id="id"
 					key="loading"
 					class="origam-data-table-rows origam-data-table-rows--loading"
+					:class="textColorClasses"
+					:style="textColorStyles"
 			>
 				<td :colspan="columns.length">
 					<slot name="loading">
@@ -32,8 +36,11 @@
 
 	<template v-else-if="!(items && items.length) && !hideNoData">
 		<tr
+				:id="id"
 				key="no-data"
 				class="origam-data-table-rows origam-data-table-rows--no-data"
+				:class="textColorClasses"
+				:style="textColorStyles"
 		>
 			<td :colspan="columns.length">
 				<slot name="no-data">
@@ -51,9 +58,29 @@
 						v-bind="groupHeaderSlotProps(item, index)"
 				>
 					<origam-data-table-group-header-row
+							:id="itemRowId(index)"
 							:key="`group-header_${item.id}`"
-							v-bind="groupHeaderSlotProps(item, index)"
+							v-bind="groupHeaderRowProps(item, index)"
 					>
+						<template
+								v-if="$slots['data-table-group']"
+								#data-table-group="groupProps"
+						>
+							<slot
+									name="data-table-group"
+									v-bind="groupProps"
+							/>
+						</template>
+
+						<template
+								v-if="$slots['data-table-select']"
+								#data-table-select="selectProps"
+						>
+							<slot
+									name="data-table-select"
+									v-bind="selectProps"
+							/>
+						</template>
 					</origam-data-table-group-header-row>
 				</slot>
 			</template>
@@ -64,9 +91,33 @@
 						v-bind="itemSlotProps(item, index)"
 				>
 					<origam-data-table-row
+							:id="itemRowId(index)"
 							:item="item"
 							v-bind="{...itemSlotProps(item, index).props}"
+							@expand="emit('expand', $event)"
+							@select="emit('select', $event)"
 					>
+						<template
+								v-for="name in itemColumnSlotNames"
+								:key="name"
+								#[name]="cellProps"
+						>
+							<slot
+									:name="name"
+									v-bind="cellProps"
+							/>
+						</template>
+
+						<template
+								v-for="name in headerColumnSlotNames"
+								:key="name"
+								#[name]="titleProps"
+						>
+							<slot
+									:name="name"
+									v-bind="titleProps"
+							/>
+						</template>
 					</origam-data-table-row>
 				</slot>
 
@@ -82,11 +133,26 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
-import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
-import { LOADER_KIND } from "../../enums";
-import { getPrefixedEventHandlers } from "../../utils";
-import { mergeProps, useAttrs } from "vue";
+import OrigamDataTableGroupHeaderRow from "./OrigamDataTableGroupHeaderRow.vue";
+import OrigamDataTableRow from "./OrigamDataTableRow.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useDisplay } from "../../composables/Commons/display.composable";
+import { useExpanded } from "../../composables/DataTable/expand.composable";
+import { useGroupBy } from "../../composables/DataTable/group.composable";
+import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePagination } from "../../composables/DataTable/pagination.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { getPrefixedEventHandlers } from "../../utils/Commons/event.util";
+import {
+  pickDataTableHeaderColumnSlotNames,
+  pickDataTableItemColumnSlotNames
+} from "../../utils/DataTable/slot-name.util";
+import { computed, mergeProps, useAttrs, useSlots } from "vue";
 const attrs = useAttrs();
 const props = defineProps({
   hideNoData: { type: Boolean, required: false },
@@ -94,20 +160,28 @@ const props = defineProps({
   noDataText: { type: String, required: false, default: "origam.no_data_text" },
   rowProps: { type: [Object, Function], required: false },
   cellProps: { type: [Object, Function], required: false },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false, default: "origam.data_iterator.loading_text" },
-  tag: { type: String, required: false },
+  id: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }
 });
+const emit = defineEmits(["expand", "select"]);
 defineSlots();
+const slots = useSlots();
+const itemColumnSlotNames = computed(() => {
+  return pickDataTableItemColumnSlotNames(Object.keys(slots));
+});
+const headerColumnSlotNames = computed(() => {
+  return pickDataTableHeaderColumnSlotNames(Object.keys(slots));
+});
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const SKELETON_ROW_COUNT = 5;
+const skeletonRowId = (index) => props.id ? `${props.id}-skeleton-row-${index}` : void 0;
+const itemRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
 const { loaderConfig } = useLoader(props, LOADER_KIND.LINE);
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();
@@ -141,6 +215,17 @@ const groupHeaderSlotProps = (item, index) => {
     isGroupOpen
   });
 };
+const groupHeaderRowProps = (item, index) => {
+  const slotPropsLocal = slotProps(item, index);
+  return {
+    index,
+    item,
+    columns: columns.value,
+    isSelected,
+    toggleGroup,
+    ...getPrefixedEventHandlers(attrs, ":group-header", () => slotPropsLocal)
+  };
+};
 const itemSlotProps = (item, index) => {
   const slotPropsLocal = slotProps(item, index);
   return Object.assign({}, slotPropsLocal, {
@@ -183,12 +268,12 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-data-table-rows {
 		&--no-data {
-			text-align: var(--origam-data-table-empty---text-align, center);
-			color: var(--origam-data-table-rows--no-data---color, var(--origam-color__text---secondary));
+			text-align: var(--origam-data-table-empty---text-align, var(--origam-data-table__empty---text-align, center));
+			color: var(--origam-data-table-rows--no-data---color, var(--origam-data-table__empty---color, var(--origam-color__text---secondary)));
 		}
 
 		&--loading {
-			color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
+			color: var(--origam-data-table-rows--loading---color, var(--origam-data-table---loading-row-color, var(--origam-color__text---secondary)));
 		}
 
 		&--skeleton {

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-picker
+			:id="id"
 			ref="origamPickerRef"
 			:class="datePickerClasses"
 			:style="datePickerStyles"
@@ -13,10 +14,7 @@
 			<slot name="title"/>
 		</template>
 
-		<template
-				v-if="slots.header"
-				#header
-		>
+		<template #header>
 			<slot
 					name="header"
 					v-bind="headerProps"
@@ -25,7 +23,7 @@
 						key="header"
 						ref="origamDatePickerHeaderRef"
 						v-bind="{ ...datePickerHeaderProps, ...headerProps }"
-						@click="!viewModeIsMonth ? handleClickDate : undefined"
+						@click="handleHeaderClick"
 				/>
 			</slot>
 		</template>
@@ -33,7 +31,7 @@
 		<slot name="default">
 			<origam-date-picker-controls
 					ref="origamDatePickerControlsRef"
-					:text="text"
+					:text="controlsText"
 					v-bind="{...datePickerControlsProps, ...disabledControlers}"
 					@click:next="handleClickNext"
 					@click:prev="handleClickPrev"
@@ -94,20 +92,24 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  OrigamDatePickerControls,
-  OrigamDatePickerHeader,
-  OrigamDatePickerMonth,
-  OrigamDatePickerMonths,
-  OrigamDatePickerYears,
-  OrigamFade,
-  OrigamPicker,
-  OrigamReverseTranslatePicker,
-  OrigamTranslatePicker
-} from "../../components";
-import { useDate, useLocale, useProps, useVModel, useStyle } from "../../composables";
-import { CALENDAR_STRATEGY, DATE_MODE } from "../../enums";
-import { wrapInArray } from "../../utils";
+import OrigamDatePickerControls from "./OrigamDatePickerControls.vue";
+import OrigamDatePickerHeader from "./OrigamDatePickerHeader.vue";
+import OrigamDatePickerMonth from "./OrigamDatePickerMonth.vue";
+import OrigamDatePickerMonths from "./OrigamDatePickerMonths.vue";
+import OrigamDatePickerYears from "./OrigamDatePickerYears.vue";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamPicker from "../Picker/OrigamPicker.vue";
+import OrigamReverseTranslatePicker from "../Transition/OrigamReverseTranslatePicker.vue";
+import OrigamTranslatePicker from "../Transition/OrigamTranslatePicker.vue";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { CALENDAR_STRATEGY } from "../../enums/Commons/calendar.enum";
+import { DATE_MODE } from "../../enums/DatePicker/date-picker.enum";
+import { wrapInArray } from "../../utils/Commons/commons.util";
 import { computed, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   modelValue: { type: [String, Date, Array], required: false },
@@ -157,6 +159,7 @@ const props = defineProps({
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
+  handleLabel: { type: String, required: false },
   tag: { type: String, required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
@@ -174,11 +177,10 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   title: { type: String, required: false, default: "origam.date_picker.title" },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
@@ -240,8 +242,20 @@ const internal = computed(() => {
   const value = adapter.date(model.value?.[0]);
   return value && adapter.isValid(value) ? value : adapter.date();
 });
-const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
-const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
+const internalMonth = ref(UNSEEDED);
+const month = computed({
+  get: () => internalMonth.value === UNSEEDED ? Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))) : internalMonth.value,
+  set: (value) => {
+    internalMonth.value = value;
+  }
+});
+const internalYear = ref(UNSEEDED);
+const year = computed({
+  get: () => internalYear.value === UNSEEDED ? Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))) : internalYear.value,
+  set: (value) => {
+    internalYear.value = value;
+  }
+});
 const isReversing = shallowRef(false);
 const header = computed(() => {
   if ((props.multiple || props.range) && model.value?.length > 1) {
@@ -249,13 +263,16 @@ const header = computed(() => {
   }
   return model.value?.[0] && adapter.isValid(model.value?.[0]) ? adapter.format(adapter.date(model.value?.[0]), "normalDateWithWeekday") : t(props.header);
 });
-const text = computed(() => {
+const monthAndYearText = computed(() => {
   let date = adapter.date();
   date = adapter.setDate(date, 1);
   date = adapter.setMonth(date, month.value);
   date = adapter.setYear(date, year.value);
   return adapter.format(date, "monthAndYear");
 });
+const controlsText = computed(() => {
+  return props.text || monthAndYearText.value;
+});
 const headerTransition = computed(() => {
   return {
     component: isReversing.value ? OrigamReverseTranslatePicker : OrigamTranslatePicker
@@ -322,6 +339,9 @@ const handleClickPrev = () => {
 const handleClickDate = () => {
   viewMode.value = DATE_MODE.MONTH;
 };
+const handleHeaderClick = () => {
+  if (!viewModeIsMonth.value) handleClickDate();
+};
 const handleClickMonth = () => {
   viewMode.value = viewModeIsMonths.value ? DATE_MODE.MONTH : DATE_MODE.MONTHS;
 };
@@ -402,7 +422,7 @@ const datePickerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -418,10 +438,10 @@ defineExpose({
 		$this: &;
 
 		overflow: hidden;
-		width: 328px;
+		width: var(--origam-date-picker---width);
 
 		&--show-week {
-			width: 368px;
+			width: var(--origam-date-picker--show-week---width);
 		}
 
 		&--year {

package/dist/src/components/DatePicker/OrigamDatePickerControls.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerControlsClasses"
 			:style="datePickerControlsStyles"
 	>
@@ -53,9 +54,14 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamBtnGroup, OrigamSpacer } from "../../components";
-import { useProps, useStyle } from "../../composables";
-import { DATE_MODE, MDI_ICONS } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamBtnGroup from "../Btn/OrigamBtnGroup.vue";
+import OrigamSpacer from "../Grids/OrigamSpacer.vue";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DATE_MODE } from "../../enums/DatePicker/date-picker.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   active: { type: [String, Array, Boolean, Object], required: false },
@@ -73,7 +79,20 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
-const emits = defineEmits(["click:year", "click:month", "click:prev", "click:next", "click:text"]);
+useUnsupportedProp(
+  "OrigamDatePickerControls",
+  "active",
+  "the controls row reflects the picker view state of its parent; it has no active state of its own.",
+  () => props.active !== void 0
+);
+useUnsupportedProp(
+  "OrigamDatePickerControls",
+  "viewMode",
+  "the displayed mode comes from the picker through `mode`, never from this prop.",
+  () => props.viewMode !== DATE_MODE.MONTH
+);
+const emits = defineEmits(["click:year", "click:month", "click:prev", "click:next"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const disableMonth = computed(() => {
   return props.disabled || props.disabledMonth;
@@ -110,7 +129,7 @@ const datePickerControlsClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerControlsStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerControlsStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -1,14 +1,21 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerHeaderClasses"
 			:style="datePickerHeaderStyles"
+			:role="isClickable ? 'button' : undefined"
+			:tabindex="isClickable ? 0 : undefined"
 			@click="handleClick"
+			@keydown="handleKeydown"
 	>
 		<template v-if="hasPrepend">
 			<div
 					key="prepend"
 					class="origam-date-picker-header__prepend"
+					:role="isPrependClickable ? 'button' : undefined"
+					:tabindex="isPrependClickable ? 0 : undefined"
 					@click="handleClickPrepend"
+					@keydown="handleKeydownPrepend"
 			>
 				<slot name="prepend">
 					<origam-avatar
@@ -47,7 +54,10 @@
 			<div
 					key="append"
 					class="origam-date-picker-header__append"
+					:role="isAppendClickable ? 'button' : undefined"
+					:tabindex="isAppendClickable ? 0 : undefined"
 					@click="handleClickAppend"
+					@keydown="handleKeydownAppend"
 			>
 				<slot name="append">
 					<origam-avatar
@@ -69,9 +79,18 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamIcon, OrigamTransition } from "../../components";
-import { useAdjacent, useDensity, useProps, useStyle } from "../../composables";
-import { computed, StyleValue, toRef, useSlots } from "vue";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { hasEvent } from "../../utils/Commons/commons.util";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
+import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
   header: { type: String, required: false },
   transition: { type: Object, required: false },
@@ -89,21 +108,38 @@ const emits = defineEmits(["click"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
+const vm = getCurrentInstance("OrigamDatePickerHeader");
+const attrs = useAttrs();
 const { densityClasses } = useDensity(props);
+const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const hasContent = computed(() => {
   return !!(slots.default || props.header);
 });
+const isClickable = computed(() => {
+  return hasEvent(attrs, "click") || hasEvent(vm.vnode.props ?? {}, "click");
+});
 const handleClick = () => {
   emits("click");
 };
+const handleKeydown = (e) => {
+  if (!isClickable.value) return;
+  if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
+  e.preventDefault();
+  handleClick();
+};
 const datePickerHeaderStyles = computed(() => {
   return [
+    textColorStyles.value,
     props.style
   ];
 });
@@ -111,10 +147,11 @@ const datePickerHeaderClasses = computed(() => {
   return [
     "origam-date-picker-header",
     densityClasses.value,
+    textColorClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerHeaderStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerHeaderStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -130,13 +167,13 @@ defineExpose({
 		$this: &;
 
 		align-items: flex-end;
-		height: 70px;
+		height: var(--origam-date-picker__header---min-height, 70px);
 		display: grid;
 		grid-template-areas: "prepend content append";
 		grid-template-columns: min-content minmax(0, 1fr) min-content;
 		overflow: hidden;
-		padding-inline: 24px 12px;
-		padding-bottom: 12px;
+		padding-inline: var(--origam-date-picker__header---padding-inline, 24px 12px);
+		padding-block: var(--origam-date-picker__header---padding-block, 0 12px);
 
 		&__append {
 			grid-area: append;
@@ -150,7 +187,7 @@ defineExpose({
 		&__content {
 			align-items: center;
 			display: inline-flex;
-			font-size: 32px;
+			font-size: var(--origam-date-picker__header---font-size, 32px);
 			line-height: 40px;
 			grid-area: content;
 			justify-content: space-between;

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerMonthClasses"
 			:style="datePickerMonthStyles"
 	>
@@ -92,10 +93,18 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamReverseTranslatePicker, OrigamTransition, OrigamTranslatePicker } from "../../components";
-import { useDatePickerCalendar, useDate, useProps, useStyle } from "../../composables";
-import { CALENDAR_STRATEGY, DENSITY } from "../../enums";
-import { wrapInArray } from "../../utils";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamReverseTranslatePicker from "../Transition/OrigamReverseTranslatePicker.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import OrigamTranslatePicker from "../Transition/OrigamTranslatePicker.vue";
+import { useDatePickerCalendar } from "../../composables/Commons/date-picker-calendar.composable";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { CALENDAR_STRATEGY } from "../../enums/Commons/calendar.enum";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { isCssColor, isIntent, tokenForegroundForIntent } from "../../utils/Commons/color.util";
+import { wrapInArray } from "../../utils/Commons/commons.util";
 import { computed, ref, shallowRef, StyleValue, watch } from "vue";
 const props = defineProps({
   hideWeekdays: { type: Boolean, required: false },
@@ -121,6 +130,7 @@ const props = defineProps({
   weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.DYNAMIC },
   firstDayOfWeek: { type: Number, required: false }
 });
+defineEmits(["update:date"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const daysRef = ref();
@@ -235,8 +245,24 @@ const datePickerMonthDayClasses = (item) => {
     }
   ];
 };
+const dayColorVars = computed(() => {
+  const vars = {};
+  const fg = props.color;
+  let resolved;
+  if (isIntent(fg)) {
+    resolved = tokenForegroundForIntent(fg);
+  } else if (typeof fg === "string" && isCssColor(fg)) {
+    resolved = fg;
+  }
+  if (resolved) {
+    vars["--origam-date-picker__day---color"] = resolved;
+    vars["--origam-btn---color"] = resolved;
+  }
+  return vars;
+});
 const datePickerMonthStyles = computed(() => {
   return [
+    dayColorVars.value,
     props.style
   ];
 });
@@ -246,7 +272,7 @@ const datePickerMonthClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -299,9 +325,9 @@ defineExpose({
 			display: flex;
 			justify-content: center;
 			position: relative;
-			height: 40px;
-			background-color: rgb(255, 255, 255);
-			color: rgb(0, 0, 0);
+			height: var(--origam-date-picker__day---size, 40px);
+			background-color: var(--origam-date-picker__day---background-color, transparent);
+			color: var(--origam-date-picker__day---color, var(--origam-color__text---primary));
 
 			:deep(.origam-btn) {
 				--origam-btn---height: 24px;
@@ -318,8 +344,8 @@ defineExpose({
 
 			&--selected {
 				:deep(.origam-btn) {
-					background-color: rgb(163, 163, 163);
-					color: rgb(255, 255, 255);
+					background-color: var(--origam-date-picker__day---background-color-selected, var(--origam-color__action--primary---bg));
+					color: var(--origam-date-picker__day---color-selected, var(--origam-color__action--primary---fg));
 				}
 
 				+ #{$this}__day--selected {
@@ -333,7 +359,7 @@ defineExpose({
 						top: 50%;
 						left: -2px;
 						transform: translate(-50%, -50%);
-						background-color: rgb(143, 143, 143); // TODO make variable for background
+						background-color: var(--origam-date-picker__day---background-color-in-range, var(--origam-color__surface---overlay));
 					}
 
 					&#{$this}__day--week-end {
@@ -347,7 +373,7 @@ defineExpose({
 							top: 50%;
 							left: 2px;
 							transform: translate(50%, -50%);
-							background-color: rgb(143, 143, 143); // TODO make variable for background
+							background-color: var(--origam-date-picker__day---background-color-in-range, var(--origam-color__surface---overlay));
 						}
 					}
 				}