@patternfly/design-tokens 1.14.9 → 1.15.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.
- package/build/css/tokens-dark.scss +16 -16
- package/build/css/tokens-default.scss +17 -15
- package/build/css/tokens-glass-dark.scss +21 -4
- package/build/css/tokens-glass.scss +17 -4
- package/build/css/tokens-palette.scss +1 -1
- package/build/css/tokens-redhat-dark.scss +9 -2
- package/build/css/tokens-redhat-glass-dark.scss +27 -4
- package/build/css/tokens-redhat-glass.scss +17 -4
- package/build/css/tokens-redhat-highcontrast-dark.scss +5 -4
- package/build/css/tokens-redhat-highcontrast.scss +2 -2
- package/build/css/tokens-redhat.scss +1 -1
- package/build.js +44 -1
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-glass-dark.json +497 -965
- package/patternfly-docs/content/token-layers-glass.json +12337 -991
- package/patternfly-docs/content/token-layers-highcontrast-dark.json +849 -553
- package/patternfly-docs/content/token-layers-highcontrast.json +1237 -927
- package/patternfly-docs/content/token-layers-redhat-dark.json +2731 -2662
- package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1700 -2230
- package/patternfly-docs/content/token-layers-redhat-glass.json +12497 -1151
- package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +500 -373
- package/patternfly-docs/content/token-layers-redhat-highcontrast.json +1304 -998
- package/patternfly-docs/content/token-layers-redhat.json +1650 -1340
- package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
- package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
- package/tokens/default/dark/base.dark.json +5 -5
- package/tokens/default/dark/charts.dark.json +20 -20
- package/tokens/default/dark/semantic.dark.json +45 -36
- package/tokens/default/glass/base.dimension.json +16 -16
- package/tokens/default/glass/base.json +2 -2
- package/tokens/default/glass/semantic.dimension.glass.json +1109 -0
- package/tokens/default/glass/semantic.glass.json +49 -40
- package/tokens/default/glass-dark/base.dark.json +5 -5
- package/tokens/default/glass-dark/semantic.glass.dark.json +56 -47
- package/tokens/default/highcontrast/base.dimension.json +16 -16
- package/tokens/default/highcontrast/base.json +2 -2
- package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +51 -39
- package/tokens/default/highcontrast/semantic.highcontrast.json +41 -32
- package/tokens/default/highcontrast-dark/base.dark.json +5 -5
- package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +44 -35
- package/tokens/default/light/base.dimension.json +16 -16
- package/tokens/default/light/base.json +2 -2
- package/tokens/default/light/charts.json +20 -20
- package/tokens/default/light/semantic.dimension.json +51 -39
- package/tokens/default/light/semantic.json +41 -32
- package/tokens/default/light/semantic.motion.json +24 -24
- package/tokens/redhat/dark/redhat.color.dark.json +71 -24
- package/tokens/redhat/glass/redhat.color.glass.json +25 -25
- package/tokens/redhat/glass/redhat.dimension.glass.json +2 -0
- package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
- package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
- package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
- package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
- package/tokens/redhat/light/redhat.color.json +25 -25
- package/tokens/redhat/light/redhat.dimension.json +6 -6
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:46 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
|
-
--pf-t--global--background--
|
|
8
|
-
--pf-t--global--background--filter--glass--blur--primary:
|
|
9
|
-
--pf-t--global--background--opacity--glass--floating: 100%;
|
|
10
|
-
--pf-t--global--background--opacity--glass--primary: 100%;
|
|
7
|
+
--pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
|
|
8
|
+
--pf-t--global--background--filter--glass--blur--primary: initial;
|
|
11
9
|
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
|
|
12
10
|
--pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
|
|
13
11
|
--pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
|
|
14
12
|
--pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
|
|
15
13
|
--pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
|
|
16
|
-
--pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.
|
|
14
|
+
--pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
|
|
17
15
|
--pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
|
|
18
16
|
--pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
|
|
19
17
|
--pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
|
|
@@ -23,7 +21,7 @@
|
|
|
23
21
|
--pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
24
22
|
--pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
|
|
25
23
|
--pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
26
|
-
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--
|
|
24
|
+
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--100);
|
|
27
25
|
--pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
28
26
|
--pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
|
|
29
27
|
--pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
|
|
@@ -33,7 +31,7 @@
|
|
|
33
31
|
--pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
|
|
34
32
|
--pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
|
|
35
33
|
--pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
|
|
36
|
-
--pf-t--global--dark--border--color--100: var(--pf-t--color--gray--
|
|
34
|
+
--pf-t--global--dark--border--color--100: var(--pf-t--color--gray--60);
|
|
37
35
|
--pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
|
|
38
36
|
--pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
|
|
39
37
|
--pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
|
|
@@ -41,9 +39,9 @@
|
|
|
41
39
|
--pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
|
|
42
40
|
--pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
|
|
43
41
|
--pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
|
|
44
|
-
--pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--
|
|
45
|
-
--pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--
|
|
46
|
-
--pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--
|
|
42
|
+
--pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--60);
|
|
43
|
+
--pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--40);
|
|
44
|
+
--pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--gray--20);
|
|
47
45
|
--pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--white);
|
|
48
46
|
--pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
|
|
49
47
|
--pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
|
|
@@ -119,7 +117,7 @@
|
|
|
119
117
|
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
|
|
120
118
|
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
|
|
121
119
|
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
|
|
122
|
-
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--
|
|
120
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--200);
|
|
123
121
|
--pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
|
|
124
122
|
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
|
|
125
123
|
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
|
|
@@ -135,6 +133,7 @@
|
|
|
135
133
|
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
|
|
136
134
|
--pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
|
|
137
135
|
--pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
|
|
136
|
+
--pf-t--global--background--color--sticky--default: var(--pf-t--global--dark--background--color--200);
|
|
138
137
|
--pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
|
|
139
138
|
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
|
|
140
139
|
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
|
|
@@ -172,7 +171,7 @@
|
|
|
172
171
|
--pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
|
|
173
172
|
--pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
|
|
174
173
|
--pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
|
|
175
|
-
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--
|
|
174
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--100);
|
|
176
175
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
|
|
177
176
|
--pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
|
|
178
177
|
--pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
|
|
@@ -255,12 +254,13 @@
|
|
|
255
254
|
--pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
|
|
256
255
|
--pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
|
|
257
256
|
--pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
|
|
258
|
-
--pf-t--global--background--color--
|
|
259
|
-
--pf-t--global--background--color--glass--primary:
|
|
257
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
|
|
258
|
+
--pf-t--global--background--color--glass--primary--default: initial;
|
|
260
259
|
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
261
260
|
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
|
262
261
|
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
|
|
263
262
|
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
|
|
263
|
+
--pf-t--global--border--color--glass--default: initial;
|
|
264
264
|
--pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
|
|
265
265
|
--pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
266
266
|
--pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
|
|
320
320
|
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
|
|
321
321
|
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
|
|
322
|
-
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--
|
|
322
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
|
|
323
323
|
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
|
|
324
324
|
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
|
|
325
325
|
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:46 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
|
|
7
7
|
--pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
|
|
8
8
|
--pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
|
|
9
9
|
--pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
|
|
10
|
-
--pf-t--global--background--filter--glass--blur--
|
|
11
|
-
--pf-t--global--background--filter--glass--blur--primary: blur(0px);
|
|
12
|
-
--pf-t--global--background--opacity--glass--floating: 100%;
|
|
13
|
-
--pf-t--global--background--opacity--glass--primary: 100%;
|
|
10
|
+
--pf-t--global--background--filter--glass--blur--primary: initial;
|
|
14
11
|
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
|
|
15
12
|
--pf-t--global--border--radius--0: 0px;
|
|
16
13
|
--pf-t--global--border--radius--100: 4px;
|
|
@@ -30,24 +27,24 @@
|
|
|
30
27
|
--pf-t--global--border--width--high-contrast--strong: 0px;
|
|
31
28
|
--pf-t--global--box-shadow--X--100: -10px;
|
|
32
29
|
--pf-t--global--box-shadow--X--200: -4px;
|
|
33
|
-
--pf-t--global--box-shadow--X--300: -
|
|
30
|
+
--pf-t--global--box-shadow--X--300: -2px;
|
|
34
31
|
--pf-t--global--box-shadow--X--400: 0px;
|
|
35
32
|
--pf-t--global--box-shadow--X--50: -20px;
|
|
36
|
-
--pf-t--global--box-shadow--X--500:
|
|
33
|
+
--pf-t--global--box-shadow--X--500: 2px;
|
|
37
34
|
--pf-t--global--box-shadow--X--600: 4px;
|
|
38
35
|
--pf-t--global--box-shadow--X--700: 10px;
|
|
39
36
|
--pf-t--global--box-shadow--X--800: 20px;
|
|
40
37
|
--pf-t--global--box-shadow--Y--100: -10px;
|
|
41
|
-
--pf-t--global--box-shadow--Y--200: -
|
|
38
|
+
--pf-t--global--box-shadow--Y--200: -4px;
|
|
42
39
|
--pf-t--global--box-shadow--Y--300: -1px;
|
|
43
40
|
--pf-t--global--box-shadow--Y--400: 0px;
|
|
44
41
|
--pf-t--global--box-shadow--Y--50: -20px;
|
|
45
42
|
--pf-t--global--box-shadow--Y--500: 1px;
|
|
46
|
-
--pf-t--global--box-shadow--Y--600:
|
|
43
|
+
--pf-t--global--box-shadow--Y--600: 4px;
|
|
47
44
|
--pf-t--global--box-shadow--Y--700: 10px;
|
|
48
45
|
--pf-t--global--box-shadow--Y--800: 20px;
|
|
49
|
-
--pf-t--global--box-shadow--blur--100:
|
|
50
|
-
--pf-t--global--box-shadow--blur--200:
|
|
46
|
+
--pf-t--global--box-shadow--blur--100: 6px;
|
|
47
|
+
--pf-t--global--box-shadow--blur--200: 10px;
|
|
51
48
|
--pf-t--global--box-shadow--blur--300: 20px;
|
|
52
49
|
--pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
|
|
53
50
|
--pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
|
|
@@ -138,12 +135,13 @@
|
|
|
138
135
|
--pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
|
|
139
136
|
--pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
|
|
140
137
|
--pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700);
|
|
138
|
+
--pf-t--global--background--color--striped--row--default: var(--pf-t--global--background--color--700);
|
|
141
139
|
--pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
|
|
142
140
|
--pf-t--global--border--color--100: var(--pf-t--color--gray--30);
|
|
143
141
|
--pf-t--global--border--color--200: var(--pf-t--color--gray--40);
|
|
144
142
|
--pf-t--global--border--color--300: var(--pf-t--color--gray--45);
|
|
145
143
|
--pf-t--global--border--color--400: var(--pf-t--color--gray--60);
|
|
146
|
-
--pf-t--global--border--color--50: var(--pf-t--color--gray--
|
|
144
|
+
--pf-t--global--border--color--50: var(--pf-t--color--gray--20);
|
|
147
145
|
--pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
|
|
148
146
|
--pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
|
|
149
147
|
--pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
|
|
@@ -231,7 +229,7 @@
|
|
|
231
229
|
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
|
|
232
230
|
--pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
|
|
233
231
|
--pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
|
|
234
|
-
--pf-t--global--color--brand--accent--300: var(--pf-t--color--
|
|
232
|
+
--pf-t--global--color--brand--accent--300: var(--pf-t--color--gray--60);
|
|
235
233
|
--pf-t--global--color--brand--accent--400: var(--pf-t--color--black);
|
|
236
234
|
--pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
|
|
237
235
|
--pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
|
|
@@ -416,6 +414,7 @@
|
|
|
416
414
|
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
|
|
417
415
|
--pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
|
|
418
416
|
--pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
|
|
417
|
+
--pf-t--global--background--color--sticky--default: var(--pf-t--global--background--color--100);
|
|
419
418
|
--pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
|
|
420
419
|
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
|
|
421
420
|
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--300);
|
|
@@ -461,6 +460,8 @@
|
|
|
461
460
|
--pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
|
|
462
461
|
--pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
|
|
463
462
|
--pf-t--global--border--radius--control--form-element: var(--pf-t--global--border--radius--small);
|
|
463
|
+
--pf-t--global--border--radius--glass--default: initial;
|
|
464
|
+
--pf-t--global--border--width--glass--default: initial;
|
|
464
465
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
|
|
465
466
|
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
|
|
466
467
|
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
|
|
@@ -599,12 +600,13 @@
|
|
|
599
600
|
--pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
|
|
600
601
|
--pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
|
|
601
602
|
--pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
|
|
602
|
-
--pf-t--global--background--color--
|
|
603
|
-
--pf-t--global--background--color--glass--primary:
|
|
603
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
|
|
604
|
+
--pf-t--global--background--color--glass--primary--default: initial;
|
|
604
605
|
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
605
606
|
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
|
606
607
|
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
|
|
607
608
|
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
|
|
609
|
+
--pf-t--global--border--color--glass--default: initial;
|
|
608
610
|
--pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
|
|
609
611
|
--pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
610
612
|
--pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (19 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
|
-
--pf-t--global--background--
|
|
8
|
-
--pf-t--global--background--
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
|
|
16
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
18
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
19
|
+
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
|
|
20
|
+
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
|
|
21
|
+
--pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
|
|
22
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
|
|
23
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
24
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
|
|
25
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
9
26
|
}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (15 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
|
-
--pf-t--global--background--
|
|
8
|
-
--pf-t--global--background--
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
|
|
16
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
18
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
19
|
+
--pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
|
|
20
|
+
--pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
|
|
21
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
9
22
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (14 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
7
|
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
|
|
8
8
|
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
|
|
@@ -10,5 +10,12 @@
|
|
|
10
10
|
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
|
|
11
11
|
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
|
|
12
12
|
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
|
|
13
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
|
|
14
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
|
|
15
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
|
|
16
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
|
|
17
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
|
|
18
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
|
|
13
19
|
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
|
|
20
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
|
|
14
21
|
}
|
|
@@ -1,16 +1,39 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (32 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
|
-
--pf-t--global--background--
|
|
8
|
-
--pf-t--global--background--
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
|
|
16
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
18
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
19
|
+
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
|
|
20
|
+
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
|
|
21
|
+
--pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
|
|
9
22
|
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
|
|
10
23
|
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
|
|
11
24
|
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
|
|
25
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
|
|
26
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
27
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
|
|
12
28
|
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
|
|
13
29
|
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
|
|
14
30
|
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
|
|
31
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
|
|
32
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
|
|
33
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
34
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
|
|
35
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
|
|
36
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
|
|
15
37
|
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
|
|
38
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
|
|
16
39
|
}
|
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (21 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
|
-
--pf-t--global--background--
|
|
8
|
-
--pf-t--global--background--
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
|
|
16
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
9
18
|
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
|
|
10
19
|
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
|
|
11
20
|
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
|
|
21
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
22
|
+
--pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
|
|
23
|
+
--pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
|
|
12
24
|
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
|
|
13
25
|
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
|
|
14
26
|
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
|
|
27
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
15
28
|
}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (41 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
7
|
--pf-t--global--background--color--primary--default: var(--pf-t--color--black);
|
|
8
|
+
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
|
|
8
9
|
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
|
|
9
10
|
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
|
|
10
11
|
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
|
|
12
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
|
|
11
13
|
--pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
|
|
12
14
|
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
|
|
13
15
|
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
|
|
@@ -23,7 +25,7 @@
|
|
|
23
25
|
--pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300);
|
|
24
26
|
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--300);
|
|
25
27
|
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--350);
|
|
26
|
-
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--
|
|
28
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
|
|
27
29
|
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--350);
|
|
28
30
|
--pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
|
|
29
31
|
--pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
|
|
@@ -43,5 +45,4 @@
|
|
|
43
45
|
--pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
|
|
44
46
|
--pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
|
|
45
47
|
--pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
|
|
46
|
-
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
|
|
47
48
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 12 Mar 2026 20:03:47 GMT
|
|
4
4
|
|
|
5
5
|
// Only tokens that differ from base theme (120 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
--pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
|
|
59
59
|
--pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
|
|
60
60
|
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
|
|
61
|
-
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--
|
|
61
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
|
|
62
62
|
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
|
|
63
63
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
|
|
64
64
|
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
|
package/build.js
CHANGED
|
@@ -27,6 +27,7 @@ const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
|
|
|
27
27
|
|
|
28
28
|
const build = (selector) => {
|
|
29
29
|
const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
|
|
30
|
+
const buildPath = path.join(__dirname, 'build/css');
|
|
30
31
|
|
|
31
32
|
console.log('Build started...');
|
|
32
33
|
console.log('\n============================');
|
|
@@ -168,6 +169,11 @@ const build = (selector) => {
|
|
|
168
169
|
const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
|
|
169
170
|
darkExtendedSD.buildAllPlatforms();
|
|
170
171
|
|
|
172
|
+
// Set glass tokens to initial in base themes
|
|
173
|
+
console.log('Setting glass tokens to initial in base themes...');
|
|
174
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-default.scss'));
|
|
175
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-dark.scss'));
|
|
176
|
+
|
|
171
177
|
// Step 2: Build other non-glass themes (order doesn't matter)
|
|
172
178
|
console.log('Building other themes...');
|
|
173
179
|
const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
|
|
@@ -185,6 +191,11 @@ const build = (selector) => {
|
|
|
185
191
|
const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
|
|
186
192
|
highContrastDarkExtendedSD.buildAllPlatforms();
|
|
187
193
|
|
|
194
|
+
// Set glass tokens to initial in highcontrast themes
|
|
195
|
+
console.log('Setting glass tokens to initial in highcontrast themes...');
|
|
196
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast.scss'));
|
|
197
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast-dark.scss'));
|
|
198
|
+
|
|
188
199
|
const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
|
|
189
200
|
layersSD.buildAllPlatforms();
|
|
190
201
|
|
|
@@ -234,7 +245,6 @@ const build = (selector) => {
|
|
|
234
245
|
|
|
235
246
|
// Step 4: Remove duplicate variables from glass SCSS files
|
|
236
247
|
console.log('Removing duplicate variables from glass themes...');
|
|
237
|
-
const buildPath = path.join(__dirname, 'build/css');
|
|
238
248
|
removeDuplicateVariables(
|
|
239
249
|
path.join(buildPath, 'tokens-default.scss'),
|
|
240
250
|
path.join(buildPath, 'tokens-glass.scss')
|
|
@@ -264,6 +274,13 @@ const build = (selector) => {
|
|
|
264
274
|
const redhatHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast-dark.json');
|
|
265
275
|
redhatHighContrastDarkExtendedSD.buildAllPlatforms();
|
|
266
276
|
|
|
277
|
+
// Set glass tokens to initial in redhat non-glass themes
|
|
278
|
+
console.log('Setting glass tokens to initial in redhat themes...');
|
|
279
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat.scss'));
|
|
280
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-dark.scss'));
|
|
281
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-highcontrast.scss'));
|
|
282
|
+
setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-highcontrast-dark.scss'));
|
|
283
|
+
|
|
267
284
|
// Step 6: Remove duplicate variables from redhat SCSS files
|
|
268
285
|
console.log('Removing duplicate variables from redhat themes...');
|
|
269
286
|
removeDuplicateVariables(
|
|
@@ -361,4 +378,30 @@ function removeDuplicateVariables(baseFilePath, glassFilePath) {
|
|
|
361
378
|
console.log(`Removed ${removedCount} duplicate variables from ${path.basename(glassFilePath)}`);
|
|
362
379
|
}
|
|
363
380
|
|
|
381
|
+
/**
|
|
382
|
+
* Set all glass token values to 'initial' in non-glass SCSS files
|
|
383
|
+
* @param {string} scssFilePath - Path to non-glass SCSS file (e.g., tokens-default.scss)
|
|
384
|
+
*/
|
|
385
|
+
function setGlassTokensToInitial(scssFilePath) {
|
|
386
|
+
const content = fs.readFileSync(scssFilePath, 'utf8');
|
|
387
|
+
|
|
388
|
+
// Match CSS variable declarations with "glass" in the name
|
|
389
|
+
// Pattern: --pf-t--global--..--glass--...: <any-value>;
|
|
390
|
+
const glassVarRegex = /(--pf-t--[^:]*--glass--[^:]+):\s*[^;]+;/g;
|
|
391
|
+
|
|
392
|
+
let modifiedContent = content;
|
|
393
|
+
let replacementCount = 0;
|
|
394
|
+
|
|
395
|
+
// Replace all glass token values with 'initial'
|
|
396
|
+
modifiedContent = content.replace(glassVarRegex, (_match, varName) => {
|
|
397
|
+
replacementCount++;
|
|
398
|
+
return `${varName}: initial;`;
|
|
399
|
+
});
|
|
400
|
+
|
|
401
|
+
// Write back to file
|
|
402
|
+
fs.writeFileSync(scssFilePath, modifiedContent, 'utf8');
|
|
403
|
+
|
|
404
|
+
console.log(`Set ${replacementCount} glass token values to 'initial' in ${path.basename(scssFilePath)}`);
|
|
405
|
+
}
|
|
406
|
+
|
|
364
407
|
module.exports = { build };
|
package/package.json
CHANGED