@ptsecurity/mosaic 17.1.0 → 17.2.1

package/file-upload/_file-upload-theme.scss

@@ -2,98 +2,141 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-file-upload-text-color($states) {
-    &, .mc-icon, .mc-link {
-        color: map.get($states, text);
-    }
-}
-
-@mixin mc-file-upload-color($states) {
-    background-color: map.get($states, background);
-    border-color: map.get($states, border) !important;
-}
 
 @mixin mc-file-upload-theme($theme) {
-    $file-upload: map.get(map.get($theme, components), file-upload);
-    $single: map.get($file-upload, single);
-    $single-states: map.get($single, states);
-    $multiple: map.get($file-upload, multiple);
-    $multiple-states: map.get($multiple, states);
-    $foreground: map.get($theme, foreground);
+    $foreground: map-get($theme, foreground);
+
+    $file-upload: map-get($theme, components, file-upload);
+
+    $single: map-get($file-upload, single);
+    $single-states: map-get($single, states);
+
+    $multiple: map-get($file-upload, multiple);
+    $multiple-states: map-get($multiple, states);
 
     .mc-file-upload {
         .mc-focused, .mc-link.mc-focused {
-            border: 2px solid map.get(map.get($theme, states), focused-color);
+            border: 2px solid mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
     }
 
     .mc-single-file-upload {
         .mc-file-upload {
-            @include mc-file-upload-color(map.get($single, default));
+            background-color: mc-css-variable(
+                file-upload-single-default-background, map-get($single, default, background));
+            border-color: mc-css-variable(
+                file-upload-single-default-border, map-get($single, default, border)) !important;
 
             &.dragover {
-                @include mc-file-upload-color(map.get($single-states, drag-n-drop));
+                background-color: mc-css-variable(
+                    file-upload-single-states-drag-n-drop-background, map-get($single-states, drag-n-drop, background));
+                border-color: mc-css-variable(
+                    file-upload-single-states-drag-n-drop-border, map-get($single-states, drag-n-drop, border)
+                ) !important;
             }
 
             &.mc-error:not(.disabled) {
                 &:not(.dragover) {
-                    @include mc-file-upload-color(map.get($single-states, error));
+                    background-color: mc-css-variable(
+                        file-upload-single-states-error-background, map-get($single-states, error, background));
+                    border-color: mc-css-variable(
+                        file-upload-single-states-error-border, map-get($single-states, error, border)) !important;
                 }
 
                 *, .mc-icon {
-                    color: map.get($foreground, text-error);
+                    color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                 }
             }
 
             &.disabled {
-                @include mc-file-upload-color(map.get($single-states, disabled));
-
-                @include mc-file-upload-text-color(map.get($single-states, disabled));
+                background-color: mc-css-variable(
+                    file-upload-single-states-disabled-background, map-get($single-states, disabled, background));
+                border-color: mc-css-variable(
+                    file-upload-single-states-disabled-border, map-get($single-states, disabled, border)) !important;
+
+                /* stylelint-disable no-descending-specificity */
+                &,
+                .mc-icon,
+                .mc-link {
+                    color: mc-css-variable(
+                        file-upload-single-states-disabled-text, map-get($single-states, disabled, text));
+                }
+                /* stylelint-enable no-descending-specificity */
             }
         }
     }
 
     .mc-multiple-file-upload {
         .mc-file-upload {
-            @include mc-file-upload-color(map.get($multiple, default));
+            background-color: mc-css-variable(
+                file-upload-multiple-default-background, map-get($multiple, default, background));
+            border-color: mc-css-variable(
+                file-upload-multiple-default-border, map-get($multiple, default, border)) !important;
 
             .btn-upload {
                 .dropzone {
-                    border-top-color: map.get(map.get($multiple, default), border);
+                    border-top-color: mc-css-variable(
+                        file-upload-multiple-default-border, map-get($multiple, default, border));
                 }
             }
 
             .mc-file-multiple-uploaded__header {
-                border-bottom-color: map.get(map.get($multiple, default), border);
+                border-bottom-color: mc-css-variable(
+                    file-upload-multiple-default-border, map-get($multiple, default, border));
 
                 &-inner {
-                    color: map.get($foreground, text-less-contrast);
+                    color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
                 }
             }
 
             &.dragover {
-                @include mc-file-upload-color(map.get($multiple-states, drag-n-drop));
+                background-color: mc-css-variable(
+                    file-upload-multiple-states-drag-n-drop-background,
+                    map-get($multiple-states, drag-n-drop, background)
+                );
+                border-color: mc-css-variable(
+                    file-upload-multiple-states-drag-n-drop-border, map-get($multiple-states, drag-n-drop, border)
+                ) !important;
 
                 .mc-file-multiple-uploaded__header {
-                    border-bottom-color: map.get(map.get($multiple-states, drag-n-drop), background) !important;
+                    border-bottom-color: mc-css-variable(
+                        file-upload-multiple-states-drag-n-drop-background,
+                        map-get($multiple-states, drag-n-drop, background)
+                    ) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, drag-n-drop), border);
+                        border-top-color: mc-css-variable(
+                            file-upload-multiple-states-drag-n-drop-border,
+                            map-get($multiple-states, drag-n-drop, border)
+                        );
                     }
                 }
             }
 
             &.disabled {
-                @include mc-file-upload-color(map.get($multiple-states, disabled));
-
-                @include mc-file-upload-text-color(map.get($multiple-states, disabled));
+                background-color: mc-css-variable(
+                    file-upload-multiple-states-disabled-background, map-get($multiple-states, disabled, background));
+                border-color: mc-css-variable(
+                    file-upload-multiple-states-disabled-border, map-get($multiple-states, disabled, border)
+                ) !important;
+
+                /* stylelint-disable no-descending-specificity */
+                &,
+                .mc-icon,
+                .mc-link {
+                    color: mc-css-variable(
+                        file-upload-multiple-states-disabled-text, map-get($multiple-states, disabled, text));
+                }
+                /* stylelint-enable no-descending-specificity */
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, disabled), border);
+                        border-top-color: mc-css-variable(
+                            file-upload-multiple-states-disabled-border, map-get($multiple-states, disabled, border));
                     }
                 }
             }
