@aziontech/theme 1.12.0 → 2.0.0

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

@@ -1,91 +0,0 @@
-/**
- * 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';
- *
- * 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)' },
-      '.bg-primary-mask': { 'background-color': 'var(--background-primaryMask)' },
-    };
-
-    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)' },
-    };
-
-    const variants = ['responsive', 'hover', 'dark', 'before', 'after', 'focus', 'active', 'disabled'];
-    addUtilities(textColors, variants);
-    addUtilities(bgColors, variants);
-    addUtilities(borderColors, variants);
-  });
-};
-
-export default semanticColors;

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

@@ -1,151 +0,0 @@
-/**
- * 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';
- *
- * 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: theme('spacing.0'),
-        paddingRight: theme('spacing.0'),
-      },
-      '.py-container': {
-        paddingTop: theme('spacing.48'),
-        paddingBottom: theme('spacing.48'),
-      },
-
-      // Padding elements
-      '.p-elements-confortable': {
-        padding: theme('spacing.24'),
-      },
-      '.p-elements-base': {
-        padding: theme('spacing.12'),
-      },
-      '.p-elements-compact': {
-        padding: theme('spacing.6'),
-      },
-
-      // Gap elements
-      '.gap-elements-confortable': {
-        gap: theme('spacing.24'),
-      },
-      '.gap-elements-base': {
-        gap: theme('spacing.12'),
-      },
-      '.gap-elements-compact': {
-        gap: theme('spacing.6'),
-      },
-
-      // Gap sections
-      '.gap-sections': {
-        gap: theme('spacing.48'),
-      },
-    };
-
-    const responsiveSpacing = {
-      [`@media (max-width: ${theme('screens.md', '768px')})`]: {
-        '.max-container-width': {
-          maxWidth: '1024px',
-        },
-        '.px-container': {
-          paddingLeft: theme('spacing.10'),
-          paddingRight: theme('spacing.10'),
-        },
-        '.py-container': {
-          paddingTop: theme('spacing.32'),
-          paddingBottom: theme('spacing.32'),
-        },
-        '.p-elements-confortable': {
-          padding: theme('spacing.16'),
-        },
-        '.p-elements-base': {
-          padding: theme('spacing.8'),
-        },
-        '.p-elements-compact': {
-          padding: theme('spacing.5'),
-        },
-        '.gap-elements-confortable': {
-          gap: theme('spacing.16'),
-        },
-        '.gap-elements-base': {
-          gap: theme('spacing.8'),
-        },
-        '.gap-elements-compact': {
-          gap: theme('spacing.6'),
-        },
-        '.gap-sections': {
-          gap: theme('spacing.40'),
-        },
-      },
-      [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
-        '.max-container-width': {
-          maxWidth: theme('screens.lg'),
-        },
-        '.px-container': {
-          paddingLeft: theme('spacing.4'),
-          paddingRight: theme('spacing.4'),
-        },
-        '.py-container': {
-          paddingTop: theme('spacing.16'),
-          paddingBottom: theme('spacing.16'),
-        },
-        '.p-elements-confortable': {
-          padding: theme('spacing.8'),
-        },
-        '.p-elements-base': {
-          padding: theme('spacing.6'),
-        },
-        '.p-elements-compact': {
-          padding: theme('spacing.4'),
-        },
-        '.gap-elements-confortable': {
-          gap: theme('spacing.8'),
-        },
-        '.gap-elements-base': {
-          gap: theme('spacing.6'),
-        },
-        '.gap-elements-compact': {
-          gap: theme('spacing.4'),
-        },
-        '.gap-sections': {
-          gap: theme('spacing.20'),
-        },
-      },
-    };
-
-    addComponents(spacing);
-    addComponents(responsiveSpacing);
-  });
-};
-
-export default semanticSpacing;

package/src/tailwind/tailwind-theme.js

@@ -1,54 +0,0 @@
-/**
- * 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

@@ -1,62 +0,0 @@
-/**
- * Tailwind preset for Azion tokens.
- */
-
-export const preset = {
-  theme: {
-    extend: {
-      colors: {
-        text: {
-          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-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-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)',
-        },
-      },
-    },
-  },
-  darkMode: ['class', '.dark', '.azion.azion-dark'],
-};
-
-export default preset;

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

@@ -1,75 +0,0 @@
-/**
- * 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/build/tailwind-helper.js

@@ -1,12 +0,0 @@
-/**
- * Tailwind helper for merging presets.
- */
-
-import { preset } from './preset.js';
-
-export const createTailwindConfig = (user) => ({
-  ...user,
-  presets: [...(user.presets ?? []), preset],
-});
-
-export default createTailwindConfig;

package/src/tokens/build/tailwind-plugin.js

