@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/treeview/_treeview.scss

@@ -23,8 +23,8 @@
 
     .#{$prefix}--tree-node {
       padding-left: $spacing-05;
-      background-color: $ui-01;
-      color: $text-02;
+      background-color: $layer-01;
+      color: $text-secondary;
 
       &:focus {
         outline: none;
@@ -44,8 +44,8 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__label__details {
-      background-color: $disabled-01;
-      color: $disabled-02;
+      background-color: $field-01;
+      color: $text-disabled;
     }
 
     .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
@@ -56,7 +56,7 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__icon {
-      fill: $disabled-02;
+      fill: $icon-disabled;
     }
 
     .#{$prefix}--tree-node--disabled,
@@ -66,7 +66,7 @@
     }
 
     .#{$prefix}--tree-node__label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       display: flex;
       min-height: rem(32px);
@@ -74,19 +74,19 @@
       align-items: center;
 
       &:hover {
-        background-color: $hover-ui;
-        color: $text-01;
+        background-color: $layer-hover-01;
+        color: $text-primary;
       }
     }
 
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
-      color: $text-01;
+      color: $text-primary;
     }
 
     .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-parent-node__toggle-icon,
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-leaf-node {
@@ -122,7 +122,7 @@
     }
 
     .#{$prefix}--tree-parent-node__toggle-icon {
-      fill: $icon-02;
+      fill: $icon-secondary;
       transform: rotate(-90deg);
       transition: all $duration-fast-02 motion(standard, productive);
     }
@@ -135,15 +135,15 @@
       min-width: 1rem;
       min-height: 1rem;
       margin-right: $spacing-03;
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
 
     .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
-      background-color: $selected-ui;
-      color: $text-01;
+      background-color: $layer-selected-01;
+      color: $text-primary;
 
       &:hover {
-        background-color: $hover-selected-ui;
+        background-color: $layer-selected-hover-01;
       }
     }
 
@@ -153,7 +153,7 @@
     .#{$prefix}--tree-node--selected
       > .#{$prefix}--tree-node__label
       .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
@@ -165,13 +165,13 @@
         left: 0;
         width: rem(4px);
         height: 100%;
-        background-color: $interactive-04;
+        background-color: $interactive;
         content: '';
       }
     }
   }
 
-  .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {
+  .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
     min-height: rem(24px);
   }
 }

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/ui-shell/content/_content.scss

@@ -15,7 +15,6 @@
 @mixin content {
   .#{$prefix}--content {
     padding: 2rem;
-    background: $layer;
     color: $text-primary;
     will-change: margin-left;
   }

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/ui-shell/header/_header.scss

@@ -36,9 +36,10 @@
   .#{$prefix}--header__action {
     @include button-reset.reset();
 
+    display: inline-flex;
     width: mini-units(6);
     height: mini-units(6);
-    border: rem(2px) solid transparent;
+    border: rem(1px) solid transparent;
     transition: background-color $duration-fast-02,
       border-color $duration-fast-02;
   }
@@ -80,19 +81,20 @@
   }
 
   .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
+    align-items: center;
     justify-content: center;
   }
 
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action
     svg {
     fill: $icon-secondary;
   }
 
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:hover
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:hover
     svg,
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:active
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:active
     svg,
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action--active
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action--active
     svg {
     fill: $icon-primary;
   }
@@ -122,7 +124,7 @@
   // Header - Name
   //--------------------------------------------------------------------------
   a.#{$prefix}--header__name {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     height: 100%;
@@ -269,6 +271,25 @@
     position: relative;
   }
 
+  .#{$prefix}--header__submenu--current::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 3px solid $border-interactive;
+    content: '';
+  }
+
+  .#{$prefix}--header__submenu--current:focus {
+    border: 2px solid $focus;
+  }
+
+  .#{$prefix}--header__submenu--current:focus::after {
+    border: 0;
+  }
+
   .#{$prefix}--header__menu-title[aria-haspopup='true'] {
     position: relative;
   }
@@ -303,7 +324,7 @@
     width: mini-units(25);
     flex-direction: column;
     background-color: $layer;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
     transform: translateY(100%);
   }
 

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -68,7 +68,7 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
@@ -81,8 +81,8 @@
     height: 0;
     background-color: transparent;
     opacity: 0;
-    transition: opacity $transition--expansion $standard-easing,
-      background-color $transition--expansion $standard-easing;
+    transition: opacity $transition-expansion $standard-easing,
+      background-color $transition-expansion $standard-easing;
   }
 
   .#{$prefix}--side-nav__overlay-active {
@@ -91,8 +91,8 @@
       height: 100vh;
       background-color: $overlay;
       opacity: 1;
-      transition: opacity $transition--expansion $standard-easing,
-        background-color $transition--expansion $standard-easing;
+      transition: opacity $transition-expansion $standard-easing,
+        background-color $transition-expansion $standard-easing;
     }
   }
 
