@carbon/themes 10.32.0 → 10.34.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.32.0",
+  "version": "10.34.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,13 +29,13 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.23.0",
-    "@carbon/layout": "^10.23.0",
-    "@carbon/type": "^10.26.0",
+    "@carbon/colors": "^10.25.0",
+    "@carbon/layout": "^10.24.0",
+    "@carbon/type": "^10.28.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.22.0",
+    "@carbon/cli": "^10.23.0",
     "@carbon/cli-reporter": "^10.4.0",
     "@carbon/scss-generator": "^10.13.0",
     "@carbon/test-utils": "^10.15.0",
@@ -46,5 +46,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "05909da32a2ee6aa2fb1965eb57871ea77c81c0e"
+  "gitHead": "b00113e8d4cb273a80d9c71f12b741ae6ac360a6"
 }

package/scss/generated/_mixins.scss

@@ -191,8 +191,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;
@@ -2493,11 +2496,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 +2529,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,

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,
@@ -99,7 +99,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 +159,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,
@@ -595,6 +612,140 @@ $carbon--theme--g10: map-merge(
   )
 ) !default;
 
+/// Carbon's g80 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$carbon--theme--g80: map-merge(
+  $carbon--theme--white,
+  (
+    background: #393939,
+    layer: #525252,
+    layer-accent: #6f6f6f,
+    field: #525252,
+    background-inverse: #f4f4f4,
+    interactive: #78a9ff,
+    border-subtle: #6f6f6f,
+    border-strong: #a8a8a8,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #a8a8a8,
+    text-error: #ffb3b8,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #ff8389,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #ff8389,
+    button-separator: #161616,
+    background-active: #525252,
+    layer-active: #6f6f6f,
+    button-secondary-active: #525252,
+    button-tertiary-active: #c6c6c6,
+    focus: #ffffff,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    highlight: #0043ce,
+    background-hover: #474747,
+    layer-hover: #636363,
+    field-hover: #636363,
+    background-inverse-hover: #e8e8e8,
+    link-primary-hover: #a6c8ff,
+    button-primary-hover: #0151e4,
+    button-secondary-hover: #5e5e5e,
+    button-tertiary-hover: #ffffff,
+    background-selected: #525252,
+    background-selected-hover: #636363,
+    layer-selected: #6f6f6f,
+    layer-selected-hover: #616161,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #8d8d8d,
+    layer-disabled: #525252,
+    field-disabled: #525252,
+    border-disabled: #525252,
+    text-disabled: #8d8d8d,
+    button-disabled: #8d8d8d,
+    icon-disabled: #8d8d8d,
+    text-on-color-disabled: #c6c6c6,
+    icon-on-color-disabled: #c6c6c6,
+    layer-selected-disabled: #c6c6c6,
+    skeleton-background: #474747,
+    skeleton-element: #6f6f6f,
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #78a9ff,
+    ui-background: #393939,
+    ui-01: #525252,
+    ui-02: #525252,
+    ui-03: #6f6f6f,
+    ui-04: #a8a8a8,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #a8a8a8,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    link-02: #a6c8ff,
+    inverse-link: #0f62fe,
+    field-01: #525252,
+    field-02: #6f6f6f,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #ff8389,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
+    inverse-focus-ui: #0f62fe,
+    hover-primary: #0151e4,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #5e5e5e,
+    active-secondary: #525252,
+    hover-tertiary: #ffffff,
+    active-tertiary: #c6c6c6,
+    hover-ui: #474747,
+    hover-light-ui: #5e5e5e,
+    active-ui: #525252,
+    active-light-ui: #8d8d8d,
+    selected-ui: #525252,
+    selected-light-ui: #8d8d8d,
+    inverse-hover-ui: #e8e8e8,
+    hover-selected-ui: #616161,
+    hover-row: #636363,
+    visited-link: #be95ff,
+    disabled-01: #525252,
+    disabled-02: #8d8d8d,
+    disabled-03: #c6c6c6,
+    decorative-01: #6f6f6f,
+    skeleton-01: #474747,
+    skeleton-02: #6f6f6f,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #525252,
+    hover-field: #474747,
+  )
+) !default;
+
 /// Carbon's g90 color theme
 /// @type Map
 /// @access public
@@ -1882,18 +2033,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'),

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
@@ -987,7 +987,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 +1545,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 +1575,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 +1604,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

package/scss/modules/_theme.scss

