@ptsecurity/mosaic 17.0.0 → 17.2.0

package/autocomplete/_autocomplete-theme.scss

@@ -2,6 +2,7 @@
 
 @use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-autocomplete-theme($theme) {
@@ -15,7 +16,7 @@
         .mc-selected {
             $popup: map.get(map.get($theme, components), popup);
 
-            background-color: map.get($popup, background);
+            background-color: mc-css-variable(popup-background, map-get($popup, background));
         }
     }
 }

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -90,6 +90,12 @@ export declare class McAutocompleteTrigger implements AfterViewInit, ControlValu
     /** Stream of keyboard events that can close the panel. */
     private readonly closeKeyEventStream;
     constructor(elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, zone: NgZone, scrollStrategy: any, dir: Directionality, formField: McFormField, document: any, viewportRuler?: ViewportRuler | undefined);
+    /**
+     * Event handler for input blur events.
+     * Determines whether the blur event is triggered outside the specific target
+     * @returns A boolean indicating if the blur event happened outside the target element
+     */
+    onInputBlur: (event: FocusEvent) => boolean;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** `View -> model callback called when value changes` */
@@ -153,5 +159,5 @@ export declare class McAutocompleteTrigger implements AfterViewInit, ControlValu
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "mcAutocompleteOnBlur"; "required": false; }; }, {}, never, never, false, never>;
 }

package/autocomplete/autocomplete.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -24,21 +24,17 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
     max-width: none;
 
