@ptsecurity/mosaic 17.1.0 → 17.2.1

package/datepicker/_datepicker-theme.scss

@@ -4,18 +4,16 @@
 @use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-$mc-datepicker-selected-fade-amount: 0.6;
-$mc-datepicker-today-fade-amount: 0.2;
 
 @mixin mc-datepicker-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
     $secondary: map.get($theme, secondary);
 
-    $datepicker: map.get(map.get($theme, components), datepicker);
+    $datepicker: map.get($theme, components, datepicker);
 
     .mc-calendar__table-header {
         color: theming.mc-color($secondary, 400);
@@ -28,28 +26,28 @@ $mc-datepicker-today-fade-amount: 0.2;
         opacity: 1;
 
         .mc-icon {
-            color: theming.mc-color($foreground, icon);
+            color: mc-css-variable(foreground-icon, map-get($foreground, icon));
         }
     }
 
     .mc-calendar__table-header-divider::after {
-        background: map.get($foreground, divider);
+        background: mc-css-variable(foreground-divider, map-get($foreground, divider));
     }
 
     .mc-calendar__body-cell-content {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
         border-color: transparent;
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-cell-content:not(.mc-selected) {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
     }
 
     .cdk-keyboard-focused .mc-calendar__body_active,
     .cdk-program-focused .mc-calendar__body_active {
         & > .mc-calendar__body-cell-content {
-            border-color: map.get(map.get($theme, states), focused-color);
-            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+            border-color: map-get($theme, states, focused-color);
+            box-shadow: 0 0 0 1px map-get($theme, states, focused-color);
         }
     }
 
@@ -60,43 +58,43 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-calendar__body-today {
-        color: map.get($datepicker, state-today-color);
+        color: mc-css-variable(datepicker-state-today-color, map-get($datepicker, state-today-color));
         // now tokens have wrong color for dark theme
         //background: map.get($datepicker, state-today-background);
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
-        border-color: map.get($background, background-disabled);
+        border-color: mc-css-variable(background-background-disabled, map-get($background, background-disabled));
     }
 
     .mc-calendar__body-cell-content.mc-selected {
-        color: map.get($datepicker, state-selected-color);
-        background: map.get($datepicker, state-selected-background);
+        color: mc-css-variable(datepicker-state-selected-color, map-get($datepicker, state-selected-color));
+        background: mc-css-variable(
+            datepicker-state-selected-background, map-get($datepicker, state-selected-background));
     }
 
     .mc-calendar__body_disabled > .mc-selected {
-        background-color: map.get($datepicker, state-selected-background);
+        background-color: mc-css-variable(
+            datepicker-state-selected-background, map-get($datepicker, state-selected-background));
     }
 
     .mc-datepicker__content {
         @include popup.popup-params($theme);
 
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
     }
 }
 
 @mixin mc-datepicker-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-calendar {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+        @include mc-typography-css-variables(datepicker-calendar, default);
     }
 
     .mc-calendar__table-header th {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
+        @include mc-typography-css-variables(datepicker-calendar, header);
     }
 
     .mc-calendar__body-today {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+        @include mc-typography-css-variables(datepicker-body, today);
     }
 }

