11# Atlaskit Preset Generation Scripts
22
3- This directory contains scripts to automatically generate the Panda CSS preset from the official ` @atlaskit/tokens ` package.
3+ This directory contains scripts to automatically generate the Panda CSS preset from the official ` @atlaskit/tokens `
4+ package.
45
56## Scripts
67
78### ` generate-theme.mjs `
89
9- Autogenerates the Panda CSS theme from ` @atlaskit/tokens ` package. This script reads the token data and converts it to Panda CSS format.
10+ Autogenerates the Panda CSS theme from ` @atlaskit/tokens ` package. This script reads the token data and converts it to
11+ Panda CSS format.
1012
1113** Usage:**
1214
@@ -50,7 +52,8 @@ node scripts/generate-theme.mjs --clean
5052
5153### ` explore-tokens.mjs `
5254
53- Utility script to explore the structure of ` @atlaskit/tokens ` package. Useful for understanding the token format and debugging.
55+ Utility script to explore the structure of ` @atlaskit/tokens ` package. Useful for understanding the token format and
56+ debugging.
5457
5558** Usage:**
5659
@@ -63,18 +66,21 @@ node scripts/explore-tokens.mjs
6366When a new version of ` @atlaskit/tokens ` or ` @atlaskit/motion ` is released:
6467
65681 . Update dependencies:
69+
6670 ``` bash
6771 pnpm update @atlaskit/tokens @atlaskit/motion --ignore-scripts
6872 ```
6973
70742 . Regenerate the theme:
75+
7176 ``` bash
7277 pnpm generate:clean
7378 ```
7479
75803 . Review the changes in ` src/ `
7681
77824 . Build the preset:
83+
7884 ``` bash
7985 pnpm build
8086 ```
@@ -88,6 +94,7 @@ When a new version of `@atlaskit/tokens` or `@atlaskit/motion` is released:
8894The generation script uses raw token data from multiple sources:
8995
9096### From ` @atlaskit/tokens ` :
97+
9198- ** Light/Dark themes** : Colors, opacity, spacing, typography, shape, shadows
9299 - Semantic tokens use ` _light ` /` _dark ` pattern (not ` base ` /` _dark ` )
93100 - Regular tokens for values that are the same in both themes
@@ -98,14 +105,17 @@ The generation script uses raw token data from multiple sources:
98105- ** Shape tokens** : Only ` radius.* ` used; ` border.width ` excluded
99106
100107### From ` @atlaskit/motion ` :
108+
101109- ** Durations** : ` @atlaskit/motion/dist/cjs/utils/durations.js ` (none, small, medium, large)
102110- ** Easing curves** : ` @atlaskit/motion/dist/cjs/utils/curves.js ` (dynamically extracted cubic-bezier values)
103111 - Imports from CJS files to avoid CSS import issues
104112
105113### From Atlassian Design System:
114+
106115- ** Breakpoints** : Static values (30rem, 48rem, 64rem, 90rem, 110.5rem)
107116
108117### Key Features:
118+
109119- ** Type Safety** : All tokens include proper TypeScript types (` Tokens ` , ` SemanticTokens ` , ` Theme ` )
110120- ** Dynamic Extraction** : Easing curves auto-detected by pattern matching ` cubic-bezier(...) ` strings
111121- ** Graceful Fallback** : Script continues if ` @atlaskit/motion ` is not installed (skips motion tokens)
@@ -115,10 +125,12 @@ The generation script uses raw token data from multiple sources:
115125### Version Compatibility
116126
117127This script was ** built for and tested with** :
128+
118129- ` @atlaskit/tokens ` ** v7.0.0**
119130- ` @atlaskit/motion ` ** v5.3.8**
120131
121132** Important:** The script uses internal paths:
133+
122134- ` @atlaskit/tokens/dist/esm/artifacts/tokens-raw/atlassian-*.js `
123135- ` @atlaskit/motion/dist/cjs/utils/{durations,curves}.js `
124136
@@ -127,6 +139,7 @@ These paths are **not part of the public API** and may change in future versions
127139### Breaking Change Risks
128140
129141The script may break if packages have:
142+
1301431 . ** Package structure changes** - Internal paths reorganized
1311442 . ** Token format changes** - Different typography, shadow, or motion structures
1321453 . ** New major versions** - Breaking changes in v8+ (@atlaskit/tokens ) or v6+ (@atlaskit/motion )
@@ -142,12 +155,14 @@ The script may break if packages have:
142155### Recommendations
143156
1441571 . ** Pin versions** in ` package.json ` :
158+
145159 ``` json
146160 "@atlaskit/tokens" : " 7.0.0" ,
147161 "@atlaskit/motion" : " 5.3.8"
148162 ```
149163
1501642 . ** Test after updates** :
165+
151166 ``` bash
152167 pnpm generate:clean
153168 pnpm build
0 commit comments