@ptsecurity/mosaic 17.2.0 → 17.2.2

package/core/styles/common/_tokens.scss

@@ -6,34 +6,53 @@
 @use '../tokens';
 
 
-$tokens: meta.module-variables(tokens);
+$default-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));
+        @return var(--mc-#{$name}, map.get($default-tokens, $name));
     }
 }
 
 @function getToken($name) {
-    @return map.get($tokens, $name);
+    @return map.get($default-tokens, $name);
 }
 
-@mixin mc-css-font-variable($component, $component-property, $font-property) {
+@mixin mc-css-font-variable($tokens, $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})
+        --mc-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
     );
+    //@debug '_____________________________________________________________';
+    //@debug #{$component}-#{$font}#{$component-property}-#{$font-property};
+    //@debug '_____________________________________________________________';
+    //@debug $tokens;
 }
 
-@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);
+@mixin mc-typography-css-variables($config, $component, $property) {
+    //@debug 'mc-typography-css-variables';
+    $tokens: map.get($config, tokens);
+
+    @include mc-css-font-variable($tokens, $component, $property, font-size, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-weight, font-);
+    @include mc-css-font-variable($tokens, $component, $property, line-height, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-family, font-);
+    @include mc-css-font-variable($tokens, $component, $property, text-transform, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-feature-settings, font-);
+    @include mc-css-font-variable($tokens, $component, $property, letter-spacing, font-);
+}
+
+@mixin mc-typography-level-to-styles_css-variables($config, $component, $property) {
+    $tokens: map.get($config, tokens);
+
+    @include mc-css-font-variable($tokens, $component, $property, font-size, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-weight, '');
+    @include mc-css-font-variable($tokens, $component, $property, line-height, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-family, '');
+    @include mc-css-font-variable($tokens, $component, $property, text-transform, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-feature-settings, '');
+    @include mc-css-font-variable($tokens, $component, $property, letter-spacing, '');
 }

package/core/styles/theming/_alerts.scss

@@ -52,50 +52,50 @@
     }
 }
 
-@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);
     }
 }
 
@@ -128,29 +128,30 @@
 
     &.mc-alert_dismissible {
         padding-right: calc(
-            mc-css-variable(alert-size-right-padding-dismissible) + mc-css-variable(alert-size-horizontal-padding)
+            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)})
         );
     }
 }
 
 @mixin mc-alert-typography($config) {
     .mc-alert:not(.mc-alert_small) {
-        @include mc-typography-css-variables(alert, default-body);
+        @include mc-typography-css-variables($config, alert, default-body);
 
         header {
-            @include mc-typography-css-variables(alert, default-header);
+            @include mc-typography-css-variables($config, alert, default-header);
         }
     }
 
     .mc-alert.mc-alert_small {
-        @include mc-typography-css-variables(alert, small-body);
+        @include mc-typography-css-variables($config, alert, small-body);
 
         header {
-            @include mc-typography-css-variables(alert, small-header);
+            @include mc-typography-css-variables($config, alert, small-header);
         }
 
         .mc-link__text {
-            @include mc-typography-css-variables(alert, small-body);
+            @include mc-typography-css-variables($config, alert, small-body);
         }
     }
 

package/core/styles/theming/_badges.scss

@@ -19,19 +19,21 @@
 }
 
 
