Refactor: Add spacing, typos and colors to theme

packages/theme/README.md

@@ -301,25 +301,27 @@ All semantic tokens are available as CSS variables:
 ```css
 /* Automatically generated */
 :root, [data-theme=light], .azion.azion-light {
-  --text-textColorBase: #171717;
-  --background-bgLayer1: #ffffff;
-  --border-borderBase: #e5e5e5;
+  --text-default: #171717;
+  --text-muted: #525252;
+  --background-surface: #ffffff;
+  --border-default: #e5e5e5;
 }
 
 [data-theme=dark], .dark, .azion.azion-dark {
-  --text-textColorBase: #fafafa;
-  --background-bgLayer1: #262626;
-  --border-borderBase: #404040;
+  --text-default: #fafafa;
+  --text-muted: #a3a3a3;
+  --background-surface: #262626;
+  --border-default: #404040;
 }
 ```
 
 Use in your CSS:
 
 ```css
 .custom-component {
-  color: var(--text-textColorBase);
-  background-color: var(--background-bgLayer1);
-  border-color: var(--border-borderBase);
+  color: var(--text-default);
+  background-color: var(--background-surface);
+  border-color: var(--border-default);
 }
 ```
 

packages/theme/package.json

@@ -44,7 +44,8 @@
     "colors-brand.js",
     "default.js",
     "tokens.js",
-    "widget.js"
+    "widget.js",
+    "tailwind-theme.js"
   ],
   "exports": {
     ".": "./default.js",
@@ -57,6 +58,11 @@
     "./tokens/semantic/borders": "./tokens.js",
     "./tokens/build/preset": "./src/tokens/build/preset.js",
     "./tokens/build/tailwind-helper": "./src/tokens/build/tailwind-helper.js",
-    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js"
+    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js",
+    "./tokens/build/css-vars.js": "./src/tokens/build/css-vars.js",
+    "./tailwind/tailwind-theme.js": "./src/tailwind/tailwind-theme.js",
+    "./tailwind/semantic-colors-plugin.js": "./src/tailwind/semantic-colors-plugin.js",
+    "./tailwind/semantic-texts-plugin.js": "./src/tailwind/semantic-texts-plugin.js",
+    "./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js"
   }
 }

packages/theme/src/tailwind/semantic-colors-plugin.js

@@ -0,0 +1,89 @@
+/**
+ * Tailwind plugin to expose semantic colors at root level.
+ *
+ * This allows using classes like `text-muted` instead of `text-text-muted`.
+ *
+ * Usage in tailwind.config.js:
+ * ```javascript
+ * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
+ * import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin.js';
+ *
+ * export default {
+ *   theme,
+ *   plugins: [semanticColors()],
+ * };
+ * ```
+ */
+
+// Lazy-require to avoid hard dependency for consumers
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic color utilities
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const semanticColors = () => {
+  return plugin(({ addUtilities }) => {
+    const textColors = {
+      '.text-default': { color: 'var(--text-default)' },
+      '.text-muted': { color: 'var(--text-muted)' },
+      '.text-link': { color: 'var(--text-link)' },
+      '.text-linkHover': { color: 'var(--text-linkHover)' },
+      '.text-code': { color: 'var(--text-code)' },
+      '.text-primary': { color: 'var(--text-primary)' },
+      '.text-primaryHover': { color: 'var(--text-primaryHover)' },
+      '.text-accent': { color: 'var(--text-accent)' },
+      '.text-accentHover': { color: 'var(--text-accentHover)' },
+      '.text-danger': { color: 'var(--text-danger)' },
+      '.text-dangerHover': { color: 'var(--text-dangerHover)' },
+      '.text-warning': { color: 'var(--text-warning)' },
+      '.text-warningHover': { color: 'var(--text-warningHover)' },
+      '.text-success': { color: 'var(--text-success)' },
+      '.text-successHover': { color: 'var(--text-successHover)' },
+    };
+
+    const bgColors = {
+      '.bg-surfaceRaised': { 'background-color': 'var(--background-surfaceRaised)' },
+      '.bg-surfaceOverlay': { 'background-color': 'var(--background-surfaceOverlay)' },
+      '.bg-surface': { 'background-color': 'var(--background-surface)' },
+      '.bg-canvas': { 'background-color': 'var(--background-canvas)' },
+      '.bg-danger': { 'background-color': 'var(--background-danger)' },
+      '.bg-dangerHover': { 'background-color': 'var(--background-dangerHover)' },
+      '.bg-warning': { 'background-color': 'var(--background-warning)' },
+      '.bg-warningHover': { 'background-color': 'var(--background-warningHover)' },
+      '.bg-success': { 'background-color': 'var(--background-success)' },
+      '.bg-successHover': { 'background-color': 'var(--background-successHover)' },
+      '.bg-backdrop': { 'background-color': 'var(--background-backdrop)' },
+      '.bg-primary': { 'background-color': 'var(--background-primary)' },
+      '.bg-primaryHover': { 'background-color': 'var(--background-primaryHover)' },
+    };
+
+    const borderColors = {
+      '.border-default': { 'border-color': 'var(--border-default)' },
+      '.border-strong': { 'border-color': 'var(--border-strong)' },
+      '.border-subtle': { 'border-color': 'var(--border-subtle)' },
+      '.border-warning': { 'border-color': 'var(--border-warning)' },
+      '.border-warningHover': { 'border-color': 'var(--border-warningHover)' },
+      '.border-success': { 'border-color': 'var(--border-success)' },
+      '.border-successHover': { 'border-color': 'var(--border-successHover)' },
+      '.border-danger': { 'border-color': 'var(--border-danger)' },
+      '.border-dangerHover': { 'border-color': 'var(--border-dangerHover)' },
+      '.border-primary': { 'border-color': 'var(--border-primary)' },
+      '.border-primaryHover': { 'border-color': 'var(--border-primaryHover)' },
+      '.border-accent': { 'border-color': 'var(--border-accent)' },
+      '.border-accentHover': { 'border-color': 'var(--border-accentHover)' },
+    };
+
+    addUtilities(textColors, ['responsive', 'hover', 'dark']);
+    addUtilities(bgColors, ['responsive', 'hover', 'dark']);
+    addUtilities(borderColors, ['responsive', 'hover', 'dark']);
+  });
+};
+
+export default semanticColors;

