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

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

@@ -5,14 +5,18 @@
 // 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/type';
+@use '@carbon/type/scss/font-family';
+
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // TODO: add any additional styles used by EditTearsheet.stories.js
 
-$preview-block-class: #{$pkg-prefix}--tearsheet-edit-multi-form;
+$preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form;
 
 .#{$preview-block-class}__description {
-  @include carbon--type-style('body-short-01');
+  @include type.type-style('body-short-01');
 
   padding-bottom: $spacing-04;
 }
@@ -22,33 +26,33 @@ p.#{$preview-block-class}__description:last-of-type {
 }
 
 .#{$preview-block-class}__heading {
-  @include carbon--font-weight('semibold');
+  @include font-family.font-weight('semibold');
 }
 
 .#{$preview-block-class}
-  .#{$pkg-prefix}--tearsheet__content
-  .#{$carbon-prefix}--form-item {
+  .#{c4p-settings.$pkg-prefix}--tearsheet__content
+  .#{c4p-settings.$carbon-prefix}--form-item {
   margin-bottom: $spacing-05;
 }
 
-.#{$prefix}--tile-group div {
+.#{c4p-settings.$carbon-prefix}--tile-group div {
   display: flex;
   flex-wrap: wrap;
 }
 
-.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile {
+.#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile {
   width: 280px;
   height: 240px;
   margin-right: $spacing-05;
 }
 
-.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile
-  .#{$pkg-prefix}--empty-state__illustration.#{$pkg-prefix}--empty-state__illustration--lg {
+.#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile
+  .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
   min-width: 120px;
   height: 120px;
 }
 
-.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile-label {
+.#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile-label {
   position: absolute;
   bottom: $spacing-05;
   left: $spacing-05;

package/scss/components/EditTearsheetNarrow/_edit-tearsheet-narrow.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
 
 // EditTearsheetNarrow uses the following Carbon components:
-// TODO: @import(s) of Carbon component styles used by EditTearsheetNarrow
+// TODO: @use(s) of Carbon component styles used by EditTearsheetNarrow
 
 // EditTearsheetNarrow uses the following Carbon for IBM Products components:
-// TODO: @import(s) of IBM Products component styles used by EditTearsheetNarrow
+// TODO: @use(s) of IBM Products component styles used by EditTearsheetNarrow
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin edit-tearsheet-narrow {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--edit-tearsheet-narrow;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-tearsheet-narrow;
 
-  .#{$block-class} {
-    // TODO: Styles.
-  }
-}
-
-@include exports('edit-tearsheet-narrow') {
-  @include edit-tearsheet-narrow;
+.#{$block-class} {
+  // TODO: Styles.
 }

package/scss/components/EmptyStates/_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.
+//
+
+// Empty states use the following Carbon components:
+// Button, Link
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/link';

package/scss/components/EmptyStates/_empty-state.scss

@@ -6,57 +6,54 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// Empty states use the following Carbon components:
-// Button, Link
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/link/link';
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin empty-state {
-  $block-class: #{$pkg-prefix}--empty-state;
-
-  .#{$block-class} {
-    color: $text-01;
-
-    .#{$block-class}__header,
-    .#{$block-class}__subtitle {
-      padding-bottom: $spacing-02;
-      margin: 0;
-    }
-    .#{$block-class}__header--small {
-      @include carbon--type-style('productive-heading-03');
-    }
-    .#{$block-class}__subtitle--small {
-      @include carbon--type-style('body-short-01');
-    }
+@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;
+
+$block-class: #{c4p-settings.$pkg-prefix}--empty-state;
+
+.#{$block-class} {
+  color: $text-primary;
+
+  .#{$block-class}__header {
+    @include type.type-style('productive-heading-03');
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-bottom: calc($spacing-01 + $spacing-02);
+    margin: 0;
   }
+  .#{$block-class}__subtitle {
+    @include type.type-style('body-long-01');
 
-  .#{$block-class}__illustration {
-    &.#{$block-class}__illustration--lg {
-      min-width: $spacing-11;
-      max-width: $spacing-11;
-    }
-    &.#{$block-class}__illustration--sm {
-      min-width: $spacing-10;
-      max-width: $spacing-10;
-    }
+    padding-bottom: $spacing-05;
   }
+  .#{$block-class}__header--small {
+    @include type.type-style('body-short-02');
 
-  .#{$block-class}__action-button,
-  .#{$block-class}__link {
-    margin-top: $spacing-06;
+    padding-bottom: $spacing-03;
   }
-  .#{$block-class} .#{$block-class}__action-button {
-    display: block;
+  .#{$block-class}__subtitle--small {
+    @include type.type-style('label-01');
   }
-  .#{$block-class} .#{$block-class}__link {
-    display: block;
+}
+
+.#{$block-class}__illustration {
+  height: auto;
+  margin-bottom: $spacing-05;
+  &.#{$block-class}__illustration--lg {
+    min-width: $spacing-11;
+    max-width: $spacing-11;
+  }
+  &.#{$block-class}__illustration--sm {
+    min-width: $spacing-10;
+    max-width: $spacing-10;
   }
 }
 
-@include exports('empty-state') {
-  @include empty-state;
+.#{$block-class} .#{$block-class}__action-button {
+  display: block;
+  margin-bottom: $spacing-05;
+}
+.#{$block-class} .#{$block-class}__link {
+  display: block;
 }

