@aziontech/theme 2.3.0 → 2.3.2

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.3.0",
+  "version": "2.3.2",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -60,6 +60,8 @@
   "exports": {
     ".": "./default.js",
     "./animations": "./src/tokens/primitives/animations/animate.js",
+    "./colors": "./src/tokens/primitives/colors/colors.js",
+    "./texts": "./src/tokens/semantic/texts.data.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",

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/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

@@ -1,5 +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.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/semantic/texts.data.d.ts

@@ -150,6 +150,24 @@ export const textsData: {
         lineHeight: string;
         letterSpacing: string;
     };
+    /** Inline `<a>` in body/heading — inherits parent size; not the navigation Link component. */
+    'text-link': {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        borderRadius: string;
+        transition: string;
+        states: {
+            hover: {
+                color: string;
+                textDecoration: string;
+            };
+            'focus-visible': {
+                outline: string;
+                outlineOffset: string;
+            };
+        };
+    };
 };
 declare namespace _default {
     export { textsData };

package/src/tokens/semantic/texts.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHC"}
+{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoHE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}

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

@@ -6,6 +6,9 @@
  * from the legacy `texts.js` plugin — direction inverted from desktop-first
  * (max-width) to mobile-first (min-width).
  *
+ * Optional `states` emits pseudo-class rules (e.g. `.text-link:hover`). Bundles
+ * with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` preset.
+ *
  * Mapping used during the port:
  *   old `large`  (≤640) → `_`
  *   old `medium` (≤768) → `sm` (≥640)
@@ -129,6 +132,24 @@ export const textsData = {
     fontWeight: '600',
     lineHeight: '1',
     letterSpacing: '0'
+  },
+  /** Inline `<a>` in body/heading — inherits parent size; not the navigation Link component. */
+  'text-link': {
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+    color: 'var(--text-link)',
+    borderRadius: 'var(--shape-elements)',
+    transition: 'all 110ms cubic-bezier(0.39, 0.57, 0.56, 1)',
+    states: {
+      hover: {
+        color: 'var(--text-link-hover)',
+        textDecoration: 'underline'
+      },
+      'focus-visible': {
+        outline: '2px solid var(--ring-color)',
+        outlineOffset: '2px'
+      }
+    }
   }
 }