@atlaskit/tokens 8.6.0 → 9.0.0

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 (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/artifacts/tokens-raw/atlassian-shape.js +17 -17
  3. package/dist/cjs/entry-points/token-metadata.codegen.js +9 -9
  4. package/dist/es2019/artifacts/tokens-raw/atlassian-shape.js +17 -17
  5. package/dist/es2019/entry-points/token-metadata.codegen.js +9 -9
  6. package/dist/esm/artifacts/tokens-raw/atlassian-shape.js +17 -17
  7. package/dist/esm/entry-points/token-metadata.codegen.js +9 -9
  8. package/dist/types/artifacts/tokens-raw/atlassian-shape.d.ts +1 -1
  9. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  10. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  11. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape.d.ts +1 -1
  12. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  13. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  14. package/figma/atlassian-shape.json +8 -8
  15. package/package.json +8 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 9.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`55546332d4ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55546332d4ef4) -
8
+ Restricted `borderRadius` xcss and cssMap types to only accept tokens, 0, and "inherit".
9
+ Restricted `borderWidth` types to only accept tokens and 0. Previously any string was allowed,
10
+ this is no longer the case and will throw a type error.
11
+
12
+ ## 8.6.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [`8f904ca860b20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f904ca860b20) -
17
+ Updated radius token descriptions to provide more guidance.
18
+
3
19
  ## 8.6.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/artifacts/tokens-raw/atlassian-shape.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  /**
8
8
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
- * @codegen <<SignedSource::c7c39a1cee14fa6f779e6243ae1460d5>>
9
+ * @codegen <<SignedSource::6ec487540ff835bd85d78d35a322de1e>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
12
 
