@aziontech/theme 1.13.0 → 2.0.1

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

@@ -1,4 +1,6 @@
-// Tailwind plugin that registers semantic typography utility classes.
+// TODO: deprecated — substituído pelos tokens declarativos em
+// `texts.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');
@@ -7,6 +9,10 @@ const plugin = (() => {
   }
 })();
 
+/**
+ * Generate semantic typography style components
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
 export const semanticTexts = () => {
   return plugin(({ addComponents, theme }) => {
     const deprecatedTexts = {
@@ -40,7 +46,6 @@ export const semanticTexts = () => {
         fontFamily: 'Sora',
         letterSpacing: '-.05rem',
       },
-
       '.display-1-mobile': {
         fontSize: '2.5rem',
         lineHeight: '1.15',
@@ -71,7 +76,6 @@ export const semanticTexts = () => {
         fontFamily: 'Sora',
         letterSpacing: '-.05rem',
       },
-
       '.body-1': {
         fontSize: '1rem',
         lineHeight: '1.4rem',
@@ -86,7 +90,8 @@ export const semanticTexts = () => {
       },
     };
 
-    const texts = {
+    const mobile = {
+      ...deprecatedTexts,
       '.text-big-number-md': {
         fontSize: '2.25rem',
         lineHeight: '1.20',
@@ -157,9 +162,23 @@ export const semanticTexts = () => {
         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',
+      },
     };
 
-    const responsiveTexts = {
+    const medium = {
       [`@media (max-width: ${theme('screens.md', '768px')})`]: {
         '.text-big-number-md': {
           fontSize: '1.5rem',
@@ -213,6 +232,9 @@ export const semanticTexts = () => {
           fontSize: '0.625rem',
         },
       },
+    };
+
+    const large = {
       [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
         '.text-big-number-md': {
           fontSize: '1.25rem',
@@ -266,12 +288,11 @@ export const semanticTexts = () => {
           fontSize: '0.625rem',
         },
       },
-
     };
 
-    addComponents(deprecatedTexts);
-    addComponents(texts);
-    addComponents(responsiveTexts);
+    addComponents(mobile);
+    addComponents(medium);
+    addComponents(large);
   });
 };
 

package/src/tokens/theme/accent.js

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

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;