@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

package/scss/components/truncated-text/truncated-text.scss

@@ -0,0 +1,110 @@
+/*
+* 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.
+*/
+
+// $css--plex: true !default;
+
+@use 'sass:map';
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/config';
+
+$prefix: 'c4p';
+$carbon-prefix: config.$prefix;
+$block-class: #{$prefix}--truncated-text;
+
+// Common reset button style
+%reset-button {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  line-height: inherit;
+}
+
+// Mixin for directional gradients
+@mixin gradient-bg($direction, $color) {
+  background: linear-gradient($direction, rgba(255, 255, 255, 0) 0%, $color 0%);
+}
+
+:host(#{$prefix}-truncated-text) {
+  display: block;
+  inline-size: 100%;
+
+  .#{$block-class}_transition {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height $duration-fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$block-class}_content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp, 0);
+    text-overflow: clip;
+    white-space: normal;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$block-class}_content--closing {
+    -webkit-line-clamp: none;
+  }
+
+  #{$carbon-prefix}-tooltip {
+    display: inline-flex;
+  }
+
+  button:focus,
+  .#{$block-class}_button-expand:focus,
+  .#{$block-class}_button-collapse:focus {
+    @include focus-outline('outline');
+  }
+}
+
+.#{$block-class}_button-expand,
+.#{$block-class}_button-collapse {
+  @extend %reset-button;
+
+  padding: 0 $spacing-01;
+  color: $link-primary;
+
+  &.#{$block-class}_button-hide {
+    display: none;
+  }
+}
+
+.#{$block-class}_button-expand {
+  &.#{$block-class}_button-layered {
+    background-color: $layer;
+  }
+
+  // Gradient LTR
+  &:dir(ltr)::before {
+    @include gradient-bg(90deg, $background);
+  }
+
+  &.#{$block-class}_button-layered:dir(ltr)::before {
+    @include gradient-bg(90deg, $layer);
+  }
+
+  // Gradient RTL
+  &:dir(rtl)::before {
+    @include gradient-bg(270deg, $background);
+  }
+
+  &.#{$block-class}_button-layered:dir(rtl)::before {
+    @include gradient-bg(270deg, $layer);
+  }
+}
+
+.#{$block-class}_button-collapse {
+  background-color: transparent;
+}

package/scss/components/user-avatar/user-avatar.scss

@@ -0,0 +1,119 @@
+/*
+* 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.
+*/
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities';
+@use 'sass:map';
+
+@use '@carbon/ibm-products-styles/scss/components/UserAvatar' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+$block-class: #{$prefix}--user-avatar;
+
+:host(#{$prefix}-user-avatar) {
+  display: inline-block;
+
+  .#{$block-class} {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}--xl {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+  }
+}
+:host(#{$prefix}-user-avatar) .#{$block-class}--lg {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-06;
+    inline-size: $spacing-06;
+  }
+}
+:host(#{$prefix}-user-avatar) .#{$block-class}--md {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-04 + $spacing-03;
+    inline-size: $spacing-04 + $spacing-03;
+  }
+}
+:host(#{$prefix}-user-avatar) .#{$block-class}--sm {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-05;
+    inline-size: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}__tooltip-trigger {
+  padding: 0;
+  border: 0;
+  background: none;
+  outline: none;
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}__tooltip-content {
+  --cds-tooltip-padding-block: #{$spacing-01};
+
+  &:focus-within {
+    outline: $spacing-01 solid $focus;
+    outline-offset: 1px;
+  }
+}
+
+@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) {
+  :host(#{$prefix}-user-avatar) .#{$block-class}--#{$order},
+  :host(#{$prefix}-user-avatar[theme='light']) .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
+}
+@mixin setDarkBg($order, $color) {
+  :host(#{$prefix}-user-avatar[theme='dark']) .#{$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);