@new-ui/colors 0.1.0

package/README.md

@@ -0,0 +1 @@
+![](help/dark.png)

package/build-tokens.js

@@ -0,0 +1,34 @@
+const StyleDictionary = require("style-dictionary");
+const args = require("minimist")(process.argv.slice(2));
+const theme = args.theme ? args.theme : "primary";
+
+console.log(`🚧 Compiling tokens with the ${theme.toUpperCase()} theme`);
+
+const getStyleDictionaryConfig = (theme) => {
+  return {
+    log: "warn",
+    source: [
+      "tokens/global/**/*.+(js|json)",
+      `tokens/themes/${theme}/**/*.+(js|json)`,
+    ],
+    platforms: {
+      css: {
+        transformGroup: "css",
+        buildPath: "dist/themes/",
+        files: [
+          {
+            destination: `${theme}.css`,
+            format: "css/variables",
+            "options": {"outputReferences": true}
+          },
+        ],
+      },
+    },
+  };
+};
+
+const StyleDictionaryExtended = StyleDictionary.extend(
+  getStyleDictionaryConfig(theme)
+);
+
+StyleDictionaryExtended.buildAllPlatforms();

package/dist/themes/dark.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 02 Dec 2022 19:43:17 GMT
+ */
+
+:root {
+  --white: hsl(0, 0%, 100%);
+  --black: hsl(0, 0%, 0%);
+  --cold10: hsl(206, 16%, 8%);
+  --cold09: hsl(200, 12%, 15%);
+  --cold08: hsl(207, 10%, 23%);
+  --cold07: hsl(207, 7%, 32%);
+  --cold06: hsl(210, 6%, 44%);
+  --cold05: hsl(216, 7%, 56%);
+  --cold04: hsl(210, 8%, 66%);
+  --cold03: hsl(210, 11%, 78%);
+  --cold02: hsl(213, 15%, 88%);
+  --cold01: hsl(220, 30%, 96%);
+  --warm10: hsl(0, 7%, 8%);
+  --warm09: hsl(0, 3%, 15%);
+  --warm08: hsl(0, 3%, 23%);
+  --warm07: hsl(0, 3%, 33%);
+  --warm06: hsl(0, 2%, 44%);
+  --warm05: hsl(0, 2%, 55%);
+  --warm04: hsl(0, 3%, 67%);
+  --warm03: hsl(10, 5%, 78%);
+  --warm02: hsl(10, 10%, 89%);
+  --warm01: hsl(12, 24%, 96%);
+  --grey10: hsl(0, 0%, 9%);
+  --grey09: hsl(0, 0%, 15%);
+  --grey08: hsl(0, 0%, 22%);
+  --grey07: hsl(0, 0%, 32%);
+  --grey06: hsl(0, 0%, 44%);
+  --grey05: hsl(0, 0%, 55%);
+  --grey04: hsl(0, 0%, 66%);
+  --grey03: hsl(0, 0%, 78%);
+  --grey02: hsl(0, 0%, 88%);
+  --grey01: hsl(0, 0%, 96%);
+  --brown08: hsl(35, 27%, 14%);
+  --brown07: hsl(34, 26%, 26%);
+  --brown06: hsl(33, 26%, 38%);
+  --brown05: hsl(34, 27%, 50%);
+  --brown04: hsl(34, 26%, 54%);
+  --brown03: hsl(34, 26%, 74%);
+  --brown02: hsl(35, 27%, 86%);
+  --brown01: hsl(33, 29%, 94%);
+  --pink08: hsl(349, 69%, 16%);
+  --pink07: hsl(349, 71%, 31%);
+  --pink06: hsl(348, 70%, 45%);
+  --pink05: hsl(349, 100%, 59%);
+  --pink04: hsl(349, 100%, 62%);
+  --pink03: hsl(349, 100%, 78%);
+  --pink02: hsl(349, 100%, 89%);
+  --pink01: hsl(348, 100%, 95%);
+  --purple08: hsl(280, 46%, 17%);
+  --purple07: hsl(279, 46%, 31%);
+  --purple06: hsl(280, 46%, 45%);
+  --purple05: hsl(280, 68%, 60%);
+  --purple04: hsl(280, 68%, 63%);
+  --purple03: hsl(279, 68%, 79%);
+  --purple02: hsl(280, 68%, 89%);
+  --purple01: hsl(279, 68%, 95%);
+  --indigo08: hsl(242, 43%, 16%);
+  --indigo07: hsl(241, 43%, 31%);
+  --indigo06: hsl(241, 43%, 45%);
+  --indigo05: hsl(241, 61%, 59%);
+  --indigo04: hsl(241, 61%, 62%);
+  --indigo03: hsl(241, 61%, 79%);
+  --indigo02: hsl(242, 62%, 89%);
+  --indigo01: hsl(244, 62%, 95%);
+  --blue08: hsl(211, 100%, 14%);
+  --blue07: hsl(211, 100%, 26%);
+  --blue06: hsl(211, 100%, 38%);
+  --blue05: hsl(211, 100%, 50%);
+  --blue04: hsl(211, 100%, 54%);
+  --blue03: hsl(211, 100%, 74%);
+  --blue02: hsl(211, 100%, 86%);
+  --blue01: hsl(211, 100%, 94%);
+  --cyan08: hsl(199, 64%, 15%);
+  --cyan07: hsl(199, 64%, 29%);
+  --cyan06: hsl(199, 64%, 42%);
+  --cyan05: hsl(199, 78%, 55%);
+  --cyan04: hsl(199, 78%, 58%);
+  --cyan03: hsl(199, 78%, 76%);
+  --cyan02: hsl(199, 78%, 87%);
+  --cyan01: hsl(199, 79%, 95%);
+  --teal08: hsl(189, 62%, 13%);
+  --teal07: hsl(189, 61%, 25%);
+  --teal06: hsl(189, 61%, 37%);
+  --teal05: hsl(189, 61%, 48%);
+  --teal04: hsl(189, 57%, 52%);
+  --teal03: hsl(189, 58%, 73%);
+  --teal02: hsl(189, 57%, 85%);
+  --teal01: hsl(190, 56%, 94%);
+  --mint08: hsl(178, 100%, 11%);
+  --mint07: hsl(177, 100%, 20%);
+  --mint06: hsl(178, 100%, 30%);
+  --mint05: hsl(177, 100%, 39%);
+  --mint04: hsl(177, 82%, 44%);
+  --mint03: hsl(177, 64%, 68%);
+  --mint02: hsl(178, 63%, 83%);
+  --mint01: hsl(178, 63%, 93%);
+  --green08: hsl(136, 59%, 14%);
+  --green07: hsl(135, 59%, 26%);
+  --green06: hsl(135, 58%, 37%);
+  --green05: hsl(135, 59%, 49%);
+  --green04: hsl(135, 56%, 53%);
+  --green03: hsl(135, 57%, 74%);
+  --green02: hsl(136, 56%, 86%);
+  --green01: hsl(137, 56%, 94%);
+  --yellow08: hsl(48, 100%, 14%);
+  --yellow07: hsl(48, 100%, 26%);
+  --yellow06: hsl(48, 100%, 38%);
+  --yellow05: hsl(48, 100%, 50%);
+  --yellow04: hsl(48, 100%, 54%);
+  --yellow03: hsl(48, 100%, 74%);
+  --yellow02: hsl(48, 100%, 86%);
+  --yellow01: hsl(48, 100%, 94%);
+  --orange08: hsl(35, 100%, 14%);
+  --orange07: hsl(35, 100%, 26%);
+  --orange06: hsl(35, 100%, 38%);
+  --orange05: hsl(35, 100%, 50%);
+  --orange04: hsl(35, 100%, 54%);
+  --orange03: hsl(35, 100%, 74%);
+  --orange02: hsl(35, 100%, 86%);
+  --orange01: hsl(35, 100%, 94%);
+  --red08: hsl(2, 68%, 7%);
+  --red07: hsl(3, 69%, 16%);
+  --red06: hsl(3, 68%, 31%);
+  --red05: hsl(3, 100%, 59%);
+  --red04: hsl(3, 100%, 63%);
+  --red03: hsl(3, 100%, 79%);
+  --red02: hsl(3, 100%, 89%);
+  --red01: hsl(2, 100%, 95%);
+  --background: var(--grey10);
+}

