Feature/new date picker tokens

semcore/utils/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.7.0] - 2023-09-13
+
+### Added
+
+- Added new tokens for period comparison in DatePicker: `date-picker-cell-comparison-active`, `date-picker-cell-comparison-active-hover`, `border-date-picker-range-comparison`.
+
+### Changed
+
+- Updated references for `date-picker-cell-current` and `date-picker-cell-current-invert` tokens to make them more contrast against background.
+
 ## [4.6.3] - 2023-09-12
 
 ### Changed

semcore/utils/src/themes/default.css

@@ -152,6 +152,8 @@
   --intergalactic-border-tooltip-invert: #6c6e79;
   /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
   --intergalactic-border-table-accent: #a9abb6;
+  /* Border color of the second period for the comparison mode in the DatePicker. */
+  --intergalactic-border-date-picker-range-comparison: #8649e1;
   /* Subtle background of the Switch control. */
   --intergalactic-control-switch-bg: #a9abb6;
   /* Background of the regular primary control. */
@@ -275,7 +277,7 @@
   /* Default date-picker cell background. */
   --intergalactic-date-picker-cell: #ffffff;
   /* Color for marking the cell with the current date, month or year in the date-picker. */
-  --intergalactic-date-picker-cell-current: #c4c7cf;
+  --intergalactic-date-picker-cell-current: #8a8e9b;
   /* Hover state of the default date-picker cell background. */
   --intergalactic-date-picker-cell-hover: #e0e1e9;
   /* Background for the cell which is included in the date range in the date-picker. */
@@ -287,7 +289,11 @@
   /* Hover for the active (selected) date-picker cell background. */
   --intergalactic-date-picker-cell-active-hover: #008ff8;
   /* Color for marking the active cell with the current date, month or year in the date-picker. */
-  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.3);
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5);
+  /* Active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active: #8649e1;
+  /* Hover for the active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active-hover: #5925ab;
   /* Default background color for the list item in the dropdown-menu. */
   --intergalactic-dropdown-menu-item: #ffffff;
   /* Hover state of the default background color for the list item in the dropdown-menu. */

semcore/utils/src/themes/default.json

@@ -76,6 +76,7 @@
   "--intergalactic-border-secondary-invert": "rgba(255, 255, 255, 0.3)",
   "--intergalactic-border-tooltip-invert": "#6c6e79",
   "--intergalactic-border-table-accent": "#a9abb6",
+  "--intergalactic-border-date-picker-range-comparison": "#8649e1",
   "--intergalactic-control-switch-bg": "#a9abb6",
   "--intergalactic-control-primary-info": "#008ff8",
   "--intergalactic-control-primary-info-hover": "#006dca",
@@ -137,13 +138,15 @@
   "--intergalactic-icon-secondary-warning-hover-active": "#ff642d",
   "--intergalactic-icon-non-interactive": "#191b23",
   "--intergalactic-date-picker-cell": "#ffffff",
-  "--intergalactic-date-picker-cell-current": "#c4c7cf",
+  "--intergalactic-date-picker-cell-current": "#8a8e9b",
   "--intergalactic-date-picker-cell-hover": "#e0e1e9",
   "--intergalactic-date-picker-cell-range": "#c4e5fe",
   "--intergalactic-date-picker-cell-range-hover": "#8ecdff",
   "--intergalactic-date-picker-cell-active": "#2bb3ff",
   "--intergalactic-date-picker-cell-active-hover": "#008ff8",
-  "--intergalactic-date-picker-cell-current-invert": "rgba(255, 255, 255, 0.3)",
+  "--intergalactic-date-picker-cell-current-invert": "rgba(255, 255, 255, 0.5)",
+  "--intergalactic-date-picker-cell-comparison-active": "#8649e1",
+  "--intergalactic-date-picker-cell-comparison-active-hover": "#5925ab",
   "--intergalactic-dropdown-menu-item": "#ffffff",
   "--intergalactic-dropdown-menu-item-hover": "#f4f5f9",
   "--intergalactic-dropdown-menu-item-selected": "rgba(196, 229, 254, 0.7)",

semcore/utils/src/themes/light.css

@@ -152,6 +152,8 @@
   --intergalactic-border-tooltip-invert: #6c6e79;
   /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
   --intergalactic-border-table-accent: #a9abb6;
+  /* Border color of the second period for the comparison mode in the DatePicker. */
+  --intergalactic-border-date-picker-range-comparison: #8649e1;
   /* Subtle background of the Switch control. */
   --intergalactic-control-switch-bg: #a9abb6;
   /* Background of the regular primary control. */
