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

package/scss/components/DecoratorSingleButton/_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 './decorator-single-button';

package/scss/components/DecoratorSingleButton/_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 './decorator-single-button';

package/scss/components/DelimitedList/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from DelimitedList in this file.
+// DelimitedList uses the following Carbon components:

package/scss/components/DelimitedList/_delimited-list.scss

@@ -0,0 +1,27 @@
+//
+// 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
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/styles/scss/grid';
+
+// DelimitedList uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by DelimitedList
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--delimited-list;
+
+.#{$block-class}-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

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

package/scss/components/DescriptionList/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from DescriptionList in this file.
+// DescriptionList uses the following Carbon components:

package/scss/components/DescriptionList/_description-list.scss

@@ -0,0 +1,103 @@
+//
+// 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';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--description-list;
+$carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
+
+.#{$block-class} .#{$carbon-block-class} {
+  margin-block-end: $spacing-07;
+}
+
+// ROW /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__row {
+  border-block-end-width: 0;
+  border-block-start-width: 0;
+}
+
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-child {
+  border-block-start-width: 0;
+}
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-child {
+  border-block-end-width: 0;
+}
+
+.#{$block-class}--bordered .#{$block-class}__body .#{$block-class}__row {
+  border-block-start-width: 1px;
+}
+
+// CELL /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell {
+  @include type-style('body-01');
+
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:first-of-type {
+  inline-size: 1%;
+  padding-inline-start: 0;
+  white-space: nowrap;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:last-of-type {
+  color: $text-primary;
+  padding-inline-end: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-of-type
+  > .#{$block-class}__cell {
+  padding-block-start: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-of-type
+  > .#{$block-class}__cell {
+  padding-block-end: 0;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul {
+  list-style: none;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul > li {
+  margin-block-end: $spacing-03;
+}
+
+// LG SIZE /////////////////////////
+.#{$block-class}--lg .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-05 $spacing-06 $spacing-05 $spacing-05;
+}
+
+// SM SIZE /////////////////////////
+.#{$block-class}--sm .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02 $spacing-06 $spacing-02 $spacing-02;
+}
+
+// XS SIZE /////////////////////////
+.#{$block-class}--xs .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02;
+}
+
+.#{$block-class} .#{$carbon-block-class}-row--focused-within {
+  outline: none;
+}

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

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

package/scss/components/EditFullPage/_edit-full-page.scss

@@ -0,0 +1,26 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @use 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditFullPage uses the following Carbon components:
+// TODO: @use(s) of Carbon component styles used by EditFullPage
+
+// EditFullPage uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by EditFullPage
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-full-page;
+
+.#{$block-class} {
+  // TODO: Styles.
+}

package/scss/components/EditFullPage/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './edit-full-page';

