@ptsecurity/mosaic 11.4.4 → 11.6.0

package/_theming.scss

@@ -96,7 +96,7 @@
 
 
 // Do not edit directly
-// Generated on Thu, 07 Oct 2021 08:29:06 GMT
+// Generated on Thu, 21 Oct 2021 09:01:01 GMT
 
 $light-color-scheme-primary-default: #338FCC;
 $light-color-scheme-second-default: #B3B3B3;
@@ -312,12 +312,106 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-min-width: 10px;
-$badge-size-padding: 4px 8px;
-$badge-size-border-width: 1px;
-$badge-size-border-radius: 4px;
-$badge-font-default: caption;
-$badge-font-caps: caption-caps;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-default-height: 24px;
+$badge-size-default-font-default: caption;
+$badge-size-default-font-caps: caption-caps;
+$badge-size-default-font-mono: caption-mono;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-size-mini-font-default: extra-small-text;
+$badge-size-mini-font-caps: extra-small-text-caps;
+$badge-size-mini-font-mono: extra-small-text-mono;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$badge-font-mini-default: extra-small-text;
+$badge-font-mini-caps: extra-small-text-caps;
+$badge-font-mini-mono: extra-small-text-mono;
+$badge-light-color-scheme-solid-primary-background: #338FCC;
+$badge-light-color-scheme-solid-primary-color: white;
+$badge-light-color-scheme-solid-primary-border: #338FCC;
+$badge-light-color-scheme-solid-info-border: #338FCC;
+$badge-light-color-scheme-solid-info-background: #338FCC;
+$badge-light-color-scheme-solid-info-color: white;
+$badge-light-color-scheme-solid-success-border: #52A832;
+$badge-light-color-scheme-solid-success-background: #52A832;
+$badge-light-color-scheme-solid-success-color: white;
+$badge-light-color-scheme-solid-warning-border: #D6930D;
+$badge-light-color-scheme-solid-warning-background: #D6930D;
+$badge-light-color-scheme-solid-warning-color: white;
+$badge-light-color-scheme-solid-error-border: #E04D36;
+$badge-light-color-scheme-solid-error-background: #E04D36;
+$badge-light-color-scheme-solid-error-color: white;
+$badge-light-color-scheme-solid-transparent-border: #CCCCCC;
+$badge-light-color-scheme-solid-transparent-color: #4D4D4D;
+$badge-light-color-scheme-solid-transparent-background: transparent;
+$badge-light-color-scheme-solid-light-border: #E6E6E6;
+$badge-light-color-scheme-solid-light-background: #E6E6E6;
+$badge-light-color-scheme-solid-light-color: #4D4D4D;
+$badge-light-color-scheme-solid-second-border: #666666;
+$badge-light-color-scheme-solid-second-background: #666666;
+$badge-light-color-scheme-solid-second-color: white;
+$badge-light-color-scheme-pastel-primary-background: #F5FAFD;
+$badge-light-color-scheme-pastel-primary-border: #AAD1EC;
+$badge-light-color-scheme-pastel-primary-color: #338FCC;
+$badge-light-color-scheme-pastel-info-background: #F5FAFD;
+$badge-light-color-scheme-pastel-info-border: #AAD1EC;
+$badge-light-color-scheme-pastel-info-color: #338FCC;
+$badge-light-color-scheme-pastel-success-background: #F6FBF4;
+$badge-light-color-scheme-pastel-success-border: #B4DEA4;
+$badge-light-color-scheme-pastel-success-color: #449327;
+$badge-light-color-scheme-pastel-warning-background: #FDFAF3;
+$badge-light-color-scheme-pastel-warning-border: #F0D49B;
+$badge-light-color-scheme-pastel-warning-color: #BB800A;
+$badge-light-color-scheme-pastel-error-background: #FEF7F6;
+$badge-light-color-scheme-pastel-error-border: #F4B7AE;
+$badge-light-color-scheme-pastel-error-color: #E04D36;
+$badge-dark-color-scheme-pastel-primary-background: rgba(0, 153, 255, 0.15);
+$badge-dark-color-scheme-pastel-primary-color: #D8EAF7;
+$badge-dark-color-scheme-pastel-primary-border: #114E77;
+$badge-dark-color-scheme-pastel-info-background: #D8EAF7;
+$badge-dark-color-scheme-pastel-info-color: #D8EAF7;
+$badge-dark-color-scheme-pastel-info-border: rgba(0, 153, 255, 0.15);
+$badge-dark-color-scheme-pastel-success-border: #276211;
+$badge-dark-color-scheme-pastel-success-background: rgba(68, 255, 0, 0.15);
+$badge-dark-color-scheme-pastel-success-color: #DCF1D4;
+$badge-dark-color-scheme-pastel-warning-border: #7D5504;
+$badge-dark-color-scheme-pastel-warning-background: rgba(255, 170, 0, 0.15);
+$badge-dark-color-scheme-pastel-warning-color: #F8EBD1;
+$badge-dark-color-scheme-pastel-error-border: #832112;
+$badge-dark-color-scheme-pastel-error-background: rgba(224, 79, 56, 0.15);
+$badge-dark-color-scheme-pastel-error-color: #FADEDA;
+$badge-dark-color-scheme-solid-primary-background: #114E77;
+$badge-dark-color-scheme-solid-primary-color: white;
+$badge-dark-color-scheme-solid-primary-border: #114E77;
+$badge-dark-color-scheme-solid-info-border: #07314D;
+$badge-dark-color-scheme-solid-info-background: #07314D;
+$badge-dark-color-scheme-solid-info-color: white;
+$badge-dark-color-scheme-solid-success-border: #276211;
+$badge-dark-color-scheme-solid-success-background: #276211;
+$badge-dark-color-scheme-solid-success-color: white;
+$badge-dark-color-scheme-solid-warning-border: #7D5504;
+$badge-dark-color-scheme-solid-warning-background: #7D5504;
+$badge-dark-color-scheme-solid-warning-color: white;
+$badge-dark-color-scheme-solid-error-border: #832112;
+$badge-dark-color-scheme-solid-error-background: #832112;
+$badge-dark-color-scheme-solid-error-color: white;
+$badge-dark-color-scheme-solid-transparent-border: #808080;
+$badge-dark-color-scheme-solid-transparent-color: #F5F5F5;
+$badge-dark-color-scheme-solid-transparent-background: transparent;
+$badge-dark-color-scheme-solid-light-border: #999999;
+$badge-dark-color-scheme-solid-light-background: #999999;
+$badge-dark-color-scheme-solid-light-color: white;
+$badge-dark-color-scheme-solid-second-border: #4D4D4D;
+$badge-dark-color-scheme-solid-second-background: #4D4D4D;
+$badge-dark-color-scheme-solid-second-color: white;
 $button-toggle-size-border-size: 1px;
 $button-toggle-size-border-radius: 3px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
