@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

package/scss/components/SidePanel/_storybook-styles.scss

@@ -5,7 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
 $story-prefix: side-panel-stories__;
 
@@ -22,15 +24,15 @@ $story-prefix: side-panel-stories__;
     position: relative;
   }
   .#{$story-prefix}text-area-container .#{$story-prefix}allowed-characters {
-    @include carbon--type-style('label-01');
+    @include type.type-style('label-01');
 
     position: absolute;
     right: 0;
-    color: $text-02;
+    color: $text-secondary;
   }
   .#{$story-prefix}text-area-container
     .#{$story-prefix}allowed-characters-invalid {
-    color: $support-01;
+    color: $support-error;
   }
   .#{$story-prefix}content-subtitle {
     margin: $spacing-05 0 $spacing-04;

package/scss/components/SingleAddSelect/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/SingleAddSelect/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './single-add-select';

package/scss/components/SingleAddSelect/_index.scss

@@ -1 +1 @@
-@import './single-add-select';
+@use './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -1 +1 @@
-@import '../AddSelect/add-select';
+@use '../AddSelect/add-select';

package/scss/components/StatusIcon/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/StatusIcon/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './status-icon';

package/scss/components/StatusIcon/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './status-icon';
+@use './status-icon';

package/scss/components/StatusIcon/_status-icon.scss

@@ -1,57 +1,58 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
+@use '@carbon/react/scss/colors' as *;
+@use '../../global/styles/project-settings' as *;
 
 $colors: (
   fatal: (
-    light: $carbon--black-100,
-    dark: $carbon--gray-50,
+    light: $black-100,
+    dark: $gray-50,
   ),
   critical: (
-    light: $carbon--red-60,
-    dark: $carbon--red-50,
+    light: $red-60,
+    dark: $red-50,
   ),
   major-warning: (
-    light: $carbon--orange-40,
-    dark: $carbon--orange-40,
+    light: $orange-40,
+    dark: $orange-40,
   ),
   minor-warning: (
-    light: $carbon--yellow-20,
-    dark: $carbon--yellow-20,
+    light: $yellow-20,
+    dark: $yellow-20,
   ),
   undefined: (
-    light: $carbon--purple-60,
-    dark: $carbon--purple-50,
+    light: $purple-60,
+    dark: $purple-50,
   ),
   unknown: (
-    light: $carbon--gray-60,
-    dark: $carbon--gray-50,
+    light: $gray-60,
+    dark: $gray-50,
   ),
   normal: (
-    light: $carbon--green-60,
-    dark: $carbon--green-50,
+    light: $green-60,
+    dark: $green-50,
   ),
   info: (
-    light: $carbon--blue-60,
-    dark: $carbon--blue-50,
+    light: $blue-60,
+    dark: $blue-50,
   ),
   in-progress: (
-    light: $carbon--blue-60,
-    dark: $carbon--blue-50,
+    light: $blue-60,
+    dark: $blue-50,
   ),
   running: (
-    light: $carbon--green-60,
-    dark: $carbon--green-50,
+    light: $green-60,
+    dark: $green-50,
   ),
   pending: (
-    light: $carbon--gray-60,
-    dark: $carbon--gray-50,
+    light: $gray-60,
+    dark: $gray-50,
   ),
 );
 
@@ -96,7 +97,7 @@ $block-class: #{$pkg-prefix}--status-icon;
 .#{$block-class}--light.#{$block-class}--light-minor-warning,
 .#{$block-class}--dark.#{$block-class}--dark-minor-warning {
   // stylelint-disable-next-line carbon/theme-token-use
-  fill: $carbon--yellow-20;
+  fill: $yellow-20;
 }
 
 .#{$block-class}--light.#{$block-class}--light-major-warning
@@ -106,13 +107,15 @@ $block-class: #{$pkg-prefix}--status-icon;
   path:nth-of-type(1),
 .#{$block-class}--dark.#{$block-class}--dark-minor-warning path:nth-of-type(1) {
   // stylelint-disable-next-line carbon/theme-token-use
