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

package/scss/components/Card/_card.scss

@@ -0,0 +1,238 @@
+//
+// 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.
+//
+
+// NOTE: Please do not remove the duplicate `slug` and `decorator` classes. We need both until slug is fully deprecated
+
+// Standard imports.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/utilities';
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class} {
+  border: 1px solid transparent;
+  background-color: $layer-01;
+  color: $text-primary;
+}
+
+.#{$block-class}__clickable {
+  border-color: $border-tile-01;
+  cursor: pointer;
+  // stylelint-disable-next-line carbon/motion-easing-use
+  transition: background-color $duration-fast-02;
+}
+
+.#{$block-class}__clickable:focus {
+  @include utilities.focus-outline('outline');
+}
+
+.#{$block-class}__clickable:hover {
+  background-color: $layer-hover-01;
+}
+
+.#{$block-class}__media-left {
+  display: flex;
+  flex-direction: row;
+}
+
+.#{$block-class}__media-left .#{$block-class}__content-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.#{$block-class}__media-left .#{$block-class}__footer {
+  align-self: flex-end;
+  margin-block-start: auto;
+}
+
+.#{$block-class}__media > * {
+  display: block;
+  max-inline-size: 100%;
+}
+
+.#{$block-class}__header {
+  padding: $spacing-05;
+  padding-inline-end: 0; // makes for consistent slug position across productive and expressive
+}
+
+.#{$block-class}__header-label-only {
+  padding-block-end: $spacing-03;
+}
+
+.#{$block-class}__header-label-only .#{$block-class}__label {
+  margin-block-end: 0;
+}
+
+.#{$block-class}__header-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.#{$block-class}__label {
+  @include type-style('label-01');
+
+  margin-block-end: $spacing-01;
+}
+
+.#{$block-class}__description {
+  @include type-style('label-01');
+
+  margin-block-start: $spacing-01;
+}
+
+.#{$block-class}__body {
+  @include type-style('body-compact-01');
+
+  padding: $spacing-05;
+  padding-block-start: 0;
+}
+
+.#{$block-class}__footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.#{$block-class}__actions {
+  display: flex;
+  flex-direction: row;
+}
+
+.#{$block-class}__icon {
+  padding: $spacing-03;
+  color: inherit;
+  cursor: pointer;
+}
+
+.#{$block-class}__icon:hover {
+  background-color: $layer-hover-01;
+}
+
+.#{$block-class}__icon:active {
+  color: $link-primary-hover;
+}
+
+.#{$block-class}__link {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.#{$block-class}__pictogram {
+  padding-block-start: $spacing-05;
+  padding-inline-start: $spacing-05;
+}
+
+.#{$block-class}__header-container--has-actions {
+  padding-inline-end: $spacing-03;
+}
+
+// +++ adjustments for slug
+.#{$block-class} {
+  position: relative;
+}
+
+.#{$block-class}__media + .#{$block-class}__content-container {
+  /* display relative to container when media displayed */
+  position: relative;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--ai-label {
+  position: absolute;
+  inset-block-start: $spacing-05;
+  inset-inline-end: $spacing-05;
+}
+
+.#{$block-class}__header__inner-wrapper--decorator {
+  position: absolute;
+  inset-block-start: $spacing-05;
+  inset-inline-end: $spacing-05;
+
+  .#{c4p-settings.$carbon-prefix}--slug,
+  .#{c4p-settings.$carbon-prefix}--ai-label {
+    position: relative;
+    inset-block-start: unset;
+    inset-inline-end: unset;
+  }
+}
+
+.#{$block-class}__header-container--has-slug,
+.#{$block-class}__header-container--has-decorator {
+  inline-size: 100%;
+  padding-inline-end: $spacing-07;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--has-actions {
+  padding-inline-end: $spacing-08;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--large-tile-or-label {
+  padding-inline-end: $spacing-09;
+}
+
+.#{$block-class}__clickable {
+  position: relative;
+}
+
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug-icon {
+  pointer-events: none;
+}
+
+.#{$block-class}--has-slug,
+.#{$block-class}--has-ai-label {
+  @include utilities.ai-popover-gradient('default', 0, 'layer');
+
+  border: 1px solid transparent;
+  box-shadow:
+    inset 0 -80px 70px -65px $ai-inner-shadow,
+    0 4px 10px 2px $ai-drop-shadow;
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label::before {
+  @include utilities.ai-popover-gradient('hover', 0, 'layer');
+
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  content: '';
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity $duration-fast-02 motion(standard, productive);
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label:hover::before {
+  opacity: 1;
+}
+
+.#{$block-class}__clickable .#{$block-class}__content-container {
+  position: relative;
+  z-index: 1;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon rect {
+  stroke: $icon-primary;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon path {
+  fill: $icon-primary;
+}
+
+// --- adjustments for slug

package/scss/components/Card/_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 './card';

package/scss/components/Card/_index.scss

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

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

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

package/scss/components/Carousel/_carousel.scss

@@ -0,0 +1,76 @@
+//
+// Copyright IBM Corp. 2023, 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.
+//
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--carousel;
+
+.#{$block-class} {
+  position: relative;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:focus {
+    outline: none;
+  }
+}
+.#{$block-class}__elements-container {
+  overflow: hidden;
+}
+.#{$block-class}__elements-container--scrolled,
+.#{$block-class}__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  inline-size: $spacing-07;
+  inset-block: 0;
+  pointer-events: none;
+}
+
+.#{$block-class}__elements-container--scrolled {
+  inset-inline-start: 0;
+}
+
+.#{$block-class}__elements-container--scroll-max {
+  inset-inline-end: 0;
+}
+
+.#{$block-class}__elements {
+  display: flex;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &:focus {
+    @include utilities.focus-outline('outline');
+  }
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
+  }
+}
+
+.#{$block-class}__elements::-webkit-scrollbar {
+  display: none;
+}

