@patternfly/design-tokens 1.4.0 → 1.4.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 (10) 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 +16 -3
  4. package/build/css/tokens-default.scss +16 -3
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/package.json +1 -1
  7. package/tokens/dark/base.dark.json +38 -0
  8. package/tokens/dark/semantic.dark.json +47 -5
  9. package/tokens/default/base.json +38 -0
  10. package/tokens/default/semantic.json +47 -5
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 17:05:31 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
package/build/css/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 17:05:31 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
package/build/css/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 17:05:31 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 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);
@@ -64,6 +64,12 @@
64
64
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
65
65
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
66
66
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
67
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
68
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
69
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
70
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
71
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
72
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
67
73
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
68
74
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
69
75
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -81,6 +87,7 @@
81
87
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
82
88
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
83
89
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
90
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
84
91
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
85
92
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
86
93
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -121,9 +128,16 @@
121
128
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
122
129
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
123
130
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
131
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
124
132
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
125
133
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
126
134
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
135
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
136
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
137
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
138
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
139
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
140
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
127
141
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
128
142
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
129
143
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -261,7 +275,6 @@
261
275
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
262
276
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
263
277
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
264
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
265
278
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
266
279
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
267
280
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -351,8 +364,8 @@
351
364
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
352
365
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
353
366
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
354
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
355
367
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
368
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
356
369
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
357
370
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
358
371
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 17:05:31 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:08 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
@@ -97,6 +97,12 @@
97
97
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
98
98
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
99
99
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
100
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
101
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
102
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
103
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
104
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
105
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
100
106
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
101
107
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
102
108
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -237,6 +243,7 @@
237
243
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
238
244
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
239
245
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
246
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
240
247
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
241
248
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
242
249
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -346,12 +353,19 @@
346
353
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
347
354
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
348
355
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
356
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
349
357
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
350
358
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
351
359
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
352
360
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
353
361
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
354
362
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
363
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
364
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
365
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
366
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
367
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
368
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
355
369
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
356
370
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
357
371
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -436,15 +450,14 @@
436
450
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
437
451
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
438
452
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
439
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
440
453
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
454
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
441
455
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
442
456
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
443
457
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
444
458
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
445
459
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
446
460
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
447
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
448
461
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
449
462
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
450
463
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 17:05:31 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 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.4.0",
3
+ "version": "1.4.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",
package/tokens/dark/base.dark.json CHANGED
@@ -79,6 +79,44 @@
79
79
  "value": "{color.yellow.20}"
80
80
  }
81
81
  },
82
+ "severity": {
83
+ "undefined": {
84
+ "100": {
85
+ "type": "color",
86
+ "value": "{color.gray.40}"
87
+ }
88
+ },
89
+ "none": {
90
+ "100": {
91
+ "type": "color",
92
+ "value": "{color.blue.30}"
93
+ }
94
+ },
95
+ "minor": {
96
+ "100": {
97
+ "type": "color",
98
+ "value": "{color.gray.30}"
99
+ }
100
+ },
101
+ "moderate": {
102
+ "100": {
103
+ "type": "color",
104
+ "value": "{color.yellow.30}"
105
+ }
106
+ },
107
+ "important": {
108
+ "100": {
109
+ "type": "color",
110
+ "value": "{color.orange.40}"
111
+ }
112
+ },
113
+ "critical": {
114
+ "100": {
115
+ "type": "color",
116
+ "value": "{color.red-orange.50}"
117
+ }
118
+ }
119
+ },
82
120
  "status": {
83
121
  "success": {
84
122
  "100": {
package/tokens/dark/semantic.dark.json CHANGED
@@ -157,13 +157,13 @@
157
157
  "type": "color",
158
158
  "value": "{global.color.status.danger.default}"
159
159
  },
160
- "hover": {
161
- "type": "color",
162
- "value": "{global.color.status.danger.hover}"
163
- },
164
160
  "clicked": {
165
161
  "type": "color",
166
162
  "value": "{global.color.status.danger.clicked}"
163
+ },
164
+ "hover": {
165
+ "type": "color",
166
+ "value": "{global.color.status.danger.hover}"
167
167
  }
168
168
  }
169
169
  },
@@ -613,6 +613,44 @@
613
613
  "type": "color",
614
614
  "value": "{global.dark.color.disabled.300}"
615
615
  },
