From ddfd55261dd654bbe98b850878a8c2758d18a9c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?andr=C3=A9s=20gonz=C3=A1lez?= Date: Thu, 15 May 2025 14:44:51 +0200 Subject: [PATCH] :Books: Update design tokens doc (#6487) --- .../design-tokens/14-tokens-sets-edit.webp | Bin 2928 -> 7248 bytes docs/user-guide/design-tokens/index.njk | 15 ++++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/img/design-tokens/14-tokens-sets-edit.webp b/docs/img/design-tokens/14-tokens-sets-edit.webp index d11b0bac0497d8dabc231a0262297c0f558d1698..02c0c296cf7be7849af2fc226621afc01b4b4f5e 100644 GIT binary patch literal 7248 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 a token set is selected, the tokens within the selected set are displayed on the panel below.

-

Deleting and Renaming a Token Set

-

Token sets can be renamed or deleted by right-clicking on the token set and:

+

Deleting, Duplicating and Renaming a Token Set

+

Right-click a token set to perform these quick actions:

    -
  1. Selecting Rename, entering a new name, and hitting Enter.
  2. -
  3. Selecting Delete.
  4. +
  5. Rename: Give the set a new name and press Enter.
  6. +
  7. Duplicate: Make a copy of the set.
  8. +
  9. Delete: Remove the set permanently.
Tokens sets edit @@ -299,10 +300,10 @@ title: 10· Design Tokens

Once you have created a token set, you can start creating tokens within that token set. To do so, simply select the token set and create a new token.

If a token with the same name already exists in another set, a new token can still be created in the current set.

-

Creating Token Groups

-

You can create a token set group by simply naming your token sets to have a folder path. For example, you can create a Light group with a Global set and a Colors set using: Light/Global, Light/Colors.

+

Creating Token Set Folders

+

To group token sets just use folder-style names. For example, naming your sets Light/Global and Light/Colors will create a folder called Light with two sets inside it: Global and Colors.

- Tokens sets group + Tokens sets folder

Token Themes