-  fill: $carbon--gray-100;
+  fill: $gray-100;
 }
 
 @each $theme in $themes {
   @each $icon in $icons {
     @each $theme-key in $themes {
-      .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger
+      .#{$carbon-prefix}--btn--ghost:not([disabled])
+        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
+      .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger
         .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
       .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
         @if $icon == in-progress {

package/scss/components/TagSet/_carbon-imports.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// TagSet uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalBody, Search, Link, Tag, Tooltip
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/search';
+@use '@carbon/react/scss/components/link';
+@use '@carbon/react/scss/components/tag';
+@use '@carbon/react/scss/components/popover';

package/scss/components/TagSet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './tag-set';

package/scss/components/TagSet/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './tag-set';
+@use './tag-set';

package/scss/components/TagSet/_storybook-styles.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/display-box';
+@use '../../global/styles/display-box' as *;

package/scss/components/TagSet/_tag-set.scss

@@ -6,162 +6,174 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
-
-// TagSet uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalBody, Search, Link, Tag, Tooltip
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/search/search';
-@import 'carbon-components/scss/components/link/link';
-@import 'carbon-components/scss/components/tag/tag';
-@import 'carbon-components/scss/components/tooltip/tooltip';
-
-$block-class: #{$pkg-prefix}--tag-set;
-$block-class-overflow: #{$block-class}-overflow;
-$block-class-modal: #{$block-class}-modal;
-
-@mixin tag-set {
-  @include block-wrap($block-class) {
-    &.#{$block-class} {
-      display: block;
-      width: 100%;
-    }
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as *;
+@use '../../global/styles/mixins' as *;
+
+$_block-class: #{$pkg-prefix}--tag-set;
+$block-class-overflow: #{$_block-class}-overflow;
+$block-class-modal: #{$_block-class}-modal;
+
+@include block-wrap($_block-class) {
+  &.#{$_block-class} {
+    display: block;
+    width: 100%;
+  }
 
-    .#{$block-class}__space {
-      position: relative;
-      display: block;
-      width: 100%;
-      white-space: nowrap;
-    }
+  .#{$_block-class}__space {
+    position: relative;
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+  }
 
-    .#{$block-class}__space--align-end {
-      text-align: end;
-    }
+  .#{$_block-class}__space--align-end {
+    text-align: end;
+  }
 
-    .#{$block-class}__space--align-center {
-      text-align: center;
-    }
+  .#{$_block-class}__space--align-center {
+    text-align: center;
+  }
 
-    .#{$block-class}__tag-container {
-      display: inline-flex; // needed to register a width
-      white-space: nowrap;
-    }
+  .#{$_block-class}__tag-container {
+    display: inline-flex; // needed to register a width
+    white-space: nowrap;
+  }
 
-    .#{$block-class}__tag-container--multiline {
-      flex-wrap: wrap;
-    }
+  .#{$_block-class}__tag-container--multiline {
+    flex-wrap: wrap;
+  }
 
-    .#{$block-class}__tag-container--hidden {
-      // This tag container is used to measure the width of all displayable tags
-      @include measuring-container;
-    }
+  .#{$_block-class}__tag-container--hidden {
+    // This tag container is used to measure the width of all displayable tags
+    @include measuring-container;
+  }
 
-    .#{$block-class-overflow} {
-      display: inline-block;
-      vertical-align: bottom;
+  .#{$block-class-overflow} {
+    display: inline-block;
+    vertical-align: bottom;
+    .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
+      border: 0;
     }
 
-    .#{$block-class-overflow}--hidden {
-      overflow: hidden;
-      max-width: 0;
-      visibility: hidden;
+    .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
+      padding: $spacing-05;
     }
   }
 
-  @include block-wrap('#{$block-class-modal}') {
-    &.#{$block-class-modal} {
-      // not to be overridden by use in tag set
-      text-align: initial;
-      white-space: initial;
-    }
+  .#{$block-class-overflow}--hidden {
+    overflow: hidden;
+    max-width: 0;
+    visibility: hidden;
+  }
+}
 
-    .#{$block-class-modal}__container {
-      @include carbon--breakpoint(md) {
-        height: 90%;
-        max-height: 450px;
-      }
-    }
+@include block-wrap('#{$block-class-modal}') {
+  &.#{$block-class-modal} {
+    // not to be overridden by use in tag set
+    text-align: initial;
+    white-space: initial;
+  }
 
-    .#{$block-class-modal}__search {
-      margin-top: $spacing-05;
-      margin-bottom: 0;
+  .#{$block-class-modal}__container {
+    @include breakpoint(md) {
+      height: 90%;
+      max-height: 450px;
     }
+  }
 
-    &.#{$block-class-modal} .#{$block-class-modal}__fade {
-      position: relative;
-      margin-right: $spacing-05;
-      margin-left: $spacing-05;
-    }
+  .#{$block-class-modal}__search {
+    margin-top: $spacing-05;
+    margin-bottom: 0;
+  }
 
