@patternfly/design-tokens 1.11.0 → 1.13.0
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-charts-dark.scss +1 -1
- package/build/css/tokens-charts.scss +1 -1
- package/build/css/tokens-dark.scss +1 -1
- package/build/css/tokens-default.scss +64 -42
- package/build/css/tokens-palette.scss +1 -1
- package/build.js +68 -5
- package/cli.js +1 -1
- package/config.default.json +1 -0
- package/config.layers.dark.json +20 -0
- package/config.layers.json +19 -0
- package/package.json +8 -9
- package/patternfly-docs/content/all-patternfly-tokens.md +3 -2
- package/patternfly-docs/content/token-layers-dark.json +60035 -0
- package/patternfly-docs/content/token-layers-default.json +55846 -0
- package/patternfly-docs/content/tokensTable.css +15 -0
- package/patternfly-docs/content/tokensTable.js +216 -113
- package/patternfly-docs/content/tokensToolbar.js +77 -0
- package/patternfly-docs/generated/tokens/all-patternfly-tokens/tokens.js +7 -2
- package/tokens/default/base.dimension.json +36 -14
- package/tokens/default/semantic.dimension.json +177 -80
- package/build-js-for-docs.js +0 -41
- package/patternfly-docs/scssAsJson.json +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 18 Jul 2024 22:27:54 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
--pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
|
|
36
36
|
--pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
|
|
37
37
|
--pf-t--global--box-shadow--spread--100: 0px;
|
|
38
|
-
--pf-t--global--breakpoint--100:
|
|
39
|
-
--pf-t--global--breakpoint--200:
|
|
40
|
-
--pf-t--global--breakpoint--250:
|
|
41
|
-
--pf-t--global--breakpoint--300:
|
|
42
|
-
--pf-t--global--breakpoint--350:
|
|
43
|
-
--pf-t--global--breakpoint--400:
|
|
44
|
-
--pf-t--global--breakpoint--500:
|
|
45
|
-
--pf-t--global--breakpoint--550:
|
|
46
|
-
--pf-t--global--breakpoint--600:
|
|
38
|
+
--pf-t--global--breakpoint--100: 0rem;
|
|
39
|
+
--pf-t--global--breakpoint--200: 36rem;
|
|
40
|
+
--pf-t--global--breakpoint--250: 40rem;
|
|
41
|
+
--pf-t--global--breakpoint--300: 48rem;
|
|
42
|
+
--pf-t--global--breakpoint--350: 60rem;
|
|
43
|
+
--pf-t--global--breakpoint--400: 62rem;
|
|
44
|
+
--pf-t--global--breakpoint--500: 75rem;
|
|
45
|
+
--pf-t--global--breakpoint--550: 80rem;
|
|
46
|
+
--pf-t--global--breakpoint--600: 90.625rem;
|
|
47
47
|
--pf-t--global--delay--100: 0ms;
|
|
48
48
|
--pf-t--global--delay--200: 50ms;
|
|
49
49
|
--pf-t--global--delay--300: 100ms;
|
|
@@ -55,37 +55,41 @@
|
|
|
55
55
|
--pf-t--global--duration--50: 50ms;
|
|
56
56
|
--pf-t--global--duration--500: 500ms;
|
|
57
57
|
--pf-t--global--duration--600: 600ms;
|
|
58
|
-
--pf-t--global--font--family--100: Red Hat Text
|
|
59
|
-
--pf-t--global--font--family--200: Red Hat Display
|
|
60
|
-
--pf-t--global--font--family--300: Red Hat Mono
|
|
58
|
+
--pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
|
|
59
|
+
--pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
|
|
60
|
+
--pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
|
|
61
61
|
--pf-t--global--font--line-height--100: 1.2999999523162842;
|
|
62
62
|
--pf-t--global--font--line-height--200: 1.5;
|
|
63
|
-
--pf-t--global--font--size--100:
|
|
64
|
-
--pf-t--global--font--size--200:
|
|
65
|
-
--pf-t--global--font--size--300:
|
|
66
|
-
--pf-t--global--font--size--400:
|
|
67
|
-
--pf-t--global--font--size--500:
|
|
68
|
-
--pf-t--global--font--size--600:
|
|
69
|
-
--pf-t--global--font--size--700:
|
|
70
|
-
--pf-t--global--font--size--800:
|
|
63
|
+
--pf-t--global--font--size--100: 0.75rem;
|
|
64
|
+
--pf-t--global--font--size--200: 0.875rem;
|
|
65
|
+
--pf-t--global--font--size--300: 1rem;
|
|
66
|
+
--pf-t--global--font--size--400: 1.125rem;
|
|
67
|
+
--pf-t--global--font--size--500: 1.25rem;
|
|
68
|
+
--pf-t--global--font--size--600: 1.375rem;
|
|
69
|
+
--pf-t--global--font--size--700: 1.75rem;
|
|
70
|
+
--pf-t--global--font--size--800: 2.25rem;
|
|
71
71
|
--pf-t--global--font--weight--100: 400;
|
|
72
72
|
--pf-t--global--font--weight--200: 500;
|
|
73
73
|
--pf-t--global--font--weight--300: 700;
|
|
74
74
|
--pf-t--global--font--weight--400: 700;
|
|
75
|
-
--pf-t--global--icon--size--100:
|
|
76
|
-
--pf-t--global--icon--size--200:
|
|
77
|
-
--pf-t--global--icon--size--250:
|
|
78
|
-
--pf-t--global--icon--size--300:
|
|
79
|
-
--pf-t--global--icon--size--400:
|
|
80
|
-
--pf-t--global--icon--size--500:
|
|
81
|
-
--pf-t--global--spacer--100:
|
|
82
|
-
--pf-t--global--spacer--200:
|
|
83
|
-
--pf-t--global--spacer--300:
|
|
84
|
-
--pf-t--global--spacer--400:
|
|
85
|
-
--pf-t--global--spacer--500:
|
|
86
|
-
--pf-t--global--spacer--600:
|
|
87
|
-
--pf-t--global--spacer--700:
|
|
88
|
-
--pf-t--global--spacer--800:
|
|
75
|
+
--pf-t--global--icon--size--100: 0.75rem;
|
|
76
|
+
--pf-t--global--icon--size--200: 0.875rem;
|
|
77
|
+
--pf-t--global--icon--size--250: 1rem;
|
|
78
|
+
--pf-t--global--icon--size--300: 1.375rem;
|
|
79
|
+
--pf-t--global--icon--size--400: 3.5rem;
|
|
80
|
+
--pf-t--global--icon--size--500: 6rem;
|
|
81
|
+
--pf-t--global--spacer--100: 0.25rem;
|
|
82
|
+
--pf-t--global--spacer--200: 0.5rem;
|
|
83
|
+
--pf-t--global--spacer--300: 1rem;
|
|
84
|
+
--pf-t--global--spacer--400: 1.5rem;
|
|
85
|
+
--pf-t--global--spacer--500: 2rem;
|
|
86
|
+
--pf-t--global--spacer--600: 3rem;
|
|
87
|
+
--pf-t--global--spacer--700: 4rem;
|
|
88
|
+
--pf-t--global--spacer--800: 5rem;
|
|
89
|
+
--pf-t--global--text-decoration--line--100: none;
|
|
90
|
+
--pf-t--global--text-decoration--line--200: underline;
|
|
91
|
+
--pf-t--global--text-decoration--style--100: solid;
|
|
92
|
+
--pf-t--global--text-decoration--style--200: dashed;
|
|
89
93
|
--pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
|
|
90
94
|
--pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
|
|
91
95
|
--pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
|
|
@@ -236,8 +240,8 @@
|
|
|
236
240
|
--pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
|
|
237
241
|
--pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
|
|
238
242
|
--pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
|
|
239
|
-
--pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--
|
|
240
|
-
--pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--
|
|
243
|
+
--pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
|
|
244
|
+
--pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
|
|
241
245
|
--pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
|
|
242
246
|
--pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
|
|
243
247
|
--pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
|
|
@@ -246,8 +250,10 @@
|
|
|
246
250
|
--pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
|
|
247
251
|
--pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
|
|
248
252
|
--pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
|
|
249
|
-
--pf-t--global--font--weight--body: var(--pf-t--global--font--weight--
|
|
250
|
-
--pf-t--global--font--weight--
|
|
253
|
+
--pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
|
|
254
|
+
--pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
|
|
255
|
+
--pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
|
|
256
|
+
--pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
|
|
251
257
|
--pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
|
|
252
258
|
--pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
|
|
253
259
|
--pf-t--global--icon--color--300: var(--pf-t--color--white);
|
|
@@ -286,6 +292,18 @@
|
|
|
286
292
|
--pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
|
|
287
293
|
--pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
|
|
288
294
|
--pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
|
|
295
|
+
--pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
|
|
296
|
+
--pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
|
|
297
|
+
--pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
|
|
298
|
+
--pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
|
|
299
|
+
--pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
|
|
300
|
+
--pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
|
|
301
|
+
--pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
|
|
302
|
+
--pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
|
|
303
|
+
--pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
|
|
304
|
+
--pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
|
|
305
|
+
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
|
|
306
|
+
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
|
|
289
307
|
--pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
|
|
290
308
|
--pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
|
|
291
309
|
--pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
|
|
@@ -435,10 +453,9 @@
|
|
|
435
453
|
--pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
|
|
436
454
|
--pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
|
|
437
455
|
--pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
|
|
438
|
-
--pf-t--global--spacer--action--horizontal--plain: var(--pf-t--global--spacer--
|
|
456
|
+
--pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
|
|
457
|
+
--pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
|
|
439
458
|
--pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
|
|
440
|
-
--pf-t--global--spacer--action--vertical--compact: var(--pf-t--global--spacer--xs);
|
|
441
|
-
--pf-t--global--spacer--action--vertical--spacious: var(--pf-t--global--spacer--md);
|
|
442
459
|
--pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
|
|
443
460
|
--pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
|
|
444
461
|
--pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
|
|
@@ -446,6 +463,7 @@
|
|
|
446
463
|
--pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
|
|
447
464
|
--pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
|
|
448
465
|
--pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
|
|
466
|
+
--pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
|
|
449
467
|
--pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
|
|
450
468
|
--pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
|
|
451
469
|
--pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
|
|
@@ -454,6 +472,8 @@
|
|
|
454
472
|
--pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
|
|
455
473
|
--pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
|
|
456
474
|
--pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
|
|
475
|
+
--pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
|
|
476
|
+
--pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
|
|
457
477
|
--pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
|
|
458
478
|
--pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
|
|
459
479
|
--pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
|
|
@@ -467,6 +487,8 @@
|
|
|
467
487
|
--pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
|
|
468
488
|
--pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
|
|
469
489
|
--pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
|
|
490
|
+
--pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
|
|
491
|
+
--pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
|
|
470
492
|
--pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
|
|
471
493
|
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
472
494
|
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
package/build.js
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
/* eslint-disable no-console */
|
|
2
2
|
const StyleDictionary = require('style-dictionary');
|
|
3
|
+
const config = require('./config.default.json'); // Adjust the path if necessary
|
|
4
|
+
const basePxFontSize = config.basePxFontSize || 16;
|
|
5
|
+
const getTokenLayer = ({ filePath }) => {
|
|
6
|
+
if (filePath.includes('semantic.json')) return ['semantic', 'colors'];
|
|
7
|
+
if (filePath.includes('semantic.dark.json')) return ['semantic', 'colors'];
|
|
8
|
+
if (filePath.includes('semantic.dimension.json')) return ['semantic', 'dimension'];
|
|
9
|
+
if (filePath.includes('semantic.motion.json')) return ['semantic', 'motion'];
|
|
10
|
+
if (filePath.includes('base.json')) return ['base', 'colors'];
|
|
11
|
+
if (filePath.includes('base.dark.json')) return ['base', 'colors'];
|
|
12
|
+
if (filePath.includes('base.dimension.json')) return ['base', 'dimension'];
|
|
13
|
+
if (filePath.includes('base.motion.json')) return ['base', 'motion'];
|
|
14
|
+
if (filePath.includes('chart')) return ['chart'];
|
|
15
|
+
if (filePath.includes('palette.color.json')) return ['palette'];
|
|
16
|
+
return ['palette'];
|
|
17
|
+
};
|
|
18
|
+
// returns subdirectory within 'tokens' directory (ex: default, dark, etc)
|
|
19
|
+
const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
|
|
3
20
|
|
|
4
21
|
const build = (selector) => {
|
|
5
22
|
const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
|
|
@@ -23,20 +40,61 @@ const build = (selector) => {
|
|
|
23
40
|
}
|
|
24
41
|
});
|
|
25
42
|
|
|
43
|
+
StyleDictionary.registerFormat({
|
|
44
|
+
name: 'json/flat-categories',
|
|
45
|
+
formatter: function (dictionary) {
|
|
46
|
+
let tokens = {
|
|
47
|
+
semantic: {
|
|
48
|
+
colors: {},
|
|
49
|
+
dimension: {},
|
|
50
|
+
motion: {}
|
|
51
|
+
},
|
|
52
|
+
base: {
|
|
53
|
+
colors: {},
|
|
54
|
+
dimension: {},
|
|
55
|
+
motion: {}
|
|
56
|
+
},
|
|
57
|
+
palette: {},
|
|
58
|
+
chart: {}
|
|
59
|
+
};
|
|
60
|
+
dictionary.allTokens.map((token) => {
|
|
61
|
+
// determine token type based on tokens filepath
|
|
62
|
+
const theme = getTheme(token);
|
|
63
|
+
const layer = getTokenLayer(token);
|
|
64
|
+
let insertLayer = tokens;
|
|
65
|
+
while (layer.length) {
|
|
66
|
+
insertLayer = insertLayer[layer.shift()];
|
|
67
|
+
}
|
|
68
|
+
// assign each token object to token.name
|
|
69
|
+
insertLayer[token.name] = {};
|
|
70
|
+
insertLayer[token.name][theme] = token;
|
|
71
|
+
// attach references to build token chain
|
|
72
|
+
if (dictionary.usesReference(token.original.value)) {
|
|
73
|
+
token.references = dictionary.getReferences(token.original.value);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
return JSON.stringify(tokens, null, 2);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
|
|
26
80
|
// Register custom transforms
|
|
27
81
|
StyleDictionary.registerTransform({
|
|
28
82
|
name: 'patternfly/global/px',
|
|
29
83
|
type: 'value',
|
|
30
84
|
matcher: (token) =>
|
|
31
|
-
token.attributes.type === 'spacer' ||
|
|
32
85
|
token.attributes.type === 'border' ||
|
|
33
|
-
token.attributes.type === '
|
|
34
|
-
token.attributes.type === 'breakpoint' ||
|
|
35
|
-
(token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
|
|
36
|
-
(token.attributes.type === 'font' && token.attributes.item === 'size'),
|
|
86
|
+
(token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
|
|
37
87
|
transformer: (token) => `${token.value}px`
|
|
38
88
|
});
|
|
39
89
|
|
|
90
|
+
StyleDictionary.registerTransform({
|
|
91
|
+
name: 'patternfly/global/pxToRem',
|
|
92
|
+
type: 'value',
|
|
93
|
+
matcher: (token) =>
|
|
94
|
+
token.attributes.type === 'spacer' || token.attributes.item === 'size' || token.attributes.type === 'breakpoint',
|
|
95
|
+
transformer: (token) => `${token.value / basePxFontSize}rem`
|
|
96
|
+
});
|
|
97
|
+
|
|
40
98
|
StyleDictionary.registerTransform({
|
|
41
99
|
name: 'patternfly/global/ms',
|
|
42
100
|
type: 'value',
|
|
@@ -63,6 +121,7 @@ const build = (selector) => {
|
|
|
63
121
|
'color/css',
|
|
64
122
|
// custom transforms
|
|
65
123
|
'patternfly/global/px',
|
|
124
|
+
'patternfly/global/pxToRem',
|
|
66
125
|
'patternfly/global/ms',
|
|
67
126
|
'patternfly/doublekebab'
|
|
68
127
|
]
|
|
@@ -74,6 +133,8 @@ const build = (selector) => {
|
|
|
74
133
|
const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
|
|
75
134
|
const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
|
|
76
135
|
const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
|
|
136
|
+
const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
|
|
137
|
+
const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
|
|
77
138
|
|
|
78
139
|
// Build all
|
|
79
140
|
defaultExtendedSD.buildAllPlatforms();
|
|
@@ -81,6 +142,8 @@ const build = (selector) => {
|
|
|
81
142
|
paletteExtendedSD.buildAllPlatforms();
|
|
82
143
|
chartsExtendedSD.buildAllPlatforms();
|
|
83
144
|
chartsDarkExtendedSD.buildAllPlatforms();
|
|
145
|
+
layersSD.buildAllPlatforms();
|
|
146
|
+
layersDarkSD.buildAllPlatforms();
|
|
84
147
|
|
|
85
148
|
console.log('\n============================');
|
|
86
149
|
console.log('\nBuild completed.');
|
package/cli.js
CHANGED
package/config.default.json
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"include": ["tokens/default/*.json"],
|
|
3
|
+
"source": ["tokens/dark/*.json"],
|
|
4
|
+
"platforms": {
|
|
5
|
+
"json/default": {
|
|
6
|
+
"transformGroup": "patternfly/css",
|
|
7
|
+
"buildPath": "patternfly-docs/content/",
|
|
8
|
+
"prefix": "pf-t",
|
|
9
|
+
"files": [
|
|
10
|
+
{
|
|
11
|
+
"destination": "token-layers-dark.json",
|
|
12
|
+
"format": "json/flat-categories",
|
|
13
|
+
"options": {
|
|
14
|
+
"outputReferences": false
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": ["tokens/default/*.json"],
|
|
3
|
+
"platforms": {
|
|
4
|
+
"json/default": {
|
|
5
|
+
"transformGroup": "patternfly/css",
|
|
6
|
+
"buildPath": "patternfly-docs/content/",
|
|
7
|
+
"prefix": "pf-t",
|
|
8
|
+
"files": [
|
|
9
|
+
{
|
|
10
|
+
"destination": "token-layers-default.json",
|
|
11
|
+
"format": "json/flat-categories",
|
|
12
|
+
"options": {
|
|
13
|
+
"outputReferences": false
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
package/package.json
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/design-tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
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",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"build": "yarn build:
|
|
8
|
+
"build": "yarn build:scss",
|
|
9
9
|
"build:fed:packages": "node generate-fed-package-json.js",
|
|
10
10
|
"build:scss": "node ./cli.js",
|
|
11
|
-
"build:js-from-scss": "node ./build-js-for-docs.js",
|
|
12
11
|
"build:plugin": "webpack",
|
|
13
12
|
"clean": "rimraf dist",
|
|
14
13
|
"docs:develop": "pf-docs-framework start",
|
|
15
|
-
"docs:build": "yarn build:
|
|
14
|
+
"docs:build": "yarn build:scss && pf-docs-framework build all --output public",
|
|
16
15
|
"docs:serve": "pf-docs-framework serve public --port 5000",
|
|
17
16
|
"docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
|
|
18
17
|
"test:a11y": "patternfly-a11y --config patternfly-a11y.config",
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
"access": "public"
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
|
-
"@patternfly/react-core": "
|
|
34
|
+
"@patternfly/react-core": "6.0.0-alpha.94",
|
|
36
35
|
"commander": "^12.0.0"
|
|
37
36
|
},
|
|
38
37
|
"peerDependencies": {
|
|
@@ -41,11 +40,11 @@
|
|
|
41
40
|
},
|
|
42
41
|
"devDependencies": {
|
|
43
42
|
"@figma/plugin-typings": "^1.95.0",
|
|
44
|
-
"@patternfly/documentation-framework": "6.0.0-alpha.
|
|
45
|
-
"@patternfly/patternfly": "6.0.0-alpha.
|
|
43
|
+
"@patternfly/documentation-framework": "^6.0.0-alpha.66",
|
|
44
|
+
"@patternfly/patternfly": "6.0.0-alpha.205",
|
|
46
45
|
"@patternfly/patternfly-a11y": "^4.3.1",
|
|
47
|
-
"@patternfly/react-code-editor": "6.0.0-alpha.
|
|
48
|
-
"@patternfly/react-table": "6.0.0-alpha.
|
|
46
|
+
"@patternfly/react-code-editor": "6.0.0-alpha.94",
|
|
47
|
+
"@patternfly/react-table": "6.0.0-alpha.95",
|
|
49
48
|
"css-loader": "^7.1.2",
|
|
50
49
|
"html-inline-script-webpack-plugin": "^3.2.1",
|
|
51
50
|
"html-webpack-plugin": "^5.6.0",
|
|
@@ -3,7 +3,8 @@ section: tokens
|
|
|
3
3
|
id: All PatternFly tokens
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
import * as defaultTokens from './token-layers-default.json';
|
|
7
|
+
import * as darkTokens from './token-layers-dark.json';
|
|
7
8
|
import { TokensTable } from './tokensTable.js';
|
|
8
9
|
|
|
9
|
-
<TokensTable/>
|
|
10
|
+
<TokensTable tokenJson={{default: defaultTokens, dark: darkTokens}} />
|