refactor: changed tailwind tokens to work with dbux-3 (#164)

* refactor: changed tailwind tokens to work with dbux-3

Author: nmerget

scripts/tailwind-config-generator.mjs

@@ -20,16 +20,11 @@ const run = async () => {
   theme: {
 			screens: tokens.screens,
 			spacing: tokens.spacing,
-			fontFamily: tokens.font.family,
-			fontSize: tokens.fontSize,
-			colors: tokens.colors,
 			gap: ({ theme }) => ({
-				...theme('spacing'),
-				...tokens.gap
+				...theme('spacing')
 			}),
 			space: ({ theme }) => ({
-				...theme('spacing'),
-				...tokens.space
+				...theme('spacing')
 			})
   	}
   };

style-dictionary.js

@@ -11,12 +11,24 @@ const generateClasses = require('./scripts/scss-typography-generator');
 const generateScaling = require('./scripts/scss-scaling-generator');
 
 const modifyTailwind = (dictionary) => {
-	const colors = JSON.stringify(dictionary.colors).replace(
-		/enabled/g,
-		'DEFAULT'
-	);
-	dictionary.colors = JSON.parse(colors);
-	delete dictionary.typography;
+	for (const token of [
+		'colors',
+		'elevation',
+		'font',
+		'transition',
+		'sizing',
+		'typography'
+	]) {
+		if (dictionary[token]) {
+			delete dictionary[token];
+		}
+	}
+
+	for (const spacing of ['responsive', 'fixed']) {
+		if (dictionary.spacing?.[spacing]) {
+			delete dictionary.spacing[spacing];
+		}
+	}
 };
 
 StyleDictionary.registerFormat({

tokens/tailwind/font-size.json

@@ -1,16 +1,22 @@
 {
-	"gap": {
-		"xs": "8px",
-		"sm": "12px",
-		"md": "12px",
-		"lg": "20px",
-		"xl": "20px"
-	},
-	"space": {
-		"xs": "8px",
-		"sm": "12px",
-		"md": "12px",
-		"lg": "20px",
-		"xl": "20px"
+	"spacing": {
+		"fix-3xs": "var(--db-spacing-fixed-3xs)",
+		"fix-2xs": "var(--db-spacing-fixed-2xs)",
+		"fix-xs": "var(--db-spacing-fixed-xs)",
+		"fix-sm": "var(--db-spacing-fixed-sm)",
+		"fix-md": "var(--db-spacing-fixed-md)",
+		"fix-lg": "var(--db-spacing-fixed-lg)",
+		"fix-xl": "var(--db-spacing-fixed-xl)",
+
+		"res-xs": "var(--db-spacing-responsive-xs)",
+		"res-sm": "var(--db-spacing-responsive-sm)",
+		"res-md": "var(--db-spacing-responsive-md)",
+		"res-lg": "var(--db-spacing-responsive-lg)",
+		"res-xl": "var(--db-spacing-responsive-xl)",
+
+		"siz-xs": "var(--db-sizing-xs)",
+		"siz-sm": "var(--db-sizing-sm)",
+		"siz-md": "var(--db-sizing-md)",
+		"siz-lg": "var(---db-sizing-lg)"
 	}
 }