@patternfly/design-tokens 1.6.0 → 1.6.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.
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Wed, 22 May 2024 20:26:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
@@ -18,7 +22,7 @@
18
22
  --pf-t--chart--global--BorderWidth--lg: 8;
19
23
  --pf-t--chart--global--BorderWidth--sm: 2;
20
24
  --pf-t--chart--global--BorderWidth--xs: 1;
21
- --pf-t--chart--global--label--fill: var(--pf-t--color--gray--90);
25
+ --pf-t--chart--global--label--fill: var(--pf-t--color--white);
22
26
  --pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--50);
23
27
  --pf-t--chart--global--success--color--100: var(--pf-t--color--blue--30);
24
28
  --pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--30);
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Wed, 22 May 2024 20:26:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Wed, 22 May 2024 20:26:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -1,15 +1,32 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Wed, 22 May 2024 20:26:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
7
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
8
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
9
+ --pf-t--global--delay--400: 7000ms;
10
+ --pf-t--global--delay--300: 100ms;
11
+ --pf-t--global--delay--200: 50ms;
12
+ --pf-t--global--delay--100: 0ms;
13
+ --pf-t--global--duration--600: 600ms;
14
+ --pf-t--global--duration--500: 500ms;
15
+ --pf-t--global--duration--400: 400ms;
16
+ --pf-t--global--duration--300: 300ms;
17
+ --pf-t--global--duration--200: 200ms;
18
+ --pf-t--global--duration--100: 100ms;
19
+ --pf-t--global--duration--50: 50ms;
6
20
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
7
21
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
22
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
9
23
  --pf-t--global--breakpoint--600: 1450px;
24
+ --pf-t--global--breakpoint--550: 1280px;
10
25
  --pf-t--global--breakpoint--500: 1200px;
11
26
  --pf-t--global--breakpoint--400: 992px;
27
+ --pf-t--global--breakpoint--350: 960px;
12
28
  --pf-t--global--breakpoint--300: 768px;
29
+ --pf-t--global--breakpoint--250: 640px;
13
30
  --pf-t--global--breakpoint--200: 576px;
14
31
  --pf-t--global--breakpoint--100: 0px;
15
32
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -69,6 +86,20 @@
69
86
  --pf-t--global--spacer--300: 16px;
70
87
  --pf-t--global--spacer--200: 8px;
71
88
  --pf-t--global--spacer--100: 4px;
89
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
90
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
91
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
92
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
93
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
94
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
95
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
96
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
97
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
98
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
99
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
100
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
101
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
102
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
72
103
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
73
104
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
74
105
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -138,6 +169,11 @@
138
169
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
139
170
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
140
171
  --pf-t--global--background--color--100: var(--pf-t--color--white);
172
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
173
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
174
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
175
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
176
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
141
177
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
142
178
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
143
179
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -219,10 +255,10 @@
219
255
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
220
256
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
221
257
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
222
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
223
258
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
224
259
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
225
260
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
261
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
226
262
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
227
263
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
228
264
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -252,6 +288,18 @@
252
288
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
253
289
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
254
290
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
291
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
292
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
293
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
294
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
295
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
296
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
297
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
298
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
299
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
300
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
301
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
302
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
255
303
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
256
304
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
257
305
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Wed, 22 May 2024 20:26:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "description": "Define the design tokens for patternfly design system and component library",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -47,20 +47,28 @@ function processCollection({ name, modes, variableIds }) {
47
47
  figma.variables.getVariableById(variableId);
48
48
  const value = valuesByMode[mode.modeId];
49
49
 
50
- if (value !== undefined && ["COLOR", "FLOAT"].includes(resolvedType)) {
50
+ if (value !== undefined && ["COLOR", "FLOAT", "STRING"].includes(resolvedType)) {
51
51
  let obj = file.body;
52
52
  name.split("/").forEach((groupName) => {
53
53
  obj[groupName] = obj[groupName] || {};
54
54
  obj = obj[groupName];
55
55
  });
56
-
57
- obj.$type = resolvedType === "COLOR" ? "color" : "number";
56
+
57
+
58
58
  if (value.type === "VARIABLE_ALIAS") {
59
+ obj.$type = resolvedType === "COLOR" ? "color" : "number";
59
60
  obj.$value = `{${figma.variables
60
61
  .getVariableById(value.id)
61
62
  .name.replace(/\//g, ".")}}`;
62
- } else {
63
- obj.$value = resolvedType === "COLOR" ? rgbToHex(value) : value;
63
+ } else if (resolvedType === "COLOR") {
64
+ obj.$type = "color"
65
+ obj.$value = rgbToHex(value);
66
+ } else if (resolvedType === "FLOAT") {
67
+ obj.$type = "number";
68
+ obj.$value = value
69
+ } else if (resolvedType === "STRING") {
70
+ obj.$type = "string";
71
+ obj.$value = value
64
72
  }
65
73
  }
66
74
  });
