@ptsecurity/mosaic 17.0.0 → 17.2.0

package/splitter/_splitter-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-splitter-theme($theme) {
@@ -11,7 +12,8 @@
 
         &:hover,
         &.mc-gutter_dragged {
-            background-color: map.get($background, background-disabled);
+            background-color: mc-css-variable(
+                background-background-disabled, map-get($background, background-disabled));
         }
 
         &.mc-gutter_vertical {
@@ -19,13 +21,13 @@
         }
 
         &[disabled] {
-            background-color: mc-color($background, overlay-disabled);
+            background-color: mc-css-variable(background-overlay-disabled, map-get($background, overlay-disabled));
 
             cursor: default;
         }
     }
 
     .mc-gutter-ghost {
-        background: mc-color($background, overlay-disabled);
+        background: mc-css-variable(background-overlay-disabled, map-get($background, overlay-disabled));
     }
 }

package/table/_table-theme.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-table-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -9,22 +11,22 @@
 
     .mc-table {
         & > thead {
-            color: map.get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
 
             & > tr > th {
-                border-color: map.get($foreground, divider);
+                border-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
             }
         }
 
         & > tbody {
             & > tr {
                 &:hover {
-                    background-color: map.get($background, overlay-hover);
+                    background-color: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
                 }
 
                 & > th,
                 & > td {
-                    color: map.get($foreground, text);
+                    color: mc-css-variable(foreground-text, map-get($foreground, text));
                 }
             }
         }
@@ -33,7 +35,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: map.get($foreground, divider);
+                    border-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
                 }
             }
         }
@@ -41,15 +43,13 @@
 }
 
 @mixin mc-table-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-table {
         & > thead {
             & > tr > th {
                 font-weight: normal;
             }
 
-            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-header));
+            @include mc-typography-css-variables(table, header);
         }
 
         & > tbody {
@@ -57,7 +57,7 @@
                 font-weight: normal;
             }
 
-            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-body));
+            @include mc-typography-css-variables(table, body);
         }
     }
 }

