@patternfly/design-tokens 1.11.0 → 1.12.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 +32 -32
- package/build/css/tokens-palette.scss +1 -1
- package/build.js +14 -5
- package/config.default.json +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 02 Jul 2024 18:11:52 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;
|
|
@@ -60,32 +60,32 @@
|
|
|
60
60
|
--pf-t--global--font--family--300: Red Hat Mono VF;
|
|
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
89
|
--pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
|
|
90
90
|
--pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
|
|
91
91
|
--pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
|
package/build.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
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;
|
|
3
5
|
|
|
4
6
|
const build = (selector) => {
|
|
5
7
|
const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
|
|
@@ -28,15 +30,21 @@ const build = (selector) => {
|
|
|
28
30
|
name: 'patternfly/global/px',
|
|
29
31
|
type: 'value',
|
|
30
32
|
matcher: (token) =>
|
|
31
|
-
token.attributes.type === 'spacer' ||
|
|
32
33
|
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'),
|
|
34
|
+
(token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
|
|
37
35
|
transformer: (token) => `${token.value}px`
|
|
38
36
|
});
|
|
39
37
|
|
|
38
|
+
StyleDictionary.registerTransform({
|
|
39
|
+
name: 'patternfly/global/pxToRem',
|
|
40
|
+
type: 'value',
|
|
41
|
+
matcher: (token) =>
|
|
42
|
+
token.attributes.type === 'spacer' ||
|
|
43
|
+
token.attributes.item === 'size' ||
|
|
44
|
+
token.attributes.type === 'breakpoint',
|
|
45
|
+
transformer: (token) => `${token.value / basePxFontSize}rem`
|
|
46
|
+
});
|
|
47
|
+
|
|
40
48
|
StyleDictionary.registerTransform({
|
|
41
49
|
name: 'patternfly/global/ms',
|
|
42
50
|
type: 'value',
|
|
@@ -63,6 +71,7 @@ const build = (selector) => {
|
|
|
63
71
|
'color/css',
|
|
64
72
|
// custom transforms
|
|
65
73
|
'patternfly/global/px',
|
|
74
|
+
'patternfly/global/pxToRem',
|
|
66
75
|
'patternfly/global/ms',
|
|
67
76
|
'patternfly/doublekebab'
|
|
68
77
|
]
|
package/config.default.json
CHANGED
package/package.json
CHANGED