@carbon/styles 0.16.2 → 1.0.0-rc.0

package/scss/components/data-table/_data-table.scss

@@ -256,18 +256,13 @@
     color: $link-secondary;
   }
 
-  // V11: Remove compact, short styles
-  .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     height: rem(24px);
     padding-top: 0;
     padding-bottom: 0;
   }
 
-  // V11: Remove short styles
-  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     height: rem(32px);
   }
@@ -276,8 +271,6 @@
     height: rem(40px);
   }
 
-  // V11: Remove tall styles
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu {
     padding-top: $spacing-03;
   }
@@ -367,9 +360,6 @@
     height: rem(32px);
   }
 
-  // V11: Remove compact
-  .#{$prefix}--data-table--compact thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--compact tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
     width: rem(24px);
@@ -377,9 +367,6 @@
     padding: 0 0 0 0.5rem;
   }
 
-  // V11: remove short
-  .#{$prefix}--data-table--short thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--short tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand {
     width: rem(32px);
@@ -395,9 +382,6 @@
     padding: rem(4px) 0 rem(4px) rem(8px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
     height: rem(64px);
@@ -405,14 +389,10 @@
     padding-bottom: rem(22px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox {
     padding-top: rem(13px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio {
     padding-top: $spacing-05;
   }
@@ -448,7 +428,7 @@
     td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
     // Top border acts as separator from thead
-    border-top: 1px solid $layer-active;
+    border-top: 1px solid $border-subtle-selected;
   }
 
   // last row + zebra select last
@@ -500,46 +480,6 @@
     opacity: 1;
   }
 
-  // V11: Remove this compact block
-  //----------------------------------------------------------------------------
-  // Compact
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--compact thead tr,
-  .#{$prefix}--data-table--compact tbody tr,
-  .#{$prefix}--data-table--compact tbody tr th {
-    height: rem(24px);
-  }
-
-  .#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
-  }
-
-  .#{$prefix}--data-table--compact td,
-  .#{$prefix}--data-table--compact tbody tr th {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
-  }
-
-  .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
-    width: rem(32px);
-    height: 100%;
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-checkbox {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-checkbox
-    .#{$prefix}--checkbox-label {
-    height: rem(23px);
-    // 24px row - 1px border
-    min-height: rem(23px);
-  }
-
   //----------------------------------------------------------------------------
   // Extra Small
   //----------------------------------------------------------------------------
@@ -579,37 +519,6 @@
     min-height: rem(23px);
   }
 
-  // V11: Remove this short block
-  //----------------------------------------------------------------------------
-  // Short
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--short thead tr,
-  .#{$prefix}--data-table--short tbody tr,
-  .#{$prefix}--data-table--short tbody tr th {
-    height: rem(32px);
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--table-header-label {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
-  }
-
-  .#{$prefix}--data-table--short td,
-  .#{$prefix}--data-table--short tbody tr th {
-    padding-top: rem(7px);
-    padding-bottom: rem(6px);
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--short
-    .#{$prefix}--table-column-checkbox {
-    padding-top: rem(3px);
-    padding-bottom: rem(3px);
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
-    height: 100%;
-  }
-
   //----------------------------------------------------------------------------
   // Small
   //----------------------------------------------------------------------------
@@ -671,35 +580,6 @@
     padding-bottom: rem(3px);
   }
 
-  // V11: remove this tall block
-  //----------------------------------------------------------------------------
-  // Tall
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--tall thead tr,
-  .#{$prefix}--data-table--tall tbody tr,
-  .#{$prefix}--data-table--tall tbody tr th {
-    height: rem(64px);
-  }
-
-  .#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-05;
-  }
-
-  .#{$prefix}--data-table--tall td,
-  .#{$prefix}--data-table--tall tbody tr th {
-    padding-top: 1rem;
-  }
-
-  .#{$prefix}--data-table--tall th,
-  .#{$prefix}--data-table--tall td {
-    vertical-align: top;
-  }
-
-  .#{$prefix}--data-table--tall .#{$prefix}--data-table--cell-secondary-text {
-    @include type-style('label-01');
-  }
-
   //----------------------------------------------------------------------------
   // Extra Large
   //----------------------------------------------------------------------------
@@ -803,8 +683,7 @@
       min-height: 3rem;
     }
 
