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

package/scss/components/Cascade/_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/Cascade/_cascade.scss

@@ -1,51 +1,47 @@
 //
-// Copyright IBM Corp. 20201, 2021
+// Copyright IBM Corp. 2021, 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.
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import 'carbon-components/scss/globals/grid/grid';
+@use '@carbon/react/scss/grid' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-@mixin cascade {
-  $block-class: #{$pkg-prefix}--cascade;
-  $animationProps: $duration--moderate-02 motion(standard, productive) 0s 1;
-  $fadeStart: translateY(3rem);
-  $fadeEnd: translateY(0);
+$block-class: #{c4p-settings.$pkg-prefix}--cascade;
+$animationProps: $duration-moderate-02 motion(standard, productive) 0s 1;
+$fadeStart: translateY(3rem);
+$fadeEnd: translateY(0);
 
-  @keyframes fade {
-    0% {
-      opacity: 0;
-      transform: $fadeStart;
-    }
-
-    100% {
-      opacity: 1;
-      transform: $fadeEnd;
-    }
+@keyframes fade {
+  0% {
+    opacity: 0;
+    transform: $fadeStart;
   }
 
-  .#{$block-class}__element,
-  .#{$block-class}__col {
-    @media (prefers-reduced-motion: no-preference) {
-      // stylelint-disable-next-line carbon/motion-duration-use
-      animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
-      animation-fill-mode: forwards;
-      opacity: 0;
-    }
+  100% {
+    opacity: 1;
+    transform: $fadeEnd;
   }
+}
 
-  //adds cascading delay
-  @for $i from 1 through 8 {
-    .#{$block-class}__element:nth-child(n + #{$i}),
-    .#{$block-class}__col-#{$i} {
-      animation-delay: #{$i * 60}ms;
-    }
+.#{$block-class}__element,
+.#{$block-class}__col {
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: no-preference) {
+    /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
+    animation: $animationProps fade;
+    animation-fill-mode: forwards;
+    opacity: 0;
   }
 }
 
-@include exports('cascade') {
-  @include cascade;
+//adds cascading delay
+@for $i from 1 through 8 {
+  .#{$block-class}__element:nth-child(n + #{$i}),
+  .#{$block-class}__col-#{$i} {
+    animation-delay: #{$i * 60}ms;
+  }
 }

package/scss/components/Cascade/_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 './cascade';

package/scss/components/Cascade/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './cascade';
+@use './cascade';

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

@@ -5,7 +5,8 @@
 // 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 *;
 
 #root {
   width: 100%;
@@ -16,8 +17,8 @@
   width: 400px;
   height: 300px;
   margin: $spacing-04;
-  background-color: $ui-05;
-  color: $text-04;
+  background-color: $layer-selected-inverse;
+  color: $text-on-color;
 }
 
 .grid-box {
@@ -27,6 +28,6 @@
   align-items: center;
   justify-content: center;
   margin-bottom: $spacing-03;
-  background-color: $ui-05;
-  color: $text-04;
+  background-color: $layer-selected-inverse;
+  color: $text-on-color;
 }

package/scss/components/ComboButton/_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.
+//
+
+// ComboButton uses the following Carbon components:
+// Button, OverflowMenu
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/ComboButton/_combo-button.scss

@@ -1,65 +1,76 @@
 //
-// 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.
 //
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+$security--prefix: security;
 
-@include exports($name: combo-button) {
-  /// Sets the prefix for all IBM Security-specific classes.
-  /// @access private
-  /// @type String
-  $security--prefix: security;
+.#{$security--prefix}--combo-button {
+  position: relative;
+  display: inline-flex;
+}
 
-  .#{$security--prefix}--combo-button {
-    position: relative;
-    display: inline-flex;
-  }
+.#{$security--prefix}--combo-button__action {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .#{$security--prefix}--combo-button__action {
-    @include text-overflow;
-  }
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu {
+  width: $spacing-09;
+  height: auto;
+  border-left: $spacing-01 solid $border-subtle-01;
+  background-color: $background-brand;
+}
 
