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

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

@@ -1,25 +1,30 @@
 //
-// 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.
 //
-@import '../../global/styles/project-settings';
 
-@import 'carbon-components/scss/components/ui-shell/ui-shell';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/ui-shell' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
 $story-class: 'create-full-page-stories';
-$block-class: #{$pkg-prefix}--create-full-page;
+$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 // cspell:disable-next-line
 .sbdocs .#{$story-class}__viewport {
   height: 100vh;
-  background-color: $ui-background;
-  box-shadow: 0 0 4px 1px $ui-03;
-  color: $text-01;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $border-subtle-01;
+  color: $text-primary;
   overflow-y: auto;
 }
 
-.#{$story-class}__step-fieldset--no-label .#{$carbon-prefix}--fieldset legend {
+.#{$story-class}__step-fieldset--no-label
+  .#{c4p-settings.$carbon-prefix}--fieldset
+  legend {
   position: absolute;
   overflow: hidden;
   width: 1px;
@@ -36,7 +41,7 @@ $block-class: #{$pkg-prefix}--create-full-page;
   left: $spacing-11;
 }
 
-.#{$block-class}__step-fieldset.#{$story-class}__step-fieldset--label.#{$carbon-prefix}--label {
+.#{$block-class}__step-fieldset.#{$story-class}__step-fieldset--label.#{c4p-settings.$carbon-prefix}--label {
   position: absolute;
   overflow: hidden;
   width: 1px;
@@ -46,6 +51,17 @@ $block-class: #{$pkg-prefix}--create-full-page;
   white-space: nowrap;
 }
 
-.#{$carbon-prefix}--form-item {
+.#{c4p-settings.$carbon-prefix}--form-item {
   margin-bottom: $spacing-05;
 }
+
+.#{$story-class}__error--text {
+  @include type.type-style('label-01');
+
+  padding-bottom: $spacing-05;
+}
+
+.#{$block-class}
+  .#{$block-class}__step-description.#{$story-class}__step-description {
+  padding-left: 0;
+}

package/scss/components/CreateInfluencer/_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.
+//
+
+// CreateInfluencer uses the following Carbon components:
+// ProgressIndicator
+@use '@carbon/react/scss/components/progress-indicator';

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -5,87 +5,82 @@
 // 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/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
-
-@mixin create-influencer {
-  $block-class: #{$pkg-prefix}--create-influencer;
-  $create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
-  $influencerAnimationStart: calc(-1 * #{$spacing-05});
-  @keyframes influencer-menu-entrance {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX($influencerAnimationStart);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
+$influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer;
+$create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
+$influencerAnimationStart: calc(-1 * #{$spacing-05});
+@keyframes influencer-menu-entrance {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateX($influencerAnimationStart);
   }
-  @keyframes influencer-menu-exit {
-    0% {
-      opacity: 1;
-      transform: translateX(0);
-    }
 
-    100% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX($influencerAnimationStart);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
   }
-  .#{$block-class} {
-    display: grid;
-    height: 100%;
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr auto;
+}
+@keyframes influencer-menu-exit {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
   }
 
-  .#{$block-class}__left-nav {
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-    overflow-y: auto;
+  100% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateX($influencerAnimationStart);
   }
+}
+.#{$influencer-block-class} {
+  display: grid;
+  height: 100%;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+}
 
-  .#{$block-class}__progress-indicator {
-    padding: $spacing-06;
-  }
+.#{$influencer-block-class}__left-nav {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  overflow-y: auto;
+}
 
-  .#{$block-class}__view-all-toggle {
-    padding: $spacing-06;
-    grid-column: 1 / -1;
-    grid-row: -1 / -1;
-  }
-  .#{$block-class}__side-nav-opening,
-  .#{$block-class}__progress-indicator-opening {
-    // stylelint-disable-next-line carbon/motion-easing-use
-    animation: influencer-menu-entrance $duration--moderate-02 1;
-    animation-fill-mode: forwards;
-    @include carbon--motion(entrance, productive);
-  }
+.#{$influencer-block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
+  padding: $spacing-06;
+}
 