@@ -275,7 +277,7 @@
   /* Default date-picker cell background. */
   --intergalactic-date-picker-cell: #ffffff;
   /* Color for marking the cell with the current date, month or year in the date-picker. */
-  --intergalactic-date-picker-cell-current: #c4c7cf;
+  --intergalactic-date-picker-cell-current: #8a8e9b;
   /* Hover state of the default date-picker cell background. */
   --intergalactic-date-picker-cell-hover: #e0e1e9;
   /* Background for the cell which is included in the date range in the date-picker. */
@@ -287,7 +289,11 @@
   /* Hover for the active (selected) date-picker cell background. */
   --intergalactic-date-picker-cell-active-hover: #008ff8;
   /* Color for marking the active cell with the current date, month or year in the date-picker. */
-  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.3);
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5);
+  /* Active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active: #8649e1;
+  /* Hover for the active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active-hover: #5925ab;
   /* Default background color for the list item in the dropdown-menu. */
   --intergalactic-dropdown-menu-item: #ffffff;
   /* Hover state of the default background color for the list item in the dropdown-menu. */

semcore/utils/src/themes/light.json

@@ -76,6 +76,7 @@
   "--intergalactic-border-secondary-invert": "rgba(255, 255, 255, 0.3)",
   "--intergalactic-border-tooltip-invert": "#6c6e79",
   "--intergalactic-border-table-accent": "#a9abb6",
+  "--intergalactic-border-date-picker-range-comparison": "#8649e1",
   "--intergalactic-control-switch-bg": "#a9abb6",
   "--intergalactic-control-primary-info": "#008ff8",
   "--intergalactic-control-primary-info-hover": "#006dca",
@@ -137,13 +138,15 @@
   "--intergalactic-icon-secondary-warning-hover-active": "#ff642d",
   "--intergalactic-icon-non-interactive": "#191b23",
   "--intergalactic-date-picker-cell": "#ffffff",
-  "--intergalactic-date-picker-cell-current": "#c4c7cf",
+  "--intergalactic-date-picker-cell-current": "#8a8e9b",
   "--intergalactic-date-picker-cell-hover": "#e0e1e9",
   "--intergalactic-date-picker-cell-range": "#c4e5fe",
   "--intergalactic-date-picker-cell-range-hover": "#8ecdff",
   "--intergalactic-date-picker-cell-active": "#2bb3ff",
   "--intergalactic-date-picker-cell-active-hover": "#008ff8",
-  "--intergalactic-date-picker-cell-current-invert": "rgba(255, 255, 255, 0.3)",
+  "--intergalactic-date-picker-cell-current-invert": "rgba(255, 255, 255, 0.5)",
+  "--intergalactic-date-picker-cell-comparison-active": "#8649e1",
+  "--intergalactic-date-picker-cell-comparison-active-hover": "#5925ab",
   "--intergalactic-dropdown-menu-item": "#ffffff",
   "--intergalactic-dropdown-menu-item-hover": "#f4f5f9",
   "--intergalactic-dropdown-menu-item-selected": "rgba(196, 229, 254, 0.7)",

semcore/utils/theme/light.json

@@ -760,6 +760,11 @@
         "value": "{gray.300}",
         "type": "color",
         "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table."
+      },
+      "date-picker-range-comparison": {
+        "value": "{violet.500}",
+        "type": "color",
+        "description": "Border color of the second period for the comparison mode in the DatePicker."
       }
     },
     "control": {
@@ -1091,7 +1096,7 @@
         "description": "Default date-picker cell background."
       },
       "cell-current": {
-        "value": "{gray.200}",
+        "value": "{gray.400}",
         "type": "color",
         "description": "Color for marking the cell with the current date, month or year in the date-picker."
       },
