@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/card/_card-theme.nvl.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+
+@mixin nvl-card-type($card) {
+    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);
+
+    background-color: map.get($card, background);
+
+    border-left-color: map.get($card, vertical-line);
+}
+
+@mixin nvl-mc-card-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $card: map.get(map.get($theme, components), card);
+    $popup: map.get(map.get($theme, components), popup);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-card {
+        color: map.get($foreground, text);
+
+        &.mc-card_error {
+            @include nvl-card-type(map.get($card, error));
+        }
+
+        &.mc-card_warning {
+            @include nvl-card-type(map.get($card, warning));
+        }
+
+        &.mc-card_success {
+            @include nvl-card-type(map.get($card, success));
+        }
+
+        &.mc-card_info {
+            @include nvl-card-type(map.get($card, info));
+        }
+
+        &.mc-card_white {
+            background-color: map.get($popup, background);
+        }
+
+        &.mc-selected {
+            background-color: map.get(map.get($theme, states), selected-color);
+        }
+
+        &:not(.mc-card_readonly):hover {
+            .mc-card__overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow: 0 0 0 2px map.get(map.get($theme, states), focused-color);
+        }
+    }
+}

package/checkbox/_checkbox-theme.nvl.scss

@@ -0,0 +1,120 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+/* stylelint-disable no-descending-specificity */
+@mixin nvl-mc-checkbox-state($state) {
+    .mc-checkbox__frame {
+        border-color: map.get($state, border);
+
+        background-color: map.get($state, background);
+    }
+}
+
+@mixin nvl-mc-checkbox-color($checkbox) {
+    $default: map.get($checkbox, default);
+    @include nvl-mc-checkbox-state($default);
+
+    .mc-checkbox__frame {
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map.get($default, color);
+        }
+    }
+
+    &:hover,
+    &.mc-hover {
+        @include nvl-mc-checkbox-state(map.get($checkbox, hover));
+    }
+
+    &.mc-checked,
+    &.mc-indeterminate {
+        @include nvl-mc-checkbox-state(map.get($checkbox, checked));
+    }
+
+    &.mc-checked:not(.mc-disabled),
+    &.mc-indeterminate:not(.mc-disabled) {
+        &:hover,
+        &.mc-hover {
+            @include nvl-mc-checkbox-state(map.get($checkbox, checked-hover));
+        }
+
+        & .mc-checkbox-input.cdk-keyboard-focused {
+            + .mc-checkbox__frame {
+                $checked-focused: map.get($checkbox, checked-focused);
+
+                border-color: map.get($checked-focused, border);
+                background-color: map.get($checked-focused, background);
+                outline: map.get($checked-focused, outline);
+            }
+        }
+    }
+
+    & .mc-checkbox-input.cdk-keyboard-focused {
+        + .mc-checkbox__frame {
+            $focused: map.get($checkbox, focused);
+
+            border-color: map.get($focused, border);
+            background-color: map.get($focused, background);
+            outline: map.get($focused, outline);
+        }
+    }
+
+    &.mc-disabled {
+        $disabled: map.get($checkbox, disabled);
+
+        .mc-checkbox__frame {
+            border-color: map.get($disabled, border);
+            background-color: map.get($disabled, background);
+
+            & .mc-checkbox-checkmark,
+            & .mc-checkbox-mixedmark {
+                color: map.get($disabled, color);
+            }
+        }
+    }
+}
+/* stylelint-enable no-descending-specificity */
+
+@mixin nvl-mc-checkbox-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $checkbox: map.get(map.get($theme, components), checkbox);
+
+    $checkbox-theme: map.get($checkbox, theme);
+    $checkbox-error: map.get($checkbox, error);
+
+    .mc-checkbox {
+        color: map.get($foreground, contrast);
+
+        @include nvl-mc-checkbox-color($checkbox-theme);
+
+        &.mc-error {
+            color: map.get($foreground, contrast);
+
+            @include nvl-mc-checkbox-color($checkbox-error);
+        }
+    }
+}
+
+@mixin nvl-mc-checkbox-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-checkbox {
+        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
+
+        & .mc-hint {
+            @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
+        }
+    }
+
+    .mc-checkbox.mc-checkbox_big {
+        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
+
+        & .mc-hint {
+            @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
+        }
+    }
+}

package/checkbox/_checkbox-theme.scss

