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

package/scss/components/TruncatedList/_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 './truncated-list';

package/scss/components/TruncatedList/_truncated-list.scss

@@ -1,51 +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';
-
-// Other Carbon settings if needed
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--truncated-list;
-
-.#{$block-class}__list {
-  /* stylelint-disable-next-line carbon/motion-duration-use */
-  transition: height 240ms motion(exit, productive);
-
-  /* stylelint-disable-next-line max-nesting-depth */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-.#{$block-class}--expanded .#{$block-class}__list {
-  overflow-y: auto;
-  @supports (overflow-block: auto) {
-    overflow-block: auto;
-  }
-}
-
-.#{$block-class}--expanded-all .#{$block-class}__list {
-  overflow-y: hidden;
-  @supports (overflow-block: hidden) {
-    overflow-block: hidden;
-  }
-}
-
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button {
-  padding: 0;
-  inline-size: 100%;
-  margin-block-start: $spacing-02;
-  min-block-size: auto;
-}
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button:hover {
-  background: transparent;
-}

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

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 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.
-//

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

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 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.
-//
-
-@use './carbon-imports';
-@use './truncated-text';

package/scss/components/TruncatedText/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 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.
-//
-
-@use './truncated-text';

package/scss/components/TruncatedText/_truncated-text.scss

@@ -1,27 +0,0 @@
-//
-// Copyright IBM Corp. 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.
-//
-
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/theme' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
-
-.#{$block-class} {
-  &__text-content {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    line-height: initial;
-    text-overflow: clip;
-  }
-
-  &__expand-toggle {
-    color: $link-primary;
-    cursor: pointer;
-  }
-}

package/scss/components/UserAvatar/_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 UserAvatar in this file.
-// UserAvatar uses the following Carbon components:
-@use '@carbon/styles/scss/components/tooltip';

package/scss/components/UserAvatar/_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 './user-avatar';

package/scss/components/UserAvatar/_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 './user-avatar';

package/scss/components/UserAvatar/_user-avatar.scss

@@ -1,153 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 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.
-//
-
-@use 'sass:map';
-
-// Standard imports.
-@use '../../global/styles/project-settings' as *;
-@use '../../global/styles/mixins';
-@use '@carbon/colors' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-
-$block-class: #{$pkg-prefix}--user-avatar;
-
-$sizes: (
-  xl: $spacing-10,
-  lg: $spacing-09,
-  md: $spacing-07,
-  sm: $spacing-06,
-);
-
-@mixin size($size) {
-  $_size: map.get($sizes, $size);
-
-  block-size: $_size;
-
-  inline-size: $_size;
-}
-
-.#{$block-class} {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 0.5px solid transparent;
-  border-radius: 100%;
-  block-size: 4rem;
-  color: $text-inverse;
-  inline-size: 4rem;
-  outline: none;
-  outline-offset: 3px;
-}
-
-.#{$block-class} svg {
-  color: $icon-inverse;
-}
-
-.#{$block-class}__tooltip {
-  &:focus-within .#{$block-class} {
-    // stylelint-disable-next-line carbon/theme-use
-    outline: 2px solid $focus;
-    outline-offset: 1px;
-  }
-}
-
-@mixin photo-styling {
-  border-radius: 100%;
-  object-fit: fill;
-}
-
-@mixin setBgColor($color) {
-  // stylelint-disable-next-line carbon/theme-use
-  background-color: $color;
-}
-
-//this mixin allows you to set background color based on the lighter themes such as g10 and white
-@mixin setLightBg($order, $color) {
-  :root .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
-    @include setBgColor($color);
-  }
-}
-
-//this mixin allows you to set background color based on the darker themes such as g90 and g100
-@mixin setDarkBg($order, $color) {
-  .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
-    @include setBgColor($color);
-  }
-}
-
-@include setLightBg(order-1-cyan, $cyan-60);
-@include setLightBg(order-2-gray, $gray-60);
-@include setLightBg(order-3-green, $green-60);
-@include setLightBg(order-4-magenta, $magenta-60);
-@include setLightBg(order-5-purple, $purple-60);
-@include setLightBg(order-6-teal, $teal-60);
-@include setLightBg(order-7-cyan, $cyan-80);
-@include setLightBg(order-8-gray, $gray-80);
-@include setLightBg(order-9-green, $green-80);
-@include setLightBg(order-10-magenta, $magenta-80);
-@include setLightBg(order-11-purple, $purple-80);
-@include setLightBg(order-12-teal, $teal-80);
-
-@include setDarkBg(order-1-cyan, $cyan-50);
-@include setDarkBg(order-2-gray, $gray-50);
-@include setDarkBg(order-3-green, $green-50);
-@include setDarkBg(order-4-magenta, $magenta-50);
-@include setDarkBg(order-5-purple, $purple-50);
-@include setDarkBg(order-6-teal, $teal-50);
-@include setDarkBg(order-7-cyan, $cyan-30);
-@include setDarkBg(order-8-gray, $gray-30);
-@include setDarkBg(order-9-green, $green-30);
-@include setDarkBg(order-10-magenta, $magenta-30);
-@include setDarkBg(order-11-purple, $purple-30);
-@include setDarkBg(order-12-teal, $teal-30);
-
-.#{$block-class}--xl {
-  @include size('xl');
-  @include type.type-style('heading-04');
-}
-
-.#{$block-class}--lg {
-  @include size('lg');
-  @include type.type-style('heading-03');
-}
-
-.#{$block-class}--md {
-  @include size('md');
-  @include type.type-style('body-compact-01');
-}
-
-.#{$block-class}--sm {
-  @include size('sm');
-  @include type.type-style('label-01');
-}
-
-.#{$block-class}__photo {
-  border-radius: 100%;
-  object-fit: contain;
-}
-.#{$block-class}__photo--xl {
-  @include photo-styling;
-  @include size('xl');
-}
-.#{$block-class}__photo--lg {
-  @include photo-styling;
-  @include size('lg');
-}
-.#{$block-class}__photo--md {
-  @include photo-styling;
-  @include size('md');
-}
-.#{$block-class}__photo--sm {
-  @include photo-styling;
-  @include size('sm');
-}

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

