@carbon/charts 0.58.0 → 0.58.1

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

@@ -0,0 +1,16 @@
+//
+// 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.
+//
+
+@forward 'tag';
+@forward 'tokens';
+
+@use '../../theme';
+@use 'tag';
+@use 'tokens';
+
+@include theme.add-component-tokens(tokens.$tag-tokens);
+@include tag.tag;

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

@@ -0,0 +1,21 @@
+//
+// Copyright IBM Corp. 2016, 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' as *;
+
+/// @access private
+/// @group tag
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.#{$prefix}--tag--interactive,
+  .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: $filter-hover-color;
+    }
+  }
+}

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/tag/_tag.scss

@@ -0,0 +1,275 @@
+//
+// Copyright IBM Corp. 2016, 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 '../../theme' as *;
+@use '../../utilities/button-reset';
+@use '../../type' as *;
+@use '../../motion' as *;
+@use '../../config' as *;
+@use '../../utilities/component-tokens' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../spacing' as *;
+@use './tokens' as *;
+@use './mixins' as *;
+@use '../../utilities/skeleton';
+
+/// Tag styles
+/// @access public
+/// @group tag
+@mixin tag {
+  .#{$prefix}--tag {
+    @include type-style('label-01');
+    @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
+
+    display: inline-flex;
+    // ensures tag stays pill shaped;
+    min-width: rem(32px);
+    // restricts size of contained elements
+    max-width: 100%;
+    min-height: rem(24px);
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-02 $spacing-03;
+    margin: $spacing-02;
+    border-radius: rem(15px);
+    cursor: default;
+    vertical-align: middle;
+    word-break: break-word;
+
+    &:not(:first-child) {
+      margin-left: 0;
+    }
+  }
+
+  .#{$prefix}--tag--red {
+    @include tag-theme($tag-background-red, $tag-color-red, $tag-hover-red);
+  }
+
+  .#{$prefix}--tag--magenta {
+    @include tag-theme(
+      $tag-background-magenta,
+      $tag-color-magenta,
+      $tag-hover-magenta
+    );
+  }
+
+  .#{$prefix}--tag--purple {
+    @include tag-theme(
+      $tag-background-purple,
+      $tag-color-purple,
+      $tag-hover-purple
+    );
+  }
+
+  .#{$prefix}--tag--blue {
+    @include tag-theme($tag-background-blue, $tag-color-blue, $tag-hover-blue);
+  }
+
+  .#{$prefix}--tag--cyan {
+    @include tag-theme($tag-background-cyan, $tag-color-cyan, $tag-hover-cyan);
+  }
+
+  .#{$prefix}--tag--teal {
+    @include tag-theme($tag-background-teal, $tag-color-teal, $tag-hover-teal);
+  }
+
+  .#{$prefix}--tag--green {
+    @include tag-theme(
+      $tag-background-green,
+      $tag-color-green,
+      $tag-hover-green
+    );
+  }
+
+  .#{$prefix}--tag--gray {
+    @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
+  }
+
+  .#{$prefix}--tag--cool-gray {
+    @include tag-theme(
+      $tag-background-cool-gray,
+      $tag-color-cool-gray,
+      $tag-hover-cool-gray
+    );
+  }
+
+  .#{$prefix}--tag--warm-gray {
+    @include tag-theme(
+      $tag-background-warm-gray,
+      $tag-color-warm-gray,
+      $tag-hover-warm-gray
+    );
+  }
+
+  .#{$prefix}--tag--high-contrast {
+    @include tag-theme(
+      $background-inverse,
+      $text-inverse,
+      $background-inverse-hover
+    );
+  }
+
+  .#{$prefix}--tag--outline {
+    @include tag-theme($background, $text-primary, $layer-hover);
+
+    box-shadow: inset 0 0 0 1px $background-inverse;
+  }
+
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
+    @include tag-theme($layer, $text-disabled);
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$prefix}--tag__label {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--tag--interactive:focus {
+    box-shadow: inset 0 0 0 1px $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--tag--interactive:hover {
+    cursor: pointer;
+  }
+
+  // tags used for filtering
+  .#{$prefix}--tag--filter {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    cursor: pointer;
+
+    &:hover {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--tag--interactive {
+    transition: background-color $duration-fast-01 motion(entrance, productive);
+  }
+
+  .#{$prefix}--tag__close-icon {
+    display: flex;
+    width: rem(24px);
+    height: rem(24px);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    margin: 0 0 0 rem(2px);
+    background-color: transparent;
+    border-radius: 50%;
+    color: currentColor;
+    cursor: pointer;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      box-shadow $duration-fast-01 motion(standard, productive);
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--tag__custom-icon {
+    width: rem(16px);
+    height: rem(16px);
+    flex-shrink: 0;
+    padding: 0;
+    border: 0;
+    margin-right: $spacing-02;
+    background-color: transparent;
+    color: currentColor;
+    outline: none;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 1px $focus-inverse;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+    .#{$prefix}--tag__close-icon:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+    fill: $icon-disabled;
+  }
+
+  // small tags
+  .#{$prefix}--tag--sm {
+    min-height: rem(18px);
+    padding: 0 $spacing-03;
+  }
+
+  .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
+    padding-right: 0;
+  }
+
+  .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
+    width: rem(18px);
+    height: rem(18px);
+    margin-left: rem(5px);
+  }
+
+  // Skeleton state
+  .#{$prefix}--tag.#{$prefix}--skeleton {
+    @include tag-theme(
+      $bg-color: $skeleton-background,
+      $text-color: $text-primary
+    );
+
+    overflow: hidden;
+    width: rem(60px);
+
+    // Safari specific bug (#7672)
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+        transform: translateZ(0);
+      }
+    }
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--tag {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--tag__close-icon svg,
+  .#{$prefix}--tag__custom-icon svg {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    @include high-contrast-mode('focus');
+  }
+  /* stylelint-enable */
+}