@@ -1,175 +0,0 @@
-/**
- * Tailwind plugin to generate static light/dark utilities from semantic tokens.
- *
- * This plugin emits concrete values for both light and dark themes,
- * supporting:
- * - Background color utilities
- * - Text color utilities
- * - Border color utilities
- * - Both dark selectors (.dark and .azion.azion-dark)
- */
-
-// Lazy-require to avoid hard dependency for consumers
-const plugin = (() => {
-  try {
-    return require('tailwindcss/plugin');
-  } catch {
-    return (handler) => handler;
-  }
-})();
-
-import { primitives } from '../primitives/colors.js';
-import { surfacePrimitives, brandPrimitives } from '../primitives/brand.js';
-import { textSemantic } from '../semantic/text.js';
-import { backgroundSemantic } from '../semantic/backgrounds.js';
-import { borderSemantic } from '../semantic/borders.js';
-import { resolveRefsToCssVars } from './resolve.js';
-
-const kebab = (value) =>
-  value
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/_/g, '-')
-    .toLowerCase();
-
-const stripPrefix = (value, prefix) =>
-  value.startsWith(prefix) ? value.slice(prefix.length) : value;
-
-const resolveTokenMaps = () =>
-  resolveRefsToCssVars({
-    primitives,
-    surfacePrimitives,
-    brandPrimitives,
-    textSemantic,
-    backgroundSemantic,
-    borderSemantic,
-  });
-
-const getValue = (map, key) => map[`--${key}`];
-
-const addUtility = (
-  utilities,
-  darkUtilities,
-  selectors,
-  className,
-  property,
-  lightValue,
-  darkValue
-) => {
-  if (lightValue) {
-    utilities[className] = { [property]: lightValue };
-  }
-  if (darkValue) {
-    selectors.forEach((selector) => {
-      darkUtilities[`${selector} ${className}`] = { [property]: darkValue };
-    });
-  }
-};
-
-/**
- * Generate semantic token utilities for light and dark modes
- *
- * Usage:
- * - Background: bg-layer1, bg-layer2, bg-base, bg-canvas, etc.
- * - Text: text-base, text-muted, text-link, text-primary, etc.
- * - Border: border-base, border-warning, border-danger, border-primary, etc.
- */
-export const tokenUtilities = (options = {}) => {
-  const { light, dark } = resolveTokenMaps();
-  const darkSelectors = [options.darkSelector ?? '.dark', ...(options.extraDarkSelectors ?? ['.azion.azion-dark'])];
-
-  const utilities = {};
-  const darkUtilities = {};
-
-  // Background color utilities
-  Object.keys(backgroundSemantic.light).forEach((key) => {
-    const suffix = kebab(stripPrefix(key, 'bg'));
-    const className = `.bg-${suffix}`;
-    addUtility(
-      utilities,
-      darkUtilities,
-      darkSelectors,
-      className,
-      'backgroundColor',
-      getValue(light, `background-${key}`),
-      getValue(dark, `background-${key}`)
-    );
-  });
-
-  // Text color utilities
-  const hasAccent = 'textColorAccent' in textSemantic.light;
-  const accentKey = hasAccent ? 'textColorAccent' : 'textColorSecondary';
-  const accentHoverKey = hasAccent ? 'textColorAccentHover' : 'textColorSecondaryHover';
-
-  const textMap = {
-    base: 'textColorBase',
-    muted: 'textColorMuted',
-    link: 'textColorLink',
-    code: 'textColorCode',
-    'muted-hover': 'textColorMutedHover',
-    'link-hover': 'textColorLinkHover',
-    'base-hover': 'textColorBaseHover',
-    primary: 'textColorPrimary',
-    'primary-hover': 'textColorPrimaryHover',
-    accent: accentKey,
-    'accent-hover': accentHoverKey,
-    secondary: 'textColorSecondary',
-    'secondary-hover': 'textColorSecondaryHover',
-    danger: 'textDanger',
-    'danger-hover': 'textDangerHover',
-    warning: 'textWarning',
-    'warning-hover': 'textWarningHover',
-    success: 'textSuccess',
-    'success-hover': 'textSuccessHover',
-  };
-
-  Object.entries(textMap).forEach(([name, key]) => {
-    const className = `.text-${name}`;
-    addUtility(
-      utilities,
-      darkUtilities,
-      darkSelectors,
-      className,
-      'color',
-      getValue(light, `text-${key}`),
-      getValue(dark, `text-${key}`)
-    );
-  });
-
-  // Border color utilities
-  const borderMap = {
-    base: 'borderBase',
-    'base-hover': 'borderBaseHover',
-    warning: 'borderWarning',
-    success: 'borderSuccess',
-    danger: 'borderDanger',
-    primary: 'borderPrimary',
-    'primary-hover': 'borderPrimaryHover',
-    secondary: 'borderSecondary',
-    'secondary-hover': 'borderSecondaryHover',
-    accent: 'borderAccent',
-    'accent-hover': 'borderAccentHover',
-    'warning-hover': 'borderWarningHover',
-    'success-hover': 'borderSuccessHover',
-    'danger-hover': 'borderDangerHover',
-  };
-
-  Object.entries(borderMap).forEach(([name, key]) => {
-    const className = `.border-${name}`;
-    addUtility(
-      utilities,
-      darkUtilities,
-      darkSelectors,
-      className,
-      'borderColor',
-      getValue(light, `border-${key}`),
-      getValue(dark, `border-${key}`)
-    );
-  });
-
-  return plugin(({ addUtilities }) => {
-    addUtilities(utilities);
-    addUtilities(darkUtilities);
-  });
-};
-
-export default tokenUtilities;

package/src/tokens/colors-brand.js

@@ -1,24 +0,0 @@
-/**
- * BRAND COLORS TOKENS
- *
- * Organized brand colors consuming primitive colors.
- */
-
-import { primitives } from './primitives/colors.js';
-
-export const brandColors = {
-  orange: primitives.orange[500],
-  darkOrange: primitives.orange[600],
-  lavander: primitives.violet[300],
-  darkLavander: primitives.slate[900],
-  blackLavander: primitives.slate[950],
-  gray: primitives.neutral[200],
-  mediumGray: primitives.neutral[500],
-  darkGray: primitives.neutral[900],
-  white: primitives.neutral[50],
-  black: primitives.neutral[950],
-};
-
-export default {
-  brand: brandColors,
-};