@@ -101,7 +144,7 @@
             &:not(.disabled) {
                 .mc-file-upload__row.error {
                     *, .mc-icon {
-                        color: map.get($foreground, text-error);
+                        color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                     }
                 }
             }
@@ -116,57 +159,47 @@
 
     .mc-single-file-upload, .mc-multiple-file-upload {
         .mc-file-upload__hint:not(.mc-error) {
-            color: map-get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
     }
 }
 
 
 @mixin mc-file-upload-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-single-file-upload {
-        @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-single));
+        @include mc-typography-css-variables(file-upload, single);
     }
 
     .mc-multiple-file-upload {
         .multiple__header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-header));
+            @include mc-typography-css-variables(file-upload, multiple-header);
         }
 
         .multiple__caption {
             &, .mc-link {
-                @include mc-typography-level-to-styles(
-                    $config, map.get($tokens, file-upload-font-multiple-caption)
-                );
+                @include mc-typography-css-variables(file-upload, multiple-caption);
             }
         }
 
         .mc-file-multiple-uploaded__header {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, file-upload-font-multiple-uploaded-header)
-            );
+            @include mc-typography-css-variables(file-upload, multiple-uploaded-header);
         }
 
         .multiple__uploaded-item {
-            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-uploaded-item));
+            @include mc-typography-css-variables(file-upload, multiple-uploaded-item);
         }
 
         .mc-file-upload {
             .mc-list-item,
             .mc-list-option {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, file-upload-font-multiple-uploaded-item)
-                );
+                @include mc-typography-css-variables(file-upload, multiple-uploaded-item);
             }
         }
     }
 
     .mc-single-file-upload, .mc-multiple-file-upload {
         .mc-file-upload__hint {
-            @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+            @include mc-typography-css-variables(form-field-hint, default);
         }
     }
 }

package/file-upload/file-upload.scss

