@ptsecurity/mosaic 17.2.0 → 17.3.0

package/core/styles/theming/_components-theming.scss

@@ -36,67 +36,67 @@
     );
 
     $badge: (
-        primary_solid: (
+        solid-primary: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
         ),
-        second_solid: (
+        solid-secondary: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
         ),
-        light_solid: (
+        solid-light: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
         ),
-        info_solid: (
+        solid-info: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
         ),
-        success_solid: (
+        solid-success: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
         ),
-        warning_solid: (
+        solid-warning: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
         ),
-        error_solid: (
+        solid-error: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
         ),
-        transparent_solid: (
+        solid-transparent: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
         ),
-        primary_pastel: (
+        pastel-primary: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
         ),
-        info_pastel: (
+        pastel-info: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
         ),
-        success_pastel: (
+        pastel-success: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
         ),
-        warning_pastel: (
+        pastel-warning: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
         ),
-        error_pastel: (
+        pastel-error: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')

package/core/styles/theming/_scrollbars.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../functions/string' as *;
+@use '../common/tokens' as *;
+
 
 .mc-scrollbar {
     //firefox
@@ -11,54 +13,55 @@
 }
 
 @mixin mc-scrollbar-theme($theme) {
-    $scrollbar: map.get(map.get($theme, components), scrollbar);
+    $scrollbar: map.get($theme, components, scrollbar);
     $thumb: map.get($scrollbar, thumb);
     $arrow: map.get($scrollbar, arrow);
 
     .mc-scrollbar {
-        @include mc-scrollbar-geometry(map.get($theme, tokens));
+        @include mc-scrollbar-geometry();
 
         // firefox
         @supports not selector(::-webkit-scrollbar) {
-            scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+            scrollbar-color: mc-css-variable(thumb-normal, map-get($thumb, normal))
+                mc-css-variable(scrollbar-track, map-get($scrollbar, track));
         }
 
         // webkit
         &::-webkit-scrollbar,
         ::-webkit-scrollbar {
-            background-color: map.get($scrollbar, track);
+            background-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
         }
 
 
         &::-webkit-scrollbar-corner,
         ::-webkit-scrollbar-corner {
-            background-color: map.get($scrollbar, corner-background);
+            background-color: mc-css-variable(scrollbar-corner-background, map.get($scrollbar, corner-background));
         }
 
         &::-webkit-scrollbar-thumb,
         ::-webkit-scrollbar-thumb {
-            background-color: map.get($thumb, normal);
+            background-color: mc-css-variable(thumb-normal, map.get($thumb, normal));
 
-            border-color: map.get($scrollbar, track);
+            border-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
             border-style: solid;
 
             &:hover {
-                background-color: map.get($thumb, hover);
+                background-color: mc-css-variable(thumb-hover, map.get($thumb, hover));
             }
 
             &:disabled {
-                background-color: map.get($thumb, disabled);
+                background-color: mc-css-variable(thumb-disabled, map.get($thumb, disabled));
             }
 
             &:active {
-                background-color: map.get($thumb, active);
+                background-color: mc-css-variable(thumb-active, map.get($thumb, active));
             }
         }
 
         /* stylelint-disable */
         &::-webkit-scrollbar-button,
         ::-webkit-scrollbar-button {
-            background-color: map.get($arrow, background);
+            background-color: mc-css-variable(arrow-background, map.get($arrow, background));
             background-size: 10px 10px;
             background-repeat: no-repeat;
             background-position: center center;
@@ -93,39 +96,33 @@
     }
 }
 
-@mixin mc-scrollbar-geometry($tokens) {
+@mixin mc-scrollbar-geometry() {
     // webkit
     &::-webkit-scrollbar,
     ::-webkit-scrollbar {
         &:vertical {
-            width: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            width: mc-css-variable(scrollbar-size-track-dimension);
         }
 
         &:horizontal {
-            height: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            height: mc-css-variable(scrollbar-size-track-dimension);
         }
     }
 
     /* stylelint-disable no-descending-specificity */
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
-        border-width: var(
-            --mc-scrollbar-size-thumb-inset-border-width,
-            map.get($tokens, scrollbar-size-thumb-border-width)
-        );
-        border-radius: var(
-            --mc-scrollbar-size-thumb-inset-border-radius,
-            map.get($tokens, scrollbar-size-thumb-border-radius)
-        );
+        width: mc-css-variable(scrollbar-size-thumb-width);
+        border-width: mc-css-variable(scrollbar-size-thumb-border-width);
+        border-radius: mc-css-variable(scrollbar-size-thumb-border-radius);
 
         // these props are used to set the user-friendly thumb for long content.
         &:vertical {
-            min-height: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-height: mc-css-variable(scrollbar-size-thumb-min-size);
         }
 
         &:horizontal {
-            min-width: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-width: mc-css-variable(scrollbar-size-thumb-min-size);
         }
     }
 
@@ -133,8 +130,8 @@
     ::-webkit-scrollbar-button {
         display: none;
 
-        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
-        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
+        width: mc-css-variable(scrollbar-size-arrow-icon-width);
+        height: mc-css-variable(scrollbar-size-arrow-icon-height);
     }
 }
 

package/core/styles/theming/_theming.scss

@@ -2,9 +2,11 @@
 @use 'sass:meta';
 
 @use 'components-theming' as *;
+@use '../common/tokens' as *;
+
 
 @function mc-contrast($palette, $hue) {
-    @return map.get(map.get($palette, contrast), $hue);
+    @return map.get($palette, contrast, $hue);
 }
 
 @function mc-palette($base-palette, $default) {
@@ -37,8 +39,8 @@
         $background: map.get($theme, background);
         $foreground: map.get($theme, foreground);
 
-        background-color: mc-color($background, background);
-        color: mc-color($foreground, text);
+        background-color: mc-css-variable(background-background, map.get($background, background));
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
     }
 
     .mc-theme-loaded-marker {
@@ -46,23 +48,23 @@
     }
 
     .mc-primary {
-        color: mc-color(map.get($theme, primary));
+        color: mc-css-variable(primary-default, map.get($theme, primary, default));
     }
 
     .mc-error {
-        color: mc-color(map.get($theme, error));
+        color: mc-css-variable(error-default, map.get($theme, error, default));
     }
 
     .mc-warning {
-        color: mc-color(map.get($theme, warning));
+        color: mc-css-variable(warning-default, map.get($theme, warning, default));
     }
 
     .mc-success {
-        color: mc-color(map.get($theme, success));
+        color: mc-css-variable(success-default, map.get($theme, success, default));
     }
 
     .mc-info {
-        color: mc-color(map.get($theme, info));
+        color: mc-css-variable(info-default, map.get($theme, info, default));
     }
 }
 

package/core/styles/typography/_typography-utils.scss

@@ -24,7 +24,7 @@
 }
 
 @function _mc-get-type-value($config, $level, $name) {
-    @return map.get(map.get($config, $level), $name);
+    @return map.get($config, $level, $name);
 }
 
 @function mc-font-size($config, $level) {

package/core/styles/typography/_typography.scss

@@ -1,11 +1,12 @@
 @use 'sass:map';
 
 @use 'typography-utils' as *;
+@use '../common/tokens' as *;
 
 
 @function mc-typography-config($tokens) {
     $font-family: map.get($tokens, font-family-base);
-    $typography: map.get(map.get($tokens, mosaic), typography);
+    $typography: map.get($tokens, mosaic, typography);
 
     $config: (
         display-1:              map.get($typography, display-1),
@@ -49,7 +50,7 @@
 
 @function mc-markdown-typography-config($tokens) {
     $font-family: map.get($tokens, font-family-base);
-    $md-typography: map.get(map.get($tokens, md-typography), md-typography);
+    $md-typography: map.get($tokens, md-typography, md-typography);
 
     $config: (
         md-h1:              map.get($md-typography, md-h1),
@@ -80,83 +81,83 @@
 
 @mixin mc-base-typography($config) {
     .mc-display-1 {
-        @include mc-typography-level-to-styles($config, display-1);
+        @include mc-typography-level-to-styles_css-variables($config, typography, display-1);
     }
 
     .mc-display-2 {
-        @include mc-typography-level-to-styles($config, display-2);
+        @include mc-typography-level-to-styles_css-variables($config, typography, display-2);
     }
 
     .mc-display-3 {
-        @include mc-typography-level-to-styles($config, display-3);
+        @include mc-typography-level-to-styles_css-variables($config, typography, display-3);
     }
 
     .mc-headline {
-        @include mc-typography-level-to-styles($config, headline);
+        @include mc-typography-level-to-styles_css-variables($config, typography, headline);
     }
 
     .mc-subheading {
-        @include mc-typography-level-to-styles($config, subheading);
+        @include mc-typography-level-to-styles_css-variables($config, typography, subheading);
     }
 
     .mc-title {
-        @include mc-typography-level-to-styles($config, title);
+        @include mc-typography-level-to-styles_css-variables($config, typography, title);
     }
 
     .mc-body {
-        @include mc-typography-level-to-styles($config, body);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body);
     }
 
     .mc-body_tabular {
-        @include mc-typography-level-to-styles($config, body-tabular);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body-tabular);
     }
 
     .mc-body_strong {
-        @include mc-typography-level-to-styles($config, body-strong);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body-strong);
     }
 
     .mc-body_caps {
-        @include mc-typography-level-to-styles($config, body-caps);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body-caps);
     }
 
     .mc-body_mono {
-        @include mc-typography-level-to-styles($config, body-mono);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body-mono);
     }
 
     .mc-body_mono_strong {
-        @include mc-typography-level-to-styles($config, body-mono-strong);
+        @include mc-typography-level-to-styles_css-variables($config, typography, body-mono-strong);
     }
 
     .mc-caption {
-        @include mc-typography-level-to-styles($config, caption);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption);
     }
 
     .mc-caption_tabular {
-        @include mc-typography-level-to-styles($config, caption-tabular);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption-tabular);
     }
 
     .mc-caption_strong {
-        @include mc-typography-level-to-styles($config, caption-strong);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption-strong);
     }
 
     .mc-caption_caps {
-        @include mc-typography-level-to-styles($config, caption-caps);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption-caps);
     }
 
     .mc-caption_mono {
-        @include mc-typography-level-to-styles($config, caption-mono);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption-mono);
     }
 
     .mc-caption_mono_strong {
-        @include mc-typography-level-to-styles($config, caption-mono-strong);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption-mono-strong);
     }
 
     .mc-small-text {
-        @include mc-typography-level-to-styles($config, small-text);
+        @include mc-typography-level-to-styles_css-variables($config, typography, small-text);
     }
 
     .mc-extra-small-text {
-        @include mc-typography-level-to-styles($config, extra-small-text);
+        @include mc-typography-level-to-styles_css-variables($config, typography, extra-small-text);
     }
 }
 
