@patternfly/design-tokens 1.13.1 → 1.13.2

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 +12 -4
  4. package/build/css/tokens-default.scss +44 -27
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/package.json +1 -1
  7. package/patternfly-docs/content/token-layers-dark.json +1580 -724
  8. package/patternfly-docs/content/token-layers-default.json +1125 -358
  9. package/tokens/dark/base.dark.json +46 -38
  10. package/tokens/dark/semantic.dark.json +47 -9
  11. package/tokens/default/base.dimension.json +44 -16
  12. package/tokens/default/base.json +6 -2
  13. package/tokens/default/semantic.dimension.json +47 -26
  14. package/tokens/default/semantic.json +47 -9
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 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 Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 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,22 +1,28 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 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);
7
7
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
8
8
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
9
9
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
10
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
10
11
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
11
12
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
12
13
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
13
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
14
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
15
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
14
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
15
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
16
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
17
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
18
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
19
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
20
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
16
21
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
17
22
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
18
23
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
19
24
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
25
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
20
26
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
21
27
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
22
28
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -95,7 +101,9 @@
95
101
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
96
102
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
97
103
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
104
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
98
105
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
106
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
99
107
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
100
108
  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
101
109
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -15,26 +15,33 @@
15
15
  --pf-t--global--border--width--100: 1px;
16
16
  --pf-t--global--border--width--200: 2px;
17
17
  --pf-t--global--border--width--300: 3px;
18
- --pf-t--global--box-shadow--X--100: -8px;
18
+ --pf-t--global--box-shadow--X--100: -10px;
19
19
  --pf-t--global--box-shadow--X--200: -4px;
20
20
  --pf-t--global--box-shadow--X--300: -1px;
21
21
  --pf-t--global--box-shadow--X--400: 0px;
22
+ --pf-t--global--box-shadow--X--50: -20px;
22
23
  --pf-t--global--box-shadow--X--500: 1px;
23
24
  --pf-t--global--box-shadow--X--600: 4px;
24
- --pf-t--global--box-shadow--X--700: 8px;
25
- --pf-t--global--box-shadow--Y--100: -8px;
25
+ --pf-t--global--box-shadow--X--700: 10px;
26
+ --pf-t--global--box-shadow--X--800: 20px;
27
+ --pf-t--global--box-shadow--Y--100: -10px;
26
28
  --pf-t--global--box-shadow--Y--200: -4px;
27
29
  --pf-t--global--box-shadow--Y--300: -1px;
28
30
  --pf-t--global--box-shadow--Y--400: 0px;
31
+ --pf-t--global--box-shadow--Y--50: -20px;
29
32
  --pf-t--global--box-shadow--Y--500: 1px;
30
33
  --pf-t--global--box-shadow--Y--600: 4px;
31
- --pf-t--global--box-shadow--Y--700: 8px;
34
+ --pf-t--global--box-shadow--Y--700: 10px;
35
+ --pf-t--global--box-shadow--Y--800: 20px;
32
36
  --pf-t--global--box-shadow--blur--100: 4px;
33
- --pf-t--global--box-shadow--blur--200: 8px;
34
- --pf-t--global--box-shadow--blur--300: 24px;
35
- --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
36
- --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
37
+ --pf-t--global--box-shadow--blur--200: 9px;
38
+ --pf-t--global--box-shadow--blur--300: 20px;
39
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
40
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
37
41
  --pf-t--global--box-shadow--spread--100: 0px;
42
+ --pf-t--global--box-shadow--spread--200: -4px;
43
+ --pf-t--global--box-shadow--spread--300: -8px;
44
+ --pf-t--global--box-shadow--spread--400: -20px;
38
45
  --pf-t--global--breakpoint--100: 0rem;
39
46
  --pf-t--global--breakpoint--200: 36rem;
40
47
  --pf-t--global--breakpoint--250: 40rem;
@@ -103,11 +110,13 @@
103
110
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
104
111
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
105
112
  --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
113
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
106
114
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
107
115
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
108
116
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
109
117
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
110
118
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
119
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
111
120
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
112
121
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
113
122
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
@@ -137,43 +146,49 @@
137
146
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
138
147
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
139
148
  --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
140
- --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100);
141
- --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700);
149
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
150
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
142
151
  --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
143
152
  --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
144
153
  --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
145
- --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200);
146
- --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600);
154
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
155
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
147
156
  --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
148
157
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
149
158
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
150
- --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300);
151
- --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500);
159
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
160
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
152
161
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
153
- --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700);
162
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
154
163
  --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
155
164
  --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
156
165
  --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
157
- --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100);
158
- --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600);
166
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
167
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
159
168
  --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
160
169
  --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
161
170
  --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
162
- --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200);
163
- --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500);
171
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
172
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
164
173
  --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
165
174
  --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
166
175
  --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
167
- --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300);
176
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
168
177
  --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
169
178
  --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
170
179
  --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
171
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200);
172
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200);
173
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100);
174
- --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100);
175
- --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100);
176
- --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100);
180
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
181
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
182
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
183
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
184
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
185
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
186
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
187
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
188
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
189
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
190
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
191
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
177
192
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
178
193
  --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
179
194
  --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
@@ -320,7 +335,9 @@
320
335
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
321
336
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
322
337
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
338
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
323
339
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
340
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
324
341
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
325
342
  --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
326
343
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 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.1",
3
+ "version": "1.13.2",
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",