packages/theme/src/tailwind/semantic-spacing-plugin.js

@@ -0,0 +1,151 @@
+/**
+ * Tailwind plugin to expose semantic spacing styles.
+ *
+ * This adds spacing components for container, padding, and gap utilities.
+ *
+ * Usage in tailwind.config.js:
+ * ```javascript
+ * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
+ * import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin.js';
+ *
+ * export default {
+ *   theme,
+ *   plugins: [semanticSpacing()],
+ * };
+ * ```
+ */
+
+// Lazy-require to avoid hard dependency for consumers
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic spacing style components
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const semanticSpacing = () => {
+  return plugin(({ addComponents, theme }) => {
+    const spacing = {
+      // Container
+      '.max-container-width': {
+        maxWidth: '1280px',
+      },
+      '.px-container': {
+        paddingLeft: '0px',
+        paddingRight: '0px',
+      },
+      '.py-container': {
+        paddingTop: '48px',
+        paddingBottom: '48px',
+      },
+
+      // Padding elements
+      '.p-elements-confortable': {
+        padding: '24px',
+      },
+      '.p-elements-base': {
+        padding: '12px',
+      },
+      '.p-elements-compact': {
+        padding: '6px',
+      },
+
+      // Gap elements
+      '.gap-elements-confortable': {
+        gap: '24px',
+      },
+      '.gap-elements-base': {
+        gap: '12px',
+      },
+      '.gap-elements-compact': {
+        gap: '6px',
+      },
+
+      // Gap sections
+      '.gap-sections': {
+        gap: '48px',
+      },
+    };
+
+    const responsiveSpacing = {
+      [`@media (max-width: ${theme('screens.md', '768px')})`]: {
+        '.max-container-width': {
+          maxWidth: '1024px',
+        },
+        '.px-container': {
+          paddingLeft: '10px',
+          paddingRight: '10px',
+        },
+        '.py-container': {
+          paddingTop: '32px',
+          paddingBottom: '32px',
+        },
+        '.p-elements-confortable': {
+          padding: '16px',
+        },
+        '.p-elements-base': {
+          padding: '8px',
+        },
+        '.p-elements-compact': {
+          padding: '5px',
+        },
+        '.gap-elements-confortable': {
+          gap: '16px',
+        },
+        '.gap-elements-base': {
+          gap: '8px',
+        },
+        '.gap-elements-compact': {
+          gap: '6px',
+        },
+        '.gap-sections': {
+          gap: '40px',
+        },
+      },
+      [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
+        '.max-container-width': {
+          maxWidth: '414px',
+        },
+        '.px-container': {
+          paddingLeft: '4px',
+          paddingRight: '4px',
+        },
+        '.py-container': {
+          paddingTop: '16px',
+          paddingBottom: '16px',
+        },
+        '.p-elements-confortable': {
+          padding: '8px',
+        },
+        '.p-elements-base': {
+          padding: '6px',
+        },
+        '.p-elements-compact': {
+          padding: '4px',
+        },
+        '.gap-elements-confortable': {
+          gap: '8px',
+        },
+        '.gap-elements-base': {
+          gap: '6px',
+        },
+        '.gap-elements-compact': {
+          gap: '4px',
+        },
+        '.gap-sections': {
+          gap: '20px',
+        },
+      },
+    };
+
+    addComponents(spacing);
+    addComponents(responsiveSpacing);
+  });
+};
+
+export default semanticSpacing;