@patternfly/design-tokens 1.3.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 (21) hide show
  1. package/build/css/{_tokens-charts-dark.scss → tokens-charts-dark.scss} +2 -2
  2. package/build/css/{_tokens-charts.scss → tokens-charts.scss} +2 -2
  3. package/build/css/{_tokens-dark.scss → tokens-dark.scss} +17 -4
  4. package/build/css/{_tokens-default.scss → tokens-default.scss} +17 -4
  5. package/build/css/{_tokens-palette.scss → tokens-palette.scss} +2 -2
  6. package/build-js-for-docs.js +10 -7
  7. package/build.js +4 -4
  8. package/{config.chart.dark.json → config.charts.dark.json} +1 -1
  9. package/{config.chart.json → config.charts.json} +1 -1
  10. package/config.dark.json +1 -1
  11. package/config.default.json +1 -1
  12. package/config.palette-colors.json +1 -1
  13. package/package.json +1 -1
  14. package/patternfly-docs/scssAsJson.json +1 -1
  15. package/tokens/dark/base.dark.json +38 -0
  16. package/tokens/dark/semantic.dark.json +47 -5
  17. package/tokens/default/base.json +38 -0
  18. package/tokens/default/semantic.json +47 -5
  19. package/tokens/AsExported.text +0 -3388
  20. /package/tokens/dark/{chart.dark.json → charts.dark.json} +0 -0
  21. /package/tokens/default/{chart.json → charts.json} +0 -0
package/build/css/{_tokens-charts-dark.scss → tokens-charts-dark.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:06 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
7
7
  --pf-t--chart--global--layout--height: 300;
8
8
  --pf-t--chart--global--layout--padding: 50;
package/build/css/{_tokens-charts.scss → tokens-charts.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
7
7
  --pf-t--chart--global--layout--height: 300;
8
8
  --pf-t--chart--global--layout--padding: 50;
package/build/css/{_tokens-dark.scss → tokens-dark.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
7
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
8
8
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -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 → tokens-default.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:08 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -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 → tokens-palette.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
7
7
  --pf-t--color--red--60: #a60000;
8
8
  --pf-t--color--red--50: #ee0000;
package/build-js-for-docs.js CHANGED
@@ -2,12 +2,14 @@ const fs = require('fs');
2
2
  const fse = require('fs-extra');
3
3
  const path = require('path');
4
4
 
5
- const charts_scss = path.join(__dirname, 'build/css/_tokens-charts.scss');
6
- const dark_scss = path.join(__dirname, 'build/css/_tokens-dark.scss');
7
- const default_scss = path.join(__dirname, 'build/css/_tokens-default.scss');
8
- const palette_scss = path.join(__dirname, 'build/css/_tokens-palette.scss');
9
-
10
- const chartFileContents = fs.readFileSync(charts_scss, 'utf-8');
5
+ const charts_scss = path.join(__dirname, 'build/css/tokens-charts.scss');
6
+ const charts_dark_scss = path.join(__dirname, 'build/css/tokens-charts-dark.scss');
7
+ const dark_scss = path.join(__dirname, 'build/css/tokens-dark.scss');
8
+ const default_scss = path.join(__dirname, 'build/css/tokens-default.scss');
9
+ const palette_scss = path.join(__dirname, 'build/css/tokens-palette.scss');
10
+
11
+ const chartsFileContents = fs.readFileSync(charts_scss, 'utf-8');
12
+ const chartsDarkFileContents = fs.readFileSync(charts_dark_scss, 'utf-8');
11
13
  const darkFileContents = fs.readFileSync(dark_scss, 'utf-8');
12
14
  const defaultFileContents = fs.readFileSync(default_scss, 'utf-8');
13
15
  const paletteFileContents = fs.readFileSync(palette_scss, 'utf-8');
@@ -32,7 +34,8 @@ const addToMap = (line) => {
32
34
  paletteFileContents.split(/\r?\n/).forEach(line => addToMap(line));
33
35
  defaultFileContents.split(/\r?\n/).forEach(line => addToMap(line));
34
36
  darkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
35
- chartFileContents.split(/\r?\n/).forEach(line => addToMap(line));
37
+ chartsFileContents.split(/\r?\n/).forEach(line => addToMap(line));
38
+ chartsDarkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
36
39
 
37
40
  fse.writeJson(path.join(__dirname, 'patternfly-docs/scssAsJson.json'), scssAsJson);
38
41
 
package/build.js CHANGED
@@ -61,15 +61,15 @@ const build = (selector) => {
61
61
  const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
62
62
  const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
63
63
  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
64
- const chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');
65
- const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.dark.json');
64
+ const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
65
+ const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
66
66
 
67
67
  // Build all
68
68
  defaultExtendedSD.buildAllPlatforms();
69
69
  darkExtendedSD.buildAllPlatforms();
70
70
  paletteExtendedSD.buildAllPlatforms();
71
- chartExtendedSD.buildAllPlatforms();
72
- chartDarkExtendedSD.buildAllPlatforms();
71
+ chartsExtendedSD.buildAllPlatforms();
72
+ chartsDarkExtendedSD.buildAllPlatforms();
73
73
 
74
74
  console.log('\n============================');
75
75
  console.log('\nBuild completed.');
package/{config.chart.dark.json → config.charts.dark.json} RENAMED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-charts-dark.scss",
9
+ "destination": "tokens-charts-dark.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/{config.chart.json → config.charts.json} RENAMED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-charts.scss",
9
+ "destination": "tokens-charts.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.dark.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-dark.scss",
9
+ "destination": "tokens-dark.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.default.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-default.scss",
9
+ "destination": "tokens-default.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.palette-colors.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-palette.scss",
9
+ "destination": "tokens-palette.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.3.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",