Repository: teleporthq/teleport-code-generators
Pull request #503 (2020-11-07 08:37:02)

Feat/design tokens

codecov[bot]: # [Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=h1) Report
> Merging [#503](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=desc) (fdf2358) into [development](https://codecov.io/gh/teleporthq/teleport-code-generators/commit/45b2775f1c6347a09e9c78b4844889bf71ef5732?el=desc) (45b2775) will **decrease** coverage by `0.12%`.
> The diff coverage is `48.00%`.

[![Impacted file tree graph](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/graphs/tree.svg?width=650&height=150&src=pr&token=LI2WPEFm1R)](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=tree)

```diff
@@               Coverage Diff               @@
##           development     #503      +/-   ##
===============================================
- Coverage        76.83%   76.70%   -0.13%     
===============================================
  Files              156      156              
  Lines             5542     5560      +18     
  Branches          1237     1245       +8     
===============================================
+ Hits              4258     4265       +7     
- Misses            1215     1226      +11     
  Partials            69       69              
```


| [Impacted Files](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [...t-uidl-validator/src/decoders/component-decoder.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC12YWxpZGF0b3Ivc3JjL2RlY29kZXJzL2NvbXBvbmVudC1kZWNvZGVyLnRz) | `100.00% <ø> (ø)` | |
| [...ckages/teleport-uidl-validator/src/parser/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC12YWxpZGF0b3Ivc3JjL3BhcnNlci9pbmRleC50cw==) | `61.53% <12.50%> (-5.61%)` | :arrow_down: |
| [...es/teleport-plugin-common/src/utils/style-utils.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtcGx1Z2luLWNvbW1vbi9zcmMvdXRpbHMvc3R5bGUtdXRpbHMudHM=) | `76.92% <40.00%> (-23.08%)` | :arrow_down: |
| [...eport-plugin-common/src/builders/style-builders.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtcGx1Z2luLWNvbW1vbi9zcmMvYnVpbGRlcnMvc3R5bGUtYnVpbGRlcnMudHM=) | `42.85% <66.66%> (ø)` | |
| [packages/teleport-shared/src/utils/string-utils.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtc2hhcmVkL3NyYy91dGlscy9zdHJpbmctdXRpbHMudHM=) | `92.59% <66.66%> (+0.28%)` | :arrow_up: |
| [packages/teleport-plugin-css/src/style-sheet.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtcGx1Z2luLWNzcy9zcmMvc3R5bGUtc2hlZXQudHM=) | `96.66% <75.00%> (-3.34%)` | :arrow_down: |
| [packages/teleport-component-generator/src/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtY29tcG9uZW50LWdlbmVyYXRvci9zcmMvaW5kZXgudHM=) | `89.06% <100.00%> (ø)` | |
| [...ages/teleport-uidl-validator/src/decoders/utils.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC12YWxpZGF0b3Ivc3JjL2RlY29kZXJzL3V0aWxzLnRz) | `96.36% <100.00%> (+0.06%)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=footer). Last update [45b2775...fdf2358](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/503?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/examples/uidl-samples/project.json b/examples/uidl-samples/project.json
index 4231836a..ec132795 100644
--- a/examples/uidl-samples/project.json
+++ b/examples/uidl-samples/project.json
@@ -43,13 +43,53 @@
   },
   "root": {
     "name": "App",
+    "designLanguage": {
+      "tokens": {
+        "blue-500": {
+          "type": "static",
+          "content": "#9999ff"
+        },
+        "blue-600": {
+          "type": "static",
+          "content": "#6b7db3"
+        },
+        "red-500": {
+          "type": "static",
+          "content": "#ff9999"
+        },
+        "red-300": "#b36b6b",
+        "font-size": 45
+      }
+    },
     "styleSetDefinitions": {
       "5ed0d05baa77d97673711820": {
         "id": "5ed0d05baa77d97673711820",
         "name": "primaryButton",
         "type": "reusable-project-style-map",
+        "conditions": [
+          { "type": "screen-size",
+            "meta": {
+              "maxWidth": 991
+            },
+            "content": {
+              "background": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType": "token",
+                  "id": "blue-600"
+                }
+              }
+            } 
+          }
+        ],
         "content": {
-          "background": "blue",
+          "background": {
+            "type": "dynamic",
+            "content": {
+              "referenceType": "token",
+              "id": "blue-500"
+            }
+          },
           "width": "auto",
           "color": "#fff",
           "border": "1px solid #fff"
@@ -283,13 +323,28 @@
                                           { "conditionType": "screen-size", "maxWidth": 991 }
                                         ],
                                         "styles": {
-                                          "flex": "inherit"
+                                          "flex": "inherit",
+                                          "background": "#000",
+                                          "color": {
+                                            "type": "dynamic",
+                                            "content": {
+                                              "referenceType": "token",
+                                              "id": "blue-500"
+                                            }
+                                          }
                                         }
                                       }
                                     }
                                   },
                                   "style": {
-                                    "flex": "1"
+                                    "flex": "1",
+                                    "color": {
+                                      "type": "dynamic",
+                                      "content": {
+                                        "referenceType": "token",
+                                        "id": "blue-500"
+                                      }
+                                    }
                                   },
                                   "children": [{
                                     "type": "element",
diff --git a/examples/uidl-samples/react-project.json b/examples/uidl-samples/react-project.json
index b780a9b4..9a164ea9 100644
--- a/examples/uidl-samples/react-project.json
+++ b/examples/uidl-samples/react-project.json
@@ -43,13 +43,53 @@
   },
   "root": {
     "name": "App",
+    "designLanguage": {
+      "tokens": {
+        "blue-500": {
+          "type": "static",
+          "content": "#9999ff"
+        },
+        "blue-600": {
+          "type": "static",
+          "content": "#6b7db3"
+        },
+        "red-500": {
+          "type": "static",
+          "content": "#ff9999"
+        },
+        "red-300": "#b36b6b",
+        "font-size": 45
+      }
+    },
     "styleSetDefinitions": {
       "5ed0d05baa77d97673711820": {
         "id": "5ed0d05baa77d97673711820",
         "name": "primaryButton",
         "type": "reusable-project-style-map",
+        "conditions": [
+          { "type": "screen-size",
+            "meta": {
+              "maxWidth": 991
+            },
+            "content": {
+              "background": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType": "token",
+                  "id": "blue-600"
+                }
+              }
+            } 
+          }
+        ],
         "content": {
-          "background": "blue",
+          "background": {
+            "type": "dynamic",
+            "content": {
+              "referenceType": "token",
+              "id": "blue-500"
+            }
+          },
           "width": "auto",
           "color": "#fff",
           "border": "1px solid #fff"
@@ -310,13 +350,28 @@
                                           { "conditionType": "screen-size", "maxWidth": 991 }
                                         ],
                                         "styles": {
-                                          "flex": "inherit"
+                                          "flex": "inherit",
+                                          "background": "#000",
+                                          "color": {
+                                            "type": "dynamic",
+                                            "content": {
+                                              "referenceType": "token",
+                                              "id": "blue-500"
+                                            }
+                                          }
                                         }
                                       }
                                     }
                                   },
                                   "style": {
-                                    "flex": "1"
+                                    "flex": "1",
+                                    "color": {
+                                      "type": "dynamic",
+                                      "content": {
+                                        "referenceType": "token",
+                                        "id": "blue-500"
+                                      }
+                                    }
                                   },
                                   "children": [{
                                     "type": "element",
diff --git a/packages/teleport-component-generator/src/index.ts b/packages/teleport-component-generator/src/index.ts
index 7f03551d..49266d93 100644
--- a/packages/teleport-component-generator/src/index.ts
+++ b/packages/teleport-component-generator/src/index.ts
@@ -51,8 +51,8 @@ const createComponentGenerator = ({
         throw new Error(schemaValidationResult.errorMsg)
       }
     }
-    const uidl = Parser.parseComponentJSON(cleanedUIDL)
 
+    const uidl = Parser.parseComponentJSON(cleanedUIDL)
     const contentValidationResult = validator.validateComponentContent(uidl)
     if (!contentValidationResult.valid) {
       throw new Error(contentValidationResult.errorMsg)
diff --git a/packages/teleport-plugin-common/src/builders/style-builders.ts b/packages/teleport-plugin-common/src/builders/style-builders.ts
index 54e0f0ef..00bb5608 100644
--- a/packages/teleport-plugin-common/src/builders/style-builders.ts
+++ b/packages/teleport-plugin-common/src/builders/style-builders.ts
@@ -3,36 +3,37 @@ import preset from 'jss-preset-default'
 import * as types from '@babel/types'
 import { UIDLDynamicReference } from '@teleporthq/teleport-types'
 import ParsedASTNode from '../utils/parsed-ast'
+import { StringUtils } from '@teleporthq/teleport-shared'
 
 jss.setup(preset())
 
-export const createCSSClass = (className: string, styleObject: Record<string, string | number>) => {
+export const createCSSClass = (key: string, styleObject: Record<string, string | number>) => {
   return jss
     .createStyleSheet(
       {
-        [`.${className}`]: styleObject,
+        [key]: styleObject,
       },
       {
-        generateId: () => className,
+        generateId: () => key,
       }
     )
     .toString()
 }
 
 export const createCSSClassWithSelector = (
-  className: string,
+  key: string,
   selector: string,
   styleObject: Record<string, string | number>
 ) => {
   return jss
     .createStyleSheet(
       {
-        [`.${className}`]: {
+        [key]: {
           [selector]: styleObject,
         },
       },
       {
-        generateId: () => className,
+        generateId: () => key,
       }
     )
     .toString()
@@ -62,6 +63,8 @@ export const createDynamicStyleExpression = (
       return new ParsedASTNode(
         t.memberExpression(t.identifier(propsPrefix), t.identifier(styleValue.content.id))
       )
+    case 'token':
+      return `var(${StringUtils.generateCSSVariableName(styleValue.content.id)})`
     default:
       throw new Error(
         `createDynamicStyleExpression received unsupported ${JSON.stringify(
diff --git a/packages/teleport-plugin-common/src/utils/style-utils.ts b/packages/teleport-plugin-common/src/utils/style-utils.ts
index ef590868..22ce709f 100644
--- a/packages/teleport-plugin-common/src/utils/style-utils.ts
+++ b/packages/teleport-plugin-common/src/utils/style-utils.ts
@@ -1,4 +1,5 @@
-import { UIDLStyleDefinitions, UIDLStyleValue } from '@teleporthq/teleport-types'
+import { StringUtils } from '@teleporthq/teleport-shared'
+import { UIDLStaticValue, UIDLStyleDefinitions, UIDLStyleValue } from '@teleporthq/teleport-types'
 
 const getContentOfStyleKey = (styleValue: UIDLStyleValue) => {
   if (styleValue.type === 'static') {
@@ -19,3 +20,20 @@ export const getContentOfStyleObject = (styleObject: UIDLStyleDefinitions) => {
     return acc
   }, {})
 }
+
+export const getTokensContentFromTokensObject = (tokens: Record<string, UIDLStaticValue>) => {
+  return Object.keys(tokens || {}).reduce((acc: Record<string, string | number>, key) => {
+    acc[StringUtils.generateCSSVariableName(key)] = tokens[key].content as string
+    return acc
+  }, {})
+}
+
+export const getCSSVariablesContentFromTokenStyles = (styleObject: UIDLStyleDefinitions) => {
+  return Object.keys(styleObject || {}).reduce((acc: Record<string, string>, key) => {
+    const style = styleObject[key]
+    if (style.type === 'dynamic' && style.content.referenceType === 'token') {
+      acc[key] = `var(${StringUtils.generateCSSVariableName(style.content.id)})`
+    }
+    return acc
+  }, {})
+}
diff --git a/packages/teleport-plugin-css-modules/src/index.ts b/packages/teleport-plugin-css-modules/src/index.ts
index 9f9889a5..fd2f56d6 100644
--- a/packages/teleport-plugin-css-modules/src/index.ts
+++ b/packages/teleport-plugin-css-modules/src/index.ts
@@ -81,14 +81,18 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
       const root = astNodesLookup[key]
 
       if (style) {
-        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
-
-        if (Object.keys(staticStyles).length > 0) {
+        const { staticStyles, dynamicStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(
+          style
+        )
+        if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
           cssClasses.push(
             StyleBuilders.createCSSClass(
               className,
               // @ts-ignore
-              StyleUtils.getContentOfStyleObject(staticStyles)
+              {
+                ...StyleUtils.getContentOfStyleObject(staticStyles),
+                ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+              } as Record<string, string | number>
             )
           )
           appendClassName = true
@@ -111,13 +115,13 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
           switch (styleRef.content.mapType) {
             case 'inlined': {
               // We can't set dynamic styles for conditions in css-modules, they need be directly applied in the node.
-              const { staticStyles } = UIDLUtils.splitDynamicAndStaticStyles(
+              const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(
                 styleRef.content.styles
               )
-
-              if (staticStyles && Object.keys(staticStyles).length === 0) {
-                return
-              }
+              const collectedStyles = {
+                ...StyleUtils.getContentOfStyleObject(staticStyles),
+                ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+              } as Record<string, string | number>
 
               const condition = styleRef.content.conditions[0]
               const { conditionType } = condition
@@ -125,7 +129,7 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
                 const { maxWidth } = condition as UIDLStyleMediaQueryScreenSizeCondition
                 mediaStylesMap[maxWidth] = {
                   ...mediaStylesMap[maxWidth],
-                  [className]: StyleUtils.getContentOfStyleObject(staticStyles),
+                  [className]: collectedStyles,
                 }
               }
 
@@ -134,8 +138,7 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
                   StyleBuilders.createCSSClassWithSelector(
                     className,
                     `&:${condition.content}`,
-                    // @ts-ignore
-                    StyleUtils.getContentOfStyleObject(staticStyles)
+                    collectedStyles
                   )
                 )
               }
diff --git a/packages/teleport-plugin-css-modules/src/style-sheet.ts b/packages/teleport-plugin-css-modules/src/style-sheet.ts
index 1d11996f..9e2bf624 100644
--- a/packages/teleport-plugin-css-modules/src/style-sheet.ts
+++ b/packages/teleport-plugin-css-modules/src/style-sheet.ts
@@ -1,4 +1,5 @@
 import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 import {
   ComponentPlugin,
   ComponentPluginFactory,
@@ -17,7 +18,8 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
   }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks } = structure
-    const { styleSetDefinitions } = uidl
+    const { styleSetDefinitions, designLanguage = {} } = uidl
+    const { tokens = {} } = designLanguage
 
     if (!styleSetDefinitions || Object.keys(styleSetDefinitions).length === 0) {
       return
@@ -26,27 +28,46 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
     const cssMap: string[] = []
     const mediaStylesMap: Record<string, Record<string, unknown>> = {}
 
-    Object.values(styleSetDefinitions).forEach((style) => {
-      const { name, content, conditions = [] } = style
+    if (Object.keys(tokens).length > 0) {
       cssMap.push(
-        StyleBuilders.createCSSClass(
-          name,
-          // @ts-ignore
-          StyleUtils.getContentOfStyleObject(content)
+        StyleBuilders.createCSSClassWithSelector(
+          '@global',
+          ':root',
+          StyleUtils.getTokensContentFromTokensObject(tokens)
         )
       )
+    }
+
+    Object.values(styleSetDefinitions).forEach((style) => {
+      const { name, content, conditions = [] } = style
+      const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content)
+
+      const collectedStyles = {
+        ...StyleUtils.getContentOfStyleObject(staticStyles),
+        ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+      } as Record<string, string | number>
+
+      cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles))
 
       if (conditions.length === 0) {
         return
       }
       conditions.forEach((styleRef) => {
+        const {
+          staticStyles: staticValues,
+          tokenStyles: tokenValues,
+        } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content)
+        const collectedMediaStyles = {
+          ...StyleUtils.getContentOfStyleObject(staticValues),
+          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
+        } as Record<string, string | number>
+
         if (styleRef.type === 'element-state') {
           cssMap.push(
             StyleBuilders.createCSSClassWithSelector(
               name,
               `&:${styleRef.meta.state}`,
-              // @ts-ignore
-              StyleUtils.getContentOfStyleObject(styleRef.content)
+              collectedMediaStyles
             )
           )
         }
@@ -54,7 +75,7 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
         if (styleRef.type === 'screen-size') {
           mediaStylesMap[styleRef.meta.maxWidth] = {
             ...mediaStylesMap[styleRef.meta.maxWidth],
-            [name]: StyleUtils.getContentOfStyleObject(styleRef.content),
+            [name]: collectedMediaStyles,
           }
         }
       })
diff --git a/packages/teleport-plugin-css/src/index.ts b/packages/teleport-plugin-css/src/index.ts
index 84b87c233..d7362b92 100644
--- a/packages/teleport-plugin-css/src/index.ts
+++ b/packages/teleport-plugin-css/src/index.ts
@@ -31,7 +31,6 @@ export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config)
     templateChunkName = 'template-chunk',
     componentDecoratorChunkName = 'component-decorator',
     inlineStyleAttributeKey = 'style',
-    // @ts-ignore
     classAttributeName = 'class',
     templateStyle = 'html',
     declareDependency = 'none',
@@ -82,16 +81,16 @@ export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config)
         : elementClassName
 
       if (style) {
-        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
+        const { staticStyles, dynamicStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(
+          style
+        )
+        const collectedStyles = {
+          ...StyleUtils.getContentOfStyleObject(staticStyles),
+          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+        } as Record<string, string | number>
 
         if (Object.keys(staticStyles).length > 0) {
-          jssStylesArray.push(
-            StyleBuilders.createCSSClass(
-              className,
-              // @ts-ignore
-              StyleUtils.getContentOfStyleObject(staticStyles)
-            )
-          )
+          jssStylesArray.push(StyleBuilders.createCSSClass(className, collectedStyles))
 
           appendClassName = true
         }
@@ -130,9 +129,13 @@ export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config)
             case 'inlined': {
               /* We can't set dynamic styles for conditions in css, 
               they need be directly applied in the node. */
-              const { staticStyles } = UIDLUtils.splitDynamicAndStaticStyles(
+              const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(
                 styleRef.content.styles
               )
+              const collectedStyles = {
+                ...StyleUtils.getContentOfStyleObject(staticStyles),
+                ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+              } as Record<string, string | number>
 
               if (staticStyles && Object.keys(staticStyles).length === 0) {
                 return
@@ -145,7 +148,7 @@ export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config)
                   const { maxWidth } = condition as UIDLStyleMediaQueryScreenSizeCondition
                   mediaStylesMap[maxWidth] = {
                     ...mediaStylesMap[maxWidth],
-                    [className]: StyleUtils.getContentOfStyleObject(staticStyles),
+                    [className]: collectedStyles,
                   }
                 }
 
@@ -154,8 +157,7 @@ export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config)
                     StyleBuilders.createCSSClassWithSelector(
                       className,
                       `&:${condition.content}`,
-                      // @ts-ignore
-                      StyleUtils.getContentOfStyleObject(staticStyles)
+                      collectedStyles
                     )
                   )
                 }
diff --git a/packages/teleport-plugin-css/src/style-sheet.ts b/packages/teleport-plugin-css/src/style-sheet.ts
index 39632bb2..261016e7 100644
--- a/packages/teleport-plugin-css/src/style-sheet.ts
+++ b/packages/teleport-plugin-css/src/style-sheet.ts
@@ -1,4 +1,5 @@
 import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 import {
   ComponentPlugin,
   ComponentPluginFactory,
@@ -14,7 +15,8 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
   const { fileName } = config || { fileName: 'style' }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks } = structure
-    const { styleSetDefinitions } = uidl
+    const { styleSetDefinitions, designLanguage = {} } = uidl
+    const { tokens = {} } = designLanguage
 
     if (!styleSetDefinitions || Object.keys(styleSetDefinitions).length === 0) {
       return
@@ -23,27 +25,44 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
     const cssMap: string[] = []
     const mediaStylesMap: Record<string, Record<string, unknown>> = {}
 
-    Object.values(styleSetDefinitions).forEach((style) => {
-      const { name, content, conditions = [] } = style
+    if (Object.keys(tokens).length > 0) {
       cssMap.push(
-        StyleBuilders.createCSSClass(
-          name,
-          // @ts-ignore
-          StyleUtils.getContentOfStyleObject(content)
+        StyleBuilders.createCSSClassWithSelector(
+          '@global',
+          ':root',
+          StyleUtils.getTokensContentFromTokensObject(tokens)
         )
       )
+    }
+
+    Object.values(styleSetDefinitions).forEach((style) => {
+      const { name, content, conditions = [] } = style
+      const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content)
+      const collectedStyles = {
+        ...StyleUtils.getContentOfStyleObject(staticStyles),
+        ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+      } as Record<string, string | number>
+      cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles))
 
       if (conditions.length === 0) {
         return
       }
       conditions.forEach((styleRef) => {
+        const {
+          staticStyles: staticValues,
+          tokenStyles: tokenValues,
+        } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content)
+        const collecedMediaStyles = {
+          ...StyleUtils.getContentOfStyleObject(staticValues),
+          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
+        } as Record<string, string | number>
+
         if (styleRef.type === 'element-state') {
           cssMap.push(
             StyleBuilders.createCSSClassWithSelector(
               name,
               `&:${styleRef.meta.state}`,
-              // @ts-ignore
-              StyleUtils.getContentOfStyleObject(styleRef.content)
+              collecedMediaStyles
             )
           )
         }
@@ -51,7 +70,7 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
         if (styleRef.type === 'screen-size') {
           mediaStylesMap[styleRef.meta.maxWidth] = {
             ...mediaStylesMap[styleRef.meta.maxWidth],
-            [name]: StyleUtils.getContentOfStyleObject(styleRef.content),
+            [name]: collecedMediaStyles,
           }
         }
       })
diff --git a/packages/teleport-plugin-react-jss/src/index.ts b/packages/teleport-plugin-react-jss/src/index.ts
index 3a6de7c7..614bfbb6 100644
--- a/packages/teleport-plugin-react-jss/src/index.ts
+++ b/packages/teleport-plugin-react-jss/src/index.ts
@@ -1,3 +1,4 @@
+import * as types from '@babel/types'
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { ASTUtils, ASTBuilders, ParsedASTNode } from '@teleporthq/teleport-plugin-common'
 import {
@@ -32,7 +33,7 @@ export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config)
     const { projectStyleSet } = options
     const { node } = uidl
 
-    const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
+    const componentChunk = chunks.find((chunkItem) => chunkItem.name === componentChunkName)
     if (!componentChunk) {
       return structure
     }
@@ -42,6 +43,7 @@ export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config)
     const jsxNodesLookup = componentChunk.meta.nodesLookup
     const jssStyleMap: Record<string, unknown> = {}
     let isProjectReferenced: boolean = false
+    let isTokenReferenced = false
 
     UIDLUtils.traverseElements(node, (element) => {
       const { style, key, referencedStyles } = element
@@ -54,7 +56,11 @@ export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config)
       const className = StringUtils.camelCaseToDashCase(key)
       const classNamesToAppend: string[] = []
       if (style && Object.keys(style).length > 0) {
-        jssStyleMap[className] = generatePropSyntax(style)
+        const { transformedStyles, tokensUsed } = generatePropSyntax(style)
+        jssStyleMap[className] = transformedStyles
+        if (tokensUsed) {
+          isTokenReferenced = true
+        }
         appendClassname = true
       }
 
@@ -65,23 +71,34 @@ export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config)
               const { conditions } = styleRef.content
               const [condition] = conditions
 
-              if (!styleRef.content?.styles || Object.keys(styleRef.content.styles).length === 0) {
+              if (Object.keys(styleRef.content.styles || {}).length === 0) {
                 return
               }
 
               if (condition.conditionType === 'screen-size') {
+                const { transformedStyles, tokensUsed } = generatePropSyntax(
+                  styleRef.content.styles
+                )
+                if (tokensUsed) {
+                  isTokenReferenced = true
+                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`@media(max-width: ${condition.maxWidth}px)`]: generatePropSyntax(
-                    styleRef.content.styles
-                  ),
+
+                  [`@media(max-width: ${condition.maxWidth}px)`]: transformedStyles,
                 }
               }
 
               if (condition.conditionType === 'element-state') {
+                const { transformedStyles, tokensUsed } = generatePropSyntax(
+                  styleRef.content.styles
+                )
+                if (tokensUsed) {
+                  isTokenReferenced = true
+                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`&:${condition.content}`]: generatePropSyntax(styleRef.content.styles),
+                  [`&:${condition.content}`]: transformedStyles,
                 }
               }
 
@@ -130,36 +147,47 @@ export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config)
       }
     })
 
-    if (isProjectReferenced) {
-      // Adding dependency from the exported sheet
-      dependencies.useProjectStyles = {
+    const { content: astContent } = componentChunk
+    const parser = new ParsedASTNode(astContent)
+    // @ts-ignore
+    const astNode = parser.ast.declarations[0]
+    const isPropsInjected = astNode.init.params?.some(
+      (prop: types.Identifier) => prop.name === 'props'
+    )
+    if (!isPropsInjected) {
+      astNode.init.params.push(types.identifier('props'))
+    }
+
+    if (isTokenReferenced) {
+      dependencies.TOKENS = {
         type: 'local',
         path: `${projectStyleSet.path}/${projectStyleSet.fileName}`,
         meta: {
           namedImport: true,
         },
       }
+    }
 
-      const chunk = chunks.find((item) => item.name === 'jsx-component')
-      if (!chunk) {
-        throw new Error(`jsx-component chunk is missing, cannot inset useProjectStyles() hook`)
+    if (isProjectReferenced) {
+      dependencies.useProjectStyles = {
+        type: 'local',
+        path: `${projectStyleSet.path}/${projectStyleSet.fileName}`,
+        meta: {
+          namedImport: true,
+        },
       }
-      const { content } = chunk
-      const parser = new ParsedASTNode(content)
       // @ts-ignore
-      const astNode = parser.ast.declarations[0]
       astNode.init.body.body.unshift(createStylesHookDecleration())
     }
 
     if (!Object.keys(jssStyleMap).length) {
-      // if no styles are defined, no need to build the jss style at all
       return structure
     }
 
     dependencies.injectSheet = {
-      type: 'library',
+      type: 'package',
       path: 'react-jss',
-      version: '8.6.1',
+      version: '10.4.0',
     }
 
     chunks.push({
diff --git a/packages/teleport-plugin-react-jss/src/style-sheet.ts b/packages/teleport-plugin-react-jss/src/style-sheet.ts
index afef9867..ba109236 100644
--- a/packages/teleport-plugin-react-jss/src/style-sheet.ts
+++ b/packages/teleport-plugin-react-jss/src/style-sheet.ts
@@ -1,5 +1,5 @@
 import * as t from '@babel/types'
-import { StyleUtils, ASTUtils } from '@teleporthq/teleport-plugin-common'
+import { ASTUtils } from '@teleporthq/teleport-plugin-common'
 import {
   ComponentPlugin,
   ComponentPluginFactory,
@@ -7,6 +7,7 @@ import {
   FileType,
 } from '@teleporthq/teleport-types'
 import { StringUtils } from '@teleporthq/teleport-shared'
+import { generatePropSyntax } from './utils'
 
 interface StyleSheetPlugin {
   fileName?: string
@@ -16,32 +17,46 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
   const { fileName } = config || { fileName: 'style' }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, dependencies } = structure
-    const { styleSetDefinitions } = uidl
+    const { styleSetDefinitions = {}, designLanguage = {} } = uidl
+    const { tokens = {} } = designLanguage
 
-    if (!styleSetDefinitions) {
+    if (!styleSetDefinitions && !tokens) {
       return
     }
 
-    const styleSet: Record<string, unknown> = {}
+    const tokensMap: Record<string, string | number> = Object.keys(tokens || {}).reduce(
+      (acc: Record<string, string | number>, key: string) => {
+        const style = tokens[key]
+        const name: string = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(key))
+        acc[name] = style.content as string
+        return acc
+      },
+      {}
+    )
 
-    if (styleSetDefinitions && Object.keys(styleSetDefinitions)) {
+    const styleSet: Record<string, unknown> = {}
+    if (Object.keys(styleSetDefinitions).length > 0) {
       Object.values(styleSetDefinitions).forEach((style) => {
-        const { conditions = [] } = style
-        let styles = StyleUtils.getContentOfStyleObject(style.content)
+        const { conditions = [], content } = style
+        const { transformedStyles } = generatePropSyntax(content)
+        let styles = {
+          ...transformedStyles,
+        }
 
         if (conditions.length > 0) {
           conditions.forEach((styleRef) => {
             if (Object.keys(styleRef.content).length === 0) {
               return
             }
+            const { transformedStyles: transformedMediaStyles } = generatePropSyntax(
+              styleRef.content
+            )
 
             if (styleRef.type === 'screen-size') {
               styles = {
                 ...styles,
                 ...{
-                  [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: StyleUtils.getContentOfStyleObject(
-                    styleRef.content
-                  ),
+                  [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: transformedMediaStyles,
                 },
               }
             }
@@ -50,9 +65,10 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
               styles = {
                 ...styles,
                 ...{
-                  [`&:${styleRef.meta.state}`]: StyleUtils.getContentOfStyleObject(
-                    styleRef.content
-                  ),
+                  [`&:${styleRef.meta.state}`]: transformedMediaStyles as Record<
+                    string,
+                    string | number
+                  >,
                 },
               }
             }
@@ -67,14 +83,29 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
     uidl.outputOptions.fileName = fileName
 
     dependencies.createUseStyles = {
-      type: 'library',
+      type: 'package',
       path: 'react-jss',
-      version: '8.6.1',
+      version: '10.4.0',
       meta: {
         namedImport: true,
       },
     }
 
+    chunks.push({
+      name: 'tokens-chunk',
+      type: ChunkType.AST,
+      fileType: FileType.JS,
+      content: t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            t.identifier('TOKENS'),
+            ASTUtils.objectToObjectExpression(tokensMap)
+          ),
+        ])
+      ),
+      linkAfter: ['import-local'],
+    })
+
     chunks.push({
       name: fileName,
       type: ChunkType.AST,
@@ -89,7 +120,7 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
           ),
         ])
       ),
-      linkAfter: ['import-local'],
+      linkAfter: ['tokens-chunk'],
     })
 
     return structure
diff --git a/packages/teleport-plugin-react-jss/src/utils.ts b/packages/teleport-plugin-react-jss/src/utils.ts
index 8cbfbe50..6689bd2b 100644
--- a/packages/teleport-plugin-react-jss/src/utils.ts
+++ b/packages/teleport-plugin-react-jss/src/utils.ts
@@ -1,19 +1,35 @@
 import * as t from '@babel/types'
-import { UIDLUtils } from '@teleporthq/teleport-shared'
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { ParsedASTNode, ASTBuilders } from '@teleporthq/teleport-plugin-common'
 import { UIDLStyleValue } from '@teleporthq/teleport-types'
 
 export const generatePropSyntax = (style: Record<string, UIDLStyleValue>) => {
-  return UIDLUtils.transformDynamicStyles(style, (styleValue) => {
-    if (styleValue.content.referenceType === 'prop') {
-      return new ParsedASTNode(
-        ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
-      )
-    }
-    throw new Error(
-      `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
-    )
-  })
+  let tokensUsed = false
+  return {
+    transformedStyles: UIDLUtils.transformDynamicStyles(style, (styleValue) => {
+      switch (styleValue.content.referenceType) {
+        case 'prop':
+          return new ParsedASTNode(
+            ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
+          )
+        case 'token':
+          tokensUsed = true
+          return new ParsedASTNode(
+            t.memberExpression(
+              t.identifier('TOKENS'),
+              t.identifier(
+                StringUtils.capitalize(StringUtils.dashCaseToCamelCase(styleValue.content.id))
+              )
+            )
+          )
+        default:
+          throw new Error(
+            `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+          )
+      }
+    }),
+    tokensUsed,
+  }
 }
 
 export const createStylesHookDecleration = (types = t) => {
diff --git a/packages/teleport-plugin-react-styled-components/src/index.ts b/packages/teleport-plugin-react-styled-components/src/index.ts
index cb8055e1..318307b9 100644
--- a/packages/teleport-plugin-react-styled-components/src/index.ts
+++ b/packages/teleport-plugin-react-styled-components/src/index.ts
@@ -46,6 +46,7 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
     // @ts-ignore
     const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
     const jssStyleMap: Record<string, unknown> = {}
+    let isTokensUsed: boolean = false
 
     UIDLUtils.traverseElements(node, (element) => {
       const { style } = element
@@ -85,20 +86,21 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
                     // @ts-ignore
                     styles: styleRef.content.styles,
                   },
-                  /* We are doing a check at the top to make sure we
-                  are doing this only for inlined styles. Some typescipt error, can be ignored */
                 }
               }
             })
           }
         }
-
-        jssStyleMap[className] = generatePropReferencesSyntax(
+        const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
           style,
           timesReferred,
           root,
           propsPrefix
         )
+        jssStyleMap[className] = transformedStyles
+        if (tokensUsed) {
+          isTokensUsed = true
+        }
       }
 
       if (referencedStyles && Object.keys(referencedStyles)?.length > 0) {
@@ -113,26 +115,34 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
               }
 
               if (condition.conditionType === 'screen-size') {
+                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
+                  styleRef.content.styles,
+                  timesReferred,
+                  root,
+                  propsPrefix
+                )
+                if (tokensUsed) {
+                  isTokensUsed = tokensUsed
+                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`@media(max-width: ${condition.maxWidth}px)`]: generatePropReferencesSyntax(
-                    styleRef.content.styles,
-                    timesReferred,
-                    root,
-                    propsPrefix
-                  ),
+                  [`@media(max-width: ${condition.maxWidth}px)`]: transformedStyles,
                 }
               }
 
               if (condition.conditionType === 'element-state') {
+                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
+                  styleRef.content.styles,
+                  timesReferred,
+                  root,
+                  propsPrefix
+                )
+                if (tokensUsed) {
+                  isTokensUsed = true
+                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`&:${condition.content}`]: generatePropReferencesSyntax(
-                    styleRef.content.styles,
-                    timesReferred,
-                    root,
-                    propsPrefix
-                  ),
+                  [`&:${condition.content}`]: transformedStyles,
                 }
               }
 
