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

package/scss/components/OptionsTile/_options-tile.scss

@@ -6,216 +6,218 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
 
 // Other Carbon settings.
-@import 'carbon-components/scss/globals/scss/helper-mixins';
+@use '@carbon/styles/scss/utilities' as *;
 
-// PageHeader uses the following Carbon components:
-// Toggle
-@import 'carbon-components/scss/components/toggle/toggle';
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin options-tile {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--options-tile;
+.#{$block-class} {
+  border-bottom: 1px solid $border-subtle-01;
+  background-color: $layer-01;
+}
 
-  .#{$block-class} {
-    border-bottom: 1px solid $ui-03;
-    background-color: $ui-01;
-  }
+.#{$block-class}__toggle-container {
+  position: relative;
+}
 
-  .#{$block-class}__toggle-container {
-    position: relative;
-  }
+.#{$block-class}__toggle {
+  position: absolute;
+  right: $spacing-05;
+}
 
-  .#{$block-class}__toggle {
-    position: absolute;
-    right: $spacing-05;
-  }
+.#{$block-class}__toggle
+  .#{c4p-settings.$carbon-prefix}--toggle-input__label
+  .#{c4p-settings.$carbon-prefix}--toggle__switch {
+  margin: 0;
+}
 
-  .#{$block-class}__toggle
-    .#{$carbon-prefix}--toggle-input__label
-    .#{$carbon-prefix}--toggle__switch {
-    margin: 0;
-  }
+.#{$block-class}__toggle .#{c4p-settings.$carbon-prefix}--toggle__label-text {
+  @include visually-hidden;
+}
 
-  .#{$block-class}__header,
-  .#{$block-class}__static-content {
-    display: grid;
-    box-sizing: border-box;
-    align-items: center;
-    padding-right: $spacing-05;
-    grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
-  }
+.#{$block-class}__header,
+.#{$block-class}__static-content {
+  display: grid;
+  box-sizing: border-box;
+  align-items: center;
+  padding-right: $spacing-05;
+  grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
+}
 
-  .#{$block-class}__header {
-    background-color: transparent;
-    cursor: pointer;
-    transition: background-color $duration--fast-01 motion(entrance, productive);
-  }
+.#{$block-class}__header {
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color $duration-fast-01 motion(entrance, productive);
+}
 
-  .#{$block-class}__header::-webkit-details-marker {
-    display: none;
-  }
+.#{$block-class}__header::-webkit-details-marker {
+  display: none;
+}
 
-  .#{$block-class}__header:hover {
-    background-color: $hover-ui;
-  }
+.#{$block-class}__header:hover {
+  background-color: $background-hover;
+}
 
-  .#{$block-class}__header:focus {
-    @include focus-outline('outline');
-  }
+.#{$block-class}__header:focus {
+  @include focus-outline('outline');
+}
 
-  .#{$block-class}__heading {
-    grid-column: 2;
-  }
+.#{$block-class}__heading {
+  grid-column: 2;
+}
 
-  .#{$block-class}__title {
-    @include carbon--type-style('productive-heading-01');
+.#{$block-class}__title {
+  @include type.type-style('productive-heading-01');
 
-    color: $text-01;
-  }
+  color: $text-primary;
+}
 
-  .#{$block-class}__summary {
-    @include carbon--type-style('helper-text-01');
-
-    display: grid;
-    height: $spacing-05;
-    margin-top: $spacing-02;
-    color: $text-02;
-    opacity: 1;
-    transition-duration: $duration--moderate-01;
-    transition-property: height, opacity, margin-top;
-    transition-timing-function: motion(standard, productive);
-  }
+.#{$block-class}__summary {
+  @include type.type-style('helper-text-01');
+
+  display: grid;
+  height: $spacing-05;
+  margin-top: $spacing-02;
+  color: $text-secondary;
+  opacity: 1;
+  transition-duration: $duration-moderate-01;
+  transition-property: height, opacity, margin-top;
+  transition-timing-function: motion(standard, productive);
+}
 
