diff --git a/.gitignore b/.gitignore
index ea508117..bd9ffb59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /dist
 /dist-ssr
 /node_modules
+/tokens
 
 # Logs
 logs
diff --git a/package.json b/package.json
index af20088c..1f43c638 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "serve": "vite preview",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "build-tokens": "token-transformer ./tokens/tokens.json tokens/transformed-tokens.json && node sd.config.mjs",
     "lint:js": "eslint '**/*.{vue,ts}'",
     "lint:js:fix": "eslint --fix '**/*.{vue,ts,html}'",
     "lint:style": "stylelint '**/*.{css,scss,vue}'",
@@ -83,8 +84,10 @@
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
+    "style-dictionary": "^3.7.1",
     "style-loader": "^3.3.1",
     "stylelint": "^14.8.2",
+    "token-transformer": "^0.0.25",
     "typescript": "^4.6.4",
     "vite": "^2.9.8",
     "vite-plugin-dts": "^1.1.1",
diff --git a/sd.config.mjs b/sd.config.mjs
new file mode 100644
index 00000000..abe585de
--- /dev/null
+++ b/sd.config.mjs
@@ -0,0 +1,61 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import StyleDictionary from "style-dictionary";
+/* eslint-disable import/no-extraneous-dependencies */
+
+const createShadowFromTokenValue = (value) => {
+    const { x, y, blur, spread, color } = value;
+
+    const shadowValues = [x, y, blur, spread];
+
+    const isShadowValueNone = shadowValues.every(val => !val);
+
+    if (isShadowValueNone) return 'none';
+
+    return `${shadowValues.join('px ')} ${color}`;
+};
+
+const dropShadowTransformer = (token) => {
+    const tokenValue = token.original.value;
+    if (!Array.isArray(tokenValue)) return createShadowFromTokenValue(tokenValue);
+
+    return token.original.value.reduce((acc, curTokenValue) => {
+        const shadow = createShadowFromTokenValue(curTokenValue);
+        acc.push(shadow);
+
+        return acc;
+    }, []).join(', ');
+
+};
+
+StyleDictionary.registerTransform({
+    type: 'value',
+    name: 'shadows-value/css',
+    matcher: (token) => ['dropShadow', 'boxShadow'].includes(token.type),
+    transformer: dropShadowTransformer
+});
+
+StyleDictionary.registerFilter({
+    name: 'token-set-order/css',
+    matcher: (token) => !token.attributes.category.includes('tokenSetOrder'),
+});
+
+StyleDictionary.extend({
+  "source": ["tokens/transformed-tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "transforms": ["attribute/cti", "name/cti/kebab", "size/px", "color/css", "shadows-value/css"],
+      "buildPath": "src/",
+      "files": [
+        {
+          "destination": "token-variables.scss",
+          "format": "css/variables",
+          "options": {
+            "showFileHeader": false
+          },
+            filter: 'token-set-order/css'
+        }
+      ]
+    }
+  }
+}).buildAllPlatforms();
diff --git a/src/main.scss b/src/main.scss
index 33616606..ea70a415 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -1,6 +1,6 @@
 @import './normalize';
-@import './vars';
 @import './transition';
+@import './vars';
 
 *,
 *::before,
