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

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -6,12 +6,15 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use './variables' as *;
 
-.#{$carbon-prefix}--data-table tr.#{$block-class}__carbon-nested-row {
+.#{c4p-settings.$carbon-prefix}--data-table
+  tr.#{$block-class}__carbon-nested-row {
   border-left: 1px solid transparent;
 
   .#{$block-class}__cell {
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $layer-accent-01;
   }
 }

package/scss/components/Datagrid/styles/_useNestedTable.scss

@@ -6,23 +6,29 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use './variables';
 
 // used for tables within a expandable row
-.#{block-class}__expanded-row .#{$carbon-prefix}--data-table-container {
-  width: calc(100% - #{$layout-03});
-  border-left: 2px solid $interactive-01;
-  margin-left: $layout-03;
+.#{variables.$block-class}__expanded-row
+  .#{c4p-settings.$carbon-prefix}--data-table-container {
+  width: calc(100% - #{$spacing-07});
+  border-left: 2px solid $background-brand;
+  margin-left: $spacing-07;
   overflow-x: hidden;
 
-  tr.#{$block-class}__carbon-nested-row {
+  tr.#{variables.$block-class}__carbon-nested-row {
     border-left: none;
   }
 }
 
-.#{block-class}__expanded-row .#{$carbon-prefix}--data-table-container th {
+.#{variables.$block-class}__expanded-row
+  .#{c4p-settings.$carbon-prefix}--data-table-container
+  th {
   padding-top: 0;
   padding-bottom: 0;
-  border-top-color: $ui-03;
-  background-color: $ui-03;
+  border-top-color: $layer-accent-01;
+  background-color: $layer-accent-01;
 }

package/scss/components/Datagrid/styles/_useSelectAllToggle.scss

@@ -6,10 +6,11 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/spacing' as *;
+@use './variables';
 
-th.#{$block-class}__select-all-toggle-on,
-td.#{$block-class}__select-all-toggle-on {
+th.#{variables.$block-class}__select-all-toggle-on,
+td.#{variables.$block-class}__select-all-toggle-on {
   /* stylelint-disable-next-line declaration-no-important */
   width: 4.5rem !important;
   /* stylelint-disable-next-line declaration-no-important */
@@ -17,12 +18,12 @@ td.#{$block-class}__select-all-toggle-on {
   box-sizing: border-box;
   flex: 0 0 auto;
 }
-th.#{$block-class}__select-all-toggle-on {
+th.#{variables.$block-class}__select-all-toggle-on {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-th.#{$block-class}__select-all-toggle-on.button {
+th.#{variables.$block-class}__select-all-toggle-on.button {
   margin-left: $spacing-01;
 }

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -6,29 +6,31 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use './variables' as *;
 
 .#{$block-class}__sortableColumn {
-  .#{$carbon-prefix}--table-header-label .header-title {
+  .#{c4p-settings.$carbon-prefix}--table-header-label .header-title {
     display: inline-block;
     width: auto;
   }
-  .#{$carbon-prefix}--table-header-label {
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
     display: block;
     width: 100%;
     height: 100%;
   }
-  .#{$carbon-prefix}--table-header-label button:focus,
-  .#{$carbon-prefix}--table-header-label button:active,
-  .#{$carbon-prefix}--table-header-label button:focus svg {
+  .#{c4p-settings.$carbon-prefix}--table-header-label button:focus,
+  .#{c4p-settings.$carbon-prefix}--table-header-label button:active,
+  .#{c4p-settings.$carbon-prefix}--table-header-label button:focus svg {
     /* stylelint-disable-next-line declaration-no-important */
     background: none !important;
     /* stylelint-disable-next-line declaration-no-important */
-    color: $text-01 !important;
+    color: $text-primary !important;
     /* stylelint-disable-next-line declaration-no-important */
     outline: none !important;
   }
-  .#{$carbon-prefix}--table-header-label button {
+  .#{c4p-settings.$carbon-prefix}--table-header-label button {
     width: 100%;
     min-width: 100%;
     min-height: 0;
