@aziontech/theme 2.2.1 → 2.3.1

package/dist/v3/globals.css

@@ -534,6 +534,11 @@
     --text-button-md-font-weight: 600;
     --text-button-md-line-height: 1;
     --text-button-md-letter-spacing: 0;
+    --text-link-font-size: inherit;
+    --text-link-line-height: inherit;
+    --text-link-color: var(--text-link);
+    --text-link-border-radius: var(--shape-elements);
+    --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);
 
     /* ── Semantic colors ── */
     --text-default: #141414;
@@ -835,4 +840,10 @@
   .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
   .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
   .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
+  .text-link { font-size: var(--text-link-font-size); line-height: var(--text-link-line-height); color: var(--text-link-color); border-radius: var(--text-link-border-radius); transition: var(--text-link-transition); }
+  .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
+  .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) {
+    .text-link { transition: none; }
+  }
 }

package/dist/v3/globals.scss

@@ -534,6 +534,11 @@
     --text-button-md-font-weight: 600;
     --text-button-md-line-height: 1;
     --text-button-md-letter-spacing: 0;
+    --text-link-font-size: inherit;
+    --text-link-line-height: inherit;
+    --text-link-color: var(--text-link);
+    --text-link-border-radius: var(--shape-elements);
+    --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);
 
     /* ── Semantic colors ── */
     --text-default: #141414;
@@ -835,4 +840,10 @@
   .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
   .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
   .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
+  .text-link { font-size: var(--text-link-font-size); line-height: var(--text-link-line-height); color: var(--text-link-color); border-radius: var(--text-link-border-radius); transition: var(--text-link-transition); }
+  .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
+  .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) {
+    .text-link { transition: none; }
+  }
 }

package/dist/v4/globals.css

@@ -529,6 +529,11 @@
   --text-button-md-font-weight: 600;
   --text-button-md-line-height: 1;
   --text-button-md-letter-spacing: 0;
+  --text-link-font-size: inherit;
+  --text-link-line-height: inherit;
+  --text-link-color: var(--text-link);
+  --text-link-border-radius: var(--shape-elements);
+  --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);
 
   @media (min-width: 640px) {
     --container-px: 2.5rem;
@@ -613,4 +618,10 @@
   .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
   .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
   .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
+  .text-link { font-size: var(--text-link-font-size); line-height: var(--text-link-line-height); color: var(--text-link-color); border-radius: var(--text-link-border-radius); transition: var(--text-link-transition); }
+  .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
+  .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) {
+    .text-link { transition: none; }
+  }
 }

package/dist/v4/globals.scss

@@ -529,6 +529,11 @@
   --text-button-md-font-weight: 600;
   --text-button-md-line-height: 1;
   --text-button-md-letter-spacing: 0;
+  --text-link-font-size: inherit;
+  --text-link-line-height: inherit;
+  --text-link-color: var(--text-link);
+  --text-link-border-radius: var(--shape-elements);
+  --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);
 
   @media (min-width: 640px) {
     --container-px: 2.5rem;
@@ -613,4 +618,10 @@
   .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
   .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
   .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
+  .text-link { font-size: var(--text-link-font-size); line-height: var(--text-link-line-height); color: var(--text-link-color); border-radius: var(--text-link-border-radius); transition: var(--text-link-transition); }
+  .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
+  .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) {
+    .text-link { transition: none; }
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -15,8 +15,11 @@
     "build:tokens": "node src/scripts/build-tokens.mjs",
     "build:tokens:v3": "node src/scripts/build-tokens.mjs --target=v3",
     "build:tokens:v4": "node src/scripts/build-tokens.mjs --target=v4",
-    "build:css:v3": "npm run build:tokens:v3 && tailwindcss -c dist/v3/tailwind.config.js -i dist/v3/globals.css -o dist/v3/output.css",
-    "test:tokens:v3": "npm run build:css:v3 && open src/tests/tokens.html"
+    "build:css:v3": "pnpm build:tokens:v3 && tailwindcss -c dist/v3/tailwind.config.js -i dist/v3/globals.css -o dist/v3/output.css",
+    "test:tokens:v3": "pnpm build:css:v3 && open src/tests/tokens.html",
+    "clean:dts": "find src -name '*.d.ts' -delete && find src -name '*.d.ts.map' -delete",
+    "build:dts": "pnpm clean:dts && vue-tsc --declaration --emitDeclarationOnly",
+    "prepack": "pnpm build:dts"
   },
   "publishConfig": {
     "access": "public"
@@ -31,8 +34,11 @@
     "ui-kit",
     "token-generator"
   ],
