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

package/scss/components/Guidebanner/_guidebanner.scss

@@ -0,0 +1,274 @@
+//
+// 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.
+//
+
+/**
+ * The Guidebanner specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
+ * that will change depending on the selected theme.
+ *
+ * Because of this, we are triggering a *large* amount of linting errors.
+ * So, we're adding a few "disable" rules for the file instead of 60
+ * individual rules.
+ */
+
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/motion-duration-use */
+/* stylelint-disable carbon/theme-use */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// 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 '../../global/styles/project-settings' as c4p-settings;
+
+// Guidebanner uses the following Carbon for IBM Products components:
+@use '../Carousel/carousel';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
+
+// Each GuidebannerElement is contained in a CarouselItem.
+$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
+
+@mixin when-collapsed($selector: '&') {
+  .#{c4p-settings.$pkg-prefix}--guidebanner__collapsible-collapsed
+    #{$selector} {
+    @content;
+  }
+}
+
+$horizontal-margin: to-rem(52px);
+// Guidebanner-specific colors.
+$purple-1: #9b63ff;
+$purple-2: #7f3ae7;
+$purple-3: #7433e3;
+
+.#{$block-class} {
+  // Due to the Guidebanner's dark background,
+  // apply dark theme by default for all elements:
+  // i.e. light text, icons, tooltips, etc.
+  @include theme(themes.$g100, true);
+
+  position: relative;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  background-color: $blue-90;
+}
+
+.#{$block-class}__icon-idea {
+  position: absolute;
+  color: $gray-10;
+  inset-block-start: $spacing-05;
+  inset-inline-start: $spacing-05;
+}
+
+.#{$block-class}__title {
+  @include type-style('heading-compact-02');
+
+  padding: $spacing-05 to-rem(175px) 0 $horizontal-margin;
+  color: $gray-10;
+}
+
+.#{$block-class}__close-button {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+.#{$block-class}__close-button button {
+  block-size: $spacing-07;
+  inline-size: $spacing-07;
+  min-block-size: $spacing-07;
+  padding-block-start: 6px;
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+}
+
+// Specify Carousel look and feel.
+.#{$block-class}__carousel {
+  padding: 0 0 $spacing-05;
+  color: $gray-10;
+
+  @include when-collapsed() {
+    margin-block-end: 0;
+  }
+}
+
+// All carousel elements are 400px wide,
+// except the last one (see below).
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element {
+  display: flex;
+  flex-flow: column;
+  flex-shrink: 0;
+  margin: $spacing-05 0 0 0;
+  inline-size: to-rem(400px); // 25rem
+  max-block-size: to-rem(512px); // 32rem
+  opacity: 1;
+  padding-inline-start: $horizontal-margin;
+  scroll-snap-align: start;
+  transition:
+    max-height 50ms motion(exit, productive),
+    margin-top 50ms motion(exit, productive),
+    opacity 300ms motion(exit, productive);
+
+  @include when-collapsed() {
+    margin-block-start: 0;
+    max-block-size: $spacing-03;
+    opacity: 0;
+  }
+}
+// The last carousel item is wider, with more padding-right,
+// to provide more space against the right edge of the carousel.
+.#{$block-class}__carousel
+  .#{$carousel-item}:last-child
+  .#{$block-class}__element {
+  inline-size: to-rem(448px); // 28rem
+  padding-inline-end: $horizontal-margin;
+}
+
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element-title {
+  @include type-style('heading-compact-01');
+
+  margin: $spacing-05 0 0 0;
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-content {
+  @include type-style('body-01');
+
+  margin-block-end: $spacing-05;
+}
+
+// Button with crossroads icon
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--tertiary {
+  border-color: $white-0;
+  color: $white-0;
+
+  &:active,
+  &:hover {
+    border-color: $white-0;
+    background-color: $white-0;
+    color: $gray-100;
+  }
+
+  // The "render icon" CSS seems to be missing in the latest Carbon button.
+  // Specifically, getting the icon to move to right-hand side of the content area.
+  // Repeating here.
+  svg {
+    position: absolute;
+    flex-shrink: 0;
+    block-size: 1rem;
+    inline-size: 1rem;
+    inset-inline-end: $spacing-05;
+  }
+}
+
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
+  color: $blue-30;
+  margin-inline-start: calc(-1 * $spacing-05);
+
+  &:active,
+  &:hover {
+    background-color: $purple-2;
+    color: $gray-10;
+  }
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-link {
+  color: $blue-30;
+
+  &:visited {
+    color: $blue-30;
+  }
+
+  &:active,
+  &:hover {
+    color: $blue-20;
+  }
+}
+
+.#{$block-class}__navigation {
+  display: flex;
+  border-block-start: to-rem(1px) solid $purple-60;
+
+  @include when-collapsed() {
+    border-block-start: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__toggle-button {
+  color: $blue-30;
+  margin-inline-start: calc($horizontal-margin - to-rem(18px));
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+    color: $gray-10;
+  }
+}
+
+// Push navigation buttons to the right
+.#{$block-class}__navigation .#{$block-class}__back-button {
+  margin-inline-start: auto;
+}
+// Hide navigation buttons when collapsed
+.#{$block-class}__navigation .#{$block-class}__back-button,
+.#{$block-class}__navigation .#{$block-class}__next-button {
+  @include when-collapsed() {
+    display: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__back-button button,
+.#{$block-class}__navigation .#{$block-class}__next-button button {
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+
+  &[disabled] path {
+    fill: $purple-1;
+  }
+}
+
+// Exception handling.
+// If "withLeftGutter", then:
+// - insert 1 rem of more "space" on the left.
+// - move icon 1 rem more to the right.
+.#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
+  inset-inline-start: $spacing-07;
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__title {
+  padding-inline-start: calc($horizontal-margin + $spacing-05);
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__navigation {
+  padding-inline-start: $spacing-05;
+}
+// Override Carousel settings
+// - insert 1 rem of more "space" on the left.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container {
+  padding-inline-start: $spacing-05;
+}
+// - expand "fade" to cover more of the left side of the carousel.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container--scrolled {
+  inline-size: $spacing-10;
+}

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

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

