@carbon/themes 10.41.0-rc.0 → 10.43.0

package/scss/modules/_theme.scss

@@ -20,6 +20,9 @@ $fallback: themes.$white !default;
 $theme: () !default;
 $theme: map.merge($fallback, $theme);
 
+/// Local component tokens that can be updated with `@mixin add-component-tokens`.
+$-component-tokens: ();
+
 /// Include the CSS Custom Properties for the active theme or a given theme on
 /// a selector
 @mixin theme($active-theme: $theme, $component-tokens...) {
@@ -32,6 +35,13 @@ $theme: map.merge($fallback, $theme);
       @include -custom-property($token, $value);
     }
   }
+
+  @each $token, $value in $-component-tokens {
+    @include -custom-property(
+      $token,
+      -resolve-token-value($active-theme, $value)
+    );
+  }
 }
 
 /// Retrieve the value for the given $token from the current $theme
@@ -43,6 +53,56 @@ $theme: map.merge($fallback, $theme);
   @error "Unable to find token: #{$token} in current $theme";
 }
 
+/// Compare two themes to see if the second theme is a superset of the first
+/// theme. In other words, this function will return true if every token in the
+/// first theme is available in the second theme and has the same value. The
+/// second theme is allowed to have additional values and it will still match.
+/// @param {Map} $a
+/// @param {Map} $b
+/// @returns {Boolean}
+@function matches($a, $b) {
+  @each $key, $value in $a {
+    @if map.has-key($b, $key) == false {
+      @return false;
+    }
+
+    @if map.get($b, $key) != $value {
+      @return false;
+    }
+  }
+
+  @return true;
+}
+
+/// Add component tokens which will be included any time the theme mixin is
+/// called
+@mixin add-component-tokens($token-map) {
+  $-component-tokens: map.merge($-component-tokens, $token-map) !global;
+}
+
+/// Determine the value from a component token that matches the given theme.
+/// This is helpful when a component token may change depending on what theme the
+/// component is being rendered in.
+@function -resolve-token-value($active-theme: $theme, $token-value) {
+  @if meta.type-of($token-value) == map and map.has-key($token-value, values) {
+    $fallback: map.get($token-value, fallback);
+    $theme-values: map.get($token-value, values);
+
+    @each $theme-value in $theme-values {
+      $theme-to-match: map.get($theme-value, theme);
+      $value: map.get($theme-value, value);
+
+      @if matches($theme-to-match, $active-theme) {
+        @return $value;
+      }
+    }
+
+    @return $fallback;
+  }
+
+  @return $token-value;
+}
+
 /// @access private
 /// @group @carbon/themes
 @mixin -custom-property($name, $value) {

package/src/g10.js

@@ -268,6 +268,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,

package/src/g100.js

@@ -267,6 +267,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,

package/src/g80.js

@@ -271,6 +271,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,

package/src/g90.js

@@ -269,6 +269,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,

package/src/v9.js

@@ -233,6 +233,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,

package/src/white.js

@@ -268,6 +268,31 @@ export {
   display02,
   display03,
   display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
 } from '@carbon/type';
 
 // Layout

package/umd/index.js

@@ -421,6 +421,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -803,6 +827,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -1185,6 +1233,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -1570,6 +1642,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -1952,6 +2048,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -2334,6 +2454,30 @@
     display02: type.display02,
     display03: type.display03,
     display04: type.display04,
+    legal01: type.legal01,
+    legal02: type.legal02,
+    bodyCompact01: type.bodyCompact01,
+    bodyCompact02: type.bodyCompact02,
+    body01: type.body01,
+    body02: type.body02,
+    headingCompact01: type.headingCompact01,
+    headingCompact02: type.headingCompact02,
+    heading03: type.heading03,
+    heading04: type.heading04,
+    heading05: type.heading05,
+    heading06: type.heading06,
+    heading07: type.heading07,
+    fluidHeading03: type.fluidHeading03,
+    fluidHeading04: type.fluidHeading04,
+    fluidHeading05: type.fluidHeading05,
+    fluidHeading06: type.fluidHeading06,
+    fluidParagraph01: type.fluidParagraph01,
+    fluidQuotation01: type.fluidQuotation01,
+    fluidQuotation02: type.fluidQuotation02,
+    fluidDisplay01: type.fluidDisplay01,
+    fluidDisplay02: type.fluidDisplay02,
+    fluidDisplay03: type.fluidDisplay03,
+    fluidDisplay04: type.fluidDisplay04,
     spacing01: layout.spacing01,
     spacing02: layout.spacing02,
     spacing03: layout.spacing03,
@@ -2459,6 +2603,30 @@
     v9: v9
   };
 