-    .#{$block-class-modal}__body {
-      padding-bottom: $spacing-06;
-    }
+  &.#{$block-class-modal} .#{$block-class-modal}__fade {
+    position: relative;
+    margin-right: $spacing-05;
+    margin-left: $spacing-05;
+  }
 
-    .#{$block-class-modal}__header {
-      padding-right: 0;
-      margin-right: $spacing-05;
-    }
+  .#{$block-class-modal}__body {
+    padding-bottom: $spacing-06;
+  }
 
-    &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
-      position: absolute;
-      top: calc(-1 * #{$spacing-11});
-      left: 0;
-      width: 100%;
-      height: $spacing-07;
-      background: linear-gradient(to bottom, transparent, $ui-01);
-      content: '';
-    }
+  .#{$block-class-modal}__header {
+    padding-right: 0;
+    margin-right: $spacing-05;
   }
 
-  @include block-wrap('#{$block-class-overflow}__tooltip') {
-    &.#{$block-class-overflow}__tooltip {
-      // removes the min width in Carbon
-      min-width: initial;
-      text-align: left;
-    }
+  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
+    position: absolute;
+    top: calc(-1 * #{$spacing-11});
+    left: 0;
+    width: 100%;
+    height: $spacing-07;
+    background: linear-gradient(to bottom, transparent, $layer-01);
+    content: '';
+  }
+}
 
-    .#{$block-class-overflow}__show-all-tags-link {
-      display: inline-block;
-      margin: $spacing-03 0 $spacing-02; // to match the tags
-    }
+@include block-wrap('#{$block-class-overflow}__tagset-popover') {
+  &.#{$block-class-overflow}__tagset-popover {
+    // removes the min width in Carbon
+    min-width: initial;
+    text-align: left;
+  }
 
-    .#{$block-class-overflow}__tag-item,
-    .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
-      @include carbon--type-style('body-short-01');
-
-      display: block;
-      overflow: hidden;
-      min-width: initial;
-      min-height: initial;
-      padding: 0;
-      margin: 0;
-      background-color: inherit;
-      color: inherit;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  .#{$block-class-overflow}__popover-trigger {
+    font-family: inherit;
+  }
 
-    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
-      // undo override by .#{$carbon-prefix}--tooltip button
-      padding: 0;
-    }
+  .#{$block-class-overflow}__show-all-tags-link.#{$carbon-prefix}--link:visited {
+    display: inline-block;
+    margin: $spacing-03 0 $spacing-02; // to match the tags
+    color: $link-inverse;
+  }
 
-    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag--high-contrast {
-      background-color: $ui-background;
-      color: $text-01;
-    }
+  .#{$carbon-prefix}--link:active,
+  .#{$carbon-prefix}--link:active:visited,
+  .#{$carbon-prefix}--link:active:visited:hover {
+    color: $text-inverse;
+  }
 
-    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:hover {
-      background-color: $hover-ui;
-    }
+  .#{$block-class-overflow}__tag-list {
+    margin-bottom: $spacing-03;
+  }
 
-    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:focus {
-      box-shadow: inset 0 0 0 $spacing-01 $focus;
-    }
+  .#{$block-class-overflow}__tag-item,
+  .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+    @include type.type-style('body-short-01');
+
+    display: block;
+    overflow: hidden;
+    min-width: initial;
+    min-height: initial;
+    padding: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
+    // undo override by .#{$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
   }
-}
 
-@include exports('tag-set') {
-  @include tag-set;
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 $spacing-01 $focus;
+  }
 }

package/scss/components/Tearsheet/_carbon-imports.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Tearsheets use the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalBody,
+@use '@carbon/react/scss/components/modal';

package/scss/components/Tearsheet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './tearsheet';

package/scss/components/Tearsheet/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './tearsheet';
+@use './tearsheet';

package/scss/components/Tearsheet/_storybook-styles.scss

@@ -5,20 +5,21 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/spacing' as *;
 
 .tearsheet-stories__dummy-content-block {
-  padding: $layout-02 $layout-03;
+  padding: $spacing-06 $spacing-07;
 }
 
 .tearsheet-stories__narrow-content-block {
-  padding: $layout-01;
+  padding: $spacing-05;
 }
 
 .tearsheet-stories__tabs {
-  margin-left: calc(-1 * #{$layout-01});
+  margin-left: calc(-1 * #{$spacing-05});
 }
 
-.tearsheet-stories__tabs .#{$carbon-prefix}--tab-content {
+.tearsheet-stories__tabs .#{c4p-settings.$carbon-prefix}--tab-content {
   display: none;
 }