@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/core/styles/_mosaic-theme.nvl.scss

@@ -0,0 +1,153 @@
+@use 'sass:map';
+
+@use 'theming/theming.nvl' as *;
+@use 'typography/typography' as *;
+
+@use 'theming/badges-theme.nvl' as *;
+@use 'theming/scrollbars-theme.nvl' as *;
+
+@use '../selection/pseudo-checkbox/pseudo-checkbox-theme.nvl' as *;
+@use '../../alert/alert-theme' as *;
+@use '../../autocomplete/autocomplete-theme.nvl' as *;
+@use '../../button/button-theme.nvl' as *;
+@use '../../card/card-theme.nvl' as *;
+@use '../../checkbox/checkbox-theme.nvl' as *;
+@use '../../code-block/code-block-theme.nvl' as *;
+@use '../../datepicker/datepicker-theme.nvl' as *;
+@use '../../divider/divider-theme.nvl' as *;
+@use '../../dropdown/dropdown-theme.nvl' as *;
+@use '../../form-field/form-field-theme.nvl' as *;
+@use '../../form-field/hint-theme.nvl' as *;
+@use '../../icon/icon-theme.nvl' as *;
+@use '../../input/input-theme.nvl' as *;
+@use '../../link/link-theme.nvl' as *;
+@use '../../list/list-theme.nvl' as *;
+@use '../../loader-overlay/loader-overlay-theme.nvl' as *;
+@use '../../modal/modal-theme.nvl' as *;
+@use '../../markdown/markdown-theme.nvl' as *;
+@use '../../navbar/navbar-theme.nvl' as *;
+@use '../../popover/popover-theme.nvl' as *;
+@use '../../progress-bar/progress-bar-theme.nvl' as *;
+@use '../../progress-spinner/progress-spinner-theme.nvl' as *;
+@use '../../radio/radio-theme.nvl' as *;
+@use '../../select/select-theme.nvl' as *;
+@use '../../sidepanel/sidepanel-theme.nvl' as *;
+@use '../../splitter/splitter-theme.nvl' as *;
+@use '../../tabs/tabs-theme.nvl' as *;
+@use '../../tags/tag-theme.nvl' as *;
+@use '../../textarea/textarea-theme.nvl' as *;
+@use '../../timezone/timezone-option-theme.nvl' as *;
+@use '../../toast/toast-theme.nvl' as *;
+@use '../../toggle/toggle-theme.nvl' as *;
+@use '../../tooltip/tooltip-theme.nvl' as *;
+@use '../../tree-select/tree-select-theme.nvl' as *;
+@use '../../tree/tree-theme.nvl' as *;
+@use '../../table/table-theme.nvl' as *;
+@use '../forms/forms-theme.nvl' as *;
+@use '../option/option-theme.nvl' as *;
+@use '../option/optgroup-theme.nvl' as *;
+@use '../option/option-action-theme.nvl' as *;
+@use '../highlight/highlight-theme.nvl' as *;
+@use '../../dl/dl-theme.nvl' as *;
+
+
+@mixin nvl-mosaic-theme($theme) {
+    @include nvl-mc-core-theme($theme);
+
+    @include nvl-mc-alert-theme($theme);
+    @include nvl-mc-autocomplete-theme($theme);
+    @include nvl-mc-badge-theme($theme);
+    @include nvl-mc-button-theme($theme);
+    @include nvl-mc-card-theme($theme);
+    @include nvl-mc-checkbox-theme($theme);
+    @include nvl-mc-code-block-theme($theme);
+    @include nvl-mc-datepicker-theme($theme);
+    @include nvl-mc-dl-theme($theme);
+    @include nvl-mc-divider-theme($theme);
+    @include nvl-mc-dropdown-theme($theme);
+    @include nvl-mc-form-field-theme($theme);
+    @include nvl-hint-theme($theme);
+    @include nvl-mc-forms-theme($theme);
+    @include nvl-mc-highlight-theme($theme);
+    @include nvl-mc-icon-theme($theme);
+    @include nvl-mc-icon-item-theme($theme);
+    @include nvl-mc-icon-button-theme($theme);
+    @include nvl-mc-input-theme($theme);
+    @include nvl-mc-link-theme($theme);
+    @include nvl-mc-list-theme($theme);
+    @include nvl-mc-loader-overlay-theme($theme);
+    @include nvl-mc-modal-theme($theme);
+    @include nvl-mc-markdown-theme($theme);
+    @include nvl-mc-navbar-theme($theme);
+    @include nvl-mc-option-theme($theme);
+    @include nvl-mc-optgroup-theme($theme);
+    @include nvl-mc-option-action-theme($theme);
+    @include nvl-mc-popover-theme($theme);
+    @include nvl-mc-progress-bar-theme($theme);
+    @include nvl-mc-progress-spinner-theme($theme);
+    @include nvl-mc-pseudo-checkbox-theme($theme);
+    @include nvl-mc-radio-theme($theme);
+    @include nvl-mc-scrollbar-theme($theme);
+    @include nvl-mc-select-theme($theme);
+    @include nvl-mc-sidepanel-theme($theme);
+    @include nvl-mc-splitter-theme($theme);
+    @include nvl-mc-tabs-theme($theme);
+    @include nvl-mc-tag-theme($theme);
+    @include nvl-mc-textarea-theme($theme);
+    @include nvl-mc-timezone-option-theme($theme);
+    @include nvl-mc-toast-theme($theme);
+    @include nvl-mc-toggle-theme($theme);
+    @include nvl-mc-tooltip-theme($theme);
+    @include nvl-mc-tree-select-theme($theme);
+    @include nvl-mc-tree-theme($theme);
+    @include nvl-mc-table-theme($theme);
+}
+
+@mixin nvl-mosaic-typography($tokens, $config: null, $md-config: null) {
+    @if $config == null {
+        $config: mc-typography-config($tokens);
+    }
+
+    @if $md-config == null {
+        $md-config: mc-markdown-typography-config($tokens);
+    }
+
+    @include mc-base-typography($config);
+    @include mc-markdown-base-typography($md-config);
+
+    @include nvl-mc-alert-typography($config);
+    @include nvl-mc-badge-typography($config);
+    @include nvl-mc-button-typography($config);
+    @include nvl-mc-checkbox-typography($config);
+    @include nvl-mc-code-block-typography($config);
+    @include nvl-mc-datepicker-typography($config);
+    @include nvl-mc-dropdown-typography($config);
+    @include nvl-mc-dl-typography($config);
+    @include nvl-mc-form-field-typography($config);
+    @include nvl-hint-typography($config);
+    @include nvl-mc-forms-typography($config);
+    @include nvl-mc-input-typography($config);
+    @include nvl-mc-link-typography($config);
+    @include nvl-mc-list-typography($config);
+    @include nvl-mc-loader-overlay-typography($config);
+    @include nvl-mc-modal-typography($config);
+    @include nvl-mc-navbar-typography($config);
+    @include nvl-mc-option-typography($config);
+    @include nvl-mc-optgroup-typography($config);
+    @include nvl-mc-popover-typography($config);
+    @include nvl-mc-radio-typography($config);
+    @include nvl-mc-select-typography($config);
+    @include nvl-mc-sidepanel-typography($config);
+    @include nvl-mc-tabs-typography($config);
+    @include nvl-mc-tag-typography($config);
+    @include nvl-mc-textarea-typography($config);
+    @include nvl-mc-timezone-option-typography($config);
+    @include nvl-mc-toast-typography($config);
+    @include nvl-mc-toggle-typography($config);
+    @include nvl-mc-tooltip-typography($config);
+    @include nvl-mc-tree-select-typography($config);
+    @include nvl-mc-tree-typography($config);
+    @include nvl-mc-table-typography($config);
+
+    @include nvl-mc-markdown-typography($md-config);
+}

