@carbon/styles 0.13.0 → 0.15.0-rc.0

package/scss/components/pagination/_unstable_pagination.scss

@@ -0,0 +1,173 @@
+//
+// Copyright IBM Corp. 2016, 2020
+//
+// 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 '../../breakpoint' as *;
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/component-reset';
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../select';
+
+/// Unstable pagination styles
+/// @access private
+/// @group pagination
+@mixin unstable_pagination {
+  .#{$prefix}--unstable-pagination {
+    @include component-reset.reset;
+    @include type-style('body-compact-01');
+
+    display: flex;
+    width: 100%;
+    min-height: rem(40px);
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid $border-subtle;
+    border-bottom: 1px solid transparent;
+    background-color: $layer;
+  }
+
+  .#{$prefix}--unstable-pagination__text {
+    @include breakpoint('md') {
+      display: inline-block;
+    }
+
+    margin: 0 $spacing-05;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--unstable-pagination__left,
+  .#{$prefix}--unstable-pagination__right {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--unstable-pagination__left {
+    padding: 0 $spacing-05 0 0;
+  }
+
+  .#{$prefix}--unstable-pagination__left > .#{$prefix}--form-item,
+  .#{$prefix}--unstable-pagination__right > .#{$prefix}--form-item {
+    height: 100%;
+  }
+
+  .#{$prefix}--unstable-pagination__left
+    .#{$prefix}--unstable-pagination__text {
+    margin-right: rem(1px);
+  }
+
+  .#{$prefix}--unstable-pagination__right
+    .#{$prefix}--unstable-pagination__text {
+    margin-right: $spacing-05;
+    margin-left: rem(1px);
+  }
+
+  .#{$prefix}--unstable-pagination__button {
+    @include component-reset.reset;
+
+    display: flex;
+    width: rem(40px);
+    height: rem(40px);
+    min-height: rem(32px);
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-left: 1px solid $border-subtle;
+    margin: 0;
+    background: none;
+    color: $icon-primary;
+    cursor: pointer;
+    fill: $icon-primary;
+    transition: outline $duration-fast-02 motion(standard, productive),
+      background-color $duration-fast-02 motion(standard, productive);
+  }
+
+  // Unset height/width set by icon-only button:
+  .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon {
+    width: initial;
+    height: initial;
+  }
+
+  .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--unstable-pagination__button:hover {
+    background: $layer-hover;
+    color: $icon-primary;
+  }
+
+  .#{$prefix}--unstable-pagination__button--no-index {
+    cursor: not-allowed;
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--unstable-pagination__button.#{$prefix}--btn:disabled {
+    border-color: $border-subtle;
+    background: transparent;
+  }
+
+  .#{$prefix}--unstable-pagination__button:disabled:hover,
+  .#{$prefix}--unstable-pagination__button--no-index:hover {
+    background: transparent;
+    cursor: not-allowed;
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector,
+  .#{$prefix}--unstable-pagination__page-sizer {
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector
+    .#{$prefix}--select-input--inline__wrapper,
+  .#{$prefix}--unstable-pagination__page-sizer
+    .#{$prefix}--select-input--inline__wrapper {
+    display: flex;
+    height: 100%;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select-input,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input {
+    @include type-style('body-short-01');
+
+    width: auto;
+    min-width: auto;
+    height: 100%;
+    padding: 0 2.25rem 0 $spacing-05;
+    line-height: rem(40px);
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector
+    .#{$prefix}--select-input:hover,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input:hover {
+    background: $layer-hover;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select__arrow {
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include breakpoint('md') {
+      right: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector {
+    border-left: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--unstable-pagination__page-sizer {
+    border-right: 1px solid $border-subtle;
+  }
+}

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -46,7 +46,7 @@
 ) {
   .#{$prefix}--pagination-nav {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     line-height: 0;
   }
@@ -70,7 +70,7 @@
   }
 
   .#{$prefix}--pagination-nav__page {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include button-reset.reset($width: false);
 
     position: relative;

package/scss/components/popover/_popover.scss

@@ -185,13 +185,16 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
-    transform: translate(0, calc(100% + $popover-offset));
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(100% + $popover-offset)
+    );
   }
 
   .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
