@carbon/ibm-products 1.24.0 → 2.0.0-rc.0

package/scss/components/AboutModal/_about-modal.scss

@@ -1,120 +1,128 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// AboutModal uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/tabs/tabs';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin about-modal {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--about-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-container {
-    grid-template-rows: auto auto 1fr auto;
-  }
-
-  .#{$block-class} .#{$block-class}__logo {
-    margin: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__header {
-    padding: 0 20% $spacing-03 $spacing-05;
-    margin-bottom: 0;
-    grid-row: auto;
-  }
-
-  .#{$block-class} .#{$block-class}__title {
-    @include carbon--type-style('productive-heading-04');
-
-    color: $text-01;
-  }
-
-  .#{$block-class} .#{$block-class}__body {
-    @include carbon--type-style('body-short-02');
-
-    min-height: $layout-05;
-    padding: 0 20% 0 $spacing-05;
-    grid-row: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
-    min-height: calc(#{$layout-05} + #{$spacing-08});
-    // stylelint-disable-next-line carbon/layout-token-use
-    margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
-  }
-
-  .#{$block-class}.#{$block-class}--with-tabs
-    .#{$carbon-prefix}--modal-content--overflow-indicator {
-    // stylelint-disable-next-line carbon/layout-token-use
-    bottom: calc(#{$spacing-09} + #{$spacing-08});
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--modal-content--overflow-indicator {
-    background-image: linear-gradient(to bottom, #00000000, $ui-01);
-  }
-
-  .#{$block-class} .#{$block-class}__links-container {
-    margin-top: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__links-container a + a {
-    padding-left: $spacing-03;
-    border-left: 1px solid $text-01;
-    margin-left: $spacing-03;
-  }
-
-  .#{$block-class} .#{$block-class}__legal-text,
-  .#{$block-class} .#{$block-class}__copyright-text {
-    margin-top: $spacing-07;
-    margin-bottom: 0;
-    color: $text-02;
-  }
-
-  .#{$block-class} .#{$block-class}__copyright-text {
-    margin-top: $spacing-05;
-  }
-
-  .#{$block-class} .#{$block-class}__footer {
-    position: relative;
-    height: rem(72px);
-    flex-direction: column;
-    justify-content: center;
-    background-color: $inverse-02;
-    color: $inverse-01;
-  }
-
-  .#{$block-class} .#{$block-class}__tab-container {
-    position: absolute;
-    bottom: 100%;
-  }
-
-  .#{$block-class} .#{$block-class}__version-label,
-  .#{$block-class} .#{$block-class}__version-number {
-    @include carbon--type-style('body-short-01');
-
-    padding-left: $spacing-05;
-    margin-top: 0;
-    margin-bottom: 0;
-    color: $inverse-01;
-  }
-
-  .#{$block-class} .#{$block-class}__version-label {
-    @include carbon--font-weight('semibold');
-  }
-}
-
-@include exports('about-modal') {
-  @include about-modal;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-container {
+  grid-template-rows: auto auto 1fr auto;
+}
+
+.#{$block-class} .#{$block-class}__logo {
+  margin: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__header {
+  padding: 0 20% $spacing-03 $spacing-05;
+  margin-bottom: 0;
+  grid-row: auto;
+}
+
+.#{$block-class} .#{$block-class}__title {
+  @include type.type-style('productive-heading-04');
+
+  color: $text-primary;
+}
+
+.#{$block-class} .#{$block-class}__body {
+  @include type.type-style('body-short-02');
+
+  min-height: $spacing-10;
+  padding: 0 20% 0 $spacing-05;
+  grid-row: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
+  min-height: calc(#{$spacing-10} + #{$spacing-08});
+  // stylelint-disable-next-line carbon/layout-token-use
+  margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
+}
+
+.#{$block-class}.#{$block-class}--with-tabs
+  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  bottom: calc(#{$spacing-09} +#{$spacing-08});
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  background-image: linear-gradient(to bottom, #00000000, $layer-01);
+}
+
+.#{$block-class} .#{$block-class}__links-container {
+  margin-top: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__links-container a + a {
+  padding-left: $spacing-03;
+  border-left: 1px solid $text-primary;
+  margin-left: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__legal-text,
+.#{$block-class} .#{$block-class}__copyright-text {
+  margin-top: $spacing-07;
+  margin-bottom: 0;
+  color: $text-secondary;
+}
+
+.#{$block-class} .#{$block-class}__copyright-text {
+  margin-top: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__footer {
+  position: relative;
+  height: $spacing-03 + $spacing-10;
+  flex-direction: column;
+  justify-content: center;
+  background-color: $background-inverse;
+  color: $text-inverse;
+}
+
+.#{$block-class} .#{$block-class}__tab-container {
+  position: absolute;
+  bottom: 0;
+}
+
+.#{$block-class} .#{$block-class}__version-label,
+.#{$block-class} .#{$block-class}__version-number {
+  @include type.type-style('body-short-01');
+
+  padding-left: $spacing-05;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: $text-inverse;
+}
+
+.#{$block-class} .#{$block-class}__version-label {
+  @include font-weight('semibold');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--tabs
+  .#{c4p-settings.$carbon-prefix}--tabs__nav-link,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
+  @include type.type-style('body-short-01');
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
+  height: $spacing-03 + $spacing-10;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content:not([hidden]) {
+  display: flex;
+  align-items: center;
 }

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

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// AboutModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/tabs';