@@ -1,11 +1,4 @@
-@use 'sass:meta';
-@use 'sass:map';
 
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-$tokens: meta.module-variables(tokens) !default;
 
 .mc-file-upload {
     box-sizing: border-box;

package/file-upload/multiple-file-upload.component.scss

@@ -4,34 +4,21 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
 $multiple-default-height: 176px;
 $border-type-header: solid;
 
-$horizontal-padding-item: var(
-    --mc-file-upload-size-multiple-uploaded-item-horizontal-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-horizontal-padding)
-);
-$vertical-padding-item: var(
-    --mc-file-upload-size-multiple-uploaded-item-vertical-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-vertical-padding)
-);
+$horizontal-padding-item: mc-css-variable(file-upload-size-multiple-uploaded-item-horizontal-padding);
+$vertical-padding-item: mc-css-variable(file-upload-size-multiple-uploaded-item-vertical-padding);
 
 .mc-file-upload {
-    border-radius: var(
-        --mc-file-upload-size-multiple-border-radius,
-        map.get($tokens, file-upload-size-multiple-border-radius)
-    );
-    border-width: var(
-        --mc-file-upload-size-multiple-border-width,
-        map.get($tokens, file-upload-size-multiple-border-width)
-    );
-    border-style: var(
-        --mc-file-upload-size-multiple-border-style,
-        map.get($tokens, file-upload-size-multiple-border-style)
-    );
+    border-radius: mc-css-variable(file-upload-size-multiple-border-radius);
+    border-width: mc-css-variable(file-upload-size-multiple-border-width);
+    border-style: mc-css-variable(file-upload-size-multiple-border-style);
 
     .mc-list-option {
         padding: $horizontal-padding-item $vertical-padding-item;
@@ -57,8 +44,8 @@ $vertical-padding-item: var(
         }
 
         .mc-file-upload__size {
-            width: map.get($tokens, size-7xl);
-            min-width: map.get($tokens, size-7xl);
+            width: mc-css-variable(size-7xl);
+            min-width: mc-css-variable(size-7xl);
             text-align: left;
             flex-grow: 1;
         }
@@ -97,7 +84,7 @@ $vertical-padding-item: var(
             border: 2px solid transparent;
             border-bottom: unset;
             box-sizing: border-box;
-            height: var(--mc-list-size-item-height, map.get($tokens, size-3xl));
+            height: mc-css-variable(size-3xl);
         }
 
     }
@@ -106,41 +93,26 @@ $vertical-padding-item: var(
         .dropzone {
             $padding-top: map.get($tokens, size-xxs);
             margin: 0;
-            border-top-width: var(
-                --mc-file-upload-size-multiple-border-width,
-                map.get($tokens, file-upload-size-multiple-border-width)
-            );
-            border-top-style: var(
-                --mc-file-upload-size-multiple-border-style,
-                map.get($tokens, file-upload-size-multiple-border-style)
-            );
+            border-top-width: mc-css-variable(file-upload-size-multiple-border-width);
+            border-top-style: mc-css-variable(file-upload-size-multiple-border-style);
             padding: calc($padding-top - 1px)
-                map.get($tokens, size-m)
-                map.get($tokens, size-xxs)
-                map.get($tokens, size-m);
+                mc-css-variable(size-m)
+                mc-css-variable(size-xxs)
+                mc-css-variable(size-m);
         }
     }
 
     &.compact {
         &:not(.selected) {
-            height: var(
-                --mc-file-upload-size-single-height,
-                map.get($tokens, file-upload-size-single-height)
-            );
-            padding-top: var(
-                --mc-file-upload-size-single-vertical-padding,
-                map.get($tokens, file-upload-size-single-vertical-padding)
-            );
-            padding-bottom: var(
-                --mc-file-upload-size-single-vertical-padding,
-                map.get($tokens, file-upload-size-single-vertical-padding)
-            );
-            padding-left: map.get($tokens, size-m);
+            height: mc-css-variable(file-upload-size-single-height);
+            padding-top: mc-css-variable(file-upload-size-single-vertical-padding);
+            padding-bottom: mc-css-variable(file-upload-size-single-vertical-padding);
+            padding-left: mc-css-variable(size-m);
         }
 
         .dropzone {
             .dropzone__text {
-                margin-left: map.get($tokens, size-xs);
+                margin-left: mc-css-variable(size-xs);
             }
         }
     }
@@ -151,14 +123,14 @@ $vertical-padding-item: var(
 
         .dropzone {
             .dropzone__text {
-                margin-left: map.get($tokens, size-l);
+                margin-left: mc-css-variable(size-l);
             }
         }
 
         .btn-upload {
             .dropzone {
                 .dropzone__text {
-                    margin-left: map.get($tokens, size-xs);
+                    margin-left: mc-css-variable(size-xs);
                 }
             }
         }
@@ -176,5 +148,5 @@ $vertical-padding-item: var(
 }
 
 .mc-file-upload__hint {
-    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: mc-css-variable(form-field-hint-size-margin-top);
 }

package/file-upload/single-file-upload.component.scss

@@ -4,39 +4,24 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
 .mc-file-upload {
-    height: var(
-        --mc-file-upload-size-single-height,
-        map.get($tokens, file-upload-size-single-height)
-    );
-    padding-top: var(
-        --mc-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-bottom: var(
-        --mc-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-left: map.get($tokens, size-m);
+    height: mc-css-variable(file-upload-size-single-height);
+    padding-top: mc-css-variable(file-upload-size-single-vertical-padding);
+    padding-bottom: mc-css-variable(file-upload-size-single-vertical-padding);
+    padding-left: mc-css-variable(size-m);
 
-    border-radius: var(
-        --mc-file-upload-size-single-border-radius,
-        map.get($tokens, file-upload-size-single-border-radius)
-    );
-    border-width: var(
-        --mc-file-upload-size-single-border-width,
-        map.get($tokens, file-upload-size-single-border-width));
-    border-style: var(
-        --mc-file-upload-size-single-border-style,
-        map.get($tokens, file-upload-size-single-border-style)
-    );
+    border-radius: mc-css-variable(file-upload-size-single-border-radius);
+    border-width: mc-css-variable(file-upload-size-single-border-width);
+    border-style: mc-css-variable(file-upload-size-single-border-style);
 
     .dropzone {
         .dropzone__text {
-            margin-left: map.get($tokens, size-xs);
+            margin-left: mc-css-variable(size-xs);
         }
     }
 
@@ -49,7 +34,7 @@ $tokens: meta.module-variables(tokens) !default;
             width: 100%;
 
             .file-item__text {
-                margin-left: map.get($tokens, size-s);
+                margin-left: mc-css-variable(size-s);
                 width: 120px;
                 flex-grow: 1;
             }
@@ -62,5 +47,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-file-upload__hint {
-    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: mc-css-variable(form-field-hint-size-margin-top);
 }

package/form-field/_form-field-theme.scss

@@ -3,17 +3,16 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin mc-form-field-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
-    $secondary: map.get($theme, secondary);
     $error: map.get($theme, error);
 
-    $form-field: map.get(map.get($theme, components), form-field);
+    $form-field: map-get($theme, components, form-field);
 
     .mc-form-field {
         & .mc-input {
@@ -21,63 +20,68 @@
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
-                -webkit-box-shadow: 0 0 0 40rem map.get($form-field, state-autofill-background) inset;
-                -webkit-text-fill-color: map.get($foreground, text);
-                caret-color: map-get($foreground, text);
+                -webkit-box-shadow: 0 0 0 40rem mc-css-variable(
+                    form-field-state-autofill-background, map-get($form-field, state-autofill-background)) inset;
+                -webkit-text-fill-color: mc-css-variable(foreground-text, map-get($foreground, text));
+                caret-color: mc-css-variable(foreground-text, map-get($foreground, text));
             }
         }
 
         & .mc-form-field__container {
-            background-color: map.get($form-field, background);
+            background-color: mc-css-variable(form-field-background, map-get($form-field, background));
         }
 
         & .mc-form-field__hint {
-            color: map.get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
 
         &:not(.mc-form-field_without-borders) {
             .mc-form-field__container {
-                border-color: map.get($form-field, border);
+                border-color: mc-css-variable(form-field-border, map-get($form-field, border));
             }
 
             &:hover .mc-form-field__container {
-                border-color: map.get($form-field, state-hover-border);
+                border-color: mc-css-variable(form-field-state-hover-border, map-get($form-field, state-hover-border));
             }
 
             &.ng-invalid {
                 & .mc-form-field__container {
-                    border-color: map.get($form-field, state-invalid-border);
-                    background-color: map.get($form-field, state-invalid-background);
+                    border-color: mc-css-variable(
+                        form-field-state-invalid-border, map-get($form-field, state-invalid-border));
+                    background-color: mc-css-variable(
+                        form-field-state-invalid-background, map-get($form-field, state-invalid-background));
 
                     .mc-input,
                     .mc-textarea {
-                        color: map.get($foreground, text-error);
+                        color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                     }
                 }
             }
 
             &.cdk-focused {
                 &:not(.ng-invalid) .mc-form-field__container {
-                    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: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
+                    box-shadow: 0 0 0 1px mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
                 }
 
                 &.ng-invalid .mc-form-field__container {
-                    box-shadow: 0 0 0 1px mc-color($error);
+                    box-shadow: 0 0 0 1px mc-css-variable(error-default, mc-color($error));
                 }
             }
 
             /* stylelint-disable no-descending-specificity */
             &.mc-disabled .mc-form-field__container {
-                border-color: map.get($form-field, border);
+                border-color: mc-css-variable(form-field-border, map-get($form-field, border));
 
-                background-color: map.get($background, background-disabled);
+                background-color: mc-css-variable(
+                    background-background-disabled, map-get($background, background-disabled));
 
                 .mc-icon,
                 .mc-input,
                 .mc-textarea {
-                    color: map.get($foreground, text-disabled);
-                    -webkit-text-fill-color: map.get($foreground, text-disabled);
+                    color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
+                    -webkit-text-fill-color: mc-css-variable(
+                        foreground-text-disabled, map-get($foreground, text-disabled));
                 }
             }
             /* stylelint-enable no-descending-specificity */
@@ -85,62 +89,67 @@
     }
 
     .mc-hint {
+        $hint: map-get($theme, components, form-field-hint);
+
         &.mc-primary {
-            color: mc-color($primary);
+            color: mc-css-variable(form-field-hint-text-color, map-get($hint, text-color));
         }
 
         &.mc-secondary {
-            color: mc-color($secondary);
+            color: mc-css-variable(form-field-hint-text-color, map-get($hint, text-color));
         }
 
         &.mc-warning {
-            color: map.get($foreground, text-warning);
+            color: mc-css-variable(foreground-text-warning, map-get($foreground, text-warning));
         }
 
         &.mc-error {
-            color: map.get($foreground, text-error);
+            color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
         }
     }
 
     .mc-password-hint {
-        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
+        $password-hint: map-get($theme, components, form-field-password-hint);
 
-        color: map.get($password-hint, text-color);
+        color: mc-css-variable(form-field-password-hint-text-color, map-get($password-hint, text-color));
 
         & .mc-password-hint__icon {
-            color: map.get($password-hint, icon-color);
+            color: mc-css-variable(form-field-password-hint-icon-color, map-get($password-hint, icon-color));
         }
 
         &.mc-password-hint_valid {
-            color: map.get($password-hint, state-valid-text-color);
+            color: mc-css-variable(
+                form-field-password-hint-state-valid-text-color, map-get($password-hint, state-valid-text-color));
 
             & .mc-password-hint__icon {
-                color: map.get($password-hint, state-valid-icon-color);
+                color: mc-css-variable(
+                    form-field-password-hint-state-valid-icon-color, map-get($password-hint, state-valid-icon-color));
             }
         }
 
         &.mc-password-hint_invalid {
-            color: map.get($password-hint, state-invalid-text-color);
+            color: mc-css-variable(
+                form-field-password-hint-state-invalid-text-color, map-get($password-hint, state-invalid-text-color));
 
             & .mc-password-hint__icon {
-                color: map.get($password-hint, state-invalid-icon-color);
+                color: mc-css-variable(
+                    form-field-password-hint-state-invalid-icon-color, map-get($password-hint, state-invalid-icon-color)
+                );
             }
         }
     }
 }
 
 @mixin mc-form-field-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-form-field {
-        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-font-default));
+        @include mc-typography-css-variables(form-field, default);
     }
 
     .mc-form-field__hint, .mc-password-hint {
-        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+        @include mc-typography-css-variables(form-field-hint, default);
     }
 
     .mc-hint {
-        @include mc-typography-level-to-styles($config, caption);
+        @include mc-typography-level-to-styles_css-variables(typography, caption);
     }
 }