diff --git a/docs/src/content/docs/getting-started/installation.mdx b/docs/src/content/docs/getting-started/installation.mdx index 697e78b06..7409cd328 100644 --- a/docs/src/content/docs/getting-started/installation.mdx +++ b/docs/src/content/docs/getting-started/installation.mdx @@ -291,7 +291,7 @@ $color-font-tertiary: #cccccc; ``` That's it! There is a lot more you can do with your style dictionary than generating files with color values. Take a look -at some [examples](examples.md) or take a deeper dive into [package structure](package_structure.md), [extending](extending.md), or how the [build process](build_process.md) works. +at some [examples](examples.md) or take a deeper dive into [package structure](/info/package_structure) or how the [build process](/info/architecture) works. ## Basic Usage @@ -301,13 +301,13 @@ at some [examples](examples.md) or take a deeper dive into [package structure](p style-dictionary build ``` -Call this in the root directory of your project, which must include a [configuration](config.md) file. +Call this in the root directory of your project, which must include a [configuration](/reference/config) file. -More detailed information about [using the Style Dictionary CLI is available here](using_the_cli.md). +More detailed information about [using the Style Dictionary CLI is available here](/getting-started/using_the_cli). ### NodeJS -You can also use the Style Dictionary build system in node if you want to [extend](extending.md) the functionality or use it in another build system like Grunt or Gulp. +You can also use the Style Dictionary build system in Node if you want to [extend](/getting-started/using_the_npm_module) the functionality or use it in another build system like Grunt or Gulp. ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; @@ -316,7 +316,7 @@ const sd = new StyleDictionary('config.json'); await sd.buildAllPlatforms(); ``` -The StyleDictionary constructor can also take a [configuration](config.md) object. +The StyleDictionary constructor can also take a [configuration](/reference/config) object. ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; @@ -341,4 +341,4 @@ const sd = new StyleDictionary({ await sd.buildAllPlatforms(); ``` -More detailed information about [using the Style Dictionary npm module is available here](using_the_npm_module.md). +More detailed information about [using the Style Dictionary npm module is available here](/getting-started/using_the_npm_module). diff --git a/docs/src/content/docs/reference/Hooks/Formats/index.md b/docs/src/content/docs/reference/Hooks/Formats/index.md index d6da4a6f3..de474074f 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/index.md +++ b/docs/src/content/docs/reference/Hooks/Formats/index.md @@ -77,7 +77,7 @@ Filtering tokens works by adding a `filter` attribute on the file object, where } ``` -The design token that is passed to the filter function has already been [transformed](transforms.md) and has [default metadata](tokens.md?id=default-design-token-metadata) added by Style Dictionary. +The design token that is passed to the filter function has already been [transformed](/reference/hooks/transforms) and has [default metadata](/info/tokens#default-design-token-metadata) added by Style Dictionary. ## References in output files diff --git a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md index 7ede11e16..5dcc646bb 100644 --- a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md +++ b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md @@ -8,8 +8,8 @@ You can find the source code of the built-in transforms here: ::: :::note -All the pre-defined transforms included in Style Dictionary **up until version 3** were using the [CTI structure](tokens.md?id=category-type-item) for matching tokens. -If you structure your design tokens differently you will need to write [custom transforms](transforms.md?id=defining-custom-transforms) or make sure the proper CTIs are on the attributes of your design tokens. +All the pre-defined transforms included in Style Dictionary **up until version 3** were using the [CTI structure](/info/tokens#category-type-item) for matching tokens. +If you structure your design tokens differently you will need to write [custom transforms](/reference/hooks/transforms#defining-custom-transforms) or make sure the proper CTIs are on the attributes of your design tokens. From **version 4 onwards**, instead of using the CTI structure of a token object, we're determining the token's `type` by the `token.type` property. Or, the `$type` property if you're using the [DTCG spec format](https://design-tokens.github.io/community-group/format/). diff --git a/docs/src/content/docs/reference/api.md b/docs/src/content/docs/reference/api.md index 931d5f351..a19c123cc 100644 --- a/docs/src/content/docs/reference/api.md +++ b/docs/src/content/docs/reference/api.md @@ -292,11 +292,11 @@ StyleDictionary.registerAction({ Add a custom [fileHeader](/reference/hooks/file_headers) to the Style Dictionary. File headers are used in formats to display some information about how the file was built in a comment. -| Param | Type | Description | -| ------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| options | `Object` | | -| options.name | `string` | Name of the format to be referenced in your config.json | -| options.fileHeader | `function` | Function that returns an array of strings, which will be mapped to comment lines. It takes a single argument which is the default message array. See [file headers](/references/hooks/formats.md#file-headers) for more information. Can be async. | +| Param | Type | Description | +| ------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| options | `Object` | | +| options.name | `string` | Name of the format to be referenced in your config.json | +| options.fileHeader | `function` | Function that returns an array of strings, which will be mapped to comment lines. It takes a single argument which is the default message array. See [file headers](/references/hooks/formats#file-headers) for more information. Can be async. | Example: @@ -342,11 +342,11 @@ StyleDictionary.registerFilter({ Add a custom [format](/reference/hooks/formats) to the Style Dictionary. -| Param | Type | Description | -| ---------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| format | `Object` | | -| format.name | `string` | Name of the format to be referenced in your config.json | -| format.formatter | `function` | Function to perform the format. Takes a single argument. See [creating custom formats](/references/hooks/formats.md#creating-formats) Must return a string, which is then written to a file. Can be async | +| Param | Type | Description | +| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| format | `Object` | | +| format.name | `string` | Name of the format to be referenced in your config.json | +| format.formatter | `function` | Function to perform the format. Takes a single argument. See [creating custom formats](/references/hooks/formats#creating-formats) Must return a string, which is then written to a file. Can be async | Example: diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js index 21eab2389..bd35ed106 100644 --- a/lib/common/transformGroups.js +++ b/lib/common/transformGroups.js @@ -22,10 +22,10 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/kebab](transforms.md#namectikebab) - * [size/px](transforms.md#sizepx) - * [color/css](transforms.md#colorcss) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/kebab](/reference/hooks/transforms#namectikebab) + * [size/px](/reference/hooks/transforms#sizepx) + * [color/css](/reference/hooks/transforms#colorcss) * * @memberof TransformGroups */ @@ -34,10 +34,10 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/pascal](transforms.md#namectipascal) - * [size/rem](transforms.md#sizerem) - * [color/hex](transforms.md#colorhex) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/pascal](/reference/hooks/transforms#namectipascal) + * [size/rem](/reference/hooks/transforms#sizerem) + * [color/hex](/reference/hooks/transforms#colorhex) * * @memberof TransformGroups */ @@ -46,13 +46,13 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/kebab](transforms.md#namectikebab) - * [time/seconds](transforms.md#timeseconds) - * [html/icon](transforms.md#htmlicon) - * [size/rem](transforms.md#sizerem) - * [color/css](transforms.md#colorcss) - * [asset/url](transforms.md#asset/url) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/kebab](/reference/hooks/transforms#namectikebab) + * [time/seconds](/reference/hooks/transforms#timeseconds) + * [html/icon](/reference/hooks/transforms#htmlicon) + * [size/rem](/reference/hooks/transforms#sizerem) + * [color/css](/reference/hooks/transforms#colorcss) + * [asset/url](/reference/hooks/transforms#asset/url) * * @memberof TransformGroups */ @@ -69,13 +69,13 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/kebab](transforms.md#namectikebab) - * [time/seconds](transforms.md#timeseconds) - * [html/icon](transforms.md#htmlicon) - * [size/rem](transforms.md#sizerem) - * [color/css](transforms.md#colorcss) - * [asset/url](transforms.md#asset/url) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/kebab](/reference/hooks/transforms#namectikebab) + * [time/seconds](/reference/hooks/transforms#timeseconds) + * [html/icon](/reference/hooks/transforms#htmlicon) + * [size/rem](/reference/hooks/transforms#sizerem) + * [color/css](/reference/hooks/transforms#colorcss) + * [asset/url](/reference/hooks/transforms#asset/url) * * @memberof TransformGroups */ @@ -92,13 +92,13 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/kebab](transforms.md#namectikebab) - * [time/seconds](transforms.md#timeseconds) - * [html/icon](transforms.md#htmlicon) - * [size/rem](transforms.md#sizerem) - * [color/hex](transforms.md#colorhex) - * [asset/url](transforms.md#asset/url) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/kebab](/reference/hooks/transforms#namectikebab) + * [time/seconds](/reference/hooks/transforms#timeseconds) + * [html/icon](/reference/hooks/transforms#htmlicon) + * [size/rem](/reference/hooks/transforms#sizerem) + * [color/hex](/reference/hooks/transforms#colorhex) + * [asset/url](/reference/hooks/transforms#asset/url) * * @memberof TransformGroups */ @@ -115,9 +115,9 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [attribute/color](transforms.md#attributecolor) - * [name/human](transforms.md#namehuman) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [attribute/color](/reference/hooks/transforms#attributecolor) + * [name/human](/reference/hooks/transforms#namehuman) * * @memberof TransformGroups */ @@ -125,11 +125,11 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/snake](transforms.md#namectisnake) - * [color/hex8android](transforms.md#colorhex8android) - * [size/remToSp](transforms.md#sizeremtosp) - * [size/remToDp](transforms.md#sizeremtodp) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/snake](/reference/hooks/transforms#namectisnake) + * [color/hex8android](/reference/hooks/transforms#colorhex8android) + * [size/remToSp](/reference/hooks/transforms#sizeremtosp) + * [size/remToDp](/reference/hooks/transforms#sizeremtodp) * * @memberof TransformGroups */ @@ -137,12 +137,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/camel](transforms.md#namecamel) - * [color/composeColor](transforms.md#colorcomposecolor) - * [size/compose/em](transforms.md#sizecomposeem) - * [size/compose/remToSp](transforms.md#sizecomposeremtosp) - * [size/compose/remToDp](transforms.md#sizecomposeremtodp) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/camel](/reference/hooks/transforms#namecamel) + * [color/composeColor](/reference/hooks/transforms#colorcomposecolor) + * [size/compose/em](/reference/hooks/transforms#sizecomposeem) + * [size/compose/remToSp](/reference/hooks/transforms#sizecomposeremtosp) + * [size/compose/remToDp](/reference/hooks/transforms#sizecomposeremtodp) * * @memberof TransformGroups */ @@ -157,12 +157,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/pascal](transforms.md#namectipascal) - * [color/UIColor](transforms.md#coloruicolor) - * [content/objC/literal](transforms.md#contentobjcliteral) - * [asset/objC/literal](transforms.md#assetobjcliteral) - * [size/remToPt](transforms.md#sizeremtopt) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/pascal](/reference/hooks/transforms#namectipascal) + * [color/UIColor](/reference/hooks/transforms#coloruicolor) + * [content/objC/literal](/reference/hooks/transforms#contentobjcliteral) + * [asset/objC/literal](/reference/hooks/transforms#assetobjcliteral) + * [size/remToPt](/reference/hooks/transforms#sizeremtopt) * * @memberof TransformGroups */ @@ -177,12 +177,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/camel](transforms.md#namecamel) - * [color/UIColorSwift](transforms.md#coloruicolorswift) - * [content/swift/literal](transforms.md#contentswiftliteral) - * [asset/swift/literal](transforms.md#assetswiftliteral) - * [size/swift/remToCGFloat](transforms.md#sizeswiftremtocgfloat) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/camel](/reference/hooks/transforms#namecamel) + * [color/UIColorSwift](/reference/hooks/transforms#coloruicolorswift) + * [content/swift/literal](/reference/hooks/transforms#contentswiftliteral) + * [asset/swift/literal](/reference/hooks/transforms#assetswiftliteral) + * [size/swift/remToCGFloat](/reference/hooks/transforms#sizeswiftremtocgfloat) * * @memberof TransformGroups */ @@ -197,12 +197,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/camel](transforms.md#namecamel) - * [color/UIColorSwift](transforms.md#coloruicolorswift) - * [content/swift/literal](transforms.md#contentswiftliteral) - * [asset/swift/literal](transforms.md#assetswiftliteral) - * [size/swift/remToCGFloat](transforms.md#sizeswiftremtocgfloat) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/camel](/reference/hooks/transforms#namecamel) + * [color/UIColorSwift](/reference/hooks/transforms#coloruicolorswift) + * [content/swift/literal](/reference/hooks/transforms#contentswiftliteral) + * [asset/swift/literal](/reference/hooks/transforms#assetswiftliteral) + * [size/swift/remToCGFloat](/reference/hooks/transforms#sizeswiftremtocgfloat) * * This is to be used if you want to have separate files per category and you don't want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText). * @@ -219,7 +219,7 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) + * [attribute/cti](/reference/hooks/transforms#attributecti) * * @memberof TransformGroups */ @@ -227,12 +227,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/camel](transforms.md#nameccamel) - * [color/hex8flutter](transforms.md#colorhex8flutter) - * [size/flutter/remToDouble](transforms.md#sizeflutterremToDouble) - * [content/flutter/literal](transforms.md#contentflutterliteral) - * [asset/flutter/literal](transforms.md#assetflutterliteral) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/camel](/reference/hooks/transforms#nameccamel) + * [color/hex8flutter](/reference/hooks/transforms#colorhex8flutter) + * [size/flutter/remToDouble](/reference/hooks/transforms#sizeflutterremToDouble) + * [content/flutter/literal](/reference/hooks/transforms#contentflutterliteral) + * [asset/flutter/literal](/reference/hooks/transforms#assetflutterliteral) * * @memberof TransformGroups */ @@ -247,12 +247,12 @@ export default { /** * Transforms: * - * [attribute/cti](transforms.md#attributecti) - * [name/camel](transforms.md#namecamel) - * [color/hex8flutter](transforms.md#colorhex8flutter) - * [size/flutter/remToDouble](transforms.md#sizeflutterremToDouble) - * [content/flutter/literal](transforms.md#contentflutterliteral) - * [asset/flutter/literal](transforms.md#assetflutterliteral) + * [attribute/cti](/reference/hooks/transforms#attributecti) + * [name/camel](/reference/hooks/transforms#namecamel) + * [color/hex8flutter](/reference/hooks/transforms#colorhex8flutter) + * [size/flutter/remToDouble](/reference/hooks/transforms#sizeflutterremToDouble) + * [content/flutter/literal](/reference/hooks/transforms#contentflutterliteral) + * [asset/flutter/literal](/reference/hooks/transforms#assetflutterliteral) * * This is to be used if you want to have separate files per category and you don't want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText). * @@ -270,9 +270,9 @@ export default { /** * Transforms: * - * [name/camel](transforms.md#namecamel) - * [size/object](transforms.md#sizeobject) - * [color/css](transforms.md#colorcss) + * [name/camel](/reference/hooks/transforms#namecamel) + * [size/object](/reference/hooks/transforms#sizeobject) + * [color/css](/reference/hooks/transforms#colorcss) * * @memberof TransformGroups */