package/scss/components/EditInPlace/_carbon-imports.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/styles/scss/components/button';
+@use '@carbon/styles/scss/components/text-input';

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -0,0 +1,154 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
+
+$block-class: #{$pkg-prefix}--edit-in-place;
+$carbon-input: #{$carbon-prefix}--text-input;
+
+.#{$block-class} {
+  --#{$block-class}--size: #{$spacing-07};
+
+  display: flex;
+  align-items: center;
+  background: transparent;
+  cursor: pointer;
+}
+
+.#{$block-class}--sm {
+  --#{$block-class}--size: #{$spacing-07};
+}
+
+.#{$block-class}--md {
+  --#{$block-class}--size: #{$spacing-08};
+}
+
+.#{$block-class}--lg {
+  /* April 2023 max text input size */
+  --#{$block-class}--size: #{$spacing-09};
+}
+
+.#{$block-class}--readonly {
+  cursor: not-allowed;
+}
+
+.#{$block-class}:hover {
+  background: $field-01;
+}
+
+.#{$block-class}:hover .#{$block-class}__btn-edit,
+.#{$block-class}__btn-edit.#{$block-class}__btn-edit--always-visible {
+  visibility: visible;
+}
+
+.#{$block-class}__btn-edit {
+  visibility: hidden;
+}
+
+.#{$block-class}--invalid {
+  border: 2px solid $support-error;
+}
+
+.#{$block-class}--focused {
+  background: $field-01;
+  outline: 2px solid $focus;
+}
+
+.#{$block-class}__text-input {
+  flex: 1;
+}
+
+.#{$block-class}--inherit-type .#{$block-class}__text-input {
+  /* match font of container */
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+.#{$block-class}__text-input-label {
+  display: none;
+}
+
+.#{$block-class}__warning-icon {
+  margin: auto $spacing-03;
+  color: $support-error;
+  inline-size: $spacing-05;
+}
+
+.#{$block-class}__warning-text {
+  @include type.type-style('label-01');
+
+  color: $support-error;
+
+  margin-block-start: $spacing-03;
+}
+
+// overrides
+.#{$block-class}__text-input.#{$carbon-input} {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+// .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
+// .#{$block-class}-readonly
+//   .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
+//   cursor: not-allowed;
+// }
+
+.#{$block-class}__text-input.#{$carbon-input}:focus,
+.#{$block-class}__text-input.#{$carbon-input}:active {
+  outline: none;
+}
+
+.#{$block-class}__toolbar {
+  --toolbar-width: var(--#{$block-class}--size);
+  --toolbar-width-focussed: calc(2 * var(--#{$block-class}--size));
+
+  // animation div
+  display: inline-flex;
+  inline-size: var(--toolbar-width);
+}
+
+.#{$block-class}--invalid .#{$block-class}__toolbar {
+  // width of invalid icon is always $spacing-07 ($spacing-05 + 2 * $spacing-03 margin)
+  --toolbar-width: calc(var(--#{$block-class}--size) + #{$spacing-07});
+  --toolbar-width-focussed: calc(
+    2 * var(--#{$block-class}--size) + #{$spacing-07}
+  );
+}
+
+@keyframes slide-in {
+  0% {
+    overflow: hidden;
+    inline-size: var(--toolbar-width);
+  }
+
+  99% {
+    overflow: hidden;
+    inline-size: var(--toolbar-width-focussed);
+  }
+
+  100% {
+    overflow: visible;
+    inline-size: var(--toolbar-width-focussed);
+  }
+}
+
+.#{$block-class}--focused .#{$block-class}__toolbar {
+  overflow: initial;
+
+  animation: slide-in $duration-moderate-01 motion(entrance, productive);
+  inline-size: var(--toolbar-width-focussed);
+}

package/scss/components/EditInPlace/_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 './edit-in-place';

package/scss/components/EditInPlace/_index.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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './edit-in-place';

package/scss/components/EditSidePanel/_carbon-imports.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.
+//
+
+// EditSidePanel uses the following Carbon components:
+@use '@carbon/styles/scss/components/form';

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -0,0 +1,48 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
+
+// EditSidePanel uses the following IBM Products components:
+@use '../SidePanel/side-panel';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
+$side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
+
+.#{$block-class} {
+  .#{c4p-settings.$carbon-prefix}--form.#{$block-class}__form {
+    padding-block-start: $spacing-05;
+  }
+
+  .#{$block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
+    padding-block-start: $spacing-03;
+  }
+
+  .#{$block-class}__form > * {
+    margin-block-end: $spacing-05;
+  }
+
+  .#{$block-class}__form-title-text {
+    @include type.type-style('heading-compact-02');
+
+    padding-block-end: $spacing-03;
+  }
+
+  .#{$block-class}__form-description-text {
+    @include type.type-style('body-01');
+  }
+
+  &.#{$side-panel-block-class}
+    .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+    display: none;
+  }
+}

package/scss/components/EditSidePanel/_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 './edit-side-panel';

package/scss/components/EditSidePanel/_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 './edit-side-panel';

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/components/toggle/toggle';
+@use '@carbon/styles/scss/components/ui-shell/side-nav';

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -0,0 +1,134 @@
+//
+// Copyright IBM Corp. 2022, 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion';
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// Other Carbon settings.
+@use '@carbon/styles/scss/grid' as *;
+
+// EditTearsheet uses the following IBM Products components:
+// TearsheetShell
+@use '../Tearsheet/tearsheet';
+@use '../CreateInfluencer/index';
+
+@keyframes form-content-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(-$spacing-04);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+$block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit;
+$form-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form;
+$section-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__section;
+$tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__section--divider;
+$tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fieldset;
+
+.#{$block-class} {
+  --#{$block-class}--total-width: 0;
+}
+
+.#{$block-class} .#{$form-block-class}__form--hidden-form {
+  display: none;
+}
+
+.#{$block-class} .#{$form-block-class}__form--visible-form {
+  animation-duration: motion.$duration-slow-01;
+  animation-fill-mode: forwards;
+  animation-name: form-content-entrance;
+  animation-timing-function: motion.$standard-easing;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .#{$block-class} .#{$form-block-class}__form--visible-form {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+.#{$block-class} .#{$block-class}__content {
+  block-size: 100%;
+  overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
+
+  padding-block: $spacing-06;
+}
+
+.#{$block-class}
+  .#{$block-class}__content
+  .#{c4p-settings.$carbon-prefix}--css-grid {
+  margin-inline-start: 0;
+  padding-inline: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__form--heading {
+  padding-block-end: $spacing-06;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--btn-set
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 $button-separator;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  position: initial;
+  background-color: transparent;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__link:hover {
+  cursor: pointer;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__overlay-active {
+  display: none;
+}
+
+.#{$block-class} .#{$block-class}__form--title,
+.#{$block-class} .#{$block-class}__section--title {
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__section--subtitle,
+.#{$block-class} .#{$block-class}__form--subtitle {
+  @include type.type-style('heading-compact-01');
+
+  margin-block-end: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__section--description,
+.#{$block-class} .#{$block-class}__form--description {
+  @include type.type-style('body-01');
+
+  margin-block-end: $spacing-06;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-block-end: 0;
+}
+
+.#{$block-class} .#{$block-class}__form--fieldset > * {
+  margin-block-end: $spacing-05;
+}

package/scss/components/EditTearsheet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './edit-tearsheet';

package/scss/components/EditTearsheet/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './edit-tearsheet';