-    // V11: remove compact, tall, and short
-    &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--sm)
+    &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--sm)
       td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
       padding-top: rem(14px);
     }
@@ -833,10 +712,7 @@
       align-items: center;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall thead th.#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xl thead th.#{$prefix}--table-column-checkbox,
-    &.#{$prefix}--data-table--tall td.#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xl td.#{$prefix}--table-column-checkbox {
       align-items: flex-start;
     }
@@ -881,46 +757,29 @@
       min-width: 0;
     }
 
-    // V11: remove compact, short, tall
-    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row),
-    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row),
-    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
       height: auto;
     }
 
-    // Compact
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(24px);
     }
 
-    // Short
-    // V11: remove short
-    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(32px);
     }
 
-    // Tall
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(64px);
     }
 
     // Expansion overrides
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact tr td.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand {
       padding-top: rem(4px);
     }
 
-    // V11: remove short
-    &.#{$prefix}--data-table--short tr td.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand {
       padding-top: rem(8px);
     }
@@ -935,41 +794,25 @@
       overflow-y: hidden;
     }
 
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label {
       padding-top: rem(3px);
       padding-bottom: 0;
     }
 
-    // V11: remove short
-    &.#{$prefix}--data-table--short th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label {
       padding-top: rem(8px);
       padding-bottom: 0;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label {
       padding-top: 1rem;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall th.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--xl th.#{$prefix}--table-expand {
       display: flex;
       align-items: flex-start;
     }
 
-    // With dynamic content overrides
-    // V11: remove compact, short
-    &.#{$prefix}--data-table--compact
-      tr.#{$prefix}--parent-row
-      .#{$prefix}--table-column-checkbox,
-    &.#{$prefix}--data-table--short
-      tr.#{$prefix}--parent-row
-      .#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xs
       tr.#{$prefix}--parent-row
       .#{$prefix}--table-column-checkbox,
@@ -990,11 +833,6 @@
     margin: 0;
   }
 
-  // V11: remove short, compact
-  .#{$prefix}--data-table--short
-    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
-  .#{$prefix}--data-table--compact
-    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
   .#{$prefix}--data-table--xs
     .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
   .#{$prefix}--data-table--sm

package/scss/components/data-table/action/_data-table-action.scss

@@ -500,8 +500,7 @@
   //-------------------------------------------------
   //SMALL TOOLBAR
   //-------------------------------------------------
-  // V11: remove --small
-  .#{$prefix}--table-toolbar--small,
+
   .#{$prefix}--table-toolbar--sm {
     height: rem(32px);
     min-height: rem(32px);
