.

wip-refactor/tailwind.config.js

@@ -0,0 +1,101 @@
+let colors = {
+    "base": "var(--color-base)",
+    "surface-0": "var(--color-surface-0)",
+    "surface-1": "var(--color-surface-1)",
+    "surface-2": "var(--color-surface-2)",
+    "text": "var(--color-text)",
+    "accent": "var(--color-accent)",
+    "accent-over": "var(--color-accent-hover)",
+    "border": "var(--color-border)",
+    "rosewater": "var(--color-rosewater)",
+    "mauve": "var(--color-mauve)",
+    "flamingo": "var(--color-flamingo)",
+    "pink": "var(--color-pink)",
+    "red": "var(--color-red)",
+    "maroon": "var(--color-maroon)",
+    "yellow": "var(--color-yellow)",
+    "teal": "var(--color-teal)",
+    "sky": "var(--color-sky)",
+    "sapphire": "var(--color-sapphire)",
+    "blue": "var(--color-blue)",
+    "lavender": "var(--color-lavender)",
+    "overlay-0": "var(--color-overlay-0)",
+    "overlay-1": "var(--color-overlay-1)",
+    "overlay-2": "var(--color-overlay-2)",
+}
+
+// Add var(--color-*-100/200/../950) automatically to the tailwind config colors defined above
+// This will generate 10 shades for each color
+
+// Generate shades for each color
+//
+// Example:
+// 'surface-0' {
+//   100: 'var(--color-surface0-100)',
+//   200: 'var(--color-surface0-200)',
+//   ...
+//   950: 'var(--color-surface0-950)',
+// }
+// 'blue' {
+//   100: 'var(--color-blue-100)', 
+// }
+const shades = Object.keys(colors).reduce((acc, color) => {
+    acc[color] = {}
+    for (let i = 100; i <= 950; i += 100) {
+        acc[color][i] = `var(--color-${color}-${i})`
+    }
+    return acc
+}
+, {})
+
+// Move the color key to the DEFAULT element
+
+// Example:
+// 'blue' {
+//   DEFAULT: 'var(--color-blue)',
+//   100: 'var(--color-blue-100)',
+// }
+Object.keys(shades).forEach(color => {
+    shades[color] = {
+        DEFAULT: colors[color],
+        ...shades[color]
+    }
+})
+
+let safelistData = [];
+
+Object.keys(shades).forEach(color => {
+    for (let index = 1; index < 10; index++) {
+        const id = index * 100;
+        const strId = '-' + id;
+
+        safelistData.push("from-" + color + strId);
+        safelistData.push("to-" + color + strId);
+        safelistData.push("bg-" + color + strId);
+        safelistData.push("bg-" + color);
+        safelistData.push("border-" + color + strId);
+        safelistData.push("border-" + color);
+    }
+})
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./components/**/*.{js,vue,ts}",
+        "./layouts/**/*.vue",
+        "./pages/**/*.vue",
+        "./plugins/**/*.{js,ts}",
+        "./app.vue",
+        "./error.vue",
+    ],
+    theme: {
+        extend: {
+            colors: shades
+        },
+    },
+    safelist: safelistData
+
+    // Include ALL colors by default, no optimizations
+
+};
+