@carbon/elements 10.34.0 → 10.36.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.34.0",
+  "version": "10.36.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.25.0",
-    "@carbon/grid": "^10.27.0",
-    "@carbon/icons": "^10.32.0",
+    "@carbon/colors": "^10.26.0",
+    "@carbon/grid": "^10.29.0",
+    "@carbon/icons": "^10.33.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.24.0",
-    "@carbon/motion": "^10.18.0",
-    "@carbon/themes": "^10.34.0",
-    "@carbon/type": "^10.28.0"
+    "@carbon/layout": "^10.25.0",
+    "@carbon/motion": "^10.19.0",
+    "@carbon/themes": "^10.36.0",
+    "@carbon/type": "^10.29.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.23.0",
+    "@carbon/cli": "^10.24.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "b00113e8d4cb273a80d9c71f12b741ae6ac360a6"
+  "gitHead": "72c0172ef78d89cd5ab53c6af211dda682275c2f"
 }

package/scss/grid/modules/_css-grid.scss

@@ -11,6 +11,7 @@
 
 @mixin css-grid() {
   display: grid;
+  max-width: 99rem;
   padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   margin-right: auto;
@@ -35,6 +36,8 @@
   --cds-grid-columns: 4;
   --cds-grid-column-size: 1fr;
   --cds-grid-gutter: 2rem;
+  // Used to configure appropriate margins for condensed subgrids inside wide grids
+  --cds-grid-gutter-wide: 2rem;
   --cds-grid-hang: 1rem;
   --cds-grid-margin: 0;
 
@@ -67,20 +70,8 @@
   @include subgrid();
 }
 
-.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  padding-right: 0;
-  padding-left: 0;
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  --cds-grid-gutter: 2rem;
-
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
-  margin-right: 0;
-  margin-left: 0;
+.#{$prefix}--subgrid[class*='col'] {
+  display: grid;
 }
 
 // -----------------------------------------------------------------------------
@@ -102,13 +93,17 @@
   margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
-// Narrow subgrid inside condensed
-.#{$prefix}--css-grid--condensed
+// Narrow subgrid inside wide
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
   .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
-  --cds-grid-gutter: 2rem;
+  padding: 0;
+}
 
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
+// Narrow subgrid column inside wide
+.#{$prefix}--css-grid
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
+  > [class*='col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -122,11 +117,10 @@
 }
 
 // condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc(
-    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
-  );
-  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
+  .bx--subgrid.#{$prefix}--css-grid--condensed {
+  margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
+  margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -142,6 +136,13 @@
   column-gap: var(--cds-grid-gutter);
 }
 
+// -----------------------------------------------------------------------------
+// Full width
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--full-width {
+  max-width: 100%;
+}
+
 // -----------------------------------------------------------------------------
 // Column span
 // -----------------------------------------------------------------------------
@@ -151,6 +152,7 @@
   } @else {
     --cds-grid-columns: #{$i};
 
+    display: block;
     grid-column: span $i / span $i;
   }
 }
@@ -268,7 +270,10 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    @for $i from 1 through $columns {
+    // The `grid-column-end` and `grid-column-start` properies are *not* inclusive.
+    // It starts/ends the column *at* the column, not *on* the column. We must
+    // ensure that there is one additional class available for each breakpoint.
+    @for $i from 1 through $columns + 1 {
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
@@ -348,3 +353,67 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
+
+// -----------------------------------------------------------------------------
+// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
+// -----------------------------------------------------------------------------
+
+/// 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 carbon--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 {
+      padding-top: percentage($height / $width);
+    }
+  }
+}
+
+@include carbon--aspect-ratio();

package/scss/grid/vendor/@carbon/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/scss/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/scss/themes/generated/_mixins.scss

@@ -107,6 +107,8 @@
   $background: map-get($theme, 'background') !global;
   $layer: map-get($theme, 'layer') !global;
   $layer-accent: map-get($theme, 'layer-accent') !global;