@@ -29,7 +29,7 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin set($active-theme) {
+@mixin set-theme($active-theme) {
   $theme: $active-theme !global;
 }
 

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,
@@ -108,7 +108,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,
@@ -187,6 +187,140 @@ $g10: map.merge(
   )
 ) !default;
 
+/// Carbon's g80 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$g80: map.merge(
+  $white,
+  (
+    background: #393939,
+    layer: #525252,
+    layer-accent: #6f6f6f,
+    field: #525252,
+    background-inverse: #f4f4f4,
+    interactive: #78a9ff,
+    border-subtle: #6f6f6f,
+    border-strong: #a8a8a8,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #a8a8a8,
+    text-error: #ffb3b8,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #ff8389,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #ff8389,
+    button-separator: #161616,
+    background-active: #525252,
+    layer-active: #6f6f6f,
+    button-secondary-active: #525252,
+    button-tertiary-active: #c6c6c6,
+    focus: #ffffff,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    highlight: #0043ce,
+    background-hover: #474747,
+    layer-hover: #636363,
+    field-hover: #636363,
+    background-inverse-hover: #e8e8e8,
+    link-primary-hover: #a6c8ff,
+    button-primary-hover: #0151e4,
+    button-secondary-hover: #5e5e5e,
+    button-tertiary-hover: #ffffff,
+    background-selected: #525252,
+    background-selected-hover: #636363,
+    layer-selected: #6f6f6f,
+    layer-selected-hover: #616161,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #8d8d8d,
+    layer-disabled: #525252,
+    field-disabled: #525252,
+    border-disabled: #525252,
+    text-disabled: #8d8d8d,
+    button-disabled: #8d8d8d,
+    icon-disabled: #8d8d8d,
+    text-on-color-disabled: #c6c6c6,
+    icon-on-color-disabled: #c6c6c6,
+    layer-selected-disabled: #c6c6c6,
+    skeleton-background: #474747,
+    skeleton-element: #6f6f6f,
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #78a9ff,
+    ui-background: #393939,
+    ui-01: #525252,
+    ui-02: #525252,
+    ui-03: #6f6f6f,
+    ui-04: #a8a8a8,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #a8a8a8,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    link-02: #a6c8ff,
+    inverse-link: #0f62fe,
+    field-01: #525252,
+    field-02: #6f6f6f,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #ff8389,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
+    inverse-focus-ui: #0f62fe,
+    hover-primary: #0151e4,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #5e5e5e,
+    active-secondary: #525252,
+    hover-tertiary: #ffffff,
+    active-tertiary: #c6c6c6,
+    hover-ui: #474747,
+    hover-light-ui: #5e5e5e,
+    active-ui: #525252,
+    active-light-ui: #8d8d8d,
+    selected-ui: #525252,
+    selected-light-ui: #8d8d8d,
+    inverse-hover-ui: #e8e8e8,
+    hover-selected-ui: #616161,
+    hover-row: #636363,
+    visited-link: #be95ff,
+    disabled-01: #525252,
+    disabled-02: #8d8d8d,
+    disabled-03: #c6c6c6,
+    decorative-01: #6f6f6f,
+    skeleton-01: #474747,
+    skeleton-02: #6f6f6f,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #525252,
+    hover-field: #474747,
+  )
+) !default;
+
 /// Carbon's g90 color theme
 /// @type Map
 /// @access public

package/src/g10.js

@@ -28,7 +28,7 @@ import {
   // Support
   blue50,
   green40,
-  green50,
+  green60,
   yellow,
   red50,
   red60,
@@ -78,7 +78,7 @@ export const inverse01 = white;
 export const inverse02 = gray80;
 
 export const support01 = red60;
-export const support02 = green50;
+export const support02 = green60;
 export const support03 = yellow;
 export const support04 = blue70;
 
@@ -233,8 +233,11 @@ export const skeletonElement = skeleton02;
 export {
   // Type
   caption01,
+  caption02,
   label01,
+  label02,
   helperText01,
+  helperText02,
   bodyShort01,
   bodyLong01,
   bodyShort02,

package/src/g100.js

@@ -232,8 +232,11 @@ export const skeletonElement = skeleton02;
 export {
   // Type
   caption01,
+  caption02,
   label01,
+  label02,
   helperText01,
+  helperText02,
   bodyShort01,
   bodyLong01,
   bodyShort02,