-@mixin mc-badge-color($params) {
-    color: map.get($params, color);
-    border-color: map.get($params, border);
-    background: map.get($params, background);
+@mixin mc-badge-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    color: mc-css-variable(badge-#{$style-name}-color, map.get($style, color));
+    border-color: mc-css-variable(badge-#{$style-name}-border, map.get($style, border));
+    background: mc-css-variable(badge-#{$style-name}-background, map.get($style, background));
 }
 
 @mixin mc-badge-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $badge: map.get(map.get($theme, components), badge);
+    $badge: map.get($theme, components, badge);
 
     .mc-badge {
-        color: map.get($foreground, text);
-        border-color: map.get($foreground, border);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
+        border-color: mc-css-variable(foreground-border, map.get($foreground, border));
 
     }
 
@@ -39,57 +41,57 @@
 
     .mc-badge_solid {
         &.mc-badge_primary {
-            @include mc-badge-color(map.get($badge, primary_solid));
+            @include mc-badge-color($badge, solid-primary);
         }
 
         &.mc-badge_second {
-            @include mc-badge-color(map.get($badge, second_solid));
+            @include mc-badge-color($badge, solid-secondary);
         }
 
         &.mc-badge_transparent {
-            @include mc-badge-color(map.get($badge, transparent_solid));
+            @include mc-badge-color($badge, solid-transparent);
         }
 
         &.mc-badge_success {
-            @include mc-badge-color(map.get($badge, success_solid));
+            @include mc-badge-color($badge, solid-success);
         }
 
         &.mc-badge_info {
-            @include mc-badge-color(map.get($badge, info_solid));
+            @include mc-badge-color($badge, solid-info);
         }
 
         &.mc-badge_warning {
-            @include mc-badge-color(map.get($badge, warning_solid));
+            @include mc-badge-color($badge, solid-warning);
         }
 
         &.mc-badge_error {
-            @include mc-badge-color(map.get($badge, error_solid));
+            @include mc-badge-color($badge, solid-error);
         }
 
         &.mc-badge_light {
-            @include mc-badge-color(map.get($badge, light_solid));
+            @include mc-badge-color($badge, solid-light);
         }
     }
 
     .mc-badge_pastel {
         &.mc-badge_primary {
-            @include mc-badge-color(map.get($badge, primary_pastel));
+            @include mc-badge-color($badge, pastel-primary);
         }
 
         &.mc-badge_success {
-            @include mc-badge-color(map.get($badge, success_pastel));
+            @include mc-badge-color($badge, pastel-success);
         }
 
         &.mc-badge_info {
-            @include mc-badge-color(map-get($badge, info_pastel));
+            @include mc-badge-color($badge, pastel-info);
         }
 
         &.mc-badge_warning {
-            @include mc-badge-color(map.get($badge, warning_pastel));
+            @include mc-badge-color($badge, pastel-warning);
         }
 
         &.mc-badge_error {
-            @include mc-badge-color(map.get($badge, error_pastel));
+            @include mc-badge-color($badge, pastel-error);
         }
     }
 }
@@ -97,22 +99,22 @@
 @mixin mc-badges-geometry($tokens) {
     .mc-badge {
         &.mc-badge_default {
-            height: var(--mc-badge-size-default-height, map.get($tokens, badge-size-default-height));
-            min-width: var(--mc-badge-size-default-min-width, map.get($tokens, badge-size-default-min-width));
-            padding: var(--mc-badge-size-default-padding, map.get($tokens, badge-size-default-padding));
+            height: mc-css-variable(badge-size-default-height);
+            min-width: mc-css-variable(badge-size-default-min-width);
+            padding: mc-css-variable(badge-size-default-padding);
             border: {
-                width: var(--mc-badge-size-default-border-width, map.get($tokens, badge-size-default-border-width));
-                radius: var(--mc-badge-size-default-border-radius, map.get($tokens, badge-size-default-border-radius));
+                width: mc-css-variable(badge-size-default-border-width);
+                radius: mc-css-variable(badge-size-default-border-radius);
             }
         }
 
         &.mc-badge_mini {
-            height: var(--mc-badge-size-mini-height, map.get($tokens, badge-size-mini-height));
-            min-width: var(--mc-badge-size-mini-min-width, map.get($tokens, badge-size-mini-min-width));
-            padding: var(--mc-badge-size-mini-padding, map.get($tokens, badge-size-mini-padding));
+            height: mc-css-variable(badge-size-mini-height);
+            min-width: mc-css-variable(badge-size-mini-min-width);
+            padding: mc-css-variable(badge-size-mini-padding);
             border: {
-                width: var(--mc-badge-size-mini-border-width, map.get($tokens, badge-size-mini-border-width));
-                radius: var(--mc-badge-size-mini-border-radius, map.get($tokens, badge-size-mini-border-radius));
+                width: mc-css-variable(badge-size-mini-border-width);
+                radius: mc-css-variable(badge-size-mini-border-radius);
             }
         }
     }
@@ -120,26 +122,26 @@
 
 @mixin mc-badge-typography($config) {
     .mc-badge_default {
-        @include mc-typography-css-variables(badge, default-default);
+        @include mc-typography-css-variables($config, badge, default-default);
 
         &.mc-badge_caps {
-            @include mc-typography-css-variables(badge, default-caps);
+            @include mc-typography-css-variables($config, badge, default-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-css-variables(badge, default-mono);
+            @include mc-typography-css-variables($config, badge, default-mono);
         }
     }
 
     .mc-badge_mini {
-        @include mc-typography-css-variables(badge, mini-default);
+        @include mc-typography-css-variables($config, badge, mini-default);
 
         &.mc-badge_caps {
-            @include mc-typography-css-variables(badge, mini-caps);
+            @include mc-typography-css-variables($config, badge, mini-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-css-variables(badge, mini-mono);
+            @include mc-typography-css-variables($config, badge, mini-mono);
         }
     }
 }

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

@@ -36,67 +36,67 @@
     );
 
     $badge: (
-        primary_solid: (
+        solid-primary: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
         ),
-        second_solid: (
+        solid-secondary: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
         ),
-        light_solid: (
+        solid-light: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
         ),
-        info_solid: (
+        solid-info: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
         ),
-        success_solid: (
+        solid-success: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
         ),
-        warning_solid: (
+        solid-warning: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
         ),
-        error_solid: (
+        solid-error: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
         ),
-        transparent_solid: (
+        solid-transparent: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
             border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
             background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
         ),
-        primary_pastel: (
+        pastel-primary: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
         ),
-        info_pastel: (
+        pastel-info: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
         ),
-        success_pastel: (
+        pastel-success: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
         ),
-        warning_pastel: (
+        pastel-warning: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
         ),
-        error_pastel: (
+        pastel-error: (
             color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
             background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
             border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')

package/core/styles/theming/_scrollbars.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../functions/string' as *;
+@use '../common/tokens' as *;
+
 
 .mc-scrollbar {
     //firefox
@@ -11,54 +13,55 @@
 }
 
 @mixin mc-scrollbar-theme($theme) {
-    $scrollbar: map.get(map.get($theme, components), scrollbar);
+    $scrollbar: map.get($theme, components, scrollbar);
     $thumb: map.get($scrollbar, thumb);
     $arrow: map.get($scrollbar, arrow);
 
     .mc-scrollbar {
-        @include mc-scrollbar-geometry(map.get($theme, tokens));
+        @include mc-scrollbar-geometry();
 
         // firefox
         @supports not selector(::-webkit-scrollbar) {
-            scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+            scrollbar-color: mc-css-variable(thumb-normal, map-get($thumb, normal))
+                mc-css-variable(scrollbar-track, map-get($scrollbar, track));
         }
 
         // webkit
         &::-webkit-scrollbar,
         ::-webkit-scrollbar {
-            background-color: map.get($scrollbar, track);
+            background-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
         }
 
 
         &::-webkit-scrollbar-corner,
         ::-webkit-scrollbar-corner {
-            background-color: map.get($scrollbar, corner-background);
+            background-color: mc-css-variable(scrollbar-corner-background, map.get($scrollbar, corner-background));
         }
 
         &::-webkit-scrollbar-thumb,
         ::-webkit-scrollbar-thumb {
-            background-color: map.get($thumb, normal);
+            background-color: mc-css-variable(thumb-normal, map.get($thumb, normal));
 
-            border-color: map.get($scrollbar, track);
+            border-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
             border-style: solid;
 
             &:hover {
-                background-color: map.get($thumb, hover);
+                background-color: mc-css-variable(thumb-hover, map.get($thumb, hover));
             }
 
             &:disabled {
-                background-color: map.get($thumb, disabled);
+                background-color: mc-css-variable(thumb-disabled, map.get($thumb, disabled));
             }
 
             &:active {
-                background-color: map.get($thumb, active);
+                background-color: mc-css-variable(thumb-active, map.get($thumb, active));
             }
         }
 
         /* stylelint-disable */
         &::-webkit-scrollbar-button,
         ::-webkit-scrollbar-button {
-            background-color: map.get($arrow, background);
+            background-color: mc-css-variable(arrow-background, map.get($arrow, background));
             background-size: 10px 10px;
             background-repeat: no-repeat;
             background-position: center center;
@@ -93,39 +96,33 @@
     }
 }
 
-@mixin mc-scrollbar-geometry($tokens) {
+@mixin mc-scrollbar-geometry() {
     // webkit
     &::-webkit-scrollbar,
     ::-webkit-scrollbar {
         &:vertical {
-            width: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            width: mc-css-variable(scrollbar-size-track-dimension);
         }
 
         &:horizontal {
-            height: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            height: mc-css-variable(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));
-        border-width: var(
-            --mc-scrollbar-size-thumb-inset-border-width,
-            map.get($tokens, scrollbar-size-thumb-border-width)
-        );
-        border-radius: var(
-            --mc-scrollbar-size-thumb-inset-border-radius,
-            map.get($tokens, scrollbar-size-thumb-border-radius)
-        );
+        width: mc-css-variable(scrollbar-size-thumb-width);
+        border-width: mc-css-variable(scrollbar-size-thumb-border-width);
+        border-radius: mc-css-variable(scrollbar-size-thumb-border-radius);
 
         // 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));
+            min-height: mc-css-variable(scrollbar-size-thumb-min-size);
         }
 
         &:horizontal {
-            min-width: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-width: mc-css-variable(scrollbar-size-thumb-min-size);
         }
     }
 
@@ -133,8 +130,8 @@
     ::-webkit-scrollbar-button {
         display: none;
 
-        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
-        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
+        width: mc-css-variable(scrollbar-size-arrow-icon-width);
+        height: mc-css-variable(scrollbar-size-arrow-icon-height);
     }
 }
 

package/core/styles/theming/_theming.scss

@@ -2,9 +2,11 @@
 @use 'sass:meta';
 
 @use 'components-theming' as *;
+@use '../common/tokens' as *;
+
 
 @function mc-contrast($palette, $hue) {
-    @return map.get(map.get($palette, contrast), $hue);
+    @return map.get($palette, contrast, $hue);
 }
 
 @function mc-palette($base-palette, $default) {
@@ -37,8 +39,8 @@
         $background: map.get($theme, background);
         $foreground: map.get($theme, foreground);
 
-        background-color: mc-color($background, background);
-        color: mc-color($foreground, text);
+        background-color: mc-css-variable(background-background, map.get($background, background));
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
     }
 
     .mc-theme-loaded-marker {
@@ -46,23 +48,23 @@
     }
 
     .mc-primary {
-        color: mc-color(map.get($theme, primary));
+        color: mc-css-variable(primary-default, map.get($theme, primary, default));
     }
 
     .mc-error {
-        color: mc-color(map.get($theme, error));
+        color: mc-css-variable(error-default, map.get($theme, error, default));
     }
 
     .mc-warning {
-        color: mc-color(map.get($theme, warning));
+        color: mc-css-variable(warning-default, map.get($theme, warning, default));
     }
 
     .mc-success {
-        color: mc-color(map.get($theme, success));
+        color: mc-css-variable(success-default, map.get($theme, success, default));
     }
 
     .mc-info {
-        color: mc-color(map.get($theme, info));
+        color: mc-css-variable(info-default, map.get($theme, info, default));
     }
 }
 

package/core/styles/typography/_typography-utils.scss

@@ -24,7 +24,7 @@
 }
 
 @function _mc-get-type-value($config, $level, $name) {
-    @return map.get(map.get($config, $level), $name);
+    @return map.get($config, $level, $name);
 }
 
 @function mc-font-size($config, $level) {