@patternfly/design-tokens 1.8.0 → 1.10.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/package.json +13 -5
- package/patternfly-docs/scssAsJson.json +1 -1
- package/plugins/export-patternfly-tokens/manifest.json +3 -5
- package/plugins/export-patternfly-tokens/src/code.ts +106 -0
- package/plugins/export-patternfly-tokens/src/ui.css +97 -0
- package/plugins/export-patternfly-tokens/src/ui.html +1 -0
- package/plugins/export-patternfly-tokens/src/ui.tsx +150 -0
- package/plugins/export-patternfly-tokens/tsconfig.json +18 -0
- package/tokens/dark/semantic.dark.json +32 -8
- package/tokens/default/base.dimension.json +80 -0
- package/tokens/default/semantic.dimension.json +131 -39
- package/tokens/default/semantic.json +32 -8
- package/webpack.config.js +55 -0
- package/plugins/export-patternfly-tokens/code.js +0 -98
- package/plugins/export-patternfly-tokens/export.html +0 -191
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--spacing: 0.8rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
* {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
background-color: var(--figma-color-bg);
|
|
11
|
+
color: var(--figma-color-text);
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: var(--spacing);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
html,
|
|
17
|
+
body,
|
|
18
|
+
main {
|
|
19
|
+
height: 98%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
main {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: var(--spacing);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
button {
|
|
29
|
+
appearance: none;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
padding: var(--spacing);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
textarea {
|
|
35
|
+
background-color: var(--figma-color-bg-secondary);
|
|
36
|
+
border: 2px solid var(--figma-color-border);
|
|
37
|
+
color: var(--figma-color-text-secondary);
|
|
38
|
+
flex: 1;
|
|
39
|
+
font-family: Andale Mono, monospace;
|
|
40
|
+
font-size: 0.9rem;
|
|
41
|
+
overflow: auto;
|
|
42
|
+
padding: var(--spacing);
|
|
43
|
+
white-space: pre;
|
|
44
|
+
}
|
|
45
|
+
textarea:focus {
|
|
46
|
+
border-color: var(--figma-color-border-selected);
|
|
47
|
+
outline: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
button,
|
|
51
|
+
textarea {
|
|
52
|
+
display: block;
|
|
53
|
+
width: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
a,
|
|
57
|
+
p {
|
|
58
|
+
color: var(--figma-color-text-secondary);
|
|
59
|
+
padding-right: 5px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button {
|
|
63
|
+
background-color: var(--figma-color-bg-brand);
|
|
64
|
+
color: var(--figma-color-text-onbrand);
|
|
65
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
66
|
+
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
67
|
+
sans-serif;
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.button-container {
|
|
72
|
+
display: flex;
|
|
73
|
+
justify-content: space-around;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.zip-wrapper {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.json-downloads {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-wrap: wrap;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.tokens-download-wrapper a {
|
|
87
|
+
padding: 5px;
|
|
88
|
+
margin: 5px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#export {
|
|
92
|
+
background-color: var(--figma-color-bg-component);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#save {
|
|
96
|
+
background-color: var(--figma-color-bg-component);
|
|
97
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<div id="export-patternfly-tokens-app"></div>
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as ReactDOM from 'react-dom/client';
|
|
3
|
+
import * as JSZip from 'jszip';
|
|
4
|
+
import './ui.css';
|
|
5
|
+
|
|
6
|
+
let tokensZip;
|
|
7
|
+
|
|
8
|
+
const addToZip = (blob, fileName, folderNames, zip) => {
|
|
9
|
+
// Add download files to folder structure
|
|
10
|
+
folderNames.forEach((folderName) => {
|
|
11
|
+
zip.folder(folderName).file(fileName, blob);
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const saveVars = (text, setJsonFiles, setZipFile) => {
|
|
16
|
+
let splitFiles = text.split('\n\n\n');
|
|
17
|
+
tokensZip = new JSZip();
|
|
18
|
+
|
|
19
|
+
for (let i = 0; i < splitFiles.length; i++) {
|
|
20
|
+
const splitFileName = splitFiles[i].split('\n', 1)[0];
|
|
21
|
+
let saveFileName = '';
|
|
22
|
+
let saveFolderNames = [];
|
|
23
|
+
|
|
24
|
+
switch (splitFileName) {
|
|
25
|
+
case '/* Base Dimension Tokens.Mode 1.tokens.json */':
|
|
26
|
+
saveFileName = 'base.dimension.json';
|
|
27
|
+
saveFolderNames = ['default'];
|
|
28
|
+
break;
|
|
29
|
+
case '/* Base Color Tokens - Light.Value.tokens.json */':
|
|
30
|
+
saveFileName = 'base.json';
|
|
31
|
+
saveFolderNames = ['default'];
|
|
32
|
+
break;
|
|
33
|
+
case '/* Color Palette.Mode 1.tokens.json */':
|
|
34
|
+
saveFileName = 'palette.color.json';
|
|
35
|
+
saveFolderNames = ['default', 'dark'];
|
|
36
|
+
break;
|
|
37
|
+
case '/* Semantic Dimension Tokens.Mode 1.tokens.json */':
|
|
38
|
+
saveFileName = 'semantic.dimension.json';
|
|
39
|
+
saveFolderNames = ['default'];
|
|
40
|
+
break;
|
|
41
|
+
case '/* Semantic Color Tokens.Light.tokens.json */':
|
|
42
|
+
saveFileName = 'semantic.json';
|
|
43
|
+
saveFolderNames = ['default'];
|
|
44
|
+
break;
|
|
45
|
+
case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
|
|
46
|
+
saveFileName = 'base.dark.json';
|
|
47
|
+
saveFolderNames = ['dark'];
|
|
48
|
+
break;
|
|
49
|
+
case '/* Semantic Color Tokens.Dark.tokens.json */':
|
|
50
|
+
saveFileName = 'semantic.dark.json';
|
|
51
|
+
saveFolderNames = ['dark'];
|
|
52
|
+
break;
|
|
53
|
+
case '/* Charts.Light.tokens.json */':
|
|
54
|
+
saveFileName = 'charts.json';
|
|
55
|
+
saveFolderNames = ['default'];
|
|
56
|
+
break;
|
|
57
|
+
case '/* Charts.Dark.tokens.json */':
|
|
58
|
+
saveFileName = 'charts.dark.json';
|
|
59
|
+
saveFolderNames = ['dark'];
|
|
60
|
+
break;
|
|
61
|
+
case '/* Base Motion Tokens.Mode 1.tokens.json */':
|
|
62
|
+
saveFileName = 'base.motion.json';
|
|
63
|
+
saveFolderNames = ['default'];
|
|
64
|
+
break;
|
|
65
|
+
case '/* Semantic Motion Tokens.Mode 1.tokens.json */':
|
|
66
|
+
saveFileName = 'semantic.motion.json';
|
|
67
|
+
saveFolderNames = ['default'];
|
|
68
|
+
break;
|
|
69
|
+
default:
|
|
70
|
+
saveFileName = splitFiles[i].split('\n', 1)[0];
|
|
71
|
+
saveFolderNames = ['default'];
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const fileToExport = splitFiles[i].substring(splitFiles[i].indexOf('\n') + 1);
|
|
75
|
+
const textToSaveAsBlob = new Blob([fileToExport], { type: 'text/plain' });
|
|
76
|
+
|
|
77
|
+
// create download link per file
|
|
78
|
+
const jsonLink = createLink(textToSaveAsBlob, saveFileName);
|
|
79
|
+
setJsonFiles((prev: React.ReactNode[]) => [...prev, jsonLink]);
|
|
80
|
+
// add each file zip
|
|
81
|
+
addToZip(textToSaveAsBlob, saveFileName, saveFolderNames, tokensZip);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// create download link for finished zip file
|
|
85
|
+
tokensZip.generateAsync({ type: 'blob' }).then((blob) => {
|
|
86
|
+
const zipLink = createLink(blob, 'tokens.zip');
|
|
87
|
+
setZipFile(zipLink);
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const createLink = (text, file) => {
|
|
92
|
+
const textToSaveAsURL = window.URL.createObjectURL(text);
|
|
93
|
+
return (
|
|
94
|
+
<a key={file} download={file} href={textToSaveAsURL}>
|
|
95
|
+
{file}
|
|
96
|
+
</a>
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
const exportTokens = () => parent.postMessage({ pluginMessage: { type: 'EXPORT' } }, '*');
|
|
101
|
+
|
|
102
|
+
const App = () => {
|
|
103
|
+
const [jsonFiles, setJsonFiles] = React.useState([]);
|
|
104
|
+
const [zipFile, setZipFile] = React.useState(null);
|
|
105
|
+
const resetDownloads = () => {
|
|
106
|
+
setJsonFiles([]);
|
|
107
|
+
setZipFile(null);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
React.useEffect(() => {
|
|
111
|
+
exportTokens();
|
|
112
|
+
// Listen for messages sent from the plugin code.ts file
|
|
113
|
+
window.onmessage = ({ data: { pluginMessage } }) => {
|
|
114
|
+
if (pluginMessage?.type === 'EXPORT_RESULT') {
|
|
115
|
+
// Reset download files
|
|
116
|
+
resetDownloads();
|
|
117
|
+
// Display all tokens in textarea
|
|
118
|
+
let textOutput = pluginMessage.files
|
|
119
|
+
.map(({ fileName, body }) => `/* ${fileName} */\n\n${JSON.stringify(body, null, 2)}`)
|
|
120
|
+
.join('\n\n\n');
|
|
121
|
+
textOutput = textOutput.replaceAll('$type', 'type').replaceAll('$value', 'value');
|
|
122
|
+
document.querySelector('textarea').innerHTML = textOutput;
|
|
123
|
+
|
|
124
|
+
// Create downloadable token files
|
|
125
|
+
saveVars(textOutput, setJsonFiles, setZipFile);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
}, []);
|
|
129
|
+
|
|
130
|
+
return (
|
|
131
|
+
<main>
|
|
132
|
+
<div className="button-container">
|
|
133
|
+
<button type="button" onClick={exportTokens}>
|
|
134
|
+
Export Tokens
|
|
135
|
+
</button>
|
|
136
|
+
</div>
|
|
137
|
+
<textarea placeholder="All exported tokens will render here..." readOnly></textarea>
|
|
138
|
+
<div className="tokens-download-wrapper zip-wrapper">
|
|
139
|
+
<p>Download all files:</p>
|
|
140
|
+
<div className="zip-downloads">{zipFile}</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div className="tokens-download-wrapper json-wrapper">
|
|
143
|
+
<p>Download individual JSON files:</p>
|
|
144
|
+
<div className="json-downloads">{jsonFiles}</div>
|
|
145
|
+
</div>
|
|
146
|
+
</main>
|
|
147
|
+
);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
ReactDOM.createRoot(document.getElementById('export-patternfly-tokens-app')).render(<App />);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// tsconfig.json
|
|
2
|
+
{
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es6",
|
|
5
|
+
// "lib": ["es6"],
|
|
6
|
+
"strict": false,
|
|
7
|
+
"typeRoots": [
|
|
8
|
+
"../../../../node_modules/@types",
|
|
9
|
+
"../../../../node_modules/@figma"
|
|
10
|
+
],
|
|
11
|
+
"outDir": "./dist",
|
|
12
|
+
"jsx": "react",
|
|
13
|
+
"allowJs": true,
|
|
14
|
+
"moduleResolution": "node",
|
|
15
|
+
"skipLibCheck": true
|
|
16
|
+
},
|
|
17
|
+
"include": ["src/**/*.ts", "src/**/*.tsx", "src/ui.jsx", "src/ui.tsx"],
|
|
18
|
+
}
|
|
@@ -5,42 +5,51 @@
|
|
|
5
5
|
"color": {
|
|
6
6
|
"primary": {
|
|
7
7
|
"default": {
|
|
8
|
+
"description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
|
|
8
9
|
"type": "color",
|
|
9
10
|
"value": "{global.dark.background.color.200}"
|
|
10
11
|
},
|
|
11
12
|
"hover": {
|
|
13
|
+
"description": "Use as the hover state for primary backgrounds",
|
|
12
14
|
"type": "color",
|
|
13
15
|
"value": "{global.dark.background.color.300}"
|
|
14
16
|
},
|
|
15
17
|
"clicked": {
|
|
18
|
+
"description": "Use as the selected state for primary backgrounds",
|
|
16
19
|
"type": "color",
|
|
17
20
|
"value": "{global.dark.background.color.300}"
|
|
18
21
|
}
|
|
19
22
|
},
|
|
20
23
|
"secondary": {
|
|
21
24
|
"default": {
|
|
25
|
+
"description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
|
|
22
26
|
"type": "color",
|
|
23
27
|
"value": "{global.dark.background.color.100}"
|
|
24
28
|
},
|
|
25
29
|
"hover": {
|
|
30
|
+
"description": "Use as the hover state for secondary backgrounds",
|
|
26
31
|
"type": "color",
|
|
27
32
|
"value": "{global.dark.background.color.200}"
|
|
28
33
|
},
|
|
29
34
|
"clicked": {
|
|
35
|
+
"description": "Use as the selected state for secondary backgrounds",
|
|
30
36
|
"type": "color",
|
|
31
37
|
"value": "{global.dark.background.color.200}"
|
|
32
38
|
}
|
|
33
39
|
},
|
|
34
40
|
"floating": {
|
|
35
41
|
"default": {
|
|
42
|
+
"description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
|
|
36
43
|
"type": "color",
|
|
37
44
|
"value": "{global.dark.background.color.300}"
|
|
38
45
|
},
|
|
39
46
|
"hover": {
|
|
47
|
+
"description": "Use as the hover state for floating backgrounds",
|
|
40
48
|
"type": "color",
|
|
41
49
|
"value": "{global.dark.background.color.200}"
|
|
42
50
|
},
|
|
43
51
|
"clicked": {
|
|
52
|
+
"description": "Use as the selected state for floating backgrounds",
|
|
44
53
|
"type": "color",
|
|
45
54
|
"value": "{global.dark.background.color.200}"
|
|
46
55
|
}
|
|
@@ -48,23 +57,28 @@
|
|
|
48
57
|
"action": {
|
|
49
58
|
"plain": {
|
|
50
59
|
"default": {
|
|
60
|
+
"description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
|
|
51
61
|
"type": "color",
|
|
52
62
|
"value": "rgba(0, 0, 0, 0.0000)"
|
|
53
63
|
},
|
|
54
64
|
"hover": {
|
|
65
|
+
"description": "Use as the hover state for components that use the plain action default background.",
|
|
55
66
|
"type": "color",
|
|
56
67
|
"value": "{global.dark.background.color.600}"
|
|
57
68
|
},
|
|
58
69
|
"clicked": {
|
|
70
|
+
"description": "Use as the active/pressed state for components that use the plain action default background.",
|
|
59
71
|
"type": "color",
|
|
60
72
|
"value": "{global.dark.background.color.600}"
|
|
61
73
|
},
|
|
62
74
|
"alt": {
|
|
63
75
|
"hover": {
|
|
76
|
+
"description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
|
|
64
77
|
"type": "color",
|
|
65
78
|
"value": "{global.dark.background.color.200}"
|
|
66
79
|
},
|
|
67
80
|
"clicked": {
|
|
81
|
+
"description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
|
|
68
82
|
"type": "color",
|
|
69
83
|
"value": "{global.dark.background.color.200}"
|
|
70
84
|
}
|
|
@@ -73,34 +87,40 @@
|
|
|
73
87
|
},
|
|
74
88
|
"control": {
|
|
75
89
|
"default": {
|
|
90
|
+
"description": "Use as the default background for control elements like form inputs and menu toggles.",
|
|
76
91
|
"type": "color",
|
|
77
92
|
"value": "{global.dark.background.color.300}"
|
|
78
93
|
}
|
|
79
94
|
},
|
|
80
95
|
"highlight": {
|
|
81
96
|
"default": {
|
|
97
|
+
"description": "Use as the background color for highlighted elements",
|
|
82
98
|
"type": "color",
|
|
83
99
|
"value": "{global.dark.background.color.highlight.100}"
|
|
84
100
|
},
|
|
85
101
|
"clicked": {
|
|
102
|
+
"description": "Use as the active state for for highlighted elements",
|
|
86
103
|
"type": "color",
|
|
87
104
|
"value": "{global.dark.background.color.highlight.200}"
|
|
88
105
|
}
|
|
89
106
|
},
|
|
90
107
|
"inverse": {
|
|
91
108
|
"default": {
|
|
109
|
+
"description": "Use as the background color components with inversed backgrounds like tooltips.",
|
|
92
110
|
"type": "color",
|
|
93
111
|
"value": "{global.dark.background.color.400}"
|
|
94
112
|
}
|
|
95
113
|
},
|
|
96
114
|
"disabled": {
|
|
97
115
|
"default": {
|
|
116
|
+
"description": "Use as the background color for disabled components.",
|
|
98
117
|
"type": "color",
|
|
99
118
|
"value": "{global.dark.color.disabled.100}"
|
|
100
119
|
}
|
|
101
120
|
},
|
|
102
121
|
"backdrop": {
|
|
103
122
|
"default": {
|
|
123
|
+
"description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
|
|
104
124
|
"type": "color",
|
|
105
125
|
"value": "{global.dark.background.color.500}"
|
|
106
126
|
}
|
|
@@ -291,7 +311,7 @@
|
|
|
291
311
|
"value": "{global.dark.color.nonstatus.orangered.200}"
|
|
292
312
|
}
|
|
293
313
|
},
|
|
294
|
-
"
|
|
314
|
+
"yellow": {
|
|
295
315
|
"default": {
|
|
296
316
|
"type": "color",
|
|
297
317
|
"value": "{global.dark.color.nonstatus.gold.100}"
|
|
@@ -319,7 +339,7 @@
|
|
|
319
339
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
320
340
|
}
|
|
321
341
|
},
|
|
322
|
-
"
|
|
342
|
+
"teal": {
|
|
323
343
|
"default": {
|
|
324
344
|
"type": "color",
|
|
325
345
|
"value": "{global.dark.color.nonstatus.cyan.100}"
|
|
@@ -606,10 +626,12 @@
|
|
|
606
626
|
"value": "{global.dark.icon.color.300}"
|
|
607
627
|
},
|
|
608
628
|
"disabled": {
|
|
629
|
+
"description": "for use without disabled background color",
|
|
609
630
|
"type": "color",
|
|
610
631
|
"value": "{global.dark.color.disabled.200}"
|
|
611
632
|
},
|
|
612
633
|
"on-disabled": {
|
|
634
|
+
"description": "pair with disabled background color",
|
|
613
635
|
"type": "color",
|
|
614
636
|
"value": "{global.dark.color.disabled.300}"
|
|
615
637
|
},
|
|
@@ -694,7 +716,7 @@
|
|
|
694
716
|
"value": "{global.icon.color.inverse}"
|
|
695
717
|
}
|
|
696
718
|
},
|
|
697
|
-
"on-
|
|
719
|
+
"on-yellow": {
|
|
698
720
|
"default": {
|
|
699
721
|
"type": "color",
|
|
700
722
|
"value": "{global.icon.color.inverse}"
|
|
@@ -722,7 +744,7 @@
|
|
|
722
744
|
"value": "{global.icon.color.inverse}"
|
|
723
745
|
}
|
|
724
746
|
},
|
|
725
|
-
"on-
|
|
747
|
+
"on-teal": {
|
|
726
748
|
"default": {
|
|
727
749
|
"type": "color",
|
|
728
750
|
"value": "{global.icon.color.inverse}"
|
|
@@ -936,7 +958,7 @@
|
|
|
936
958
|
"value": "{global.dark.color.nonstatus.orange.200}"
|
|
937
959
|
}
|
|
938
960
|
},
|
|
939
|
-
"
|
|
961
|
+
"yellow": {
|
|
940
962
|
"default": {
|
|
941
963
|
"type": "color",
|
|
942
964
|
"value": "{global.dark.color.nonstatus.gold.100}"
|
|
@@ -964,7 +986,7 @@
|
|
|
964
986
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
965
987
|
}
|
|
966
988
|
},
|
|
967
|
-
"
|
|
989
|
+
"teal": {
|
|
968
990
|
"default": {
|
|
969
991
|
"type": "color",
|
|
970
992
|
"value": "{global.dark.color.nonstatus.cyan.100}"
|
|
@@ -1070,10 +1092,12 @@
|
|
|
1070
1092
|
"value": "{global.text.color.subtle}"
|
|
1071
1093
|
},
|
|
1072
1094
|
"disabled": {
|
|
1095
|
+
"description": "for use without disabled background color",
|
|
1073
1096
|
"type": "color",
|
|
1074
1097
|
"value": "{global.dark.color.disabled.200}"
|
|
1075
1098
|
},
|
|
1076
1099
|
"on-disabled": {
|
|
1100
|
+
"description": "pair with disabled background color",
|
|
1077
1101
|
"type": "color",
|
|
1078
1102
|
"value": "{global.dark.color.disabled.300}"
|
|
1079
1103
|
},
|
|
@@ -1314,7 +1338,7 @@
|
|
|
1314
1338
|
"value": "{global.text.color.inverse}"
|
|
1315
1339
|
}
|
|
1316
1340
|
},
|
|
1317
|
-
"on-
|
|
1341
|
+
"on-yellow": {
|
|
1318
1342
|
"default": {
|
|
1319
1343
|
"type": "color",
|
|
1320
1344
|
"value": "{global.text.color.inverse}"
|
|
@@ -1342,7 +1366,7 @@
|
|
|
1342
1366
|
"value": "{global.text.color.inverse}"
|
|
1343
1367
|
}
|
|
1344
1368
|
},
|
|
1345
|
-
"on-
|
|
1369
|
+
"on-teal": {
|
|
1346
1370
|
"default": {
|
|
1347
1371
|
"type": "color",
|
|
1348
1372
|
"value": "{global.text.color.inverse}"
|
|
@@ -106,6 +106,86 @@
|
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
108
|
"font": {
|
|
109
|
+
"family": {
|
|
110
|
+
"100": {
|
|
111
|
+
"type": "string",
|
|
112
|
+
"value": "Red Hat Text VF"
|
|
113
|
+
},
|
|
114
|
+
"200": {
|
|
115
|
+
"type": "string",
|
|
116
|
+
"value": "Red Hat Display VF"
|
|
117
|
+
},
|
|
118
|
+
"300": {
|
|
119
|
+
"type": "string",
|
|
120
|
+
"value": "Red Hat Mono VF"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"weight": {
|
|
124
|
+
"body": {
|
|
125
|
+
"100": {
|
|
126
|
+
"type": "number",
|
|
127
|
+
"value": 400
|
|
128
|
+
},
|
|
129
|
+
"200": {
|
|
130
|
+
"type": "number",
|
|
131
|
+
"value": 500
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
"heading": {
|
|
135
|
+
"100": {
|
|
136
|
+
"type": "number",
|
|
137
|
+
"value": 700
|
|
138
|
+
},
|
|
139
|
+
"200": {
|
|
140
|
+
"type": "number",
|
|
141
|
+
"value": 700
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"line-height": {
|
|
146
|
+
"100": {
|
|
147
|
+
"type": "number",
|
|
148
|
+
"value": 1.2999999523162842
|
|
149
|
+
},
|
|
150
|
+
"200": {
|
|
151
|
+
"type": "number",
|
|
152
|
+
"value": 1.5
|
|
153
|
+
},
|
|
154
|
+
"figma-only": {
|
|
155
|
+
"100": {
|
|
156
|
+
"type": "number",
|
|
157
|
+
"value": 18
|
|
158
|
+
},
|
|
159
|
+
"200": {
|
|
160
|
+
"type": "number",
|
|
161
|
+
"value": 21
|
|
162
|
+
},
|
|
163
|
+
"300": {
|
|
164
|
+
"type": "number",
|
|
165
|
+
"value": 24
|
|
166
|
+
},
|
|
167
|
+
"400": {
|
|
168
|
+
"type": "number",
|
|
169
|
+
"value": 23.399999618530273
|
|
170
|
+
},
|
|
171
|
+
"500": {
|
|
172
|
+
"type": "number",
|
|
173
|
+
"value": 26
|
|
174
|
+
},
|
|
175
|
+
"600": {
|
|
176
|
+
"type": "number",
|
|
177
|
+
"value": 28.600000381469727
|
|
178
|
+
},
|
|
179
|
+
"700": {
|
|
180
|
+
"type": "number",
|
|
181
|
+
"value": 36.400001525878906
|
|
182
|
+
},
|
|
183
|
+
"800": {
|
|
184
|
+
"type": "number",
|
|
185
|
+
"value": 46.79999923706055
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
},
|
|
109
189
|
"size": {
|
|
110
190
|
"100": {
|
|
111
191
|
"type": "number",
|