@patternfly/design-tokens 1.2.1 → 1.3.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 (3) hide show
  1. package/build.js +68 -63
  2. package/cli.js +10 -0
  3. package/package.json +4 -3
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 chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');
65
+ const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.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
+ chartExtendedSD.buildAllPlatforms();
72
+ chartDarkExtendedSD.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/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.2.1",
3
+ "version": "1.3.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",