@carbon/ibm-products 1.25.1 → 2.0.0-rc.1

package/scss/components/Toolbar/_toolbar.scss

@@ -5,74 +5,71 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/button/button';
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as *;
 
-@include exports('ibm-products--toolbar') {
-  $block-class: #{$pkg-prefix}--toolbar;
+$block-class: #{$pkg-prefix}--toolbar;
 
-  $border: carbon--rem(
-      $px: 1px,
-    )
-    solid $ui-03;
+$border: 1px solid $border-subtle-01;
 
-  $toolbar-dimensions: carbon--rem(
-    $px: 40px,
-  );
-
-  .#{$block-class} {
-    @include carbon--breakpoint($name: lg) {
-      justify-content: flex-end;
-    }
+$toolbar-dimensions: $spacing-08;
 
-    display: flex;
-    min-width: $toolbar-dimensions;
-    min-height: $toolbar-dimensions;
-    background-color: $ui-01;
+.#{$block-class} {
+  @include breakpoint($name: lg) {
+    justify-content: flex-end;
   }
 
-  .#{$block-class}--vertical,
-  .#{$block-class}--vertical > .#{$block-class}__group {
-    flex-wrap: wrap;
-  }
+  display: flex;
+  min-width: $toolbar-dimensions;
+  min-height: $toolbar-dimensions;
+  background-color: $layer-01;
+}
 
-  .#{$block-class}--vertical {
-    max-width: $toolbar-dimensions;
-  }
+.#{$block-class}--vertical,
+.#{$block-class}--vertical > .#{$block-class}__group {
+  flex-wrap: wrap;
+}
 
-  .#{$block-class}__group {
-    display: flex;
-    border-right: $border;
-    border-bottom: $border;
-  }
+.#{$block-class}--vertical {
+  max-width: $toolbar-dimensions;
+}
 
-  .#{$block-class}--vertical > .#{$block-class}__group,
-  .#{$block-class}__group:last-of-type {
-    border-right-width: 0;
-  }
+.#{$block-class}__group {
+  display: flex;
+  border-right: $border;
+  border-bottom: $border;
+}
 
-  .#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
-  .#{$block-class} .#{$prefix}--dropdown {
-    border-bottom-width: 0;
-  }
+.#{$block-class}--vertical > .#{$block-class}__group,
+.#{$block-class}__group:last-of-type {
+  border-right-width: 0;
+}
 
-  .#{$block-class}__button--caret {
-    position: relative;
-  }
+.#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
+.#{$block-class} .#{$carbon-prefix}--dropdown {
+  border-bottom-width: 0;
+}
 
-  .#{$block-class}__button__caret {
-    $caret-dimensions: carbon--rem(
-      $px: 6px,
-    );
+.#{$block-class}__button--caret {
+  position: relative;
+}
 
-    $position: $carbon--spacing-01;
+.#{$block-class}__button__caret {
+  $caret-dimensions: calc(#{$spacing-01} + #{$spacing-02});
 
-    position: absolute;
-    right: $position;
-    bottom: $position;
-    width: $caret-dimensions;
-    height: $caret-dimensions;
-    background: linear-gradient(to right bottom, transparent 50%, $icon-01 50%);
-    content: '';
-  }
+  $position: $spacing-01;
+
+  position: absolute;
+  right: $position;
+  bottom: $position;
+  width: $caret-dimensions;
+  height: $caret-dimensions;
+  background: linear-gradient(
+    to right bottom,
+    transparent 50%,
+    $icon-primary 50%
+  );
+  content: '';
 }

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

package/scss/components/UserProfileImage/_color-map.scss

@@ -1,39 +1,39 @@
 //
