@carbon/styles 0.13.0 → 0.15.0-rc.0

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

@@ -47,10 +47,17 @@
   }
 
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
+    height: 3rem;
+    padding: 0 3rem;
     // For toolbar animation with (esp.) persistent search box
     background-color: transparent;
   }
 
+  .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
+    width: 3rem;
+    height: 3rem;
+  }
+
   //-------------------------------------------------
   //DEPRECATED v10/v9 search behavior
   //-------------------------------------------------
@@ -70,7 +77,7 @@
     height: $spacing-09;
     box-shadow: none;
     cursor: pointer;
-    transition: width $transition--expansion $standard-easing,
+    transition: width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
@@ -78,6 +85,10 @@
     }
   }
 
+  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
+    width: 3rem;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
     cursor: pointer;
@@ -89,21 +100,6 @@
     padding: 0;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search-magnifier-icon {
-    left: 0;
-    width: $spacing-09;
-    height: $spacing-09;
-    padding: $spacing-05;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier-icon {
-    background-color: $layer;
-    cursor: not-allowed;
-    transition: background-color none;
-  }
-
   .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input {
     cursor: not-allowed;
   }
@@ -130,6 +126,68 @@
     background-color: $focus;
   }
 
+  //-------------------------------------------------
+  // Seach icon
+  //-------------------------------------------------v
+  // lg expandable icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  // lg persistent icon spacing
+  .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm)
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 1rem;
+  }
+
+  // sm expandable icon spacing
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm:not(.#{$prefix}--toolbar-search-container-active):not(.#{$prefix}--toolbar-search-container-persistent)
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  // sm persistent icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search-magnifier-icon {
+    width: $spacing-09;
+    height: $spacing-09;
+    padding: $spacing-05;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
+    .#{$prefix}--search-magnifier-icon {
+    background-color: $layer;
+    cursor: not-allowed;
+    transition: background-color none;
+  }
+
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:focus,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:active,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:hover {
+    border: none;
+    background-color: transparent;
+    outline: none;
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -162,17 +220,6 @@
     background-color: $field-hover;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:focus,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:active,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:hover {
-    border: none;
-    background-color: transparent;
-    outline: none;
-  }
-
   //-------------------------------------------------
   //SEARCH CLOSE BUTTON
   //-------------------------------------------------
@@ -429,7 +476,7 @@
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
     opacity: 0;
-    transition: opacity $transition--base $standard-easing;
+    transition: opacity $transition-base $standard-easing;
   }
 
   // cancel btn
@@ -449,7 +496,7 @@
   }
 
   .#{$prefix}--batch-summary__para {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
   }
 
   //-------------------------------------------------
@@ -459,6 +506,7 @@
   .#{$prefix}--table-toolbar--small,
   .#{$prefix}--table-toolbar--sm {
     height: rem(32px);
+    min-height: rem(32px);
 
     .#{$prefix}--toolbar-search-container-expandable,
     .#{$prefix}--toolbar-search-container-persistent {
@@ -534,6 +582,22 @@
 
       background-color: transparent;
     }
+
+    .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+      width: rem(32px);
+      //:after element is 2rem but w/o this trigger button is for some reason 28px
+      min-width: rem(32px);
+      height: rem(32px);
+    }
+
+    .#{$prefix}--toolbar-content {
+      height: rem(32px);
+    }
+
+    .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
+      width: 2rem;
+      height: 2rem;
+    }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
@@ -588,4 +652,10 @@
     overflow: hidden;
     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/sort/_data-table-sort.scss

@@ -181,7 +181,7 @@
     fill: $icon-primary;
     opacity: 1;
     transform: rotate(0);
-    transition: transform $transition--base $standard-easing;
+    transition: transform $transition-base $standard-easing;
   }
 
   //----------------------------------------------------------------------------

package/scss/components/date-picker/_flatpickr.scss

@@ -16,66 +16,73 @@
 
 @use '../button/tokens' as *;
 