package/core/styles/_mosaic-theme.scss

@@ -2,12 +2,13 @@
 @use 'typography/typography' as *;
 
 @use 'theming/badges' as *;
-@use 'theming/alerts' as *;
 @use 'theming/scrollbars' as *;
 
 @use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
+@use '../../alert/alert-theme' as *;
 @use '../../autocomplete/autocomplete-theme' as *;
 @use '../../button/button-theme' as *;
+@use '../../button-toggle/button-toggle-theme' as *;
 @use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
@@ -46,6 +47,7 @@
 @use '../option/option-action-theme' as *;
 @use '../highlight/highlight-theme' as *;
 @use '../../dl/dl-theme' as *;
+@use '../../file-upload/file-upload-theme' as *;
 
 
 @mixin mosaic-theme($theme) {
@@ -55,6 +57,7 @@
     @include mc-autocomplete-theme($theme);
     @include mc-badge-theme($theme);
     @include mc-button-theme($theme);
+    @include mc-button-toggle-theme($theme);
     @include mc-card-theme($theme);
     @include mc-checkbox-theme($theme);
     @include mc-code-block-theme($theme);
@@ -95,9 +98,9 @@
     @include mc-tree-select-theme($theme);
     @include mc-tree-theme($theme);
     @include mc-table-theme($theme);
+    @include mc-file-upload-theme($theme);
 }
 