-  .#{$security--prefix}--combo-button
-    .#{$security--prefix}--combo-button__overflow-menu {
-    width: carbon--mini-units($count: 6);
-    height: auto;
-    border-left: carbon--rem($px: 1px) solid $ui-03;
-    background-color: $interactive-01;
-  }
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:hover,
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open,
+.#{$security--prefix}--combo-button
+  .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open:hover,
+.#{$security--prefix}--combo-button
+  .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+  background-color: $button-primary-hover;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu:hover,
-  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu--open {
-    background-color: $hover-primary;
-  }
+.#{$security--prefix}--combo-button
+  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  width: 0;
+  height: 0;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu:active {
-    background-color: $active-primary;
-  }
+.#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
+  background-color: $button-primary-active;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu__icon {
-    fill: $icon-03;
-    pointer-events: none;
-  }
+.#{$security--prefix}--combo-button__overflow-menu__icon {
+  fill: $icon-on-color;
+  pointer-events: none;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu__list {
-    width: 100%;
-  }
+.#{$security--prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
+  left: 0;
+  width: 100%;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu__list:after {
-    display: none;
-  }
+.#{$security--prefix}--combo-button__overflow-menu__list:after {
+  display: none;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu__item {
-    max-width: none;
-  }
+.#{$security--prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
+  max-width: 100%;
+}
 
-  .#{$security--prefix}--combo-button__overflow-menu__item__icon {
-    margin-left: auto;
-  }
+.#{$security--prefix}--combo-button__overflow-menu__item__icon {
+  margin-left: auto;
 }

package/scss/components/ComboButton/_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 './combo-button';

package/scss/components/ComboButton/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './combo-button';
+@use './combo-button';

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

@@ -0,0 +1,17 @@
+//
+// 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.
+//
+
+// CreateFullPage uses the following Carbon components:
+// Grid, Row, Column, Form, ProgressIndicator, ProgressStep, Toggle,
+// ComposedModal, ModalHeader, ModalBody, ModalFooter, Button
+// Other Carbon settings.
+@use '@carbon/react/scss/grid';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/progress-indicator';
+@use '@carbon/react/scss/components/toggle';
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/button';

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -6,175 +6,169 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// Other Carbon settings.
-@import 'carbon-components/scss/globals/grid/grid';
-
-// CreateFullPage uses the following Carbon components:
-// Grid, Row, Column, Form, ProgressIndicator, ProgressStep, Toggle,
-// ComposedModal, ModalHeader, ModalBody, ModalFooter, Button
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
-@import 'carbon-components/scss/components/toggle/toggle';
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // CreateFullPage uses the following IBM Products components:
 // ActionSet, CreateInfluencer
-@import '../CreateInfluencer/index';
-@import '../ActionSet/action-set';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin create-full-page {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--create-full-page;
-  $step-block-class: #{$pkg-prefix}--create-full-page__step;
-
-  .#{$block-class} .#{$block-class} {
-    color: $text-01;
-  }
+@use '../CreateInfluencer/index' as *;
+@use '../ActionSet/action-set' as *;
 
-  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
-    padding-top: $spacing-06;
-    margin-right: 0;
-    margin-left: 0;
-  }
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
+$step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
-  .#{$block-class} .#{$step-block-class}__step--hidden-step {
-    display: none;
-  }
+.#{$block-class} .#{$block-class} {
+  color: $text-primary;
+}
 
-  .#{$block-class} .#{$step-block-class}__step--visible-step {
-    display: block;
-  }
+.#{$block-class}
+  .#{$block-class}__content
+  .#{c4p-settings.$carbon-prefix}--grid {
+  padding-top: $spacing-06;
+  margin-right: 0;
+  margin-left: 0;
+}
 
-  .#{$block-class} .#{$block-class}__step-subtitle {
-    @include carbon--type-style('productive-heading-01');
+.#{$block-class} .#{$step-block-class}__step--hidden-step {
+  display: none;
+}
 
-    max-width: 50%;
-    margin-bottom: $spacing-03;
-  }
+.#{$block-class} .#{$step-block-class}__step--visible-step {
+  display: block;
+}
 
-  .#{$block-class} .#{$block-class}__step-description {
-    @include carbon--type-style('body-long-01');
+.#{$block-class} .#{$block-class}__step-subtitle {
+  @include type.type-style('productive-heading-01');
 
-    max-width: 50%;
-    margin-bottom: $spacing-06;
-  }
+  max-width: 50%;
+  padding-left: $spacing-08;
+  margin-bottom: $spacing-03;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--fieldset {
-    margin-bottom: 0;
-  }
+.#{$block-class} .#{$block-class}__step-description {
+  @include type.type-style('body-long-01');
 