package/table/table.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -16,7 +17,7 @@ $tokens: meta.module-variables(tokens) !default;
             & > th,
             & > td {
                 padding: {
-                    top: var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
+                    top: mc-css-variable(table-size-row-padding-vertical);
                     right: calc((var(
                         --mc-table-size-row-padding-horizontal,
                         map.get($tokens, table-size-row-padding-horizontal)
@@ -37,14 +38,12 @@ $tokens: meta.module-variables(tokens) !default;
 
             & > th:first-child,
             & > td:first-child {
-                padding-left:
-                    var(--mc-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+                padding-left: mc-css-variable(table-size-row-padding-horizontal);
             }
 
             & > th:last-child,
             & > td:last-child {
-                padding-right:
-                    var(--mc-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+                padding-right: mc-css-variable(table-size-row-padding-horizontal);
             }
         }
     }
@@ -53,23 +52,21 @@ $tokens: meta.module-variables(tokens) !default;
     & > thead {
         & > tr > th {
             padding: {
-                top: var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
-                bottom: (
-                    calc(var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
-                    var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)))
-                );
+                top: mc-css-variable(table-size-row-padding-vertical);
+                bottom: (calc(
+                    var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
+                    var(--mc-table-size-border-width, map.get($tokens, table-size-border-width))
+                ));
             }
 
-            border-bottom:
-                var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+            border-bottom: mc-css-variable(table-size-border-width) solid transparent;
         }
     }
 
     & > tbody > tr {
         & th,
         & td {
-            border-bottom:
-                var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+            border-bottom: mc-css-variable(table-size-border-width) solid transparent;
         }
     }
     /* stylelint-enable no-descending-specificity */

package/tabs/_tabs-common.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -24,8 +25,8 @@ $tokens: meta.module-variables(tokens) !default;
             width: calc(var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
             style: solid;
             top: {
-                left-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-                right-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+                left-radius: mc-css-variable(tabs-size-border-radius);
+                right-radius: mc-css-variable(tabs-size-border-radius);
             }
         };
 
@@ -43,7 +44,7 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    height: var(--mc-tabs-size-height, map.get($tokens, tabs-size-height));
+    height: mc-css-variable(tabs-size-height);
 
     text-align: center;
     white-space: nowrap;
@@ -51,8 +52,8 @@ $tokens: meta.module-variables(tokens) !default;
     cursor: pointer;
 
     padding: {
-        right: var(--mc-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
-        left: var(--mc-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+        right: mc-css-variable(tabs-size-padding-horizontal);
+        left: mc-css-variable(tabs-size-padding-horizontal);
     }
 
     outline: none;
@@ -90,17 +91,17 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .mc-tab-label__content > .mc-icon {
         &.mc-icon_left {
-            margin-right: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+            margin-right: mc-css-variable(tabs-size-label-icon-margin);
         }
 
         &.mc-icon_right {
-            margin-left: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+            margin-left: mc-css-variable(tabs-size-label-icon-margin);
         }
     }
 
     &.mc-tab-label_horizontal {
         border-bottom: {
-            width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+            width: mc-css-variable(tabs-size-border-width);
             style: solid;
         }
 
@@ -109,7 +110,7 @@ $tokens: meta.module-variables(tokens) !default;
             left: 0;
             right: 0;
 
-            height: var(--mc-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height)});
+            height: mc-css-variable(tabs-size-highlight-height);
         }
 
         &.cdk-keyboard-focused:after {
@@ -148,17 +149,17 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin tab-label-old {
     border-bottom: {
-        width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        width: mc-css-variable(tabs-size-border-width);
         style: solid;
     }
 
     border: {
-        width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        width: mc-css-variable(tabs-size-border-width);
         style: solid;
 
         top: {
-            left-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-            right-radius: var(--mc-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+            left-radius: mc-css-variable(tabs-size-border-radius);
+            right-radius: mc-css-variable(tabs-size-border-radius);
         }
 
         left: none;
@@ -169,7 +170,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.mc-active {
         border: {
-            width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+            width: mc-css-variable(tabs-size-border-width);
             style: solid;
         }
 

package/tabs/_tabs-theme.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 //noinspection ALL
 @mixin mc-tabs-theme($theme) {
@@ -13,30 +15,35 @@
     $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
 
     .mc-tab-group_vertical .mc-tab-header__content {
-        border-right-color: map.get($foreground, divider);
+        border-right-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
+    }
+
+    .mc-tab-nav-bar:after,
+    .mc-tab-list__content:after {
+        border-bottom-color: mc-css-variable(tabs-border, map-get($tabs, border));
     }
 
     .mc-tab-header__pagination {
-        border-bottom-color: map.get($tabs, border);
+        border-bottom-color: mc-css-variable(tabs-border, map-get($tabs, border));
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
 
             & .mc-icon {
-                color: map.get($foreground, text);
+                color: mc-css-variable(foreground-text, map-get($foreground, text));
             }
         }
 
         &:active {
-            background: map.get($foreground, divider);
+            background: mc-css-variable(foreground-divider, map-get($foreground, divider));
         }
 
         &.mc-tab-header__pagination_before {
-            border-right-color: map.get($foreground, divider);
+            border-right-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
         }
 
         &.mc-tab-header__pagination_after {
-            border-left-color: map.get($foreground, divider);
+            border-left-color: mc-css-variable(foreground-divider, map-get($foreground, divider));
         }
 
         &[disabled],
@@ -44,44 +51,44 @@
             pointer-events: none;
 
             & .mc-icon {
-                color: map.get($foreground, text-disabled);
+                color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
             }
         }
     }
 
     /* stylelint-disable no-descending-specificity */
     .mc-tab-label_old {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         border-top-color: transparent;
-        border-bottom-color: map.get($tabs, border);
+        border-bottom-color: mc-css-variable(tabs-border, map-get($tabs, border));
 
         &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
             border-bottom-color: transparent;
         }
 
         &.mc-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
+            color: mc-css-variable(tabs-state-empty-text, map-get($tabs, state-empty-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-empty-icon);
+                color: mc-css-variable(tabs-state-empty-icon, map-get($tabs, state-empty-icon));
             }
         }
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
 
-            color: map.get($tabs, state-hover-text);
+            color: mc-css-variable(tabs-state-hover-text, map-get($tabs, state-hover-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-hover-icon);
+                color: mc-css-variable(tabs-state-hover-icon, map-get($tabs, state-hover-icon));
             }
         }
 
         &.mc-active {
             border: {
-                color: map.get($tabs, border);
+                color: mc-css-variable(tabs-border, map-get($tabs, border));
                 bottom-color: transparent;
             }
         }
@@ -90,58 +97,58 @@
         &.mc-disabled {
             cursor: default;
 
-            color: map.get($tabs, state-disabled-text);
+            color: mc-css-variable(tabs-state-disabled-text, map-get($tabs, state-disabled-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-disabled-icon);
+                color: mc-css-variable(tabs-state-disabled-icon, map-get($tabs, state-disabled-icon));
             }
         }
     }
 
     .mc-tab-link,
     .mc-tab-label_horizontal {
-        color: map.get($tabs, state-normal-text);
+        color: mc-css-variable(tabs-state-normal-text, map-get($tabs, state-normal-text));
 
         & .mc-icon {
-            color: map.get($tabs, state-normal-icon);
+            color: mc-css-variable(tabs-state-normal-icon, map-get($tabs, state-normal-icon));
         }
 
-        border-bottom-color: map.get($tabs, border);
+        border-bottom-color: mc-css-variable(tabs-border, map-get($tabs, border));
 
         &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map-get(map-get($theme, states), focused-color);
             border-bottom-color: transparent;
         }
 
         &.mc-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
+            color: mc-css-variable(tabs-state-empty-text, map-get($tabs, state-empty-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-empty-icon);
+                color: mc-css-variable(tabs-state-empty-icon, map-get($tabs, state-empty-icon));
             }
         }
 
         &.mc-active {
             border-bottom-color: transparent;
 
-            color: map.get($tabs, state-normal-text);
+            color: mc-css-variable(tabs-state-normal-text, map-get($tabs, state-normal-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-normal-icon);
+                color: mc-css-variable(tabs-state-normal-icon, map-get($tabs, state-normal-icon));
             }
 
             &:before {
-                background-color: map.get($tabs, state-active-marker);
+                background-color: mc-css-variable(tabs-state-active-marker, map-get($tabs, state-active-marker));
             }
         }
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
 
-            color: map.get($tabs, state-hover-text);
+            color: mc-css-variable(tabs-state-hover-text, map-get($tabs, state-hover-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-hover-icon);
+                color: mc-css-variable(tabs-state-hover-icon, map-get($tabs, state-hover-icon));
             }
         }
 
@@ -149,65 +156,71 @@
         &.mc-disabled {
             cursor: default;
 
-            color: map.get($tabs, state-disabled-text);
+            color: mc-css-variable(tabs-state-disabled-text, map-get($tabs, state-disabled-text));
 
             &:before {
-                opacity: map.get($tabs, state-disabled-marker-opacity);
+                opacity: mc-css-variable(
+                    tabs-state-disabled-marker-opacity, map-get($tabs, state-disabled-marker-opacity));
             }
 
             & .mc-icon {
-                color: map.get($tabs, state-disabled-icon);
+                color: mc-css-variable(tabs-state-disabled-icon, map-get($tabs, state-disabled-icon));
             }
         }
     }
 
     .mc-tab-label_vertical {
-        background: map.get($vertical-tabs, state-normal-background);
-        color: map.get($tabs, state-normal-text);
+        background: mc-css-variable(
+            vertical-tabs-state-normal-background, map-get($vertical-tabs, state-normal-background));
+        color: mc-css-variable(tabs-state-normal-text, map-get($tabs, state-normal-text));
 
         & .mc-icon {
-            color: map.get($tabs, state-normal-icon);
+            color: mc-css-variable(tabs-state-normal-icon, map-get($tabs, state-normal-icon));
         }
 
         &.cdk-keyboard-focused:after {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map-get(map-get($theme, states), focused-color);
         }
 
         &.mc-tab-label_empty {
-            color: map.get($tabs, state-empty-text);
+            color: mc-css-variable(tabs-state-empty-text, map-get($tabs, state-empty-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-empty-icon);
+                color: mc-css-variable(tabs-state-empty-icon, map-get($tabs, state-empty-icon));
             }
         }
 
         &:hover {
-            background: map.get($vertical-tabs, state-hover-background);
+            background: mc-css-variable(
+                vertical-tabs-state-hover-background, map-get($vertical-tabs, state-hover-background));
 
-            color: map.get($tabs, state-hover-text);
+            color: mc-css-variable(tabs-state-hover-text, map-get($tabs, state-hover-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-hover-icon);
+                color: mc-css-variable(tabs-state-hover-icon, map-get($tabs, state-hover-icon));
             }
         }
 
         &.mc-active {
-            color: map.get($tabs, state-normal-text);
-            background: map.get($states, selected-color);
+            color: mc-css-variable(tabs-state-normal-text, map-get($tabs, state-normal-text));
+            background: map-get($theme, states, selected-color);
 
             & .mc-icon {
-                color: map.get($tabs, state-normal-icon);
+                color: mc-css-variable(tabs-state-normal-icon, map-get($tabs, state-normal-icon));
             }
 
             &:before {
-                background-color: map.get($tabs, state-active-marker);
+                background-color: mc-css-variable(tabs-state-active-marker, map-get($tabs, state-active-marker));
             }
 
             &:hover {
-                background: map.get($vertical-tabs, state-hover-selected-background);
+                background: mc-css-variable(
+                    vertical-tabs-state-hover-selected-background,
+                    map-get($vertical-tabs, state-hover-selected-background)
+                );
 
                 & .mc-icon {
-                    color: map.get($tabs, state-hover-icon);
+                    color: mc-css-variable(tabs-state-hover-icon, map-get($tabs, state-hover-icon));
                 }
             }
         }
@@ -215,12 +228,13 @@
         &[disabled],
         &.mc-disabled {
             cursor: default;
-            background: map.get($vertical-tabs, state-normal-background);
+            background: mc-css-variable(
+                vertical-tabs-state-normal-background, map-get($vertical-tabs, state-normal-background));
 
-            color: map.get($tabs, state-disabled-text);
+            color: mc-css-variable(tabs-state-disabled-text, map-get($tabs, state-disabled-text));
 
             & .mc-icon {
-                color: map.get($tabs, state-disabled-icon);
+                color: mc-css-variable(tabs-state-disabled-icon, map-get($tabs, state-disabled-icon));
             }
         }
     }
@@ -228,11 +242,9 @@
 }
 
 @mixin mc-tabs-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tab-label,
     .mc-tab-label_old,
     .mc-tab-link {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
+        @include mc-typography-css-variables(tabs, default);
     }
 }

