@carbon/styles 0.12.0 → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.35.0",
+    "@carbon/colors": "^10.36.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.40.0",
-    "@carbon/layout": "^10.35.0",
-    "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.49.0",
-    "@carbon/type": "^10.40.0",
+    "@carbon/grid": "^10.41.0",
+    "@carbon/layout": "^10.36.0",
+    "@carbon/motion": "^10.28.0",
+    "@carbon/themes": "^10.51.0",
+    "@carbon/type": "^10.41.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "ac4b4bf03cf93cb8463916231619fbfdc72f0be5"
+  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
 }

package/scss/_config.scss

@@ -48,3 +48,9 @@ $use-google-fonts: false !default;
 /// @type String
 /// @group config
 $prefix: 'cds' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;

package/scss/_grid.scss

@@ -10,11 +10,13 @@
 @forward '@carbon/grid'
   show css-grid,
        subgrid,
+       flex-grid,
        $grid-gutter,
        $grid-gutter-condensed,
        $grid-breakpoints
   with (
-    $prefix: config.$prefix
+    $prefix: config.$prefix,
+    $flex-grid-columns: config.$flex-grid-columns,
   );
 
 @use '@carbon/grid';

package/scss/_type.scss

@@ -12,6 +12,7 @@
   type-style,
   font-family,
   default-type,
+  type-classes,
 
   // Variables
   $caption-01,

package/scss/components/_index.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'accordion';
+@use 'aspect-ratio';
 @use 'breadcrumb';
 @use 'button';
 @use 'checkbox';
@@ -51,6 +52,7 @@
 @use 'text-input';
 @use 'tile';
 @use 'time-picker';
+@use 'toggletip';
 @use 'toggle';
 @use 'tooltip';
 @use 'treeview';

package/scss/components/accordion/_accordion.scss

@@ -87,7 +87,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
 
     &:hover::before {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
 
     &:focus {
@@ -125,11 +125,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion__item--disabled,
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
-    border-top: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-top: 1px solid $border-subtle;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
-    border-bottom: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-bottom: 1px solid $border-subtle;
   }
 
   .#{$prefix}--accordion__arrow {

package/scss/components/aspect-ratio/_aspect-ratio.scss

@@ -0,0 +1,72 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// 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 'sass:math';
+@use 'sass:meta';
+@use '../../config' as *;
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @carbon/grid
+$carbon--aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @carbon/grid
+@mixin aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}--aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $width: nth($aspect-ratio, 1);
+    $height: nth($aspect-ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
+    }
+  }
+}

package/scss/components/aspect-ratio/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'aspect-ratio';
+@use 'aspect-ratio';
+
+@include aspect-ratio.aspect-ratio;

package/scss/components/button/_button.scss

@@ -102,9 +102,9 @@
       transparent,
       transparent,
       $link-primary,
-      $background-hover,
+      $layer-hover,
       currentColor,
-      $background-active
+      $layer-active
     );
 
     padding: $button-padding-ghost;
@@ -243,6 +243,7 @@
 
       &:active {
         border-color: $button-danger-active;
+        background-color: $button-danger-active;
         color: $text-on-color;
       }
 
@@ -334,7 +335,7 @@
 
   //expressive styles
   .#{$prefix}--btn--expressive {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
     min-height: 3rem;
   }

package/scss/components/button/_mixins.scss

@@ -13,14 +13,18 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
+@use '../../utilities/custom-property';
 @use 'tokens' as *;
 
+$button-focus-color: custom-property.get-var('button-focus-color', $focus);
+
 @mixin button-base {
   @include component-reset.reset;
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   position: relative;
   display: inline-flex;
+  width: max-content;
   max-width: rem(320px);
   min-height: $button-height;
   flex-shrink: 0;
@@ -84,8 +88,8 @@
   }
 
   &:focus {
-    border-color: $focus;
-    box-shadow: inset 0 0 0 $button-outline-width $focus,
+    border-color: $button-focus-color;
+    box-shadow: inset 0 0 0 $button-outline-width $button-focus-color,
       inset 0 0 0 $button-border-width $background;
   }
 

package/scss/components/button/_tokens.scss

@@ -230,15 +230,15 @@ $button-tertiary-active: (
 ) !default;
 
 $button-danger-hover: (
-  fallback: #b81921,
+  fallback: #b81922,
   values: (
     (
       theme: themes.$white,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g10,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g90,
@@ -252,59 +252,59 @@ $button-danger-hover: (
 ) !default;
 
 $button-primary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g100,
-      value: #0353e9,
+      value: #0050e6,
     ),
   ),
 ) !default;
 
 $button-secondary-hover: (
-  fallback: #4c4c4c,
+  fallback: #474747,
   values: (
     (
       theme: themes.$white,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g10,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g90,
-      value: #606060,
+      value: #5e5e5e,
     ),
     (
       theme: themes.$g100,
-      value: #606060,
+      value: #5e5e5e,
     ),
   ),
 ) !default;
 
 $button-tertiary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,

package/scss/components/checkbox/_checkbox.scss

@@ -197,4 +197,11 @@
     // Add extra spacing when label is present
     margin: rem(1px) 0 0 rem(6px);
   }
+
+  //-----------------------------------------------
+  // InlineCheckbox
+  //-----------------------------------------------
+  .#{$prefix}--checkbox--inline {
+    position: relative;
+  }
 }

package/scss/components/code-snippet/_code-snippet.scss

@@ -38,13 +38,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--disabled,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 
   .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
   }

package/scss/components/content-switcher/_content-switcher.scss

@@ -52,15 +52,37 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration-fast-01 motion(standard, productive);
+    transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration-moderate-01 motion(standard, productive);
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -157,6 +179,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -177,6 +200,10 @@
       background-color: $layer-selected-disabled;
       color: $text-disabled;
     }
+
+    &::after {
+      transform: scaleY(1);
+    }
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected

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
   //-------------------------------------------------
@@ -78,26 +85,19 @@
     }
   }
 
+  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
+    width: 3rem;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
-    padding: 0;
     cursor: pointer;
     opacity: 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-disabled;
-    cursor: not-allowed;
-    transition: background-color none;
+  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-input {
+    padding: 0;
   }
 
   .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input {
@@ -126,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
   //-------------------------------------------------
@@ -158,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
   //-------------------------------------------------
@@ -455,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 {
@@ -530,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 {
@@ -584,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/date-picker/_date-picker.scss

@@ -106,7 +106,7 @@
 
     &:disabled {
       border-bottom: 1px solid transparent;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }

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

@@ -219,6 +219,7 @@
     text-decoration: none;
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
     transition: background-color $duration-fast-01 motion(standard, productive);
+    user-select: none;
     // Windows HCM fix
     @include high-contrast-mode('icon-fill');
 

package/scss/components/dropdown/_dropdown.scss

@@ -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);
   }
@@ -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