@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/_tooltip.scss

@@ -0,0 +1,375 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 'box-shadow' as *;
+@use 'convert' as *;
+@use 'focus-outline' as *;
+@use 'z-index' as *;
+@use '../config' as *;
+@use '../motion' as *;
+@use '../theme' as *;
+@use '../type';
+
+// Tooltip
+// Tooltip caret visual styles
+/// @access public
+/// @group tooltip
+@mixin tooltip--caret {
+  position: absolute;
+  z-index: z('floating');
+  width: 0;
+  height: 0;
+  border-style: solid;
+  content: '';
+}
+
+// Tooltip
+// Tooltip content box visual styles
+/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
+/// @access public
+/// @group tooltip
+@mixin tooltip--content($tooltip-type: 'icon') {
+  @include box-shadow;
+
+  z-index: z('floating');
+  width: max-content;
+  min-width: rem(24px);
+  max-width: rem(208px);
+  height: auto;
+  padding: if(
+    $tooltip-type == 'definition',
+    rem(8px) rem(16px),
+    rem(3px) rem(16px)
+  );
+  background-color: $background-inverse;
+  border-radius: rem(2px);
+  color: $text-inverse;
+  font-weight: 400;
+  text-align: left;
+  transform: translateX(-50%);
+  @include type.type-style('body-short-01');
+
+  // IE media query
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    width: auto;
+  }
+  // Edge 12-15 and Edge 16 feature queries
+  @supports (-ms-accelerator: true) {
+    width: auto;
+  }
+  @supports (-ms-ime-align: auto) {
+    width: auto;
+  }
+
+  // Windows, Firefox HCM Fix
+  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
+    border: 1px solid transparent;
+  }
+}
+
+// Tooltip
+// Definition and Icon CSS only tooltip
+/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
+/// @param {String} $position ['bottom'] - The position, from: `top`, `right`, `bottom`, `left`
+/// @access public
+/// @group tooltip
+@mixin tooltip--trigger($tooltip-type: 'icon', $position: 'bottom') {
+  position: relative;
+  display: inline-flex;
+  overflow: visible;
+  align-items: center;
+
+  &:focus {
+    @include focus-outline('border');
+  }
+
+  @if $tooltip-type == 'definition' {
+    cursor: default;
+  }
+
+  @if $tooltip-type == 'icon' {
+    cursor: pointer;
+    &:focus {
+      outline: 1px solid transparent;
+
+      svg {
+        @include focus-outline('border');
+      }
+    }
+  }
+
+  // ::before - Tooltip caret
+  // ::after - legacy Tooltip content (deprecated)
+  // .#{$prefix}--assistive-text - WCAG 2.1 compliant tooltip content
+  //    that can either be a child (icon tooltip) or sibling (definition tooltip)
+  &::before,
+  &::after,
+  .#{$prefix}--assistive-text,
+  + .#{$prefix}--assistive-text {
+    position: absolute;
+    z-index: z('floating');
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+
+    // IE media query
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      display: inline-block;
+    }
+  }
+
+  &::before,
+  &::after {
+    transition: opacity $duration-fast-01 motion(standard, productive);
+  }
+
+  &.#{$prefix}--tooltip--a11y::before,
+  &.#{$prefix}--tooltip--a11y::after {
+    transition: none;
+  }
+
+  // caret
+  &::before {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    content: '';
+  }
+
+  .#{$prefix}--assistive-text,
+  + .#{$prefix}--assistive-text {
+    box-sizing: content-box;
+    color: inherit;
+    // In order to pass AAT, opacity must be set to 1 in the default state
+    // On focus/hover use a keyframe animation to mimic transition
+    opacity: 1;
+    // overwrite default nowrap behavior
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  // content box
+  // @todo Simplify CSS selectors on next major release
+  &::after,
+  .#{$prefix}--assistive-text,
+  + .#{$prefix}--assistive-text {
+    @include tooltip--content($tooltip-type);
+  }
+
+  &::after {
+    content: attr(aria-label);
+  }
+
+  &.#{$prefix}--tooltip--a11y::after {
+    content: none;
+  }
+
+  &.#{$prefix}--tooltip--visible,
+  &:hover,
+  &:focus {
+    &::before,
+    &::after {
+      opacity: 1;
+    }
+
+    @keyframes tooltip-fade {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .#{$prefix}--assistive-text,
+    + .#{$prefix}--assistive-text {
+      overflow: visible;
+      margin: auto;
+      clip: auto;
+    }
+
+    .#{$prefix}--assistive-text,
+    + .#{$prefix}--assistive-text,
+    &.#{$prefix}--tooltip--a11y::before {
+      animation: tooltip-fade $duration-fast-01 motion(standard, productive);
+    }
+  }
+
+  &.#{$prefix}--tooltip--hidden .#{$prefix}--assistive-text,
+  &.#{$prefix}--tooltip--hidden + .#{$prefix}--assistive-text {
+    overflow: hidden;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  &.#{$prefix}--tooltip--hidden.#{$prefix}--tooltip--a11y::before {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+// Tooltip
+// Definition and Icon CSS only tooltip
+/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
+/// @param {String} $position ['bottom'] - The position, from: `top`, `right`, `bottom`, `left`
+/// @param {String} $align ['center'] - The alignment, from: `start`, `center`, `end`
+/// @access public
+/// @group tooltip
+@mixin tooltip--placement(
+  $tooltip-type: 'icon',
+  $position: 'bottom',
+  $align: 'center'
+) {
+  // position and alignment
+  $caret-spacing: if($tooltip-type == 'definition', rem(4px), rem(8px));
+
+  // space between caret and trigger button
+  $caret-height: rem(5px);
+  $caret-width: rem(8px);
+  $body-spacing: $caret-spacing + $caret-height;
+
+  // Use pseudo element to create invisible hover area to keep tooltip open on hover
+  .#{$prefix}--assistive-text::after {
+    position: absolute;
+    display: block;
+    content: '';
+    // clip-path: polygon(50% 100%, 0 0, 100% 0);
+
+    @if ($position == 'top' or $position == 'bottom') {
+      left: 0;
+      width: 100%;
+      height: rem(12px);
+    }
+
+    @if ($position == 'left' or $position == 'right') {
+      top: 0;
+      width: rem(12px);
+      height: 100%;
+    }
+
+    @if ($position == 'top') {
+      bottom: rem(-12px);
+    }
+    @if ($position == 'right') {
+      left: rem(-12px);
+    }
+    @if ($position == 'bottom') {
+      top: rem(-12px);
+    }
+    @if ($position == 'left') {
+      right: rem(-12px);
+    }
+  }
+
+  // @todo Simplify CSS selectors on next major release
+  &::before,
+  &::after,
+  .#{$prefix}--assistive-text,
+  + .#{$prefix}--assistive-text {
+    @if ($position == 'top') {
+      top: 0;
+      left: 50%;
+    }
+    @if ($position == 'right') {
+      top: 50%;
+      right: 0;
+    }
+    @if ($position == 'bottom') {
+      bottom: 0;
+      left: 50%;
+    }
+    @if ($position == 'left') {
+      top: 50%;
+      left: 0;
+    }
+  }
+
+  &::before {
+    @if ($position == 'top') {
+      top: -$caret-spacing;
+      border-width: rem(5px) rem(4px) 0 rem(4px);
+      border-color: $background-inverse transparent transparent transparent;
+      transform: translate(-50%, -100%);
+    }
+    @if ($position == 'right') {
+      right: -$caret-spacing;
+      border-width: rem(4px) rem(5px) rem(4px) 0;
+      border-color: transparent $background-inverse transparent transparent;
+      transform: translate(100%, -50%);
+    }
+    @if ($position == 'bottom') {
+      bottom: -$caret-spacing;
+      border-width: 0 rem(4px) rem(5px) rem(4px);
+      border-color: transparent transparent $background-inverse transparent;
+      transform: translate(-50%, 100%);
+    }
+    @if ($position == 'left') {
+      left: -$caret-spacing;
+      border-width: rem(4px) 0 rem(4px) rem(5px);
+      border-color: transparent transparent transparent $background-inverse;
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  // alignment options available only for top and bottom tooltip position
+  // @todo Simplify CSS selectors on next major release
+  &::after,
+  .#{$prefix}--assistive-text,
+  + .#{$prefix}--assistive-text {
+    @if ($position == 'top') {
+      top: -$body-spacing;
+      @if ($align == 'start') {
+        left: 0;
+        transform: translate(0, -100%);
+      } @else if ($align == 'end') {
+        right: 0;
+        left: auto;
+        transform: translate(0, -100%);
+      } @else {
+        left: 50%;
+        transform: translate(-50%, -100%);
+      }
+    }
+    @if ($position == 'right') {
+      right: -$body-spacing;
+      transform: translate(100%, -50%);
+    }
+    @if ($position == 'bottom') {
+      bottom: -$body-spacing;
+      @if ($align == 'start') {
+        left: 0;
+        transform: translate(0, 100%);
+      } @else if ($align == 'end') {
+        right: 0;
+        left: auto;
+        transform: translate(0, 100%);
+      } @else {
+        transform: translate(-50%, 100%);
+      }
+    }
+    @if ($position == 'left') {
+      left: -$body-spacing;
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  // @todo simplify on next major release to move the ::before pseudo element within the tooltip instead of the trigger
+  @if $tooltip-type == 'definition' {
+    &.#{$prefix}--tooltip--a11y + .#{$prefix}--assistive-text {
+      @if ($position == 'bottom') {
+        // carryover from https://github.com/carbon-design-system/carbon/pull/3151/files#diff-93734be0784e9530b6d14a7b03b0d352R261-R265
+        bottom: -($body-spacing - rem(1px));
+        @if ($align == 'start' or $align == 'end') {
+          transform: translate(0, 100%);
+        } @else {
+          transform: translate(-50%, 100%);
+        }
+      }
+    }
+  }
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/_visually-hidden.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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' as *;
+
+/// Include styles for screen reader/assistive text
+/// @access public
+/// @group utilities
+@mixin visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/_z-index.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @access public
+/// @type Map
+/// @group utilities
+$z-indexes: (
+  // Dropdowns that render outside of a Modal should render above a Modal.
+  // Dropdowns below the modal will close when the Modal is opened, so
+  // having a higher z-index *should* not cause issues.
+  dropdown: 9100,
+  modal: 9000,
+  header: 8000,
+  overlay: 6000,
+  floating: 6000,
+  footer: 5000,
+  hidden: - 1,
+  overflowHidden: - 1
+);
+
+/// @access public
+/// @param {String} $layer - Value from `$z-indexes` map
+/// @group utilities
+/// @example - scss
+///   .modal {
+///     z-index: z('modal');
+///   }
+@function z($layer) {
+  @if not map-has-key($z-indexes, $layer) {
+    @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
+  }
+
+  @return map-get($z-indexes, $layer);
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/themes/scss/_mixins.scss

@@ -1,162 +1,39 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
 //
 // 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.
 //
-@import './theme-maps';
-/// Define theme variables from a map of tokens
-/// @access public
-/// @param {Map} $theme [$carbon--theme] - Map of theme tokens
-/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens
-/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.
-///
-/// @example scss
-///   // Default usage
-///   @include carbon--theme();
-///
-///   // Alternate styling (not white theme)
-///   @include carbon--theme($carbon--theme--g90) {
-///     // declarations...
-///   }
-///
-///   // Inline styling
-///   @include carbon--theme($carbon--theme--g90) {
-///     .my-dark-theme {
-///       // declarations...
-///     }
-///   }
-///
+
+/// @access private
 /// @group @carbon/themes
-@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
-  $interactive-01: map-get($theme, 'interactive-01') !global;
-  $interactive-02: map-get($theme, 'interactive-02') !global;
-  $interactive-03: map-get($theme, 'interactive-03') !global;
-  $interactive-04: map-get($theme, 'interactive-04') !global;
-  $ui-background: map-get($theme, 'ui-background') !global;
-  $ui-01: map-get($theme, 'ui-01') !global;
-  $ui-02: map-get($theme, 'ui-02') !global;
-  $ui-03: map-get($theme, 'ui-03') !global;
-  $ui-04: map-get($theme, 'ui-04') !global;
-  $ui-05: map-get($theme, 'ui-05') !global;
-  $text-01: map-get($theme, 'text-01') !global;
-  $text-02: map-get($theme, 'text-02') !global;
-  $text-03: map-get($theme, 'text-03') !global;
-  $text-04: map-get($theme, 'text-04') !global;
-  $icon-01: map-get($theme, 'icon-01') !global;
-  $icon-02: map-get($theme, 'icon-02') !global;
-  $icon-03: map-get($theme, 'icon-03') !global;
-  $link-01: map-get($theme, 'link-01') !global;
-  $inverse-link: map-get($theme, 'inverse-link') !global;
-  $field-01: map-get($theme, 'field-01') !global;
-  $field-02: map-get($theme, 'field-02') !global;
-  $inverse-01: map-get($theme, 'inverse-01') !global;
-  $inverse-02: map-get($theme, 'inverse-02') !global;
-  $support-01: map-get($theme, 'support-01') !global;
-  $support-02: map-get($theme, 'support-02') !global;
-  $support-03: map-get($theme, 'support-03') !global;
-  $support-04: map-get($theme, 'support-04') !global;
-  $inverse-support-01: map-get($theme, 'inverse-support-01') !global;
-  $inverse-support-02: map-get($theme, 'inverse-support-02') !global;
-  $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
-  $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
-  $overlay-01: map-get($theme, 'overlay-01') !global;
-  $focus: map-get($theme, 'focus') !global;
-  $hover-primary: map-get($theme, 'hover-primary') !global;
-  $active-primary: map-get($theme, 'active-primary') !global;
-  $hover-primary-text: map-get($theme, 'hover-primary-text') !global;
-  $hover-secondary: map-get($theme, 'hover-secondary') !global;
-  $active-secondary: map-get($theme, 'active-secondary') !global;
-  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
-  $active-tertiary: map-get($theme, 'active-tertiary') !global;
-  $hover-ui: map-get($theme, 'hover-ui') !global;
-  $active-ui: map-get($theme, 'active-ui') !global;
-  $selected-ui: map-get($theme, 'selected-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
-  $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
-  $hover-danger: map-get($theme, 'hover-danger') !global;
-  $active-danger: map-get($theme, 'active-danger') !global;
-  $hover-row: map-get($theme, 'hover-row') !global;
-  $visited-link: map-get($theme, 'visited-link') !global;
-  $disabled-01: map-get($theme, 'disabled-01') !global;
-  $disabled-02: map-get($theme, 'disabled-02') !global;
-  $disabled-03: map-get($theme, 'disabled-03') !global;
-  $highlight: map-get($theme, 'highlight') !global;
-  $skeleton-01: map-get($theme, 'skeleton-01') !global;
-  $skeleton-02: map-get($theme, 'skeleton-02') !global;
-  $brand-01: map-get($theme, 'brand-01') !global;
-  $brand-02: map-get($theme, 'brand-02') !global;
-  $brand-03: map-get($theme, 'brand-03') !global;
-  $active-01: map-get($theme, 'active-01') !global;
-  $hover-field: map-get($theme, 'hover-field') !global;
+$custom-property-prefix: 'cds' !default;
 
-  @if $emit-custom-properties == true {
-    --interactive-01: #{map-get($theme, 'interactive-01')};
-    --interactive-02: #{map-get($theme, 'interactive-02')};
-    --interactive-03: #{map-get($theme, 'interactive-03')};
-    --interactive-04: #{map-get($theme, 'interactive-04')};
-    --ui-background: #{map-get($theme, 'ui-background')};
-    --ui-01: #{map-get($theme, 'ui-01')};
-    --ui-02: #{map-get($theme, 'ui-02')};
-    --ui-03: #{map-get($theme, 'ui-03')};
-    --ui-04: #{map-get($theme, 'ui-04')};
-    --ui-05: #{map-get($theme, 'ui-05')};
-    --text-01: #{map-get($theme, 'text-01')};
-    --text-02: #{map-get($theme, 'text-02')};
-    --text-03: #{map-get($theme, 'text-03')};
-    --text-04: #{map-get($theme, 'text-04')};
-    --icon-01: #{map-get($theme, 'icon-01')};
-    --icon-02: #{map-get($theme, 'icon-02')};
-    --icon-03: #{map-get($theme, 'icon-03')};
-    --link-01: #{map-get($theme, 'link-01')};
-    --inverse-link: #{map-get($theme, 'inverse-link')};
-    --field-01: #{map-get($theme, 'field-01')};
-    --field-02: #{map-get($theme, 'field-02')};
-    --inverse-01: #{map-get($theme, 'inverse-01')};
-    --inverse-02: #{map-get($theme, 'inverse-02')};
-    --support-01: #{map-get($theme, 'support-01')};
-    --support-02: #{map-get($theme, 'support-02')};
-    --support-03: #{map-get($theme, 'support-03')};
-    --support-04: #{map-get($theme, 'support-04')};
-    --inverse-support-01: #{map-get($theme, 'inverse-support-01')};
-    --inverse-support-02: #{map-get($theme, 'inverse-support-02')};
-    --inverse-support-03: #{map-get($theme, 'inverse-support-03')};
-    --inverse-support-04: #{map-get($theme, 'inverse-support-04')};
-    --overlay-01: #{map-get($theme, 'overlay-01')};
-    --focus: #{map-get($theme, 'focus')};
-    --hover-primary: #{map-get($theme, 'hover-primary')};
-    --active-primary: #{map-get($theme, 'active-primary')};
-    --hover-primary-text: #{map-get($theme, 'hover-primary-text')};
-    --hover-secondary: #{map-get($theme, 'hover-secondary')};
-    --active-secondary: #{map-get($theme, 'active-secondary')};
-    --hover-tertiary: #{map-get($theme, 'hover-tertiary')};
-    --active-tertiary: #{map-get($theme, 'active-tertiary')};
-    --hover-ui: #{map-get($theme, 'hover-ui')};
-    --active-ui: #{map-get($theme, 'active-ui')};
-    --selected-ui: #{map-get($theme, 'selected-ui')};
-    --hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
-    --inverse-hover-ui: #{map-get($theme, 'inverse-hover-ui')};
-    --hover-danger: #{map-get($theme, 'hover-danger')};
-    --active-danger: #{map-get($theme, 'active-danger')};
-    --hover-row: #{map-get($theme, 'hover-row')};
-    --visited-link: #{map-get($theme, 'visited-link')};
-    --disabled-01: #{map-get($theme, 'disabled-01')};
-    --disabled-02: #{map-get($theme, 'disabled-02')};
-    --disabled-03: #{map-get($theme, 'disabled-03')};
-    --highlight: #{map-get($theme, 'highlight')};
-    --skeleton-01: #{map-get($theme, 'skeleton-01')};
-    --skeleton-02: #{map-get($theme, 'skeleton-02')};
-    --brand-01: #{map-get($theme, 'brand-01')};
-    --brand-02: #{map-get($theme, 'brand-02')};
-    --brand-03: #{map-get($theme, 'brand-03')};
-    --active-01: #{map-get($theme, 'active-01')};
-    --hover-field: #{map-get($theme, 'hover-field')};
+/// @access private
+/// @group @carbon/themes
+@mixin custom-property($name, $value, $prefix: $custom-property-prefix) {
+  @if type-of($value) == map {
+    @each $property, $property-value in $value {
+      // Only support one-level of depth for values that are maps. This is to
+      // avoid bringing properties like `breakpoints` on type tokens
+      @if type-of($property-value) != map {
+        @include custom-property('#{$name}-#{$property}', $property-value);
+      }
+    }
+  } @else {
+    --#{$prefix}-#{$name}: #{$value};
   }
+}
 
-  @content;
-  // Reset to default theme after apply in content
-  @if $theme != $carbon--theme {
-    @include carbon--theme();
+/// @access private
+/// @group @carbon/themes
+@function should-emit($theme-a, $theme-b, $token, $emit-difference) {
+  @if $emit-difference == false {
+    @return true;
   }
+  @return map-get($theme-a, $token) != map-get($theme-b, $token);
 }
+
+// We import mixins last so that these methods are made available to the
+// carbon--theme mixin
+@import './generated/mixins';