-    max-height: var(--mc-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
+    max-height: mc-css-variable(autocomplete-size-panel-max-height);
 
     border: {
         width: 1px;
         style: solid;
     }
 
-    border-bottom-left-radius: var(
-        --mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
-    );
+    border-bottom-left-radius: mc-css-variable(autocomplete-size-panel-border-radius);
+    border-bottom-right-radius: mc-css-variable(autocomplete-size-panel-border-radius);
 
-    padding: var(--mc-autocomplete-size-panel-padding, map.get($tokens, autocomplete-size-panel-padding));
+    padding: mc-css-variable(autocomplete-size-panel-padding);
 
     &.mc-autocomplete_visible {
         visibility: visible;
@@ -50,8 +46,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     .mc-autocomplete-panel-above & {
         border-radius:
-            var(--mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
-            var(--mc-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
+            mc-css-variable(autocomplete-size-panel-border-radius)
+            mc-css-variable(autocomplete-size-panel-border-radius)
             0 0;
     }
 

package/button/_button-base.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common/button';
+@use '../core/styles/common/tokens' as *;
 
 @use '../core/styles/tokens';
 
@@ -21,8 +22,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     margin: 0; /* Safari */
 
-    height: var(--mc-button-size-height, map.get($tokens, button-size-height));
-    min-height: var(--mc-button-size-height, map.get($tokens, button-size-height));
+    height: mc-css-variable(button-size-height);
+    min-height: mc-css-variable(button-size-height);
 
     white-space: nowrap;
 
@@ -31,8 +32,11 @@ $tokens: meta.module-variables(tokens) !default;
 
     vertical-align: baseline;
 
-    border: var(--mc-button-size-border-width, map.get($tokens, button-size-border-width)) solid transparent;
-    border-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+    border-width: mc-css-variable(button-size-border-width);
+    border-style: solid;
+    border-color: transparent;
+
+    border-radius: mc-css-variable(button-size-border-radius);
 
     &::-moz-focus-inner {
         border: 0;
@@ -56,14 +60,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .mc-icon_left {
-        margin-right: var(
-            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
-        );
+        margin-right: mc-css-variable(icon-button-size-left-icon-padding);
     }
 
     & .mc-icon_right {
-        margin-left: var(
-            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
-        );
+        margin-left: mc-css-variable(icon-button-size-left-icon-padding);
     }
 }

package/button/_button-theme.scss

@@ -2,32 +2,35 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-button-color($params) {
-    color: map.get($params, color);
-    border-color: map.get($params, border);
-    background: map.get($params, background);
+
+@mixin mc-button-color($component, $style-name) {
+    $style: map-get($component, $style-name);
+
+    color: mc-css-variable(button-#{$style-name}-color, map-get($style, color));
+    border-color: mc-css-variable(button-#{$style-name}-border, map-get($style, border));
+    background: mc-css-variable(button-#{$style-name}-background, map-get($style, background));
 
     .mc-icon {
-        color: map.get($params, icon);
+        color: mc-css-variable(button-#{$style-name}-icon, map-get($style, icon));
     }
 
     &:active:not([disabled]),
     &.mc-active:not([disabled]) {
-        border-color: map.get($params, active_border);
-        background: map.get($params, active_background);
+        border-color: mc-css-variable(button-#{$style-name}-states-active-border, map-get($style, active_border));
+        background: mc-css-variable(button-#{$style-name}-states-active-background, map-get($style, active_background));
     }
-
 }
 
 @mixin mc-button_transparent($theme) {
-    $background: map.get($theme, background);
+    $background: map-get($theme, background);
 
     border-color: transparent;
     background-color: transparent;
 
     &:hover:not([disabled]) {
-        background-color: map.get($background, overlay-hover);
+        background-color: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
 
         & .mc-button-overlay {
             background-color: transparent;
@@ -37,7 +40,7 @@
     &:active:not([disabled]),
     &.mc-active:not([disabled]) {
         border-color: transparent;
-        background-color: map.get($background, overlay-active);
+        background-color: mc-css-variable(background-overlay-active, map-get($background, overlay-active));
         box-shadow: none;
 
         & .mc-button-overlay {
@@ -52,10 +55,11 @@
 }
 
 @mixin mc-button-theme($theme) {
-    $background: map.get($theme, background);
-    $primary: map.get($theme, primary);
+    $background: map-get($theme, background);
+    $theme-states: map-get($theme, states);
 
-    $button: map.get(map.get($theme, components), button);
+    $button: map-get($theme, components, button);
+    $primary_transparent: map-get($button, primary_transparent);
 
     .mc-button-overlay {
         background: transparent;
@@ -66,23 +70,21 @@
         -webkit-font-smoothing: antialiased;
 
         &.mc-primary {
-            @include mc-button-color(map.get($button, primary));
+            @include mc-button-color($button, primary);
 
             &.mc-button_transparent {
                 @include mc-button_transparent($theme);
 
-                $primary_transparent: map.get($button, primary_transparent);
-
-                color: map.get($primary_transparent, color);
+                color: mc-css-variable(button-primary_transparent-color, map-get($primary_transparent, color));
 
                 & .mc-icon {
-                    color: map.get($primary_transparent, icon);
+                    color: mc-css-variable(button-primary_transparent-icon, map-get($primary_transparent, icon));
                 }
             }
         }
 
         &.mc-secondary {
-            @include mc-button-color(map.get($button, secondary));
+            @include mc-button-color($button, secondary);
 
             &.mc-button_transparent {
                 @include mc-button_transparent($theme);
@@ -90,7 +92,7 @@
         }
 
         &.mc-error {
-            @include mc-button-color(map.get($button, error));
+            @include mc-button-color($button, error);
 
             &.mc-button_transparent {
                 @include mc-button_transparent($theme);
@@ -99,46 +101,44 @@
 
         &:hover:not([disabled]) {
             & .mc-button-overlay {
-                background: map.get($background, overlay-hover);
+                background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
             }
         }
 
         &:active:not([disabled]),
         &.mc-active:not([disabled]) {
-            box-shadow: map.get($button, active-shadow);
+            box-shadow: mc-css-variable(button-active-shadow, map-get($button, active-shadow));
         }
 
         &.mc-primary,
         &.mc-secondary,
         &.mc-error {
             &.cdk-keyboard-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));
                 box-shadow:
-                    inset 0 0 0 1px map.get($background, background),
-                    0 0 0 1px map.get(map.get($theme, states), focused-color);
+                    inset 0 0 0 1px mc-css-variable(background-background, map-get($background, background)),
+                    0 0 0 1px mc-css-variable(states-focused-color, map-get($theme-states, focused-color));
             }
         }
 
         &.mc-disabled,
         &[disabled] {
-            opacity: map.get(map.get($theme, states), disabled-opacity);
+            opacity: mc-css-variable(states-disabled-opacity, map-get($theme-states, disabled-opacity));
         }
     }
 }
 
 @mixin mc-button-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-button,
     .mc-icon-button {
-        @include mc-typography-level-to-styles($config, map.get($tokens, button-font-default));
+        @include mc-typography-css-variables(button, default);
 
         &.mc-primary {
-            @include mc-typography-level-to-styles($config, map.get($tokens, button-font-primary));
+            @include mc-typography-css-variables(button, primary);
         }
 
         &.mc-primary.mc-button_transparent {
-            @include mc-typography-level-to-styles($config, map.get($tokens, button-font-primary-transparent));
+            @include mc-typography-css-variables(button, primary-transparent);
         }
     }
 

package/button/button.scss

@@ -3,6 +3,7 @@
 
 @use 'button-base' as *;
 
+@use '../core/styles/common/tokens' as *;
 @use '../core/styles/tokens';
 
 
@@ -11,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-button {
     @extend %mc-button-base;
 
-    padding-left: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
-    padding-right: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    padding-left: mc-css-variable(button-size-horizontal-padding);
+    padding-right: mc-css-variable(button-size-horizontal-padding);
 }
 
 .mc-light-button {
@@ -22,24 +23,17 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-icon-button {
     @extend %mc-button-base;
 
-    padding-left: calc(
-        var(--mc-icon-button-size-horizontal-padding, map.get($tokens, icon-button-size-horizontal-padding)) -
-        var(--mc-button-size-border-width, map.get($tokens, button-size-border-width))
-    );
-
-    padding-right: calc(
-        var(--mc-icon-button-size-horizontal-padding, map.get($tokens, icon-button-size-horizontal-padding)) -
-        var(--mc-button-size-border-width, map.get($tokens, button-size-border-width))
-    );
+    padding-left: mc-css-variable(icon-button-size-horizontal-padding);
+    padding-right: mc-css-variable(icon-button-size-horizontal-padding);
 }
 
 .mc-button-overlay {
     position: absolute;
 
-    top: -#{map.get($tokens, button-size-border-width)};
-    left: -#{map.get($tokens, button-size-border-width)};
-    right: -#{map.get($tokens, button-size-border-width)};
-    bottom: -#{map.get($tokens, button-size-border-width)};
+    top: -#{getToken(button-size-border-width)};
+    left: -#{getToken(button-size-border-width)};
+    right: -#{getToken(button-size-border-width)};
+    bottom: -#{getToken(button-size-border-width)};
 
     border-radius: inherit;
 }

package/button-toggle/_button-toggle-theme.scss

@@ -2,36 +2,41 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
+
+@mixin mc-button-toggle-color($component, $state-name) {
+    $state: map-get(map-get($component, states), $state-name);
 
-@mixin mc-button-toggle-color($state) {
     & .mc-button-overlay {
-        background: map.get($state, background);
-        border-color: map.get($state, background);
+        background: mc-css-variable(button-toggle-states-#{$state-name}-background, map-get($state, background));
     }
 
     & .mc-icon {
-        color: map.get($state, icon);
+        color: mc-css-variable(button-toggle-states-#{$state-name}-icon, map-get($state, icon));
     }
 }
 
 @mixin mc-button-toggle-theme($theme) {
-    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
-    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
-    $states: map.get($button-toggle, states);
+    $theme-states: map-get($theme, states);
+
+    $button-toggle-group: map-get(map-get(map-get($theme, components), button-toggle), button-toggle-group);
+    $button-toggle: map-get(map-get(map-get($theme, components), button-toggle), button-toggle);
+    $states: map-get($button-toggle, states);
 
     .mc-button-toggle-group {
-        background: map.get($button-toggle-group, background);
-        border-color:  map.get($button-toggle-group, border);
+        background: mc-css-variable(button-toggle-group-background, map-get($button-toggle-group, background));
+        border-color: mc-css-variable(button-toggle-group-border, map-get($button-toggle-group, border));
 
         .mc-button-toggle {
-            & > .mc-button,
-            & > .mc-icon-button {
-                color: map.get($button-toggle, color);
-                border-color: map.get($button-toggle-group, background);
+            > .mc-button,
+            > .mc-icon-button {
+                color: mc-css-variable(button-toggle-color, map-get($button-toggle, color));
+                border-color: mc-css-variable(button-toggle-group-border, map-get($button-toggle-group, border));
                 background: inherit;
 
                 & .mc-icon {
-                    color: map.get($button-toggle, icon);
+                    color: mc-css-variable(button-toggle-icon, map-get($button-toggle, icon));
                 }
 
                 .mc-button-overlay {
@@ -39,27 +44,30 @@
                 }
 
                 &:hover:not([disabled], .mc-active) {
-                    @include mc-button-toggle-color(map.get($states, hover));
+                    @include mc-button-toggle-color($button-toggle, hover);
                 }
 
                 &:active:not([disabled], .mc-active) {
-                    @include mc-button-toggle-color(map.get($states, active));
+                    @include mc-button-toggle-color($button-toggle, active);
                 }
 
                 &.mc-active {
-                    $state: map.get($states, pressed);
+                    $state: map-get($states, pressed);
 
-                    background: map.get($state, background);
-                    border-color: map.get($state, background);
+                    background: mc-css-variable(button-toggle-states-pressed-background, map-get($state, background));
+                    border-color: mc-css-variable(button-toggle-states-pressed-background, map-get($state, background));
 
                     & .mc-icon {
-                        color: map.get($state, icon);
+                        color: mc-css-variable(button-toggle-states-pressed-icon, map-get($state, icon));
                     }
                 }
 
                 &.mc-disabled,
                 &[disabled] {
-                    opacity: map.get(map.get($states, disabled), opacity);
+                    opacity: mc-css-variable(
+                        button-toggle-states-disabled-icon,
+                        map-get(map-get($states, disabled), opacity)
+                    );
                 }
 
                 &.cdk-keyboard-focused {
@@ -68,7 +76,7 @@
             }
 
             &.cdk-keyboard-focused {
-                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+                box-shadow: 0 0 0 2px mc-css-variable(states-focused-color, map-get($theme-states, focused-color));
             }
         }
     }
@@ -78,11 +86,11 @@
     $tokens: map.get($config, tokens);
 
     .mc-button-toggle {
-        @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+        @include mc-typography-css-variables(button-toggle, default);
 
         > .mc-button,
         > .mc-icon-button {
-            @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+            @include mc-typography-css-variables(button-toggle, default);
         }
     }
 }

package/button-toggle/button-toggle.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -15,53 +16,28 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     gap: map.get($tokens, size-3xs);
 
-    border-width: var(
-        --mc-button-toggle-group-size-border-width,
-        map.get($tokens, button-toggle-group-size-border-width)
-    );
-    border-radius: var(
-        --mc-button-toggle-group-size-border-radius,
-        map.get($tokens, button-toggle-group-size-border-radius)
-    );
+    border-width: mc-css-variable(button-toggle-group-size-border-width);
+    border-radius: mc-css-variable(button-toggle-group-size-border-radius);
     border-style: solid;
-    padding: var(
-        --mc-button-toggle-group-size-padding,
-        map.get($tokens, button-toggle-group-size-padding)
-    );
+    padding: mc-css-variable(button-toggle-group-size-padding);
 
     .mc-button-toggle {
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
 
-        border-radius: var(
-            --mc-button-toggle-size-border-radius,
-            map.get($tokens, button-toggle-size-border-radius)
-        );
+        border-radius: mc-css-variable(button-toggle-size-border-radius);
 
         > .mc-button,
         > .mc-icon-button {
             border: none;
-            border-width: var(
-                --mc-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
-            border-radius: var(
-                --mc-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
-            min-width: var(
-                --mc-button-toggle-size-min-width,
-                map.get($tokens, button-toggle-size-min-width)
-            );
-            padding-left: var(
-                --mc-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
-            padding-right: var(
-                --mc-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
+            border-width: mc-css-variable(button-toggle-size-border-width);
+            border-radius: mc-css-variable(button-toggle-size-border-radius);
+
+            min-width: mc-css-variable(button-toggle-size-min-width);
+
+            padding-left: mc-css-variable(button-toggle-size-horizontal-padding);
+            padding-right: mc-css-variable(button-toggle-size-horizontal-padding);
 
             & .mc-button-wrapper {
                 width: 100%;
@@ -84,10 +60,7 @@ $tokens: meta.module-variables(tokens) !default;
         &.mc-button-toggle-icon-text {
             > .mc-button,
             > .mc-icon-button {
-                padding-left: var(
-                    --mc-button-toggle-size-left-icon-padding,
-                    map.get($tokens, button-toggle-size-left-icon-padding)
-                );
+                padding-left: mc-css-variable(button-toggle-size-left-icon-padding);
 
                 & .mc-icon {
                     margin-right: map.get($tokens, size-xxs);
@@ -111,17 +84,11 @@ $tokens: meta.module-variables(tokens) !default;
             }
 
             &.mc-button-toggle-icon {
-                width: var(
-                    --mc-icon-button-toggle-size-width,
-                    map.get($tokens, icon-button-toggle-size-width)
-                );
+                width: mc-css-variable(icon-button-toggle-size-width);
 
                 > .mc-button,
                 > .mc-icon-button {
-                    width: var(
-                        --mc-icon-button-toggle-size-width,
-                        map.get($tokens, icon-button-toggle-size-width)
-                    );
+                    width: mc-css-variable(icon-button-toggle-size-width);
                 }
             }
         }
@@ -143,15 +110,9 @@ $tokens: meta.module-variables(tokens) !default;
         > .mc-button,
         > .mc-icon-button {
             width: 100%;
-            border-width: var(
-                --mc-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
-
-            border-radius: var(
-                --mc-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
+            border-width: mc-css-variable(button-toggle-size-border-width);
+
+            border-radius: mc-css-variable(button-toggle-size-border-radius);
         }
     }
 }