@@ -16,7 +16,7 @@ var tokens = [{
16
16
  "state": "active",
17
17
  "suggest": ["2px"],
18
18
  "introduced": "6.1.0",
19
- "description": "Used for small containers such as badges."
19
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
20
20
  },
21
21
  "value": "2px",
22
22
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -27,7 +27,7 @@ var tokens = [{
27
27
  "state": "active",
28
28
  "suggest": ["2px"],
29
29
  "introduced": "6.1.0",
30
- "description": "Used for small containers such as badges."
30
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
31
31
  },
32
32
  "value": "Radius02"
33
33
  },
@@ -40,7 +40,7 @@ var tokens = [{
40
40
  "state": "active",
41
41
  "suggest": ["4px"],
42
42
  "introduced": "6.1.0",
43
- "description": "Used for labels."
43
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
44
44
  },
45
45
  "value": "4px",
46
46
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -51,7 +51,7 @@ var tokens = [{
51
51
  "state": "active",
52
52
  "suggest": ["4px"],
53
53
  "introduced": "6.1.0",
54
- "description": "Used for labels."
54
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
55
55
  },
56
56
  "value": "Radius04"
57
57
  },
@@ -64,7 +64,7 @@ var tokens = [{
64
64
  "state": "active",
65
65
  "suggest": ["6px"],
66
66
  "introduced": "6.1.0",
67
- "description": "Used for buttons and inputs."
67
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
68
68
  },
69
69
  "value": "6px",
70
70
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -75,7 +75,7 @@ var tokens = [{
75
75
  "state": "active",
76
76
  "suggest": ["6px"],
77
77
  "introduced": "6.1.0",
78
- "description": "Used for buttons and inputs."
78
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
79
79
  },
80
80
  "value": "Radius06"
81
81
  },
@@ -88,7 +88,7 @@ var tokens = [{
88
88
  "state": "active",
89
89
  "suggest": ["8px"],
90
90
  "introduced": "6.1.0",
91
- "description": "Used for cards and small containers."
91
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
92
92
  },
93
93
  "value": "8px",
94
94
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -99,7 +99,7 @@ var tokens = [{
99
99
  "state": "active",
100
100
  "suggest": ["8px"],
101
101
  "introduced": "6.1.0",
102
- "description": "Used for cards and small containers."
102
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
103
103
  },
104
104
  "value": "Radius08"
105
105
  },
@@ -112,7 +112,7 @@ var tokens = [{
112
112
  "state": "active",
113
113
  "suggest": ["12px"],
114
114
  "introduced": "6.1.0",
115
- "description": "Used for modals and large containers."
115
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
116
116
  },
117
117
  "value": "12px",
118
118
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -123,7 +123,7 @@ var tokens = [{
123
123
  "state": "active",
124
124
  "suggest": ["12px"],
125
125
  "introduced": "6.1.0",
126
- "description": "Used for modals and large containers."
126
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
127
127
  },
128
128
  "value": "Radius12"
129
129
  },
@@ -136,7 +136,7 @@ var tokens = [{
136
136
  "state": "active",
137
137
  "suggest": ["12px"],
138
138
  "introduced": "8.1.0",
139
- "description": "Used for the largest containers."
139
+ "description": "Use for video player containers."
140
140
  },
141
141
  "value": "16px",
142
142
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -147,7 +147,7 @@ var tokens = [{
147
147
  "state": "active",
148
148
  "suggest": ["12px"],
149
149
  "introduced": "8.1.0",
150
- "description": "Used for the largest containers."
150
+ "description": "Use for video player containers."
151
151
  },
152
152
  "value": "Radius16"
153
153
  },
@@ -160,7 +160,7 @@ var tokens = [{
160
160
  "state": "active",
161
161
  "suggest": ["50%"],
162
162
  "introduced": "6.1.0",
163
- "description": "Used for circular containers, like a rounded button."
163
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
164
164
  },
165
165
  "value": "9999px",
166
166
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -171,7 +171,7 @@ var tokens = [{
171
171
  "state": "active",
172
172
  "suggest": ["50%"],
173
173
  "introduced": "6.1.0",
174
- "description": "Used for circular containers, like a rounded button."
174
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
175
175
  },
176
176
  "value": "Radius99"
177
177
  },
@@ -183,7 +183,7 @@ var tokens = [{
183
183
  "group": "shape",
184
184
  "state": "active",
185
185
  "introduced": "6.2.0",
186
- "description": "Used for tiles only."
186
+ "description": "Use this specific radius token exclusively for the tile component system."
187
187
  },
188
188
  "value": "25%",
189
189
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -193,7 +193,7 @@ var tokens = [{
193
193
  "group": "shape",
194
194
  "state": "active",
195
195
  "introduced": "6.2.0",
196
- "description": "Used for tiles only."
196
+ "description": "Use this specific radius token exclusively for the tile component system."
197
197
  },
198
198
  "value": "RadiusPercentage25"
199
199
  },
package/dist/cjs/entry-points/token-metadata.codegen.js CHANGED
@@ -9,7 +9,7 @@ exports.tokens = void 0;
9
9
  *
10
10
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
11
11
  *
12
- * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
12
+ * @codegen <<SignedSource::a85a9bd0f3daa1c66cd9447d776bd89f>>
13
13
  * @codegenCommand yarn build tokens
14
14
  */
15
15
 
@@ -2306,42 +2306,42 @@ var tokens = exports.tokens = [{
2306
2306
  }, {
2307
2307
  name: 'radius.xsmall',
2308
2308
  path: ['radius', 'xsmall'],
2309
- description: 'Used for small containers such as badges.',
2309
+ description: 'Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts.',
2310
2310
  exampleValue: '0.125rem'
2311
2311
  }, {
2312
2312
  name: 'radius.small',
2313
2313
  path: ['radius', 'small'],
2314
- description: 'Used for labels.',
2314
+ description: 'Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons.',
2315
2315
  exampleValue: '0.25rem'
2316
2316
  }, {
2317
2317
  name: 'radius.medium',
2318
2318
  path: ['radius', 'medium'],
2319
- description: 'Used for buttons and inputs.',
2319
+ description: 'Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links.',
2320
2320
  exampleValue: '0.375rem'
2321
2321
  }, {
2322
2322
  name: 'radius.large',
2323
2323
  path: ['radius', 'large'],
2324
- description: 'Used for cards and small containers.',
2324
+ description: 'Use for containment elements: cards, in-page containers, floating UI, dropdown menus.',
2325
2325
  exampleValue: '0.5rem'
2326
2326
  }, {
2327
2327
  name: 'radius.xlarge',
2328
2328
  path: ['radius', 'xlarge'],
2329
- description: 'Used for modals and large containers.',
2329
+ description: 'Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables.',
2330
2330
  exampleValue: '0.75rem'
2331
2331
  }, {
2332
2332
  name: 'radius.xxlarge',
2333
2333
  path: ['radius', 'xxlarge'],
2334
- description: 'Used for the largest containers.',
2334
+ description: 'Use for video player containers.',
2335
2335
  exampleValue: '1rem'
2336
2336
  }, {
2337
2337
  name: 'radius.full',
2338
2338
  path: ['radius', 'full'],
2339
- description: 'Used for circular containers, like a rounded button.',
2339
+ description: 'Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions.',
2340
2340
  exampleValue: '624.9375rem'
2341
2341
  }, {
2342
2342
  name: 'radius.tile',
2343
2343
  path: ['radius', 'tile'],
2344
- description: 'Used for tiles only.',
2344
+ description: 'Use this specific radius token exclusively for the tile component system.',
2345
2345
  exampleValue: '25%'
2346
2346
  }, {
2347
2347
  name: 'border.width',
package/dist/es2019/artifacts/tokens-raw/atlassian-shape.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c7c39a1cee14fa6f779e6243ae1460d5>>
3
+ * @codegen <<SignedSource::6ec487540ff835bd85d78d35a322de1e>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
 
@@ -10,7 +10,7 @@ const tokens = [{
10
10
  "state": "active",
11
11
  "suggest": ["2px"],
12
12
  "introduced": "6.1.0",
13
- "description": "Used for small containers such as badges."
13
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
14
14
  },
15
15
  "value": "2px",
16
16
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -21,7 +21,7 @@ const tokens = [{
21
21
  "state": "active",
22
22
  "suggest": ["2px"],
23
23
  "introduced": "6.1.0",
24
- "description": "Used for small containers such as badges."
24
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
25
25
  },
26
26
  "value": "Radius02"
27
27
  },
@@ -34,7 +34,7 @@ const tokens = [{
34
34
  "state": "active",
35
35
  "suggest": ["4px"],
36
36
  "introduced": "6.1.0",
37
- "description": "Used for labels."
37
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
38
38
  },
39
39
  "value": "4px",
40
40
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -45,7 +45,7 @@ const tokens = [{
45
45
  "state": "active",
46
46
  "suggest": ["4px"],
47
47
  "introduced": "6.1.0",
48
- "description": "Used for labels."
48
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
49
49
  },
50
50
  "value": "Radius04"
51
51
  },
@@ -58,7 +58,7 @@ const tokens = [{
58
58
  "state": "active",
59
59
  "suggest": ["6px"],
60
60
  "introduced": "6.1.0",
61
- "description": "Used for buttons and inputs."
61
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
62
62
  },
63
63
  "value": "6px",
64
64
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -69,7 +69,7 @@ const tokens = [{
69
69
  "state": "active",
70
70
  "suggest": ["6px"],
71
71
  "introduced": "6.1.0",
72
- "description": "Used for buttons and inputs."
72
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
73
73
  },
74
74
  "value": "Radius06"
75
75
  },
@@ -82,7 +82,7 @@ const tokens = [{
82
82
  "state": "active",
83
83
  "suggest": ["8px"],
84
84
  "introduced": "6.1.0",
85
- "description": "Used for cards and small containers."
85
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
86
86
  },
87
87
  "value": "8px",
88
88
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -93,7 +93,7 @@ const tokens = [{
93
93
  "state": "active",
94
94
  "suggest": ["8px"],
95
95
  "introduced": "6.1.0",
96
- "description": "Used for cards and small containers."
96
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
97
97
  },
98
98
  "value": "Radius08"
99
99
  },
@@ -106,7 +106,7 @@ const tokens = [{
106
106
  "state": "active",
107
107
  "suggest": ["12px"],
108
108
  "introduced": "6.1.0",
109
- "description": "Used for modals and large containers."
109
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
110
110
  },
111
111
  "value": "12px",
112
112
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -117,7 +117,7 @@ const tokens = [{
117
117
  "state": "active",
118
118
  "suggest": ["12px"],
119
119
  "introduced": "6.1.0",
120
- "description": "Used for modals and large containers."
120
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
121
121
  },
122
122
  "value": "Radius12"
123
123
  },
@@ -130,7 +130,7 @@ const tokens = [{
130
130
  "state": "active",
131
131
  "suggest": ["12px"],
132
132
  "introduced": "8.1.0",
133
- "description": "Used for the largest containers."
133
+ "description": "Use for video player containers."
134
134
  },
135
135
  "value": "16px",
136
136
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -141,7 +141,7 @@ const tokens = [{
141
141
  "state": "active",
142
142
  "suggest": ["12px"],
143
143
  "introduced": "8.1.0",
144
- "description": "Used for the largest containers."
144
+ "description": "Use for video player containers."
145
145
  },
146
146
  "value": "Radius16"
147
147
  },
@@ -154,7 +154,7 @@ const tokens = [{
154
154
  "state": "active",
155
155
  "suggest": ["50%"],
156
156
  "introduced": "6.1.0",
157
- "description": "Used for circular containers, like a rounded button."
157
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
158
158
  },
159
159
  "value": "9999px",
160
160
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -165,7 +165,7 @@ const tokens = [{
165
165
  "state": "active",
166
166
  "suggest": ["50%"],
167
167
  "introduced": "6.1.0",
168
- "description": "Used for circular containers, like a rounded button."
168
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
169
169
  },
170
170
  "value": "Radius99"
171
171
  },
@@ -177,7 +177,7 @@ const tokens = [{
177
177
  "group": "shape",
178
178
  "state": "active",
179
179
  "introduced": "6.2.0",
180
- "description": "Used for tiles only."
180
+ "description": "Use this specific radius token exclusively for the tile component system."
181
181
  },
182
182
  "value": "25%",
183
183
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -187,7 +187,7 @@ const tokens = [{
187
187
  "group": "shape",
188
188
  "state": "active",
189
189
  "introduced": "6.2.0",
190
- "description": "Used for tiles only."
190
+ "description": "Use this specific radius token exclusively for the tile component system."
191
191
  },
192
192
  "value": "RadiusPercentage25"
193
193
  },
package/dist/es2019/entry-points/token-metadata.codegen.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
6
+ * @codegen <<SignedSource::a85a9bd0f3daa1c66cd9447d776bd89f>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
 
@@ -2300,42 +2300,42 @@ export const tokens = [{
2300
2300
  }, {
2301
2301
  name: 'radius.xsmall',
2302
2302
  path: ['radius', 'xsmall'],
2303
- description: 'Used for small containers such as badges.',
2303
+ description: 'Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts.',
2304
2304
  exampleValue: '0.125rem'
2305
2305
  }, {
2306
2306
  name: 'radius.small',
2307
2307
  path: ['radius', 'small'],
2308
- description: 'Used for labels.',
2308
+ description: 'Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons.',
2309
2309
  exampleValue: '0.25rem'
2310
2310
  }, {
2311
2311
  name: 'radius.medium',
2312
2312
  path: ['radius', 'medium'],
2313
- description: 'Used for buttons and inputs.',
2313
+ description: 'Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links.',
2314
2314
  exampleValue: '0.375rem'
2315
2315
  }, {
2316
2316
  name: 'radius.large',
2317
2317
  path: ['radius', 'large'],
2318
- description: 'Used for cards and small containers.',
2318
+ description: 'Use for containment elements: cards, in-page containers, floating UI, dropdown menus.',
2319
2319
  exampleValue: '0.5rem'
2320
2320
  }, {
2321
2321
  name: 'radius.xlarge',
2322
2322
  path: ['radius', 'xlarge'],
2323
- description: 'Used for modals and large containers.',
2323
+ description: 'Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables.',
2324
2324
  exampleValue: '0.75rem'
2325
2325
  }, {
2326
2326
  name: 'radius.xxlarge',
2327
2327
  path: ['radius', 'xxlarge'],
2328
- description: 'Used for the largest containers.',
2328
+ description: 'Use for video player containers.',
2329
2329
  exampleValue: '1rem'
2330
2330
  }, {
2331
2331
  name: 'radius.full',
2332
2332
  path: ['radius', 'full'],
2333
- description: 'Used for circular containers, like a rounded button.',
2333
+ description: 'Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions.',
2334
2334
  exampleValue: '624.9375rem'
2335
2335
  }, {
2336
2336
  name: 'radius.tile',
2337
2337
  path: ['radius', 'tile'],
2338
- description: 'Used for tiles only.',
2338
+ description: 'Use this specific radius token exclusively for the tile component system.',
2339
2339
  exampleValue: '25%'
2340
2340
  }, {
2341
2341
  name: 'border.width',
package/dist/esm/artifacts/tokens-raw/atlassian-shape.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c7c39a1cee14fa6f779e6243ae1460d5>>
3
+ * @codegen <<SignedSource::6ec487540ff835bd85d78d35a322de1e>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
 
@@ -10,7 +10,7 @@ var tokens = [{
10
10
  "state": "active",
11
11
  "suggest": ["2px"],
12
12
  "introduced": "6.1.0",
13
- "description": "Used for small containers such as badges."
13
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
14
14
  },
15
15
  "value": "2px",
16
16
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -21,7 +21,7 @@ var tokens = [{
21
21
  "state": "active",
22
22
  "suggest": ["2px"],
23
23
  "introduced": "6.1.0",
24
- "description": "Used for small containers such as badges."
24
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
25
25
  },
26
26
  "value": "Radius02"
27
27
  },
@@ -34,7 +34,7 @@ var tokens = [{
34
34
  "state": "active",
35
35
  "suggest": ["4px"],
36
36
  "introduced": "6.1.0",
37
- "description": "Used for labels."
37
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
38
38
  },
39
39
  "value": "4px",
40
40
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -45,7 +45,7 @@ var tokens = [{
45
45
  "state": "active",
46
46
  "suggest": ["4px"],
47
47
  "introduced": "6.1.0",
48
- "description": "Used for labels."
48
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
49
49
  },
50
50
  "value": "Radius04"
51
51
  },
@@ -58,7 +58,7 @@ var tokens = [{
58
58
  "state": "active",
59
59
  "suggest": ["6px"],
60
60
  "introduced": "6.1.0",
61
- "description": "Used for buttons and inputs."
61
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
62
62
  },
63
63
  "value": "6px",
64
64
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -69,7 +69,7 @@ var tokens = [{
69
69
  "state": "active",
70
70
  "suggest": ["6px"],
71
71
  "introduced": "6.1.0",
72
- "description": "Used for buttons and inputs."
72
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
73
73
  },
74
74
  "value": "Radius06"
75
75
  },
@@ -82,7 +82,7 @@ var tokens = [{
82
82
  "state": "active",
83
83
  "suggest": ["8px"],
84
84
  "introduced": "6.1.0",
85
- "description": "Used for cards and small containers."
85
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
86
86
  },
87
87
  "value": "8px",
88
88
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -93,7 +93,7 @@ var tokens = [{
93
93
  "state": "active",
94
94
  "suggest": ["8px"],
95
95
  "introduced": "6.1.0",
96
- "description": "Used for cards and small containers."
96
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
97
97
  },
98
98
  "value": "Radius08"
99
99
  },
@@ -106,7 +106,7 @@ var tokens = [{
106
106
  "state": "active",
107
107
  "suggest": ["12px"],
108
108
  "introduced": "6.1.0",
109
- "description": "Used for modals and large containers."
109
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
110
110
  },
111
111
  "value": "12px",
112
112
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -117,7 +117,7 @@ var tokens = [{
117
117
  "state": "active",
118
118
  "suggest": ["12px"],
119
119
  "introduced": "6.1.0",
120
- "description": "Used for modals and large containers."
120
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
121
121
  },
122
122
  "value": "Radius12"
123
123
  },
@@ -130,7 +130,7 @@ var tokens = [{
130
130
  "state": "active",
131
131
  "suggest": ["12px"],
132
132
  "introduced": "8.1.0",
133
- "description": "Used for the largest containers."
133
+ "description": "Use for video player containers."
134
134
  },
135
135
  "value": "16px",
136
136
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -141,7 +141,7 @@ var tokens = [{
141
141
  "state": "active",
142
142
  "suggest": ["12px"],
143
143
  "introduced": "8.1.0",
144
- "description": "Used for the largest containers."
144
+ "description": "Use for video player containers."
145
145
  },
146
146
  "value": "Radius16"
147
147
  },
@@ -154,7 +154,7 @@ var tokens = [{
154
154
  "state": "active",
155
155
  "suggest": ["50%"],
156
156
  "introduced": "6.1.0",
157
- "description": "Used for circular containers, like a rounded button."
157
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
158
158
  },
159
159
  "value": "9999px",
160
160
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -165,7 +165,7 @@ var tokens = [{
165
165
  "state": "active",
166
166
  "suggest": ["50%"],
167
167
  "introduced": "6.1.0",
168
- "description": "Used for circular containers, like a rounded button."
168
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
169
169
  },
170
170
  "value": "Radius99"
171
171
  },
@@ -177,7 +177,7 @@ var tokens = [{
177
177
  "group": "shape",
178
178
  "state": "active",
179
179
  "introduced": "6.2.0",
180
- "description": "Used for tiles only."
180
+ "description": "Use this specific radius token exclusively for the tile component system."
181
181
  },
182
182
  "value": "25%",
183
183
  "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -187,7 +187,7 @@ var tokens = [{
187
187
  "group": "shape",
188
188
  "state": "active",
189
189
  "introduced": "6.2.0",
190
- "description": "Used for tiles only."
190
+ "description": "Use this specific radius token exclusively for the tile component system."
191
191
  },
192
192
  "value": "RadiusPercentage25"
193
193
  },
package/dist/esm/entry-points/token-metadata.codegen.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
6
+ * @codegen <<SignedSource::a85a9bd0f3daa1c66cd9447d776bd89f>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
 
@@ -2300,42 +2300,42 @@ export var tokens = [{
2300
2300
  }, {
2301
2301
  name: 'radius.xsmall',
2302
2302
  path: ['radius', 'xsmall'],
2303
- description: 'Used for small containers such as badges.',
2303
+ description: 'Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts.',
2304
2304
  exampleValue: '0.125rem'
2305
2305
  }, {
2306
2306
  name: 'radius.small',
2307
2307
  path: ['radius', 'small'],
2308
- description: 'Used for labels.',
2308
+ description: 'Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons.',
2309
2309
  exampleValue: '0.25rem'
2310
2310
  }, {
2311
2311
  name: 'radius.medium',
2312
2312
  path: ['radius', 'medium'],
2313
- description: 'Used for buttons and inputs.',
2313
+ description: 'Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links.',
2314
2314
  exampleValue: '0.375rem'
2315
2315
  }, {
2316
2316
  name: 'radius.large',
2317
2317
  path: ['radius', 'large'],
2318
- description: 'Used for cards and small containers.',
2318
+ description: 'Use for containment elements: cards, in-page containers, floating UI, dropdown menus.',
2319
2319
  exampleValue: '0.5rem'
2320
2320
  }, {
2321
2321
  name: 'radius.xlarge',
2322
2322
  path: ['radius', 'xlarge'],
2323
- description: 'Used for modals and large containers.',
2323
+ description: 'Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables.',
2324
2324
  exampleValue: '0.75rem'
2325
2325
  }, {
2326
2326
  name: 'radius.xxlarge',
2327
2327
  path: ['radius', 'xxlarge'],
2328
- description: 'Used for the largest containers.',
2328
+ description: 'Use for video player containers.',
2329
2329
  exampleValue: '1rem'
2330
2330
  }, {
2331
2331
  name: 'radius.full',
2332
2332
  path: ['radius', 'full'],
2333
- description: 'Used for circular containers, like a rounded button.',
2333
+ description: 'Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions.',
2334
2334
  exampleValue: '624.9375rem'
2335
2335
  }, {
2336
2336
  name: 'radius.tile',
2337
2337
  path: ['radius', 'tile'],
2338
- description: 'Used for tiles only.',
2338
+ description: 'Use this specific radius token exclusively for the tile component system.',
2339
2339
  exampleValue: '25%'
2340
2340
  }, {
2341
2341
  name: 'border.width',
package/dist/types/artifacts/tokens-raw/atlassian-shape.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c7c39a1cee14fa6f779e6243ae1460d5>>
3
+ * @codegen <<SignedSource::6ec487540ff835bd85d78d35a322de1e>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  type TokenValue = string;
package/dist/types/entry-points/css-type-schema.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Strict design token based typedef representing a subset of safe CSS properties.
5
5
  *
6
- * @codegen <<SignedSource::9505f10fa9d06df6b3fd52a4916db1d2>>
6
+ * @codegen <<SignedSource::1a2d573fb8c14220f04597b1b0376420>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
@@ -13,7 +13,7 @@ export type FontShorthand = 'var(--ds-font-heading-xxlarge)' | 'var(--ds-font-he
13
13
  export type IconColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
14
14
  export type IconColor = IconColorPressed | 'var(--ds-link)' | 'var(--ds-link-visited)' | 'var(--ds-icon)' | 'var(--ds-icon-accent-lime)' | 'var(--ds-icon-accent-red)' | 'var(--ds-icon-accent-orange)' | 'var(--ds-icon-accent-yellow)' | 'var(--ds-icon-accent-green)' | 'var(--ds-icon-accent-teal)' | 'var(--ds-icon-accent-blue)' | 'var(--ds-icon-accent-purple)' | 'var(--ds-icon-accent-magenta)' | 'var(--ds-icon-accent-gray)' | 'var(--ds-icon-disabled)' | 'var(--ds-icon-inverse)' | 'var(--ds-icon-selected)' | 'var(--ds-icon-brand)' | 'var(--ds-icon-danger)' | 'var(--ds-icon-warning)' | 'var(--ds-icon-warning-inverse)' | 'var(--ds-icon-success)' | 'var(--ds-icon-discovery)' | 'var(--ds-icon-information)' | 'var(--ds-icon-subtlest)' | 'var(--ds-icon-subtle)';
15
15
  export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-warning)' | 'var(--ds-border-success)' | 'var(--ds-border-discovery)' | 'var(--ds-border-information)' | 'var(--ds-border-bold)';
16
- export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)' | 'var(--ds-radius-medium)' | 'var(--ds-radius-large)' | 'var(--ds-radius-xlarge)' | 'var(--ds-radius-xxlarge)' | 'var(--ds-radius-full)' | 'var(--ds-radius-tile)' | 'inherit' | `${number}px` | `${number}rem`;
16
+ export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)' | 'var(--ds-radius-medium)' | 'var(--ds-radius-large)' | 'var(--ds-radius-xlarge)' | 'var(--ds-radius-xxlarge)' | 'var(--ds-radius-full)' | 'var(--ds-radius-tile)' | 0 | '0' | 'inherit';
17
17
  export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-selected)' | 'var(--ds-border-width-focused)' | 0 | '0';
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
19
  type NumericSize = `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}%`;
package/dist/types/entry-points/token-metadata.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
6
+ * @codegen <<SignedSource::a85a9bd0f3daa1c66cd9447d776bd89f>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export interface Token {
package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-shape.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c7c39a1cee14fa6f779e6243ae1460d5>>
3
+ * @codegen <<SignedSource::6ec487540ff835bd85d78d35a322de1e>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  type TokenValue = string;
package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Strict design token based typedef representing a subset of safe CSS properties.
5
5
  *
6
- * @codegen <<SignedSource::9505f10fa9d06df6b3fd52a4916db1d2>>
6
+ * @codegen <<SignedSource::1a2d573fb8c14220f04597b1b0376420>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
@@ -13,7 +13,7 @@ export type FontShorthand = 'var(--ds-font-heading-xxlarge)' | 'var(--ds-font-he
13
13
  export type IconColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
14
14
  export type IconColor = IconColorPressed | 'var(--ds-link)' | 'var(--ds-link-visited)' | 'var(--ds-icon)' | 'var(--ds-icon-accent-lime)' | 'var(--ds-icon-accent-red)' | 'var(--ds-icon-accent-orange)' | 'var(--ds-icon-accent-yellow)' | 'var(--ds-icon-accent-green)' | 'var(--ds-icon-accent-teal)' | 'var(--ds-icon-accent-blue)' | 'var(--ds-icon-accent-purple)' | 'var(--ds-icon-accent-magenta)' | 'var(--ds-icon-accent-gray)' | 'var(--ds-icon-disabled)' | 'var(--ds-icon-inverse)' | 'var(--ds-icon-selected)' | 'var(--ds-icon-brand)' | 'var(--ds-icon-danger)' | 'var(--ds-icon-warning)' | 'var(--ds-icon-warning-inverse)' | 'var(--ds-icon-success)' | 'var(--ds-icon-discovery)' | 'var(--ds-icon-information)' | 'var(--ds-icon-subtlest)' | 'var(--ds-icon-subtle)';
15
15
  export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-warning)' | 'var(--ds-border-success)' | 'var(--ds-border-discovery)' | 'var(--ds-border-information)' | 'var(--ds-border-bold)';
16
- export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)' | 'var(--ds-radius-medium)' | 'var(--ds-radius-large)' | 'var(--ds-radius-xlarge)' | 'var(--ds-radius-xxlarge)' | 'var(--ds-radius-full)' | 'var(--ds-radius-tile)' | 'inherit' | `${number}px` | `${number}rem`;
16
+ export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)' | 'var(--ds-radius-medium)' | 'var(--ds-radius-large)' | 'var(--ds-radius-xlarge)' | 'var(--ds-radius-xxlarge)' | 'var(--ds-radius-full)' | 'var(--ds-radius-tile)' | 0 | '0' | 'inherit';
17
17
  export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-selected)' | 'var(--ds-border-width-focused)' | 0 | '0';
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
19
  type NumericSize = `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}%`;
package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
6
+ * @codegen <<SignedSource::a85a9bd0f3daa1c66cd9447d776bd89f>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export interface Token {
package/figma/atlassian-shape.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "2px"
10
10
  ],
11
11
  "introduced": "6.1.0",
12
- "description": "Used for small containers such as badges."
12
+ "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
13
13
  },
14
14
  "value": 2
15
15
  },
@@ -21,7 +21,7 @@
21
21
  "4px"
22
22
  ],
23
23
  "introduced": "6.1.0",
24
- "description": "Used for labels."
24
+ "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
25
25
  },
26
26
  "value": 4
27
27
  },
@@ -33,7 +33,7 @@
33
33
  "6px"
34
34
  ],
35
35
  "introduced": "6.1.0",
36
- "description": "Used for buttons and inputs."
36
+ "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
37
37
  },
38
38
  "value": 6
39
39
  },
@@ -45,7 +45,7 @@
45
45
  "8px"
46
46
  ],
47
47
  "introduced": "6.1.0",
48
- "description": "Used for cards and small containers."
48
+ "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
49
49
  },
50
50
  "value": 8
51
51
  },
@@ -57,7 +57,7 @@
57
57
  "12px"
58
58
  ],
59
59
  "introduced": "6.1.0",
60
- "description": "Used for modals and large containers."
60
+ "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
61
61
  },
62
62
  "value": 12
63
63
  },
@@ -69,7 +69,7 @@
69
69
  "12px"
70
70
  ],
71
71
  "introduced": "8.1.0",
72
- "description": "Used for the largest containers."
72
+ "description": "Use for video player containers."
73
73
  },
74
74
  "value": 16
75
75
  },
@@ -81,7 +81,7 @@
81
81
  "50%"
82
82
  ],
83
83
  "introduced": "6.1.0",
84
- "description": "Used for circular containers, like a rounded button."
84
+ "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
85
85
  },
86
86
  "value": 9999
87
87
  },
@@ -90,7 +90,7 @@
90
90
  "group": "shape",
91
91
  "state": "active",
92
92
  "introduced": "6.2.0",
93
- "description": "Used for tiles only."
93
+ "description": "Use this specific radius token exclusively for the tile component system."
94
94
  },
