@carbon/styles 0.13.0 → 0.15.0-rc.0

package/scss/components/loading/_loading.scss

@@ -102,6 +102,7 @@
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -124,6 +125,7 @@
     0% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }
+
     100% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }
@@ -133,6 +135,7 @@
     0% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }
+
     100% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }

package/scss/components/menu/_menu.scss

@@ -98,7 +98,7 @@
   }
 
   .#{$prefix}--menu-option__label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     flex-grow: 1;

package/scss/components/modal/_modal.scss

@@ -57,7 +57,8 @@
     .#{$prefix}--dropdown,
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--multi-select {
       background-color: $field-02;
     }
   }
@@ -67,6 +68,9 @@
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -90,16 +94,6 @@
       width: 84%;
       height: auto;
       max-height: 90%;
-
-      .#{$prefix}--modal-content p,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include breakpoint(lg) {
@@ -112,30 +106,81 @@
     }
   }
 
-  .#{$prefix}--modal-header,
+  // -----------------------------
+  // Modal content
+  // -----------------------------
   .#{$prefix}--modal-content {
+    @include type-style('body-01');
+
+    position: relative;
+    // Required to accommodate focus outline's negative offset:
+    padding-top: $spacing-03;
+    // anything besides text/p spans full width, with just 16px padding
+    padding-right: $spacing-05;
     padding-left: $spacing-05;
+    margin-bottom: $spacing-09;
+    color: $text-primary;
+    font-weight: 400;
+    grid-column: 1/-1;
+    grid-row: 2/-2;
+    overflow-y: auto;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-content,
+  //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
+  // text/p gets 20% right padding
+  .#{$prefix}--modal-content p,
   .#{$prefix}--modal-content__regular-content {
-    padding-right: $spacing-05;
+    padding-right: 20%;
+    @include type-style('body-01');
   }
 
+  //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
+  // anything besides text/p spans full width, with just 16px padding
   .#{$prefix}--modal-content--with-form {
     padding-right: $spacing-05;
   }
 
+  // -----------------------------
+  // Modal header
+  // -----------------------------
+  .#{$prefix}--modal-header {
+    padding-top: $spacing-05;
+    padding-right: $spacing-09;
+    padding-left: $spacing-05;
+    margin-bottom: $spacing-03;
+    grid-column: 1/-1;
+    grid-row: 1/1;
+  }
+
+  .#{$prefix}--modal-header__label {
+    @include type-style('label-01');
+
+    margin-bottom: $spacing-02;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('heading-03');
+
+    color: $text-primary;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
+    //text always spans full width in xs modals
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include breakpoint(md) {
@@ -152,15 +197,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
+    //text spans full width in sm modals below 1056
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include breakpoint(md) {
@@ -170,46 +218,24 @@
     @include breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
-
-    @include breakpoint(xlg) {
-      width: 36%;
 
       .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
+    }
 
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
+    @include breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include breakpoint(md) {
       width: 96%;
-
-      .#{$prefix}--modal-content p,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include breakpoint(lg) {
@@ -222,49 +248,9 @@
     }
   }
 
-  .#{$prefix}--modal-header {
-    padding-top: $spacing-05;
-    padding-right: $spacing-09;
-    margin-bottom: $spacing-03;
-    grid-column: 1/-1;
-    grid-row: 1/1;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include type-style('label-01');
-
-    margin-bottom: $spacing-02;
-    color: $text-secondary;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-primary;
-  }
-
-  .#{$prefix}--modal-content {
-    @include type-style('body-long-01');
-
-    position: relative;
-    // Required to accommodate focus outline's negative offset:
-    padding-top: $spacing-03;
-    margin-bottom: $spacing-09;
-    color: $text-primary;
-    font-weight: 400;
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    overflow-y: auto;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--modal-content > p {
-    @include type-style('body-long-01');
-  }
-
+  // -----------------------------
+  // Modal overflow
+  // -----------------------------
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-bottom: $spacing-07;
@@ -310,6 +296,9 @@
     }
   }
 
+  // -----------------------------
+  // Modal footer
+  // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
     height: rem(64px);
@@ -333,6 +322,9 @@
     align-items: flex-start;
   }
 
+  // -----------------------------
+  // Modal close btn
+  // -----------------------------
   .#{$prefix}--modal-close {
     position: absolute;
     z-index: 2;

package/scss/components/notification/_actionable-notification.scss

@@ -61,7 +61,7 @@
     min-width: rem(288px);
     max-width: rem(288px);
     flex-wrap: wrap;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
   }
 
   .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
@@ -221,7 +221,7 @@
   }
 
   .#{$prefix}--actionable-notification__content {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     word-break: break-word;
   }

package/scss/components/notification/_inline-notification.scss

