@aziontech/theme 2.7.1 → 2.7.2

package/dist/v3/tailwind-preset.js

@@ -307,6 +307,18 @@ const preset = {
             "lineHeight": "var(--text-heading-sm-line-height)"
           }
         ],
+        "heading-xs": [
+          "var(--text-heading-xs-font-size)",
+          {
+            "lineHeight": "var(--text-heading-xs-line-height)"
+          }
+        ],
+        "heading-xxs": [
+          "var(--text-heading-xxs-font-size)",
+          {
+            "lineHeight": "var(--text-heading-xxs-line-height)"
+          }
+        ],
         "label-lg": [
           "var(--text-label-lg-font-size)",
           {
@@ -352,6 +364,20 @@ const preset = {
             "lineHeight": "var(--text-body-xs-line-height)"
           }
         ],
+        "tag-sm": [
+          "var(--text-tag-sm-font-size)",
+          {
+            "lineHeight": "var(--text-tag-sm-line-height)",
+            "fontWeight": "var(--text-tag-sm-font-weight)"
+          }
+        ],
+        "tag-md": [
+          "var(--text-tag-md-font-size)",
+          {
+            "lineHeight": "var(--text-tag-md-line-height)",
+            "fontWeight": "var(--text-tag-md-font-weight)"
+          }
+        ],
         "body-xxs": [
           "var(--text-body-xxs-font-size)",
           {

package/dist/v3/tailwind.config.js

@@ -315,6 +315,18 @@ module.exports = {
             "lineHeight": "var(--text-heading-sm-line-height)"
           }
         ],
+        "heading-xs": [
+          "var(--text-heading-xs-font-size)",
+          {
+            "lineHeight": "var(--text-heading-xs-line-height)"
+          }
+        ],
+        "heading-xxs": [
+          "var(--text-heading-xxs-font-size)",
+          {
+            "lineHeight": "var(--text-heading-xxs-line-height)"
+          }
+        ],
         "label-lg": [
           "var(--text-label-lg-font-size)",
           {
@@ -360,6 +372,20 @@ module.exports = {
             "lineHeight": "var(--text-body-xs-line-height)"
           }
         ],
+        "tag-sm": [
+          "var(--text-tag-sm-font-size)",
+          {
+            "lineHeight": "var(--text-tag-sm-line-height)",
+            "fontWeight": "var(--text-tag-sm-font-weight)"
+          }
+        ],
+        "tag-md": [
+          "var(--text-tag-md-font-size)",
+          {
+            "lineHeight": "var(--text-tag-md-line-height)",
+            "fontWeight": "var(--text-tag-md-font-weight)"
+          }
+        ],
         "body-xxs": [
           "var(--text-body-xxs-font-size)",
           {

package/dist/v4/globals.css

@@ -82,17 +82,17 @@
   --color-green-800: #12542B;
   --color-green-900: #0A2916;
   --color-green-950: #03170B;
-  --color-red-50: #FFE5E5;
-  --color-red-100: #FFCCCC;
-  --color-red-200: #FECACA;
-  --color-red-300: #FCA5A5;
-  --color-red-400: #F87171;
-  --color-red-500: #EF4444;
-  --color-red-600: #DC2626;
-  --color-red-700: #B91C1C;
-  --color-red-800: #991B1B;
-  --color-red-900: #7F1D1D;
-  --color-red-950: #430A0A;
+  --color-red-50: #FCE8E8;
+  --color-red-100: #F9D2D2;
+  --color-red-200: #F3A5A5;
+  --color-red-300: #ED7878;
+  --color-red-400: #E74B4B;
+  --color-red-500: #E51A1A;
+  --color-red-600: #B71515;
+  --color-red-700: #891010;
+  --color-red-800: #5B0B0B;
+  --color-red-900: #2E0606;
+  --color-red-950: #170303;
   --color-surface-0: #FFFFFF;
   --color-surface-50: #FAFAFA;
   --color-surface-100: #F5F5F5;
@@ -155,16 +155,16 @@
   --color-alpha-green-700: #22C55EB2;
   --color-alpha-green-800: #22C55ECC;
   --color-alpha-green-900: #22C55EE5;
-  --color-alpha-red-50: #EF44440D;
-  --color-alpha-red-100: #EF44441A;
-  --color-alpha-red-200: #EF444433;
-  --color-alpha-red-300: #EF44444D;
-  --color-alpha-red-400: #EF444466;
-  --color-alpha-red-500: #EF444480;
-  --color-alpha-red-600: #EF444499;
-  --color-alpha-red-700: #EF4444B2;
-  --color-alpha-red-800: #EF4444CC;
-  --color-alpha-red-900: #EF4444E5;
+  --color-alpha-red-50: #E51A1A0D;
+  --color-alpha-red-100: #E51A1A1A;
+  --color-alpha-red-200: #E51A1A33;
+  --color-alpha-red-300: #E51A1A4D;
+  --color-alpha-red-400: #E51A1A66;
+  --color-alpha-red-500: #E51A1A80;
+  --color-alpha-red-600: #E51A1A99;
+  --color-alpha-red-700: #E51A1AB2;
+  --color-alpha-red-800: #E51A1ACC;
+  --color-alpha-red-900: #E51A1AE5;
   --color-alpha-yellow-50: #F7BD080D;
   --color-alpha-yellow-100: #F7BD081A;
   --color-alpha-yellow-200: #F7BD0833;
@@ -346,9 +346,9 @@
   --width-7xl: 1280px;
   --aspect-video: 16 / 9;
   --shape-flat: 0;
-  --shape-card: 4px;
-  --shape-button: 4px;
-  --shape-elements: 4px;
+  --shape-card: 8px;
+  --shape-button: 6px;
+  --shape-elements: 6px;
   --border-width-default: 0.8px;
   --font-sans: Sora;
   --font-code: Roboto Mono;
@@ -470,15 +470,19 @@
   --text-big-number-lg-line-height: 1.20;
   --text-big-number-lg-font-family: Proto Mono;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.2;
+  --text-heading-2xl-line-height: 1.1;
   --text-heading-xl-font-size: 1.25rem;
-  --text-heading-xl-line-height: 1.2;
+  --text-heading-xl-line-height: 1.1;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.2;
   --text-heading-md-font-size: 1rem;
-  --text-heading-md-line-height: 1.2;
+  --text-heading-md-line-height: 1.3;
   --text-heading-sm-font-size: 0.875rem;
-  --text-heading-sm-line-height: 1.2;
+  --text-heading-sm-line-height: 1.4;
+  --text-heading-xs-font-size: 1rem;
+  --text-heading-xs-line-height: 1.4;
+  --text-heading-xxs-font-size: 0.875rem;
+  --text-heading-xxs-line-height: 1.4;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 500;
@@ -496,6 +500,12 @@
   --text-body-sm-line-height: 1.5;
   --text-body-xs-font-size: 0.75rem;
   --text-body-xs-line-height: 1.5;
+  --text-tag-sm-font-size: 0.6875rem;
+  --text-tag-sm-line-height: 1;
+  --text-tag-sm-font-weight: 600;
+  --text-tag-md-font-size: 0.75rem;
+  --text-tag-md-line-height: 1;
+  --text-tag-md-font-weight: 600;
   --text-body-xxs-font-size: 0.625rem;
   --text-body-xxs-line-height: 1.5;
   --text-overline-md-font-family: Proto Mono;
@@ -523,6 +533,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;
@@ -592,6 +607,8 @@
   .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
   .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
   .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
+  .text-heading-xs { font-size: var(--text-heading-xs-font-size); line-height: var(--text-heading-xs-line-height); }
+  .text-heading-xxs { font-size: var(--text-heading-xxs-font-size); line-height: var(--text-heading-xxs-line-height); }
   .text-label-lg { font-size: var(--text-label-lg-font-size); line-height: var(--text-label-lg-line-height); font-weight: var(--text-label-lg-font-weight); }
   .text-label-md { font-size: var(--text-label-md-font-size); line-height: var(--text-label-md-line-height); font-weight: var(--text-label-md-font-weight); }
   .text-label-sm { font-size: var(--text-label-sm-font-size); line-height: var(--text-label-sm-line-height); font-weight: var(--text-label-sm-font-weight); }
@@ -599,10 +616,18 @@
   .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
   .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
   .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
+  .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
+  .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
   .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
   .text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
   .text-overline-sm { font-family: var(--text-overline-sm-font-family); font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
   .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

@@ -82,17 +82,17 @@
   --color-green-800: #12542B;
   --color-green-900: #0A2916;
   --color-green-950: #03170B;
-  --color-red-50: #FFE5E5;
-  --color-red-100: #FFCCCC;
-  --color-red-200: #FECACA;
-  --color-red-300: #FCA5A5;
-  --color-red-400: #F87171;
-  --color-red-500: #EF4444;
-  --color-red-600: #DC2626;
-  --color-red-700: #B91C1C;
-  --color-red-800: #991B1B;
-  --color-red-900: #7F1D1D;
-  --color-red-950: #430A0A;
+  --color-red-50: #FCE8E8;
+  --color-red-100: #F9D2D2;
+  --color-red-200: #F3A5A5;
+  --color-red-300: #ED7878;
+  --color-red-400: #E74B4B;
+  --color-red-500: #E51A1A;
+  --color-red-600: #B71515;
+  --color-red-700: #891010;
+  --color-red-800: #5B0B0B;
+  --color-red-900: #2E0606;
+  --color-red-950: #170303;
   --color-surface-0: #FFFFFF;
   --color-surface-50: #FAFAFA;
   --color-surface-100: #F5F5F5;
@@ -155,16 +155,16 @@
   --color-alpha-green-700: #22C55EB2;
   --color-alpha-green-800: #22C55ECC;
   --color-alpha-green-900: #22C55EE5;
-  --color-alpha-red-50: #EF44440D;
-  --color-alpha-red-100: #EF44441A;
-  --color-alpha-red-200: #EF444433;
-  --color-alpha-red-300: #EF44444D;
-  --color-alpha-red-400: #EF444466;
-  --color-alpha-red-500: #EF444480;
-  --color-alpha-red-600: #EF444499;
-  --color-alpha-red-700: #EF4444B2;
-  --color-alpha-red-800: #EF4444CC;
-  --color-alpha-red-900: #EF4444E5;
+  --color-alpha-red-50: #E51A1A0D;
+  --color-alpha-red-100: #E51A1A1A;
+  --color-alpha-red-200: #E51A1A33;
+  --color-alpha-red-300: #E51A1A4D;
+  --color-alpha-red-400: #E51A1A66;
+  --color-alpha-red-500: #E51A1A80;
+  --color-alpha-red-600: #E51A1A99;
+  --color-alpha-red-700: #E51A1AB2;
+  --color-alpha-red-800: #E51A1ACC;
+  --color-alpha-red-900: #E51A1AE5;
   --color-alpha-yellow-50: #F7BD080D;
   --color-alpha-yellow-100: #F7BD081A;
   --color-alpha-yellow-200: #F7BD0833;
@@ -346,9 +346,9 @@
   --width-7xl: 1280px;
   --aspect-video: 16 / 9;
   --shape-flat: 0;
-  --shape-card: 4px;
-  --shape-button: 4px;
-  --shape-elements: 4px;
+  --shape-card: 8px;
+  --shape-button: 6px;
+  --shape-elements: 6px;
   --border-width-default: 0.8px;
   --font-sans: Sora;
   --font-code: Roboto Mono;
@@ -470,15 +470,19 @@
   --text-big-number-lg-line-height: 1.20;
   --text-big-number-lg-font-family: Proto Mono;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.2;
+  --text-heading-2xl-line-height: 1.1;
   --text-heading-xl-font-size: 1.25rem;
-  --text-heading-xl-line-height: 1.2;
+  --text-heading-xl-line-height: 1.1;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.2;
   --text-heading-md-font-size: 1rem;
-  --text-heading-md-line-height: 1.2;
+  --text-heading-md-line-height: 1.3;
   --text-heading-sm-font-size: 0.875rem;
-  --text-heading-sm-line-height: 1.2;
+  --text-heading-sm-line-height: 1.4;
+  --text-heading-xs-font-size: 1rem;
+  --text-heading-xs-line-height: 1.4;
+  --text-heading-xxs-font-size: 0.875rem;
+  --text-heading-xxs-line-height: 1.4;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 500;
@@ -496,6 +500,12 @@
   --text-body-sm-line-height: 1.5;
   --text-body-xs-font-size: 0.75rem;
   --text-body-xs-line-height: 1.5;
+  --text-tag-sm-font-size: 0.6875rem;
+  --text-tag-sm-line-height: 1;
+  --text-tag-sm-font-weight: 600;
+  --text-tag-md-font-size: 0.75rem;
+  --text-tag-md-line-height: 1;
+  --text-tag-md-font-weight: 600;
   --text-body-xxs-font-size: 0.625rem;
   --text-body-xxs-line-height: 1.5;
   --text-overline-md-font-family: Proto Mono;
@@ -523,6 +533,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;
@@ -592,6 +607,8 @@
   .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
   .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
   .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
+  .text-heading-xs { font-size: var(--text-heading-xs-font-size); line-height: var(--text-heading-xs-line-height); }
+  .text-heading-xxs { font-size: var(--text-heading-xxs-font-size); line-height: var(--text-heading-xxs-line-height); }
   .text-label-lg { font-size: var(--text-label-lg-font-size); line-height: var(--text-label-lg-line-height); font-weight: var(--text-label-lg-font-weight); }
   .text-label-md { font-size: var(--text-label-md-font-size); line-height: var(--text-label-md-line-height); font-weight: var(--text-label-md-font-weight); }
   .text-label-sm { font-size: var(--text-label-sm-font-size); line-height: var(--text-label-sm-line-height); font-weight: var(--text-label-sm-font-weight); }
@@ -599,10 +616,18 @@
   .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
   .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
   .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
+  .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
+  .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
   .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
   .text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
   .text-overline-sm { font-family: var(--text-overline-sm-font-family); font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
   .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.7.1",
+  "version": "2.7.2",
   "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",
@@ -53,8 +59,9 @@
   ],
   "exports": {
     ".": "./default.js",
-    "./scripts/compile-primitives": "./src/scripts/compile-primitives.js",
-    "./scripts/compile-theme": "./src/scripts/compile-theme.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/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"}