95
95
  "value": "25%"
96
96
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "8.6.0",
3
+ "version": "9.0.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,23 +44,23 @@
44
44
  "@af/formatting": "workspace:^",
45
45
  "@af/visual-regression": "workspace:^",
46
46
  "@atlaskit/avatar": "^25.6.0",
47
- "@atlaskit/button": "^23.8.0",
47
+ "@atlaskit/button": "^23.9.0",
48
48
  "@atlaskit/calendar": "^17.2.0",
49
49
  "@atlaskit/checkbox": "^17.2.0",
50
50
  "@atlaskit/code": "^17.4.0",
51
- "@atlaskit/css": "^0.18.0",
51
+ "@atlaskit/css": "^0.19.0",
52
52
  "@atlaskit/docs": "^11.2.0",
53
53
  "@atlaskit/dropdown-menu": "^16.3.0",
54
54
  "@atlaskit/dynamic-table": "^18.3.0",
55
- "@atlaskit/form": "^15.0.0",
55
+ "@atlaskit/form": "^15.1.0",
56
56
  "@atlaskit/grid": "^0.18.0",
57
57
  "@atlaskit/heading": "^5.2.0",
58
- "@atlaskit/icon": "^29.2.0",
59
- "@atlaskit/inline-message": "^15.4.0",
58
+ "@atlaskit/icon": "^29.3.0",
59
+ "@atlaskit/inline-message": "^15.5.0",
60
60
  "@atlaskit/link": "^3.2.0",
61
61
  "@atlaskit/lozenge": "^13.2.0",
62
- "@atlaskit/popup": "^4.7.0",
63
- "@atlaskit/primitives": "^16.4.0",
62
+ "@atlaskit/popup": "^4.8.0",
63
+ "@atlaskit/primitives": "^17.0.0",
64
64
  "@atlaskit/radio": "^8.3.0",
65
65
  "@atlaskit/section-message": "^8.11.0",
66
66
  "@atlaskit/select": "^21.6.0",
@@ -71,7 +71,6 @@
71
71
  "@atlaskit/tooltip": "^20.11.0",
72
72
  "@atlassian/codegen": "^0.1.0",
73
73
  "@atlassian/feature-flags-test-utils": "^1.0.0",
74
- "@atlassian/repo-feature-flags-statsig": "^1.11.0",
75
74
  "@atlassian/ts-loader": "^0.1.0",
76
75
  "@babel/core": "7.24.9",
77
76
  "@compiled/react": "^0.18.6",