@@ -605,26 +604,19 @@
   //-------------------------------------------------
   // SMALL BATCH ACTIONS
   //-------------------------------------------------
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--batch-actions
-    .#{$prefix}--action-list,
+
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--batch-actions
     .#{$prefix}--action-list {
     height: rem(32px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action,
   .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
     width: rem(32px);
     height: rem(32px);
     padding: $spacing-03 0;
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary,
   .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
     height: rem(32px);
     min-height: auto;
@@ -632,18 +624,11 @@
     padding-bottom: calc(0.375rem - 3px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before,
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     top: rem(8px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--toolbar-action
-    ~ .#{$prefix}--btn,
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--toolbar-action
     ~ .#{$prefix}--btn {
@@ -651,8 +636,6 @@
     height: rem(32px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small .#{$prefix}--batch-summary,
   .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
     min-height: 2rem;
   }

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -231,8 +231,6 @@
     transition: transform $duration-moderate-01 motion(standard, productive);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-expand__button,
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
     width: rem(32px);
     padding: 0;

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -84,8 +84,7 @@
     justify-content: space-between;
   }
 
-  // V11: Remove compact, short, tall
-  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
+  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
     th
     .#{$prefix}--table-sort__flex {
     /* IE11 workaround for align-items: center and min-height
@@ -96,20 +95,12 @@
     }
   }
 
-  // V11: remove compact
-  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
     min-height: 1.5rem;
   }
 
-  // V11: remove short
-  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
@@ -122,10 +113,6 @@
     min-height: 2.5rem;
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
@@ -189,36 +176,25 @@
   // Compact, Short, Tall Sortable
   //----------------------------------------------------------------------------
   // Sortable compact
-  // V11: remove compact
-  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th {
     height: rem(24px);
   }
 
   // Sortable Short
-  // V11: remove short
-  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th {
     height: rem(32px);
   }
 
   // Sortable Medium
-  // V11: remove short
   .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th {
     height: rem(40px);
   }
 
   // Sortable Tall
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th {
     height: rem(64px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort {
@@ -226,9 +202,6 @@
     height: rem(64px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon-unsorted,
-  .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon,
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted,
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon {
     margin-top: rem(13px);

package/scss/components/dropdown/_dropdown.scss

@@ -130,7 +130,6 @@
     transition: max-height $duration-fast-02 motion(entrance, productive);
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
     background-color: $field;
 

package/scss/components/file-uploader/_file-uploader.scss

@@ -139,7 +139,7 @@
     min-height: $spacing-09;
     align-items: center;
     margin-bottom: $spacing-03;
-    background-color: $field;
+    background-color: $layer;
     gap: rem(12px) $spacing-05;
     grid-auto-rows: auto;
     grid-template-columns: 1fr auto;
@@ -187,7 +187,7 @@
 
     max-width: rem(320px);
     margin-bottom: $spacing-03;
-    background-color: $field;
+    background-color: $layer;
     outline-width: 1px;
   }
 
@@ -280,7 +280,7 @@
 
     // for checkmark contrast
     [data-icon-path='inner-path'] {
-      fill: $icon-on-color;
+      fill: $icon-inverse;
       opacity: 1;
     }
   }

package/scss/components/modal/_modal.scss

@@ -5,8 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../breakpoint' as *;
 @use '../../config' as *;
+@use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

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

@@ -78,7 +78,7 @@
   }
 
   .#{$prefix}--actionable-notification a:focus {
-    outline: 1px solid $link-inverse;
+    outline: 1px solid $focus-inverse;
   }
 
   .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast
@@ -88,20 +88,20 @@
 
   .#{$prefix}--actionable-notification--low-contrast {
     color: $text-primary;
+  }
 
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      border-width: 1px 1px 1px 0;
-      border-style: solid;
-      content: '';
-      filter: opacity(0.4);
-      pointer-events: none;
-    }
+  .#{$prefix}--actionable-notification--low-contrast:not(.#{$prefix}--actionable-notification--toast)::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-width: 1px 1px 1px 0;
+    border-style: solid;
+    content: '';
+    filter: opacity(0.4);
+    pointer-events: none;
   }
 
   .#{$prefix}--actionable-notification--error {
@@ -192,13 +192,13 @@
   .#{$prefix}--actionable-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 $spacing-05;
+    margin: 0 $spacing-09 0 rem(13px);
   }
 
   .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast)
     .#{$prefix}--actionable-notification__details {
     @include breakpoint(md) {
-      margin: 0 $spacing-05;
+      margin: 0 rem(13px);
     }
   }
 
@@ -220,12 +220,48 @@
     padding: rem(15px) 0;
   }
 
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__text-wrapper {
+    padding: rem(15px) 0 rem(23px) 0;
+  }
+
   .#{$prefix}--actionable-notification__content {
     @include type-style('body-compact-01');
 
+    display: flex;
     word-break: break-word;
   }
 
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__content {
+    display: block;
+  }
+
+  .#{$prefix}--actionable-notification__title {
+    @include type-style('heading-compact-01');
+
+    margin-right: $spacing-02;
+    font-weight: 600;
+    word-break: break-word;
+  }
+
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__title {
+    margin-right: 0;
+  }
+
+  .#{$prefix}--actionable-notification__subtitle {
+    @include type-style('body-compact-01');
+
+    margin-top: 0;
+    color: $text-inverse;
+    word-break: break-word;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__subtitle {
+    color: $text-primary;
+  }
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     height: rem(32px);
@@ -273,10 +309,13 @@
 
   /* Tertiary action button when not inline (toast) */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
-    margin-bottom: $spacing-03;
+    padding: 0 $spacing-05;
+    margin-bottom: $spacing-05;
 
-    // Button should be left aligned with text. 20px is the width of the notification icon
-    margin-left: calc(#{$spacing-07} + #{rem(20px)});
+    // Button should be left aligned with text.
+    // 20px is the width of the notification icon
+    // 2px is the width of the left border that should be negated
+    margin-left: calc(#{$spacing-07} + #{rem(20px)} - #{rem(2px)});
   }
 
   // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification