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

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

@@ -5,20 +5,22 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
-@import 'carbon-components/scss/components/ui-shell/ui-shell';
-@import 'carbon-components/scss/components/data-table/data-table';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/react/scss/components/ui-shell';
+@use '@carbon/react/scss/components/data-table';
+@use '@carbon/react/scss/components/button';
 
 $story-class: 'page-header-stories';
 
 // cspell:disable-next-line
 .sbdocs .#{$story-class}__viewport {
   max-height: 500px;
-  background-color: $ui-background;
-  box-shadow: 0 0 4px 1px $ui-03;
-  color: $text-01;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $layer-accent-01;
+  color: $text-primary;
   overflow-y: auto;
 }
 
@@ -34,22 +36,24 @@ $story-class: 'page-header-stories';
   position: relative; // used to raise the stacking context and check it still goes under the page header
   padding-top: $spacing-05;
   margin-top: $spacing-05;
-  background-color: $ui-background;
-  color: $text-01;
+  background-color: $background;
+  color: $text-primary;
 }
 
 .#{$story-class}__dummy-content-block {
   min-height: 120vh;
-  background: $ui-01;
+  background: $layer-01;
   background-clip: content-box;
 }
 
 .#{$story-class}__dummy-content-text {
+  @include type.type-style('body-compact-01');
+
   padding: $spacing-05;
 }
 
 .#{$story-class}__status-icon {
-  fill: $support-02;
+  fill: $support-success;
   vertical-align: middle;
 }
 

package/scss/components/ProductiveCard/_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/ProductiveCard/_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 './productive-card';

package/scss/components/ProductiveCard/_index.scss

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

package/scss/components/ProductiveCard/_productive-card.scss

@@ -5,67 +5,62 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// Standard imports.
-@import '../../global/styles/project-settings';
-
 // ProductiveCard uses the following IBM Products components:
 // Card
-@import '../Card/card';
-
-@mixin card-productive {
-  $block-class: #{$pkg-prefix}--card;
+@use '../Card/card' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-  .#{$block-class}__productive {
-    .#{$block-class}__header {
-      padding-right: 0;
-    }
+$block-class: #{c4p-settings.$pkg-prefix}--card;
 
-    .#{$block-class}__title {
-      @include carbon--type-style('productive-heading-02');
-    }
+.#{$block-class}__productive {
+  .#{$block-class}__header {
+    padding-right: 0;
+  }
 
-    .#{$block-class}__title-lg .#{$block-class}__title {
-      @include carbon--type-style('productive-heading-03');
-    }
+  .#{$block-class}__title {
+    @include type.type-style('productive-heading-02');
+  }
 
-    .#{$block-class}__body {
-      padding-top: $spacing-03;
-    }
+  .#{$block-class}__title-lg .#{$block-class}__title {
+    @include type.type-style('productive-heading-03');
+  }
 
-    .#{$block-class}__footer {
-      align-items: center;
-      justify-content: space-between;
-      border-top: 1px solid $ui-03;
-    }
+  .#{$block-class}__body {
+    padding-top: $spacing-03;
+  }
 
-    .#{$block-class}__footer-no-button {
-      justify-content: flex-end;
-    }
+  .#{$block-class}__footer {
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid theme.$border-subtle-01;
+  }
 
-    .#{$block-class}__actions {
-      margin: 0;
-    }
+  .#{$block-class}__footer-no-button {
+    justify-content: flex-end;
+  }
 
-    .#{$block-class}__actions-header {
-      margin-top: calc(-1 * #{$spacing-02});
-      margin-right: $spacing-03;
-    }
+  .#{$block-class}__actions {
+    margin: 0;
+  }
 
-    .#{$block-class}__title-lg .#{$block-class}__actions-header,
-    .#{$block-class}__header-has-label .#{$block-class}__actions-header {
-      margin-top: 0;
-    }
+  .#{$block-class}__actions-header {
+    margin-top: calc(-1 * #{$spacing-02});
+    margin-right: $spacing-03;
+  }
 
