@carbon/styles 0.10.0-rc.0 → 0.12.0-rc.0

package/docs/sass.md

@@ -120,23 +120,6 @@ to `false`:
 );
 ```
 
-### Emitting additional typefaces
-
-When using the font-face declarations, only `IBM Plex Sans` and `IBM Plex Mono`
-are emitted. If you would like to emit additional typefaces, like
-`IBM Plex Sans Arabic`, you can set additional config tokens:
-
-```scss
-@use '@carbon/styles/scss/config' with (
-  $css--plex-arabic: true,
-);
-```
-
-| IBM Plex Language | Token               |
-| :---------------- | :------------------ |
-| Arabic            | `$css--plex-arabic` |
-| TODO              | `TODO`              |
-
 ## Grid
 
 | Import                             | Filepath          |

package/index.scss

@@ -7,7 +7,6 @@
 
 @forward 'scss/config';
 @forward 'scss/colors' hide $white;
-@forward 'scss/font-face';
 @forward 'scss/grid';
 @forward 'scss/motion';
 @forward 'scss/type';
@@ -15,4 +14,7 @@
 @forward 'scss/theme';
 
 @use 'scss/reset';
+@forward 'scss/fonts';
+@forward 'scss/layer';
+@forward 'scss/zone';
 @use 'scss/components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.10.0-rc.0",
+  "version": "0.12.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.34.0",
-    "@carbon/feature-flags": "^0.6.0",
-    "@carbon/grid": "^10.39.0",
-    "@carbon/layout": "^10.34.0",
-    "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.47.0",
-    "@carbon/type": "^10.38.0",
+    "@carbon/colors": "^10.35.0-rc.0",
+    "@carbon/feature-flags": "^0.7.0-rc.0",
+    "@carbon/grid": "^10.40.0-rc.0",
+    "@carbon/layout": "^10.35.0-rc.0",
+    "@carbon/motion": "^10.27.0-rc.0",
+    "@carbon/themes": "^10.49.0-rc.0",
+    "@carbon/type": "^10.40.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.20.0",
+    "@carbon/test-utils": "^10.21.0-rc.0",
     "css": "^3.0.0"
   },
-  "gitHead": "919fcfc3b4e247d057c6112f8cacf8aec33fe234"
+  "gitHead": "a8bade7e1200220296e8ed13621c7a1a88206f0e"
 }

package/scss/_config.scss

@@ -5,14 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// The value used to prefix selectors and CSS Custom Properties across the
-/// codebase
-/// @access public
-/// @type String
-/// @group config
-$prefix: 'cds' !default;
-
-/// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
+/// If true, includes font face mixins from scss/fonts
 /// @access public
 /// @type Bool
 /// @group config
@@ -30,8 +23,22 @@ $css--reset: true !default;
 /// @group config
 $css--default-type: true !default;
 
-/// If true, include IBM Plex Arabic type
+/// Specify the default value for the `font-display` property used for fonts
+/// loaded with @font-face
 /// @access public
-/// @type Bool
+/// @type String
+/// @group config
+$font-display: 'swap' !default;
+
+/// Specify the base path for loading IBM Plex
+/// @access public
+/// @type String
+/// @group config
+$font-path: '~@ibm/plex' !default;
+
+/// The value used to prefix selectors and CSS Custom Properties across the
+/// codebase
+/// @access public
+/// @type String
 /// @group config
-$css--plex-arabic: false !default;
+$prefix: 'cds' !default;

package/scss/_layer.scss

@@ -0,0 +1,112 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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:list';
+@use 'sass:map';
+@use './config' as *;
+@use './theme';
+@use './utilities/custom-property';
+
+$-default-layer-sets: (
+  layer: (
+    theme.$layer-01,
+    theme.$layer-02,
+    theme.$layer-03,
+  ),
+  layer-active: (
+    theme.$layer-active-01,
+    theme.$layer-active-02,
+    theme.$layer-active-03,
+  ),
+  layer-hover: (
+    theme.$layer-hover-01,
+    theme.$layer-hover-02,
+    theme.$layer-hover-03,
+  ),
+  layer-selected: (
+    theme.$layer-selected-01,
+    theme.$layer-selected-02,
+    theme.$layer-selected-03,
+  ),
+  layer-selected-hover: (
+    theme.$layer-selected-hover-01,
+    theme.$layer-selected-hover-02,
+    theme.$layer-selected-hover-03,
+  ),
+  layer-accent: (
+    theme.$layer-accent-01,
+    theme.$layer-accent-02,
+    theme.$layer-accent-03,
+  ),
+  layer-accent-hover: (
+    theme.$layer-accent-hover-01,
+    theme.$layer-accent-hover-02,
+    theme.$layer-accent-hover-03,
+  ),
+  layer-accent-active: (
+    theme.$layer-accent-active-01,
+    theme.$layer-accent-active-02,
+    theme.$layer-accent-active-03,
+  ),
+  field: (
+    theme.$field-01,
+    theme.$field-02,
+    theme.$field-03,
+  ),
+  field-hover: (
+    theme.$field-hover-01,
+    theme.$field-hover-02,
+    theme.$field-hover-03,
+  ),
+  border-subtle: (
+    theme.$border-subtle-01,
+    theme.$border-subtle-02,
+    theme.$border-subtle-03,
+  ),
+  border-subtle-selected: (
+    theme.$border-subtle-selected-01,
+    theme.$border-subtle-selected-02,
+    theme.$border-subtle-selected-03,
+  ),
+  border-strong: (
+    theme.$border-strong-01,
+    theme.$border-strong-02,
+    theme.$border-strong-03,
+  ),
+);
+
+/// Define a map of layer sets, each set should have values for each layer in
+/// the application. The key of this map is used for the CSS Custom Property
+/// name whose value is updated as more layers are added.
+/// @type {Map}
+$layer-sets: () !default;
+$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
+
+/// Emit the layer tokens defined in $layer-sets for the given $level
+/// @param {Number} $level
+@mixin -emit-layer-tokens($level) {
+  @each $key, $layer-set in $layer-sets {
+    $value: list.nth($layer-set, $level);
+    @include custom-property.declaration($key, $value);
+  }
+}
+
+:root {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-one {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-two {
+  @include -emit-layer-tokens(2);
+}
+
+.#{$prefix}--layer-three {
+  @include -emit-layer-tokens(3);
+}

package/scss/_theme.scss

@@ -19,75 +19,6 @@
 @forward '@carbon/themes/scss/modules/tokens';
 @use '@carbon/themes/scss/modules/tokens';
 @use './utilities/custom-property';
-@use './utilities/layer-set' with (
-  $layer-sets: (
-    layer: (
-      tokens.$layer-01,
-      tokens.$layer-02,
-      tokens.$layer-03,
-    ),
-    layer-active: (
-      tokens.$layer-active-01,
-      tokens.$layer-active-02,
-      tokens.$layer-active-03,
-    ),
-    layer-hover: (
-      tokens.$layer-hover-01,
-      tokens.$layer-hover-02,
-      tokens.$layer-hover-03,
-    ),
-    layer-selected: (
-      tokens.$layer-selected-01,
-      tokens.$layer-selected-02,
-      tokens.$layer-selected-03,
-    ),
-    layer-selected-hover: (
-      tokens.$layer-selected-hover-01,
-      tokens.$layer-selected-hover-02,
-      tokens.$layer-selected-hover-03,
-    ),
-    layer-accent: (
-      tokens.$layer-accent-01,
-      tokens.$layer-accent-02,
-      tokens.$layer-accent-03,
-    ),
-    layer-accent-hover: (
-      tokens.$layer-accent-hover-01,
-      tokens.$layer-accent-hover-02,
-      tokens.$layer-accent-hover-03,
-    ),
-    layer-accent-active: (
-      tokens.$layer-accent-active-01,
-      tokens.$layer-accent-active-02,
-      tokens.$layer-accent-active-03,
-    ),
-    field: (
-      tokens.$field-01,
-      tokens.$field-02,
-      tokens.$field-03,
-    ),
-    field-hover: (
-      tokens.$field-hover-01,
-      tokens.$field-hover-02,
-      tokens.$field-hover-03,
-    ),
-    border-subtle: (
-      tokens.$border-subtle-01,
-      tokens.$border-subtle-02,
-      tokens.$border-subtle-03,
-    ),
-    border-subtle-selected: (
-      tokens.$border-subtle-selected-01,
-      tokens.$border-subtle-selected-02,
-      tokens.$border-subtle-selected-03,
-    ),
-    border-strong: (
-      tokens.$border-strong-01,
-      tokens.$border-strong-02,
-      tokens.$border-strong-03,
-    ),
-  ),
-);
 
 // Layer sets
 $layer: custom-property.get-var('layer');

package/scss/_zone.scss

@@ -10,6 +10,8 @@
 @use './config';
 @use './themes';
 @use './theme';
+// Inline themes depend on layer styles to property reset the layer level
+@use './layer';
 @use './utilities/custom-property';
 
 /// Specify a Map of zones where the key will be used as part of the selector

package/scss/components/button/_tokens.scss

@@ -330,11 +330,11 @@ $button-disabled: (
     ),
     (
       theme: themes.$g90,
-      value: #6f6f6f,
+      value: rgba(141, 141, 141, 0.3),
     ),
     (
       theme: themes.$g100,
-      value: #525252,
+      value: rgba(141, 141, 141, 0.3),
     ),
   ),
 ) !default;

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

@@ -141,8 +141,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }
 

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

@@ -743,8 +743,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--active:hover,
   .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
-    border-bottom-color: $layer-selected;
-    background-color: $layer-selected;
+    border-bottom-color: $layer-selected-hover;
+    background-color: $layer-selected-hover;
   }
 
   .#{$prefix}--list-box__menu-item--active

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

@@ -121,15 +121,15 @@ $radio-border-width: 1px !default;
     }
   }
 
-  .#{$prefix}--radio-button:button-disabled + .#{$prefix}--radio-button__label {
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
     color: $button-disabled;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:button-disabled
+  .#{$prefix}--radio-button:disabled
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:button-disabled:checked
+  .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
     border-color: $border-disabled;

package/scss/components/tabs/_tabs.scss

@@ -33,7 +33,6 @@
 /// @access public
 /// @group tabs
 @mixin tabs {
-  // TODO: remove namespace and suffix in next major release
   .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-short-01');
@@ -44,7 +43,7 @@
     min-height: rem(40px);
     color: $text-primary;
 
-    &.#{$prefix}--tabs--container {
+    &.#{$prefix}--tabs--contained {
       min-height: rem(48px);
     }
 
@@ -95,11 +94,11 @@
       background-image: linear-gradient(to right, transparent, $layer);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
       background-image: linear-gradient(to left, transparent, $layer-accent);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
       background-image: linear-gradient(to right, transparent, $layer-accent);
     }
 
@@ -124,7 +123,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
             to left,
@@ -133,7 +132,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--right {
           background-image: linear-gradient(
             to right,
@@ -162,7 +161,7 @@
       display: none;
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
       width: $spacing-09;
       margin: 0;
       background-color: $layer-accent;
@@ -189,11 +188,11 @@
       margin-left: rem(1px);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
       background-color: $layer-accent;
     }
 
-    &.#{$prefix}--tabs--container
+    &.#{$prefix}--tabs--contained
       .#{$prefix}--tabs__nav-item
       + .#{$prefix}--tabs__nav-item {
       margin-left: 0;
@@ -201,87 +200,12 @@
       box-shadow: rem(-1px) 0 0 0 $border-strong;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item
-      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected
-      + .#{$prefix}--tabs__nav-item {
-      box-shadow: none;
-    }
-
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
       transition: color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
 
-    //-----------------------------
-    // Item Hover
-    //-----------------------------
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover {
-      background-color: $layer-selected-hover;
-    }
-
-    //---------------------------------------------
-    // Item Disabled
-    //---------------------------------------------
-    .#{$prefix}--tabs__nav-item--disabled,
-    .#{$prefix}--tabs__nav-item--disabled:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-      outline: none;
-    }
-
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
-      background-color: button.$button-disabled;
-    }
-
-    //-----------------------------
-    // Item Selected
-    //-----------------------------
-    .#{$prefix}--tabs__nav-item--selected {
-      transition: color $duration-fast-01 motion(standard, productive);
-    }
-
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link,
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus,
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active {
-      @include type-style('productive-heading-01');
-
-      border-bottom: 2px solid $border-interactive;
-      color: $text-primary;
-    }
-
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover {
-      background-color: $layer;
-
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        box-shadow: none;
-      }
-    }
-
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected
-      .#{$prefix}--tabs__nav-link {
-      // Draws the border without affecting the inner-content
-      box-shadow: inset 0 2px 0 0 $border-interactive;
-      // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-    }
-
-    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected:hover {
-      background-color: $background;
-    }
-
     //-----------------------------
     // Link
     //-----------------------------
@@ -295,10 +219,10 @@
       }
 
       overflow: hidden;
+      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;
-      text-align: left;
       text-decoration: none;
       text-overflow: ellipsis;
       transition: border $duration-fast-01 motion(standard, productive),
@@ -311,12 +235,70 @@
       }
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
       height: rem(48px);
       padding: $spacing-03 $spacing-05;
       border-bottom: 0;
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      text-align: left;
+    }
+
+    //-----------------------------
+    // Item Hover
+    //-----------------------------
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item:hover {
+      background-color: $layer-selected-hover;
+    }
+
+    //-----------------------------
+    // Item Selected
+    //-----------------------------
+    .#{$prefix}--tabs__nav-item--selected {
+      border-bottom: 2px solid $border-interactive;
+      transition: color $duration-fast-01 motion(standard, productive);
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected
+      + .#{$prefix}--tabs__nav-item {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 2px 0 0 $border-interactive;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected:focus
+      .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-item--selected:active
+      .#{$prefix}--tabs__nav-link:active {
+      @include type-style('productive-heading-01');
+
+      color: $text-primary;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $layer;
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
+        box-shadow: none;
+      }
+    }
+
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $background;
     }
 
     //-----------------------------
@@ -327,31 +309,35 @@
       color: $text-primary;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item
-      .#{$prefix}--tabs__nav-link {
-      border-bottom: none;
-    }
-
     //-----------------------------
-    //  Link Disabled
+    //  Item Disabled
     //-----------------------------
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
+
+    .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: $tab-underline-disabled;
+      background-color: transparent;
       color: $tab-text-disabled;
+      outline: none;
     }
 
-    .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item--disabled:hover {
       border-bottom: $tab-underline-disabled;
       color: $tab-text-disabled;
       cursor: not-allowed;
-      pointer-events: none;
     }
 
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active {
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+      background-color: button.$button-disabled;
+    }
+
+    .#{$prefix}--tabs__nav-item--disabled:focus,
+    .#{$prefix}--tabs__nav-item--disabled:active {
       border-bottom: $tab-underline-disabled;
       outline: none;
+      pointer-events: none;
     }
 
     .#{$prefix}--tabs--light
@@ -375,9 +361,7 @@
       border-bottom-color: $border-subtle;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--disabled
-      .#{$prefix}--tabs__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: none;
       color: $text-on-color-disabled;
     }
@@ -401,7 +385,7 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--container)
+  .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained)
     .#{$prefix}--tabs__nav-link {
     border-bottom: 2px solid $skeleton-element;
   }
@@ -429,7 +413,6 @@
     @include high-contrast-mode('focus');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--tabs
     .#{$prefix}--tabs__nav-item--disabled
     .#{$prefix}--tabs__nav-link {