@@ -202,19 +202,19 @@
 
   @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--inline-notification__content {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       word-break: break-word;
     }
   } @else {
     .#{$prefix}--inline-notification__title {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       margin: 0 $spacing-02 0 0;
     }
 
     .#{$prefix}--inline-notification__subtitle {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       word-break: break-word;
     }

package/scss/components/notification/_toast-notification.scss

@@ -153,7 +153,7 @@
 
   @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__content {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       margin-top: $spacing-05;
       margin-right: $spacing-05;
@@ -187,7 +187,7 @@
     margin-left: auto;
     background-color: transparent;
     cursor: pointer;
-    transition: outline $transition--base, background-color $transition--base;
+    transition: outline $transition-base, background-color $transition-base;
 
     &:focus {
       outline: 2px solid $focus-inverse;
@@ -212,7 +212,7 @@
 
   @if not feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__title {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       margin-top: $spacing-05;
       font-weight: 600;
@@ -220,7 +220,7 @@
     }
 
     .#{$prefix}--toast-notification__subtitle {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       margin-top: 0;
       margin-bottom: $spacing-05;
@@ -234,7 +234,7 @@
     }
 
     .#{$prefix}--toast-notification__caption {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       padding-top: $spacing-03;
       margin-bottom: $spacing-05;

package/scss/components/number-input/_number-input.scss

@@ -16,6 +16,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Number input styles
 /// @access public
@@ -31,7 +32,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -88,8 +89,7 @@
     padding-right: rem(112px);
   }
 
-  .#{$prefix}--number input[type='number']:disabled,
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number input[type='number']:disabled {
     border-bottom-color: transparent;
     background-color: $field;
     color: $text-disabled;
@@ -301,10 +301,6 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
-    display: none;
-  }
-
   .#{$prefix}--number__invalid {
     position: absolute;
     right: rem(96px);
@@ -368,10 +364,7 @@
   }
 
   // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled,
-  .#{$prefix}--number--light
-    .#{$prefix}--number--readonly
-    input[type='number'] {
+  .#{$prefix}--number--light input[type='number']:disabled {
     background-color: $field-02;
   }
 
@@ -381,18 +374,22 @@
     background-color: $field-02;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $layer-hover-02;
-  }
-
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
     background-color: transparent;
   }
 
+  // V11: Possibly deprecate
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
+    background-color: $layer-hover-02;
+  }
+
   // Size Variant styles
   // TODO V11: Remove xl selector
   .#{$prefix}--number--xl input[type='number'],
@@ -452,6 +449,20 @@
     right: rem(16px);
   }
 
+  // Readonly
+  .#{$prefix}--number--readonly input[type='number'] {
+    background: transparent;
+  }
+
+  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
+    display: none;
+  }
+
+  .#{$prefix}--number__readonly-icon {
+    position: absolute;
+    right: rem(16px);
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -120,6 +120,7 @@
 
   .#{$prefix}--overflow-menu-options--light {
     background-color: $field-02;
+
     &::after {
       background-color: $field-02;
     }
@@ -162,6 +163,7 @@
     &[data-floating-menu-direction='top']::after {
       width: rem(32px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(32px);
@@ -175,6 +177,7 @@
     &[data-floating-menu-direction='top']::after {
       width: rem(48px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(48px);
@@ -242,7 +245,7 @@
   }
 
   .#{$prefix}--overflow-menu-options__btn {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: inline-flex;

package/scss/components/pagination/_index.scss

@@ -6,6 +6,9 @@
 //
 
 @forward 'pagination';
+@forward 'unstable_pagination';
 @use 'pagination';
+@use 'unstable_pagination';
 
 @include pagination.pagination;
+@include unstable_pagination.unstable_pagination;

package/scss/components/pagination/_pagination.scss

@@ -15,6 +15,7 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../select';
 
 /// Pagination styles
 /// @access public
@@ -81,12 +82,21 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input {
+    @include type-style('body-compact-01');
+
     width: auto;
     min-width: auto;
     height: 100%;
     line-height: rem(40px);
   }
 
+  // Extra specificity is needed to preserve padding
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input {
+    padding: 0 2.25rem 0 $spacing-05;
+  }
+
   .#{$prefix}--pagination--sm .#{$prefix}--select-input {
     line-height: rem(32px);
   }
@@ -95,16 +105,13 @@
     line-height: rem(48px);
   }
 
-  .#{$prefix}--pagination
-    .#{$prefix}--select--inline
-    .#{$prefix}--select-input {
-    padding: 0 2.25rem 0 $spacing-05;
-  }
-
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
     background: $layer-hover;
   }
 
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus,
   .#{$prefix}--pagination
     .#{$prefix}--select--inline
     .#{$prefix}--select-input:focus