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

package/scss/components/SingleAddSelect/_index.scss

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

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 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 '../AddSelect/add-select' as *;

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

@@ -1,6 +0,0 @@
-//
-// 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/StatusIcon/_index-with-carbon.scss

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

package/scss/components/StatusIcon/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// 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 './status-icon';

package/scss/components/StatusIcon/_status-icon.scss

@@ -1,146 +0,0 @@
-//
-// 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.
-//
-
-@use 'sass:map';
-
-// Standard imports.
-@use '@carbon/styles/scss/colors' as *;
-@use '../../global/styles/project-settings' as *;
-
-$colors: (
-  fatal: (
-    light: $black-100,
-    dark: $gray-50,
-  ),
-  critical: (
-    light: $red-60,
-    dark: $red-50,
-  ),
-  major-warning: (
-    light: $orange-40,
-    dark: $orange-40,
-  ),
-  minor-warning: (
-    light: $yellow-20,
-    dark: $yellow-20,
-  ),
-  undefined: (
-    light: $purple-60,
-    dark: $purple-50,
-  ),
-  unknown: (
-    light: $gray-60,
-    dark: $gray-50,
-  ),
-  normal: (
-    light: $green-60,
-    dark: $green-50,
-  ),
-  info: (
-    light: $blue-60,
-    dark: $blue-50,
-  ),
-  in-progress: (
-    light: $blue-60,
-    dark: $blue-50,
-  ),
-  running: (
-    light: $green-60,
-    dark: $green-50,
-  ),
-  pending: (
-    light: $gray-60,
-    dark: $gray-50,
-  ),
-);
-
-$icons: (
-  'fatal',
-  'critical',
-  'major-warning',
-  'minor-warning',
-  'undefined',
-  'unknown',
-  'normal',
-  'info',
-  'in-progress',
-  'running',
-  'pending'
-);
-$themes: ('light', 'dark');
-
-$block-class: #{$pkg-prefix}--status-icon;
-
-@function carbon-clr($name, $theme: light) {
-  // stylelint-disable-next-line carbon/theme-use
-  $color: map.get(map.get($colors, $name), $theme);
-  @return $color;
-}
-
-@keyframes rotating {
-  0% {
-    transform: scaleY(-1) rotate(360deg);
-  }
-
-  100% {
-    transform: scaleY(-1) rotate(0deg);
-  }
-}
-
-.#{$block-class} {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.#{$block-class}--light.#{$block-class}--light-minor-warning,
-.#{$block-class}--dark.#{$block-class}--dark-minor-warning {
-  // stylelint-disable-next-line carbon/theme-use
-  fill: $yellow-20;
-}
-
-.#{$block-class}--light.#{$block-class}--light-major-warning
-  path:nth-of-type(1),
-.#{$block-class}--dark.#{$block-class}--dark-major-warning path:nth-of-type(1),
-.#{$block-class}--light.#{$block-class}--light-minor-warning
-  path:nth-of-type(1),
-.#{$block-class}--dark.#{$block-class}--dark-minor-warning path:nth-of-type(1) {
-  // stylelint-disable-next-line carbon/theme-use
-  fill: $gray-100;
-}
-
-@each $theme in $themes {
-  @each $icon in $icons {
-    @each $theme-key in $themes {
-      .#{$carbon-prefix}--btn--ghost:not([disabled])
-        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
-      .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger
-        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
-      .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
-        @if $icon == in-progress {
-          @media (prefers-reduced-motion: reduce) {
-            animation: none;
-          }
-          // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-          animation: rotating 8000ms infinite linear;
-          // stylelint-disable-next-line carbon/theme-use
-          fill: carbon-clr($icon, $theme);
-        } @else if $icon == running {
-          // stylelint-disable-next-line carbon/theme-use
-          fill: carbon-clr($icon, $theme);
-        } @else {
-          // stylelint-disable-next-line carbon/theme-use
-          fill: carbon-clr($icon, $theme);
-          @media (prefers-reduced-motion) {
-            .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
-              animation: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,12 +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 StatusIndicator in this file.
-// StatusIndicator uses the following Carbon components:
-// InlineLoading, Button
-@use '@carbon/styles/scss/components/inline-loading';
-@use '@carbon/styles/scss/components/button';

package/scss/components/StatusIndicator/_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 './status-indicator';

package/scss/components/StatusIndicator/_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 './status-indicator';

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -1,93 +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 */
-/* stylelint-disable function-no-unknown */
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
-// Other Carbon settings if needed
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/type' 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}--status-indicator;
-$block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
-
-// Default styling
-.#{$block-class}__title {
-  @include type-style('heading-02');
-
-  margin-block-end: $spacing-02;
-}
-.#{$block-class-step}__details {
-  display: flex;
-  align-items: center;
-  min-block-size: $spacing-07;
-}
-.#{$block-class-step}__icon {
-  position: relative;
-  display: flex;
-  inline-size: $spacing-06;
-}
-.#{$block-class-step}__text {
-  @include type-style('body-compact-01');
-
-  color: $text-primary;
-}
-.#{$block-class} .#{$block-class}__button {
-  align-items: center;
-  margin-block-start: $spacing-01;
-  margin-inline-start: $spacing-03;
-}
-.#{$block-class} .#{$block-class}__button:not([disabled]) svg {
-  fill: currentColor;
-  margin-inline-start: $spacing-03;
-}
-
-// Text
-.#{$block-class-step}--inactive .#{$block-class-step}__text {
-  color: $text-secondary;
-}
-.#{$block-class-step}--inactive svg {
-  fill: $icon-primary;
-}
-
-// Icons
-//
-// Override <InlineLoading's> large margins.
-.#{$block-class-step}--active .#{$block-class-step}__icon {
-  margin-inline-end: 0;
-}
-.#{$block-class-step}--active
-  .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
-  margin-inline-end: to-rem(7px);
-}
-// /Override
-//
-.#{$block-class-step}--error svg {
-  fill: $support-error;
-}
-.#{$block-class-step}--finished svg {
-  fill: $support-success;
-}
-
-// Error message
-.#{$block-class-step}__error-message {
-  @include type-style('label-01');
-
-  color: $text-error;
-
-  margin-block: to-rem(-2px) to-rem(6px);
-  margin-inline-start: $spacing-06;
-}

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