package/scss/components/AboutModal/_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 './about-modal';

package/scss/components/AboutModal/_index.scss

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

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

@@ -5,7 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 .about-modal-stories--tech-logo {
   width: 2.25rem;

package/scss/components/ActionBar/_action-bar.scss

@@ -6,62 +6,50 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
 
-// ActionBar uses the following Carbon components:
-// Button, OverflowMenu, OverflowMenuItem
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+$_block-class: #{c4p-settings.$pkg-prefix}--action-bar;
+$block-class-overflow-items: #{$_block-class}-overflow-items;
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin action-bar {
-  $block-class: #{$pkg-prefix}--action-bar;
-  $block-class-overflow-items: #{$block-class}-overflow-items;
-
-  @include block-wrap($block-class) {
-    &.#{$block-class} {
-      display: block;
-    }
-
-    .#{$block-class}__displayed-items {
-      display: inline-flex;
-      width: 100%;
-      white-space: nowrap;
-    }
+@include block-wrap($block-class: $_block-class) {
+  &.#{$_block-class} {
+    display: block;
+  }
 
-    .#{$block-class}__displayed-items--right {
-      justify-content: flex-end;
-    }
+  .#{$_block-class}__displayed-items {
+    display: inline-flex;
+    width: 100%;
+    white-space: nowrap;
+  }
 
-    .#{$block-class-overflow-items} {
-      display: inline-block;
-    }
+  .#{$_block-class}__displayed-items--right {
+    justify-content: flex-end;
+  }
 
-    .#{$block-class}__hidden-sizing-items {
-      // This breadcrumb container is used to measure the width of all displayable breadcrumbs
-      @include measuring-container;
-    }
+  .#{$block-class-overflow-items} {
+    display: inline-block;
   }
 
-  @include block-wrap($block-class-overflow-items + '__options') {
-    .#{$block-class-overflow-items}__item {
-      padding: 0 $spacing-03;
-    }
+  .#{$_block-class}__hidden-sizing-items {
+    // This breadcrumb container is used to measure the width of all displayable breadcrumbs
+    @include measuring-container;
+  }
+}
 
-    .#{$block-class-overflow-items}__item-content {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-    }
+@include block-wrap($block-class: $block-class-overflow-items + '__options') {
+  .#{$block-class-overflow-items}__item {
+    padding: 0 $spacing-03;
+  }
 
-    .#{$block-class-overflow-items}__item svg {
-      margin: 0 $spacing-02;
-    }
+  .#{$block-class-overflow-items}__item-content {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
   }
-}
 
-@include exports('action-bar') {
-  @include action-bar;
+  .#{$block-class-overflow-items}__item svg {
+    margin: 0 $spacing-02;
+  }
 }

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// ActionBar uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/overflow-menu';

package/scss/components/ActionBar/_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 './action-bar';

package/scss/components/ActionBar/_index.scss

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

package/scss/components/ActionBar/_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/ActionSet/_action-set.scss

@@ -5,112 +5,104 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
-
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/inline-loading/inline-loading';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin action-set {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--action-set;
-
-  .#{$block-class} {
-    align-items: stretch;
-    justify-content: flex-end;
-    background-color: $ui-01;
-  }
-
-  .#{$block-class} .#{$block-class}__action-button {
-    @include carbon--type-style('body-short-01');
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
+
+.#{$action-set-block-class} {
+  align-items: stretch;
+  justify-content: flex-end;
+  background-color: $layer-01;
+}
 
