@ptsecurity/mosaic 17.1.0 → 17.2.1

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,24 +27,28 @@ $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: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        };
-    }
 }
 
 .mc-tab-header_vertical .mc-tab-list__content {
     flex-direction: column;
 }
 
+.mc-tab-header .mc-tab-list__content {
+    .mc-tab-group:not(.mc-tab-group_stretch-labels) & {
+        &:after {
+            display: flex;
+            content: "";
+
+            flex: 1;
+
+            border: {
+                bottom-style: solid;
+                bottom-width: mc-css-variable(tabs-size-border-width);
+            };
+        }
+    }
+}
+
 .mc-tab-header__pagination {
     @include vendor-prefixes.user-select(none);
 
@@ -61,20 +66,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);
         }
     }
 }
@@ -47,20 +48,22 @@ $tokens: meta.module-variables(tokens) !default;
         justify-content: flex-end;
     }
 
-    &:after {
-        display: flex;
-        content: "";
+    &.mc-tab-group_vertical {
+        flex-direction: column;
+        flex-grow: 0;
+    }
 
-        flex: 1;
+    &:not(.mc-tab-group_vertical) {
+        &:after {
+            display: flex;
+            content: "";
 
-        border: {
-            bottom-style: solid;
-            bottom-width: var(--mc-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        };
-    }
-}
+            flex: 1;
 
-.mc-tab-nav-bar.mc-tab-group_vertical {
-    flex-direction: column;
-    flex-grow: 0;
+            border: {
+                bottom-style: solid;
+                bottom-width: mc-css-variable(tabs-size-border-width);
+            };
+        }
+    }
 }

package/tags/_tag-theme.scss

@@ -3,36 +3,40 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-tag-color($params) {
-    background: map.get($params, background);
-    border-color: map.get($params, border);
+
+@mixin mc-tag-color($component, $style-name) {
+    $style: map-get($component, $style-name);
+
+    background: mc-css-variable(tags-#{$style-name}-background, map-get($style, background));
+    border-color: mc-css-variable(tags-#{$style-name}-border, map-get($style, border));
 
     & .mc-tag__text {
-        color: map.get($params, text);
+        color: mc-css-variable(tags-#{$style-name}-text, map-get($style, text));
     }
 
     &.mc-active,
     &.mc-focused {
-        border-color: map.get($params, focused);
-        box-shadow: 0 0 0 1px map.get($params, focused);
+        border-color: mc-css-variable(tags-#{$style-name}-focused, map-get($style, focused));
+        box-shadow: 0 0 0 1px mc-css-variable(tags-#{$style-name}-focused, map-get($style, focused));
     }
 
     &:not(.mc-disabled) .mc-icon {
-        color: map.get($params, icon);
+        color: mc-css-variable(tags-#{$style-name}-icon, map-get($style, icon));
 
         &.mc-tag-remove:hover {
-            color: map.get($params, icon_hovered);
+            color: mc-css-variable(tags-#{$style-name}-icon_hovered, map-get($style, icon_hovered));
         }
     }
 
     &.mc-disabled {
-        border-color: map.get($params, border_disabled);
-        background: map.get($params, background_disabled);
+        border-color: mc-css-variable(tags-#{$style-name}-border_disabled, map-get($style, border_disabled));
+        background: mc-css-variable(tags-#{$style-name}-background_disabled, map-get($style, background_disabled));
 
         & .mc-icon,
         & .mc-tag__text {
-            color: map.get($params, disabled);
+            color: mc-css-variable(tags-#{$style-name}-disabled, map-get($style, disabled));
         }
 
         & .mc-tag-overlay {
@@ -45,75 +49,74 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $tags: map.get(map.get($theme, components), tags);
+    $tags: map.get($theme, components, tags);
 
     .mc-tag {
         &.mc-primary {
-            @include mc-tag-color(map.get($tags, primary));
+            @include mc-tag-color($tags, primary);
         }
 
         &.mc-secondary {
-            @include mc-tag-color(map.get($tags, secondary));
+            @include mc-tag-color($tags, secondary);
         }
 
         &.mc-error {
-            @include mc-tag-color(map.get($tags, error));
+            @include mc-tag-color($tags, error);
         }
 
         &:hover,
         &.mc-hovered {
             & .mc-tag-overlay {
-                background: map.get($background, overlay-hover);
+                background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
             }
         }
 
         &.mc-disabled {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
             border-color: transparent;
 
-            background-color: map.get($background, background-disabled);
+            background-color: mc-css-variable(
+                background-background-disabled, map-get($background, background-disabled));
 
             & .mc-tag-overlay {
-                background: mc-color($background, overlay-disabled);
+                background: mc-css-variable(background-overlay-disabled, mc-color($background, overlay-disabled));
             }
         }
     }
 
     .mc-tag-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));
         }
     }
 }
 
 @mixin mc-tag-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tag:not(.mc-tag_mono):not(.mc-tag_caps) {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-default));
+        @include mc-typography-css-variables(tags, default);
     }
 
     .mc-tag_mono {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-mono));
+        @include mc-typography-css-variables(tags, mono);
     }
 
     .mc-tag_caps {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-caps));
+        @include mc-typography-css-variables(tags, caps);
     }
 
     .mc-tag-input {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+        @include mc-typography-css-variables(tag-input, default);
     }
 }
 

package/tags/tag-list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -42,14 +43,14 @@ $tokens: meta.module-variables(tokens) !default;
 
         flex: 1 1 auto;
 
-        height: var(--mc-tag-input-size-height, map.get($tokens, tag-input-size-height));
-        margin: var(--mc-tag-input-size-margin, map.get($tokens, tag-input-size-margin));
+        height: mc-css-variable(tag-input-size-height);
+        margin: mc-css-variable(tag-input-size-margin);
     }
 }
 
 .mc-form-field-type-tag-list {
     .mc-tags-list__list-container {
-        padding: var(--mc-tag-list-size-padding, map.get($tokens, tag-list-size-padding));
+        padding: mc-css-variable(tag-list-size-padding);
     }
 }
 