-  .#{$block-class} .#{$block-class}__step-fieldset > * {
-    margin-bottom: $spacing-05;
-  }
+  max-width: 50%;
+  padding-left: $spacing-08;
+  margin-bottom: $spacing-06;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
+}
 
-  .#{$block-class} {
-    display: flex;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-  }
+.#{$block-class} .#{$block-class}__step-fieldset > * {
+  margin-bottom: $spacing-05;
+}
 
-  .#{$block-class} .#{$block-class}__left-nav {
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-    overflow-y: auto;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
 
-  .#{$block-class} .#{$block-class}__body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
+.#{$block-class} {
+  display: flex;
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+}
 
-  .#{$block-class} .#{$block-class}__main {
-    display: flex;
-    max-height: 100%;
-    flex-direction: column;
-    flex-grow: 1;
-  }
+.#{$block-class} .#{$block-class}__left-nav {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  overflow-y: auto;
+}
 
-  .#{$block-class} .#{$block-class}__content {
-    overflow: auto;
-    flex-grow: 1;
-    background-color: $ui-background;
-    color: $text-01;
-    overflow-x: hidden;
-  }
+.#{$block-class} .#{$block-class}__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
-  .#{$block-class} .#{$block-class}__step {
-    position: relative;
-    padding-bottom: $spacing-07;
-  }
+.#{$block-class} .#{$block-class}__main {
+  display: flex;
+  max-height: 100%;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
-    top: 0;
-    height: min-content;
-    padding-top: 0;
-    border-right: 1px solid $ui-03;
-    background-color: transparent;
-    grid-row: 1;
-    overflow-x: auto;
-  }
+.#{$block-class} .#{$block-class}__content {
+  overflow: auto;
+  flex-grow: 1;
+  padding-top: $spacing-06;
+  background-color: $background;
+  color: $text-primary;
+  overflow-x: hidden;
+}
 
-  .#{$block-class} .#{$block-class}__section-divider {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 1px;
-    margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
-      calc(-1 * #{$spacing-08});
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 1px;
-      background-color: $ui-03;
-      content: '';
-    }
+.#{$block-class} .#{$block-class}__step {
+  position: relative;
+  padding-bottom: $spacing-07;
+  .#{c4p-settings.$carbon-prefix}--css-grid {
+    margin-left: 0;
   }
+}
 
-  .#{$block-class} .#{$block-class}__step-title {
-    @include carbon--type-style('productive-heading-04');
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  top: 0;
+  height: min-content;
+  padding-top: 0;
+  border-right: 1px solid $border-subtle-01;
+  background-color: transparent;
+  grid-row: 1;
+  overflow-x: auto;
+}
 
-    max-width: 50%;
-    margin-bottom: $spacing-05;
+.#{$block-class} .#{$block-class}__section-divider {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 1px;
+  margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
+    calc(-1 * #{$spacing-08});
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 1px;
+    background-color: $layer-accent-01;
+    content: '';
   }
+}
 
-  .#{$block-class} .#{$block-class}__influencer {
-    display: grid;
-    flex: 0 0 257px;
-    border-right: 1px solid $ui-03;
-    background-color: $ui-01;
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr auto;
-  }
+.#{$block-class} .#{$block-class}__step-title {
+  @include type.type-style('productive-heading-04');
 
-  .#{$block-class} .#{$block-class}__progress-indicator {
-    padding: $spacing-06;
-  }
+  max-width: 50%;
+  padding-left: $spacing-08;
+  margin-bottom: $spacing-05;
+}
 
-  .#{$block-class} .#{$block-class}__influencer-toggle {
-    padding: $spacing-06;
-    grid-column: 1 / -1;
-    grid-row: -1 / -1;
-  }
+.#{$block-class} .#{$block-class}__influencer {
+  display: grid;
+  flex: 0 0 257px;
+  border-right: 1px solid $layer-accent-01;
+  background-color: $layer-01;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+}
 
-  .#{$block-class} .#{$block-class}__buttons {
-    border-top: 1px solid $ui-03;
-  }
+.#{$block-class}
+  .#{$block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
+  padding: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__influencer-toggle {
+  padding: $spacing-06;
+  grid-column: 1 / -1;
+  grid-row: -1 / -1;
 }
 
-@include exports('create-full-page') {
-  @include create-full-page;
+.#{$block-class} .#{$block-class}__buttons {
+  border-top: 1px solid $layer-accent-01;
 }

package/scss/components/CreateFullPage/_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 './create-full-page';

package/scss/components/CreateFullPage/_index.scss

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