From 981c126ba6025a38c834be57cc7eebbebea5c06d Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 14 Apr 2020 11:53:56 -0500
Subject: [PATCH] fix(components): update get-token-value helper to error out
 at end of loop (#5838)

* Update _component-tokens.scss

* Update _component-tokens.scss

* fix(component-tokens): update helper and add test suite for custom themes

* fix(components): update emit-component-tokens and move from themes

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .../src/components/tag/_tokens.scss           | 1231 +++++++++--------
 .../scss/__tests__/component-tokens-test.js   |  152 ++
 .../src/globals/scss/_component-tokens.scss   |   51 +-
 packages/test-utils/scss.js                   |    3 +
 packages/themes/scss/_mixins.scss             |   23 -
 5 files changed, 857 insertions(+), 603 deletions(-)
 create mode 100644 packages/components/src/globals/scss/__tests__/component-tokens-test.js

diff --git a/packages/components/src/components/tag/_tokens.scss b/packages/components/src/components/tag/_tokens.scss
index c87d672e3576..c24e9fd62819 100644
--- a/packages/components/src/components/tag/_tokens.scss
+++ b/packages/components/src/components/tag/_tokens.scss
@@ -9,684 +9,775 @@
 @import '../../globals/scss/vendor/@carbon/elements/scss/colors/colors';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 
+// prettier-ignore
 $tag-colors: (
   // red
   'tag-background-red': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__red-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__red-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__red-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__red-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__red-20,
+    fallback: $carbon__red-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__red-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__red-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__red-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__red-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__red-20,
+      ),
     ),
   ),
   'tag-color-red': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__red-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__red-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__red-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__red-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__red-70,
+    fallback: $carbon__red-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__red-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__red-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__red-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__red-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__red-70,
+      ),
     ),
   ),
   'tag-hover-red': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__red-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__red-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__red-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__red-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__red-30,
+    fallback: $carbon__red-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__red-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__red-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__red-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__red-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__red-30,
+      ),
     ),
   ),
 
   // magenta
   'tag-background-magenta': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__magenta-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__magenta-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__magenta-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__magenta-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__magenta-20,
+    fallback: $carbon__magenta-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__magenta-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__magenta-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__magenta-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__magenta-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__magenta-20,
+      ),
     ),
   ),
   'tag-color-magenta': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__magenta-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__magenta-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__magenta-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__magenta-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__magenta-70,
+    fallback: $carbon__magenta-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__magenta-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__magenta-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__magenta-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__magenta-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__magenta-70,
+      ),
     ),
   ),
   'tag-hover-magenta': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__magenta-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__magenta-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__magenta-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__magenta-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__magenta-30,
+    fallback: $carbon__magenta-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__magenta-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__magenta-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__magenta-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__magenta-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__magenta-30,
+      ),
     ),
   ),
 
   // purple
   'tag-background-purple': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__purple-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__purple-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__purple-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__purple-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__purple-20,
+    fallback: $carbon__purple-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__purple-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__purple-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__purple-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__purple-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__purple-20,
+      ),
     ),
   ),
   'tag-color-purple': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__purple-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__purple-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__purple-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__purple-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__purple-70,
+    fallback: $carbon__purple-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__purple-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__purple-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__purple-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__purple-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__purple-70,
+      ),
     ),
   ),
   'tag-hover-purple': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__purple-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__purple-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__purple-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__purple-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__purple-30,
+    fallback: $carbon__purple-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__purple-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__purple-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__purple-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__purple-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__purple-30,
+      ),
     ),
   ),
 
   // blue
   'tag-background-blue': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__blue-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__blue-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__blue-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__blue-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__blue-20,
+    fallback: $carbon__blue-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__blue-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__blue-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__blue-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__blue-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__blue-20,
+      ),
     ),
   ),
   'tag-color-blue': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__blue-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__blue-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__blue-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__blue-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__blue-70,
+    fallback: $carbon__blue-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__blue-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__blue-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__blue-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__blue-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__blue-70,
+      ),
     ),
   ),
   'tag-hover-blue': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__blue-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__blue-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__blue-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__blue-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__blue-30,
+    fallback: $carbon__blue-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__blue-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__blue-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__blue-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__blue-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__blue-30,
+      ),
     ),
   ),
 
   // cyan
   'tag-background-cyan': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cyan-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cyan-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cyan-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cyan-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cyan-20,
+    fallback: $carbon__cyan-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cyan-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cyan-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cyan-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cyan-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cyan-20,
+      ),
     ),
   ),
   'tag-color-cyan': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cyan-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cyan-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cyan-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cyan-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cyan-70,