-  .#{$block-class}__summary--invalid,
-  .#{$block-class}__summary--warn,
-  .#{$block-class}__summary--locked {
-    column-gap: $spacing-02;
-    grid-template-columns: 1rem 1fr; // icon, text
-  }
+.#{$block-class}__summary--invalid,
+.#{$block-class}__summary--warn,
+.#{$block-class}__summary--locked {
+  column-gap: $spacing-02;
+  grid-template-columns: 1rem 1fr; // icon, text
+}
 
-  .#{$block-class}__summary--invalid {
-    color: $support-01;
-  }
+.#{$block-class}__summary--invalid {
+  color: $support-error;
+}
 
-  .#{$block-class}__summary--warn {
-    color: $text-01;
-  }
+.#{$block-class}__summary--warn {
+  color: $text-primary;
+}
 
-  .#{$block-class}__summary--warn svg {
-    color: $support-03;
-  }
+.#{$block-class}__summary--warn svg {
+  color: $support-warning;
+}
 
-  .#{$block-class}__summary--warn svg path[fill='none'] {
-    /* stylelint-disable-next-line carbon/theme-token-use */
-    fill: $carbon__black-100;
-  }
+.#{$block-class}__summary--warn svg path[fill='none'] {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  fill: $black-100;
+}
 
-  .#{$block-class}__summary-text {
-    overflow: hidden;
-    height: max-content;
-    // spacing-05 + toggle width
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(#{$spacing-05} + 2rem);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.#{$block-class}__summary--warn svg path[fill='none'] {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  fill: $black-100;
+}
 
-  .#{$block-class}__chevron {
-    display: block;
-    justify-self: center;
-    transition: transform $duration--fast-02 motion(standard, productive);
-  }
+.#{$block-class}__summary-text {
+  overflow: hidden;
+  height: max-content;
+  // spacing-05 + toggle width
+  // stylelint-disable-next-line carbon/layout-token-use
+  padding-right: calc(#{$spacing-05} + 2rem);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .#{$block-class}__content {
-    padding-right: $spacing-05;
-    // spacing-05 + chevron size + spacing-05
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-left: calc(#{$spacing-05} * 2 + 1rem);
-  }
+.#{$block-class}__chevron {
+  display: block;
+  justify-self: center;
+  transition: transform $duration-fast-02 motion(standard, productive);
+}
 
-  .#{$block-class}__content
-    > .#{$carbon-prefix}--fieldset
-    > .#{$carbon-prefix}--label:empty {
-    display: none;
-  }
+.#{$block-class}__content {
+  padding-right: $spacing-05;
+  // spacing-05 + chevron size + spacing-05
+  // stylelint-disable-next-line carbon/layout-token-use
+  padding-left: calc(#{$spacing-05} * 2 + 1rem);
+}
 
-  .#{$block-class}--closing .#{$block-class}__content {
-    overflow: hidden;
-  }
+.#{$block-class}__content
+  > .#{c4p-settings.$carbon-prefix}--fieldset
+  > .#{c4p-settings.$carbon-prefix}--label:empty {
+  display: none;
+}
 
-  .#{$block-class}:not(.#{$block-class}--closing)
-    > details[open]
-    .#{$block-class}__summary,
-  .#{$block-class}__summary--hidden {
-    height: 0;
-    margin-top: 0;
-    opacity: 0;
-  }
+.#{$block-class}--closing .#{$block-class}__content {
+  overflow: hidden;
+}
 
-  .#{$block-class}:not(.#{$block-class}--closing)
-    > details[open]
-    .#{$block-class}__chevron {
-    transform: rotate(180deg);
-  }
+.#{$block-class}:not(.#{$block-class}--closing)
+  > details[open]
+  .#{$block-class}__summary,
+.#{$block-class}__summary--hidden {
+  height: 0;
+  margin-top: 0;
+  opacity: 0;
+}
 
-  .#{$block-class} > details[open] .#{$block-class}__content {
-    padding-top: $spacing-03;
-    padding-bottom: $spacing-06;
-  }
+.#{$block-class}:not(.#{$block-class}--closing)
+  > details[open]
+  .#{$block-class}__chevron {
+  transform: rotate(180deg);
+}
 
