@aziontech/theme 0.1.0

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

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

@@ -0,0 +1,24 @@
+/**
+ * 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/index.js

@@ -0,0 +1,16 @@
+/**
+ * Tokens public exports.
+ */
+
+export * from './primitives/colors.js';
+export * from './primitives/brand.js';
+export * from './colors-brand.js';
+export * from './semantic/text.js';
+export * from './semantic/backgrounds.js';
+export * from './semantic/borders.js';
+export * from './build/refs.js';
+export * from './build/resolve.js';
+export * from './build/css-vars.js';
+export * from './build/preset.js';
+export * from './build/tailwind-helper.js';
+export * from './build/tailwind-plugin.js';

package/src/tokens/primitives/brand.js

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

@@ -0,0 +1,133 @@
+/**
+ * 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',
+    },
+  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',
+    },
+};
+
+export default {
+  primitives,
+};

package/src/tokens/semantic/backgrounds.js

@@ -0,0 +1,48 @@
+/**
+ * SEMANTIC BACKGROUND TOKENS
+ *
+ * Generated from figma-reference-tokens-studio.
+ */
+
+import { tokenRef } from '../build/refs.js';
+
+export const backgroundSemantic = {
+  light: {
+    bgLayer1: tokenRef('brand.surfaces.surface-0'),
+    bgLayer2: tokenRef('brand.surfaces.surface-50'),
+    bgBase: tokenRef('brand.surfaces.surface-0'),
+    bgCanvas: tokenRef('brand.surfaces.surface-100'),
+    bgLayer1Hover: tokenRef('brand.surfaces.surface-50'),
+    bgLayer2Hover: 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')
+  },
+  dark: {
+    bgLayer1: tokenRef('brand.surfaces.surface-800'),
+    bgLayer2: tokenRef('brand.surfaces.surface-700'),
+    bgBase: tokenRef('brand.surfaces.surface-900'),
+    bgCanvas: tokenRef('brand.surfaces.surface-950'),
+    bgLayer1Hover: tokenRef('brand.surfaces.surface-700'),
+    bgLayer2Hover: tokenRef('brand.surfaces.surface-600'),
+    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')
+  },
+};
+
+export default {
+  backgroundSemantic,
+};

package/src/tokens/semantic/borders.js

@@ -0,0 +1,46 @@
+/**
+ * SEMANTIC BORDER TOKENS
+ *
+ * Generated from figma-reference-tokens-studio.
+ */
+
+import { tokenRef } from '../build/refs.js';
+
+export const borderSemantic = {
+  light: {
+    borderBase: tokenRef('brand.surfaces.surface-200'),
+    borderBaseHover: 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'),
+    borderSecondary: tokenRef('primitives.violet.500'),
+    borderWarningHover: tokenRef('primitives.yellow.500'),
+    borderSuccessHover: tokenRef('primitives.green.500'),
+    borderDangerHover: tokenRef('primitives.red.500'),
+    borderPrimaryHover: tokenRef('brand.primary.primary-600'),
+    borderSecondaryHover: tokenRef('primitives.violet.600'),
+    borderAccent: tokenRef('brand.accent.accent-500'),
+    borderAccentHover: tokenRef('brand.accent.accent-600')
+  },
+  dark: {
+    borderBase: tokenRef('brand.surfaces.surface-700'),
+    borderBaseHover: 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'),
+    borderSecondary: tokenRef('primitives.violet.500'),
+    borderWarningHover: tokenRef('primitives.yellow.500'),
+    borderSuccessHover: tokenRef('primitives.green.500'),
+    borderDangerHover: tokenRef('primitives.red.500'),
+    borderPrimaryHover: tokenRef('brand.primary.primary-400'),
+    borderSecondaryHover: tokenRef('primitives.violet.400'),
+    borderAccent: tokenRef('brand.accent.accent-500'),
+    borderAccentHover: tokenRef('brand.accent.accent-400')
+  },
+};
+
+export default {
+  borderSemantic,
+};

package/src/tokens/semantic/text.js

@@ -0,0 +1,78 @@
+/**
+ * SEMANTIC TEXT TOKENS
+ *
+ * Generated from figma-reference-tokens-studio.
+ */
+
+import { tokenRef } from '../build/refs.js';
+
+export const textSemantic = {
+  light: {
+    textColorBase: tokenRef('primitives.neutral.900'),
+    textColorMuted: tokenRef('primitives.neutral.600'),
+    textColorLink: tokenRef('primitives.blue.600'),
+    textColorCode: tokenRef('primitives.neutral.600'),
+    textColorMutedHover: tokenRef('primitives.neutral.500'),
+    textColorLinkHover: tokenRef('primitives.blue.700'),
+    textColorBaseHover: tokenRef('primitives.neutral.800'),
+    textColorPrimary: tokenRef('brand.primary.primary-500'),
+    textColorPrimaryHover: tokenRef('brand.primary.primary-600'),
+    textColorSecondary: tokenRef('primitives.violet.500'),
+    textColorSecondaryHover: tokenRef('primitives.violet.600'),
+    textColorAccent: tokenRef('brand.accent.accent-500'),
+    textColorAccentHover: tokenRef('brand.accent.accent-600'),
+    textBase: tokenRef('primitives.neutral.900'),
+    textMuted: tokenRef('primitives.neutral.600'),
+    textLink: tokenRef('primitives.blue.600'),
+    textCode: tokenRef('primitives.neutral.600'),
+    textMutedHover: tokenRef('primitives.neutral.500'),
+    textLinkHover: tokenRef('primitives.blue.700'),
+    textBaseHover: tokenRef('primitives.neutral.800'),
+    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')
+  },
+  dark: {
+    textColorBase: tokenRef('primitives.neutral.50'),
+    textColorMuted: tokenRef('primitives.neutral.400'),
+    textColorLink: tokenRef('primitives.blue.300'),
+    textColorCode: tokenRef('primitives.neutral.400'),
+    textColorMutedHover: tokenRef('primitives.neutral.500'),
+    textColorLinkHover: tokenRef('primitives.blue.300'),
+    textColorBaseHover: tokenRef('primitives.neutral.200'),
+    textColorPrimary: tokenRef('brand.primary.primary-500'),
+    textColorPrimaryHover: tokenRef('brand.primary.primary-400'),
+    textColorSecondary: tokenRef('primitives.violet.500'),
+    textColorSecondaryHover: tokenRef('primitives.violet.400'),
+    textColorAccent: tokenRef('brand.accent.accent-500'),
+    textColorAccentHover: tokenRef('brand.accent.accent-400'),
+    textBase: tokenRef('primitives.neutral.50'),
+    textMuted: tokenRef('primitives.neutral.400'),
+    textLink: tokenRef('primitives.blue.300'),
+    textCode: tokenRef('primitives.neutral.400'),
+    textMutedHover: tokenRef('primitives.neutral.500'),
+    textLinkHover: tokenRef('primitives.blue.300'),
+    textBaseHover: tokenRef('primitives.neutral.200'),
+    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')
+  },
+};
+
+export default {
+  textSemantic,
+};