feat(coral-tokens): adding coral tokens package

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ env:
 jobs:
   ci:
     name: Nx Cloud - Main Job
-    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.7
+    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.8.1
     with:
       number-of-agents: 3
       init-commands: |
@@ -27,7 +27,7 @@ jobs:
 
   agents:
     name: Nx Cloud - Agents
-    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.7
+    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.8.1
     with:
       number-of-agents: 3
 

nx.json

@@ -14,9 +14,6 @@
       }
     }
   },
-  "cli": {
-    "defaultCollection": "@nxext/stencil"
-  },
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"]

package.json

@@ -32,6 +32,7 @@
     "@nrwl/web": "14.7.13",
     "@nrwl/workspace": "14.7.13",
     "@nxext/stencil": "^14.0.6",
+    "@nxkit/style-dictionary": "^0.0.4",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/core": "2.17.1",
     "@stencil/react-output-target": "^0.3.1",
@@ -49,6 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "babel-jest": "27.4.1",
+    "chroma-js": "^2.4.2",
     "cypress": "^10.7.0",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
@@ -70,6 +72,7 @@
     "prettier": "^2.6.2",
     "puppeteer": "^15.5.0",
     "react-test-renderer": "18.2.0",
+    "style-dictionary": "^3.7.1",
     "ts-jest": "27.1.5",
     "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "4.0.0",

packages/coral-angular/.eslintignore

@@ -0,0 +1 @@
+packages/coral-angular/src/lib/generated

packages/coral-angular/project.json

@@ -36,7 +36,8 @@
         "lintFilePatterns": [
           "packages/coral-angular/**/*.ts",
           "packages/coral-angular/**/*.html"
-        ]
+        ],
+        "ignorePath": "packages/coral-angular/.eslintignore"
       }
     }
   },

packages/coral-tokens/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/coral-tokens/project.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "packages/coral-tokens/src",
+  "targets": {
+    "build": {
+      "executor": "@nxkit/style-dictionary:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/coral-tokens",
+        "styleDictionaryConfig": "packages/coral-tokens/style-dictionary.config.ts",
+        "tsConfig": "packages/coral-tokens/tsconfig.json",
+        "customTransforms": "packages/coral-tokens/src/extensions/transforms/index.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/coral-tokens/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": []
+}

packages/coral-tokens/src/extensions/transforms/index.ts

@@ -0,0 +1,10 @@
+import { CustomTransformsBuilder } from '@nxkit/style-dictionary';
+import { ShadesTransform } from './shades-transform/transform';
+
+const customTransformsBuilder: CustomTransformsBuilder = () => {
+  return {
+    [ShadesTransform.name]: ShadesTransform.transform,
+  };
+};
+
+export default customTransformsBuilder;

packages/coral-tokens/src/extensions/transforms/shades-transform/color-transform.ts

@@ -0,0 +1,26 @@
+// #NOTE: https://github.com/amzn/style-dictionary/tree/main/examples/advanced/transitive-transforms
+
+import * as chroma from 'chroma-js';
+
+const setHslColor = (color: chroma.Color, lightness: number) => {
+  const [h, s] = color.hsl();
+  return chroma(h, s, lightness / 100, 'hsl');
+};
+
+export const colorTransform = (token) => {
+  const { value, modify = [] } = token;
+  let color = chroma(value);
+
+  // iterate over the modify array (see tokens/color.json)
+  // and apply each modification in order
+  modify.forEach(({ type, amount }) => {
+    // modifier type must match a method name in chromajs
+    // https://gka.github.io/chroma.js/
+    // chroma methods can be chained, so each time we override the color variable
+    // we can still call other chroma methods, similar to
+    // chroma(value).brighten(1).darken(1).hex();
+    color = setHslColor(color, amount);
+  });
+
+  return color.hex();
+};

packages/coral-tokens/src/extensions/transforms/shades-transform/transform.ts

@@ -0,0 +1,14 @@
+import { CustomTransform } from '../transform.model';
+import { colorTransform } from './color-transform';
+
+export const ShadesTransform: CustomTransform = {
+  name: 'shades-transform',
+  transform: {
+    type: `value`,
+    // only transforms that have transitive: true will be applied to tokens
+    // that alias/reference other tokens
+    transitive: true,
+    matcher: (token) => token?.attributes?.category === 'color' && token.modify,
+    transformer: colorTransform,
+  },
+};

packages/coral-tokens/src/extensions/transforms/transform.model.ts

@@ -0,0 +1,6 @@
+import { Transform } from 'style-dictionary';
+
+export interface CustomTransform {
+  name: string;
+  transform: Transform;
+}

packages/coral-tokens/src/tokens/color/shades.json

@@ -0,0 +1,181 @@
+{
+  "color": {
+    "primary": {
+      "0": {
+        "value": "#751aff"
+      },
+      "10": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.1}"
+          }
+        ]
+      },
+      "20": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.2}"
+          }
+        ]
+      },
+      "30": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.3}"
+          }
+        ]
+      },
+      "40": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.4}"
+          }
+        ]
+      },
+      "50": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.5}"
+          }
+        ]
+      },
+      "60": {
+        "value": "{color.primary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.6}"
+          }
+        ]
+      }
+    },
+    "secondary": {
+      "0": {
+        "value": "#ff751a"
+      },
+      "10": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.1}"
+          }
+        ]
+      },
+      "20": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.2}"
+          }
+        ]
+      },
+      "30": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.3}"
+          }
+        ]
+      },
+      "40": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.4}"
+          }
+        ]
+      },
+      "50": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.5}"
+          }
+        ]
+      },
+      "60": {
+        "value": "{color.secondary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.6}"
+          }
+        ]
+      }
+    },
+    "tertiary": {
+      "0": {
+        "value": "#1aff94"
+      },
+      "10": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.1}"
+          }
+        ]
+      },
+      "20": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.2}"
+          }
+        ]
+      },
+      "30": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.3}"
+          }
+        ]
+      },
+      "40": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.4}"
+          }
+        ]
+      },
+      "50": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.5}"
+          }
+        ]
+      },
+      "60": {
+        "value": "{color.tertiary.0}",
+        "modify": [
+          {
+            "type": "set",
+            "amount": "{lightness.6}"
+          }
+        ]
+      }
+    }
+  }
+}

packages/coral-tokens/src/tokens/lightness.json

@@ -0,0 +1,3 @@
+{
+  "lightness": [55, 50, 45, 40, 35, 30, 25, 20]
+}

packages/coral-tokens/style-dictionary.config.ts

@@ -0,0 +1,25 @@
+import { Config } from 'style-dictionary';
+
+const config: Config = {
+  source: ['src/tokens/**/*.json'],
+  platforms: {
+    scss: {
+      transformGroup: 'scss',
+      buildPath: 'scss/',
+      transforms: [
+        `attribute/cti`,
+        `name/cti/kebab`,
+        `shades-transform`,
+        `color/hex`,
+      ],
+      files: [
+        {
+          destination: '_variables.scss',
+          format: 'scss/variables',
+        },
+      ],
+    },
+  },
+};
+
+export default config;

packages/coral-tokens/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "style-dictionary.config.ts"]
+}