package/tags/tag.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,14 +14,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-width: 100%;
 
-    margin: var(--mc-tags-size-margin, map.get($tokens, tags-size-margin));
+    margin: mc-css-variable(tags-size-margin);
 
-    height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
+    height: mc-css-variable(tags-size-height);
 
     border: {
-        width: var(--mc-tags-size-border-width, map.get($tokens, tags-size-border-width));
+        width: mc-css-variable(tags-size-border-width);
         style: solid;
-        radius: var(--mc-tags-size-border-radius, map.get($tokens, tags-size-border-radius));
+        radius: mc-css-variable(tags-size-border-radius);
     }
 
     cursor: default;
@@ -67,15 +68,15 @@ $tokens: meta.module-variables(tokens) !default;
 
         flex-shrink: 0;
 
-        height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
+        height: mc-css-variable(tags-size-height);
 
-        padding-left: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
-        padding-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
+        padding-left: mc-css-variable(tags-size-icon-padding);
+        padding-right: mc-css-variable(tags-size-icon-padding);
     }
     /* stylelint-enable no-descending-specificity */
 
     .mc-icon_left {
-        margin-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
+        margin-right: mc-css-variable(tags-size-icon-padding);
     }
 
     & > .mc-icon:first-child {

package/textarea/_textarea-base.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 %mc-textarea-base {
     background: transparent;
     margin: 0;
@@ -18,5 +16,5 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
 
     box-sizing: border-box;
-    padding: var(--mc-textarea-size-padding, map.get($tokens, textarea-size-padding));
+    padding: mc-css-variable(textarea-size-padding);
 }

package/textarea/_textarea-theme.scss

@@ -3,35 +3,35 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-textarea-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .mc-textarea {
-        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));
         }
     }
 }
 
 @mixin mc-textarea-typography($config) {
-    $tokens: map.get($config, tokens);
-
     textarea.mc-textarea {
-        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+        @include mc-typography-css-variables(textarea, default);
     }
 
     .mc-textarea.mc-textarea_monospace {
-        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-mono));
+        @include mc-typography-css-variables(textarea, mono);
     }
 }

package/textarea/textarea.scss

@@ -3,11 +3,9 @@
 
 @use 'textarea-base' as *;
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-textarea {
     @extend %mc-textarea-base;
 
@@ -22,7 +20,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.mc-textarea-resizable {
         resize: vertical;
-        min-height: var(--mc-textarea-size-min-height, map.get($tokens, textarea-size-min-height));
+        min-height: mc-css-variable(textarea-size-min-height);
     }
 }
 

package/timepicker/timepicker.scss

