From 7489fceb767f51544724cdc5db06b9fd798fa652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 27 Sep 2024 13:45:41 +0200 Subject: [PATCH] chore: use `starlight-links-validator` to detect dead links --- .../content/docs/info/package_structure.mdx | 10 +- docs/src/content/docs/info/tokens.md | 2 +- .../docs/reference/Hooks/Formats/index.md | 24 ++-- .../reference/Hooks/Formats/predefined.md | 92 ++++++------- .../Hooks/Transform Groups/predefined.md | 4 +- .../reference/Hooks/Transforms/predefined.md | 2 +- docs/src/content/docs/reference/api.md | 22 +-- docs/src/content/docs/reference/config.md | 12 +- docs/src/remark-playground.ts | 125 +++++++++--------- docs/starlight-config.ts | 4 + lib/common/transformGroups.js | 4 +- package-lock.json | 59 ++++++++- package.json | 1 + 13 files changed, 210 insertions(+), 151 deletions(-) diff --git a/docs/src/content/docs/info/package_structure.mdx b/docs/src/content/docs/info/package_structure.mdx index aaa9e2e8c..2e4ceaf75 100644 --- a/docs/src/content/docs/info/package_structure.mdx +++ b/docs/src/content/docs/info/package_structure.mdx @@ -24,11 +24,11 @@ Here is a basic example of what a Style Dictionary package looks like. -| Name | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `config.json` | This is where the [configuration](/reference/config) for the style dictionary lives, where you define what happens when Style Dictionary runs | -| design token files | [Design tokens](/references/info/tokens) are saved as a collection of JSON or JS module files. You can put them wherever you like - the path to them should be in the `source` attribute on your `config.json` file. | -| assets (optional) | Assets can be included in your style dictionary package, allowing you to keep them in your style dictionary as a single source of truth. | +| Name | Description | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `config.json` | This is where the [configuration](/reference/config) for the style dictionary lives, where you define what happens when Style Dictionary runs | +| design token files | [Design tokens](/info/tokens) are saved as a collection of JSON or JS module files. You can put them wherever you like - the path to them should be in the `source` attribute on your `config.json` file. | +| assets (optional) | Assets can be included in your style dictionary package, allowing you to keep them in your style dictionary as a single source of truth. | ## Assets diff --git a/docs/src/content/docs/info/tokens.md b/docs/src/content/docs/info/tokens.md index 942ec6dc1..870796b00 100644 --- a/docs/src/content/docs/info/tokens.md +++ b/docs/src/content/docs/info/tokens.md @@ -359,4 +359,4 @@ The CTI is implicit in the structure, the category is 'size' and the type is 'fo Structuring design tokens in this manner gives us consistent naming and accessing of these tokens. You don't need to remember if it is `button_color_error` or `error_button_color`, it is `color_background_button_error`! -You can organize and name your design tokens however you want, **there are no restrictions**. But there are a good amount of helpers if you do use this structure, like the [`'attribute/cti'` transform](/reference/hooks/transforms#attributecti) which adds attributes to the design token of its CTI based on the path in the object. These attributes can then be used in other transforms to get some info about the token, or to [filter tokens using filters](/reference/hooks/filters). +You can organize and name your design tokens however you want, **there are no restrictions**. But there are a good amount of helpers if you do use this structure, like the [`'attribute/cti'` transform](/reference/hooks/transforms/predefined#attributecti) which adds attributes to the design token of its CTI based on the path in the object. These attributes can then be used in other transforms to get some info about the token, or to [filter tokens using filters](/reference/hooks/filters). diff --git a/docs/src/content/docs/reference/Hooks/Formats/index.md b/docs/src/content/docs/reference/Hooks/Formats/index.md index dd6ed1262..a31e98f8d 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/index.md +++ b/docs/src/content/docs/reference/Hooks/Formats/index.md @@ -29,7 +29,7 @@ You use formats in your config file under `platforms` > `[Platform]` > `files` > } ``` -There is an extensive (but not exhaustive) list of [built-in formats](predefined) available in Style Dictionary. +There is an extensive (but not exhaustive) list of [built-in formats](/reference/hooks/formats/predefined) available in Style Dictionary. ## Format configuration @@ -55,16 +55,16 @@ Formats can take configuration to make them more flexible. This allows you to re } ``` -In this example we are adding the `mapName` configuration to the `scss/map-deep` format. This will change the name of the SCSS map in the output. Not all formats have the configuration options; format configuration is defined by the format itself. To see the configuration options of a format, take a look at the documentation of the [specific format](predefined). +In this example we are adding the `mapName` configuration to the `scss/map-deep` format. This will change the name of the SCSS map in the output. Not all formats have the configuration options; format configuration is defined by the format itself. To see the configuration options of a format, take a look at the documentation of the [specific format](/reference/hooks/formats/predefined). ## Filtering tokens -A special file configuration is [`filter`](/reference/hooks/filter), which will filter the tokens before they get to the format. +A special file configuration is [`filter`](/reference/hooks/filters), which will filter the tokens before they get to the format. This allows you to re-use the same format to generate multiple files with different sets of tokens. Filtering tokens works by adding a `filter` attribute on the file object, where `filter` is: - An object which gets passed to [Lodash's filter method](https://lodash.com/docs/4.17.14#filter). -- A string that references the name of a registered [`filter`](/reference/hooks/filter), using the [`registerFilter`](/reference/api#registerfilter) method +- A string that references the name of a registered [`filter`](/reference/hooks/filters), using the [`registerFilter`](/reference/api#registerfilter) method - A function that takes a token and returns a boolean if the token should be included (true) or excluded (false). **This is only available if you are defining your configuration in Javascript.** ```javascript @@ -170,13 +170,13 @@ export default { Not all formats use the `outputReferences` option because that file format might not support it (like JSON for example). The current list of formats that handle `outputReferences`: -- [css/variables](predefined/#cssvariables) -- [scss/variables](predefined/#scssvariables) -- [less/variables](predefined/#lessvariables) -- [android/resources](predefined/#androidresources) -- [compose/object](predefined/#composeobject) -- [ios-swift/class.swift](predefined/#ios-swiftclassswift) -- [flutter/class.dart](predefined/#flutterclassdart) +- [css/variables](/reference/hooks/formats/predefined/#cssvariables) +- [scss/variables](/reference/hooks/formats/predefined/#scssvariables) +- [less/variables](/reference/hooks/formats/predefined/#lessvariables) +- [android/resources](/reference/hooks/formats/predefined/#androidresources) +- [compose/object](/reference/hooks/formats/predefined/#composeobject) +- [ios-swift/class.swift](/reference/hooks/formats/predefined/#ios-swiftclassswift) +- [flutter/class.dart](/reference/hooks/formats/predefined/#flutterclassdart) You can create custom formats that output references as well. See the [Custom format with output references](#custom-format-with-output-references) section. @@ -205,7 +205,7 @@ By default Style Dictionary adds a file header comment in the top of files built You can remove these comments with the option: `showFileHeader: false` if you do not want them in your generated files. You can also create your own file header or extend the default one. This could be useful if you want to put a version number or hash of the source files rather than a timestamp. -Custom file headers can be added the same way you would add a custom format, either by using the [`registerFileHeader`](/reference/api#registerfileheader) function or adding the [`fileHeader`](/reference/hooks/file-headers) object directly in the Style Dictionary [configuration](/reference/config). Your custom file header can be used in built-in formats as well as custom formats. To use a custom file header in a custom format see the [`fileHeader`](/reference/hooks/formats#fileheader) format helper method. +Custom file headers can be added the same way you would add a custom format, either by using the [`registerFileHeader`](/reference/api#registerfileheader) function or adding the [`fileHeader`](/reference/hooks/file-headers) object directly in the Style Dictionary [configuration](/reference/config). Your custom file header can be used in built-in formats as well as custom formats. To use a custom file header in a custom format see the [`fileHeader`](/reference/hooks/file-headers) format helper method. ```js title="build-tokens.js" import StyleDictionary from 'style-dictionary'; diff --git a/docs/src/content/docs/reference/Hooks/Formats/predefined.md b/docs/src/content/docs/reference/Hooks/Formats/predefined.md index e299f7489..865386852 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/predefined.md +++ b/docs/src/content/docs/reference/Hooks/Formats/predefined.md @@ -16,7 +16,7 @@ Creates a CSS file with variable definitions based on the style dictionary | ---------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` | `Object` | | | `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | | `options.outputReferenceFallbacks` | `boolean` | Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the format function. | | `options.selector` | `string` | Override the root css selector | | `options.formatting` | `FormattingOverrides` | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `indentation`, `commentStyle` and `commentPosition`. The `fileHeaderTimestamp`, `header`, and `footer` formatting options are used for the fileHeader helper. | @@ -57,7 +57,7 @@ Name the map by adding a `mapName` property on the `options` object property on | Param | Type | Description | | ---------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` | `Object` | | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | | `options.outputReferenceFallbacks` | `boolean` | Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the format function. | | `options.themeable` | `boolean` | Whether or not tokens should default to being themeable, if not otherwise specified per token. Defaults to `false`. | | `options.mapName` | `string` | Name of your SCSS map. | @@ -91,7 +91,7 @@ Add `!default` to any variable by setting a `themeable: true` attribute in the t | ---------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` | `Object` | | | `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | | `options.outputReferenceFallbacks` | `boolean` | Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the format function. | | `options.themeable` | `boolean` | Whether or not tokens should default to being themeable, if not otherwise specified per token. Defaults to `false`. | | `options.formatting` | `FormattingOverrides` | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `indentation`, `commentStyle` and `commentPosition`. The `fileHeaderTimestamp`, `header`, and `footer` formatting options are used for the fileHeader helper. | @@ -128,7 +128,7 @@ Creates a LESS file with variable definitions based on the style dictionary | ---------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` | `Object` | | | `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | | `options.outputReferenceFallbacks` | `boolean` | Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the format function. | | `options.formatting` | `FormattingOverrides` | Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `indentation`, `commentStyle` and `commentPosition`. The `fileHeaderTimestamp`, `header`, and `footer` formatting options are used for the fileHeader helper. | @@ -405,11 +405,11 @@ object property on the `file` object property configuration. You can also provide a `resourceMap` if you don't use Style Dictionary's built-in CTI structure. -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options` | `Object` | | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options` | `Object` | | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | Example: @@ -559,14 +559,14 @@ Example: Creates a Kotlin file for Compose containing an object with a `val` for each property. -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options` | `Object` | | -| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `['androidx.compose.ui.graphics.Color', 'androidx.compose.ui.unit.*']`. | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | -| `options.className` | `string` | The name of the generated Kotlin object | -| `options.packageName` | `string` | The package for the generated Kotlin object | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options` | `Object` | | +| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `['androidx.compose.ui.graphics.Color', 'androidx.compose.ui.unit.*']`. | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| `options.className` | `string` | The name of the generated Kotlin object | +| `options.packageName` | `string` | The package for the generated Kotlin object | Example: @@ -692,14 +692,14 @@ Creates an Objective-C implementation file of strings Creates a Swift implementation file of a class with values. It adds default `class` object type, `public` access control and `UIKit` import. -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options` | `Object` | | -| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | -| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | -| `options.className` | `string` | The name of the generated Swift object | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options` | `Object` | | +| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | +| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | +| `options.className` | `string` | The name of the generated Swift object | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | Example: @@ -715,14 +715,14 @@ public class StyleDictionary { Creates a Swift implementation file of an enum with values. It adds default `enum` object type, `public` access control and `UIKit` import. -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options` | `Object` | | -| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | -| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | -| `options.className` | `string` | The name of the generated Swift object | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options` | `Object` | | +| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | +| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | +| `options.className` | `string` | The name of the generated Swift object | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | Example: @@ -745,15 +745,15 @@ objectType: 'struct', accessControl: 'internal', ``` -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options` | `Object` | | -| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | -| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | -| `options.className` | `string` | The name of the generated Swift object | -| `options.objectType` | `string` | The type of the generated Swift object. Defaults to `'class'`. | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options` | `Object` | | +| `options.accessControl` | `string` | Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object. Defaults to `public`. | +| `options.import` | `string[] \| string` | Modules to import. Can be a string or array of strings. Defaults to `'UIKit'`. | +| `options.className` | `string` | The name of the generated Swift object | +| `options.objectType` | `string` | The type of the generated Swift object. Defaults to `'class'`. | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | Example: @@ -892,10 +892,10 @@ Example: Creates a Dart implementation file of a class with values -| Param | Type | Description | -| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | -| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | +| Param | Type | Description | +| -------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `options.showFileHeader` | `boolean` | Whether or not to include a comment that has the build date. Defaults to `true` | +| `options.outputReferences` | `boolean \| OutputReferencesFunction` | Whether or not to keep [references](/reference/hooks/formats#references-in-output-files) (a -> b -> c) in the output. Defaults to `false`. Also allows passing a function to conditionally output references on a per token basis. | Example: diff --git a/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md b/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md index 2479137b2..b05ac5c68 100644 --- a/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md +++ b/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md @@ -183,7 +183,7 @@ Transforms: [attribute/cti](/reference/hooks/transforms/predefined#attributecti) [name/camel](/reference/hooks/transforms/predefined#namecamel) [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter) -[size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremToDouble) +[size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble) [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral) [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral) @@ -196,7 +196,7 @@ Transforms: [attribute/cti](/reference/hooks/transforms/predefined#attributecti) [name/camel](/reference/hooks/transforms/predefined#namecamel) [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter) -[size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremToDouble) +[size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble) [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral) [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral) diff --git a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md index c31608879..5fce61edc 100644 --- a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md +++ b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md @@ -8,7 +8,7 @@ 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](/info/tokens#category-type-item) for matching 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. diff --git a/docs/src/content/docs/reference/api.md b/docs/src/content/docs/reference/api.md index 472d9f101..a562ba9e4 100644 --- a/docs/src/content/docs/reference/api.md +++ b/docs/src/content/docs/reference/api.md @@ -442,11 +442,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/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](/reference/hooks/file-headers) for more information. Can be async. | Example: @@ -492,11 +492,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.format | `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 | +| Param | Type | Description | +| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| format | `Object` | | +| format.name | `string` | Name of the format to be referenced in your config.json | +| format.format | `function` | Function to perform the format. Takes a single argument. See [custom formats](/reference/hooks/formats#custom-formats). Must return a string, which is then written to a file. Can be async | Example: @@ -603,7 +603,7 @@ StyleDictionary.registerTransform({ > `StyleDictionary.registerTransformGroup(transformGroup) ⇒ StyleDictionary` -Add a custom [transformGroup](/reference/hooks/transform_groups) to the Style Dictionary, which is a +Add a custom [transformGroup](/reference/hooks/transform-groups) to the Style Dictionary, which is a group of transforms. | Param | Type | Description | diff --git a/docs/src/content/docs/reference/config.md b/docs/src/content/docs/reference/config.md index 5ecd2fbc6..2f8e26e6f 100644 --- a/docs/src/content/docs/reference/config.md +++ b/docs/src/content/docs/reference/config.md @@ -6,7 +6,7 @@ sidebar: Style dictionaries are configuration driven. Your configuration lets Style Dictionary know: -1. Where to find your [design tokens](/reference/tokens) +1. Where to find your [design tokens](/info/tokens) 1. How to transform and format them to generate output files Here is an example configuration: @@ -89,7 +89,7 @@ Some interesting things you can do in a JS file that you cannot do in a JSON fil ## Using configuration files -By default, the Style Dictionary [CLI](/reference/using_the_cli) looks for a `config.json` or `config.js` file in the root of your package. +By default, the Style Dictionary [CLI](/getting-started/using_the_cli) looks for a `config.json` or `config.js` file in the root of your package. ```json5 // package.json @@ -98,7 +98,7 @@ By default, the Style Dictionary [CLI](/reference/using_the_cli) looks for a `co } ``` -You can also specify a custom location when you use the [CLI](/reference/using_the_cli) with the `--config` parameter. +You can also specify a custom location when you use the [CLI](/getting-started/using_the_cli) with the `--config` parameter. ```json5 // package.json @@ -109,7 +109,7 @@ You can also specify a custom location when you use the [CLI](/reference/using_t ## Using in Node -You can also use Style Dictionary as an [npm module](/reference/using_the_npm_module) and further customize how Style Dictionary is run, for example running Style Dictionary multiple times with different configurations. To do this you would create a Javascript file that imports the Style Dictionary npm module and calls the [`.extend`](/reference/api#extend) and [`.buildAllPlatforms`](/reference/api#buildallplatforms) functions. +You can also use Style Dictionary as an [npm module](/getting-started/using_the_npm_module) and further customize how Style Dictionary is run, for example running Style Dictionary multiple times with different configurations. To do this you would create a Javascript file that imports the Style Dictionary npm module and calls the [`.extend`](/reference/api#extend) and [`.buildAllPlatforms`](/reference/api#buildallplatforms) functions. ```javascript // build-tokens.js @@ -172,7 +172,7 @@ A platform is a build target that tells Style Dictionary how to properly transfo | `buildPath` | `string` | Base path to build the files, must end with a trailing slash. | | `expand` | `ExpandConfig` | Configures whether and how composite (object-value) tokens will be expanded into separate tokens. `false` by default. Supports either `boolean`, `ExpandFilter` function or an Object containing a `typesMap` property and optionally an `include` OR `exclude` property. | | `preprocessors` | `string[]` | Which [preprocessors](/reference/hooks/preprocessors) (by name) to run on the full token dictionary when building for this particular platform, before any transforms run, can be registered using `.registerPreprocessor`. You can also configure this on the global config. | -| `options` | `Object` | Options that apply to all files in the platform, for example [`outputReferences`](/reference/hooks/format#references-in-output-files) and `showFileHeader` | +| `options` | `Object` | Options that apply to all files in the platform, for example [`outputReferences`](/reference/hooks/formats#references-in-output-files) and `showFileHeader` | | `prefix` | `string` | A string that prefix the name of the design tokens. | | `files` | `File[]` | [Files](#file) to be generated for this platform. | | `actions` | `string[]` | [Actions](/reference/hooks/actions) to be performed after the files are built for that platform. Actions can be any arbitrary code you want to run like copying files, generating assets, etc. You can use pre-defined actions or create custom actions. | @@ -188,7 +188,7 @@ A File configuration object represents a single output file. The `options` objec | `filter` | `string \| function \| Object` | A function, string or object used to filter the tokens that will be included in the file. If a function is provided, each design token will be passed to the function and the result (true or false) will determine whether the design token is included. If an object is provided, each design token will be matched against the object using a partial deep comparison. If a match is found, the design token is included. If a string is passed, is considered a custom filter registered via [registerFilter](/reference/api#registerfilter) | | `options` | `Object` | A set of extra options associated with the file. Includes `showFileHeader` and [`outputReferences`](/reference/hooks/formats#references-in-output-files). | | `options.showFileHeader` | `boolean` | If the generated file should have a comment at the top about being generated. The default fileHeader comment has "Do not edit + Timestamp". By default is "true". | -| `options.fileHeader` | `string \|function` | A custom fileHeader that can be either a name of a registered file header (string) or an inline [fileHeader](/reference/hooks/formats#customfileheader) function. | +| `options.fileHeader` | `string \|function` | A custom fileHeader that can be either a name of a registered file header (string) or an inline [fileHeader](/reference/hooks/formats#file-headers) function. | | `options.outputReferences` | `boolean \| OutputReferencesFunction` | If the file should keep token [references](/reference/hooks/formats#references-in-output-files). By default this is "false". Also allows passing a function to conditionally output references on a per token basis. | ### Expand diff --git a/docs/src/remark-playground.ts b/docs/src/remark-playground.ts index 28d295934..192befd05 100644 --- a/docs/src/remark-playground.ts +++ b/docs/src/remark-playground.ts @@ -1,72 +1,71 @@ -import type { FootnoteDefinition, Root, Html, Blockquote, Paragraph, ListItem } from 'mdast'; -import { visit } from 'unist-util-visit'; +import type { Root, Html, Paragraph, Code } from 'mdast'; +import { visit, type Visitor } from 'unist-util-visit'; -const paragraphVisitor = ( - node: Paragraph, - index?: number, - parent?: Root | Blockquote | FootnoteDefinition | ListItem, -) => { - if ( - node.type === 'paragraph' && - node.children[0].type === 'text' && - node.children[0].value === '~ sd-playground' && - index && - parent - ) { - const serialize = (v: { value?: string; lang?: string }) => - JSON.stringify(v).replace(/"/g, '"'); - let tokensData = serialize({}); - let configData = serialize({}); - let scriptData = serialize({}); - let skipAmount = 1; - let defaultSelected; +const paragraphVisitor: Visitor = (node, index, parent) => { + if (node.type === 'paragraph') { + const _node = node as Paragraph; + if ( + _node.children[0].type === 'text' && + _node.children[0].value === '~ sd-playground' && + index && + parent + ) { + const serialize = (v: { value?: string; lang?: string }) => + JSON.stringify(v).replace(/"/g, '"'); + let tokensData = serialize({}); + let configData = serialize({}); + let scriptData = serialize({}); + let skipAmount = 1; + let defaultSelected; - for (const child of parent.children.slice(index + 1, index + 4)) { - if (child.type !== 'code') break; - if (child.meta) { - const metas = child.meta?.split(' '); - switch (metas[0]) { - case 'tokens': - tokensData = serialize({ - value: child.value, - lang: child.lang ?? 'text', - }); - break; - case 'script': - scriptData = serialize({ - value: child.value, - lang: child.lang ?? 'text', - }); - break; - case 'config': - configData = serialize({ - value: child.value, - lang: child.lang ?? 'text', - }); - break; - } - if (metas[1] === 'selected') { - defaultSelected = metas[0]; + for (const child of parent.children.slice(index + 1, index + 4)) { + if (child.type !== 'code') break; + const codeNode = child as Code; + if (codeNode.meta) { + const metas = codeNode.meta?.split(' '); + switch (metas[0]) { + case 'tokens': + tokensData = serialize({ + value: codeNode.value, + lang: codeNode.lang ?? 'text', + }); + break; + case 'script': + scriptData = serialize({ + value: codeNode.value, + lang: codeNode.lang ?? 'text', + }); + break; + case 'config': + configData = serialize({ + value: codeNode.value, + lang: codeNode.lang ?? 'text', + }); + break; + } + if (metas[1] === 'selected') { + defaultSelected = metas[0]; + } } + + skipAmount++; } - skipAmount++; + const newNode = { + type: 'html', + value: `
`, + } as Html; + parent.children.splice(index, skipAmount, newNode); } - - const newNode = { - type: 'html', - value: `
`, - } as Html; - parent.children.splice(index, skipAmount, newNode); } }; diff --git a/docs/starlight-config.ts b/docs/starlight-config.ts index 98409d199..4a56d11ae 100644 --- a/docs/starlight-config.ts +++ b/docs/starlight-config.ts @@ -1,7 +1,11 @@ import type { StarlightUserConfig } from '@astrojs/starlight/types'; +import starlightLinksValidator from 'starlight-links-validator' import { pluginLanguageClass } from './expressive-code-plugin-language-class.ts'; export default { + plugins: [ + starlightLinksValidator() + ], expressiveCode: { plugins: [ // Call the plugin initialization function inside the `plugins` array diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js index 27e509d5b..1e471cae9 100644 --- a/lib/common/transformGroups.js +++ b/lib/common/transformGroups.js @@ -275,7 +275,7 @@ export default { * [attribute/cti](/reference/hooks/transforms/predefined#attributecti) * [name/camel](/reference/hooks/transforms/predefined#nameccamel) * [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter) - * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremToDouble) + * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble) * [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral) * [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral) * @@ -295,7 +295,7 @@ export default { * [attribute/cti](/reference/hooks/transforms/predefined#attributecti) * [name/camel](/reference/hooks/transforms/predefined#namecamel) * [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter) - * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremToDouble) + * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble) * [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral) * [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral) * diff --git a/package-lock.json b/package-lock.json index 48216c94b..dc30697a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "style-dictionary", - "version": "4.1.2", + "version": "4.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "style-dictionary", - "version": "4.1.2", + "version": "4.1.3", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { @@ -67,6 +67,7 @@ "prettier": "^3.0.3", "sass": "^1.69.5", "sharp": "^0.32.5", + "starlight-links-validator": "^0.12.1", "stylus": "^0.56.0", "typescript": "^5.3.3", "unist-util-visit": "^5.0.0", @@ -6042,6 +6043,12 @@ "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==", "dev": true }, + "node_modules/@types/picomatch": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-2.3.3.tgz", + "integrity": "sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -13338,6 +13345,18 @@ "node": ">= 0.10" } }, + "node_modules/is-absolute-url": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz", + "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-alphabetical": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", @@ -21216,6 +21235,42 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/starlight-links-validator": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/starlight-links-validator/-/starlight-links-validator-0.12.1.tgz", + "integrity": "sha512-LhRuGaI9Rp7c7ltwcG0BfCZuAN1d15oYbDB4jXblJ6zsiFcrSGHNlDnKXJHEJZ6XhJ+eOpd1IsHLFLh5Sq6uHg==", + "dev": true, + "dependencies": { + "@types/picomatch": "2.3.3", + "github-slugger": "2.0.0", + "hast-util-from-html": "2.0.1", + "hast-util-has-property": "3.0.0", + "is-absolute-url": "4.0.1", + "kleur": "4.1.5", + "mdast-util-to-string": "4.0.0", + "picomatch": "4.0.2", + "unist-util-visit": "5.0.0" + }, + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "@astrojs/starlight": ">=0.15.0", + "astro": ">=4.0.0" + } + }, + "node_modules/starlight-links-validator/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/statuses": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", diff --git a/package.json b/package.json index e9e75ff86..d07cc44aa 100644 --- a/package.json +++ b/package.json @@ -156,6 +156,7 @@ "prettier": "^3.0.3", "sass": "^1.69.5", "sharp": "^0.32.5", + "starlight-links-validator": "^0.12.1", "stylus": "^0.56.0", "typescript": "^5.3.3", "unist-util-visit": "^5.0.0",