+  $layer-accent-hover: map-get($theme, 'layer-accent-hover') !global;
+  $layer-accent-active: map-get($theme, 'layer-accent-active') !global;
   $field: map-get($theme, 'field') !global;
   $background-inverse: map-get($theme, 'background-inverse') !global;
   $background-brand: map-get($theme, 'background-brand') !global;
@@ -253,9 +255,94 @@
   $container-03: map-get($theme, 'container-03') !global;
   $container-04: map-get($theme, 'container-04') !global;
   $container-05: map-get($theme, 'container-05') !global;
+  $size-xsmall: map-get($theme, 'size-xsmall') !global;
+  $size-small: map-get($theme, 'size-small') !global;
+  $size-medium: map-get($theme, 'size-medium') !global;
+  $size-large: map-get($theme, 'size-large') !global;
+  $size-xlarge: map-get($theme, 'size-xlarge') !global;
+  $size-2XLarge: map-get($theme, 'size-2XLarge') !global;
   $icon-size-01: map-get($theme, 'icon-size-01') !global;
   $icon-size-02: map-get($theme, 'icon-size-02') !global;
 
+  @if global-variable-exists('feature-flags') and
+    map-get($feature-flags, 'enable-v11-release') !=
+    true
+  {
+    $background: $ui-background !global;
+    $layer: $ui-01 !global;
+    $layer-accent: $ui-03 !global;
+    $field: $field-01 !global;
+    $background-inverse: $inverse-02 !global;
+    $background-brand: $interactive-01 !global;
+    $interactive: $interactive-04 !global;
+    $border-subtle: $ui-03 !global;
+    $border-strong: $ui-04 !global;
+    $border-inverse: $ui-05 !global;
+    $border-interactive: $interactive-04 !global;
+    $text-primary: $text-01 !global;
+    $text-secondary: $text-02 !global;
+    $text-placeholder: $text-03 !global;
+    $text-helper: $text-05 !global;
+    $text-on-color: $text-04 !global;
+    $text-inverse: $inverse-01 !global;
+    $link-primary: $link-01 !global;
+    $link-secondary: $link-02 !global;
+    $link-visited: $visited-link !global;
+    $link-inverse: $inverse-link !global;
+    $icon-primary: $icon-01 !global;
+    $icon-secondary: $icon-02 !global;
+    $icon-on-color: $icon-03 !global;
+    $icon-inverse: $inverse-01 !global;
+    $support-error: $support-01 !global;
+    $support-success: $support-02 !global;
+    $support-warning: $support-03 !global;
+    $support-info: $support-04 !global;
+    $support-error-inverse: $inverse-support-01 !global;
+    $support-success-inverse: $inverse-support-02 !global;
+    $support-warning-inverse: $inverse-support-03 !global;
+    $support-info-inverse: $inverse-support-04 !global;
+    $overlay: $overlay-01 !global;
+    $toggle-off: $ui-04 !global;
+    $button-primary: $interactive-01 !global;
+    $button-secondary: $interactive-02 !global;
+    $button-tertiary: $interactive-03 !global;
+    $button-danger-primary: $danger-01 !global;
+    $button-danger-secondary: $danger-02 !global;
+    $background-active: $active-ui !global;
+    $layer-active: $active-ui !global;
+    $button-danger-active: $active-danger !global;
+    $button-primary-active: $active-primary !global;
+    $button-secondary-active: $active-secondary !global;
+    $button-tertiary-active: $active-tertiary !global;
+    $focus-inset: $inverse-01 !global;
+    $focus-inverse: $inverse-focus-ui !global;
+    $background-hover: $hover-ui !global;
+    $layer-hover: $hover-ui !global;
+    $field-hover: $hover-ui !global;
+    $background-inverse-hover: $inverse-hover-ui !global;
+    $link-primary-hover: $hover-primary-text !global;
+    $button-danger-hover: $hover-danger !global;
+    $button-primary-hover: $hover-primary !global;
+    $button-secondary-hover: $hover-secondary !global;
+    $button-tertiary-hover: $hover-tertiary !global;
+    $background-selected: $selected-ui !global;
+    $background-selected-hover: $hover-selected-ui !global;
+    $layer-selected: $selected-ui !global;
+    $layer-selected-hover: $hover-selected-ui !global;
+    $layer-selected-inverse: $ui-05 !global;
+    $border-subtle-selected: $active-ui !global;
+    $layer-disabled: $disabled-01 !global;
+    $field-disabled: $disabled-01 !global;
+    $border-disabled: $disabled-01 !global;
+    $text-disabled: $disabled-02 !global;
+    $button-disabled: $disabled-02 !global;
+    $icon-disabled: $disabled-02 !global;
+    $text-on-color-disabled: $disabled-03 !global;
+    $icon-on-color-disabled: $disabled-03 !global;
+    $layer-selected-disabled: $disabled-03 !global;
+    $skeleton-background: $skeleton-01 !global;
+    $skeleton-element: $skeleton-02 !global;
+  }
   @if global-variable-exists('feature-flags') and
     map-get($feature-flags, 'enable-css-custom-properties')
   {
@@ -535,6 +622,14 @@
       --#{$custom-property-prefix}-layer-accent,
       map-get($theme, 'layer-accent')
     ) !global;
