@amsterdam/design-system-tokens 0.1.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+# License
+
+Copyright (c) {year} {author}. All rights reserved.
+
+The open source license does NOT apply to files in this directory.
+
+These are properietary assets to {author}.

package/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# TODO: write readme

package/dist/_variables.scss

@@ -0,0 +1,21 @@
+
+// Do not edit directly
+// Generated on Fri, 10 Feb 2023 13:17:22 GMT
+
+$amsterdam-focus-outline-offset: 2px;
+$amsterdam-color-neutral-grey4: #323232;
+$amsterdam-color-neutral-grey3: #767676;
+$amsterdam-color-neutral-grey2: #B4B4B4;
+$amsterdam-color-neutral-grey1: #E6E6E6;
+$amsterdam-color-magenta: #E50082;
+$amsterdam-color-purple: #A00078;
+$amsterdam-color-blue: #009DEC;
+$amsterdam-color-dark-green: #00A03C;
+$amsterdam-color-green: #BED200;
+$amsterdam-color-yellow: #FFE600;
+$amsterdam-color-orange: #FF9100;
+$amsterdam-color-dark-blue: #00387A;
+$amsterdam-color-primary-red: #EC0000;
+$amsterdam-color-primary-blue: #004699;
+$amsterdam-color-primary-white: #ffffff;
+$amsterdam-color-primary-black: #000000;

package/dist/index.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+.amsterdam-theme {
+  --amsterdam-focus-outline-offset: 2px;
+  --amsterdam-color-neutral-grey4: #323232;
+  --amsterdam-color-neutral-grey3: #767676;
+  --amsterdam-color-neutral-grey2: #B4B4B4;
+  --amsterdam-color-neutral-grey1: #E6E6E6;
+  --amsterdam-color-magenta: #E50082;
+  --amsterdam-color-purple: #A00078;
+  --amsterdam-color-blue: #009DEC;
+  --amsterdam-color-dark-green: #00A03C;
+  --amsterdam-color-green: #BED200;
+  --amsterdam-color-yellow: #FFE600;
+  --amsterdam-color-orange: #FF9100;
+  --amsterdam-color-dark-blue: #00387A;
+  --amsterdam-color-primary-red: #EC0000;
+  --amsterdam-color-primary-blue: #004699;
+  --amsterdam-color-primary-white: #ffffff;
+  --amsterdam-color-primary-black: #000000;
+}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+export const amsterdamColorPrimaryBlack : string;
+export const amsterdamColorPrimaryWhite : string;
+export const amsterdamColorPrimaryBlue : string;
+export const amsterdamColorPrimaryRed : string;
+export const amsterdamColorDarkBlue : string;
+export const amsterdamColorOrange : string;
+export const amsterdamColorYellow : string;
+export const amsterdamColorGreen : string;
+export const amsterdamColorDarkGreen : string;
+export const amsterdamColorBlue : string;
+export const amsterdamColorPurple : string;
+export const amsterdamColorMagenta : string;
+export const amsterdamColorNeutralGrey1 : string;
+export const amsterdamColorNeutralGrey2 : string;
+export const amsterdamColorNeutralGrey3 : string;
+export const amsterdamColorNeutralGrey4 : string;
+export const amsterdamFocusOutlineOffset : string;

package/dist/index.js

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+export const amsterdamColorPrimaryBlack = "#000000";
+export const amsterdamColorPrimaryWhite = "#ffffff";
+export const amsterdamColorPrimaryBlue = "#004699";
+export const amsterdamColorPrimaryRed = "#EC0000";
+export const amsterdamColorDarkBlue = "#00387A";
+export const amsterdamColorOrange = "#FF9100";
+export const amsterdamColorYellow = "#FFE600";
+export const amsterdamColorGreen = "#BED200";
+export const amsterdamColorDarkGreen = "#00A03C";
+export const amsterdamColorBlue = "#009DEC";
+export const amsterdamColorPurple = "#A00078";
+export const amsterdamColorMagenta = "#E50082";
+export const amsterdamColorNeutralGrey1 = "#E6E6E6";
+export const amsterdamColorNeutralGrey2 = "#B4B4B4";
+export const amsterdamColorNeutralGrey3 = "#767676";
+export const amsterdamColorNeutralGrey4 = "#323232";
+export const amsterdamFocusOutlineOffset = "2px";