@@ -764,7 +858,7 @@ $tooltip-size-border-radius: 3px;
 $tooltip-size-arrow-size: 12px;
 $tooltip-size-arrow-width: 5px;
 $tooltip-size-padding: 8px 16px;
-$tooltip-size-distance: 5px + 4px;
+$tooltip-size-distance: 9px;
 $tooltip-font-default: caption;
 $tree-size-padding-right: 16px;
 $tree-size-border-width: 2px;
@@ -1392,6 +1486,18 @@ $typography-extra-small-text-letter-spacing: 0.22px;
 $typography-extra-small-text-font-weight: normal;
 $typography-extra-small-text-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-text-transform: null;
+$typography-extra-small-text-caps-font-size: 11px;
+$typography-extra-small-text-caps-line-height: 16px;
+$typography-extra-small-text-caps-letter-spacing: 1px;
+$typography-extra-small-text-caps-font-weight: normal;
+$typography-extra-small-text-caps-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-caps-text-transform: uppercase;
+$typography-extra-small-text-mono-font-size: 11px;
+$typography-extra-small-text-mono-line-height: 16px;
+$typography-extra-small-text-mono-letter-spacing: 0px;
+$typography-extra-small-text-mono-font-weight: normal;
+$typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-extra-small-text-mono-text-transform: null;
 
 $mosaic: (
   'typography': (
@@ -1514,6 +1620,22 @@ $mosaic: (
       'font-weight': $typography-extra-small-text-font-weight,
       'font-family': $typography-extra-small-text-font-family,
       'text-transform': $typography-extra-small-text-text-transform
+    ),
+    'extra-small-text-caps': (
+      'font-size': $typography-extra-small-text-caps-font-size,
+      'line-height': $typography-extra-small-text-caps-line-height,
+      'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
+      'font-weight': $typography-extra-small-text-caps-font-weight,
+      'font-family': $typography-extra-small-text-caps-font-family,
+      'text-transform': $typography-extra-small-text-caps-text-transform
+    ),
+    'extra-small-text-mono': (
+      'font-size': $typography-extra-small-text-mono-font-size,
+      'line-height': $typography-extra-small-text-mono-line-height,
+      'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
+      'font-weight': $typography-extra-small-text-mono-font-weight,
+      'font-family': $typography-extra-small-text-mono-font-family,
+      'text-transform': $typography-extra-small-text-mono-text-transform
     )
   )
 );
