@aziontech/theme 1.1.0 → 1.2.0

package/README.md

@@ -4,12 +4,12 @@
 
 ## Features
 
-- **Design Tokens**: Primitive and semantic color tokens generated from Figma
-- **Brand Colors**: Azion's official color palette with primary (orange), accent (violet), and surface colors
-- **Theme Support**: Built-in light and dark mode theming
-- **Tailwind Integration**: Plugin and preset for seamless Tailwind CSS integration
-- **CSS Variables**: Automatic CSS variable generation for dynamic theming
-- **Widget Support**: Separate theme variant for embedded widgets
+- **Design Tokens**: Primitive and semantic color tokens generated from Figma;
+- **Brand Colors**: Azion's official color palette with primary (orange), accent (violet), and surface colors;
+- **Theme Support**: Built-in light and dark mode theming;
+- **Tailwind Integration**: Plugin and preset for seamless Tailwind CSS integration;
+- **CSS Variables**: Automatic CSS variable generation for dynamic theming;
+- **Widget Support**: Separate theme variant for embedded widgets;
 
 ## Installation
 
@@ -301,15 +301,17 @@ 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;
 }
 ```
 
@@ -317,9 +319,9 @@ 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);
 }
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -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"
   }
 }

package/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;

package/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;

package/src/tailwind/semantic-texts-plugin.js

@@ -0,0 +1,278 @@
+/**
+ * Tailwind plugin to expose semantic text styles (typography).
+ *
+ * This adds typography components like display-1, body-1, etc.
+ *
+ * Usage in tailwind.config.js:
+ * ```javascript
+ * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
+ * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin.js';
+ *
+ * export default {
+ *   theme,
+ *   plugins: [semanticTexts()],
+ * };
+ * ```
+ */
+
+// Lazy-require to avoid hard dependency for consumers
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic text style components
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const semanticTexts = () => {
+  return plugin(({ addComponents, theme }) => {
+    const deprecatedTexts = {
+      // Display styles - Desktop
+      '.display-1': {
+        fontSize: '3rem',
+        lineHeight: '1.10',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-2': {
+        fontSize: '2rem',
+        lineHeight: '1.2',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-3': {
+        fontSize: '1.75rem',
+        lineHeight: '1.25',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-4': {
+        fontSize: '1.5rem',
+        lineHeight: '1.3',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-5': {
+        fontSize: '1.25rem',
+        lineHeight: '1.4',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+
+      // Display styles - Mobile
+      '.display-1-mobile': {
+        fontSize: '2.5rem',
+        lineHeight: '1.15',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-2-mobile': {
+        fontSize: '1.875rem',
+        lineHeight: '1.20',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-3-mobile': {
+        fontSize: '1.375rem',
+        lineHeight: '1.3',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-4-mobile': {
+        fontSize: '1.25rem',
+        lineHeight: '1.35',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.display-5-mobile': {
+        fontSize: '1.125rem',
+        lineHeight: '1.35',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+
+      // Body styles
+      '.body-1': {
+        fontSize: '1rem',
+        lineHeight: '1.4rem',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+      '.body-2': {
+        fontSize: '.875rem',
+        lineHeight: '1.4rem',
+        fontFamily: 'Sora',
+        letterSpacing: '-.05rem',
+      },
+    };
+
+    const texts = {
+      '.text-big-number-md': {
+        fontSize: '4.5rem', // 7xl
+        lineHeight: '1.20',
+      },
+        '.text-heading-2xl': {
+        fontSize: '3.75rem', // text-6xl
+        lineHeight: '1.2',
+      },
+      '.text-heading-xl': {
+        fontSize: '2.25rem', // text-4xl
+        lineHeight: '1.2',
+      },
+      '.text-heading-lg': {
+        fontSize: '1.875rem', // text-3xl
+        lineHeight: '1.2',
+      },
+      '.text-heading-md': {
+        fontSize: '1.5rem', // text-2xl
+        lineHeight: '1.2',
+      },
+      '.text-heading-sm': {
+        fontSize: '1.125rem', // text-lg
+        lineHeight: '1.2',
+      },
+        '.text-body-lg': {
+        fontSize: '18px', // text-lg
+        lineHeight: '1.5',
+      },
+      '.text-body-md': {
+        fontSize: '16px', // text-base
+        lineHeight: '1.5',
+      },
+      '.text-body-sm': {
+        fontSize: '14px', // text-sm
+        lineHeight: '1.5',
+      },
+      '.text-body-xs': {
+        fontSize: '12px', // text-xs
+        lineHeight: '1.5',
+      },
+      '.text-body-xss': {
+        fontSize: '10px',
+        lineHeight: '1.5',
+      },
+      '.text-overline-md': {
+        fontSize: '14px', // text-sm
+        lineHeight: '1.4',
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+      },
+      '.text-overline-sm': {
+        fontSize: '12px', // text-xs
+        lineHeight: '1.4',
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+      },
+      '.text-overline-xs': {
+        fontSize: '10px',
+        lineHeight: '1.4',
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+      },
+    };
+
+    const responsiveTexts = {
+      [`@media (max-width: ${theme('screens.md', '768px')})`]: {
+        '.text-big-number-md': {
+          fontSize: '3rem',
+          lineHeight: '1.20',
+        },
+        '.text-heading-2xl': {
+          fontSize: '3rem', // text-5xl
+        },
+        '.text-heading-xl': {
+          fontSize: '1.875rem', // text-3xl
+        },
+        '.text-heading-lg': {
+          fontSize: '1.125rem', // text-lg
+        },
+        '.text-heading-md': {
+          fontSize: '1.25rem', // text-xl
+        },
+        '.text-heading-sm': {
+          fontSize: '1rem', // text-base
+        },
+        '.text-body-lg': {
+          fontSize: '16px', // text-base
+        },
+        '.text-body-md': {
+          fontSize: '16px', // mantém
+        },
+        '.text-body-sm': {
+          fontSize: '14px',
+        },
+        '.text-body-xs': {
+          fontSize: '12px',
+        },
+        '.text-body-xss': {
+          fontSize: '10px',
+        },
+        '.text-overline-md': {
+          fontSize: '14px',
+        },
+        '.text-overline-sm': {
+          fontSize: '12px',
+        },
+        '.text-overline-xs': {
+          fontSize: '10px',
+        },
+      },
+      [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
+        '.text-big-number-md': {
+          fontSize: '4.5rem',
+          lineHeight: '1.20',
+        },
+        '.text-heading-2xl': {
+          fontSize: '1.875rem',
+        },
+        '.text-heading-xl': {
+          fontSize: '1.25rem',
+        },
+        '.text-heading-lg': {
+          fontSize: '1.125rem',
+        },
+        '.text-heading-md': {
+          fontSize: '1rem',
+        },
+        '.text-heading-sm': {
+          fontSize: '0.875rem',
+        },
+        '.text-body-lg': {
+          fontSize: '16px',
+        },
+        '.text-body-md': {
+          fontSize: '16px',
+        },
+        '.text-body-sm': {
+          fontSize: '14px',
+        },
+        '.text-body-xs': {
+          fontSize: '12px',
+        },
+        '.text-body-xss': {
+          fontSize: '10px',
+        },
+        '.text-overline-md': {
+          fontSize: '14px',
+        },
+        '.text-overline-sm': {
+          fontSize: '12px',
+        },
+        '.text-overline-xs': {
+          fontSize: '10px',
+        },
+      },
+
+    };
+
+    addComponents(deprecatedTexts);
+    addComponents(texts);
+    addComponents(responsiveTexts);
+  });
+};
+
+export default semanticTexts;

package/src/tailwind/tailwind-theme.js

@@ -0,0 +1,54 @@
+/**
+ * Tailwind CSS Configuration for @aziontech/theme
+ *
+ * This file exports a Tailwind config with all design tokens from the token system.
+ * Uses CSS variables for semantic tokens, enabling automatic theme switching.
+ *
+ * Usage:
+ * ```javascript
+ * // tailwind.config.js
+ * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
+ * import flatColorsPlugin from '@aziontech/theme/tailwind/tailwind-flat-colors.js';
+ *
+ * export default {
+ *   theme,
+ *   plugins: [flatColorsPlugin],
+ * };
+ * ```
+ *
+ * For theme switching to work, ensure CSS variables are injected:
+ * ```javascript
+ * import { injectCssVars } from '@aziontech/theme/tokens';
+ * injectCssVars();
+ * ```
+ */
+
+import { primitives } from '../tokens/primitives/colors.js';
+import { brandPrimitives, surfacePrimitives } from '../tokens/primitives/brand.js';
+
+export const theme = {
+  extend: {
+    colors: {
+      base: {
+        white: primitives.base.white,
+        black: primitives.base.black,
+      },
+      brand: {
+        primary: brandPrimitives.primary,
+        accent: brandPrimitives.accent,
+      },
+      surface: surfacePrimitives.surface,
+      orange: primitives.orange,
+      violet: primitives.violet,
+      neutral: primitives.neutral,
+      gray: primitives.gray,
+      slate: primitives.slate,
+      red: primitives.red,
+      green: primitives.green,
+      yellow: primitives.yellow,
+      blue: primitives.blue,
+    },
+  },
+};
+
+export default { theme };

package/src/tokens/build/preset.js

@@ -7,51 +7,51 @@ export const preset = {
     extend: {
       colors: {
         text: {
-          default: 'var(--text-textDefault)',
-          muted: 'var(--text-textMuted)',
-          link: 'var(--text-textLink)',
-          linkHover: 'var(--text-textLinkHover)',
-          code: 'var(--text-textCode)',
-          primary: 'var(--text-textPrimary)',
-          primaryHover: 'var(--text-textPrimaryHover)',
-          accent: 'var(--text-textAccent)',
-          accentHover: 'var(--text-textAccentHover)',
-          danger: 'var(--text-textDanger)',
-          dangerHover: 'var(--text-textDangerHover)',
-          warning: 'var(--text-textWarning)',
-          warningHover: 'var(--text-textWarningHover)',
-          success: 'var(--text-textSuccess)',
-          successHover: 'var(--text-textSuccessHover)',
+          default: 'var(--text-default)',
+          muted: 'var(--text-muted)',
+          link: 'var(--text-link)',
+          linkHover: 'var(--text-linkHover)',
+          code: 'var(--text-code)',
+          primary: 'var(--text-primary)',
+          primaryHover: 'var(--text-primaryHover)',
+          accent: 'var(--text-accent)',
+          accentHover: 'var(--text-accentHover)',
+          danger: 'var(--text-danger)',
+          dangerHover: 'var(--text-dangerHover)',
+          warning: 'var(--text-warning)',
+          warningHover: 'var(--text-warningHover)',
+          success: 'var(--text-success)',
+          successHover: 'var(--text-successHover)',
         },
         background: {
-          surfaceRaised: 'var(--background-bgSurfaceRaised)',
-          surfaceOverlay: 'var(--background-bgSurfaceOverlay)',
-          surface: 'var(--background-bgSurface)',
-          canvas: 'var(--background-bgCanvas)',
-          danger: 'var(--background-bgDanger)',
-          dangerHover: 'var(--background-bgDangerHover)',
-          warning: 'var(--background-bgWarning)',
-          warningHover: 'var(--background-bgWarningHover)',
-          success: 'var(--background-bgSuccess)',
-          successHover: 'var(--background-bgSuccessHover)',
-          backdrop: 'var(--background-bgBackdrop)',
-          primary: 'var(--background-bgPrimary)',
-          primaryHover: 'var(--background-bgPrimaryHover)',
+          surfaceRaised: 'var(--background-surfaceRaised)',
+          surfaceOverlay: 'var(--background-surfaceOverlay)',
+          surface: 'var(--background-surface)',
+          canvas: 'var(--background-canvas)',
+          danger: 'var(--background-danger)',
+          dangerHover: 'var(--background-dangerHover)',
+          warning: 'var(--background-warning)',
+          warningHover: 'var(--background-warningHover)',
+          success: 'var(--background-success)',
+          successHover: 'var(--background-successHover)',
+          backdrop: 'var(--background-backdrop)',
+          primary: 'var(--background-primary)',
+          primaryHover: 'var(--background-primaryHover)',
         },
         border: {
-          default: 'var(--border-borderDefault)',
-          strong: 'var(--border-borderStrong)',
-          subtle: 'var(--border-borderSubtle)',
-          warning: 'var(--border-borderWarning)',
-          warningHover: 'var(--border-borderWarningHover)',
-          success: 'var(--border-borderSuccess)',
-          successHover: 'var(--border-borderSuccessHover)',
-          danger: 'var(--border-borderDanger)',
-          dangerHover: 'var(--border-borderDangerHover)',
-          primary: 'var(--border-borderPrimary)',
-          primaryHover: 'var(--border-borderPrimaryHover)',
-          accent: 'var(--border-borderAccent)',
-          accentHover: 'var(--border-borderAccentHover)',
+          default: 'var(--border-default)',
+          strong: 'var(--border-strong)',
+          subtle: 'var(--border-subtle)',
+          warning: 'var(--border-warning)',
+          warningHover: 'var(--border-warningHover)',
+          success: 'var(--border-success)',
+          successHover: 'var(--border-successHover)',
+          danger: 'var(--border-danger)',
+          dangerHover: 'var(--border-dangerHover)',
+          primary: 'var(--border-primary)',
+          primaryHover: 'var(--border-primaryHover)',
+          accent: 'var(--border-accent)',
+          accentHover: 'var(--border-accentHover)',
         },
       },
     },

package/src/tokens/build/tailwind-flat-colors.js

@@ -0,0 +1,75 @@
+/**
+ * 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 { flatColorsPlugin } from '@aziontech/theme/tokens/build/tailwind-flat-colors.js';
+ *
+ * export default {
+ *   plugins: [flatColorsPlugin],
+ * };
+ * ```
+ */
+
+import plugin from 'tailwindcss/plugin.js';
+
+export const flatColorsPlugin = plugin(({ addUtilities, addBase, theme }) => {
+  // Add semantic text colors as root-level utilities
+  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 flatColorsPlugin;

package/src/tokens/semantic/backgrounds.js

@@ -8,34 +8,34 @@ import { tokenRef } from '../build/refs.js';
 
 export const backgroundSemantic = {
   light: {
-    bgSurfaceRaised: tokenRef('brand.surfaces.surface-0'),
-    bgSurfaceOverlay: tokenRef('brand.surfaces.surface-50'),
-    bgSurface: tokenRef('brand.surfaces.surface-0'),
-    bgCanvas: tokenRef('brand.surfaces.surface-100'),
-    bgDangerHover: tokenRef('primitives.red.400'),
-    bgWarningHover: tokenRef('primitives.yellow.400'),
-    bgSuccessHover: tokenRef('primitives.green.400'),
-    bgSuccess: tokenRef('primitives.green.200'),
-    bgDanger: tokenRef('primitives.red.200'),
-    bgWarning: tokenRef('primitives.yellow.200'),
-    bgBackdrop: tokenRef('#00000040'),
-    bgPrimaryHover: tokenRef('brand.primary.primary-600'),
-    bgPrimary: tokenRef('brand.primary.primary-500')
+    surfaceRaised: tokenRef('brand.surfaces.surface-0'),
+    surfaceOverlay: tokenRef('brand.surfaces.surface-50'),
+    surface: tokenRef('brand.surfaces.surface-0'),
+    canvas: tokenRef('brand.surfaces.surface-100'),
+    dangerHover: tokenRef('primitives.red.400'),
+    warningHover: tokenRef('primitives.yellow.400'),
+    successHover: tokenRef('primitives.green.400'),
+    success: tokenRef('primitives.green.200'),
+    danger: tokenRef('primitives.red.200'),
+    warning: tokenRef('primitives.yellow.200'),
+    backdrop: tokenRef('#00000040'),
+    primaryHover: tokenRef('brand.primary.primary-600'),
+    primary: tokenRef('brand.primary.primary-500')
   },
   dark: {
-    bgSurfaceRaised: tokenRef('brand.surfaces.surface-800'),
-    bgSurfaceOverlay: tokenRef('brand.surfaces.surface-700'),
-    bgSurface: tokenRef('brand.surfaces.surface-900'),
-    bgCanvas: tokenRef('brand.surfaces.surface-950'),
-    bgDangerHover: tokenRef('primitives.red.600'),
-    bgWarningHover: tokenRef('primitives.yellow.600'),
-    bgSuccessHover: tokenRef('primitives.green.600'),
-    bgSuccess: tokenRef('primitives.green.800'),
-    bgDanger: tokenRef('primitives.red.800'),
-    bgWarning: tokenRef('primitives.yellow.800'),
-    bgBackdrop: tokenRef('#00000040'),
-    bgPrimaryHover: tokenRef('brand.primary.primary-400'),
-    bgPrimary: tokenRef('brand.primary.primary-500')
+    surfaceRaised: tokenRef('brand.surfaces.surface-800'),
+    surfaceOverlay: tokenRef('brand.surfaces.surface-700'),
+    surface: tokenRef('brand.surfaces.surface-900'),
+    canvas: tokenRef('brand.surfaces.surface-950'),
+    dangerHover: tokenRef('primitives.red.600'),
+    warningHover: tokenRef('primitives.yellow.600'),
+    successHover: tokenRef('primitives.green.600'),
+    success: tokenRef('primitives.green.800'),
+    danger: tokenRef('primitives.red.800'),
+    warning: tokenRef('primitives.yellow.800'),
+    backdrop: tokenRef('#00000040'),
+    primaryHover: tokenRef('brand.primary.primary-400'),
+    primary: tokenRef('brand.primary.primary-500')
   },
 };
 

package/src/tokens/semantic/borders.js

@@ -8,34 +8,34 @@ import { tokenRef } from '../build/refs.js';
 
 export const borderSemantic = {
   light: {
-    borderDefault: tokenRef('brand.surfaces.surface-100'),
-    borderStrong: tokenRef('primitives.base.black'),
-    borderWarning: tokenRef('primitives.yellow.600'),
-    borderSuccess: tokenRef('primitives.green.600'),
-    borderDanger: tokenRef('primitives.red.600'),
-    borderPrimary: tokenRef('brand.primary.primary-500'),
-    borderAccent: tokenRef('brand.accent.accent-500'),
-    borderWarningHover: tokenRef('primitives.yellow.500'),
-    borderSuccessHover: tokenRef('primitives.green.500'),
-    borderDangerHover: tokenRef('primitives.red.500'),
-    borderPrimaryHover: tokenRef('brand.primary.primary-600'),
-    borderAccentHover: tokenRef('brand.accent.accent-600'),
-    borderSubtle: tokenRef('brand.surfaces.surface-200')
+    default: tokenRef('brand.surfaces.surface-100'),
+    strong: tokenRef('primitives.base.black'),
+    warning: tokenRef('primitives.yellow.600'),
+    success: tokenRef('primitives.green.600'),
+    danger: tokenRef('primitives.red.600'),
+    primary: tokenRef('brand.primary.primary-500'),
+    accent: tokenRef('brand.accent.accent-500'),
+    warningHover: tokenRef('primitives.yellow.500'),
+    successHover: tokenRef('primitives.green.500'),
+    dangerHover: tokenRef('primitives.red.500'),
+    primaryHover: tokenRef('brand.primary.primary-600'),
+    accentHover: tokenRef('brand.accent.accent-600'),
+    subtle: tokenRef('brand.surfaces.surface-200')
   },
   dark: {
-    borderDefault: tokenRef('brand.surfaces.surface-800'),
-    borderStrong: tokenRef('primitives.base.white'),
-    borderWarning: tokenRef('primitives.yellow.400'),
-    borderSuccess: tokenRef('primitives.green.400'),
-    borderDanger: tokenRef('primitives.red.400'),
-    borderPrimary: tokenRef('brand.primary.primary-500'),
-    borderAccent: tokenRef('brand.accent.accent-500'),
-    borderWarningHover: tokenRef('primitives.yellow.500'),
-    borderSuccessHover: tokenRef('primitives.green.500'),
-    borderDangerHover: tokenRef('primitives.red.500'),
-    borderPrimaryHover: tokenRef('brand.primary.primary-400'),
-    borderAccentHover: tokenRef('brand.accent.accent-400'),
-    borderSubtle: tokenRef('brand.surfaces.surface-700')
+    default: tokenRef('brand.surfaces.surface-800'),
+    strong: tokenRef('primitives.base.white'),
+    warning: tokenRef('primitives.yellow.400'),
+    success: tokenRef('primitives.green.400'),
+    danger: tokenRef('primitives.red.400'),
+    primary: tokenRef('brand.primary.primary-500'),
+    accent: tokenRef('brand.accent.accent-500'),
+    warningHover: tokenRef('primitives.yellow.500'),
+    successHover: tokenRef('primitives.green.500'),
+    dangerHover: tokenRef('primitives.red.500'),
+    primaryHover: tokenRef('brand.primary.primary-400'),
+    accentHover: tokenRef('brand.accent.accent-400'),
+    subtle: tokenRef('brand.surfaces.surface-700')
   },
 };
 

package/src/tokens/semantic/text.js

@@ -8,38 +8,38 @@ import { tokenRef } from '../build/refs.js';
 
 export const textSemantic = {
   light: {
-    textDefault: tokenRef('primitives.neutral.900'),
-    textMuted: tokenRef('primitives.neutral.600'),
-    textLink: tokenRef('primitives.blue.600'),
-    textCode: tokenRef('primitives.neutral.600'),
-    textLinkHover: tokenRef('primitives.blue.700'),
-    textPrimary: tokenRef('brand.primary.primary-500'),
-    textPrimaryHover: tokenRef('brand.primary.primary-600'),
-    textAccent: tokenRef('brand.accent.accent-500'),
-    textAccentHover: tokenRef('brand.accent.accent-600'),
-    textDangerHover: tokenRef('primitives.red.500'),
-    textWarningHover: tokenRef('primitives.yellow.500'),
-    textSuccessHover: tokenRef('primitives.green.500'),
-    textSuccess: tokenRef('primitives.green.600'),
-    textDanger: tokenRef('primitives.red.600'),
-    textWarning: tokenRef('primitives.yellow.600')
+    default: tokenRef('primitives.neutral.900'),
+    muted: tokenRef('primitives.neutral.600'),
+    link: tokenRef('primitives.blue.600'),
+    code: tokenRef('primitives.neutral.600'),
+    linkHover: tokenRef('primitives.blue.700'),
+    primary: tokenRef('brand.primary.primary-500'),
+    primaryHover: tokenRef('brand.primary.primary-600'),
+    accent: tokenRef('brand.accent.accent-500'),
+    accentHover: tokenRef('brand.accent.accent-600'),
+    dangerHover: tokenRef('primitives.red.500'),
+    warningHover: tokenRef('primitives.yellow.500'),
+    successHover: tokenRef('primitives.green.500'),
+    success: tokenRef('primitives.green.600'),
+    danger: tokenRef('primitives.red.600'),
+    warning: tokenRef('primitives.yellow.600')
   },
   dark: {
-    textDefault: tokenRef('primitives.neutral.50'),
-    textMuted: tokenRef('primitives.neutral.400'),
-    textLink: tokenRef('primitives.blue.400'),
-    textCode: tokenRef('primitives.neutral.400'),
-    textLinkHover: tokenRef('primitives.blue.300'),
-    textPrimary: tokenRef('brand.primary.primary-500'),
-    textPrimaryHover: tokenRef('brand.primary.primary-400'),
-    textAccent: tokenRef('brand.accent.accent-500'),
-    textAccentHover: tokenRef('brand.accent.accent-400'),
-    textDangerHover: tokenRef('primitives.red.500'),
-    textWarningHover: tokenRef('primitives.yellow.500'),
-    textSuccessHover: tokenRef('primitives.green.500'),
-    textSuccess: tokenRef('primitives.green.400'),
-    textDanger: tokenRef('primitives.red.400'),
-    textWarning: tokenRef('primitives.yellow.400'),
+    default: tokenRef('primitives.neutral.50'),
+    muted: tokenRef('primitives.neutral.400'),
+    link: tokenRef('primitives.blue.400'),
+    code: tokenRef('primitives.neutral.400'),
+    linkHover: tokenRef('primitives.blue.300'),
+    primary: tokenRef('brand.primary.primary-500'),
+    primaryHover: tokenRef('brand.primary.primary-400'),
+    accent: tokenRef('brand.accent.accent-500'),
+    accentHover: tokenRef('brand.accent.accent-400'),
+    dangerHover: tokenRef('primitives.red.500'),
+    warningHover: tokenRef('primitives.yellow.500'),
+    successHover: tokenRef('primitives.green.500'),
+    success: tokenRef('primitives.green.400'),
+    danger: tokenRef('primitives.red.400'),
+    warning: tokenRef('primitives.yellow.400'),
   }
 };
 

package/tokens.js

@@ -4,5 +4,4 @@
  * Re-exports for easy access to design tokens
  */
 
-export { default } from './src/tokens/index.js';
 export * from './src/tokens/index.js';