@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte.d.ts

@@ -0,0 +1,49 @@
+export interface CalendarDateChipProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Day Of Month */
+    dayOfMonth: DateOfMonth;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show last month dates */
+    showLastMonth?: boolean;
+    /** Show next month dates */
+    showNextMonth?: boolean;
+    /** Show Today */
+    showToday?: boolean;
+    /** Is Date Selected */
+    selected?: boolean;
+    /** onselect event handler */
+    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** onselectRange event handler */
+    onselectRange?: (value: Date, type: DateRangeType, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChip?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** How large should the Calendar Chip be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekend?: boolean;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** Show Value Range */
+    showValueRange?: boolean;
+    /** Date Range Type */
+    rangeType?: DateRangeType;
+}
+import type { ComponentColor } from '../../../../../../../types/colors.js';
+import type { ComponentRoundness } from '../../../../../../../types/roundness.js';
+import type { Snippet } from 'svelte';
+import type { ButtonClickEvent } from '../../../../../Form/Button/Button.svelte';
+import type { ComponentSize } from '../../../../../../../types/size.js';
+import type { DateOfMonth, DateRangeType } from '../../../utils/types.js';
+declare const CalendarDateChip: import("svelte").Component<CalendarDateChipProps, {}, "ref">;
+type CalendarDateChip = ReturnType<typeof CalendarDateChip>;
+export default CalendarDateChip;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte

@@ -0,0 +1,41 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />
+
+<Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
+<Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
+<Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
+<Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
+<Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
+<Story name="Danger Selected" args={{ color: 'danger', selected: true }} />
+
+<Story name="Primary Today" args={{ color: 'primary', today: true }} />
+<Story name="Secondary Today" args={{ color: 'secondary', today: true }} />
+<Story name="Neutral Today" args={{ color: 'neutral', today: true }} />
+<Story name="Safe Today" args={{ color: 'safe', today: true }} />
+<Story name="Warning Today" args={{ color: 'warning', today: true }} />
+<Story name="Danger Today" args={{ color: 'danger', today: true }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Color;
+type Color = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Color: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarDateChip from '../CalendarDateChip.svelte';
+import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+import { Button, getMoment } from '../../../../../../../../index.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+});
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarDateChipContent" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+  >
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </CalendarDateChip>
+</Story>
+
+<!-- Custom Chip  -->
+<Story name="customCalendarDateChip" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+  >
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </CalendarDateChip>
+</Story>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarDateChip from '../CalendarDateChip.svelte';
+import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+});
+</script>
+
+<Story name="Select" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+    onselect={(value, dayOfMonth, e) => {
+      const target = e.target as HTMLButtonElement;
+      alert(`CalendarDateChip Select, ${getMoment(value).format('DD-MM-YYYY')}`);
+      console.log('CalendarDateChip Select', dayOfMonth, target);
+    }}
+  />
+</Story>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte

@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<!-- Hover to see the result -->
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />
+
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte

@@ -0,0 +1,96 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
+  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Today"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      today: true,
+    },
+  }}
+/>
+
+<!-- Dont highlight today. Show it as a plain date -->
+<Story
+  name="HideToday"
+  args={{
+    showToday: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      today: true,
+    },
+  }}
+/>
+
+<Story
+  name="LastMonth"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isLastMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="HideLastMonth"
+  args={{
+    showLastMonth: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isLastMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="NextMonth"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isNextMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="HideNextMonth"
+  args={{
+    showNextMonth: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isNextMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SpecialChips;
+type SpecialChips = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SpecialChips: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/utils/scss/mixins.scss

@@ -0,0 +1,153 @@
+/// Mixin: generate-dodo-ui-calendarDateChip-colors
+/// Generates CSS custom properties for Dodo UI calendarDateChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarDateChip-colors($color-name) {
+  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-700
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarDateChip-colors
+/// Generates CSS custom properties for Dodo UI calendarDateChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarDateChip-colors-dark($color-name) {
+  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-200) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-hover-bg: var(
+    --dodo-color-#{$color-name}-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarDateChip-color
+/// Auto-generates .color--[theme] > variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-calendarDateChip-color($theme) {
+  &--#{$theme} {
+    .chip:not([disabled]) {
+      background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-bg);
+
+      &:hover {
+        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-active-bg);
+      }
+    }
+
+    &.today {
+      .chip:not([disabled]) {
+        background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.selected {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.isRangeStart {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.isRangeEnd {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}