package/tabs/tab-group.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/layout';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -29,7 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
         padding-top: 8px;
         padding-bottom: 1px;
 
-        border-right-width: var(--mc-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        border-right-width: mc-css-variable(tabs-size-border-width);
         border-right-style: solid;
     }
 }

package/tabs/tab-header.scss

@@ -5,6 +5,7 @@
 @use 'tabs-common' as *;
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -26,6 +27,18 @@ $tokens: meta.module-variables(tokens) !default;
     .mc-tab-group_align-labels-end & {
         justify-content: flex-end;
     }
+
+    &:after {
+        display: flex;
+        content: "";
+
+        flex: 1;
+
+        border: {
+            bottom-style: solid;
+            bottom-width: mc-css-variable(tabs-size-border-width);
+        };
+    }
 }
 
 .mc-tab-header_vertical .mc-tab-list__content {
@@ -49,20 +62,20 @@ $tokens: meta.module-variables(tokens) !default;
 
     border: {
         bottom-style: solid;
-        bottom-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        bottom-width: mc-css-variable(tabs-size-border-width);
     };
 
     &.mc-tab-header__pagination_before {
         border: {
             right-style: solid;
-            right-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+            right-width: mc-css-variable(tabs-size-border-width);
         };
     }
 
     &.mc-tab-header__pagination_after {
         border: {
             left-style: solid;
-            left-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+            left-width: mc-css-variable(tabs-size-border-width);
         };
     }
 

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -4,6 +4,7 @@
 @use '../tabs-common';
 
 @use '../../core/styles/tokens';
+@use '../../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -22,11 +23,11 @@ $tokens: meta.module-variables(tokens) !default;
 
     & > .mc-icon {
         &.mc-icon_left {
-            margin-right: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+            margin-right: mc-css-variable(tabs-size-label-icon-margin);
         }
 
         &.mc-icon_right {
-            margin-left: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+            margin-left: mc-css-variable(tabs-size-label-icon-margin);
         }
     }
 }
@@ -46,6 +47,18 @@ $tokens: meta.module-variables(tokens) !default;
     & .mc-tab-group_align-labels-end {
         justify-content: flex-end;
     }
+
+    &:after {
+        display: flex;
+        content: "";
+
+        flex: 1;
+
+        border: {
+            bottom-style: solid;
+            bottom-width: mc-css-variable(tabs-size-border-width);
+        };
+    }
 }
 
 .mc-tab-nav-bar.mc-tab-group_vertical {