-    .#{$block-class}__icon {
-      margin-right: $spacing-05;
-    }
+  .#{$block-class}__title-lg .#{$block-class}__actions-header,
+  .#{$block-class}__header-has-label .#{$block-class}__actions-header {
+    margin-top: 0;
+  }
 
-    .#{$block-class}__header-container {
-      align-items: start;
-    }
+  .#{$block-class}__icon {
+    margin-right: $spacing-05;
   }
-}
 
-@include exports('card-productive') {
-  @include card-productive;
+  .#{$block-class}__header-container {
+    align-items: start;
+  }
 }

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

@@ -1,21 +1,22 @@
 //
-// 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 './index';
 // shared card styles can be found in the Card folder
-@import '../Card/storybook-styles';
+@use '../Card/storybook-styles';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 .graph {
   width: 200px;
   height: 100px;
-  border: 10px solid $ui-03;
-  border-right-color: $support-02;
+  border: 10px solid $border-subtle-01;
+  border-right-color: $support-success;
   border-bottom: 0;
-  border-left-color: $support-01;
+  border-left-color: $support-error;
   margin: 0 auto $spacing-06 auto;
   border-top-left-radius: 110px;
   border-top-right-radius: 110px;

package/scss/components/RemoveModal/_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.
+//
+
+// RemoveModal uses the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/text-input';

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

package/scss/components/RemoveModal/_index.scss

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

package/scss/components/RemoveModal/_remove-modal.scss

@@ -1,40 +1,31 @@
 //
-// 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.
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-// RemoveModal uses the following Carbon components:
-// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/text-input/text-input';
+$block-class: #{c4p-settings.$pkg-prefix}--remove-modal;
 
-@mixin remove-modal {
-  $block-class: #{$pkg-prefix}--remove-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
-    max-width: none;
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--modal-content {
-    padding-right: $spacing-05;
-  }
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-width: none;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-right: $spacing-05;
+}
 
-  .#{$block-class}__body {
-    padding-right: 20%;
-    margin-bottom: $spacing-05;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
 }
 
-@include exports('remove-modal') {
-  @include remove-modal;
+.#{$block-class}__body {
+  padding-right: 20%;
+  margin-bottom: $spacing-05;
 }

package/scss/components/Saving/_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.
+//
+
+// Saving uses the following Carbon components:
+// Button, InlineLoading
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/inline-loading';

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

package/scss/components/Saving/_index.scss

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

package/scss/components/Saving/_saving.scss

@@ -1,42 +1,34 @@
 //
-// 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/styles/scss/type';
+@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
 
-// Saving uses the following Carbon components:
-// Button, InlineLoading
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/inline-loading/inline-loading';
+$block-class: #{c4p-settings.$pkg-prefix}--saving;
 
-@mixin saving {
-  $block-class: #{$pkg-prefix}--saving;
-
-  .#{$block-class}__message {
-    display: flex;
-  }
-
-  .#{$block-class}__error-icon {
-    margin-right: $spacing-05;
-  }
+.#{$block-class}__message {
+  display: flex;
+}
 
-  .#{$block-class}__error-icon svg {
-    fill: $danger-01;
-  }
+.#{$block-class}__error-icon {
+  margin-right: $spacing-05;
+}
 
-  .#{$block-class}__text {
-    @include carbon--type-style('body-short-01');
-  }
+.#{$block-class}__error-icon svg {
+  fill: $button-danger-primary;
+}
 
-  .#{$block-class}__buttons {
-    display: flex;
-  }
+.#{$block-class}__text {
+  @include type.type-style('body-short-01');
 }
 
-@include exports('saving') {
-  @include saving;
+.#{$block-class}__buttons {
+  display: flex;
 }

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/spacing' as *;
 
 .saving-story-textarea {
   margin-bottom: $spacing-03;

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

package/scss/components/SidePanel/_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 './side-panel';

package/scss/components/SidePanel/_index.scss

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

package/scss/components/SidePanel/_side-panel-variables.scss

@@ -10,5 +10,5 @@ $side-panel-sizes: (
   sm: 20rem,
   md: 30rem,
   lg: 40rem,
-  max: 75%,
+  2xl: 75%,
 );