@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/src/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/src/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/src/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/src/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/src/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/src/globals/scss/vendor/@carbon/styles/scss/fonts/README.md

@@ -0,0 +1,148 @@
+# `scss/fonts`
+
+The `scss/fonts` folder provides a way to incorporate IBM Plex into your
+project. Below is a table of what fonts are currently supported from IBM Plex in
+Carbon:
+
+| Font                      | Available | Entrypoint                    |
+| ------------------------- | --------- | ----------------------------- |
+| IBM Plex Mono             | ✅        | `scss/fonts/mono`             |
+| IBM Plex Sans Arabic      | ✅        | `scss/fonts/sans-arabic`      |
+| IBM Plex Sans Devanagari  | ✅        | `scss/fonts/sans-devanagari`  |
+| IBM Plex Sans Hebrew      | ✅        | `scss/fonts/sans-hebrew`      |
+| IBM Plex Sans KR          |           |                               |
+| IBM Plex Sans JP          |           |                               |
+| IBM Plex Sans Thai Looped | ✅        | `scss/fonts/sans-thai-looped` |
+| IBM Plex Sans Thai        | ✅        | `scss/fonts/sans-thai`        |
+| IBM Plex Sans             | ✅        | `scss/fonts/sans`             |
+| IBM Plex Serif            | ✅        | `scss/fonts/serif`            |
+
+By default, Carbon provides the default font weights for: IBM Plex Mono, IBM
+Plex Sans, and IBM Plex Serif. To bring in additional fonts, you can include the
+`@carbon/styles/scss/fonts` entrypoint and configure it:
+
+```scss
+@use '@carbon/styles/scss/fonts' with (
+  $fonts: (
+    IBM-Plex-Sans-Arabic: true,
+  ),
+);
+```
+
+You can also configure it to disable specific fonts:
+
+```scss
+@use '@carbon/styles/scss/fonts' with (
+  $fonts: (
+    IBM-Plex-Sans: false,
+  ),
+);
+```
+
+If you would like to disable all fonts, you can use the `$css--font-face` flag
+in:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $css--font-face: false,
+);
+```
+
+## Features
+
+Each font is available as an entrypoint in the `fonts` folder. You can use these
+entrypoints to include specific font weights, styles, and more for IBM Plex. For
+example, if you only want to include the regular font weight for IBM Plex Sans
+then you could do the following:
+
+```scss
+@use '@carbon/styles/scss/fonts/sans';
+
+@include sans.regular($styles: normal);
+```
+
+Each font entrypoint supports the following weights:
+
+- `thin`
+- `extralight`
+- `light`
+- `regular`
+- `tex`
+- `medium`
+- `semibold`
+- `bold`
+
+All fonts support the `normal` font style, some fonts include support for the
+`italic` font style, as well.
+
+### Custom font src resolver
+
+By default, `@carbon/styles/scss/fonts` attempts to resolve fonts directly from
+the `@ibm/plex` package. You can configure the location of these font files in
+two ways:
+
+- Use the `$font-path` option to define a path "prefix"
+- Provide a custom resolver to point to where your font files are hosted
+
+The `$font-path` options is available in `scss/config`:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $font-path: 'https://cdn.custom-font-path.com/fonts',
+);
+```
+
+And allows you to change the beginning part of each `src` URL that is generated.
+You can also completely override the default behavior and provide your own URL
+resolver through `scss/fonts/src`:
+
+```scss
+@use 'sass:meta';
+@use './my-custom-resolver' as resolver;
+@use '@carbon/styles/scss/fonts/src' with (
+  // Here, "resolve" is the name of the function in the "resolver" module
+  $resolver: meta.get-function('resolve', 'resolver')
+);
+```
+
+This can be particularly useful for self-hosted projects that are not using
+webpack. This custom resolver should follow the signature:
+
+```scss
+/// @param {String} $name
+/// @param {String} $weight
+/// @param {String} $style
+/// @param {String} $unicode-range
+/// @param {List} $formats
+/// @returns List
+@function resolver($name, $weight, $style, $unicode-range, $formats) {
+  // Here, you will need to return a list of url() format() that will be used in
+  // the src property
+}
+```
+
+## Contributing
+
+**How do I add support for a font?**
+
+You will need to do the following:
+
+- [ ] Create a file for the font under `scss/fonts/`, for example
+      `scss/fonts/_sans-arabic.scss`
+- [ ] Define all available weights as mixins in that file
+- [ ] Emit `@font-face` blocks in each font weight mixin
+- [ ] Add a `default` mixin for the default font weights to include for a font
+- [ ] Add an `all` mixin which emits all font weights
+- [ ] Export a `$name` variable for the name of the font to be used to detect if
+      a font should be auto-included
+- [ ] Add the base font name to the `$-filenames` map in `fonts/_src.scss`. This
+      will be used in the font src resolver to get the correct path from
+      `@ibm/plex`
+- [ ] In `fonts/_index.scss`
+  - [ ] Update the `$-fonts` map to include the `$name` for the font and specify
+        whether it should be included automatically
+  - [ ] Update the block at the end of the file to call the default mixin of the
+        file if the font is enabled
+- [ ] Update `packages/carbon-react/tasks/build-styles.js` to include the font
+      file as a re-export
+- [ ] Add a story for the font in `Plex.stories.js`

package/styles/vendor/carbon-components/src/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/src/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();
+}