+  Object.defineProperty(exports, 'body01', {
+    enumerable: true,
+    get: function () {
+      return type.body01;
+    }
+  });
+  Object.defineProperty(exports, 'body02', {
+    enumerable: true,
+    get: function () {
+      return type.body02;
+    }
+  });
+  Object.defineProperty(exports, 'bodyCompact01', {
+    enumerable: true,
+    get: function () {
+      return type.bodyCompact01;
+    }
+  });
+  Object.defineProperty(exports, 'bodyCompact02', {
+    enumerable: true,
+    get: function () {
+      return type.bodyCompact02;
+    }
+  });
   Object.defineProperty(exports, 'bodyLong01', {
     enumerable: true,
     get: function () {
@@ -2573,6 +2741,72 @@
       return type.expressiveParagraph01;
     }
   });
+  Object.defineProperty(exports, 'fluidDisplay01', {
+    enumerable: true,
+    get: function () {
+      return type.fluidDisplay01;
+    }
+  });
+  Object.defineProperty(exports, 'fluidDisplay02', {
+    enumerable: true,
+    get: function () {
+      return type.fluidDisplay02;
+    }
+  });
+  Object.defineProperty(exports, 'fluidDisplay03', {
+    enumerable: true,
+    get: function () {
+      return type.fluidDisplay03;
+    }
+  });
+  Object.defineProperty(exports, 'fluidDisplay04', {
+    enumerable: true,
+    get: function () {
+      return type.fluidDisplay04;
+    }
+  });
+  Object.defineProperty(exports, 'fluidHeading03', {
+    enumerable: true,
+    get: function () {
+      return type.fluidHeading03;
+    }
+  });
+  Object.defineProperty(exports, 'fluidHeading04', {
+    enumerable: true,
+    get: function () {
+      return type.fluidHeading04;
+    }
+  });
+  Object.defineProperty(exports, 'fluidHeading05', {
+    enumerable: true,
+    get: function () {
+      return type.fluidHeading05;
+    }
+  });
+  Object.defineProperty(exports, 'fluidHeading06', {
+    enumerable: true,
+    get: function () {
+      return type.fluidHeading06;
+    }
+  });
+  Object.defineProperty(exports, 'fluidParagraph01', {
+    enumerable: true,
+    get: function () {
+      return type.fluidParagraph01;
+    }
+  });
+  Object.defineProperty(exports, 'fluidQuotation01', {
+    enumerable: true,
+    get: function () {
+      return type.fluidQuotation01;
+    }
+  });
+  Object.defineProperty(exports, 'fluidQuotation02', {
+    enumerable: true,
+    get: function () {
+      return type.fluidQuotation02;
+    }
+  });
   Object.defineProperty(exports, 'heading01', {
     enumerable: true,
     get: function () {
@@ -2585,6 +2819,48 @@
       return type.heading02;
     }
   });
+  Object.defineProperty(exports, 'heading03', {
+    enumerable: true,
+    get: function () {
+      return type.heading03;
+    }
+  });
+  Object.defineProperty(exports, 'heading04', {
+    enumerable: true,
+    get: function () {
+      return type.heading04;
+    }
+  });
+  Object.defineProperty(exports, 'heading05', {
+    enumerable: true,
+    get: function () {
+      return type.heading05;
+    }
+  });
+  Object.defineProperty(exports, 'heading06', {
+    enumerable: true,
+    get: function () {
+      return type.heading06;
+    }
+  });
+  Object.defineProperty(exports, 'heading07', {
+    enumerable: true,
+    get: function () {
+      return type.heading07;
+    }
+  });
+  Object.defineProperty(exports, 'headingCompact01', {
+    enumerable: true,
+    get: function () {
+      return type.headingCompact01;
+    }
+  });
+  Object.defineProperty(exports, 'headingCompact02', {
+    enumerable: true,
+    get: function () {
+      return type.headingCompact02;
+    }
+  });
   Object.defineProperty(exports, 'helperText01', {
     enumerable: true,
     get: function () {
@@ -2609,6 +2885,18 @@
       return type.label02;
     }
   });
+  Object.defineProperty(exports, 'legal01', {
+    enumerable: true,
+    get: function () {
+      return type.legal01;
+    }
+  });
+  Object.defineProperty(exports, 'legal02', {
+    enumerable: true,
+    get: function () {
+      return type.legal02;
+    }
+  });
   Object.defineProperty(exports, 'productiveHeading01', {
     enumerable: true,
     get: function () {