diff --git a/src/qComponents/QInput/src/q-input.scss b/src/qComponents/QInput/src/q-input.scss
index 68e96da4..db2a85b5 100644
--- a/src/qComponents/QInput/src/q-input.scss
+++ b/src/qComponents/QInput/src/q-input.scss
@@ -1,29 +1,6 @@
-.q-input {
-  --field-color-base: var(--color-primary-black);
-  --field-color-placeholder: rgb(var(--color-rgb-gray) / 32%);
-  --field-color-disabled: rgb(var(--color-rgb-gray) / 64%);
-  --field-icon-color-base: var(--color-primary-blue);
-  --field-icon-color-hover: var(--color-primary-black);
-  --field-icon-color-inactive: rgb(var(--color-rgb-gray) / 64%);
-  --field-background-color-base: var(--color-tertiary-gray-light);
-  --field-background-color-hover: var(--color-tertiary-gray);
-  --field-background-color-focus: var(--color-tertiary-gray-ultra-light);
-  --field-background-color-disabled: var(--color-tertiary-gray);
-  --field-box-shadow-base: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
-    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
-    -4px -4px 12px var(--color-tertiary-white);
-  --field-box-shadow-hover: -1px -1px 4px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 4px rgb(var(--color-rgb-blue) / 40%),
-    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
-    -4px -4px 8px rgb(var(--color-rgb-white) / 80%);
-  --field-box-shadow-focus: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
-    inset -1px -1px 1px rgb(var(--color-rgb-white) / 70%),
-    inset 1px 1px 2px rgb(var(--color-rgb-blue) / 20%);
-  --field-box-shadow-disabled: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
+@import '@/token-variables';
 
+.q-input {
   position: relative;
   display: inline-block;
   width: 100%;
@@ -37,11 +14,12 @@
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-base);
     line-height: var(--line-height-base);
-    color: var(--field-color-base);
-    background-color: var(--field-background-color-base);
+    color: var(--input-filled-text-color);
+    background-color: var(--input-default-background-color);
     border: none;
     border-radius: var(--border-radius-base);
-    box-shadow: var(--field-box-shadow-base);
+    outline: 1px solid var(--input-default-border-color);
+    box-shadow: var(--input-default-background-shadow);
     appearance: textfield;
 
     &::-webkit-outer-spin-button,
@@ -52,7 +30,7 @@
 
     &::placeholder,
     &:placeholder-shown {
-      color: var(--field-color-placeholder);
+      color: var(--input-disabled-text-color);
       text-overflow: ellipsis;
       opacity: 1;
     }
@@ -71,21 +49,26 @@
 
     .q-input_focused &,
     &.focus-visible {
-      background-color: var(--field-background-color-focus);
-      box-shadow: var(--field-box-shadow-focus);
+      color: var(--input-focus-filled-text-color);
+      background-color: var(--input-filled-background-color);
+      outline: 1px solid var(--input-focus-filled-border-color);
+      box-shadow: var(--input-focus-background-shadow);
     }
 
     &:hover {
-      background-color: var(--field-background-color-hover);
-      box-shadow: var(--field-box-shadow-hover);
+      color: var(--input-hover-filled-text-color);
+      background-color: var(--input-hover-background-color);
+      outline: 1px solid var(--input-hover-border-color);
+      box-shadow: var(--input-hover-background-shadow);
     }
 
     .q-input_disabled & {
       padding-right: 40px;
-      color: var(--field-color-disabled);
+      color: var(--input-disabled-text-color);
       cursor: not-allowed;
-      background-color: var(--field-background-color-disabled);
-      box-shadow: var(--field-box-shadow-disabled);
+      background-color: var(--input-disabled-background-color);
+      outline: 1px solid var(--input-disabled-border-color);
+      box-shadow: var(--input-disabled-background-shadow);
     }
 
     .q-input_suffix & {
@@ -96,7 +79,10 @@
       &,
       &.focus-visible {
         padding-left: 15px;
-        border: var(--border-error);
+        color: var(--input-error-text-color);
+        background-color: var(--input-error-background-color);
+        border: 1px solid var(--input-error-border-color);
+        box-shadow: var(--input-error-background-shadow);
       }
     }
   }
@@ -116,23 +102,43 @@
     width: 40px;
     font-size: 24px;
     line-height: 40px;
-    color: var(--field-icon-color-inactive);
+    color: var(--input-default-icon-color);
     text-align: center;
 
     &:not(:last-child) {
       display: none;
     }
 
+    .q-input_disabled & {
+      color: var(--input-disabled-icon-color);
+    }
+
+    .q-form-item_is-error & {
+      color: var(--input-error-icon-color);
+    }
+
+    .q-input_focused .q-input__inner &,
+    .q-input__inner.focus-visible & {
+      color: var(--input-focus-icon-color);
+    }
+
+    .q-input__inner:hover & {
+      color: var(--input-hover-icon-color);
+    }
+
     &.q-icon-close,
     &.q-icon-eye,
     &.q-icon-eye-close {
-      color: var(--field-icon-color-base);
+      color: var(--input-filled-icon-color);
       pointer-events: all;
       cursor: pointer;
 
-      &:hover,
+      &:hover {
+        color: var(--input-hover-filled-icon-color);
+      }
+
       &.focus-visible {
-        color: var(--field-icon-color-hover);
+        color: var(--input-focus-filled-icon-color);
       }
     }
   }