-
 @mixin mosaic-typography($config: null, $md-config: null) {
     @if $config == null {
         $config: mc-typography-config();
@@ -113,6 +116,7 @@
     @include mc-alert-typography($config);
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
+    @include mc-button-toggle-typography($config);
     @include mc-checkbox-typography($config);
     @include mc-code-block-typography($config);
     @include mc-datepicker-typography($config);
@@ -142,6 +146,7 @@
     @include mc-tree-select-typography($config);
     @include mc-tree-typography($config);
     @include mc-table-typography($config);
+    @include mc-file-upload-typography($config);
 
     @include mc-markdown-typography($md-config);
 }

package/core/styles/_tokens.scss

@@ -1,6 +1,6 @@
 @use 'sass:color' as *;
 
-@forward '@mosaic-design/tokens-fe-2022/web/variables';
-@forward '@mosaic-design/tokens-fe-2022/web/palette';
-@forward '@mosaic-design/tokens-fe-2022/web/typography';
-@forward '@mosaic-design/tokens-fe-2022/web/md-typography';
+@forward '@mosaic-design/tokens-nvl/web/variables';
+@forward '@mosaic-design/tokens-nvl/web/palette';
+@forward '@mosaic-design/tokens-nvl/web/typography';
+@forward '@mosaic-design/tokens-nvl/web/md-typography';

package/core/styles/theming/_badges-theme.nvl.scss

@@ -0,0 +1,118 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'badges.nvl' as badge;
+@use '../typography/typography-utils' as *;
+
+
+@mixin nvl-mc-badge-filled-color($badge) {
+    color: map.get($badge, color);
+    background: map.get($badge, background);
+    border: transparent;
+
+    & .mc-badge-caption {
+        color: map.get($badge, caption);
+    }
+}
+
+@mixin nvl-mc-badge-outline-color($badge) {
+    color: map.get($badge, color);
+    border-color: map.get($badge, border);
+    background: map.get($badge, background);
+
+    & .mc-badge-caption {
+        color: map.get($badge, caption);
+    }
+}
+
+@mixin nvl-mc-badge-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $badge: map.get(map.get($theme, components), badge);
+
+    $filled: map.get($badge, filled);
+    $outline: map.get($badge, outline);
+
+    @include badge.nvl-mc-badge(map.get($theme, tokens));
+
+    .mc-badge-filled {
+        $fade-on: map.get($filled, fade-on);
+
+        &.mc-badge_fade-contrast {
+            @include nvl-mc-badge-filled-color(map.get($fade-on, contrast));
+        }
+
+        &.mc-badge_fade-theme {
+            @include nvl-mc-badge-filled-color(map.get($fade-on, theme));
+        }
+
+        &.mc-badge_fade-success {
+            @include nvl-mc-badge-filled-color(map.get($fade-on, success));
+        }
+
+        &.mc-badge_fade-warning {
+            @include nvl-mc-badge-filled-color(map.get($fade-on, warning));
+        }
+
+        &.mc-badge_fade-error {
+            @include nvl-mc-badge-filled-color(map.get($fade-on, error));
+        }
+
+        $fade-off: map.get($filled, fade-off);
+
+        &.mc-badge_success {
+            @include nvl-mc-badge-filled-color(map.get($fade-off, success));
+        }
+
+        &.mc-badge_warning {
+            @include nvl-mc-badge-filled-color(map.get($fade-off, warning));
+        }
+
+        &.mc-badge_error {
+            @include nvl-mc-badge-filled-color(map.get($fade-off, error));
+        }
+    }
+
+    .mc-badge-outline {
+        $fade-on: map.get($outline, fade-on);
+
+        &.mc-badge_fade-contrast {
+            @include nvl-mc-badge-outline-color(map.get($fade-on, contrast));
+        }
+
+        &.mc-badge_fade-theme {
+            @include nvl-mc-badge-outline-color(map.get($fade-on, theme));
+        }
+
+        &.mc-badge_fade-success {
+            @include nvl-mc-badge-outline-color(map.get($fade-on, success));
+        }
+
+        &.mc-badge_fade-warning {
+            @include nvl-mc-badge-outline-color(map.get($fade-on, warning));
+        }
+
+        &.mc-badge_fade-error {
+            @include nvl-mc-badge-outline-color(map.get($fade-on, error));
+        }
+    }
+}
+
+@mixin nvl-mc-badge-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-badge {
+        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-normal-default));
+
+        & .mc-badge-caption {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-normal-caption));
+        }
+    }
+
+    .mc-badge_compact {
+        @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-compact-default));
+
+        & .mc-badge-caption {
+            @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-compact-caption));
+        }
+    }
+}