@@ -199,8 +209,18 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
       return structure
     }
 
+    if (isTokensUsed) {
+      dependencies.TOKENS = {
+        type: 'local',
+        path: `${projectStyleSet.path}/${projectStyleSet.fileName}`,
+        meta: {
+          namedImport: true,
+        },
+      }
+    }
+
     dependencies.styled = {
-      type: 'library',
+      type: 'package',
       path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
       version: '4.2.0',
     }
diff --git a/packages/teleport-plugin-react-styled-components/src/style-sheet.ts b/packages/teleport-plugin-react-styled-components/src/style-sheet.ts
index 60b99a17..36a6756b 100644
--- a/packages/teleport-plugin-react-styled-components/src/style-sheet.ts
+++ b/packages/teleport-plugin-react-styled-components/src/style-sheet.ts
@@ -1,11 +1,12 @@
-import { StyleUtils } from '@teleporthq/teleport-plugin-common'
+import * as t from '@babel/types'
+import { ASTUtils } from '@teleporthq/teleport-plugin-common'
 import {
   ComponentPlugin,
   ComponentPluginFactory,
   ChunkType,
   FileType,
 } from '@teleporthq/teleport-types'
-import { generateExportablCSSInterpolate } from './utils'
+import { generateExportablCSSInterpolate, generatePropReferencesSyntax } from './utils'
 import { StringUtils } from '@teleporthq/teleport-shared'
 
 interface StyleSheetPlugin {
@@ -18,34 +19,49 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
 
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, dependencies } = structure
-    const { styleSetDefinitions } = uidl
+    const { styleSetDefinitions, designLanguage = {} } = uidl
+    const { tokens = {} } = designLanguage
 
