[design-tokens] Design token initial - colors (#54)

Uses style-dictionary to transform tokens defined in json into SCSS and JS variables. This initial PR only contains color tokens.
cockroachdb · Jun 25, 2020 · b3784a2 · b3784a2
1 parent 61c9d0b
commit b3784a2
Show file tree

Hide file tree

Showing 9 changed files with 511 additions and 0 deletions.
diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md
@@ -0,0 +1,15 @@
+# design-tokens
+
+Uses [style-dictionary](https://github.com/amzn/style-dictionary) to transform tokens defined in json into different formats.
+
+## Install dependencies
+
+```
+yarn
+```
+
+## Generate tokens from json
+
+```
+npm run build
+```
diff --git a/packages/design-tokens/config.json b/packages/design-tokens/config.json
@@ -0,0 +1,25 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "dist/web/",
+      "files": [
+        {
+          "destination": "_tokens.scss",
+          "format": "scss/variables"
+        }
+      ]
+    },
+    "js": {
+      "transformGroup": "js",
+      "buildPath": "dist/web/",
+      "files": [
+        {
+          "format": "javascript/es6",
+          "destination": "tokens.js"
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@cockroachlabs/design-tokens",
+  "version": "0.0.1",
+  "description": "Design tokens for Cockroach Labs.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cockroachdb/ui"
+  },
+  "keywords": [
+    "tokens"
+  ],
+  "main": "build.js",
+  "scripts": {
+    "build": "node_modules/.bin/style-dictionary build",
+    "clean": "node_modules/.bin/style-dictionary clean",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "style-dictionary": "^2.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/design-tokens/tokens/color/background.json b/packages/design-tokens/tokens/color/background.json
@@ -0,0 +1,57 @@
+{
+  "color": {
+    "background": {
+      "base": { "value": "{color.base.white.value}" },
+      "alt": { "value": "{color.core.neutral.1.value}" },
+      "inverse": { "value": "{color.core.neutral.6.value}" },
+      "success": { "value": "{color.base.green.value}" },
+      "error": { "value": "{color.base.red.value}" },
+      "warning": { "value": "{color.base.orange.value}" },
+      "info": { "value": "{color.base.blue.value}" },
+      "danger": { "value": "{color.base.red.value}" },
+
+      "badge": {
+        "neutral": { "value": "{color.core.neutral.2.value}" },
+        "success": { "value": "{color.core.green.1.value}" },
+        "warning": { "value": "{color.core.orange.1.value}" },
+        "info": { "value": "{color.core.blue.1.value}" },
+        "danger": { "value": "{color.core.red.1.value}" }
+      },
+
+      "avatar": {
+        "default": { "value": "{color.core.neutral.2.value}" },
+        "pending": { "value": "{color.core.orange.1.value}" },
+        "invalid": { "value": "{color.core.red.1.value}" },
+        "disabled": { "value": "{color.core.neutral.2.value}" },
+        "selectable": { "value": "{color.core.blue.1.value}" },
+        "focus": { "value": "{color.core.blue.0.value}" }
+      },
+
+      "button": {
+        "primary": {
+          "base": { "value": "{color.base.green.value}" },
+          "hover": { "value": "{color.base.green.value}" },
+          "active": { "value": "{color.base.green.value}" },
+          "focused": { "value": "{color.base.green.value}" },
+          "disabled": { "value": "{color.base.green.value}" }
+        },
+
+        "secondary": {
+          "base": { "value": "{color.base.white.value}" },
+          "hover": { "value": "{color.core.neutral.1.value}" },
+          "active": { "value": "{color.core.neutral.1.value}" },
+          "focused": { "value": "{color.core.neutral.1.value}" },
+          "disabled": { "value": "{color.core.neutral.1.value}" }
+        },
+
+        "danger": {
+          "base": { "value": "{color.base.red.value}" },
+          "hover": { "value": "{color.base.red.value}" },
+          "active": { "value": "{color.base.red.value}" },
+          "focused": { "value": "{color.base.red.value}" },
+          "disabled": { "value": "{color.base.red.value}" }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/design-tokens/tokens/color/base.json b/packages/design-tokens/tokens/color/base.json
@@ -0,0 +1,14 @@
+{
+  "color": {
+    "base": {
+      "white": { "value": "{color.core.neutral.0.value}" },
+      "black": { "value": "{color.core.neutral.9.value}" },
+      "blue": { "value": "{color.core.blue.3.value}" },
+      "purple": { "value": "{color.core.purple.3.value}" },
+      "green": { "value": "{color.core.green.3.value}" },
+      "yellow": { "value": "{color.core.yellow.3.value}" },
+      "orange": { "value": "{color.core.orange.3.value}" },
+      "red": { "value": "{color.core.red.3.value}" }
+    }
+  }
+}
diff --git a/packages/design-tokens/tokens/color/border.json b/packages/design-tokens/tokens/color/border.json
@@ -0,0 +1,43 @@
+{
+  "color": {
+    "border": {
+      "default": { "value": "{color.core.neutral.5.value}" },
+
+      "avatar": {
+        "default": { "value": "{color.core.neutral.7.value}" },
+        "pending": { "value": "{color.core.orange.4.value}" },
+        "invalid": { "value": "{color.core.red.4.value}" },
+        "disabled": { "value": "{color.core.neutral.2.value}" },
+        "selectable": { "value": "{color.base.blue.value}" },
+        "focus": { "value": "{color.base.blue.value}" }
+      },
+
+      "button": {
+        "primary": {
+          "base": { "value": "{color.base.green.value}" },
+          "hover": { "value": "{color.base.green.value}" },
+          "active": { "value": "{color.core.green.4.value}" },
+          "focused": { "value": "{color.core.green.4.value}" },
+          "disabled": { "value": "{color.base.green.value}" }
+        },
+        "secondary": {
+          "base": { "value": "{color.core.neutral.4.value}" },
+          "hover": { "value": "{color.core.neutral.4.value}" },
+          "active": { "value": "{color.core.neutral.5.value}" },
+          "focused": { "value": "{color.core.neutral.5.value}" },
+          "disabled": { "value": "{color.core.neutral.4.value}" }
+        },
+        "flat": {
+          "focused": { "value": "{color.base.blue.value}" }
+        },
+        "danger": {
+          "base": { "value": "{color.base.red.value}" },
+          "hover": { "value": "{color.base.red.value}" },
+          "active": { "value": "{color.core.red.4.value}" },
+          "focused": { "value": "{color.core.red.4.value}" },
+          "disabled": { "value": "{color.base.red.value}" }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/design-tokens/tokens/color/core.json b/packages/design-tokens/tokens/color/core.json
@@ -0,0 +1,61 @@
+{
+  "color": {
+    "core": {
+      "neutral": {
+        "0": { "value": "#ffffff" },
+        "1": { "value": "#f5f7fa" },
+        "2": { "value": "#e7ecf3" },
+        "3": { "value": "#d6dbe7" },
+        "4": { "value": "#c0c6d9" },
+        "5": { "value": "#7e89a9" },
+        "6": { "value": "#475872" },
+        "7": { "value": "#394455" },
+        "8": { "value": "#242a35" },
+        "9": { "value": "#060c12" }
+      },
+      "blue": {
+        "0": { "value": "#e6edfe" },
+        "1": { "value": "#e0eefb" },
+        "2": { "value": "#74bdfd" },
+        "3": { "value": "#0788ff" },
+        "4": { "value": "#005fb3" },
+        "5": { "value": "#00294d" }
+      },
+      "purple": {
+        "1": { "value": "#cec0f2" },
+        "2": { "value": "#8c6be1" },
+        "3": { "value": "#542abd" },
+        "4": { "value": "#005fb3" },
+        "5": { "value": "#00294d" }
+      },
+      "green": {
+        "1": { "value": "#b4f1aa" },
+        "2": { "value": "#76de49" },
+        "3": { "value": "#37a806" },
+        "4": { "value": "#237300" },
+        "5": { "value": "#123d00" }
+      },
+      "yellow": {
+        "1": { "value": "#fff4c8" },
+        "2": { "value": "#ffe066" },
+        "3": { "value": "#ffcd02" },
+        "4": { "value": "#cca300" },
+        "5": { "value": "#655b04" }
+      },
+      "orange": {
+        "1": { "value": "#fef1da" },
+        "2": { "value": "#ffd099" },
+        "3": { "value": "#ffa53b" },
+        "4": { "value": "#b26000" },
+        "5": { "value": "#644004" }
+      },
+      "red": {
+        "1": { "value": "#ffe5e8" },
+        "2": { "value": "#ff808c" },
+        "3": { "value": "#ff3b4e" },
+        "4": { "value": "#c32534" },
+        "5": { "value": "#99000f" }
+      }
+    }
+  }
+}
diff --git a/packages/design-tokens/tokens/color/font.json b/packages/design-tokens/tokens/color/font.json
@@ -0,0 +1,72 @@
+{
+  "color": {
+    "font": {
+      "1": { "value": "{color.core.neutral.8.value}" },
+      "2": { "value": "{color.core.neutral.7.value}" },
+      "3": { "value": "{color.core.neutral.6.value}" },
+      "4": { "value": "{color.core.neutral.5.value}" },
+      "5": { "value": "{color.base.white.value}" },
+
+      "inverse": {
+        "base": { "value": "{color.font.5.value}" }
+      },
+
+      "link": {
+        "base": { "value": "{color.base.blue.value}" },
+        "hover": { "value": "{color.core.blue.4.value}" },
+
+        "inverse": {
+          "link": { "value": "{color.font.5.value}" }
+        }
+      },
+
+      "badge": {
+        "neutral": { "value": "{color.font.3.value}" },
+        "success": { "value": "{color.core.green.4.value}" },
+        "warning": { "value": "{color.core.orange.4.value}" },
+        "info": { "value": "{color.core.blue.4.value}" },
+        "danger": { "value": "{color.core.red.4.value}" }
+      },
+
+      "avatar": {
+        "default": { "value": "{color.font.2.value}" },
+        "pending": { "value": "{color.core.orange.4.value}" },
+        "invalid": { "value": "{color.core.red.4.value}" },
+        "disabled": { "value": "{color.font.4.value}" },
+        "selectable": { "value": "{color.base.blue.value}" },
+        "focus": { "value": "{color.base.blue.value}" }
+      },
+
+      "button": {
+        "primary": {
+          "base": { "value": "{color.font.5.value}" },
+          "hover": { "value": "{color.font.5.value}" },
+          "active": { "value": "{color.font.5.value}" },
+          "focused": { "value": "{color.font.5.value}" },
+          "disabled": { "value": "{color.font.5.value}" }
+        },
+        "secondary": {
+          "base": { "value": "{color.font.2.value}" },
+          "hover": { "value": "{color.font.1.value}" },
+          "active": { "value": "{color.font.2.value}" },
+          "focused": { "value": "{color.font.2.value}" },
+          "disabled": { "value": "{color.font.4.value}" }
+        },
+        "flat": {
+          "base": { "value": "{color.font.link.base.value}" },
+          "hover": { "value": "{color.font.link.hover.value}" },
+          "active": { "value": "{color.font.link.base.value}" },
+          "focused": { "value": "{color.font.link.base.value}" },
+          "disabled": { "value": "{color.core.neutral.4.value}" }
+        },
+        "danger": {
+          "base": { "value": "{color.font.5.value}" },
+          "hover": { "value": "{color.font.5.value}" },
+          "active": { "value": "{color.font.5.value}" },
+          "focused": { "value": "{color.font.5.value}" },
+          "disabled": { "value": "{color.font.5.value}" }
+        }
+      }
+    }
+  }
+}