@carbon/themes 10.34.0-rc.0 → 10.36.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;
@@ -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/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,
@@ -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/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}
@@ -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/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,