@@ -10,7 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 /* stylelint-disable no-descending-specificity */
 @mixin mc-checkbox-color($states) {
-    & .mc-checkbox-frame {
+    & .mc-checkbox__frame {
         background-color: map.get($states, background);
 
         border-color: map.get($states, border);
@@ -23,14 +23,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.mc-checked,
     &.mc-indeterminate {
-        & .mc-checkbox-frame {
+        & .mc-checkbox__frame {
             border-color: map.get($states, checked, border);
 
             background: map.get($states, checked, background);
         }
 
         & .mc-checkbox-input.cdk-keyboard-focused {
-            + .mc-checkbox-frame {
+            + .mc-checkbox__frame {
                 border-color: map.get($states, checked-focused, border);
 
                 box-shadow: map.get($states, checked-focused, shadow);
@@ -45,7 +45,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .mc-checkbox-input.cdk-keyboard-focused {
-        + .mc-checkbox-frame {
+        + .mc-checkbox__frame {
             border-color: map.get($states, focused, border);
 
             box-shadow: map.get($states, focused, shadow);
@@ -62,7 +62,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     .mc-checkbox {
         &:not(.mc-disabled) {
-            .mc-checkbox-overlay:hover {
+            .mc-checkbox__overlay:hover {
                 background-color: map.get($background, overlay-hover);
             }
         }
@@ -84,7 +84,7 @@ $tokens: meta.module-variables(tokens) !default;
         &.mc-error.mc-disabled {
             color: map.get($foreground, text-disabled);
 
-            .mc-checkbox-frame {
+            .mc-checkbox__frame {
                 border-color: map.get($foreground, border);
 
                 background-color: map.get($background, background-disabled);
@@ -100,6 +100,6 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-checkbox-typography($config) {
     .mc-checkbox {
-        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-default));
+        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
     }
 }

package/checkbox/checkbox.d.ts

@@ -49,6 +49,7 @@ export declare class McCheckbox extends McCheckboxMixinBase implements ControlVa
     private changeDetectorRef;
     private focusMonitor;
     private clickAction;
+    big: boolean;
     /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
     id: string;
     /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
@@ -128,5 +129,5 @@ export declare class McCheckbox extends McCheckboxMixinBase implements ControlVa
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCheckbox, "mc-checkbox", ["mcCheckbox"], { "color": "color"; "tabIndex": "tabIndex"; "id": "id"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "required": "required"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "mc-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCheckbox, "mc-checkbox", ["mcCheckbox"], { "color": "color"; "tabIndex": "tabIndex"; "big": "big"; "id": "id"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "required": "required"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "mc-hint"], false, never>;
 }

package/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../core/styles/common/visually-hidden';
 @use '../core/styles/common/layout';
 @use '../core/styles/variables';
 
@@ -9,15 +10,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
-// that contains the border and the actual background element that contains the marks.
-%mc-checkbox-outer-box {
-    @include layout.mc-fill;
-
-    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
-    box-sizing: border-box;
-    pointer-events: none;
-}
 
 .mc-checkbox-checkmark,
 .mc-checkbox-mixedmark {
@@ -31,15 +23,50 @@ $tokens: meta.module-variables(tokens) !default;
     bottom: 0;
 }
 
-.mc-checkbox-frame {
-    @extend %mc-checkbox-outer-box;
+.mc-checkbox__frame {
+    @include layout.mc-fill;
 
+    box-sizing: border-box;
+    pointer-events: none;
     background-color: transparent;
+
+    border-radius: var(--mc-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+
     border: {
-        width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));
+        width: var(--mc-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
         style: solid;
     }
-    box-shadow: var(--mc-checkbox-size-toggle-box-shadow, map.get($tokens, checkbox-size-toggle-box-shadow));
+}
+
+.mc-checkbox__layout {
+    position: relative;
+
+    display: inline-flex;
+
+    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mc-checkbox
+    // (e.g. pointer by default, regular when disabled), instead of the browser default.
+    cursor: inherit;
+
+    padding-left: calc(
+        var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+        var(
+            --mc-checkbox-size-normal-horizontal-content-padding,
+            map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+        )
+    );
+
+    vertical-align: top;
+}
+
+.mc-checkbox__inner-container {
+    display: inline-block;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
 }
 
 .mc-checkbox {
@@ -71,73 +98,79 @@ $tokens: meta.module-variables(tokens) !default;
     &.mc-disabled {
         cursor: default;
 
-        .mc-checkbox-frame {
+        .mc-checkbox__frame {
             box-shadow: none;
         }
     }
-}
 
-.mc-checkbox-layout {
-    position: relative;
-
-    display: inline-flex;
-
-    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mc-checkbox
-    // (e.g. pointer by default, regular when disabled), instead of the browser default.
-    cursor: inherit;
-
-    padding-left: calc(
-        var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width)) +
-        var(--mc-checkbox-size-label-margin, map.get($tokens, checkbox-size-label-margin))
-    );
-
-    vertical-align: top;
+    & .mc-hint {
+        margin-top: var(
+            --mc-checkbox-size-normal-vertical-content-padding,
+            map.get($tokens, checkbox-size-normal-vertical-content-padding)
+        );
+    }
 }
 
-.mc-checkbox-inner-container {
-    display: inline-block;
+.mc-checkbox.mc-checkbox_big {
+    & .mc-checkbox__layout {
+        padding-left: calc(
+            var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(
+                --mc-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
+        );
+    }
 
-    position: absolute;
-    top: 2px;
-    left: 0;
+    & .mc-checkbox__inner-container {
+        top: 2px;
+        height: var(--mc-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+        width: var(--mc-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    }
 
-    height: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
-    width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
-}
+    & .mc-checkbox__frame {
+        border-radius: var(--mc-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
 
-.mc-checkbox-overlay {
-    @include layout.mc-fill;
+        border: {
+            width: var(--mc-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+            style: solid;
+        }
+    }
 
-    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
-    background: transparent;
+    & .mc-hint {
+        margin-top: var(
+            --mc-checkbox-size-big-vertical-content-padding,
+            map.get($tokens, checkbox-size-big-vertical-content-padding)
+        );
+    }
 }
 
 .mc-checkbox__text-container {
     display: flex;
     flex-direction: column;
-
-    & .mc-hint {
-        margin-top: 2px;
-    }
 }
 
-.mc-checkbox-inner-container-no-side-margin {
+.mc-checkbox__inner-container_no-side-margin {
     margin: {
         left: 0;
         right: 0;
     }
 }
 
-.mc-checkbox-label-before {
-    .mc-checkbox-layout {
+/* stylelint-disable no-descending-specificity */
+.mc-checkbox_label-before {
+    .mc-checkbox__layout {
         padding-left: 0;
         padding-right: calc(
-            var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width)) +
-            var(--mc-checkbox-size-label-margin, map.get($tokens, checkbox-size-label-margin))
+            var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(
+                --mc-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
         );
     }
 
-    .mc-checkbox-inner-container {
+    .mc-checkbox__inner-container {
         right: 0;
         left: unset;
     }