tokens-bruecke 2.14.3 → 2.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +31 -16
  2. package/bin/cli.js +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -111,7 +111,7 @@ The plugin supports both **exporting** and **importing** design tokens:
111
111
  Allows you to choose the color mode for the generated JSON. Default value is `HEX`. The plugin supports the following color modes:
112
112
 
113
113
  - `HEX` — HEX color format. Could be converted into `HEXA` if the color has an alpha channel.
114
- - `RGBA CSS` — RGBA color format in CSS syntax, e.g. `rgba(0, 0, 0, 0.5)`.
114
+ - `RGBA CSS` — RGBA color format in CSS syntax, e.g. `rgba(0, 0, 0, 0.5)`. When alpha is `1`, the output is `rgb(r, g, b)` (no alpha channel).
115
115
  - `RGBA Object` — RGBA color format in object syntax, e.g. `{ r: 0, g: 0, b: 0, a: 0.5 }`.
116
116
  - `HSLA CSS` — HSLA color format in CSS syntax, e.g. `hsla(0, 0%, 0%, 0.5)`.
117
117
  - `HSLA Object` — HSLA color format in object syntax, e.g. `{ h: 0, s: 0, l: 0, a: 0.5 }`.
@@ -226,16 +226,28 @@ If the format is `DTCG`:
226
226
 
227
227
  ### Include Figma metadata
228
228
 
229
- Is `off` by default. Allows you to include Figma metadata like `styleId`, `variableId`, etc. into the generated JSON. It will be added to the `$extensions` object.
229
+ Is `off` by default. Allows you to include Figma metadata like `variableId`, `codeSyntax`, etc. into the generated JSON. It is merged into the existing `$extensions` object alongside `mode`.
230
230
 
231
231
  ```json
232
- "figma": {
233
- "codeSyntax": {},
234
- "variableId": "VariableID:1:4",
235
- "collection": {
236
- "id": "VariableCollectionId:1:3",
237
- "name": "Primitives",
238
- "defaultModeId": "1:0"
232
+ "button": {
233
+ "background": {
234
+ "type": "color",
235
+ "value": "{colors.primary.10}",
236
+ "$extensions": {
237
+ "mode": {
238
+ "light": "{colors.primary.10}",
239
+ "dark": "{colors.primary.90}"
240
+ },
241
+ "figma": {
242
+ "codeSyntax": {},
243
+ "variableId": "VariableID:1:4",
244
+ "collection": {
245
+ "id": "VariableCollectionId:1:3",
246
+ "name": "Primitives",
247
+ "defaultModeId": "1:0"
248
+ }
249
+ }
250
+ }
239
251
  }
240
252
  }
241
253
  ```
@@ -734,16 +746,19 @@ It follows the same pattern as used by [Cobalt](https://cobalt-ui.pages.dev/guid
734
746
 
735
747
  Unlike design tokens, Figma variables now [support only 4 types](https://www.figma.com/plugin-docs/api/VariableResolvedDataType) — `COLOR`, `BOOLEAN`, `FLOAT` and `STRING`. So, the plugin converts them into the corresponding types from the [Design Tokens specification](https://design-tokens.github.io/community-group/format/#types).
736
748
 
737
- | Figma type | Design Tokens type |
738
- | ---------- | ----------------------------------------------------------------------------------- |
739
- | COLOR | [color](https://design-tokens.github.io/community-group/format/#color) |
740
- | BOOLEAN | _boolean_ \* |
741
- | FLOAT | [dimension](https://design-tokens.github.io/community-group/format/#dimension) \*\* |
742
- | STRING | _string_ \* |
749
+ | Figma type | Scope condition | Design Tokens type |
750
+ | ---------- | ------------------------ | ----------------------------------------------------------------------------------- |
751
+ | COLOR | — | [color](https://design-tokens.github.io/community-group/format/#color) |
752
+ | BOOLEAN | — | _boolean_ \* |
753
+ | FLOAT | `FONT_WEIGHT` scope | _string_ \* |
754
+ | FLOAT | `OPACITY` scope (no %) | _number_ \* |
755
+ | FLOAT | `OPACITY` scope (with %) | _string_ (e.g. `"10%"`) \* |
756
+ | FLOAT | all other scopes | [dimension](https://design-tokens.github.io/community-group/format/#dimension) \*\* |
757
+ | STRING | — | _string_ \* |
743
758
 
744
759
  \* native JSON types. The specification doesn't restrict the type of the value, so it could be any JSON type. Also see [this issue](https://github.com/design-tokens/community-group/issues/120#issuecomment-1279527414).
745
760
 
746
- \*\* currently figma supports only the `FLOAT` type for dimensions, that could be used only for `px` values. So, the plugin converts `FLOAT` values into `dimension` type with `px` unit.
761
+ \*\* Figma currently supports only `FLOAT` for numeric values used as dimensions, which map to `px` units. The plugin appends `px` to produce a valid dimension token.
747
762
 
748
763
  ---
749
764