Skip to content

Commit

Permalink
feat(coral-tokens): adding coral tokens package (#11)
Browse files Browse the repository at this point in the history 
* fix: removing defaultCollection

* feat(coral-tokens): adding style dictionary packages

* feat(coral-tokens): adding shades tokens + lightness variables

* feat(coral-tokens): adding color custom transform for shades

* feat(coral-tokens): adding transform model

* feat(coral-tokens): adding shades transform to custom transforms index

* feat(coral-tokens): generation coral-tokens package

* fix: update actions version

* fix(coral-tokens): fix formatting issues

* fix(coral-angular): ignoring generated files from linting

* fix: removing wrong dependency

* fix: updating yarn.lock
  • Loading branch information
@AndresVD21
AndresVD21 committed Nov 7, 2022
1 parent 107573e commit f4343d1
Show file tree
Hide file tree
Showing 17 changed files with 443 additions and 9 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
View file
Expand Up @@ -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: |
Expand All @@ -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

Expand Down
3 changes: 0 additions & 3 deletions nx.json
View file
Expand Up @@ -14,9 +14,6 @@
}
}
},
"cli": {
"defaultCollection": "@nxext/stencil"
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"]
Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/coral-angular/.eslintignore
View file
@@ -0,0 +1 @@
packages/coral-angular/src/lib/generated
3 changes: 2 additions & 1 deletion packages/coral-angular/project.json
View file
Expand Up @@ -36,7 +36,8 @@
"lintFilePatterns": [
"packages/coral-angular/**/*.ts",
"packages/coral-angular/**/*.html"
]
],
"ignorePath": "packages/coral-angular/.eslintignore"
}
}
},
Expand Down
18 changes: 18 additions & 0 deletions packages/coral-tokens/.eslintrc.json
View file
@@ -0,0 +1,18 @@
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}
25 changes: 25 additions & 0 deletions packages/coral-tokens/project.json
View file
@@ -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": []
}
10 changes: 10 additions & 0 deletions packages/coral-tokens/src/extensions/transforms/index.ts
View file
@@ -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;
26 changes: 26 additions & 0 deletions packages/coral-tokens/src/extensions/transforms/shades-transform/color-transform.ts
View file
@@ -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();
};
14 changes: 14 additions & 0 deletions packages/coral-tokens/src/extensions/transforms/shades-transform/transform.ts
View file
@@ -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,
},
};
6 changes: 6 additions & 0 deletions packages/coral-tokens/src/extensions/transforms/transform.model.ts
View file
@@ -0,0 +1,6 @@
import { Transform } from 'style-dictionary';

export interface CustomTransform {
name: string;
transform: Transform;
}
181 changes: 181 additions & 0 deletions packages/coral-tokens/src/tokens/color/shades.json
View file
@@ -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}"
}
]
}
}
}
}
3 changes: 3 additions & 0 deletions packages/coral-tokens/src/tokens/lightness.json
View file
@@ -0,0 +1,3 @@
{
"lightness": [55, 50, 45, 40, 35, 30, 25, 20]
}
25 changes: 25 additions & 0 deletions packages/coral-tokens/style-dictionary.config.ts
View file
@@ -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;
10 changes: 10 additions & 0 deletions packages/coral-tokens/tsconfig.json
View file
@@ -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"]
}

0 comments on commit f4343d1

Please sign in to comment.