-  "devDependencies": {
+  "dependencies": {
     "tailwindcss": "^3.4.17",
+    "vue-tsc": "^3.2.5"
+  },
+  "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^10.0.1",
     "@semantic-release/exec": "^6.0.3",
@@ -54,12 +60,11 @@
   "exports": {
     ".": "./default.js",
     "./animations": "./src/tokens/primitives/animations/animate.js",
-    "./scripts/compile-primitives": "./src/scripts/compile-primitives.js",
-    "./scripts/compile-theme": "./src/scripts/compile-theme.js",
     "./tailwind-preset": "./dist/v3/tailwind-preset.js",
     "./tailwind-preset/v3": "./dist/v3/tailwind-preset.js",
     "./tailwind/semantic-spacings-plugin": "./src/tokens/semantic/spacings.js",
     "./tailwind/semantic-texts-plugin": "./src/tokens/semantic/texts.js",
+    "./tokens/semantic/texts.data": "./src/tokens/semantic/texts.data.js",
     "./tailwind/semantic-animations-plugin": "./src/tokens/semantic/animations.js",
     "./globals.css": "./dist/v3/globals.css",
     "./globals.scss": "./dist/v3/globals.scss",

package/src/scripts/build-tokens.mjs

@@ -70,6 +70,7 @@ const flattenBundle = (data) => {
   const byBp = {};
   for (const [key, bundle] of Object.entries(data)) {
     for (const [prop, val] of Object.entries(bundle)) {
+      if (prop === 'states') continue;
       const varName = `--${key}-${kebab(prop)}`;
       for (const [bp, v] of Object.entries(splitResponsive(val))) {
         (byBp[bp] ||= {})[varName] = v;
@@ -79,6 +80,16 @@ const flattenBundle = (data) => {
   return byBp;
 };
 
+const pseudoClassName = (key) => {
+  if (key === 'focusVisible') return 'focus-visible';
+  return key;
+};
+
+const formatStateDecls = (rules) =>
+  Object.entries(rules)
+    .map(([prop, val]) => `${kebab(prop)}: ${val}`)
+    .join('; ');
+
 const SEMANTIC_PREFIXES = ['--text-', '--background-', '--border-'];
 const isSemanticVar = (key) => SEMANTIC_PREFIXES.some((p) => key.startsWith(p));
 const pickSemantic = (vars) =>
@@ -122,10 +133,24 @@ const emitComponentClasses = (indent = '  ') => {
   lines.push('');
   lines.push(`${indent}/* ── Texts ── */`);
   for (const [key, bundle] of Object.entries(textsData)) {
-    const decls = Object.keys(bundle)
+    const baseProps = Object.keys(bundle).filter((prop) => prop !== 'states');
+    const decls = baseProps
       .map((prop) => `${kebab(prop)}: var(--${key}-${kebab(prop)});`)
       .join(' ');
     lines.push(`${indent}.${key} { ${decls} }`);
+
+    if (bundle.states) {
+      for (const [pseudo, rules] of Object.entries(bundle.states)) {
+        const pseudoSuffix = pseudoClassName(pseudo);
+        lines.push(`${indent}.${key}:${pseudoSuffix} { ${formatStateDecls(rules)}; }`);
+      }
+    }
+
+    if (bundle.transition) {
+      lines.push(`${indent}@media (prefers-reduced-motion: reduce) {`);
+      lines.push(`${indent}  .${key} { transition: none; }`);
+      lines.push(`${indent}}`);
+    }
   }
 
   return lines.join('\n');
@@ -227,6 +252,7 @@ const buildPresetData = () => {
   const fontSize = {};
   for (const [key, bundle] of Object.entries(textsData)) {
     if (!('fontSize' in bundle)) continue;
+    if (bundle.fontSize === 'inherit') continue;
     const meta = {};
     if ('lineHeight' in bundle) meta.lineHeight = `var(--${key}-line-height)`;
     if ('letterSpacing' in bundle) meta.letterSpacing = `var(--${key}-letter-spacing)`;

package/src/scripts/css-vars.d.ts

@@ -0,0 +1,7 @@
+export function createCssVars(): {
+    light: {};
+    dark: {};
+};
+export function cssVarsString(): string;
+export function injectCssVars(): HTMLStyleElement;
+//# sourceMappingURL=css-vars.d.ts.map

package/src/scripts/css-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["css-vars.js"],"names":[],"mappings":"AAYO;;;EAQH;AAEG,wCAWN;AAEM,kDAMN"}

package/src/scripts/refs.d.ts

@@ -0,0 +1,5 @@
+export function tokenRef(path: any): {
+    __ref: any;
+};
+export function isTokenRef(value: any): boolean;
+//# sourceMappingURL=refs.d.ts.map

package/src/scripts/refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAIO;;EAA4C;AAE5C,gDAA6F"}

package/src/scripts/resolve.d.ts

@@ -0,0 +1,5 @@
+export function resolveRefsToCssVars(tokens: any): {
+    light: {};
+    dark: {};
+};
+//# sourceMappingURL=resolve.d.ts.map

package/src/scripts/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["resolve.js"],"names":[],"mappings":"AAiCO;;;EAsEN"}

package/src/tests/tokens.html

@@ -37,6 +37,9 @@
       <p class="text-heading-sm">heading-sm — responsive</p>
       <p class="text-body-lg">body-lg — sm only at md</p>
       <p class="text-body-md">body-md — static</p>
+      <p class="text-body-md">
+        body-md with <a href="#" class="text-link">inline text-link</a>
+      </p>
       <p class="text-overline-md">overline-md — sm only at sm</p>
     </section>
 

package/src/tokens/README.md

@@ -310,6 +310,23 @@ Only useful if you can't precompile and import `globals.css` — production usag
 
 2. Rebuild. `build-tokens.mjs` emits the base var in `:root`, per-breakpoint `@media` overrides, **and** a matching `.gap-2xl { gap: var(--gap-2xl) }` utility.
 
+For typography bundles that need hover/focus without Tailwind utilities, add an optional `states` object (not flattened to CSS vars). Example — inline prose links in `texts.data.js`:
+
+```js
+'text-link': {
+  fontSize: 'inherit',
+  lineHeight: 'inherit',
+  color: 'var(--text-link)',
+  transition: 'color 150ms ease-out',
+  states: {
+    hover: { color: 'var(--text-link-hover)', textDecoration: 'underline' },
+    'focus-visible': { outline: '2px solid var(--ring-color)', outlineOffset: '2px' },
+  },
+},
+```
+
+Bundles with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` preset (avoids clashing with `textColor.link` → class `text-link`). Interaction styles are emitted under `@layer components` as `.text-link:hover`, etc.
+
 ---
 
 ## 🔗 Token references (`tokenRef`)

package/src/tokens/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./primitives/colors/colors.js";
+export * from "./semantic/colors.js";
+export * from "./theme.js";
+export { textsData } from "./semantic/texts.data.js";
+export { createCssVars, cssVarsString, injectCssVars } from "../scripts/css-vars.js";
+//# sourceMappingURL=index.d.ts.map

package/src/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":""}

package/src/tokens/index.js

@@ -5,4 +5,5 @@
 export { createCssVars, cssVarsString, injectCssVars } from '../scripts/css-vars.js';
 export * from './primitives/colors/colors.js';
 export * from './semantic/colors.js';
+export { textsData } from './semantic/texts.data.js';
 export * from './theme.js';

package/src/tokens/primitives/animations/animate.d.ts

@@ -0,0 +1,29 @@
+export const curve: {
+    'productive-entrance': string;
+    'productive-exit': string;
+    'expressive-entrance': string;
+    'expressive-exit': string;
+};
+export const duration: {
+    'fast-01': string;
+    'fast-02': string;
+    'moderate-01': string;
+    'moderate-02': string;
+    'slow-01': string;
+    'slow-02': string;
+};
+export const animate: {
+    spin: string;
+    ping: string;
+    pulse: string;
+    bounce: string;
+    'popup-scale-in': string;
+    'popup-scale-out': string;
+};
+declare namespace _default {
+    export { animate };
+    export { curve };
+    export { duration };
+}
+export default _default;
+//# sourceMappingURL=animate.d.ts.map

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF;;;;;;;EAOE;AAEF;;;;;;;EAOE"}

package/src/tokens/primitives/animations/ease.d.ts

@@ -0,0 +1,10 @@
+export const ease: {
+    in: string;
+    out: string;
+    'in-out': string;
+};
+declare namespace _default {
+    export { ease };
+}
+export default _default;
+//# sourceMappingURL=ease.d.ts.map

package/src/tokens/primitives/animations/ease.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ease.d.ts","sourceRoot":"","sources":["ease.js"],"names":[],"mappings":"AAAA;;;;EAIE"}

package/src/tokens/primitives/border-widths.d.ts

@@ -0,0 +1,12 @@
+export const borderWidths: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+};
+declare namespace _default {
+    export { borderWidths };
+}
+export default _default;
+//# sourceMappingURL=border-widths.d.ts.map

package/src/tokens/primitives/border-widths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-widths.d.ts","sourceRoot":"","sources":["border-widths.js"],"names":[],"mappings":"AAAA;;;;;;EAME"}

package/src/tokens/primitives/breakpoints.d.ts

@@ -0,0 +1,12 @@
+export const breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+declare namespace _default {
+    export { breakpoints };
+}
+export default _default;
+//# sourceMappingURL=breakpoints.d.ts.map

package/src/tokens/primitives/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["breakpoints.js"],"names":[],"mappings":"AAAA;;;;;;EAME"}

package/src/tokens/primitives/colors/alpha.d.ts

@@ -0,0 +1,109 @@
+export namespace alpha {
+    let violet: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let orange: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let white: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let black: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let green: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let red: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let yellow: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    let blue: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    namespace absolute {
+        let black_1: string;
+        export { black_1 as black };
+        let white_1: string;
+        export { white_1 as white };
+    }
+}
+declare namespace _default {
+    export { alpha };
+}
+export default _default;
+//# sourceMappingURL=alpha.d.ts.map

package/src/tokens/primitives/colors/alpha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.d.ts","sourceRoot":"","sources":["alpha.js"],"names":[],"mappings":""}

package/src/tokens/primitives/colors/brand.d.ts

@@ -0,0 +1,46 @@
+export namespace brand {
+    let primary: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+        '950': string;
+    };
+    let accent: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+        '950': string;
+    };
+    namespace absolute {
+        let black: string;
+        let white: string;
+    }
+}
+export namespace brandPrimitives {
+    import primary_1 = brand.primary;
+    export { primary_1 as primary };
+    import accent_1 = brand.accent;
+    export { accent_1 as accent };
+    import absolute_1 = brand.absolute;
+    export { absolute_1 as absolute };
+}
+declare namespace _default {
+    export { brand };
+    export { brandPrimitives };
+}
+export default _default;
+//# sourceMappingURL=brand.d.ts.map

package/src/tokens/primitives/colors/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["brand.js"],"names":[],"mappings":""}