package/scss/components/EmptyStates/_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 './empty-state';

package/scss/components/EmptyStates/_index.scss

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

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

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// ExampleComponent uses the following Carbon components:
+// Button, ButtonSet
+@use '@carbon/react/scss/components/button';

package/scss/components/ExampleComponent/_example-component.scss

@@ -1,39 +1,28 @@
 //
-// 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.
 //
 
+@use '@carbon/styles/scss/spacing' as *;
 // Standard imports.
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
 
-// ExampleComponent uses the following Carbon components:
-// Button, ButtonSet
-@import 'carbon-components/scss/components/button/button';
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--example-component;
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin example-component {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--example-component;
-
-  .#{$block-class} {
-    display: flex;
-    justify-content: flex-end;
-    --#{$block-class}--border-color: transparent;
-  }
-
-  .#{$block-class}.#{$block-class}--boxed-set {
-    border: 10px solid var(--#{$block-class}--border-color);
-  }
+.#{$block-class} {
+  display: flex;
+  justify-content: flex-end;
+  --#{$block-class}--border-color: transparent;
+}
 
-  .#{$block-class}.#{$block-class}--shadow-set {
-    margin: $spacing-04;
-    box-shadow: 0 0 10px var(--#{$block-class}--border-color);
-  }
+.#{$block-class}.#{$block-class}--boxed-set {
+  border: 10px solid var(--#{$block-class}--border-color);
 }
 
-@include exports('example-component') {
-  @include example-component;
+.#{$block-class}.#{$block-class}--shadow-set {
+  margin: $spacing-04;
+  box-shadow: 0 0 10px var(--#{$block-class}--border-color);
 }

package/scss/components/ExampleComponent/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './example-component';

package/scss/components/ExampleComponent/_index.scss

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

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

@@ -0,0 +1,16 @@
+//
+// 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.
+//
+
+// ExportModal uses the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
+// RadioButton, RadioButtonGroup, FormGroup, Loading
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/text-input';
+@use '@carbon/react/scss/components/radio-button';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/loading';

package/scss/components/ExportModal/_export-modal.scss

@@ -6,52 +6,45 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// ExportModal uses the following Carbon components:
-// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
-// RadioButton, RadioButtonGroup, FormGroup, Loading
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/text-input/text-input';
-@import 'carbon-components/scss/components/radio-button/radio-button';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/loading/loading';
-
-@mixin export-modal {
-  $block-class: #{$pkg-prefix}--export-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
-    max-width: none;
-  }
-
-  .#{$block-class}.#{$carbon-prefix}--modal .#{$carbon-prefix}--modal-content {
-    padding-right: $spacing-05;
-  }
-
-  .#{$block-class}__body {
-    padding-right: calc(20% - #{$spacing-05});
-    margin-bottom: $spacing-05;
-  }
-
-  .#{$block-class}__messaging {
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$block-class}__messaging p {
-    margin-left: $spacing-03;
-  }
-
-  .#{$block-class}__checkmark-icon {
-    fill: $interactive-01;
-  }
-
-  .#{$block-class}__error-icon {
-    fill: $danger;
-  }
-}
-
-@include exports('export-modal') {
-  @include export-modal;
+@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--export-modal;
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-width: none;
+}
+
+.#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
+  .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-right: $spacing-05;
+}
+
+.#{$block-class}__body {
+  padding-right: calc(20% - #{$spacing-05});
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__messaging {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__messaging p {
+  margin-left: $spacing-03;
+}
+
+.#{$block-class}__checkmark-icon {
+  fill: $button-primary;
+}
+
+.#{$block-class}__error-icon {
+  fill: $button-danger-primary;
+}
+
+.#{c4p-settings.$carbon-prefix}--modal-content.#{$block-class}__body-container {
+  padding-bottom: $spacing-06;
 }

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

package/scss/components/ExportModal/_index.scss

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

package/scss/components/ExpressiveCard/_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/ExpressiveCard/_expressive-card.scss

@@ -1,25 +1,18 @@
 //
-// 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';
-
 // ExpressiveCard uses the following IBM Products components:
 // Card
-@import '../Card/card';
-
-@mixin card-expressive {
-  $block-class: #{$pkg-prefix}--card;
+@use '../Card/card' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
 
-  .#{$block-class}__title {
-    @include carbon--type-style('productive-heading-03');
-  }
-}
+$block-class: #{c4p-settings.$pkg-prefix}--card;
 
-@include exports('card-expressive') {
-  @include card-expressive;
+.#{$block-class}__title {
+  @include type.type-style('productive-heading-03');
 }

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

package/scss/components/ExpressiveCard/_index.scss

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

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

@@ -5,18 +5,19 @@
 // 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' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
 
-$block-class: #{$pkg-prefix}--card;
+$block-class: #{c4p-settings.$pkg-prefix}--card;
 
 // aspect ratio box styling
-.card-story .#{$carbon-prefix}--aspect-ratio {
+.card-story .#{c4p-settings.$carbon-prefix}--aspect-ratio {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $ui-03;
+  background: $layer-accent-01;
 }
 
 .#{$block-class}__media-left .#{$block-class}__media {

package/scss/components/HTTPErrors/_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.
+//
+
+// HTTP errors use the following Carbon components:
+// Link
+@use '@carbon/react/scss/components/link';