package/dist/themes/light.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 02 Dec 2022 19:43:03 GMT
+ */
+
+:root {
+  --white: hsl(0, 0%, 100%);
+  --black: hsl(0, 0%, 0%);
+  --cold10: hsl(206, 16%, 8%);
+  --cold09: hsl(200, 12%, 15%);
+  --cold08: hsl(207, 10%, 23%);
+  --cold07: hsl(207, 7%, 32%);
+  --cold06: hsl(210, 6%, 44%);
+  --cold05: hsl(216, 7%, 56%);
+  --cold04: hsl(210, 8%, 66%);
+  --cold03: hsl(210, 11%, 78%);
+  --cold02: hsl(213, 15%, 88%);
+  --cold01: hsl(220, 30%, 96%);
+  --warm10: hsl(0, 7%, 8%);
+  --warm09: hsl(0, 3%, 15%);
+  --warm08: hsl(0, 3%, 23%);
+  --warm07: hsl(0, 3%, 33%);
+  --warm06: hsl(0, 2%, 44%);
+  --warm05: hsl(0, 2%, 55%);
+  --warm04: hsl(0, 3%, 67%);
+  --warm03: hsl(10, 5%, 78%);
+  --warm02: hsl(10, 10%, 89%);
+  --warm01: hsl(12, 24%, 96%);
+  --grey10: hsl(0, 0%, 9%);
+  --grey09: hsl(0, 0%, 15%);
+  --grey08: hsl(0, 0%, 22%);
+  --grey07: hsl(0, 0%, 32%);
+  --grey06: hsl(0, 0%, 44%);
+  --grey05: hsl(0, 0%, 55%);
+  --grey04: hsl(0, 0%, 66%);
+  --grey03: hsl(0, 0%, 78%);
+  --grey02: hsl(0, 0%, 88%);
+  --grey01: hsl(0, 0%, 96%);
+  --brown08: hsl(35, 27%, 14%);
+  --brown07: hsl(34, 26%, 26%);
+  --brown06: hsl(33, 26%, 38%);
+  --brown05: hsl(34, 27%, 50%);
+  --brown04: hsl(34, 26%, 54%);
+  --brown03: hsl(34, 26%, 74%);
+  --brown02: hsl(35, 27%, 86%);
+  --brown01: hsl(33, 29%, 94%);
+  --pink08: hsl(349, 69%, 16%);
+  --pink07: hsl(349, 71%, 31%);
+  --pink06: hsl(348, 70%, 45%);
+  --pink05: hsl(349, 100%, 59%);
+  --pink04: hsl(349, 100%, 62%);
+  --pink03: hsl(349, 100%, 78%);
+  --pink02: hsl(349, 100%, 89%);
+  --pink01: hsl(348, 100%, 95%);
+  --purple08: hsl(280, 46%, 17%);
+  --purple07: hsl(279, 46%, 31%);
+  --purple06: hsl(280, 46%, 45%);
+  --purple05: hsl(280, 68%, 60%);
+  --purple04: hsl(280, 68%, 63%);
+  --purple03: hsl(279, 68%, 79%);
+  --purple02: hsl(280, 68%, 89%);
+  --purple01: hsl(279, 68%, 95%);
+  --indigo08: hsl(242, 43%, 16%);
+  --indigo07: hsl(241, 43%, 31%);
+  --indigo06: hsl(241, 43%, 45%);
+  --indigo05: hsl(241, 61%, 59%);
+  --indigo04: hsl(241, 61%, 62%);
+  --indigo03: hsl(241, 61%, 79%);
+  --indigo02: hsl(242, 62%, 89%);
+  --indigo01: hsl(244, 62%, 95%);
+  --blue08: hsl(211, 100%, 14%);
+  --blue07: hsl(211, 100%, 26%);
+  --blue06: hsl(211, 100%, 38%);
+  --blue05: hsl(211, 100%, 50%);
+  --blue04: hsl(211, 100%, 54%);
+  --blue03: hsl(211, 100%, 74%);
+  --blue02: hsl(211, 100%, 86%);
+  --blue01: hsl(211, 100%, 94%);
+  --cyan08: hsl(199, 64%, 15%);
+  --cyan07: hsl(199, 64%, 29%);
+  --cyan06: hsl(199, 64%, 42%);
+  --cyan05: hsl(199, 78%, 55%);
+  --cyan04: hsl(199, 78%, 58%);
+  --cyan03: hsl(199, 78%, 76%);
+  --cyan02: hsl(199, 78%, 87%);
+  --cyan01: hsl(199, 79%, 95%);
+  --teal08: hsl(189, 62%, 13%);
+  --teal07: hsl(189, 61%, 25%);
+  --teal06: hsl(189, 61%, 37%);
+  --teal05: hsl(189, 61%, 48%);
+  --teal04: hsl(189, 57%, 52%);
+  --teal03: hsl(189, 58%, 73%);
+  --teal02: hsl(189, 57%, 85%);
+  --teal01: hsl(190, 56%, 94%);
+  --mint08: hsl(178, 100%, 11%);
+  --mint07: hsl(177, 100%, 20%);
+  --mint06: hsl(178, 100%, 30%);
+  --mint05: hsl(177, 100%, 39%);
+  --mint04: hsl(177, 82%, 44%);
+  --mint03: hsl(177, 64%, 68%);
+  --mint02: hsl(178, 63%, 83%);
+  --mint01: hsl(178, 63%, 93%);
+  --green08: hsl(136, 59%, 14%);
+  --green07: hsl(135, 59%, 26%);
+  --green06: hsl(135, 58%, 37%);
+  --green05: hsl(135, 59%, 49%);
+  --green04: hsl(135, 56%, 53%);
+  --green03: hsl(135, 57%, 74%);
+  --green02: hsl(136, 56%, 86%);
+  --green01: hsl(137, 56%, 94%);
+  --yellow08: hsl(48, 100%, 14%);
+  --yellow07: hsl(48, 100%, 26%);
+  --yellow06: hsl(48, 100%, 38%);
+  --yellow05: hsl(48, 100%, 50%);
+  --yellow04: hsl(48, 100%, 54%);
+  --yellow03: hsl(48, 100%, 74%);
+  --yellow02: hsl(48, 100%, 86%);
+  --yellow01: hsl(48, 100%, 94%);
+  --orange08: hsl(35, 100%, 14%);
+  --orange07: hsl(35, 100%, 26%);
+  --orange06: hsl(35, 100%, 38%);
+  --orange05: hsl(35, 100%, 50%);
+  --orange04: hsl(35, 100%, 54%);
+  --orange03: hsl(35, 100%, 74%);
+  --orange02: hsl(35, 100%, 86%);
+  --orange01: hsl(35, 100%, 94%);
+  --red08: hsl(2, 68%, 7%);
+  --red07: hsl(3, 69%, 16%);
+  --red06: hsl(3, 68%, 31%);
+  --red05: hsl(3, 100%, 59%);
+  --red04: hsl(3, 100%, 63%);
+  --red03: hsl(3, 100%, 79%);
+  --red02: hsl(3, 100%, 89%);
+  --red01: hsl(2, 100%, 95%);
+  --background: var(--white);
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@new-ui/colors",
+  "version": "0.1.0",
+  "description": "![](help/dark.png)",
+  "main": "index.js",
+  "scripts": {
+    "build:tokens": "node ./build-tokens.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewDesignFile/colors.git"
+  },
+  "keywords": [
+    "colors",
+    "color-palette",
+    "themes",
+    "tokens",
+    "tokens-translation",
+    "design-tokens",
+    "design-system",
+    "color-system"
+  ],
+  "author": "Abhimanyu Rana",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NewDesignFile/colors/issues"
+  },
+  "homepage": "https://github.com/NewDesignFile/colors#readme",
+  "devDependencies": {
+    "style-dictionary": "^3.7.1"
+  }
+}

