@carbon/ibm-products-styles 2.76.0 → 2.77.0-rc.0

package/scss/components/Datagrid/styles/addons/_animations.scss

@@ -1,56 +0,0 @@
-//
-// Copyright IBM Corp. 2025, 2025
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@keyframes filter-panel-entrance-reduced {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes filter-panel-exit-reduced {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes filter-panel-entrance-left {
-  0% {
-    inline-size: 0;
-    opacity: 0;
-    /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
-  }
-
-  100% {
-    inline-size: var(--panel-transform);
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes filter-panel-exit-left {
-  0% {
-    inline-size: var(--panel-transform);
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  100% {
-    inline-size: 0;
-    opacity: 0;
-    /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
-  }
-}

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

@@ -1,9 +0,0 @@
-//
-// 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 Decorator in this file.
-// Decorator uses the following Carbon components:

package/scss/components/Decorator/_decorator.scss

@@ -1,23 +0,0 @@
-//
-// 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';
-
-// Decorator uses the following Carbon for IBM Products components:
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--decorator;
-$default: #{$block-class}--default;
-$value: #{$block-class}__value;
-
-.#{$default} .#{$value} {
-  @include value-divider();
-}

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

@@ -1,9 +0,0 @@
-//
-// 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';

package/scss/components/Decorator/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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';

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

@@ -1,9 +0,0 @@
-//
-// 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 DecoratorBase in this file.
-// DecoratorBase uses the following Carbon components:

package/scss/components/DecoratorBase/_decorator-base-mixins.scss

@@ -1,39 +0,0 @@
-//
-// 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.
-//
-
-/* stylelint-disable carbon/layout-use */
-
-@use '@carbon/styles/scss/theme' as *;
-
-// Use value-divider() by default for the component's dividing line.
-@mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) {
-  &::after {
-    position: absolute;
-    border-inline-start: 1px solid #{$color};
-    content: '';
-    inset-block: #{$top} #{$bottom};
-    inset-inline-start: #{$left};
-  }
-}
-
-// Use label-divider() only when hovering/focusing the label.
-@mixin label-divider(
-  // Nudge the line over so it occupies the same space as the value divider.
-  $top: -1px,
-  $right: -1px,
-  $bottom: -1px,
-  $color: $border-strong
-) {
-  &::after {
-    position: absolute;
-    z-index: 1;
-    border-inline-end: 1px solid #{$color};
-    content: '';
-    inset-block: #{$top} #{$bottom};
-    inset-inline-end: #{$right};
-  }
-}

package/scss/components/DecoratorBase/_decorator-base.scss

@@ -1,145 +0,0 @@
-/* stylelint-disable carbon/theme-use */
-/* stylelint-disable carbon/type-use */
-/* stylelint-disable carbon/layout-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.
-//
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
-// DecoratorBase uses the following Carbon for IBM Products components:
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/type';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--decorator;
-$icon: #{$block-class}-icon;
-$label: #{$block-class}__label;
-$value: #{$block-class}__value;
-
-.#{$block-class}--light {
-  @include theme(themes.$g10, true);
-}
-.#{$block-class}--dark {
-  @include theme(themes.$g100, true);
-}
-
-// BASE STYLING FOR ALL DECORATORS
-.#{$block-class} {
-  display: inline-flex;
-  align-items: normal;
-  border-radius: $spacing-12;
-  max-inline-size: 100%;
-}
-.#{$block-class} .#{$label} {
-  @include type.type-style('label-01');
-
-  position: relative;
-  display: inline-flex;
-  align-items: normal;
-  padding: 0 $spacing-03;
-  border-width: to-rem(1px) 0 to-rem(1px) to-rem(1px);
-  border-style: solid;
-  border-color: $border-subtle-02;
-  border-radius: $spacing-12 0 0 $spacing-12;
-  background-color: $layer-01;
-  block-size: $spacing-06;
-  color: $text-secondary;
-  line-height: 1.8;
-}
-.#{$block-class} .#{$value} {
-  @include type.type-style('label-01');
-
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
-  align-items: normal;
-  padding: 0 $spacing-03;
-  border-width: to-rem(1px) to-rem(1px) to-rem(1px) 0;
-  border-style: solid;
-  border-color: $border-subtle-02;
-  border-radius: 0 $spacing-12 $spacing-12 0;
-  background-color: $layer-01;
-  block-size: $spacing-06;
-  color: $text-primary;
-  line-height: 1.8;
-}
-.#{$block-class} .#{$icon} {
-  margin-block-start: to-rem(3px);
-  margin-inline-end: $spacing-02;
-}
-
-//
-// MODIFIER, SMALL
-//
-.#{$block-class}--sm .#{$label} {
-  padding: 0 $spacing-02 0 $spacing-03;
-  block-size: to-rem(18px);
-  line-height: 1.333;
-}
-.#{$block-class}--sm .#{$value} {
-  // When "small", the divider takes up 1px of 4px of the available space: so "+1px".
-  padding: 0 $spacing-03 0 calc($spacing-02 + 1px);
-  block-size: to-rem(18px);
-  line-height: 1.333;
-}
-
-//
-// MODIFIER, TRUNCATION
-//
-.#{$block-class}--truncate-end .#{$value} {
-  display: inline;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.#{$block-class}--truncate-start .#{$value} {
-  display: inline;
-  overflow: hidden;
-  direction: rtl;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-//
-// MAGNITUDE ICON COLORS AND SIZES
-//
-.#{$icon}__magnitude-unknown {
-  fill: $icon-secondary;
-}
-.#{$icon}__magnitude-benign {
-  fill: $teal-60;
-}
-.#{$icon}__magnitude-low {
-  fill: $support-warning;
-}
-.#{$icon}__magnitude-medium {
-  fill: $orange-40;
-}
-.#{$icon}__magnitude-high {
-  fill: $support-error;
-}
-.#{$icon}__magnitude-critical {
-  fill: $support-error;
-}
-.#{$block-class}-disabled svg {
-  fill: $icon-on-color-disabled;
-}
-
-// MODIFIER, SMALL ICON
-.#{$block-class} .#{$icon}--sm {
-  block-size: $spacing-04;
-  inline-size: $spacing-04;
-  margin-block-start: to-rem(2.5px);
-}

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

@@ -1,9 +0,0 @@
-//
-// 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-base';

package/scss/components/DecoratorBase/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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-base';

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

@@ -1,9 +0,0 @@
-//
-// 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 DecoratorDualButton in this file.
-// DecoratorDualButton uses the following Carbon components:

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

@@ -1,112 +0,0 @@
-/* stylelint-disable carbon/theme-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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,8 +0,0 @@
-//
-// 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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,53 +0,0 @@
-//
-// 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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,8 +0,0 @@
-//
-// 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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,117 +0,0 @@
-/* stylelint-disable function-no-unknown */
-/* stylelint-disable carbon/theme-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);
-  }
-}