@ptsecurity/mosaic 17.1.0 → 17.2.1

package/core/forms/_forms-theme.scss

@@ -1,7 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../styles/typography' as *;
+@use '../styles/typography/typography' as *;
+@use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
+
 
 @mixin mc-form-geometry($tokens) {
     .mc-form {
@@ -24,34 +27,22 @@
         $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .mc-form-row_margin {
-            margin-bottom: var(
-                --mc-forms-size-horizontal-row-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
-            );
+            margin-bottom: mc-css-variable(forms-size-horizontal-row-margin-bottom);
         }
 
         & .mc-form__label {
-            padding-top: var(--mc-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+            padding-top: mc-css-variable(forms-size-horizontal-label-padding-top, #{$label-padding-top});
 
             text-align: start;
         }
 
         & .mc-form__control {
-            padding-left: var(
-                --mc-forms-size-horizontal-control-padding-left,
-                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
-            );
+            padding-left: mc-css-variable(forms-size-horizontal-control-padding-left);
         }
 
         & .mc-form__legend {
-            margin-top: var(
-                --mc-forms-size-horizontal-legend-margin-top,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --mc-forms-size-horizontal-legend-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
-            );
+            margin-top: mc-css-variable(forms-size-horizontal-legend-margin-top);
+            margin-bottom: mc-css-variable(forms-size-horizontal-legend-margin-bottom);
         }
     }
 
@@ -61,21 +52,12 @@
         }
 
         & .mc-form-row_margin {
-            margin-bottom: var(
-                --mc-forms-size-vertical-row-margin-bottom,
-                #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
-            );
+            margin-bottom: mc-css-variable(forms-size-vertical-row-margin-bottom);
         }
 
         & .mc-form__label {
-            padding-top: var(
-                --mc-forms-size-vertical-label-padding-top,
-                #{map.get($tokens, forms-size-vertical-label-padding-top)}
-            );
-            padding-bottom: var(
-                --mc-forms-size-vertical-label-padding-bottom,
-                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
-            );
+            padding-top: mc-css-variable(forms-size-vertical-label-padding-top);
+            padding-bottom: mc-css-variable(forms-size-vertical-label-padding-bottom);
 
             text-align: start;
         }
@@ -85,14 +67,8 @@
         }
 
         & .mc-form__legend {
-            margin-top: var(
-                --mc-forms-size-vertical-legend-margin-top,
-                #{map.get($tokens, forms-size-vertical-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --mc-forms-size-vertical-legend-margin-bottom,
-                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
-            );
+            margin-top: mc-css-variable(forms-size-vertical-legend-margin-top);
+            margin-bottom: mc-css-variable(forms-size-vertical-legend-margin-bottom);
         }
     }
 
@@ -105,10 +81,7 @@
         flex-direction: row;
 
         & .mc-form__row:not(:first-child) {
-            padding-left: var(
-                --mc-forms-size-vertical-control-padding-left,
-                #{map.get($tokens, forms-size-vertical-control-padding-left)}
-            );
+            padding-left: mc-css-variable(forms-size-vertical-control-padding-left);
         }
     }
 }
@@ -118,7 +91,7 @@
 
     $foreground: map.get($theme, foreground);
 
-    $forms: map.get(map.get($theme, components), forms);
+    $forms: map.get($theme, components, forms);
 
     .mc-form__label {
         color: map.get($forms, label);
@@ -130,13 +103,11 @@
 }
 
 @mixin mc-forms-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-form__label {
-        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+        @include mc-typography-css-variables(forms, default-label);
     }
 
     .mc-form__legend {
-        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+        @include mc-typography-css-variables(forms, default-legend);
     }
 }

package/core/option/_optgroup-theme.scss

@@ -2,23 +2,23 @@
 @use 'sass:map';
 
 @use '../styles/typography' as *;
+@use '../styles/common/tokens' as *;
+
 
 @mixin mc-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .mc-optgroup-label {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
     }
 
     .mc-disabled .mc-optgroup-label {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 }
 
 @mixin mc-optgroup-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-optgroup-label {
-        @include mc-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+        @include mc-typography-css-variables(optgroup, default);
     }
 }

package/core/option/_option-action-theme.scss

@@ -5,16 +5,13 @@
 
 
 @mixin mc-option-action-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     $secondary: map.get($theme, secondary);
 
     $is-dark: map.get($theme, is-dark);
 
     .mc-option-action {
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map.get($theme, states, focused-color);
         }
 
         &:active,

package/core/option/_option-theme.scss

@@ -2,42 +2,40 @@
 @use 'sass:map';
 
 @use '../styles/typography' as *;
+@use '../styles/common/tokens' as *;
+
 
 @mixin mc-option-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
-
     .mc-option {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
 
         &:hover:not(.mc-disabled) {
             .mc-option-overlay {
-                background: map.get($background, overlay-hover);
+                background: mc-css-variable(background-overlay-hover, map.get($background, overlay-hover));
             }
         }
 
         &.mc-active {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: mc-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
 
         &.mc-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            background: mc-css-variable(states-selected-color, map.get($theme, states, selected-color));
         }
 
         &.mc-disabled {
             background: transparent;
 
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 }
 
 @mixin mc-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-option {
-        @include mc-typography-level-to-styles($config, map.get($tokens, option-font-default));
+        @include mc-typography-css-variables(option, default);
     }
 }