@@ -1,10 +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 StringFormatter in this file.
-// StringFormatter uses the following Carbon components:
-@use '@carbon/styles/scss/components/tooltip';

package/scss/components/StringFormatter/_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 './string-formatter';

package/scss/components/StringFormatter/_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 './string-formatter';

package/scss/components/StringFormatter/_string-formatter.scss

@@ -1,112 +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 '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing' as *;
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// StringFormatter uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by StringFormatter
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--string-formatter;
-$popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
-
-.#{$block-class} {
-  display: inline-block;
-
-  &--truncate {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    line-height: inherit;
-    text-overflow: ellipsis;
-    word-break: break-word;
-  }
-
-  button.cds--definition-term {
-    border-block-end: none;
-    letter-spacing: inherit;
-  }
-
-  .cds--popover-container {
-    display: flex;
-  }
-}
-
-.#{$block-class}--content {
-  display: inline-block;
-  text-align: start;
-}
-
-.#{$block-class}--truncate {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.#{$block-class}__tooltip > button {
-  border-width: 0;
-  color: currentColor;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-.#{$block-class} .#{$popover-block-class} {
-  margin: 0 auto;
-  max-inline-size: $spacing-05;
-}
-
-.#{$block-class} .#{$popover-block-class}-content {
-  max-inline-size: 20rem;
-}
-
-.#{$block-class} .#{$popover-block-class}--left .#{$popover-block-class},
-.#{$block-class} .#{$popover-block-class}--left-bottom .#{$popover-block-class},
-.#{$block-class} .#{$popover-block-class}--left-top .#{$popover-block-class} {
-  margin: 0;
-}
-
-.#{$block-class} .#{$popover-block-class}--right .#{$popover-block-class},
-.#{$block-class}
-  .#{$popover-block-class}--right-bottom
-  .#{$popover-block-class},
-.#{$block-class} .#{$popover-block-class}--right-top .#{$popover-block-class} {
-  margin-inline: auto 0;
-}
-
-.#{$block-class} .#{$popover-block-class}--top .#{$popover-block-class}-caret,
-.#{$block-class}
-  .#{$popover-block-class}--top-left
-  .#{$popover-block-class}-caret,
-.#{$block-class}
-  .#{$popover-block-class}--top-right
-  .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line */
-  inset-block-start: -1px !important;
-}
-
-.#{$block-class}
-  .#{$popover-block-class}--bottom
-  .#{$popover-block-class}-caret,
-.#{$block-class}
-  .#{$popover-block-class}--bottom-left
-  .#{$popover-block-class}-caret,
-.#{$block-class}
-  .#{$popover-block-class}--bottom-right
-  .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line */
-  inset-block-end: -1px !important;
-}