+    fallback: $carbon__cyan-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cyan-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cyan-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cyan-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cyan-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cyan-70,
+      ),
     ),
   ),
   'tag-hover-cyan': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cyan-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cyan-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cyan-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cyan-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cyan-30,
+    fallback: $carbon__cyan-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cyan-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cyan-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cyan-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cyan-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cyan-30,
+      ),
     ),
   ),
 
   // teal
   'tag-background-teal': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__teal-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__teal-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__teal-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__teal-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__teal-20,
+    fallback: $carbon__teal-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__teal-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__teal-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__teal-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__teal-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__teal-20,
+      ),
     ),
   ),
   'tag-color-teal': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__teal-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__teal-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__teal-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__teal-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__teal-70,
+    fallback: $carbon__teal-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__teal-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__teal-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__teal-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__teal-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__teal-70,
+      ),
     ),
   ),
   'tag-hover-teal': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__teal-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__teal-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__teal-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__teal-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__teal-30,
+    fallback: $carbon__teal-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__teal-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__teal-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__teal-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__teal-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__teal-30,
+      ),
     ),
   ),
 
   // green
   'tag-background-green': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__green-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__green-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__green-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__green-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__green-20,
+    fallback: $carbon__green-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__green-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__green-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__green-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__green-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__green-20,
+      ),
     ),
   ),
   'tag-color-green': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__green-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__green-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__green-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__green-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__green-70,
+    fallback: $carbon__green-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__green-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__green-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__green-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__green-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__green-70,
+      ),
     ),
   ),
   'tag-hover-green': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__green-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__green-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__green-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__green-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__green-30,
+    fallback: $carbon__green-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__green-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__green-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__green-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__green-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__green-30,
+      ),
     ),
   ),
 
   // gray
   'tag-background-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__gray-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__gray-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__gray-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__gray-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__gray-20,
+    fallback: $carbon__gray-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__gray-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__gray-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__gray-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__gray-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__gray-20,
+      ),
     ),
   ),
   'tag-color-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__gray-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__gray-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__gray-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__gray-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__gray-70,
+    fallback: $carbon__gray-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__gray-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__gray-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__gray-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__gray-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__gray-70,
+      ),
     ),
   ),
   'tag-hover-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__gray-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__gray-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__gray-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__gray-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__gray-30,
+    fallback: $carbon__gray-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__gray-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__gray-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__gray-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__gray-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__gray-30,
+      ),
     ),
   ),
 
   // cool-gray
   'tag-background-cool-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cool-gray-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cool-gray-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cool-gray-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cool-gray-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cool-gray-20,
+    fallback: $carbon__cool-gray-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cool-gray-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cool-gray-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cool-gray-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cool-gray-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cool-gray-20,
+      ),
     ),
   ),
   'tag-color-cool-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cool-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cool-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cool-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cool-gray-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cool-gray-70,
+    fallback: $carbon__cool-gray-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cool-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cool-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cool-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cool-gray-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cool-gray-70,
+      ),
     ),
   ),
   'tag-hover-cool-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__cool-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__cool-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__cool-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__cool-gray-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__cool-gray-30,
+    fallback: $carbon__cool-gray-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__cool-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__cool-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__cool-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__cool-gray-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__cool-gray-30,
+      ),
     ),
   ),
 
   // warm-gray
   'tag-background-warm-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__warm-gray-20,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__warm-gray-20,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__warm-gray-80,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__warm-gray-80,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__warm-gray-20,
+    fallback: $carbon__warm-gray-20,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__warm-gray-20,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__warm-gray-20,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__warm-gray-80,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__warm-gray-80,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__warm-gray-20,
+      ),
     ),
   ),
   'tag-color-warm-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__warm-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__warm-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__warm-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__warm-gray-30,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__warm-gray-70,
+    fallback: $carbon__warm-gray-70,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__warm-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__warm-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__warm-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__warm-gray-30,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__warm-gray-70,
+      ),
     ),
   ),
   'tag-hover-warm-gray': (
-    (
-      theme: $carbon--theme--white,
-      value: $carbon__warm-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g10,
-      value: $carbon__warm-gray-30,
-    ),
-    (
-      theme: $carbon--theme--g90,
-      value: $carbon__warm-gray-70,
-    ),
-    (
-      theme: $carbon--theme--g100,
-      value: $carbon__warm-gray-70,
-    ),
-    (
-      theme: $carbon--theme--v9,
-      value: $carbon__warm-gray-30,
+    fallback: $carbon__warm-gray-30,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__warm-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__warm-gray-30,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $carbon__warm-gray-70,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $carbon__warm-gray-70,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__warm-gray-30,
+      ),
     ),
   ),
 );