@@ -1,10 +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.
-//
-
-// UserProfileImage uses the following Carbon components:
-// IconButton
-@use '@carbon/styles/scss/components/button';

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

@@ -1,39 +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 '@carbon/styles/scss/colors' as *;
-
-$carbon-colors: (
-  '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

@@ -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 './user-profile-image';

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

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

@@ -1,162 +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 'sass:map';
-
-// Standard imports.
-@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: (
-  xl: $spacing-10,
-  lg: $spacing-07,
-  md: $spacing-06,
-  sm: calc(#{$spacing-05} + #{$spacing-02}),
-  xs: $spacing-05,
-);
-
-@mixin size($size) {
-  $_size: map.get($sizes, $size);
-
-  block-size: $_size;
-
-  inline-size: $_size;
-}
-
-$base-colors: 'cyan', 'gray', 'green', 'magenta', 'purple', 'teal';
-$themes: (
-  'light': (
-    'light-contrast': 60,
-    'dark-contrast': 80,
-  ),
-  'dark': (
-    'light-contrast': 50,
-    'dark-contrast': 30,
-  ),
-);
-
-$theme-keys: map-keys($themes);
-
-@function carbon-get-background-color($color, $key, $contrast-key) {
-  @return map.get(
-    $carbon-colors,
-    #{$color}#{map.get(map.get($themes, $key), #{$contrast-key}-contrast)}
-  );
-}
-
-@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-use
-        background-color: carbon-get-background-color(
-          $color,
-          $key,
-          $contrast-key
-        );
-      }
-    }
-  }
-}
-
-.#{$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}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
-  padding: 0;
-  border-radius: 50%;
-  min-block-size: auto;
-}
-
-.#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
-  border: 0;
-  box-shadow: 0 0 0 $spacing-02 $focus;
-}
-
-.#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
-  fill: $layer-01;
-}
-
-.#{$block-class}__photo {
-  border-radius: 100%;
-  inline-size: 100%;
-}
-
-.#{$block-class}__photo--xl {
-  @include size('xl');
-}
-
-.#{$block-class}__photo--lg {
-  @include size('lg');
-}
-
-.#{$block-class}__photo--md {
-  @include size('md');
-}
-.#{$block-class}__photo--sm {
-  @include size('sm');
-}
-
-.#{$block-class}__photo--xs {
-  @include size('xs');
-}
-
-.#{$block-class}--xl {
-  @include size('xl');
-  @include type.type-style('heading-04');
-}
-
-.#{$block-class}--lg {
-  @include size('lg');
-  @include type.type-style('body-compact-01');
-}
-
-.#{$block-class}--md {
-  @include size('md');
-  @include type.type-style('label-01');
-  @include font-family.font-weight('semibold');
-}
-
-.#{$block-class}--sm {
-  @include size('sm');
-  @include type.type-style('label-01');
-  @include font-family.font-weight('semibold');
-}
-
-.#{$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

@@ -1,12 +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.
-//
-
-// WebTerminal uses the following Carbon components:
-// Button
-// OverflowMenu
-@use '@carbon/styles/scss/components/button';
-@use '@carbon/styles/scss/components/overflow-menu';

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

package/scss/components/WebTerminal/_index.scss

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

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

@@ -1,110 +0,0 @@
-//
-// 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.
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' 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;
-
-@keyframes web-terminal-entrance {
-  from {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translateX(#{$web-terminal-width});
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes web-terminal-exit {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  to {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translateX(#{$web-terminal-width});
-  }
-}
-
-/*
-  The reason for not using theme tokens in the web terminal
-  component is because we want these colors to always be the same
-  despite of which carbon theme the user has.
-*/
-
-.#{$block-class}--open {
-  animation: web-terminal-entrance $duration-moderate-02 motion(standard);
-}
-
-.#{$block-class}--closed {
-  animation: web-terminal-exit forwards $duration-moderate-02 motion(standard);
-}
-
-.#{$block-class} {
-  @include theme($g90);
-
-  position: fixed;
-  block-size: calc(100vh - #{$spacing-09});
-  border-inline-start: 1px solid $gray-90;
-  color: $text-primary;
-  inline-size: 100%;
-  inset-block-start: $spacing-09;
-  inset-inline-end: 0;
-  max-inline-size: $web-terminal-width;
-
-  @media (prefers-reduced-motion) {
-    animation: none;
-  }
-}
-
-.#{$block-class}__bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $background;
-  block-size: 3rem;
-}
-
-.#{$block-class}__actions {
-  display: flex;
-}
-
-.#{$block-class}__documentation-overflow {
-  @include theme($g100);
-}
-
-.#{$block-class}__documentation-overflow
-  .#{$carbon-prefix}--overflow-menu-options__btn {
-  text-decoration: none;
-}
-
-// Terminal body styles
-.#{$block-class}__body {
-  block-size: calc(100vh - #{$spacing-09});
-}
-
-// Terminal wrapper styles
-.#{$block-class}-content-wrapper {
-  block-size: 100%;
-  inline-size: 100vw;
-}
-
-.#{$block-class}-content-wrapper--open {
-  inline-size: calc(100vw - #{$web-terminal-width});
-}

package/scss/components/_Canary/_canary.scss

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//