@patternfly/design-tokens 1.9.0 → 1.11.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.
Files changed (24) hide show
  1. package/build/css/tokens-charts-dark.scss +153 -153
  2. package/build/css/tokens-charts.scss +153 -153
  3. package/build/css/tokens-dark.scss +300 -300
  4. package/build/css/tokens-default.scss +565 -546
  5. package/build/css/tokens-palette.scss +65 -65
  6. package/build.js +4 -4
  7. package/package.json +13 -5
  8. package/patternfly-docs/scssAsJson.json +1 -1
  9. package/plugins/export-patternfly-tokens/manifest.json +3 -5
  10. package/plugins/export-patternfly-tokens/src/code.ts +106 -0
  11. package/plugins/export-patternfly-tokens/src/ui.css +97 -0
  12. package/plugins/export-patternfly-tokens/src/ui.html +1 -0
  13. package/plugins/export-patternfly-tokens/src/ui.tsx +150 -0
  14. package/plugins/export-patternfly-tokens/tsconfig.json +18 -0
  15. package/tokens/dark/base.dark.json +2 -2
  16. package/tokens/dark/semantic.dark.json +325 -64
  17. package/tokens/default/base.dimension.json +16 -54
  18. package/tokens/default/base.json +3 -3
  19. package/tokens/default/semantic.dimension.json +191 -83
  20. package/tokens/default/semantic.json +325 -64
  21. package/tokens/default/semantic.motion.json +26 -0
  22. package/webpack.config.js +55 -0
  23. package/plugins/export-patternfly-tokens/code.js +0 -101
  24. package/plugins/export-patternfly-tokens/export.html +0 -191
package/build/css/tokens-palette.scss CHANGED
@@ -1,74 +1,74 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 29 May 2024 15:57:12 GMT
3
+ // Generated on Fri, 21 Jun 2024 21:25:19 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
- --pf-t--color--red--70: #5f0000;
7
- --pf-t--color--red--60: #a60000;
8
- --pf-t--color--red--50: #ee0000;
9
- --pf-t--color--red--40: #f56e6e;
10
- --pf-t--color--red--30: #f9a8a8;
11
- --pf-t--color--red--20: #fbc5c5;
12
- --pf-t--color--red--10: #fce3e3;
13
- --pf-t--color--purple--70: #21134d;
14
- --pf-t--color--purple--60: #3d2785;
15
- --pf-t--color--purple--50: #5e40be;
16
- --pf-t--color--purple--40: #876fd4;
17
- --pf-t--color--purple--30: #b6a6e9;
18
- --pf-t--color--purple--20: #d0c5f4;
6
+ --pf-t--color--black: #000000;
7
+ --pf-t--color--blue--10: #e0f0ff;
8
+ --pf-t--color--blue--20: #b9dafc;
9
+ --pf-t--color--blue--30: #92c5f9;
10
+ --pf-t--color--blue--40: #4394e5;
11
+ --pf-t--color--blue--50: #0066cc;
12
+ --pf-t--color--blue--60: #004d99;
13
+ --pf-t--color--blue--70: #003366;
14
+ --pf-t--color--gray--10: #f2f2f2;
15
+ --pf-t--color--gray--20: #e0e0e0;
16
+ --pf-t--color--gray--30: #c7c7c7;
17
+ --pf-t--color--gray--40: #a3a3a3;
18
+ --pf-t--color--gray--50: #707070;
19
+ --pf-t--color--gray--60: #4d4d4d;
20
+ --pf-t--color--gray--70: #383838;
21
+ --pf-t--color--gray--80: #292929;
22
+ --pf-t--color--gray--90: #1f1f1f;
23
+ --pf-t--color--gray--95: #151515;
24
+ --pf-t--color--green--10: #e9f7df;
25
+ --pf-t--color--green--20: #d1f1bb;
26
+ --pf-t--color--green--30: #afdc8f;
27
+ --pf-t--color--green--40: #87bb62;
28
+ --pf-t--color--green--50: #63993d;
29
+ --pf-t--color--green--60: #3d7317;
30
+ --pf-t--color--green--70: #204d00;
31
+ --pf-t--color--orange--10: #ffe8cc;
32
+ --pf-t--color--orange--20: #fccb8f;
33
+ --pf-t--color--orange--30: #f8ae54;
34
+ --pf-t--color--orange--40: #f5921b;
35
+ --pf-t--color--orange--50: #ca6c0f;
36
+ --pf-t--color--orange--60: #9e4a06;
37
+ --pf-t--color--orange--70: #732e00;
19
38
  --pf-t--color--purple--10: #ece6ff;