package/scss/components/HTTPErrors/_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.
+//
+
+// HTTP errors use the following Carbon components:
+// Link
+@use '@carbon/styles/scss/components/link';

package/scss/components/HTTPErrors/_http-errors.scss

@@ -0,0 +1,145 @@
+//
+// Copyright IBM Corp. 2021, 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/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--http-errors;
+$block-class-404: #{c4p-settings.$pkg-prefix}--http-errors-404;
+$block-class-403: #{c4p-settings.$pkg-prefix}--http-errors-403;
+$block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
+
+.#{$block-class} .#{$block-class}__content {
+  position: fixed;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -75%);
+  @include breakpoint(md) {
+    transform: translate(-50%, -100%);
+  }
+  @include breakpoint(lg) {
+    transform: translate(-50%, -50%);
+  }
+}
+
+.#{$block-class} .#{$block-class}__error-code-label {
+  @include type.type-style('heading-compact-02');
+
+  margin-block-end: $spacing-02;
+}
+
+.#{$block-class} .#{$block-class}__title {
+  @include type.type-style('heading-05');
+
+  margin-block-end: $spacing-04;
+}
+
+.#{$block-class} .#{$block-class}__description {
+  @include type.type-style('body-compact-01');
+
+  margin-block-end: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__error-code-label,
+.#{$block-class} .#{$block-class}__title,
+.#{$block-class} .#{$block-class}__description {
+  color: $text-primary;
+}
+.#{$block-class} .#{$block-class}__link {
+  display: block;
+  margin-block-end: $spacing-02;
+}
+.#{$block-class} .#{$block-class}__image {
+  position: fixed;
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  max-block-size: 100%;
+  @include breakpoint-down(md) {
+    inset-inline-start: 10%;
+    transform: scale(1.5);
+  }
+}
+/* stylelint-disable carbon/theme-use */
+
+.#{$block-class-404}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-404}__prefix-cls-67 {
+  fill: #697077;
+}
+.#{$block-class-404}__prefix-cls-68 {
+  fill: #282828;
+}
+.#{$block-class-404}__prefix-cls-69 {
+  fill: #51565c;
+}
+.#{$block-class-404}__prefix-cls-70 {
+  fill: #002b50;
+}
+.#{$block-class-404}__prefix-cls-71 {
+  fill: #413d3d;
+}
+.#{$block-class-404}__prefix-cls-72 {
+  fill: #908b8b;
+}
+.#{$block-class-404}__prefix-cls-75 {
+  fill: #a4a4a5;
+}
+.#{$block-class-404}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-403}__prefix-cls-80 {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+.#{$block-class-403}__prefix-cls-75 {
+  fill: #595655;
+}
+.#{$block-class-403}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-77 {
+  fill: #373d42;
+}
+.#{$block-class-403}__prefix-cls-78 {
+  fill: #002b50;
+}
+.#{$block-class-403}__prefix-cls-81 {
+  fill: #2b2828;
+}
+.#{$block-class-other}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-other}__prefix-cls-69 {
+  fill: #697077;
+}
+.#{$block-class-other}__prefix-cls-70 {
+  fill: #282828;
+}
+.#{$block-class-other}__prefix-cls-71 {
+  fill: #51565c;
+}
+.#{$block-class-other}__prefix-cls-72 {
+  fill: #e0dbda;
+}
+.#{$block-class-other}__prefix-cls-73 {
+  fill: #003d73;
+}
+.#{$block-class-other}__prefix-cls-75 {
+  opacity: 0.15;
+}
+
+/* stylelint-enable */