-    transform: translate(0, calc(100% + $popover-offset));
+    transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
   // Popover hover area placement
@@ -231,13 +234,16 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
     top: 0;
     left: 0;
-    transform: translate(0, calc(-100% - $popover-offset));
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-100% - $popover-offset)
+    );
   }
 
   .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
     top: 0;
     right: 0;
-    transform: translate(0, calc(-100% - $popover-offset));
+    transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
   // Popover hover area placement
@@ -277,15 +283,18 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
-    top: 0;
+    top: 50%;
     left: 100%;
-    transform: translate($popover-offset, 0);
+    transform: translate(
+      $popover-offset,
+      calc(0.5 * $popover-offset * -1 - 16px)
+    );
   }
 
   .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
-    bottom: 0;
+    bottom: 50%;
     left: 100%;
-    transform: translate($popover-offset, 0);
+    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
   }
 
   // Popover hover area placement
@@ -325,19 +334,25 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
-    top: 0;
+    top: -50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
-    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-1 * 0.5 * $popover-offset + 16px)
+    );
   }
 
   .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
     right: 100%;
-    bottom: 0;
+    bottom: -50%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
-    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(0.5 * $popover-offset - 16px)
+    );
   }
 
   // Popover hover area placement

package/scss/components/progress-bar/_progress-bar.scss

@@ -17,7 +17,7 @@
 /// @group progress-bar
 @mixin progress-bar {
   .#{$prefix}--progress-bar__label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: block;
     margin-bottom: $spacing-03;
@@ -31,6 +31,14 @@
     background-color: $layer;
   }
 
+  .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
+    height: rem(8px);
+  }
+
+  .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
+    height: rem(4px);
+  }
+
   .#{$prefix}--progress-bar__bar {
     display: block;
     width: 100%;

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -78,7 +78,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     max-width: rem(88px);
@@ -113,8 +113,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-label:active {
-    //is this still a color token??
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+    .#{$prefix}--progress-label:active {
     box-shadow: 0 rem(3px) 0 0 $background-brand;
     color: $background-brand;
   }
@@ -137,7 +137,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   //single line tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     display: block;
     width: rem(125px);
@@ -153,7 +153,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   //multiline tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     width: rem(150px);
     height: auto;
@@ -225,12 +225,6 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     cursor: pointer;
   }
 
-  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
-    .#{$prefix}--progress-label:active {
-    box-shadow: 0 rem(3px) 0 0 $interactive;
-    color: $interactive;
-  }
-
   //DISABLED STYLING
   .#{$prefix}--progress-step--disabled {
     cursor: not-allowed;
@@ -286,12 +280,17 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     flex-direction: column;
   }
 
+  .#{$prefix}--progress--vertical,
+  .#{$prefix}--progress-text {
+    display: flex;
+    flex-direction: column;
+  }
+
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     width: initial;
     min-width: initial;
     min-height: 3.625rem;
-    flex-wrap: wrap;
     align-content: flex-start;
   }
 
@@ -320,8 +319,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
     position: static;
     width: 100%;
-    margin-top: auto;
-    margin-left: $spacing-07;
+    margin: auto 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-line {

package/scss/components/radio-button/_radio-button.scss

@@ -34,6 +34,7 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button-group {
     @include reset;
 
+    position: relative;
     display: flex;
     align-items: center;
   }
@@ -54,7 +55,7 @@ $radio-border-width: 1px !default;
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
-      line-height: carbon-mini-units(2.5);
+      line-height: 1.25;
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
@@ -69,7 +70,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: flex;
     align-items: center;

package/scss/components/search/_search.scss

@@ -40,7 +40,7 @@
 
   .#{$prefix}--search-input {
     @include reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -99,24 +99,21 @@
     left: rem(8px);
   }
 