package/scss/components/TagOverflow/_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 TagOverflow in this file.
-// TagOverflow uses the following Carbon components:

package/scss/components/TagOverflow/_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 './tag-overflow';

package/scss/components/TagOverflow/_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 './tag-overflow';

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -1,197 +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 *;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// TagOverflow uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by TagOverflow
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{$pkg-prefix}--tag-overflow;
-$block-class-popover: #{$block-class}-popover;
-$block-class-modal: #{$block-class}-modal;
-
-.#{$block-class}__visible-tags {
-  display: flex;
-}
-
-.#{$block-class}--align-end {
-  justify-content: flex-end;
-}
-
-.#{$block-class}--align-center {
-  justify-content: center;
-}
-
-.#{$block-class}--multiline {
-  flex-wrap: wrap;
-}
-
-.#{$block-class}__item--tag {
-  border: none;
-  margin-block-end: $spacing-03;
-  margin-inline-end: $spacing-03;
-}
-
-.#{$block-class}__item--tag span {
-  display: inline-block;
-  overflow: hidden;
-  max-inline-size: $spacing-12;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.#{$block-class}__indicator {
-  display: inline-block;
-  max-inline-size: $spacing-09;
-}
-
-.#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
-  white-space: normal;
-}
-
-.#{$block-class-popover} {
-  display: inline-block;
-  vertical-align: bottom;
-
-  .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
-    border: 0;
-  }
-
-  .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
-    padding: $spacing-05;
-  }
-}
-
-.#{$block-class-popover}--hidden {
-  overflow: hidden;
-  max-inline-size: 0;
-  visibility: hidden;
-}
-
-@include mixins.block-wrap('#{$block-class-popover}__el') {
-  &.#{$block-class-popover}__el {
-    // removes the min width in Carbon
-    min-inline-size: initial;
-    text-align: start;
-  }
-
-  .#{$block-class-popover}__trigger {
-    /* stylelint-disable-next-line declaration-no-important */
-    border: none !important;
-    font-family: inherit;
-  }
-
-  .#{$carbon-prefix}--link:active,
-  .#{$carbon-prefix}--link:active:visited,
-  .#{$carbon-prefix}--link:active:visited:hover {
-    color: $text-inverse;
-  }
-
-  .#{$block-class-popover}__tag-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .#{$block-class-popover}__show-all-tags-link {
-    color: $link-inverse;
-
-    &:hover,
-    &:visited:hover {
-      color: $link-inverse-hover;
-    }
-
-    &:focus {
-      color: $focus-inverse;
-    }
-
-    &:visited {
-      color: $link-inverse;
-    }
-  }
-
-  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--tag
-    .#{$carbon-prefix}--tag {
-    background-color: $background-inverse-hover;
-  }
-
-  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default,
-  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default
-    .#{$carbon-prefix}--tag {
-    @include type.type-style('body-compact-01');
-
-    display: block;
-    overflow: hidden;
-    padding: 0;
-    border-radius: 0;
-    margin: 0;
-    background-color: inherit;
-    color: inherit;
-    min-block-size: initial;
-    min-inline-size: initial;
-  }
-
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon {
-    // undo override by .#{$carbon-prefix}--tooltip button
-    padding: 0;
-  }
-
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag--high-contrast {
-    background-color: $background;
-    color: $text-primary;
-  }
-
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:hover {
-    background-color: $background-hover;
-  }
-
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 $spacing-01 $focus;
-  }
-}
-
-@include mixins.block-wrap('#{$block-class-modal}') {
-  &.#{$block-class-modal} {
-    // not to be overridden by use in tag set
-    text-align: initial;
-    white-space: initial;
-  }
-
-  .#{$block-class-modal}__container {
-    @include breakpoint(md) {
-      block-size: 90%;
-      max-block-size: 450px;
-    }
-  }
-
-  .#{$block-class-modal}__search {
-    margin-block: $spacing-05 0;
-  }
-
-  .#{$block-class-modal}__header {
-    margin-inline-end: $spacing-05;
-    padding-inline-end: 0;
-  }
-
-  .#{$block-class-modal}__body {
-    .#{$carbon-prefix}--tag {
-      margin-block-end: $spacing-03;
-      margin-inline-end: $spacing-03;
-    }
-  }
-}