fix(datepicker): no color for today in dark theme (#UIM-769) (#702)

# Conflicts:
#	packages/mosaic/design-tokens/_variables.scss
#	packages/mosaic/design-tokens/tokens.ts

Author: lskramarov

packages/mosaic/core/theming/_components-theming.scss

@@ -117,6 +117,11 @@
         state-focused-shadow: $checkbox-light-color-scheme-states-focused-shadow
     );
 
+    $datepicker: (
+        state-selected-color: $datepicker-body-light-color-scheme-states-selected-color,
+        state-selected-background: $datepicker-body-light-color-scheme-states-selected-background
+    );
+
     $form-field: (
         border: $form-field-light-color-scheme-border,
         background: $form-field-light-color-scheme-background,
@@ -256,6 +261,7 @@
         button: $button,
         card: $card,
         checkbox: $checkbox,
+        datepicker: $datepicker,
         form-field: $form-field,
         forms: $forms,
         link: $link,
@@ -389,6 +395,11 @@
         state-focused-shadow: $checkbox-dark-color-scheme-states-focused-shadow
     );
 
+    $datepicker: (
+        state-selected-color: $datepicker-body-dark-color-scheme-states-selected-color,
+        state-selected-background: $datepicker-body-dark-color-scheme-states-selected-background
+    );
+
     $form-field: (
         border: $form-field-dark-color-scheme-border,
         background: $form-field-dark-color-scheme-background,
@@ -528,6 +539,7 @@
         button: $button,
         card: $card,
         checkbox: $checkbox,
+        datepicker: $datepicker,
         form-field: $form-field,
         forms: $forms,
         link: $link,

packages/mosaic/datepicker/_datepicker-theme.scss

@@ -6,24 +6,15 @@
 $mc-datepicker-selected-fade-amount: 0.6;
 $mc-datepicker-today-fade-amount: 0.2;
 
-@mixin _mc-datepicker-color($color) {
-    .mc-calendar__body-cell-content.mc-selected {
-        background: $color;
-    }
-
-    .mc-calendar__body_disabled > .mc-selected {
-        // todo background-color: fade-out($color, $mc-datepicker-selected-fade-amount);
-        background-color: $color;
-    }
-}
-
 @mixin mc-datepicker-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
 
+    $datepicker: map-get(map-get($theme, components), datepicker);
+
     .mc-calendar__table-header {
         color: mc-color($second, 400);
     }
@@ -71,25 +62,27 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-calendar__body-today {
-        color: mc-color($primary);
+        color: map-get($datepicker, state-selected-color);
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
         // todo border-color: fade-out(map-get($foreground, text), $mc-datepicker-today-fade-amount);
         border-color: map-get($background, background-disabled);
     }
 
-    @include _mc-datepicker-color(map-get(map-get($theme, states), selected-color));
+    .mc-calendar__body-cell-content.mc-selected {
+        background: map-get($datepicker, state-selected-background);
+    }
+
+    .mc-calendar__body_disabled > .mc-selected {
+        background-color: map-get($datepicker, state-selected-background);
+    }
 
     .mc-datepicker__content {
         @include popup-params($theme);
 
         color: map-get($foreground, text);
     }
-
-    .mc-active {
-        color: mc-color($primary);
-    }
 }
 
 @mixin mc-datepicker-typography($config) {

packages/mosaic/design-tokens/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 24 Aug 2021 08:22:45 GMT
+// Generated on Thu, 07 Oct 2021 08:29:06 GMT
 
 $light-color-scheme-primary-default: #338FCC;
 $light-color-scheme-second-default: #B3B3B3;
@@ -326,6 +326,10 @@ $checkbox-size-toggle-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
 $checkbox-font-default: body;
 $datepicker-toggle-size-width: 30px;
 $datepicker-toggle-size-height: 30px;
+$datepicker-body-light-color-scheme-states-selected-color: #338FCC;
+$datepicker-body-light-color-scheme-states-selected-background: #D8EAF7;
+$datepicker-body-dark-color-scheme-states-selected-color: #338FCC;
+$datepicker-body-dark-color-scheme-states-selected-background: #114E77;
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;

packages/mosaic/design-tokens/tokens.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:naming-convention object-literal-key-quotes quotemark whitespace */
 /**
  * Do not edit directly
- * Generated on Mon, 30 Aug 2021 13:44:07 GMT
+ * Generated on Thu, 07 Oct 2021 08:29:06 GMT
  */
 
 export const LightColorSchemePrimaryDefault = "#338FCC";
@@ -435,6 +435,10 @@ export const CheckboxSizeToggleBoxShadow = "inset 0 0 1px 0 rgba(0, 0, 0, 0.2)";
 export const CheckboxFontDefault = "body";
 export const DatepickerToggleSizeWidth = "30px";
 export const DatepickerToggleSizeHeight = "30px";
+export const DatepickerBodyLightColorSchemeStatesSelectedColor = "#338FCC";
+export const DatepickerBodyLightColorSchemeStatesSelectedBackground = "#D8EAF7";
+export const DatepickerBodyDarkColorSchemeStatesSelectedColor = "#338FCC";
+export const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "#114E77";
 export const DatepickerBodySizeLabelPaddings = "8px 28px 12px 12px";
 export const DatepickerBodySizeCellMinSize = "32px";
 export const DatepickerBodySizeCellMargin = "5%";

packages/mosaic/design-tokens/tokens/components/datepicker.json5

@@ -6,6 +6,22 @@
         }
     },
     'datepicker-body': {
+        'light-color-scheme': {
+            states: {
+                selected: {
+                    color: { value: '{light-color-scheme.primary.default.value}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.100.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            states: {
+                selected: {
+                    color: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.700.value}' }
+                }
+            }
+        },
         size: {
             label: {
                 'paddings': { value: '8px 28px 12px 12px' }