package/datepicker/calendar-body.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -29,10 +30,10 @@ $mc-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-siz
 
 .mc-calendar__body-cell-content {
     position: absolute;
-    top: var(--mc-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
-    left: var(--mc-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
+    top: mc-css-variable(datepicker-body-size-cell-margin);
+    left: mc-css-variable(datepicker-body-size-cell-margin);
 
-    padding: var(--mc-datepicker-body-size-cell-padding, map.get($tokens, datepicker-body-size-cell-padding));
+    padding: mc-css-variable(datepicker-body-size-cell-padding);
 
     display: flex;
     align-items: center;
@@ -45,12 +46,8 @@ $mc-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-siz
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-width: var(
-        --mc-datepicker-body-size-cell-border-width, map.get($tokens, datepicker-body-size-cell-border-width)
-    );
-    border-radius: var(
-        --mc-datepicker-body-size-cell-border-radius, map.get($tokens, datepicker-body-size-cell-border-radius)
-    );
+    border-width: mc-css-variable(datepicker-body-size-cell-border-width);
+    border-radius: mc-css-variable(datepicker-body-size-cell-border-radius);
     border-style: solid;
 }
 

package/datepicker/calendar-header.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -12,40 +13,22 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: space-between;
 
     padding:
-        var(--mc-datepicker-calendar-size-padding-top, map.get($tokens, datepicker-calendar-size-padding-top))
-        var(
-            --mc-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(--mc-datepicker-calendar-size-padding-blocks, map.get($tokens, datepicker-calendar-size-padding-blocks))
-        var(
-            --mc-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
+        mc-css-variable(datepicker-calendar-size-padding-top)
+        mc-css-variable(datepicker-calendar-size-padding-horizontal)
+        mc-css-variable(datepicker-calendar-size-padding-blocks)
+        mc-css-variable(datepicker-calendar-size-padding-horizontal);
 }
 
 .mc-calendar-header__previous-button::after {
-    border-left-width: var(
-        --mc-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
-    );
+    border-left-width: mc-css-variable(datepicker-calendar-size-icon-border-width);
 
-    transform: var(
-        --mc-datepicker-calendar-size-icon-prev-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-prev-icon-transform)
-    );
+    transform: mc-css-variable(datepicker-calendar-size-icon-prev-icon-transform);
 }
 
 .mc-calendar-header__next-button::after {
-    border-right-width: var(
-        --mc-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
-    );
+    border-right-width: mc-css-variable(datepicker-calendar-size-icon-border-width);
 
-    transform: var(
-        --mc-datepicker-calendar-size-icon-nex-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
-    );
+    transform: mc-css-variable(datepicker-calendar-size-icon-nex-icon-transform);
 }
 
 .mc-calendar-header__select {

package/datepicker/calendar.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -13,18 +14,9 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-calendar__content {
     padding:
         0
-        var(
-            --mc-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --mc-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --mc-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
+        mc-css-variable(datepicker-calendar-size-padding-horizontal)
+        mc-css-variable(datepicker-calendar-size-padding-horizontal)
+        mc-css-variable(datepicker-calendar-size-padding-horizontal);
     outline: none;
 }
 
@@ -59,10 +51,7 @@ $tokens: meta.module-variables(tokens) !default;
             left: calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
             right: calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
 
-            height: var(
-                --mc-datepicker-calendar-size-divider-width,
-                map.get($tokens, datepicker-calendar-size-divider-width)
-            );
+            height: mc-css-variable(datepicker-calendar-size-divider-width);
         }
     }
 }

package/datepicker/datepicker-content.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -19,10 +20,7 @@ $mc-datepicker-non-touch-calendar-height: 348px;
     border: {
         width: 1px;
         style: solid;
-        radius: var(
-            --mc-datepicker-calendar-size-border-radius,
-            map.get($tokens, datepicker-calendar-size-border-radius)
-        );
+        radius: mc-css-variable(datepicker-calendar-size-border-radius);
     }
 
     .mc-calendar {

package/datepicker/datepicker-input.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,5 +12,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-datepicker {
-    width: var(--mc-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+    width: mc-css-variable(datepicker-input-size-width);
 }

package/datepicker/datepicker-toggle.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-datepicker-toggle__button.mc-icon-button {
-    width: var(--mc-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
-    height: var(--mc-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
+    width: mc-css-variable(datepicker-toggle-size-width);
+    height: mc-css-variable(datepicker-toggle-size-height);
     margin-left: 2px;
 }
 

package/divider/_divider-theme.scss

@@ -1,13 +1,15 @@
 @use 'sass:map';
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-divider-theme($theme) {
-    $divider: map.get(map.get($theme, components), divider);
+    $divider: map.get($theme, components, divider);
 
     .mc-divider_horizontal {
-        border-top-color: map.get($divider, color);
+        border-top-color: mc-css-variable(divider-color, map-get($divider, color));
     }
 
     .mc-divider_vertical {
-        border-right-color: map.get($divider, color);
+        border-right-color: mc-css-variable(divider-color, map-get($divider, color));
     }
 }

package/divider/divider.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -25,23 +26,23 @@ $tokens: meta.module-variables(tokens) !default;
     margin: 0;
 
     &.mc-divider_horizontal {
-        border-top-width: var(--mc-divider-size-width, map.get($tokens, divider-size-width));
+        border-top-width: mc-css-variable(divider-size-width);
         border-top-style: solid;
     }
 
     &.mc-divider_vertical {
         height: 100%;
 
-        border-right-width: var(--mc-divider-size-width, map.get($tokens, divider-size-width));
+        border-right-width: mc-css-variable(divider-size-width);
         border-right-style: solid;
     }
 
     &.mc-divider_inset {
-        margin-left: var(--mc-divider-size-inset-margin, map.get($tokens, divider-size-inset-margin));
+        margin-left: mc-css-variable(divider-size-inset-margin);
 
         [dir='rtl'] & {
             margin-left: auto;
-            margin-right: var(--mc-divider-size-inset-margin, map.get($tokens, divider-size-inset-margin));
+            margin-right: mc-css-variable(divider-size-inset-margin);
         }
     }
 }

package/dl/_dl-theme.scss

@@ -2,50 +2,38 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-dl-theme($theme) {
-    $dl: map.get(map.get($theme, components), dl);
+    $dl: map.get($theme, components, dl);
 
     .mc-dt {
-        color: map.get($dl, dt);
+        color: mc-css-variable(dl-dt, map-get($dl, dt));
     }
 
     .mc-dd {
-        color: map.get($dl, dd);
+        color: mc-css-variable(dl-dd, map-get($dl, dd));
     }
 }
 
 @mixin mc-dl-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-dl {
         & .mc-dt {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dt)
-            );
+            @include mc-typography-css-variables(description-list, default-horizontal-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dd)
-            );
+            @include mc-typography-css-variables(description-list, default-horizontal-dd);
         }
 
         &.mc-dl_small {
             & .mc-dt {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dt)
-                );
+                @include mc-typography-css-variables(description-list, small-horizontal-dt);
             }
 
             & .mc-dd {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dd)
-                );
+                @include mc-typography-css-variables(description-list, small-horizontal-dd);
             }
         }
     }