-  // Large styles
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-input,
-  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Medium styles
+  .#{$prefix}--search--md .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
-
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
+  .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl .#{$prefix}--search-input,
-  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Large styles
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
@@ -245,6 +242,7 @@
     @include focus-outline('outline');
   }
 
+  // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
@@ -259,8 +257,8 @@
     }
   }
 
-  // V11: change lg to md
-  .#{$prefix}--search--lg {
+  // Medium
+  .#{$prefix}--search--md {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -274,8 +272,8 @@
     }
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl {
+  // Large
+  .#{$prefix}--search--lg {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -294,9 +292,8 @@
     visibility: hidden;
   }
 
-  // V11: change xl to lg, lg to md
-  .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 

package/scss/components/select/_select.scss

@@ -40,7 +40,7 @@
   }
 
   .#{$prefix}--select-input {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: block;
@@ -175,10 +175,15 @@
     opacity: 1;
   }
 
-  .#{$prefix}--select-optgroup,
+  optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
+    background-color: $background-hover;
     color: $text-primary;
+
+    &:disabled {
+      color: $text-disabled;
+    }
   }
 
   .#{$prefix}--select--inline {
@@ -214,6 +219,7 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
     background-color: $background;

package/scss/components/slider/_slider.scss

@@ -38,7 +38,9 @@
     width: 100%;
     min-width: rem(200px);
     max-width: rem(640px);
+    padding: $spacing-05 0;
     margin: 0 $spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--slider__range-label {
@@ -57,7 +59,6 @@
     width: 100%;
     height: rem(2px);
     background: $border-subtle;
-    cursor: pointer;
     transform: translate(0%, -50%);
   }
 
@@ -87,13 +88,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    top: 0;
     width: rem(14px);
     height: rem(14px);
     background: $layer-selected-inverse;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    cursor: pointer;
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -150,6 +149,10 @@
     color: $text-disabled;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $border-subtle;
 
@@ -177,7 +180,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $border-subtle;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled

package/scss/components/structured-list/_structured-list.scss

@@ -44,7 +44,6 @@
     border-collapse: collapse;
     border-spacing: 0;
     overflow-x: auto;
-    overflow-y: hidden;
 
     // Condensed list
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
@@ -134,7 +133,7 @@
   .#{$prefix}--structured-list-th {
     @include reset;
     @include padding-th;
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: table-cell;
     height: rem(40px);
@@ -152,7 +151,7 @@
 
   .#{$prefix}--structured-list-td {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include padding-td;
 
     position: relative;

package/scss/components/tabs/_tabs.scss

@@ -38,7 +38,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
 @mixin tabs {
   .#{$prefix}--tabs {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     width: 100%;
@@ -215,7 +215,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     .#{$prefix}--tabs__nav-link {
       @include button-reset.reset($width: false);
       @include focus-outline('reset');
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       @if not feature-flag-enabled('enable-v11-release') {
         width: rem(160px);
@@ -298,7 +298,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       .#{$prefix}--tabs__nav-link:focus,
     .#{$prefix}--tabs__nav-item--selected:active
       .#{$prefix}--tabs__nav-link:active {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       color: $text-primary;
     }

package/scss/components/tag/_tag.scss

@@ -178,6 +178,7 @@
     cursor: pointer;
     transition: background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
+
     svg {
       fill: currentColor;
     }

package/scss/components/text-area/_text-area.scss

@@ -22,7 +22,7 @@
 @mixin text-area {
   .#{$prefix}--text-area {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -47,7 +47,7 @@
 
   .#{$prefix}--text-area::placeholder {
     @include placeholder-colors;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
   }
 
   // V11: Possibly deprecate
@@ -102,4 +102,10 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }

package/scss/components/text-input/_text-input.scss

@@ -32,7 +32,7 @@
 @mixin text-input {
   .#{$prefix}--text-input {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;

package/scss/components/tile/_tile.scss

@@ -40,7 +40,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--light {
-    background-color: $layer-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--tile--clickable,
@@ -75,7 +75,7 @@
 
   .#{$prefix}--tile--clickable {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
     text-decoration: none;