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

package/scss/components/CreateModal/_create-modal.scss

@@ -0,0 +1,78 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-container {
+  @include breakpoint(md) {
+    max-block-size: 95%;
+  }
+  @include breakpoint(lg) {
+    max-block-size: 95%;
+  }
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-header {
+  border-block-end: 1px solid $layer-accent-01;
+  margin-block-end: 0;
+  padding-block-end: $spacing-03;
+  padding-inline-end: 20%;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-inline-size: none;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal__title {
+  @include type.type-style('heading-03');
+
+  margin-block-end: $spacing-02;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal__subtitle {
+  @include type.type-style('body-compact-01');
+
+  color: $text-secondary;
+
+  margin-block-end: $spacing-03;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal__description {
+  @include type.type-style('body-01');
+
+  margin: $spacing-03 0 $spacing-05 0;
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal__form
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-block-end: 0;
+  min-inline-size: 100%;
+}
+
+.#{c4p-settings.$pkg-prefix}--create-modal__form > * {
+  margin-block-end: $spacing-05;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:last-child {
+    margin-block-end: 0;
+  }
+}

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

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

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

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -0,0 +1,56 @@
+//
+// 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;
+@use '../SidePanel/side-panel-variables' as side-panel-vars;
+
+// CreateSidePanel uses the following IBM Products components:
+// SidePanel
+@use '../SidePanel/side-panel';
+
+$create-side-panel-block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
+$side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
+
+.#{$create-side-panel-block-class}.#{$side-panel-block-class}
+  .#{$create-side-panel-block-class}__content-text {
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
+  padding-block-start: $spacing-05;
+}
+
+.#{$create-side-panel-block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
+  padding-block-start: $spacing-03;
+}
+
+.#{$create-side-panel-block-class}__form > * {
+  margin-block-end: $spacing-05;
+}
+
+.#{$create-side-panel-block-class}__form-title-text {
+  @include type.type-style('heading-compact-02');
+
+  padding-block-end: $spacing-03;
+}
+
+.#{$create-side-panel-block-class}__form-description-text {
+  @include type.type-style('body-01');
+}
+
+.#{$create-side-panel-block-class}.#{$side-panel-block-class}
+  .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+  display: none;
+}
+
+.#{$create-side-panel-block-class} .#{$side-panel-block-class}__subtitle-text {
+  color: $text-secondary;
+}

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

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

package/scss/components/CreateTearsheet/_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.
+//
+
+// CreateTearsheet uses the following Carbon components:
+// ProgressIndicator, ProgressStep
+@use '@carbon/styles/scss/components/progress-indicator';

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -0,0 +1,165 @@
+//
+// 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.
+//
+
+// Other Carbon settings.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// CreateTearsheet uses the following IBM Products components:
+// TearsheetShell
+@use '../Tearsheet/tearsheet';
+@use '../CreateInfluencer';
+
+@keyframes step-content-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(-$spacing-04);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+$create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
+$step-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step;
+$section-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section;
+$tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section--divider;
+$tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--fieldset;
+
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: step-content-entrance $duration-slow-01;
+
+  animation-fill-mode: forwards;
+  animation-timing-function: $standard-easing;
+
+  margin-inline-start: 0;
+  opacity: 0;
+  padding-inline: $spacing-03;
+}
+
+.#{$create-tearsheet-block-class} {
+  --#{$create-tearsheet-block-class}--total-width: 0;
+}
+
+.#{$step-block-class} .#{c4p-settings.$carbon-prefix}--css-grid {
+  margin-inline-start: 0;
+}
+
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--hidden-step {
+  display: none;
+}
+
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: step-content-entrance $duration-slow-01;
+  animation-fill-mode: forwards;
+  animation-timing-function: $standard-easing;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+.#{$create-tearsheet-block-class} .#{$create-tearsheet-block-class}__content {
+  min-block-size: 100%;
+  overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    overflow-inline: hidden;
+  }
+
+  padding-block: $spacing-06;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__content
+  .#{c4p-settings.$carbon-prefix}--form {
+  block-size: inherit;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__content
+  .#{c4p-settings.$carbon-prefix}--grid {
+  padding: 0;
+  margin: 0;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--heading {
+  padding-block-end: $spacing-06;
+}
+
+.#{$create-tearsheet-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;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  position: initial;
+  background-color: transparent;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--divider {
+  position: relative;
+  display: block;
+  margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
+    calc(-1 * #{$spacing-06});
+  background-color: $layer-accent-01;
+  block-size: 1px;
+  inline-size: var(--#{$create-tearsheet-block-class}--total-width);
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--title,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--title {
+  margin-block-end: $spacing-05;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--subtitle,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--subtitle {
+  @include type.type-style('heading-compact-01');
+
+  margin-block-end: $spacing-03;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--description,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--description {
+  @include type.type-style('body-01');
+
+  margin-block-end: $spacing-06;
+}
+
+.#{$create-tearsheet-block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-block-end: 0;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--fieldset
+  > * {
+  margin-block-end: $spacing-05;
+}

package/scss/components/CreateTearsheet/_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 './create-tearsheet';

package/scss/components/CreateTearsheet/_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 './create-tearsheet';

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

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -0,0 +1,61 @@
+//
+// 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;
+
+// CreateTearsheetNarrow uses the following IBM Products components:
+// TearsheetNarrow
+@use '../Tearsheet/tearsheet';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__heading,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__label,
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
+  max-inline-size: 100%;
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
+  margin-block-start: $spacing-02;
+}
+
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header {
+  border-block-end: 1px solid $border-subtle-02;
+}
+
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__content {
+  padding: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__form {
+  padding-block-start: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__form > * {
+  margin-block-end: $spacing-05;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+.#{$block-class} .#{$block-class}__form-title-text {
+  @include type.type-style('heading-compact-02');
+
+  padding-block-end: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__form-description-text {
+  @include type.type-style('body-01');
+}

package/scss/components/CreateTearsheetNarrow/_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 './create-tearsheet-narrow';

package/scss/components/CreateTearsheetNarrow/_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 './create-tearsheet-narrow';

package/scss/components/DataSpreadsheet/_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.
+//