@carbon/ibm-products 2.0.0-rc.8 → 2.0.0

package/scss/components/Tearsheet/_tearsheet.scss

@@ -1,331 +0,0 @@
-//
-// 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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/utilities';
-@use '../../global/styles/project-settings' as *;
-@use '../../global/styles/mixins' as *;
-
-// Tearsheets use the following IBM Products components:
-// ActionSet
-@use '../ActionSet/action-set';
-
-$block-class: #{$pkg-prefix}--tearsheet;
-
-// stylelint-disable-next-line carbon/theme-token-use
-$overlay-color: $gray-100;
-
-$motion-duration: $duration-moderate-02;
-
-@include block-wrap($block-class) {
-  &.#{$block-class} {
-    // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
-    z-index: utilities.z('modal') + 1;
-    align-items: flex-end;
-    color: $text-primary;
-    // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration,
-      background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
-    --#{$block-class}--stacking-scale-factor-single: 0.95;
-    --#{$block-class}--stacking-scale-factor-double: 0.9;
-  }
-
-  &.is-visible {
-    // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
-    z-index: utilities.z('modal');
-    align-items: flex-end;
-    // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear,
-      background-color $motion-duration motion(entrance, expressive),
-      opacity $motion-duration motion(entrance, expressive);
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
-
-  &.#{$block-class}--stacked-1-of-2 {
-    // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
-    z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.33);
-  }
-
-  &.#{$block-class}--stacked-1-of-3 {
-    // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
-    z-index: utilities.z('modal') - 2;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.11);
-  }
-
-  &.#{$block-class}--stacked-2-of-3 {
-    // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
-    z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
-  }
-
-  &.#{$block-class}--stacked-2-of-2,
-  &.#{$block-class}--stacked-3-of-3 {
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
-  }
-
-  .#{$block-class}__container {
-    top: auto;
-    height: 100%;
-    max-height: calc(100% - #{$spacing-09});
-    // we want the enter/leave animation to run up most of the height of the
-    // viewport, capped at 500px to set an upper limit on the movement speed
-    // For the reason for calc() see https://github.com/sass/sass/issues/2849
-    // and https://github.com/sass/node-sass/issues/2815.
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translate3d(0, calc(min(95vh, 500px)), 0);
-  }
-
-  // extra specificity to ensure this transition overrides the carbon default
-  &.#{$block-class}.#{$block-class} .#{$block-class}__container {
-    transition: transform $motion-duration motion(entrance, expressive),
-      max-height $motion-duration motion(entrance, expressive);
-  }
-
-  &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container,
-  &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container {
-    max-height: calc(100% - #{$spacing-09} + #{$spacing-05});
-  }
-
-  &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container {
-    max-height: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
-  }
-
-  .#{$block-class}__container--lower {
-    max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}));
-  }
-
-  &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container--lower,
-  &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container--lower {
-    max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05});
-  }
-
-  &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container--lower {
-    max-height: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
-    );
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__container {
-    width: 100%;
-  }
-
-  @include breakpoint(md) {
-    &.#{$block-class}--wide .#{$block-class}__container {
-      width: calc(100% - (2 * #{$spacing-10}));
-    }
-  }
-
-  &.#{$block-class}--stacked-1-of-2.is-visible .#{$block-class}__container,
-  &.#{$block-class}--stacked-2-of-3.is-visible .#{$block-class}__container {
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
-  }
-
-  &.#{$block-class}--stacked-1-of-3.is-visible .#{$block-class}__container {
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__header {
-    padding: $spacing-06 $spacing-07;
-    border-bottom: 1px solid $border-subtle-01;
-    margin: 0;
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__header {
-    padding: $spacing-05;
-    border-bottom: 1px solid $border-subtle-01;
-    margin: 0;
-  }
-
-  .#{$block-class}__header-content {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .#{$block-class}__header-fields {
-    flex: 1 1 100%;
-  }
-
-  .#{$block-class}__header-actions {
-    flex: 0 0 auto;
-    padding-left: $spacing-06;
-  }
-
-  // buttons inside button sets in the header action area have 8px gap
-  .#{$block-class}__header-actions
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn:not(:first-of-type) {
-    margin-left: $spacing-03;
-  }
-
-  .#{$block-class}__header--no-close-icon {
-    display: none;
-  }
-
-  &.#{$block-class}--wide
-    .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
-    @include type.type-style('productive-heading-04');
-  }
-
-  .#{$block-class}__header-description {
-    display: -webkit-box;
-    overflow: hidden;
-    max-width: 100%;
-    margin-top: $spacing-05;
-    @include type.type-style('body-short-01');
-
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
-    @include breakpoint-up('md') {
-      max-width: 60%;
-    }
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__header-description {
-    margin-top: $spacing-03;
-  }
-
-  .#{$block-class}__header-navigation {
-    margin: $spacing-04 0 0;
-  }
-
-  &.#{$block-class}--wide
-    .#{$block-class}__header.#{$block-class}__header--with-nav {
-    padding: $spacing-06 $spacing-07 0;
-  }
-
-  &.#{$block-class}--wide
-    .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    padding-right: $spacing-10;
-  }
-
-  .#{$block-class}__header-navigation {
-    margin: $spacing-04 0 0;
-  }
-
-  &.#{$block-class} .#{$block-class}__body {
-    display: flex;
-    flex-direction: row;
-    padding: 0;
-    margin: 0;
-  }
-
-  .#{$block-class}__resize-detector {
-    width: 100%;
-    height: 0;
-  }
-
-  .#{$block-class}__influencer {
-    flex: 0 0 257px; // influencer width 256px plus 1px border
-    border-right: 1px solid $border-subtle-01;
-    overflow-y: auto;
-
-    // the normal 80% content width inside modals should not apply to influencer content
-    // apply the class again for higher specificity
-    &.#{$block-class}__influencer p {
-      padding-right: 0;
-    }
-  }
-
-  .#{$block-class}__influencer--wide {
-    flex-basis: 321px; // influencer width 320px plus 1px border
-  }
-
-  .#{$block-class}__right {
-    display: grid;
-    flex-grow: 1;
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr auto;
-  }
-
-  .#{$block-class}__main {
-    display: flex;
-    flex-direction: row;
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-  }
-
-  .#{$block-class}__main .#{$block-class}__influencer {
-    border-right: none;
-    border-left: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__content {
-    overflow: auto;
-    flex-grow: 1;
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__content {
-    background: $background;
-
-    // revert the background color overridden by #{$carbon-prefix}--modal styles
-    .#{$carbon-prefix}--pagination,
-    .#{$carbon-prefix}--pagination__control-buttons,
-    .#{$carbon-prefix}--text-input,
-    .#{$carbon-prefix}--text-area,
-    .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown,
-    .#{$carbon-prefix}--dropdown-list,
-    .#{$carbon-prefix}--number input[type='number'],
-    .#{$carbon-prefix}--date-picker__input {
-      background-color: $field-01;
-    }
-
-    .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
-      background-color: transparent;
-    }
-
-    // and restore the 'light' prop in case light fields are wanted
-    .#{$carbon-prefix}--text-input--light,
-    .#{$carbon-prefix}--text-area--light,
-    .#{$carbon-prefix}--search--light .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select--light .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown--light,
-    .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
-    /* stylelint-disable-next-line prettier/prettier */
-    .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
-      background-color: $field-02;
-    }
-  }
-
-  .#{$block-class}__button-container {
-    grid-column: 1 / -1;
-    grid-row: -1 / -1;
-    overflow-x: auto;
-  }
-
-  .#{$block-class}__buttons {
-    display: inline-flex;
-    min-width: 100%;
-    border-top: 1px solid $border-subtle-01;
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__buttons {
-    background: $background;
-  }
-}

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

