updated DatePicker, RangeDatePicker with size theming approach, added…

… variables for vanilla theme

epam-assets/theme/theme_6px.scss

@@ -1,4 +1,5 @@
 @mixin uui-6px-grid {
+    --uui-grid-unit: 6px;
     --uui-focus-outline-width: 2px;
     --uui-focus-outline-offset: 2px;
     --uui-focus-radius: 2px;

epam-assets/theme/theme_vanilla_thunder.scss

@@ -326,6 +326,7 @@
 
     .uui-main_menu {
         --uui-main_menu-text: var(--chromatic-500);
+        --uui-main_menu-text-hover: var(--chromatic-500);
         --uui-main_menu-text-active: var(--uui-info-50);
         --uui-main_menu-bg: var(--uui-info-5);
         --uui-main_menu-hover: var(--uui-neutral-0);

uui-components/src/inputs/DatePicker/Calendar.tsx

@@ -95,7 +95,7 @@ export function Calendar<TSelection>(props: CalendarProps<TSelection>) {
             return (
                 <div
                     className={ uuiDaySelection.dayCell }
-                    tabIndex={ 0 }
+                    tabIndex={ -1 }
                     key={ `day-${props.month.valueOf()}-${index}` }
                 />
             );

uui-components/src/inputs/DatePicker/MonthSelection.module.scss

@@ -1,12 +1,12 @@
 .container {
-    &:global(.uui-monthselection-container) {
-        :global(.uui-monthselection-content) {
+    &:global(.uui-month_selection-container) {
+        :global(.uui-month_selection-content) {
             display: flex;
             flex-direction: column;
             font-size: 14px;
         }
 
-        :global(.uui-monthselection-month-container) {
+        :global(.uui-month_selection-month-container) {
             display: flex;
             flex-direction: column;
 
@@ -15,7 +15,7 @@
             }
         }
 
-        :global(.uui-monthselection-month) {
+        :global(.uui-month_selection-month) {
             display: flex;
             justify-content: center;
             align-items: center;

uui-components/src/inputs/DatePicker/MonthSelection.tsx

@@ -7,12 +7,12 @@ import css from './MonthSelection.module.scss';
 const MONTH_ROW_LENGTH = 3;
 
 export const uuiMonthSelection = {
-    container: 'uui-monthselection-container',
-    content: 'uui-monthselection-content',
-    monthContainer: 'uui-monthselection-month-container',
-    monthsRow: 'uui-monthselection-months-row',
-    month: 'uui-monthselection-month',
-    currentMonth: 'uui-monthselection-current-month',
+    container: 'uui-month_selection-container',
+    content: 'uui-month_selection-content',
+    monthContainer: 'uui-month_selection-month-container',
+    monthsRow: 'uui-month_selection-months-row',
+    month: 'uui-month_selection-month',
+    currentMonth: 'uui-month_selection-current-month',
 } as const;
 
 interface MonthSelectionProps extends IEditable<Dayjs>, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasForwardedRef<HTMLDivElement> {

uui-components/src/inputs/DatePicker/YearSelection.module.scss

@@ -1,12 +1,12 @@
 .container {
-    &:global(.uui-yearselection-container) {
-        :global(.uui-yearselection-content) {
+    &:global(.uui-year_selection-container) {
+        :global(.uui-year_selection-content) {
             display: flex;
             flex-direction: column;
             font-size: 14px;
         }
 
-        :global(.uui-yearselection-year-container) {
+        :global(.uui-year_selection-years-container) {
             display: flex;
             flex-direction: column;
 
@@ -15,7 +15,7 @@
             }
         }
 
-        :global(.uui-yearselection-year) {
+        :global(.uui-year_selection-year) {
             display: flex;
             justify-content: center;
             align-items: center;

uui-components/src/inputs/DatePicker/YearSelection.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
 import { Dayjs } from '../../helpers/dayJsHelper';
-import {
-    IEditable, IHasCX, arrayToMatrix, cx, IHasRawProps, IHasForwardedRef,
-} from '@epam/uui-core';
+import { IEditable, IHasCX, arrayToMatrix, cx, IHasRawProps, IHasForwardedRef } from '@epam/uui-core';
 import css from './YearSelection.module.scss';
 
 const MONTH_ROW_LENGTH = 4;
 
 export const uuiYearSelection = {
-    container: 'uui-yearselection-container',
-    content: 'uui-yearselection-content',
-    yearContainer: 'uui-yearselection-year-container',
-    yearRow: 'uui-yearselection-year-row',
-    year: 'uui-yearselection-year',
-    currentYear: 'uui-yearselection-current-year',
+    container: 'uui-year_selection-container',
+    content: 'uui-year_selection-content',
+    yearsContainer: 'uui-year_selection-years-container',
+    yearsRow: 'uui-year_selection-years-row',
+    year: 'uui-year_selection-year',
+    currentYear: 'uui-year_selection-current-year',
 } as const;
 
 export interface YearSelectionProps extends IEditable<Dayjs>, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasForwardedRef<HTMLDivElement> {
@@ -28,10 +26,10 @@ export function YearSelection(props: YearSelectionProps) {
     return (
         <div className={ cx(css.container, uuiYearSelection.container, props.cx) } { ...props.rawProps }>
             <div className={ uuiYearSelection.content }>
-                <div className={ uuiYearSelection.yearContainer }>
-                    {arrayToMatrix(getYears(props.value.year()), MONTH_ROW_LENGTH).map((yearRow, index) => (
-                        <div key={ index } className={ uuiYearSelection.yearRow }>
-                            {yearRow.map((year) => (
+                <div className={ uuiYearSelection.yearsContainer }>
+                    {arrayToMatrix(getYears(props.value.year()), MONTH_ROW_LENGTH).map((yearsRow, index) => (
+                        <div key={ index } className={ uuiYearSelection.yearsRow }>
+                            {yearsRow.map((year) => (
                                 <div
                                     key={ year }
                                     className={ cx(year === props.selectedDate.year() && uuiYearSelection.currentYear, uuiYearSelection.year) }

uui/components/datePickers/Calendar.module.scss

@@ -17,6 +17,16 @@
     --uui-calendar-selected_day-font: var(--uui-font);
     --uui-calendar-selected_day-font-weight: 600;
 
+    --uui-calendar-day-size: var(--uui-size);
+    --uui-calendar-day-wrapper-height: calc(var(--uui-size) - var(--uui-grid-unit));
+    --uui-calendar-day-border-width: var(--uui-border-width);
+    --uui-calendar-day-border-radius: 50%;
+    --uui-calendar-day-font-size: var(--uui-font-size);
+    --uui-calendar-day-line-height: calc(var(--uui-calendar-day-size) - var(--uui-calendar-day-border-width) * 2);
+    --uui-calendar-weekday-font-size: 12px;
+    --uui-calendar-weekday-line-height: 24px;
+    --uui-calendar-dot-size: 4px;
+
     :global(.uui-calendar-content) {
         font-family: var(--uui-calendar-font);
         font-weight: var(--uui-calendar-font-weight, normal);
@@ -26,18 +36,18 @@
         font-family: var(--uui-calendar-weekday-font);
         font-weight: var(--uui-calendar-weekday-font-weight, normal);
         color: var(--uui-calendar-weekday-caption);
-        width: 34px;
-        font-size: 12px;
-        line-height: 24px;
+        width: var(--uui-calendar-day-size);
+        font-size: var(--uui-calendar-weekday-font-size);
+        line-height: var(--uui-calendar-weekday-line-height);
         text-align: center;
     }
 
     :global(.uui-calendar-day-cell) {
         color: var(--uui-calendar-day-text);
         text-align: center;
         padding: 0;
-        height: 36px;
-        width: 36px;
+        height: var(--uui-calendar-day-size);
+        width: var(--uui-calendar-day-size);
         display: flex;
         position: relative;
 
@@ -47,23 +57,24 @@
     }
 
     :global(.uui-calendar-day-wrapper) {
-        height: 30px;
-        width: 30px;
-        font-size: 14px;
-        line-height: 30px;
+        height: var(--uui-calendar-day-wrapper-height);
+        width: var(--uui-calendar-day-size);
+        font-size: var(--uui-calendar-day-font-size);
+        line-height: var(--uui-calendar-day-line-height);
         margin: auto;
         cursor: default;
     }
 
     :global(.uui-calendar-day) {
-        border-radius: 50%;
-        height: 36px;
-        width: 36px;
+        border-radius: var(--uui-calendar-day-border-radius);
+        height: var(--uui-calendar-day-size);
+        width: var(--uui-calendar-day-size);
         position: absolute;
         left: 0;
         top: 0;
-        line-height: 34px;
-        border: 1px solid transparent;
+        font-size: var(--uui-calendar-day-font-size);
+        line-height: var(--uui-calendar-day-line-height);
+        border: var(--uui-calendar-day-border-width) solid transparent;
         box-sizing: border-box;
     }
 
@@ -73,14 +84,14 @@
                 cursor: pointer;
 
                 :global(.uui-calendar-day) {
-                    border: 1px solid var(--uui-calendar-selected_range);
+                    border: var(--uui-calendar-day-border-width) solid var(--uui-calendar-selected_range);
                     background-color: var(--uui-calendar-selected_day-hover);
                     z-index: 1;
                 }
 
                 &:global(.uui-calendar-selected-day) {
                     :global(.uui-calendar-day) {
-                        border: 1px solid var(--uui-calendar-selected_range-hover);
+                        border: var(--uui-calendar-day-border-width) solid var(--uui-calendar-selected_range-hover);
                         background-color: var(--uui-calendar-selected_range-hover);
                     }
                 }
@@ -97,12 +108,12 @@
             :global(.uui-calendar-day)::after {
                 position: absolute;
                 content: '';
-                height: 4px;
-                width: 4px;
-                border-radius: 50%;
+                height: var(--uui-calendar-dot-size);
+                width: var(--uui-calendar-dot-size);
+                border-radius: var(--uui-calendar-day-border-radius);
                 background-color: var(--uui-calendar-selected_range);
-                bottom: 3px;
-                left: calc(50% - 2px);
+                bottom: calc(var(--uui-grid-unit) / 2);
+                left: calc(50% - var(--uui-calendar-dot-size) / 2);
             }
         }
     }
@@ -114,7 +125,7 @@
                 color: var(--uui-calendar-selected_day-text);
 
                 &::after {
-                    background-color: var(--uui-calendar-selected_day);
+                    background-color: var(--uui-calendar-selected_day-text);
                 }
             }
         }

uui/components/datePickers/Calendar.tsx

@@ -2,9 +2,10 @@ import css from './Calendar.module.scss';
 import { CalendarProps, Calendar as uuiCalendar } from '@epam/uui-components';
 import { withMods } from '@epam/uui-core';
 import { Dayjs } from '../../helpers/dayJsHelper';
+import { settings } from '../../settings';
 
 export function applyDateSelectionMods() {
-    return [css.root];
+    return [css.root, `uui-size-${settings.sizes.defaults.datePicker}`];
 }
 
 export const Calendar = withMods<CalendarProps<Dayjs>, CalendarProps<Dayjs>>(uuiCalendar, applyDateSelectionMods);

uui/components/datePickers/CalendarPresets.module.scss

@@ -1,26 +1,39 @@
 @use  '../../assets/styles/index' as *;
 
 .root {
+    --uui-calendar-presets-header: var(--uui-text-primary);
+    --uui-calendar-presets-item: var(--uui-link);
+
+    --uui-calendar-presets-container-padding: 24px 24px 12px;
+    --uui-calendar-presets-header-font-size: 14px;
+    --uui-calendar-presets-header-line-height: 24px;
+    --uui-calendar-presets-header-font-weight: 600;
+    --uui-calendar-presets-header-padding-bottom: 12px;
+    --uui-calendar-presets-item-font-size: 12px;
+    --uui-calendar-presets-item-line-height: 18px;
+    --uui-calendar-presets-item-font-weight: 600;
+    --uui-calendar-presets-item-padding-bottom: 6px;
+
     &:global(.uui-presets-container) {
-        padding: 24px 24px 12px;
+        padding: var(--uui-calendar-presets-container-padding);
     }
 
     :global(.uui-presets-header) {
+        color: var(--uui-calendar-presets-header);
         font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 24px;
-        padding-bottom: 12px;
-        color: var(--uui-text-primary);
+        font-weight: var(--uui-calendar-presets-header-font-weight);
+        font-size: var(--uui-calendar-presets-header-font-size);
+        line-height: var(--uui-calendar-presets-header-line-height);
+        padding-bottom: var(--uui-calendar-presets-header-padding-bottom);
     }
 
     :global(.uui-presets-item) {
+        color: var(--uui-calendar-presets-item);
         font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 18px;
-        color: var(--uui-link);
-        padding-bottom: 6px;
+        font-weight: var(--uui-calendar-presets-item-font-weight);
+        font-size: var(--uui-calendar-presets-item-font-size);
+        line-height: var(--uui-calendar-presets-item-line-height);
+        padding-bottom: var(--uui-calendar-presets-item-padding-bottom);
 
         &:hover {
             color: var(--uui-link-hover);