@aziontech/theme 1.13.0 → 2.0.1

package/src/tokens/primitives/typography/line-height.js

@@ -0,0 +1,13 @@
+export const lineHeight = {
+  none: '0',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+};
+
+export default { lineHeight };

package/src/tokens/primitives/typography/tracking.js

@@ -0,0 +1,10 @@
+export const tracking = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0em',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+};
+
+export default { tracking };

package/src/{tailwind/semantic-animations-plugin.js → tokens/semantic/animations.js}

@@ -1,21 +1,3 @@
-/**
- * Tailwind plugin to expose semantic animations and keyframes.
- *
- * This adds animation utilities and keyframes for common UI animations.
- *
- * Usage in tailwind.config.js:
- * ```javascript
- * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin';
- *
- * export default {
- *   theme,
- *   plugins: [semanticAnimations()],
- * };
- * ```
- */
-
-// Lazy-require to avoid hard dependency for consumers
 const plugin = (() => {
   try {
     return require('tailwindcss/plugin');
@@ -28,8 +10,8 @@ const plugin = (() => {
  * Generate semantic animation utilities and keyframes
  * @returns {import('tailwindcss/plugin').Plugin}
  */
-export const semanticAnimations = () => {
-  return plugin(({ addUtilities, addComponents, theme }) => {
+export const animations = () => {
+  return plugin(({ addUtilities, addComponents }) => {
     // Animation utilities
     const animations = {
       '.animate-fade-in': {
@@ -47,6 +29,14 @@ export const semanticAnimations = () => {
       '.animate-highlight-fade': {
         animation: 'highlight ease-in forwards',
       },
+      '.animate-popup-scale-in': {
+        animation: 'popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1)',
+        transformOrigin: 'var(--popup-origin, center)',
+      },
+      '.animate-popup-scale-out': {
+        animation: 'popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53)',
+        transformOrigin: 'var(--popup-origin, center)',
+      },
     };
 
     // Keyframes components
@@ -71,6 +61,14 @@ export const semanticAnimations = () => {
         '0%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
         '100%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
       },
+      '@keyframes popupScaleIn': {
+        '0%': { opacity: '0', transform: 'scale(0.95)' },
+        '100%': { opacity: '1', transform: 'scale(1)' },
+      },
+      '@keyframes popupScaleOut': {
+        '0%': { opacity: '1', transform: 'scale(1)' },
+        '100%': { opacity: '0', transform: 'scale(0.95)' },
+      },
     };
 
     const variants = ['responsive', 'hover', 'focus', 'active', 'motion-safe', 'motion-reduce'];
@@ -79,4 +77,4 @@ export const semanticAnimations = () => {
   });
 };
 
-export default semanticAnimations;
+export default animations;

package/src/tokens/semantic/colors.js

@@ -0,0 +1,138 @@
+/**
+ * SEMANTIC COLOR TOKENS
+ *
+ * Single source of truth for semantic color tokens.
+ *
+ * - `semanticColorsData`: token refs grouped by category (`text`, `background`,
+ *   `border`) and mode (`light`, `dark`). Consumed by `tokens/build/css-vars.js`
+ *   to emit `:root` / `.dark` CSS variables.
+ * - `semanticColors`: derived map of `var(--…)` strings, grouped by category,
+ *   consumed by `tokens/theme.js` to extend Tailwind's `textColor`,
+ *   `backgroundColor`, and `borderColor`. Generates utilities like
+ *   `text-default`, `bg-surface`, `border-danger` natively — no plugin needed.
+ *
+ * Adding a new semantic color: add a key under both `light` and `dark` in the
+ * relevant category here. The CSS variable and the Tailwind utility are both
+ * derived automatically.
+ */
+
+import { tokenRef } from '../../scripts/refs.js';
+
+export const semanticColorsData = {
+  text: {
+    light: {
+      default: tokenRef('primitives.gray.900'),
+      muted: tokenRef('primitives.gray.600'),
+      link: tokenRef('primitives.blue.600'),
+      code: tokenRef('primitives.gray.600'),
+      'link-hover': tokenRef('primitives.blue.700'),
+      primary: tokenRef('brand.primary.primary-500'),
+      'primary-hover': tokenRef('brand.primary.primary-600'),
+      accent: tokenRef('brand.accent.accent-500'),
+      'accent-hover': tokenRef('brand.accent.accent-600'),
+      'danger-hover': tokenRef('primitives.red.500'),
+      'warning-hover': tokenRef('primitives.yellow.500'),
+      'success-hover': tokenRef('primitives.green.500'),
+      success: tokenRef('primitives.green.600'),
+      danger: tokenRef('primitives.red.600'),
+      warning: tokenRef('primitives.yellow.600'),
+    },
+    dark: {
+      default: tokenRef('primitives.gray.50'),
+      muted: tokenRef('primitives.gray.400'),
+      link: tokenRef('primitives.blue.400'),
+      code: tokenRef('primitives.gray.400'),
+      'link-hover': tokenRef('primitives.blue.300'),
+      primary: tokenRef('brand.primary.primary-500'),
+      'primary-hover': tokenRef('brand.primary.primary-400'),
+      accent: tokenRef('brand.accent.accent-500'),
+      'accent-hover': tokenRef('brand.accent.accent-400'),
+      'danger-hover': tokenRef('primitives.red.500'),
+      'warning-hover': tokenRef('primitives.yellow.500'),
+      'success-hover': tokenRef('primitives.green.500'),
+      success: tokenRef('primitives.green.400'),
+      danger: tokenRef('primitives.red.400'),
+      warning: tokenRef('primitives.yellow.400'),
+    },
+  },
+  background: {
+    light: {
+      'surface-raised': tokenRef('brand.surfaces.surface-0'),
+      'surface-overlay': tokenRef('brand.surfaces.surface-50'),
+      surface: tokenRef('brand.surfaces.surface-0'),
+      canvas: tokenRef('brand.surfaces.surface-100'),
+      'danger-hover': tokenRef('primitives.red.400'),
+      'warning-hover': tokenRef('primitives.yellow.400'),
+      'success-hover': 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'),
+      'primary-hover': tokenRef('brand.primary.primary-600'),
+      primary: tokenRef('brand.primary.primary-500'),
+      'primary-mask': tokenRef('primitives.alpha.brand.primary.65'),
+    },
+    dark: {
+      'surface-raised': tokenRef('brand.surfaces.surface-800'),
+      'surface-overlay': tokenRef('brand.surfaces.surface-700'),
+      surface: tokenRef('brand.surfaces.surface-900'),
+      canvas: tokenRef('brand.surfaces.surface-950'),
+      'danger-hover': tokenRef('primitives.red.600'),
+      'warning-hover': tokenRef('primitives.yellow.600'),
+      'success-hover': 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'),
+      'primary-hover': tokenRef('brand.primary.primary-400'),
+      primary: tokenRef('brand.primary.primary-500'),
+      'primary-mask': tokenRef('primitives.alpha.brand.primary.65'),
+    },
+  },
+  border: {
+    light: {
+      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'),
+      'warning-hover': tokenRef('primitives.yellow.500'),
+      'success-hover': tokenRef('primitives.green.500'),
+      'danger-hover': tokenRef('primitives.red.500'),
+      'primary-hover': tokenRef('brand.primary.primary-600'),
+      'accent-hover': tokenRef('brand.accent.accent-600'),
+      subtle: tokenRef('brand.surfaces.surface-200'),
+    },
+    dark: {
+      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'),
+      'warning-hover': tokenRef('primitives.yellow.500'),
+      'success-hover': tokenRef('primitives.green.500'),
+      'danger-hover': tokenRef('primitives.red.500'),
+      'primary-hover': tokenRef('brand.primary.primary-400'),
+      'accent-hover': tokenRef('brand.accent.accent-400'),
+      subtle: tokenRef('brand.surfaces.surface-700'),
+    },
+  },
+};
+
+const toCssVarMap = (category, mode) =>
+  Object.fromEntries(Object.keys(mode).map((key) => [key, `var(--${category}-${key})`]));
+
+export const semanticColors = {
+  text: toCssVarMap('text', semanticColorsData.text.light),
+  background: toCssVarMap('background', semanticColorsData.background.light),
+  border: toCssVarMap('border', semanticColorsData.border.light),
+};
+
+export default {
+  semanticColors,
+  semanticColorsData,
+};

package/src/tokens/semantic/containers.data.js

@@ -0,0 +1,18 @@
+/**
+ * Declarative container tokens (mobile-first).
+ *
+ * Each entry maps a token key to a breakpoint map. `_` is the default;
+ * any other key must exist in tokens/primitives/breakpoints.js.
+ *
+ * Values are ported from the legacy `containers.js` plugin. The `xl` bucket
+ * used to be wrapped in `@media (max-width: xl)` — orphan / never matched
+ * cleanly — and was corrected to `min-width` here.
+ */
+
+export const containersData = {
+  px: { _: '1rem', sm: '2.5rem', xl: '0' },
+  py: { _: '4rem', sm: '8rem', xl: '12rem' },
+  'max-width': { _: '28rem', sm: '64rem', xl: '80rem' },
+};
+
+export default { containersData };

package/src/tokens/semantic/containers.js

@@ -0,0 +1,70 @@
+// TODO: deprecated — substituído pelos tokens declarativos em
+// `containers.data.js` e pelo CSS gerado em `dist/globals.css` via
+// `src/scripts/build-tokens.mjs`. Remover quando consumers migrarem.
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic spacing style components
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const containers = () => {
+  return plugin(({ addComponents, theme }) => {
+    const mobile = {
+      '.max-container-width': {
+        maxWidth: theme('container.md'),
+      },
+      '.px-container': {
+        paddingLeft: theme('spacing.4'),
+        paddingRight: theme('spacing.4'),
+      },
+      '.py-container': {
+        paddingTop: theme('spacing.16'),
+        paddingBottom: theme('spacing.16'),
+      },
+    }
+
+    const medium = {
+      [`@media (min-width: ${theme('screens.sm',)})`]: {
+        '.max-container-width': {
+          maxWidth: theme('container.5xl'),
+        },
+        '.px-container': {
+          paddingLeft: theme('spacing.10'),
+          paddingRight: theme('spacing.10'),
+        },
+        '.py-container': {
+          paddingTop: theme('spacing.32'),
+          paddingBottom: theme('spacing.32'),
+        },
+      },
+    }
+
+    const large = {
+      [`@media (max-width: ${theme('screens.xl',)})`]: {
+        '.max-container-width': {
+          maxWidth: theme('container.7xl'),
+        },
+        '.px-container': {
+          paddingLeft: theme('spacing.0'),
+          paddingRight: theme('spacing.0'),
+        },
+        '.py-container': {
+          paddingTop: theme('spacing.48'),
+          paddingBottom: theme('spacing.48'),
+        },
+      },
+    }
+
+    addComponents(mobile);
+    addComponents(medium);
+    addComponents(large);
+  });
+};
+
+export default containers;

package/src/tokens/semantic/spacings.data.js

@@ -0,0 +1,18 @@
+/**
+ * Declarative spacing tokens (mobile-first).
+ *
+ * Each value maps to two utilities: `.gap-<key>` and `.p-<key>`, both backed
+ * by the same CSS variable. Values ported from `spacings.js`.
+ */
+
+export const spacingsData = {
+  'spacing-xxl': { _: '2rem', sm: '4rem', xl: '6rem' },
+  'spacing-xl': { _: '1.5rem', sm: '2rem', xl: '3rem' },
+  'spacing-lg': { _: '1rem', sm: '1.5rem' },
+  'spacing-md': { _: '1rem' },
+  'spacing-sm': { _: '0.75rem' },
+  'spacing-xs': { _: '0.5rem' },
+  'spacing-xxs': { _: '0.25rem' },
+};
+
+export default { spacingsData };

package/src/tokens/semantic/spacings.js

@@ -0,0 +1,163 @@
+// TODO: deprecated — substituído pelos tokens declarativos em
+// `spacings.data.js` e pelo CSS gerado em `dist/globals.css` via
+// `src/scripts/build-tokens.mjs`. Remover quando consumers migrarem.
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic spacing components
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const spacingElements = () => {
+  return plugin(({ addComponents, theme }) => {
+    const mobile = {
+      '.gap-spacing-elements-xxl': {
+        gap: theme('spacing.8'),
+      },
+      '.gap-spacing-elements-xl': {
+        gap: theme('spacing.6'),
+      },
+      '.gap-spacing-elements-lg': {
+        gap: theme('spacing.4'),
+      },
+      '.gap-spacing-elements-md': {
+        gap: theme('spacing.4'),
+      },
+      '.gap-spacing-elements-sm': {
+        gap: theme('spacing.3'),
+      },
+      '.gap-spacing-elements-xs': {
+        gap: theme('spacing.2'),
+      },
+      '.gap-spacing-elements-xxs': {
+        gap: theme('spacing.1'),
+      },
+      '.p-spacing-elements-xxl': {
+        padding: theme('spacing.8'),
+      },
+      '.p-spacing-elements-xl': {
+        padding: theme('spacing.6'),
+      },
+      '.p-spacing-elements-lg': {
+        padding: theme('spacing.4'),
+      },
+      '.p-spacing-elements-md': {
+        padding: theme('spacing.4'),
+      },
+      '.p-spacing-elements-sm': {
+        padding: theme('spacing.3'),
+      },
+      '.p-spacing-elements-xs': {
+        padding: theme('spacing.2'),
+      },
+      '.p-spacing-elements-xxs': {
+        padding: theme('spacing.1'),
+      },
+    };
+
+    const medium = {
+      [`@media (min-width: ${theme('screens.sm')})`]: {
+        '.gap-spacing-elements-xxl': {
+          gap: theme('spacing.16'),
+        },
+        '.gap-spacing-elements-xl': {
+          gap: theme('spacing.8'),
+        },
+        '.gap-spacing-elements-lg': {
+          gap: theme('spacing.6'),
+        },
+        '.gap-spacing-elements-md': {
+          gap: theme('spacing.4'),
+        },
+        '.gap-spacing-elements-sm': {
+          gap: theme('spacing.3'),
+        },
+        '.gap-spacing-elements-xs': {
+          gap: theme('spacing.2'),
+        },
+        '.gap-spacing-elements-xxs': {
+          gap: theme('spacing.1'),
+        },
+        '.p-spacing-elements-xxl': {
+          padding: theme('spacing.16'),
+        },
+        '.p-spacing-elements-xl': {
+          padding: theme('spacing.8'),
+        },
+        '.p-spacing-elements-lg': {
+          padding: theme('spacing.6'),
+        },
+        '.p-spacing-elements-md': {
+          padding: theme('spacing.4'),
+        },
+        '.p-spacing-elements-sm': {
+          padding: theme('spacing.3'),
+        },
+        '.p-spacing-elements-xs': {
+          padding: theme('spacing.2'),
+        },
+        '.p-spacing-elements-xxs': {
+          padding: theme('spacing.1'),
+        },
+      },
+    };
+
+    const large = {
+      [`@media (min-width: ${theme('screens.xl')})`]: {
+        '.gap-spacing-elements-xxl': {
+          gap: theme('spacing.24'),
+        },
+        '.gap-spacing-elements-xl': {
+          gap: theme('spacing.12'),
+        },
+        '.gap-spacing-elements-lg': {
+          gap: theme('spacing.6'),
+        },
+        '.gap-spacing-elements-md': {
+          gap: theme('spacing.4'),
+        },
+        '.gap-spacing-elements-sm': {
+          gap: theme('spacing.3'),
+        },
+        '.gap-spacing-elements-xs': {
+          gap: theme('spacing.2'),
+        },
+        '.gap-spacing-elements-xxs': {
+          gap: theme('spacing.1'),
+        },
+        '.p-spacing-elements-xxl': {
+          padding: theme('spacing.24'),
+        },
+        '.p-spacing-elements-xl': {
+          padding: theme('spacing.12'),
+        },
+        '.p-spacing-elements-lg': {
+          padding: theme('spacing.6'),
+        },
+        '.p-spacing-elements-md': {
+          padding: theme('spacing.4'),
+        },
+        '.p-spacing-elements-sm': {
+          padding: theme('spacing.3'),
+        },
+        '.p-spacing-elements-xs': {
+          padding: theme('spacing.2'),
+        },
+        '.p-spacing-elements-xxs': {
+          padding: theme('spacing.1'),
+        },
+      },
+    };
+
+    addComponents(mobile);
+    addComponents(medium);
+    addComponents(large);
+  });
+};
+
+export default spacingElements;

package/src/tokens/semantic/texts.data.js

@@ -0,0 +1,103 @@
+/**
+ * Declarative text style tokens (mobile-first).
+ *
+ * Each entry is a bundle of CSS properties; each property is either a string
+ * (static) or a breakpoint map `{ _, sm, md, lg, xl, 2xl }`. Values ported
+ * from the legacy `texts.js` plugin — direction inverted from desktop-first
+ * (max-width) to mobile-first (min-width).
+ *
+ * Mapping used during the port:
+ *   old `large`  (≤640) → `_`
+ *   old `medium` (≤768) → `sm` (≥640)
+ *   old `mobile` (default, applied >768) → `md` (≥768)
+ */
+
+export const textsData = {
+  'text-big-number-md': {
+    fontSize: { _: '1.25rem', sm: '1.5rem', md: '2.25rem' },
+    lineHeight: '1.20',
+  },
+  'text-big-number-sm': {
+    fontSize: { _: '1rem', sm: '1.25rem' },
+    lineHeight: '1.20',
+  },
+  'text-big-number-lg': {
+    fontSize: { _: '1.5rem', sm: '2.25rem', md: '3.75rem' },
+    lineHeight: '1.20',
+  },
+  'text-heading-2xl': {
+    fontSize: { _: '1.875rem', sm: '3rem', md: '3.75rem' },
+    lineHeight: '1.2',
+  },
+  'text-heading-xl': {
+    fontSize: { _: '1.25rem', sm: '1.875rem', md: '2.25rem' },
+    lineHeight: '1.2',
+  },
+  'text-heading-lg': {
+    fontSize: { _: '1.125rem', md: '1.875rem' },
+    lineHeight: '1.2',
+  },
+  'text-heading-md': {
+    fontSize: { _: '1rem', sm: '1.25rem', md: '1.5rem' },
+    lineHeight: '1.2',
+  },
+  'text-heading-sm': {
+    fontSize: { _: '0.875rem', sm: '1rem', md: '1.125rem' },
+    lineHeight: '1.2',
+  },
+  'text-body-lg': {
+    fontSize: { _: '1rem', md: '1.125rem' },
+    lineHeight: '1.5',
+  },
+  'text-body-md': {
+    fontSize: '1rem',
+    lineHeight: '1.5',
+  },
+  'text-body-sm': {
+    fontSize: '0.875rem',
+    lineHeight: '1.5',
+  },
+  'text-body-xs': {
+    fontSize: '0.75rem',
+    lineHeight: '1.5',
+  },
+  'text-body-xss': {
+    fontSize: '0.625rem',
+    lineHeight: '1.5',
+  },
+  'text-overline-md': {
+    fontSize: { _: '0.75rem', sm: '0.875rem' },
+    lineHeight: '1.4',
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase',
+  },
+  'text-overline-sm': {
+    fontSize: '0.75rem',
+    lineHeight: '1.4',
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase',
+  },
+  'text-overline-xs': {
+    fontSize: '0.625rem',
+    lineHeight: '1.4',
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase',
+  },
+  'text-button-lg': {
+    fontFamily: 'Proto Mono',
+    fontSize: '0.875rem',
+    fontWeight: '600',
+    lineHeight: '1',
+    letterSpacing: '0',
+  },
+  'text-button-md': {
+    fontFamily: 'Proto Mono',
+    fontSize: '0.75rem',
+    fontWeight: '600',
+    lineHeight: '1',
+    letterSpacing: '0',
+  },
+};
+
+
+export default { textsData };