@@ -53,32 +41,20 @@
 
     .mc-dl.mc-dl_vertical {
         & .mc-dt {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dt)
-            );
+            @include mc-typography-css-variables(description-list, default-vertical-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dd)
-            );
+            @include mc-typography-css-variables(description-list, default-vertical-dd);
         }
 
         &.mc-dl_small {
             & .mc-dt {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dt)
-                );
+                @include mc-typography-css-variables(description-list, small-vertical-dt);
             }
 
             & .mc-dd {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dd)
-                );
+                @include mc-typography-css-variables(description-list, small-vertical-dd);
             }
         }
     }

package/dl/dl.scss

@@ -2,44 +2,29 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
 
 .mc-dl {
     display: grid;
-    column-gap: var(
-        --mc-description-list-size-default-horizontal-column-gap,
-        map.get($tokens, description-list-size-default-horizontal-column-gap)
-    );
-    row-gap: var(
-        --mc-description-list-size-default-horizontal-row-gap,
-        map.get($tokens, description-list-size-default-horizontal-row-gap)
-    );
+    column-gap: mc-css-variable(description-list-size-default-horizontal-column-gap);
+    row-gap: mc-css-variable(description-list-size-default-horizontal-row-gap);
 
     grid-template-columns: repeat(4, 1fr);
 
     .mc-dt {
-        grid-column: var(
-            --mc-description-list-size-dt-grid-column, map.get($tokens, description-list-size-dt-grid-column)
-        );
+        grid-column: mc-css-variable(description-list-size-dt-grid-column);
     }
 
     .mc-dd {
-        grid-column: var(
-            --mc-description-list-size-dd-grid-column, map.get($tokens, description-list-size-dd-grid-column)
-        );
+        grid-column: mc-css-variable(description-list-size-dd-grid-column);
     }
 
     &.mc-dl_small {
-        column-gap: var(
-            --mc-description-list-size-small-horizontal-column-gap,
-            map.get($tokens, description-list-size-small-horizontal-column-gap)
-        );
-        row-gap: var(
-            --mc-description-list-size-small-horizontal-row-gap,
-            map.get($tokens, description-list-size-small-horizontal-row-gap)
-        );
+        column-gap: mc-css-variable(description-list-size-small-horizontal-column-gap);
+        row-gap: mc-css-variable(description-list-size-small-horizontal-row-gap);
     }
 
     &.mc-dl_wide {
@@ -57,14 +42,8 @@ $tokens: meta.module-variables(tokens) !default;
     &.mc-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        column-gap: var(
-            --mc-description-list-size-default-vertical-column-gap,
-            map.get($tokens, description-list-size-default-vertical-column-gap)
-        );
-        row-gap: var(
-            --mc-description-list-size-default-vertical-row-gap,
-            map.get($tokens, description-list-size-default-vertical-row-gap)
-        );
+        column-gap: mc-css-variable(description-list-size-default-vertical-column-gap);
+        row-gap: mc-css-variable(description-list-size-default-vertical-row-gap);
 
         .mc-dt,
         .mc-dd {
@@ -72,27 +51,15 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .mc-dd {
-            margin-bottom: var(
-                --mc-description-list-size-default-vertical-dd-margin-bottom,
-                map.get($tokens, description-list-size-default-vertical-dd-margin-bottom)
-            );
+            margin-bottom: mc-css-variable(description-list-size-default-vertical-dd-margin-bottom);
         }
 
         &.mc-dl_small {
-            column-gap: var(
-                --mc-description-list-size-small-vertical-column-gap,
-                map.get($tokens, description-list-size-small-vertical-column-gap)
-            );
-            row-gap: var(
-                --mc-description-list-size-small-vertical-row-gap,
-                map.get($tokens, description-list-size-small-vertical-row-gap)
-            );
+            column-gap: mc-css-variable(description-list-size-small-vertical-column-gap);
+            row-gap: mc-css-variable(description-list-size-small-vertical-row-gap);
 
             .mc-dd {
-                margin-bottom: var(
-                    --mc-description-list-size-small-vertical-dd-margin-bottom,
-                    map.get($tokens, description-list-size-small-vertical-dd-margin-bottom)
-                );
+                margin-bottom: mc-css-variable(description-list-size-small-vertical-dd-margin-bottom);
             }
         }
     }

package/dropdown/_dropdown-theme.scss

@@ -4,47 +4,51 @@
 @use '../core/styles/common/popup' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-dropdown-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-    $secondary: map.get($theme, secondary);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+    $secondary: map-get($theme, secondary);
+
+    $theme-states: map-get($theme, states);
 
     .mc-dropdown__panel {
         @include popup-params($theme);
     }
 
     .mc-dropdown-item {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         background: transparent;
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
         }
 
         &.cdk-keyboard-focused {
-            outline: map.get(map.get($theme, states), focused-color) solid 2px;
+            outline: mc-css-variable(states-focused-color, map-get($theme-states, focused-color)) solid 2px;
             outline-offset: -2px !important;
         }
 
         &.mc-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            background: mc-css-variable(states-selected-color, map-get($theme-states, selected-color));
         }
 
         &[disabled] {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
             background: transparent;
         }
 
         .mc-dropdown-item__caption {
-            color: map.get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
     }
 
     .mc-dropdown-item_highlighted {
-        background: map.get($background, overlay-hover);
+        background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
     }
 
     .mc-dropdown-item-overlay {
@@ -52,7 +56,7 @@
     }
 
     .mc-dropdown__divider {
-        background-color: map.get($foreground, divider);
+        background-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
     }
 
     .mc-dropdown-trigger.mc-pressed {
@@ -63,22 +67,20 @@
 }
 
 @mixin mc-dropdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-dropdown-item,
     .mc-dropdown__content {
-        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-default));
+        @include mc-typography-css-variables(dropdown-item, default);
     }
 
     .mc-dropdown-item__caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-caption));
+        @include mc-typography-css-variables(dropdown-item, caption);
     }
 
     .mc-dropdown__group-header {
-        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-default));
+        @include mc-typography-css-variables(dropdown-group-header, default);
 
         &.mc-dropdown__group-header_small {
-            @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-small));
+            @include mc-typography-css-variables(dropdown-group-header, small);
         }
     }
 }