20
- --pf-t--color--red-orange--70: #731f00;
21
- --pf-t--color--red-orange--60: #b1380b;
22
- --pf-t--color--red-orange--50: #f0561d;
23
- --pf-t--color--red-orange--40: #f4784a;
24
- --pf-t--color--red-orange--30: #f89b78;
25
- --pf-t--color--red-orange--20: #fbbea8;
39
+ --pf-t--color--purple--20: #d0c5f4;
40
+ --pf-t--color--purple--30: #b6a6e9;
41
+ --pf-t--color--purple--40: #876fd4;
42
+ --pf-t--color--purple--50: #5e40be;
43
+ --pf-t--color--purple--60: #3d2785;
44
+ --pf-t--color--purple--70: #21134d;
45
+ --pf-t--color--red--10: #fce3e3;
46
+ --pf-t--color--red--20: #fbc5c5;
47
+ --pf-t--color--red--30: #f9a8a8;
48
+ --pf-t--color--red--40: #f56e6e;
49
+ --pf-t--color--red--50: #ee0000;
50
+ --pf-t--color--red--60: #a60000;
51
+ --pf-t--color--red--70: #5f0000;
26
52
  --pf-t--color--red-orange--10: #ffe3d9;
27
- --pf-t--color--orange--70: #732e00;
28
- --pf-t--color--orange--60: #9e4a06;
29
- --pf-t--color--orange--50: #ca6c0f;
30
- --pf-t--color--orange--40: #f5921b;
31
- --pf-t--color--orange--30: #f8ae54;
32
- --pf-t--color--orange--20: #fccb8f;
33
- --pf-t--color--orange--10: #ffe8cc;
34
- --pf-t--color--green--70: #204d00;
35
- --pf-t--color--green--60: #3d7317;
36
- --pf-t--color--green--50: #63993d;
37
- --pf-t--color--green--40: #87bb62;
38
- --pf-t--color--green--30: #afdc8f;
39
- --pf-t--color--green--20: #d1f1bb;
40
- --pf-t--color--green--10: #e9f7df;
41
- --pf-t--color--yellow--70: #73480b;
42
- --pf-t--color--yellow--60: #96640f;
43
- --pf-t--color--yellow--50: #b98412;
44
- --pf-t--color--yellow--40: #dca614;
45
- --pf-t--color--yellow--30: #ffcc17;
46
- --pf-t--color--yellow--20: #ffe072;
47
- --pf-t--color--yellow--10: #fff4cc;
48
- --pf-t--color--teal--70: #004d4d;
49
- --pf-t--color--teal--60: #147878;
50
- --pf-t--color--teal--50: #37a3a3;
51
- --pf-t--color--teal--40: #63bdbd;
52
- --pf-t--color--teal--30: #9ad8d8;
53
- --pf-t--color--teal--20: #b9e5e5;
53
+ --pf-t--color--red-orange--20: #fbbea8;
54
+ --pf-t--color--red-orange--30: #f89b78;
55
+ --pf-t--color--red-orange--40: #f4784a;
56
+ --pf-t--color--red-orange--50: #f0561d;
57
+ --pf-t--color--red-orange--60: #b1380b;
58
+ --pf-t--color--red-orange--70: #731f00;
54
59
  --pf-t--color--teal--10: #daf2f2;
55
- --pf-t--color--blue--70: #003366;
56
- --pf-t--color--blue--60: #004d99;
57
- --pf-t--color--blue--50: #0066cc;
58
- --pf-t--color--blue--40: #4394e5;
59
- --pf-t--color--blue--30: #92c5f9;
60
- --pf-t--color--blue--20: #b9dafc;
61
- --pf-t--color--blue--10: #e0f0ff;
62
- --pf-t--color--black: #000000;
63
- --pf-t--color--gray--95: #151515;
64
- --pf-t--color--gray--90: #1f1f1f;
65
- --pf-t--color--gray--80: #292929;
66
- --pf-t--color--gray--70: #383838;
67
- --pf-t--color--gray--60: #4d4d4d;
68
- --pf-t--color--gray--50: #707070;
69
- --pf-t--color--gray--40: #a3a3a3;
70
- --pf-t--color--gray--30: #c7c7c7;
71
- --pf-t--color--gray--20: #e0e0e0;
72
- --pf-t--color--gray--10: #f2f2f2;
60
+ --pf-t--color--teal--20: #b9e5e5;
61
+ --pf-t--color--teal--30: #9ad8d8;
62
+ --pf-t--color--teal--40: #63bdbd;
63
+ --pf-t--color--teal--50: #37a3a3;
64
+ --pf-t--color--teal--60: #147878;
65
+ --pf-t--color--teal--70: #004d4d;
73
66
  --pf-t--color--white: #ffffff;