@@ -1,8 +0,0 @@
-//
-// 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/react/scss/components/button';

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

@@ -1,9 +0,0 @@
-//
-// 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 './toolbar';

package/scss/components/Toolbar/_index.scss

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

package/scss/components/Toolbar/_toolbar.scss

@@ -1,75 +0,0 @@
-//
-// 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '../../global/styles/project-settings' as *;
-
-$block-class: #{$pkg-prefix}--toolbar;
-
-$border: 1px solid $border-subtle-01;
-
-$toolbar-dimensions: $spacing-08;
-
-.#{$block-class} {
-  @include breakpoint($name: lg) {
-    justify-content: flex-end;
-  }
-
-  display: flex;
-  min-width: $toolbar-dimensions;
-  min-height: $toolbar-dimensions;
-  background-color: $layer-01;
-}
-
-.#{$block-class}--vertical,
-.#{$block-class}--vertical > .#{$block-class}__group {
-  flex-wrap: wrap;
-}
-
-.#{$block-class}--vertical {
-  max-width: $toolbar-dimensions;
-}
-
-.#{$block-class}__group {
-  display: flex;
-  border-right: $border;
-  border-bottom: $border;
-}
-
-.#{$block-class}--vertical > .#{$block-class}__group,
-.#{$block-class}__group:last-of-type {
-  border-right-width: 0;
-}
-
-.#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
-.#{$block-class} .#{$carbon-prefix}--dropdown {
-  border-bottom-width: 0;
-}
-
-.#{$block-class}__button--caret {
-  position: relative;
-}
-
-.#{$block-class}__button__caret {
-  $caret-dimensions: calc(#{$spacing-01} + #{$spacing-02});
-
-  $position: $spacing-01;
-
-  position: absolute;
-  right: $position;
-  bottom: $position;
-  width: $caret-dimensions;
-  height: $caret-dimensions;
-  background: linear-gradient(
-    to right bottom,
-    transparent 50%,
-    $icon-primary 50%
-  );
-  content: '';
-}

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

@@ -1,10 +0,0 @@
-//
-// 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.
-//
-
-// UserProfileImage uses the following Carbon components:
-// IconButton
-@use '@carbon/react/scss/components/button';

