@vector-im/compound-design-tokens 0.0.2

package/assets/web/js/cpdLightHc.js

@@ -0,0 +1,233 @@
+export const cpdSpaceScale = "4px";
+export const cpdSpace0X = "0px";
+export const cpdSpace0_5X = "2px";
+export const cpdSpace1X = "4px";
+export const cpdSpace1_5X = "6px";
+export const cpdSpace2X = "8px";
+export const cpdSpace3X = "12px";
+export const cpdSpace4X = "16px";
+export const cpdSpace5X = "20px";
+export const cpdSpace6X = "24px";
+export const cpdSpace7X = "28px";
+export const cpdSpace8X = "32px";
+export const cpdSpace9X = "36px";
+export const cpdSpace10X = "40px";
+export const cpdSpace11X = "44px";
+export const cpdSpace12X = "48px";
+export const cpdSpace13X = "52px";
+export const cpdSpace14X = "56px";
+export const cpdSpace15X = "60px";
+export const cpdSpace16X = "64px";
+export const cpdSpace20X = "80px";
+export const cpdSpace24X = "96px";
+export const cpdSpace28X = "112px";
+export const cpdSpace32X = "128px";
+export const cpdSpace36X = "144px";
+export const cpdSpace40X = "160px";
+export const cpdSpace48X = "192px";
+export const cpdSpace56X = "224px";
+export const cpdSpace64X = "256px";
+export const cpdBorderWidth1 = "1px";
+export const cpdBorderWidth2 = "2px";
+export const cpdBorderWidth4 = "4px";
+export const cpdBorderWidth0_5 = "0.5px";
+export const cpdFontFamilySans = "Inter";
+export const cpdFontFamilyMono = "Inconsolata";
+export const cpdFontWeightRegular = "400";
+export const cpdFontWeightMedium = "500";
+export const cpdFontWeightSemibold = "600";
+export const cpdFontWeightBold = "700";
+export const cpdFontLineHeightMinimum = "1";
+export const cpdFontLineHeightTight = "1.25";
+export const cpdFontLineHeightRegular = "1.5";
+export const cpdFontSizeBodyXs = "0.6875rem";
+export const cpdFontSizeBodySm = "0.8125rem";
+export const cpdFontSizeBodyMd = "0.9375rem";
+export const cpdFontSizeBodyLg = "1.0625rem";
+export const cpdFontSizeHeadingSm = "1.25rem";
+export const cpdFontSizeHeadingMd = "1.5rem";
+export const cpdFontSizeHeadingLg = "1.75rem";
+export const cpdFontSizeHeadingXl = "2rem";
+export const cpdFontLetterSpacingBodyXs = "0.0048em";
+export const cpdFontLetterSpacingBodySm = "-0.0031em";
+export const cpdFontLetterSpacingBodyMd = "-0.0088em";
+export const cpdFontLetterSpacingBodyLg = "-0.0128em";
+export const cpdFontLetterSpacingHeadingSm = "-0.0166em";
+export const cpdFontLetterSpacingHeadingMd = "-0.0195em";
+export const cpdFontLetterSpacingHeadingLg = "-0.0209em";
+export const cpdFontLetterSpacingHeadingXl = "-0.0216em";
+export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter";
+export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter";
+export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter";
+export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter";
+export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter";
+export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter";
+export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter";
+export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter";
+export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter";
+export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter";
+export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter";
+export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter";
+export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter";
+export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter";
+export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter";
+export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter";
+export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter";
+export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter";
+export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter";
+export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter";
+export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter";
+export const cpdColorGray100 = "#081725";
+export const cpdColorGray200 = "#0c1b29";
+export const cpdColorGray300 = "#11202f";
+export const cpdColorGray400 = "#1a2939";
+export const cpdColorGray500 = "#263646";
+export const cpdColorGray600 = "#304051";
+export const cpdColorGray700 = "#3f5062";
+export const cpdColorGray800 = "#5b6d7f";
+export const cpdColorGray900 = "#79899b";
+export const cpdColorGray1000 = "#8c9aaa";
+export const cpdColorGray1100 = "#9fabb8";
+export const cpdColorGray1200 = "#bbc3cd";
+export const cpdColorGray1300 = "#d9dde3";
+export const cpdColorGray1400 = "#ebedf0";
+export const cpdColorRed100 = "#370000";
+export const cpdColorRed200 = "#3b0000";
+export const cpdColorRed300 = "#470000";
+export const cpdColorRed400 = "#570000";
+export const cpdColorRed500 = "#710000";
+export const cpdColorRed600 = "#830009";
+export const cpdColorRed700 = "#9e0c1e";
+export const cpdColorRed800 = "#d0212a";
+export const cpdColorRed900 = "#fd3d3c";
+export const cpdColorRed1000 = "#ff665d";
+export const cpdColorRed1100 = "#ff877b";
+export const cpdColorRed1200 = "#ffaea4";
+export const cpdColorRed1300 = "#ffd3cd";
+export const cpdColorRed1400 = "#ffe8e5";
+export const cpdColorOrange100 = "#380000";
+export const cpdColorOrange200 = "#3c0000";
+export const cpdColorOrange300 = "#470000";
+export const cpdColorOrange400 = "#580000";
+export const cpdColorOrange500 = "#710000";
+export const cpdColorOrange600 = "#820300";
+export const cpdColorOrange700 = "#972105";
+export const cpdColorOrange800 = "#b94607";
+export const cpdColorOrange900 = "#d9670d";
+export const cpdColorOrange1000 = "#ea7a12";
+export const cpdColorOrange1100 = "#f6913d";
+export const cpdColorOrange1200 = "#fbb27e";
+export const cpdColorOrange1300 = "#ffd5b8";
+export const cpdColorOrange1400 = "#ffe9db";
+export const cpdColorYellow100 = "#360000";
+export const cpdColorYellow200 = "#3a0300";
+export const cpdColorYellow300 = "#410900";
+export const cpdColorYellow400 = "#4c1400";
+export const cpdColorYellow500 = "#5b2300";
+export const cpdColorYellow600 = "#682e03";
+export const cpdColorYellow700 = "#7b3e03";
+export const cpdColorYellow800 = "#9d5b00";
+export const cpdColorYellow900 = "#bb7a00";
+export const cpdColorYellow1000 = "#cc8c00";
+export const cpdColorYellow1100 = "#db9f00";
+export const cpdColorYellow1200 = "#efbb0b";
+export const cpdColorYellow1300 = "#fedb52";
+export const cpdColorYellow1400 = "#ffedb0";
+export const cpdColorLime100 = "#001b00";
+export const cpdColorLime200 = "#001e00";
+export const cpdColorLime300 = "#002500";
+export const cpdColorLime400 = "#002f00";
+export const cpdColorLime500 = "#003e00";
+export const cpdColorLime600 = "#004a00";
+export const cpdColorLime700 = "#005c00";
+export const cpdColorLime800 = "#1d7c13";
+export const cpdColorLime900 = "#389b20";
+export const cpdColorLime1000 = "#47ad26";
+export const cpdColorLime1100 = "#56c02c";
+export const cpdColorLime1200 = "#76d94d";
+export const cpdColorLime1300 = "#b6eba3";
+export const cpdColorLime1400 = "#daf6d0";
+export const cpdColorGreen100 = "#001c0b";
+export const cpdColorGreen200 = "#001f0e";
+export const cpdColorGreen300 = "#002513";
+export const cpdColorGreen400 = "#002e1b";
+export const cpdColorGreen500 = "#003d29";
+export const cpdColorGreen600 = "#004832";
+export const cpdColorGreen700 = "#005a43";
+export const cpdColorGreen800 = "#007961";
+export const cpdColorGreen900 = "#129978";
+export const cpdColorGreen1000 = "#17ac84";
+export const cpdColorGreen1100 = "#1fc090";
+export const cpdColorGreen1200 = "#70d5ad";
+export const cpdColorGreen1300 = "#b5e8d1";
+export const cpdColorGreen1400 = "#d9f3e7";
+export const cpdColorCyan100 = "#001144";
+export const cpdColorCyan200 = "#001448";
+export const cpdColorCyan300 = "#001b4e";
+export const cpdColorCyan400 = "#002559";
+export const cpdColorCyan500 = "#003468";
+export const cpdColorCyan600 = "#003f74";
+export const cpdColorCyan700 = "#005188";
+export const cpdColorCyan800 = "#0271aa";
+export const cpdColorCyan900 = "#0093be";
+export const cpdColorCyan1000 = "#01a6c6";
+export const cpdColorCyan1100 = "#21bacd";
+export const cpdColorCyan1200 = "#76d0db";
+export const cpdColorCyan1300 = "#b8e5eb";
+export const cpdColorCyan1400 = "#d9f2f5";
+export const cpdColorBlue100 = "#00055a";
+export const cpdColorBlue200 = "#00095d";
+export const cpdColorBlue300 = "#001063";
+export const cpdColorBlue400 = "#001d6e";
+export const cpdColorBlue500 = "#062d80";
+export const cpdColorBlue600 = "#083890";
+export const cpdColorBlue700 = "#0b48ab";
+export const cpdColorBlue800 = "#0e67d8";
+export const cpdColorBlue900 = "#4187eb";
+export const cpdColorBlue1000 = "#5e99f0";
+export const cpdColorBlue1100 = "#7aabf4";
+export const cpdColorBlue1200 = "#a1c4f8";
+export const cpdColorBlue1300 = "#cadefc";
+export const cpdColorBlue1400 = "#e4eefe";
+export const cpdColorPurple100 = "#180050";
+export const cpdColorPurple200 = "#1c005a";
+export const cpdColorPurple300 = "#210068";
+export const cpdColorPurple400 = "#2c0080";
+export const cpdColorPurple500 = "#3d009e";
+export const cpdColorPurple600 = "#490bb1";
+export const cpdColorPurple700 = "#5a27c6";
+export const cpdColorPurple800 = "#7848ec";
+export const cpdColorPurple900 = "#9170f9";
+export const cpdColorPurple1000 = "#9e86fc";
+export const cpdColorPurple1100 = "#ad9cfe";
+export const cpdColorPurple1200 = "#c4baff";
+export const cpdColorPurple1300 = "#ded9ff";
+export const cpdColorPurple1400 = "#eeebff";
+export const cpdColorFuchsia100 = "#28003d";
+export const cpdColorFuchsia200 = "#2c0042";
+export const cpdColorFuchsia300 = "#37004e";
+export const cpdColorFuchsia400 = "#44005c";
+export const cpdColorFuchsia500 = "#560f6f";
+export const cpdColorFuchsia600 = "#65177d";
+export const cpdColorFuchsia700 = "#7d2394";
+export const cpdColorFuchsia800 = "#aa36ba";
+export const cpdColorFuchsia900 = "#c55fcf";
+export const cpdColorFuchsia1000 = "#cf78d7";
+export const cpdColorFuchsia1100 = "#d990de";
+export const cpdColorFuchsia1200 = "#e5b1e9";
+export const cpdColorFuchsia1300 = "#f1d4f3";
+export const cpdColorFuchsia1400 = "#f8e8f9";
+export const cpdColorPink100 = "#37000f";
+export const cpdColorPink200 = "#3c0012";
+export const cpdColorPink300 = "#450018";
+export const cpdColorPink400 = "#550024";
+export const cpdColorPink500 = "#6c0035";
+export const cpdColorPink600 = "#7b0c41";
+export const cpdColorPink700 = "#98114f";
+export const cpdColorPink800 = "#ce1865";
+export const cpdColorPink900 = "#f4417d";
+export const cpdColorPink1000 = "#fa648f";
+export const cpdColorPink1100 = "#fe84a2";
+export const cpdColorPink1200 = "#ffabbd";
+export const cpdColorPink1300 = "#ffd1db";
+export const cpdColorPink1400 = "#ffe7ec";

