diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c503b5c31c0..303378e44b5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,6 +17,7 @@ jobs:
           cache: yarn
 
       - run: yarn --frozen-lockfile
+      - run: yarn run validate-tokens
       - run: yarn run type-check && yarn run build
       - run: yarn run lint
       - run: yarn run test
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a567f5e5b46..15d2a76add1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,5 +23,6 @@
     "{build,build-internal}/": true,
     "examples/*/build": true
   },
-  "typescript.tsdk": "./node_modules/typescript/lib"
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "cSpell.words": ["semibold"]
 }
diff --git a/loom.config.ts b/loom.config.ts
index efa029d024e..5595ac79a32 100644
--- a/loom.config.ts
+++ b/loom.config.ts
@@ -14,6 +14,7 @@ import {stylelint} from '@shopify/loom-plugin-stylelint';
 import {prettier} from '@shopify/loom-plugin-prettier';
 import replace from '@rollup/plugin-replace';
 import image from '@rollup/plugin-image';
+import json from '@rollup/plugin-json';
 
 import packageJSON from './package.json';
 import {styles} from './config/rollup/plugin-styles';
@@ -138,6 +139,9 @@ function rollupAdjustPluginsPlugin() {
         delimiters: ['', ''],
       }),
       image(),
+      json({
+        compact: true,
+      }),
       styles(stylesConfig),
     ];
   });
diff --git a/package.json b/package.json
index 5d33977efce..08f3b2fd44f 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,8 @@
     "readme-update-version": "node ./scripts/readme-update-version",
     "version": "yarn run readme-update-version",
     "storybook": "start-storybook -p 6006 --quiet",
-    "storybook:build": "build-storybook -o build-internal/storybook/static"
+    "storybook:build": "build-storybook -o build-internal/storybook/static",
+    "validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'"
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.10.0",
@@ -85,6 +86,7 @@
     "@babel/core": "^7.15.0",
     "@babel/node": "^7.14.9",
     "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/pluginutils": "^3.1.0",
     "@shopify/babel-preset": "^24.1.2",
@@ -111,6 +113,7 @@
     "@storybook/react": "^6.3.7",
     "@types/lodash": "^4.14.138",
     "@types/node": "^16.11.11",
