@ptsecurity/mosaic 17.0.0 → 17.2.0

package/card/_card-theme.scss

@@ -1,61 +1,64 @@
 @use 'sass:map';
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin card-type($card) {
+@mixin card-style($component, $style-name) {
+    $style: map-get($component, $style-name);
+
     box-shadow:
-        inset -1px 0 0 0 map.get($card, shadow),
-        inset 0 1px 0 0 map.get($card, shadow),
-        inset 0 -1px 0 0 map.get($card, shadow);
+        inset -1px 0 0 0 mc-css-variable(card-#{$style-name}-shadow, map-get($style, shadow)),
+        inset 0 1px 0 0 mc-css-variable(card-#{$style-name}-shadow, map-get($style, shadow)),
+        inset 0 -1px 0 0 mc-css-variable(card-#{$style-name}-shadow, map-get($style, shadow));
 
-    background-color: map.get($card, background);
+    background-color: mc-css-variable(card-#{$style-name}-background, map-get($style, background));
 
-    border-left-color: map.get($card, vertical-line);
+    border-left-color: mc-css-variable(card-#{$style-name}-vertical-line, map-get($style, vertical-line));
 }
 
 @mixin mc-card-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+    $theme-states: map-get($theme, states);
 
-    $card: map.get(map.get($theme, components), card);
-    $popup: map.get(map.get($theme, components), popup);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
-    $is-dark: map.get($theme, is-dark);
+    $card: map-get(map-get($theme, components), card);
+    $popup: map-get(map-get($theme, components), popup);
 
     .mc-card {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         &.mc-card_error {
-            @include card-type(map.get($card, error));
+            @include card-style($card, error);
         }
 
         &.mc-card_warning {
-            @include card-type(map.get($card, warning));
+            @include card-style($card, warning);
         }
 
         &.mc-card_success {
-            @include card-type(map.get($card, success));
+            @include card-style($card, success);
         }
 
         &.mc-card_info {
-            @include card-type(map.get($card, info));
+            @include card-style($card, info);
         }
 
         &.mc-card_white {
-            background-color: map.get($popup, background);
+            background-color: mc-css-variable(popup-background, map-get($popup, background));
         }
 
         &.mc-selected {
-            background-color: map.get(map.get($theme, states), selected-color);
+            background-color: mc-css-variable(states-selected-color, map-get($theme-states, selected-color));
         }
 
         &:not(.mc-card_readonly):hover {
             .mc-card__overlay {
-                background: map.get($background, overlay-hover);
+                background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
             }
         }
 
         &.cdk-keyboard-focused {
-            box-shadow: 0 0 0 2px map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0 2px mc-css-variable(states-focused-color, map-get($theme-states, focused-color));
         }
     }
 }

package/card/card.component.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/layout';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -22,7 +23,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     border-left: {
-        width: var(--mc-card-size-vertical-line, map.get($tokens, card-size-vertical-line));
+        width: mc-css-variable(card-size-vertical-line);
         style: solid;
         color: transparent;
     };

package/checkbox/_checkbox-theme.scss

@@ -1,38 +1,42 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 /* stylelint-disable no-descending-specificity */
-@mixin mc-checkbox-color($states) {
+@mixin mc-checkbox-color($component, $style-name) {
+    $style: map-get($component, default);
+
     & .mc-checkbox-frame {
-        background-color: map.get($states, background);
+        background-color: mc-css-variable(checkbox-#{$style-name}-background, map-get($style, background));
 
-        border-color: map.get($states, border);
+        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 {
         & .mc-checkbox-frame {
-            border-color: map.get($states, checked, border);
+            border-color: mc-css-variable(checkbox-#{$style-name}-border, map-get($style, checked, border));
 
-            background: map.get($states, checked, background);
+            background: mc-css-variable(checkbox-#{$style-name}-background, map-get($style, checked, background));
         }
 
         & .mc-checkbox-input.cdk-keyboard-focused {
             + .mc-checkbox-frame {
-                border-color: map.get($states, checked-focused, border);
+                border-color: mc-css-variable(checkbox-#{$style-name}-border, map-get($style, checked-focused, border));
 
-                box-shadow: map.get($states, checked-focused, shadow);
+                box-shadow: mc-css-variable(checkbox-#{$style-name}-shadow, map-get($style, checked-focused, shadow));
 
-                background: map.get($states, checked-focused, background);
+                background: mc-css-variable(
+                    checkbox-#{$style-name}-background, map-get($style, checked-focused, background));
 
-                outline: map.get($states, checked-focused, outline);
+                outline: mc-css-variable(checkbox-#{$style-name}-outline, map-get($style, checked-focused, outline));
 
                 outline-offset: -2px;
             }
@@ -41,56 +45,58 @@
 
     & .mc-checkbox-input.cdk-keyboard-focused {
         + .mc-checkbox-frame {
-            border-color: map.get($states, focused, border);
+            border-color: mc-css-variable(checkbox-#{$style-name}-border, map-get($style, focused, border));
 
-            box-shadow: map.get($states, focused, shadow);
+            box-shadow: mc-css-variable(checkbox-#{$style-name}-shadow, map-get($style, focused, shadow));
         }
     }
 }
 /* stylelint-enable no-descending-specificity */
 
 @mixin mc-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map-get(map-get($theme, components), checkbox);
 
     .mc-checkbox {
         &:not(.mc-disabled) {
             .mc-checkbox-overlay:hover {
-                background-color: map.get($background, overlay-hover);
+                background-color: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
             }
         }
 
         & .mc-hint {
-            color: map-get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
 
         &.mc-primary {
-            @include mc-checkbox-color(map.get($checkbox, default));
+            @include mc-checkbox-color($checkbox, default);
 
-            color: map-get($foreground, text) !important;
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
         }
 
         &.mc-error {
-            @include mc-checkbox-color(map.get($checkbox, error));
+            @include mc-checkbox-color($checkbox, error);
 
-            color: map-get($foreground, text) !important;
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
         }
 
         &.mc-disabled,
         &.mc-primary.mc-disabled,
         &.mc-error.mc-disabled {
-            color: map.get($foreground, text-disabled) !important;
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
             .mc-checkbox-frame {
-                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));
                 }
             }
         }
@@ -98,9 +104,7 @@
 }
 
 @mixin mc-checkbox-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-checkbox {
-        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-default));
+        @include mc-typography-css-variables(checkbox, default);
     }
 }

package/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 @use '../core/styles/variables';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -14,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
 %mc-checkbox-outer-box {
     @include layout.mc-fill;
 
-    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
+    border-radius: mc-css-variable(checkbox-size-border-radius);
     box-sizing: border-box;
     pointer-events: none;
 }
@@ -33,10 +34,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     background-color: transparent;
     border: {
-        width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));
+        width: mc-css-variable(checkbox-size-border-width);
         style: solid;
     }
-    box-shadow: var(--mc-checkbox-size-toggle-box-shadow, map.get($tokens, checkbox-size-toggle-box-shadow));
+    box-shadow: mc-css-variable(checkbox-size-toggle-box-shadow);
 }
 
 .mc-checkbox {
@@ -98,14 +99,14 @@ $tokens: meta.module-variables(tokens) !default;
     top: 2px;
     left: 0;
 
-    height: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
-    width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+    height: mc-css-variable(checkbox-size-width);
+    width: mc-css-variable(checkbox-size-width);
 }
 
 .mc-checkbox-overlay {
     @include layout.mc-fill;
 
-    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
+    border-radius: mc-css-variable(checkbox-size-border-radius);
     background: transparent;
 }