package/assets/web/js/index.js

@@ -0,0 +1,15 @@
+/**
+ * TODO: Auto-generate this file to allow for dynamic themes to be generated
+ */
+
+import * as light from "./cpdLight";
+import * as lightHc from "./cpdLightHc";
+import * as dark from "./cpdDark";
+import * as darkHc from "./cpdDarkHc";
+
+export default {
+  light,
+  lightHc,
+  dark,
+  darkHc,
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@vector-im/compound-design-tokens",
+  "version": "0.0.2",
+  "description": "Compound design tokens",
+  "scripts": {
+    "build": "ts-node ./build.ts",
+    "dev": "http-server ."
+  },
+  "keywords": [
+    "compound",
+    "design tokens",
+    "style dictionary",
+    "css"
+  ],
+  "files": [
+    "./assets/web/**/*"
+  ],
+  "main": "assets/web/js/index.js",
+  "author": "",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/vector-im/compound-design-tokens",
+  "bugs": {
+    "url": "https://github.com/vector-im/compound/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vector-im/compound-design-tokens.git"
+  },
+  "devDependencies": {
+    "@tokens-studio/sd-transforms": "^0.4.3",
+    "@types/fs-extra": "^11.0.1",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.13.0",
+    "fast-glob": "^3.2.12",
+    "http-server": "^14.1.1",
+    "style-dictionary": "^3.7.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5"
+  }
+}