@patternfly/design-tokens 1.0.2 → 1.0.4

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 (13) hide show
  1. package/build/css/_tokens-charts.scss +29 -29
  2. package/build/css/_tokens-dark.scss +20 -14
  3. package/build/css/_tokens-default.scss +327 -202
  4. package/build/css/_tokens-palette.scss +4 -4
  5. package/build.js +1 -0
  6. package/package.json +1 -1
  7. package/tokens/dark/base.dark.json +17 -5
  8. package/tokens/dark/semantic.dark.json +42 -22
  9. package/tokens/default/base.dimension.json +82 -0
  10. package/tokens/default/base.json +29 -9
  11. package/tokens/default/chart.json +1 -1
  12. package/tokens/default/semantic.dimension.json +202 -8
  13. package/tokens/default/semantic.json +833 -564
package/build/css/_tokens-charts.scss CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 14 Feb 2024 00:59:20 GMT
4
- */
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Wed, 27 Mar 2024 20:59:01 GMT
4
+ // */
5
5
 
6
6
  :root {
7
7
  --pf-t--chart--stroke--width--sm: 2;
@@ -95,31 +95,31 @@
95
95
  --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300);
96
96
  --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
97
97
  --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300);
98
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
99
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
100
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
101
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
102
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
103
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400);
104
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
105
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
106
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
107
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
108
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
109
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
110
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
111
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
112
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
113
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500);
114
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
115
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
116
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
117
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
118
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
119
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
120
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
121
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
122
- --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
98
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
99
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
100
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
101
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
102
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
103
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400);
104
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
105
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
106
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
107
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
108
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
109
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
110
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
111
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
112
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
113
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500);
114
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
115
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
116
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
117
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
118
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
119
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
120
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
121
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
122
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
123
123
  --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
124
124
  --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
125
125
  --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
package/build/css/_tokens-dark.scss CHANGED
@@ -1,12 +1,19 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 14 Feb 2024 00:59:20 GMT
4
- */
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Wed, 27 Mar 2024 20:59:01 GMT
4
+ // */
5
5
 
6
6
  :root {
7
7
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
8
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
9
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
8
10
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
11
+ --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
12
+ --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
13
+ --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
9
14
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
15
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
16
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
10
17
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
11
18
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
12
19
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
@@ -15,7 +22,7 @@
15
22
  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
16
23
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
17
24
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
18
- --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--40);
25
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
19
26
  --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
20
27
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
21
28
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -46,8 +53,8 @@
46
53
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
47
54
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
48
55
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
49
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
50
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
56
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
57
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
51
58
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
52
59
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
53
60
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -60,7 +67,7 @@
60
67
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
61
68
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
62
69
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
63
- --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
70
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
64
71
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
65
72
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
66
73
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -71,7 +78,7 @@
71
78
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
72
79
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
73
80
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
74
- --pf-t--global--dark--background--color--100: var(--pf-t--color--black);
81
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
75
82
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
76
83
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
77
84
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
@@ -114,6 +121,7 @@
114
121
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
115
122
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
116
123
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
124
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
117
125
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
118
126
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
119
127
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
@@ -180,8 +188,8 @@
180
188
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
181
189
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
182
190
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
183
- --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--200);
184
- --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--200);
191
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
192
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
185
193
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
186
194
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
187
195
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
@@ -344,12 +352,10 @@
344
352
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
345
353
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
346
354
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
347
- --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
348
355
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
356
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
349
357
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
350
358
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
351
359
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
352
360
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
353
- --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
354
- --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--action--plain--hover);
355
361
  }