67
+ --pf-t--color--yellow--10: #fff4cc;
68
+ --pf-t--color--yellow--20: #ffe072;
69
+ --pf-t--color--yellow--30: #ffcc17;
70
+ --pf-t--color--yellow--40: #dca614;
71
+ --pf-t--color--yellow--50: #b98412;
72
+ --pf-t--color--yellow--60: #96640f;
73
+ --pf-t--color--yellow--70: #73480b;
74
74
  }
package/build.js CHANGED
@@ -2,7 +2,7 @@
2
2
  const StyleDictionary = require('style-dictionary');
3
3
 
4
4
  const build = (selector) => {
5
- const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
5
+ const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
6
6
 
7
7
  console.log('Build started...');
8
8
  console.log('\n============================');
@@ -12,6 +12,8 @@ const build = (selector) => {
12
12
  name: 'customFormat',
13
13
  formatter: function ({ dictionary, file, options }) {
14
14
  const { outputReferences } = options;
15
+ const alphaSort = (a, b) => sortByName(a, b) * -1;
16
+ dictionary.allTokens = dictionary.allTokens.sort(alphaSort);
15
17
  return (
16
18
  fileHeader({ file, commentStyle: 'short' }) +
17
19
  `${selector} {\n` +
@@ -38,9 +40,7 @@ const build = (selector) => {
38
40
  StyleDictionary.registerTransform({
39
41
  name: 'patternfly/global/ms',
40
42
  type: 'value',
41
- matcher: (token) =>
42
- token.attributes.type === 'duration' ||
43
- token.attributes.type === 'delay',
43
+ matcher: (token) => token.attributes.type === 'duration' || token.attributes.type === 'delay',
44
44
  transformer: (token) => `${token.value}ms`
45
45
  });
46
46
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.9.0",
3
+ "version": "1.11.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",
@@ -9,6 +9,7 @@
9
9
  "build:fed:packages": "node generate-fed-package-json.js",
10
10
  "build:scss": "node ./cli.js",
11
11
  "build:js-from-scss": "node ./build-js-for-docs.js",
12
+ "build:plugin": "webpack",
12
13
  "clean": "rimraf dist",
13
14
  "docs:develop": "pf-docs-framework start",
14
15
  "docs:build": "yarn build:js-from-scss && pf-docs-framework build all --output public",
@@ -39,15 +40,22 @@
39
40
  "react-dom": "^18.0.0"
40
41
  },
41
42
  "devDependencies": {
43
+ "@figma/plugin-typings": "^1.95.0",
42
44
  "@patternfly/documentation-framework": "6.0.0-alpha.12",
43
45
  "@patternfly/patternfly": "6.0.0-alpha.91",
46
+ "@patternfly/patternfly-a11y": "^4.3.1",
44
47
  "@patternfly/react-code-editor": "6.0.0-alpha.36",
45
48
  "@patternfly/react-table": "6.0.0-alpha.36",
46
- "rimraf": "^2.6.2",
47
- "@patternfly/patternfly-a11y": "^4.3.1",
49
+ "css-loader": "^7.1.2",
50
+ "html-inline-script-webpack-plugin": "^3.2.1",
51
+ "html-webpack-plugin": "^5.6.0",
52
+ "jszip": "^3.10.1",
48
53
  "react-monaco-editor": "^0.51.0",
54
+ "rimraf": "^2.6.2",
49
55
  "style-dictionary": "^3.8.0",
50
- "glob": "^7.1.2",
51
- "fs-extra": "^11.2.0"
56
+ "style-loader": "^4.0.0",
57
+ "ts-loader": "^9.5.1",
58
+ "webpack": "^5.91.0",
59
+ "webpack-cli": "^5.1.4"
52
60
  }
53
61
  }