@@ -2253,6 +2375,74 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         footer-background: $popup-light-color-scheme-footer-background
     );
 
+    $badge: (
+        primary_solid: (
+            color: $badge-light-color-scheme-solid-primary-color,
+            background: $badge-light-color-scheme-solid-primary-background,
+            border: $badge-light-color-scheme-solid-primary-border
+        ),
+        second_solid: (
+            color: $badge-light-color-scheme-solid-second-color,
+            background: $badge-light-color-scheme-solid-second-background,
+            border: $badge-light-color-scheme-solid-second-border
+        ),
+        light_solid: (
+            color: $badge-light-color-scheme-solid-light-color,
+            background: $badge-light-color-scheme-solid-light-background,
+            border: $badge-light-color-scheme-solid-light-background
+        ),
+        info_solid: (
+            color: $badge-light-color-scheme-solid-info-color,
+            background: $badge-light-color-scheme-solid-info-background,
+            border: $badge-light-color-scheme-solid-info-border
+        ),
+        success_solid: (
+            color: $badge-light-color-scheme-solid-success-color,
+            background: $badge-light-color-scheme-solid-success-background,
+            border: $badge-light-color-scheme-solid-success-border
+        ),
+        warning_solid: (
+            color: $badge-light-color-scheme-solid-warning-color,
+            background: $badge-light-color-scheme-solid-warning-background,
+            border: $badge-light-color-scheme-solid-warning-border
+        ),
+        error_solid: (
+            color: $badge-light-color-scheme-solid-error-color,
+            background: $badge-light-color-scheme-solid-error-background,
+            border: $badge-light-color-scheme-solid-error-border
+        ),
+        transparent_solid: (
+            color: $badge-light-color-scheme-solid-transparent-color,
+            border: $badge-light-color-scheme-solid-transparent-border,
+            background: $badge-light-color-scheme-solid-transparent-background
+        ),
+        primary_pastel: (
+            color: $badge-light-color-scheme-pastel-primary-color,
+            background: $badge-light-color-scheme-pastel-primary-background,
+            border: $badge-light-color-scheme-pastel-primary-border
+        ),
+        info_pastel: (
+            color: $badge-light-color-scheme-pastel-info-color,
+            background: $badge-light-color-scheme-pastel-info-background,
+            border: $badge-light-color-scheme-pastel-info-border
+        ),
+        success_pastel: (
+            color: $badge-light-color-scheme-pastel-success-color,
+            background: $badge-light-color-scheme-pastel-success-background,
+            border: $badge-light-color-scheme-pastel-success-border
+        ),
+        warning_pastel: (
+            color: $badge-light-color-scheme-pastel-warning-color,
+            background: $badge-light-color-scheme-pastel-warning-background,
+            border: $badge-light-color-scheme-pastel-warning-border
+        ),
+        error_pastel: (
+            color: $badge-light-color-scheme-pastel-error-color,
+            background: $badge-light-color-scheme-pastel-error-background,
+            border: $badge-light-color-scheme-pastel-error-border
+        ),
+    );
+
     $button: (
         state-active_shadow: $button-light-color-scheme-active-shadow,
 
@@ -2472,6 +2662,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     @return (
         alert: $alert,
         popup: $popup,
+        badge: $badge,
         button: $button,
         card: $card,
         checkbox: $checkbox,
@@ -2531,6 +2722,74 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         footer-background: $popup-dark-color-scheme-footer-background
     );
 
+    $badge: (
+        primary_solid: (
+            color: $badge-dark-color-scheme-solid-primary-color,
+            background: $badge-dark-color-scheme-solid-primary-background,
+            border: $badge-dark-color-scheme-solid-primary-border
+        ),
+        second_solid: (
+            color: $badge-dark-color-scheme-solid-second-color,
+            background: $badge-dark-color-scheme-solid-second-background,
+            border: $badge-dark-color-scheme-solid-second-border
+        ),
+        light_solid: (
+            color: $badge-dark-color-scheme-solid-light-color,
+            background: $badge-dark-color-scheme-solid-light-background,
+            border: $badge-dark-color-scheme-solid-light-background
+        ),
+        info_solid: (
+            color: $badge-dark-color-scheme-solid-info-color,
+            background: $badge-dark-color-scheme-solid-info-background,
+            border: $badge-dark-color-scheme-solid-info-border
+        ),
+        success_solid: (
+            color: $badge-dark-color-scheme-solid-success-color,
+            background: $badge-dark-color-scheme-solid-success-background,
+            border: $badge-dark-color-scheme-solid-success-border
+        ),
+        warning_solid: (
+            color: $badge-dark-color-scheme-solid-warning-color,
+            background: $badge-dark-color-scheme-solid-warning-background,
+            border: $badge-dark-color-scheme-solid-warning-border
+        ),
+        error_solid: (
+            color: $badge-dark-color-scheme-solid-error-color,
+            background: $badge-dark-color-scheme-solid-error-background,
+            border: $badge-dark-color-scheme-solid-error-border
+        ),
+        transparent_solid: (
+            color: $badge-dark-color-scheme-solid-transparent-color,
+            border: $badge-dark-color-scheme-solid-transparent-border,
+            background: $badge-dark-color-scheme-solid-transparent-background
+        ),
+        primary_pastel: (
+            color: $badge-dark-color-scheme-pastel-primary-color,
+            background: $badge-dark-color-scheme-pastel-primary-background,
+            border: $badge-dark-color-scheme-pastel-primary-border
+        ),
+        info_pastel: (
+            color: $badge-dark-color-scheme-pastel-info-color,
+            background: $badge-dark-color-scheme-pastel-info-background,
+            border: $badge-dark-color-scheme-pastel-info-border
+        ),
+        success_pastel: (
+            color: $badge-dark-color-scheme-pastel-success-color,
+            background: $badge-dark-color-scheme-pastel-success-background,
+            border: $badge-dark-color-scheme-pastel-success-border
+        ),
+        warning_pastel: (
+            color: $badge-dark-color-scheme-pastel-warning-color,
+            background: $badge-dark-color-scheme-pastel-warning-background,
+            border: $badge-dark-color-scheme-pastel-warning-border
+        ),
+        error_pastel: (
+            color: $badge-dark-color-scheme-pastel-error-color,
+            background: $badge-dark-color-scheme-pastel-error-background,
+            border: $badge-dark-color-scheme-pastel-error-border
+        ),
+    );
+
     $button: (
         state-active_shadow: $button-dark-color-scheme-active-shadow,
 
@@ -2750,6 +3009,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     @return (
         alert: $alert,
         popup: $popup,
+        badge: $badge,
         button: $button,
         card: $card,
         checkbox: $checkbox,
@@ -2940,7 +3200,8 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
             color: white;
         }
 
-        &.mc-checked {
+        &.mc-checked,
+        &.mc-indeterminate {
             border-color: map-get($checkbox, state-checked-border);
 
             background: map-get($checkbox, state-checked-background);
@@ -3141,7 +3402,9 @@ $fonts: (
         caption-mono:       map-get($typography, caption-mono),
 
         small-text:         map-get($typography, small-text),
-        extra-small-text:   map-get($typography, extra-small-text)
+        extra-small-text:   map-get($typography, extra-small-text),
+        extra-small-text-caps:   map-get($typography, extra-small-text-caps),
+        extra-small-text-mono:   map-get($typography, extra-small-text-mono)
     );
 
     @each $key, $level in $config {
@@ -3320,90 +3583,128 @@ $fonts: (
 
 
 .mc-badge {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
 
-    vertical-align: middle;
+    text-align: center;
+    white-space: nowrap;
 
-    min-width: var(--mc-badge-size-min-width, $badge-size-min-width);
+    border-style: solid;
 
-    padding: var(--mc-badge-size-padding, $badge-size-padding);
+    box-sizing: border-box;
 
-    border: {
-        width: var(--mc-badge-size-border-width, $badge-size-border-width);
-        style: solid;
-        radius: var(--mc-badge-size-border-radius, $badge-size-border-radius);
+    &.mc-badge_default {
+        height: var(--mc-badge-size-default-height, $badge-size-default-height);
+        min-width: var(--mc-badge-size-default-min-width, $badge-size-default-min-width);
+        padding: var(--mc-badge-size-default-padding, $badge-size-default-padding);
+        border: {
+            width: var(--mc-badge-size-default-border-width, $badge-size-default-border-width);
+            radius: var(--mc-badge-size-default-border-radius, $badge-size-default-border-radius);
+        }
     }
 
-    text-align: center;
-    white-space: nowrap;
-}
-
+    &.mc-badge_mini {
+        height: var(--mc-badge-size-mini-height, $badge-size-mini-height);
+        min-width: var(--mc-badge-size-mini-min-width, $badge-size-mini-min-width);
+        padding: var(--mc-badge-size-mini-padding, $badge-size-mini-padding);
+        border: {
+            width: var(--mc-badge-size-mini-border-width, $badge-size-mini-border-width);
+            radius: var(--mc-badge-size-mini-border-radius, $badge-size-mini-border-radius);
+        }
 
-@mixin mc-badge-color($palette, $is-dark) {
-    color: white;
+    }
+}
 
-    $color: mc-color($palette, if($is-dark, 700, 500));
 
-    border-color: $color;
-    background-color: $color;
+@mixin mc-badge-color($params) {
+    color: map-get($params, color);
+    border-color: map-get($params, border);
+    background: map-get($params, background);
 }
 
 @mixin mc-badge-theme($theme) {
     $foreground: map-get($theme, foreground);
-
-    $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
-    $error: map-get($theme, error);
-    $info: map-get($theme, info);
-    $success: map-get($theme, success);
-    $warning: map-get($theme, warning);
-
-    $is-dark: map-get($theme, is-dark);
+    $badge: map-get(map-get($theme, components), badge);
 
     .mc-badge {
         color: map-get($foreground, text);
         border-color: map-get($foreground, border);
     }
 
-    .mc-badge_light {
-        $color: mc-color($second, if($is-dark, 400, 100));
+    .mc-badge_solid {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_solid));
+        }
 
-        border-color: $color;
-        background-color: $color;
-    }
+        &.mc-badge_second {
+            @include mc-badge-color(map-get($badge, second_solid));
+        }
 
-    .mc-badge_second {
-        @include mc-badge-color($second, $is-dark);
-    }
+        &.mc-badge_transparent {
+            @include mc-badge-color(map-get($badge, transparent_solid));
+        }
 
-    .mc-badge_primary {
-        @include mc-badge-color($primary, $is-dark);
-    }
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_solid));
+        }
 
-    .mc-badge_error {
-        @include mc-badge-color($error, $is-dark);
-    }
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_solid));
+        }
 