-    if (!styleSetDefinitions) {
+    if (!styleSetDefinitions && !tokens) {
       return
     }
 
-    uidl.outputOptions = uidl.outputOptions || {}
-    uidl.outputOptions.fileName = fileName
+    const tokensMap: Record<string, string | number> = Object.keys(tokens || {}).reduce(
+      (acc: Record<string, string | number>, key: string) => {
+        const style = tokens[key]
+        const name: string = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(key))
+        acc[name] = style.content as string
+        return acc
+      },
+      {}
+    )
 
     Object.values(styleSetDefinitions).forEach((style) => {
       const { name, content, conditions = [] } = style
 
       const className = StringUtils.dashCaseToUpperCamelCase(name)
-      let styles = StyleUtils.getContentOfStyleObject(content)
+      let styles = {}
+      const { transformedStyles } = generatePropReferencesSyntax(content, 0)
+      styles = {
+        ...styles,
+        ...transformedStyles,
+      }
 
       if (conditions.length > 0) {
         conditions.forEach((styleRef) => {
           if (Object.keys(styleRef.content).length === 0) {
             return
           }
+          const { transformedStyles: transformedMediaStyles } = generatePropReferencesSyntax(
+            styleRef.content,
+            0
+          )
 
           if (styleRef.type === 'screen-size') {
             styles = {
               ...styles,
               ...{
-                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: StyleUtils.getContentOfStyleObject(
-                  styleRef.content
-                ),
+                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: transformedMediaStyles,
               },
             }
           }
@@ -54,24 +70,42 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
             styles = {
               ...styles,
               ...{
-                [`&:${styleRef.meta.state}`]: StyleUtils.getContentOfStyleObject(styleRef.content),
+                [`&:${styleRef.meta.state}`]: transformedMediaStyles,
               },
             }
           }
         })
       }
 
+      uidl.outputOptions = uidl.outputOptions || {}
+      uidl.outputOptions.fileName = fileName
+
       chunks.push({
         name: fileName,
         type: ChunkType.AST,
         fileType: FileType.JS,
         content: generateExportablCSSInterpolate(className, styles),
-        linkAfter: ['import-local'],
+        linkAfter: ['tokens-chunk'],
       })
     })
 