@@ -1,16 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-timepicker {
-    padding-right: calc(
-        var(--mc-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
-        var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-right: mc-css-variable(timepicker-size-padding-right);
 }
 
 .mc-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -2,32 +2,32 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-timezone-option-theme($theme) {
-    $timezone: map.get(map.get($theme, components), timezone);
+    $timezone: map.get($theme, components, timezone);
 
     .mc-timezone-option__offset,
     .mc-timezone-option__city {
-        color: map.get($timezone, text);
+        color: mc-css-variable(timezone-text, map-get($timezone, text));
     }
 
     .mc-timezone-option__cities {
-        color: map.get($timezone, caption);
+        color: mc-css-variable(timezone-caption, map-get($timezone, caption));
     }
 }
 
 @mixin mc-timezone-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-timezone-option__offset {
-        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+        @include mc-typography-css-variables(timezone-option, offset-text);
     }
 
     .mc-timezone-option__city {
-        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+        @include mc-typography-css-variables(timezone-option, text);
     }
 
     .mc-timezone-option__cities {
-        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+        @include mc-typography-css-variables(timezone-option, caption);
     }
 }

package/timezone/timezone-option.component.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     align-items: flex-start;
 
-    padding: var(--mc-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
-    column-gap: var(--mc-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+    padding: mc-css-variable(timezone-option-size-padding);
+    column-gap: mc-css-variable(timezone-option-size-column-gap);
 }
 
 .mc-timezone-option__label {
@@ -26,10 +27,10 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: var(--mc-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    max-height: mc-css-variable(timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .mc-select__panel .mc-timezone-option {
-    height: var(--mc-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+    height: mc-css-variable(timezone-option-size-height);
 }

package/timezone/timezone-option.directive.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
@@ -9,12 +10,12 @@ export declare class McTimezoneOptionTooltip extends McTooltipTrigger implements
     private changeDetectorRef;
     private option;
     private resizeObserver;
-    constructor(changeDetectorRef: ChangeDetectorRef, option: McTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(changeDetectorRef: ChangeDetectorRef, option: McTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     private checkTooltipDisabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McTimezoneOptionTooltip, "mc-timezone-option", never, {}, {}, never, never, false, never>;
 }

package/title/title.directive.d.ts

@@ -7,7 +7,6 @@ import { McTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class McTitleDirective extends McTooltipTrigger implements AfterViewInit {
-    private focusMonitor;
     private componentInstance?;
     get isOverflown(): boolean;
     get viewValue(): string;

package/toast/_toast-theme.scss

@@ -2,60 +2,57 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-toast-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $toast: map.get(map.get($theme, components), toast);
+    $toast: map-get(map-get($theme, components), toast);
 
     .mc-toast {
         &.mc-toast_info .mc-toast__icon {
-            color: map.get($toast, icon_info);
+            color: mc-css-variable(toast-icon_info, map-get($toast, icon_info));
         }
 
         &.mc-toast_success .mc-toast__icon {
-            color: map.get($toast, icon_success);
+            color: mc-css-variable(toast-icon_success, map-get($toast, icon_success));
         }
 
         &.mc-toast_warning .mc-toast__icon {
-            color: map.get($toast, icon_warning);
+            color: mc-css-variable(toast-icon_warning, map-get($toast, icon_warning));
         }
 
         &.mc-toast_error .mc-toast__icon {
-            color: map.get($toast, icon_error);
+            color: mc-css-variable(toast-icon_error, map-get($toast, icon_error));
         }
     }
 
     .mc-toast__wrapper {
-        border-color: map.get($toast, border);
+        border-color: mc-css-variable(toast-border, map-get($toast, border));
 
-        background: map.get($toast, background);
+        background: mc-css-variable(toast-background, map-get($toast, background));
 
-        box-shadow: map.get($toast, shadow);
+        box-shadow: mc-css-variable(toast-shadow, map-get($toast, shadow));
     }
 
     .mc-toast__title {
-        color: map.get($toast, text);
+        color: mc-css-variable(toast-text, map-get($toast, text));
     }
 
     .mc-toast__caption {
-        color: map.get($toast, text-caption);
+        color: mc-css-variable(toast-text-caption, map-get($toast, text-caption));
     }
 }
 
 @mixin mc-toast-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-toast {
-        @include mc-typography-level-to-styles($config, body);
+        @include mc-typography-level-to-styles_css-variables(typography, body);
     }
 
     .mc-toast__title {
-        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+        @include mc-typography-css-variables(toast, title);
     }
 
     .mc-toast__caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
+        @include mc-typography-css-variables(toast, caption);
     }
 }

package/toast/toast-container.component.scss

@@ -1,18 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
 @use '../core/styles/variables';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .mc-toast-container {
     display: flex;
     flex-direction: column;
 
-    gap: var(--mc-toast-size-gap, map.get($tokens, toast-size-gap));
+    gap: mc-css-variable(toast-size-gap);
 }
 
 .cdk-overlay-container {