@@ -38,18 +40,18 @@
     background: none !important;
     box-shadow: none;
     /* stylelint-disable-next-line declaration-no-important */
-    color: $text-01 !important;
+    color: $text-primary !important;
     font: inherit;
   }
-  .#{$carbon-prefix}--table-header-label button svg {
-    fill: $text-01;
+  .#{c4p-settings.$carbon-prefix}--table-header-label button svg {
+    fill: $text-primary;
     visibility: hidden;
   }
 }
 
 .#{$block-class}__sortableColumn:hover,
 .#{$block-class}__sortableColumn.#{$block-class}__isSorted {
-  .#{$carbon-prefix}--table-header-label svg {
+  .#{c4p-settings.$carbon-prefix}--table-header-label svg {
     visibility: visible;
   }
 }

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -6,33 +6,34 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use './variables';
 
-.#{$block-class}__right-sticky-column-cell {
+.#{variables.$block-class}__right-sticky-column-cell {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay-01;
+  box-shadow: -2px 1px 3px $overlay;
 }
 
-.#{$block-class}__right-sticky-column-header {
+.#{variables.$block-class}__right-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay-01;
+  box-shadow: -2px 1px 3px $overlay;
 }
 
-.#{$block-class}__sticky-noShadow {
+.#{variables.$block-class}__sticky-noShadow {
   box-shadow: none;
 }
 
-.#{$block-class}__sticky-column-noShadow {
-  .#{$block-class}__right-sticky-column-cell {
+.#{variables.$block-class}__sticky-column-noShadow {
+  .#{variables.$block-class}__right-sticky-column-cell {
     box-shadow: none;
   }
 }
 
-.#{$block-class}__right-sticky-column-offset-scroll {
+.#{variables.$block-class}__right-sticky-column-offset-scroll {
   /* stylelint-disable-next-line */
   right: 6px !important; // offset the vertical scroll bar in the table body
 }

package/scss/components/Datagrid/styles/_variables.scss

@@ -4,6 +4,7 @@
 // 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';
 
-$block-class: #{$pkg-prefix}--datagrid;
+@use '../../../global/styles/project-settings';
+
+$block-class: #{project-settings.$pkg-prefix}--datagrid;

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -1,15 +1,19 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2021
+* (c) Copyright IBM Corp. 2021, 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import '../variables';
+@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;
+@use '../variables';
 
-.#{$block-class}__customize-columns-modal {
-  .#{$carbon-prefix}--modal-content {
+.#{variables.$block-class}__customize-columns-modal {
+  .#{c4p-settings.$carbon-prefix}--modal-content {
     position: inherit;
     display: flex;
     flex-flow: column;
@@ -18,31 +22,31 @@
   }
 }
 
-.#{$block-class}__customize-columns-checkbox {
+.#{variables.$block-class}__customize-columns-checkbox {
   display: flex;
   justify-content: center;
   /* stylelint-disable-next-line declaration-no-important */
   margin-bottom: 0 !important; // reset the bottom provided by carbon
 }
 
-.#{$block-class}__customize-columns-modal--actions {
+.#{variables.$block-class}__customize-columns-modal--actions {
   display: flex;
   flex-flow: row;
   margin-bottom: $spacing-06;
 }
 
-.#{$block-class}__customize-columns-modal--actions > button {
+.#{variables.$block-class}__customize-columns-modal--actions > button {
   margin-left: $spacing-05;
 }
 
-.#{$block-class}__customize-columns-instructions {
+.#{variables.$block-class}__customize-columns-instructions {
   margin-bottom: $spacing-06;
-  @include carbon--type-style('body-long-01');
+  @include type.type-style('body-long-01');
 
-  color: $text-01;
+  color: $text-primary;
 }
 
-.#{$block-class}__customize-columns-column-list {
+.#{variables.$block-class}__customize-columns-column-list {
   position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
   overflow: auto;
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -6,18 +6,20 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import '../variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../variables';
 
-.#{$block-class}__row-size-dropdown {
+.#{variables.$block-class}__row-size-dropdown {
   position: absolute;
   padding: $spacing-05;