@@ -164,27 +165,27 @@
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .md-h#{$i} {
-            @include mc-typography-level-to-styles($config, md-h#{$i});
+            @include mc-typography-level-to-styles_css-variables($config, typography, md-h#{$i});
         }
     }
 
     .md-body {
-        @include mc-typography-level-to-styles($config, md-body);
+        @include mc-typography-level-to-styles_css-variables($config, typography, md-body);
     }
 
     .md-body-mono {
-        @include mc-typography-level-to-styles($config, md-body-mono);
+        @include mc-typography-level-to-styles_css-variables($config, typography, md-body-mono);
     }
 
     .md-caption {
-        @include mc-typography-level-to-styles($config, md-caption);
+        @include mc-typography-level-to-styles_css-variables($config, typography, md-caption);
     }
 
     .md-table-cell {
-        @include mc-typography-level-to-styles($config, md-table-cell);
+        @include mc-typography-level-to-styles_css-variables($config, typography, md-table-cell);
     }
 
     .md-table-header {
-        @include mc-typography-level-to-styles($config, md-table-header);
+        @include mc-typography-level-to-styles_css-variables($config, typography, md-table-header);
     }
 }

package/core/styles/visual/_layout.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../../styles/common/rtl';
+@use '../common/tokens' as *;
 
 @use '../tokens';
 