-  .#{$block-class}__locked-text {
-    @include carbon--type-style('body-long-01');
+.#{$block-class} > details[open] .#{$block-class}__content {
+  padding-top: $spacing-03;
+  padding-bottom: $spacing-06;
+}
 
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: $spacing-06;
-    color: $text-02;
-  }
+.#{$block-class}__locked-text {
+  @include type.type-style('body-long-01');
 
-  .#{$block-class}__locked-text > svg {
-    margin-right: $spacing-02;
-  }
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: $spacing-06;
+  color: $text-secondary;
+}
 
-  .#{$block-class}--lg .#{$block-class}__header,
-  .#{$block-class}--lg .#{$block-class}__static-content {
-    height: 3rem;
-  }
+.#{$block-class}__locked-text > svg {
+  margin-right: $spacing-02;
+}
 
-  .#{$block-class}--xl .#{$block-class}__header,
-  .#{$block-class}--xl .#{$block-class}__static-content {
-    height: 4rem;
-  }
+.#{$block-class}--lg .#{$block-class}__header,
+.#{$block-class}--lg .#{$block-class}__static-content {
+  height: 3rem;
+}
 
-  .#{$block-class}--lg .#{$block-class}__toggle {
-    // "top" shouldn't be spacing token as it depends on the toggle size
-    // stylelint-disable-next-line carbon/layout-token-use
-    top: 1rem;
-  }
+.#{$block-class}--xl .#{$block-class}__header,
+.#{$block-class}--xl .#{$block-class}__static-content {
+  height: 4rem;
+}
 
-  .#{$block-class}--xl .#{$block-class}__toggle {
-    // "top" shouldn't be spacing token as it depends on the toggle size
-    // stylelint-disable-next-line carbon/layout-token-use
-    top: 1.5rem;
-  }
+.#{$block-class}--lg .#{$block-class}__toggle {
+  // "top" shouldn't be spacing token as it depends on the toggle size
+  // stylelint-disable-next-line carbon/layout-token-use
+  top: 1rem;
+}
 
-  .#{$block-class}--lg .#{$block-class}__summary {
-    margin-top: $spacing-01;
-  }
+.#{$block-class}--xl .#{$block-class}__toggle {
+  // "top" shouldn't be spacing token as it depends on the toggle size
+  // stylelint-disable-next-line carbon/layout-token-use
+  top: 1.5rem;
+}
 
-  @media (prefers-reduced-motion: reduce) {
-    .#{$block-class}__summary,
-    .#{$block-class}__chevron {
-      transition: none;
-    }
-  }
+.#{$block-class}--lg .#{$block-class}__summary {
+  margin-top: $spacing-01;
 }
 
-@include exports('options-tile') {
-  @include options-tile;
+@media (prefers-reduced-motion: reduce) {
+  .#{$block-class}__summary,
+  .#{$block-class}__chevron {
+    transition: none;
+  }
 }

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

@@ -5,9 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
-$block-class: #{$pkg-prefix}--options-tile;
+$block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class} {
   width: 80vw;
@@ -16,11 +18,12 @@ $block-class: #{$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__content p {
-  @include carbon--type-style('body-long-01');
+  @include type.type-style('body-long-01');
 
   margin-bottom: $spacing-06;
 }
 
-.#{$block-class}__content .#{$carbon-prefix}--dropdown__wrapper:first-of-type {
+.#{$block-class}__content
+  .#{c4p-settings.$carbon-prefix}--dropdown__wrapper:first-of-type {
   margin-bottom: $spacing-06;
 }

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

@@ -0,0 +1,13 @@
+//
+// 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.
+//
+
+// PageHeader uses the following Carbon components:
+// BreadcrumbItem, Grid, Column, Row, Button, SkeletonText, Tag
+@use '@carbon/react/scss/components/breadcrumb';
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/skeleton-styles';
+@use '@carbon/react/scss/components/tag';

package/scss/components/PageHeader/_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 './page-header';

package/scss/components/PageHeader/_index.scss

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