package/tokens/global/global.json

@@ -0,0 +1,515 @@
+{
+  "$red01": {
+    "value": "hsl(2, 100%, 95%)",
+    "type": "color"
+  },
+  "$red02": {
+    "value": "hsl(3, 100%, 89%)",
+    "type": "color"
+  },
+  "$red03": {
+    "value": "hsl(3, 100%, 79%)",
+    "type": "color"
+  },
+  "$red04": {
+    "value": "hsl(3, 100%, 63%)",
+    "type": "color"
+  },
+  "$red05": {
+    "value": "hsl(3, 100%, 59%)",
+    "type": "color"
+  },
+  "$red06": {
+    "value": "hsl(3, 68%, 31%)",
+    "type": "color"
+  },
+  "$red07": {
+    "value": "hsl(3, 69%, 16%)",
+    "type": "color"
+  },
+  "$red08": {
+    "value": "hsl(2, 68%, 7%)",
+    "type": "color"
+  },
+  "$orange01": {
+    "value": "hsl(35, 100%, 94%)",
+    "type": "color"
+  },
+  "$orange02": {
+    "value": "hsl(35, 100%, 86%)",
+    "type": "color"
+  },
+  "$orange03": {
+    "value": "hsl(35, 100%, 74%)",
+    "type": "color"
+  },
+  "$orange04": {
+    "value": "hsl(35, 100%, 54%)",
+    "type": "color"
+  },
+  "$orange05": {
+    "value": "hsl(35, 100%, 50%)",
+    "type": "color"
+  },
+  "$orange06": {
+    "value": "hsl(35, 100%, 38%)",
+    "type": "color"
+  },
+  "$orange07": {
+    "value": "hsl(35, 100%, 26%)",
+    "type": "color"
+  },
+  "$orange08": {
+    "value": "hsl(35, 100%, 14%)",
+    "type": "color"
+  },
+  "$yellow01": {
+    "value": "hsl(48, 100%, 94%)",
+    "type": "color"
+  },
+  "$yellow02": {
+    "value": "hsl(48, 100%, 86%)",
+    "type": "color"
+  },
+  "$yellow03": {
+    "value": "hsl(48, 100%, 74%)",
+    "type": "color"
+  },
+  "$yellow04": {
+    "value": "hsl(48, 100%, 54%)",
+    "type": "color"
+  },
+  "$yellow05": {
+    "value": "hsl(48, 100%, 50%)",
+    "type": "color"
+  },
+  "$yellow06": {
+    "value": "hsl(48, 100%, 38%)",
+    "type": "color"
+  },
+  "$yellow07": {
+    "value": "hsl(48, 100%, 26%)",
+    "type": "color"
+  },
+  "$yellow08": {
+    "value": "hsl(48, 100%, 14%)",
+    "type": "color"
+  },
+  "$green01": {
+    "value": "hsl(137, 56%, 94%)",
+    "type": "color"
+  },
+  "$green02": {
+    "value": "hsl(136, 56%, 86%)",
+    "type": "color"
+  },
+  "$green03": {
+    "value": "hsl(135, 57%, 74%)",
+    "type": "color"
+  },
+  "$green04": {
+    "value": "hsl(135, 56%, 53%)",
+    "type": "color"
+  },
+  "$green05": {
+    "value": "hsl(135, 59%, 49%)",
+    "type": "color"
+  },
+  "$green06": {
+    "value": "hsl(135, 58%, 37%)",
+    "type": "color"
+  },
+  "$green07": {
+    "value": "hsl(135, 59%, 26%)",
+    "type": "color"
+  },
+  "$green08": {
+    "value": "hsl(136, 59%, 14%)",
+    "type": "color"
+  },
+  "$mint01": {
+    "value": "hsl(178, 63%, 93%)",
+    "type": "color"
+  },
+  "$mint02": {
+    "value": "hsl(178, 63%, 83%)",
+    "type": "color"
+  },
+  "$mint03": {
+    "value": "hsl(177, 64%, 68%)",
+    "type": "color"
+  },
+  "$mint04": {
+    "value": "hsl(177, 82%, 44%)",
+    "type": "color"
+  },
+  "$mint05": {
+    "value": "hsl(177, 100%, 39%)",
+    "type": "color"
+  },
+  "$mint06": {
+    "value": "hsl(178, 100%, 30%)",
+    "type": "color"
+  },
+  "$mint07": {
+    "value": "hsl(177, 100%, 20%)",
+    "type": "color"
+  },
+  "$mint08": {
+    "value": "hsl(178, 100%, 11%)",
+    "type": "color"
+  },
+  "$teal01": {
+    "value": "hsl(190, 56%, 94%)",
+    "type": "color"
+  },
+  "$teal02": {
+    "value": "hsl(189, 57%, 85%)",
+    "type": "color"
+  },
+  "$teal03": {
+    "value": "hsl(189, 58%, 73%)",
+    "type": "color"
+  },
+  "$teal04": {
+    "value": "hsl(189, 57%, 52%)",
+    "type": "color"
+  },
+  "$teal05": {
+    "value": "hsl(189, 61%, 48%)",
+    "type": "color"
+  },
+  "$teal06": {
+    "value": "hsl(189, 61%, 37%)",
+    "type": "color"
+  },
+  "$teal07": {
+    "value": "hsl(189, 61%, 25%)",
+    "type": "color"
+  },
+  "$teal08": {
+    "value": "hsl(189, 62%, 13%)",
+    "type": "color"
+  },
+  "$cyan01": {
+    "value": "hsl(199, 79%, 95%)",
+    "type": "color"
+  },
+  "$cyan02": {
+    "value": "hsl(199, 78%, 87%)",
+    "type": "color"
+  },
+  "$cyan03": {
+    "value": "hsl(199, 78%, 76%)",
+    "type": "color"
+  },
+  "$cyan04": {
+    "value": "hsl(199, 78%, 58%)",
+    "type": "color"
+  },
+  "$cyan05": {
+    "value": "hsl(199, 78%, 55%)",
+    "type": "color"
+  },
+  "$cyan06": {
+    "value": "hsl(199, 64%, 42%)",
+    "type": "color"
+  },
+  "$cyan07": {
+    "value": "hsl(199, 64%, 29%)",
+    "type": "color"
+  },
+  "$cyan08": {
+    "value": "hsl(199, 64%, 15%)",
+    "type": "color"
+  },
+  "$blue01": {
+    "value": "hsl(211, 100%, 94%)",
+    "type": "color"
+  },
+  "$blue02": {
+    "value": "hsl(211, 100%, 86%)",
+    "type": "color"
+  },
+  "$blue03": {
+    "value": "hsl(211, 100%, 74%)",
+    "type": "color"
+  },
+  "$blue04": {
+    "value": "hsl(211, 100%, 54%)",
+    "type": "color"
+  },
+  "$blue05": {
+    "value": "hsl(211, 100%, 50%)",
+    "type": "color"
+  },
+  "$blue06": {
+    "value": "hsl(211, 100%, 38%)",
+    "type": "color"
+  },
+  "$blue07": {
+    "value": "hsl(211, 100%, 26%)",
+    "type": "color"
+  },
+  "$blue08": {
+    "value": "hsl(211, 100%, 14%)",
+    "type": "color"
+  },
+  "$indigo01": {
+    "value": "hsl(244, 62%, 95%)",
+    "type": "color"
+  },
+  "$indigo02": {
+    "value": "hsl(242, 62%, 89%)",
+    "type": "color"
+  },
+  "$indigo03": {
+    "value": "hsl(241, 61%, 79%)",
+    "type": "color"
+  },
+  "$indigo04": {
+    "value": "hsl(241, 61%, 62%)",
+    "type": "color"
+  },
+  "$indigo05": {
+    "value": "hsl(241, 61%, 59%)",
+    "type": "color"
+  },
+  "$indigo06": {
+    "value": "hsl(241, 43%, 45%)",
+    "type": "color"
+  },
+  "$indigo07": {
+    "value": "hsl(241, 43%, 31%)",
+    "type": "color"
+  },
+  "$indigo08": {
+    "value": "hsl(242, 43%, 16%)",
+    "type": "color"
+  },
+  "$purple01": {
+    "value": "hsl(279, 68%, 95%)",
+    "type": "color"
+  },
+  "$purple02": {
+    "value": "hsl(280, 68%, 89%)",
+    "type": "color"
+  },
+  "$purple03": {
+    "value": "hsl(279, 68%, 79%)",
+    "type": "color"
+  },
+  "$purple04": {
+    "value": "hsl(280, 68%, 63%)",
+    "type": "color"
+  },
+  "$purple05": {
+    "value": "hsl(280, 68%, 60%)",
+    "type": "color"
+  },
+  "$purple06": {
+    "value": "hsl(280, 46%, 45%)",
+    "type": "color"
+  },
+  "$purple07": {
+    "value": "hsl(279, 46%, 31%)",
+    "type": "color"
+  },
+  "$purple08": {
+    "value": "hsl(280, 46%, 17%)",
+    "type": "color"
+  },
+  "$pink01": {
+    "value": "hsl(348, 100%, 95%)",
+    "type": "color"
+  },
+  "$pink02": {
+    "value": "hsl(349, 100%, 89%)",
+    "type": "color"
+  },
+  "$pink03": {
+    "value": "hsl(349, 100%, 78%)",
+    "type": "color"
+  },
+  "$pink04": {
+    "value": "hsl(349, 100%, 62%)",
+    "type": "color"
+  },
+  "$pink05": {
+    "value": "hsl(349, 100%, 59%)",
+    "type": "color"
+  },
+  "$pink06": {
+    "value": "hsl(348, 70%, 45%)",
+    "type": "color"
+  },
+  "$pink07": {
+    "value": "hsl(349, 71%, 31%)",
+    "type": "color"
+  },
+  "$pink08": {
+    "value": "hsl(349, 69%, 16%)",
+    "type": "color"
+  },
+  "$brown01": {
+    "value": "hsl(33, 29%, 94%)",
+    "type": "color"
+  },
+  "$brown02": {
+    "value": "hsl(35, 27%, 86%)",
+    "type": "color"
+  },
+  "$brown03": {
+    "value": "hsl(34, 26%, 74%)",
+    "type": "color"
+  },
+  "$brown04": {
+    "value": "hsl(34, 26%, 54%)",
+    "type": "color"
+  },
+  "$brown05": {
+    "value": "hsl(34, 27%, 50%)",
+    "type": "color"
+  },
+  "$brown06": {
+    "value": "hsl(33, 26%, 38%)",
+    "type": "color"
+  },
+  "$brown07": {
+    "value": "hsl(34, 26%, 26%)",
+    "type": "color"
+  },
+  "$brown08": {
+    "value": "hsl(35, 27%, 14%)",
+    "type": "color"
+  },
+  "$grey01": {
+    "value": "hsl(0, 0%, 96%)",
+    "type": "color"
+  },
+  "$grey02": {
+    "value": "hsl(0, 0%, 88%)",
+    "type": "color"
+  },
+  "$grey03": {
+    "value": "hsl(0, 0%, 78%)",
+    "type": "color"
+  },
+  "$grey04": {
+    "value": "hsl(0, 0%, 66%)",
+    "type": "color"
+  },
+  "$grey05": {
+    "value": "hsl(0, 0%, 55%)",
+    "type": "color"
+  },
+  "$grey06": {
+    "value": "hsl(0, 0%, 44%)",
+    "type": "color"
+  },
+  "$grey07": {
+    "value": "hsl(0, 0%, 32%)",
+    "type": "color"
+  },
+  "$grey08": {
+    "value": "hsl(0, 0%, 22%)",
+    "type": "color"
+  },
+  "$grey09": {
+    "value": "hsl(0, 0%, 15%)",
+    "type": "color"
+  },
+  "$grey10": {
+    "value": "hsl(0, 0%, 9%)",
+    "type": "color"
+  },
+  "$warm01": {
+    "value": "hsl(12, 24%, 96%)",
+    "type": "color"
+  },
+  "$warm02": {
+    "value": "hsl(10, 10%, 89%)",
+    "type": "color"
+  },
+  "$warm03": {
+    "value": "hsl(10, 5%, 78%)",
+    "type": "color"
+  },
+  "$warm04": {
+    "value": "hsl(0, 3%, 67%)",
+    "type": "color"
+  },
+  "$warm05": {
+    "value": "hsl(0, 2%, 55%)",
+    "type": "color"
+  },
+  "$warm06": {
+    "value": "hsl(0, 2%, 44%)",
+    "type": "color"
+  },
+  "$warm07": {
+    "value": "hsl(0, 3%, 33%)",
+    "type": "color"
+  },
+  "$warm08": {
+    "value": "hsl(0, 3%, 23%)",
+    "type": "color"
+  },
+  "$warm09": {
+    "value": "hsl(0, 3%, 15%)",
+    "type": "color"
+  },
+  "$warm10": {
+    "value": "hsl(0, 7%, 8%)",
+    "type": "color"
+  },
+  "$cold01": {
+    "value": "hsl(220, 30%, 96%)",
+    "type": "color"
+  },
+  "$cold02": {
+    "value": "hsl(213, 15%, 88%)",
+    "type": "color"
+  },
+  "$cold03": {
+    "value": "hsl(210, 11%, 78%)",
+    "type": "color"
+  },
+  "$cold04": {
+    "value": "hsl(210, 8%, 66%)",
+    "type": "color"
+  },
+  "$cold05": {
+    "value": "hsl(216, 7%, 56%)",
+    "type": "color"
+  },
+  "$cold06": {
+    "value": "hsl(210, 6%, 44%)",
+    "type": "color"
+  },
+  "$cold07": {
+    "value": "hsl(207, 7%, 32%)",
+    "type": "color"
+  },
+  "$cold08": {
+    "value": "hsl(207, 10%, 23%)",
+    "type": "color"
+  },
+  "$cold09": {
+    "value": "hsl(200, 12%, 15%)",
+    "type": "color"
+  },
+  "$cold10": {
+    "value": "hsl(206, 16%, 8%)",
+    "type": "color"
+  },
+  "$black": {
+    "value": "hsl(0, 0%, 0%)",
+    "type": "color"
+  },
+  "$white": {
+    "value": "hsl(0, 0%, 100%)",
+    "type": "color"
+  }
+}
+

package/tokens/themes/dark/dark.json

@@ -0,0 +1,6 @@
+{
+  "$background": {
+    "value": "{$grey10}",
+    "type": "color"
+  }
+}

package/tokens/themes/light/light.json

@@ -0,0 +1,6 @@
+{
+  "$background": {
+    "value": "{$white}",
+    "type": "color"
+  }
+}