@ptsecurity/mosaic 17.0.0 → 17.2.0

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);
         }
     }
 }
@@ -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/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/_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);
 
-    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,39 @@
+@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-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);
+    @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;
@@ -99,66 +100,57 @@
 }
 
 @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);
         };
     }
 
     &.mc-alert_dismissible {
         padding-right: calc(
-            var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
+            mc-css-variable(alert-size-right-padding-dismissible) + mc-css-variable(alert-size-horizontal-padding)
         );
     }
 }
 
 @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);
         }
     }
 

package/core/styles/theming/_badges.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../typography/typography-utils' as *;
+@use '../common/tokens' as *;
 
 .mc-badge {
     display: inline-flex;
@@ -118,29 +119,27 @@
 }
 
 @mixin mc-badge-typography($config) {
-    $tokens: map-get($config, tokens);
-
     .mc-badge_default {
-        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-default));
+        @include mc-typography-css-variables(badge, default-default);
 
         &.mc-badge_caps {
-            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-caps));
+            @include mc-typography-css-variables(badge, default-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-mono));
+            @include mc-typography-css-variables(badge, default-mono);
         }
     }
 
     .mc-badge_mini {
-        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-default));
+        @include mc-typography-css-variables(badge, mini-default);
 
         &.mc-badge_caps {
-            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-caps));
+            @include mc-typography-css-variables(badge, mini-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-mini-mono));
+            @include mc-typography-css-variables(badge, mini-mono);
         }
     }
 }

package/core/styles/theming/_components-theming.scss

@@ -407,7 +407,8 @@
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-text')
                 )
             )
         ),
@@ -431,7 +432,8 @@
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-text')
                 )
             )
         )

package/core/styles/theming/_scrollbars.scss

@@ -97,9 +97,16 @@
     // webkit
     &::-webkit-scrollbar,
     ::-webkit-scrollbar {
-        width: var(--mc-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+        &:vertical {
+            width: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+        }
+
+        &:horizontal {
+            height: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+        }
     }
 
+    /* stylelint-disable no-descending-specificity */
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
         width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
@@ -111,7 +118,15 @@
             --mc-scrollbar-size-thumb-inset-border-radius,
             map.get($tokens, scrollbar-size-thumb-border-radius)
         );
-        min-height: 20px;
+
+        // these props are used to set the user-friendly thumb for long content.
+        &:vertical {
+            min-height: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+        }
+
+        &:horizontal {
+            min-width: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+        }
     }
 
     &::-webkit-scrollbar-button,

package/datepicker/_datepicker-theme.scss

@@ -4,9 +4,8 @@
 @use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-$mc-datepicker-selected-fade-amount: 0.6;
-$mc-datepicker-today-fade-amount: 0.2;
 
 @mixin mc-datepicker-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -28,28 +27,28 @@ $mc-datepicker-today-fade-amount: 0.2;
         opacity: 1;
 
         .mc-icon {
-            color: theming.mc-color($foreground, icon);
+            color: mc-css-variable(foreground-icon, map-get($foreground, icon));
         }
     }
 
     .mc-calendar__table-header-divider::after {
-        background: map.get($foreground, divider);
+        background: mc-css-variable(foreground-divider, map-get($foreground, divider));
     }
 
     .mc-calendar__body-cell-content {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
         border-color: transparent;
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-cell-content:not(.mc-selected) {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
     }
 
     .cdk-keyboard-focused .mc-calendar__body_active,
     .cdk-program-focused .mc-calendar__body_active {
         & > .mc-calendar__body-cell-content {
-            border-color: map.get(map.get($theme, states), focused-color);
-            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+            border-color: map-get($theme, states, focused-color);
+            box-shadow: 0 0 0 1px map-get($theme, states, focused-color);
         }
     }
 
@@ -60,43 +59,43 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-calendar__body-today {
-        color: map.get($datepicker, state-today-color);
+        color: mc-css-variable(datepicker-state-today-color, map-get($datepicker, state-today-color));
         // now tokens have wrong color for dark theme
         //background: map.get($datepicker, state-today-background);
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
-        border-color: map.get($background, background-disabled);
+        border-color: mc-css-variable(background-background-disabled, map-get($background, background-disabled));
     }
 
     .mc-calendar__body-cell-content.mc-selected {
-        color: map.get($datepicker, state-selected-color);
-        background: map.get($datepicker, state-selected-background);
+        color: mc-css-variable(datepicker-state-selected-color, map-get($datepicker, state-selected-color));
+        background: mc-css-variable(
+            datepicker-state-selected-background, map-get($datepicker, state-selected-background));
     }
 
     .mc-calendar__body_disabled > .mc-selected {
-        background-color: map.get($datepicker, state-selected-background);
+        background-color: mc-css-variable(
+            datepicker-state-selected-background, map-get($datepicker, state-selected-background));
     }
 
     .mc-datepicker__content {
         @include popup.popup-params($theme);
 
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
     }
 }
 
 @mixin mc-datepicker-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-calendar {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+        @include mc-typography-css-variables(datepicker-calendar, default);
     }
 
     .mc-calendar__table-header th {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
+        @include mc-typography-css-variables(datepicker-calendar, header);
     }
 
     .mc-calendar__body-today {
-        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+        @include mc-typography-css-variables(datepicker-body, today);
     }
 }