@aziontech/theme 1.13.0 → 2.0.1

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,
-};

package/src/tokens/primitives/brand.js

@@ -1,69 +0,0 @@
-/**
- * BRAND + SURFACE PRIMITIVES TOKENS
- *
- * Generated from figma-reference-tokens-studio.
- */
-
-import { brandColors } from '../colors-brand.js';
-import { primitives } from './colors.js';
-
-// Aliases:
-// - surfaces are neutrals
-// - accent is violet
-export const surfacePrimitives = {
-  surface: {
-    0: primitives.base.white,
-    50: primitives.neutral[50],
-    100: primitives.neutral[100],
-    200: primitives.neutral[200],
-    300: primitives.neutral[300],
-    400: primitives.neutral[400],
-    500: primitives.neutral[500],
-    600: primitives.neutral[600],
-    700: primitives.neutral[700],
-    800: primitives.neutral[800],
-    900: primitives.neutral[900],
-    950: primitives.neutral[950]
-  }
-};
-
-export const brandPrimitives = {
-  accent: {
-    50: primitives.violet[50],
-    100: primitives.violet[100],
-    200: primitives.violet[200],
-    300: primitives.violet[300],
-    400: primitives.violet[400],
-    500: primitives.violet[500],
-    600: primitives.violet[600],
-    700: primitives.violet[700],
-    800: primitives.violet[800],
-    900: primitives.violet[900],
-    950: primitives.violet[950]
-  },
-  primary: {
-    50: primitives.orange[50],
-    100: primitives.orange[100],
-    200: primitives.orange[200],
-    300: primitives.orange[300],
-    400: primitives.orange[400],
-    500: primitives.orange[500],
-    600: primitives.orange[600],
-    700: primitives.orange[700],
-    800: primitives.orange[800],
-    900: primitives.orange[900],
-    950: primitives.orange[950]
-  },
-  absolute: {
-    white: primitives.neutral[50],
-    black: primitives.neutral[950]
-  }
-};
-
-export { brandColors };
-
-export default {
-  brandColors,
-  brandPrimitives,
-  surfacePrimitives,
-};

package/src/tokens/primitives/colors.js

@@ -1,144 +0,0 @@
-/**
- * PRIMITIVE COLORS TOKENS
- *
- * Generated from figma-reference-tokens-studio.
- */
-
-export const primitives = {
-  base: {
-    white: '#ffffff',
-    black: '#000000',
-    },
-  gray: {
-    '50': '#F9FAFB',
-    '100': '#F3F4F6',
-    '200': '#E5E7EB',
-    '300': '#D1D5DB',
-    '400': '#9CA3AF',
-    '500': '#6B7280',
-    '600': '#4B5563',
-    '700': '#374151',
-    '800': '#1F2937',
-    '900': '#111827',
-    '950': '#030712',
-    },
-  // done violet
-  violet: {
-    '50': '#F6F6FF',
-    '100': '#ECECFF',
-    '200': '#D9D7FA',
-    '300': '#B5B1F4',
-    '400': '#9F9AF1',
-    '500': '#8A84EC',
-    '600': '#756FE5',
-    '700': '#625BD5',
-    '800': '#524BBB',
-    '900': '#423F99',
-    '950': '#343279',
-    },
-  orange: {
-    '50': '#FFF5EF',
-    '100': '#FFE7D8',
-    '200': '#FFCFB3',
-    '300': '#FFB180',
-    '400': '#FF8E4D',
-    '500': '#FE601F',
-    '600': '#D94A03',
-    '700': '#B03C02',
-    '800': '#8A2F02',
-    '900': '#692402',
-    '950': '#401602',
-    },
-  slate: {
-    '50': '#F8F7FC',
-    '100': '#F0EFF8',
-    '200': '#E3E1F0',
-    '300': '#D3D2E6',
-    '400': '#BEBBD6',
-    '500': '#A39FBE',
-    '600': '#8884A4',
-    '700': '#6D698B',
-    '800': '#534F70',
-    '900': '#353040',
-    '950': '#13131A',
-    },
-  yellow: {
-    '50': '#FEFCE8',
-    '100': '#FEF9C3',
-    '200': '#FEF08A',
-    '300': '#FDE047',
-    '400': '#FACC15',
-    '500': '#EAB308',
-    '600': '#CA8A04',
-    '700': '#A16207',
-    '800': '#854D0E',
-    '900': '#713F12',
-    '950': '#422006',
-    },
-  green: {
-    '50': '#F0FDF4',
-    '100': '#DCFCE7',
-    '200': '#BBF7D0',
-    '300': '#86EFAC',
-    '400': '#4ADE80',
-    '500': '#22C55E',
-    '600': '#16A34A',
-    '700': '#15803D',
-    '800': '#166534',
-    '900': '#14532D',
-    '950': '#052E16',
-    },
-  blue: {
-    '50': '#EFF6FF',
-    '100': '#DBEAFE',
-    '200': '#BFDBFE',
-    '300': '#93C5FD',
-    '400': '#60A5FA',
-    '500': '#3B82F6',
-    '600': '#2563EB',
-    '700': '#1D4ED8',
-    '800': '#1E40AF',
-    '900': '#1E3A8A',
-    '950': '#172554',
-    },
-  neutral: {
-    '50': '#FAFAFA',
-    '100': '#F5F5F5',
-    '200': '#E5E5E5',
-    '300': '#D4D4D4',
-    '400': '#A3A3A3',
-    '500': '#737373',
-    '600': '#525252',
-    '700': '#404040',
-    '800': '#262626',
-    '900': '#171717',
-    '950': '#0A0A0A',
-    },
-  red: {
-    '50': '#FFE5E5',
-    '100': '#FFCCCC',
-    '200': '#FECACA',
-    '300': '#FCA5A5',
-    '400': '#F87171',
-    '500': '#EF4444',
-    '600': '#DC2626',
-    '700': '#B91C1C',
-    '800': '#991B1B',
-    '900': '#7F1D1D',
-    '950': '#450A0A',
-    },
-  alpha: {
-    neutral: {
-      '25': '#00000040',
-    },
-  brand: {
-      primary: {
-        '65': '#FE601F29',
-      },
-    },
-  },
-};
-
-export default {
-  primitives,
-};

package/src/tokens/semantic/backgrounds.js

@@ -1,46 +0,0 @@
-/**
- * SEMANTIC BACKGROUND TOKENS
- *
- * Generated from figma-reference-tokens-studio.
- */
-
-import { tokenRef } from '../build/refs.js'
-
-export const backgroundSemantic = {
-  light: {
-    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('primitives.alpha.neutral.25'),
-    primaryHover: tokenRef('brand.primary.primary-600'),
-    primary: tokenRef('brand.primary.primary-500'),
-    primaryMask: tokenRef('primitives.alpha.brand.primary.65')
-  },
-  dark: {
-    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('primitives.alpha.neutral.25'),
-    primaryHover: tokenRef('brand.primary.primary-400'),
-    primary: tokenRef('brand.primary.primary-500'),
-    primaryMask: tokenRef('primitives.alpha.brand.primary.65')
-  }
-}
-
-export default {
-  backgroundSemantic
-}