diff --git a/packages/components/src/globals/scss/__tests__/component-tokens-test.js b/packages/components/src/globals/scss/__tests__/component-tokens-test.js
new file mode 100644
index 000000000000..b402b4a8de38
--- /dev/null
+++ b/packages/components/src/globals/scss/__tests__/component-tokens-test.js
@@ -0,0 +1,152 @@
+/**
+ * Copyright IBM Corp. 2015, 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.
+ *
+ * @jest-environment node
+ */
+
+const { createSassRenderer, convert } = require('@carbon/test-utils/scss');
+
+const render = createSassRenderer(__dirname);
+
+describe('_component-tokens.scss', () => {
+  it('should emit the correct value for a token in a given theme', async () => {
+    const { calls } = await render(`
+      @import '../component-tokens';
+      $tokens: (
+        component-token-01: (
+          fallback: #fafafa,
+          values: (
+            (
+              theme: $carbon--theme--white,
+              value: #ffffff,
+            ),
+            (
+              theme: $carbon--theme--g10,
+              value: #000000,
+            ),
+          ),
+        ),
+      );
+
+      // Default, intended usage with our stock themes
+      @include carbon--theme($carbon--theme--white) {
+        $t: test(get-token-value($tokens, 'component-token-01'));
+      }
+
+      @include carbon--theme($carbon--theme--g10) {
+        $t: test(get-token-value($tokens, 'component-token-01'));
+      }
+
+      // Custom theme that is built on top of the white theme. This
+      // custom should still apply as long as it does not override
+      // any values of the base theme
+      $derived-theme: map-merge($carbon--theme--white, (
+        token-01: #ededed,
+      ));
+
+      @include carbon--theme($derived-theme) {
+        $t: test(get-token-value($tokens, 'component-token-01'));
+      }
+
+      // Fallback value should be used if the theme is completely custom
+      $custom-theme: (
+        token-01: #efefef,
+        token-02: #efefef,
+        token-03: #efefef,
+      );
+      @include carbon--theme($custom-theme) {
+        $t: test(get-token-value($tokens, 'component-token-01'));
+      }
+    `);
+
+    const values = calls.map(call => convert(call[0]));
+    expect(values[0]).toBe('#ffffff');
+    expect(values[1]).toBe('#000000');
+    expect(values[2]).toBe('#ffffff');
+    expect(values[3]).toBe('#fafafa');
+  });
+
+  it('should error if unable to find the given token in the token map', async () => {
+    const { output } = await render(`
+      @import '../component-tokens';
+      $tokens: (
+        component-token-01: (
+          fallback: #000000,
+          values: (),
+        ),
+      );
+      $t: test(get-token-value($tokens, 'component-token-02'));
+    `);
+
+    expect(output.error).toHaveBeenCalledTimes(1);
+  });
+
+  it('should emit a CSS Custom Property if the feature flag is set', async () => {
+    const { calls } = await render(`
+      $feature-flags: (enable-css-custom-properties: true);
+      @import '../component-tokens';
+      $theme: (token-01: #000000);
+      $tokens: (
+        component-token-01: (
+          fallback: #000000,
+          values: (
+            (
+              theme: $theme,
+              value: #ffffff,
+            ),
+          ),
+        ),
+      );
+      $t: test(get-token-value($tokens, 'component-token-01'));
+
+      @include carbon--theme($theme) {
+        $t: test(get-token-value($tokens, 'component-token-01'));
+      }
+    `);
+
+    expect(convert(calls[0][0])).toBe('var(--cds-component-token-01, #000000)');
+    expect(convert(calls[1][0])).toBe('var(--cds-component-token-01, #ffffff)');
+  });
+
+  describe('is-subset-of-theme', () => {
+    it('should return true if a theme is a subset of a given theme map', async () => {
+      const { calls } = await render(`
+        @import '../component-tokens';
+        $theme-a: (
+          token-01: #000000,
+          token-02: #ffffff,
+          token-03: #ededed,
+        );
+        $theme-b: map-merge($theme-a, (
+          token-04: #efefef,
+        ));
+        $t: test(is-subset-of-theme($theme-b, $theme-a));
+      `);
+
+      expect(convert(calls[0][0])).toBe(true);
+    });
+
+    it('should return false if a theme is not a subset of a given theme map', async () => {
+      const { calls } = await render(`
+        @import '../component-tokens';
+        $theme-a: (
+          token-01: #000000,
+          token-02: #ffffff,
+          token-03: #ededed,
+        );
+        $theme-b: (
+          token-01: #ffffff,
+          token-02: #000000,
+          token-03: #ededed,
+          token-04: #efefef,
+        );
+        $t: test(is-subset-of-theme($theme-b, $theme-a));
+      `);
+
+      expect(convert(calls[0][0])).toBe(false);
+    });
+  });
+});
diff --git a/packages/components/src/globals/scss/_component-tokens.scss b/packages/components/src/globals/scss/_component-tokens.scss
index 8b8905606463..c38c21882732 100644
--- a/packages/components/src/globals/scss/_component-tokens.scss
+++ b/packages/components/src/globals/scss/_component-tokens.scss
@@ -9,35 +9,66 @@
 @import 'theme';
 @import 'feature-flags';
 