package/core/styles/theming/_badges.nvl.scss

@@ -0,0 +1,57 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+//@use '../tokens.nvl.import' as tokens;
+
+//$tokens: meta.module-variables(tokens) !default;
+
+
+@mixin nvl-mc-badge($tokens) {
+    .mc-badge-filled,
+    .mc-badge-outline {
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        text-align: center;
+        white-space: nowrap;
+
+        border-style: solid;
+
+        box-sizing: border-box;
+
+        padding:
+            var(--mc-badge-size-normal-vertical-padding, map.get($tokens, badge-size-normal-vertical-padding))
+            var(--mc-badge-size-normal-horizontal-padding, map.get($tokens, badge-size-normal-horizontal-padding));
+
+        border: {
+            width: var(--mc-badge-size-normal-border-width, map.get($tokens, badge-size-normal-border-width));
+            radius: var(--mc-badge-size-normal-border-radius, map.get($tokens, badge-size-normal-border-radius));
+        }
+
+        & .mc-badge-caption {
+            padding-left:
+                var(--mc-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
+        }
+
+        &.mc-badge_compact {
+            padding:
+                var(--mc-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
+                var(
+                    --mc-badge-size-compact-horizontal-padding,
+                    map.get($tokens, badge-size-compact-horizontal-padding)
+                );
+
+            border: {
+                width: var(--mc-badge-size-compact-border-width, map.get($tokens, badge-size-compact-border-width));
+                radius: var(--mc-badge-size-compact-border-radius, map.get($tokens, badge-size-compact-border-radius));
+            }
+
+            & .mc-badge-caption {
+                padding-left:
+                    var(--mc-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
+            }
+        }
+    }
+}