+    $layer-accent-hover: var(
+      --#{$custom-property-prefix}-layer-accent-hover,
+      map-get($theme, 'layer-accent-hover')
+    ) !global;
+    $layer-accent-active: var(
+      --#{$custom-property-prefix}-layer-accent-active,
+      map-get($theme, 'layer-accent-active')
+    ) !global;
     $field: var(
       --#{$custom-property-prefix}-field,
       map-get($theme, 'field')
@@ -959,6 +1054,30 @@
       --#{$custom-property-prefix}-container-05,
       map-get($theme, 'container-05')
     ) !global;
+    $size-xsmall: var(
+      --#{$custom-property-prefix}-size-xsmall,
+      map-get($theme, 'size-xsmall')
+    ) !global;
+    $size-small: var(
+      --#{$custom-property-prefix}-size-small,
+      map-get($theme, 'size-small')
+    ) !global;
+    $size-medium: var(
+      --#{$custom-property-prefix}-size-medium,
+      map-get($theme, 'size-medium')
+    ) !global;
+    $size-large: var(
+      --#{$custom-property-prefix}-size-large,
+      map-get($theme, 'size-large')
+    ) !global;
+    $size-xlarge: var(
+      --#{$custom-property-prefix}-size-xlarge,
+      map-get($theme, 'size-xlarge')
+    ) !global;
+    $size-2XLarge: var(
+      --#{$custom-property-prefix}-size-2XLarge,
+      map-get($theme, 'size-2XLarge')
+    ) !global;
     $icon-size-01: var(
       --#{$custom-property-prefix}-icon-size-01,
       map-get($theme, 'icon-size-01')
@@ -1592,6 +1711,32 @@
       @include custom-property('layer-accent', map-get($theme, 'layer-accent'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-accent-hover',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-accent-hover',
+        map-get($theme, 'layer-accent-hover')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'layer-accent-active',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'layer-accent-active',
+        map-get($theme, 'layer-accent-active')
+      );
+    }
+
     @if should-emit($theme, $parent-carbon-theme, 'field', $emit-difference) {
       @include custom-property('field', map-get($theme, 'field'));
     }
@@ -3125,6 +3270,66 @@
       @include custom-property('container-05', map-get($theme, 'container-05'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-xsmall',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-xsmall', map-get($theme, 'size-xsmall'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-small',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-small', map-get($theme, 'size-small'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-medium',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-medium', map-get($theme, 'size-medium'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-large',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-large', map-get($theme, 'size-large'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-xlarge',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-xlarge', map-get($theme, 'size-xlarge'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'size-2XLarge',
+      $emit-difference
+    )
+    {
+      @include custom-property('size-2XLarge', map-get($theme, 'size-2XLarge'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -76,6 +76,8 @@ $carbon--theme--white: (
   background: #ffffff,
   layer: #f4f4f4,
   layer-accent: #e0e0e0,
+  layer-accent-active: #a8a8a8,
+  layer-accent-hover: #d1d1d1,
   field: #f4f4f4,
   background-inverse: #393939,
   background-brand: #0f62fe,
@@ -586,6 +588,12 @@ $carbon--theme--white: (
   container-03: 2.5rem,
   container-04: 3rem,
   container-05: 4rem,
+  size-xsmall: 1.5rem,
+  size-small: 2rem,
+  size-medium: 2.5rem,
+  size-large: 3rem,
+  size-xlarge: 4rem,
+  size-2XLarge: 5rem,
   icon-size-01: 1rem,
   icon-size-02: 1.25rem,
 ) !default;
@@ -622,6 +630,8 @@ $carbon--theme--g80: map-merge(
     background: #393939,
     layer: #525252,
     layer-accent: #6f6f6f,
+    layer-accent-active: #525252,
+    layer-accent-hover: #5e5e5e,
     field: #525252,
     background-inverse: #f4f4f4,
     interactive: #78a9ff,
@@ -811,6 +821,8 @@ $carbon--theme--g90: map-merge(
     background: #262626,
     layer: #393939,
     layer-accent: #525252,
+    layer-accent-active: #8d8d8d,
+    layer-accent-hover: #636363,
     field: #393939,
     background-inverse: #f4f4f4,
     interactive: #4589ff,
@@ -941,6 +953,8 @@ $carbon--theme--g100: map-merge(
     background: #161616,
     layer: #262626,
     layer-accent: #393939,
+    layer-accent-active: #6f6f6f,
+    layer-accent-hover: #474747,
     field: #262626,
     background-inverse: #f4f4f4,
     interactive: #4589ff,
@@ -1074,6 +1088,7 @@ $carbon--theme--v9: map-merge(
     background: #f4f7fb,
     layer: #ffffff,
     layer-accent: #dfe3e6,
+    layer-accent-hover: #ced4d9,
     field: #ffffff,
     background-inverse: #272d33,
     background-brand: #3d70b2,
@@ -1565,6 +1580,18 @@ $carbon--theme: (
       $layer-accent,
       map-get($carbon--theme--white, 'layer-accent')
     ),
+  layer-accent-hover:
+    if(
+      global-variable-exists('layer-accent-hover'),
+      $layer-accent-hover,
+      map-get($carbon--theme--white, 'layer-accent-hover')
+    ),
+  layer-accent-active:
+    if(
+      global-variable-exists('layer-accent-active'),
+      $layer-accent-active,
+      map-get($carbon--theme--white, 'layer-accent-active')
+    ),
   field:
     if(
       global-variable-exists('field'),
@@ -2405,6 +2432,42 @@ $carbon--theme: (
       $container-05,
       map-get($carbon--theme--white, 'container-05')
     ),
+  size-xsmall:
+    if(
+      global-variable-exists('size-xsmall'),
+      $size-xsmall,
+      map-get($carbon--theme--white, 'size-xsmall')
+    ),
+  size-small:
+    if(
+      global-variable-exists('size-small'),
+      $size-small,
+      map-get($carbon--theme--white, 'size-small')
+    ),
+  size-medium:
+    if(
+      global-variable-exists('size-medium'),
+      $size-medium,
+      map-get($carbon--theme--white, 'size-medium')
+    ),
+  size-large:
+    if(
+      global-variable-exists('size-large'),
+      $size-large,
+      map-get($carbon--theme--white, 'size-large')
+    ),
+  size-xlarge:
+    if(
+      global-variable-exists('size-xlarge'),
+      $size-xlarge,
+      map-get($carbon--theme--white, 'size-xlarge')
+    ),
+  size-2XLarge:
+    if(
+      global-variable-exists('size-2XLarge'),
+      $size-2XLarge,
+      map-get($carbon--theme--white, 'size-2XLarge')
+    ),
   icon-size-01:
     if(
       global-variable-exists('icon-size-01'),

package/scss/themes/generated/_tokens.scss

@@ -750,6 +750,26 @@ $layer-accent: if(
   #e0e0e0
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$layer-accent-hover: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'layer-accent-hover'),
+  map-get($carbon--theme, 'layer-accent-hover'),
+  #d1d1d1
+) !default;
+
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$layer-accent-active: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'layer-accent-active'),
+  map-get($carbon--theme, 'layer-accent-active'),
+  #a8a8a8
+) !default;
+
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes
@@ -2530,6 +2550,66 @@ $container-05: if(
   4rem
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-xsmall: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-xsmall'),
+  map-get($carbon--theme, 'size-xsmall'),
+  1.5rem
+) !default;
+
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-small: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-small'),
+  map-get($carbon--theme, 'size-small'),
+  2rem
+) !default;
+
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-medium: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-medium'),
+  map-get($carbon--theme, 'size-medium'),
+  2.5rem
+) !default;
+
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-large: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-large'),
+  map-get($carbon--theme, 'size-large'),
+  3rem
+) !default;
+
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-xlarge: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-xlarge'),
+  map-get($carbon--theme, 'size-xlarge'),
+  4rem
+) !default;
+
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$size-2XLarge: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'size-2XLarge'),
+  map-get($carbon--theme, 'size-2XLarge'),
+  5rem
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes

package/scss/themes/modules/_tokens.scss

@@ -0,0 +1,8 @@
+//
+// 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 'generated/tokens';

package/scss/themes/modules/generated/_themes.scss

@@ -85,6 +85,8 @@ $white: utilities.merge(
     background: #ffffff,
     layer: #f4f4f4,
     layer-accent: #e0e0e0,
+    layer-accent-active: #a8a8a8,
+    layer-accent-hover: #d1d1d1,
     field: #f4f4f4,
     background-inverse: #393939,
     background-brand: #0f62fe,
@@ -197,6 +199,8 @@ $g80: map.merge(
     background: #393939,
     layer: #525252,
     layer-accent: #6f6f6f,
+    layer-accent-active: #525252,
+    layer-accent-hover: #5e5e5e,
     field: #525252,
     background-inverse: #f4f4f4,
     interactive: #78a9ff,
@@ -386,6 +390,8 @@ $g90: map.merge(
     background: #262626,
     layer: #393939,
     layer-accent: #525252,
+    layer-accent-active: #8d8d8d,
+    layer-accent-hover: #636363,
     field: #393939,
     background-inverse: #f4f4f4,
     interactive: #4589ff,
@@ -516,6 +522,8 @@ $g100: map.merge(
     background: #161616,
     layer: #262626,
     layer-accent: #393939,
+    layer-accent-active: #6f6f6f,
+    layer-accent-hover: #474747,
     field: #262626,
     background-inverse: #f4f4f4,
     interactive: #4589ff,

package/scss/themes/modules/generated/_tokens.scss

@@ -0,0 +1,227 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$interactive-01: var(--cds-interactive-01);
+$interactive-02: var(--cds-interactive-02);
+$interactive-03: var(--cds-interactive-03);
+$interactive-04: var(--cds-interactive-04);
+$ui-background: var(--cds-ui-background);
+$ui-01: var(--cds-ui-01);
+$ui-02: var(--cds-ui-02);
+$ui-03: var(--cds-ui-03);
+$ui-04: var(--cds-ui-04);
+$ui-05: var(--cds-ui-05);
+$text-01: var(--cds-text-01);
+$text-02: var(--cds-text-02);
+$text-03: var(--cds-text-03);
+$text-04: var(--cds-text-04);
+$text-05: var(--cds-text-05);
+$text-error: var(--cds-text-error);
+$icon-01: var(--cds-icon-01);
+$icon-02: var(--cds-icon-02);
+$icon-03: var(--cds-icon-03);
+$link-01: var(--cds-link-01);
+$link-02: var(--cds-link-02);
+$inverse-link: var(--cds-inverse-link);
+$field-01: var(--cds-field-01);
+$field-02: var(--cds-field-02);
+$inverse-01: var(--cds-inverse-01);
+$inverse-02: var(--cds-inverse-02);
+$support-01: var(--cds-support-01);
+$support-02: var(--cds-support-02);
+$support-03: var(--cds-support-03);
+$support-04: var(--cds-support-04);
+$inverse-support-01: var(--cds-inverse-support-01);
+$inverse-support-02: var(--cds-inverse-support-02);
+$inverse-support-03: var(--cds-inverse-support-03);
+$inverse-support-04: var(--cds-inverse-support-04);
+$overlay-01: var(--cds-overlay-01);
+$danger-01: var(--cds-danger-01);
+$danger-02: var(--cds-danger-02);
+$focus: var(--cds-focus);
+$inverse-focus-ui: var(--cds-inverse-focus-ui);
+$hover-primary: var(--cds-hover-primary);
+$active-primary: var(--cds-active-primary);
+$hover-primary-text: var(--cds-hover-primary-text);
+$hover-secondary: var(--cds-hover-secondary);
+$active-secondary: var(--cds-active-secondary);
+$hover-tertiary: var(--cds-hover-tertiary);
+$active-tertiary: var(--cds-active-tertiary);
+$hover-ui: var(--cds-hover-ui);
+$hover-light-ui: var(--cds-hover-light-ui);
+$hover-selected-ui: var(--cds-hover-selected-ui);
+$active-ui: var(--cds-active-ui);
+$active-light-ui: var(--cds-active-light-ui);
+$selected-ui: var(--cds-selected-ui);
+$selected-light-ui: var(--cds-selected-light-ui);
+$inverse-hover-ui: var(--cds-inverse-hover-ui);
+$hover-danger: var(--cds-hover-danger);
+$active-danger: var(--cds-active-danger);
+$hover-row: var(--cds-hover-row);
+$visited-link: var(--cds-visited-link);
+$disabled-01: var(--cds-disabled-01);
+$disabled-02: var(--cds-disabled-02);
+$disabled-03: var(--cds-disabled-03);
+$highlight: var(--cds-highlight);
+$decorative-01: var(--cds-decorative-01);
+$button-separator: var(--cds-button-separator);
+$skeleton-01: var(--cds-skeleton-01);
+$skeleton-02: var(--cds-skeleton-02);
+$background: var(--cds-background);
+$layer: var(--cds-layer);
+$layer-accent: var(--cds-layer-accent);
+$layer-accent-hover: var(--cds-layer-accent-hover);
+$layer-accent-active: var(--cds-layer-accent-active);
+$field: var(--cds-field);
+$background-inverse: var(--cds-background-inverse);
+$background-brand: var(--cds-background-brand);
+$interactive: var(--cds-interactive);
+$border-subtle: var(--cds-border-subtle);
+$border-strong: var(--cds-border-strong);
+$border-inverse: var(--cds-border-inverse);
+$border-interactive: var(--cds-border-interactive);
+$text-primary: var(--cds-text-primary);
+$text-secondary: var(--cds-text-secondary);
+$text-placeholder: var(--cds-text-placeholder);
+$text-helper: var(--cds-text-helper);
+$text-on-color: var(--cds-text-on-color);
+$text-inverse: var(--cds-text-inverse);
+$link-primary: var(--cds-link-primary);
+$link-secondary: var(--cds-link-secondary);
+$link-visited: var(--cds-link-visited);
+$link-inverse: var(--cds-link-inverse);
+$icon-primary: var(--cds-icon-primary);
+$icon-secondary: var(--cds-icon-secondary);
+$icon-on-color: var(--cds-icon-on-color);
+$icon-inverse: var(--cds-icon-inverse);
+$support-error: var(--cds-support-error);
+$support-success: var(--cds-support-success);
+$support-warning: var(--cds-support-warning);
+$support-info: var(--cds-support-info);
+$support-error-inverse: var(--cds-support-error-inverse);
+$support-success-inverse: var(--cds-support-success-inverse);
+$support-warning-inverse: var(--cds-support-warning-inverse);
+$support-info-inverse: var(--cds-support-info-inverse);
+$overlay: var(--cds-overlay);
+$toggle-off: var(--cds-toggle-off);
+$button-primary: var(--cds-button-primary);
+$button-secondary: var(--cds-button-secondary);
+$button-tertiary: var(--cds-button-tertiary);
+$button-danger-primary: var(--cds-button-danger-primary);
+$button-danger-secondary: var(--cds-button-danger-secondary);
+$background-active: var(--cds-background-active);
+$layer-active: var(--cds-layer-active);
+$button-danger-active: var(--cds-button-danger-active);
+$button-primary-active: var(--cds-button-primary-active);
+$button-secondary-active: var(--cds-button-secondary-active);
+$button-tertiary-active: var(--cds-button-tertiary-active);
+$focus-inset: var(--cds-focus-inset);
+$focus-inverse: var(--cds-focus-inverse);
+$background-hover: var(--cds-background-hover);
+$layer-hover: var(--cds-layer-hover);
+$field-hover: var(--cds-field-hover);
+$background-inverse-hover: var(--cds-background-inverse-hover);
+$link-primary-hover: var(--cds-link-primary-hover);
+$button-danger-hover: var(--cds-button-danger-hover);
+$button-primary-hover: var(--cds-button-primary-hover);
+$button-secondary-hover: var(--cds-button-secondary-hover);
+$button-tertiary-hover: var(--cds-button-tertiary-hover);
+$background-selected: var(--cds-background-selected);
+$background-selected-hover: var(--cds-background-selected-hover);
+$layer-selected: var(--cds-layer-selected);
+$layer-selected-hover: var(--cds-layer-selected-hover);
+$layer-selected-inverse: var(--cds-layer-selected-inverse);
+$border-subtle-selected: var(--cds-border-subtle-selected);
+$layer-disabled: var(--cds-layer-disabled);
+$field-disabled: var(--cds-field-disabled);
+$border-disabled: var(--cds-border-disabled);
+$text-disabled: var(--cds-text-disabled);
+$button-disabled: var(--cds-button-disabled);
+$icon-disabled: var(--cds-icon-disabled);
+$text-on-color-disabled: var(--cds-text-on-color-disabled);
+$icon-on-color-disabled: var(--cds-icon-on-color-disabled);
+$layer-selected-disabled: var(--cds-layer-selected-disabled);
+$skeleton-background: var(--cds-skeleton-background);
+$skeleton-element: var(--cds-skeleton-element);
+$brand-01: var(--cds-brand-01);
+$brand-02: var(--cds-brand-02);
+$brand-03: var(--cds-brand-03);
+$active-01: var(--cds-active-01);
+$hover-field: var(--cds-hover-field);
+$danger: var(--cds-danger);
+$caption-01: var(--cds-caption-01);
+$caption-02: var(--cds-caption-02);
+$label-01: var(--cds-label-01);
+$label-02: var(--cds-label-02);
+$helper-text-01: var(--cds-helper-text-01);
+$helper-text-02: var(--cds-helper-text-02);
+$body-short-01: var(--cds-body-short-01);
+$body-long-01: var(--cds-body-long-01);
+$body-short-02: var(--cds-body-short-02);
+$body-long-02: var(--cds-body-long-02);
+$code-01: var(--cds-code-01);
+$code-02: var(--cds-code-02);
+$heading-01: var(--cds-heading-01);
+$productive-heading-01: var(--cds-productive-heading-01);
+$heading-02: var(--cds-heading-02);
+$productive-heading-02: var(--cds-productive-heading-02);
+$productive-heading-03: var(--cds-productive-heading-03);
+$productive-heading-04: var(--cds-productive-heading-04);
+$productive-heading-05: var(--cds-productive-heading-05);
+$productive-heading-06: var(--cds-productive-heading-06);
+$productive-heading-07: var(--cds-productive-heading-07);
+$expressive-heading-01: var(--cds-expressive-heading-01);
+$expressive-heading-02: var(--cds-expressive-heading-02);
+$expressive-heading-03: var(--cds-expressive-heading-03);
+$expressive-heading-04: var(--cds-expressive-heading-04);
+$expressive-heading-05: var(--cds-expressive-heading-05);
+$expressive-heading-06: var(--cds-expressive-heading-06);
+$expressive-paragraph-01: var(--cds-expressive-paragraph-01);
+$quotation-01: var(--cds-quotation-01);
+$quotation-02: var(--cds-quotation-02);
+$display-01: var(--cds-display-01);
+$display-02: var(--cds-display-02);
+$display-03: var(--cds-display-03);
+$display-04: var(--cds-display-04);
+$spacing-01: var(--cds-spacing-01);
+$spacing-02: var(--cds-spacing-02);
+$spacing-03: var(--cds-spacing-03);
+$spacing-04: var(--cds-spacing-04);
+$spacing-05: var(--cds-spacing-05);
+$spacing-06: var(--cds-spacing-06);
+$spacing-07: var(--cds-spacing-07);
+$spacing-08: var(--cds-spacing-08);
+$spacing-09: var(--cds-spacing-09);
+$spacing-10: var(--cds-spacing-10);
+$spacing-11: var(--cds-spacing-11);
+$spacing-12: var(--cds-spacing-12);
+$spacing-13: var(--cds-spacing-13);
+$fluid-spacing-01: var(--cds-fluid-spacing-01);
+$fluid-spacing-02: var(--cds-fluid-spacing-02);
+$fluid-spacing-03: var(--cds-fluid-spacing-03);
+$fluid-spacing-04: var(--cds-fluid-spacing-04);
+$layout-01: var(--cds-layout-01);
+$layout-02: var(--cds-layout-02);
+$layout-03: var(--cds-layout-03);
+$layout-04: var(--cds-layout-04);
+$layout-05: var(--cds-layout-05);
+$layout-06: var(--cds-layout-06);
+$layout-07: var(--cds-layout-07);
+$container-01: var(--cds-container-01);
+$container-02: var(--cds-container-02);
+$container-03: var(--cds-container-03);
+$container-04: var(--cds-container-04);
+$container-05: var(--cds-container-05);
+$size-xsmall: var(--cds-size-xsmall);
+$size-small: var(--cds-size-small);
+$size-medium: var(--cds-size-medium);
+$size-large: var(--cds-size-large);
+$size-xlarge: var(--cds-size-xlarge);
+$size-2XLarge: var(--cds-size-2XLarge);
+$icon-size-01: var(--cds-icon-size-01);
+$icon-size-02: var(--cds-icon-size-02);

package/scss/type/_inlined/_styles.scss

@@ -729,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
 
   // If $fluid is set to true and the token has breakpoints defined for fluid
   // styles, delegate to the fluid-type helper for the given token
+  // Otherwise remove token breakpoints
   @if $fluid == true and map-has-key($token, 'breakpoints') {
     @include fluid-type($token, $breakpoints);
   } @else {
     @if global-variable-exists('feature-flags') and
       map-get($feature-flags, 'enable-css-custom-properties')
     {
-      @include custom-properties($name, $token);
+      @include custom-properties($name, map-remove($token, 'breakpoints'));
     } @else {
       // Otherwise, we just include all the property declarations directly on the
       // selector

package/scss/type/_styles.scss

@@ -729,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
 
   // If $fluid is set to true and the token has breakpoints defined for fluid
   // styles, delegate to the fluid-type helper for the given token
+  // Otherwise remove token breakpoints
   @if $fluid == true and map-has-key($token, 'breakpoints') {
     @include fluid-type($token, $breakpoints);
   } @else {
     @if global-variable-exists('feature-flags') and
       map-get($feature-flags, 'enable-css-custom-properties')
     {
-      @include custom-properties($name, $token);
+      @include custom-properties($name, map-remove($token, 'breakpoints'));
     } @else {
       // Otherwise, we just include all the property declarations directly on the
       // selector

package/scss/type/vendor/@carbon/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -209,6 +209,8 @@ Array [
   "label02",
   "layer",
   "layerAccent",
+  "layerAccentActive",
+  "layerAccentHover",
   "layerActive",
   "layerDisabled",
   "layerHover",
@@ -292,6 +294,12 @@ Array [
   "scale",
   "selectedLightUI",
   "selectedUI",
+  "size2XLarge",
+  "sizeLarge",
+  "sizeMedium",
+  "sizeSmall",
+  "sizeXLarge",
+  "sizeXSmall",
   "skeleton01",
   "skeleton02",
   "skeletonBackground",