package/core/option/option.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../styles/tokens';
+@use '../styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -17,16 +18,16 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-width: 100%;
 
-    height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+    height: mc-css-variable(option-size-height);
 
-    border: var(--mc-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+    border: mc-css-variable(option-size-border-width) solid transparent;
 
     cursor: pointer;
 
     outline: none;
 
-    padding-left: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+    padding-left: mc-css-variable(option-size-horizontal-padding);
+    padding-right: mc-css-variable(option-size-horizontal-padding);
 
     -webkit-tap-highlight-color: transparent;
 

package/core/pop-up/pop-up-trigger.d.ts

@@ -33,12 +33,13 @@ export declare abstract class McPopUpTrigger<T> {
     protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
-    protected listeners: Map<string, EventListenerOrEventListenerObject>;
+    protected listeners: Map<string, EventListener>;
     protected closingActionsSubscription: Subscription;
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
     protected readonly destroyed: Subject<void>;
+    protected triggerName: string;
     protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
@@ -63,6 +64,7 @@ export declare abstract class McPopUpTrigger<T> {
     protected getPriorityPlacementStrategy(value: string | string[]): ConnectionPositionPair[];
     protected getPrioritizedPositions(): ConnectionPositionPair[];
     protected clearListeners(): void;
+    private createListener;
     private addEventListener;
     private removeEventListener;
     private subscribeOnClosingActions;

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,19 +1,23 @@
 @use 'sass:map';
 
+@use '../../styles/common/tokens' as *;
 
-@mixin mc-pseudo-checkbox-color($states) {
-    border-color: map.get($states, border);
+
+@mixin mc-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    border-color: mc-css-variable(checkbox-#{$style-name}-border, map.get($style, border));
 
     & .mc-checkbox-checkmark,
     & .mc-checkbox-mixedmark {
-        color: map.get($states, color);
+        color: mc-css-variable(checkbox-#{$style-name}-color, map.get($style, color));
     }
 
     &.mc-checked,
     &.mc-indeterminate {
-        border-color: map.get($states, checked, border);
+        border-color: mc-css-variable(checkbox-#{$style-name}-checked-border, map.get($style, checked, border));
 
-        background: map.get($states, checked, background);
+        background: mc-css-variable(checkbox-#{$style-name}-checked-background, map.get($style, checked, background));
     }
 }
 
@@ -21,27 +25,28 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .mc-pseudo-checkbox {
         &.mc-primary {
-            @include mc-pseudo-checkbox-color(map.get($checkbox, default));
+            @include mc-pseudo-checkbox-color($checkbox, default);
         }
 
         &.mc-error {
-            @include mc-pseudo-checkbox-color(map.get($checkbox, error));
+            @include mc-pseudo-checkbox-color($checkbox, error);
         }
 
         &.mc-disabled,
         &.mc-primary.mc-disabled,
         &.mc-error.mc-disabled {
-            border-color: map.get($foreground, border);
+            border-color: mc-css-variable(foreground-border, map.get($foreground, border));
 
-            background-color: map.get($background, background-disabled);
+            background-color: mc-css-variable(
+                background-background-disabled, map.get($background, background-disabled));
 
             & .mc-checkbox-checkmark,
             & .mc-checkbox-mixedmark {
-                color: map.get($foreground, text-disabled);
+                color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
             }
         }
     }

package/core/styles/_mosaic-theme.scss

@@ -102,13 +102,13 @@
 }
 
 
-@mixin mosaic-typography($config: null, $md-config: null) {
+@mixin mosaic-typography($tokens, $config: null, $md-config: null) {
     @if $config == null {
-        $config: mc-typography-config();
+        $config: mc-typography-config($tokens);
     }
 
     @if $md-config == null {
-        $md-config: mc-markdown-typography-config();
+        $md-config: mc-markdown-typography-config($tokens);
     }
 
     @include mc-base-typography($config);

package/core/styles/common/_groups.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use '../common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: mc-css-variable(button-size-border-radius);
 
             > .mc-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,7 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-bottom-left-radius: mc-css-variable(button-size-border-radius);
 
             > .mc-form-field__container {
                 @include border-top-radius(0);

package/core/styles/common/_popup.scss

@@ -1,11 +1,12 @@
 @use 'sass:map';
+@use '../common/tokens' as *;
 
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
-    box-shadow: map.get($popup, shadow);
-    border-color: map.get($popup, border);
+    box-shadow: mc-css-variable(popup-shadow, map-get($popup, shadow));
+    border-color: mc-css-variable(popup-border, map-get($popup, border));
 
-    background-color: map.get($popup, background);
+    background-color: mc-css-variable(popup-background, map-get($popup, background));
 }

package/core/styles/common/_tokens.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens);
+
+
+@function mc-css-variable($name, $value: null) {
+    @if $value {
+        @return var(--mc-#{$name}, $value);
+    } @else {
+        @return var(--mc-#{$name}, map.get($tokens, $name));
+    }
+}
+
+@function getToken($name) {
+    @return map.get($tokens, $name);
+}
+
+@mixin mc-css-font-variable($component, $component-property, $font-property, $font) {
+    #{$font-property}: var(
+        --mc-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
+    );
+}
+
+@mixin mc-typography-css-variables($component, $property) {
+    @include mc-css-font-variable($component, $property, font-size, font-);
+    @include mc-css-font-variable($component, $property, font-weight, font-);
+    @include mc-css-font-variable($component, $property, line-height, font-);
+    @include mc-css-font-variable($component, $property, font-family, font-);
+    @include mc-css-font-variable($component, $property, text-transform, font-);
+    @include mc-css-font-variable($component, $property, font-feature-settings, font-);
+    @include mc-css-font-variable($component, $property, letter-spacing, font-);
+}
+
+@mixin mc-typography-level-to-styles_css-variables($component, $property) {
+    @include mc-css-font-variable($component, $property, font-size, '');
+    @include mc-css-font-variable($component, $property, font-weight, '');
+    @include mc-css-font-variable($component, $property, line-height, '');
+    @include mc-css-font-variable($component, $property, font-family, '');
+    @include mc-css-font-variable($component, $property, text-transform, '');
+    @include mc-css-font-variable($component, $property, font-feature-settings, '');
+    @include mc-css-font-variable($component, $property, letter-spacing, '');
+}

package/core/styles/theming/_alerts.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../typography/typography-utils' as *;
+@use '../common/tokens' as *;
 
 .mc-alert {
     display: flex;
@@ -51,83 +52,77 @@
     }
 }
 
-@mixin alert-theme($alert) {
-    background-color: map.get($alert, background);
-    border-color: map.get($alert, border);
+@mixin alert-theme($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    background-color: mc-css-variable(alert-#{$style-name}-background, map.get($style, background));
+    border-color: mc-css-variable(alert-#{$style-name}-border, map.get($style, border));
 
     .mc-icon.mc-alert__icon {
-        color: map.get($alert, icon);
+        color: mc-css-variable(alert-#{$style-name}-icon, map.get($style, icon));
     }
 }
 
 @mixin mc-alert-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $alert: map.get(map.get($theme, components), alert);
-
-    $is-dark: map.get($theme, is-dark);
+    $alert: map.get($theme, components, alert);
 
     .mc-alert__close:focus {
         outline: none;
     }
 
     .mc-alert {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
 
         @include mc-alert-geometry(map.get($theme, tokens));
     }
 
     .mc-alert_error {
-        @include alert-theme(map.get($alert, error));
+        @include alert-theme($alert, error);
     }
 
     .mc-alert_warning {
-        @include alert-theme(map.get($alert, warning));
+        @include alert-theme($alert, warning);
     }
 
     .mc-alert_success {
-        @include alert-theme(map.get($alert, success));
+        @include alert-theme($alert, success);
     }
 
     .mc-alert_info {
-        @include alert-theme(map.get($alert, info));
+        @include alert-theme($alert, info);
     }
 
     .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
-        @include alert-theme(map.get($alert, default));
+        @include alert-theme($alert, default);
     }
 }
 
 @mixin mc-alert-geometry($tokens) {
-    border: var(--mc-alert-size-border-width, map.get($tokens, alert-size-border-width)) solid transparent;
-    border-radius: var(--mc-alert-size-border-radius, map.get($tokens, alert-size-border-radius));
+    border: mc-css-variable(alert-size-border-width) solid transparent;
+    border-radius: mc-css-variable(alert-size-border-radius);
 
     .mc-alert__icon {
-        margin-right: var(--mc-alert-size-icon-margin, map.get($tokens, alert-size-icon-margin));
+        margin-right: mc-css-variable(alert-size-icon-margin);
     }
 
     padding: {
-        right: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
-        left: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
+        right: mc-css-variable(alert-size-horizontal-padding);
+        left: mc-css-variable(alert-size-horizontal-padding);
     };
 
     &:not(.mc-alert_small) {
         padding: {
-            top: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
-            bottom: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
+            top: mc-css-variable(alert-size-vertical-padding);
+            bottom: mc-css-variable(alert-size-vertical-padding);
         };
     }
 
     &.mc-alert_small {
         padding: {
-            top: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
-            bottom: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
+            top: mc-css-variable(alert-size-small-vertical-padding);
+            bottom: mc-css-variable(alert-size-small-vertical-padding);
         };
     }
 
@@ -140,25 +135,23 @@
 }
 
 @mixin mc-alert-typography($config) {
-    $tokens: map-get($config, tokens);
-
     .mc-alert:not(.mc-alert_small) {
-        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-body));
+        @include mc-typography-css-variables(alert, default-body);
 
         header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-header));
+            @include mc-typography-css-variables(alert, default-header);
         }
     }
 
     .mc-alert.mc-alert_small {
-        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
+        @include mc-typography-css-variables(alert, small-body);
 
         header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-header));
+            @include mc-typography-css-variables(alert, small-header);
         }
 
         .mc-link__text {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
+            @include mc-typography-css-variables(alert, small-body);
         }
     }