@aziontech/theme 1.12.0 → 2.0.0

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

@@ -1,21 +1,6 @@
-/**
- * Tailwind plugin to expose semantic text styles (typography).
- *
- * This adds typography components like display-1, body-1, etc.
- *
- * Usage in tailwind.config.js:
- * ```javascript
- * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin';
- *
- * export default {
- *   theme,
- *   plugins: [semanticTexts()],
- * };
- * ```
- */
-
-// Lazy-require to avoid hard dependency for consumers
+// 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');
@@ -25,13 +10,12 @@ const plugin = (() => {
 })();
 
 /**
- * Generate semantic text style components
+ * Generate semantic typography style components
  * @returns {import('tailwindcss/plugin').Plugin}
  */
 export const semanticTexts = () => {
   return plugin(({ addComponents, theme }) => {
     const deprecatedTexts = {
-      // Display styles - Desktop
       '.display-1': {
         fontSize: '3rem',
         lineHeight: '1.10',
@@ -62,8 +46,6 @@ export const semanticTexts = () => {
         fontFamily: 'Sora',
         letterSpacing: '-.05rem',
       },
-
-      // Display styles - Mobile
       '.display-1-mobile': {
         fontSize: '2.5rem',
         lineHeight: '1.15',
@@ -94,8 +76,6 @@ export const semanticTexts = () => {
         fontFamily: 'Sora',
         letterSpacing: '-.05rem',
       },
-
-      // Body styles
       '.body-1': {
         fontSize: '1rem',
         lineHeight: '1.4rem',
@@ -103,127 +83,169 @@ export const semanticTexts = () => {
         letterSpacing: '-.05rem',
       },
       '.body-2': {
-        fontSize: '.875rem',
+        fontSize: '0.875rem',
         lineHeight: '1.4rem',
         fontFamily: 'Sora',
         letterSpacing: '-.05rem',
       },
     };
 
-    const texts = {
+    const mobile = {
+      ...deprecatedTexts,
       '.text-big-number-md': {
-        fontSize: '4.5rem', // 7xl
+        fontSize: '2.25rem',
         lineHeight: '1.20',
       },
-        '.text-heading-2xl': {
-        fontSize: '3.75rem', // text-6xl
+      '.text-big-number-sm': {
+        fontSize: '1.25rem',
+        lineHeight: '1.20',
+      },
+      '.text-big-number-lg': {
+        fontSize: '3.75rem',
+        lineHeight: '1.20',
+      },
+      '.text-heading-2xl': {
+        fontSize: '3.75rem',
         lineHeight: '1.2',
       },
       '.text-heading-xl': {
-        fontSize: '2.25rem', // text-4xl
+        fontSize: '2.25rem',
         lineHeight: '1.2',
       },
       '.text-heading-lg': {
-        fontSize: '1.875rem', // text-3xl
+        fontSize: '1.875rem',
         lineHeight: '1.2',
       },
       '.text-heading-md': {
-        fontSize: '1.5rem', // text-2xl
+        fontSize: '1.5rem',
         lineHeight: '1.2',
       },
       '.text-heading-sm': {
-        fontSize: '1.125rem', // text-lg
+        fontSize: '1.125rem',
         lineHeight: '1.2',
       },
-        '.text-body-lg': {
-        fontSize: '18px', // text-lg
+      '.text-body-lg': {
+        fontSize: '1.125rem',
         lineHeight: '1.5',
       },
       '.text-body-md': {
-        fontSize: '16px', // text-base
+        fontSize: '1rem',
         lineHeight: '1.5',
       },
       '.text-body-sm': {
-        fontSize: '14px', // text-sm
+        fontSize: '0.875rem',
         lineHeight: '1.5',
       },
       '.text-body-xs': {
-        fontSize: '12px', // text-xs
+        fontSize: '0.75rem',
         lineHeight: '1.5',
       },
       '.text-body-xss': {
-        fontSize: '10px',
+        fontSize: '0.625rem',
         lineHeight: '1.5',
       },
       '.text-overline-md': {
-        fontSize: '14px', // text-sm
+        fontSize: '0.875rem',
         lineHeight: '1.4',
         letterSpacing: '0.08em',
         textTransform: 'uppercase',
       },
       '.text-overline-sm': {
-        fontSize: '12px', // text-xs
+        fontSize: '0.75rem',
         lineHeight: '1.4',
         letterSpacing: '0.08em',
         textTransform: 'uppercase',
       },
       '.text-overline-xs': {
-        fontSize: '10px',
+        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',
+      },
     };
 
-    const responsiveTexts = {
+    const medium = {
       [`@media (max-width: ${theme('screens.md', '768px')})`]: {
         '.text-big-number-md': {
-          fontSize: '3rem',
+          fontSize: '1.5rem',
+          lineHeight: '1.20',
+        },
+        '.text-big-number-sm': {
+          fontSize: '1.25rem',
+          lineHeight: '1.20',
+        },
+        '.text-big-number-lg': {
+          fontSize: '2.25rem',
           lineHeight: '1.20',
         },
         '.text-heading-2xl': {
-          fontSize: '3rem', // text-5xl
+          fontSize: '3rem',
         },
         '.text-heading-xl': {
-          fontSize: '1.875rem', // text-3xl
+          fontSize: '1.875rem',
         },
         '.text-heading-lg': {
-          fontSize: '1.125rem', // text-lg
+          fontSize: '1.125rem',
         },
         '.text-heading-md': {
-          fontSize: '1.25rem', // text-xl
+          fontSize: '1.25rem',
         },
         '.text-heading-sm': {
-          fontSize: '1rem', // text-base
+          fontSize: '1rem',
         },
         '.text-body-lg': {
-          fontSize: '16px', // text-base
+          fontSize: '1rem',
         },
         '.text-body-md': {
-          fontSize: '16px', // mantém
+          fontSize: '1rem',
         },
         '.text-body-sm': {
-          fontSize: '14px',
+          fontSize: '0.875rem',
         },
         '.text-body-xs': {
-          fontSize: '12px',
+          fontSize: '0.75rem',
         },
         '.text-body-xss': {
-          fontSize: '10px',
+          fontSize: '0.625rem',
         },
         '.text-overline-md': {
-          fontSize: '14px',
+          fontSize: '0.875rem',
         },
         '.text-overline-sm': {
-          fontSize: '12px',
+          fontSize: '0.75rem',
         },
         '.text-overline-xs': {
-          fontSize: '10px',
+          fontSize: '0.625rem',
         },
       },
+    };
+
+    const large = {
       [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
         '.text-big-number-md': {
-          fontSize: '3rem',
+          fontSize: '1.25rem',
+          lineHeight: '1.20',
+        },
+        '.text-big-number-sm': {
+          fontSize: '1rem',
+          lineHeight: '1.20',
+        },
+        '.text-big-number-lg': {
+          fontSize: '1.5rem',
           lineHeight: '1.20',
         },
         '.text-heading-2xl': {
@@ -242,36 +264,35 @@ export const semanticTexts = () => {
           fontSize: '0.875rem',
         },
         '.text-body-lg': {
-          fontSize: '16px',
+          fontSize: '1rem',
         },
         '.text-body-md': {
-          fontSize: '16px',
+          fontSize: '1rem',
         },
         '.text-body-sm': {
-          fontSize: '14px',
+          fontSize: '0.875rem',
         },
         '.text-body-xs': {
-          fontSize: '12px',
+          fontSize: '0.75rem',
         },
         '.text-body-xss': {
-          fontSize: '10px',
+          fontSize: '0.625rem',
         },
         '.text-overline-md': {
-          fontSize: '12px',
+          fontSize: '0.75rem',
         },
         '.text-overline-sm': {
-          fontSize: '12px',
+          fontSize: '0.75rem',
         },
         '.text-overline-xs': {
-          fontSize: '10px',
+          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,
-};