@ptsecurity/mosaic 17.0.0 → 17.2.0

package/form-field/_form-field-theme.scss

@@ -3,17 +3,16 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-form-field-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
-    $secondary: map.get($theme, secondary);
     $error: map.get($theme, error);
 
-    $form-field: map.get(map.get($theme, components), form-field);
+    $form-field: map-get($theme, components, form-field);
 
     .mc-form-field {
         & .mc-input {
@@ -21,45 +20,48 @@
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
-                -webkit-box-shadow: 0 0 0 40rem map.get($form-field, state-autofill-background) inset;
-                -webkit-text-fill-color: map.get($foreground, text);
-                caret-color: map-get($foreground, text);
+                -webkit-box-shadow: 0 0 0 40rem mc-css-variable(
+                    form-field-state-autofill-background, map-get($form-field, state-autofill-background)) inset;
+                -webkit-text-fill-color: mc-css-variable(foreground-text, map-get($foreground, text));
+                caret-color: mc-css-variable(foreground-text, map-get($foreground, text));
             }
         }
 
         & .mc-form-field__container {
-            background-color: map.get($form-field, background);
+            background-color: mc-css-variable(form-field-background, map-get($form-field, background));
         }
 
         & .mc-form-field__hint {
-            color: map.get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
 
         &:not(.mc-form-field_without-borders) {
             .mc-form-field__container {
-                border-color: map.get($form-field, border);
+                border-color: mc-css-variable(form-field-border, map-get($form-field, border));
             }
 
             &:hover .mc-form-field__container {
-                border-color: map.get($form-field, state-hover-border);
+                border-color: mc-css-variable(form-field-state-hover-border, map-get($form-field, state-hover-border));
             }
 
             &.ng-invalid {
                 & .mc-form-field__container {
-                    border-color: map.get($form-field, state-invalid-border);
-                    background-color: map.get($form-field, state-invalid-background);
+                    border-color: mc-css-variable(
+                        form-field-state-invalid-border, map-get($form-field, state-invalid-border));
+                    background-color: mc-css-variable(
+                        form-field-state-invalid-background, map-get($form-field, state-invalid-background));
 
                     .mc-input,
                     .mc-textarea {
-                        color: map.get($foreground, text-error);
+                        color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                     }
                 }
             }
 
             &.cdk-focused {
                 &:not(.ng-invalid) .mc-form-field__container {
-                    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));
                 }
 
                 &.ng-invalid .mc-form-field__container {
@@ -69,15 +71,17 @@
 
             /* stylelint-disable no-descending-specificity */
             &.mc-disabled .mc-form-field__container {
-                border-color: map.get($form-field, border);
+                border-color: mc-css-variable(form-field-border, map-get($form-field, border));
 
-                background-color: map.get($background, background-disabled);
+                background-color: mc-css-variable(
+                    background-background-disabled, map-get($background, background-disabled));
 
                 .mc-icon,
                 .mc-input,
                 .mc-textarea {
-                    color: map.get($foreground, text-disabled);
-                    -webkit-text-fill-color: map.get($foreground, text-disabled);
+                    color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
+                    -webkit-text-fill-color: mc-css-variable(
+                        foreground-text-disabled, map-get($foreground, text-disabled));
                 }
             }
             /* stylelint-enable no-descending-specificity */
@@ -85,59 +89,64 @@
     }
 
     .mc-hint {
+        $hint: map-get($theme, components, form-field-hint);
+
         &.mc-primary {
-            color: mc-color($primary);
+            color: mc-css-variable(form-field-hint-text-color, map-get($hint, text-color));
         }
 
         &.mc-secondary {
-            color: mc-color($secondary);
+            color: mc-css-variable(form-field-hint-text-color, map-get($hint, text-color));
         }
 
         &.mc-warning {
-            color: map.get($foreground, text-warning);
+            color: mc-css-variable(foreground-text-warning, map-get($foreground, text-warning));
         }
 
         &.mc-error {
-            color: map.get($foreground, text-error);
+            color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
         }
     }
 
     .mc-password-hint {
-        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
+        $password-hint: map-get($theme, components, form-field-password-hint);
 
-        color: map.get($password-hint, text-color);
+        color: mc-css-variable(form-field-password-hint-text-color, map-get($password-hint, text-color));
 
         & .mc-password-hint__icon {
-            color: map.get($password-hint, icon-color);
+            color: mc-css-variable(form-field-password-hint-icon-color, map-get($password-hint, icon-color));
         }
 
         &.mc-password-hint_valid {
-            color: map.get($password-hint, state-valid-text-color);
+            color: mc-css-variable(
+                form-field-password-hint-state-valid-text-color, map-get($password-hint, state-valid-text-color));
 
             & .mc-password-hint__icon {
-                color: map.get($password-hint, state-valid-icon-color);
+                color: mc-css-variable(
+                    form-field-password-hint-state-valid-icon-color, map-get($password-hint, state-valid-icon-color));
             }
         }
 
         &.mc-password-hint_invalid {
-            color: map.get($password-hint, state-invalid-text-color);
+            color: mc-css-variable(
+                form-field-password-hint-state-invalid-text-color, map-get($password-hint, state-invalid-text-color));
 
             & .mc-password-hint__icon {
-                color: map.get($password-hint, state-invalid-icon-color);
+                color: mc-css-variable(
+                    form-field-password-hint-state-invalid-icon-color, map-get($password-hint, state-invalid-icon-color)
+                );
             }
         }
     }
 }
 
 @mixin mc-form-field-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-form-field {
-        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-font-default));
+        @include mc-typography-css-variables(form-field, default);
     }
 
     .mc-form-field__hint, .mc-password-hint {
-        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+        @include mc-typography-css-variables(form-field-hint, default);
     }
 
     .mc-hint {

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,20 +101,22 @@ $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);
     }
 }
 
 .mc-cleaner {
     display: flex;
+    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;
@@ -152,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;