From 3b93bb4a9b5af38dffb8e8ece64f6ece0e78575b Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com> Date: Tue, 28 May 2024 15:57:30 +0100 Subject: [PATCH] feat(tokens): add html preview based on design-tokens (#29545) Issue number: internal --------- ## What is the new behavior? - Added new files to scripts/tokens for the html template and css to style the generated preview - Added Style Dictionary register for generating html elements for each main token ## Does this introduce a breaking change? - [ ] Yes - [x] No --- core/.stylelintrc.yml | 1 + core/package.json | 4 +- core/scripts/tokens/index.js | 143 ++ core/scripts/tokens/preview.styles.css | 63 + core/scripts/tokens/preview.template.html | 52 + core/src/foundations/tokens.preview.html | 1743 +++++++++++++++++++++ 6 files changed, 2004 insertions(+), 2 deletions(-) create mode 100644 core/scripts/tokens/preview.styles.css create mode 100644 core/scripts/tokens/preview.template.html create mode 100644 core/src/foundations/tokens.preview.html diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index 0e7a49eec6..184d0ee4fe 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -15,6 +15,7 @@ ignoreFiles: - src/themes/functions.string.scss - src/themes/native.theme.default.scss - src/css/themes/*.scss + - scripts/tokens/*.css indentation: 2 diff --git a/core/package.json b/core/package.json index 02ebdb39b3..f8b47d7d19 100644 --- a/core/package.json +++ b/core/package.json @@ -77,7 +77,7 @@ "build.css": "npm run css.sass && npm run css.minify", "build.debug": "npm run clean && stencil build --debug", "build.docs.json": "stencil build --docs-json dist/docs.json", - "build.tokens": "node ./scripts/tokens/index.js && npm run lint.sass.fix && npm run prettier.tokens", + "build.tokens": "node ./scripts/tokens/index.js && npm run lint.fix && npm run prettier.tokens", "clean": "node scripts/clean.js", "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css", "css.sass": "sass --embed-sources --style compressed src/css:./css", @@ -90,7 +90,7 @@ "lint.ts.fix": "npm run eslint -- --fix", "prerender.e2e": "node scripts/testing/prerender.js", "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"", - "prettier.tokens": "prettier \"./src/foundations/*.scss\" --write --cache", + "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache", "start": "npm run build.css && stencil build --dev --watch --serve", "test": "npm run test.spec && npm run test.e2e", "test.spec": "stencil test --spec --max-workers=2", diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js index f500d127a4..09c5647227 100644 --- a/core/scripts/tokens/index.js +++ b/core/scripts/tokens/index.js @@ -5,6 +5,8 @@ // - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time. // - It can easily scale to different necessities we might have in the future. +const fs = require('fs'); +const path = require('path'); const StyleDictionary = require('style-dictionary'); const targetPath = './src/foundations/'; @@ -138,6 +140,137 @@ StyleDictionary.registerFormat({ }, }); +// Register the custom format to generate HTML +// Load the HTML template +const template = fs.readFileSync(path.join(__dirname, 'preview.template.html'), 'utf8'); + +StyleDictionary.registerFormat({ + name: 'html/tokens', + formatter: function ({ dictionary }) { + // Function to extract numerical value from token name + const extractValue = (tokenName) => { + const match = tokenName.match(/-([0-9]+)/); + return match ? parseInt(match[1], 10) : Number.MAX_SAFE_INTEGER; + }; + + let colorTokens = ` + + + + + + + + + + `; + let fontSizeTokens = ''; + let boxShadowTokens = ''; + let borderSizeTokens = ''; + let borderRadiusTokens = ''; + let borderStyleTokens = ''; + let fontWeightTokens = ''; + let letterSpacingTokens = ''; + let spaceTokens = ''; + + // Collect border-radius and space tokens for separate sorting + let borderRadiusTokenList = []; + let spaceTokenList = []; + + dictionary.allProperties.forEach((token) => { + if (token.attributes.category === 'color') { + colorTokens += ` + + + + + + `; + } else if (token.attributes.category === 'font-size') { + fontSizeTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category.startsWith('Elevation')) { + const cssShadow = token.value.map(generateShadowValue).join(', '); + boxShadowTokens += ` +
+ ${token.name} +
+ `; + } else if (token.attributes.category === 'border-size' || token.attributes.category === 'border-width') { + borderSizeTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'border-radius') { + borderRadiusTokenList.push(token); // Collect border-radius tokens + } else if (token.attributes.category === 'border-style') { + borderStyleTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'font-weight') { + fontWeightTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'letter-spacing') { + // Convert % to px + const letterSpacingValue = token.value.replace('%', '') + 'px'; + letterSpacingTokens += ` +
+ ${token.name} (${letterSpacingValue}) +
+ `; + } else if (token.attributes.category === 'space') { + spaceTokenList.push(token); // Collect space tokens + } + }); + + // Sort border-radius and space tokens + borderRadiusTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name)); + spaceTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name)); + + // Generate HTML for sorted border-radius tokens + borderRadiusTokenList.forEach((token) => { + borderRadiusTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + }); + + // Generate HTML for sorted space tokens + spaceTokenList.forEach((token) => { + spaceTokens += ` +
+
+ ${token.name} (${token.value}) +
+
+ `; + }); + + colorTokens += '
ColorHexToken Name
${token.value}${token.name}
'; + + return template + .replace('{{colorTokens}}', colorTokens) + .replace('{{fontSizeTokens}}', fontSizeTokens) + .replace('{{boxShadowTokens}}', boxShadowTokens) + .replace('{{borderSizeTokens}}', borderSizeTokens) + .replace('{{borderRadiusTokens}}', borderRadiusTokens) + .replace('{{borderStyleTokens}}', borderStyleTokens) + .replace('{{fontWeightTokens}}', fontWeightTokens) + .replace('{{letterSpacingTokens}}', letterSpacingTokens) + .replace('{{spaceTokens}}', spaceTokens); + }, +}); + // Custom transform to ensure unique token names StyleDictionary.registerTransform({ name: 'name/cti/kebab-unique', @@ -210,6 +343,16 @@ StyleDictionary.extend({ }, ], }, + html: { + transformGroup: 'custom', + buildPath: targetPath, + files: [ + { + destination: 'tokens.preview.html', + format: 'html/tokens', + }, + ], + }, }, fileHeader: { myFileHeader: () => { diff --git a/core/scripts/tokens/preview.styles.css b/core/scripts/tokens/preview.styles.css new file mode 100644 index 0000000000..56349b7fb7 --- /dev/null +++ b/core/scripts/tokens/preview.styles.css @@ -0,0 +1,63 @@ +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; +} + +th, +td { + padding: 10px; + border: 1px solid #ccc; + text-align: left; +} + +th { + background-color: #f4f4f4; +} + +thead th { + position: sticky; + top: 0; + background-color: #f4f4f4; + z-index: 1; +} + +.color-swatch { + width: 50px; + height: 50px; +} + +.font-size-token, +.weight-token, +.letter-spacing-token { + margin: 10px 0; +} + +.border-token, +.shadow-token { + margin: 10px; + padding: 10px; +} + +.border-token { + border: 1px solid #000; +} + +.spacing-wrapper { + background-color: lightblue; +} + +.spacing-wrapper > div { + background-color: #fff; +} + +.token-wrapper:has(.spacing-wrapper) { + display: flex; + flex-direction: column; + gap: 20px; +} + +hr { + background-color: #ccc; + margin: 20px 0; +} diff --git a/core/scripts/tokens/preview.template.html b/core/scripts/tokens/preview.template.html new file mode 100644 index 0000000000..462b49fa39 --- /dev/null +++ b/core/scripts/tokens/preview.template.html @@ -0,0 +1,52 @@ + + + + + + Design Tokens + + + + + + + + + + Design Tokens - Preview + + + +

Color Tokens

+
{{colorTokens}}
+
+

Font Size Tokens

+
{{fontSizeTokens}}
+
+

Font Weight Tokens

+
{{fontWeightTokens}}
+
+

Letter Spacing Tokens

+
{{letterSpacingTokens}}
+
+

Box Shadow Tokens

+
{{boxShadowTokens}}
+
+

Border Size Tokens

+
{{borderSizeTokens}}
+
+

Border Radius Tokens

+
{{borderRadiusTokens}}
+
+

Border Style Tokens

+
{{borderStyleTokens}}
+
+

Space Tokens

+
{{spaceTokens}}
+ + + + diff --git a/core/src/foundations/tokens.preview.html b/core/src/foundations/tokens.preview.html new file mode 100644 index 0000000000..be20ee99c0 --- /dev/null +++ b/core/src/foundations/tokens.preview.html @@ -0,0 +1,1743 @@ + + + + + + Design Tokens + + + + + + + + + + Design Tokens - Preview + + + +

Color Tokens

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ColorHexToken Name
#ffffff-color-base-white
#111111-color-base-black
#f1f1f1-color-neutral-100
#e7e7e7-color-neutral-200
#cfcfcf-color-neutral-300
#b9b9b9-color-neutral-400
#a2a2a2-color-neutral-500
#8c8c8c-color-neutral-600
#777777-color-neutral-700
#626262-color-neutral-800
#4e4e4e-color-neutral-900
#3b3b3b-color-neutral-1000
#292929-color-neutral-1100
#242424-color-neutral-1200
#feeded-color-red-100
#fde1e1-color-red-200
#fcc1c1-color-red-300
#faa1a1-color-red-400
#f97d7d-color-red-500
#f85151-color-red-600
#e52929-color-red-700
#bf2222-color-red-800
#991b1b-color-red-900
#761515-color-red-1000
#540f0f-color-red-1100
#330909-color-red-1200
#feedea-color-pumpkin-100
#fde0db-color-pumpkin-200
#fbbdb1-color-pumpkin-300
#f9947c-color-pumpkin-400
#f75d07-color-pumpkin-500
#da5206-color-pumpkin-600
#bd4705-color-pumpkin-700
#9f3c05-color-pumpkin-800
#803004-color-pumpkin-900
#602403-color-pumpkin-1000
#401802-color-pumpkin-1100
#210c01-color-pumpkin-1200
#fff1ea-color-orange-100
#ffe8db-color-orange-200
#ffcfb1-color-orange-300
#ffb37b-color-orange-400
#ff9400-color-orange-500
#e18300-color-orange-600
#c37100-color-orange-700
#a45f00-color-orange-800
#844d00-color-orange-900
#633a00-color-orange-1000
#422700-color-orange-1100
#221400-color-orange-1200
#fff9ea-color-yellow-100
#fff5db-color-yellow-200
#ffebb1-color-yellow-300
#ffe07b-color-yellow-400
#ffd600-color-yellow-500
#e1bd00-color-yellow-600
#c3a400-color-yellow-700
#a48a00-color-yellow-800
#846f00-color-yellow-900
#635300-color-yellow-1000
#423800-color-yellow-1100
#221d00-color-yellow-1200
#f3faea-color-lime-100
#eaf7db-color-lime-200
#d3efb2-color-lime-300
#bbe77d-color-lime-400
#a0df18-color-lime-500
#8dc515-color-lime-600
#7aab12-color-lime-700
#678f0f-color-lime-800
#53730c-color-lime-900
#3e5709-color-lime-1000
#2a3a06-color-lime-1100
#151e03-color-lime-1200
#ebf9ec-color-green-100
#dcf5de-color-green-200
#b3ebb7-color-green-300
#7fe089-color-green-400
#23d643-color-green-500
#1fbd3b-color-green-600
#1ba433-color-green-700
#178a2b-color-green-800
#126f23-color-green-900
#0e531a-color-green-1000
#093811-color-green-1100
#051d09-color-green-1200
#eaf8f5-color-teal-100
#dbf3ee-color-teal-200
#b1e7dd-color-teal-300
#7bdbca-color-teal-400
#00cfb7-color-teal-500
#00b7a2-color-teal-600
#009e8c-color-teal-700
#008576-color-teal-800
#006b5f-color-teal-900
#005147-color-teal-1000
#003630-color-teal-1100
#001c19-color-teal-1200
#ebf9fe-color-aqua-100
#dcf4fd-color-aqua-200
#b3e9fc-color-aqua-300
#80defa-color-aqua-400
#27d3f9-color-aqua-500
#22bbdc-color-aqua-600
#1ea2bf-color-aqua-700
#1988a0-color-aqua-800
#146d81-color-aqua-900
#0f5261-color-aqua-1000
#0a3741-color-aqua-1100
#051c21-color-aqua-1200
#f2f4fd-color-blue-100
#e9ecfc-color-blue-200
#d0d7fa-color-blue-300
#b5c0f7-color-blue-400
#94a5f4-color-blue-500
#6986f2-color-blue-600
#105cef-color-blue-700
#0f54da-color-blue-800
#0d4bc3-color-blue-900
#0b41a9-color-blue-1000
#09358a-color-blue-1100
#072561-color-blue-1200
#f3f2fb-color-indigo-100
#eae9f9-color-indigo-200
#d3d1f2-color-indigo-300
#bab5eb-color-indigo-400
#9d95e4-color-indigo-500
#786bdd-color-indigo-600
#411bd5-color-indigo-700
#3b19c3-color-indigo-800
#3516ae-color-indigo-900
#2e1397-color-indigo-1000
#26107b-color-indigo-1100
#1a0b57-color-indigo-1200
#f5f2fe-color-violet-100
#eee9fd-color-violet-200
#dcd1fb-color-violet-300
#c9b6f9-color-violet-400
#b396f6-color-violet-500
#9a6cf4-color-violet-600
#7c20f2-color-violet-700
#711ddd-color-violet-800
#651ac5-color-violet-900
#5817ab-color-violet-1000
#48128c-color-violet-1100
#330d63-color-violet-1200
#f9f3fe-color-purple-100
#f5eafd-color-purple-200
#e9d3fa-color-purple-300
#deb9f8-color-purple-400
#d29bf6-color-purple-500
#c575f3-color-purple-600
#b73cf1-color-purple-700
#a737dc-color-purple-800
#9531c5-color-purple-900
#812aaa-color-purple-1000
#6a238b-color-purple-1100
#4b1862-color-purple-1200
#fdf3fb-color-magenta-100
#fcebf8-color-magenta-200
#f9d4f1-color-magenta-300
#f6bcea-color-magenta-400
#f39fe3-color-magenta-500
#f07cdb-color-magenta-600
#ed4ad3-color-magenta-700
#d844c1-color-magenta-800
#c13cac-color-magenta-900
#a83495-color-magenta-1000
#892b7a-color-magenta-1100
#611e56-color-magenta-1200
#fef3f5-color-pink-100
#fdeaee-color-pink-200
#fad3dc-color-pink-300
#f8b9c9-color-pink-400
#f69bb3-color-pink-500
#f3759a-color-pink-600
#f13b7d-color-pink-700
#dc3672-color-pink-800
#c53066-color-pink-900
#aa2a58-color-pink-1000
#8b2248-color-pink-1100
#621833-color-pink-1200
#f2f4fd-color-primary-100
#e9ecfc-color-primary-200
#d0d7fa-color-primary-300
#b5c0f7-color-primary-400
#94a5f4-color-primary-500
#6986f2-color-primary-600
#105cef-color-primary-700
#0f54da-color-primary-800
#0d4bc3-color-primary-900
#0b41a9-color-primary-1000
#09358a-color-primary-1100
#072561-color-primary-1200
#105cef-color-primary-base
#ebf9fe-color-info-100
#dcf4fd-color-info-200
#b3e9fc-color-info-300
#80defa-color-info-400
#27d3f9-color-info-500
#22bbdc-color-info-600
#1ea2bf-color-info-700
#1988a0-color-info-800
#146d81-color-info-900
#0f5261-color-info-1000
#0a3741-color-info-1100
#051c21-color-info-1200
#1ea2bf-color-info-base
#fff1ea-color-warning-100
#ffe8db-color-warning-200
#ffcfb1-color-warning-300
#ffb37b-color-warning-400
#ff9400-color-warning-500
#e18300-color-warning-600
#c37100-color-warning-700
#a45f00-color-warning-800
#844d00-color-warning-900
#633a00-color-warning-1000
#422700-color-warning-1100
#221400-color-warning-1200
#c37100-color-warning-base
#feeded-color-danger-100
#fde1e1-color-danger-200
#fcc1c1-color-danger-300
#faa1a1-color-danger-400
#f97d7d-color-danger-500
#f85151-color-danger-600
#e52929-color-danger-700
#bf2222-color-danger-800
#991b1b-color-danger-900
#761515-color-danger-1000
#540f0f-color-danger-1100
#330909-color-danger-1200
#e52929-color-danger-base
#ebf9ec-color-success-100
#dcf5de-color-success-200
#b3ebb7-color-success-300
#7fe089-color-success-400
#23d643-color-success-500
#1fbd3b-color-success-600
#1ba433-color-success-700
#178a2b-color-success-800
#126f23-color-success-900
#0e531a-color-success-1000
#093811-color-success-1100
#051d09-color-success-1200
#1ba433-color-success-base
+
+
+

Font Size Tokens

+
+
-font-size-275 (11px)
+ +
-font-size-300 (12px)
+ +
-font-size-350 (14px)
+ +
-font-size-400 (16px)
+ +
-font-size-450 (18px)
+ +
-font-size-500 (20px)
+ +
-font-size-550 (22px)
+ +
-font-size-600 (24px)
+ +
-font-size-650 (26px)
+ +
-font-size-700 (28px)
+ +
-font-size-800 (32px)
+ +
-font-size-900 (36px)
+
+
+

Font Weight Tokens

+
+
-font-weight-thin (100)
+ +
-font-weight-extra-light (200)
+ +
-font-weight-light (300)
+ +
-font-weight-regular (400)
+ +
-font-weight-medium (500)
+ +
-font-weight-semi-bold (600)
+ +
-font-weight-bold (700)
+ +
-font-weight-extra-bold (800)
+ +
-font-weight-black (900)
+
+
+

Letter Spacing Tokens

+
+
-letter-spacing-0 (0px)
+ +
-letter-spacing-1 (1px)
+ +
-letter-spacing-2 (1.5px)
+
+
+

Box Shadow Tokens

+
+
+ -elevation-100 +
+ +
+ -elevation-200 +
+ +
+ -elevation-300 +
+ +
+ -elevation-400 +
+ +
+ -elevation-500 +
+ +
+ -elevation-600 +
+ +
+ -elevation-700 +
+ +
+ -elevation-800 +
+
+
+

Border Size Tokens

+
+
-border-size-0 (0px)
+ +
-border-size-025 (1px)
+ +
-border-size-050 (2px)
+ +
-border-size-075 (3px)
+
+
+

Border Radius Tokens

+
+
-border-radius-0 (0px)
+ +
-border-radius-050 (2px)
+ +
-border-radius-100 (4px)
+ +
-border-radius-200 (8px)
+ +
-border-radius-300 (12px)
+ +
-border-radius-400 (16px)
+ +
-border-radius-800 (32px)
+ +
-border-radius-1000 (40px)
+ +
-border-radius-full (999px)
+
+
+

Border Style Tokens

+
+
-border-style-none (none)
+ +
-border-style-solid (solid)
+ +
-border-style-dashed (dashed)
+ +
-border-style-dotted (dotted)
+
+
+

Space Tokens

+
+
+
-space-0 (0px)
+
+ +
+
-space-050 (2px)
+
+ +
+
-space-100 (4px)
+
+ +
+
-space-150 (6px)
+
+ +
+
-space-200 (8px)
+
+ +
+
-space-250 (10px)
+
+ +
+
-space-300 (12px)
+
+ +
+
-space-400 (16px)
+
+ +
+
-space-500 (20px)
+
+ +
+
-space-600 (24px)
+
+ +
+
-space-700 (28px)
+
+ +
+
-space-800 (32px)
+
+ +
+
-space-900 (36px)
+
+ +
+
-space-1000 (40px)
+
+ +
+
-space-1200 (48px)
+
+
+ + + +