@ptsecurity/mosaic 17.0.0 → 17.2.0

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 {
@@ -49,30 +53,31 @@
 
     .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);
@@ -81,39 +86,37 @@
     }
 
     .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-input.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef, EventEmitter, OnChanges, Renderer2 } from '@angular/core';
 import { NgControl } from '@angular/forms';
+import { McAutocompleteTrigger } from '@ptsecurity/mosaic/autocomplete';
 import { McTrim } from '@ptsecurity/mosaic/form-field';
 import { McTagsDefaultOptions } from './tag-default-options';
 import { McTagList } from './tag-list.component';
@@ -26,6 +27,7 @@ export declare class McTagInput implements McTagTextControl, OnChanges {
     private defaultOptions;
     private trimDirective;
     ngControl: NgControl;
+    autocompleteTrigger?: McAutocompleteTrigger | undefined;
     /** Whether the control is focused. */
     focused: boolean;
     /**
@@ -39,6 +41,8 @@ export declare class McTagInput implements McTagTextControl, OnChanges {
     private _separators;
     /** Emitted when a tag is to be added. */
     tagEnd: EventEmitter<McTagInputEvent>;
+    /** A value indicating whether allow/prevent tags duplication  */
+    distinct: boolean;
     /** The input's placeholder text. */
     placeholder: string;
     /** Unique id for the input. */
@@ -62,14 +66,15 @@ export declare class McTagInput implements McTagTextControl, OnChanges {
     private oneSymbolWidth;
     /** The native input element to which this directive is attached. */
     private inputElement;
-    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: McTagsDefaultOptions, trimDirective: McTrim, ngControl: NgControl);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: McTagsDefaultOptions, trimDirective: McTrim, ngControl: NgControl, autocompleteTrigger?: McAutocompleteTrigger | undefined);
     ngOnChanges(): void;
     onKeydown(event: KeyboardEvent): void;
     /** Checks to see if the blur should emit the (tagEnd) event. */
-    blur(): void;
+    blur(event: FocusEvent): void;
     triggerValidation(): void;
     /** Checks to see if the (tagEnd) event needs to be emitted. */
     emitTagEnd(): void;
+    get hasDuplicates(): boolean;
     onInput(): void;
     onPaste($event: ClipboardEvent): void;
     updateInputWidth(): void;
@@ -82,6 +87,6 @@ export declare class McTagInput implements McTagTextControl, OnChanges {
     private setDefaultInputWidth;
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": { "alias": "mcTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "mcTagInputFor"; "required": false; }; "addOnBlur": { "alias": "mcTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": { "alias": "mcTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "mcTagInputFor"; "required": false; }; "addOnBlur": { "alias": "mcTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
 }

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);
 
     .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);
     }
 
     .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 {

package/toast/toast.component.scss

@@ -3,11 +3,9 @@
 
 @use '../core/styles/variables' as *;
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-toast {
     box-sizing: border-box;
 
@@ -23,28 +21,28 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex: 1 1 auto;
 
-    width: var(--mc-toast-size-width, map.get($tokens, toast-size-width));
+    width: mc-css-variable(toast-size-width);
 
-    padding-right: var(--mc-toast-size-padding-right, map.get($tokens, toast-size-padding-right));
-    padding-left: var(--mc-toast-size-padding-left, map.get($tokens, toast-size-padding-left));
+    padding-right: mc-css-variable(toast-size-padding-right);
+    padding-left: mc-css-variable(toast-size-padding-left);
 
-    border-width: var(--mc-toast-size-border-width, map.get($tokens, toast-size-border-width));
+    border-width: mc-css-variable(toast-size-border-width);
     border-style: solid;
-    border-radius: var(--mc-toast-size-border-radius, map.get($tokens, toast-size-border-radius));
+    border-radius: mc-css-variable(toast-size-border-radius);
 }
 
 .mc-toast__icon-container {
-    padding-right: var(--mc-toast-size-icon-margin, map.get($tokens, toast-size-icon-margin));
+    padding-right: mc-css-variable(toast-size-icon-margin);
 
-    padding-top: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-top: mc-css-variable(toast-size-padding-vertical);
+    padding-bottom: mc-css-variable(toast-size-padding-vertical);
 }
 
 .mc-toast__container {
     width: 100%;
 
-    padding-top: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--mc-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-top: mc-css-variable(toast-size-padding-vertical);
+    padding-bottom: mc-css-variable(toast-size-padding-vertical);
 }
 
 .mc-toast__title {
@@ -59,18 +57,18 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-toast__actions {
-    margin-top: var(--mc-toast-size-actionbar-margin, map.get($tokens, toast-size-actionbar-margin));
+    margin-top: mc-css-variable(toast-size-actionbar-margin);
 
     & > * {
-        margin-right: var(--mc-toast-size-actionbar-gap, map.get($tokens, toast-size-actionbar-gap));
+        margin-right: mc-css-variable(toast-size-actionbar-gap);
     }
 }
 
 .mc-toast__close {
     float: right;
 
-    width: var(--mc-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
-    height: var(--mc-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+    width: mc-css-variable(toast-size-close-button-width);
+    height: mc-css-variable(toast-size-close-button-width);
 
     margin: -6px -8px -6px 8px;
 }