@@ -288,6 +288,14 @@
288
288
  "value": 22
289
289
  }
290
290
  },
291
+ "letter-spacing": {
292
+ "type": "string",
293
+ "value": "normal"
294
+ },
295
+ "stroke-line-cap": {
296
+ "type": "string",
297
+ "value": "round"
298
+ },
291
299
  "label": {
292
300
  "padding": {
293
301
  "type": "number",
@@ -301,11 +309,17 @@
301
309
  "width": {
302
310
  "type": "number",
303
311
  "value": 0
304
- }
312
+ },
313
+ "type": "string",
314
+ "value": "transparent"
315
+ },
316
+ "text-anchor": {
317
+ "type": "string",
318
+ "value": "middle"
305
319
  },
306
320
  "fill": {
307
321
  "type": "color",
308
- "value": "{color.gray.90}"
322
+ "value": "{color.white}"
309
323
  }
310
324
  },
311
325
  "layout": {
@@ -321,6 +335,10 @@
321
335
  "type": "number",
322
336
  "value": 450
323
337
  }
338
+ },
339
+ "stroke-line-join": {
340
+ "type": "string",
341
+ "value": "round"
324
342
  }
325
343
  },
326
344
  "theme": {
@@ -258,10 +258,18 @@
258
258
  "type": "number",
259
259
  "value": 576
260
260
  },
261
+ "250": {
262
+ "type": "number",
263
+ "value": 640
264
+ },
261
265
  "300": {
262
266
  "type": "number",
263
267
  "value": 768
264
268
  },
269
+ "350": {
270
+ "type": "number",
271
+ "value": 960
272
+ },
265
273
  "400": {
266
274
  "type": "number",
267
275
  "value": 992
@@ -270,6 +278,10 @@
270
278
  "type": "number",
271
279
  "value": 1200
272
280
  },
281
+ "550": {
282
+ "type": "number",
283
+ "value": 1280
284
+ },
273
285
  "600": {
274
286
  "type": "number",
275
287
  "value": 1450
@@ -0,0 +1,67 @@
1
+
2
+ {
3
+ "global": {
4
+ "duration": {
5
+ "50": {
6
+ "type": "number",
7
+ "value": 50
8
+ },
9
+ "100": {
10
+ "type": "number",
11
+ "value": 100
12
+ },
13
+ "200": {
14
+ "type": "number",
15
+ "value": 200
16
+ },
17
+ "300": {
18
+ "type": "number",
19
+ "value": 300
20
+ },
21
+ "400": {
22
+ "type": "number",
23
+ "value": 400
24
+ },
25
+ "500": {
26
+ "type": "number",
27
+ "value": 500
28
+ },
29
+ "600": {
30
+ "type": "number",
31
+ "value": 600
32
+ }
33
+ },
34
+ "delay": {
35
+ "100": {
36
+ "type": "number",
37
+ "value": 0
38
+ },
39
+ "200": {
40
+ "type": "number",
41
+ "value": 50
42
+ },
43
+ "300": {
44
+ "type": "number",
45
+ "value": 100
46
+ },
47
+ "400": {
48
+ "type": "number",
49
+ "value": 7000
50
+ }
51
+ },
52
+ "timing-function": {
53
+ "100": {
54
+ "type": "string",
55
+ "value": "cubic-bezier(.4, 0, .7, .2)"
56
+ },
57
+ "200": {
58
+ "type": "string",
59
+ "value": "cubic-bezier(.4, 0, .2, 1)"
60
+ },
61
+ "300": {
62
+ "type": "string",
63
+ "value": "cubic-bezier(0, 0, .2, 1)"
64
+ }
65
+ }
66
+ }
67
+ }
@@ -288,6 +288,14 @@
288
288
  "value": 22
289
289
  }
290
290
  },
291
+ "letter-spacing": {
292
+ "type": "string",
293
+ "value": "normal"
294
+ },
295
+ "stroke-line-cap": {
296
+ "type": "string",
297
+ "value": "round"
298
+ },
291
299
  "label": {
292
300
  "padding": {
293
301
  "type": "number",
@@ -301,7 +309,13 @@
301
309
  "width": {
302
310
  "type": "number",
303
311
  "value": 0
304
- }
312
+ },
313
+ "type": "string",
314
+ "value": "transparent"
315
+ },
316
+ "text-anchor": {
317
+ "type": "string",
318
+ "value": "middle"
305
319
  },
306
320
  "fill": {
307
321
  "type": "color",
@@ -321,6 +335,10 @@
321
335
  "type": "number",
322
336
  "value": 450
323
337
  }
338
+ },
339
+ "stroke-line-join": {
340
+ "type": "string",
341
+ "value": "round"
324
342
  }
325
343
  },
326
344
  "theme": {
@@ -29,6 +29,10 @@
29
29
  }
30
30
  },