@@ -456,19 +457,19 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin layout-indents() {
     $sizes: (
-        '3xs': map.get($tokens, size-3xs),
-        'xxs': map.get($tokens, size-xxs),
-        'xs': map.get($tokens, size-xs),
-        's': map.get($tokens, size-s),
-        'm': map.get($tokens, size-m),
-        'l': map.get($tokens, size-l),
-        'xl': map.get($tokens, size-xl),
-        'xxl': map.get($tokens, size-xxl),
-        '3xl': map.get($tokens, size-3xl),
-        '4xl': map.get($tokens, size-4xl),
-        '5xl': map.get($tokens, size-5xl),
-        '6xl': map.get($tokens, size-6xl),
-        '7xl': map.get($tokens, size-7xl)
+        '3xs': mc-css-variable(size-3xs),
+        'xxs': mc-css-variable(size-xxs),
+        'xs': mc-css-variable(size-xs),
+        's': mc-css-variable(size-s),
+        'm': mc-css-variable(size-m),
+        'l': mc-css-variable(size-l),
+        'xl': mc-css-variable(size-xl),
+        'xxl': mc-css-variable(size-xxl),
+        '3xl': mc-css-variable(size-3xl),
+        '4xl': mc-css-variable(size-4xl),
+        '5xl': mc-css-variable(size-5xl),
+        '6xl': mc-css-variable(size-6xl),
+        '7xl': mc-css-variable(size-7xl)
     );
 
     $indents: 'padding', 'margin';

package/datepicker/_datepicker-theme.scss

@@ -11,10 +11,9 @@
     $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);