-@keyframes fpFadeInDown {
+@keyframes fp-fade-in-down {
   from {
     opacity: 0;
     transform: translate3d(0, -20px, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideLeft {
+@keyframes fp-slide-left {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(-100%, 0, 0);
   }
 }
 
-@keyframes fpSlideLeftNew {
+@keyframes fp-slide-left-new {
   from {
     transform: translate3d(100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideRight {
+@keyframes fp-slide-right {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(100%, 0, 0);
   }
 }
 
-@keyframes fpSlideRightNew {
+@keyframes fp-slide-right-new {
   from {
     transform: translate3d(-100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpFadeOut {
+@keyframes fp-fade-out {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
 }
 
-@keyframes fpFadeIn {
+@keyframes fp-fade-in {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -130,7 +137,7 @@
   }
 
   .flatpickr-calendar.animate.open {
-    animation: fpFadeInDown $duration-fast-02 motion(entrance, productive);
+    animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
   }
 
   .flatpickr-calendar.inline {
@@ -193,7 +200,7 @@
   }
 
   .flatpickr-month {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: flex;
     height: rem(40px);
@@ -240,7 +247,7 @@
   }
 
   .flatpickr-current-month {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: flex;
     height: rem(28px);
@@ -380,7 +387,7 @@
   }
 
   .flatpickr-weekday {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     flex: 1;
     color: $text-primary;
@@ -392,8 +399,8 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft,
@@ -402,23 +409,23 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRight {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
     transform: translate3d(100%, 0, 0);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRightNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-day {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     width: rem(40px);

package/scss/components/dropdown/_dropdown.scss

@@ -29,7 +29,7 @@
     grid-template: auto auto / auto min-content;
 
     .#{$prefix}--label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
     }
 
     .#{$prefix}--label,
@@ -70,15 +70,11 @@
     text-align: left;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl,
   .#{$prefix}--dropdown--lg {
     height: rem(48px);
     max-height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow,
   .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
     top: rem(16px);
   }
@@ -171,7 +167,7 @@
   }
 
   .#{$prefix}--dropdown-text {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: block;
     overflow: hidden;
@@ -188,7 +184,7 @@
     @include reset;
     @include focus-outline('reset');
     @include box-shadow;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: absolute;
     z-index: z('dropdown');
@@ -277,12 +273,6 @@
     padding-bottom: rem(7px);
   }
 
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown-link {
-    height: rem(48px);
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
-  }
-
   .#{$prefix}--dropdown--focused,
   .#{$prefix}--dropdown-link:focus {
     @include focus-outline('outline');
@@ -329,12 +319,6 @@
     transform: rotate(-180deg);
   }
 
-  .#{$prefix}--dropdown--open.#{$prefix}--dropdown--xl
-    .#{$prefix}--dropdown-list {
-    // 48px item height * 5.5 items shown
-    max-height: rem(264px);
-  }
-
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
     .#{$prefix}--dropdown-list {
     // 32px item height * 5.5 items shown

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

@@ -35,7 +35,7 @@
   // TODO: sync with type
   .#{$prefix}--file--label {
     @include reset;
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     margin-bottom: $spacing-03;
     color: $text-primary;
@@ -108,7 +108,7 @@
 
   .#{$prefix}--label-description {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     margin-bottom: $spacing-05;
     color: $text-secondary;
@@ -161,7 +161,7 @@
     }
 
     .#{$prefix}--file-filename {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       overflow: hidden;
       margin-left: $spacing-05;
@@ -247,7 +247,7 @@
 
   // TODO: deprecate
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
-    @include type-style('caption-01');
+    @include type-style('label-01');
 
     display: block;
     overflow: visible;

package/scss/components/form/_form.scss

@@ -34,7 +34,7 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--form-item {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     // We specify `auto` as the default value so that the form item does
@@ -161,7 +161,7 @@ $input-label-weight: 400 !default;
 
   .#{$prefix}--form-requirement {
     @include reset;
-    @include type-style('caption-01');
+    @include type-style('label-01');
 
     display: none;
     overflow: hidden;

package/scss/components/link/_link.scss

@@ -30,7 +30,7 @@ $link-focus-text-color: custom-property.get-var(
 @mixin link {
   .#{$prefix}--link {
     @include component-reset.reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: inline-flex;
     color: $link-text-color;
@@ -68,7 +68,7 @@ $link-focus-text-color: custom-property.get-var(
   .#{$prefix}--link--disabled,
   .#{$prefix}--link--disabled:hover {
     @include component-reset.reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     color: $text-disabled;
     cursor: not-allowed;
@@ -102,7 +102,7 @@ $link-focus-text-color: custom-property.get-var(
   }
 
   .#{$prefix}--link--lg {
-    @include type.type-style('body-short-02');
+    @include type.type-style('body-compact-02');
   }
 
   .#{$prefix}--link__icon {

package/scss/components/list/_list.scss

@@ -25,14 +25,14 @@
   .#{$prefix}--list--ordered,
   .#{$prefix}--list--ordered--native {
     @include component-reset.reset;
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
 
     list-style: none;
   }
 
   .#{$prefix}--list--expressive,
   .#{$prefix}--list--expressive .#{$prefix}--list--nested {
-    @include type.type-style('body-long-02');
+    @include type.type-style('body-02');
   }
 
   .#{$prefix}--list--ordered--native {

package/scss/components/list-box/_list-box.scss

@@ -55,7 +55,7 @@ $list-box-menu-width: rem(300px);
     grid-template: auto auto / auto auto;
 
     .#{$prefix}--label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
     }
 
     .#{$prefix}--label,
@@ -92,8 +92,6 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl,
   .#{$prefix}--list-box--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -114,7 +112,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box .#{$prefix}--text-input {
@@ -155,21 +153,21 @@ $list-box-menu-width: rem(300px);
   // V11: Possibly deprecate
   // Light variation for 'list-box'
   .#{$prefix}--list-box--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $layer-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field-02;
+    background: $field;
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle-02;
+    border-top-color: $border-subtle;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
@@ -183,7 +181,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box--disabled,
@@ -373,7 +371,7 @@ $list-box-menu-width: rem(300px);
 
   // Label for a `list-box__field`
   .#{$prefix}--list-box__label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     color: $text-primary;
@@ -524,9 +522,6 @@ $list-box-menu-width: rem(300px);
     max-height: rem(220px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
     .#{$prefix}--list-box__menu {
     // 48px item height * 5.5 items shown
@@ -541,7 +536,7 @@ $list-box-menu-width: rem(300px);
 
   // Descendant of a `list-box__menu` that represents a selection for a control
   .#{$prefix}--list-box__menu-item {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     height: rem(40px);
@@ -561,15 +556,13 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
     height: rem(48px);
   }
@@ -580,8 +573,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
-    // To Do: What should this variable be?
-    // background-color: $selected-light-ui;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box--disabled
@@ -653,8 +645,6 @@ $list-box-menu-width: rem(300px);
     padding-bottom: rem(7px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
     height: rem(48px);
     padding-top: rem(15px);
@@ -736,9 +726,8 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
-    // To Do: What should this token be?
-    // border-bottom-color: $selected-light-ui;
-    // background-color: $selected-light-ui;
+    border-bottom-color: $layer-selected;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box__menu-item--active:hover,
@@ -803,11 +792,6 @@ $list-box-menu-width: rem(300px);
     bottom: 2rem;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
     .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--list-box--lg