-// 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 '@carbon/colors/scss/colors';
+@use '@carbon/react/scss/colors' as *;
 
 $carbon-colors: (
-  'blue30': $carbon--blue-30,
-  'blue50': $carbon--blue-50,
-  'blue60': $carbon--blue-60,
-  'blue80': $carbon--blue-80,
-  'cyan30': $carbon--cyan-30,
-  'cyan50': $carbon--cyan-50,
-  'cyan60': $carbon--cyan-60,
-  'cyan80': $carbon--cyan-80,
-  'gray30': $carbon--gray-30,
-  'gray50': $carbon--gray-50,
-  'gray60': $carbon--gray-60,
-  'gray80': $carbon--gray-80,
-  'green30': $carbon--green-30,
-  'green50': $carbon--green-50,
-  'green60': $carbon--green-60,
-  'green80': $carbon--green-80,
-  'magenta30': $carbon--magenta-30,
-  'magenta50': $carbon--magenta-50,
-  'magenta60': $carbon--magenta-60,
-  'magenta80': $carbon--magenta-80,
-  'purple30': $carbon--purple-30,
-  'purple50': $carbon--purple-50,
-  'purple60': $carbon--purple-60,
-  'purple80': $carbon--purple-80,
-  'teal30': $carbon--teal-30,
-  'teal50': $carbon--teal-50,
-  'teal60': $carbon--teal-60,
-  'teal80': $carbon--teal-80,
+  'blue30': $blue-30,
+  'blue50': $blue-50,
+  'blue60': $blue-60,
+  'blue80': $blue-80,
+  'cyan30': $cyan-30,
+  'cyan50': $cyan-50,
+  'cyan60': $cyan-60,
+  'cyan80': $cyan-80,
+  'gray30': $gray-30,
+  'gray50': $gray-50,
+  'gray60': $gray-60,
+  'gray80': $gray-80,
+  'green30': $green-30,
+  'green50': $green-50,
+  'green60': $green-60,
+  'green80': $green-80,
+  'magenta30': $magenta-30,
+  'magenta50': $magenta-50,
+  'magenta60': $magenta-60,
+  'magenta80': $magenta-80,
+  'purple30': $purple-30,
+  'purple50': $purple-50,
+  'purple60': $purple-60,
+  'purple80': $purple-80,
+  'teal30': $teal-30,
+  'teal50': $teal-50,
+  'teal60': $teal-60,
+  'teal80': $teal-80,
 );

package/scss/components/UserProfileImage/_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 './user-profile-image';

package/scss/components/UserProfileImage/_index.scss

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

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -6,17 +6,17 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import './color-map';
-
-// UserProfileImage uses the following Carbon components:
-// TooltipIcon
-@import 'carbon-components/scss/components/tooltip/tooltip';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family';
+@use '../../global/styles/project-settings' as *;
+@use './color-map' as *;
 
 $block-class: #{$pkg-prefix}--user-profile-image;
 
 $sizes: (
-  xlg: $spacing-10,
+  xl: $spacing-10,
   lg: $spacing-07,
   md: $spacing-06,
   sm: calc(#{$spacing-05} + #{$spacing-02}),
@@ -51,96 +51,100 @@ $theme-keys: map-keys($themes);
   );
 }
 
-@mixin user-profile-image {
-  @each $key in $theme-keys {
-    .#{$block-class}--#{$key} {
-      color: $ui-01;
-    }
-    @each $color in $base-colors {
-      @each $contrast-key in $theme-keys {
-        .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: --get-background-color($color, $key, $contrast-key);
-        }
+@each $key in $theme-keys {
+  .#{$block-class}--#{$key} {
+    color: $layer-01;
+  }
+  @each $color in $base-colors {
+    @each $contrast-key in $theme-keys {
+      .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
+        // stylelint-disable-next-line carbon/theme-token-use
+        background-color: --get-background-color($color, $key, $contrast-key);
       }
     }
   }
+}
 
-  .#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip {
-    &:hover,
-    &:focus {
-      svg {
-        fill: $ui-01;
-      }
+.#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip,
+.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:hover,
+  &:focus {
+    /* stylelint-disable-next-line max-nesting-depth */
+    svg {
+      fill: $layer-01;
     }
   }
+}
 
-  .#{$block-class} {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    text-transform: uppercase;
-  }
+.#{$block-class} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  text-transform: uppercase;
+}
 
-  .#{$prefix}--tooltip__trigger .#{$block-class} svg {
-    fill: $ui-01;
-  }
+.#{$block-class}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
+  min-height: auto;
+  padding: 0;
+  border-radius: 50%;
+}
 
-  .#{$block-class}__photo {
-    width: 100%;
-    border-radius: 100%;
-  }
+.#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
+.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
+  fill: $layer-01;
+}
 
-  .#{$block-class}__photo--xlg {
-    @include size('xlg');
-  }
+.#{$block-class}__photo {
+  width: 100%;
+  border-radius: 100%;
+}
 
-  .#{$block-class}__photo--lg {
-    @include size('lg');
-  }
+.#{$block-class}__photo--xl {
+  @include size('xl');
+}
 
-  .#{$block-class}__photo--md {
-    @include size('md');
-  }
-  .#{$block-class}__photo--sm {
-    @include size('sm');
-  }
+.#{$block-class}__photo--lg {
+  @include size('lg');
+}
 
-  .#{$block-class}__photo--xs {
-    @include size('xs');
-  }
+.#{$block-class}__photo--md {
+  @include size('md');
+}
+.#{$block-class}__photo--sm {
+  @include size('sm');
+}
 
-  .#{$block-class}--xlg {
-    @include size('xlg');
-    @include carbon--type-style('productive-heading-04');
-  }
+.#{$block-class}__photo--xs {
+  @include size('xs');
+}
 
-  .#{$block-class}--lg {
-    @include size('lg');
-    @include carbon--type-style('body-short-01');
-  }
+.#{$block-class}--xl {
+  @include size('xl');
+  @include type.type-style('productive-heading-04');
+}
 
-  .#{$block-class}--md {
-    @include size('md');
-    @include carbon--type-style('label-01');
-    @include carbon--font-weight('semibold');
-  }
+.#{$block-class}--lg {
+  @include size('lg');
+  @include type.type-style('body-short-01');
+}
 
-  .#{$block-class}--sm {
-    @include size('sm');
-    @include carbon--type-style('label-01');
-    @include carbon--font-weight('semibold');
-  }
+.#{$block-class}--md {
+  @include size('md');
+  @include type.type-style('label-01');
+  @include font-family.font-weight('semibold');
+}
 
-  .#{$block-class}--xs {
-    @include size('xs');
-    @include carbon--type-style('label-01');
-    @include carbon--font-weight('semibold');
-  }
+.#{$block-class}--sm {
+  @include size('sm');
+  @include type.type-style('label-01');
+  @include font-family.font-weight('semibold');
 }
 
-@include exports('user-profile-image') {
-  @include user-profile-image;
+.#{$block-class}--xs {
+  @include size('xs');
+  @include type.type-style('label-01');
+  @include font-family.font-weight('semibold');
 }

package/scss/components/WebTerminal/_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/WebTerminal/_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 './web-terminal';

package/scss/components/WebTerminal/_index.scss

@@ -1 +1 @@
-@import './web-terminal';
+@use './web-terminal';

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

@@ -1,6 +1,16 @@
 /* stylelint-disable  */
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
+
+.cds--header {
+  @include theme(themes.$g100);
+}
 
 .sb-show-main.sb-main-centered #root {
   padding: 0 !important;
@@ -9,7 +19,7 @@
 
 .example-terminal {
   padding: $spacing-05;
-  color: $gray-10;
+  color: colors.$gray-10;
   font-family: 'IBM Plex Mono', monospace;
 
   p {

package/scss/components/WebTerminal/_web-terminal.scss

@@ -1,5 +1,16 @@
+//
+// 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/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../global/styles/project-settings' as *;
 
 $web-terminal-width: 40rem; // 640px
 $block-class: #{$pkg-prefix}--web-terminal;
@@ -37,7 +48,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 */
 
 .#{$block-class} {
-  @include carbon--theme($carbon--theme--g90, true);
+  @include theme($g90);
 
   position: fixed;
   top: $spacing-09;
@@ -46,7 +57,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
   max-width: $web-terminal-width;
   height: calc(100vh - #{$spacing-09});
   border-left: 1px solid $gray-90;
-  color: $text-01;
+  color: $text-primary;
   /* stylelint-disable-next-line  */
   background-color: $gray-100;
 }
@@ -56,7 +67,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
   height: 3rem;
   align-items: center;
   justify-content: space-between;
-  background-color: $ui-background;
+  background-color: $background;
 }
 
 .#{$block-class}__actions {
@@ -64,7 +75,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 }
 
 .#{$block-class}__documentation-overflow {
