@aziontech/theme 1.13.0 → 2.0.0

package/src/tokens/theme/background.js

@@ -0,0 +1,32 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const background = {
+  light: {
+    'bg-canvas': tokenRef('theme.surfaces.surface-0'),
+    'bg-surface': tokenRef('theme.surfaces.surface-0'),
+    'bg-surface-raised': tokenRef('theme.surfaces.surface-0'),
+    'bg-mask': tokenRef('primitives.alpha.black.50'),
+    'bg-surface-overlay': tokenRef('theme.surfaces.surface-50'),
+    'bg-hover': tokenRef('primitives.alpha.black.100'),
+    'bg-active': tokenRef('primitives.alpha.black.50'),
+    'bg-backdrop': tokenRef('primitives.alpha.black.700'),
+    'bg-selected': tokenRef('theme.surfaces.surface-200'),
+    'bg-contrast': tokenRef('theme.surfaces.surface-900'),
+    'bg-disabled': tokenRef('primitives.gray.400'),
+  },
+  dark: {
+    'bg-canvas': tokenRef('theme.surfaces.surface-950'),
+    'bg-surface': tokenRef('theme.surfaces.surface-900'),
+    'bg-surface-raised': tokenRef('theme.surfaces.surface-800'),
+    'bg-mask': tokenRef('primitives.alpha.white.50'),
+    'bg-surface-overlay': tokenRef('theme.surfaces.surface-700'),
+    'bg-hover': tokenRef('primitives.alpha.white.100'),
+    'bg-active': tokenRef('primitives.alpha.white.50'),
+    'bg-backdrop': tokenRef('primitives.alpha.black.700'),
+    'bg-selected': tokenRef('theme.surfaces.surface-950'),
+    'bg-contrast': tokenRef('theme.surfaces.surface-50'),
+    'bg-disabled': tokenRef('primitives.gray.500'),
+  },
+};
+
+export default { background };

package/src/tokens/theme/border.js

@@ -0,0 +1,18 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const border = {
+  light: {
+    'border-default': tokenRef('theme.surfaces.surface-200'),
+    'border-muted': tokenRef('theme.surfaces.surface-100'),
+    'border-strong': tokenRef('primitives.base.black'),
+    'border-selected': tokenRef('brand.primary.primary-500'),
+  },
+  dark: {
+    'border-default': tokenRef('theme.surfaces.surface-800'),
+    'border-muted': tokenRef('theme.surfaces.surface-700'),
+    'border-strong': tokenRef('primitives.base.white'),
+    'border-selected': tokenRef('brand.primary.primary-500'),
+  },
+};
+
+export default { border };

package/src/tokens/theme/feedback/danger.js

@@ -0,0 +1,16 @@
+import { tokenRef } from '../../../scripts/refs.js';
+
+export const danger = {
+  light: {
+    danger: tokenRef('primitives.red.50'),
+    'danger-border': tokenRef('primitives.alpha.red.600'),
+    'danger-contrast': tokenRef('primitives.red.600'),
+  },
+  dark: {
+    danger: tokenRef('primitives.red.950'),
+    'danger-border': tokenRef('primitives.alpha.red.500'),
+    'danger-contrast': tokenRef('primitives.red.400'),
+  },
+};
+
+export default { danger };

package/src/tokens/theme/feedback/info.js

@@ -0,0 +1,16 @@
+import { tokenRef } from '../../../scripts/refs.js';
+
+export const info = {
+  light: {
+    info: tokenRef('brand.accent.accent-50'),
+    'info-border': tokenRef('primitives.alpha.violet.600'),
+    'info-contrast': tokenRef('brand.accent.accent-500'),
+  },
+  dark: {
+    info: tokenRef('brand.accent.accent-950'),
+    'info-border': tokenRef('primitives.alpha.violet.400'),
+    'info-contrast': tokenRef('primitives.violet.500'),
+  },
+};
+
+export default { info };

package/src/tokens/theme/feedback/success.js

@@ -0,0 +1,16 @@
+import { tokenRef } from '../../../scripts/refs.js';
+
+export const success = {
+  light: {
+    success: tokenRef('primitives.green.50'),
+    'success-border': tokenRef('primitives.alpha.green.600'),
+    'success-contrast': tokenRef('primitives.green.700'),
+  },
+  dark: {
+    success: tokenRef('primitives.green.950'),
+    'success-border': tokenRef('primitives.alpha.green.400'),
+    'success-contrast': tokenRef('primitives.green.500'),
+  },
+};
+
+export default { success };