-  .#{$block-class}__side-nav-closing,
-  .#{$block-class}__progress-indicator-closing {
-    // stylelint-disable-next-line carbon/motion-easing-use
-    animation: influencer-menu-exit $duration--moderate-02 1;
-    animation-fill-mode: forwards;
-    @include carbon--motion(exit, productive);
-  }
+.#{$influencer-block-class}__view-all-toggle {
+  padding: $spacing-06;
+  grid-column: 1 / -1;
+  grid-row: -1 / -1;
+}
 
-  @media (prefers-reduced-motion) {
-    .#{$block-class}__side-nav-opening,
-    .#{$block-class}__progress-indicator-opening,
-    .#{$block-class}__side-nav-closing,
-    .#{$block-class}__progress-indicator-closing {
-      animation: none;
-      opacity: 1;
-    }
-  }
+.#{$influencer-block-class}__side-nav-opening,
+.#{$influencer-block-class}__progress-indicator-opening {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: influencer-menu-entrance $duration-moderate-02 1;
+  animation-fill-mode: forwards;
+  @include motion(entrance, productive);
+}
+
+.#{$influencer-block-class}__side-nav-closing,
+.#{$influencer-block-class}__progress-indicator-closing {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: influencer-menu-exit $duration-moderate-02 1;
+  animation-fill-mode: forwards;
+  @include motion(exit, productive);
 }
 
-@include exports('create-influencer') {
-  @include create-influencer;
+@media (prefers-reduced-motion) {
+  .#{$influencer-block-class}__side-nav-opening,
+  .#{$influencer-block-class}__progress-indicator-opening,
+  .#{$influencer-block-class}__side-nav-closing,
+  .#{$influencer-block-class}__progress-indicator-closing {
+    animation: none;
+    opacity: 1;
+  }
 }

package/scss/components/CreateInfluencer/_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-influencer';

package/scss/components/CreateInfluencer/_index.scss

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

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// CreateModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/button';

package/scss/components/CreateModal/_create-modal.scss

@@ -6,79 +6,76 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// CreateModal uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+.#{c4p-settings.$pkg-prefix}--create-modal {
+  background-color: $background;
+}
 
-@mixin create-modal {
-  .#{$pkg-prefix}--create-modal {
-    background-color: $ui-background;
-  }
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
 
-  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-close {
-    display: none;
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-container {
+  @include breakpoint(md) {
+    max-height: 95%;
   }
-
-  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-container {
-    @include carbon--breakpoint(md) {
-      max-height: 95%;
-    }
-    @include carbon--breakpoint(lg) {
-      max-height: 95%;
-    }
+  @include breakpoint(lg) {
+    max-height: 95%;
   }
+}
 
-  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-header {
-    padding-right: 20%;
-    padding-bottom: $spacing-03;
-    border-bottom: 1px solid $ui-03;
-    margin-bottom: 0;
-  }
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-header {
+  padding-right: 20%;
+  padding-bottom: $spacing-03;
+  border-bottom: 1px solid $layer-accent-01;
+  margin-bottom: 0;
+}
 
-  .#{$pkg-prefix}--create-modal
-    .#{$carbon-prefix}--modal-footer
-    .#{$carbon-prefix}--btn {
-    max-width: none;
-  }
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-width: none;
+}
 
-  .#{$pkg-prefix}--create-modal__title {
-    @include carbon--type-style('productive-heading-03');
+.#{c4p-settings.$pkg-prefix}--create-modal__title {
+  @include type.type-style('productive-heading-03');
 
-    margin-bottom: $spacing-02;
-  }
+  margin-bottom: $spacing-02;
+}
 
-  .#{$pkg-prefix}--create-modal__subtitle {
-    @include carbon--type-style('body-short-01');
+.#{c4p-settings.$pkg-prefix}--create-modal__subtitle {
+  @include type.type-style('body-short-01');
 
