@carbon/themes 10.29.0-rc.0 → 10.31.0

package/README.md

@@ -39,23 +39,8 @@ corresponding default theme by writing the following in your Sass file:
 ```
 
 By default, the white theme will be initialized. If you would like to include
-another theme, you can do so by calling our mixin. For example:
-
-```scss
-@import '@carbon/themes/scss/themes';
-
-// Use the gray 10 theme
-@include carbon--theme($carbon--theme--g10);
-
-// Use the gray 90 theme
-@include carbon--theme($carbon--theme--g90);
-
-// Use the gray 100 theme
-@include carbon--theme($carbon--theme--g100);
-```
-
-Alternatively, you can set the global theme variable then call the mixin without
-passing in a theme name.
+another theme, you can do so by setting the global theme variable and then
+calling our mixin. For example:
 
 ```scss
 @import '@carbon/themes/scss/themes';

package/es/index.js

@@ -2,8 +2,8 @@ import Color from 'color';
 import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue70, blue40, green50, yellow, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, blue10, gray90, red40, blue30, purple40, red30 } from '@carbon/colors';
 import { caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, unstable_tokens } from '@carbon/type';
 export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, label01, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
-import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
-export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12 } from '@carbon/layout';
+import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
+export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13 } from '@carbon/layout';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -269,6 +269,7 @@ var white = /*#__PURE__*/Object.freeze({
   spacing10: spacing10,
   spacing11: spacing11,
   spacing12: spacing12,
+  spacing13: spacing13,
   fluidSpacing01: fluidSpacing01,
   fluidSpacing02: fluidSpacing02,
   fluidSpacing03: fluidSpacing03,
@@ -487,6 +488,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   spacing10: spacing10,
   spacing11: spacing11,
   spacing12: spacing12,
+  spacing13: spacing13,
   fluidSpacing01: fluidSpacing01,
   fluidSpacing02: fluidSpacing02,
   fluidSpacing03: fluidSpacing03,
@@ -705,6 +707,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   spacing10: spacing10,
   spacing11: spacing11,
   spacing12: spacing12,
+  spacing13: spacing13,
   fluidSpacing01: fluidSpacing01,
   fluidSpacing02: fluidSpacing02,
   fluidSpacing03: fluidSpacing03,
@@ -923,6 +926,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   spacing10: spacing10,
   spacing11: spacing11,
   spacing12: spacing12,
+  spacing13: spacing13,
   fluidSpacing01: fluidSpacing01,
   fluidSpacing02: fluidSpacing02,
   fluidSpacing03: fluidSpacing03,
@@ -1141,6 +1145,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   spacing10: spacing10,
   spacing11: spacing11,
   spacing12: spacing12,
+  spacing13: spacing13,
   fluidSpacing01: fluidSpacing01,
   fluidSpacing02: fluidSpacing02,
   fluidSpacing03: fluidSpacing03,

package/lib/index.js

@@ -275,6 +275,7 @@ var white = /*#__PURE__*/Object.freeze({
   spacing10: layout.spacing10,
   spacing11: layout.spacing11,
   spacing12: layout.spacing12,
+  spacing13: layout.spacing13,
   fluidSpacing01: layout.fluidSpacing01,
   fluidSpacing02: layout.fluidSpacing02,
   fluidSpacing03: layout.fluidSpacing03,
@@ -493,6 +494,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   spacing10: layout.spacing10,
   spacing11: layout.spacing11,
   spacing12: layout.spacing12,
+  spacing13: layout.spacing13,
   fluidSpacing01: layout.fluidSpacing01,
   fluidSpacing02: layout.fluidSpacing02,
   fluidSpacing03: layout.fluidSpacing03,
@@ -711,6 +713,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   spacing10: layout.spacing10,
   spacing11: layout.spacing11,
   spacing12: layout.spacing12,
+  spacing13: layout.spacing13,
   fluidSpacing01: layout.fluidSpacing01,
   fluidSpacing02: layout.fluidSpacing02,
   fluidSpacing03: layout.fluidSpacing03,
@@ -929,6 +932,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   spacing10: layout.spacing10,
   spacing11: layout.spacing11,
   spacing12: layout.spacing12,
+  spacing13: layout.spacing13,
   fluidSpacing01: layout.fluidSpacing01,
   fluidSpacing02: layout.fluidSpacing02,
   fluidSpacing03: layout.fluidSpacing03,
@@ -1147,6 +1151,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   spacing10: layout.spacing10,
   spacing11: layout.spacing11,
   spacing12: layout.spacing12,
+  spacing13: layout.spacing13,
   fluidSpacing01: layout.fluidSpacing01,
   fluidSpacing02: layout.fluidSpacing02,
   fluidSpacing03: layout.fluidSpacing03,
@@ -1614,6 +1619,12 @@ Object.defineProperty(exports, 'spacing12', {
     return layout.spacing12;
   }
 });
+Object.defineProperty(exports, 'spacing13', {
+  enumerable: true,
+  get: function () {
+    return layout.spacing13;
+  }
+});
 exports.active01 = active01;
 exports.activeDanger = activeDanger;
 exports.activeLightUI = activeLightUI;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.29.0-rc.0",
+  "version": "10.31.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.21.0",
-    "@carbon/layout": "^10.20.0-rc.0",
-    "@carbon/type": "^10.23.0-rc.0",
+    "@carbon/colors": "^10.22.0",
+    "@carbon/layout": "^10.22.0",
+    "@carbon/type": "^10.25.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.20.0",
+    "@carbon/cli": "^10.21.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": "8b207f14f9f994d661241deb60a6c44ae5e3c77a"
+  "gitHead": "8b9c3660aa5b585052b2aa88079a039697ef276f"
 }

package/scss/generated/_mixins.scss

@@ -153,6 +153,7 @@
   $spacing-10: map-get($theme, 'spacing-10') !global;
   $spacing-11: map-get($theme, 'spacing-11') !global;
   $spacing-12: map-get($theme, 'spacing-12') !global;
+  $spacing-13: map-get($theme, 'spacing-13') !global;
   $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global;
   $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global;
   $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global;
@@ -511,6 +512,10 @@
       --#{$custom-property-prefix}-spacing-12,
       map-get($theme, 'spacing-12')
     ) !global;
+    $spacing-13: var(
+      --#{$custom-property-prefix}-spacing-13,
+      map-get($theme, 'spacing-13')
+    ) !global;
     $fluid-spacing-01: var(
       --#{$custom-property-prefix}-fluid-spacing-01,
       map-get($theme, 'fluid-spacing-01')
@@ -1682,6 +1687,16 @@
       @include custom-property('spacing-12', map-get($theme, 'spacing-12'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'spacing-13',
+      $emit-difference
+    )
+    {
+      @include custom-property('spacing-13', map-get($theme, 'spacing-13'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/generated/_themes.scss

@@ -478,6 +478,7 @@ $carbon--theme--white: (
   spacing-10: 4rem,
   spacing-11: 5rem,
   spacing-12: 6rem,
+  spacing-13: 10rem,
   fluid-spacing-01: 0,
   fluid-spacing-02: 2vw,
   fluid-spacing-03: 5vw,
@@ -1423,6 +1424,12 @@ $carbon--theme: (
       $spacing-12,
       map-get($carbon--theme--white, 'spacing-12')
     ),
+  spacing-13:
+    if(
+      global-variable-exists('spacing-13'),
+      $spacing-13,
+      map-get($carbon--theme--white, 'spacing-13')
+    ),
   fluid-spacing-01:
     if(
       global-variable-exists('fluid-spacing-01'),

package/scss/generated/_tokens.scss

@@ -1576,6 +1576,16 @@ $spacing-12: if(
   6rem
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$spacing-13: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'spacing-13'),
+  map-get($carbon--theme, 'spacing-13'),
+  10rem
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes

package/src/g10.js

@@ -184,12 +184,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/g100.js

@@ -183,12 +183,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/g90.js

@@ -185,12 +185,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/v9.js

@@ -148,12 +148,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/white.js

@@ -187,12 +187,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/umd/index.js

@@ -272,6 +272,7 @@
     spacing10: layout.spacing10,
     spacing11: layout.spacing11,
     spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
     fluidSpacing01: layout.fluidSpacing01,
     fluidSpacing02: layout.fluidSpacing02,
     fluidSpacing03: layout.fluidSpacing03,
@@ -490,6 +491,7 @@
     spacing10: layout.spacing10,
     spacing11: layout.spacing11,
     spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
     fluidSpacing01: layout.fluidSpacing01,
     fluidSpacing02: layout.fluidSpacing02,
     fluidSpacing03: layout.fluidSpacing03,
@@ -708,6 +710,7 @@
     spacing10: layout.spacing10,
     spacing11: layout.spacing11,
     spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
     fluidSpacing01: layout.fluidSpacing01,
     fluidSpacing02: layout.fluidSpacing02,
     fluidSpacing03: layout.fluidSpacing03,
@@ -926,6 +929,7 @@
     spacing10: layout.spacing10,
     spacing11: layout.spacing11,
     spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
     fluidSpacing01: layout.fluidSpacing01,
     fluidSpacing02: layout.fluidSpacing02,
     fluidSpacing03: layout.fluidSpacing03,
@@ -1144,6 +1148,7 @@
     spacing10: layout.spacing10,
     spacing11: layout.spacing11,
     spacing12: layout.spacing12,
+    spacing13: layout.spacing13,
     fluidSpacing01: layout.fluidSpacing01,
     fluidSpacing02: layout.fluidSpacing02,
     fluidSpacing03: layout.fluidSpacing03,
@@ -1611,6 +1616,12 @@
       return layout.spacing12;
     }
   });
+  Object.defineProperty(exports, 'spacing13', {
+    enumerable: true,
+    get: function () {
+      return layout.spacing13;
+    }
+  });
   exports.active01 = active01;
   exports.activeDanger = activeDanger;
   exports.activeLightUI = activeLightUI;