@carbon/themes 10.33.0 → 10.35.0

package/scss/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;
@@ -191,8 +193,11 @@
   $hover-field: map-get($theme, 'hover-field') !global;
   $danger: map-get($theme, 'danger') !global;
   $caption-01: map-get($theme, 'caption-01') !global;
+  $caption-02: map-get($theme, 'caption-02') !global;
   $label-01: map-get($theme, 'label-01') !global;
+  $label-02: map-get($theme, 'label-02') !global;
   $helper-text-01: map-get($theme, 'helper-text-01') !global;
+  $helper-text-02: map-get($theme, 'helper-text-02') !global;
   $body-short-01: map-get($theme, 'body-short-01') !global;
   $body-long-01: map-get($theme, 'body-long-01') !global;
   $body-short-02: map-get($theme, 'body-short-02') !global;
@@ -250,6 +255,12 @@
   $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;
 
@@ -532,6 +543,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')
@@ -956,6 +975,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')
@@ -1589,6 +1632,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'));
     }
@@ -2493,11 +2562,26 @@
       @include custom-property('caption-01', map-get($theme, 'caption-01'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'caption-02',
+      $emit-difference
+    )
+    {
+      @include custom-property('caption-02', map-get($theme, 'caption-02'));
+    }
+
     @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
     {
       @include custom-property('label-01', map-get($theme, 'label-01'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'label-02', $emit-difference)
+    {
+      @include custom-property('label-02', map-get($theme, 'label-02'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -2511,6 +2595,19 @@
       );
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'helper-text-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'helper-text-02',
+        map-get($theme, 'helper-text-02')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -3094,6 +3191,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/generated/_themes.scss

@@ -34,7 +34,7 @@ $carbon--theme--white: (
   inverse-01: #ffffff,
   inverse-02: #393939,
   support-01: #da1e28,
-  support-02: #24a148,
+  support-02: #198038,
   support-03: #f1c21b,
   support-04: #0043ce,
   inverse-support-01: #fa4d56,
@@ -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,
@@ -99,7 +101,7 @@ $carbon--theme--white: (
   icon-on-color: #ffffff,
   icon-inverse: #ffffff,
   support-error: #da1e28,
-  support-success: #24a148,
+  support-success: #198038,
   support-warning: #f1c21b,
   support-info: #0043ce,
   support-error-inverse: #fa4d56,
@@ -159,17 +161,34 @@ $carbon--theme--white: (
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  caption-02: (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   label-01: (
     font-size: 0.75rem,
     font-weight: 400,
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  label-02: (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   helper-text-01: (
     font-size: 0.75rem,
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  helper-text-02: (
+    font-size: 0.875rem,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   body-short-01: (
     font-size: 0.875rem,
     font-weight: 400,
@@ -569,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;
@@ -605,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,
@@ -794,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,
@@ -924,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,
@@ -1057,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,
@@ -1548,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'),
@@ -2016,18 +2060,36 @@ $carbon--theme: (
       $caption-01,
       map-get($carbon--theme--white, 'caption-01')
     ),
+  caption-02:
+    if(
+      global-variable-exists('caption-02'),
+      $caption-02,
+      map-get($carbon--theme--white, 'caption-02')
+    ),
   label-01:
     if(
       global-variable-exists('label-01'),
       $label-01,
       map-get($carbon--theme--white, 'label-01')
     ),
+  label-02:
+    if(
+      global-variable-exists('label-02'),
+      $label-02,
+      map-get($carbon--theme--white, 'label-02')
+    ),
   helper-text-01:
     if(
       global-variable-exists('helper-text-01'),
       $helper-text-01,
       map-get($carbon--theme--white, 'helper-text-01')
     ),
+  helper-text-02:
+    if(
+      global-variable-exists('helper-text-02'),
+      $helper-text-02,
+      map-get($carbon--theme--white, 'helper-text-02')
+    ),
   body-short-01:
     if(
       global-variable-exists('body-short-01'),
@@ -2370,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/generated/_tokens.scss

@@ -308,7 +308,7 @@ $support-02: if(
   global-variable-exists('carbon--theme') and
     map-has-key($carbon--theme, 'support-02'),
   map-get($carbon--theme, 'support-02'),
-  #24a148
+  #198038
 ) !default;
 
 /// Warning
@@ -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
@@ -987,7 +1007,7 @@ $support-success: if(
   global-variable-exists('carbon--theme') and
     map-has-key($carbon--theme, 'support-success'),
   map-get($carbon--theme, 'support-success'),
-  #24a148
+  #198038
 ) !default;
 
 /// @type {undefined}
@@ -1545,6 +1565,21 @@ $caption-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$caption-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'caption-02'),
+  map-get($carbon--theme, 'caption-02'),
+  (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes
@@ -1560,6 +1595,21 @@ $label-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$label-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'label-02'),
+  map-get($carbon--theme, 'label-02'),
+  (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes
@@ -1574,6 +1624,20 @@ $helper-text-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$helper-text-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'helper-text-02'),
+  map-get($carbon--theme, 'helper-text-02'),
+  (
+    font-size: 0.875rem,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes
@@ -2486,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/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/modules/generated/_themes.scss

@@ -43,7 +43,7 @@ $white: utilities.merge(
     inverse-01: #ffffff,
     inverse-02: #393939,
     support-01: #da1e28,
-    support-02: #24a148,
+    support-02: #198038,
     support-03: #f1c21b,
     support-04: #0043ce,
     inverse-support-01: #fa4d56,
@@ -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,
@@ -108,7 +110,7 @@ $white: utilities.merge(
     icon-on-color: #ffffff,
     icon-inverse: #ffffff,
     support-error: #da1e28,
-    support-success: #24a148,
+    support-success: #198038,
     support-warning: #f1c21b,
     support-info: #0043ce,
     support-error-inverse: #fa4d56,
@@ -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,