package/scss/components/HTTPErrors/_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 './http-errors';

package/scss/components/HTTPErrors/_index.scss

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

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

@@ -0,0 +1,14 @@
+//
+// 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.
+//
+
+// ImportModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody,
+// FileUploaderDropContainer, FileUploaderItem, TextInput, Button
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/file-uploader';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/button';

package/scss/components/ImportModal/_import-modal.scss

@@ -0,0 +1,82 @@
+//
+// 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--import-modal;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-inline-size: none;
+}
+
+.#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
+  .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-inline-end: $spacing-05;
+}
+
+.#{c4p-settings.$carbon-prefix}--file
+  .#{c4p-settings.$carbon-prefix}--file-container,
+.#{c4p-settings.$carbon-prefix}--file
+  ~ .#{c4p-settings.$carbon-prefix}--file-container {
+  margin-block-start: 0;
+}
+
+.#{c4p-settings.$carbon-prefix}--modal-container--sm
+  .#{c4p-settings.$carbon-prefix}--modal-header {
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{$block-class}__input-group {
+  display: flex;
+}
+
+.#{$block-class}__import-button.#{c4p-settings.$carbon-prefix}--btn {
+  margin-inline-start: $spacing-03;
+}
+
+.#{$block-class}__file-container {
+  inline-size: 100%;
+}
+
+.#{$block-class} .#{$block-class}__file-drop-header,
+.#{$block-class} .#{$block-class}__label {
+  margin-block-end: $spacing-03;
+  @include type.type-style('heading-compact-01');
+}
+
+.#{$block-class}__helper-text {
+  margin-block: $spacing-06 $spacing-03;
+  @include type.type-style('helper-text-01');
+}
+
+.#{$block-class}__body {
+  margin-block-end: $spacing-06;
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--file__selected-file {
+  background: $layer-02;
+  max-inline-size: none;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--file {
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--text-input:disabled {
+  background: $layer-02;
+}

package/scss/components/ImportModal/_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 './import-modal';

package/scss/components/ImportModal/_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 './import-modal';

package/scss/components/InlineTip/_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 './inline-tip';