-  background-color: $ui-background;
+  background-color: $background;
 
-  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
 
-.#{$block-class}__row-size-button--open {
-  background-color: $ui-background;
+.#{variables.$block-class}__row-size-button--open {
+  background-color: $background;
 
-  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }

package/scss/components/EditFullPage/_edit-full-page.scss

@@ -6,29 +6,21 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // Other Carbon settings.
-// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+// TODO: @use 'carbon-components/scss/globals/grid/grid'; if needed
 
 // EditFullPage uses the following Carbon components:
-// TODO: @import(s) of Carbon component styles used by EditFullPage
+// TODO: @use(s) of Carbon component styles used by EditFullPage
 
 // EditFullPage uses the following Carbon for IBM Products components:
-// TODO: @import(s) of IBM Products component styles used by EditFullPage
+// TODO: @use(s) of IBM Products component styles used by EditFullPage
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin edit-full-page {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--edit-full-page;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-full-page;
 
-  .#{$block-class} {
-    // TODO: Styles.
-  }
-}
-
-@include exports('edit-full-page') {
-  @include edit-full-page;
+.#{$block-class} {
+  // TODO: Styles.
 }

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

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -1,75 +1,66 @@
 //
-// 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';
-@import '../../global/styles/mixins';
-
-// EditSidePanel uses the following Carbon components:
-@import 'carbon-components/scss/components/form/form';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
 
 // EditSidePanel uses the following IBM Products components:
-@import '../SidePanel/side-panel';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin edit-side-panel {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--edit-side-panel;
-  $side-panel-block-class: #{$pkg-prefix}--side-panel;
+@use '../SidePanel/side-panel';
 
-  .#{$block-class} {
-    .#{$carbon-prefix}--form.#{$block-class}__form {
-      padding-top: $spacing-05;
-    }
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
+$side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 
-    .#{$block-class}__form.#{$carbon-prefix}--fieldset {
-      padding-top: $spacing-03;
-    }
+.#{$block-class} {
+  .#{c4p-settings.$carbon-prefix}--form.#{$block-class}__form {
+    padding-top: $spacing-05;
+  }
 
-    .#{$block-class}__form > * {
-      margin-bottom: $spacing-05;
-    }
+  .#{$block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
+    padding-top: $spacing-03;
+  }
 
-    .#{$block-class}__form-title-text {
-      @include carbon--type-style('productive-heading-02');
+  .#{$block-class}__form > * {
+    margin-bottom: $spacing-05;
+  }
 
-      padding-bottom: $spacing-03;
-    }
+  .#{$block-class}__form-title-text {
+    @include type.type-style('productive-heading-02');
 
-    .#{$block-class}__form-description-text {
-      @include carbon--type-style('body-long-01');
-    }
+    padding-bottom: $spacing-03;
+  }
 
-    &.#{$side-panel-block-class}
-      .#{$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
-      display: none;
-    }
+  .#{$block-class}__form-description-text {
+    @include type.type-style('body-long-01');
+  }
 
-    .#{$side-panel-block-class} .#{$block-class}__actions-container {
-      position: absolute;
-      z-index: 4;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      margin-bottom: 0;
-    }
+  &.#{$side-panel-block-class}
+    .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+    display: none;
+  }
 
-    .#{$block-class}__actions-container {
-      position: absolute;
-      z-index: 4;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      margin-bottom: 0;
-    }
+  .#{$side-panel-block-class} .#{$block-class}__actions-container {
+    position: absolute;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin-bottom: 0;
   }
-}
 
-@include exports('edit-side-panel') {
-  @include edit-side-panel;
+  .#{$block-class}__actions-container {
+    position: absolute;
+    z-index: 4;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    margin-bottom: 0;
+  }
 }

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

package/scss/components/EditSidePanel/_index.scss

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

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

@@ -5,7 +5,9 @@
 // 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 $block-class: #{$pkg-prefix}--edit-side-panel;
 $story-prefix: edit-side-panel-stories__;