@atlaskit/tokens 1.36.0 → 1.37.1
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/CHANGELOG.md +12 -0
- package/codemods/css-to-design-tokens/__tests__/css-to-design-tokens.test.tsx +489 -0
- package/codemods/css-to-design-tokens/__tests__/utils.test.tsx +145 -0
- package/codemods/css-to-design-tokens/lib/colors.tsx +71 -0
- package/codemods/css-to-design-tokens/lib/declaration.tsx +43 -0
- package/codemods/css-to-design-tokens/lib/legacy-colors.tsx +336 -0
- package/codemods/css-to-design-tokens/lib/meta.tsx +173 -0
- package/codemods/css-to-design-tokens/lib/tokens.tsx +54 -0
- package/codemods/css-to-design-tokens/lib/value.tsx +85 -0
- package/codemods/css-to-design-tokens/transform.tsx +99 -0
- package/codemods/hypermod.config.tsx +9 -0
- package/codemods/theme-to-design-tokens/__tests__/theme-to-design-tokens.test.tsx +1104 -0
- package/codemods/theme-to-design-tokens/transform.tsx +628 -0
- package/codemods/theme-to-design-tokens/utils/ast-meta.tsx +159 -0
- package/codemods/theme-to-design-tokens/utils/ast.tsx +46 -0
- package/codemods/theme-to-design-tokens/utils/color.tsx +45 -0
- package/codemods/theme-to-design-tokens/utils/css-utils.tsx +38 -0
- package/codemods/theme-to-design-tokens/utils/fuzzy-search.tsx +326 -0
- package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx +232 -0
- package/codemods/theme-to-design-tokens/utils/named-colors.tsx +150 -0
- package/codemods/theme-to-design-tokens/utils/string-utils.tsx +22 -0
- package/codemods/utils/tokens.tsx +376 -0
- package/dist/cjs/artifacts/palettes-raw/typography-palette.js +3 -3
- package/dist/cjs/artifacts/themes/atlassian-typography-adg3.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-typography-minor3.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +15 -15
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography-adg3.js +15 -15
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography-minor3.js +16 -16
- package/dist/cjs/get-token-value.js +1 -1
- package/dist/cjs/get-token.js +1 -1
- package/dist/es2019/artifacts/palettes-raw/typography-palette.js +3 -3
- package/dist/es2019/artifacts/themes/atlassian-typography-adg3.js +15 -15
- package/dist/es2019/artifacts/themes/atlassian-typography-minor3.js +20 -20
- package/dist/es2019/artifacts/token-default-values.js +15 -15
- package/dist/es2019/artifacts/tokens-raw/atlassian-typography-adg3.js +15 -15
- package/dist/es2019/artifacts/tokens-raw/atlassian-typography-minor3.js +16 -16
- package/dist/es2019/get-token-value.js +1 -1
- package/dist/es2019/get-token.js +1 -1
- package/dist/esm/artifacts/palettes-raw/typography-palette.js +3 -3
- package/dist/esm/artifacts/themes/atlassian-typography-adg3.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-typography-minor3.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +15 -15
- package/dist/esm/artifacts/tokens-raw/atlassian-typography-adg3.js +15 -15
- package/dist/esm/artifacts/tokens-raw/atlassian-typography-minor3.js +16 -16
- package/dist/esm/get-token-value.js +1 -1
- package/dist/esm/get-token.js +1 -1
- package/dist/types/artifacts/palettes-raw/typography-palette.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-typography-adg3.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-typography-minor3.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +15 -15
- package/dist/types/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-typography-minor3.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/palettes-raw/typography-palette.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography-adg3.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-typography-minor3.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +15 -15
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography-minor3.d.ts +1 -1
- package/package.json +5 -1
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
export const legacyColors = [
|
|
2
|
+
'R50',
|
|
3
|
+
'R75',
|
|
4
|
+
'R100',
|
|
5
|
+
'R200',
|
|
6
|
+
'R300',
|
|
7
|
+
'R400',
|
|
8
|
+
'R500',
|
|
9
|
+
'Y50',
|
|
10
|
+
'Y75',
|
|
11
|
+
'Y100',
|
|
12
|
+
'Y200',
|
|
13
|
+
'Y300',
|
|
14
|
+
'Y400',
|
|
15
|
+
'Y500',
|
|
16
|
+
'G50',
|
|
17
|
+
'G75',
|
|
18
|
+
'G100',
|
|
19
|
+
'G200',
|
|
20
|
+
'G300',
|
|
21
|
+
'G400',
|
|
22
|
+
'G500',
|
|
23
|
+
'B50',
|
|
24
|
+
'B75',
|
|
25
|
+
'B100',
|
|
26
|
+
'B200',
|
|
27
|
+
'B300',
|
|
28
|
+
'B400',
|
|
29
|
+
'B500',
|
|
30
|
+
'P50',
|
|
31
|
+
'P75',
|
|
32
|
+
'P100',
|
|
33
|
+
'P200',
|
|
34
|
+
'P300',
|
|
35
|
+
'P400',
|
|
36
|
+
'P500',
|
|
37
|
+
'T50',
|
|
38
|
+
'T75',
|
|
39
|
+
'T100',
|
|
40
|
+
'T200',
|
|
41
|
+
'T300',
|
|
42
|
+
'T400',
|
|
43
|
+
'T500',
|
|
44
|
+
'N0',
|
|
45
|
+
'N10',
|
|
46
|
+
'N20',
|
|
47
|
+
'N30',
|
|
48
|
+
'N40',
|
|
49
|
+
'N50',
|
|
50
|
+
'N60',
|
|
51
|
+
'N70',
|
|
52
|
+
'N80',
|
|
53
|
+
'N90',
|
|
54
|
+
'N100',
|
|
55
|
+
'N200',
|
|
56
|
+
'N300',
|
|
57
|
+
'N400',
|
|
58
|
+
'N500',
|
|
59
|
+
'N600',
|
|
60
|
+
'N700',
|
|
61
|
+
'N800',
|
|
62
|
+
'N900',
|
|
63
|
+
'N10A',
|
|
64
|
+
'N20A',
|
|
65
|
+
'N30A',
|
|
66
|
+
'N40A',
|
|
67
|
+
'N50A',
|
|
68
|
+
'N60A',
|
|
69
|
+
'N70A',
|
|
70
|
+
'N80A',
|
|
71
|
+
'N90A',
|
|
72
|
+
'N100A',
|
|
73
|
+
'N200A',
|
|
74
|
+
'N300A',
|
|
75
|
+
'N400A',
|
|
76
|
+
'N500A',
|
|
77
|
+
'N600A',
|
|
78
|
+
'N700A',
|
|
79
|
+
'N800A',
|
|
80
|
+
'DN900',
|
|
81
|
+
'DN800',
|
|
82
|
+
'DN700',
|
|
83
|
+
'DN600',
|
|
84
|
+
'DN500',
|
|
85
|
+
'DN400',
|
|
86
|
+
'DN300',
|
|
87
|
+
'DN200',
|
|
88
|
+
'DN100',
|
|
89
|
+
'DN90',
|
|
90
|
+
'DN80',
|
|
91
|
+
'DN70',
|
|
92
|
+
'DN60',
|
|
93
|
+
'DN50',
|
|
94
|
+
'DN40',
|
|
95
|
+
'DN30',
|
|
96
|
+
'DN20',
|
|
97
|
+
'DN10',
|
|
98
|
+
'DN0',
|
|
99
|
+
'DN800A',
|
|
100
|
+
'DN700A',
|
|
101
|
+
'DN600A',
|
|
102
|
+
'DN500A',
|
|
103
|
+
'DN400A',
|
|
104
|
+
'DN300A',
|
|
105
|
+
'DN200A',
|
|
106
|
+
'DN100A',
|
|
107
|
+
'DN90A',
|
|
108
|
+
'DN80A',
|
|
109
|
+
'DN70A',
|
|
110
|
+
'DN60A',
|
|
111
|
+
'DN50A',
|
|
112
|
+
'DN40A',
|
|
113
|
+
'DN30A',
|
|
114
|
+
'DN20A',
|
|
115
|
+
'DN10A',
|
|
116
|
+
];
|
|
117
|
+
|
|
118
|
+
export const legacyColorMixins = [
|
|
119
|
+
'background',
|
|
120
|
+
'backgroundActive',
|
|
121
|
+
'backgroundHover',
|
|
122
|
+
'backgroundOnLayer',
|
|
123
|
+
'text',
|
|
124
|
+
'textHover',
|
|
125
|
+
'textActive',
|
|
126
|
+
'subtleText',
|
|
127
|
+
'placeholderText',
|
|
128
|
+
'heading',
|
|
129
|
+
'subtleHeading',
|
|
130
|
+
'codeBlock',
|
|
131
|
+
'link',
|
|
132
|
+
'linkHover',
|
|
133
|
+
'linkActive',
|
|
134
|
+
'linkOutline',
|
|
135
|
+
'primary',
|
|
136
|
+
'blue',
|
|
137
|
+
'teal',
|
|
138
|
+
'purple',
|
|
139
|
+
'red',
|
|
140
|
+
'yellow',
|
|
141
|
+
'green',
|
|
142
|
+
'skeleton',
|
|
143
|
+
];
|
|
144
|
+
|
|
145
|
+
export const legacyColorMetaMap: Record<string, string[]> = {
|
|
146
|
+
R50: ['danger'],
|
|
147
|
+
R75: ['danger'],
|
|
148
|
+
R100: ['danger'],
|
|
149
|
+
R200: ['danger'],
|
|
150
|
+
R300: ['danger', 'bold'],
|
|
151
|
+
R400: ['danger', 'bold'],
|
|
152
|
+
R500: ['danger', 'bold'],
|
|
153
|
+
Y50: ['warning'],
|
|
154
|
+
Y75: ['warning'],
|
|
155
|
+
Y100: ['warning'],
|
|
156
|
+
Y200: ['warning'],
|
|
157
|
+
Y300: ['warning', 'bold'],
|
|
158
|
+
Y400: ['warning', 'bold'],
|
|
159
|
+
Y500: ['warning', 'bold'],
|
|
160
|
+
G50: ['success'],
|
|
161
|
+
G75: ['success'],
|
|
162
|
+
G100: ['success'],
|
|
163
|
+
G200: ['success'],
|
|
164
|
+
G300: ['success'],
|
|
165
|
+
G400: ['success'],
|
|
166
|
+
G500: ['success'],
|
|
167
|
+
B50: ['information'],
|
|
168
|
+
B75: ['information'],
|
|
169
|
+
B100: ['information'],
|
|
170
|
+
B200: ['information'],
|
|
171
|
+
B300: ['information', 'bold'],
|
|
172
|
+
B400: ['information', 'bold'],
|
|
173
|
+
B500: ['information', 'bold'],
|
|
174
|
+
P50: ['discovery'],
|
|
175
|
+
P75: ['discovery'],
|
|
176
|
+
P100: ['discovery'],
|
|
177
|
+
P200: ['discovery'],
|
|
178
|
+
P300: ['discovery', 'bold'],
|
|
179
|
+
P400: ['discovery', 'bold'],
|
|
180
|
+
P500: ['discovery', 'bold'],
|
|
181
|
+
T50: ['accent', 'teal'],
|
|
182
|
+
T75: ['accent', 'teal'],
|
|
183
|
+
T100: ['accent', 'teal'],
|
|
184
|
+
T200: ['accent', 'teal'],
|
|
185
|
+
T300: ['accent', 'teal'],
|
|
186
|
+
T400: ['accent', 'teal'],
|
|
187
|
+
T500: ['accent', 'teal'],
|
|
188
|
+
N0: ['inverse'],
|
|
189
|
+
N10: ['neutral'],
|
|
190
|
+
N20: ['neutral'],
|
|
191
|
+
N30: ['neutral'],
|
|
192
|
+
N40: ['neutral'],
|
|
193
|
+
N50: ['neutral'],
|
|
194
|
+
N60: ['neutral'],
|
|
195
|
+
N70: ['neutral'],
|
|
196
|
+
N80: ['neutral'],
|
|
197
|
+
N90: ['neutral'],
|
|
198
|
+
N100: ['neutral'],
|
|
199
|
+
N200: ['neutral'],
|
|
200
|
+
N300: ['neutral'],
|
|
201
|
+
N400: ['neutral'],
|
|
202
|
+
N500: ['neutral'],
|
|
203
|
+
N600: ['neutral'],
|
|
204
|
+
N700: ['neutral'],
|
|
205
|
+
N800: ['neutral'],
|
|
206
|
+
N900: ['neutral'],
|
|
207
|
+
background: ['background', 'default'],
|
|
208
|
+
backgroundActive: ['background', 'pressed'],
|
|
209
|
+
backgroundHover: ['background', 'hovered'],
|
|
210
|
+
backgroundOnLayer: ['background', 'blanket'],
|
|
211
|
+
text: ['text'],
|
|
212
|
+
textHover: ['text', 'subtle'],
|
|
213
|
+
textActive: ['text', 'link', 'pressed'],
|
|
214
|
+
subtleText: ['text', 'subtlest'],
|
|
215
|
+
placeholderText: ['text', 'subtlest'],
|
|
216
|
+
heading: ['text'],
|
|
217
|
+
subtleHeading: ['text', 'subtle'],
|
|
218
|
+
link: ['link'],
|
|
219
|
+
linkHover: ['link', 'hovered'],
|
|
220
|
+
linkActive: ['link', 'pressed'],
|
|
221
|
+
linkOutline: ['border', 'selected'],
|
|
222
|
+
primary: ['brand'],
|
|
223
|
+
blue: ['accent', 'blue'],
|
|
224
|
+
teal: ['accent', 'teal'],
|
|
225
|
+
purple: ['accent', 'purple'],
|
|
226
|
+
red: ['accent', 'red'],
|
|
227
|
+
yellow: ['accent', 'orange'],
|
|
228
|
+
green: ['accent', 'green'],
|
|
229
|
+
grey: ['background', 'neutral'],
|
|
230
|
+
skeleton: ['skeleton'],
|
|
231
|
+
white: ['inverse'],
|
|
232
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
export const namedColors = [
|
|
2
|
+
'black',
|
|
3
|
+
'silver',
|
|
4
|
+
'gray',
|
|
5
|
+
'white',
|
|
6
|
+
'maroon',
|
|
7
|
+
'red',
|
|
8
|
+
'purple',
|
|
9
|
+
'fuchsia',
|
|
10
|
+
'green',
|
|
11
|
+
'lime',
|
|
12
|
+
'olive',
|
|
13
|
+
'yellow',
|
|
14
|
+
'navy',
|
|
15
|
+
'blue',
|
|
16
|
+
'teal',
|
|
17
|
+
'aqua',
|
|
18
|
+
'orange',
|
|
19
|
+
'aliceblue',
|
|
20
|
+
'antiquewhite',
|
|
21
|
+
'aquamarine',
|
|
22
|
+
'azure',
|
|
23
|
+
'beige',
|
|
24
|
+
'bisque',
|
|
25
|
+
'blanchedalmond',
|
|
26
|
+
'blueviolet',
|
|
27
|
+
'brown',
|
|
28
|
+
'burlywood',
|
|
29
|
+
'cadetblue',
|
|
30
|
+
'chartreuse',
|
|
31
|
+
'chocolate',
|
|
32
|
+
'coral',
|
|
33
|
+
'cornflowerblue',
|
|
34
|
+
'cornsilk',
|
|
35
|
+
'crimson',
|
|
36
|
+
'cyan',
|
|
37
|
+
'darkblue',
|
|
38
|
+
'darkcyan',
|
|
39
|
+
'darkgoldenrod',
|
|
40
|
+
'darkgray',
|
|
41
|
+
'darkgreen',
|
|
42
|
+
'darkgrey',
|
|
43
|
+
'darkkhaki',
|
|
44
|
+
'darkmagenta',
|
|
45
|
+
'darkolivegreen',
|
|
46
|
+
'darkorange',
|
|
47
|
+
'darkorchid',
|
|
48
|
+
'darkred',
|
|
49
|
+
'darksalmon',
|
|
50
|
+
'darkseagreen',
|
|
51
|
+
'darkslateblue',
|
|
52
|
+
'darkslategray',
|
|
53
|
+
'darkslategrey',
|
|
54
|
+
'darkturquoise',
|
|
55
|
+
'darkviolet',
|
|
56
|
+
'deeppink',
|
|
57
|
+
'deepskyblue',
|
|
58
|
+
'dimgray',
|
|
59
|
+
'dimgrey',
|
|
60
|
+
'dodgerblue',
|
|
61
|
+
'firebrick',
|
|
62
|
+
'floralwhite',
|
|
63
|
+
'forestgreen',
|
|
64
|
+
'gainsboro',
|
|
65
|
+
'ghostwhite',
|
|
66
|
+
'gold',
|
|
67
|
+
'goldenrod',
|
|
68
|
+
'greenyellow',
|
|
69
|
+
'grey',
|
|
70
|
+
'honeydew',
|
|
71
|
+
'hotpink',
|
|
72
|
+
'indianred',
|
|
73
|
+
'indigo',
|
|
74
|
+
'ivory',
|
|
75
|
+
'khaki',
|
|
76
|
+
'lavender',
|
|
77
|
+
'lavenderblush',
|
|
78
|
+
'lawngreen',
|
|
79
|
+
'lemonchiffon',
|
|
80
|
+
'lightblue',
|
|
81
|
+
'lightcoral',
|
|
82
|
+
'lightcyan',
|
|
83
|
+
'lightgoldenrodyellow',
|
|
84
|
+
'lightgray',
|
|
85
|
+
'lightgreen',
|
|
86
|
+
'lightgrey',
|
|
87
|
+
'lightpink',
|
|
88
|
+
'lightsalmon',
|
|
89
|
+
'lightseagreen',
|
|
90
|
+
'lightskyblue',
|
|
91
|
+
'lightslategray',
|
|
92
|
+
'lightslategrey',
|
|
93
|
+
'lightsteelblue',
|
|
94
|
+
'lightyellow',
|
|
95
|
+
'limegreen',
|
|
96
|
+
'linen',
|
|
97
|
+
'magenta',
|
|
98
|
+
'mediumaquamarine',
|
|
99
|
+
'mediumblue',
|
|
100
|
+
'mediumorchid',
|
|
101
|
+
'mediumpurple',
|
|
102
|
+
'mediumseagreen',
|
|
103
|
+
'mediumslateblue',
|
|
104
|
+
'mediumspringgreen',
|
|
105
|
+
'mediumturquoise',
|
|
106
|
+
'mediumvioletred',
|
|
107
|
+
'midnightblue',
|
|
108
|
+
'mintcream',
|
|
109
|
+
'mistyrose',
|
|
110
|
+
'moccasin',
|
|
111
|
+
'navajowhite',
|
|
112
|
+
'oldlace',
|
|
113
|
+
'olivedrab',
|
|
114
|
+
'orangered',
|
|
115
|
+
'orchid',
|
|
116
|
+
'palegoldenrod',
|
|
117
|
+
'palegreen',
|
|
118
|
+
'paleturquoise',
|
|
119
|
+
'palevioletred',
|
|
120
|
+
'papayawhip',
|
|
121
|
+
'peachpuff',
|
|
122
|
+
'peru',
|
|
123
|
+
'pink',
|
|
124
|
+
'plum',
|
|
125
|
+
'powderblue',
|
|
126
|
+
'rosybrown',
|
|
127
|
+
'royalblue',
|
|
128
|
+
'saddlebrown',
|
|
129
|
+
'salmon',
|
|
130
|
+
'sandybrown',
|
|
131
|
+
'seagreen',
|
|
132
|
+
'seashell',
|
|
133
|
+
'sienna',
|
|
134
|
+
'skyblue',
|
|
135
|
+
'slateblue',
|
|
136
|
+
'slategray',
|
|
137
|
+
'slategrey',
|
|
138
|
+
'snow',
|
|
139
|
+
'springgreen',
|
|
140
|
+
'steelblue',
|
|
141
|
+
'tan',
|
|
142
|
+
'thistle',
|
|
143
|
+
'tomato',
|
|
144
|
+
'turquoise',
|
|
145
|
+
'violet',
|
|
146
|
+
'wheat',
|
|
147
|
+
'whitesmoke',
|
|
148
|
+
'yellowgreen',
|
|
149
|
+
'rebeccapurple',
|
|
150
|
+
];
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export const kebabize = (str: string) =>
|
|
2
|
+
str.replace(
|
|
3
|
+
/[A-Z]+(?![a-z])|[A-Z]/g,
|
|
4
|
+
($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
|
|
5
|
+
);
|
|
6
|
+
|
|
7
|
+
export function findFirstNonspaceIndexAfter(
|
|
8
|
+
text: string,
|
|
9
|
+
index: number,
|
|
10
|
+
): number {
|
|
11
|
+
const rest = text.slice(index + 1);
|
|
12
|
+
const indexInRest = rest.search(/\S/);
|
|
13
|
+
if (indexInRest === -1) {
|
|
14
|
+
return text.length;
|
|
15
|
+
} else {
|
|
16
|
+
return index + 1 + indexInRest;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function splitAtIndex(text: string, index: number): [string, string] {
|
|
21
|
+
return [text.slice(0, index), text.slice(index)];
|
|
22
|
+
}
|