diff --git a/src/token-variables.scss b/src/token-variables.scss
new file mode 100644
index 00000000..eacac1aa
--- /dev/null
+++ b/src/token-variables.scss
@@ -0,0 +1,227 @@
+:root {
+  --input-default-background-color: #f8f9fa;
+  --input-default-border-color: #f8f9fa;
+  --input-default-text-color: #adb5bd;
+  --input-default-icon-color: #495057;
+  --input-default-background-shadow: 1px 1px 3px 0 #aeaec066,
+    4px 4px 8px 0 #aeaec066;
+  --input-hover-background-color: #f1f3f5;
+  --input-hover-border-color: #f1f3f5;
+  --input-hover-text-color: #adb5bd;
+  --input-hover-icon-color: #495057;
+  --input-hover-background-shadow: 1px 1px 3px 0 #aeaec066;
+  --input-focus-background-color: #fff;
+  --input-focus-border-color: #a5d8ff;
+  --input-focus-text-color: #adb5bd;
+  --input-focus-icon-color: #495057;
+  --input-focus-background-shadow: none;
+  --input-focus-filled-background-color: #fff;
+  --input-focus-filled-border-color: #a5d8ff;
+  --input-focus-filled-text-color: #212529;
+  --input-focus-filled-icon-color: #1c7ed6;
+  --input-focus-filled-background-shadow: none;
+  --input-hover-filled-background-color: #f1f3f5;
+  --input-hover-filled-border-color: #f1f3f5;
+  --input-hover-filled-text-color: #212529;
+  --input-hover-filled-icon-color: #1c7ed6;
+  --input-hover-filled-background-shadow: 1px 1px 3px 0 #aeaec066;
+  --input-filled-background-color: #f8f9fa;
+  --input-filled-border-color: #f8f9fa;
+  --input-filled-text-color: #212529;
+  --input-filled-icon-color: #495057;
+  --input-filled-background-shadow: 1px 1px 3px 0 #aeaec066,
+    4px 4px 8px 0 #aeaec066;
+  --input-disabled-background-color: #e9ecef;
+  --input-disabled-border-color: #e9ecef;
+  --input-disabled-text-color: #adb5bd;
+  --input-disabled-icon-color: #adb5bd;
+  --input-disabled-background-shadow: 1px 1px 3px 0 #aeaec066;
+  --input-error-background-color: #fff;
+  --input-error-border-color: #ffd8a8;
+  --input-error-text-color: #f76707;
+  --input-error-icon-color: #495057;
+  --input-error-background-shadow: 1px 1px 3px 0 #aeaec066;
+  --brand-hue: 336;
+  --brand-gradient: linear-gradient(180deg, #de4b7a 0%, #4162f0 100%);
+  --brand-color-0: #fff0f6;
+  --brand-color-1: #ffe0ed;
+  --brand-color-2: #fcc0d8;
+  --brand-color-3: #faa3c6;
+  --brand-color-4: #f782b1;
+  --brand-color-5: #f0669d;
+  --brand-color-6: #e64787;
+  --brand-color-7: #d73374;
+  --brand-color-8: #c12563;
+  --brand-color-9: #a41e54;
+  --bg-primary: #f1f3f5;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #fff;
+  --bg-inverse: #e9ecef;
+  --bg-brand: #ffe0ed;
+  --bg-action: #d0ebff;
+  --bg-positive: #d3f9d8;
+  --bg-negative: #ffe8cc;
+  --bg-danger: #ffe3e3;
+  --bg-working: #fff3bf;
+  --bg-waiting: #c5f6fa;
+  --bg-service: #e5dbff;
+  --brd-primary: #ced4da;
+  --brd-secondary: #dee2e6;
+  --brd-tertiary: #e9ecef;
+  --brd-inverse: #495057;
+  --brd-brand: #faa3c6;
+  --brd-action: #a5d8ff;
+  --brd-positive: #b2f2bb;
+  --brd-negative: #ffd8a8;
+  --brd-danger: #ffa8a8;
+  --brd-working: #ffec99;
+  --brd-waiting: #99e9f2;
+  --brd-service: #b197fc;
+  --fg-primary: #212529;
+  --fg-secondary: #495057;
+  --fg-tertiary: #adb5bd;
+  --fg-inverse: #f8f9fa;
+  --fg-brand: #d73374;
+  --fg-action: #1c7ed6;
+  --fg-positive: #37b24d;
+  --fg-negative: #f76707;
+  --fg-danger: #f03e3e;
+  --fg-working: #f59f00;
+  --fg-waiting: #1098ad;
+  --fg-service: #7048e8;
+  --default: 1px 1px 3px 0 #aeaec066, 4px 4px 8px 0 #aeaec066;
+  --hover: 1px 1px 3px 0 #aeaec066;
+  --focus: none;
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --other-white: #fff;
+  --other-black: #1b1f22;
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #c92a2a;
+  --pink-0: #fff0f6;
+  --pink-1: #ffdeeb;
+  --pink-2: #fcc2d7;
+  --pink-3: #faa2c1;
+  --pink-4: #f783ac;
+  --pink-5: #f06595;
+  --pink-6: #e64980;
+  --pink-7: #d6336c;
+  --pink-8: #c2255c;
+  --pink-9: #a61e4d;
+  --grape-0: #f8f0fc;
+  --grape-1: #f3d9fa;
+  --grape-2: #eebefa;
+  --grape-3: #e599f7;
+  --grape-4: #da77f2;
+  --grape-5: #cc5de8;
+  --grape-6: #be4bdb;
+  --grape-7: #ae3ec9;
+  --grape-8: #9c36b5;
+  --grape-9: #862e9c;
+  --violet-0: #f3f0ff;
+  --violet-1: #e5dbff;
+  --violet-2: #d0bfff;
+  --violet-3: #b197fc;
+  --violet-4: #9775fa;
+  --violet-5: #845ef7;
+  --violet-6: #7950f2;
+  --violet-7: #7048e8;
+  --violet-8: #6741d9;
+  --violet-9: #5f3dc4;
+  --indigo-0: #edf2ff;
+  --indigo-1: #dbe4ff;
+  --indigo-2: #bac8ff;
+  --indigo-3: #91a7ff;
+  --indigo-4: #748ffc;
+  --indigo-5: #5c7cfa;
+  --indigo-6: #4c6ef5;
+  --indigo-7: #4263eb;
+  --indigo-8: #3b5bdb;
+  --indigo-9: #364fc7;
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --cyan-0: #e3fafc;
+  --cyan-1: #c5f6fa;
+  --cyan-2: #99e9f2;
+  --cyan-3: #66d9e8;
+  --cyan-4: #3bc9db;
+  --cyan-5: #22b8cf;
+  --cyan-6: #15aabf;
+  --cyan-7: #1098ad;
+  --cyan-8: #0c8599;
+  --cyan-9: #0b7285;
+  --teal-0: #e6fcf5;
+  --teal-1: #c3fae8;
+  --teal-2: #96f2d7;
+  --teal-3: #63e6be;
+  --teal-4: #38d9a9;
+  --teal-5: #20c997;
+  --teal-6: #12b886;
+  --teal-7: #0ca678;
+  --teal-8: #099268;
+  --teal-9: #087f5b;
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --lime-0: #f4fce3;
+  --lime-1: #e9fac8;
+  --lime-2: #d8f5a2;
+  --lime-3: #c0eb75;
+  --lime-4: #a9e34b;
+  --lime-5: #94d82d;
+  --lime-6: #82c91e;
+  --lime-7: #74b816;
+  --lime-8: #66a80f;
+  --lime-9: #5c940d;
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #fd7e14;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+}
diff --git a/src/vars.scss b/src/vars.scss
index 8474e63a..631e6be6 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -1,3 +1,5 @@
+@import 'token-variables';
+
 :root {
   --color-primary: #de4b7a;
   --color-primary-purple: #d048b4;
diff --git a/stories/core/colors.stories.mdx b/stories/core/colors.stories.mdx
index 3a3f58e8..01e800ee 100644
--- a/stories/core/colors.stories.mdx
+++ b/stories/core/colors.stories.mdx
@@ -1,6 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
 
-import '../../src/vars.scss';
 import {
   primaryColors,
   secondaryColors,
diff --git a/vite.config.ts b/vite.config.ts
index f1ae0703..96534ef7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -63,6 +63,21 @@ export default defineConfig({
       plugins: [
         sassPlugin({
           runtime: sass,
+          options: {
+            importer: [
+              (url, _, done): void => {
+                const aliasRegexp = /^@\//;
+                if (aliasRegexp.test(url)) {
+                  const resolvedPath = `${resolve(
+                    __dirname,
+                    'src'
+                  )}/${url.replace(aliasRegexp, '')}`;
+
+                  done({ file: resolvedPath });
+                }
+              }
+            ]
+          },
           output(_: string, styleNodes: IdAndContentObject[]) {
             styleNodes.forEach(styleNode => {
               const splittedPath = styleNode.id?.split('/') ?? [];
diff --git a/yarn.lock b/yarn.lock
index 89c42c21..1fde6507 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5123,6 +5123,15 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001332:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001336.tgz#a9eb13edd2613f418ebc632c8d6c9ab9fde7ccc4"
   integrity sha512-/YxSlBmL7iKXTbIJ48IQTnAOBk7XmWsxhBF1PZLOko5Dt9qc4Pl+84lfqG3Tc4EuavurRn1QLoVJGxY2iSycfw==
 
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -5180,6 +5189,24 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+change-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
+  dependencies:
+    camel-case "^4.1.2"
+    capital-case "^1.0.4"
+    constant-case "^3.0.4"
+    dot-case "^3.0.4"
+    header-case "^2.0.4"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.2"
+    path-case "^3.0.4"
+    sentence-case "^3.0.4"
+    snake-case "^3.0.4"
+    tslib "^2.0.3"
+
 character-entities-legacy@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
@@ -5613,6 +5640,15 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
+constant-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case "^2.0.2"
+
 constantinople@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
@@ -7726,6 +7762,18 @@ glob@^7.0.0, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.2.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -8099,6 +8147,14 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+header-case@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
 highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -9206,11 +9262,16 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.1.3, json5@^2.2.1:
+json5@^2.1.2, json5@^2.1.3, json5@^2.2.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+jsonc-parser@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -9941,7 +10002,7 @@ minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.2:
+minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -10794,6 +10855,14 @@ path-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
+path-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -12432,6 +12501,15 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+sentence-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -12617,6 +12695,14 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -13014,6 +13100,21 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-dictionary@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-3.7.1.tgz#d61c980513d7bb0a1946a9fab31491a672d0f6a2"
+  integrity sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==
+  dependencies:
+    chalk "^4.0.0"
+    change-case "^4.1.2"
+    commander "^8.3.0"
+    fs-extra "^10.0.0"
+    glob "^7.2.0"
+    json5 "^2.2.0"
+    jsonc-parser "^3.0.0"
+    lodash "^4.17.15"
+    tinycolor2 "^1.4.1"
+
 style-loader@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
@@ -13418,6 +13519,11 @@ timsort@~0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tinypool@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.1.3.tgz#b5570b364a1775fd403de5e7660b325308fee26b"
@@ -13502,6 +13608,13 @@ token-stream@1.0.0:
   resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
   integrity sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=
 
+token-transformer@^0.0.25:
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/token-transformer/-/token-transformer-0.0.25.tgz#325852420634f4f50c49b05e761937c823ee0ae4"
+  integrity sha512-9yvgd5IcOqad8yO+xYUFvv/eWYJPa4Fdl6xl2C//fdxevInAdTMkyHqWJ4PwWb8U9BWGNXYuMs+b9WBWkHGVUg==
+  dependencies:
+    yargs "^17.4.1"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -13925,6 +14038,20 @@ update-notifier@5.1.0:
     semver-diff "^3.1.1"
     xdg-basedir "^4.0.0"
 
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
+  dependencies:
+    tslib "^2.0.3"
+
+upper-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
+  dependencies:
+    tslib "^2.0.3"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -14698,6 +14825,19 @@ yargs@^17.0.0:
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
 
+yargs@^17.4.1:
+  version "17.5.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"