616
+ "severity": {
617
+ "undefined": {
618
+ "default": {
619
+ "type": "color",
620
+ "value": "{global.dark.color.severity.undefined.100}"
621
+ }
622
+ },
623
+ "none": {
624
+ "default": {
625
+ "type": "color",
626
+ "value": "{global.dark.color.severity.none.100}"
627
+ }
628
+ },
629
+ "minor": {
630
+ "default": {
631
+ "type": "color",
632
+ "value": "{global.dark.color.severity.minor.100}"
633
+ }
634
+ },
635
+ "moderate": {
636
+ "default": {
637
+ "type": "color",
638
+ "value": "{global.dark.color.severity.moderate.100}"
639
+ }
640
+ },
641
+ "important": {
642
+ "default": {
643
+ "type": "color",
644
+ "value": "{global.dark.color.severity.important.100}"
645
+ }
646
+ },
647
+ "critical": {
648
+ "default": {
649
+ "type": "color",
650
+ "value": "{global.dark.color.severity.critical.100}"
651
+ }
652
+ }
653
+ },
616
654
  "nonstatus": {
617
655
  "on-red": {
618
656
  "default": {
@@ -845,7 +883,7 @@
845
883
  },
846
884
  "disabled": {
847
885
  "type": "color",
848
- "value": "{global.background.color.disabled.default}"
886
+ "value": "{global.dark.color.disabled.200}"
849
887
  },
850
888
  "alt": {
851
889
  "type": "color",
@@ -1057,6 +1095,10 @@
1057
1095
  "type": "color",
1058
1096
  "value": "{global.dark.text.color.400}"
1059
1097
  },
1098
+ "on-highlight": {
1099
+ "type": "color",
1100
+ "value": "{global.dark.text.color.300}"
1101
+ },
1060
1102
  "status": {
1061
1103
  "success": {
1062
1104
  "default": {
package/tokens/default/base.json CHANGED
@@ -138,6 +138,44 @@
138
138
  }
139
139
  }
140
140
  },
141
+ "severity": {
142
+ "undefined": {
143
+ "100": {
144
+ "type": "color",
145
+ "value": "{color.gray.30}"
146
+ }
147
+ },
148
+ "none": {
149
+ "100": {
150
+ "type": "color",
151
+ "value": "{color.blue.40}"
152
+ }
153
+ },
154
+ "minor": {
155
+ "100": {
156
+ "type": "color",
157
+ "value": "{color.gray.50}"
158
+ }
159
+ },
160
+ "moderate": {
161
+ "100": {
162
+ "type": "color",
163
+ "value": "{color.yellow.40}"
164
+ }
165
+ },
166
+ "important": {
167
+ "100": {
168
+ "type": "color",
169
+ "value": "{color.orange.50}"
170
+ }
171
+ },
172
+ "critical": {
173
+ "100": {
174
+ "type": "color",
175
+ "value": "{color.red-orange.60}"
176
+ }
177
+ }
178
+ },
141
179
  "nonstatus": {
142
180
  "red": {
143
181
  "100": {
package/tokens/default/semantic.json CHANGED
@@ -157,13 +157,13 @@
157
157
  "type": "color",
158
158
  "value": "{global.color.status.danger.default}"
159
159
  },
160
- "hover": {
161
- "type": "color",
162
- "value": "{global.color.status.danger.hover}"
163
- },
164
160
  "clicked": {
165
161
  "type": "color",
166
162
  "value": "{global.color.status.danger.clicked}"
163
+ },
164
+ "hover": {
165
+ "type": "color",
166
+ "value": "{global.color.status.danger.hover}"
167
167
  }
168
168
  }
169
169
  },
@@ -613,6 +613,44 @@
613
613
  "type": "color",
614
614
  "value": "{global.color.disabled.300}"
615
615
  },
616
+ "severity": {
617
+ "undefined": {
618
+ "default": {
619
+ "type": "color",
620
+ "value": "{global.color.severity.undefined.100}"
621
+ }
622
+ },
623
+ "none": {
624
+ "default": {
625
+ "type": "color",
626
+ "value": "{global.color.severity.none.100}"
627
+ }
628
+ },
629
+ "minor": {
630
+ "default": {
631
+ "type": "color",
632
+ "value": "{global.color.severity.minor.100}"
633
+ }
634
+ },
635
+ "moderate": {
636
+ "default": {
637
+ "type": "color",
638
+ "value": "{global.color.severity.moderate.100}"
639
+ }
640
+ },
641
+ "important": {
642
+ "default": {
643
+ "type": "color",
644
+ "value": "{global.color.severity.important.100}"
645
+ }
646
+ },
647
+ "critical": {
648
+ "default": {
649
+ "type": "color",
650
+ "value": "{global.color.severity.critical.100}"
651
+ }
652
+ }
653
+ },
616
654
  "nonstatus": {
617
655
  "on-red": {
618
656
  "default": {
@@ -845,7 +883,7 @@
845
883
  },
846
884
  "disabled": {
847
885
  "type": "color",
848
- "value": "{global.background.color.disabled.default}"
886
+ "value": "{global.color.disabled.200}"
849
887
  },
850
888
  "alt": {
851
889
  "type": "color",
@@ -1057,6 +1095,10 @@
1057
1095
  "type": "color",
1058
1096
  "value": "{global.text.color.400}"
1059
1097
  },
1098
+ "on-highlight": {
1099
+ "type": "color",
1100
+ "value": "{global.text.color.100}"
1101
+ },
1060
1102
  "status": {
1061
1103
  "success": {
1062
1104
  "default": {