package/dist/index.json

@@ -0,0 +1,19 @@
+{
+  "amsterdamColorPrimaryBlack": "#000000",
+  "amsterdamColorPrimaryWhite": "#ffffff",
+  "amsterdamColorPrimaryBlue": "#004699",
+  "amsterdamColorPrimaryRed": "#EC0000",
+  "amsterdamColorDarkBlue": "#00387A",
+  "amsterdamColorOrange": "#FF9100",
+  "amsterdamColorYellow": "#FFE600",
+  "amsterdamColorGreen": "#BED200",
+  "amsterdamColorDarkGreen": "#00A03C",
+  "amsterdamColorBlue": "#009DEC",
+  "amsterdamColorPurple": "#A00078",
+  "amsterdamColorMagenta": "#E50082",
+  "amsterdamColorNeutralGrey1": "#E6E6E6",
+  "amsterdamColorNeutralGrey2": "#B4B4B4",
+  "amsterdamColorNeutralGrey3": "#767676",
+  "amsterdamColorNeutralGrey4": "#323232",
+  "amsterdamFocusOutlineOffset": "2px"
+}

package/dist/index.tokens.json

@@ -0,0 +1,25 @@
+{
+  "amsterdam": {
+    "color": {
+      "primary-black": "#000000",
+      "primary-white": "#ffffff",
+      "primary-blue": "#004699",
+      "primary-red": "#EC0000",
+      "dark-blue": "#00387A",
+      "orange": "#FF9100",
+      "yellow": "#FFE600",
+      "green": "#BED200",
+      "dark-green": "#00A03C",
+      "blue": "#009DEC",
+      "purple": "#A00078",
+      "magenta": "#E50082",
+      "neutral-grey1": "#E6E6E6",
+      "neutral-grey2": "#B4B4B4",
+      "neutral-grey3": "#767676",
+      "neutral-grey4": "#323232"
+    },
+    "focus": {
+      "outline-offset": "2px"
+    }
+  }
+}