-    margin-bottom: $spacing-03;
-    color: $text-02;
-  }
+  margin-bottom: $spacing-03;
+  color: $text-secondary;
+}
 
-  .#{$pkg-prefix}--create-modal__description {
-    @include carbon--type-style('body-long-01');
+.#{c4p-settings.$pkg-prefix}--create-modal__description {
+  @include type.type-style('body-long-01');
 
-    padding-right: calc(20% - #{$spacing-05});
-    margin: $spacing-03 0 $spacing-05 0;
-  }
+  padding-right: calc(20% - #{$spacing-05});
+  margin: $spacing-03 0 $spacing-05 0;
+}
 
-  .#{$pkg-prefix}--create-modal__form .#{$carbon-prefix}--fieldset {
-    min-width: 100%;
-    margin-bottom: 0;
-  }
+.#{c4p-settings.$pkg-prefix}--create-modal__form
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  min-width: 100%;
+  margin-bottom: 0;
+}
 
-  .#{$pkg-prefix}--create-modal__form > * {
-    margin-bottom: $spacing-05;
+.#{c4p-settings.$pkg-prefix}--create-modal__form > * {
+  margin-bottom: $spacing-05;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:last-child {
+    margin-bottom: 0;
   }
 }
-
-@include exports('create-modal') {
-  @include create-modal;
-}

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

package/scss/components/CreateModal/_index.scss

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

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

@@ -4,48 +4,51 @@
 // 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 './index';
-@import 'carbon-components/scss/components/number-input/number-input';
-@import 'carbon-components/scss/components/text-area/text-area';
-@import 'carbon-components/scss/components/text-input/text-input';
-@import 'carbon-components/scss/components/dropdown/dropdown';
-@import 'carbon-components/scss/components/date-picker/date-picker';
-@import 'carbon-components/scss/components/radio-button/radio-button';
-@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
-@import 'carbon-components/scss/components/tooltip/tooltip';
-@import 'carbon-components/scss/components/modal/modal';
-
-.#{$carbon-prefix}--number {
+
+@use '@carbon/react/scss/components/number-input';
+@use '@carbon/react/scss/components/text-area';
+@use '@carbon/react/scss/components/text-input';
+@use '@carbon/react/scss/components/dropdown';
+@use '@carbon/react/scss/components/date-picker';
+@use '@carbon/react/scss/components/radio-button';
+@use '@carbon/react/scss/components/progress-indicator';
+@use '@carbon/react/scss/components/tooltip';
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/styles/scss/spacing';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+.#{c4p-settings.$carbon-prefix}--number {
   min-width: 100%;
 }
 
-.#{$carbon-prefix}--number__control-btn::before {
+.#{c4p-settings.$carbon-prefix}--number__control-btn::before {
   background-color: transparent;
 }
 
-.#{$carbon-prefix}--number__control-btn::after {
+.#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: transparent;
 }
 
-.#{$carbon-prefix}--date-picker {
+.#{c4p-settings.$carbon-prefix}--date-picker {
   min-width: 100%;
 }
 
-.#{$carbon-prefix}--date-picker-container {
+.#{c4p-settings.$carbon-prefix}--date-picker-container {
   min-width: 100%;
 }
 
-.#{$carbon-prefix}--date-picker.#{$carbon-prefix}--date-picker--single
-  .#{$carbon-prefix}--date-picker__input {
+.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
+  .#{c4p-settings.$carbon-prefix}--date-picker__input {
   min-width: 100%;
 }
 
-.#{$carbon-prefix}--list-box__menu-icon {
-  top: $spacing-03;
+.#{c4p-settings.$carbon-prefix}--list-box__menu-icon {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: spacing.$spacing-03;
 }
 
 .example-wrapper {
   display: grid;
-  grid-gap: $spacing-05;
+  grid-gap: spacing.$spacing-05;
   grid-template-columns: 1fr 1fr;
 }

package/scss/components/CreateSidePanel/_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.
+//
+
+// CreateSidePanel uses the following Carbon components:
+// Form
+@use '@carbon/react/scss/components/form';