-    .mc-badge_info {
-        @include mc-badge-color($info, $is-dark);
-    }
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_solid));
+        }
 
-    .mc-badge_success {
-        @include mc-badge-color($success, $is-dark);
+        &.mc-badge_light {
+            @include mc-badge-color(map-get($badge, light_solid));
+        }
     }
 
-    .mc-badge_warning {
-        @include mc-badge-color($warning, $is-dark);
+    .mc-badge_pastel {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_pastel));
+        }
+
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_pastel));
+        }
+
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_pastel));
+        }
+
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_pastel));
+        }
     }
 }
 
 @mixin mc-badge-typography($config) {
-    .mc-badge {
-        @include mc-typography-level-to-styles($config, $badge-font-default);
+    .mc-badge_default {
+        @include mc-typography-level-to-styles($config, $badge-font-default-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-default-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-default-mono);
+        }
     }
 
-    .mc-badge_caps {
-        @include mc-typography-level-to-styles($config, $badge-font-caps);
+    .mc-badge_mini {
+        @include mc-typography-level-to-styles($config, $badge-font-mini-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-mono);
+        }
     }
 }
 
@@ -4404,6 +4705,12 @@ $mc-datepicker-today-fade-amount: 0.2;
 }
 
 @mixin mc-navbar-typography($config) {
+    .mc-navbar-item.mc-horizontal {
+        .mc-badge {
+            @include mc-typography-level-to-styles($config, extra-small-text);
+        }
+    }
+
     .mc-navbar-item.mc-vertical {
         &.mc-opened .mc-badge {
             @include mc-typography-level-to-styles($config, caption);