package/scss/components/Carousel/_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 './carousel';

package/scss/components/Carousel/_index.scss

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

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

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

@@ -0,0 +1,47 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--cascade;
+$animationProps: $duration-moderate-02 motion(standard, productive) 0s 1;
+$fadeStart: translateY(3rem);
+$fadeEnd: translateY(0);
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+    transform: $fadeStart;
+  }
+
+  100% {
+    opacity: 1;
+    transform: $fadeEnd;
+  }
+}
+
+.#{$block-class}__element,
+.#{$block-class}__col {
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: no-preference) {
+    /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
+    animation: $animationProps fade;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
+}
+
+//adds cascading delay
+@for $i from 1 through 8 {
+  .#{$block-class}__element:nth-child(n + #{$i}),
+  .#{$block-class}__col-#{$i} {
+    animation-delay: #{$i * 60}ms;
+  }
+}

package/scss/components/Cascade/_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 './cascade';

package/scss/components/Cascade/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 20201, 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './cascade';

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

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// Checklist uses the following Carbon components:
+// Button, IconButton
+
+@use '@carbon/styles/scss/components/button';

package/scss/components/Checklist/_checklist.scss

@@ -0,0 +1,217 @@
+//
+// Copyright IBM Corp. 2023, 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.
+//
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@mixin ellipsis-2-lines {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--checklist;
+
+.#{$block-class}__header {
+  display: flex;
+  padding: $spacing-05;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
+  gap: $spacing-03;
+}
+
+.#{$block-class}__chart {
+  // outer donut
+  position: relative;
+  align-self: center;
+  block-size: $spacing-08;
+  inline-size: $spacing-08;
+  min-inline-size: $spacing-08;
+}
+
+.#{$block-class}__chart::after {
+  // inner donut
+  position: absolute;
+  border-radius: 50%;
+  background-color: $layer-01;
+  block-size: $spacing-07;
+  content: '';
+  inline-size: $spacing-07;
+  inset-block-start: $spacing-02;
+  inset-inline-start: $spacing-02;
+}
+
+// Align __title and __chart-label vertically centered in the header.
+.#{$block-class}__titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.#{$block-class}__title {
+  @include type-style('productive-heading-02');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__chart-label {
+  @include type-style('label-01');
+  @include ellipsis-2-lines();
+
+  color: $text-secondary;
+}
+
+.#{$block-class}__title + .#{$block-class}__chart-label {
+  margin-block-start: $spacing-01;
+}
+
+// TOGGLE
+// The <IconButton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any class names passed via the <IconButton>.
+// So, we have to refer to it via it's "tooltip" wrapper element. :/
+.#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
+  block-size: 2rem;
+  margin-block-start: calc(-1 * $spacing-03);
+  margin-inline: auto calc(-1 * $spacing-03);
+}
+
+.#{$block-class}__chevron {
+  color: $text-primary;
+  transform: rotate(0deg);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__chevron {
+  transform: rotate(-180deg);
+}
+
+// Button to appear more like a link so it aligns better with the list text.
+// Override Primary button styling to appear more like a link.
+// "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  @include type-style('body-short-01');
+  // override bx--btn to allow two-line ellipsis
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  flex-shrink: unset;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: $link-primary;
+
+  max-inline-size: none;
+  min-block-size: auto;
+}
+// The CSS for the Carbon button's label is incompatible with two-line ellipsis,
+// but a div inside a Carbon button works.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:hover {
+  background: transparent;
+  color: $link-primary-hover;
+  text-decoration: underline;
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:active {
+  background: transparent;
+  color: $text-primary;
+  text-decoration: underline;
+}
+
+// container for animated content
+.#{$block-class}__content-outer {
+  overflow: hidden;
+}
+
+.#{$block-class}__content-inner {
+  background-color: $layer-01;
+  block-size: 100%;
+  transform: translate(0, 0);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__content-inner {
+  block-size: 0;
+  transform: translate(0, -100%);
+}
+
+.#{$block-class}__list-group {
+  padding: $spacing-05;
+  border-block-start: 1px solid $border-subtle-01;
+}
+.#{$block-class}__list-group:first-of-type {
+  border-block-start: none;
+}
+
+.#{$block-class}__list-title {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+
+  margin-block-end: $spacing-03;
+}
+
+.#{$block-class}__list-item {
+  display: flex;
+  margin-block-end: $spacing-03;
+}
+
+.#{$block-class}__list-item:last-child {
+  margin-block-end: 0;
+}
+
+.#{$block-class}__icon {
+  /* stylelint-disable-next-line */
+  margin: to-rem(1px) $spacing-03 0 0;
+  color: $icon-primary;
+}
+
+.#{$block-class}__icon--checked,
+.#{$block-class}__icon--indeterminate {
+  color: $interactive;
+}
+
+.#{$block-class}__icon--error {
+  color: $support-error;
+}
+
+.#{$block-class}__icon--disabled {
+  color: $icon-disabled;
+}
+
+.#{$block-class}__label {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__label--disabled {
+  color: $text-disabled;
+}
+
+.#{$block-class}__footer {
+  @include ellipsis-2-lines();
+
+  padding: $spacing-03 $spacing-05;
+  border-block-start: 1px solid $border-subtle-01;
+}

package/scss/components/Checklist/_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 './checklist';

package/scss/components/Checklist/_index.scss

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