@@ -192,7 +192,7 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__submenu {
     @include button-reset.reset($width: true);
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
     @include focus-outline('reset');
 
     display: flex;
@@ -254,6 +254,7 @@
     position: relative;
     background-color: $background-selected;
     color: $text-primary;
+
     &::before {
       position: absolute;
       top: 0;
@@ -317,7 +318,7 @@
     .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
     @include focus-outline('reset');
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     position: relative;
     display: flex;

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/ui-shell/switcher/_switcher.scss

@@ -45,7 +45,7 @@
   }
 
   .#{$prefix}--switcher__item-link {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: block;
     height: $spacing-07;

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/fonts/_index.scss

@@ -0,0 +1,75 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:meta';
+@use 'sass:map';
+@use '../config';
+@use './mono';
+@use './sans-arabic';
+@use './sans-devanagari';
+@use './sans-hebrew';
+@use './sans-thai-looped';
+@use './sans-thai';
+@use './sans';
+@use './serif';
+
+$-fonts: (
+  IBM-Plex-Mono: true,
+  IBM-Plex-Sans-Arabic: false,
+  IBM-Plex-Sans-Devanagari: false,
+  IBM-Plex-Sans-Hebrew: false,
+  IBM-Plex-Sans-Thai-Looped: false,
+  IBM-Plex-Sans-Thai: false,
+  IBM-Plex-Sans: true,
+  IBM-Plex-Serif: true,
+);
+$fonts: () !default;
+$fonts: map.merge($-fonts, $fonts);
+
+/// Determine if the given font has been enabled or not
+/// @param String $name
+/// @returns Boolean
+@function enabled($name) {
+  @if map.has-key($fonts, $name) {
+    @return map.get($fonts, $name);
+  }
+  @return false;
+}
+
+@if config.$css--font-face == true {
+  @if enabled(mono.$name) {
+    @include mono.default();
+  }
+
+  @if enabled(sans-arabic.$name) {
+    @include sans-arabic.default();
+  }
+
+  @if enabled(sans-devanagari.$name) {
+    @include sans-devanagari.default();
+  }
+
+  @if enabled(sans-hebrew.$name) {
+    @include sans-hebrew.default();
+  }
+
+  @if enabled(sans-thai-looped.$name) {
+    @include sans-thai-looped.default();
+  }
+
+  @if enabled(sans-thai.$name) {
+    @include sans-thai.default();
+  }
+
+  @if enabled(sans.$name) {
+    @include sans.default();
+  }
+
+  @if enabled(serif.$name) {
+    @include serif.default();
+  }
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/fonts/_mono.scss

@@ -0,0 +1,153 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../config';
+@use './src';
+@use './unicode';
+
+$font-family: 'IBM Plex Mono';
+$name: 'IBM-Plex-Mono';
+$styles: (normal, italic);
+$unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
+$formats: (woff2, woff);
+
+@mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 100;
+        src: src.get($name, Thin, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin extralight($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 200;
+        src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin light($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 300;
+        src: src.get($name, Light, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin regular($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 400;
+        src: src.get($name, Regular, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin text($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 450;
+        src: src.get($name, Text, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin medium($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 500;
+        src: src.get($name, Medium, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin semibold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 600;
+        src: src.get($name, SemiBold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin bold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 700;
+        src: src.get($name, Bold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin all($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @include thin($styles, $unicode-ranges);
+  @include extralight($styles, $unicode-ranges);
+  @include light($styles, $unicode-ranges);
+  @include regular($styles, $unicode-ranges);
+  @include text($styles, $unicode-ranges);
+  @include medium($styles, $unicode-ranges);
+  @include semibold($styles, $unicode-ranges);
+  @include bold($styles, $unicode-ranges);
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/fonts/_sans-arabic.scss

@@ -0,0 +1,151 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../config';
+@use './src';
+
+$font-family: 'IBM Plex Sans Arabic';
+$name: 'IBM-Plex-Sans-Arabic';
+$styles: (normal);
+$formats: (woff2, woff);
+
+@mixin thin() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 100;
+    src: src.get(
+      $name: $name,
+      $weight: Thin,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin extralight() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 200;
+    src: src.get(
+      $name: $name,
+      $weight: ExtraLight,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin light() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 300;
+    src: src.get(
+      $name: $name,
+      $weight: Light,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin regular() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    src: src.get(
+      $name: $name,
+      $weight: Regular,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin text() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 450;
+    src: src.get(
+      $name: $name,
+      $weight: Text,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin medium() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: Medium,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin semibold() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: SemiBold,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin bold() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: Bold,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin all() {
+  @include thin();
+  @include extralight();
+  @include light();
+  @include regular();
+  @include text();
+  @include medium();
+  @include semibold();
+  @include bold();
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}