@@ -1121,9 +1126,19 @@
         "description": "Hover for the active (selected) date-picker cell background."
       },
       "cell-current-invert": {
-        "value": "{gray.white}, 0.3",
+        "value": "{gray.white}, 0.5",
         "type": "color",
         "description": "Color for marking the active cell with the current date, month or year in the date-picker."
+      },
+      "cell-comparison-active": {
+        "value": "{violet.500}",
+        "type": "color",
+        "description": "Active (selected) date-picker cell background for comparison periods."
+      },
+      "cell-comparison-active-hover": {
+        "value": "{violet.600}",
+        "type": "color",
+        "description": "Hover for the active (selected) date-picker cell background for comparison periods."
       }
     },
     "dropdown-menu": {

website/docs/components/date-picker/date-picker.md

@@ -49,13 +49,17 @@ Date picker selects a single day. Once the day is selected, the dropdown closes
 
 > If date has `disabled` state, then nothing should happen after user clicks it.
 
-![](static/timepicker-norma-opened.png)
+![](static/datepicker-normal-opened.png)
+
+### Grid margins
+
+![](static/datepicker-margins-row.png)
 
 @## Date picker and "Today" button
 
 You can include a "Today" button that selects the current date. Upon clicking the button, the present date is selected, and the calendar automatically scrolls up to the current month (if it wasn't already displayed).
 
-![](static/timepicker-today-style.png)
+![](static/datepicker-today-style.png)
 
 @## Date picker and time picker
 
@@ -71,7 +75,7 @@ And you can show 12-hour or 24-hour format of time for TimePicker, depending on
 
 You can add a small progress bar under the date to show the progress of the metrics you need to show.
 
-![](static/timepicker-metric-normal.png)
+![](static/datepicker-metric-normal.png)
 
 @## Month picker
 
@@ -81,7 +85,9 @@ While a calendar with two month blocks can be displayed, it is more commonly use
 
 ![](static/monthpicker-normal-2sizes.png)
 
-![](static/monthpicker-paddings-row.png)
+### Grid margins
+
+![](static/monthpicker-margins-row.png)
 
 @## Date range picker
 
@@ -97,6 +103,23 @@ You also can add the "Reset" button for deselecting the selected values. In this
 
 ![](static/daterangepicker-reset-buttons.png)
 
+@## Comparison of time periods in RangePicker
+
+In all RangePickers, you can enable the comparison of two periods. The periods can either intersect or not intersect.
+
+When the comparison of two periods is enabled in the RangePicker, each period in the `DatePicker.Trigger` has an addon with a color: the first period uses the `--date-picker-cell-active` token, and the second period uses the `--date-picker-cell-comparison-active` token.
+
+### Interaction
+
+@table-caption Interaction states for RangePicker with time periods comparison
+
+| Description | Appearance example    |
+| ----------- | --------------------- |
+| In the default state, the second period, which is activated by toggling the "Compare to" checkbox, is in a `disabled` state. | ![](static/periods-comparison-1.png) |
+| When enabling the comparison period, the focus shifts to the input field for selecting the second period. The preset set with periods changes to the one defined for the second period. | ![](static/periods-comparison-2.png) |
+| The selected date is immediately displayed in the input field. | ![](static/periods-comparison-3.png) ![](static/periods-comparison-4.png) |
+| The selected periods are applied after clicking the "Apply" button. | ![](static/periods-comparison-5.png) ![](static/periods-comparison-6.png) |
+
 @## Week picker
 
 Week picker selects a single week and is similar to a regular date range picker, but with only one month block displayed in the dropdown.

website/docs/style/design-tokens/components/design-tokens.json

@@ -847,6 +847,14 @@
       "data-table"
     ]
   },
+  {
+    "name": "--intergalactic-border-date-picker-range-comparison",
+    "type": "color",
+    "rawValue": "{violet.500}",
+    "computedValue": "#8649e1",
+    "description": "Border color of the second period for the comparison mode in the DatePicker.",
+    "components": []
+  },
   {
     "name": "--intergalactic-control-switch-bg",
     "type": "color",
@@ -1491,8 +1499,8 @@
   {
     "name": "--intergalactic-date-picker-cell-current",
     "type": "color",
-    "rawValue": "{gray.200}",
-    "computedValue": "#c4c7cf",
+    "rawValue": "{gray.400}",
+    "computedValue": "#8a8e9b",
     "description": "Color for marking the cell with the current date, month or year in the date-picker.",
     "components": []
   },
@@ -1549,11 +1557,27 @@
   {
     "name": "--intergalactic-date-picker-cell-current-invert",
     "type": "color",
-    "rawValue": "{gray.white}, 0.3",
-    "computedValue": "rgba(255, 255, 255, 0.3)",
+    "rawValue": "{gray.white}, 0.5",
+    "computedValue": "rgba(255, 255, 255, 0.5)",
     "description": "Color for marking the active cell with the current date, month or year in the date-picker.",
     "components": []
   },
+  {
+    "name": "--intergalactic-date-picker-cell-comparison-active",
+    "type": "color",
+    "rawValue": "{violet.500}",
+    "computedValue": "#8649e1",
+    "description": "Active (selected) date-picker cell background for comparison periods.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-date-picker-cell-comparison-active-hover",
+    "type": "color",
+    "rawValue": "{violet.600}",
+    "computedValue": "#5925ab",
+    "description": "Hover for the active (selected) date-picker cell background for comparison periods.",
+    "components": []
+  },
   {
     "name": "--intergalactic-dropdown-menu-item",
     "type": "color",