-    height: $spacing-10;
-    align-items: center;
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-07;
-    margin: 0;
-  }
+.#{$action-set-block-class} .#{$action-set-block-class}__action-button {
+  @include type.type-style('body-short-01');
 
-  .#{$block-class}.#{$carbon-prefix}--btn-set
-    .#{$block-class}__action-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--expressive {
-    max-width: none;
-  }
+  height: $spacing-10;
+  align-items: center;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-07;
+  margin: 0;
+}
 
-  .#{$block-class}:not(.#{$block-class}--stacking)
-    .#{$block-class}__action-button--ghost {
-    padding-left: $spacing-07;
-  }
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
+  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive {
+  max-width: none;
+}
 
-  // For row-single in medium,
-  // or for ghosts in row-single,
-  // buttons are 100% width
-  .#{$block-class}.#{$block-class}--row-single.#{$block-class}--md
-    .#{$block-class}__action-button,
-  .#{$block-class}.#{$block-class}--row-single
-    .#{$block-class}__action-button--ghost {
-    flex: 0 0 100%;
-  }
+.#{$action-set-block-class}:not(.#{$action-set-block-class}--stacking)
+  .#{$action-set-block-class}__action-button--ghost {
+  padding-left: $spacing-07;
+}
 
-  // For ghosts in row-double,
-  // buttons are 75% width and expand to use any remaining space
-  .#{$block-class}.#{$block-class}--row-double
-    .#{$block-class}__action-button--ghost {
-    flex: 1 1 75%;
-  }
+// For row-single in medium,
+// or for ghosts in row-single,
+// buttons are 100% width
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single.#{$action-set-block-class}--md
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 0 0 100%;
+}
 
-  // For row-single in large (non-ghost),
-  // or row-double in medium or large,
-  // buttons are 50% width
-  .#{$block-class}.#{$block-class}--row-single.#{$block-class}--lg
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
-  .#{$block-class}.#{$block-class}--row-double.#{$block-class}--md
-    .#{$block-class}__action-button,
-  .#{$block-class}.#{$block-class}--row-double.#{$block-class}--lg
-    .#{$block-class}__action-button,
-  .#{$block-class}.#{$block-class}--row-triple
-    .#{$block-class}__action-button--ghost {
-    flex: 0 1 50%;
-  }
+// For ghosts in row-double,
+// buttons are 75% width and expand to use any remaining space
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 75%;
+}
 
-  // For ghosts in row-triple,
-  // buttons are 50% width and expand to use any remaining space
-  .#{$block-class}.#{$block-class}--row-triple
-    .#{$block-class}__action-button--ghost {
-    flex: 1 1 50%;
-  }
+// For row-single in large (non-ghost),
+// or row-double in medium or large,
+// buttons are 50% width
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--md
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-triple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 0 1 50%;
+}
 
-  // For row-triple in large (non-ghost),
-  // or any non-ghosts in extra large or max,
-  // or row-quadruple (non-ghost),
-  // buttons are 25% width with a max of 232px
-  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-triple.#{$block-class}--lg
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
-  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--xlg
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
-  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--max
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
-  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-quadruple
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost) {
-    max-width: rem(232px);
-    flex: 0 1 25%;
-  }
+// For ghosts in row-triple,
+// buttons are 50% width and expand to use any remaining space
+.#{$action-set-block-class}.#{$action-set-block-class}--row-triple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 50%;
+}
 
-  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-quadruple
-    .#{$block-class}__action-button--ghost {
-    flex: 1 1 25%;
-  }
+// For row-triple in large (non-ghost),
+// or any non-ghosts in extra large or 2xl,
+// or row-quadruple (non-ghost),
+// buttons are 25% width with a 2xl of 232px
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-triple.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--xl
+  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--2xl
+  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
+  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost) {
+  max-width: rem(232px);
+  flex: 0 1 25%;
+}
 
-  .#{$block-class}
-    .#{$block-class}__action-button
-    .#{$carbon-prefix}--inline-loading {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: $spacing-07;
-  }
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 25%;
 }
 
-@include exports('action-set') {
-  @include action-set;
+.#{$action-set-block-class}
+  .#{$action-set-block-class}__action-button
+  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: $spacing-07;
 }

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// ActionBar uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/inline-loading';

package/scss/components/ActionSet/_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 './action-set';

package/scss/components/ActionSet/_index.scss

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