fix: add flattened vars json

Author: renrizzolo

system/config.js

@@ -63,5 +63,29 @@ module.exports = {
         },
       ],
     },
+
+    /**
+     * can be used via postcss-simple-variables plugin, in order to not have to import the css itself
+     * ```
+     * const tokens = require('adslot-ui/system/internal/variables.json');
+     * 
+     * require('postcss-simple-vars')({
+        variables: tokens
+       })
+     * ```
+     */
+    postcssVariablesJSON: {
+      buildPath: `internal/`,
+      transformGroup: 'web',
+      files: [
+        {
+          destination: `variables.json`,
+          format: 'json/flat',
+          options: {
+            outputReferences: false,
+          },
+        },
+      ],
+    },
   },
 };

system/internal/variables.json

@@ -0,0 +1,117 @@
+{
+  "border-radius-base": "2px",
+  "border-radius-large": "5px",
+  "border-radius-round": "999px",
+  "color-border-base": "#dae2e6",
+  "color-border-strong": "#1c1d1f",
+  "color-white": "#ffffff",
+  "color-black": "#000000",
+  "color-grey-100": "#f4f5f7",
+  "color-grey-200": "#e5eaed",
+  "color-grey-300": "#dae2e6",
+  "color-grey-400": "#d5d8da",
+  "color-grey-500": "#aaafb3",
+  "color-grey-600": "#757982",
+  "color-grey-700": "#505359",
+  "color-grey-800": "#1c1d1f",
+  "color-blue-100": "#eaf5ff",
+  "color-blue-200": "#d7ecff",
+  "color-blue-300": "#85c6ff",
+  "color-blue-400": "#1f97ff",
+  "color-blue-500": "#006dcc",
+  "color-blue-600": "#1950a3",
+  "color-blue-700": "#004480",
+  "color-blue-800": "#01396a",
+  "color-green-200": "#e9f5e9",
+  "color-green-300": "#b0dcb0",
+  "color-green-400": "#77c377",
+  "color-green-500": "#5bb75b",
+  "color-green-600": "#31a549",
+  "color-green-700": "#3c893c",
+  "color-green-800": "#2b622b",
+  "color-red-200": "#fce8e8",
+  "color-red-300": "#efb1af",
+  "color-red-400": "#e1706b",
+  "color-red-500": "#da4f49",
+  "color-red-600": "#d5382e",
+  "color-red-700": "#b22a24",
+  "color-red-800": "#551411",
+  "color-orange-200": "#ffeed6",
+  "color-orange-300": "#fddaa9",
+  "color-orange-400": "#fbb85a",
+  "color-orange-500": "#faa732",
+  "color-orange-600": "#f8951d",
+  "color-orange-700": "#da8205",
+  "color-orange-800": "#844f01",
+  "color-cyan-200": "#e8f8fd",
+  "color-cyan-300": "#c9e7f0",
+  "color-cyan-400": "#89cbdf",
+  "color-cyan-500": "#49afcd",
+  "color-cyan-600": "#0492ba",
+  "color-cyan-700": "#136480",
+  "color-cyan-800": "#0c3e4f",
+  "color-purple-200": "#f4ebfd",
+  "color-purple-300": "#d8c6ee",
+  "color-purple-400": "#ad87db",
+  "color-purple-500": "#9768d1",
+  "color-purple-600": "#793dc4",
+  "color-purple-700": "#582a91",
+  "color-purple-800": "#35175a",
+  "color-teal-200": "#ddfffc",
+  "color-teal-300": "#abebe5",
+  "color-teal-400": "#48dbcc",
+  "color-teal-500": "#00b8a5",
+  "color-teal-600": "#008577",
+  "color-teal-700": "#006c60",
+  "color-teal-800": "#00342e",
+  "color-yellow-200": "#fff3cc",
+  "color-yellow-300": "#f6e097",
+  "color-yellow-400": "#f2d471",
+  "color-yellow-500": "#efc94c",
+  "color-yellow-600": "#eab919",
+  "color-yellow-700": "#ba9311",
+  "color-yellow-800": "#7c6109",
+  "color-text-base": "#1c1d1f",
+  "color-text-soft": "#505359",
+  "color-text-label": "#505359",
+  "color-text-disabled": "#757982",
+  "color-text-placeholder": "#757982",
+  "color-text-description": "#757982",
+  "color-text-inverse": "#ffffff",
+  "color-default-soft": "#e5eaed",
+  "color-default-accent": "#dae2e6",
+  "color-default-base": "#aaafb3",
+  "color-default-strong": "#1c1d1f",
+  "color-primary-soft": "#d7ecff",
+  "color-primary-accent": "#85c6ff",
+  "color-primary-base": "#006dcc",
+  "color-primary-strong": "#1950a3",
+  "color-success-soft": "#e9f5e9",
+  "color-success-accent": "#b0dcb0",
+  "color-success-base": "#5bb75b",
+  "color-success-strong": "#31a549",
+  "color-danger-soft": "#fce8e8",
+  "color-danger-accent": "#efb1af",
+  "color-danger-base": "#da4f49",
+  "color-danger-strong": "#d5382e",
+  "color-warning-soft": "#ffeed6",
+  "color-warning-accent": "#fddaa9",
+  "color-warning-base": "#faa732",
+  "color-warning-strong": "#f8951d",
+  "color-info-soft": "#e8f8fd",
+  "color-info-accent": "#c9e7f0",
+  "color-info-base": "#49afcd",
+  "color-info-strong": "#0492ba",
+  "color-secondary-soft": "#ddfffc",
+  "color-secondary-accent": "#abebe5",
+  "color-secondary-base": "#00b8a5",
+  "color-secondary-strong": "#008577",
+  "font-size-xlarge": "24px",
+  "font-size-large": "18px",
+  "font-size-medium": "15px",
+  "font-size-base": "12px",
+  "font-size-small": "11px",
+  "font-size-xsmall": "9px",
+  "font-weight-normal": 400,
+  "font-weight-bold": 700
+}

system/package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "scripts": {
     "system:dist": "rimraf tokens/* internal/* && style-dictionary build && npm run system:format",
-    "system:format": "prettier \"internal/index.js\" \"tokens/**.json\" --write",
+    "system:format": "prettier \"internal/**.{js,json}\" \"tokens/**.json\" --write",
     "convert": "node ./scripts/convertXdCssVars.mjs"
   },
   "sideEffects": false