+    chunks.push({
+      name: 'tokens-chunk',
+      type: ChunkType.AST,
+      fileType: FileType.JS,
+      content: t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            t.identifier('TOKENS'),
+            ASTUtils.objectToObjectExpression(tokensMap)
+          ),
+        ])
+      ),
+      linkAfter: ['import-local'],
+    })
+
     dependencies.css = {
-      type: 'library',
+      type: 'package',
       path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
       version: '4.2.0',
       meta: {
diff --git a/packages/teleport-plugin-react-styled-components/src/utils.ts b/packages/teleport-plugin-react-styled-components/src/utils.ts
index ddc65db3..07c37b15 100644
--- a/packages/teleport-plugin-react-styled-components/src/utils.ts
+++ b/packages/teleport-plugin-react-styled-components/src/utils.ts
@@ -40,22 +40,15 @@ export const generateExportablCSSInterpolate = (name: string, styles: Record<str
   return t.exportNamedDeclaration(generateCSSInterpolate(name, styles))
 }
 
-const mapStyles = (styles: Record<string, unknown>) => {
-  let style = ''
-  if (styles && Object.keys(styles).length > 0) {
-    Object.keys(styles).forEach((item) => {
-      if (typeof styles[item] === 'string' || typeof styles[item] === 'number') {
-        style = `${style}
-        ${StringUtils.camelCaseToDashCase(item)}: ${styles[item]};`
-      } else {
-        style = `${style}
-        ${item} {
-          ${mapStyles(styles[item] as Record<string, unknown>)}
-        };`
-      }
-    })
-  }
-  return style
+const mapStyles = (styles: Record<string, unknown>): string => {
+  return Object.keys(styles || {}).reduce((acc: string, item) => {
+    const value = styles[item]
+    acc =
+      typeof value === 'string' || typeof value === 'number'
+        ? `${acc} ${StringUtils.camelCaseToDashCase(item)}: ${value}; \n`
+        : `${acc} ${item} {\n ${mapStyles(value as Record<string, unknown>)}};`
+    return acc
+  }, ``)
 }
 
 export const countPropReferences = (
@@ -111,14 +104,15 @@ export const removeUnusedDependencies = (
 export const generatePropReferencesSyntax = (
   style: Record<string, UIDLStyleValue>,
   timesReferred: number,
-  root: t.JSXElement,
-  propsPrefix: unknown
-) =>
-  UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
-    if (styleValue.content.referenceType === 'prop') {
-      const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
-      switch (timesReferred) {
-        case 1:
+  root?: t.JSXElement,
+  propsPrefix?: unknown
+) => {
+  let tokensUsed = false
+  const transformedStyles = UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
+    switch (styleValue.content.referenceType) {
+      case 'prop': {
+        const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
+        if (timesReferred === 1 && root && propsPrefix) {
           ASTUtils.addDynamicAttributeToJSXTag(
             root,
             dashCaseAttribute,
@@ -126,11 +120,24 @@ export const generatePropReferencesSyntax = (
             propsPrefix as string
           )
           return `\$\{props => props.${dashCaseAttribute}\}`
-        default:
-          return `\$\{props => props.${styleValue.content.id}\}`
+        }
+        return `\$\{props => props.${styleValue.content.id}\}`
       }
+      case 'token':
+        tokensUsed = true
+        return `\$\{TOKENS.${StringUtils.capitalize(
+          StringUtils.dashCaseToCamelCase(styleValue.content.id)
+        )}\}`
+      default:
+        throw new Error(
+          `Error running transformDynamicStyles in reactStyledComponentsPlugin. 
+          Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+        )
     }
-    throw new Error(
-      `Error running transformDynamicStyles in reactStyledComponentsPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
-    )
   })
+
+  return {
+    transformedStyles,
+    tokensUsed,
+  }
+}
diff --git a/packages/teleport-plugin-react-styled-jsx/src/index.ts b/packages/teleport-plugin-react-styled-jsx/src/index.ts
index 70537c8a..9e1e6f7e 100644
--- a/packages/teleport-plugin-react-styled-jsx/src/index.ts
+++ b/packages/teleport-plugin-react-styled-jsx/src/index.ts
@@ -29,13 +29,16 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
 
     const transformStyle = (style: Record<string, UIDLStyleValue>) =>
       UIDLUtils.transformDynamicStyles(style, (styleValue) => {
-        if (styleValue.content.referenceType === 'prop') {
-          return `\$\{${propsPrefix}.${styleValue.content.id}\}`
+        switch (styleValue.content.referenceType) {
+          case 'token':
+            return `var(${StringUtils.generateCSSVariableName(styleValue.content.id)})`
+          case 'prop':
+            return `\$\{${propsPrefix}.${styleValue.content.id}\}`
+          default:
+            throw new Error(
+              `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+            )
         }
-
-        throw new Error(
-          `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
-        )
       })
 
     UIDLUtils.traverseElements(node, (element) => {
@@ -75,7 +78,6 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
                   StyleBuilders.createCSSClassWithSelector(
                     className,
                     `&:${conditions[0].content}`,
-                    // @ts-ignore
                     transformStyle(styleRef.content.styles)
                   )
                 )
@@ -131,8 +133,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
           styleJSXString.push(
             StyleBuilders.createCSSClassWithMediaQuery(
               `max-width: ${mediaOffset}px`,
-              // @ts-ignore
-              mediaStylesMap[mediaOffset]
+              mediaStylesMap[mediaOffset] as Record<string, string | number>
             )
           )
         })
diff --git a/packages/teleport-shared/src/utils/string-utils.ts b/packages/teleport-shared/src/utils/string-utils.ts
index 56c413d1..2aed5988 100644
--- a/packages/teleport-shared/src/utils/string-utils.ts
+++ b/packages/teleport-shared/src/utils/string-utils.ts
@@ -67,7 +67,8 @@ export const encode = (str: string) => {
     .join('')
 }
 
-export const generateRandomString = () =>
-  Math.random()
-    .toString(36)
-    .substring(2, 6)
+export const generateRandomString = () => Math.random().toString(36).substring(2, 6)
+
+export const generateCSSVariableName = (name: string): string => {
+  return name.startsWith('--') ? camelCaseToDashCase(name) : camelCaseToDashCase(`--${name}`)
+}
diff --git a/packages/teleport-shared/src/utils/uidl-utils.ts b/packages/teleport-shared/src/utils/uidl-utils.ts
index 2a34d7d9..15443a26 100644
--- a/packages/teleport-shared/src/utils/uidl-utils.ts
+++ b/packages/teleport-shared/src/utils/uidl-utils.ts
@@ -292,19 +292,24 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
 interface SplitResponse {
   staticStyles: UIDLStyleDefinitions
   dynamicStyles: UIDLStyleDefinitions
+  tokenStyles: UIDLStyleDefinitions
 }
 export const splitDynamicAndStaticStyles = (style: UIDLStyleDefinitions): SplitResponse => {
   // const staticStyles: UIDLStyleDefinitions = {}
   // const dynamicStyles: UIDLStyleDefinitions = {}
 
-  const responsePayload: SplitResponse = { staticStyles: {}, dynamicStyles: {} }
+  const responsePayload: SplitResponse = { staticStyles: {}, dynamicStyles: {}, tokenStyles: {} }
 
   Object.keys(style).reduce((acc: SplitResponse, styleKey) => {
     const styleValue = style[styleKey]
-    const { staticStyles, dynamicStyles } = acc
+    const { staticStyles, dynamicStyles, tokenStyles } = acc
 
     switch (styleValue.type) {
       case 'dynamic':
+        if (styleValue.content.referenceType === 'token') {
+          tokenStyles[styleKey] = styleValue
+          return acc
+        }
         dynamicStyles[styleKey] = styleValue
         return acc
       case 'static':
diff --git a/packages/teleport-types/src/uidl.ts b/packages/teleport-types/src/uidl.ts
index f30142ea..3b2c39c3 100755
--- a/packages/teleport-types/src/uidl.ts
+++ b/packages/teleport-types/src/uidl.ts
@@ -19,7 +19,6 @@ export interface UIDLGlobalProjectValues {
   manifest?: WebManifest
   variables?: Record<string, string>
 }
-
 export interface UIDLGlobalAsset {
   type: 'script' | 'style' | 'font' | 'canonical' | 'icon'
   path?: string
@@ -42,9 +41,13 @@ export interface ComponentUIDL {
   peerDefinitions?: Record<string, UIDLPeerDependency>
   stateDefinitions?: Record<string, UIDLStateDefinition>
   outputOptions?: UIDLComponentOutputOptions
+  designLanguage?: {
+    tokens?: UIDLDesignTokens
+  }
   seo?: UIDLComponentSEO
 }
 
+export type UIDLDesignTokens = Record<string, UIDLStaticValue>
 export interface UIDLComponentOutputOptions {
   componentClassName?: string // needs to be a valid class name
   fileName?: string // needs to be a valid file name
@@ -68,14 +71,6 @@ export interface UIDLPropDefinition {
   isRequired?: boolean
 }
 
-export interface UIDLStyleSetDefinition {
-  id: string
-  name: string
-  type: 'reusable-project-style-map'
-  conditions?: UIDLStyleSetConditions[]
-  content: Record<string, UIDLStaticValue>
-}
-
 export interface UIDLStateDefinition {
   type: string
   defaultValue: string | number | boolean | unknown[] | object | (() => void)
@@ -94,7 +89,7 @@ export interface UIDLPageOptions {
   fileName?: string
 }
 
-export type ReferenceType = 'prop' | 'state' | 'local' | 'attr' | 'children'
+export type ReferenceType = 'prop' | 'state' | 'local' | 'attr' | 'children' | 'token'
 
 export interface UIDLDynamicReference {
   type: 'dynamic'
@@ -350,11 +345,27 @@ export interface UIDLStyleStateCondition {
 
 export type UIDLElementStyleStates = 'hover' | 'active' | 'focus' | 'disabled'
 
+export interface UIDLStyleSetDefinition {
+  id: string
+  name: string
+  type: 'reusable-project-style-map'
+  conditions?: UIDLStyleSetConditions[]
+  content: Record<string, UIDLStaticValue | UIDLStyleSetTokenReference>
+}
+
+export interface UIDLStyleSetTokenReference {
+  type: 'dynamic'
+  content: {
+    referenceType: 'token'
+    id: string
+  }
+}
+
 export type UIDLStyleSetConditions = UIDLStyleSetMediaCondition | UIDLStyleSetStateCondition
 
 export interface UIDLStyleSetMediaCondition {
   type: 'screen-size'
-  content: Record<string, UIDLStaticValue>
+  content: Record<string, UIDLStaticValue | UIDLStyleSetTokenReference>
   meta: {
     maxWidth: number
     minWidth?: number
@@ -368,5 +379,5 @@ export interface UIDLStyleSetStateCondition {
   meta: {
     state: UIDLElementStyleStates
   }
-  content: Record<string, UIDLStaticValue>
+  content: Record<string, UIDLStaticValue | UIDLStyleSetTokenReference>
 }
diff --git a/packages/teleport-uidl-validator/src/decoders/component-decoder.ts b/packages/teleport-uidl-validator/src/decoders/component-decoder.ts
index d894da45..7e34b6a5 100644
--- a/packages/teleport-uidl-validator/src/decoders/component-decoder.ts
+++ b/packages/teleport-uidl-validator/src/decoders/component-decoder.ts
@@ -16,6 +16,7 @@ import {
   componentSeoDecoder,
   externaldependencyDecoder,
   peerDependencyDecoder,
+  designTokensDecoder,
 } from './utils'
 
 const componentUIDLValidator: Decoder<VComponentUIDL> = object({
@@ -38,6 +39,11 @@ const rootComponentUIDLValidator: Decoder<VRootComponentUIDL> = object({
   styleSetDefinitions: optional(dict(styleSetDefinitionDecoder)),
   outputOptions: optional(outputOptionsDecoder),
   seo: optional(componentSeoDecoder),
+  designLanguage: optional(
+    object({
+      tokens: optional(designTokensDecoder),
+    })
+  ),
 })
 
 export { rootComponentUIDLValidator }
diff --git a/packages/teleport-uidl-validator/src/decoders/project-decoder.ts b/packages/teleport-uidl-validator/src/decoders/project-decoder.ts
index 7b3541eb..22d2efb3 100644
--- a/packages/teleport-uidl-validator/src/decoders/project-decoder.ts
+++ b/packages/teleport-uidl-validator/src/decoders/project-decoder.ts
@@ -34,7 +34,6 @@ export const globalProjectValuesDecoder: Decoder<UIDLGlobalProjectValues> = obje
 })
 
 const projectUIDLValidator: Decoder<VProjectUIDL> = object({
-  $schema: optional(string()),
   name: string(),
   globals: globalProjectValuesDecoder,
   root: rootComponentUIDLValidator,
diff --git a/packages/teleport-uidl-validator/src/decoders/types.ts b/packages/teleport-uidl-validator/src/decoders/types.ts
index fddd6e8b..ae53ceac 100644
--- a/packages/teleport-uidl-validator/src/decoders/types.ts
+++ b/packages/teleport-uidl-validator/src/decoders/types.ts
@@ -24,6 +24,7 @@ import {
   UIDLStyleSetMediaCondition,
   UIDLStyleSetStateCondition,
 } from '@teleporthq/teleport-types'
+import { UIDLStyleSetTokenReference } from '@teleporthq/teleport-types/src'
 
 type Modify<T, R> = Omit<T, keyof R> & R
 
@@ -93,18 +94,27 @@ export type VUIDLStyleSetDefnition = Modify<
   UIDLStyleSetDefinition,
   {
     conditions?: VUIDLStyleSetConditions[]
-    content: Record<string, UIDLStaticValue | string | number>
+    content: Record<string, UIDLStaticValue | string | number | UIDLStyleSetTokenReference>
   }
 >
 
-type ModifiedComponentUIDL = Modify<
+export type VUIDLDesignTokens = Record<string, UIDLStaticValue | string | number>
+
+export type VRootComponentUIDL = Modify<
   ComponentUIDL,
-  { styleSetDefinitions: Record<string, VUIDLStyleSetDefnition>; node: VUIDLElementNode }
+  {
+    styleSetDefinitions: Record<string, VUIDLStyleSetDefnition>
+    node: VUIDLElementNode
+    designLanguage: {
+      tokens: VUIDLDesignTokens
+    }
+  }
 >
 
-export type VComponentUIDL = Omit<ModifiedComponentUIDL, 'peerDefinitions' | 'styleSetDefinitions'>
-
-export type VRootComponentUIDL = ModifiedComponentUIDL
+export type VComponentUIDL = Omit<
+  VRootComponentUIDL,
+  'peerDefinitions' | 'styleSetDefinitions' | 'designLanguage'
+>
 
 export type VProjectUIDL = Modify<
   ProjectUIDL,
@@ -146,14 +156,14 @@ export type VUIDLURLLinkNode = Modify<
 export type VUIDLStyleSetMediaCondition = Modify<
   UIDLStyleSetMediaCondition,
   {
-    content: Record<string, UIDLStaticValue | string | number>
+    content: Record<string, UIDLStaticValue | string | number | UIDLStyleSetTokenReference>
   }
 >
 
 export type VUIDLStyleSetStateCondition = Modify<
   UIDLStyleSetStateCondition,
   {
-    content: Record<string, UIDLStaticValue | string | number>
+    content: Record<string, UIDLStaticValue | string | number | UIDLStyleSetTokenReference>
   }
 >
 
diff --git a/packages/teleport-uidl-validator/src/decoders/utils.ts b/packages/teleport-uidl-validator/src/decoders/utils.ts
index ac44f8a4..1bd3263b 100644
--- a/packages/teleport-uidl-validator/src/decoders/utils.ts
+++ b/packages/teleport-uidl-validator/src/decoders/utils.ts
@@ -39,6 +39,8 @@ import {
   UIDLExternalDependency,
   UIDLLocalDependency,
   UIDLPeerDependency,
+  UIDLImportReference,
+  UIDLStyleSetTokenReference,
 } from '@teleporthq/teleport-types'
 import {
   VUIDLStyleSetDefnition,
@@ -55,9 +57,9 @@ import {
   VUIDLStyleSetConditions,
   VUIDLStyleSetMediaCondition,
   VUIDLStyleSetStateCondition,
+  VUIDLDesignTokens,
 } from './types'
 import { CustomCombinators } from './custom-combinators'
-import { UIDLImportReference } from '@teleporthq/teleport-types/src'
 
 const {
   isValidComponentName,
@@ -71,7 +73,8 @@ export const referenceTypeDecoder: Decoder<ReferenceType> = union(
   constant('state'),
   constant('local'),
   constant('attr'),
-  constant('children')
+  constant('children'),
+  constant('token')
 )
 
 export const dynamicValueDecoder: Decoder<UIDLDynamicReference> = object({
@@ -95,7 +98,14 @@ export const styleSetMediaConditionDecoder: Decoder<VUIDLStyleSetMediaCondition>
     minHeight: optional(number()),
     minWidth: optional(number()),
   }),
-  content: dict(union(staticValueDecoder, string(), number())),
+  content: dict(
+    union(
+      staticValueDecoder,
+      string(),
+      number(),
+      lazy(() => tokenReferenceDecoder)
+    )
+  ),
 })
 
 export const styleSetStateConditionDecoder: Decoder<VUIDLStyleSetStateCondition> = object({
@@ -103,7 +113,14 @@ export const styleSetStateConditionDecoder: Decoder<VUIDLStyleSetStateCondition>
   meta: object({
     state: lazy(() => elementStateDecoder),
   }),
-  content: dict(union(staticValueDecoder, string(), number())),
+  content: dict(
+    union(
+      staticValueDecoder,
+      string(),
+      number(),
+      lazy(() => tokenReferenceDecoder)
+    )
+  ),
 })
 
 export const projectStyleConditionsDecoder: Decoder<VUIDLStyleSetConditions> = union(
@@ -111,12 +128,20 @@ export const projectStyleConditionsDecoder: Decoder<VUIDLStyleSetConditions> = u
   styleSetStateConditionDecoder
 )
 
+export const tokenReferenceDecoder: Decoder<UIDLStyleSetTokenReference> = object({
+  type: constant('dynamic'),
+  content: object({
+    referenceType: constant('token'),
+    id: string(),
+  }),
+})
+
 export const styleSetDefinitionDecoder: Decoder<VUIDLStyleSetDefnition> = object({
   id: string(),
   name: string(),
   type: constant('reusable-project-style-map'),
   conditions: optional(array(projectStyleConditionsDecoder)),
-  content: dict(union(staticValueDecoder, string(), number())),
+  content: dict(union(staticValueDecoder, string(), number(), tokenReferenceDecoder)),
 })
 
 // TODO: Implement decoder for () => void
@@ -367,6 +392,10 @@ export const elementInlineReferencedStyle: Decoder<VUIDLElementNodeInlineReferen
   }),
 })
 
+export const designTokensDecoder: Decoder<VUIDLDesignTokens> = dict(
+  union(staticValueDecoder, string(), number())
+)
+
 export const elementDecoder: Decoder<VUIDLElement> = object({
   elementType: string(),
   semanticType: optional(string()),
diff --git a/packages/teleport-uidl-validator/src/parser/index.ts b/packages/teleport-uidl-validator/src/parser/index.ts
index 86534311..c84e9164 100644
--- a/packages/teleport-uidl-validator/src/parser/index.ts
+++ b/packages/teleport-uidl-validator/src/parser/index.ts
@@ -11,6 +11,7 @@ import {
   UIDLElementNode,
   UIDLStaticValue,
   UIDLStyleSetConditions,
+  UIDLDesignTokens,
 } from '@teleporthq/teleport-types'
 
 interface ParseComponentJSONParams {
@@ -53,6 +54,7 @@ export const parseProjectJSON = (
 
   if (result.root?.styleSetDefinitions) {
     const { styleSetDefinitions } = root
+
     Object.values(styleSetDefinitions).forEach((styleRef) => {
       const { conditions = [] } = styleRef
       styleRef.content = UIDLUtils.transformStylesAssignmentsToJson(styleRef.content)
@@ -67,6 +69,26 @@ export const parseProjectJSON = (
     })
   }
 
+  if (result.root?.designLanguage) {
+    const { tokens = {} } = result.root.designLanguage
+
+    result.root.designLanguage.tokens = Object.keys(tokens).reduce(
+      (acc: UIDLDesignTokens, tokenId: string) => {
+        const token = tokens[tokenId]
+        if (typeof token === 'string' || typeof token === 'number') {
+          acc[tokenId] = {
+            type: 'static',
+            content: token,
+          }
+        } else {
+          acc[tokenId] = token
+        }
+        return acc
+      },
+      {}
+    )
+  }
+
   if (result.components) {
     result.components = Object.keys(result.components).reduce(
       (parsedComponnets: Record<string, ComponentUIDL>, key) => {
diff --git a/packages/teleport-uidl-validator/src/validator/utils.ts b/packages/teleport-uidl-validator/src/validator/utils.ts
index 264d0dd2..8a43cd3a 100644
--- a/packages/teleport-uidl-validator/src/validator/utils.ts
+++ b/packages/teleport-uidl-validator/src/validator/utils.ts
@@ -9,6 +9,7 @@ import {
   UIDLStaticValue,
   UIDLExternalDependency,
 } from '@teleporthq/teleport-types'
+import { UIDLStyleSetTokenReference } from '@teleporthq/teleport-types/src'
 
 // Prop definitions and state definitions should have different keys
 export const checkForDuplicateDefinitions = (input: ComponentUIDL) => {
@@ -233,20 +234,23 @@ export const checkProjectStyleSet = (input: ProjectUIDL) => {
   return errors
 }
 
-export const checkContentForErrors = (content: Record<string, UIDLStaticValue>) => {
+export const checkContentForErrors = (
+  content: Record<string, UIDLStaticValue | UIDLStyleSetTokenReference>
+) => {
   const errors: string[] = []
   Object.values(content).forEach((styleContent) => {
+    if (styleContent.type === 'dynamic' && styleContent.content.referenceType !== 'token') {
+      errors.push(`Dynamic nodes in styleSetDefinitions supports only tokens`)
+    }
+
     if (
-      styleContent.type !== 'static' &&
-      typeof styleContent !== 'string' &&
-      typeof styleContent !== 'number'
+      styleContent.type === 'static' &&
+      typeof styleContent.content !== 'string' &&
+      typeof styleContent.content !== 'number'
     ) {
-      /* We don't currently support dynamic nodes in project-style sheet
-      Since, these are just used as reference styles on any other nodes.
-       Any logic related to styles should be directly applied on the node. Validators
-       take care of this, but good to cross-check with content too if the they skip Validation */
       errors.push(
-        `Project Style sheet / styleSetDefinitions only support styles with static content, received ${styleContent}`
+        `Project Style sheet / styleSetDefinitions only support styles with static 
+        content and dynamic tokens, received ${styleContent}`
       )
     }
   })


Test patch:
diff --git a/packages/teleport-plugin-css-modules/__tests__/style-sheet.ts b/packages/teleport-plugin-css-modules/__tests__/style-sheet.ts
index 34621c94..2b088fec 100644
--- a/packages/teleport-plugin-css-modules/__tests__/style-sheet.ts
+++ b/packages/teleport-plugin-css-modules/__tests__/style-sheet.ts
@@ -1,4 +1,6 @@
-import { staticNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLStyleSetDefinition, UIDLStyleSetTokenReference } from '@teleporthq/teleport-types'
+import { UIDLDesignTokens } from '@teleporthq/teleport-types/src'
+import { dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import { createStyleSheetPlugin } from '../src/style-sheet'
 import { setupPluginStructure } from './mocks'
 
@@ -6,7 +8,21 @@ describe('plugin-css-modules-style-sheet', () => {
   it('should generate css modules when the styleSetDefinitions are presnet', async () => {
     const plugin = createStyleSheetPlugin()
     const structure = setupPluginStructure()
-    structure.uidl.styleSetDefinitions = {
+    const tokens: UIDLDesignTokens = {
+      'blue-500': {
+        type: 'static',
+        content: '#9999ff',
+      },
+      'blue-600': {
+        type: 'static',
+        content: '#6b7db3',
+      },
+      'red-500': {
+        type: 'static',
+        content: '#ff9999',
+      },
+    }
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
       '5ecfa1233b8e50f60ea2b64d': {
         id: '5ecfa1233b8e50f60ea2b64d',
         name: 'primaryButton',
@@ -34,14 +50,15 @@ describe('plugin-css-modules-style-sheet', () => {
             type: 'screen-size',
             meta: { maxWidth: 991 },
             content: {
-              backgrouns: staticNode('purple'),
+              background: staticNode('purple'),
+              color: dynamicNode('token', 'red-500') as UIDLStyleSetTokenReference,
             },
           },
           {
             type: 'element-state',
             meta: { state: 'hover' },
             content: {
-              background: staticNode('yellow'),
+              background: dynamicNode('token', 'blue-500') as UIDLStyleSetTokenReference,
             },
           },
         ],
@@ -51,16 +68,35 @@ describe('plugin-css-modules-style-sheet', () => {
         },
       },
     }
+    structure.uidl = {
+      ...structure.uidl,
+      styleSetDefinitions,
+      designLanguage: {
+        tokens,
+      },
+    }
 
     const { chunks } = await plugin(structure)
     const cssFile = chunks.find((chunk) => chunk.fileType === 'css')
+    const { content } = cssFile
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('.primaryButton')
-    expect(cssFile.content).toContain('secondaryButton')
-    expect(cssFile.content).toContain('.conditionalButton:hover')
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).not.toContain('5ecfa1233b8e50f60ea2b64b')
+    expect(content).toContain(`:root {
+  --red-500: #ff9999;
+  --blue-500: #9999ff;
+  --blue-600: #6b7db3;
+}
+`)
+    expect(content).toContain(`.conditionalButton:hover {
+  background: var(--blue-500);
+}
+`)
+    expect(content).toContain(`color: var(--red-500)`)
+    expect(content).toContain('.primaryButton')
+    expect(content).toContain('secondaryButton')
+    expect(content).toContain('.conditionalButton:hover')
+    expect(content).toContain('@media(max-width: 991px)')
+    expect(content).not.toContain('5ecfa1233b8e50f60ea2b64b')
   })
 
   it('should not generate file when the styleSetDefinition is empty', async () => {
diff --git a/packages/teleport-plugin-css/__tests__/style-sheet.ts b/packages/teleport-plugin-css/__tests__/style-sheet.ts
index e4902a61..55f1d057 100644
--- a/packages/teleport-plugin-css/__tests__/style-sheet.ts
+++ b/packages/teleport-plugin-css/__tests__/style-sheet.ts
@@ -1,12 +1,31 @@
-import { staticNode } from '@teleporthq/teleport-uidl-builders'
+import {
+  UIDLDesignTokens,
+  UIDLStyleSetDefinition,
+  UIDLStyleSetTokenReference,
+} from '@teleporthq/teleport-types'
+import { staticNode, dynamicNode } from '@teleporthq/teleport-uidl-builders'
 import { createStyleSheetPlugin } from '../src/style-sheet'
 import { setUpStructureWithHASTChunk } from './mocks'
 
-describe('plugin-css-modules-style-sheet', () => {
-  it('should generate css modules when the styleSetDefinitions are presnet', async () => {
+describe('plugin-css-style-sheet', () => {
+  it('should generate css when the styleSetDefinitions are presnet', async () => {
     const plugin = createStyleSheetPlugin()
     const structure = setUpStructureWithHASTChunk()
-    structure.uidl.styleSetDefinitions = {
+    const tokens: UIDLDesignTokens = {
+      'blue-500': {
+        type: 'static',
+        content: '#9999ff',
+      },
+      'blue-600': {
+        type: 'static',
+        content: '#6b7db3',
+      },
+      'red-500': {
+        type: 'static',
+        content: '#ff9999',
+      },
+    }
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
       '5ecfa1233b8e50f60ea2b64d': {
         id: '5ecfa1233b8e50f60ea2b64d',
         name: 'primaryButton',
@@ -34,14 +53,15 @@ describe('plugin-css-modules-style-sheet', () => {
             type: 'screen-size',
             meta: { maxWidth: 991 },
             content: {
-              backgrouns: staticNode('purple'),
+              background: staticNode('purple'),
+              color: dynamicNode('token', 'red-500') as UIDLStyleSetTokenReference,
             },
           },
           {
             type: 'element-state',
             meta: { state: 'hover' },
             content: {
-              background: staticNode('yellow'),
+              background: dynamicNode('token', 'blue-500') as UIDLStyleSetTokenReference,
             },
           },
         ],
@@ -51,16 +71,35 @@ describe('plugin-css-modules-style-sheet', () => {
         },
       },
     }
+    structure.uidl = {
+      ...structure.uidl,
+      styleSetDefinitions,
+      designLanguage: {
+        tokens,
+      },
+    }
 
     const { chunks } = await plugin(structure)
     const cssFile = chunks.find((chunk) => chunk.fileType === 'css')
+    const { content } = cssFile
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('.primaryButton')
-    expect(cssFile.content).toContain('secondaryButton')
-    expect(cssFile.content).toContain('.conditionalButton:hover')
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).not.toContain('5ecfa1233b8e50f60ea2b64b')
+    expect(content).toContain(`:root {
+  --red-500: #ff9999;
+  --blue-500: #9999ff;
+  --blue-600: #6b7db3;
+}
+`)
+    expect(content).toContain(`.conditionalButton:hover {
+  background: var(--blue-500);
+}
+`)
+    expect(content).toContain(`color: var(--red-500)`)
+    expect(content).toContain('.primaryButton')
+    expect(content).toContain('secondaryButton')
+    expect(content).toContain('.conditionalButton:hover')
+    expect(content).toContain('@media(max-width: 991px)')
+    expect(content).not.toContain('5ecfa1233b8e50f60ea2b64b')
   })
 
   it('should not generate file when the styleSetDefinition is empty', async () => {
diff --git a/packages/teleport-plugin-react-jss/__tests__/index.ts b/packages/teleport-plugin-react-jss/__tests__/index.ts
index db77280f..8d1e953d 100644
--- a/packages/teleport-plugin-react-jss/__tests__/index.ts
+++ b/packages/teleport-plugin-react-jss/__tests__/index.ts
@@ -32,7 +32,18 @@ describe('plugin-react-jss', () => {
     type: ChunkType.AST,
     fileType: FileType.JS,
     linkAfter: ['import-local'],
-    content: {},
+    content: {
+      declarations: [
+        {
+          init: {
+            params: [],
+            body: {
+              body: [],
+            },
+          },
+        },
+      ],
+    },
   }
 
   it('generates no chunk if no styles exist', async () => {
@@ -49,11 +60,17 @@ describe('plugin-react-jss', () => {
     expect(chunks.length).toBe(1)
   })
 
-  it('Should add styled as dependency', async () => {
+  it('Should add react-jss as dependency', async () => {
     const style = {
       height: staticNode('100px'),
     }
-    const element = elementNode('container', {}, [], { type: 'package' }, style)
+    const element = elementNode(
+      'container',
+      {},
+      [],
+      { type: 'package' as const, version: '10.4.0', path: 'react-jss' },
+      style
+    )
     element.content.key = 'container'
     const uidlSample = component('JSS', element)
     const structure: ComponentStructure = {
@@ -67,7 +84,7 @@ describe('plugin-react-jss', () => {
     const { injectSheet } = dependencies
 
     expect(Object.keys(dependencies).length).toBeGreaterThan(0)
-    expect(injectSheet.type).toBe('library')
+    expect(injectSheet.type).toBe('package')
     expect(injectSheet.path).toBe('react-jss')
 
     expect(chunks.length).toBe(3)
diff --git a/packages/teleport-plugin-react-jss/__tests__/referenced-styles.ts b/packages/teleport-plugin-react-jss/__tests__/referenced-styles.ts
index ecc821af..ff447016 100644
--- a/packages/teleport-plugin-react-jss/__tests__/referenced-styles.ts
+++ b/packages/teleport-plugin-react-jss/__tests__/referenced-styles.ts
@@ -32,6 +32,7 @@ describe('Referenced Styles on Node', () => {
       declarations: [
         {
           init: {
+            params: [],
             body: {
               body: [],
             },
diff --git a/packages/teleport-plugin-react-jss/__tests__/style-sheet.ts b/packages/teleport-plugin-react-jss/__tests__/style-sheet.ts
index 20f0f43b..4e45444f 100644
--- a/packages/teleport-plugin-react-jss/__tests__/style-sheet.ts
+++ b/packages/teleport-plugin-react-jss/__tests__/style-sheet.ts
@@ -3,11 +3,13 @@ import {
   ChunkType,
   FileType,
   ComponentStructure,
+  UIDLStyleSetDefinition,
+  UIDLDesignTokens,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from '../src'
 import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 
-describe('Style Sheet from styled components', () => {
+describe('Style Sheet from react-jss', () => {
   const componentChunk: ChunkDefinition = {
     name: 'jsx-component',
     meta: {
@@ -34,13 +36,27 @@ describe('Style Sheet from styled components', () => {
   it('Generates a style sheet from the give JSON of styleSet', async () => {
     const plugin = createStyleSheetPlugin()
     const uidl = component('MyComponent', elementNode('container'))
+    const tokens: UIDLDesignTokens = {
+      'blue-500': {
+        type: 'static',
+        content: '#9999ff',
+      },
+      'blue-600': {
+        type: 'static',
+        content: '#6b7db3',
+      },
+      'red-500': {
+        type: 'static',
+        content: '#ff9999',
+      },
+    }
     const structure: ComponentStructure = {
       uidl,
       chunks: [componentChunk],
       options: {},
       dependencies: {},
     }
-    structure.uidl.styleSetDefinitions = {
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
       '5ecfa1233b8e50f60ea2b64d': {
         id: '5ecfa1233b8e50f60ea2b64d',
         name: 'primaryButton',
@@ -86,14 +102,22 @@ describe('Style Sheet from styled components', () => {
       },
     }
 
+    structure.uidl = {
+      ...structure.uidl,
+      styleSetDefinitions,
+      designLanguage: {
+        tokens,
+      },
+    }
+
     const result = await plugin(structure)
     const { chunks, dependencies } = result
 
-    expect(chunks.length).toBe(2)
+    expect(chunks.length).toBe(3)
     expect(dependencies.createUseStyles.path).toBe('react-jss')
   })
 
-  it('Changes the name of output file, with the name that is passed', async () => {
+  it('Changes the name of output file, with the name is passed', async () => {
     const plugin = createStyleSheetPlugin({ fileName: 'index' })
     const uidl = component('MyComponent', elementNode('container'))
     const structure: ComponentStructure = {
@@ -125,6 +149,6 @@ describe('Style Sheet from styled components', () => {
 
     const result = await plugin(structure)
     const { chunks } = result
-    expect(chunks[1].name).toBe('index')
+    expect(chunks[2].name).toBe('index')
   })
 })
diff --git a/packages/teleport-plugin-react-styled-components/__tests__/index.ts b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
index 332c702f..395e068b 100644
--- a/packages/teleport-plugin-react-styled-components/__tests__/index.ts
+++ b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
@@ -60,7 +60,7 @@ describe('Testing the functionality for StyledComponents', () => {
     const { styled } = dependencies
 
     expect(Object.keys(dependencies).length).toBeGreaterThan(0)
-    expect(styled.type).toBe('library')
+    expect(styled.type).toBe('package')
     expect(styled.path).toBe('styled-components')
   })
 
@@ -100,6 +100,7 @@ describe('Testing the functionality for StyledComponents', () => {
         container: {
           type: 'library',
           path: 'react-native',
+          version: '0.0.0',
         },
       },
     }
@@ -111,7 +112,7 @@ describe('Testing the functionality for StyledComponents', () => {
     const { styled } = dependencies
 
     expect(Object.keys(dependencies).length).toBeGreaterThan(0)
-    expect(styled.type).toBe('library')
+    expect(styled.type).toBe('package')
     expect(styled.path).toBe('styled-components/native')
   })
 })
diff --git a/packages/teleport-plugin-react-styled-components/__tests__/style-sheet.ts b/packages/teleport-plugin-react-styled-components/__tests__/style-sheet.ts
index 4452c4d4..ea682833 100644
--- a/packages/teleport-plugin-react-styled-components/__tests__/style-sheet.ts
+++ b/packages/teleport-plugin-react-styled-components/__tests__/style-sheet.ts
@@ -3,6 +3,8 @@ import {
   ChunkType,
   FileType,
   ComponentStructure,
+  UIDLDesignTokens,
+  UIDLStyleSetDefinition,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from '../src'
 import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
@@ -39,7 +41,22 @@ describe('Style Sheet from styled components', () => {
       options: {},
       dependencies: {},
     }
-    structure.uidl.styleSetDefinitions = {
+    const tokens: UIDLDesignTokens = {
+      'blue-500': {
+        type: 'static',
+        content: '#9999ff',
+      },
+      'blue-600': {
+        type: 'static',
+        content: '#6b7db3',
+      },
+      'red-500': {
+        type: 'static',
+        content: '#ff9999',
+      },
+    }
+
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
       '5ecfa1233b8e50f60ea2b64d': {
         id: '5ecfa1233b8e50f60ea2b64d',
         name: 'primaryButton',
@@ -85,6 +102,14 @@ describe('Style Sheet from styled components', () => {
       },
     }
 
+    structure.uidl = {
+      ...structure.uidl,
+      styleSetDefinitions,
+      designLanguage: {
+        tokens,
+      },
+    }
+
     const result = await plugin(structure)
     const { chunks, dependencies } = result
     const styleChunks = chunks.filter((chunk) => chunk.name === 'style')