@@ -48,7 +47,7 @@
     .cdk-program-focused .mc-calendar__body_active {
         & > .mc-calendar__body-cell-content {
             border-color: map-get($theme, states, focused-color);
-            box-shadow: 0 0 0 1px map-get($theme, states, focused-color);
+            box-shadow: 0 0 0.1px 1px map-get($theme, states, focused-color);
         }
     }
 
@@ -88,14 +87,14 @@
 
 @mixin mc-datepicker-typography($config) {
     .mc-calendar {
-        @include mc-typography-css-variables(datepicker-calendar, default);
+        @include mc-typography-css-variables($config, datepicker-calendar, default);
     }
 
     .mc-calendar__table-header th {
-        @include mc-typography-css-variables(datepicker-calendar, header);
+        @include mc-typography-css-variables($config, datepicker-calendar, header);
     }
 
     .mc-calendar__body-today {
-        @include mc-typography-css-variables(datepicker-body, today);
+        @include mc-typography-css-variables($config, datepicker-body, today);
     }
 }

package/divider/_divider-theme.scss

@@ -3,7 +3,7 @@
 
 
 @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: mc-css-variable(divider-color, map-get($divider, color));

package/dl/_dl-theme.scss

@@ -6,7 +6,7 @@
 
 
 @mixin mc-dl-theme($theme) {
-    $dl: map.get(map.get($theme, components), dl);
+    $dl: map.get($theme, components, dl);
 
     .mc-dt {
         color: mc-css-variable(dl-dt, map-get($dl, dt));
@@ -20,20 +20,20 @@
 @mixin mc-dl-typography($config) {
     .mc-dl {
         & .mc-dt {
-            @include mc-typography-css-variables(description-list, default-horizontal-dt);
+            @include mc-typography-css-variables($config, description-list, default-horizontal-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-css-variables(description-list, default-horizontal-dd);
+            @include mc-typography-css-variables($config, description-list, default-horizontal-dd);
         }
 
         &.mc-dl_small {
             & .mc-dt {
-                @include mc-typography-css-variables(description-list, small-horizontal-dt);
+                @include mc-typography-css-variables($config, description-list, small-horizontal-dt);
             }
 
             & .mc-dd {
-                @include mc-typography-css-variables(description-list, small-horizontal-dd);
+                @include mc-typography-css-variables($config, description-list, small-horizontal-dd);
             }
         }
     }
@@ -41,20 +41,20 @@
 
     .mc-dl.mc-dl_vertical {
         & .mc-dt {
-            @include mc-typography-css-variables(description-list, default-vertical-dt);
+            @include mc-typography-css-variables($config, description-list, default-vertical-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-css-variables(description-list, default-vertical-dd);
+            @include mc-typography-css-variables($config, description-list, default-vertical-dd);
         }
 
         &.mc-dl_small {
             & .mc-dt {
-                @include mc-typography-css-variables(description-list, small-vertical-dt);
+                @include mc-typography-css-variables($config, description-list, small-vertical-dt);
             }
 
             & .mc-dd {
-                @include mc-typography-css-variables(description-list, small-vertical-dd);
+                @include mc-typography-css-variables($config, description-list, small-vertical-dd);
             }
         }
     }

package/dropdown/_dropdown-theme.scss

@@ -69,18 +69,18 @@
 @mixin mc-dropdown-typography($config) {
     .mc-dropdown-item,
     .mc-dropdown__content {
-        @include mc-typography-css-variables(dropdown-item, default);
+        @include mc-typography-css-variables($config, dropdown-item, default);
     }
 
     .mc-dropdown-item__caption {
-        @include mc-typography-css-variables(dropdown-item, caption);
+        @include mc-typography-css-variables($config, dropdown-item, caption);
     }
 
     .mc-dropdown__group-header {
-        @include mc-typography-css-variables(dropdown-group-header, default);
+        @include mc-typography-css-variables($config, dropdown-group-header, default);
 
         &.mc-dropdown__group-header_small {
-            @include mc-typography-css-variables(dropdown-group-header, small);
+            @include mc-typography-css-variables($config, dropdown-group-header, small);
         }
     }
 }