Skip to content

Commit

Permalink
docs(DTCG): Update DTCG docs with latest link and fix full name (#1215)
Browse files Browse the repository at this point in the history
---------

Co-authored-by: Joren Broekema <joren.broekema@gmail.com>
  • Loading branch information
kaelig and jorenbroekema committed Jun 28, 2024
1 parent 634868a commit 02af685
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 17 deletions.
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

0 comments on commit 02af685

Please sign in to comment.