@kiva/kv-tokens 2.14.0 → 2.16.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.15.0...@kiva/kv-tokens@2.16.0) (2024-11-20)
+
+
+### Features
+
+* **kv-tokens:** generate scss variables from primitives.json during build ([1567bbf](https://github.com/kiva/kv-ui-elements/commit/1567bbfe3411f003963b439e63628326822e57ac))
+
+
+
+
+
+# [2.15.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.14.0...@kiva/kv-tokens@2.15.0) (2024-11-18)
+
+
+### Features
+
+* serve static assets from kvui directory MP-544 ([840f6de](https://github.com/kiva/kv-ui-elements/commit/840f6de89f213143218d28e82a7ef0be1de319b6))
+
+
+
+
+
 # [2.14.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.13.0...@kiva/kv-tokens@2.14.0) (2024-11-15)
 
 

package/build/build.cjs

@@ -1,8 +1,10 @@
 const fs = require('node:fs');
+const primitives = require('../primitives.json');
 const { generateExternalSVG } = require('../configs/kivaHeadingUnderline.cjs');
+const { flattenJSON } = require('../configs/util.cjs');
 
 // Note: dir is relative to the root of the kv-tokens package
-const dir = '../../dist/assets';
+const dir = '../../dist/kvui';
 
 // Create dist folder
 if (!fs.existsSync(dir)) {
@@ -12,3 +14,12 @@ if (!fs.existsSync(dir)) {
 // Generate Heading Underline SVG
 const svg = generateExternalSVG();
 fs.writeFileSync(`${dir}/heading-underline.svg`, svg);
+
+// Generate SCSS variables
+const today = new Date().toUTCString();
+const variables = flattenJSON(primitives);
+const scss = Object.keys(variables)
+	.map((key) => `$${key.toLowerCase().replace('.', '-')}: ${variables[key]};`)
+	.join('\n');
+const withComment = `// Do not edit directly.\n// Generated on ${today}. \n\n${scss}\n`;
+fs.writeFileSync(`${dir}/tw-exported-vars.scss`, withComment);

package/configs/kivaColors.cjs

@@ -33,7 +33,7 @@ const buildCSSVarsFromTokens = (theme) => {
 		properties.forEach((property) => {
 			const key = `--${twPrefix}-${property}`;
 			if (category === 'heading-underline') {
-				customProperties[key] = `url('/heading-underline.svg${theme[category][property]}')`;
+				customProperties[key] = `url('/kvui/heading-underline.svg${theme[category][property]}')`;
 			} else {
 				customProperties[key] = hexToRGB(theme[category][property]);
 			}

package/configs/kivaHeadingUnderline.cjs

@@ -10,7 +10,7 @@ const svgOpenTag = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 921 16"
  * achieved by creating one path for the brush stroke, and then using multiple <use> elements to
  * reference the path and fill it with the desired color (a sprite sheet technique from
  * https://css-tricks.com/svg-fragment-identifiers-work/). The SVG is then used as a background
- * image, and can be referenced by the color hex code, e.g. `url('/heading-underline.svg#2AA967')`.
+ * image, and can be referenced by the color hex code, e.g. `url('/kvui/heading-underline.svg#2AA967')`.
  * This allows us to use the same SVG for all themes, and change the color with CSS custom
  * properties, rather than having to generate a new SVG for each color.
  */

package/configs/util.cjs

@@ -20,9 +20,25 @@ const base64 = (str) => {
 	return window.btoa(str);
 };
 
+const flattenJSON = (obj, parentKey = '') => {
+	const flattened = {};
+
+	Object.keys(obj).forEach((key) => {
+		const newKey = parentKey ? `${parentKey}-${key}` : key;
+		if (typeof obj[key] === 'object') {
+			Object.assign(flattened, flattenJSON(obj[key], newKey));
+		} else {
+			flattened[newKey] = obj[key];
+		}
+	});
+
+	return flattened;
+};
+
 module.exports = {
 	rem,
 	em,
 	hexToRGB,
 	base64,
+	flattenJSON,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "2.14.0",
+    "version": "2.16.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -15,5 +15,5 @@
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.4.3"
     },
-    "gitHead": "081b5ca9ae74b85b3db13f40043252381f0ab822"
+    "gitHead": "08194e4f0e494513527cfe20faff626f4843fb98"
 }