+    "ajv-cli": "^5.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "chalk": "^2.4.2",
diff --git a/src/styles/polaris-tokens/Polaris.ase b/src/styles/polaris-tokens/Polaris.ase
new file mode 100644
index 00000000000..350fb033958
Binary files /dev/null and b/src/styles/polaris-tokens/Polaris.ase differ
diff --git a/src/styles/polaris-tokens/Polaris.clr b/src/styles/polaris-tokens/Polaris.clr
new file mode 100644
index 00000000000..3015b2ae6c6
Binary files /dev/null and b/src/styles/polaris-tokens/Polaris.clr differ
diff --git a/src/styles/polaris-tokens/Polaris.sketchpalette b/src/styles/polaris-tokens/Polaris.sketchpalette
new file mode 100644
index 00000000000..e0156975fb9
--- /dev/null
+++ b/src/styles/polaris-tokens/Polaris.sketchpalette
@@ -0,0 +1,402 @@
+{
+  "compatibleVersion": "2.0",
+  "pluginVersion": "2.21",
+  "colors": [
+    {
+      "name": "Purple Text",
+      "red": 0.3137254901960784,
+      "green": 0.28627450980392155,
+      "blue": 0.35294117647058826,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Darker",
+      "red": 0.13725490196078433,
+      "green": 0,
+      "blue": 0.3176470588235294,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Dark",
+      "red": 0.3137254901960784,
+      "green": 0.1411764705882353,
+      "blue": 0.5607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Purple",
+      "red": 0.611764705882353,
+      "green": 0.41568627450980394,
+      "blue": 0.8705882352941177,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Light",
+      "red": 0.8901960784313725,
+      "green": 0.8156862745098039,
+      "blue": 1,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Lighter",
+      "red": 0.9647058823529412,
+      "green": 0.9411764705882353,
+      "blue": 0.9921568627450981,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Text",
+      "red": 0.24313725490196078,
+      "green": 0.2549019607843137,
+      "blue": 0.3333333333333333,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Darker",
+      "red": 0,
+      "green": 0.023529411764705882,
+      "blue": 0.2235294117647059,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Dark",
+      "red": 0.12549019607843137,
+      "green": 0.1803921568627451,
+      "blue": 0.47058823529411764,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo",
+      "red": 0.3607843137254902,
+      "green": 0.41568627450980394,
+      "blue": 0.7686274509803922,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Light",
+      "red": 0.7019607843137254,
+      "green": 0.7372549019607844,
+      "blue": 0.9607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Lighter",
+      "red": 0.9568627450980393,
+      "green": 0.9607843137254902,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Text",
+      "red": 0.24313725490196078,
+      "green": 0.3058823529411765,
+      "blue": 0.3411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Darker",
+      "red": 0,
+      "green": 0.0784313725490196,
+      "blue": 0.1607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Dark",
+      "red": 0.03137254901960784,
+      "green": 0.3058823529411765,
+      "blue": 0.5411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Blue",
+      "red": 0,
+      "green": 0.43529411764705883,
+      "blue": 0.7333333333333333,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Light",
+      "red": 0.7058823529411765,
+      "green": 0.8823529411764706,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Lighter",
+      "red": 0.9215686274509803,
+      "green": 0.9607843137254902,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Text",
+      "red": 0.25098039215686274,
+      "green": 0.3254901960784314,
+      "blue": 0.3215686274509804,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Darker",
+      "red": 0,
+      "green": 0.19215686274509805,
+      "blue": 0.20784313725490197,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Dark",
+      "red": 0,
+      "green": 0.5176470588235295,
+      "blue": 0.5568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Teal",
+      "red": 0.2784313725490196,
+      "green": 0.7568627450980392,
+      "blue": 0.7490196078431373,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Light",
+      "red": 0.7176470588235294,
+      "green": 0.9254901960784314,
+      "blue": 0.9254901960784314,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Lighter",
+      "red": 0.8784313725490196,
+      "green": 0.9607843137254902,
+      "blue": 0.9607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Green Text",
+      "red": 0.2549019607843137,
+      "green": 0.30980392156862746,
+      "blue": 0.24313725490196078,
+      "alpha": 1
+    },
+    {
+      "name": "Green Darker",
+      "red": 0.09019607843137255,
+      "green": 0.21176470588235294,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Green Dark",
+      "red": 0.06274509803921569,
+      "green": 0.5019607843137255,
+      "blue": 0.2627450980392157,
+      "alpha": 1
+    },
+    {
+      "name": "Green",
+      "red": 0.3137254901960784,
+      "green": 0.7215686274509804,
+      "blue": 0.23529411764705882,
+      "alpha": 1
+    },
+    {
+      "name": "Green Light",
+      "red": 0.7333333333333333,
+      "green": 0.8980392156862745,
+      "blue": 0.7019607843137254,
+      "alpha": 1
+    },
+    {
+      "name": "Green Lighter",
+      "red": 0.8901960784313725,
+      "green": 0.9450980392156862,
+      "blue": 0.8745098039215686,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Text",
+      "red": 0.34901960784313724,
+      "green": 0.3176470588235294,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Darker",
+      "red": 0.3411764705882353,
+      "green": 0.23137254901960785,
+      "blue": 0,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Dark",
+      "red": 0.5411764705882353,
+      "green": 0.3803921568627451,
+      "blue": 0.08627450980392157,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow",
+      "red": 0.9333333333333333,
+      "green": 0.7607843137254902,
+      "blue": 0,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Light",
+      "red": 1,
+      "green": 0.9176470588235294,
+      "blue": 0.5411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Lighter",
+      "red": 0.9882352941176471,
+      "green": 0.9450980392156862,
+      "blue": 0.803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Text",
+      "red": 0.34901960784313724,
+      "green": 0.26666666666666666,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Darker",
+      "red": 0.2901960784313726,
+      "green": 0.08235294117647059,
+      "blue": 0.01568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Dark",
+      "red": 0.7529411764705882,
+      "green": 0.3411764705882353,
+      "blue": 0.09019607843137255,
+      "alpha": 1
+    },
+    {
+      "name": "Orange",
+      "red": 0.9568627450980393,
+      "green": 0.5764705882352941,
+      "blue": 0.25882352941176473,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Light",
+      "red": 1,
+      "green": 0.7725490196078432,
+      "blue": 0.5450980392156862,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Lighter",
+      "red": 0.9882352941176471,
+      "green": 0.9215686274509803,
+      "blue": 0.8588235294117647,
+      "alpha": 1
+    },
+    {
+      "name": "Red Text",
+      "red": 0.34509803921568627,
+      "green": 0.23529411764705882,
+      "blue": 0.20784313725490197,
+      "alpha": 1
+    },
+    {
+      "name": "Red Darker",
+      "red": 0.2,
+      "green": 0.00392156862745098,
+      "blue": 0.00392156862745098,
+      "alpha": 1
+    },
+    {
+      "name": "Red Dark",
+      "red": 0.7490196078431373,
+      "green": 0.027450980392156862,
+      "blue": 0.06666666666666667,
+      "alpha": 1
+    },
+    {
+      "name": "Red",
+      "red": 0.8705882352941177,
+      "green": 0.21176470588235294,
+      "blue": 0.09411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Red Light",
+      "red": 0.996078431372549,
+      "green": 0.6784313725490196,
+      "blue": 0.6039215686274509,
+      "alpha": 1
+    },
+    {
+      "name": "Red Lighter",
+      "red": 0.984313725490196,
+      "green": 0.9176470588235294,
+      "blue": 0.8980392156862745,
+      "alpha": 1
+    },
+    {
+      "name": "Ink",
+      "red": 0.12941176470588237,
+      "green": 0.16862745098039217,
+      "blue": 0.21176470588235294,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Light",
+      "red": 0.27058823529411763,
+      "green": 0.30980392156862746,
+      "blue": 0.3568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Lighter",
+      "red": 0.38823529411764707,
+      "green": 0.45098039215686275,
+      "blue": 0.5058823529411764,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Lightest",
+      "red": 0.5686274509803921,
+      "green": 0.6196078431372549,
+      "blue": 0.6705882352941176,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Dark",
+      "red": 0.7686274509803922,
+      "green": 0.803921568627451,
+      "blue": 0.8352941176470589,
+      "alpha": 1
+    },
+    {
+      "name": "Sky",
+      "red": 0.8745098039215686,
+      "green": 0.8901960784313725,
+      "blue": 0.9098039215686274,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Light",
+      "red": 0.9568627450980393,
+      "green": 0.9647058823529412,
+      "blue": 0.9725490196078431,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Lighter",
+      "red": 0.9764705882352941,
+      "green": 0.9803921568627451,
+      "blue": 0.984313725490196,
+      "alpha": 1
+    },
+    {"name": "Black", "red": 0, "green": 0, "blue": 0, "alpha": 1},
+    {"name": "White", "red": 1, "green": 1, "blue": 1, "alpha": 1}
+  ],
+  "gradients": [],
+  "images": []
+}
diff --git a/src/styles/polaris-tokens/color-filters.color-map.scss b/src/styles/polaris-tokens/color-filters.color-map.scss
new file mode 100644
index 00000000000..6cbd90731e1
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.color-map.scss
@@ -0,0 +1,148 @@
+$polaris-color-filters: (
+  'purple': (
+    'text': brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%)
+      hue-rotate(223deg) brightness(92%) contrast(86%),
+    'darker': brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%)
+      hue-rotate(265deg) brightness(99%) contrast(124%),
+    'dark': brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%)
+      hue-rotate(258deg) brightness(101%) contrast(93%),
+    'base': brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%)
+      hue-rotate(229deg) brightness(91%) contrast(91%),
+    'light': brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%)
+      hue-rotate(203deg) brightness(103%) contrast(104%),
+    'lighter': brightness(0) saturate(100%) invert(84%) sepia(15%)
+      saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%),
+  ),
+  'indigo': (
+    'text': brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%)
+      hue-rotate(195deg) brightness(97%) contrast(94%),
+    'darker': brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%)
+      hue-rotate(229deg) brightness(72%) contrast(111%),
+    'dark': brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%)
+      hue-rotate(218deg) brightness(87%) contrast(98%),
+    'base': brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%)
+      hue-rotate(194deg) brightness(88%) contrast(84%),
+    'light': brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%)
+      hue-rotate(194deg) brightness(111%) contrast(92%),
+    'lighter': brightness(0) saturate(100%) invert(100%) sepia(25%)
+      saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%),
+  ),
+  'blue': (
+    'text': brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%)
+      hue-rotate(158deg) brightness(96%) contrast(89%),
+    'darker': brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%)
+      hue-rotate(195deg) brightness(97%) contrast(102%),
+    'dark': brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%)
+      hue-rotate(182deg) brightness(94%) contrast(101%),
+    'base': brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%)
+      hue-rotate(190deg) brightness(99%) contrast(101%),
+    'light': brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%)
+      hue-rotate(178deg) brightness(108%) contrast(96%),
+    'lighter': brightness(0) saturate(100%) invert(100%) sepia(94%)
+      saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%),
+  ),
+  'teal': (
+    'text': brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%)
+      hue-rotate(128deg) brightness(94%) contrast(93%),
+    'darker': brightness(0) saturate(100%) invert(15%) sepia(23%)
+      saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%),
+    'dark': brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%)
+      hue-rotate(168deg) brightness(93%) contrast(101%),
+    'base': brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%)
+      hue-rotate(130deg) brightness(92%) contrast(87%),
+    'light': brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%)
+      hue-rotate(122deg) brightness(97%) contrast(91%),
+    'lighter': brightness(0) saturate(100%) invert(87%) sepia(5%)
+      saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%),
+  ),
+  'green': (
+    'text': brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%)
+      hue-rotate(63deg) brightness(91%) contrast(91%),
+    'darker': brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%)
+      hue-rotate(118deg) brightness(93%) contrast(91%),
+    'dark': brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%)
+      hue-rotate(155deg) brightness(97%) contrast(87%),
+    'base': brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%)
+      hue-rotate(64deg) brightness(106%) contrast(91%),
+    'light': brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%)
+      hue-rotate(52deg) brightness(93%) contrast(93%),
+    'lighter': brightness(0) saturate(100%) invert(92%) sepia(51%)
+      saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%),
+  ),
+  'yellow': (
+    'text': brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%)
+      hue-rotate(11deg) brightness(97%) contrast(91%),
+    'darker': brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%)
+      hue-rotate(17deg) brightness(103%) contrast(103%),
+    'dark': brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%)
+      hue-rotate(0deg) brightness(93%) contrast(89%),
+    'base': brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%)
+      hue-rotate(5deg) brightness(100%) contrast(100%),
+    'light': brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%)
+      hue-rotate(355deg) brightness(103%) contrast(107%),
+    'lighter': brightness(0) saturate(100%) invert(88%) sepia(27%)
+      saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%),
+  ),
+  'orange': (
+    'text': brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%)
+      hue-rotate(348deg) brightness(99%) contrast(84%),
+    'darker': brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%)
+      hue-rotate(356deg) brightness(98%) contrast(99%),
+    'dark': brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%)
+      hue-rotate(5deg) brightness(96%) contrast(82%),
+    'base': brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%)
+      hue-rotate(340deg) brightness(105%) contrast(91%),
+    'light': brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%)
+      hue-rotate(335deg) brightness(101%) contrast(103%),
+    'lighter': brightness(0) saturate(100%) invert(93%) sepia(11%)
+      saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%),
+  ),
+  'red': (
+    'text': brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%)
+      hue-rotate(325deg) brightness(92%) contrast(83%),
+    'darker': brightness(0) saturate(100%) invert(12%) sepia(100%)
+      saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%),
+    'dark': brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%)
+      hue-rotate(353deg) brightness(75%) contrast(101%),
+    'base': brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%)
+      hue-rotate(353deg) brightness(89%) contrast(95%),
+    'light': brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%)
+      hue-rotate(313deg) brightness(101%) contrast(99%),
+    'lighter': brightness(0) saturate(100%) invert(89%) sepia(21%)
+      saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%),
+  ),
+  'ink': (
+    'base': brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%)
+      hue-rotate(171deg) brightness(99%) contrast(84%),
+    'light': brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%)
+      hue-rotate(173deg) brightness(83%) contrast(84%),
+    'lighter': brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%)
+      hue-rotate(166deg) brightness(95%) contrast(90%),
+    'lightest': brightness(0) saturate(100%) invert(68%) sepia(18%)
+      saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%),
+  ),
+  'sky': (
+    'dark': brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%)
+      hue-rotate(167deg) brightness(96%) contrast(91%),
+    'base': brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%)
+      hue-rotate(175deg) brightness(97%) contrast(87%),
+    'light': brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%)
+      hue-rotate(174deg) brightness(99%) contrast(96%),
+    'lighter': brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%)
+      hue-rotate(170deg) brightness(99%) contrast(99%),
+  ),
+  'black': (
+    'base': brightness(0) saturate(100%),
+  ),
+  'white': (
+    'base': brightness(0) saturate(100%) invert(100%),
+  ),
+  'icon': (
+    'base': brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%)
+      hue-rotate(169deg) brightness(95%) contrast(87%),
+  ),
+  'action': (
+    'base': brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%)
+      hue-rotate(162deg) brightness(95%) contrast(101%),
+  ),
+);
diff --git a/src/styles/polaris-tokens/color-filters.common.js b/src/styles/polaris-tokens/color-filters.common.js
new file mode 100644
index 00000000000..aaea582c84c
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.common.js
@@ -0,0 +1,116 @@
+module.exports = {
+  colorPurpleText:
+    'brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)',
+  colorPurpleDarker:
+    'brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)',
+  colorPurpleDark:
+    'brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)',
+  colorPurple:
+    'brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)',
+  colorPurpleLight:
+    'brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)',
+  colorPurpleLighter:
+    'brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)',
+  colorIndigoText:
+    'brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)',
+  colorIndigoDarker:
+    'brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)',
+  colorIndigoDark:
+    'brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)',
+  colorIndigo:
+    'brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)',
+  colorIndigoLight:
+    'brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)',
+  colorIndigoLighter:
+    'brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)',
+  colorBlueText:
+    'brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)',
+  colorBlueDarker:
+    'brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)',
+  colorBlueDark:
+    'brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)',
+  colorBlue:
+    'brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%)',
+  colorBlueLight:
+    'brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)',
+  colorBlueLighter:
+    'brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)',
+  colorTealText:
+    'brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)',
+  colorTealDarker:
+    'brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)',
+  colorTealDark:
+    'brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)',
+  colorTeal:
+    'brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)',
+  colorTealLight:
+    'brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)',
+  colorTealLighter:
+    'brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)',
+  colorGreenText:
+    'brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)',
+  colorGreenDarker:
+    'brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)',
+  colorGreenDark:
+    'brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)',
+  colorGreen:
+    'brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)',
+  colorGreenLight:
+    'brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)',
+  colorGreenLighter:
+    'brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)',
+  colorYellowText:
+    'brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)',
+  colorYellowDarker:
+    'brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)',
+  colorYellowDark:
+    'brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%)',
+  colorYellow:
+    'brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)',
+  colorYellowLight:
+    'brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)',
+  colorYellowLighter:
+    'brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)',
+  colorOrangeText:
+    'brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)',
+  colorOrangeDarker:
+    'brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)',
+  colorOrangeDark:
+    'brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)',
+  colorOrange:
+    'brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)',
+  colorOrangeLight:
+    'brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)',
+  colorOrangeLighter:
+    'brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)',
+  colorRedText:
+    'brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)',
+  colorRedDarker:
+    'brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)',
+  colorRedDark:
+    'brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)',
+  colorRed:
+    'brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)',
+  colorRedLight:
+    'brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)',
+  colorRedLighter:
+    'brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)',
+  colorInk:
+    'brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)',
+  colorInkLight:
+    'brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)',
+  colorInkLighter:
+    'brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)',
+  colorInkLightest:
+    'brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)',
+  colorSkyDark:
+    'brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)',
+  colorSky:
+    'brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)',
+  colorSkyLight:
+    'brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)',
+  colorSkyLighter:
+    'brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)',
+  colorBlack: 'brightness(0) saturate(100%)',
+  colorWhite: 'brightness(0) saturate(100%) invert(100%)',
+};
diff --git a/src/styles/polaris-tokens/color-filters.custom-properties.css b/src/styles/polaris-tokens/color-filters.custom-properties.css
new file mode 100644
index 00000000000..63eabba3a5f
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.custom-properties.css
@@ -0,0 +1,116 @@
+:root {
+  --color-purple-text: brightness(0) saturate(100%) invert(29%) sepia(3%)
+    saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%);
+  --color-purple-darker: brightness(0) saturate(100%) invert(8%) sepia(38%)
+    saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%);
+  --color-purple-dark: brightness(0) saturate(100%) invert(12%) sepia(46%)
+    saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%);
+  --color-purple: brightness(0) saturate(100%) invert(49%) sepia(77%)
+    saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%);
+  --color-purple-light: brightness(0) saturate(100%) invert(82%) sepia(13%)
+    saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%);
+  --color-purple-lighter: brightness(0) saturate(100%) invert(84%) sepia(15%)
+    saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%);
+  --color-indigo-text: brightness(0) saturate(100%) invert(24%) sepia(11%)
+    saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%);
+  --color-indigo-darker: brightness(0) saturate(100%) invert(5%) sepia(81%)
+    saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%);
+  --color-indigo-dark: brightness(0) saturate(100%) invert(17%) sepia(28%)
+    saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%);
+  --color-indigo: brightness(0) saturate(100%) invert(45%) sepia(17%)
+    saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%);
+  --color-indigo-light: brightness(0) saturate(100%) invert(82%) sepia(37%)
+    saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%);
+  --color-indigo-lighter: brightness(0) saturate(100%) invert(100%) sepia(25%)
+    saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%);
+  --color-blue-text: brightness(0) saturate(100%) invert(27%) sepia(13%)
+    saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%);
+  --color-blue-darker: brightness(0) saturate(100%) invert(5%) sepia(33%)
+    saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%);
+  --color-blue-dark: brightness(0) saturate(100%) invert(22%) sepia(70%)
+    saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%);
+  --color-blue: brightness(0) saturate(100%) invert(19%) sepia(98%)
+    saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%);
+  --color-blue-light: brightness(0) saturate(100%) invert(80%) sepia(7%)
+    saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%);
+  --color-blue-lighter: brightness(0) saturate(100%) invert(100%) sepia(94%)
+    saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%);
+  --color-teal-text: brightness(0) saturate(100%) invert(31%) sepia(11%)
+    saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%);
+  --color-teal-darker: brightness(0) saturate(100%) invert(15%) sepia(23%)
+    saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%);
+  --color-teal-dark: brightness(0) saturate(100%) invert(28%) sepia(83%)
+    saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%);
+  --color-teal: brightness(0) saturate(100%) invert(72%) sepia(8%)
+    saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%);
+  --color-teal-light: brightness(0) saturate(100%) invert(95%) sepia(12%)
+    saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%);
+  --color-teal-lighter: brightness(0) saturate(100%) invert(87%) sepia(5%)
+    saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%);
+  --color-green-text: brightness(0) saturate(100%) invert(30%) sepia(8%)
+    saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%);
+  --color-green-darker: brightness(0) saturate(100%) invert(15%) sepia(32%)
+    saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%);
+  --color-green-dark: brightness(0) saturate(100%) invert(18%) sepia(75%)
+    saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%);
+  --color-green: brightness(0) saturate(100%) invert(56%) sepia(10%)
+    saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%);
+  --color-green-light: brightness(0) saturate(100%) invert(93%) sepia(15%)
+    saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%);
+  --color-green-lighter: brightness(0) saturate(100%) invert(92%) sepia(51%)
+    saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%);
+  --color-yellow-text: brightness(0) saturate(100%) invert(28%) sepia(42%)
+    saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%);
+  --color-yellow-darker: brightness(0) saturate(100%) invert(19%) sepia(75%)
+    saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%);
+  --color-yellow-dark: brightness(0) saturate(100%) invert(37%) sepia(51%)
+    saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%);
+  --color-yellow: brightness(0) saturate(100%) invert(65%) sepia(91%)
+    saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%);
+  --color-yellow-light: brightness(0) saturate(100%) invert(77%) sepia(72%)
+    saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%);
+  --color-yellow-lighter: brightness(0) saturate(100%) invert(88%) sepia(27%)
+    saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%);
+  --color-orange-text: brightness(0) saturate(100%) invert(23%) sepia(18%)
+    saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%);
+  --color-orange-darker: brightness(0) saturate(100%) invert(9%) sepia(83%)
+    saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%);
+  --color-orange-dark: brightness(0) saturate(100%) invert(29%) sepia(94%)
+    saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%);
+  --color-orange: brightness(0) saturate(100%) invert(54%) sepia(86%)
+    saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%);
+  --color-orange-light: brightness(0) saturate(100%) invert(77%) sepia(39%)
+    saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%);
+  --color-orange-lighter: brightness(0) saturate(100%) invert(93%) sepia(11%)
+    saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%);
+  --color-red-text: brightness(0) saturate(100%) invert(22%) sepia(9%)
+    saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%);
+  --color-red-darker: brightness(0) saturate(100%) invert(12%) sepia(100%)
+    saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%);
+  --color-red-dark: brightness(0) saturate(100%) invert(12%) sepia(100%)
+    saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%);
+  --color-red: brightness(0) saturate(100%) invert(28%) sepia(67%)
+    saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%);
+  --color-red-light: brightness(0) saturate(100%) invert(80%) sepia(9%)
+    saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%);
+  --color-red-lighter: brightness(0) saturate(100%) invert(89%) sepia(21%)
+    saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%);
+  --color-ink: brightness(0) saturate(100%) invert(10%) sepia(10%)
+    saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%);
+  --color-ink-light: brightness(0) saturate(100%) invert(32%) sepia(9%)
+    saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%);
+  --color-ink-lighter: brightness(0) saturate(100%) invert(45%) sepia(8%)
+    saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%);
+  --color-ink-lightest: brightness(0) saturate(100%) invert(68%) sepia(18%)
+    saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%);
+  --color-sky-dark: brightness(0) saturate(100%) invert(86%) sepia(4%)
+    saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%);
+  --color-sky: brightness(0) saturate(100%) invert(100%) sepia(95%)
+    saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%);
+  --color-sky-light: brightness(0) saturate(100%) invert(99%) sepia(12%)
+    saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%);
+  --color-sky-lighter: brightness(0) saturate(100%) invert(99%) sepia(1%)
+    saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%);
+  --color-black: brightness(0) saturate(100%);
+  --color-white: brightness(0) saturate(100%) invert(100%);
+}
diff --git a/src/styles/polaris-tokens/color-filters.json b/src/styles/polaris-tokens/color-filters.json
new file mode 100644
index 00000000000..f23a41b0f04
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.json
@@ -0,0 +1,60 @@
+{
+  "color-purple-text": "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
+  "color-purple-darker": "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
+  "color-purple-dark": "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
+  "color-purple": "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
+  "color-purple-light": "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
+  "color-purple-lighter": "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
+  "color-indigo-text": "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
+  "color-indigo-darker": "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
+  "color-indigo-dark": "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
+  "color-indigo": "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
+  "color-indigo-light": "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
+  "color-indigo-lighter": "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
+  "color-blue-text": "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
+  "color-blue-darker": "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
+  "color-blue-dark": "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
+  "color-blue": "brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%)",
+  "color-blue-light": "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
+  "color-blue-lighter": "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
+  "color-teal-text": "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
+  "color-teal-darker": "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
+  "color-teal-dark": "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
+  "color-teal": "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
+  "color-teal-light": "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
+  "color-teal-lighter": "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
+  "color-green-text": "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
+  "color-green-darker": "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
+  "color-green-dark": "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
+  "color-green": "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
+  "color-green-light": "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
+  "color-green-lighter": "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
+  "color-yellow-text": "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
+  "color-yellow-darker": "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
+  "color-yellow-dark": "brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%)",
+  "color-yellow": "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
+  "color-yellow-light": "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
+  "color-yellow-lighter": "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
+  "color-orange-text": "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
+  "color-orange-darker": "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
+  "color-orange-dark": "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
+  "color-orange": "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
+  "color-orange-light": "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
+  "color-orange-lighter": "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
+  "color-red-text": "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
+  "color-red-darker": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
+  "color-red-dark": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
+  "color-red": "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
+  "color-red-light": "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
+  "color-red-lighter": "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
+  "color-ink": "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
+  "color-ink-light": "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
+  "color-ink-lighter": "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
+  "color-ink-lightest": "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
+  "color-sky-dark": "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
+  "color-sky": "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
+  "color-sky-light": "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
+  "color-sky-lighter": "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
+  "color-black": "brightness(0) saturate(100%)",
+  "color-white": "brightness(0) saturate(100%) invert(100%)"
+}
diff --git a/src/styles/polaris-tokens/color-filters.map.scss b/src/styles/polaris-tokens/color-filters.map.scss
new file mode 100644
index 00000000000..8c9c1d5c1f0
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.map.scss
@@ -0,0 +1,240 @@
+$polaris-color-filters-map: (
+  'color-purple-text': (
+    brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%)
+      hue-rotate(223deg) brightness(92%) contrast(86%),
+  ),
+  'color-purple-darker': (
+    brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%)
+      hue-rotate(265deg) brightness(99%) contrast(124%),
+  ),
+  'color-purple-dark': (
+    brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%)
+      hue-rotate(258deg) brightness(101%) contrast(93%),
+  ),
+  'color-purple': (
+    brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%)
+      hue-rotate(229deg) brightness(91%) contrast(91%),
+  ),
+  'color-purple-light': (
+    brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%)
+      hue-rotate(203deg) brightness(103%) contrast(104%),
+  ),
+  'color-purple-lighter': (
+    brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%)
+      hue-rotate(219deg) brightness(110%) contrast(98%),
+  ),
+  'color-indigo-text': (
+    brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%)
+      hue-rotate(195deg) brightness(97%) contrast(94%),
+  ),
+  'color-indigo-darker': (
+    brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%)
+      hue-rotate(229deg) brightness(72%) contrast(111%),
+  ),
+  'color-indigo-dark': (
+    brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%)
+      hue-rotate(218deg) brightness(87%) contrast(98%),
+  ),
+  'color-indigo': (
+    brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%)
+      hue-rotate(194deg) brightness(88%) contrast(84%),
+  ),
+  'color-indigo-light': (
+    brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%)
+      hue-rotate(194deg) brightness(111%) contrast(92%),
+  ),
+  'color-indigo-lighter': (
+    brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%)
+      hue-rotate(179deg) brightness(100%) contrast(96%),
+  ),
+  'color-blue-text': (
+    brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%)
+      hue-rotate(158deg) brightness(96%) contrast(89%),
+  ),
+  'color-blue-darker': (
+    brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%)
+      hue-rotate(195deg) brightness(97%) contrast(102%),
+  ),
+  'color-blue-dark': (
+    brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%)
+      hue-rotate(182deg) brightness(94%) contrast(101%),
+  ),
+  'color-blue': (
+    brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%)
+      hue-rotate(190deg) brightness(99%) contrast(101%),
+  ),
+  'color-blue-light': (
+    brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%)
+      hue-rotate(178deg) brightness(108%) contrast(96%),
+  ),
+  'color-blue-lighter': (
+    brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%)
+      hue-rotate(175deg) brightness(103%) contrast(96%),
+  ),
+  'color-teal-text': (
+    brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%)
+      hue-rotate(128deg) brightness(94%) contrast(93%),
+  ),
+  'color-teal-darker': (
+    brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%)
+      hue-rotate(141deg) brightness(96%) contrast(104%),
+  ),
+  'color-teal-dark': (
+    brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%)
+      hue-rotate(168deg) brightness(93%) contrast(101%),
+  ),
+  'color-teal': (
+    brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%)
+      hue-rotate(130deg) brightness(92%) contrast(87%),
+  ),
+  'color-teal-light': (
+    brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%)
+      hue-rotate(122deg) brightness(97%) contrast(91%),
+  ),
+  'color-teal-lighter': (
+    brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%)
+      hue-rotate(173deg) brightness(114%) contrast(92%),
+  ),
+  'color-green-text': (
+    brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%)
+      hue-rotate(63deg) brightness(91%) contrast(91%),
+  ),
+  'color-green-darker': (
+    brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%)
+      hue-rotate(118deg) brightness(93%) contrast(91%),
+  ),
+  'color-green-dark': (
+    brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%)
+      hue-rotate(155deg) brightness(97%) contrast(87%),
+  ),
+  'color-green': (
+    brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%)
+      hue-rotate(64deg) brightness(106%) contrast(91%),
+  ),
+  'color-green-light': (
+    brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%)
+      hue-rotate(52deg) brightness(93%) contrast(93%),
+  ),
+  'color-green-lighter': (
+    brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%)
+      hue-rotate(46deg) brightness(108%) contrast(89%),
+  ),
+  'color-yellow-text': (
+    brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%)
+      hue-rotate(11deg) brightness(97%) contrast(91%),
+  ),
+  'color-yellow-darker': (
+    brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%)
+      hue-rotate(17deg) brightness(103%) contrast(103%),
+  ),
+  'color-yellow-dark': (
+    brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%)
+      hue-rotate(0deg) brightness(93%) contrast(89%),
+  ),
+  'color-yellow': (
+    brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%)
+      hue-rotate(5deg) brightness(100%) contrast(100%),
+  ),
+  'color-yellow-light': (
+    brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%)
+      hue-rotate(355deg) brightness(103%) contrast(107%),
+  ),
+  'color-yellow-lighter': (
+    brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%)
+      hue-rotate(357deg) brightness(103%) contrast(98%),
+  ),
+  'color-orange-text': (
+    brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%)
+      hue-rotate(348deg) brightness(99%) contrast(84%),
+  ),
+  'color-orange-darker': (
+    brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%)
+      hue-rotate(356deg) brightness(98%) contrast(99%),
+  ),
+  'color-orange-dark': (
+    brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%)
+      hue-rotate(5deg) brightness(96%) contrast(82%),
+  ),
+  'color-orange': (
+    brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%)
+      hue-rotate(340deg) brightness(105%) contrast(91%),
+  ),
+  'color-orange-light': (
+    brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%)
+      hue-rotate(335deg) brightness(101%) contrast(103%),
+  ),
+  'color-orange-lighter': (
+    brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%)
+      hue-rotate(312deg) brightness(107%) contrast(98%),
+  ),
+  'color-red-text': (
+    brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%)
+      hue-rotate(325deg) brightness(92%) contrast(83%),
+  ),
+  'color-red-darker': (
+    brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%)
+      hue-rotate(353deg) brightness(75%) contrast(101%),
+  ),
+  'color-red-dark': (
+    brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%)
+      hue-rotate(353deg) brightness(75%) contrast(101%),
+  ),
+  'color-red': (
+    brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%)
+      hue-rotate(353deg) brightness(89%) contrast(95%),
+  ),
+  'color-red-light': (
+    brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%)
+      hue-rotate(313deg) brightness(101%) contrast(99%),
+  ),
+  'color-red-lighter': (
+    brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%)
+      hue-rotate(324deg) brightness(102%) contrast(97%),
+  ),
+  'color-ink': (
+    brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%)
+      hue-rotate(171deg) brightness(99%) contrast(84%),
+  ),
+  'color-ink-light': (
+    brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%)
+      hue-rotate(173deg) brightness(83%) contrast(84%),
+  ),
+  'color-ink-lighter': (
+    brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%)
+      hue-rotate(166deg) brightness(95%) contrast(90%),
+  ),
+  'color-ink-lightest': (
+    brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%)
+      hue-rotate(169deg) brightness(88%) contrast(90%),
+  ),
+  'color-sky-dark': (
+    brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%)
+      hue-rotate(167deg) brightness(96%) contrast(91%),
+  ),
+  'color-sky': (
+    brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%)
+      hue-rotate(175deg) brightness(97%) contrast(87%),
+  ),
+  'color-sky-light': (
+    brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%)
+      hue-rotate(174deg) brightness(99%) contrast(96%),
+  ),
+  'color-sky-lighter': (
+    brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%)
+      hue-rotate(170deg) brightness(99%) contrast(99%),
+  ),
+  'color-black': (
+    brightness(0) saturate(100%),
+  ),
+  'color-white': (
+    brightness(0) saturate(100%) invert(100%),
+  ),
+  'icon': (
+    'base': brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%)
+      hue-rotate(169deg) brightness(95%) contrast(87%),
+  ),
+  'action': (
+    'base': brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%)
+      hue-rotate(162deg) brightness(95%) contrast(101%),
+  ),
+);
diff --git a/src/styles/polaris-tokens/color-filters.raw.json b/src/styles/polaris-tokens/color-filters.raw.json
new file mode 100644
index 00000000000..a06a0fd156d
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.raw.json
@@ -0,0 +1,586 @@
+{
+  "aliases": {
+    "color-sky-light": {
+      "value": "#f4f6f8"
+    },
+    "color-ink-lightest": {
+      "value": "#919eab"
+    },
+    "color-green-text": {
+      "value": "#414f3e"
+    },
+    "color-orange-light": {
+      "value": "#ffc58b"
+    },
+    "color-orange-text": {
+      "value": "#594430"
+    },
+    "color-green-light": {
+      "value": "#bbe5b3"
+    },
+    "color-blue": {
+      "value": "#006fbb"
+    },
+    "color-indigo-light": {
+      "value": "#b3bcf5"
+    },
+    "color-yellow-dark": {
+      "value": "#8a6116"
+    },
+    "color-ink-light": {
+      "value": "#454f5b"
+    },
+    "color-purple": {
+      "value": "#9c6ade"
+    },
+    "color-teal": {
+      "value": "#47c1bf"
+    },
+    "color-yellow-light": {
+      "value": "#ffea8a"
+    },
+    "color-indigo-dark": {
+      "value": "#202e78"
+    },
+    "color-red": {
+      "value": "#de3618"
+    },
+    "color-red-darker": {
+      "value": "#330101"
+    },
+    "color-green-dark": {
+      "value": "#108043"
+    },
+    "color-purple-darker": {
+      "value": "#230051"
+    },
+    "color-teal-darker": {
+      "value": "#003135"
+    },
+    "color-orange-dark": {
+      "value": "#c05717"
+    },
+    "color-blue-darker": {
+      "value": "#001429"
+    },
+    "color-sky-dark": {
+      "value": "#c4cdd5"
+    },
+    "color-sky-lighter": {
+      "value": "#f9fafb"
+    },
+    "color-blue-light": {
+      "value": "#b4e1fa"
+    },
+    "color-orange-lighter": {
+      "value": "#fcebdb"
+    },
+    "color-purple-light": {
+      "value": "#e3d0ff"
+    },
+    "color-green-lighter": {
+      "value": "#e3f1df"
+    },
+    "color-teal-light": {
+      "value": "#b7ecec"
+    },
+    "color-red-light": {
+      "value": "#fead9a"
+    },
+    "color-yellow-darker": {
+      "value": "#573b00"
+    },
+    "color-ink-lighter": {
+      "value": "#637381"
+    },
+    "color-indigo-lighter": {
+      "value": "#f4f5fa"
+    },
+    "color-red-text": {
+      "value": "#583c35"
+    },
+    "color-teal-text": {
+      "value": "#405352"
+    },
+    "color-indigo-darker": {
+      "value": "#000639"
+    },
+    "color-purple-text": {
+      "value": "#50495a"
+    },
+    "color-yellow-lighter": {
+      "value": "#fcf1cd"
+    },
+    "color-black": {
+      "value": "#000000"
+    },
+    "color-blue-text": {
+      "value": "#3e4e57"
+    },
+    "color-green-darker": {
+      "value": "#173630"
+    },
+    "color-sky": {
+      "value": "#dfe3e8"
+    },
+    "color-orange-darker": {
+      "value": "#4a1504"
+    },
+    "color-orange": {
+      "value": "#f49342"
+    },
+    "color-green": {
+      "value": "#50b83c"
+    },
+    "color-blue-lighter": {
+      "value": "#ebf5fa"
+    },
+    "color-indigo": {
+      "value": "#5c6ac4"
+    },
+    "color-red-dark": {
+      "value": "#bf0711"
+    },
+    "color-ink": {
+      "value": "#212b36"
+    },
+    "color-purple-lighter": {
+      "value": "#f6f0fd"
+    },
+    "color-yellow-text": {
+      "value": "#595130"
+    },
+    "color-teal-lighter": {
+      "value": "#e0f5f5"
+    },
+    "color-teal-dark": {
+      "value": "#00848e"
+    },
+    "color-purple-dark": {
+      "value": "#50248f"
+    },
+    "color-red-lighter": {
+      "value": "#fbeae5"
+    },
+    "color-yellow": {
+      "value": "#eec200"
+    },
+    "color-indigo-text": {
+      "value": "#3e4155"
+    },
+    "color-white": {
+      "value": "#ffffff"
+    },
+    "color-blue-dark": {
+      "value": "#084e8a"
+    }
+  },
+  "props": {
+    "color-purple-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-purple-text",
+      "value": "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
+      "originalValue": "{!color-purple-text}"
+    },
+    "color-purple-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-darker",
+      "value": "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
+      "originalValue": "{!color-purple-darker}"
+    },
+    "color-purple-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-dark",
+      "value": "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
+      "originalValue": "{!color-purple-dark}"
+    },
+    "color-purple": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple",
+      "value": "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
+      "originalValue": "{!color-purple}"
+    },
+    "color-purple-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-light",
+      "value": "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
+      "originalValue": "{!color-purple-light}"
+    },
+    "color-purple-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-lighter",
+      "value": "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
+      "originalValue": "{!color-purple-lighter}"
+    },
+    "color-indigo-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-indigo-text",
+      "value": "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
+      "originalValue": "{!color-indigo-text}"
+    },
+    "color-indigo-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-darker",
+      "value": "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
+      "originalValue": "{!color-indigo-darker}"
+    },
+    "color-indigo-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-dark",
+      "value": "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
+      "originalValue": "{!color-indigo-dark}"
+    },
+    "color-indigo": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo",
+      "value": "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
+      "originalValue": "{!color-indigo}"
+    },
+    "color-indigo-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-light",
+      "value": "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
+      "originalValue": "{!color-indigo-light}"
+    },
+    "color-indigo-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-lighter",
+      "value": "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
+      "originalValue": "{!color-indigo-lighter}"
+    },
+    "color-blue-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-blue-text",
+      "value": "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
+      "originalValue": "{!color-blue-text}"
+    },
+    "color-blue-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-darker",
+      "value": "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
+      "originalValue": "{!color-blue-darker}"
+    },
+    "color-blue-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-dark",
+      "value": "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
+      "originalValue": "{!color-blue-dark}"
+    },
+    "color-blue": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue",
+      "value": "brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%)",
+      "originalValue": "{!color-blue}"
+    },
+    "color-blue-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-light",
+      "value": "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
+      "originalValue": "{!color-blue-light}"
+    },
+    "color-blue-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-lighter",
+      "value": "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
+      "originalValue": "{!color-blue-lighter}"
+    },
+    "color-teal-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-teal-text",
+      "value": "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
+      "originalValue": "{!color-teal-text}"
+    },
+    "color-teal-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-darker",
+      "value": "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
+      "originalValue": "{!color-teal-darker}"
+    },
+    "color-teal-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-dark",
+      "value": "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
+      "originalValue": "{!color-teal-dark}"
+    },
+    "color-teal": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal",
+      "value": "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
+      "originalValue": "{!color-teal}"
+    },
+    "color-teal-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-light",
+      "value": "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
+      "originalValue": "{!color-teal-light}"
+    },
+    "color-teal-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-lighter",
+      "value": "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
+      "originalValue": "{!color-teal-lighter}"
+    },
+    "color-green-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-green-text",
+      "value": "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
+      "originalValue": "{!color-green-text}"
+    },
+    "color-green-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-darker",
+      "value": "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
+      "originalValue": "{!color-green-darker}"
+    },
+    "color-green-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-dark",
+      "value": "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
+      "originalValue": "{!color-green-dark}"
+    },
+    "color-green": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green",
+      "value": "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
+      "originalValue": "{!color-green}"
+    },
+    "color-green-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-light",
+      "value": "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
+      "originalValue": "{!color-green-light}"
+    },
+    "color-green-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-lighter",
+      "value": "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
+      "originalValue": "{!color-green-lighter}"
+    },
+    "color-yellow-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-yellow-text",
+      "value": "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
+      "originalValue": "{!color-yellow-text}"
+    },
+    "color-yellow-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-darker",
+      "value": "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
+      "originalValue": "{!color-yellow-darker}"
+    },
+    "color-yellow-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-dark",
+      "value": "brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%)",
+      "originalValue": "{!color-yellow-dark}"
+    },
+    "color-yellow": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow",
+      "value": "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
+      "originalValue": "{!color-yellow}"
+    },
+    "color-yellow-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-light",
+      "value": "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
+      "originalValue": "{!color-yellow-light}"
+    },
+    "color-yellow-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-lighter",
+      "value": "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
+      "originalValue": "{!color-yellow-lighter}"
+    },
+    "color-orange-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-orange-text",
+      "value": "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
+      "originalValue": "{!color-orange-text}"
+    },
+    "color-orange-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-darker",
+      "value": "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
+      "originalValue": "{!color-orange-darker}"
+    },
+    "color-orange-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-dark",
+      "value": "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
+      "originalValue": "{!color-orange-dark}"
+    },
+    "color-orange": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange",
+      "value": "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
+      "originalValue": "{!color-orange}"
+    },
+    "color-orange-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-light",
+      "value": "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
+      "originalValue": "{!color-orange-light}"
+    },
+    "color-orange-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-lighter",
+      "value": "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
+      "originalValue": "{!color-orange-lighter}"
+    },
+    "color-red-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-red-text",
+      "value": "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
+      "originalValue": "{!color-red-text}"
+    },
+    "color-red-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-darker",
+      "value": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
+      "originalValue": "{!color-red-darker}"
+    },
+    "color-red-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-dark",
+      "value": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
+      "originalValue": "{!color-red-dark}"
+    },
+    "color-red": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red",
+      "value": "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
+      "originalValue": "{!color-red}"
+    },
+    "color-red-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-light",
+      "value": "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
+      "originalValue": "{!color-red-light}"
+    },
+    "color-red-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-lighter",
+      "value": "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
+      "originalValue": "{!color-red-lighter}"
+    },
+    "color-ink": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink",
+      "value": "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
+      "originalValue": "{!color-ink}"
+    },
+    "color-ink-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-light",
+      "value": "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
+      "originalValue": "{!color-ink-light}"
+    },
+    "color-ink-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lighter",
+      "value": "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
+      "originalValue": "{!color-ink-lighter}"
+    },
+    "color-ink-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lightest",
+      "value": "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
+      "originalValue": "{!color-ink-lightest}"
+    },
+    "color-sky-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-dark",
+      "value": "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
+      "originalValue": "{!color-sky-dark}"
+    },
+    "color-sky": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky",
+      "value": "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
+      "originalValue": "{!color-sky}"
+    },
+    "color-sky-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-light",
+      "value": "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
+      "originalValue": "{!color-sky-light}"
+    },
+    "color-sky-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-lighter",
+      "value": "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
+      "originalValue": "{!color-sky-lighter}"
+    },
+    "color-black": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-black",
+      "value": "brightness(0) saturate(100%)",
+      "originalValue": "{!color-black}"
+    },
+    "color-white": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-white",
+      "value": "brightness(0) saturate(100%) invert(100%)",
+      "originalValue": "{!color-white}"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/color-filters.scss b/src/styles/polaris-tokens/color-filters.scss
new file mode 100644
index 00000000000..f3f637bcecf
--- /dev/null
+++ b/src/styles/polaris-tokens/color-filters.scss
@@ -0,0 +1,114 @@
+$color-purple-text: brightness(0) saturate(100%) invert(29%) sepia(3%)
+  saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%);
+$color-purple-darker: brightness(0) saturate(100%) invert(8%) sepia(38%)
+  saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%);
+$color-purple-dark: brightness(0) saturate(100%) invert(12%) sepia(46%)
+  saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%);
+$color-purple: brightness(0) saturate(100%) invert(49%) sepia(77%)
+  saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%);
+$color-purple-light: brightness(0) saturate(100%) invert(82%) sepia(13%)
+  saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%);
+$color-purple-lighter: brightness(0) saturate(100%) invert(84%) sepia(15%)
+  saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%);
+$color-indigo-text: brightness(0) saturate(100%) invert(24%) sepia(11%)
+  saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%);
+$color-indigo-darker: brightness(0) saturate(100%) invert(5%) sepia(81%)
+  saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%);
+$color-indigo-dark: brightness(0) saturate(100%) invert(17%) sepia(28%)
+  saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%);
+$color-indigo: brightness(0) saturate(100%) invert(45%) sepia(17%)
+  saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%);
+$color-indigo-light: brightness(0) saturate(100%) invert(82%) sepia(37%)
+  saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%);
+$color-indigo-lighter: brightness(0) saturate(100%) invert(100%) sepia(25%)
+  saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%);
+$color-blue-text: brightness(0) saturate(100%) invert(27%) sepia(13%)
+  saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%);
+$color-blue-darker: brightness(0) saturate(100%) invert(5%) sepia(33%)
+  saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%);
+$color-blue-dark: brightness(0) saturate(100%) invert(22%) sepia(70%)
+  saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%);
+$color-blue: brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%)
+  hue-rotate(190deg) brightness(99%) contrast(101%);
+$color-blue-light: brightness(0) saturate(100%) invert(80%) sepia(7%)
+  saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%);
+$color-blue-lighter: brightness(0) saturate(100%) invert(100%) sepia(94%)
+  saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%);
+$color-teal-text: brightness(0) saturate(100%) invert(31%) sepia(11%)
+  saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%);
+$color-teal-darker: brightness(0) saturate(100%) invert(15%) sepia(23%)
+  saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%);
+$color-teal-dark: brightness(0) saturate(100%) invert(28%) sepia(83%)
+  saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%);
+$color-teal: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%)
+  hue-rotate(130deg) brightness(92%) contrast(87%);
+$color-teal-light: brightness(0) saturate(100%) invert(95%) sepia(12%)
+  saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%);
+$color-teal-lighter: brightness(0) saturate(100%) invert(87%) sepia(5%)
+  saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%);
+$color-green-text: brightness(0) saturate(100%) invert(30%) sepia(8%)
+  saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%);
+$color-green-darker: brightness(0) saturate(100%) invert(15%) sepia(32%)
+  saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%);
+$color-green-dark: brightness(0) saturate(100%) invert(18%) sepia(75%)
+  saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%);
+$color-green: brightness(0) saturate(100%) invert(56%) sepia(10%)
+  saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%);
+$color-green-light: brightness(0) saturate(100%) invert(93%) sepia(15%)
+  saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%);
+$color-green-lighter: brightness(0) saturate(100%) invert(92%) sepia(51%)
+  saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%);
+$color-yellow-text: brightness(0) saturate(100%) invert(28%) sepia(42%)
+  saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%);
+$color-yellow-darker: brightness(0) saturate(100%) invert(19%) sepia(75%)
+  saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%);
+$color-yellow-dark: brightness(0) saturate(100%) invert(37%) sepia(51%)
+  saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%);
+$color-yellow: brightness(0) saturate(100%) invert(65%) sepia(91%)
+  saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%);
+$color-yellow-light: brightness(0) saturate(100%) invert(77%) sepia(72%)
+  saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%);
+$color-yellow-lighter: brightness(0) saturate(100%) invert(88%) sepia(27%)
+  saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%);
+$color-orange-text: brightness(0) saturate(100%) invert(23%) sepia(18%)
+  saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%);
+$color-orange-darker: brightness(0) saturate(100%) invert(9%) sepia(83%)
+  saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%);
+$color-orange-dark: brightness(0) saturate(100%) invert(29%) sepia(94%)
+  saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%);
+$color-orange: brightness(0) saturate(100%) invert(54%) sepia(86%)
+  saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%);
+$color-orange-light: brightness(0) saturate(100%) invert(77%) sepia(39%)
+  saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%);
+$color-orange-lighter: brightness(0) saturate(100%) invert(93%) sepia(11%)
+  saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%);
+$color-red-text: brightness(0) saturate(100%) invert(22%) sepia(9%)
+  saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%);
+$color-red-darker: brightness(0) saturate(100%) invert(12%) sepia(100%)
+  saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%);
+$color-red-dark: brightness(0) saturate(100%) invert(12%) sepia(100%)
+  saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%);
+$color-red: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%)
+  hue-rotate(353deg) brightness(89%) contrast(95%);
+$color-red-light: brightness(0) saturate(100%) invert(80%) sepia(9%)
+  saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%);
+$color-red-lighter: brightness(0) saturate(100%) invert(89%) sepia(21%)
+  saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%);
+$color-ink: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%)
+  hue-rotate(171deg) brightness(99%) contrast(84%);
+$color-ink-light: brightness(0) saturate(100%) invert(32%) sepia(9%)
+  saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%);
+$color-ink-lighter: brightness(0) saturate(100%) invert(45%) sepia(8%)
+  saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%);
+$color-ink-lightest: brightness(0) saturate(100%) invert(68%) sepia(18%)
+  saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%);
+$color-sky-dark: brightness(0) saturate(100%) invert(86%) sepia(4%)
+  saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%);
+$color-sky: brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%)
+  hue-rotate(175deg) brightness(97%) contrast(87%);
+$color-sky-light: brightness(0) saturate(100%) invert(99%) sepia(12%)
+  saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%);
+$color-sky-lighter: brightness(0) saturate(100%) invert(99%) sepia(1%)
+  saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%);
+$color-black: brightness(0) saturate(100%);
+$color-white: brightness(0) saturate(100%) invert(100%);
diff --git a/src/styles/polaris-tokens/colors.android.xml b/src/styles/polaris-tokens/colors.android.xml
new file mode 100644
index 00000000000..bf523a6c004
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.android.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resources>
+    <color name="polaris_color_black">#ff000000</color>
+    <color name="polaris_color_blue">#ff006fbb</color>
+    <color name="polaris_color_blue_dark">#ff084e8a</color>
+    <color name="polaris_color_blue_darker">#ff001429</color>
+    <color name="polaris_color_blue_light">#ffb4e1fa</color>
+    <color name="polaris_color_blue_lighter">#ffebf5fa</color>
+    <color name="polaris_color_blue_text">#ff3e4e57</color>
+    <color name="polaris_color_green">#ff50b83c</color>
+    <color name="polaris_color_green_dark">#ff108043</color>
+    <color name="polaris_color_green_darker">#ff173630</color>
+    <color name="polaris_color_green_light">#ffbbe5b3</color>
+    <color name="polaris_color_green_lighter">#ffe3f1df</color>
+    <color name="polaris_color_green_text">#ff414f3e</color>
+    <color name="polaris_color_indigo">#ff5c6ac4</color>
+    <color name="polaris_color_indigo_dark">#ff202e78</color>
+    <color name="polaris_color_indigo_darker">#ff000639</color>
+    <color name="polaris_color_indigo_light">#ffb3bcf5</color>
+    <color name="polaris_color_indigo_lighter">#fff4f5fa</color>
+    <color name="polaris_color_indigo_text">#ff3e4155</color>
+    <color name="polaris_color_ink">#ff212b36</color>
+    <color name="polaris_color_ink_light">#ff454f5b</color>
+    <color name="polaris_color_ink_lighter">#ff637381</color>
+    <color name="polaris_color_ink_lightest">#ff919eab</color>
+    <color name="polaris_color_orange">#fff49342</color>
+    <color name="polaris_color_orange_dark">#ffc05717</color>
+    <color name="polaris_color_orange_darker">#ff4a1504</color>
+    <color name="polaris_color_orange_light">#ffffc58b</color>
+    <color name="polaris_color_orange_lighter">#fffcebdb</color>
+    <color name="polaris_color_orange_text">#ff594430</color>
+    <color name="polaris_color_purple">#ff9c6ade</color>
+    <color name="polaris_color_purple_dark">#ff50248f</color>
+    <color name="polaris_color_purple_darker">#ff230051</color>
+    <color name="polaris_color_purple_light">#ffe3d0ff</color>
+    <color name="polaris_color_purple_lighter">#fff6f0fd</color>
+    <color name="polaris_color_purple_text">#ff50495a</color>
+    <color name="polaris_color_red">#ffde3618</color>
+    <color name="polaris_color_red_dark">#ffbf0711</color>
+    <color name="polaris_color_red_darker">#ff330101</color>
+    <color name="polaris_color_red_light">#fffead9a</color>
+    <color name="polaris_color_red_lighter">#fffbeae5</color>
+    <color name="polaris_color_red_text">#ff583c35</color>
+    <color name="polaris_color_sky">#ffdfe3e8</color>
+    <color name="polaris_color_sky_dark">#ffc4cdd5</color>
+    <color name="polaris_color_sky_light">#fff4f6f8</color>
+    <color name="polaris_color_sky_lighter">#fff9fafb</color>
+    <color name="polaris_color_teal">#ff47c1bf</color>
+    <color name="polaris_color_teal_dark">#ff00848e</color>
+    <color name="polaris_color_teal_darker">#ff003135</color>
+    <color name="polaris_color_teal_light">#ffb7ecec</color>
+    <color name="polaris_color_teal_lighter">#ffe0f5f5</color>
+    <color name="polaris_color_teal_text">#ff405352</color>
+    <color name="polaris_color_white">#ffffffff</color>
+    <color name="polaris_color_yellow">#ffeec200</color>
+    <color name="polaris_color_yellow_dark">#ff8a6116</color>
+    <color name="polaris_color_yellow_darker">#ff573b00</color>
+    <color name="polaris_color_yellow_light">#ffffea8a</color>
+    <color name="polaris_color_yellow_lighter">#fffcf1cd</color>
+    <color name="polaris_color_yellow_text">#ff595130</color>
+</resources>
\ No newline at end of file
diff --git a/src/styles/polaris-tokens/colors.color-map.scss b/src/styles/polaris-tokens/colors.color-map.scss
new file mode 100644
index 00000000000..832780ee82e
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.color-map.scss
@@ -0,0 +1,84 @@
+$polaris-colors: (
+  'purple': (
+    'text': rgb(80, 73, 90),
+    'darker': rgb(35, 0, 81),
+    'dark': rgb(80, 36, 143),
+    'base': rgb(156, 106, 222),
+    'light': rgb(227, 208, 255),
+    'lighter': rgb(246, 240, 253),
+  ),
+  'indigo': (
+    'text': rgb(62, 65, 85),
+    'darker': rgb(0, 6, 57),
+    'dark': rgb(32, 46, 120),
+    'base': rgb(92, 106, 196),
+    'light': rgb(179, 188, 245),
+    'lighter': rgb(244, 245, 250),
+  ),
+  'blue': (
+    'text': rgb(62, 78, 87),
+    'darker': rgb(0, 20, 41),
+    'dark': rgb(8, 78, 138),
+    'base': rgb(0, 111, 187),
+    'light': rgb(180, 225, 250),
+    'lighter': rgb(235, 245, 250),
+  ),
+  'teal': (
+    'text': rgb(64, 83, 82),
+    'darker': rgb(0, 49, 53),
+    'dark': rgb(0, 132, 142),
+    'base': rgb(71, 193, 191),
+    'light': rgb(183, 236, 236),
+    'lighter': rgb(224, 245, 245),
+  ),
+  'green': (
+    'text': rgb(65, 79, 62),
+    'darker': rgb(23, 54, 48),
+    'dark': rgb(16, 128, 67),
+    'base': rgb(80, 184, 60),
+    'light': rgb(187, 229, 179),
+    'lighter': rgb(227, 241, 223),
+  ),
+  'yellow': (
+    'text': rgb(89, 81, 48),
+    'darker': rgb(87, 59, 0),
+    'dark': rgb(138, 97, 22),
+    'base': rgb(238, 194, 0),
+    'light': rgb(255, 234, 138),
+    'lighter': rgb(252, 241, 205),
+  ),
+  'orange': (
+    'text': rgb(89, 68, 48),
+    'darker': rgb(74, 21, 4),
+    'dark': rgb(192, 87, 23),
+    'base': rgb(244, 147, 66),
+    'light': rgb(255, 197, 139),
+    'lighter': rgb(252, 235, 219),
+  ),
+  'red': (
+    'text': rgb(88, 60, 53),
+    'darker': rgb(51, 1, 1),
+    'dark': rgb(191, 7, 17),
+    'base': rgb(222, 54, 24),
+    'light': rgb(254, 173, 154),
+    'lighter': rgb(251, 234, 229),
+  ),
+  'ink': (
+    'base': rgb(33, 43, 54),
+    'light': rgb(69, 79, 91),
+    'lighter': rgb(99, 115, 129),
+    'lightest': rgb(145, 158, 171),
+  ),
+  'sky': (
+    'dark': rgb(196, 205, 213),
+    'base': rgb(223, 227, 232),
+    'light': rgb(244, 246, 248),
+    'lighter': rgb(249, 250, 251),
+  ),
+  'black': (
+    'base': rgb(0, 0, 0),
+  ),
+  'white': (
+    'base': rgb(255, 255, 255),
+  ),
+);
diff --git a/src/styles/polaris-tokens/colors.common.js b/src/styles/polaris-tokens/colors.common.js
new file mode 100644
index 00000000000..f2874fe352a
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.common.js
@@ -0,0 +1,60 @@
+module.exports = {
+  colorPurpleText: 'rgb(80, 73, 90)',
+  colorPurpleDarker: 'rgb(35, 0, 81)',
+  colorPurpleDark: 'rgb(80, 36, 143)',
+  colorPurple: 'rgb(156, 106, 222)',
+  colorPurpleLight: 'rgb(227, 208, 255)',
+  colorPurpleLighter: 'rgb(246, 240, 253)',
+  colorIndigoText: 'rgb(62, 65, 85)',
+  colorIndigoDarker: 'rgb(0, 6, 57)',
+  colorIndigoDark: 'rgb(32, 46, 120)',
+  colorIndigo: 'rgb(92, 106, 196)',
+  colorIndigoLight: 'rgb(179, 188, 245)',
+  colorIndigoLighter: 'rgb(244, 245, 250)',
+  colorBlueText: 'rgb(62, 78, 87)',
+  colorBlueDarker: 'rgb(0, 20, 41)',
+  colorBlueDark: 'rgb(8, 78, 138)',
+  colorBlue: 'rgb(0, 111, 187)',
+  colorBlueLight: 'rgb(180, 225, 250)',
+  colorBlueLighter: 'rgb(235, 245, 250)',
+  colorTealText: 'rgb(64, 83, 82)',
+  colorTealDarker: 'rgb(0, 49, 53)',
+  colorTealDark: 'rgb(0, 132, 142)',
+  colorTeal: 'rgb(71, 193, 191)',
+  colorTealLight: 'rgb(183, 236, 236)',
+  colorTealLighter: 'rgb(224, 245, 245)',
+  colorGreenText: 'rgb(65, 79, 62)',
+  colorGreenDarker: 'rgb(23, 54, 48)',
+  colorGreenDark: 'rgb(16, 128, 67)',
+  colorGreen: 'rgb(80, 184, 60)',
+  colorGreenLight: 'rgb(187, 229, 179)',
+  colorGreenLighter: 'rgb(227, 241, 223)',
+  colorYellowText: 'rgb(89, 81, 48)',
+  colorYellowDarker: 'rgb(87, 59, 0)',
+  colorYellowDark: 'rgb(138, 97, 22)',
+  colorYellow: 'rgb(238, 194, 0)',
+  colorYellowLight: 'rgb(255, 234, 138)',
+  colorYellowLighter: 'rgb(252, 241, 205)',
+  colorOrangeText: 'rgb(89, 68, 48)',
+  colorOrangeDarker: 'rgb(74, 21, 4)',
+  colorOrangeDark: 'rgb(192, 87, 23)',
+  colorOrange: 'rgb(244, 147, 66)',
+  colorOrangeLight: 'rgb(255, 197, 139)',
+  colorOrangeLighter: 'rgb(252, 235, 219)',
+  colorRedText: 'rgb(88, 60, 53)',
+  colorRedDarker: 'rgb(51, 1, 1)',
+  colorRedDark: 'rgb(191, 7, 17)',
+  colorRed: 'rgb(222, 54, 24)',
+  colorRedLight: 'rgb(254, 173, 154)',
+  colorRedLighter: 'rgb(251, 234, 229)',
+  colorInk: 'rgb(33, 43, 54)',
+  colorInkLight: 'rgb(69, 79, 91)',
+  colorInkLighter: 'rgb(99, 115, 129)',
+  colorInkLightest: 'rgb(145, 158, 171)',
+  colorSkyDark: 'rgb(196, 205, 213)',
+  colorSky: 'rgb(223, 227, 232)',
+  colorSkyLight: 'rgb(244, 246, 248)',
+  colorSkyLighter: 'rgb(249, 250, 251)',
+  colorBlack: 'rgb(0, 0, 0)',
+  colorWhite: 'rgb(255, 255, 255)',
+};
diff --git a/src/styles/polaris-tokens/colors.custom-properties.css b/src/styles/polaris-tokens/colors.custom-properties.css
new file mode 100644
index 00000000000..7c20224a1d7
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.custom-properties.css
@@ -0,0 +1,60 @@
+:root {
+  --color-purple-text: rgb(80, 73, 90);
+  --color-purple-darker: rgb(35, 0, 81);
+  --color-purple-dark: rgb(80, 36, 143);
+  --color-purple: rgb(156, 106, 222);
+  --color-purple-light: rgb(227, 208, 255);
+  --color-purple-lighter: rgb(246, 240, 253);
+  --color-indigo-text: rgb(62, 65, 85);
+  --color-indigo-darker: rgb(0, 6, 57);
+  --color-indigo-dark: rgb(32, 46, 120);
+  --color-indigo: rgb(92, 106, 196);
+  --color-indigo-light: rgb(179, 188, 245);
+  --color-indigo-lighter: rgb(244, 245, 250);
+  --color-blue-text: rgb(62, 78, 87);
+  --color-blue-darker: rgb(0, 20, 41);
+  --color-blue-dark: rgb(8, 78, 138);
+  --color-blue: rgb(0, 111, 187);
+  --color-blue-light: rgb(180, 225, 250);
+  --color-blue-lighter: rgb(235, 245, 250);
+  --color-teal-text: rgb(64, 83, 82);
+  --color-teal-darker: rgb(0, 49, 53);
+  --color-teal-dark: rgb(0, 132, 142);
+  --color-teal: rgb(71, 193, 191);
+  --color-teal-light: rgb(183, 236, 236);
+  --color-teal-lighter: rgb(224, 245, 245);
+  --color-green-text: rgb(65, 79, 62);
+  --color-green-darker: rgb(23, 54, 48);
+  --color-green-dark: rgb(16, 128, 67);
+  --color-green: rgb(80, 184, 60);
+  --color-green-light: rgb(187, 229, 179);
+  --color-green-lighter: rgb(227, 241, 223);
+  --color-yellow-text: rgb(89, 81, 48);
+  --color-yellow-darker: rgb(87, 59, 0);
+  --color-yellow-dark: rgb(138, 97, 22);
+  --color-yellow: rgb(238, 194, 0);
+  --color-yellow-light: rgb(255, 234, 138);
+  --color-yellow-lighter: rgb(252, 241, 205);
+  --color-orange-text: rgb(89, 68, 48);
+  --color-orange-darker: rgb(74, 21, 4);
+  --color-orange-dark: rgb(192, 87, 23);
+  --color-orange: rgb(244, 147, 66);
+  --color-orange-light: rgb(255, 197, 139);
+  --color-orange-lighter: rgb(252, 235, 219);
+  --color-red-text: rgb(88, 60, 53);
+  --color-red-darker: rgb(51, 1, 1);
+  --color-red-dark: rgb(191, 7, 17);
+  --color-red: rgb(222, 54, 24);
+  --color-red-light: rgb(254, 173, 154);
+  --color-red-lighter: rgb(251, 234, 229);
+  --color-ink: rgb(33, 43, 54);
+  --color-ink-light: rgb(69, 79, 91);
+  --color-ink-lighter: rgb(99, 115, 129);
+  --color-ink-lightest: rgb(145, 158, 171);
+  --color-sky-dark: rgb(196, 205, 213);
+  --color-sky: rgb(223, 227, 232);
+  --color-sky-light: rgb(244, 246, 248);
+  --color-sky-lighter: rgb(249, 250, 251);
+  --color-black: rgb(0, 0, 0);
+  --color-white: rgb(255, 255, 255);
+}
diff --git a/src/styles/polaris-tokens/colors.ios.json b/src/styles/polaris-tokens/colors.ios.json
new file mode 100644
index 00000000000..2e80e9dc19a
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.ios.json
@@ -0,0 +1,527 @@
+[
+  {
+    "name": "purpleText",
+    "rgba": {
+      "r": 0.3137254901960784,
+      "g": 0.28627450980392155,
+      "b": 0.35294117647058826,
+      "a": 1
+    },
+    "hex": "#50495aff"
+  },
+  {
+    "name": "purpleDarker",
+    "rgba": {"r": 0.13725490196078433, "g": 0, "b": 0.3176470588235294, "a": 1},
+    "hex": "#230051ff"
+  },
+  {
+    "name": "purpleDark",
+    "rgba": {
+      "r": 0.3137254901960784,
+      "g": 0.1411764705882353,
+      "b": 0.5607843137254902,
+      "a": 1
+    },
+    "hex": "#50248fff"
+  },
+  {
+    "name": "purple",
+    "rgba": {
+      "r": 0.611764705882353,
+      "g": 0.41568627450980394,
+      "b": 0.8705882352941177,
+      "a": 1
+    },
+    "hex": "#9c6adeff"
+  },
+  {
+    "name": "purpleLight",
+    "rgba": {"r": 0.8901960784313725, "g": 0.8156862745098039, "b": 1, "a": 1},
+    "hex": "#e3d0ffff"
+  },
+  {
+    "name": "purpleLighter",
+    "rgba": {
+      "r": 0.9647058823529412,
+      "g": 0.9411764705882353,
+      "b": 0.9921568627450981,
+      "a": 1
+    },
+    "hex": "#f6f0fdff"
+  },
+  {
+    "name": "indigoText",
+    "rgba": {
+      "r": 0.24313725490196078,
+      "g": 0.2549019607843137,
+      "b": 0.3333333333333333,
+      "a": 1
+    },
+    "hex": "#3e4155ff"
+  },
+  {
+    "name": "indigoDarker",
+    "rgba": {
+      "r": 0,
+      "g": 0.023529411764705882,
+      "b": 0.2235294117647059,
+      "a": 1
+    },
+    "hex": "#000639ff"
+  },
+  {
+    "name": "indigoDark",
+    "rgba": {
+      "r": 0.12549019607843137,
+      "g": 0.1803921568627451,
+      "b": 0.47058823529411764,
+      "a": 1
+    },
+    "hex": "#202e78ff"
+  },
+  {
+    "name": "indigo",
+    "rgba": {
+      "r": 0.3607843137254902,
+      "g": 0.41568627450980394,
+      "b": 0.7686274509803922,
+      "a": 1
+    },
+    "hex": "#5c6ac4ff"
+  },
+  {
+    "name": "indigoLight",
+    "rgba": {
+      "r": 0.7019607843137254,
+      "g": 0.7372549019607844,
+      "b": 0.9607843137254902,
+      "a": 1
+    },
+    "hex": "#b3bcf5ff"
+  },
+  {
+    "name": "indigoLighter",
+    "rgba": {
+      "r": 0.9568627450980393,
+      "g": 0.9607843137254902,
+      "b": 0.9803921568627451,
+      "a": 1
+    },
+    "hex": "#f4f5faff"
+  },
+  {
+    "name": "blueText",
+    "rgba": {
+      "r": 0.24313725490196078,
+      "g": 0.3058823529411765,
+      "b": 0.3411764705882353,
+      "a": 1
+    },
+    "hex": "#3e4e57ff"
+  },
+  {
+    "name": "blueDarker",
+    "rgba": {"r": 0, "g": 0.0784313725490196, "b": 0.1607843137254902, "a": 1},
+    "hex": "#001429ff"
+  },
+  {
+    "name": "blueDark",
+    "rgba": {
+      "r": 0.03137254901960784,
+      "g": 0.3058823529411765,
+      "b": 0.5411764705882353,
+      "a": 1
+    },
+    "hex": "#084e8aff"
+  },
+  {
+    "name": "blue",
+    "rgba": {"r": 0, "g": 0.43529411764705883, "b": 0.7333333333333333, "a": 1},
+    "hex": "#006fbbff"
+  },
+  {
+    "name": "blueLight",
+    "rgba": {
+      "r": 0.7058823529411765,
+      "g": 0.8823529411764706,
+      "b": 0.9803921568627451,
+      "a": 1
+    },
+    "hex": "#b4e1faff"
+  },
+  {
+    "name": "blueLighter",
+    "rgba": {
+      "r": 0.9215686274509803,
+      "g": 0.9607843137254902,
+      "b": 0.9803921568627451,
+      "a": 1
+    },
+    "hex": "#ebf5faff"
+  },
+  {
+    "name": "tealText",
+    "rgba": {
+      "r": 0.25098039215686274,
+      "g": 0.3254901960784314,
+      "b": 0.3215686274509804,
+      "a": 1
+    },
+    "hex": "#405352ff"
+  },
+  {
+    "name": "tealDarker",
+    "rgba": {
+      "r": 0,
+      "g": 0.19215686274509805,
+      "b": 0.20784313725490197,
+      "a": 1
+    },
+    "hex": "#003135ff"
+  },
+  {
+    "name": "tealDark",
+    "rgba": {"r": 0, "g": 0.5176470588235295, "b": 0.5568627450980392, "a": 1},
+    "hex": "#00848eff"
+  },
+  {
+    "name": "teal",
+    "rgba": {
+      "r": 0.2784313725490196,
+      "g": 0.7568627450980392,
+      "b": 0.7490196078431373,
+      "a": 1
+    },
+    "hex": "#47c1bfff"
+  },
+  {
+    "name": "tealLight",
+    "rgba": {
+      "r": 0.7176470588235294,
+      "g": 0.9254901960784314,
+      "b": 0.9254901960784314,
+      "a": 1
+    },
+    "hex": "#b7ececff"
+  },
+  {
+    "name": "tealLighter",
+    "rgba": {
+      "r": 0.8784313725490196,
+      "g": 0.9607843137254902,
+      "b": 0.9607843137254902,
+      "a": 1
+    },
+    "hex": "#e0f5f5ff"
+  },
+  {
+    "name": "greenText",
+    "rgba": {
+      "r": 0.2549019607843137,
+      "g": 0.30980392156862746,
+      "b": 0.24313725490196078,
+      "a": 1
+    },
+    "hex": "#414f3eff"
+  },
+  {
+    "name": "greenDarker",
+    "rgba": {
+      "r": 0.09019607843137255,
+      "g": 0.21176470588235294,
+      "b": 0.18823529411764706,
+      "a": 1
+    },
+    "hex": "#173630ff"
+  },
+  {
+    "name": "greenDark",
+    "rgba": {
+      "r": 0.06274509803921569,
+      "g": 0.5019607843137255,
+      "b": 0.2627450980392157,
+      "a": 1
+    },
+    "hex": "#108043ff"
+  },
+  {
+    "name": "green",
+    "rgba": {
+      "r": 0.3137254901960784,
+      "g": 0.7215686274509804,
+      "b": 0.23529411764705882,
+      "a": 1
+    },
+    "hex": "#50b83cff"
+  },
+  {
+    "name": "greenLight",
+    "rgba": {
+      "r": 0.7333333333333333,
+      "g": 0.8980392156862745,
+      "b": 0.7019607843137254,
+      "a": 1
+    },
+    "hex": "#bbe5b3ff"
+  },
+  {
+    "name": "greenLighter",
+    "rgba": {
+      "r": 0.8901960784313725,
+      "g": 0.9450980392156862,
+      "b": 0.8745098039215686,
+      "a": 1
+    },
+    "hex": "#e3f1dfff"
+  },
+  {
+    "name": "yellowText",
+    "rgba": {
+      "r": 0.34901960784313724,
+      "g": 0.3176470588235294,
+      "b": 0.18823529411764706,
+      "a": 1
+    },
+    "hex": "#595130ff"
+  },
+  {
+    "name": "yellowDarker",
+    "rgba": {"r": 0.3411764705882353, "g": 0.23137254901960785, "b": 0, "a": 1},
+    "hex": "#573b00ff"
+  },
+  {
+    "name": "yellowDark",
+    "rgba": {
+      "r": 0.5411764705882353,
+      "g": 0.3803921568627451,
+      "b": 0.08627450980392157,
+      "a": 1
+    },
+    "hex": "#8a6116ff"
+  },
+  {
+    "name": "yellow",
+    "rgba": {"r": 0.9333333333333333, "g": 0.7607843137254902, "b": 0, "a": 1},
+    "hex": "#eec200ff"
+  },
+  {
+    "name": "yellowLight",
+    "rgba": {"r": 1, "g": 0.9176470588235294, "b": 0.5411764705882353, "a": 1},
+    "hex": "#ffea8aff"
+  },
+  {
+    "name": "yellowLighter",
+    "rgba": {
+      "r": 0.9882352941176471,
+      "g": 0.9450980392156862,
+      "b": 0.803921568627451,
+      "a": 1
+    },
+    "hex": "#fcf1cdff"
+  },
+  {
+    "name": "orangeText",
+    "rgba": {
+      "r": 0.34901960784313724,
+      "g": 0.26666666666666666,
+      "b": 0.18823529411764706,
+      "a": 1
+    },
+    "hex": "#594430ff"
+  },
+  {
+    "name": "orangeDarker",
+    "rgba": {
+      "r": 0.2901960784313726,
+      "g": 0.08235294117647059,
+      "b": 0.01568627450980392,
+      "a": 1
+    },
+    "hex": "#4a1504ff"
+  },
+  {
+    "name": "orangeDark",
+    "rgba": {
+      "r": 0.7529411764705882,
+      "g": 0.3411764705882353,
+      "b": 0.09019607843137255,
+      "a": 1
+    },
+    "hex": "#c05717ff"
+  },
+  {
+    "name": "orange",
+    "rgba": {
+      "r": 0.9568627450980393,
+      "g": 0.5764705882352941,
+      "b": 0.25882352941176473,
+      "a": 1
+    },
+    "hex": "#f49342ff"
+  },
+  {
+    "name": "orangeLight",
+    "rgba": {"r": 1, "g": 0.7725490196078432, "b": 0.5450980392156862, "a": 1},
+    "hex": "#ffc58bff"
+  },
+  {
+    "name": "orangeLighter",
+    "rgba": {
+      "r": 0.9882352941176471,
+      "g": 0.9215686274509803,
+      "b": 0.8588235294117647,
+      "a": 1
+    },
+    "hex": "#fcebdbff"
+  },
+  {
+    "name": "redText",
+    "rgba": {
+      "r": 0.34509803921568627,
+      "g": 0.23529411764705882,
+      "b": 0.20784313725490197,
+      "a": 1
+    },
+    "hex": "#583c35ff"
+  },
+  {
+    "name": "redDarker",
+    "rgba": {
+      "r": 0.2,
+      "g": 0.00392156862745098,
+      "b": 0.00392156862745098,
+      "a": 1
+    },
+    "hex": "#330101ff"
+  },
+  {
+    "name": "redDark",
+    "rgba": {
+      "r": 0.7490196078431373,
+      "g": 0.027450980392156862,
+      "b": 0.06666666666666667,
+      "a": 1
+    },
+    "hex": "#bf0711ff"
+  },
+  {
+    "name": "red",
+    "rgba": {
+      "r": 0.8705882352941177,
+      "g": 0.21176470588235294,
+      "b": 0.09411764705882353,
+      "a": 1
+    },
+    "hex": "#de3618ff"
+  },
+  {
+    "name": "redLight",
+    "rgba": {
+      "r": 0.996078431372549,
+      "g": 0.6784313725490196,
+      "b": 0.6039215686274509,
+      "a": 1
+    },
+    "hex": "#fead9aff"
+  },
+  {
+    "name": "redLighter",
+    "rgba": {
+      "r": 0.984313725490196,
+      "g": 0.9176470588235294,
+      "b": 0.8980392156862745,
+      "a": 1
+    },
+    "hex": "#fbeae5ff"
+  },
+  {
+    "name": "ink",
+    "rgba": {
+      "r": 0.12941176470588237,
+      "g": 0.16862745098039217,
+      "b": 0.21176470588235294,
+      "a": 1
+    },
+    "hex": "#212b36ff"
+  },
+  {
+    "name": "inkLight",
+    "rgba": {
+      "r": 0.27058823529411763,
+      "g": 0.30980392156862746,
+      "b": 0.3568627450980392,
+      "a": 1
+    },
+    "hex": "#454f5bff"
+  },
+  {
+    "name": "inkLighter",
+    "rgba": {
+      "r": 0.38823529411764707,
+      "g": 0.45098039215686275,
+      "b": 0.5058823529411764,
+      "a": 1
+    },
+    "hex": "#637381ff"
+  },
+  {
+    "name": "inkLightest",
+    "rgba": {
+      "r": 0.5686274509803921,
+      "g": 0.6196078431372549,
+      "b": 0.6705882352941176,
+      "a": 1
+    },
+    "hex": "#919eabff"
+  },
+  {
+    "name": "skyDark",
+    "rgba": {
+      "r": 0.7686274509803922,
+      "g": 0.803921568627451,
+      "b": 0.8352941176470589,
+      "a": 1
+    },
+    "hex": "#c4cdd5ff"
+  },
+  {
+    "name": "sky",
+    "rgba": {
+      "r": 0.8745098039215686,
+      "g": 0.8901960784313725,
+      "b": 0.9098039215686274,
+      "a": 1
+    },
+    "hex": "#dfe3e8ff"
+  },
+  {
+    "name": "skyLight",
+    "rgba": {
+      "r": 0.9568627450980393,
+      "g": 0.9647058823529412,
+      "b": 0.9725490196078431,
+      "a": 1
+    },
+    "hex": "#f4f6f8ff"
+  },
+  {
+    "name": "skyLighter",
+    "rgba": {
+      "r": 0.9764705882352941,
+      "g": 0.9803921568627451,
+      "b": 0.984313725490196,
+      "a": 1
+    },
+    "hex": "#f9fafbff"
+  },
+  {
+    "name": "black",
+    "rgba": {"r": 0, "g": 0, "b": 0, "a": 1},
+    "hex": "#000000ff"
+  },
+  {
+    "name": "white",
+    "rgba": {"r": 1, "g": 1, "b": 1, "a": 1},
+    "hex": "#ffffffff"
+  }
+]
diff --git a/src/styles/polaris-tokens/colors.json b/src/styles/polaris-tokens/colors.json
new file mode 100644
index 00000000000..29e96e6316e
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.json
@@ -0,0 +1,60 @@
+{
+  "color-purple-text": "rgb(80, 73, 90)",
+  "color-purple-darker": "rgb(35, 0, 81)",
+  "color-purple-dark": "rgb(80, 36, 143)",
+  "color-purple": "rgb(156, 106, 222)",
+  "color-purple-light": "rgb(227, 208, 255)",
+  "color-purple-lighter": "rgb(246, 240, 253)",
+  "color-indigo-text": "rgb(62, 65, 85)",
+  "color-indigo-darker": "rgb(0, 6, 57)",
+  "color-indigo-dark": "rgb(32, 46, 120)",
+  "color-indigo": "rgb(92, 106, 196)",
+  "color-indigo-light": "rgb(179, 188, 245)",
+  "color-indigo-lighter": "rgb(244, 245, 250)",
+  "color-blue-text": "rgb(62, 78, 87)",
+  "color-blue-darker": "rgb(0, 20, 41)",
+  "color-blue-dark": "rgb(8, 78, 138)",
+  "color-blue": "rgb(0, 111, 187)",
+  "color-blue-light": "rgb(180, 225, 250)",
+  "color-blue-lighter": "rgb(235, 245, 250)",
+  "color-teal-text": "rgb(64, 83, 82)",
+  "color-teal-darker": "rgb(0, 49, 53)",
+  "color-teal-dark": "rgb(0, 132, 142)",
+  "color-teal": "rgb(71, 193, 191)",
+  "color-teal-light": "rgb(183, 236, 236)",
+  "color-teal-lighter": "rgb(224, 245, 245)",
+  "color-green-text": "rgb(65, 79, 62)",
+  "color-green-darker": "rgb(23, 54, 48)",
+  "color-green-dark": "rgb(16, 128, 67)",
+  "color-green": "rgb(80, 184, 60)",
+  "color-green-light": "rgb(187, 229, 179)",
+  "color-green-lighter": "rgb(227, 241, 223)",
+  "color-yellow-text": "rgb(89, 81, 48)",
+  "color-yellow-darker": "rgb(87, 59, 0)",
+  "color-yellow-dark": "rgb(138, 97, 22)",
+  "color-yellow": "rgb(238, 194, 0)",
+  "color-yellow-light": "rgb(255, 234, 138)",
+  "color-yellow-lighter": "rgb(252, 241, 205)",
+  "color-orange-text": "rgb(89, 68, 48)",
+  "color-orange-darker": "rgb(74, 21, 4)",
+  "color-orange-dark": "rgb(192, 87, 23)",
+  "color-orange": "rgb(244, 147, 66)",
+  "color-orange-light": "rgb(255, 197, 139)",
+  "color-orange-lighter": "rgb(252, 235, 219)",
+  "color-red-text": "rgb(88, 60, 53)",
+  "color-red-darker": "rgb(51, 1, 1)",
+  "color-red-dark": "rgb(191, 7, 17)",
+  "color-red": "rgb(222, 54, 24)",
+  "color-red-light": "rgb(254, 173, 154)",
+  "color-red-lighter": "rgb(251, 234, 229)",
+  "color-ink": "rgb(33, 43, 54)",
+  "color-ink-light": "rgb(69, 79, 91)",
+  "color-ink-lighter": "rgb(99, 115, 129)",
+  "color-ink-lightest": "rgb(145, 158, 171)",
+  "color-sky-dark": "rgb(196, 205, 213)",
+  "color-sky": "rgb(223, 227, 232)",
+  "color-sky-light": "rgb(244, 246, 248)",
+  "color-sky-lighter": "rgb(249, 250, 251)",
+  "color-black": "rgb(0, 0, 0)",
+  "color-white": "rgb(255, 255, 255)"
+}
diff --git a/src/styles/polaris-tokens/colors.map.scss b/src/styles/polaris-tokens/colors.map.scss
new file mode 100644
index 00000000000..39bdc61bff8
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.map.scss
@@ -0,0 +1,176 @@
+$polaris-colors-map: (
+  'color-purple-text': (
+    rgb(80, 73, 90),
+  ),
+  'color-purple-darker': (
+    rgb(35, 0, 81),
+  ),
+  'color-purple-dark': (
+    rgb(80, 36, 143),
+  ),
+  'color-purple': (
+    rgb(156, 106, 222),
+  ),
+  'color-purple-light': (
+    rgb(227, 208, 255),
+  ),
+  'color-purple-lighter': (
+    rgb(246, 240, 253),
+  ),
+  'color-indigo-text': (
+    rgb(62, 65, 85),
+  ),
+  'color-indigo-darker': (
+    rgb(0, 6, 57),
+  ),
+  'color-indigo-dark': (
+    rgb(32, 46, 120),
+  ),
+  'color-indigo': (
+    rgb(92, 106, 196),
+  ),
+  'color-indigo-light': (
+    rgb(179, 188, 245),
+  ),
+  'color-indigo-lighter': (
+    rgb(244, 245, 250),
+  ),
+  'color-blue-text': (
+    rgb(62, 78, 87),
+  ),
+  'color-blue-darker': (
+    rgb(0, 20, 41),
+  ),
+  'color-blue-dark': (
+    rgb(8, 78, 138),
+  ),
+  'color-blue': (
+    rgb(0, 111, 187),
+  ),
+  'color-blue-light': (
+    rgb(180, 225, 250),
+  ),
+  'color-blue-lighter': (
+    rgb(235, 245, 250),
+  ),
+  'color-teal-text': (
+    rgb(64, 83, 82),
+  ),
+  'color-teal-darker': (
+    rgb(0, 49, 53),
+  ),
+  'color-teal-dark': (
+    rgb(0, 132, 142),
+  ),
+  'color-teal': (
+    rgb(71, 193, 191),
+  ),
+  'color-teal-light': (
+    rgb(183, 236, 236),
+  ),
+  'color-teal-lighter': (
+    rgb(224, 245, 245),
+  ),
+  'color-green-text': (
+    rgb(65, 79, 62),
+  ),
+  'color-green-darker': (
+    rgb(23, 54, 48),
+  ),
+  'color-green-dark': (
+    rgb(16, 128, 67),
+  ),
+  'color-green': (
+    rgb(80, 184, 60),
+  ),
+  'color-green-light': (
+    rgb(187, 229, 179),
+  ),
+  'color-green-lighter': (
+    rgb(227, 241, 223),
+  ),
+  'color-yellow-text': (
+    rgb(89, 81, 48),
+  ),
+  'color-yellow-darker': (
+    rgb(87, 59, 0),
+  ),
+  'color-yellow-dark': (
+    rgb(138, 97, 22),
+  ),
+  'color-yellow': (
+    rgb(238, 194, 0),
+  ),
+  'color-yellow-light': (
+    rgb(255, 234, 138),
+  ),
+  'color-yellow-lighter': (
+    rgb(252, 241, 205),
+  ),
+  'color-orange-text': (
+    rgb(89, 68, 48),
+  ),
+  'color-orange-darker': (
+    rgb(74, 21, 4),
+  ),
+  'color-orange-dark': (
+    rgb(192, 87, 23),
+  ),
+  'color-orange': (
+    rgb(244, 147, 66),
+  ),
+  'color-orange-light': (
+    rgb(255, 197, 139),
+  ),
+  'color-orange-lighter': (
+    rgb(252, 235, 219),
+  ),
+  'color-red-text': (
+    rgb(88, 60, 53),
+  ),
+  'color-red-darker': (
+    rgb(51, 1, 1),
+  ),
+  'color-red-dark': (
+    rgb(191, 7, 17),
+  ),
+  'color-red': (
+    rgb(222, 54, 24),
+  ),
+  'color-red-light': (
+    rgb(254, 173, 154),
+  ),
+  'color-red-lighter': (
+    rgb(251, 234, 229),
+  ),
+  'color-ink': (
+    rgb(33, 43, 54),
+  ),
+  'color-ink-light': (
+    rgb(69, 79, 91),
+  ),
+  'color-ink-lighter': (
+    rgb(99, 115, 129),
+  ),
+  'color-ink-lightest': (
+    rgb(145, 158, 171),
+  ),
+  'color-sky-dark': (
+    rgb(196, 205, 213),
+  ),
+  'color-sky': (
+    rgb(223, 227, 232),
+  ),
+  'color-sky-light': (
+    rgb(244, 246, 248),
+  ),
+  'color-sky-lighter': (
+    rgb(249, 250, 251),
+  ),
+  'color-black': (
+    rgb(0, 0, 0),
+  ),
+  'color-white': (
+    rgb(255, 255, 255),
+  ),
+);
diff --git a/src/styles/polaris-tokens/colors.raw.json b/src/styles/polaris-tokens/colors.raw.json
new file mode 100644
index 00000000000..cc4dbc74f8d
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.raw.json
@@ -0,0 +1,586 @@
+{
+  "aliases": {
+    "color-sky-light": {
+      "value": "#f4f6f8"
+    },
+    "color-ink-lightest": {
+      "value": "#919eab"
+    },
+    "color-green-text": {
+      "value": "#414f3e"
+    },
+    "color-orange-light": {
+      "value": "#ffc58b"
+    },
+    "color-orange-text": {
+      "value": "#594430"
+    },
+    "color-green-light": {
+      "value": "#bbe5b3"
+    },
+    "color-blue": {
+      "value": "#006fbb"
+    },
+    "color-indigo-light": {
+      "value": "#b3bcf5"
+    },
+    "color-yellow-dark": {
+      "value": "#8a6116"
+    },
+    "color-ink-light": {
+      "value": "#454f5b"
+    },
+    "color-purple": {
+      "value": "#9c6ade"
+    },
+    "color-teal": {
+      "value": "#47c1bf"
+    },
+    "color-yellow-light": {
+      "value": "#ffea8a"
+    },
+    "color-indigo-dark": {
+      "value": "#202e78"
+    },
+    "color-red": {
+      "value": "#de3618"
+    },
+    "color-red-darker": {
+      "value": "#330101"
+    },
+    "color-green-dark": {
+      "value": "#108043"
+    },
+    "color-purple-darker": {
+      "value": "#230051"
+    },
+    "color-teal-darker": {
+      "value": "#003135"
+    },
+    "color-orange-dark": {
+      "value": "#c05717"
+    },
+    "color-blue-darker": {
+      "value": "#001429"
+    },
+    "color-sky-dark": {
+      "value": "#c4cdd5"
+    },
+    "color-sky-lighter": {
+      "value": "#f9fafb"
+    },
+    "color-blue-light": {
+      "value": "#b4e1fa"
+    },
+    "color-orange-lighter": {
+      "value": "#fcebdb"
+    },
+    "color-purple-light": {
+      "value": "#e3d0ff"
+    },
+    "color-green-lighter": {
+      "value": "#e3f1df"
+    },
+    "color-teal-light": {
+      "value": "#b7ecec"
+    },
+    "color-red-light": {
+      "value": "#fead9a"
+    },
+    "color-yellow-darker": {
+      "value": "#573b00"
+    },
+    "color-ink-lighter": {
+      "value": "#637381"
+    },
+    "color-indigo-lighter": {
+      "value": "#f4f5fa"
+    },
+    "color-red-text": {
+      "value": "#583c35"
+    },
+    "color-teal-text": {
+      "value": "#405352"
+    },
+    "color-indigo-darker": {
+      "value": "#000639"
+    },
+    "color-purple-text": {
+      "value": "#50495a"
+    },
+    "color-yellow-lighter": {
+      "value": "#fcf1cd"
+    },
+    "color-black": {
+      "value": "#000000"
+    },
+    "color-blue-text": {
+      "value": "#3e4e57"
+    },
+    "color-green-darker": {
+      "value": "#173630"
+    },
+    "color-sky": {
+      "value": "#dfe3e8"
+    },
+    "color-orange-darker": {
+      "value": "#4a1504"
+    },
+    "color-orange": {
+      "value": "#f49342"
+    },
+    "color-green": {
+      "value": "#50b83c"
+    },
+    "color-blue-lighter": {
+      "value": "#ebf5fa"
+    },
+    "color-indigo": {
+      "value": "#5c6ac4"
+    },
+    "color-red-dark": {
+      "value": "#bf0711"
+    },
+    "color-ink": {
+      "value": "#212b36"
+    },
+    "color-purple-lighter": {
+      "value": "#f6f0fd"
+    },
+    "color-yellow-text": {
+      "value": "#595130"
+    },
+    "color-teal-lighter": {
+      "value": "#e0f5f5"
+    },
+    "color-teal-dark": {
+      "value": "#00848e"
+    },
+    "color-purple-dark": {
+      "value": "#50248f"
+    },
+    "color-red-lighter": {
+      "value": "#fbeae5"
+    },
+    "color-yellow": {
+      "value": "#eec200"
+    },
+    "color-indigo-text": {
+      "value": "#3e4155"
+    },
+    "color-white": {
+      "value": "#ffffff"
+    },
+    "color-blue-dark": {
+      "value": "#084e8a"
+    }
+  },
+  "props": {
+    "color-purple-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-purple-text",
+      "value": "rgb(80, 73, 90)",
+      "originalValue": "{!color-purple-text}"
+    },
+    "color-purple-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-darker",
+      "value": "rgb(35, 0, 81)",
+      "originalValue": "{!color-purple-darker}"
+    },
+    "color-purple-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-dark",
+      "value": "rgb(80, 36, 143)",
+      "originalValue": "{!color-purple-dark}"
+    },
+    "color-purple": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple",
+      "value": "rgb(156, 106, 222)",
+      "originalValue": "{!color-purple}"
+    },
+    "color-purple-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-light",
+      "value": "rgb(227, 208, 255)",
+      "originalValue": "{!color-purple-light}"
+    },
+    "color-purple-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-lighter",
+      "value": "rgb(246, 240, 253)",
+      "originalValue": "{!color-purple-lighter}"
+    },
+    "color-indigo-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-indigo-text",
+      "value": "rgb(62, 65, 85)",
+      "originalValue": "{!color-indigo-text}"
+    },
+    "color-indigo-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-darker",
+      "value": "rgb(0, 6, 57)",
+      "originalValue": "{!color-indigo-darker}"
+    },
+    "color-indigo-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-dark",
+      "value": "rgb(32, 46, 120)",
+      "originalValue": "{!color-indigo-dark}"
+    },
+    "color-indigo": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo",
+      "value": "rgb(92, 106, 196)",
+      "originalValue": "{!color-indigo}"
+    },
+    "color-indigo-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-light",
+      "value": "rgb(179, 188, 245)",
+      "originalValue": "{!color-indigo-light}"
+    },
+    "color-indigo-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-lighter",
+      "value": "rgb(244, 245, 250)",
+      "originalValue": "{!color-indigo-lighter}"
+    },
+    "color-blue-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-blue-text",
+      "value": "rgb(62, 78, 87)",
+      "originalValue": "{!color-blue-text}"
+    },
+    "color-blue-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-darker",
+      "value": "rgb(0, 20, 41)",
+      "originalValue": "{!color-blue-darker}"
+    },
+    "color-blue-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-dark",
+      "value": "rgb(8, 78, 138)",
+      "originalValue": "{!color-blue-dark}"
+    },
+    "color-blue": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue",
+      "value": "rgb(0, 111, 187)",
+      "originalValue": "{!color-blue}"
+    },
+    "color-blue-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-light",
+      "value": "rgb(180, 225, 250)",
+      "originalValue": "{!color-blue-light}"
+    },
+    "color-blue-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-lighter",
+      "value": "rgb(235, 245, 250)",
+      "originalValue": "{!color-blue-lighter}"
+    },
+    "color-teal-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-teal-text",
+      "value": "rgb(64, 83, 82)",
+      "originalValue": "{!color-teal-text}"
+    },
+    "color-teal-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-darker",
+      "value": "rgb(0, 49, 53)",
+      "originalValue": "{!color-teal-darker}"
+    },
+    "color-teal-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-dark",
+      "value": "rgb(0, 132, 142)",
+      "originalValue": "{!color-teal-dark}"
+    },
+    "color-teal": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal",
+      "value": "rgb(71, 193, 191)",
+      "originalValue": "{!color-teal}"
+    },
+    "color-teal-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-light",
+      "value": "rgb(183, 236, 236)",
+      "originalValue": "{!color-teal-light}"
+    },
+    "color-teal-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-lighter",
+      "value": "rgb(224, 245, 245)",
+      "originalValue": "{!color-teal-lighter}"
+    },
+    "color-green-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-green-text",
+      "value": "rgb(65, 79, 62)",
+      "originalValue": "{!color-green-text}"
+    },
+    "color-green-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-darker",
+      "value": "rgb(23, 54, 48)",
+      "originalValue": "{!color-green-darker}"
+    },
+    "color-green-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-dark",
+      "value": "rgb(16, 128, 67)",
+      "originalValue": "{!color-green-dark}"
+    },
+    "color-green": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green",
+      "value": "rgb(80, 184, 60)",
+      "originalValue": "{!color-green}"
+    },
+    "color-green-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-light",
+      "value": "rgb(187, 229, 179)",
+      "originalValue": "{!color-green-light}"
+    },
+    "color-green-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-lighter",
+      "value": "rgb(227, 241, 223)",
+      "originalValue": "{!color-green-lighter}"
+    },
+    "color-yellow-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-yellow-text",
+      "value": "rgb(89, 81, 48)",
+      "originalValue": "{!color-yellow-text}"
+    },
+    "color-yellow-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-darker",
+      "value": "rgb(87, 59, 0)",
+      "originalValue": "{!color-yellow-darker}"
+    },
+    "color-yellow-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-dark",
+      "value": "rgb(138, 97, 22)",
+      "originalValue": "{!color-yellow-dark}"
+    },
+    "color-yellow": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow",
+      "value": "rgb(238, 194, 0)",
+      "originalValue": "{!color-yellow}"
+    },
+    "color-yellow-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-light",
+      "value": "rgb(255, 234, 138)",
+      "originalValue": "{!color-yellow-light}"
+    },
+    "color-yellow-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-lighter",
+      "value": "rgb(252, 241, 205)",
+      "originalValue": "{!color-yellow-lighter}"
+    },
+    "color-orange-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-orange-text",
+      "value": "rgb(89, 68, 48)",
+      "originalValue": "{!color-orange-text}"
+    },
+    "color-orange-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-darker",
+      "value": "rgb(74, 21, 4)",
+      "originalValue": "{!color-orange-darker}"
+    },
+    "color-orange-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-dark",
+      "value": "rgb(192, 87, 23)",
+      "originalValue": "{!color-orange-dark}"
+    },
+    "color-orange": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange",
+      "value": "rgb(244, 147, 66)",
+      "originalValue": "{!color-orange}"
+    },
+    "color-orange-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-light",
+      "value": "rgb(255, 197, 139)",
+      "originalValue": "{!color-orange-light}"
+    },
+    "color-orange-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-lighter",
+      "value": "rgb(252, 235, 219)",
+      "originalValue": "{!color-orange-lighter}"
+    },
+    "color-red-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-red-text",
+      "value": "rgb(88, 60, 53)",
+      "originalValue": "{!color-red-text}"
+    },
+    "color-red-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-darker",
+      "value": "rgb(51, 1, 1)",
+      "originalValue": "{!color-red-darker}"
+    },
+    "color-red-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-dark",
+      "value": "rgb(191, 7, 17)",
+      "originalValue": "{!color-red-dark}"
+    },
+    "color-red": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red",
+      "value": "rgb(222, 54, 24)",
+      "originalValue": "{!color-red}"
+    },
+    "color-red-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-light",
+      "value": "rgb(254, 173, 154)",
+      "originalValue": "{!color-red-light}"
+    },
+    "color-red-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-lighter",
+      "value": "rgb(251, 234, 229)",
+      "originalValue": "{!color-red-lighter}"
+    },
+    "color-ink": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink",
+      "value": "rgb(33, 43, 54)",
+      "originalValue": "{!color-ink}"
+    },
+    "color-ink-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-light",
+      "value": "rgb(69, 79, 91)",
+      "originalValue": "{!color-ink-light}"
+    },
+    "color-ink-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lighter",
+      "value": "rgb(99, 115, 129)",
+      "originalValue": "{!color-ink-lighter}"
+    },
+    "color-ink-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lightest",
+      "value": "rgb(145, 158, 171)",
+      "originalValue": "{!color-ink-lightest}"
+    },
+    "color-sky-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-dark",
+      "value": "rgb(196, 205, 213)",
+      "originalValue": "{!color-sky-dark}"
+    },
+    "color-sky": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky",
+      "value": "rgb(223, 227, 232)",
+      "originalValue": "{!color-sky}"
+    },
+    "color-sky-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-light",
+      "value": "rgb(244, 246, 248)",
+      "originalValue": "{!color-sky-light}"
+    },
+    "color-sky-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-lighter",
+      "value": "rgb(249, 250, 251)",
+      "originalValue": "{!color-sky-lighter}"
+    },
+    "color-black": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-black",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "{!color-black}"
+    },
+    "color-white": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-white",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "{!color-white}"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/colors.scss b/src/styles/polaris-tokens/colors.scss
new file mode 100644
index 00000000000..792a0bf7b81
--- /dev/null
+++ b/src/styles/polaris-tokens/colors.scss
@@ -0,0 +1,58 @@
+$color-purple-text: rgb(80, 73, 90);
+$color-purple-darker: rgb(35, 0, 81);
+$color-purple-dark: rgb(80, 36, 143);
+$color-purple: rgb(156, 106, 222);
+$color-purple-light: rgb(227, 208, 255);
+$color-purple-lighter: rgb(246, 240, 253);
+$color-indigo-text: rgb(62, 65, 85);
+$color-indigo-darker: rgb(0, 6, 57);
+$color-indigo-dark: rgb(32, 46, 120);
+$color-indigo: rgb(92, 106, 196);
+$color-indigo-light: rgb(179, 188, 245);
+$color-indigo-lighter: rgb(244, 245, 250);
+$color-blue-text: rgb(62, 78, 87);
+$color-blue-darker: rgb(0, 20, 41);
+$color-blue-dark: rgb(8, 78, 138);
+$color-blue: rgb(0, 111, 187);
+$color-blue-light: rgb(180, 225, 250);
+$color-blue-lighter: rgb(235, 245, 250);
+$color-teal-text: rgb(64, 83, 82);
+$color-teal-darker: rgb(0, 49, 53);
+$color-teal-dark: rgb(0, 132, 142);
+$color-teal: rgb(71, 193, 191);
+$color-teal-light: rgb(183, 236, 236);
+$color-teal-lighter: rgb(224, 245, 245);
+$color-green-text: rgb(65, 79, 62);
+$color-green-darker: rgb(23, 54, 48);
+$color-green-dark: rgb(16, 128, 67);
+$color-green: rgb(80, 184, 60);
+$color-green-light: rgb(187, 229, 179);
+$color-green-lighter: rgb(227, 241, 223);
+$color-yellow-text: rgb(89, 81, 48);
+$color-yellow-darker: rgb(87, 59, 0);
+$color-yellow-dark: rgb(138, 97, 22);
+$color-yellow: rgb(238, 194, 0);
+$color-yellow-light: rgb(255, 234, 138);
+$color-yellow-lighter: rgb(252, 241, 205);
+$color-orange-text: rgb(89, 68, 48);
+$color-orange-darker: rgb(74, 21, 4);
+$color-orange-dark: rgb(192, 87, 23);
+$color-orange: rgb(244, 147, 66);
+$color-orange-light: rgb(255, 197, 139);
+$color-orange-lighter: rgb(252, 235, 219);
+$color-red-text: rgb(88, 60, 53);
+$color-red-darker: rgb(51, 1, 1);
+$color-red-dark: rgb(191, 7, 17);
+$color-red: rgb(222, 54, 24);
+$color-red-light: rgb(254, 173, 154);
+$color-red-lighter: rgb(251, 234, 229);
+$color-ink: rgb(33, 43, 54);
+$color-ink-light: rgb(69, 79, 91);
+$color-ink-lighter: rgb(99, 115, 129);
+$color-ink-lightest: rgb(145, 158, 171);
+$color-sky-dark: rgb(196, 205, 213);
+$color-sky: rgb(223, 227, 232);
+$color-sky-light: rgb(244, 246, 248);
+$color-sky-lighter: rgb(249, 250, 251);
+$color-black: rgb(0, 0, 0);
+$color-white: rgb(255, 255, 255);
diff --git a/src/styles/polaris-tokens/duration.common.js b/src/styles/polaris-tokens/duration.common.js
new file mode 100644
index 00000000000..27c4aaab77b
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.common.js
@@ -0,0 +1,8 @@
+module.exports = {
+  durationNone: 0,
+  durationFast: 100,
+  durationBase: 200,
+  durationSlow: 300,
+  durationSlower: 400,
+  durationSlowest: 500,
+};
diff --git a/src/styles/polaris-tokens/duration.custom-properties.css b/src/styles/polaris-tokens/duration.custom-properties.css
new file mode 100644
index 00000000000..02ce3f91dd8
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.custom-properties.css
@@ -0,0 +1,8 @@
+:root {
+  --duration-none: 0;
+  --duration-fast: 100ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 400ms;
+  --duration-slowest: 500ms;
+}
diff --git a/src/styles/polaris-tokens/duration.json b/src/styles/polaris-tokens/duration.json
new file mode 100644
index 00000000000..8d3eeb0237c
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.json
@@ -0,0 +1,8 @@
+{
+  "duration-none": 0,
+  "duration-fast": 100,
+  "duration-base": 200,
+  "duration-slow": 300,
+  "duration-slower": 400,
+  "duration-slowest": 500
+}
diff --git a/src/styles/polaris-tokens/duration.map.scss b/src/styles/polaris-tokens/duration.map.scss
new file mode 100644
index 00000000000..5ff8a200705
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.map.scss
@@ -0,0 +1,20 @@
+$polaris-duration-map: (
+  'duration-none': (
+    0,
+  ),
+  'duration-fast': (
+    100ms,
+  ),
+  'duration-base': (
+    200ms,
+  ),
+  'duration-slow': (
+    300ms,
+  ),
+  'duration-slower': (
+    400ms,
+  ),
+  'duration-slowest': (
+    500ms,
+  ),
+);
diff --git a/src/styles/polaris-tokens/duration.raw.json b/src/styles/polaris-tokens/duration.raw.json
new file mode 100644
index 00000000000..d7fffd8aae4
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.raw.json
@@ -0,0 +1,47 @@
+{
+  "aliases": {},
+  "props": {
+    "duration-none": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-none",
+      "value": 0,
+      "originalValue": 0
+    },
+    "duration-fast": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-fast",
+      "value": "100ms",
+      "originalValue": "100ms"
+    },
+    "duration-base": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-base",
+      "value": "200ms",
+      "originalValue": "200ms"
+    },
+    "duration-slow": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slow",
+      "value": "300ms",
+      "originalValue": "300ms"
+    },
+    "duration-slower": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slower",
+      "value": "400ms",
+      "originalValue": "400ms"
+    },
+    "duration-slowest": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slowest",
+      "value": "500ms",
+      "originalValue": "500ms"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/duration.scss b/src/styles/polaris-tokens/duration.scss
new file mode 100644
index 00000000000..c7c2420a12e
--- /dev/null
+++ b/src/styles/polaris-tokens/duration.scss
@@ -0,0 +1,6 @@
+$duration-none: 0;
+$duration-fast: 100ms;
+$duration-base: 200ms;
+$duration-slow: 300ms;
+$duration-slower: 400ms;
+$duration-slowest: 500ms;
diff --git a/src/styles/polaris-tokens/index.common.js b/src/styles/polaris-tokens/index.common.js
new file mode 100644
index 00000000000..6c8c86101e4
--- /dev/null
+++ b/src/styles/polaris-tokens/index.common.js
@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorInkLight = exports.colorInk = exports.colorRedLighter = exports.colorRedLight = exports.colorRed = exports.colorRedDark = exports.colorRedDarker = exports.colorRedText = exports.colorOrangeLighter = exports.colorOrangeLight = exports.colorOrange = exports.colorOrangeDark = exports.colorOrangeDarker = exports.colorOrangeText = exports.colorYellowLighter = exports.colorYellowLight = exports.colorYellow = exports.colorYellowDark = exports.colorYellowDarker = exports.colorYellowText = exports.colorGreenLighter = exports.colorGreenLight = exports.colorGreen = exports.colorGreenDark = exports.colorGreenDarker = exports.colorGreenText = exports.colorTealLighter = exports.colorTealLight = exports.colorTeal = exports.colorTealDark = exports.colorTealDarker = exports.colorTealText = exports.colorBlueLighter = exports.colorBlueLight = exports.colorBlue = exports.colorBlueDark = exports.colorBlueDarker = exports.colorBlueText = exports.colorIndigoLighter = exports.colorIndigoLight = exports.colorIndigo = exports.colorIndigoDark = exports.colorIndigoDarker = exports.colorIndigoText = exports.colorPurpleLighter = exports.colorPurpleLight = exports.colorPurple = exports.colorPurpleDark = exports.colorPurpleDarker = exports.colorPurpleText = void 0;
+exports.fontStackMonospace = exports.fontStackBase = exports.spacingExtraLoose = exports.spacingLoose = exports.spacingBase = exports.spacingBaseTight = exports.spacingTight = exports.spacingExtraTight = exports.spacingNone = exports.durationSlowest = exports.durationSlower = exports.durationSlow = exports.durationBase = exports.durationFast = exports.durationNone = exports.colorWhite = exports.colorBlack = exports.colorSkyLighter = exports.colorSkyLight = exports.colorSky = exports.colorSkyDark = exports.colorInkLightest = exports.colorInkLighter = void 0;
+exports.colorPurpleText = 'rgb(80, 73, 90)';
+exports.colorPurpleDarker = 'rgb(35, 0, 81)';
+exports.colorPurpleDark = 'rgb(80, 36, 143)';
+exports.colorPurple = 'rgb(156, 106, 222)';
+exports.colorPurpleLight = 'rgb(227, 208, 255)';
+exports.colorPurpleLighter = 'rgb(246, 240, 253)';
+exports.colorIndigoText = 'rgb(62, 65, 85)';
+exports.colorIndigoDarker = 'rgb(0, 6, 57)';
+exports.colorIndigoDark = 'rgb(32, 46, 120)';
+exports.colorIndigo = 'rgb(92, 106, 196)';
+exports.colorIndigoLight = 'rgb(179, 188, 245)';
+exports.colorIndigoLighter = 'rgb(244, 245, 250)';
+exports.colorBlueText = 'rgb(62, 78, 87)';
+exports.colorBlueDarker = 'rgb(0, 20, 41)';
+exports.colorBlueDark = 'rgb(8, 78, 138)';
+exports.colorBlue = 'rgb(0, 111, 187)';
+exports.colorBlueLight = 'rgb(180, 225, 250)';
+exports.colorBlueLighter = 'rgb(235, 245, 250)';
+exports.colorTealText = 'rgb(64, 83, 82)';
+exports.colorTealDarker = 'rgb(0, 49, 53)';
+exports.colorTealDark = 'rgb(0, 132, 142)';
+exports.colorTeal = 'rgb(71, 193, 191)';
+exports.colorTealLight = 'rgb(183, 236, 236)';
+exports.colorTealLighter = 'rgb(224, 245, 245)';
+exports.colorGreenText = 'rgb(65, 79, 62)';
+exports.colorGreenDarker = 'rgb(23, 54, 48)';
+exports.colorGreenDark = 'rgb(16, 128, 67)';
+exports.colorGreen = 'rgb(80, 184, 60)';
+exports.colorGreenLight = 'rgb(187, 229, 179)';
+exports.colorGreenLighter = 'rgb(227, 241, 223)';
+exports.colorYellowText = 'rgb(89, 81, 48)';
+exports.colorYellowDarker = 'rgb(87, 59, 0)';
+exports.colorYellowDark = 'rgb(138, 97, 22)';
+exports.colorYellow = 'rgb(238, 194, 0)';
+exports.colorYellowLight = 'rgb(255, 234, 138)';
+exports.colorYellowLighter = 'rgb(252, 241, 205)';
+exports.colorOrangeText = 'rgb(89, 68, 48)';
+exports.colorOrangeDarker = 'rgb(74, 21, 4)';
+exports.colorOrangeDark = 'rgb(192, 87, 23)';
+exports.colorOrange = 'rgb(244, 147, 66)';
+exports.colorOrangeLight = 'rgb(255, 197, 139)';
+exports.colorOrangeLighter = 'rgb(252, 235, 219)';
+exports.colorRedText = 'rgb(88, 60, 53)';
+exports.colorRedDarker = 'rgb(51, 1, 1)';
+exports.colorRedDark = 'rgb(191, 7, 17)';
+exports.colorRed = 'rgb(222, 54, 24)';
+exports.colorRedLight = 'rgb(254, 173, 154)';
+exports.colorRedLighter = 'rgb(251, 234, 229)';
+exports.colorInk = 'rgb(33, 43, 54)';
+exports.colorInkLight = 'rgb(69, 79, 91)';
+exports.colorInkLighter = 'rgb(99, 115, 129)';
+exports.colorInkLightest = 'rgb(145, 158, 171)';
+exports.colorSkyDark = 'rgb(196, 205, 213)';
+exports.colorSky = 'rgb(223, 227, 232)';
+exports.colorSkyLight = 'rgb(244, 246, 248)';
+exports.colorSkyLighter = 'rgb(249, 250, 251)';
+exports.colorBlack = 'rgb(0, 0, 0)';
+exports.colorWhite = 'rgb(255, 255, 255)';
+exports.durationNone = 0;
+exports.durationFast = 100;
+exports.durationBase = 200;
+exports.durationSlow = 300;
+exports.durationSlower = 400;
+exports.durationSlowest = 500;
+exports.spacingNone = 0;
+exports.spacingExtraTight = '4px';
+exports.spacingTight = '8px';
+exports.spacingBaseTight = '12px';
+exports.spacingBase = '16px';
+exports.spacingLoose = '20px';
+exports.spacingExtraLoose = '32px';
+exports.fontStackBase = "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+exports.fontStackMonospace = "Monaco, Consolas, 'Lucida Console', monospace";
+// When this package shipped only CJS, bundlers applied some cjs-to-esm interop
+// dark magic that meant you could access content from index.common.js from an
+// esm file in many ways.
+// The following were all valid ways to access tokens:
+//
+// import {colorInk as namedImport} from '@shopify/polaris-tokens'
+// import * as namespaceImport from '@shopify/polaris-tokens'
+// import defaultImport from '@shopify/polaris-tokens'
+// console.log(colorInk, namespaceImport.colorInk, defaultImport.colorInk)
+//
+// In order to avoid adding this esm file being a breaking change, we must
+// provide a default export to maintain compatibility.
+// This is a deprecated way of accessing tokens. Consumers should use either
+// named imports (`import {colorInk}`) or a namespace import
+// (`import * as tokens`).
+// This default export should be removed in polaris-tokens v3 if we don't
+// remove this file entirely.
+exports.default = {
+    colorPurpleText: exports.colorPurpleText,
+    colorPurpleDarker: exports.colorPurpleDarker,
+    colorPurpleDark: exports.colorPurpleDark,
+    colorPurple: exports.colorPurple,
+    colorPurpleLight: exports.colorPurpleLight,
+    colorPurpleLighter: exports.colorPurpleLighter,
+    colorIndigoText: exports.colorIndigoText,
+    colorIndigoDarker: exports.colorIndigoDarker,
+    colorIndigoDark: exports.colorIndigoDark,
+    colorIndigo: exports.colorIndigo,
+    colorIndigoLight: exports.colorIndigoLight,
+    colorIndigoLighter: exports.colorIndigoLighter,
+    colorBlueText: exports.colorBlueText,
+    colorBlueDarker: exports.colorBlueDarker,
+    colorBlueDark: exports.colorBlueDark,
+    colorBlue: exports.colorBlue,
+    colorBlueLight: exports.colorBlueLight,
+    colorBlueLighter: exports.colorBlueLighter,
+    colorTealText: exports.colorTealText,
+    colorTealDarker: exports.colorTealDarker,
+    colorTealDark: exports.colorTealDark,
+    colorTeal: exports.colorTeal,
+    colorTealLight: exports.colorTealLight,
+    colorTealLighter: exports.colorTealLighter,
+    colorGreenText: exports.colorGreenText,
+    colorGreenDarker: exports.colorGreenDarker,
+    colorGreenDark: exports.colorGreenDark,
+    colorGreen: exports.colorGreen,
+    colorGreenLight: exports.colorGreenLight,
+    colorGreenLighter: exports.colorGreenLighter,
+    colorYellowText: exports.colorYellowText,
+    colorYellowDarker: exports.colorYellowDarker,
+    colorYellowDark: exports.colorYellowDark,
+    colorYellow: exports.colorYellow,
+    colorYellowLight: exports.colorYellowLight,
+    colorYellowLighter: exports.colorYellowLighter,
+    colorOrangeText: exports.colorOrangeText,
+    colorOrangeDarker: exports.colorOrangeDarker,
+    colorOrangeDark: exports.colorOrangeDark,
+    colorOrange: exports.colorOrange,
+    colorOrangeLight: exports.colorOrangeLight,
+    colorOrangeLighter: exports.colorOrangeLighter,
+    colorRedText: exports.colorRedText,
+    colorRedDarker: exports.colorRedDarker,
+    colorRedDark: exports.colorRedDark,
+    colorRed: exports.colorRed,
+    colorRedLight: exports.colorRedLight,
+    colorRedLighter: exports.colorRedLighter,
+    colorInk: exports.colorInk,
+    colorInkLight: exports.colorInkLight,
+    colorInkLighter: exports.colorInkLighter,
+    colorInkLightest: exports.colorInkLightest,
+    colorSkyDark: exports.colorSkyDark,
+    colorSky: exports.colorSky,
+    colorSkyLight: exports.colorSkyLight,
+    colorSkyLighter: exports.colorSkyLighter,
+    colorBlack: exports.colorBlack,
+    colorWhite: exports.colorWhite,
+    durationNone: exports.durationNone,
+    durationFast: exports.durationFast,
+    durationBase: exports.durationBase,
+    durationSlow: exports.durationSlow,
+    durationSlower: exports.durationSlower,
+    durationSlowest: exports.durationSlowest,
+    spacingNone: exports.spacingNone,
+    spacingExtraTight: exports.spacingExtraTight,
+    spacingTight: exports.spacingTight,
+    spacingBaseTight: exports.spacingBaseTight,
+    spacingBase: exports.spacingBase,
+    spacingLoose: exports.spacingLoose,
+    spacingExtraLoose: exports.spacingExtraLoose,
+    fontStackBase: exports.fontStackBase,
+    fontStackMonospace: exports.fontStackMonospace,
+};
diff --git a/src/styles/polaris-tokens/index.custom-properties.css b/src/styles/polaris-tokens/index.custom-properties.css
new file mode 100644
index 00000000000..40adf7f31e2
--- /dev/null
+++ b/src/styles/polaris-tokens/index.custom-properties.css
@@ -0,0 +1,76 @@
+:root {
+  --color-purple-text: rgb(80, 73, 90);
+  --color-purple-darker: rgb(35, 0, 81);
+  --color-purple-dark: rgb(80, 36, 143);
+  --color-purple: rgb(156, 106, 222);
+  --color-purple-light: rgb(227, 208, 255);
+  --color-purple-lighter: rgb(246, 240, 253);
+  --color-indigo-text: rgb(62, 65, 85);
+  --color-indigo-darker: rgb(0, 6, 57);
+  --color-indigo-dark: rgb(32, 46, 120);
+  --color-indigo: rgb(92, 106, 196);
+  --color-indigo-light: rgb(179, 188, 245);
+  --color-indigo-lighter: rgb(244, 245, 250);
+  --color-blue-text: rgb(62, 78, 87);
+  --color-blue-darker: rgb(0, 20, 41);
+  --color-blue-dark: rgb(8, 78, 138);
+  --color-blue: rgb(0, 111, 187);
+  --color-blue-light: rgb(180, 225, 250);
+  --color-blue-lighter: rgb(235, 245, 250);
+  --color-teal-text: rgb(64, 83, 82);
+  --color-teal-darker: rgb(0, 49, 53);
+  --color-teal-dark: rgb(0, 132, 142);
+  --color-teal: rgb(71, 193, 191);
+  --color-teal-light: rgb(183, 236, 236);
+  --color-teal-lighter: rgb(224, 245, 245);
+  --color-green-text: rgb(65, 79, 62);
+  --color-green-darker: rgb(23, 54, 48);
+  --color-green-dark: rgb(16, 128, 67);
+  --color-green: rgb(80, 184, 60);
+  --color-green-light: rgb(187, 229, 179);
+  --color-green-lighter: rgb(227, 241, 223);
+  --color-yellow-text: rgb(89, 81, 48);
+  --color-yellow-darker: rgb(87, 59, 0);
+  --color-yellow-dark: rgb(138, 97, 22);
+  --color-yellow: rgb(238, 194, 0);
+  --color-yellow-light: rgb(255, 234, 138);
+  --color-yellow-lighter: rgb(252, 241, 205);
+  --color-orange-text: rgb(89, 68, 48);
+  --color-orange-darker: rgb(74, 21, 4);
+  --color-orange-dark: rgb(192, 87, 23);
+  --color-orange: rgb(244, 147, 66);
+  --color-orange-light: rgb(255, 197, 139);
+  --color-orange-lighter: rgb(252, 235, 219);
+  --color-red-text: rgb(88, 60, 53);
+  --color-red-darker: rgb(51, 1, 1);
+  --color-red-dark: rgb(191, 7, 17);
+  --color-red: rgb(222, 54, 24);
+  --color-red-light: rgb(254, 173, 154);
+  --color-red-lighter: rgb(251, 234, 229);
+  --color-ink: rgb(33, 43, 54);
+  --color-ink-light: rgb(69, 79, 91);
+  --color-ink-lighter: rgb(99, 115, 129);
+  --color-ink-lightest: rgb(145, 158, 171);
+  --color-sky-dark: rgb(196, 205, 213);
+  --color-sky: rgb(223, 227, 232);
+  --color-sky-light: rgb(244, 246, 248);
+  --color-sky-lighter: rgb(249, 250, 251);
+  --color-black: rgb(0, 0, 0);
+  --color-white: rgb(255, 255, 255);
+  --duration-none: 0;
+  --duration-fast: 100ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 400ms;
+  --duration-slowest: 500ms;
+  --spacing-none: 0;
+  --spacing-extra-tight: 4px;
+  --spacing-tight: 8px;
+  --spacing-base-tight: 12px;
+  --spacing-base: 16px;
+  --spacing-loose: 20px;
+  --spacing-extra-loose: 32px;
+  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco',
+    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
+}
diff --git a/src/styles/polaris-tokens/index.d.ts b/src/styles/polaris-tokens/index.d.ts
new file mode 100644
index 00000000000..05879cd2c96
--- /dev/null
+++ b/src/styles/polaris-tokens/index.d.ts
@@ -0,0 +1,149 @@
+export declare const colorPurpleText = "rgb(80, 73, 90)";
+export declare const colorPurpleDarker = "rgb(35, 0, 81)";
+export declare const colorPurpleDark = "rgb(80, 36, 143)";
+export declare const colorPurple = "rgb(156, 106, 222)";
+export declare const colorPurpleLight = "rgb(227, 208, 255)";
+export declare const colorPurpleLighter = "rgb(246, 240, 253)";
+export declare const colorIndigoText = "rgb(62, 65, 85)";
+export declare const colorIndigoDarker = "rgb(0, 6, 57)";
+export declare const colorIndigoDark = "rgb(32, 46, 120)";
+export declare const colorIndigo = "rgb(92, 106, 196)";
+export declare const colorIndigoLight = "rgb(179, 188, 245)";
+export declare const colorIndigoLighter = "rgb(244, 245, 250)";
+export declare const colorBlueText = "rgb(62, 78, 87)";
+export declare const colorBlueDarker = "rgb(0, 20, 41)";
+export declare const colorBlueDark = "rgb(8, 78, 138)";
+export declare const colorBlue = "rgb(0, 111, 187)";
+export declare const colorBlueLight = "rgb(180, 225, 250)";
+export declare const colorBlueLighter = "rgb(235, 245, 250)";
+export declare const colorTealText = "rgb(64, 83, 82)";
+export declare const colorTealDarker = "rgb(0, 49, 53)";
+export declare const colorTealDark = "rgb(0, 132, 142)";
+export declare const colorTeal = "rgb(71, 193, 191)";
+export declare const colorTealLight = "rgb(183, 236, 236)";
+export declare const colorTealLighter = "rgb(224, 245, 245)";
+export declare const colorGreenText = "rgb(65, 79, 62)";
+export declare const colorGreenDarker = "rgb(23, 54, 48)";
+export declare const colorGreenDark = "rgb(16, 128, 67)";
+export declare const colorGreen = "rgb(80, 184, 60)";
+export declare const colorGreenLight = "rgb(187, 229, 179)";
+export declare const colorGreenLighter = "rgb(227, 241, 223)";
+export declare const colorYellowText = "rgb(89, 81, 48)";
+export declare const colorYellowDarker = "rgb(87, 59, 0)";
+export declare const colorYellowDark = "rgb(138, 97, 22)";
+export declare const colorYellow = "rgb(238, 194, 0)";
+export declare const colorYellowLight = "rgb(255, 234, 138)";
+export declare const colorYellowLighter = "rgb(252, 241, 205)";
+export declare const colorOrangeText = "rgb(89, 68, 48)";
+export declare const colorOrangeDarker = "rgb(74, 21, 4)";
+export declare const colorOrangeDark = "rgb(192, 87, 23)";
+export declare const colorOrange = "rgb(244, 147, 66)";
+export declare const colorOrangeLight = "rgb(255, 197, 139)";
+export declare const colorOrangeLighter = "rgb(252, 235, 219)";
+export declare const colorRedText = "rgb(88, 60, 53)";
+export declare const colorRedDarker = "rgb(51, 1, 1)";
+export declare const colorRedDark = "rgb(191, 7, 17)";
+export declare const colorRed = "rgb(222, 54, 24)";
+export declare const colorRedLight = "rgb(254, 173, 154)";
+export declare const colorRedLighter = "rgb(251, 234, 229)";
+export declare const colorInk = "rgb(33, 43, 54)";
+export declare const colorInkLight = "rgb(69, 79, 91)";
+export declare const colorInkLighter = "rgb(99, 115, 129)";
+export declare const colorInkLightest = "rgb(145, 158, 171)";
+export declare const colorSkyDark = "rgb(196, 205, 213)";
+export declare const colorSky = "rgb(223, 227, 232)";
+export declare const colorSkyLight = "rgb(244, 246, 248)";
+export declare const colorSkyLighter = "rgb(249, 250, 251)";
+export declare const colorBlack = "rgb(0, 0, 0)";
+export declare const colorWhite = "rgb(255, 255, 255)";
+export declare const durationNone = 0;
+export declare const durationFast = 100;
+export declare const durationBase = 200;
+export declare const durationSlow = 300;
+export declare const durationSlower = 400;
+export declare const durationSlowest = 500;
+export declare const spacingNone = 0;
+export declare const spacingExtraTight = "4px";
+export declare const spacingTight = "8px";
+export declare const spacingBaseTight = "12px";
+export declare const spacingBase = "16px";
+export declare const spacingLoose = "20px";
+export declare const spacingExtraLoose = "32px";
+export declare const fontStackBase = "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+export declare const fontStackMonospace = "Monaco, Consolas, 'Lucida Console', monospace";
+declare const _default: {
+    colorPurpleText: string;
+    colorPurpleDarker: string;
+    colorPurpleDark: string;
+    colorPurple: string;
+    colorPurpleLight: string;
+    colorPurpleLighter: string;
+    colorIndigoText: string;
+    colorIndigoDarker: string;
+    colorIndigoDark: string;
+    colorIndigo: string;
+    colorIndigoLight: string;
+    colorIndigoLighter: string;
+    colorBlueText: string;
+    colorBlueDarker: string;
+    colorBlueDark: string;
+    colorBlue: string;
+    colorBlueLight: string;
+    colorBlueLighter: string;
+    colorTealText: string;
+    colorTealDarker: string;
+    colorTealDark: string;
+    colorTeal: string;
+    colorTealLight: string;
+    colorTealLighter: string;
+    colorGreenText: string;
+    colorGreenDarker: string;
+    colorGreenDark: string;
+    colorGreen: string;
+    colorGreenLight: string;
+    colorGreenLighter: string;
+    colorYellowText: string;
+    colorYellowDarker: string;
+    colorYellowDark: string;
+    colorYellow: string;
+    colorYellowLight: string;
+    colorYellowLighter: string;
+    colorOrangeText: string;
+    colorOrangeDarker: string;
+    colorOrangeDark: string;
+    colorOrange: string;
+    colorOrangeLight: string;
+    colorOrangeLighter: string;
+    colorRedText: string;
+    colorRedDarker: string;
+    colorRedDark: string;
+    colorRed: string;
+    colorRedLight: string;
+    colorRedLighter: string;
+    colorInk: string;
+    colorInkLight: string;
+    colorInkLighter: string;
+    colorInkLightest: string;
+    colorSkyDark: string;
+    colorSky: string;
+    colorSkyLight: string;
+    colorSkyLighter: string;
+    colorBlack: string;
+    colorWhite: string;
+    durationNone: number;
+    durationFast: number;
+    durationBase: number;
+    durationSlow: number;
+    durationSlower: number;
+    durationSlowest: number;
+    spacingNone: number;
+    spacingExtraTight: string;
+    spacingTight: string;
+    spacingBaseTight: string;
+    spacingBase: string;
+    spacingLoose: string;
+    spacingExtraLoose: string;
+    fontStackBase: string;
+    fontStackMonospace: string;
+};
+export default _default;
diff --git a/src/styles/polaris-tokens/index.esm.js b/src/styles/polaris-tokens/index.esm.js
new file mode 100644
index 00000000000..0f278101172
--- /dev/null
+++ b/src/styles/polaris-tokens/index.esm.js
@@ -0,0 +1,166 @@
+export const colorPurpleText = 'rgb(80, 73, 90)';
+export const colorPurpleDarker = 'rgb(35, 0, 81)';
+export const colorPurpleDark = 'rgb(80, 36, 143)';
+export const colorPurple = 'rgb(156, 106, 222)';
+export const colorPurpleLight = 'rgb(227, 208, 255)';
+export const colorPurpleLighter = 'rgb(246, 240, 253)';
+export const colorIndigoText = 'rgb(62, 65, 85)';
+export const colorIndigoDarker = 'rgb(0, 6, 57)';
+export const colorIndigoDark = 'rgb(32, 46, 120)';
+export const colorIndigo = 'rgb(92, 106, 196)';
+export const colorIndigoLight = 'rgb(179, 188, 245)';
+export const colorIndigoLighter = 'rgb(244, 245, 250)';
+export const colorBlueText = 'rgb(62, 78, 87)';
+export const colorBlueDarker = 'rgb(0, 20, 41)';
+export const colorBlueDark = 'rgb(8, 78, 138)';
+export const colorBlue = 'rgb(0, 111, 187)';
+export const colorBlueLight = 'rgb(180, 225, 250)';
+export const colorBlueLighter = 'rgb(235, 245, 250)';
+export const colorTealText = 'rgb(64, 83, 82)';
+export const colorTealDarker = 'rgb(0, 49, 53)';
+export const colorTealDark = 'rgb(0, 132, 142)';
+export const colorTeal = 'rgb(71, 193, 191)';
+export const colorTealLight = 'rgb(183, 236, 236)';
+export const colorTealLighter = 'rgb(224, 245, 245)';
+export const colorGreenText = 'rgb(65, 79, 62)';
+export const colorGreenDarker = 'rgb(23, 54, 48)';
+export const colorGreenDark = 'rgb(16, 128, 67)';
+export const colorGreen = 'rgb(80, 184, 60)';
+export const colorGreenLight = 'rgb(187, 229, 179)';
+export const colorGreenLighter = 'rgb(227, 241, 223)';
+export const colorYellowText = 'rgb(89, 81, 48)';
+export const colorYellowDarker = 'rgb(87, 59, 0)';
+export const colorYellowDark = 'rgb(138, 97, 22)';
+export const colorYellow = 'rgb(238, 194, 0)';
+export const colorYellowLight = 'rgb(255, 234, 138)';
+export const colorYellowLighter = 'rgb(252, 241, 205)';
+export const colorOrangeText = 'rgb(89, 68, 48)';
+export const colorOrangeDarker = 'rgb(74, 21, 4)';
+export const colorOrangeDark = 'rgb(192, 87, 23)';
+export const colorOrange = 'rgb(244, 147, 66)';
+export const colorOrangeLight = 'rgb(255, 197, 139)';
+export const colorOrangeLighter = 'rgb(252, 235, 219)';
+export const colorRedText = 'rgb(88, 60, 53)';
+export const colorRedDarker = 'rgb(51, 1, 1)';
+export const colorRedDark = 'rgb(191, 7, 17)';
+export const colorRed = 'rgb(222, 54, 24)';
+export const colorRedLight = 'rgb(254, 173, 154)';
+export const colorRedLighter = 'rgb(251, 234, 229)';
+export const colorInk = 'rgb(33, 43, 54)';
+export const colorInkLight = 'rgb(69, 79, 91)';
+export const colorInkLighter = 'rgb(99, 115, 129)';
+export const colorInkLightest = 'rgb(145, 158, 171)';
+export const colorSkyDark = 'rgb(196, 205, 213)';
+export const colorSky = 'rgb(223, 227, 232)';
+export const colorSkyLight = 'rgb(244, 246, 248)';
+export const colorSkyLighter = 'rgb(249, 250, 251)';
+export const colorBlack = 'rgb(0, 0, 0)';
+export const colorWhite = 'rgb(255, 255, 255)';
+export const durationNone = 0;
+export const durationFast = 100;
+export const durationBase = 200;
+export const durationSlow = 300;
+export const durationSlower = 400;
+export const durationSlowest = 500;
+export const spacingNone = 0;
+export const spacingExtraTight = '4px';
+export const spacingTight = '8px';
+export const spacingBaseTight = '12px';
+export const spacingBase = '16px';
+export const spacingLoose = '20px';
+export const spacingExtraLoose = '32px';
+export const fontStackBase = "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+export const fontStackMonospace = "Monaco, Consolas, 'Lucida Console', monospace";
+
+// When this package shipped only CJS, bundlers applied some cjs-to-esm interop
+// dark magic that meant you could access content from index.common.js from an
+// esm file in many ways.
+// The following were all valid ways to access tokens:
+//
+// import {colorInk as namedImport} from '@shopify/polaris-tokens'
+// import * as namespaceImport from '@shopify/polaris-tokens'
+// import defaultImport from '@shopify/polaris-tokens'
+// console.log(colorInk, namespaceImport.colorInk, defaultImport.colorInk)
+//
+// In order to avoid adding this esm file being a breaking change, we must
+// provide a default export to maintain compatibility.
+// This is a deprecated way of accessing tokens. Consumers should use either
+// named imports (`import {colorInk}`) or a namespace import
+// (`import * as tokens`).
+// This default export should be removed in polaris-tokens v3 if we don't
+// remove this file entirely.
+export default {
+  colorPurpleText,
+  colorPurpleDarker,
+  colorPurpleDark,
+  colorPurple,
+  colorPurpleLight,
+  colorPurpleLighter,
+  colorIndigoText,
+  colorIndigoDarker,
+  colorIndigoDark,
+  colorIndigo,
+  colorIndigoLight,
+  colorIndigoLighter,
+  colorBlueText,
+  colorBlueDarker,
+  colorBlueDark,
+  colorBlue,
+  colorBlueLight,
+  colorBlueLighter,
+  colorTealText,
+  colorTealDarker,
+  colorTealDark,
+  colorTeal,
+  colorTealLight,
+  colorTealLighter,
+  colorGreenText,
+  colorGreenDarker,
+  colorGreenDark,
+  colorGreen,
+  colorGreenLight,
+  colorGreenLighter,
+  colorYellowText,
+  colorYellowDarker,
+  colorYellowDark,
+  colorYellow,
+  colorYellowLight,
+  colorYellowLighter,
+  colorOrangeText,
+  colorOrangeDarker,
+  colorOrangeDark,
+  colorOrange,
+  colorOrangeLight,
+  colorOrangeLighter,
+  colorRedText,
+  colorRedDarker,
+  colorRedDark,
+  colorRed,
+  colorRedLight,
+  colorRedLighter,
+  colorInk,
+  colorInkLight,
+  colorInkLighter,
+  colorInkLightest,
+  colorSkyDark,
+  colorSky,
+  colorSkyLight,
+  colorSkyLighter,
+  colorBlack,
+  colorWhite,
+  durationNone,
+  durationFast,
+  durationBase,
+  durationSlow,
+  durationSlower,
+  durationSlowest,
+  spacingNone,
+  spacingExtraTight,
+  spacingTight,
+  spacingBaseTight,
+  spacingBase,
+  spacingLoose,
+  spacingExtraLoose,
+  fontStackBase,
+  fontStackMonospace,
+}
diff --git a/src/styles/polaris-tokens/index.json b/src/styles/polaris-tokens/index.json
new file mode 100644
index 00000000000..b1d9d55210e
--- /dev/null
+++ b/src/styles/polaris-tokens/index.json
@@ -0,0 +1,75 @@
+{
+  "color-purple-text": "rgb(80, 73, 90)",
+  "color-purple-darker": "rgb(35, 0, 81)",
+  "color-purple-dark": "rgb(80, 36, 143)",
+  "color-purple": "rgb(156, 106, 222)",
+  "color-purple-light": "rgb(227, 208, 255)",
+  "color-purple-lighter": "rgb(246, 240, 253)",
+  "color-indigo-text": "rgb(62, 65, 85)",
+  "color-indigo-darker": "rgb(0, 6, 57)",
+  "color-indigo-dark": "rgb(32, 46, 120)",
+  "color-indigo": "rgb(92, 106, 196)",
+  "color-indigo-light": "rgb(179, 188, 245)",
+  "color-indigo-lighter": "rgb(244, 245, 250)",
+  "color-blue-text": "rgb(62, 78, 87)",
+  "color-blue-darker": "rgb(0, 20, 41)",
+  "color-blue-dark": "rgb(8, 78, 138)",
+  "color-blue": "rgb(0, 111, 187)",
+  "color-blue-light": "rgb(180, 225, 250)",
+  "color-blue-lighter": "rgb(235, 245, 250)",
+  "color-teal-text": "rgb(64, 83, 82)",
+  "color-teal-darker": "rgb(0, 49, 53)",
+  "color-teal-dark": "rgb(0, 132, 142)",
+  "color-teal": "rgb(71, 193, 191)",
+  "color-teal-light": "rgb(183, 236, 236)",
+  "color-teal-lighter": "rgb(224, 245, 245)",
+  "color-green-text": "rgb(65, 79, 62)",
+  "color-green-darker": "rgb(23, 54, 48)",
+  "color-green-dark": "rgb(16, 128, 67)",
+  "color-green": "rgb(80, 184, 60)",
+  "color-green-light": "rgb(187, 229, 179)",
+  "color-green-lighter": "rgb(227, 241, 223)",
+  "color-yellow-text": "rgb(89, 81, 48)",
+  "color-yellow-darker": "rgb(87, 59, 0)",
+  "color-yellow-dark": "rgb(138, 97, 22)",
+  "color-yellow": "rgb(238, 194, 0)",
+  "color-yellow-light": "rgb(255, 234, 138)",
+  "color-yellow-lighter": "rgb(252, 241, 205)",
+  "color-orange-text": "rgb(89, 68, 48)",
+  "color-orange-darker": "rgb(74, 21, 4)",
+  "color-orange-dark": "rgb(192, 87, 23)",
+  "color-orange": "rgb(244, 147, 66)",
+  "color-orange-light": "rgb(255, 197, 139)",
+  "color-orange-lighter": "rgb(252, 235, 219)",
+  "color-red-text": "rgb(88, 60, 53)",
+  "color-red-darker": "rgb(51, 1, 1)",
+  "color-red-dark": "rgb(191, 7, 17)",
+  "color-red": "rgb(222, 54, 24)",
+  "color-red-light": "rgb(254, 173, 154)",
+  "color-red-lighter": "rgb(251, 234, 229)",
+  "color-ink": "rgb(33, 43, 54)",
+  "color-ink-light": "rgb(69, 79, 91)",
+  "color-ink-lighter": "rgb(99, 115, 129)",
+  "color-ink-lightest": "rgb(145, 158, 171)",
+  "color-sky-dark": "rgb(196, 205, 213)",
+  "color-sky": "rgb(223, 227, 232)",
+  "color-sky-light": "rgb(244, 246, 248)",
+  "color-sky-lighter": "rgb(249, 250, 251)",
+  "color-black": "rgb(0, 0, 0)",
+  "color-white": "rgb(255, 255, 255)",
+  "duration-none": 0,
+  "duration-fast": 100,
+  "duration-base": 200,
+  "duration-slow": 300,
+  "duration-slower": 400,
+  "duration-slowest": 500,
+  "spacing-none": 0,
+  "spacing-extra-tight": "4px",
+  "spacing-tight": "8px",
+  "spacing-base-tight": "12px",
+  "spacing-base": "16px",
+  "spacing-loose": "20px",
+  "spacing-extra-loose": "32px",
+  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
+}
diff --git a/src/styles/polaris-tokens/index.map.scss b/src/styles/polaris-tokens/index.map.scss
new file mode 100644
index 00000000000..723f3d20f2d
--- /dev/null
+++ b/src/styles/polaris-tokens/index.map.scss
@@ -0,0 +1,230 @@
+$polaris-index-map: (
+  'color-purple-text': (
+    rgb(80, 73, 90),
+  ),
+  'color-purple-darker': (
+    rgb(35, 0, 81),
+  ),
+  'color-purple-dark': (
+    rgb(80, 36, 143),
+  ),
+  'color-purple': (
+    rgb(156, 106, 222),
+  ),
+  'color-purple-light': (
+    rgb(227, 208, 255),
+  ),
+  'color-purple-lighter': (
+    rgb(246, 240, 253),
+  ),
+  'color-indigo-text': (
+    rgb(62, 65, 85),
+  ),
+  'color-indigo-darker': (
+    rgb(0, 6, 57),
+  ),
+  'color-indigo-dark': (
+    rgb(32, 46, 120),
+  ),
+  'color-indigo': (
+    rgb(92, 106, 196),
+  ),
+  'color-indigo-light': (
+    rgb(179, 188, 245),
+  ),
+  'color-indigo-lighter': (
+    rgb(244, 245, 250),
+  ),
+  'color-blue-text': (
+    rgb(62, 78, 87),
+  ),
+  'color-blue-darker': (
+    rgb(0, 20, 41),
+  ),
+  'color-blue-dark': (
+    rgb(8, 78, 138),
+  ),
+  'color-blue': (
+    rgb(0, 111, 187),
+  ),
+  'color-blue-light': (
+    rgb(180, 225, 250),
+  ),
+  'color-blue-lighter': (
+    rgb(235, 245, 250),
+  ),
+  'color-teal-text': (
+    rgb(64, 83, 82),
+  ),
+  'color-teal-darker': (
+    rgb(0, 49, 53),
+  ),
+  'color-teal-dark': (
+    rgb(0, 132, 142),
+  ),
+  'color-teal': (
+    rgb(71, 193, 191),
+  ),
+  'color-teal-light': (
+    rgb(183, 236, 236),
+  ),
+  'color-teal-lighter': (
+    rgb(224, 245, 245),
+  ),
+  'color-green-text': (
+    rgb(65, 79, 62),
+  ),
+  'color-green-darker': (
+    rgb(23, 54, 48),
+  ),
+  'color-green-dark': (
+    rgb(16, 128, 67),
+  ),
+  'color-green': (
+    rgb(80, 184, 60),
+  ),
+  'color-green-light': (
+    rgb(187, 229, 179),
+  ),
+  'color-green-lighter': (
+    rgb(227, 241, 223),
+  ),
+  'color-yellow-text': (
+    rgb(89, 81, 48),
+  ),
+  'color-yellow-darker': (
+    rgb(87, 59, 0),
+  ),
+  'color-yellow-dark': (
+    rgb(138, 97, 22),
+  ),
+  'color-yellow': (
+    rgb(238, 194, 0),
+  ),
+  'color-yellow-light': (
+    rgb(255, 234, 138),
+  ),
+  'color-yellow-lighter': (
+    rgb(252, 241, 205),
+  ),
+  'color-orange-text': (
+    rgb(89, 68, 48),
+  ),
+  'color-orange-darker': (
+    rgb(74, 21, 4),
+  ),
+  'color-orange-dark': (
+    rgb(192, 87, 23),
+  ),
+  'color-orange': (
+    rgb(244, 147, 66),
+  ),
+  'color-orange-light': (
+    rgb(255, 197, 139),
+  ),
+  'color-orange-lighter': (
+    rgb(252, 235, 219),
+  ),
+  'color-red-text': (
+    rgb(88, 60, 53),
+  ),
+  'color-red-darker': (
+    rgb(51, 1, 1),
+  ),
+  'color-red-dark': (
+    rgb(191, 7, 17),
+  ),
+  'color-red': (
+    rgb(222, 54, 24),
+  ),
+  'color-red-light': (
+    rgb(254, 173, 154),
+  ),
+  'color-red-lighter': (
+    rgb(251, 234, 229),
+  ),
+  'color-ink': (
+    rgb(33, 43, 54),
+  ),
+  'color-ink-light': (
+    rgb(69, 79, 91),
+  ),
+  'color-ink-lighter': (
+    rgb(99, 115, 129),
+  ),
+  'color-ink-lightest': (
+    rgb(145, 158, 171),
+  ),
+  'color-sky-dark': (
+    rgb(196, 205, 213),
+  ),
+  'color-sky': (
+    rgb(223, 227, 232),
+  ),
+  'color-sky-light': (
+    rgb(244, 246, 248),
+  ),
+  'color-sky-lighter': (
+    rgb(249, 250, 251),
+  ),
+  'color-black': (
+    rgb(0, 0, 0),
+  ),
+  'color-white': (
+    rgb(255, 255, 255),
+  ),
+  'duration-none': (
+    0,
+  ),
+  'duration-fast': (
+    100ms,
+  ),
+  'duration-base': (
+    200ms,
+  ),
+  'duration-slow': (
+    300ms,
+  ),
+  'duration-slower': (
+    400ms,
+  ),
+  'duration-slowest': (
+    500ms,
+  ),
+  'spacing-none': (
+    0,
+  ),
+  'spacing-extra-tight': (
+    4px,
+  ),
+  'spacing-tight': (
+    8px,
+  ),
+  'spacing-base-tight': (
+    12px,
+  ),
+  'spacing-base': (
+    16px,
+  ),
+  'spacing-loose': (
+    20px,
+  ),
+  'spacing-extra-loose': (
+    32px,
+  ),
+  'font-stack-base': (
+    -apple-system,
+    BlinkMacSystemFont,
+    'San Francisco',
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    sans-serif,
+  ),
+  'font-stack-monospace': (
+    Monaco,
+    Consolas,
+    'Lucida Console',
+    monospace,
+  ),
+);
diff --git a/src/styles/polaris-tokens/index.raw.json b/src/styles/polaris-tokens/index.raw.json
new file mode 100644
index 00000000000..db8888ee3bc
--- /dev/null
+++ b/src/styles/polaris-tokens/index.raw.json
@@ -0,0 +1,691 @@
+{
+  "aliases": {
+    "color-sky-light": {
+      "value": "#f4f6f8"
+    },
+    "color-ink-lightest": {
+      "value": "#919eab"
+    },
+    "color-green-text": {
+      "value": "#414f3e"
+    },
+    "color-orange-light": {
+      "value": "#ffc58b"
+    },
+    "color-orange-text": {
+      "value": "#594430"
+    },
+    "color-green-light": {
+      "value": "#bbe5b3"
+    },
+    "color-blue": {
+      "value": "#006fbb"
+    },
+    "color-indigo-light": {
+      "value": "#b3bcf5"
+    },
+    "color-yellow-dark": {
+      "value": "#8a6116"
+    },
+    "color-ink-light": {
+      "value": "#454f5b"
+    },
+    "color-purple": {
+      "value": "#9c6ade"
+    },
+    "color-teal": {
+      "value": "#47c1bf"
+    },
+    "color-yellow-light": {
+      "value": "#ffea8a"
+    },
+    "color-indigo-dark": {
+      "value": "#202e78"
+    },
+    "color-red": {
+      "value": "#de3618"
+    },
+    "color-red-darker": {
+      "value": "#330101"
+    },
+    "color-green-dark": {
+      "value": "#108043"
+    },
+    "color-purple-darker": {
+      "value": "#230051"
+    },
+    "color-teal-darker": {
+      "value": "#003135"
+    },
+    "color-orange-dark": {
+      "value": "#c05717"
+    },
+    "color-blue-darker": {
+      "value": "#001429"
+    },
+    "color-sky-dark": {
+      "value": "#c4cdd5"
+    },
+    "color-sky-lighter": {
+      "value": "#f9fafb"
+    },
+    "color-blue-light": {
+      "value": "#b4e1fa"
+    },
+    "color-orange-lighter": {
+      "value": "#fcebdb"
+    },
+    "color-purple-light": {
+      "value": "#e3d0ff"
+    },
+    "color-green-lighter": {
+      "value": "#e3f1df"
+    },
+    "color-teal-light": {
+      "value": "#b7ecec"
+    },
+    "color-red-light": {
+      "value": "#fead9a"
+    },
+    "color-yellow-darker": {
+      "value": "#573b00"
+    },
+    "color-ink-lighter": {
+      "value": "#637381"
+    },
+    "color-indigo-lighter": {
+      "value": "#f4f5fa"
+    },
+    "color-red-text": {
+      "value": "#583c35"
+    },
+    "color-teal-text": {
+      "value": "#405352"
+    },
+    "color-indigo-darker": {
+      "value": "#000639"
+    },
+    "color-purple-text": {
+      "value": "#50495a"
+    },
+    "color-yellow-lighter": {
+      "value": "#fcf1cd"
+    },
+    "color-black": {
+      "value": "#000000"
+    },
+    "color-blue-text": {
+      "value": "#3e4e57"
+    },
+    "color-green-darker": {
+      "value": "#173630"
+    },
+    "color-sky": {
+      "value": "#dfe3e8"
+    },
+    "color-orange-darker": {
+      "value": "#4a1504"
+    },
+    "color-orange": {
+      "value": "#f49342"
+    },
+    "color-green": {
+      "value": "#50b83c"
+    },
+    "color-blue-lighter": {
+      "value": "#ebf5fa"
+    },
+    "color-indigo": {
+      "value": "#5c6ac4"
+    },
+    "color-red-dark": {
+      "value": "#bf0711"
+    },
+    "color-ink": {
+      "value": "#212b36"
+    },
+    "color-purple-lighter": {
+      "value": "#f6f0fd"
+    },
+    "color-yellow-text": {
+      "value": "#595130"
+    },
+    "color-teal-lighter": {
+      "value": "#e0f5f5"
+    },
+    "color-teal-dark": {
+      "value": "#00848e"
+    },
+    "color-purple-dark": {
+      "value": "#50248f"
+    },
+    "color-red-lighter": {
+      "value": "#fbeae5"
+    },
+    "color-yellow": {
+      "value": "#eec200"
+    },
+    "color-indigo-text": {
+      "value": "#3e4155"
+    },
+    "color-white": {
+      "value": "#ffffff"
+    },
+    "color-blue-dark": {
+      "value": "#084e8a"
+    }
+  },
+  "props": {
+    "color-purple-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-purple-text",
+      "value": "rgb(80, 73, 90)",
+      "originalValue": "{!color-purple-text}"
+    },
+    "color-purple-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-darker",
+      "value": "rgb(35, 0, 81)",
+      "originalValue": "{!color-purple-darker}"
+    },
+    "color-purple-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-dark",
+      "value": "rgb(80, 36, 143)",
+      "originalValue": "{!color-purple-dark}"
+    },
+    "color-purple": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple",
+      "value": "rgb(156, 106, 222)",
+      "originalValue": "{!color-purple}"
+    },
+    "color-purple-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-light",
+      "value": "rgb(227, 208, 255)",
+      "originalValue": "{!color-purple-light}"
+    },
+    "color-purple-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-purple-lighter",
+      "value": "rgb(246, 240, 253)",
+      "originalValue": "{!color-purple-lighter}"
+    },
+    "color-indigo-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-indigo-text",
+      "value": "rgb(62, 65, 85)",
+      "originalValue": "{!color-indigo-text}"
+    },
+    "color-indigo-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-darker",
+      "value": "rgb(0, 6, 57)",
+      "originalValue": "{!color-indigo-darker}"
+    },
+    "color-indigo-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-dark",
+      "value": "rgb(32, 46, 120)",
+      "originalValue": "{!color-indigo-dark}"
+    },
+    "color-indigo": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo",
+      "value": "rgb(92, 106, 196)",
+      "originalValue": "{!color-indigo}"
+    },
+    "color-indigo-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-light",
+      "value": "rgb(179, 188, 245)",
+      "originalValue": "{!color-indigo-light}"
+    },
+    "color-indigo-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-indigo-lighter",
+      "value": "rgb(244, 245, 250)",
+      "originalValue": "{!color-indigo-lighter}"
+    },
+    "color-blue-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-blue-text",
+      "value": "rgb(62, 78, 87)",
+      "originalValue": "{!color-blue-text}"
+    },
+    "color-blue-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-darker",
+      "value": "rgb(0, 20, 41)",
+      "originalValue": "{!color-blue-darker}"
+    },
+    "color-blue-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-dark",
+      "value": "rgb(8, 78, 138)",
+      "originalValue": "{!color-blue-dark}"
+    },
+    "color-blue": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue",
+      "value": "rgb(0, 111, 187)",
+      "originalValue": "{!color-blue}"
+    },
+    "color-blue-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-light",
+      "value": "rgb(180, 225, 250)",
+      "originalValue": "{!color-blue-light}"
+    },
+    "color-blue-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-blue-lighter",
+      "value": "rgb(235, 245, 250)",
+      "originalValue": "{!color-blue-lighter}"
+    },
+    "color-teal-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-teal-text",
+      "value": "rgb(64, 83, 82)",
+      "originalValue": "{!color-teal-text}"
+    },
+    "color-teal-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-darker",
+      "value": "rgb(0, 49, 53)",
+      "originalValue": "{!color-teal-darker}"
+    },
+    "color-teal-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-dark",
+      "value": "rgb(0, 132, 142)",
+      "originalValue": "{!color-teal-dark}"
+    },
+    "color-teal": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal",
+      "value": "rgb(71, 193, 191)",
+      "originalValue": "{!color-teal}"
+    },
+    "color-teal-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-light",
+      "value": "rgb(183, 236, 236)",
+      "originalValue": "{!color-teal-light}"
+    },
+    "color-teal-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-teal-lighter",
+      "value": "rgb(224, 245, 245)",
+      "originalValue": "{!color-teal-lighter}"
+    },
+    "color-green-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-green-text",
+      "value": "rgb(65, 79, 62)",
+      "originalValue": "{!color-green-text}"
+    },
+    "color-green-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-darker",
+      "value": "rgb(23, 54, 48)",
+      "originalValue": "{!color-green-darker}"
+    },
+    "color-green-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-dark",
+      "value": "rgb(16, 128, 67)",
+      "originalValue": "{!color-green-dark}"
+    },
+    "color-green": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green",
+      "value": "rgb(80, 184, 60)",
+      "originalValue": "{!color-green}"
+    },
+    "color-green-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-light",
+      "value": "rgb(187, 229, 179)",
+      "originalValue": "{!color-green-light}"
+    },
+    "color-green-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-green-lighter",
+      "value": "rgb(227, 241, 223)",
+      "originalValue": "{!color-green-lighter}"
+    },
+    "color-yellow-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-yellow-text",
+      "value": "rgb(89, 81, 48)",
+      "originalValue": "{!color-yellow-text}"
+    },
+    "color-yellow-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-darker",
+      "value": "rgb(87, 59, 0)",
+      "originalValue": "{!color-yellow-darker}"
+    },
+    "color-yellow-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-dark",
+      "value": "rgb(138, 97, 22)",
+      "originalValue": "{!color-yellow-dark}"
+    },
+    "color-yellow": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow",
+      "value": "rgb(238, 194, 0)",
+      "originalValue": "{!color-yellow}"
+    },
+    "color-yellow-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-light",
+      "value": "rgb(255, 234, 138)",
+      "originalValue": "{!color-yellow-light}"
+    },
+    "color-yellow-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-yellow-lighter",
+      "value": "rgb(252, 241, 205)",
+      "originalValue": "{!color-yellow-lighter}"
+    },
+    "color-orange-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-orange-text",
+      "value": "rgb(89, 68, 48)",
+      "originalValue": "{!color-orange-text}"
+    },
+    "color-orange-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-darker",
+      "value": "rgb(74, 21, 4)",
+      "originalValue": "{!color-orange-darker}"
+    },
+    "color-orange-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-dark",
+      "value": "rgb(192, 87, 23)",
+      "originalValue": "{!color-orange-dark}"
+    },
+    "color-orange": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange",
+      "value": "rgb(244, 147, 66)",
+      "originalValue": "{!color-orange}"
+    },
+    "color-orange-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-light",
+      "value": "rgb(255, 197, 139)",
+      "originalValue": "{!color-orange-light}"
+    },
+    "color-orange-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-orange-lighter",
+      "value": "rgb(252, 235, 219)",
+      "originalValue": "{!color-orange-lighter}"
+    },
+    "color-red-text": {
+      "type": "color",
+      "category": "text-color",
+      "name": "color-red-text",
+      "value": "rgb(88, 60, 53)",
+      "originalValue": "{!color-red-text}"
+    },
+    "color-red-darker": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-darker",
+      "value": "rgb(51, 1, 1)",
+      "originalValue": "{!color-red-darker}"
+    },
+    "color-red-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-dark",
+      "value": "rgb(191, 7, 17)",
+      "originalValue": "{!color-red-dark}"
+    },
+    "color-red": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red",
+      "value": "rgb(222, 54, 24)",
+      "originalValue": "{!color-red}"
+    },
+    "color-red-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-light",
+      "value": "rgb(254, 173, 154)",
+      "originalValue": "{!color-red-light}"
+    },
+    "color-red-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-red-lighter",
+      "value": "rgb(251, 234, 229)",
+      "originalValue": "{!color-red-lighter}"
+    },
+    "color-ink": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink",
+      "value": "rgb(33, 43, 54)",
+      "originalValue": "{!color-ink}"
+    },
+    "color-ink-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-light",
+      "value": "rgb(69, 79, 91)",
+      "originalValue": "{!color-ink-light}"
+    },
+    "color-ink-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lighter",
+      "value": "rgb(99, 115, 129)",
+      "originalValue": "{!color-ink-lighter}"
+    },
+    "color-ink-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-ink-lightest",
+      "value": "rgb(145, 158, 171)",
+      "originalValue": "{!color-ink-lightest}"
+    },
+    "color-sky-dark": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-dark",
+      "value": "rgb(196, 205, 213)",
+      "originalValue": "{!color-sky-dark}"
+    },
+    "color-sky": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky",
+      "value": "rgb(223, 227, 232)",
+      "originalValue": "{!color-sky}"
+    },
+    "color-sky-light": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-light",
+      "value": "rgb(244, 246, 248)",
+      "originalValue": "{!color-sky-light}"
+    },
+    "color-sky-lighter": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-sky-lighter",
+      "value": "rgb(249, 250, 251)",
+      "originalValue": "{!color-sky-lighter}"
+    },
+    "color-black": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-black",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "{!color-black}"
+    },
+    "color-white": {
+      "type": "color",
+      "category": "background-color",
+      "name": "color-white",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "{!color-white}"
+    },
+    "duration-none": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-none",
+      "value": 0,
+      "originalValue": 0
+    },
+    "duration-fast": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-fast",
+      "value": "100ms",
+      "originalValue": "100ms"
+    },
+    "duration-base": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-base",
+      "value": "200ms",
+      "originalValue": "200ms"
+    },
+    "duration-slow": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slow",
+      "value": "300ms",
+      "originalValue": "300ms"
+    },
+    "duration-slower": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slower",
+      "value": "400ms",
+      "originalValue": "400ms"
+    },
+    "duration-slowest": {
+      "type": "time",
+      "category": "time",
+      "name": "duration-slowest",
+      "value": "500ms",
+      "originalValue": "500ms"
+    },
+    "spacing-none": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-none",
+      "value": 0,
+      "originalValue": 0
+    },
+    "spacing-extra-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-extra-tight",
+      "value": "4px",
+      "originalValue": "4px"
+    },
+    "spacing-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-tight",
+      "value": "8px",
+      "originalValue": "8px"
+    },
+    "spacing-base-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base-tight",
+      "value": "12px",
+      "originalValue": "12px"
+    },
+    "spacing-base": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base",
+      "value": "16px",
+      "originalValue": "16px"
+    },
+    "spacing-loose": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-loose",
+      "value": "20px",
+      "originalValue": "20px"
+    },
+    "spacing-extra-loose": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-extra-loose",
+      "value": "32px",
+      "originalValue": "32px"
+    },
+    "font-stack-base": {
+      "type": "font-family",
+      "category": "font-family",
+      "name": "font-stack-base",
+      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
+    },
+    "font-stack-monospace": {
+      "type": "font-family",
+      "category": "font-family",
+      "name": "font-stack-monospace",
+      "value": "Monaco, Consolas, 'Lucida Console', monospace",
+      "originalValue": "Monaco, Consolas, 'Lucida Console', monospace"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/index.scss b/src/styles/polaris-tokens/index.scss
new file mode 100644
index 00000000000..164a23a9e6a
--- /dev/null
+++ b/src/styles/polaris-tokens/index.scss
@@ -0,0 +1,74 @@
+$color-purple-text: rgb(80, 73, 90);
+$color-purple-darker: rgb(35, 0, 81);
+$color-purple-dark: rgb(80, 36, 143);
+$color-purple: rgb(156, 106, 222);
+$color-purple-light: rgb(227, 208, 255);
+$color-purple-lighter: rgb(246, 240, 253);
+$color-indigo-text: rgb(62, 65, 85);
+$color-indigo-darker: rgb(0, 6, 57);
+$color-indigo-dark: rgb(32, 46, 120);
+$color-indigo: rgb(92, 106, 196);
+$color-indigo-light: rgb(179, 188, 245);
+$color-indigo-lighter: rgb(244, 245, 250);
+$color-blue-text: rgb(62, 78, 87);
+$color-blue-darker: rgb(0, 20, 41);
+$color-blue-dark: rgb(8, 78, 138);
+$color-blue: rgb(0, 111, 187);
+$color-blue-light: rgb(180, 225, 250);
+$color-blue-lighter: rgb(235, 245, 250);
+$color-teal-text: rgb(64, 83, 82);
+$color-teal-darker: rgb(0, 49, 53);
+$color-teal-dark: rgb(0, 132, 142);
+$color-teal: rgb(71, 193, 191);
+$color-teal-light: rgb(183, 236, 236);
+$color-teal-lighter: rgb(224, 245, 245);
+$color-green-text: rgb(65, 79, 62);
+$color-green-darker: rgb(23, 54, 48);
+$color-green-dark: rgb(16, 128, 67);
+$color-green: rgb(80, 184, 60);
+$color-green-light: rgb(187, 229, 179);
+$color-green-lighter: rgb(227, 241, 223);
+$color-yellow-text: rgb(89, 81, 48);
+$color-yellow-darker: rgb(87, 59, 0);
+$color-yellow-dark: rgb(138, 97, 22);
+$color-yellow: rgb(238, 194, 0);
+$color-yellow-light: rgb(255, 234, 138);
+$color-yellow-lighter: rgb(252, 241, 205);
+$color-orange-text: rgb(89, 68, 48);
+$color-orange-darker: rgb(74, 21, 4);
+$color-orange-dark: rgb(192, 87, 23);
+$color-orange: rgb(244, 147, 66);
+$color-orange-light: rgb(255, 197, 139);
+$color-orange-lighter: rgb(252, 235, 219);
+$color-red-text: rgb(88, 60, 53);
+$color-red-darker: rgb(51, 1, 1);
+$color-red-dark: rgb(191, 7, 17);
+$color-red: rgb(222, 54, 24);
+$color-red-light: rgb(254, 173, 154);
+$color-red-lighter: rgb(251, 234, 229);
+$color-ink: rgb(33, 43, 54);
+$color-ink-light: rgb(69, 79, 91);
+$color-ink-lighter: rgb(99, 115, 129);
+$color-ink-lightest: rgb(145, 158, 171);
+$color-sky-dark: rgb(196, 205, 213);
+$color-sky: rgb(223, 227, 232);
+$color-sky-light: rgb(244, 246, 248);
+$color-sky-lighter: rgb(249, 250, 251);
+$color-black: rgb(0, 0, 0);
+$color-white: rgb(255, 255, 255);
+$duration-none: 0;
+$duration-fast: 100ms;
+$duration-base: 200ms;
+$duration-slow: 300ms;
+$duration-slower: 400ms;
+$duration-slowest: 500ms;
+$spacing-none: 0;
+$spacing-extra-tight: 4px;
+$spacing-tight: 8px;
+$spacing-base-tight: 12px;
+$spacing-base: 16px;
+$spacing-loose: 20px;
+$spacing-extra-loose: 32px;
+$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+  Roboto, 'Helvetica Neue', sans-serif;
+$font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
diff --git a/src/styles/polaris-tokens/spacing.common.js b/src/styles/polaris-tokens/spacing.common.js
new file mode 100644
index 00000000000..5c78e096c6a
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.common.js
@@ -0,0 +1,9 @@
+module.exports = {
+  spacingNone: 0,
+  spacingExtraTight: '4px',
+  spacingTight: '8px',
+  spacingBaseTight: '12px',
+  spacingBase: '16px',
+  spacingLoose: '20px',
+  spacingExtraLoose: '32px',
+};
diff --git a/src/styles/polaris-tokens/spacing.custom-properties.css b/src/styles/polaris-tokens/spacing.custom-properties.css
new file mode 100644
index 00000000000..6a6f0a78a9e
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.custom-properties.css
@@ -0,0 +1,9 @@
+:root {
+  --spacing-none: 0;
+  --spacing-extra-tight: 4px;
+  --spacing-tight: 8px;
+  --spacing-base-tight: 12px;
+  --spacing-base: 16px;
+  --spacing-loose: 20px;
+  --spacing-extra-loose: 32px;
+}
diff --git a/src/styles/polaris-tokens/spacing.json b/src/styles/polaris-tokens/spacing.json
new file mode 100644
index 00000000000..c016f8abbd1
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.json
@@ -0,0 +1,9 @@
+{
+  "spacing-none": 0,
+  "spacing-extra-tight": "4px",
+  "spacing-tight": "8px",
+  "spacing-base-tight": "12px",
+  "spacing-base": "16px",
+  "spacing-loose": "20px",
+  "spacing-extra-loose": "32px"
+}
diff --git a/src/styles/polaris-tokens/spacing.map.scss b/src/styles/polaris-tokens/spacing.map.scss
new file mode 100644
index 00000000000..4407f88b515
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.map.scss
@@ -0,0 +1,23 @@
+$polaris-spacing-map: (
+  'spacing-none': (
+    0,
+  ),
+  'spacing-extra-tight': (
+    4px,
+  ),
+  'spacing-tight': (
+    8px,
+  ),
+  'spacing-base-tight': (
+    12px,
+  ),
+  'spacing-base': (
+    16px,
+  ),
+  'spacing-loose': (
+    20px,
+  ),
+  'spacing-extra-loose': (
+    32px,
+  ),
+);
diff --git a/src/styles/polaris-tokens/spacing.raw.json b/src/styles/polaris-tokens/spacing.raw.json
new file mode 100644
index 00000000000..115753a167f
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.raw.json
@@ -0,0 +1,54 @@
+{
+  "aliases": {},
+  "props": {
+    "spacing-none": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-none",
+      "value": 0,
+      "originalValue": 0
+    },
+    "spacing-extra-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-extra-tight",
+      "value": "4px",
+      "originalValue": "4px"
+    },
+    "spacing-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-tight",
+      "value": "8px",
+      "originalValue": "8px"
+    },
+    "spacing-base-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base-tight",
+      "value": "12px",
+      "originalValue": "12px"
+    },
+    "spacing-base": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base",
+      "value": "16px",
+      "originalValue": "16px"
+    },
+    "spacing-loose": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-loose",
+      "value": "20px",
+      "originalValue": "20px"
+    },
+    "spacing-extra-loose": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-extra-loose",
+      "value": "32px",
+      "originalValue": "32px"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/spacing.scss b/src/styles/polaris-tokens/spacing.scss
new file mode 100644
index 00000000000..9607b47d38e
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.scss
@@ -0,0 +1,7 @@
+$spacing-none: 0;
+$spacing-extra-tight: 4px;
+$spacing-tight: 8px;
+$spacing-base-tight: 12px;
+$spacing-base: 16px;
+$spacing-loose: 20px;
+$spacing-extra-loose: 32px;
diff --git a/src/styles/polaris-tokens/spacing.spacing-map.scss b/src/styles/polaris-tokens/spacing.spacing-map.scss
new file mode 100644
index 00000000000..58ff2261043
--- /dev/null
+++ b/src/styles/polaris-tokens/spacing.spacing-map.scss
@@ -0,0 +1,9 @@
+$polaris-spacing: (
+  'none': 0,
+  'extra-tight': 4px,
+  'tight': 8px,
+  'base-tight': 12px,
+  'base': 16px,
+  'loose': 20px,
+  'extra-loose': 32px,
+);
diff --git a/src/styles/polaris-tokens/typography.common.js b/src/styles/polaris-tokens/typography.common.js
new file mode 100644
index 00000000000..ad05581c020
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.common.js
@@ -0,0 +1,5 @@
+module.exports = {
+  fontStackBase:
+    "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
+};
diff --git a/src/styles/polaris-tokens/typography.custom-properties.css b/src/styles/polaris-tokens/typography.custom-properties.css
new file mode 100644
index 00000000000..80b2f7b1d1f
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.custom-properties.css
@@ -0,0 +1,5 @@
+:root {
+  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco',
+    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
+}
diff --git a/src/styles/polaris-tokens/typography.json b/src/styles/polaris-tokens/typography.json
new file mode 100644
index 00000000000..650c48e6156
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.json
@@ -0,0 +1,4 @@
+{
+  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
+}
diff --git a/src/styles/polaris-tokens/typography.map.scss b/src/styles/polaris-tokens/typography.map.scss
new file mode 100644
index 00000000000..149ec772602
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.map.scss
@@ -0,0 +1,17 @@
+$polaris-typography-map: (
+  'font-stack-base': (
+    -apple-system,
+    BlinkMacSystemFont,
+    'San Francisco',
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    sans-serif,
+  ),
+  'font-stack-monospace': (
+    Monaco,
+    Consolas,
+    'Lucida Console',
+    monospace,
+  ),
+);
diff --git a/src/styles/polaris-tokens/typography.raw.json b/src/styles/polaris-tokens/typography.raw.json
new file mode 100644
index 00000000000..18082c2ba66
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.raw.json
@@ -0,0 +1,19 @@
+{
+  "aliases": {},
+  "props": {
+    "font-stack-base": {
+      "type": "font-family",
+      "category": "font-family",
+      "name": "font-stack-base",
+      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
+    },
+    "font-stack-monospace": {
+      "type": "font-family",
+      "category": "font-family",
+      "name": "font-stack-monospace",
+      "value": "Monaco, Consolas, 'Lucida Console', monospace",
+      "originalValue": "Monaco, Consolas, 'Lucida Console', monospace"
+    }
+  }
+}
diff --git a/src/styles/polaris-tokens/typography.scss b/src/styles/polaris-tokens/typography.scss
new file mode 100644
index 00000000000..d6168e4c16e
--- /dev/null
+++ b/src/styles/polaris-tokens/typography.scss
@@ -0,0 +1,3 @@
+$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+  Roboto, 'Helvetica Neue', sans-serif;
+$font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
diff --git a/src/tokens/_color.ts b/src/tokens/_color.ts
deleted file mode 100644
index 128f0a55332..00000000000
--- a/src/tokens/_color.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-/**
- * All light color-scheme tokens.
- *
- * Note: These values were cut/paste directly from the devtools.
- */
-export const lightColorScheme: TokenGroup = {
-  background: 'rgba(246, 246, 247, 1)',
-  'background-hovered': 'rgba(241, 242, 243, 1)',
-  'background-pressed': 'rgba(237, 238, 239, 1)',
-  'background-selected': 'rgba(237, 238, 239, 1)',
-  surface: 'rgba(255, 255, 255, 1)',
-  'surface-neutral': 'rgba(228, 229, 231, 1)',
-  'surface-neutral-hovered': 'rgba(219, 221, 223, 1)',
-  'surface-neutral-pressed': 'rgba(201, 204, 208, 1)',
-  'surface-neutral-disabled': 'rgba(241, 242, 243, 1)',
-  'surface-neutral-subdued': 'rgba(246, 246, 247, 1)',
-  'surface-subdued': 'rgba(250, 251, 251, 1)',
-  'surface-disabled': 'rgba(250, 251, 251, 1)',
-  'surface-hovered': 'rgba(246, 246, 247, 1)',
-  'surface-pressed': 'rgba(241, 242, 243, 1)',
-  'surface-depressed': 'rgba(237, 238, 239, 1)',
-  'surface-search-field': 'rgba(241, 242, 243, 1)',
-  backdrop: 'rgba(0, 0, 0, 0.5)',
-  overlay: 'rgba(255, 255, 255, 0.5)',
-  'shadow-from-dim-light': 'rgba(0, 0, 0, 0.2)',
-  'shadow-from-ambient-light': 'rgba(23, 24, 24, 0.05)',
-  'shadow-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  'hint-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  border: 'rgba(140, 145, 150, 1)',
-  'border-neutral-subdued': 'rgba(186, 191, 195, 1)',
-  'border-hovered': 'rgba(153, 158, 164, 1)',
-  'border-disabled': 'rgba(210, 213, 216, 1)',
-  'border-subdued': 'rgba(201, 204, 207, 1)',
-  'border-depressed': 'rgba(87, 89, 89, 1)',
-  'border-shadow': 'rgba(174, 180, 185, 1)',
-  'border-shadow-subdued': 'rgba(186, 191, 196, 1)',
-  divider: 'rgba(225, 227, 229, 1)',
-  icon: 'rgba(92, 95, 98, 1)',
-  'icon-hovered': 'rgba(26, 28, 29, 1)',
-  'icon-pressed': 'rgba(68, 71, 74, 1)',
-  'icon-disabled': 'rgba(186, 190, 195, 1)',
-  'icon-subdued': 'rgba(140, 145, 150, 1)',
-  text: 'rgba(32, 34, 35, 1)',
-  'text-disabled': 'rgba(140, 145, 150, 1)',
-  'text-subdued': 'rgba(109, 113, 117, 1)',
-  interactive: 'rgba(44, 110, 203, 1)',
-  'interactive-disabled': 'rgba(189, 193, 204, 1)',
-  'interactive-hovered': 'rgba(31, 81, 153, 1)',
-  'interactive-pressed': 'rgba(16, 50, 98, 1)',
-  focused: 'rgba(69, 143, 255, 1)',
-  'surface-selected': 'rgba(242, 247, 254, 1)',
-  'surface-selected-hovered': 'rgba(237, 244, 254, 1)',
-  'surface-selected-pressed': 'rgba(229, 239, 253, 1)',
-  'icon-on-interactive': 'rgba(255, 255, 255, 1)',
-  'text-on-interactive': 'rgba(255, 255, 255, 1)',
-  'action-secondary': 'rgba(255, 255, 255, 1)',
-  'action-secondary-disabled': 'rgba(255, 255, 255, 1)',
-  'action-secondary-hovered': 'rgba(246, 246, 247, 1)',
-  'action-secondary-pressed': 'rgba(241, 242, 243, 1)',
-  'action-secondary-depressed': 'rgba(109, 113, 117, 1)',
-  'action-primary': 'rgba(0, 128, 96, 1)',
-  'action-primary-disabled': 'rgba(241, 241, 241, 1)',
-  'action-primary-hovered': 'rgba(0, 110, 82, 1)',
-  'action-primary-pressed': 'rgba(0, 94, 70, 1)',
-  'action-primary-depressed': 'rgba(0, 61, 44, 1)',
-  'icon-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-primary': 'rgba(0, 123, 92, 1)',
-  'text-primary-hovered': 'rgba(0, 108, 80, 1)',
-  'text-primary-pressed': 'rgba(0, 92, 68, 1)',
-  'surface-primary-selected': 'rgba(241, 248, 245, 1)',
-  'surface-primary-selected-hovered': 'rgba(179, 208, 195, 1)',
-  'surface-primary-selected-pressed': 'rgba(162, 188, 176, 1)',
-  'border-critical': 'rgba(253, 87, 73, 1)',
-  'border-critical-subdued': 'rgba(224, 179, 178, 1)',
-  'border-critical-disabled': 'rgba(255, 167, 163, 1)',
-  'icon-critical': 'rgba(215, 44, 13, 1)',
-  'surface-critical': 'rgba(254, 211, 209, 1)',
-  'surface-critical-subdued': 'rgba(255, 244, 244, 1)',
-  'surface-critical-subdued-hovered': 'rgba(255, 240, 240, 1)',
-  'surface-critical-subdued-pressed': 'rgba(255, 233, 232, 1)',
-  'surface-critical-subdued-depressed': 'rgba(254, 188, 185, 1)',
-  'text-critical': 'rgba(215, 44, 13, 1)',
-  'action-critical': 'rgba(216, 44, 13, 1)',
-  'action-critical-disabled': 'rgba(241, 241, 241, 1)',
-  'action-critical-hovered': 'rgba(188, 34, 0, 1)',
-  'action-critical-pressed': 'rgba(162, 27, 0, 1)',
-  'action-critical-depressed': 'rgba(108, 15, 0, 1)',
-  'icon-on-critical': 'rgba(255, 255, 255, 1)',
-  'text-on-critical': 'rgba(255, 255, 255, 1)',
-  'interactive-critical': 'rgba(216, 44, 13, 1)',
-  'interactive-critical-disabled': 'rgba(253, 147, 141, 1)',
-  'interactive-critical-hovered': 'rgba(205, 41, 12, 1)',
-  'interactive-critical-pressed': 'rgba(103, 15, 3, 1)',
-  'border-warning': 'rgba(185, 137, 0, 1)',
-  'border-warning-subdued': 'rgba(225, 184, 120, 1)',
-  'icon-warning': 'rgba(185, 137, 0, 1)',
-  'surface-warning': 'rgba(255, 215, 157, 1)',
-  'surface-warning-subdued': 'rgba(255, 245, 234, 1)',
-  'surface-warning-subdued-hovered': 'rgba(255, 242, 226, 1)',
-  'surface-warning-subdued-pressed': 'rgba(255, 235, 211, 1)',
-  'text-warning': 'rgba(145, 106, 0, 1)',
-  'border-highlight': 'rgba(68, 157, 167, 1)',
-  'border-highlight-subdued': 'rgba(152, 198, 205, 1)',
-  'icon-highlight': 'rgba(0, 160, 172, 1)',
-  'surface-highlight': 'rgba(164, 232, 242, 1)',
-  'surface-highlight-subdued': 'rgba(235, 249, 252, 1)',
-  'surface-highlight-subdued-hovered': 'rgba(228, 247, 250, 1)',
-  'surface-highlight-subdued-pressed': 'rgba(213, 243, 248, 1)',
-  'text-highlight': 'rgba(52, 124, 132, 1)',
-  'border-success': 'rgba(0, 164, 124, 1)',
-  'border-success-subdued': 'rgba(149, 201, 180, 1)',
-  'icon-success': 'rgba(0, 127, 95, 1)',
-  'surface-success': 'rgba(174, 233, 209, 1)',
-  'surface-success-subdued': 'rgba(241, 248, 245, 1)',
-  'surface-success-subdued-hovered': 'rgba(236, 246, 241, 1)',
-  'surface-success-subdued-pressed': 'rgba(226, 241, 234, 1)',
-  'text-success': 'rgba(0, 128, 96, 1)',
-  'decorative-one-icon': 'rgba(126, 87, 0, 1)',
-  'decorative-one-surface': 'rgba(255, 201, 107, 1)',
-  'decorative-one-text': 'rgba(61, 40, 0, 1)',
-  'decorative-two-icon': 'rgba(175, 41, 78, 1)',
-  'decorative-two-surface': 'rgba(255, 196, 176, 1)',
-  'decorative-two-text': 'rgba(73, 11, 28, 1)',
-  'decorative-three-icon': 'rgba(0, 109, 65, 1)',
-  'decorative-three-surface': 'rgba(146, 230, 181, 1)',
-  'decorative-three-text': 'rgba(0, 47, 25, 1)',
-  'decorative-four-icon': 'rgba(0, 106, 104, 1)',
-  'decorative-four-surface': 'rgba(145, 224, 214, 1)',
-  'decorative-four-text': 'rgba(0, 45, 45, 1)',
-  'decorative-five-icon': 'rgba(174, 43, 76, 1)',
-  'decorative-five-surface': 'rgba(253, 201, 208, 1)',
-  'decorative-five-text': 'rgba(79, 14, 31, 1)',
-};
-
-/**
- * All dark color-scheme tokens.
- *
- * Note: These values were cut/paste directly from the devtools.
- */
-export const darkColorScheme: TokenGroup = {
-  background: 'rgba(11, 12, 13, 1)',
-  'background-hovered': 'rgba(11, 12, 13, 1)',
-  'background-pressed': 'rgba(11, 12, 13, 1)',
-  'background-selected': 'rgba(11, 12, 13, 1)',
-  surface: 'rgba(32, 33, 35, 1)',
-  'surface-neutral': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-hovered': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-pressed': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-disabled': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-subdued': 'rgba(68, 71, 74, 1)',
-  'surface-subdued': 'rgba(26, 28, 29, 1)',
-  'surface-disabled': 'rgba(26, 28, 29, 1)',
-  'surface-hovered': 'rgba(47, 49, 51, 1)',
-  'surface-pressed': 'rgba(62, 64, 67, 1)',
-  'surface-depressed': 'rgba(80, 83, 86, 1)',
-  'surface-search-field': 'rgba(47, 49, 51, 1)',
-  backdrop: 'rgba(0, 0, 0, 0.5)',
-  overlay: 'rgba(33, 33, 33, 0.5)',
-  'shadow-from-dim-light': 'rgba(255, 255, 255, 0.2)',
-  'shadow-from-ambient-light': 'rgba(23, 24, 24, 0.05)',
-  'shadow-from-direct-light': 'rgba(255, 255, 255, 0.15)',
-  'hint-from-direct-light': 'rgba(185, 185, 185, 0.2)',
-  border: 'rgba(80, 83, 86, 1)',
-  'border-neutral-subdued': 'rgba(130, 135, 139, 1)',
-  'border-hovered': 'rgba(80, 83, 86, 1)',
-  'border-disabled': 'rgba(103, 107, 111, 1)',
-  'border-subdued': 'rgba(130, 135, 139, 1)',
-  'border-depressed': 'rgba(142, 145, 145, 1)',
-  'border-shadow': 'rgba(91, 95, 98, 1)',
-  'border-shadow-subdued': 'rgba(130, 135, 139, 1)',
-  divider: 'rgba(69, 71, 73, 1)',
-  icon: 'rgba(166, 172, 178, 1)',
-  'icon-hovered': 'rgba(225, 227, 229, 1)',
-  'icon-pressed': 'rgba(166, 172, 178, 1)',
-  'icon-disabled': 'rgba(84, 87, 90, 1)',
-  'icon-subdued': 'rgba(120, 125, 129, 1)',
-  text: 'rgba(227, 229, 231, 1)',
-  'text-disabled': 'rgba(111, 115, 119, 1)',
-  'text-subdued': 'rgba(153, 159, 164, 1)',
-  interactive: 'rgba(54, 163, 255, 1)',
-  'interactive-disabled': 'rgba(38, 98, 182, 1)',
-  'interactive-hovered': 'rgba(103, 175, 255, 1)',
-  'interactive-pressed': 'rgba(136, 188, 255, 1)',
-  focused: 'rgba(38, 98, 182, 1)',
-  'surface-selected': 'rgba(2, 14, 35, 1)',
-  'surface-selected-hovered': 'rgba(7, 29, 61, 1)',
-  'surface-selected-pressed': 'rgba(13, 43, 86, 1)',
-  'icon-on-interactive': 'rgba(255, 255, 255, 1)',
-  'text-on-interactive': 'rgba(255, 255, 255, 1)',
-  'action-secondary': 'rgba(77, 80, 83, 1)',
-  'action-secondary-disabled': 'rgba(32, 34, 35, 1)',
-  'action-secondary-hovered': 'rgba(84, 87, 91, 1)',
-  'action-secondary-pressed': 'rgba(96, 100, 103, 1)',
-  'action-secondary-depressed': 'rgba(123, 127, 132, 1)',
-  'action-primary': 'rgba(0, 128, 96, 1)',
-  'action-primary-disabled': 'rgba(0, 86, 64, 1)',
-  'action-primary-hovered': 'rgba(0, 150, 113, 1)',
-  'action-primary-pressed': 'rgba(0, 164, 124, 1)',
-  'action-primary-depressed': 'rgba(0, 179, 136, 1)',
-  'icon-on-primary': 'rgba(230, 255, 244, 1)',
-  'text-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-primary': 'rgba(0, 141, 106, 1)',
-  'text-primary-hovered': 'rgba(0, 158, 120, 1)',
-  'text-primary-pressed': 'rgba(0, 176, 133, 1)',
-  'surface-primary-selected': 'rgba(12, 18, 16, 1)',
-  'surface-primary-selected-hovered': 'rgba(40, 48, 44, 1)',
-  'surface-primary-selected-pressed': 'rgba(54, 64, 59, 1)',
-  'border-critical': 'rgba(227, 47, 14, 1)',
-  'border-critical-subdued': 'rgba(227, 47, 14, 1)',
-  'border-critical-disabled': 'rgba(131, 23, 4, 1)',
-  'icon-critical': 'rgba(218, 45, 13, 1)',
-  'surface-critical': 'rgba(69, 7, 1, 1)',
-  'surface-critical-subdued': 'rgba(69, 7, 1, 1)',
-  'surface-critical-subdued-hovered': 'rgba(68, 23, 20, 1)',
-  'surface-critical-subdued-pressed': 'rgba(107, 16, 3, 1)',
-  'surface-critical-subdued-depressed': 'rgba(135, 24, 5, 1)',
-  'text-critical': 'rgba(233, 128, 122, 1)',
-  'action-critical': 'rgba(205, 41, 12, 1)',
-  'action-critical-disabled': 'rgba(187, 37, 10, 1)',
-  'action-critical-hovered': 'rgba(227, 47, 14, 1)',
-  'action-critical-pressed': 'rgba(250, 53, 17, 1)',
-  'action-critical-depressed': 'rgba(253, 87, 73, 1)',
-  'icon-on-critical': 'rgba(255, 248, 247, 1)',
-  'text-on-critical': 'rgba(255, 255, 255, 1)',
-  'interactive-critical': 'rgba(253, 114, 106, 1)',
-  'interactive-critical-disabled': 'rgba(254, 172, 168, 1)',
-  'interactive-critical-hovered': 'rgba(253, 138, 132, 1)',
-  'interactive-critical-pressed': 'rgba(253, 159, 155, 1)',
-  'border-warning': 'rgba(153, 112, 0, 1)',
-  'border-warning-subdued': 'rgba(153, 112, 0, 1)',
-  'icon-warning': 'rgba(104, 75, 0, 1)',
-  'surface-warning': 'rgba(153, 112, 0, 1)',
-  'surface-warning-subdued': 'rgba(77, 59, 29, 1)',
-  'surface-warning-subdued-hovered': 'rgba(82, 63, 32, 1)',
-  'surface-warning-subdued-pressed': 'rgba(87, 67, 34, 1)',
-  'text-warning': 'rgba(202, 149, 0, 1)',
-  'border-highlight': 'rgba(68, 157, 167, 1)',
-  'border-highlight-subdued': 'rgba(68, 157, 167, 1)',
-  'icon-highlight': 'rgba(44, 108, 115, 1)',
-  'surface-highlight': 'rgba(0, 105, 113, 1)',
-  'surface-highlight-subdued': 'rgba(18, 53, 57, 1)',
-  'surface-highlight-subdued-hovered': 'rgba(20, 58, 62, 1)',
-  'surface-highlight-subdued-pressed': 'rgba(24, 65, 70, 1)',
-  'text-highlight': 'rgba(162, 239, 250, 1)',
-  'border-success': 'rgba(0, 135, 102, 1)',
-  'border-success-subdued': 'rgba(0, 135, 102, 1)',
-  'icon-success': 'rgba(0, 94, 70, 1)',
-  'surface-success': 'rgba(0, 94, 70, 1)',
-  'surface-success-subdued': 'rgba(28, 53, 44, 1)',
-  'surface-success-subdued-hovered': 'rgba(31, 58, 48, 1)',
-  'surface-success-subdued-pressed': 'rgba(35, 65, 54, 1)',
-  'text-success': 'rgba(88, 173, 142, 1)',
-  'decorative-one-icon': 'rgba(255, 186, 67, 1)',
-  'decorative-one-surface': 'rgba(142, 102, 9, 1)',
-  'decorative-one-text': 'rgba(255, 255, 255, 1)',
-  'decorative-two-icon': 'rgba(245, 182, 192, 1)',
-  'decorative-two-surface': 'rgba(206, 88, 20, 1)',
-  'decorative-two-text': 'rgba(255, 255, 255, 1)',
-  'decorative-three-icon': 'rgba(0, 227, 141, 1)',
-  'decorative-three-surface': 'rgba(0, 124, 90, 1)',
-  'decorative-three-text': 'rgba(255, 255, 255, 1)',
-  'decorative-four-icon': 'rgba(0, 221, 218, 1)',
-  'decorative-four-surface': 'rgba(22, 124, 121, 1)',
-  'decorative-four-text': 'rgba(255, 255, 255, 1)',
-  'decorative-five-icon': 'rgba(244, 183, 191, 1)',
-  'decorative-five-surface': 'rgba(194, 51, 86, 1)',
-  'decorative-five-text': 'rgba(255, 255, 255, 1)',
-};
diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts
deleted file mode 100644
index cabf4df8ffd..00000000000
--- a/src/tokens/_legacy-tokens.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-/**
- * This file contains legacy design tokens that have not yet been categorized
- * and organized into files. The goal is to eventually remove this file by
- * categorizing tokens by group, moving them into separate files, and/or
- * deprecating any undesired tokens.
- */
-export const legacyTokens: TokenGroup = {
-  'card-shadow':
-    '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
-  'popover-shadow':
-    '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
-  'modal-shadow':
-    '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
-  'top-bar-shadow': '0 2px 2px -1px var(--p-shadow-from-direct-light)',
-  'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)',
-  'button-inner-shadow': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
-  'button-pressed-inner-shadow': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
-  'override-loading-z-index': '514',
-  'choice-size': '20px',
-  'icon-size': '10px',
-  'choice-margin': '1px',
-  'control-border-width': '2px',
-  'banner-border-default':
-    'inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)',
-  'banner-border-success':
-    'inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)',
-  'banner-border-highlight':
-    'inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)',
-  'banner-border-warning':
-    'inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)',
-  'banner-border-critical':
-    'inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)',
-  'thin-border-subdued': '1px solid var(--p-border-subdued)',
-  'text-field-spinner-offset': '2px',
-  'text-field-focus-ring-offset': '-4px',
-  'button-group-item-spacing': '-1px',
-  'range-slider-thumb-size-base': '16px',
-  'range-slider-thumb-size-active': '24px',
-  'frame-offset': '0px',
-};
diff --git a/src/tokens/_motion.ts b/src/tokens/_motion.ts
deleted file mode 100644
index 583e5060184..00000000000
--- a/src/tokens/_motion.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const motion: TokenGroup = {
-  'duration-0': '0ms',
-  'duration-50': '50ms',
-  'duration-100': '100ms',
-  'duration-150': '150ms',
-  'duration-200': '200ms',
-  'duration-250': '250ms',
-  'duration-300': '300ms',
-  'duration-350': '350ms',
-  'duration-400': '400ms',
-  'duration-450': '450ms',
-  'duration-500': '500ms',
-  ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
-  'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
-  'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
-  'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
-  linear: 'cubic-bezier(0, 0, 1, 1)',
-};
diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts
deleted file mode 100644
index 273c3ff55ec..00000000000
--- a/src/tokens/_shape.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type {TokenGroup} from './tokens';
-import {rem} from './utilities';
-
-export const shape: TokenGroup = {
-  'border-radius-05': rem('2px'),
-  'border-radius-1': rem('4px'),
-  'border-radius-2': rem('8px'),
-  'border-radius-3': rem('12px'),
-  'border-radius-4': rem('16px'),
-  'border-radius-5': rem('20px'),
-  'border-radius-6': '50%',
-};
diff --git a/src/tokens/_spacing.ts b/src/tokens/_spacing.ts
deleted file mode 100644
index c9fca077cc1..00000000000
--- a/src/tokens/_spacing.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {TokenGroup} from './tokens';
-import {rem} from './utilities';
-
-export const spacing: TokenGroup = {
-  'space-0': '0',
-  'space-025': rem('1px'),
-  'space-05': rem('2px'),
-  'space-1': rem('4px'),
-  'space-2': rem('8px'),
-  'space-3': rem('12px'),
-  'space-4': rem('16px'),
-  'space-5': rem('20px'),
-  'space-6': rem('24px'),
-  'space-8': rem('32px'),
-  'space-10': rem('40px'),
-  'space-12': rem('48px'),
-  'space-16': rem('64px'),
-  'space-20': rem('80px'),
-  'space-24': rem('96px'),
-  'space-28': rem('112px'),
-  'space-32': rem('128px'),
-};
diff --git a/src/tokens/_typography.ts b/src/tokens/_typography.ts
deleted file mode 100644
index 5774acd2fba..00000000000
--- a/src/tokens/_typography.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const typography: TokenGroup = {
-  'font-weight-regular': '400',
-  'font-weight-medium': '500',
-  'font-weight-semibold': '600',
-  'font-weight-bold': '700',
-};
diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts
deleted file mode 100644
index ebbe8edf367..00000000000
--- a/src/tokens/_z-index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const zIndex: TokenGroup = {
-  'z-1': '100',
-  'z-2': '400',
-  'z-3': '510',
-  'z-4': '512',
-  'z-5': '513',
-  'z-6': '514',
-  'z-7': '515',
-  'z-8': '516',
-  'z-9': '517',
-  'z-10': '518',
-  'z-11': '519',
-  'z-12': '520',
-};
diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
index 1193e7ecdcf..0cd4c9deb08 100644
--- a/src/tokens/tokens.ts
+++ b/src/tokens/tokens.ts
@@ -1,10 +1,13 @@
-import {legacyTokens} from './_legacy-tokens';
-import {shape} from './_shape';
-import {lightColorScheme, darkColorScheme} from './_color';
-import {motion} from './_motion';
-import {spacing} from './_spacing';
-import {typography} from './_typography';
-import {zIndex} from './_z-index';
+import legacyTokens from '../../tokens/legacy-tokens.json';
+import shape from '../../tokens/shape.json';
+import lightColorScheme from '../../tokens/color.light.json';
+import darkColorScheme from '../../tokens/color.dark.json';
+import motion from '../../tokens/motion.json';
+import spacing from '../../tokens/spacing.json';
+import typography from '../../tokens/typography.json';
+import zIndex from '../../tokens/z-index.json';
+
+import {tokensToRems} from './utilities';
 
 /**
  * Values to convert to CSS custom properties.
@@ -54,11 +57,11 @@ export interface Tokens {
 }
 
 export const tokens: Tokens = {
-  shape,
+  shape: tokensToRems(shape),
   colorSchemes,
   legacyTokens,
   motion,
-  spacing,
+  spacing: tokensToRems(spacing),
   typography,
   zIndex,
 };
diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts
index 71fc8bdb971..1faf129ae0e 100644
--- a/src/tokens/utilities.ts
+++ b/src/tokens/utilities.ts
@@ -1,5 +1,19 @@
+import type {TokenGroup} from './tokens';
+
 const BASE_FONT_SIZE = 16;
 
-export function rem(px: string) {
-  return `${parseInt(px, 10) / BASE_FONT_SIZE}rem`;
+function rem(value: string) {
+  return value.replace(
+    // https://regex101.com/r/RBL7EE/1
+    /\d+(?:\.\d+|\d*)px/g,
+    (px: string) => `${parseInt(px, 10) / BASE_FONT_SIZE}rem`,
+  );
+}
+
+export function tokensToRems(tokenGroup: TokenGroup): TokenGroup {
+  return Object.fromEntries(
+    Object.entries(tokenGroup).map(([token, value]) => {
+      return [token, rem(value)];
+    }),
+  );
 }
diff --git a/tokens/color.dark.json b/tokens/color.dark.json
new file mode 100644
index 00000000000..252c6c0cfb3
--- /dev/null
+++ b/tokens/color.dark.json
@@ -0,0 +1,129 @@
+{
+  "background": "rgba(11, 12, 13, 1)",
+  "background-hovered": "rgba(11, 12, 13, 1)",
+  "background-pressed": "rgba(11, 12, 13, 1)",
+  "background-selected": "rgba(11, 12, 13, 1)",
+  "surface": "rgba(32, 33, 35, 1)",
+  "surface-neutral": "rgba(49, 51, 53, 1)",
+  "surface-neutral-hovered": "rgba(49, 51, 53, 1)",
+  "surface-neutral-pressed": "rgba(49, 51, 53, 1)",
+  "surface-neutral-disabled": "rgba(49, 51, 53, 1)",
+  "surface-neutral-subdued": "rgba(68, 71, 74, 1)",
+  "surface-subdued": "rgba(26, 28, 29, 1)",
+  "surface-disabled": "rgba(26, 28, 29, 1)",
+  "surface-hovered": "rgba(47, 49, 51, 1)",
+  "surface-pressed": "rgba(62, 64, 67, 1)",
+  "surface-depressed": "rgba(80, 83, 86, 1)",
+  "surface-search-field": "rgba(47, 49, 51, 1)",
+  "backdrop": "rgba(0, 0, 0, 0.5)",
+  "overlay": "rgba(33, 33, 33, 0.5)",
+  "shadow-from-dim-light": "rgba(255, 255, 255, 0.2)",
+  "shadow-from-ambient-light": "rgba(23, 24, 24, 0.05)",
+  "shadow-from-direct-light": "rgba(255, 255, 255, 0.15)",
+  "hint-from-direct-light": "rgba(185, 185, 185, 0.2)",
+  "border": "rgba(80, 83, 86, 1)",
+  "border-neutral-subdued": "rgba(130, 135, 139, 1)",
+  "border-hovered": "rgba(80, 83, 86, 1)",
+  "border-disabled": "rgba(103, 107, 111, 1)",
+  "border-subdued": "rgba(130, 135, 139, 1)",
+  "border-depressed": "rgba(142, 145, 145, 1)",
+  "border-shadow": "rgba(91, 95, 98, 1)",
+  "border-shadow-subdued": "rgba(130, 135, 139, 1)",
+  "divider": "rgba(69, 71, 73, 1)",
+  "icon": "rgba(166, 172, 178, 1)",
+  "icon-hovered": "rgba(225, 227, 229, 1)",
+  "icon-pressed": "rgba(166, 172, 178, 1)",
+  "icon-disabled": "rgba(84, 87, 90, 1)",
+  "icon-subdued": "rgba(120, 125, 129, 1)",
+  "text": "rgba(227, 229, 231, 1)",
+  "text-disabled": "rgba(111, 115, 119, 1)",
+  "text-subdued": "rgba(153, 159, 164, 1)",
+  "interactive": "rgba(54, 163, 255, 1)",
+  "interactive-disabled": "rgba(38, 98, 182, 1)",
+  "interactive-hovered": "rgba(103, 175, 255, 1)",
+  "interactive-pressed": "rgba(136, 188, 255, 1)",
+  "focused": "rgba(38, 98, 182, 1)",
+  "surface-selected": "rgba(2, 14, 35, 1)",
+  "surface-selected-hovered": "rgba(7, 29, 61, 1)",
+  "surface-selected-pressed": "rgba(13, 43, 86, 1)",
+  "icon-on-interactive": "rgba(255, 255, 255, 1)",
+  "text-on-interactive": "rgba(255, 255, 255, 1)",
+  "action-secondary": "rgba(77, 80, 83, 1)",
+  "action-secondary-disabled": "rgba(32, 34, 35, 1)",
+  "action-secondary-hovered": "rgba(84, 87, 91, 1)",
+  "action-secondary-pressed": "rgba(96, 100, 103, 1)",
+  "action-secondary-depressed": "rgba(123, 127, 132, 1)",
+  "action-primary": "rgba(0, 128, 96, 1)",
+  "action-primary-disabled": "rgba(0, 86, 64, 1)",
+  "action-primary-hovered": "rgba(0, 150, 113, 1)",
+  "action-primary-pressed": "rgba(0, 164, 124, 1)",
+  "action-primary-depressed": "rgba(0, 179, 136, 1)",
+  "icon-on-primary": "rgba(230, 255, 244, 1)",
+  "text-on-primary": "rgba(255, 255, 255, 1)",
+  "text-primary": "rgba(0, 141, 106, 1)",
+  "text-primary-hovered": "rgba(0, 158, 120, 1)",
+  "text-primary-pressed": "rgba(0, 176, 133, 1)",
+  "surface-primary-selected": "rgba(12, 18, 16, 1)",
+  "surface-primary-selected-hovered": "rgba(40, 48, 44, 1)",
+  "surface-primary-selected-pressed": "rgba(54, 64, 59, 1)",
+  "border-critical": "rgba(227, 47, 14, 1)",
+  "border-critical-subdued": "rgba(227, 47, 14, 1)",
+  "border-critical-disabled": "rgba(131, 23, 4, 1)",
+  "icon-critical": "rgba(218, 45, 13, 1)",
+  "surface-critical": "rgba(69, 7, 1, 1)",
+  "surface-critical-subdued": "rgba(69, 7, 1, 1)",
+  "surface-critical-subdued-hovered": "rgba(68, 23, 20, 1)",
+  "surface-critical-subdued-pressed": "rgba(107, 16, 3, 1)",
+  "surface-critical-subdued-depressed": "rgba(135, 24, 5, 1)",
+  "text-critical": "rgba(233, 128, 122, 1)",
+  "action-critical": "rgba(205, 41, 12, 1)",
+  "action-critical-disabled": "rgba(187, 37, 10, 1)",
+  "action-critical-hovered": "rgba(227, 47, 14, 1)",
+  "action-critical-pressed": "rgba(250, 53, 17, 1)",
+  "action-critical-depressed": "rgba(253, 87, 73, 1)",
+  "icon-on-critical": "rgba(255, 248, 247, 1)",
+  "text-on-critical": "rgba(255, 255, 255, 1)",
+  "interactive-critical": "rgba(253, 114, 106, 1)",
+  "interactive-critical-disabled": "rgba(254, 172, 168, 1)",
+  "interactive-critical-hovered": "rgba(253, 138, 132, 1)",
+  "interactive-critical-pressed": "rgba(253, 159, 155, 1)",
+  "border-warning": "rgba(153, 112, 0, 1)",
+  "border-warning-subdued": "rgba(153, 112, 0, 1)",
+  "icon-warning": "rgba(104, 75, 0, 1)",
+  "surface-warning": "rgba(153, 112, 0, 1)",
+  "surface-warning-subdued": "rgba(77, 59, 29, 1)",
+  "surface-warning-subdued-hovered": "rgba(82, 63, 32, 1)",
+  "surface-warning-subdued-pressed": "rgba(87, 67, 34, 1)",
+  "text-warning": "rgba(202, 149, 0, 1)",
+  "border-highlight": "rgba(68, 157, 167, 1)",
+  "border-highlight-subdued": "rgba(68, 157, 167, 1)",
+  "icon-highlight": "rgba(44, 108, 115, 1)",
+  "surface-highlight": "rgba(0, 105, 113, 1)",
+  "surface-highlight-subdued": "rgba(18, 53, 57, 1)",
+  "surface-highlight-subdued-hovered": "rgba(20, 58, 62, 1)",
+  "surface-highlight-subdued-pressed": "rgba(24, 65, 70, 1)",
+  "text-highlight": "rgba(162, 239, 250, 1)",
+  "border-success": "rgba(0, 135, 102, 1)",
+  "border-success-subdued": "rgba(0, 135, 102, 1)",
+  "icon-success": "rgba(0, 94, 70, 1)",
+  "surface-success": "rgba(0, 94, 70, 1)",
+  "surface-success-subdued": "rgba(28, 53, 44, 1)",
+  "surface-success-subdued-hovered": "rgba(31, 58, 48, 1)",
+  "surface-success-subdued-pressed": "rgba(35, 65, 54, 1)",
+  "text-success": "rgba(88, 173, 142, 1)",
+  "decorative-one-icon": "rgba(255, 186, 67, 1)",
+  "decorative-one-surface": "rgba(142, 102, 9, 1)",
+  "decorative-one-text": "rgba(255, 255, 255, 1)",
+  "decorative-two-icon": "rgba(245, 182, 192, 1)",
+  "decorative-two-surface": "rgba(206, 88, 20, 1)",
+  "decorative-two-text": "rgba(255, 255, 255, 1)",
+  "decorative-three-icon": "rgba(0, 227, 141, 1)",
+  "decorative-three-surface": "rgba(0, 124, 90, 1)",
+  "decorative-three-text": "rgba(255, 255, 255, 1)",
+  "decorative-four-icon": "rgba(0, 221, 218, 1)",
+  "decorative-four-surface": "rgba(22, 124, 121, 1)",
+  "decorative-four-text": "rgba(255, 255, 255, 1)",
+  "decorative-five-icon": "rgba(244, 183, 191, 1)",
+  "decorative-five-surface": "rgba(194, 51, 86, 1)",
+  "decorative-five-text": "rgba(255, 255, 255, 1)"
+}
diff --git a/tokens/color.light.json b/tokens/color.light.json
new file mode 100644
index 00000000000..95e1e303d0b
--- /dev/null
+++ b/tokens/color.light.json
@@ -0,0 +1,129 @@
+{
+  "background": "rgba(246, 246, 247, 1)",
+  "background-hovered": "rgba(241, 242, 243, 1)",
+  "background-pressed": "rgba(237, 238, 239, 1)",
+  "background-selected": "rgba(237, 238, 239, 1)",
+  "surface": "rgba(255, 255, 255, 1)",
+  "surface-neutral": "rgba(228, 229, 231, 1)",
+  "surface-neutral-hovered": "rgba(219, 221, 223, 1)",
+  "surface-neutral-pressed": "rgba(201, 204, 208, 1)",
+  "surface-neutral-disabled": "rgba(241, 242, 243, 1)",
+  "surface-neutral-subdued": "rgba(246, 246, 247, 1)",
+  "surface-subdued": "rgba(250, 251, 251, 1)",
+  "surface-disabled": "rgba(250, 251, 251, 1)",
+  "surface-hovered": "rgba(246, 246, 247, 1)",
+  "surface-pressed": "rgba(241, 242, 243, 1)",
+  "surface-depressed": "rgba(237, 238, 239, 1)",
+  "surface-search-field": "rgba(241, 242, 243, 1)",
+  "backdrop": "rgba(0, 0, 0, 0.5)",
+  "overlay": "rgba(255, 255, 255, 0.5)",
+  "shadow-from-dim-light": "rgba(0, 0, 0, 0.2)",
+  "shadow-from-ambient-light": "rgba(23, 24, 24, 0.05)",
+  "shadow-from-direct-light": "rgba(0, 0, 0, 0.15)",
+  "hint-from-direct-light": "rgba(0, 0, 0, 0.15)",
+  "border": "rgba(140, 145, 150, 1)",
+  "border-neutral-subdued": "rgba(186, 191, 195, 1)",
+  "border-hovered": "rgba(153, 158, 164, 1)",
+  "border-disabled": "rgba(210, 213, 216, 1)",
+  "border-subdued": "rgba(201, 204, 207, 1)",
+  "border-depressed": "rgba(87, 89, 89, 1)",
+  "border-shadow": "rgba(174, 180, 185, 1)",
+  "border-shadow-subdued": "rgba(186, 191, 196, 1)",
+  "divider": "rgba(225, 227, 229, 1)",
+  "icon": "rgba(92, 95, 98, 1)",
+  "icon-hovered": "rgba(26, 28, 29, 1)",
+  "icon-pressed": "rgba(68, 71, 74, 1)",
+  "icon-disabled": "rgba(186, 190, 195, 1)",
+  "icon-subdued": "rgba(140, 145, 150, 1)",
+  "text": "rgba(32, 34, 35, 1)",
+  "text-disabled": "rgba(140, 145, 150, 1)",
+  "text-subdued": "rgba(109, 113, 117, 1)",
+  "interactive": "rgba(44, 110, 203, 1)",
+  "interactive-disabled": "rgba(189, 193, 204, 1)",
+  "interactive-hovered": "rgba(31, 81, 153, 1)",
+  "interactive-pressed": "rgba(16, 50, 98, 1)",
+  "focused": "rgba(69, 143, 255, 1)",
+  "surface-selected": "rgba(242, 247, 254, 1)",
+  "surface-selected-hovered": "rgba(237, 244, 254, 1)",
+  "surface-selected-pressed": "rgba(229, 239, 253, 1)",
+  "icon-on-interactive": "rgba(255, 255, 255, 1)",
+  "text-on-interactive": "rgba(255, 255, 255, 1)",
+  "action-secondary": "rgba(255, 255, 255, 1)",
+  "action-secondary-disabled": "rgba(255, 255, 255, 1)",
+  "action-secondary-hovered": "rgba(246, 246, 247, 1)",
+  "action-secondary-pressed": "rgba(241, 242, 243, 1)",
+  "action-secondary-depressed": "rgba(109, 113, 117, 1)",
+  "action-primary": "rgba(0, 128, 96, 1)",
+  "action-primary-disabled": "rgba(241, 241, 241, 1)",
+  "action-primary-hovered": "rgba(0, 110, 82, 1)",
+  "action-primary-pressed": "rgba(0, 94, 70, 1)",
+  "action-primary-depressed": "rgba(0, 61, 44, 1)",
+  "icon-on-primary": "rgba(255, 255, 255, 1)",
+  "text-on-primary": "rgba(255, 255, 255, 1)",
+  "text-primary": "rgba(0, 123, 92, 1)",
+  "text-primary-hovered": "rgba(0, 108, 80, 1)",
+  "text-primary-pressed": "rgba(0, 92, 68, 1)",
+  "surface-primary-selected": "rgba(241, 248, 245, 1)",
+  "surface-primary-selected-hovered": "rgba(179, 208, 195, 1)",
+  "surface-primary-selected-pressed": "rgba(162, 188, 176, 1)",
+  "border-critical": "rgba(253, 87, 73, 1)",
+  "border-critical-subdued": "rgba(224, 179, 178, 1)",
+  "border-critical-disabled": "rgba(255, 167, 163, 1)",
+  "icon-critical": "rgba(215, 44, 13, 1)",
+  "surface-critical": "rgba(254, 211, 209, 1)",
+  "surface-critical-subdued": "rgba(255, 244, 244, 1)",
+  "surface-critical-subdued-hovered": "rgba(255, 240, 240, 1)",
+  "surface-critical-subdued-pressed": "rgba(255, 233, 232, 1)",
+  "surface-critical-subdued-depressed": "rgba(254, 188, 185, 1)",
+  "text-critical": "rgba(215, 44, 13, 1)",
+  "action-critical": "rgba(216, 44, 13, 1)",
+  "action-critical-disabled": "rgba(241, 241, 241, 1)",
+  "action-critical-hovered": "rgba(188, 34, 0, 1)",
+  "action-critical-pressed": "rgba(162, 27, 0, 1)",
+  "action-critical-depressed": "rgba(108, 15, 0, 1)",
+  "icon-on-critical": "rgba(255, 255, 255, 1)",
+  "text-on-critical": "rgba(255, 255, 255, 1)",
+  "interactive-critical": "rgba(216, 44, 13, 1)",
+  "interactive-critical-disabled": "rgba(253, 147, 141, 1)",
+  "interactive-critical-hovered": "rgba(205, 41, 12, 1)",
+  "interactive-critical-pressed": "rgba(103, 15, 3, 1)",
+  "border-warning": "rgba(185, 137, 0, 1)",
+  "border-warning-subdued": "rgba(225, 184, 120, 1)",
+  "icon-warning": "rgba(185, 137, 0, 1)",
+  "surface-warning": "rgba(255, 215, 157, 1)",
+  "surface-warning-subdued": "rgba(255, 245, 234, 1)",
+  "surface-warning-subdued-hovered": "rgba(255, 242, 226, 1)",
+  "surface-warning-subdued-pressed": "rgba(255, 235, 211, 1)",
+  "text-warning": "rgba(145, 106, 0, 1)",
+  "border-highlight": "rgba(68, 157, 167, 1)",
+  "border-highlight-subdued": "rgba(152, 198, 205, 1)",
+  "icon-highlight": "rgba(0, 160, 172, 1)",
+  "surface-highlight": "rgba(164, 232, 242, 1)",
+  "surface-highlight-subdued": "rgba(235, 249, 252, 1)",
+  "surface-highlight-subdued-hovered": "rgba(228, 247, 250, 1)",
+  "surface-highlight-subdued-pressed": "rgba(213, 243, 248, 1)",
+  "text-highlight": "rgba(52, 124, 132, 1)",
+  "border-success": "rgba(0, 164, 124, 1)",
+  "border-success-subdued": "rgba(149, 201, 180, 1)",
+  "icon-success": "rgba(0, 127, 95, 1)",
+  "surface-success": "rgba(174, 233, 209, 1)",
+  "surface-success-subdued": "rgba(241, 248, 245, 1)",
+  "surface-success-subdued-hovered": "rgba(236, 246, 241, 1)",
+  "surface-success-subdued-pressed": "rgba(226, 241, 234, 1)",
+  "text-success": "rgba(0, 128, 96, 1)",
+  "decorative-one-icon": "rgba(126, 87, 0, 1)",
+  "decorative-one-surface": "rgba(255, 201, 107, 1)",
+  "decorative-one-text": "rgba(61, 40, 0, 1)",
+  "decorative-two-icon": "rgba(175, 41, 78, 1)",
+  "decorative-two-surface": "rgba(255, 196, 176, 1)",
+  "decorative-two-text": "rgba(73, 11, 28, 1)",
+  "decorative-three-icon": "rgba(0, 109, 65, 1)",
+  "decorative-three-surface": "rgba(146, 230, 181, 1)",
+  "decorative-three-text": "rgba(0, 47, 25, 1)",
+  "decorative-four-icon": "rgba(0, 106, 104, 1)",
+  "decorative-four-surface": "rgba(145, 224, 214, 1)",
+  "decorative-four-text": "rgba(0, 45, 45, 1)",
+  "decorative-five-icon": "rgba(174, 43, 76, 1)",
+  "decorative-five-surface": "rgba(253, 201, 208, 1)",
+  "decorative-five-text": "rgba(79, 14, 31, 1)"
+}
diff --git a/tokens/legacy-tokens.json b/tokens/legacy-tokens.json
new file mode 100644
index 00000000000..14489af1f64
--- /dev/null
+++ b/tokens/legacy-tokens.json
@@ -0,0 +1,26 @@
+{
+  "card-shadow": "0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)",
+  "popover-shadow": "-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)",
+  "modal-shadow": "0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)",
+  "top-bar-shadow": "0 2px 2px -1px var(--p-shadow-from-direct-light)",
+  "button-drop-shadow": "0 1px 0 rgba(0, 0, 0, 0.05)",
+  "button-inner-shadow": "inset 0 -1px 0 rgba(0, 0, 0, 0.2)",
+  "button-pressed-inner-shadow": "inset 0 1px 0 rgba(0, 0, 0, 0.15)",
+  "override-loading-z-index": "514",
+  "choice-size": "2rem",
+  "icon-size": "1rem",
+  "choice-margin": "0.1rem",
+  "control-border-width": "0.2rem",
+  "banner-border-default": "inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)",
+  "banner-border-success": "inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)",
+  "banner-border-highlight": "inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)",
+  "banner-border-warning": "inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)",
+  "banner-border-critical": "inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)",
+  "thin-border-subdued": "0.1rem solid var(--p-border-subdued)",
+  "text-field-spinner-offset": "0.2rem",
+  "text-field-focus-ring-offset": "-0.4rem",
+  "button-group-item-spacing": "-0.1rem",
+  "range-slider-thumb-size-base": "1.6rem",
+  "range-slider-thumb-size-active": "2.4rem",
+  "frame-offset": "0px"
+}
diff --git a/tokens/motion.json b/tokens/motion.json
new file mode 100644
index 00000000000..81ff7b66766
--- /dev/null
+++ b/tokens/motion.json
@@ -0,0 +1,18 @@
+{
+  "duration-0": "0ms",
+  "duration-50": "50ms",
+  "duration-100": "100ms",
+  "duration-150": "150ms",
+  "duration-200": "200ms",
+  "duration-250": "250ms",
+  "duration-300": "300ms",
+  "duration-350": "350ms",
+  "duration-400": "400ms",
+  "duration-450": "450ms",
+  "duration-500": "500ms",
+  "ease": "cubic-bezier(0.25, 0.1, 0.25, 1)",
+  "ease-in": "cubic-bezier(0.42, 0, 1, 1)",
+  "ease-out": "cubic-bezier(0, 0, 0.58, 1)",
+  "ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
+  "linear": "cubic-bezier(0, 0, 1, 1)"
+}
diff --git a/tokens/schemas/token-group.json b/tokens/schemas/token-group.json
new file mode 100644
index 00000000000..53183583da5
--- /dev/null
+++ b/tokens/schemas/token-group.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Token group schema",
+  "type": "object",
+  "additionalProperties": {
+    "type": "string"
+  }
+}
diff --git a/tokens/shape.json b/tokens/shape.json
new file mode 100644
index 00000000000..a0b34dc1140
--- /dev/null
+++ b/tokens/shape.json
@@ -0,0 +1,9 @@
+{
+  "border-radius-05": "2px",
+  "border-radius-1": "4px",
+  "border-radius-2": "8px",
+  "border-radius-3": "12px",
+  "border-radius-4": "16px",
+  "border-radius-5": "20px",
+  "border-radius-6": "50%"
+}
diff --git a/tokens/spacing.json b/tokens/spacing.json
new file mode 100644
index 00000000000..e3f9434f8c9
--- /dev/null
+++ b/tokens/spacing.json
@@ -0,0 +1,19 @@
+{
+  "space-0": "0",
+  "space-025": "1px",
+  "space-05": "2px",
+  "space-1": "4px",
+  "space-2": "8px",
+  "space-3": "12px",
+  "space-4": "16px",
+  "space-5": "20px",
+  "space-6": "24px",
+  "space-8": "32px",
+  "space-10": "40px",
+  "space-12": "48px",
+  "space-16": "64px",
+  "space-20": "80px",
+  "space-24": "96px",
+  "space-28": "112px",
+  "space-32": "128px"
+}
diff --git a/tokens/typography.json b/tokens/typography.json
new file mode 100644
index 00000000000..3aa584f2bf3
--- /dev/null
+++ b/tokens/typography.json
@@ -0,0 +1,6 @@
+{
+  "font-weight-regular": "400",
+  "font-weight-medium": "500",
+  "font-weight-semibold": "600",
+  "font-weight-bold": "700"
+}
diff --git a/tokens/z-index.json b/tokens/z-index.json
new file mode 100644
index 00000000000..d63e8f1ad99
--- /dev/null
+++ b/tokens/z-index.json
@@ -0,0 +1,14 @@
+{
+  "z-1": "100",
+  "z-2": "400",
+  "z-3": "510",
+  "z-4": "512",
+  "z-5": "513",
+  "z-6": "514",
+  "z-7": "515",
+  "z-8": "516",
+  "z-9": "517",
+  "z-10": "518",
+  "z-11": "519",
+  "z-12": "520"
+}
diff --git a/yarn.lock b/yarn.lock
index 2d91d7f50bc..4e620d491b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1788,6 +1788,13 @@
     "@rollup/pluginutils" "^3.0.4"
     mini-svg-data-uri "^1.1.3"
 
+"@rollup/plugin-json@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
+  integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+
 "@rollup/plugin-node-resolve@^13.0.0":
   version "13.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz#b10222f4145a019740acb7738402130d848660c0"
@@ -3720,6 +3727,19 @@ airbnb-js-shims@^2.2.1:
     string.prototype.padstart "^3.0.0"
     symbol.prototype.description "^1.0.0"
 
+ajv-cli@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-cli/-/ajv-cli-5.0.0.tgz#78956ed2934e6dde4c9e696b587be1c2998862e8"
+  integrity sha512-LY4m6dUv44HTyhV+u2z5uX4EhPYTM38Iv1jdgDJJJCyOOuqB8KtZEGjPZ2T+sh5ZIJrXUfgErYx/j3gLd3+PlQ==
+  dependencies:
+    ajv "^8.0.0"
+    fast-json-patch "^2.0.0"
+    glob "^7.1.0"
+    js-yaml "^3.14.0"
+    json-schema-migrate "^2.0.0"
+    json5 "^2.1.3"
+    minimist "^1.2.0"
+
 ajv-errors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@@ -3740,6 +3760,16 @@ ajv@6.12.6, ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.0.0:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.8.2.tgz#01b4fef2007a28bf75f0b7fc009f62679de4abbb"
+  integrity sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 ajv@^8.0.1:
   version "8.6.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571"
@@ -7071,6 +7101,13 @@ fast-json-parse@^1.0.3:
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
   integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==
 
+fast-json-patch@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-2.2.1.tgz#18150d36c9ab65c7209e7d4eb113f4f8eaabe6d9"
+  integrity sha512-4j5uBaTnsYAV5ebkidvxiLUYOwjQ+JSFljeqfTxCrH9bDmlCQaOJFS84oDJ2rAXZq2yskmk3ORfoP9DCwqFNig==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -7660,6 +7697,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-modules@2.0.0, global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -9416,6 +9465,14 @@ js-yaml@^3.11.0, js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^3.14.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -9476,6 +9533,13 @@ json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-schema-migrate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-migrate/-/json-schema-migrate-2.0.0.tgz#335ef5218cd32fcc96c1ddce66c71ba586224496"
+  integrity sha512-r38SVTtojDRp4eD6WsCqiE0eNDt4v1WalBXb9cyZYw9ai5cGtBwzRNWjHzJl38w6TxFkXAIA7h+fyX3tnrAFhQ==
+  dependencies:
+    ajv "^8.0.0"
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"