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

package/scss/components/about-modal/about-modal.scss

@@ -0,0 +1,117 @@
+/*
+* 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.
+*/
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use '@carbon/styles' as styles;
+@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/themes/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/components/modal' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use 'sass:map';
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+@use '@carbon/ibm-products-styles/scss/components/AboutModal/index' as *;
+
+:host(#{$prefix}-about-modal) {
+  .#{$prefix}--about-modal__logo {
+    margin: $spacing-05 $spacing-05 $spacing-07 $spacing-05;
+  }
+  #{$carbon-prefix}-modal-header {
+    padding: 0 20% 0 $spacing-05;
+    grid-row: auto;
+    margin-block-end: 0;
+  }
+  #{$carbon-prefix}-modal-body {
+    @include type.type-style('body-compact-02');
+
+    overflow: hidden auto;
+    grid-row: auto;
+    min-block-size: $spacing-10;
+    padding-block-start: 0;
+    padding-inline: $spacing-05 20%;
+    &:not(.#{$prefix}--about-modal-scroll-content) {
+      margin-block-end: $spacing-06;
+      padding-block-end: 0;
+    }
+    &.#{$prefix}--about-modal-scroll-content {
+      @extend .#{$carbon-prefix}--modal-scroll-content;
+    }
+  }
+
+  #{$carbon-prefix}-modal-heading {
+    @include type.type-style('heading-04');
+
+    color: $text-primary;
+    margin-block-end: $spacing-02;
+  }
+
+  .#{$prefix}--about-modal__version {
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--about-modal__content,
+  .#{$prefix}--about-modal__copyright-text {
+    @include type.type-style('label-01');
+
+    color: $text-secondary;
+    margin-block: $spacing-06 0;
+  }
+
+  .#{$prefix}--about-modal__copyright-text {
+    margin-block-start: $spacing-05;
+  }
+
+  .#{$prefix}--about-modal__content:first-child,
+  .#{$prefix}--about-modal__copyright-text:first-child {
+    margin-block-start: $spacing-07;
+  }
+  #{$carbon-prefix}-link {
+    display: inline-flex;
+  }
+  .#{$prefix}--about-modal__links-container {
+    @include type.type-style('body-compact-01');
+
+    margin-block-start: $spacing-06;
+    #{$carbon-prefix}-link + #{$carbon-prefix}-link {
+      border-inline-start: 1px solid $border-strong-01;
+      margin-inline-start: $spacing-03;
+      padding-inline-start: $spacing-03;
+    }
+  }
+  #{$carbon-prefix}-modal-footer {
+    @include styles.theme(styles.$g100);
+
+    display: block;
+    padding: $spacing-05;
+    background-color: $layer-02;
+    block-size: auto;
+    .#{$prefix}--about-modal__footer-label {
+      @include type.type-style('label-01');
+
+      color: $text-secondary;
+      margin-block-end: $spacing-02;
+    }
+    .#{$prefix}--about-modal__footer--tech-logo {
+      block-size: $spacing-06;
+      inline-size: $spacing-06;
+      margin-inline-end: $spacing-03;
+      object-fit: contain;
+    }
+  }
+}

package/scss/components/about-modal/story-styles.scss

@@ -0,0 +1,34 @@
+/*
+* 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/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as *;
+
+$story-prefix: 'about-modal-stories__';
+
+.#{$story-prefix}body-content {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-05;
+  gap: $spacing-05;
+}
+
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -31,6 +31,23 @@ $block-class: #{$prefix}--user-avatar;
   @extend .#{$block-class};
   @extend .#{$block-class}__tooltip;
 }
+
+: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;