@patternfly/design-tokens 1.13.0 → 1.13.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.
Files changed (14) hide show
  1. package/build/css/tokens-charts-dark.scss +1 -1
  2. package/build/css/tokens-charts.scss +1 -1
  3. package/build/css/tokens-dark.scss +17 -14
  4. package/build/css/tokens-default.scss +12 -6
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/package.json +1 -1
  7. package/patternfly-docs/content/token-layers-dark.json +4033 -2456
  8. package/patternfly-docs/content/token-layers-default.json +3361 -1828
  9. package/tokens/dark/base.dark.json +46 -42
  10. package/tokens/dark/semantic.dark.json +19 -9
  11. package/tokens/default/base.dimension.json +3 -3
  12. package/tokens/default/base.json +4 -0
  13. package/tokens/default/semantic.dimension.json +28 -11
  14. package/tokens/default/semantic.json +10 -0
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 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);
@@ -21,6 +21,7 @@
21
21
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
22
22
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
23
23
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
24
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
24
25
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
25
26
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
26
27
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -32,9 +33,9 @@
32
33
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
33
34
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
34
35
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
35
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
36
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
37
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
36
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
37
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
38
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
38
39
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
39
40
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
40
41
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -77,7 +78,7 @@
77
78
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
78
79
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
79
80
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
80
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
81
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
81
82
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
82
83
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
83
84
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -87,6 +88,7 @@
87
88
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
88
89
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
89
90
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
91
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
90
92
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
91
93
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
92
94
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -101,15 +103,16 @@
101
103
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
102
104
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
103
105
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
106
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
104
107
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
105
108
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
106
109
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
107
110
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
108
111
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
109
112
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
110
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
111
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
112
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
113
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
114
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
115
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
113
116
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
114
117
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
115
118
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -243,9 +246,9 @@
243
246
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
244
247
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
245
248
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
246
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
247
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
248
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
249
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
250
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
251
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
249
252
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
250
253
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
251
254
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -309,9 +312,9 @@
309
312
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
310
313
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
311
314
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
312
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
313
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
314
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
315
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
316
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
317
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
315
318
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
316
319
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
317
320
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -65,17 +65,17 @@
65
65
  --pf-t--global--font--size--300: 1rem;
66
66
  --pf-t--global--font--size--400: 1.125rem;
67
67
  --pf-t--global--font--size--500: 1.25rem;
68
- --pf-t--global--font--size--600: 1.375rem;
68
+ --pf-t--global--font--size--600: 1.5rem;
69
69
  --pf-t--global--font--size--700: 1.75rem;
70
70
  --pf-t--global--font--size--800: 2.25rem;
71
71
  --pf-t--global--font--weight--100: 400;
72
72
  --pf-t--global--font--weight--200: 500;
73
- --pf-t--global--font--weight--300: 700;
73
+ --pf-t--global--font--weight--300: 500;
74
74
  --pf-t--global--font--weight--400: 700;
75
75
  --pf-t--global--icon--size--100: 0.75rem;
76
76
  --pf-t--global--icon--size--200: 0.875rem;
77
77
  --pf-t--global--icon--size--250: 1rem;
78
- --pf-t--global--icon--size--300: 1.375rem;
78
+ --pf-t--global--icon--size--300: 1.5rem;
79
79
  --pf-t--global--icon--size--400: 3.5rem;
80
80
  --pf-t--global--icon--size--500: 6rem;
81
81
  --pf-t--global--spacer--100: 0.25rem;
@@ -111,6 +111,7 @@
111
111
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
112
112
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
113
113
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
114
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
114
115
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
115
116
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
116
117
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -312,6 +313,7 @@
312
313
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
313
314
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
314
315
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
316
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
315
317
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
316
318
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
317
319
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -326,6 +328,7 @@
326
328
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
327
329
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
328
330
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
331
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
329
332
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
330
333
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
331
334
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -469,8 +472,11 @@
469
472
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
470
473
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
471
474
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
472
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
473
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
475
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
476
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
477
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
478
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
479
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
474
480
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
475
481
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
476
482
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.13.0",
3
+ "version": "1.13.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",