-$enable-css-custom-properties: feature-flag-enabled('enable-css-custom-properties');
-
 /// Get a component token value.
-/// @access public
+/// @access private
 /// @param {Map} $tokens - Map of component tokens
 /// @param {String} $name - Token name
 /// @example get-token-value($component-tokens, 'tag-background-red');
 /// @returns {String} Token value
 /// @group component-tokens
 @function get-token-value($tokens, $name) {
-  $options: map-get($tokens, $name);
+  @if map-has-key($tokens, $name) {
+    $config: map-get($tokens, $name);
+    $fallback: map-get($config, 'fallback');
+    $options: map-get($config, 'values');
 
-  @if type-of($options) == 'list' {
     @each $option in $options {
       $theme: map-get($option, 'theme');
 
-      @if $theme == $carbon--theme {
+      @if is-subset-of-theme($carbon--theme, $theme) == true {
         $value: map-get($option, 'value');
 
         @return if(
-          $enable-css-custom-properties == true,
+          feature-flag-enabled('enable-css-custom-properties'),
           var(--#{$custom-property-prefix}-#{$name}, #{$value}),
           $value
-        )
+        );
       }
+    }
+
+    @return if(
+      feature-flag-enabled('enable-css-custom-properties'),
+      var(--#{$custom-property-prefix}-#{$name}, #{$fallback}),
+      $fallback
+    );
+  } @else {
+    @error 'Unable to find the token #{$name} in the given map';
+    @return null;
+  }
+}
 
-      @error 'Unable to find value for theme';
+/// Check to see if $b is a subset of $a, meaning that all properties of the
+/// $b are defined in $a and have the same value.
+/// @access private
+/// @param {Map} $a The potential superset of $b
+/// @param {Map} $b The potential subset of $a
+/// @returns {Boolean}
+@function is-subset-of-theme($a, $b) {
+  @each $key, $expected in $b {
+    $actual: map-get($a, $key);
+    @if $expected != $actual {
+      @return false;
     }
   }
 
-  @error 'Unable to find list';
+  @return true;
+}
+
+/// @access private
+/// @param {Map} $tokens - Map of component tokens
+/// @example @include emit-component-tokens($component-tokens);
+@mixin emit-component-tokens($tokens) {
+  @each $key, $options in $tokens {
+    @include custom-property($key, get-token-value($tokens, $key));
+  }
 }
diff --git a/packages/test-utils/scss.js b/packages/test-utils/scss.js
index 8866615f1fa7..26e1bd8941b6 100644
--- a/packages/test-utils/scss.js
+++ b/packages/test-utils/scss.js
@@ -127,6 +127,9 @@ function createSassRenderer(cwd, initialData = '') {
       if (
         !error.message.includes('Function breakpoint finished without @return')
       ) {
+        if (error.formatted) {
+          throw new Error(error.formatted);
+        }
         throw error;
       }
       renderError = error;
diff --git a/packages/themes/scss/_mixins.scss b/packages/themes/scss/_mixins.scss
index c3fdfa6c29c7..6f1e2adce38d 100644
--- a/packages/themes/scss/_mixins.scss
+++ b/packages/themes/scss/_mixins.scss
@@ -34,29 +34,6 @@ $custom-property-prefix: 'cds' !default;
   @return map-get($theme-a, $token) != map-get($theme-b, $token);
 }
 
-/// @access private
-/// @param {Map} $tokens - Map of component tokens
-/// @param {String} $theme - Theme identifier
-/// @example @include emit-component-tokens($component-tokens);
-/// @group @carbon/themes
-@mixin emit-component-tokens($tokens) {
-  @if type-of($tokens) == 'map' {
-    @each $key, $options in $tokens {
-      @each $option in $options {
-        $theme: map-get($option, 'theme');
-
-        @if ($theme == $carbon--theme) {
-          $value: map-get($option, 'value');
-
-          --#{$custom-property-prefix}-#{$key}: #{$value};
-        }
-      }
-    }
-  } @else {
-    @error 'Unable to find map';
-  }
-}
-
 // We import mixins last so that these methods are made available to the
 // carbon--theme mixin
 @import './generated/mixins';