@patternfly/design-tokens 1.2.1 → 1.4.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 (18) hide show
  1. package/build/css/{_tokens-charts-dark.scss → tokens-charts-dark.scss} +2 -2
  2. package/build/css/{_tokens-charts.scss → tokens-charts.scss} +2 -2
  3. package/build/css/{_tokens-dark.scss → tokens-dark.scss} +2 -2
  4. package/build/css/{_tokens-default.scss → tokens-default.scss} +2 -2
  5. package/build/css/{_tokens-palette.scss → tokens-palette.scss} +2 -2
  6. package/build-js-for-docs.js +10 -7
  7. package/build.js +68 -63
  8. package/cli.js +10 -0
  9. package/{config.chart.dark.json → config.charts.dark.json} +1 -1
  10. package/{config.chart.json → config.charts.json} +1 -1
  11. package/config.dark.json +1 -1
  12. package/config.default.json +1 -1
  13. package/config.palette-colors.json +1 -1
  14. package/package.json +4 -3
  15. package/patternfly-docs/scssAsJson.json +1 -1
  16. package/tokens/AsExported.text +0 -3388
  17. /package/tokens/dark/{chart.dark.json → charts.dark.json} +0 -0
  18. /package/tokens/default/{chart.json → charts.json} +0 -0
package/build/css/{_tokens-charts-dark.scss → tokens-charts-dark.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:06 GMT
3
+ // Generated on Tue, 07 May 2024 17:05:31 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
7
7
  --pf-t--chart--global--layout--height: 300;
8
8
  --pf-t--chart--global--layout--padding: 50;
package/build/css/{_tokens-charts.scss → tokens-charts.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 17:05:31 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
7
7
  --pf-t--chart--global--layout--height: 300;
8
8
  --pf-t--chart--global--layout--padding: 50;
package/build/css/{_tokens-dark.scss → tokens-dark.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 17:05:31 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
7
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
8
8
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
package/build/css/{_tokens-default.scss → tokens-default.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 17:05:31 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
package/build/css/{_tokens-palette.scss → tokens-palette.scss} RENAMED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 25 Apr 2024 15:11:05 GMT
3
+ // Generated on Tue, 07 May 2024 17:05:31 GMT
4
4
 
5
- :root {
5
+ @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
7
7
  --pf-t--color--red--60: #a60000;
8
8
  --pf-t--color--red--50: #ee0000;
package/build-js-for-docs.js CHANGED
@@ -2,12 +2,14 @@ const fs = require('fs');
2
2
  const fse = require('fs-extra');
3
3
  const path = require('path');
4
4
 
5
- const charts_scss = path.join(__dirname, 'build/css/_tokens-charts.scss');
6
- const dark_scss = path.join(__dirname, 'build/css/_tokens-dark.scss');
7
- const default_scss = path.join(__dirname, 'build/css/_tokens-default.scss');
8
- const palette_scss = path.join(__dirname, 'build/css/_tokens-palette.scss');
9
-
10
- const chartFileContents = fs.readFileSync(charts_scss, 'utf-8');
5
+ const charts_scss = path.join(__dirname, 'build/css/tokens-charts.scss');
6
+ const charts_dark_scss = path.join(__dirname, 'build/css/tokens-charts-dark.scss');
7
+ const dark_scss = path.join(__dirname, 'build/css/tokens-dark.scss');
8
+ const default_scss = path.join(__dirname, 'build/css/tokens-default.scss');
9
+ const palette_scss = path.join(__dirname, 'build/css/tokens-palette.scss');
10
+
11
+ const chartsFileContents = fs.readFileSync(charts_scss, 'utf-8');
12
+ const chartsDarkFileContents = fs.readFileSync(charts_dark_scss, 'utf-8');
11
13
  const darkFileContents = fs.readFileSync(dark_scss, 'utf-8');
12
14
  const defaultFileContents = fs.readFileSync(default_scss, 'utf-8');
13
15
  const paletteFileContents = fs.readFileSync(palette_scss, 'utf-8');
@@ -32,7 +34,8 @@ const addToMap = (line) => {
32
34
  paletteFileContents.split(/\r?\n/).forEach(line => addToMap(line));
33
35
  defaultFileContents.split(/\r?\n/).forEach(line => addToMap(line));
34
36
  darkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
35
- chartFileContents.split(/\r?\n/).forEach(line => addToMap(line));
37
+ chartsFileContents.split(/\r?\n/).forEach(line => addToMap(line));
38
+ chartsDarkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
36
39
 
37
40
  fse.writeJson(path.join(__dirname, 'patternfly-docs/scssAsJson.json'), scssAsJson);
38
41
 
package/build.js CHANGED
@@ -1,73 +1,78 @@
1
1
  /* eslint-disable no-console */
2
2
  const StyleDictionary = require('style-dictionary');
3
- const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
4
3
 
5
- console.log('Build started...');
6
- console.log('\n============================');
4
+ const build = (selector) => {
5
+ const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
7
6
 
8
- //Register comment format
9
- StyleDictionary.registerFormat({
10
- name: 'customFormat',
11
- formatter: function ({ dictionary, file, options }) {
12
- const { outputReferences } = options;
13
- return (
14
- fileHeader({ file, commentStyle: 'short' }) +
15
- ':root {\n' +
16
- formattedVariables({ format: 'css', dictionary, outputReferences }) +
17
- '\n}\n'
18
- );
19
- }
20
- });
7
+ console.log('Build started...');
8
+ console.log('\n============================');
21
9
 
22
- // Register custom transforms
23
- StyleDictionary.registerTransform({
24
- name: 'patternfly/global/px',
25
- type: 'value',
26
- matcher: (token) =>
27
- token.attributes.type === 'spacer' ||
28
- token.attributes.type === 'border' ||
29
- token.attributes.type === 'icon' ||
30
- (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
31
- token.attributes.type === 'font',
32
- transformer: (token) => `${token.value}px`
33
- });
10
+ //Register comment format
11
+ StyleDictionary.registerFormat({
12
+ name: 'customFormat',
13
+ formatter: function ({ dictionary, file, options }) {
14
+ const { outputReferences } = options;
15
+ return (
16
+ fileHeader({ file, commentStyle: 'short' }) +
17
+ `${selector} {\n` +
18
+ formattedVariables({ format: 'css', dictionary, outputReferences }) +
19
+ '\n}\n'
20
+ );
21
+ }
22
+ });
34
23
 
35
- StyleDictionary.registerTransform({
36
- name: 'patternfly/doublekebab',
37
- type: 'name',
38
- transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
39
- });
24
+ // Register custom transforms
25
+ StyleDictionary.registerTransform({
26
+ name: 'patternfly/global/px',
27
+ type: 'value',
28
+ matcher: (token) =>
29
+ token.attributes.type === 'spacer' ||
30
+ token.attributes.type === 'border' ||
31
+ token.attributes.type === 'icon' ||
32
+ (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
33
+ token.attributes.type === 'font',
34
+ transformer: (token) => `${token.value}px`
35
+ });
40
36
 
41
- // Reigster custom transform group
42
- StyleDictionary.registerTransformGroup({
43
- name: 'patternfly/css',
44
- transforms: [
45
- // "css" group transforms
46
- 'attribute/cti',
47
- // 'name/cti/kebab' -- replaced with "patternfly/doublekebab"
48
- 'time/seconds',
49
- 'content/icon',
50
- 'size/rem',
51
- 'color/css',
52
- // custom transforms
53
- 'patternfly/global/px',
54
- 'patternfly/doublekebab'
55
- ]
56
- });
37
+ StyleDictionary.registerTransform({
38
+ name: 'patternfly/doublekebab',
39
+ type: 'name',
40
+ transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
41
+ });
57
42
 
58
- // Apply configuration
59
- const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
60
- const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
61
- const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
62
- const chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');
63
- const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.dark.json');
43
+ // Reigster custom transform group
44
+ StyleDictionary.registerTransformGroup({
45
+ name: 'patternfly/css',
46
+ transforms: [
47
+ // "css" group transforms
48
+ 'attribute/cti',
49
+ // 'name/cti/kebab' -- replaced with "patternfly/doublekebab"
50
+ 'time/seconds',
51
+ 'content/icon',
52
+ 'size/rem',
53
+ 'color/css',
54
+ // custom transforms
55
+ 'patternfly/global/px',
56
+ 'patternfly/doublekebab'
57
+ ]
58
+ });
64
59
 
65
- // Build all
66
- defaultExtendedSD.buildAllPlatforms();
67
- darkExtendedSD.buildAllPlatforms();
68
- paletteExtendedSD.buildAllPlatforms();
69
- chartExtendedSD.buildAllPlatforms();
70
- chartDarkExtendedSD.buildAllPlatforms();
60
+ // Apply configuration
61
+ const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
62
+ const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
63
+ const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
64
+ const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
65
+ const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
71
66
 
72
- console.log('\n============================');
73
- console.log('\nBuild completed.');
67
+ // Build all
68
+ defaultExtendedSD.buildAllPlatforms();
69
+ darkExtendedSD.buildAllPlatforms();
70
+ paletteExtendedSD.buildAllPlatforms();
71
+ chartsExtendedSD.buildAllPlatforms();
72
+ chartsDarkExtendedSD.buildAllPlatforms();
73
+
74
+ console.log('\n============================');
75
+ console.log('\nBuild completed.');
76
+ };
77
+
78
+ module.exports = { build };
package/cli.js ADDED
@@ -0,0 +1,10 @@
1
+ const { program } = require('commander');
2
+ const {build} = require('./build');
3
+
4
+ program
5
+ .version(require('./package.json').version)
6
+ .description('Builds the PF design tokens using style dictionary')
7
+ .option('-s, --selector <selector>', 'CSS selector to use for the output', ':root')
8
+ .action((cliOptions) => build(cliOptions.selector));
9
+
10
+ program.parse(process.argv);
package/{config.chart.dark.json → config.charts.dark.json} RENAMED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-charts-dark.scss",
9
+ "destination": "tokens-charts-dark.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/{config.chart.json → config.charts.json} RENAMED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-charts.scss",
9
+ "destination": "tokens-charts.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.dark.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-dark.scss",
9
+ "destination": "tokens-dark.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.default.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-default.scss",
9
+ "destination": "tokens-default.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/config.palette-colors.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "buildPath": "build/css/",
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
- "destination": "_tokens-palette.scss",
9
+ "destination": "tokens-palette.scss",
10
10
  "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.2.1",
3
+ "version": "1.4.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
8
  "build": "yarn build:js-from-scss",
9
9
  "build:fed:packages": "node generate-fed-package-json.js",
10
- "build:scss": "node ./build.js",
10
+ "build:scss": "node ./cli.js",
11
11
  "build:js-from-scss": "node ./build-js-for-docs.js",
12
12
  "clean": "rimraf dist",
13
13
  "docs:develop": "pf-docs-framework start",
@@ -31,7 +31,8 @@
31
31
  "access": "public"
32
32
  },
33
33
  "dependencies": {
34
- "@patternfly/react-core": "^6.0.0-alpha.36"
34
+ "@patternfly/react-core": "^6.0.0-alpha.36",
35
+ "commander": "^12.0.0"
35
36
  },
36
37
  "peerDependencies": {
37
38
  "react": "^16.8 || ^17 || ^18",