Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(DTCG): Update DTCG docs with latest link and fix full name #1215

Merged
merged 7 commits into from
May 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ template: splash
hero:
tagline:
Export your Design Tokens to any platform - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.
Forward-compatible with <a href="https://design-tokens.github.io/community-group/format/">Design Token Community Group spec</a>.
Forward-compatible with <a href="https://tr.designtokens.org/format/">Design Tokens Community Group spec</a>.
image:
file: ../../assets/logo.png
actions:
Expand Down
21 changes: 11 additions & 10 deletions docs/src/content/docs/info/DTCG.mdx
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
---
title: Design Token Community Group
title: Design Tokens Community Group
sidebar:
order: 4
---

import tokens from '/public/demo-tokens.json';

There is a [W3C Design Token Community Group](https://www.w3.org/community/design-tokens/), whose goal it is to "provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale".
The [Design Tokens W3C Community Group](https://www.w3.org/community/design-tokens/)’s (DTCG) goal is to "provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale".

What that boils down to right now is a [draft specification for how Design Tokens ought to be formatted](https://design-tokens.github.io/community-group/format/), for cross-tool and cross-platform interoperability.
Since Style Dictionary v4, we have first-class support for this format.
The Community Group publishes a [specification defining how Design Tokens ought to be formatted](https://tr.designtokens.org/format/) for cross-tool and cross-platform interoperability.

## Convert your Tokens to DTCG
**As of version 4**, Style Dictionary has first-class support for the DTCG format.

We also export a tool that allows you to convert your design tokens in the old format to the DTCG format:
## Convert your tokens to the DTCG format

We provide a tool that converts design tokens from the Style Dictionary v3 JSON format to the DTCG format:

<div spacer></div>
<sd-dtcg-convert></sd-dtcg-convert>

What it does:

- Turn `value`, `type` and `description` design token property keys into `$value`, `$type` and `$description` respectively.
- Move the `$type` properties from the design tokens onto the uppermost common ancestor token group
- ✅ Converts `value`, `type` and `description` design token property keys into `$value`, `$type` and `$description` respectively.
- ✅ Moves `$type` properties from the uppermost common ancestor token group to individual design tokens

What it does not do (atm, feel free to raise suggestions):
What it does not do (at the moment, [suggestions welcome](https://github.com/amzn/style-dictionary/issues/new?title=Conversion%20tool%20suggestion:%20%3Cyour-suggestion-here%3E)):

- Refactor type values commonly used to the DTCG types, e.g. size -> dimension.
- ⛔ It does not refactor type values commonly used to the DTCG types (for example: `"$type": "size"` -> `"$type": "dimension"`).

## Live demo

Expand Down
10 changes: 5 additions & 5 deletions docs/src/content/docs/reference/Utils/DTCG.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Design Token Community Group
title: Design Tokens Community Group
---

These utilities have to do with the [Design Token Community Group Draft spec](https://design-tokens.github.io/community-group/format/).
These utilities have to do with the [Design Tokens W3C Community Group specification](https://tr.designtokens.org/format/).

For converting a ZIP or JSON tokens file to DTCG format, use the button below:
For converting a ZIP or JSON tokens file to the DTCG format, use the button below:

<sd-dtcg-convert></sd-dtcg-convert>

Expand Down Expand Up @@ -61,11 +61,11 @@ const outputBlob = convertZIPToDTCG(ZIPBlobOrFilepath, { applyTypesToGroup: fals

## typeDtcgDelegate

This function processes your ["Design Token Community Group Draft spec"-compliant](https://design-tokens.github.io/community-group/format/) dictionary of tokens, and ensures that `$type` inheritance is applied.
This function processes your ["Design Tokens Community Group Draft spec"-compliant](https://tr.designtokens.org/format/) dictionary of tokens, and ensures that `$type` inheritance is applied.

We built this utility because it's cheaper to apply the inheritance once, rather than on every access of a token's "$type" property, checking the ancestor tree to find it.

This utility is ran by default in Style-Dictionary after the parser hook and before the preprocessor hook.
This utility runs by default in Style-Dictionary after the parser hook and before the preprocessor hook.

```js
import { typeDtcgDelegate } from 'style-dictionary/utils';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/version-4/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ Most of the [Built-in transforms](/reference/hooks/transforms/predefined) `match
This in turn would rely on applying the [`attribute/cti` transform](/reference/hooks/transforms/predefined#attributecti) so that this attribute was set on a token.

In version 4, we have removed almost all hard-coupling/reliances on CTI structure and instead we will look for a `token.type` property to determine what type of token a design token is.
This aligns more with the [Design Token Community Group draft specification](https://design-tokens.github.io/community-group/format/) for standardizing design tokens JSON format.
This aligns more with the [Design Tokens Community Group specification](https://tr.designtokens.org/format/) for standardizing design tokens JSON format.

```json title="tokens.json" ins={3-4,7} ""type": "color""
{
Expand Down