package/src/tokens/theme/feedback/warning.js

@@ -0,0 +1,16 @@
+import { tokenRef } from '../../../scripts/refs.js';
+
+export const warning = {
+  light: {
+    warning: tokenRef('primitives.yellow.50'),
+    'warning-border': tokenRef('primitives.alpha.yellow.600'),
+    'warning-contrast': tokenRef('primitives.yellow.700'),
+  },
+  dark: {
+    warning: tokenRef('primitives.yellow.950'),
+    'warning-border': tokenRef('primitives.alpha.yellow.300'),
+    'warning-contrast': tokenRef('primitives.yellow.300'),
+  },
+};
+
+export default { warning };

package/src/tokens/theme/primary.js

@@ -0,0 +1,18 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const primary = {
+  light: {
+    primary: tokenRef('brand.primary.primary-500'),
+    'primary-mask': tokenRef('primitives.alpha.orange.100'),
+    'primary-selected': tokenRef('primitives.alpha.orange.100'),
+    'primary-contrast': tokenRef('primitives.base.black'),
+  },
+  dark: {
+    primary: tokenRef('brand.primary.primary-500'),
+    'primary-mask': tokenRef('primitives.alpha.orange.100'),
+    'primary-selected': tokenRef('primitives.alpha.orange.100'),
+    'primary-contrast': tokenRef('primitives.base.white'),
+  },
+};
+
+export default { primary };

package/src/tokens/theme/ring.js

@@ -0,0 +1,12 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const ring = {
+  light: {
+    'ring-color': tokenRef('theme.surfaces.surface-950'),
+  },
+  dark: {
+    'ring-color': tokenRef('theme.surfaces.surface-0'),
+  },
+};
+
+export default { ring };

package/src/tokens/theme/secondary.js

@@ -0,0 +1,18 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const secondary = {
+  light: {
+    secondary: tokenRef('primitives.surface.950'),
+    'secondary-mask': tokenRef('primitives.alpha.black.50'),
+    'secondary-selected': tokenRef('primitives.surface.950'),
+    'secondary-contrast': tokenRef('primitives.base.white'),
+  },
+  dark: {
+    secondary: tokenRef('primitives.surface.0'),
+    'secondary-mask': tokenRef('primitives.alpha.white.100'),
+    'secondary-selected': tokenRef('primitives.surface.0'),
+    'secondary-contrast': tokenRef('primitives.base.black'),
+  },
+};
+
+export default { secondary };

package/src/tokens/theme/surfaces.js

@@ -0,0 +1,23 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+const shared = {
+  'surface-0': tokenRef('primitives.base.white'),
+  'surface-50': tokenRef('primitives.gray.50'),
+  'surface-100': tokenRef('primitives.gray.100'),
+  'surface-200': tokenRef('primitives.gray.200'),
+  'surface-300': tokenRef('primitives.gray.300'),
+  'surface-400': tokenRef('primitives.gray.400'),
+  'surface-500': tokenRef('primitives.gray.500'),
+  'surface-600': tokenRef('primitives.gray.600'),
+  'surface-700': tokenRef('primitives.gray.700'),
+  'surface-800': tokenRef('primitives.gray.800'),
+  'surface-900': tokenRef('primitives.gray.900'),
+  'surface-950': tokenRef('primitives.gray.950'),
+};
+
+export const surfaces = {
+  light: shared,
+  dark: shared,
+};
+
+export default { surfaces };

package/src/tokens/theme/text.js

@@ -0,0 +1,18 @@
+import { tokenRef } from '../../scripts/refs.js';
+
+export const text = {
+  light: {
+    'text-default': tokenRef('primitives.gray.900'),
+    'text-muted': tokenRef('primitives.gray.600'),
+    'text-disabled': tokenRef('primitives.gray.600'),
+    'text-link': tokenRef('theme.accent.accent'),
+  },
+  dark: {
+    'text-default': tokenRef('primitives.gray.50'),
+    'text-muted': tokenRef('primitives.gray.400'),
+    'text-disabled': tokenRef('primitives.gray.600'),
+    'text-link': tokenRef('theme.accent.accent'),
+  },
+};
+
+export default { text };

package/src/tokens/theme.js

@@ -0,0 +1,32 @@
+import { brandPrimitives, primitives, surfacePrimitives } from './primitives/colors/colors.js';
+import { semanticColors } from './semantic/colors.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,
+    },
+    textColor: semanticColors.text,
+    backgroundColor: semanticColors.background,
+    borderColor: semanticColors.border,
+  },
+};
+
+export default { theme };

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