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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/scss/components/UserProfileImage/_index.scss

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

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

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

@@ -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 './web-terminal';

package/scss/components/WebTerminal/_index.scss

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

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

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