@ptsecurity/mosaic 17.1.0 → 17.2.0

package/form-field/form-field.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,7 +14,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &,
     .mc-input {
-        border-radius: var(--mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+        border-radius: mc-css-variable(form-field-size-border-radius);
     }
 
     &:hover {
@@ -27,7 +28,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-form-field-type-input-password {
     & .mc-input {
-        padding-right: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        padding-right: mc-css-variable(form-field-size-button-width);
     }
 }
 
@@ -49,9 +50,7 @@ $tokens: meta.module-variables(tokens) !default;
         left: 0;
     }
 
-    margin-top: var(
-        --mc-form-field-password-hint-size-margin-top, map.get($tokens, form-field-password-hint-size-margin-top)
-    );
+    margin-top: mc-css-variable(form-field-password-hint-size-margin-top);
 
     &:first-child {
         margin-top: map.get($tokens, size-m);
@@ -59,16 +58,16 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-form-field__hint > .mc-hint {
-    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: mc-css-variable(form-field-hint-size-margin-top);
 }
 
 .mc-form-field__container {
     position: relative;
 
-    border-width: var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width));
+    border-width: mc-css-variable(form-field-size-border-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+    border-radius: mc-css-variable(form-field-size-border-radius);
 }
 
 .mc-form-field_without-borders .mc-form-field__container {
@@ -102,13 +101,13 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-form-field_has-cleaner,
 .mc-form-field_has-stepper {
     .mc-input {
-        padding-right: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        padding-right: mc-css-variable(form-field-size-button-width);
     }
 }
 
 .mc-form-field_has-prefix {
     .mc-input {
-        padding-left: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        padding-left: mc-css-variable(form-field-size-button-width);
     }
 }
 
@@ -117,7 +116,7 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+    width: mc-css-variable(form-field-size-button-width);
     height: 100%;
 
     cursor: pointer;
@@ -154,12 +153,12 @@ mc-stepper {
     bottom: 0;
     right: 0;
 
-    width: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+    width: mc-css-variable(form-field-size-button-width);
 
     .mc-stepper-step-up,
     .mc-stepper-step-down {
         cursor: pointer;
-        width: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        width: mc-css-variable(form-field-size-button-width);
         text-align: center;
     }
 

package/icon/_icon-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-icon-theme($theme) {
@@ -17,31 +18,31 @@
 
     // Дефолтные серые иконки default-icon: лупа в поле, иконки дропдаунов v, все иконки вне полей.
     .mc-icon {
-        color: mc-color($foreground, icon);
+        color: mc-css-variable(foreground-icon, map-get($foreground, icon));
 
         &.mc-primary {
-            color: map.get($primary, default);
+            color: mc-css-variable(icon-primary-default, map-get($primary, default));
         }
 
         &.mc-secondary {
-            color: map.get($secondary, default);
+            color: mc-css-variable(icon-secondary-default, map-get($secondary, default));
         }
 
         &.mc-error {
-            color: map.get($error, default);
+            color: mc-css-variable(icon-error-default, map-get($error, default));
         }
 
 
         &.mc-info {
-            color: map.get($info, default);
+            color: mc-css-variable(icon-info-default, map-get($info, default));
         }
 
         &.mc-warning {
-            color: map.get($warning, default);
+            color: mc-css-variable(icon-warning-default, map-get($warning, default));
         }
 
         &.mc-success {
-            color: map.get($success, default);
+            color: mc-css-variable(icon-success-default, map-get($success, default));
         }
 
         &[disabled],
@@ -56,96 +57,96 @@
         &.mc-primary {
             &:active,
             &.mc-active {
-                color: map.get($primary, state-active);
+                color: mc-css-variable(icon-states-primary-state-active, map-get($primary, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($primary, state-hover);
+                color: mc-css-variable(icon-states-primary-state-hover, map-get($primary, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($primary, state-disabled);
+                color: mc-css-variable(icon-states-primary-state-disabled, map-get($primary, state-disabled));
             }
         }
 
         &.mc-secondary {
             &:active,
             &.mc-active {
-                color: map.get($secondary, state-active);
+                color: mc-css-variable(icon-states-secondary-state-active, map-get($secondary, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($secondary, state-hover);
+                color: mc-css-variable(icon-states-secondary-state-hover, map-get($secondary, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($secondary, state-disabled);
+                color: mc-css-variable(icon-states-secondary-state-disabled, map-get($secondary, state-disabled));
             }
         }
 
         &.mc-error {
             &:active,
             &.mc-active {
-                color: map.get($error, state-active);
+                color: mc-css-variable(icon-states-error-state-active, map-get($error, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($error, state-hover);
+                color: mc-css-variable(icon-states-error-state-hover, map-get($error, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($error, state-disabled);
+                color: mc-css-variable(icon-states-error-state-disabled, map-get($error, state-disabled));
             }
         }
 
         &.mc-info {
             &:active,
             &.mc-active {
-                color: map.get($info, state-active);
+                color: mc-css-variable(icon-states-info-state-active, map-get($info, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($info, state-hover);
+                color: mc-css-variable(icon-states-info-state-hover, map-get($info, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($info, state-disabled);
+                color: mc-css-variable(icon-states-info-state-disabled, map-get($info, state-disabled));
             }
         }
 
         &.mc-warning {
             &:active,
             &.mc-active {
-                color: map.get($warning, state-active);
+                color: mc-css-variable(icon-states-warning-state-active, map-get($warning, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($warning, state-hover);
+                color: mc-css-variable(icon-states-warning-state-hover, map-get($warning, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($warning, state-disabled);
+                color: mc-css-variable(icon-states-warning-state-disabled, map-get($warning, state-disabled));
             }
         }
 
         &.mc-success {
             &:active,
             &.mc-active {
-                color: map.get($success, state-active);
+                color: mc-css-variable(icon-states-success-state-active, map-get($success, state-active));
             }
 
             &:not([disabled], .mc-disabled):hover {
-                color: map.get($success, state-hover);
+                color: mc-css-variable(icon-states-success-state-hover, map-get($success, state-hover));
             }
 
             &[disabled],
             &.mc-disabled {
-                color: map.get($success, state-disabled);
+                color: mc-css-variable(icon-states-success-state-disabled, map-get($success, state-disabled));
             }
         }
     }

package/input/_input-base.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/input';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,11 +12,11 @@ $tokens: meta.module-variables(tokens) !default;
 %mc-input-field-base {
     @include input.mc-reset-input();
 
-    width: var(--mc-input-size-width, map.get($tokens, input-size-width));
+    width: mc-css-variable(input-size-width);
     min-height: calc(
         var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
         (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
     );
 
-    padding: var(--mc-input-size-padding, map.get($tokens, input-size-padding));
+    padding: mc-css-variable(input-size-padding);
 }

package/input/_input-theme.scss

@@ -2,59 +2,59 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-input-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .mc-input {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         &::placeholder {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
 
         &::-ms-input-placeholder {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
 
         &::-webkit-input-placeholder {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 
     .mc-password-toggle {
-        color: map.get($foreground, icon);
+        color: mc-css-variable(foreground-icon, map-get($foreground, icon));
 
         &:hover {
-            color: map.get($foreground, text);
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
         }
 
         &[disabled] {
             cursor: default;
 
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
 
         &.cdk-keyboard-focused {
-            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: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
+            box-shadow: 0 0 0 1px mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
     }
 }
 
 @mixin mc-input-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-input {
-        @include mc-typography-level-to-styles($config, map.get($tokens, input-font-default));
+        @include mc-typography-css-variables(input, default);
     }
 
     .mc-input.mc-input_monospace,
     .mc-input.mc-input-password {
-        @include mc-typography-level-to-styles($config, map.get($tokens, input-font-monospace));
+        @include mc-typography-css-variables(input, monospace);
     }
 
     .mc-input.mc-input-password::placeholder {
-        @include mc-typography-level-to-styles($config, map.get($tokens, input-font-default));
+        @include mc-typography-css-variables(input, default);
     }
 }

package/input/input-password.d.ts

@@ -10,7 +10,6 @@ import { Subject } from 'rxjs';
 import { McInputMixinBase } from './input';
 import * as i0 from "@angular/core";
 export declare class McPasswordToggle extends McTooltipTrigger implements OnDestroy {
-    private focusMonitor;
     private formField;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);

package/input/input.scss

@@ -4,6 +4,7 @@
 @use 'input-base' as *;
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -52,10 +53,8 @@ input.mc-input::placeholder {
 
     cursor: pointer;
 
-    border-top-right-radius: var(--mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
-    border-bottom-right-radius: var(
-        --mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius)
-    );
+    border-top-right-radius: mc-css-variable(form-field-size-border-radius);
+    border-bottom-right-radius: mc-css-variable(form-field-size-border-radius);
 
     &::-moz-focus-inner {
         border: 0;

package/link/_link-theme.scss

@@ -2,11 +2,13 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-link($foreground, $link, $tokens) {
+
+@mixin mc-link($foreground, $link) {
     display: inline-block;
 
-    color: map.get($link, text);
+    color: mc-css-variable(link-text, map-get($link, text));
     text-decoration: none;
     cursor: pointer;
 
@@ -18,28 +20,31 @@
 
     /* stylelint-disable no-descending-specificity */
     &:hover {
-        color: map.get($link, state-hover-text);
+        color: mc-css-variable(link-state-hover-text, map-get($link, state-hover-text));
         transition: color 0ms;
 
         &.mc-text-only,
         &.mc-text-with-icon .mc-link__text {
-            border-bottom-color: map.get($link, state-hover-border-bottom);
+            border-bottom-color: mc-css-variable(
+                link-state-hover-border-bottom, map-get($link, state-hover-border-bottom));
         }
 
         & .mc-icon {
-            color: map.get($link, state-hover-text);
+            color: mc-css-variable(link-state-hover-text, map-get($link, state-hover-text));
         }
     }
 
     &:active,
     &.mc-active {
-        color: map.get($link, state-active-text);
+        color: mc-css-variable(link-state-active-text, map-get($link, state-active-text));
     }
 
     &.cdk-keyboard-focused {
-        outline: map.get($link, state-focused-outline) solid map.get($tokens, link-size-state-focused-outline-width);
+        outline: mc-css-variable(
+            link-state-focused-outline, map-get($link, state-focused-outline)
+        ) solid mc-css-variable(link-size-state-focused-outline-width);
 
-        outline-offset: map.get($tokens, link-size-state-focused-outline-offset);
+        outline-offset: mc-css-variable(link-size-state-focused-outline-offset);
     }
 
     & .mc-icon {
@@ -50,16 +55,16 @@
     &.mc-text-with-icon .mc-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
-        border-bottom-color: map.get($link, border-bottom);
+        border-bottom-color: mc-css-variable(link-border-bottom, map-get($link, border-bottom));
     }
 
     &.mc-text-with-icon .mc-link__text {
         &:not(:first-child) {
-            margin-left: map.get($tokens, link-size-default-icon-margin);
+            margin-left: mc-css-variable(link-size-default-icon-margin);
         }
 
         &:not(:last-child) {
-            margin-right: map.get($tokens, link-size-default-icon-margin);
+            margin-right: mc-css-variable(link-size-default-icon-margin);
         }
     }
 
@@ -74,7 +79,8 @@
         &:hover {
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
-                border-bottom-color: map.get($link, state-hover-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    link-state-hover-border-bottom, map-get($link, state-hover-border-bottom));
             }
         }
 
@@ -96,28 +102,28 @@
     &.mc-link_caption {
         &.mc-text-with-icon .mc-link__text {
             &:not(:first-child) {
-                margin-left: map.get($tokens, link-size-caption-icon-margin);
+                margin-left: mc-css-variable(link-size-caption-icon-margin);
             }
 
             &:not(:last-child) {
-                margin-right: map.get($tokens, link-size-caption-icon-margin);
+                margin-right: mc-css-variable(link-size-caption-icon-margin);
             }
         }
     }
 
     &[disabled] {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
         cursor: default;
         pointer-events: none;
 
         &.mc-text-only,
         &.mc-text-with-icon .mc-link__text {
-            border-bottom-color: map.get($link, border-bottom);
+            border-bottom-color: mc-css-variable(link-border-bottom, map-get($link, border-bottom));
         }
 
         & .mc-icon {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
         /* stylelint-enable no-descending-specificity */
     }
@@ -129,36 +135,35 @@
 
     $link: map.get(map.get($theme, components), link);
 
-    $tokens: map.get($theme, tokens);
-
     .mc-link:not(.mc-link_use-visited) {
         &:visited {
-            color: map.get($link, text);
+            color: mc-css-variable(link-text, map-get($link, text));
         }
 
-        @include mc-link($foreground, $link, $tokens);
+        @include mc-link($foreground, $link);
     }
 
     .mc-link.mc-link_use-visited {
         &:visited {
-            color: map.get($link, state-visited-text);
+            color: mc-css-variable(link-state-visited-text, map-get($link, state-visited-text));
 
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
-                border-bottom-color: map.get($link, state-visited-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    link-state-visited-border-bottom, map-get($link, state-visited-border-bottom));
             }
 
             & .mc-icon {
-                color: map.get($link, state-visited-text);
+                color: mc-css-variable(link-state-visited-text, map-get($link, state-visited-text));
             }
         }
 
-        @include mc-link($foreground, $link, $tokens);
+        @include mc-link($foreground, $link);
     }
 
     @media print {
         .mc-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
 
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
@@ -166,7 +171,7 @@
             }
 
             &::after {
-                color: map.get($foreground, text);
+                color: mc-css-variable(foreground-text, map-get($foreground, text));
 
                 content: ":\a" attr(print);
                 white-space: pre;
@@ -176,13 +181,11 @@
 }
 
 @mixin mc-link-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-link {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-default));
+        @include mc-typography-css-variables(link, default);
     }
 
     .mc-link.mc-link_caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-caption));
+        @include mc-typography-css-variables(link, caption);
     }
 }

package/list/_list-base.scss

@@ -6,6 +6,7 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -18,16 +19,16 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
 
     box-sizing: border-box;
-    height: var(--mc-list-size-item-height, map.get($tokens, list-size-item-height));
+    height: mc-css-variable(list-size-item-height);
 
     border: 2px solid transparent;
 
-    padding-left: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+    padding-left: mc-css-variable(list-size-horizontal-padding);
 
     .mc-list-text {
         @include list.mc-line-wrapper-base();
 
-        padding-right: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+        padding-right: mc-css-variable(list-size-horizontal-padding);
         display: inline-block;
         @include common.mc-truncate-line();
     }

package/list/_list-theme.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-list-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -9,38 +11,36 @@
 
     .mc-list-item,
     .mc-list-option {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
     }
 
     .mc-list-option {
         outline: none;
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
         }
 
         &.mc-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
 
         &.mc-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            background: mc-css-variable(states-selected-color, map-get($theme, states, selected-color));
         }
 
         &.mc-disabled,
         &[disabled] {
             background: transparent;
 
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 }
 
 @mixin mc-list-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-list-item,
     .mc-list-option {
-        @include mc-typography-level-to-styles($config, map.get($tokens, list-font-item));
+        @include mc-typography-css-variables(list, item);
     }
 }

package/list/list.scss

@@ -5,6 +5,7 @@
 @use '../core/styles/common/list';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -31,7 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .mc-pseudo-checkbox,
     & .mc-icon {
-        margin-right: var(--mc-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+        margin-right: mc-css-variable(list-size-icon-right-margin);
     }
 
     & .mc-option-action {