package/dist/root.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+:root {
+  --amsterdam-focus-outline-offset: 2px;
+  --amsterdam-color-neutral-grey4: #323232;
+  --amsterdam-color-neutral-grey3: #767676;
+  --amsterdam-color-neutral-grey2: #B4B4B4;
+  --amsterdam-color-neutral-grey1: #E6E6E6;
+  --amsterdam-color-magenta: #E50082;
+  --amsterdam-color-purple: #A00078;
+  --amsterdam-color-blue: #009DEC;
+  --amsterdam-color-dark-green: #00A03C;
+  --amsterdam-color-green: #BED200;
+  --amsterdam-color-yellow: #FFE600;
+  --amsterdam-color-orange: #FF9100;
+  --amsterdam-color-dark-blue: #00387A;
+  --amsterdam-color-primary-red: #EC0000;
+  --amsterdam-color-primary-blue: #004699;
+  --amsterdam-color-primary-white: #ffffff;
+  --amsterdam-color-primary-black: #000000;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+export default tokens;
+
+declare interface DesignToken {
+  value: any;
+  name?: string;
+  comment?: string;
+  themeable?: boolean;
+  attributes?: {
+    category?: string;
+    type?: string;
+    item?: string;
+    subitem?: string;
+    state?: string;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+declare const tokens: {
+  "amsterdam": {
+    "color": {
+      "primary-black": DesignToken,
+      "primary-white": DesignToken,
+      "primary-blue": DesignToken,
+      "primary-red": DesignToken,
+      "dark-blue": DesignToken,
+      "orange": DesignToken,
+      "yellow": DesignToken,
+      "green": DesignToken,
+      "dark-green": DesignToken,
+      "blue": DesignToken,
+      "purple": DesignToken,
+      "magenta": DesignToken,
+      "neutral-grey1": DesignToken,
+      "neutral-grey2": DesignToken,
+      "neutral-grey3": DesignToken,
+      "neutral-grey4": DesignToken
+    },
+    "focus": {
+      "outline-offset": DesignToken
+    }
+  }
+}

package/dist/tokens.js

@@ -0,0 +1,336 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Feb 2023 13:17:22 GMT
+ */
+
+module.exports = {
+  "amsterdam": {
+    "color": {
+      "primary-black": {
+        "value": "#000000",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#000000"
+        },
+        "name": "amsterdamColorPrimaryBlack",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "primary-black"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "primary-black"
+        ]
+      },
+      "primary-white": {
+        "value": "#ffffff",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ffffff"
+        },
+        "name": "amsterdamColorPrimaryWhite",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "primary-white"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "primary-white"
+        ]
+      },
+      "primary-blue": {
+        "value": "#004699",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#004699"
+        },
+        "name": "amsterdamColorPrimaryBlue",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "primary-blue"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "primary-blue"
+        ]
+      },
+      "primary-red": {
+        "value": "#EC0000",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#EC0000"
+        },
+        "name": "amsterdamColorPrimaryRed",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "primary-red"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "primary-red"
+        ]
+      },
+      "dark-blue": {
+        "value": "#00387A",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#00387A"
+        },
+        "name": "amsterdamColorDarkBlue",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "dark-blue"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "dark-blue"
+        ]
+      },
+      "orange": {
+        "value": "#FF9100",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#FF9100"
+        },
+        "name": "amsterdamColorOrange",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "orange"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "orange"
+        ]
+      },
+      "yellow": {
+        "value": "#FFE600",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#FFE600"
+        },
+        "name": "amsterdamColorYellow",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "yellow"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "yellow"
+        ]
+      },
+      "green": {
+        "value": "#BED200",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#BED200"
+        },
+        "name": "amsterdamColorGreen",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "green"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "green"
+        ]
+      },
+      "dark-green": {
+        "value": "#00A03C",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#00A03C"
+        },
+        "name": "amsterdamColorDarkGreen",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "dark-green"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "dark-green"
+        ]
+      },
+      "blue": {
+        "value": "#009DEC",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#009DEC"
+        },
+        "name": "amsterdamColorBlue",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "blue"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "blue"
+        ]
+      },
+      "purple": {
+        "value": "#A00078",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#A00078"
+        },
+        "name": "amsterdamColorPurple",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "purple"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "purple"
+        ]
+      },
+      "magenta": {
+        "value": "#E50082",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#E50082"
+        },
+        "name": "amsterdamColorMagenta",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "magenta"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "magenta"
+        ]
+      },
+      "neutral-grey1": {
+        "value": "#E6E6E6",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#E6E6E6"
+        },
+        "name": "amsterdamColorNeutralGrey1",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "neutral-grey1"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "neutral-grey1"
+        ]
+      },
+      "neutral-grey2": {
+        "value": "#B4B4B4",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#B4B4B4"
+        },
+        "name": "amsterdamColorNeutralGrey2",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "neutral-grey2"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "neutral-grey2"
+        ]
+      },
+      "neutral-grey3": {
+        "value": "#767676",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#767676"
+        },
+        "name": "amsterdamColorNeutralGrey3",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "neutral-grey3"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "neutral-grey3"
+        ]
+      },
+      "neutral-grey4": {
+        "value": "#323232",
+        "filePath": "./src/brand/amsterdam/color.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#323232"
+        },
+        "name": "amsterdamColorNeutralGrey4",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "color",
+          "item": "neutral-grey4"
+        },
+        "path": [
+          "amsterdam",
+          "color",
+          "neutral-grey4"
+        ]
+      }
+    },
+    "focus": {
+      "outline-offset": {
+        "value": "2px",
+        "filePath": "./src/common/amsterdam/focus.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "2px"
+        },
+        "name": "amsterdamFocusOutlineOffset",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "focus",
+          "item": "outline-offset"
+        },
+        "path": [
+          "amsterdam",
+          "focus",
+          "outline-offset"
+        ]
+      }
+    }
+  }
+};

package/dist/variables.less

