@ptsecurity/mosaic 17.1.0 → 17.2.0

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;
 }