diff --git a/README.md b/README.md index 7966f20..2c15158 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,13 @@ This is a collection of transforms and formatters for adding support for `sets` for yarn: -``` +```shell yarn add style-dictionary-sets ``` for npm: -``` +```shell npm install style-dictionary-sets ``` @@ -44,7 +44,7 @@ module.exports = { ``` -This will add the a `sets` array property to the `attributes` object on [`DesignToken`](https://github.com/amzn/style-dictionary/blob/main/types/DesignToken.d.ts) if a token path contains the keyword `sets`. The value added to the `sets` array is the subsequent string in the `path` object. +This will add the `sets` array property to the `attributes` object on [`DesignToken`](https://github.com/amzn/style-dictionary/blob/main/types/DesignToken.d.ts) if a token path contains the keyword `sets`. The value added to the `sets` array is the subsequent string in the `path` object. #### Examples @@ -181,3 +181,40 @@ Some of this functionality is still being updated and refined for specific uses. ### `css/sets` formatter WIP + +### `font/openType` formatter + +This utility converts font-weight values from standard [Open Type syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping) into a CSS-safe format. + +| Value | Common weight name | +| -- | -- | +| 100 | Thin (Hairline) | +| 200 | Extra Light (Ultra Light) | +| 300 | Light | +| 400 | Normal (Regular) | +| 500 | Medium | +| 600 | Semi Bold (Demi Bold) | +| 700 | Bold | +| 800 | Extra Bold (Ultra Bold) | +| 900 | Black (Heavy) | +| 950 | Extra Black (Ultra Black) | + +In the `config.js` bring in the transform, register it to Style Dictionary and add it to the `transforms` array. + +```js +const StyleDictionary = require("style-dictionary"); +const CSSOpenTypeFormatter = require("style-dictionary-sets").CSSOpenTypeFormatter; + +StyleDictionary.registerTransform(CSSOpenTypeFormatter); + +module.exports = { + source: ["tokens/**/*.json"], + platforms: { + JSON: { + buildPath: "dist/json/", + transforms: [CSSOpenTypeFormatter.name], + files: ... + }, + }, +}; +``` diff --git a/index.js b/index.js index 7dbbcc3..385b02a 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ const JsonSetsFormatter = require("./lib/json-sets-formatter"); const AttributeSetsTransform = require("./lib/attribute-sets-transform"); const NameKebabTransfom = require("./lib/name-kebab-transform"); const CSSSetsFormatter = require("./lib/css-sets-formatter.js"); +const CSSOpenTypeFormatter = require("./lib/css-font-open-type-formatter.js"); const DroverJsonFormatter = require("./lib/drover-json-formatter.js"); module.exports = { @@ -9,5 +10,6 @@ module.exports = { AttributeSetsTransform, NameKebabTransfom, CSSSetsFormatter, + CSSOpenTypeFormatter, DroverJsonFormatter, }; diff --git a/lib/css-font-open-type-formatter.js b/lib/css-font-open-type-formatter.js new file mode 100644 index 0000000..6ad63fc --- /dev/null +++ b/lib/css-font-open-type-formatter.js @@ -0,0 +1,18 @@ +module.exports = { + type: "value", + name: "font/openType", + matcher: (token) => token.name.includes("font-weight"), + transformer: (token) => { + return { + "light": "300", + "regular": "400", + "medium": "500", + "semibold": "600", + "semi-bold": "600", + "bold": "700", + "extrabold": "800", + "extra-bold": "800", + "black": "900" + }[token.value] || token.value; + }, +}; diff --git a/tests/css-formatter.test.js b/tests/css-formatter.test.js index da59115..285809c 100644 --- a/tests/css-formatter.test.js +++ b/tests/css-formatter.test.js @@ -2,6 +2,7 @@ const StyleDictionary = require("style-dictionary"); const CSSSetsFormatter = require("../index").CSSSetsFormatter; const NameKebabTransfom = require("../index").NameKebabTransfom; const AttributeSetsTransform = require("../index").AttributeSetsTransform; +const CSSOpenTypeFormatter = require("../index").CSSOpenTypeFormatter; const helpers = require("./helpers"); const fs = require("fs"); @@ -9,6 +10,7 @@ const path = require("path"); StyleDictionary.registerTransform(NameKebabTransfom); StyleDictionary.registerTransform(AttributeSetsTransform); +StyleDictionary.registerTransform(CSSOpenTypeFormatter); StyleDictionary.registerFormat(CSSSetsFormatter); const generateConfig = (filename) => { @@ -17,7 +19,7 @@ const generateConfig = (filename) => { platforms: { CSS: { buildPath: helpers.outputDir, - transforms: [AttributeSetsTransform.name, NameKebabTransfom.name], + transforms: [AttributeSetsTransform.name, NameKebabTransfom.name, CSSOpenTypeFormatter.name], files: [ { destination: `${filename}.css`, diff --git a/tests/expected/basic.css b/tests/expected/basic.css index 9131e74..6263599 100644 --- a/tests/expected/basic.css +++ b/tests/expected/basic.css @@ -1,3 +1,4 @@ :root { --component-size: 12px; + --component-black-font-weight: 900; } diff --git a/tests/expected/basic.json b/tests/expected/basic.json index 0f7d595..826ff9b 100644 --- a/tests/expected/basic.json +++ b/tests/expected/basic.json @@ -29,6 +29,23 @@ "path": ["component", "size", "sets", "desktop"] } } + }, + "black-font-weight": { + "sets": { + "spectrum": { + "attributes": { + "sets": ["spectrum"] + }, + "filePath": "tests/fixtures/basic.json", + "isSource": true, + "original": { + "value": "black" + }, + "name": "component-black-font-weight-sets-spectrum", + "path": ["component", "black-font-weight", "sets", "spectrum"], + "value": "black" + } + } } } } diff --git a/tests/fixtures/basic.json b/tests/fixtures/basic.json index e0b3ba3..9d83b79 100644 --- a/tests/fixtures/basic.json +++ b/tests/fixtures/basic.json @@ -9,6 +9,13 @@ "value": "12px" } } + }, + "black-font-weight": { + "sets": { + "spectrum": { + "value": "black" + } + } } } }