@carbon/ibm-products 2.31.0-alpha.5 → 2.31.1

package/scss/components/DecoratorDualButton/_decorator-dual-button.scss

@@ -0,0 +1,112 @@
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable function-no-unknown */
+
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '../DecoratorBase/decorator-base-mixins' as *;
+@use '../DecoratorBase/decorator-base';
+
+// DecoratorDualButton uses the following Carbon for IBM Products components:
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--decorator;
+$buttons: '#{$block-class}--dual-button:not(.#{$block-class}-disabled)';
+$buttons-disabled: '#{$block-class}--dual-button.#{$block-class}-disabled';
+$icon: #{$block-class}-icon;
+$label: #{$block-class}__label;
+$value: #{$block-class}__value;
+
+.#{$buttons} .#{$label} {
+  background-color: $layer-02;
+  cursor: pointer;
+}
+.#{$buttons}:not(:hover) .#{$value} {
+  @include value-divider();
+}
+.#{$buttons} .#{$value} {
+  background-color: $layer-02;
+  cursor: pointer;
+}
+.#{$buttons} .#{$label}:hover {
+  @include label-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$value}:hover {
+  @include value-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$label}:focus {
+  @include label-divider($color: $focus);
+
+  border-color: $focus;
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$buttons} .#{$value}:focus {
+  @include value-divider($color: $focus);
+
+  border-color: $focus;
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$buttons} .#{$label}:active {
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$value}:active {
+  background-color: $layer-hover-02;
+}
+.#{$buttons-disabled} .#{$label} {
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+.#{$buttons-disabled} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+
+// ICON ENHANCED ACCESSIBILITY
+// Add a border to the icon on hover & active to increase contrast.
+.#{$block-class}--light {
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-low,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-low {
+    stroke: $yellow-60;
+    stroke-width: 1px;
+  }
+  // The "diamond-fill/medium" icon has an inner and outer path.
+  // Fill the outer path to simulate a 1px border.
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-medium path:first-child,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-medium path:first-child {
+    fill: $orange-60;
+  }
+}
+.#{$block-class}--dark {
+  // The "caution/high" icon has an inner and outer path.
+  // Fill the outer path to simulate a 1px border.
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-high path:first-child,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-high path:first-child {
+    fill: $red-40;
+  }
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-critical,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-critical {
+    stroke: $red-40;
+    stroke-width: to-rem(0.5px);
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-dual-button';

package/scss/components/DecoratorDualButton/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-dual-button';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from DecoratorLink in this file.
+// DecoratorLink uses the following Carbon components:

package/scss/components/DecoratorLink/_decorator-link.scss

@@ -0,0 +1,53 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '../DecoratorBase/decorator-base-mixins' as *;
+@use '../DecoratorBase/decorator-base';
+
+// DecoratorLink uses the following Carbon for IBM Products components:
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--decorator;
+$link: #{$block-class}--link;
+$label: #{$block-class}__label;
+$value: #{$block-class}__value;
+
+.#{$link} {
+  cursor: pointer;
+  text-decoration: none;
+}
+.#{$link} .#{$label} {
+  background-color: $layer-02;
+}
+.#{$link} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $link-primary;
+}
+.#{$link}:hover .#{$value} {
+  color: $link-primary-hover;
+  text-decoration: underline;
+}
+.#{$link}:focus {
+  text-decoration: none;
+}
+.#{$link}:focus .#{$value} {
+  @include value-divider($color: $focus);
+
+  border-color: $focus;
+}
+.#{$link}:active .#{$value} {
+  color: $text-primary;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-link';

package/scss/components/DecoratorLink/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-link';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from DecoratorSingleButton in this file.
+// DecoratorSingleButton uses the following Carbon components:

package/scss/components/DecoratorSingleButton/_decorator-single-button.scss

@@ -0,0 +1,117 @@
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable carbon/theme-token-use */
+
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '../DecoratorBase/decorator-base-mixins' as *;
+@use '../DecoratorBase/decorator-base';
+
+// DecoratorSingleButton uses the following Carbon for IBM Products components:
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--decorator;
+$button: '#{$block-class}--single-button:not(.#{$block-class}-disabled)';
+$button-disabled: '#{$block-class}--single-button.#{$block-class}-disabled';
+$icon: #{$block-class}-icon;
+$label: #{$block-class}__label;
+$value: #{$block-class}__value;
+
+.#{$button} {
+  display: flex;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+}
+.#{$button} .#{$label} {
+  background-color: $layer-02;
+}
+.#{$button} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+}
+.#{$button}:hover .#{$label} {
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$button}:hover .#{$value} {
+  @include value-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$button}:focus {
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$button}:focus .#{$label} {
+  border-color: $focus;
+  background-color: $layer-02;
+}
+.#{$button}:focus .#{$value} {
+  @include value-divider();
+
+  border-color: $focus;
+  background-color: $layer-02;
+}
+.#{$button}:active .#{$label} {
+  background-color: $layer-selected-02;
+}
+.#{$button}:active .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-selected-02;
+}
+.#{$button-disabled} {
+  padding: 0;
+  border: 0;
+  cursor: not-allowed;
+}
+.#{$button-disabled} .#{$label} {
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+.#{$button-disabled} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+
+// ICON ENHANCED ACCESSIBILITY
+// Add a border to the icon on hover & active to increase contrast.
+.#{$block-class}--light {
+  &.#{$button}:hover .#{$icon}__magnitude-low,
+  &.#{$button}:active .#{$icon}__magnitude-low {
+    stroke: $yellow-60;
+    stroke-width: 1px;
+  }
+  &.#{$button}:hover .#{$icon}__magnitude-medium path:first-child,
+  &.#{$button}:active .#{$icon}__magnitude-medium path:first-child {
+    fill: $orange-60;
+  }
+}
+.#{$block-class}--dark {
+  &.#{$button}:hover .#{$icon}__magnitude-high path:first-child,
+  &.#{$button}:active .#{$icon}__magnitude-high path:first-child {
+    fill: $red-40;
+  }
+  &.#{$button}:hover .#{$icon}__magnitude-critical,
+  &.#{$button}:active .#{$icon}__magnitude-critical {
+    stroke: $red-40;
+    stroke-width: to-rem(0.5px);
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-single-button';

package/scss/components/DecoratorSingleButton/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './decorator-single-button';

package/scss/components/SidePanel/_side-panel.scss

@@ -305,7 +305,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   &.#{$block-class}--has-slug .#{$block-class}--scrolls {
-    @include utilities.callout-gradient('default', 0, 'layer');
+    @include utilities.ai-popover-gradient('default', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -351,7 +351,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--has-slug .#{$block-class}__content {
-    @include utilities.callout-gradient('default', 0);
+    @include utilities.ai-popover-gradient('default', 0);
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }

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

@@ -61,6 +61,9 @@
 @use './CoachmarkStack/index-with-carbon' as *;
 @use './DelimitedList/index-with-carbon' as *;
 @use './Decorator/index-with-carbon' as *;
+@use './DecoratorLink/index-with-carbon' as *;
+@use './DecoratorSingleButton/index-with-carbon' as *;
+@use './DecoratorDualButton/index-with-carbon' as *;
 @use './DescriptionList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -69,6 +69,9 @@
 @use './InterstitialScreenViewModule';
 @use './DelimitedList';
 @use './Decorator';
+@use './DecoratorLink';
+@use './DecoratorSingleButton';
+@use './DecoratorDualButton';
 @use './DescriptionList';
 @use './FullPageError';
 @use './SearchBar';