package/scss/components/UserProfileImage/_color-map.scss

@@ -1,39 +0,0 @@
-//
-// 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.
-//
-
-@use '@carbon/react/scss/colors' as *;
-
-$carbon-colors: (
-  'blue30': $blue-30,
-  'blue50': $blue-50,
-  'blue60': $blue-60,
-  'blue80': $blue-80,
-  'cyan30': $cyan-30,
-  'cyan50': $cyan-50,
-  'cyan60': $cyan-60,
-  'cyan80': $cyan-80,
-  'gray30': $gray-30,
-  'gray50': $gray-50,
-  'gray60': $gray-60,
-  'gray80': $gray-80,
-  'green30': $green-30,
-  'green50': $green-50,
-  'green60': $green-60,
-  'green80': $green-80,
-  'magenta30': $magenta-30,
-  'magenta50': $magenta-50,
-  'magenta60': $magenta-60,
-  'magenta80': $magenta-80,
-  'purple30': $purple-30,
-  'purple50': $purple-50,
-  'purple60': $purple-60,
-  'purple80': $purple-80,
-  'teal30': $teal-30,
-  'teal50': $teal-50,
-  'teal60': $teal-60,
-  'teal80': $teal-80,
-);

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

@@ -1,9 +0,0 @@
-//
-// 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 './user-profile-image';

package/scss/components/UserProfileImage/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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 './user-profile-image';

package/scss/components/UserProfileImage/_storybook.scss

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

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -1,150 +0,0 @@
-//
-// 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 '@carbon/type/scss/font-family';
-@use '../../global/styles/project-settings' as *;
-@use './color-map' as *;
-
-$block-class: #{$pkg-prefix}--user-profile-image;
-
-$sizes: (
-  xl: $spacing-10,
-  lg: $spacing-07,
-  md: $spacing-06,
-  sm: calc(#{$spacing-05} + #{$spacing-02}),
-  xs: $spacing-05,
-);
-
-@mixin size($size) {
-  $_size: map-get($sizes, $size);
-
-  width: $_size;
-  height: $_size;
-}
-
-$base-colors: 'cyan', 'gray', 'green', 'magenta', 'purple', 'teal';
-$themes: (
-  'light': (
-    'light-contrast': 60,
-    'dark-contrast': 80,
-  ),
-  'dark': (
-    'light-contrast': 50,
-    'dark-contrast': 30,
-  ),
-);
-
-$theme-keys: map-keys($themes);
-
-@function --get-background-color($color, $key, $contrast-key) {
-  @return map-get(
-    $carbon-colors,
-    #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
-  );
-}
-
-@each $key in $theme-keys {
-  .#{$block-class}--#{$key} {
-    color: $layer-01;
-  }
-  @each $color in $base-colors {
-    @each $contrast-key in $theme-keys {
-      .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
-        // stylelint-disable-next-line carbon/theme-token-use
-        background-color: --get-background-color($color, $key, $contrast-key);
-      }
-    }
-  }
-}
-
-.#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip,
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
-  /* stylelint-disable-next-line max-nesting-depth */
-  &:hover,
-  &:focus {
-    /* stylelint-disable-next-line max-nesting-depth */
-    svg {
-      fill: $layer-01;
-    }
-  }
-}
-
-.#{$block-class} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  text-transform: uppercase;
-}
-
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
-  min-height: auto;
-  padding: 0;
-  border-radius: 50%;
-}
-
-.#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
-  fill: $layer-01;
-}
-
-.#{$block-class}__photo {
-  width: 100%;
-  border-radius: 100%;
-}
-
-.#{$block-class}__photo--xl {
-  @include size('xl');
-}
-
-.#{$block-class}__photo--lg {
-  @include size('lg');
-}
-
-.#{$block-class}__photo--md {
-  @include size('md');
-}
-.#{$block-class}__photo--sm {
-  @include size('sm');
-}
-
-.#{$block-class}__photo--xs {
-  @include size('xs');
-}
-
-.#{$block-class}--xl {
-  @include size('xl');
-  @include type.type-style('productive-heading-04');
-}
-
-.#{$block-class}--lg {
-  @include size('lg');
-  @include type.type-style('body-short-01');
-}
-
-.#{$block-class}--md {
-  @include size('md');
-  @include type.type-style('label-01');
-  @include font-family.font-weight('semibold');
-}
-
-.#{$block-class}--sm {
-  @include size('sm');
-  @include type.type-style('label-01');
-  @include font-family.font-weight('semibold');
-}
-
-.#{$block-class}--xs {
-  @include size('xs');
-  @include type.type-style('label-01');
-  @include font-family.font-weight('semibold');
-}

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

@@ -1,12 +0,0 @@
-//
-// 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.
-//
-
-// WebTerminal uses the following Carbon components:
-// Button
-// OverflowMenu
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';

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

@@ -1,9 +0,0 @@
-//
-// 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 './web-terminal';

package/scss/components/WebTerminal/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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.
-//
-
-@use './web-terminal';