@carbon/themes 10.27.0-rc.0 → 10.28.0

package/README.md

@@ -108,11 +108,12 @@ import {
 } from '@carbon/themes';
 ```
 
-## 📖 API Documentation
+## 📚 Examples
 
-If you're looking for `@carbon/themes` API documentation, check out:
+If you're looking for more examples on how to use `@carbon/themes`, we have some
+examples that you can check out:
 
-- [Sass](./docs/sass.md)
+- [sass-modules](./examples/sass-modules)
 
 ## 🙌 Contributing
 

package/es/index.js

@@ -1,5 +1,5 @@
 import Color from 'color';
-import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue40, green50, yellow, blue70, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, blue10, gray90, red40, blue30, purple40, red30 } from '@carbon/colors';
+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';
@@ -97,6 +97,7 @@ var icon01 = gray100;
 var icon02 = gray70;
 var icon03 = white$1;
 var link01 = blue60;
+var link02 = blue70;
 var inverseLink = blue40;
 var field01 = gray10;
 var field02 = white$1;
@@ -173,6 +174,7 @@ var white = /*#__PURE__*/Object.freeze({
   icon02: icon02,
   icon03: icon03,
   link01: link01,
+  link02: link02,
   inverseLink: inverseLink,
   field01: field01,
   field02: field02,
@@ -313,6 +315,7 @@ var icon01$1 = gray100;
 var icon02$1 = gray70;
 var icon03$1 = white$1;
 var link01$1 = blue60;
+var link02$1 = blue70;
 var inverseLink$1 = blue40;
 var field01$1 = white$1;
 var field02$1 = gray10;
@@ -389,6 +392,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   icon02: icon02$1,
   icon03: icon03$1,
   link01: link01$1,
+  link02: link02$1,
   inverseLink: inverseLink$1,
   field01: field01$1,
   field02: field02$1,
@@ -529,6 +533,7 @@ var icon01$2 = gray10;
 var icon02$2 = gray30;
 var icon03$2 = white$1;
 var link01$2 = blue40;
+var link02$2 = blue30;
 var inverseLink$2 = blue60;
 var field01$2 = gray90;
 var field02$2 = gray80;
@@ -574,7 +579,7 @@ var highlight$2 = blue80;
 var decorative01$2 = gray70;
 var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
-var skeleton02$2 = gray80;
+var skeleton02$2 = gray70;
 
 var brand01$2 = interactive01$2;
 var brand02$2 = interactive02$2;
@@ -605,6 +610,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   icon02: icon02$2,
   icon03: icon03$2,
   link01: link01$2,
+  link02: link02$2,
   inverseLink: inverseLink$2,
   field01: field01$2,
   field02: field02$2,
@@ -745,6 +751,7 @@ var icon01$3 = gray10;
 var icon02$3 = gray30;
 var icon03$3 = white$1;
 var link01$3 = blue40;
+var link02$3 = blue30;
 var inverseLink$3 = blue60;
 var field01$3 = gray80;
 var field02$3 = gray70;
@@ -821,6 +828,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   icon02: icon02$3,
   icon03: icon03$3,
   link01: link01$3,
+  link02: link02$3,
   inverseLink: inverseLink$3,
   field01: field01$3,
   field02: field02$3,
@@ -961,6 +969,7 @@ var icon01$4 = '#3d70b2';
 var icon02$4 = '#5a6872';
 var icon03$4 = white$1;
 var link01$4 = '#3d70b2';
+var link02$4 = '#3d70b2';
 var inverseLink$4 = '#5596e6';
 var field01$4 = white$1;
 var field02$4 = '#f4f7fb';
@@ -1037,6 +1046,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   icon02: icon02$4,
   icon03: icon03$4,
   link01: link01$4,
+  link02: link02$4,
   inverseLink: inverseLink$4,
   field01: field01$4,
   field02: field02$4,
@@ -1160,7 +1170,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 // exported as in JavaScript
 
 var colors = [// Core
-'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
+'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
 'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -1210,7 +1220,7 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
+    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator']
@@ -1232,4 +1242,4 @@ var themes = {
   v9: v9
 };
 
-export { active01, activeDanger, activeLightUI, activePrimary, activeSecondary, activeTertiary, activeUI, brand01, brand02, brand03, buttonSeparator, danger, danger01, danger02, decorative01, disabled01, disabled02, disabled03, field01, field02, focus, formatTokenName, g10, g100, g90, highlight, hoverDanger, hoverField, hoverLightUI, hoverPrimary, hoverPrimaryText, hoverRow, hoverSecondary, hoverSelectedUI, hoverTertiary, hoverUI, icon01, icon02, icon03, interactive01, interactive02, interactive03, interactive04, inverse01, inverse02, inverseFocusUi, inverseHoverUI, inverseLink, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, link01, overlay01, selectedLightUI, selectedUI, skeleton01, skeleton02, support01, support02, support03, support04, text01, text02, text03, text04, text05, textError, themes, tokens, ui01, ui02, ui03, ui04, ui05, uiBackground, unstable__meta, v9, visitedLink, white };
+export { active01, activeDanger, activeLightUI, activePrimary, activeSecondary, activeTertiary, activeUI, brand01, brand02, brand03, buttonSeparator, danger, danger01, danger02, decorative01, disabled01, disabled02, disabled03, field01, field02, focus, formatTokenName, g10, g100, g90, highlight, hoverDanger, hoverField, hoverLightUI, hoverPrimary, hoverPrimaryText, hoverRow, hoverSecondary, hoverSelectedUI, hoverTertiary, hoverUI, icon01, icon02, icon03, interactive01, interactive02, interactive03, interactive04, inverse01, inverse02, inverseFocusUi, inverseHoverUI, inverseLink, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, link01, link02, overlay01, selectedLightUI, selectedUI, skeleton01, skeleton02, support01, support02, support03, support04, text01, text02, text03, text04, text05, textError, themes, tokens, ui01, ui02, ui03, ui04, ui05, uiBackground, unstable__meta, v9, visitedLink, white };

package/index.scss

@@ -0,0 +1,9 @@
+//
+// 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 'scss/modules/themes';
+@forward 'scss/modules/theme';

package/lib/index.js

@@ -103,6 +103,7 @@ var icon01 = colors$1.gray100;
 var icon02 = colors$1.gray70;
 var icon03 = colors$1.white;
 var link01 = colors$1.blue60;
+var link02 = colors$1.blue70;
 var inverseLink = colors$1.blue40;
 var field01 = colors$1.gray10;
 var field02 = colors$1.white;
@@ -179,6 +180,7 @@ var white = /*#__PURE__*/Object.freeze({
   icon02: icon02,
   icon03: icon03,
   link01: link01,
+  link02: link02,
   inverseLink: inverseLink,
   field01: field01,
   field02: field02,
@@ -319,6 +321,7 @@ var icon01$1 = colors$1.gray100;
 var icon02$1 = colors$1.gray70;
 var icon03$1 = colors$1.white;
 var link01$1 = colors$1.blue60;
+var link02$1 = colors$1.blue70;
 var inverseLink$1 = colors$1.blue40;
 var field01$1 = colors$1.white;
 var field02$1 = colors$1.gray10;
@@ -395,6 +398,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   icon02: icon02$1,
   icon03: icon03$1,
   link01: link01$1,
+  link02: link02$1,
   inverseLink: inverseLink$1,
   field01: field01$1,
   field02: field02$1,
@@ -535,6 +539,7 @@ var icon01$2 = colors$1.gray10;
 var icon02$2 = colors$1.gray30;
 var icon03$2 = colors$1.white;
 var link01$2 = colors$1.blue40;
+var link02$2 = colors$1.blue30;
 var inverseLink$2 = colors$1.blue60;
 var field01$2 = colors$1.gray90;
 var field02$2 = colors$1.gray80;
@@ -580,7 +585,7 @@ var highlight$2 = colors$1.blue80;
 var decorative01$2 = colors$1.gray70;
 var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
-var skeleton02$2 = colors$1.gray80;
+var skeleton02$2 = colors$1.gray70;
 
 var brand01$2 = interactive01$2;
 var brand02$2 = interactive02$2;
@@ -611,6 +616,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   icon02: icon02$2,
   icon03: icon03$2,
   link01: link01$2,
+  link02: link02$2,
   inverseLink: inverseLink$2,
   field01: field01$2,
   field02: field02$2,
@@ -751,6 +757,7 @@ var icon01$3 = colors$1.gray10;
 var icon02$3 = colors$1.gray30;
 var icon03$3 = colors$1.white;
 var link01$3 = colors$1.blue40;
+var link02$3 = colors$1.blue30;
 var inverseLink$3 = colors$1.blue60;
 var field01$3 = colors$1.gray80;
 var field02$3 = colors$1.gray70;
@@ -827,6 +834,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   icon02: icon02$3,
   icon03: icon03$3,
   link01: link01$3,
+  link02: link02$3,
   inverseLink: inverseLink$3,
   field01: field01$3,
   field02: field02$3,
@@ -967,6 +975,7 @@ var icon01$4 = '#3d70b2';
 var icon02$4 = '#5a6872';
 var icon03$4 = colors$1.white;
 var link01$4 = '#3d70b2';
+var link02$4 = '#3d70b2';
 var inverseLink$4 = '#5596e6';
 var field01$4 = colors$1.white;
 var field02$4 = '#f4f7fb';
@@ -1043,6 +1052,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   icon02: icon02$4,
   icon03: icon03$4,
   link01: link01$4,
+  link02: link02$4,
   inverseLink: inverseLink$4,
   field01: field01$4,
   field02: field02$4,
@@ -1166,7 +1176,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 // exported as in JavaScript
 
 var colors = [// Core
-'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
+'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
 'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -1216,7 +1226,7 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
+    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator']
@@ -1657,6 +1667,7 @@ exports.inverseSupport02 = inverseSupport02;
 exports.inverseSupport03 = inverseSupport03;
 exports.inverseSupport04 = inverseSupport04;
 exports.link01 = link01;
+exports.link02 = link02;
 exports.overlay01 = overlay01;
 exports.selectedLightUI = selectedLightUI;
 exports.selectedUI = selectedUI;

package/metadata.yml

@@ -73,6 +73,9 @@ tokens:
     role:
       - Primary links
       - Ghost button
+  - name: link02
+    role:
+      - Secondary link color for lower contrast backgrounds
   - name: field01
     role:
       - Default input fields

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.27.0-rc.0",
+  "version": "10.28.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,20 +24,21 @@
     "access": "public"
   },
   "scripts": {
+    "ci-check": "carbon-cli check \"scss/**/*.scss\" -i \"**/generated/**\"",
     "clean": "rimraf es lib umd scss/generated",
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\" && carbon-cli sassdoc \"scss/**/*.scss\""
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.20.0-rc.0",
-    "@carbon/layout": "^10.18.0-rc.0",
-    "@carbon/type": "^10.21.0-rc.0",
+    "@carbon/colors": "^10.21.0",
+    "@carbon/layout": "^10.19.0",
+    "@carbon/type": "^10.22.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.19.0-rc.0",
+    "@carbon/cli": "^10.20.0",
     "@carbon/cli-reporter": "^10.4.0",
-    "@carbon/scss-generator": "^10.12.0",
-    "@carbon/test-utils": "^10.14.0",
+    "@carbon/scss-generator": "^10.13.0",
+    "@carbon/test-utils": "^10.15.0",
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
@@ -45,5 +46,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "f20d953bfdd69fd024f2b202fd7e62f3139d431c"
+  "gitHead": "f4f5ac5a33f77b799d9e4533287db8912e40cd1b"
 }

package/scss/generated/_mixins.scss

@@ -58,6 +58,7 @@
   $icon-02: map-get($theme, 'icon-02') !global;
   $icon-03: map-get($theme, 'icon-03') !global;
   $link-01: map-get($theme, 'link-01') !global;
+  $link-02: map-get($theme, 'link-02') !global;
   $inverse-link: map-get($theme, 'inverse-link') !global;
   $field-01: map-get($theme, 'field-01') !global;
   $field-02: map-get($theme, 'field-02') !global;
@@ -254,6 +255,10 @@
       --#{$custom-property-prefix}-link-01,
       map-get($theme, 'link-01')
     ) !global;
+    $link-02: var(
+      --#{$custom-property-prefix}-link-02,
+      map-get($theme, 'link-02')
+    ) !global;
     $inverse-link: var(
       --#{$custom-property-prefix}-inverse-link,
       map-get($theme, 'inverse-link')
@@ -711,6 +716,10 @@
       @include custom-property('link-01', map-get($theme, 'link-01'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) {
+      @include custom-property('link-02', map-get($theme, 'link-02'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/generated/_themes.scss

@@ -27,6 +27,7 @@ $carbon--theme--white: (
   icon-02: #525252,
   icon-03: #ffffff,
   link-01: #0f62fe,
+  link-02: #0043ce,
   inverse-link: #78a9ff,
   field-01: #f4f4f4,
   field-02: #ffffff,
@@ -303,13 +304,15 @@ $carbon--theme--white: (
     font-weight: 300,
     line-height: 1.334,
     letter-spacing: 0,
-    lg: (
-      font-size: 1.75rem,
-      line-height: 1.29,
-    ),
-    max: (
-      font-size: 2rem,
-      line-height: 1.25,
+    breakpoints: (
+      lg: (
+        font-size: 1.75rem,
+        line-height: 1.29,
+      ),
+      max: (
+        font-size: 2rem,
+        line-height: 1.25,
+      ),
     ),
   ),
   quotation-01: (
@@ -535,6 +538,7 @@ $carbon--theme--g90: map-merge(
     icon-01: #f4f4f4,
     icon-02: #c6c6c6,
     link-01: #78a9ff,
+    link-02: #a6c8ff,
     inverse-link: #0f62fe,
     field-01: #393939,
     field-02: #525252,
@@ -604,6 +608,7 @@ $carbon--theme--g100: map-merge(
     icon-01: #f4f4f4,
     icon-02: #c6c6c6,
     link-01: #78a9ff,
+    link-02: #a6c8ff,
     inverse-link: #0f62fe,
     field-01: #262626,
     field-02: #393939,
@@ -640,7 +645,7 @@ $carbon--theme--g100: map-merge(
     decorative-01: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
-    skeleton-02: #393939,
+    skeleton-02: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #525252,
@@ -673,6 +678,7 @@ $carbon--theme--v9: map-merge(
     icon-01: #3d70b2,
     icon-02: #5a6872,
     link-01: #3d70b2,
+    link-02: #3d70b2,
     inverse-link: #5596e6,
     field-01: #ffffff,
     field-02: #f4f7fb,
@@ -847,6 +853,12 @@ $carbon--theme: (
       $link-01,
       map-get($carbon--theme--white, 'link-01')
     ),
+  link-02:
+    if(
+      global-variable-exists('link-02'),
+      $link-02,
+      map-get($carbon--theme--white, 'link-02')
+    ),
   inverse-link:
     if(
       global-variable-exists('inverse-link'),

package/scss/generated/_tokens.scss

@@ -224,6 +224,17 @@ $link-01: if(
   #0f62fe
 ) !default;
 
+/// Secondary link color for lower contrast backgrounds
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$link-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'link-02'),
+  map-get($carbon--theme, 'link-02'),
+  #0043ce
+) !default;
+
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes
@@ -1227,13 +1238,15 @@ $expressive-paragraph-01: if(
     font-weight: 300,
     line-height: 1.334,
     letter-spacing: 0,
-    lg: (
-      font-size: 1.75rem,
-      line-height: 1.29,
-    ),
-    max: (
-      font-size: 2rem,
-      line-height: 1.25,
+    breakpoints: (
+      lg: (
+        font-size: 1.75rem,
+        line-height: 1.29,
+      ),
+      max: (
+        font-size: 2rem,
+        line-height: 1.25,
+      ),
     ),
   )
 ) !default;

package/scss/modules/_theme.scss

@@ -0,0 +1,50 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'themes';
+
+$theme: themes.$white !default;
+$-custom-property-prefix: 'cds';
+
+/// @access public
+/// @group @carbon/themes
+@mixin theme($active-theme: $theme) {
+  $parent-theme: $theme;
+  $theme: $active-theme !global;
+
+  @each $token, $value in $theme {
+    @include -custom-property($token, $value);
+  }
+
+  @content;
+
+  $theme: $parent-theme !global;
+}
+
+/// @access public
+/// @group @carbon/themes
+@mixin set($active-theme) {
+  $theme: $active-theme !global;
+}
+
+/// @access private
+/// @group @carbon/themes
+@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
+  @if meta.type-of($value) == map {
+    @each $property, $property-value in $value {
+      // Only support one-level of depth for values that are maps. This is to
+      // avoid bringing properties like `breakpoints` on type tokens
+      @if type-of($property-value) != map {
+        @include -custom-property('#{$name}-#{$property}', $property-value);
+      }
+    }
+  } @else {
+    --#{$prefix}-#{$name}: #{$value};
+  }
+}

package/scss/modules/_themes.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/themes';

package/scss/modules/_utilities.scss

@@ -0,0 +1,18 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+
+/// @access private
+/// @group @carbon/themes
+@function merge($map, $maps...) {
+  $result: $map;
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}