@dialpad/dialtone-tokens 1.0.1

package/README.md

@@ -0,0 +1,17 @@
+# Design Tokens for Dialtone
+
+## This repository is in development and NOT currently ready for use.
+
+Design tokens for Dialpad's design system Dialtone and everything related to building and publishing them.
+
+Design tokens are all the defined values that are part of the design system, such as color, spacing, typography and more. The goal is to store design tokens as JSON and output and publish them to many different formats (CSS, LESS, Android, iOS, etc) upon build.
+
+### Quick start for development
+
+1. clone repo
+2. `npm install`
+3. `npm run build` to build tokens. Built tokens will be output to the dist folder.
+
+- `base.json` Contains tokens exported from figma.
+- `tokens/tokens.json` Contains tokens in style dictionary format (generated from `base.json`).
+- `dist` Contains tokens in their final output form, in multiple different formats.

package/dist/less/_variables.less

@@ -0,0 +1,239 @@
+
+// Do not edit directly
+// Generated on Thu, 11 Aug 2022 23:17:34 GMT
+
+@dt-button-color-background-default: transparent;
+@dt-button-color-background-primary: #6C3DFF;
+@dt-button-color-background-danger: #D81616;
+@dt-button-color-text-default: #6C3DFF;
+@dt-button-color-text-primary: #fff;
+@dt-button-color-text-danger: #fff;
+@dt-button-border-radius-extra-small: 3px;
+@dt-button-border-radius-small: 3.5px;
+@dt-button-border-radius-medium: 4px;
+@dt-button-border-radius-large: 5px;
+@dt-button-border-radius-extra-large: 6px;
+@dt-button-space-gap: 8px;
+@dt-button-padding-horizontal-extra-small: 7px;
+@dt-button-padding-horizontal-small: 7px;
+@dt-button-padding-horizontal-medium: 7px;
+@dt-button-padding-horizontal-large: 15px;
+@dt-button-padding-horizontal-extra-large: 15px;
+@dt-button-padding-vertical-extra-small: 5px;
+@dt-button-padding-vertical-small: 5px;
+@dt-button-padding-vertical-medium: 7px;
+@dt-button-padding-vertical-large: 11px;
+@dt-button-padding-vertical-extra-large: 11px;
+@dt-button-font-size-extra-small: 12px;
+@dt-button-font-size-small: 14px;
+@dt-button-font-size-medium: 16px;
+@dt-button-font-size-large: 20px;
+@dt-button-font-size-extra-large: 24px;
+@dt-button-line-height-size-extra-small: 16px;
+@dt-button-line-height-size-small: 20px;
+@dt-button-line-height-size-medium: 20px;
+@dt-button-line-height-size-large: 24px;
+@dt-button-line-height-size-extra-large: 32px;
+@dt-color-surface-default: #ffffff;
+@dt-color-surface-foo: #f9f9f9;
+@dt-color-surface-bar: #ededed;
+@dt-color-surface-baz: #bbbbbb;
+@dt-color-surface-zar: #555555;
+@dt-color-text-dark: #0d0c0f;
+@dt-color-text-medium: #221f24;
+@dt-color-text-light: #322d37;
+@dt-color-text-lighter: #444150;
+@dt-color-text-primary: #6c3dff;
+@dt-color-text-success: #0a5b03;
+@dt-color-text-error: #930000;
+@dt-color-text-danger: #930000;
+@dt-color-text-muted: #0d0c0f;
+@dt-color-black-100: #cdcdd8;
+@dt-color-black-200: #b3b0c0;
+@dt-color-black-300: #9c99ac;
+@dt-color-black-400: #7b7789;
+@dt-color-black-500: #575564;
+@dt-color-black-600: #444150;
+@dt-color-black-700: #322d37;
+@dt-color-black-800: #221f24;
+@dt-color-black-900: #0d0c0f;
+@dt-color-black-025: #f2f2f6;
+@dt-color-black-050: #eae9ef;
+@dt-color-black-075: #dfdee5;
+@dt-color-purple-100: #ece1ff;
+@dt-color-purple-200: #d1c0ff;
+@dt-color-purple-300: #a687ff;
+@dt-color-purple-400: #8b65ff;
+@dt-color-purple-500: #6c3dff;
+@dt-color-purple-600: #3a1c95;
+@dt-color-purple-700: #2a1173;
+@dt-color-purple-800: #160645;
+@dt-color-orange-100: #fff0e5;
+@dt-color-orange-200: #ffcca7;
+@dt-color-orange-300: #ffa360;
+@dt-color-orange-400: #ff7f23;
+@dt-color-orange-500: #e05e00;
+@dt-color-orange-600: #43220a;
+@dt-color-pink-100: #ffebec;
+@dt-color-pink-200: #ffd8da;
+@dt-color-pink-300: #fda2a8;
+@dt-color-pink-400: #ff578a;
+@dt-color-pink-500: #e92a7a;
+@dt-color-pink-600: #a2114d;
+@dt-color-pink-700: #57102e;
+@dt-color-yellow-100: #fff9e3;
+@dt-color-yellow-200: #ffeeb0;
+@dt-color-yellow-300: #ffdb59;
+@dt-color-yellow-400: #ffce1c;
+@dt-color-yellow-500: #ffbc0f;
+@dt-color-yellow-600: #3f2d00;
+@dt-color-yellow-050: #fbf8f1;
+@dt-color-green-100: #ebffe2;
+@dt-color-green-200: #d1ffbc;
+@dt-color-green-300: #9cff6d;
+@dt-color-green-400: #6bee04;
+@dt-color-green-500: #0c9b02;
+@dt-color-green-600: #0a5b03;
+@dt-color-green-700: #052f01;
+@dt-color-red-100: #fff1f1;
+@dt-color-red-200: #ffd3d3;
+@dt-color-red-300: #ffa7a7;
+@dt-color-red-400: #fa4646;
+@dt-color-red-500: #d81616;
+@dt-color-red-600: #930000;
+@dt-color-red-700: #480000;
+@dt-color-neutral-white: #ffffff;
+@dt-color-neutral-black: #000000;
+@dt-opacity-0: 0;
+@dt-opacity-100: 0.05;
+@dt-opacity-200: 0.1;
+@dt-opacity-300: 0.2;
+@dt-opacity-400: 0.25;
+@dt-opacity-500: 0.3;
+@dt-opacity-600: 0.4;
+@dt-opacity-700: 0.5;
+@dt-opacity-800: 0.6;
+@dt-opacity-900: 0.7;
+@dt-opacity-1000: 0.75;
+@dt-opacity-1100: 0.8;
+@dt-opacity-1200: 0.9;
+@dt-opacity-1300: 1;
+@dt-font-family-default: Inter;
+@dt-font-family-marketing: Archivo;
+@dt-font-family-mono: Roboto Mono;
+@dt-font-size-100: 10px;
+@dt-font-size-200: 11px;
+@dt-font-size-300: 12px;
+@dt-font-size-400: 14px;
+@dt-font-size-500: 16px;
+@dt-font-size-600: 18px;
+@dt-font-size-700: 20px;
+@dt-font-size-800: 24px;
+@dt-font-size-900: 28px;
+@dt-font-size-1000: 32px;
+@dt-font-size-1100: 36px;
+@dt-font-size-1200: 42px;
+@dt-font-size-1300: 48px;
+@dt-font-size-1400: 54px;
+@dt-font-line-height-100: 12px;
+@dt-font-line-height-200: 16px;
+@dt-font-line-height-300: 20px;
+@dt-font-line-height-400: 24px;
+@dt-font-line-height-500: 28px;
+@dt-font-line-height-600: 32px;
+@dt-font-line-height-700: 36px;
+@dt-font-line-height-800: 40px;
+@dt-font-line-height-900: 48px;
+@dt-font-line-height-1000: 52px;
+@dt-font-line-height-1100: 58px;
+@dt-font-weight-normal: Regular;
+@dt-font-weight-medium: Medium;
+@dt-font-weight-semi-bold: Semi Bold;
+@dt-font-weight-bold: Bold;
+@dt-typography-body-100: [object Object];
+@dt-typography-body-200: [object Object];
+@dt-typography-body-300: [object Object];
+@dt-typography-body-400: [object Object];
+@dt-typography-body-500: [object Object];
+@dt-typography-body-600: [object Object];
+@dt-typography-body-700: [object Object];
+@dt-typography-body-800: [object Object];
+@dt-typography-body-900: [object Object];
+@dt-typography-body-1000: [object Object];
+@dt-typography-body-1100: [object Object];
+@dt-typography-body-1200: [object Object];
+@dt-typography-body-1300: [object Object];
+@dt-typography-body-1400: [object Object];
+@dt-typography-headline-100: [object Object];
+@dt-typography-headline-200: [object Object];
+@dt-typography-headline-300: [object Object];
+@dt-typography-headline-400: [object Object];
+@dt-typography-headline-500: [object Object];
+@dt-typography-headline-600: [object Object];
+@dt-typography-headline-700: [object Object];
+@dt-typography-headline-800: [object Object];
+@dt-size-0: 0rem;
+@dt-size-100: 1rem;
+@dt-size-200: 2rem;
+@dt-size-300: 4rem;
+@dt-size-400: 6rem;
+@dt-size-500: 8rem;
+@dt-size-600: 12rem;
+@dt-size-700: 16rem;
+@dt-size-800: 24rem;
+@dt-size-900: 32rem;
+@dt-size-1000: 48rem;
+@dt-size-1100: 64rem;
+@dt-size-1200: 72rem;
+@dt-size-1300: 84rem;
+@dt-size-1400: 96rem;
+@dt-size-1500: 102rem;
+@dt-size-1600: 114rem;
+@dt-size-1700: 128rem;
+@dt-size-base: 4rem;
+@dt-size-border-0: 0rem;
+@dt-size-border-100: 1rem;
+@dt-size-border-200: 2rem;
+@dt-size-border-300: 4rem;
+@dt-size-border-400: 8rem;
+@dt-size-border-500: 12rem;
+@dt-size-radius-0: 0rem;
+@dt-size-radius-100: 1rem;
+@dt-size-radius-200: 2rem;
+@dt-size-radius-300: 4rem;
+@dt-size-radius-400: 8rem;
+@dt-size-radius-500: 12rem;
+@dt-size-radius-600: 24rem;
+@dt-size-icon-100: 14rem;
+@dt-size-icon-200: 16rem;
+@dt-size-icon-300: 18rem;
+@dt-size-icon-400: 20rem;
+@dt-size-icon-500: 24rem;
+@dt-size-icon-600: 32rem;
+@dt-size-icon-700: 48rem;
+@dt-size-icon-800: 64rem;
+@dt-size-icon-000: 12rem;
+@dt-space-0: 0px;
+@dt-space-100: 1px;
+@dt-space-200: 2px;
+@dt-space-300: 4px;
+@dt-space-400: 6px;
+@dt-space-500: 8px;
+@dt-space-600: 12px;
+@dt-space-700: 16px;
+@dt-space-800: 24px;
+@dt-space-900: 32px;
+@dt-space-1000: 48px;
+@dt-space-1100: 64px;
+@dt-space-1200: 72px;
+@dt-space-1300: 84px;
+@dt-space-1400: 96px;
+@dt-space-1500: 102px;
+@dt-space-1600: 114px;
+@dt-space-1700: 128px;
+@dt-space-base: 4px;
+@dt-shadow-small: [object Object];
+@dt-shadow-medium: [object Object];
+@dt-shadow-large: [object Object];
+@dt-shadow-extra-large: [object Object];
+@dt-shadow-card: [object Object],[object Object],[object Object];

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@dialpad/dialtone-tokens",
+  "version": "1.0.1",
+  "description": "Design tokens for Dialtone.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run transform && style-dictionary build",
+    "transform": "token-transformer base.json tokens/tokens.json",
+    "prepublishOnly": "npm run build",
+    "release": "semantic-release --no-ci --extends ./release-local.config.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dialpad/dialtone-tokens.git"
+  },
+  "author": "Dialpad",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dialpad/dialtone-tokens/issues"
+  },
+  "homepage": "https://dialpad.design/",
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "style-dictionary": "^3.7.1",
+    "token-transformer": "^0.0.24"
+  }
+}