-  @include carbon--theme($carbon--theme--g100, true);
+  @include theme($g100);
 }
 
 // Terminal body styles

package/scss/components/_Canary/_canary.scss

@@ -1,9 +1,7 @@
 //
-// 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 'carbon-components/scss/components/code-snippet/code-snippet';
-@import 'carbon-components/scss/components/copy-button/copy-button';
+@use '@carbon/styles/scss/components/code-snippet';

package/scss/components/_index-released-only-with-carbon.scss

@@ -0,0 +1,35 @@
+//
+// 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.
+//
+
+// Package scss files here used by released components, or used by components
+// which are themselves used by released components.
+
+@use './AboutModal/index-with-carbon' as *;
+@use './APIKeyModal/index-with-carbon' as *;
+@use './ActionSet/index-with-carbon' as *;
+@use './Cascade/index-with-carbon' as *;
+@use './CreateModal/index-with-carbon' as *;
+@use './CreateFullPage/index-with-carbon' as *;
+@use './CreateSidePanel/index-with-carbon' as *;
+@use './CreateTearsheetNarrow/index-with-carbon' as *;
+@use './CreateTearsheet/index-with-carbon' as *;
+@use './EmptyStates/index-with-carbon' as *;
+@use './ExportModal/index-with-carbon' as *;
+@use './ExpressiveCard/index-with-carbon' as *;
+@use './HTTPErrors/index-with-carbon' as *;
+@use './InlineEdit/index-with-carbon' as *;
+@use './ImportModal/index-with-carbon' as *;
+@use './NotificationsPanel/index-with-carbon' as *;
+@use './PageHeader/index-with-carbon' as *;
+@use './ProductiveCard/index-with-carbon' as *;
+@use './RemoveModal/index-with-carbon' as *;
+@use './Saving/index-with-carbon' as *;
+@use './SidePanel/index-with-carbon' as *;
+@use './StatusIcon/index-with-carbon' as *;
+@use './TagSet/index-with-carbon' as *;
+@use './Tearsheet/index-with-carbon' as *;
+@use './UserProfileImage/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2020
+// 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.
@@ -8,28 +8,28 @@
 // Package scss files here used by released components, or used by components
 // which are themselves used by released components.
 
-@import './AboutModal/index';
-@import './APIKeyModal/index';
-@import './ActionSet/index';
-@import './Cascade/index';
-@import './CreateModal/index';
-@import './CreateFullPage/index';
-@import './CreateSidePanel/index';
-@import './CreateTearsheetNarrow/index';
-@import './CreateTearsheet/index';
-@import './EmptyStates/index';
-@import './ExportModal/index';
-@import './ExpressiveCard/index';
-@import './HTTPErrors/index';
-@import './ImportModal/index';
-@import './InlineEdit/index';
-@import './NotificationsPanel/index';
-@import './PageHeader/index';
-@import './ProductiveCard/index';
-@import './RemoveModal/index';
-@import './Saving/index';
-@import './SidePanel/index';
-@import './StatusIcon/index';
-@import './TagSet/index';
-@import './Tearsheet/index';
-@import './UserProfileImage/index';
+@use './AboutModal';
+@use './APIKeyModal';
+@use './ActionSet';
+@use './Cascade';
+@use './CreateModal';
+@use './CreateFullPage';
+@use './CreateSidePanel';
+@use './CreateTearsheetNarrow';
+@use './CreateTearsheet';
+@use './EmptyStates';
+@use './ExportModal';
+@use './ExpressiveCard';
+@use './HTTPErrors';
+@use './InlineEdit';
+@use './ImportModal';
+@use './NotificationsPanel';
+@use './PageHeader';
+@use './ProductiveCard';
+@use './RemoveModal';
+@use './Saving';
+@use './SidePanel';
+@use './StatusIcon';
+@use './TagSet';
+@use './Tearsheet';
+@use './UserProfileImage';