31
31
  "width": {
32
+ "regular": {
33
+ "type": "number",
34
+ "value": "{global.border.width.100}"
35
+ },
32
36
  "divider": {
33
37
  "default": {
34
38
  "type": "number",
@@ -43,10 +47,6 @@
43
47
  "value": "{global.border.width.100}"
44
48
  }
45
49
  },
46
- "regular": {
47
- "type": "number",
48
- "value": "{global.border.width.100}"
49
- },
50
50
  "strong": {
51
51
  "type": "number",
52
52
  "value": "{global.border.width.200}"
@@ -597,6 +597,28 @@
597
597
  "2xl": {
598
598
  "type": "number",
599
599
  "value": "{global.breakpoint.600}"
600
+ },
601
+ "height": {
602
+ "sm": {
603
+ "type": "number",
604
+ "value": "{global.breakpoint.100}"
605
+ },
606
+ "md": {
607
+ "type": "number",
608
+ "value": "{global.breakpoint.250}"
609
+ },
610
+ "lg": {
611
+ "type": "number",
612
+ "value": "{global.breakpoint.300}"
613
+ },
614
+ "xl": {
615
+ "type": "number",
616
+ "value": "{global.breakpoint.350}"
617
+ },
618
+ "2xl": {
619
+ "type": "number",
620
+ "value": "{global.breakpoint.550}"
621
+ }
600
622
  }
601
623
  }
602
624
  }
@@ -0,0 +1,125 @@
1
+
2
+ {
3
+ "global": {
4
+ "motion": {
5
+ "duration": {
6
+ "xs": {
7
+ "type": "number",
8
+ "value": "{global.duration.50}"
9
+ },
10
+ "sm": {
11
+ "type": "number",
12
+ "value": "{global.duration.100}"
13
+ },
14
+ "md": {
15
+ "type": "number",
16
+ "value": "{global.duration.200}"
17
+ },
18
+ "lg": {
19
+ "type": "number",
20
+ "value": "{global.duration.300}"
21
+ },
22
+ "xl": {
23
+ "type": "number",
24
+ "value": "{global.duration.400}"
25
+ },
26
+ "2xl": {
27
+ "type": "number",
28
+ "value": "{global.duration.500}"
29
+ },
30
+ "3xl": {
31
+ "type": "number",
32
+ "value": "{global.duration.600}"
33
+ },
34
+ "fade": {
35
+ "short": {
36
+ "type": "number",
37
+ "value": "{global.motion.duration.sm}"
38
+ },
39
+ "default": {
40
+ "type": "number",
41
+ "value": "{global.motion.duration.md}"
42
+ },
43
+ "long": {
44
+ "type": "number",
45
+ "value": "{global.motion.duration.lg}"
46
+ }
47
+ },
48
+ "slide-out": {
49
+ "short": {
50
+ "type": "number",
51
+ "value": "{global.motion.duration.lg}"
52
+ },
53
+ "default": {
54
+ "type": "number",
55
+ "value": "{global.motion.duration.xl}"
56
+ },
57
+ "long": {
58
+ "type": "number",
59
+ "value": "{global.motion.duration.2xl}"
60
+ }
61
+ },
62
+ "slide-in": {
63
+ "short": {
64
+ "type": "number",
65
+ "value": "{global.motion.duration.lg}"
66
+ },
67
+ "default": {
68
+ "type": "number",
69
+ "value": "{global.motion.duration.xl}"
70
+ },
71
+ "long": {
72
+ "type": "number",
73
+ "value": "{global.motion.duration.2xl}"
74
+ }
75
+ },
76
+ "icon": {
77
+ "short": {
78
+ "type": "number",
79
+ "value": "{global.motion.duration.xs}"
80
+ },
81
+ "default": {
82
+ "type": "number",
83
+ "value": "{global.motion.duration.sm}"
84
+ },
85
+ "long": {
86
+ "type": "number",
87
+ "value": "{global.motion.duration.md}"
88
+ }
89
+ }
90
+ },
91
+ "delay": {
92
+ "none": {
93
+ "type": "number",
94
+ "value": "{global.delay.100}"
95
+ },
96
+ "short": {
97
+ "type": "number",
98
+ "value": "{global.delay.200}"
99
+ },
100
+ "default": {
101
+ "type": "number",
102
+ "value": "{global.delay.300}"
103
+ },
104
+ "long": {
105
+ "type": "number",
106
+ "value": "{global.delay.400}"
107
+ }
108
+ },
109
+ "timing-function": {
110
+ "accelerate": {
111
+ "type": "number",
112
+ "value": "{global.timing-function.100}"
113
+ },
114
+ "default": {
115
+ "type": "number",
116
+ "value": "{global.timing-function.200}"
117
+ },
118
+ "decelerate": {
119
+ "type": "number",
120
+ "value": "{global.timing-function.300}"
121
+ }
122
+ }
123
+ }
124
+ }
125
+ }