@marioschmidt/design-system-tokens 1.0.30 โ 1.0.32
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.
- package/README.md +443 -67
- package/dist/android/brands/advertorial/semantic/effects/effects-dark.xml +1 -1
- package/dist/android/brands/advertorial/semantic/effects/effects-light.xml +1 -1
- package/dist/android/brands/bild/semantic/effects/effects-dark.xml +1 -1
- package/dist/android/brands/bild/semantic/effects/effects-light.xml +1 -1
- package/dist/android/brands/sportbild/semantic/effects/effects-dark.xml +1 -1
- package/dist/android/brands/sportbild/semantic/effects/effects-light.xml +1 -1
- package/dist/android/res/values/brands/bild/semantic/color/colormode-dark.xml +1 -4
- package/dist/android/res/values/brands/bild/semantic/color/colormode-light.xml +1 -4
- package/dist/android/res/values/brands/sportbild/semantic/color/colormode-dark.xml +1 -4
- package/dist/android/res/values/brands/sportbild/semantic/color/colormode-light.xml +1 -4
- package/dist/css/brands/advertorial/density/density-compact.css +1 -1
- package/dist/css/brands/advertorial/density/density-default.css +1 -1
- package/dist/css/brands/advertorial/density/density-spacious.css +1 -1
- package/dist/css/brands/advertorial/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/advertorial/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +1 -1
- package/dist/css/brands/bild/density/density-compact.css +1 -1
- package/dist/css/brands/bild/density/density-default.css +1 -1
- package/dist/css/brands/bild/density/density-spacious.css +1 -1
- package/dist/css/brands/bild/overrides/brandcolormapping.css +1 -1
- package/dist/css/brands/bild/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/bild/semantic/color/colormode-dark.css +2 -14
- package/dist/css/brands/bild/semantic/color/colormode-light.css +2 -14
- package/dist/css/brands/bild/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/bild/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-xs.css +1 -1
- package/dist/css/brands/sportbild/density/density-compact.css +1 -1
- package/dist/css/brands/sportbild/density/density-default.css +1 -1
- package/dist/css/brands/sportbild/density/density-spacious.css +1 -1
- package/dist/css/brands/sportbild/overrides/brandcolormapping.css +1 -1
- package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +2 -14
- package/dist/css/brands/sportbild/semantic/color/colormode-light.css +2 -14
- package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/sportbild/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +1 -1
- package/dist/css/shared/colorprimitive.css +1 -1
- package/dist/css/shared/fontprimitive.css +1 -1
- package/dist/css/shared/sizeprimitive.css +1 -1
- package/dist/css/shared/spaceprimitive.css +1 -1
- package/dist/flutter/brands/bild/semantic/color/colormode-dark.dart +1 -7
- package/dist/flutter/brands/bild/semantic/color/colormode-light.dart +1 -7
- package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart +1 -7
- package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart +1 -7
- package/dist/ios/brands/bild/semantic/color/ColormodeDark.swift +1 -7
- package/dist/ios/brands/bild/semantic/color/ColormodeLight.swift +1 -7
- package/dist/ios/brands/sportbild/semantic/color/ColormodeDark.swift +1 -7
- package/dist/ios/brands/sportbild/semantic/color/ColormodeLight.swift +1 -7
- package/dist/js/brands/advertorial/density/density-compact.js +1 -1
- package/dist/js/brands/advertorial/density/density-default.js +1 -1
- package/dist/js/brands/advertorial/density/density-spacious.js +1 -1
- package/dist/js/brands/advertorial/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +1 -1
- package/dist/js/brands/advertorial/semantic/effects/effects-light.js +1 -1
- package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +1 -1
- package/dist/js/brands/advertorial/semantic/typography/typography-md.js +1 -1
- package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +1 -1
- package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +1 -1
- package/dist/js/brands/bild/density/density-compact.js +1 -1
- package/dist/js/brands/bild/density/density-default.js +1 -1
- package/dist/js/brands/bild/density/density-spacious.js +1 -1
- package/dist/js/brands/bild/overrides/brandcolormapping.js +1 -1
- package/dist/js/brands/bild/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/bild/semantic/color/colormode-dark.js +2 -8
- package/dist/js/brands/bild/semantic/color/colormode-light.js +2 -8
- package/dist/js/brands/bild/semantic/effects/effects-dark.js +1 -1
- package/dist/js/brands/bild/semantic/effects/effects-light.js +1 -1
- package/dist/js/brands/bild/semantic/typography/typography-lg.js +1 -1
- package/dist/js/brands/bild/semantic/typography/typography-md.js +1 -1
- package/dist/js/brands/bild/semantic/typography/typography-sm.js +1 -1
- package/dist/js/brands/bild/semantic/typography/typography-xs.js +1 -1
- package/dist/js/brands/sportbild/density/density-compact.js +1 -1
- package/dist/js/brands/sportbild/density/density-default.js +1 -1
- package/dist/js/brands/sportbild/density/density-spacious.js +1 -1
- package/dist/js/brands/sportbild/overrides/brandcolormapping.js +1 -1
- package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +2 -8
- package/dist/js/brands/sportbild/semantic/color/colormode-light.js +2 -8
- package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +1 -1
- package/dist/js/brands/sportbild/semantic/effects/effects-light.js +1 -1
- package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +1 -1
- package/dist/js/brands/sportbild/semantic/typography/typography-md.js +1 -1
- package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +1 -1
- package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +1 -1
- package/dist/js/shared/colorprimitive.js +1 -1
- package/dist/js/shared/fontprimitive.js +1 -1
- package/dist/js/shared/sizeprimitive.js +1 -1
- package/dist/js/shared/spaceprimitive.js +1 -1
- package/dist/json/brands/bild/semantic/color/colormode-dark.json +3 -114
- package/dist/json/brands/bild/semantic/color/colormode-light.json +3 -114
- package/dist/json/brands/sportbild/semantic/color/colormode-dark.json +3 -114
- package/dist/json/brands/sportbild/semantic/color/colormode-light.json +3 -114
- package/dist/manifest.json +1 -1
- package/dist/scss/brands/advertorial/density/density-compact.scss +1 -1
- package/dist/scss/brands/advertorial/density/density-default.scss +1 -1
- package/dist/scss/brands/advertorial/density/density-spacious.scss +1 -1
- package/dist/scss/brands/advertorial/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +1 -1
- package/dist/scss/brands/bild/density/density-compact.scss +1 -1
- package/dist/scss/brands/bild/density/density-default.scss +1 -1
- package/dist/scss/brands/bild/density/density-spacious.scss +1 -1
- package/dist/scss/brands/bild/overrides/brandcolormapping.scss +1 -1
- package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +2 -8
- package/dist/scss/brands/bild/semantic/color/colormode-light.scss +2 -8
- package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +1 -1
- package/dist/scss/brands/bild/semantic/effects/effects-light.scss +1 -1
- package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +1 -1
- package/dist/scss/brands/bild/semantic/typography/typography-md.scss +1 -1
- package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +1 -1
- package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-compact.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-default.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-spacious.scss +1 -1
- package/dist/scss/brands/sportbild/overrides/brandcolormapping.scss +1 -1
- package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +2 -8
- package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +2 -8
- package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +1 -1
- package/dist/scss/shared/colorprimitive.scss +1 -1
- package/dist/scss/shared/fontprimitive.scss +1 -1
- package/dist/scss/shared/sizeprimitive.scss +1 -1
- package/dist/scss/shared/spaceprimitive.scss +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,23 +26,39 @@ This token pipeline processes the multi-layer, multi-brand architecture of the B
|
|
|
26
26
|
- **Composite Tokens**: Typography, Effects
|
|
27
27
|
|
|
28
28
|
```
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
โข
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
โข
|
|
39
|
-
โข
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
โข
|
|
45
|
-
โข
|
|
29
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
30
|
+
โ Figma Plugin Export (src/design-tokens/) โ
|
|
31
|
+
โ โข bild-design-system-raw-data.json โ
|
|
32
|
+
โ โข Contains aliases and Figma structure โ
|
|
33
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
34
|
+
โ
|
|
35
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
36
|
+
โ Preprocessing (scripts/preprocess-*.js) โ
|
|
37
|
+
โ โข Complete alias resolution โ
|
|
38
|
+
โ โข Context-aware: Brand ร Breakpoint ร Mode โ
|
|
39
|
+
โ โข FontWeight bug fixes ("700px" โ 700) โ
|
|
40
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
41
|
+
โ
|
|
42
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
43
|
+
โ Intermediate Format (tokens/) โ
|
|
44
|
+
โ โข 68 JSON files (Style Dictionary format) โ
|
|
45
|
+
โ โข Tracked in Git (preprocessed source) โ
|
|
46
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
47
|
+
โ
|
|
48
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
49
|
+
โ Style Dictionary v4 (scripts/build-*.js) โ
|
|
50
|
+
โ โข Multi-platform output (7 formats) โ
|
|
51
|
+
โ โข Brand-specific builds (3 brands) โ
|
|
52
|
+
โ โข Composite tokens (Typography, Effects) โ
|
|
53
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
54
|
+
โ
|
|
55
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
56
|
+
โ Build Artifacts (dist/) โ
|
|
57
|
+
โ โข NOT tracked in Git โ
|
|
58
|
+
โ โข Generated locally or in CI โ
|
|
59
|
+
โ โข Available as GitHub Actions artifacts โ
|
|
60
|
+
โ โข 52/52 successful builds (353 files) โ
|
|
61
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
46
62
|
```
|
|
47
63
|
|
|
48
64
|
---
|
|
@@ -408,7 +424,7 @@ final headline1 = Typography.headline1; // TypographyToken
|
|
|
408
424
|
.
|
|
409
425
|
โโโ src/
|
|
410
426
|
โ โโโ design-tokens/
|
|
411
|
-
โ โโโ bild-design-system-raw-data.json # Custom Figma Plugin export
|
|
427
|
+
โ โโโ bild-design-system-raw-data.json # Custom Figma Plugin export (raw data)
|
|
412
428
|
โ
|
|
413
429
|
โโโ scripts/
|
|
414
430
|
โ โโโ preprocess-plugin-tokens.js # Preprocessing (965 lines)
|
|
@@ -431,21 +447,100 @@ final headline1 = Typography.headline1; // TypographyToken
|
|
|
431
447
|
โ โข iOS Swift typography format
|
|
432
448
|
โ โข Android typography XML format
|
|
433
449
|
โ
|
|
434
|
-
โโโ tokens/ #
|
|
450
|
+
โโโ tokens/ # Intermediate files (tracked in Git)
|
|
435
451
|
โ โโโ shared/ # Primitives (4 files)
|
|
436
|
-
โ โโโ brands/ # Brand-specific (
|
|
452
|
+
โ โโโ brands/ # Brand-specific (64 files)
|
|
437
453
|
โ โโโ bild/
|
|
438
454
|
โ โโโ sportbild/
|
|
439
455
|
โ โโโ advertorial/
|
|
456
|
+
โ ๐ Purpose: Preprocessed Style Dictionary format
|
|
457
|
+
โ โ
Aliases resolved, bugs fixed, ready for SD build
|
|
440
458
|
โ
|
|
441
|
-
โโโ dist/ #
|
|
459
|
+
โโโ dist/ # Build artifacts (NOT in Git)
|
|
442
460
|
โ โโโ css/, scss/, js/, json/ # Web platforms
|
|
443
461
|
โ โโโ ios/, android/, flutter/ # Native platforms
|
|
444
462
|
โ โโโ manifest.json # Build metadata
|
|
463
|
+
โ ๐ Generated locally or in CI/CD
|
|
464
|
+
โ โฌ๏ธ Available as GitHub Actions artifacts (30 days)
|
|
445
465
|
โ
|
|
446
466
|
โโโ README.md
|
|
447
467
|
```
|
|
448
468
|
|
|
469
|
+
### Token Processing Pipeline
|
|
470
|
+
|
|
471
|
+
The token transformation happens in three stages:
|
|
472
|
+
|
|
473
|
+
```
|
|
474
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
475
|
+
โ 1๏ธโฃ Figma Export (Raw Data) โ
|
|
476
|
+
โ src/design-tokens/bild-design-system-raw-data.json โ
|
|
477
|
+
โ โข Figma Variable Visualizer plugin export โ
|
|
478
|
+
โ โข Contains aliases: {type: "VARIABLE_ALIAS", id: "..."} โ
|
|
479
|
+
โ โข FontWeight bugs: "700px" instead of 700 โ
|
|
480
|
+
โ โข Complex Collections & Modes structure โ
|
|
481
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
482
|
+
โ
|
|
483
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
484
|
+
โ 2๏ธโฃ Preprocessing (Intermediate Format) โ
|
|
485
|
+
โ tokens/ โ
|
|
486
|
+
โ โข All aliases resolved to final values โ
|
|
487
|
+
โ โข FontWeight bugs fixed โ
|
|
488
|
+
โ โข Organized by Brand ร Mode ร Collection โ
|
|
489
|
+
โ โข Style Dictionary format: {"$value": "...", "$type": "..."} โ
|
|
490
|
+
โ โข 68 JSON files (4 shared + 64 brand-specific) โ
|
|
491
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
492
|
+
โ
|
|
493
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
494
|
+
โ 3๏ธโฃ Style Dictionary Build (Platform Outputs) โ
|
|
495
|
+
โ dist/ โ
|
|
496
|
+
โ โข 7 platforms: CSS, SCSS, JS, JSON, iOS, Android, Flutter โ
|
|
497
|
+
โ โข 52 total builds (4 shared + 30 brand + 12 typo + 6 fx) โ
|
|
498
|
+
โ โข Ready-to-use platform-specific formats โ
|
|
499
|
+
โ โข NOT tracked in Git (available as CI artifacts) โ
|
|
500
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
### Why the `tokens/` Intermediate Step?
|
|
504
|
+
|
|
505
|
+
**Problem:** Figma export format is not directly usable by Style Dictionary:
|
|
506
|
+
- โ Aliases like `{type: "VARIABLE_ALIAS", id: "VariableID:123"}`
|
|
507
|
+
- โ Complex Collections & Modes structure
|
|
508
|
+
- โ Bugs like `"700px"` for FontWeight
|
|
509
|
+
|
|
510
|
+
**Solution:** Preprocessing creates clean Style Dictionary input:
|
|
511
|
+
- โ
All aliases resolved: `{"$value": "#DD0000", "$type": "color"}`
|
|
512
|
+
- โ
Bugs fixed: `700` (not `"700px"`)
|
|
513
|
+
- โ
Organized structure ready for multi-platform build
|
|
514
|
+
|
|
515
|
+
**Example:**
|
|
516
|
+
|
|
517
|
+
```javascript
|
|
518
|
+
// BEFORE (Figma raw data - src/design-tokens/)
|
|
519
|
+
{
|
|
520
|
+
"variables": [{
|
|
521
|
+
"name": "Component/Background",
|
|
522
|
+
"valuesByMode": {
|
|
523
|
+
"mode123": { "type": "VARIABLE_ALIAS", "id": "VariableID:456" }
|
|
524
|
+
}
|
|
525
|
+
}]
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
// AFTER (Preprocessed - tokens/)
|
|
529
|
+
{
|
|
530
|
+
"Component": {
|
|
531
|
+
"Background": {
|
|
532
|
+
"$value": "#DD0000",
|
|
533
|
+
"$type": "color"
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
// FINAL (Build output - dist/)
|
|
539
|
+
// CSS: --component-background: #DD0000;
|
|
540
|
+
// SCSS: $component-background: #DD0000;
|
|
541
|
+
// JS: export const ComponentBackground = "#DD0000";
|
|
542
|
+
```
|
|
543
|
+
|
|
449
544
|
### Custom Figma Plugin Export
|
|
450
545
|
|
|
451
546
|
The pipeline expects a JSON export from a custom Figma plugin with the following structure:
|
|
@@ -481,30 +576,33 @@ The pipeline expects a JSON export from a custom Figma plugin with the following
|
|
|
481
576
|
|
|
482
577
|
### Development Workflow
|
|
483
578
|
|
|
579
|
+
#### Local Development
|
|
580
|
+
|
|
484
581
|
1. **Export from Figma**
|
|
485
|
-
- Use custom Figma plugin
|
|
582
|
+
- Use custom Figma plugin (Variable Visualizer)
|
|
583
|
+
- Configure target branch: `figma-tokens` (recommended)
|
|
486
584
|
- Export as `bild-design-system-raw-data.json`
|
|
487
585
|
|
|
488
|
-
2. **
|
|
489
|
-
-
|
|
586
|
+
2. **Figma Plugin Push**
|
|
587
|
+
- Plugin automatically pushes to configured branch
|
|
588
|
+
- โ
**Recommended**: Push to `figma-tokens` branch
|
|
589
|
+
- Creates automatic Pull Request with build artifacts
|
|
490
590
|
|
|
491
|
-
3. **
|
|
591
|
+
3. **Local Build (Optional)**
|
|
492
592
|
```bash
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
- Resolves all aliases to final values
|
|
496
|
-
- Creates intermediate token files in `tokens/`
|
|
497
|
-
- Output: 68 JSON files (4 shared + 64 brand-specific)
|
|
593
|
+
# Full build (preprocessing + build)
|
|
594
|
+
npm run build
|
|
498
595
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
npm run build:tokens
|
|
596
|
+
# Or run steps separately:
|
|
597
|
+
npm run preprocess # Step 1: Resolve aliases, fix bugs
|
|
598
|
+
npm run build:tokens # Step 2: Generate platform outputs
|
|
502
599
|
```
|
|
503
|
-
-
|
|
600
|
+
- Resolves all aliases to final values
|
|
601
|
+
- Creates intermediate files in `tokens/` (68 files)
|
|
602
|
+
- Transforms to all 7 platforms in `dist/` (353 files)
|
|
504
603
|
- **52/52 builds successful**
|
|
505
|
-
- โ ๏ธ Warnings about token collisions (LetterSpacing) are expected but non-critical
|
|
506
604
|
|
|
507
|
-
|
|
605
|
+
4. **Verify Locally**
|
|
508
606
|
```bash
|
|
509
607
|
# Check brand-specific values
|
|
510
608
|
grep "bild-red" dist/css/brands/bild/semantic/color/colormode-light.css
|
|
@@ -519,56 +617,225 @@ The pipeline expects a JSON export from a custom Figma plugin with the following
|
|
|
519
617
|
# Expected: css/, scss/, js/, json/, ios/, android/, flutter/, manifest.json
|
|
520
618
|
```
|
|
521
619
|
|
|
620
|
+
#### Figma Export Target Branches
|
|
621
|
+
|
|
622
|
+
| Target Branch | Build Runs | PR Created | NPM Publish | Use Case |
|
|
623
|
+
|---------------|------------|------------|-------------|----------|
|
|
624
|
+
| **figma-tokens** | โ
Yes | โ
Automatic | โ
After merge | **Recommended** - Full workflow with review |
|
|
625
|
+
| **main** | โ
Yes | โ No | โ
**Immediate** | โ ๏ธ Direct publish without review |
|
|
626
|
+
| **claude/*** | โ
Yes | โ Manual | โ No | Development/Testing |
|
|
627
|
+
| **other** | โ No | โ No | โ No | Not configured |
|
|
628
|
+
|
|
629
|
+
**Best Practice:** Always export to `figma-tokens` branch for automatic PR creation and review before publishing.
|
|
630
|
+
|
|
522
631
|
---
|
|
523
632
|
|
|
524
633
|
## ๐ CI/CD Integration
|
|
525
634
|
|
|
635
|
+
### Overview
|
|
636
|
+
|
|
637
|
+
The CI/CD pipeline uses **GitHub Actions Artifacts** for distributing build outputs. The `dist/` folder is **NOT tracked in Git** - instead, it's generated in CI and made available for download.
|
|
638
|
+
|
|
639
|
+
**Key Benefits:**
|
|
640
|
+
- โ
No merge conflicts on generated files
|
|
641
|
+
- โ
Clean Git history (only source files)
|
|
642
|
+
- โ
PR review via downloadable artifacts
|
|
643
|
+
- โ
30-day artifact retention
|
|
644
|
+
|
|
645
|
+
---
|
|
646
|
+
|
|
526
647
|
### GitHub Actions Workflows
|
|
527
648
|
|
|
528
|
-
#### 1. Build Tokens (`.github/workflows/build-tokens.yml`)
|
|
649
|
+
#### 1. ๐จ Build Tokens (`.github/workflows/build-tokens.yml`)
|
|
650
|
+
|
|
651
|
+
**Purpose:** Validates token builds and creates downloadable artifacts for PR review.
|
|
529
652
|
|
|
530
653
|
**Triggers:**
|
|
531
654
|
- Push to `main`, `develop`, `claude/**`, `figma-tokens` branches
|
|
655
|
+
- Pull requests to `main` branch
|
|
532
656
|
- Changes in `src/design-tokens/`, `scripts/`, `build-config/`
|
|
533
657
|
- Manual workflow dispatch
|
|
534
658
|
|
|
535
|
-
**Steps:**
|
|
659
|
+
**Workflow Steps:**
|
|
660
|
+
```
|
|
536
661
|
1. Checkout repository
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
662
|
+
โ
|
|
663
|
+
2. Setup Node.js 20 + Install dependencies
|
|
664
|
+
โ
|
|
665
|
+
3. Run npm run build (preprocessing + build)
|
|
666
|
+
โ
|
|
667
|
+
4. Upload artifacts (dist/, tokens/, logs)
|
|
668
|
+
โ
|
|
669
|
+
5. Comment on PR with download link (if PR)
|
|
670
|
+
โ
|
|
671
|
+
6. Create build summary
|
|
672
|
+
```
|
|
542
673
|
|
|
543
674
|
**Outputs:**
|
|
544
|
-
- Validates build success: 52/52 builds
|
|
545
|
-
-
|
|
546
|
-
-
|
|
675
|
+
- โ
Validates build success: 52/52 builds
|
|
676
|
+
- ๐ฆ Creates artifact: `design-tokens-{sha}.zip` (30 days)
|
|
677
|
+
- ๐ฌ PR comment with download link (on pull requests)
|
|
678
|
+
- ๐ Build summary in Actions UI
|
|
679
|
+
|
|
680
|
+
**Artifact Contents:**
|
|
681
|
+
```
|
|
682
|
+
design-tokens-{sha}.zip
|
|
683
|
+
โโโ dist/ # All platform outputs (353 files)
|
|
684
|
+
โ โโโ css/, scss/, js/, json/
|
|
685
|
+
โ โโโ ios/, android/, flutter/
|
|
686
|
+
โ โโโ manifest.json
|
|
687
|
+
โโโ tokens/ # Intermediate files (68 files)
|
|
688
|
+
โโโ build-output.log # Build logs
|
|
689
|
+
```
|
|
690
|
+
|
|
691
|
+
**PR Comment Example:**
|
|
692
|
+
```markdown
|
|
693
|
+
## ๐จ Design Tokens Build erfolgreich!
|
|
547
694
|
|
|
548
|
-
|
|
695
|
+
**Build Statistiken:**
|
|
696
|
+
- โ
Successful Builds: 52/52
|
|
697
|
+
- ๐ฆ Commit: `abc123`
|
|
698
|
+
- ๐ฒ Branch: `feature-branch`
|
|
699
|
+
|
|
700
|
+
### ๐ฅ Review der generierten Files:
|
|
701
|
+
|
|
702
|
+
[โฌ๏ธ **Download Build Artifacts**](https://github.com/.../actions/runs/123456)
|
|
703
|
+
|
|
704
|
+
**Enthalten:**
|
|
705
|
+
- `dist/css/` - CSS Custom Properties
|
|
706
|
+
- `dist/scss/` - SCSS Variables
|
|
707
|
+
- `dist/js/` - JavaScript ES6
|
|
708
|
+
- `dist/json/` - JSON Data
|
|
709
|
+
- `dist/ios/` - Swift Classes
|
|
710
|
+
- `dist/android/` - Android XML
|
|
711
|
+
- `dist/flutter/` - Flutter Dart
|
|
712
|
+
|
|
713
|
+
๐ Datei-Statistiken
|
|
714
|
+
- Total Files: 353
|
|
715
|
+
- CSS Files: 88
|
|
716
|
+
- SCSS Files: 88
|
|
717
|
+
...
|
|
718
|
+
|
|
719
|
+
๐ก **Tipp:** Die Artifacts sind 30 Tage verfรผgbar.
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
---
|
|
723
|
+
|
|
724
|
+
#### 2. ๐ค Auto PR from Figma (`.github/workflows/auto-pr-from-figma.yml`)
|
|
725
|
+
|
|
726
|
+
**Purpose:** Automatically creates/updates a Pull Request when Figma exports tokens.
|
|
549
727
|
|
|
550
728
|
**Trigger:**
|
|
551
729
|
- Push to `figma-tokens` branch (from Figma plugin)
|
|
552
730
|
|
|
553
|
-
**
|
|
731
|
+
**Recommended Figma Plugin Configuration:**
|
|
732
|
+
```javascript
|
|
733
|
+
{
|
|
734
|
+
"targetBranch": "figma-tokens",
|
|
735
|
+
"repository": "UXWizard25/vv-token-test-v3",
|
|
736
|
+
"filePath": "src/design-tokens/bild-design-system-raw-data.json"
|
|
737
|
+
}
|
|
738
|
+
```
|
|
739
|
+
|
|
740
|
+
**Complete Workflow:**
|
|
554
741
|
```
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
742
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
743
|
+
โ 1. Figma Plugin Export โ
|
|
744
|
+
โ โข Designer clicks "Export" in Figma โ
|
|
745
|
+
โ โข Plugin pushes JSON to figma-tokens branch โ
|
|
746
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
747
|
+
โ
|
|
748
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
749
|
+
โ 2. Workflow Triggers โ
|
|
750
|
+
โ โข auto-pr-from-figma.yml starts โ
|
|
751
|
+
โ โข Runs npm run build (52/52 builds) โ
|
|
752
|
+
โ โข Uploads artifacts (design-tokens-{sha}.zip) โ
|
|
753
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
754
|
+
โ
|
|
755
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
756
|
+
โ 3. Pull Request Created โ
|
|
757
|
+
โ โข Title: "๐จ Update design tokens from Figma" โ
|
|
758
|
+
โ โข Body: Build stats + artifact download link โ
|
|
759
|
+
โ โข Compares figma-tokens โ main โ
|
|
760
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
761
|
+
โ
|
|
762
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
763
|
+
โ 4. Review Process โ
|
|
764
|
+
โ โข Team reviews source changes (JSON diff) โ
|
|
765
|
+
โ โข Downloads artifacts to verify outputs โ
|
|
766
|
+
โ โข Checks CSS, SCSS, platform-specific files โ
|
|
767
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
768
|
+
โ
|
|
769
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
770
|
+
โ 5. Merge to main โ
|
|
771
|
+
โ โข PR approved and merged โ
|
|
772
|
+
โ โข publish-on-merge.yml triggers โ
|
|
773
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
774
|
+
โ
|
|
775
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
776
|
+
โ 6. NPM Package Published โ
|
|
777
|
+
โ โข Fresh dist/ build โ
|
|
778
|
+
โ โข Version bump (patch) โ
|
|
779
|
+
โ โข Published to npm registry โ
|
|
780
|
+
โ โข GitHub Release created โ
|
|
781
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
782
|
+
```
|
|
783
|
+
|
|
784
|
+
**PR Body Format:**
|
|
785
|
+
```markdown
|
|
786
|
+
## ๐จ Design Token Update
|
|
787
|
+
|
|
788
|
+
This PR contains updated design tokens from Figma Variable Visualizer.
|
|
789
|
+
|
|
790
|
+
### โ
Build Results
|
|
791
|
+
- **Build Status:** Success
|
|
792
|
+
- **Successful Builds:** 52/52
|
|
793
|
+
- **Warnings:** 0
|
|
794
|
+
|
|
795
|
+
### ๐ฅ Review Generated Files
|
|
796
|
+
[โฌ๏ธ **Download Build Artifacts**](https://github.com/.../actions/runs/123)
|
|
797
|
+
|
|
798
|
+
The generated `dist/` files are available as build artifacts (30 days retention).
|
|
799
|
+
|
|
800
|
+
### ๐ Changed Files
|
|
801
|
+
**Files Changed:** 1
|
|
802
|
+
- src/design-tokens/bild-design-system-raw-data.json
|
|
803
|
+
|
|
804
|
+
### ๐ What Happens After Merge?
|
|
805
|
+
1. โ
Tokens will be rebuilt
|
|
806
|
+
2. โ
Package version will be bumped (patch)
|
|
807
|
+
3. โ
Package will be published to npm
|
|
808
|
+
4. โ
GitHub Release will be created
|
|
566
809
|
```
|
|
567
810
|
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
811
|
+
---
|
|
812
|
+
|
|
813
|
+
#### 3. ๐ฆ Publish on Merge (`.github/workflows/publish-on-merge.yml`)
|
|
814
|
+
|
|
815
|
+
**Purpose:** Automatically publishes package to npm when PR is merged to main.
|
|
816
|
+
|
|
817
|
+
**Trigger:**
|
|
818
|
+
- Push to `main` branch
|
|
819
|
+
- Changes in `src/design-tokens/`, `scripts/`, `build-config/`, `package.json`
|
|
820
|
+
|
|
821
|
+
**Steps:**
|
|
822
|
+
1. Rebuild tokens (fresh dist/)
|
|
823
|
+
2. Bump version (patch)
|
|
824
|
+
3. Publish to npm
|
|
825
|
+
4. Create GitHub Release
|
|
826
|
+
5. Tag with version
|
|
827
|
+
|
|
828
|
+
---
|
|
829
|
+
|
|
830
|
+
### Workflow Comparison
|
|
831
|
+
|
|
832
|
+
| Workflow | Trigger | Builds dist/ | Commits dist/ | Creates PR | Publishes NPM |
|
|
833
|
+
|----------|---------|--------------|---------------|------------|---------------|
|
|
834
|
+
| **build-tokens.yml** | Push/PR to tracked branches | โ
Yes | โ No (artifacts only) | โ No | โ No |
|
|
835
|
+
| **auto-pr-from-figma.yml** | Push to `figma-tokens` | โ
Yes | โ No (artifacts only) | โ
Yes | โ No |
|
|
836
|
+
| **publish-on-merge.yml** | Merge to `main` | โ
Yes (fresh) | โ No | โ No | โ
Yes |
|
|
837
|
+
|
|
838
|
+
---
|
|
572
839
|
|
|
573
840
|
### Manual Workflow Dispatch
|
|
574
841
|
|
|
@@ -576,14 +843,69 @@ Publish to NPM (automatic)
|
|
|
576
843
|
1. Go to **Actions** tab
|
|
577
844
|
2. Select **"Build Design Tokens"**
|
|
578
845
|
3. Click **"Run workflow"**
|
|
846
|
+
4. Download artifacts from run details
|
|
579
847
|
|
|
580
848
|
**Via GitHub CLI:**
|
|
581
849
|
```bash
|
|
850
|
+
# Trigger build
|
|
582
851
|
gh workflow run build-tokens.yml
|
|
852
|
+
|
|
853
|
+
# List recent runs
|
|
854
|
+
gh run list --workflow=build-tokens.yml
|
|
855
|
+
|
|
856
|
+
# Download artifacts from specific run
|
|
857
|
+
gh run download <run-id>
|
|
858
|
+
```
|
|
859
|
+
|
|
860
|
+
---
|
|
861
|
+
|
|
862
|
+
### Reviewing Build Artifacts
|
|
863
|
+
|
|
864
|
+
**Method 1: Via PR Comment Link**
|
|
865
|
+
1. Open Pull Request
|
|
866
|
+
2. Find bot comment "๐จ Design Tokens Build erfolgreich!"
|
|
867
|
+
3. Click "Download Build Artifacts"
|
|
868
|
+
4. Extract ZIP and review files locally
|
|
869
|
+
|
|
870
|
+
**Method 2: Via Actions Tab**
|
|
871
|
+
1. Go to repository Actions tab
|
|
872
|
+
2. Click on workflow run
|
|
873
|
+
3. Scroll to "Artifacts" section
|
|
874
|
+
4. Download `design-tokens-{sha}.zip`
|
|
875
|
+
|
|
876
|
+
**Method 3: Via GitHub CLI**
|
|
877
|
+
```bash
|
|
878
|
+
# List artifacts for a run
|
|
879
|
+
gh run view <run-id>
|
|
880
|
+
|
|
881
|
+
# Download all artifacts
|
|
882
|
+
gh run download <run-id>
|
|
883
|
+
|
|
884
|
+
# Extract and review
|
|
885
|
+
unzip design-tokens-*.zip
|
|
886
|
+
ls dist/
|
|
583
887
|
```
|
|
584
888
|
|
|
585
889
|
---
|
|
586
890
|
|
|
891
|
+
### Branch Protection & Artifact Workflow
|
|
892
|
+
|
|
893
|
+
**Why dist/ is not in Git:**
|
|
894
|
+
- Generated files cause merge conflicts (353 files ร multiple developers)
|
|
895
|
+
- Unnecessary repository bloat (~15 MB per commit)
|
|
896
|
+
- Source of truth is `src/design-tokens/` (single JSON file)
|
|
897
|
+
- Style Dictionary can regenerate dist/ deterministically
|
|
898
|
+
|
|
899
|
+
**How to review changes without dist/ in Git:**
|
|
900
|
+
1. Source changes visible in PR diff (JSON file)
|
|
901
|
+
2. Build artifacts downloadable from Actions (30 days)
|
|
902
|
+
3. Local testing: `npm run build` generates dist/
|
|
903
|
+
4. CI validates all builds pass (52/52)
|
|
904
|
+
|
|
905
|
+
This approach follows modern best practices used by design systems like Shopify Polaris, GitHub Primer, and Adobe Spectrum.
|
|
906
|
+
|
|
907
|
+
---
|
|
908
|
+
|
|
587
909
|
## ๐งช Testing & Verification
|
|
588
910
|
|
|
589
911
|
### Build Verification
|
|
@@ -719,14 +1041,31 @@ npm install
|
|
|
719
1041
|
|
|
720
1042
|
### Missing dist/ Folder
|
|
721
1043
|
|
|
722
|
-
**Problem:** dist/ folder not visible after
|
|
1044
|
+
**Problem:** dist/ folder not visible in repository or after clone
|
|
723
1045
|
|
|
724
|
-
**
|
|
1046
|
+
**Explanation:** The `dist/` folder is **intentionally not tracked in Git** (as of v2.1.0). This prevents merge conflicts and keeps the repository clean.
|
|
1047
|
+
|
|
1048
|
+
**Solutions:**
|
|
1049
|
+
|
|
1050
|
+
**Option 1: Generate Locally**
|
|
725
1051
|
```bash
|
|
726
1052
|
npm run build
|
|
727
1053
|
ls dist/ # Should show css/, scss/, js/, json/, ios/, android/, flutter/
|
|
728
1054
|
```
|
|
729
1055
|
|
|
1056
|
+
**Option 2: Download from CI Artifacts**
|
|
1057
|
+
1. Go to repository **Actions** tab
|
|
1058
|
+
2. Find the latest workflow run for your branch
|
|
1059
|
+
3. Download `design-tokens-{sha}.zip` from Artifacts section
|
|
1060
|
+
4. Extract the `dist/` folder
|
|
1061
|
+
|
|
1062
|
+
**Option 3: From Pull Request**
|
|
1063
|
+
1. Find the PR you're interested in
|
|
1064
|
+
2. Look for bot comment with artifact download link
|
|
1065
|
+
3. Download and extract
|
|
1066
|
+
|
|
1067
|
+
**Note:** The `dist/` folder is automatically included in npm packages. If you install via npm, the dist/ folder will be in `node_modules/@marioschmidt/design-system-tokens/dist/`.
|
|
1068
|
+
|
|
730
1069
|
### Wrong Platform Outputs
|
|
731
1070
|
|
|
732
1071
|
**Problem:** Some platforms missing files
|
|
@@ -780,7 +1119,45 @@ All platforms should build successfully: 52/52
|
|
|
780
1119
|
|
|
781
1120
|
## ๐ Changelog
|
|
782
1121
|
|
|
783
|
-
### v2.
|
|
1122
|
+
### v2.1.0 (Current) - CI Artifacts Workflow
|
|
1123
|
+
|
|
1124
|
+
**โจ Features:**
|
|
1125
|
+
- **Modern CI/CD**: dist/ no longer tracked in Git (prevents merge conflicts)
|
|
1126
|
+
- **GitHub Actions Artifacts**: Build outputs available as downloadable artifacts (30 days)
|
|
1127
|
+
- **PR Bot Comments**: Automatic comments on PRs with artifact download links
|
|
1128
|
+
- **Build Statistics**: Detailed file counts and build summaries in PR comments
|
|
1129
|
+
- **Figma Branch Workflow**: Documented recommended workflow with `figma-tokens` branch
|
|
1130
|
+
|
|
1131
|
+
**๐ง Changes:**
|
|
1132
|
+
- `dist/` folder now gitignored (removed 353 files from tracking)
|
|
1133
|
+
- `tokens/` folder now tracked in Git (preprocessed intermediate files)
|
|
1134
|
+
- Updated workflows: `build-tokens.yml`, `auto-pr-from-figma.yml`
|
|
1135
|
+
- Removed dist/ commit steps from CI workflows
|
|
1136
|
+
- Added artifact upload and PR comment features
|
|
1137
|
+
|
|
1138
|
+
**๐ Documentation:**
|
|
1139
|
+
- Complete CI/CD Integration section rewrite
|
|
1140
|
+
- Added "Token Processing Pipeline" visualization
|
|
1141
|
+
- Added "Why the tokens/ Intermediate Step?" explanation
|
|
1142
|
+
- Added "Figma Export Target Branches" comparison table
|
|
1143
|
+
- Added "Reviewing Build Artifacts" guide
|
|
1144
|
+
- Translated all German comments in build scripts to English
|
|
1145
|
+
|
|
1146
|
+
**๐ฏ Benefits:**
|
|
1147
|
+
- โ
No more merge conflicts on generated files
|
|
1148
|
+
- โ
Cleaner Git history (only source files tracked)
|
|
1149
|
+
- โ
PR review still possible via downloadable artifacts
|
|
1150
|
+
- โ
Follows modern best practices (Shopify Polaris, GitHub Primer, Adobe Spectrum)
|
|
1151
|
+
- โ
Smaller repository size (~15 MB removed per commit)
|
|
1152
|
+
|
|
1153
|
+
**โก Performance:**
|
|
1154
|
+
- Same build performance: 52/52 builds successful
|
|
1155
|
+
- ~11 seconds total build time
|
|
1156
|
+
- Artifacts upload in ~2-3 seconds
|
|
1157
|
+
|
|
1158
|
+
---
|
|
1159
|
+
|
|
1160
|
+
### v2.0.0 - Custom Plugin Migration
|
|
784
1161
|
|
|
785
1162
|
**โจ Features:**
|
|
786
1163
|
- Custom Figma Plugin integration (replaces Variable Visualizer)
|
|
@@ -797,7 +1174,6 @@ All platforms should build successfully: 52/52
|
|
|
797
1174
|
- Mode name matching instead of ID-based (robust against Figma changes)
|
|
798
1175
|
- YAML syntax fix in GitHub Actions (multi-line commit messages)
|
|
799
1176
|
- Exit code 0 for successful builds
|
|
800
|
-
- dist/ folder commits to feature branches
|
|
801
1177
|
|
|
802
1178
|
**โก Performance:**
|
|
803
1179
|
- 52/52 builds successful (up from 30/30)
|