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

package/scss/components/Datagrid/styles/{useSortableColumns.scss → _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 → _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 → _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

@@ -0,0 +1,25 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../variables';
+
+.#{variables.$block-class}__row-size-dropdown {
+  position: absolute;
+  padding: $spacing-05;
+  background-color: $background;
+
+  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
+}
+
+.#{variables.$block-class}__row-size-button--open {
+  background-color: $background;
+
+  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__;

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -5,128 +5,130 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion';
+
 // Standard imports.
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // Other Carbon settings.
-@import 'carbon-components/scss/globals/grid/grid';
+@use '@carbon/react/scss/grid' as *;
 
 // EditTearsheet uses the following Carbon components:
-@import 'carbon-components/scss/components/toggle/toggle';
-@import 'carbon-components/scss/components/ui-shell/side-nav';
+@use '@carbon/react/scss/components/toggle/toggle';
+@use '@carbon/react/scss/components/ui-shell/side-nav';
 
 // EditTearsheet uses the following IBM Products components:
 // TearsheetShell
-@import '../Tearsheet/tearsheet';
-@import '../CreateInfluencer/index';
-
-@mixin edit-tearsheet {
-  @keyframes form-content-entrance {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateY(-0.75rem);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  $block-class: #{$pkg-prefix}--tearsheet-edit;
-  $form-block-class: #{$pkg-prefix}--tearsheet-edit__form;
-  $section-block-class: #{$pkg-prefix}--tearsheet-edit__section;
-  $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-edit__section--divider;
-  $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-edit__form--fieldset;
+@use '../Tearsheet/tearsheet';
+@use '../CreateInfluencer/index';
 
-  .#{$block-class} {
-    --#{$block-class}--total-width: 0;
+@keyframes form-content-entrance {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateY(-0.75rem);
   }
 
-  .#{$block-class} .#{$form-block-class}__form--hidden-form {
-    display: none;
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  .#{$block-class} .#{$form-block-class}__form--visible-form {
-    animation-duration: $duration--slow-01;
-    animation-fill-mode: forwards;
-    animation-name: form-content-entrance;
-    animation-timing-function: $carbon--standard-easing;
-    opacity: 0;
-  }
+$block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit;
+$form-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form;
+$section-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__section;
+$tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__section--divider;
+$tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fieldset;
 
-  @media (prefers-reduced-motion) {
-    .#{$block-class} .#{$form-block-class}__form--visible-form {
-      animation: none;
-      opacity: 1;
-    }
-  }
+.#{$block-class} {
+  --#{$block-class}--total-width: 0;
+}
 
-  .#{$block-class} .#{$block-class}__content {
-    height: 100%;
-    padding: $spacing-06;
-    overflow-x: hidden;
-  }
+.#{$block-class} .#{$form-block-class}__form--hidden-form {
+  display: none;
+}
 
-  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
-    padding: 0;
-    margin: 0;
-  }
+.#{$block-class} .#{$form-block-class}__form--visible-form {
+  animation-duration: motion.$duration-slow-01;
+  animation-fill-mode: forwards;
+  animation-name: form-content-entrance;
+  animation-timing-function: motion.$standard-easing;
+  opacity: 0;
+}
 
-  .#{$block-class} .#{$block-class}__form--heading {
-    padding-bottom: $spacing-06;
+@media (prefers-reduced-motion) {
+  .#{$block-class} .#{$form-block-class}__form--visible-form {
+    animation: none;
+    opacity: 1;
   }
+}
 
-  .#{$block-class}
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--disabled {
-    box-shadow: -0.0625rem 0 0 0 $button-separator;
-  }
+.#{$block-class} .#{$block-class}__content {
+  height: 100%;
+  padding: $spacing-06;
+  overflow-x: hidden;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
-    position: initial;
-    width: 100%;
-    max-width: 100%;
-    background-color: transparent;
-  }
+.#{$block-class}
+  .#{$block-class}__content
+  .#{c4p-settings.$carbon-prefix}--grid {
+  padding: 0;
+  margin: 0;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--side-nav__link:hover {
-    cursor: pointer;
-  }
+.#{$block-class} .#{$block-class}__form--heading {
+  padding-bottom: $spacing-06;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--side-nav__overlay-active {
-    display: none;
-  }
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--btn-set
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 $button-separator;
+}
 
-  .#{$block-class} .#{$block-class}__form--title,
-  .#{$block-class} .#{$block-class}__section--title {
-    margin-bottom: $spacing-05;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  position: initial;
+  width: 100%;
+  max-width: 100%;
+  background-color: transparent;
+}
 
-  .#{$block-class} .#{$block-class}__section--subtitle,
-  .#{$block-class} .#{$block-class}__form--subtitle {
-    @include carbon--type-style('productive-heading-01');
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__link:hover {
+  cursor: pointer;
+}
 
-    margin-bottom: $spacing-03;
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__overlay-active {
+  display: none;
+}
 
-  .#{$block-class} .#{$block-class}__section--description,
-  .#{$block-class} .#{$block-class}__form--description {
-    @include carbon--type-style('body-long-01');
+.#{$block-class} .#{$block-class}__form--title,
+.#{$block-class} .#{$block-class}__section--title {
+  margin-bottom: $spacing-05;
+}
 
-    margin-bottom: $spacing-06;
-  }
+.#{$block-class} .#{$block-class}__section--subtitle,
+.#{$block-class} .#{$block-class}__form--subtitle {
+  @include type.type-style('productive-heading-01');
 
-  .#{$block-class} .#{$carbon-prefix}--fieldset {
-    margin-bottom: 0;
-  }
+  margin-bottom: $spacing-03;
+}
 
-  .#{$block-class} .#{$block-class}__form--fieldset > * {
-    margin-bottom: $spacing-05;
-  }
+.#{$block-class} .#{$block-class}__section--description,
+.#{$block-class} .#{$block-class}__form--description {
+  @include type.type-style('body-long-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
 }
 
-@include exports('edit-tearsheet') {
-  @include edit-tearsheet;
+.#{$block-class} .#{$block-class}__form--fieldset > * {
+  margin-bottom: $spacing-05;
 }