@@ -0,0 +1,21 @@
+
+// Do not edit directly
+// Generated on Fri, 10 Feb 2023 13:17:22 GMT
+
+@amsterdam-focus-outline-offset: 2px;
+@amsterdam-color-neutral-grey4: #323232;
+@amsterdam-color-neutral-grey3: #767676;
+@amsterdam-color-neutral-grey2: #B4B4B4;
+@amsterdam-color-neutral-grey1: #E6E6E6;
+@amsterdam-color-magenta: #E50082;
+@amsterdam-color-purple: #A00078;
+@amsterdam-color-blue: #009DEC;
+@amsterdam-color-dark-green: #00A03C;
+@amsterdam-color-green: #BED200;
+@amsterdam-color-yellow: #FFE600;
+@amsterdam-color-orange: #FF9100;
+@amsterdam-color-dark-blue: #00387A;
+@amsterdam-color-primary-red: #EC0000;
+@amsterdam-color-primary-blue: #004699;
+@amsterdam-color-primary-white: #ffffff;
+@amsterdam-color-primary-black: #000000;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "version": "0.1.0",
+  "author": "Community for NL Design System",
+  "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@amsterdam/design-system-tokens",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Amsterdam/design-system.git",
+    "directory": "packages/tokens"
+  },
+  "scripts": {
+    "clean": "rimraf dist/",
+    "prebuild": "npm run clean",
+    "build": "npm-run-all build:**",
+    "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json",
+    "watch": "npm-run-all watch:**",
+    "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'npm run build' 'src/**/*.tokens.json'"
+  },
+  "devDependencies": {
+    "chokidar-cli": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "style-dictionary": "3.7.2"
+  },
+  "gitHead": "048043a5fe15bdba7d7665d8531705169a01ab50"
+}

package/src/brand/amsterdam/color.tokens.json

@@ -0,0 +1,22 @@
+{
+  "amsterdam": {
+    "color": {
+      "primary-black": { "value": "#000000" },
+      "primary-white": { "value": "#ffffff" },
+      "primary-blue": { "value": "#004699" },
+      "primary-red": { "value": "#EC0000" },
+      "dark-blue": { "value": "#00387A" },
+      "orange": { "value": "#FF9100" },
+      "yellow": { "value": "#FFE600" },
+      "green": { "value": "#BED200" },
+      "dark-green": { "value": "#00A03C" },
+      "blue": { "value": "#009DEC" },
+      "purple": { "value": "#A00078" },
+      "magenta": { "value": "#E50082" },
+      "neutral-grey1": { "value": "#E6E6E6" },
+      "neutral-grey2": { "value": "#B4B4B4" },
+      "neutral-grey3": { "value": "#767676" },
+      "neutral-grey4": { "value": "#323232" }
+    }
+  }
+}

package/src/common/amsterdam/focus.tokens.json

@@ -0,0 +1,7 @@
+{
+  "amsterdam": {
+    "focus": {
+      "outline-offset": { "value": "2px" }
+    }
+  }
+}

package/style-dictionary.config.json

@@ -0,0 +1,101 @@
+{
+  "source": ["./src/**/tokens.json", "./src/**/*.tokens.json"],
+  "platforms": {
+    "js": {
+      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "index.js",
+          "format": "javascript/es6"
+        },
+        {
+          "format": "javascript/module",
+          "destination": "tokens.js"
+        }
+      ]
+    },
+    "json": {
+      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "index.tokens.json",
+          "format": "json/nested"
+        },
+        {
+          "destination": "index.json",
+          "format": "json/flat"
+        }
+      ]
+    },
+    "css": {
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "root.css",
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          }
+        }
+      ]
+    },
+    "css-theme": {
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "index.css",
+          "format": "css/variables",
+          "options": {
+            "selector": ".amsterdam-theme",
+            "outputReferences": true
+          }
+        }
+      ]
+    },
+    "scss": {
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "_variables.scss",
+          "format": "scss/variables",
+          "options": {
+            "outputReferences": true
+          }
+        }
+      ]
+    },
+    "typescript": {
+      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
+      "transformGroup": "js",
+      "buildPath": "dist/",
+      "files": [
+        {
+          "format": "typescript/es6-declarations",
+          "destination": "index.d.ts"
+        },
+        {
+          "format": "typescript/module-declarations",
+          "destination": "tokens.d.ts"
+        }
+      ]
+    },
+    "less": {
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "variables.less",
+          "format": "less/variables",
+          "options": {
+            "outputReferences": true
+          }
+        }
+      ]
+    }
+  }
+}