@aziontech/theme 2.5.0 → 2.7.1

package/dist/v3/tailwind.config.js

@@ -315,18 +315,6 @@ 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)",
           {
@@ -372,20 +360,6 @@ 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: #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-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-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: #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-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-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: 8px;
-  --shape-button: 6px;
-  --shape-elements: 6px;
+  --shape-card: 4px;
+  --shape-button: 4px;
+  --shape-elements: 4px;
   --border-width-default: 0.8px;
   --font-sans: Sora;
   --font-code: Roboto Mono;
@@ -470,19 +470,15 @@
   --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.1;
+  --text-heading-2xl-line-height: 1.2;
   --text-heading-xl-font-size: 1.25rem;
-  --text-heading-xl-line-height: 1.1;
+  --text-heading-xl-line-height: 1.2;
   --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.3;
+  --text-heading-md-line-height: 1.2;
   --text-heading-sm-font-size: 0.875rem;
-  --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-heading-sm-line-height: 1.2;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 500;
@@ -500,12 +496,6 @@
   --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;
@@ -533,11 +523,6 @@
   --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;
@@ -607,8 +592,6 @@
   .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); }
@@ -616,18 +599,10 @@
   .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: #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-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-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: #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-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-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: 8px;
-  --shape-button: 6px;
-  --shape-elements: 6px;
+  --shape-card: 4px;
+  --shape-button: 4px;
+  --shape-elements: 4px;
   --border-width-default: 0.8px;
   --font-sans: Sora;
   --font-code: Roboto Mono;
@@ -470,19 +470,15 @@
   --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.1;
+  --text-heading-2xl-line-height: 1.2;
   --text-heading-xl-font-size: 1.25rem;
-  --text-heading-xl-line-height: 1.1;
+  --text-heading-xl-line-height: 1.2;
   --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.3;
+  --text-heading-md-line-height: 1.2;
   --text-heading-sm-font-size: 0.875rem;
-  --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-heading-sm-line-height: 1.2;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 500;
@@ -500,12 +496,6 @@
   --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;
@@ -533,11 +523,6 @@
   --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;
@@ -607,8 +592,6 @@
   .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); }
@@ -616,18 +599,10 @@
   .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.5.0",
+  "version": "2.7.1",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -15,11 +15,8 @@
     "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": "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"
+    "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"
   },
   "publishConfig": {
     "access": "public"
@@ -34,11 +31,8 @@
     "ui-kit",
     "token-generator"
   ],
-  "dependencies": {
-    "tailwindcss": "^3.4.17",
-    "vue-tsc": "^3.2.5"
-  },
   "devDependencies": {
+    "tailwindcss": "^3.4.17",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^10.0.1",
     "@semantic-release/exec": "^6.0.3",
@@ -59,9 +53,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",
+    "./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",

package/src/scripts/build-tokens.mjs

@@ -70,7 +70,6 @@ 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;
@@ -80,16 +79,6 @@ 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) =>
@@ -133,24 +122,10 @@ const emitComponentClasses = (indent = '  ') => {
   lines.push('');
   lines.push(`${indent}/* ── Texts ── */`);
   for (const [key, bundle] of Object.entries(textsData)) {
-    const baseProps = Object.keys(bundle).filter((prop) => prop !== 'states');
-    const decls = baseProps
+    const decls = Object.keys(bundle)
       .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');
@@ -252,7 +227,6 @@ 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,9 +37,6 @@
       <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,23 +310,6 @@ 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.js

@@ -5,5 +5,4 @@
 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/colors/alpha.js

@@ -60,16 +60,16 @@ export const alpha = {
     '900': '#22C55EE5',
   },
   red: {
-    '50': '#E51A1A0D',
-    '100': '#E51A1A1A',
-    '200': '#E51A1A33',
-    '300': '#E51A1A4D',
-    '400': '#E51A1A66',
-    '500': '#E51A1A80',
-    '600': '#E51A1A99',
-    '700': '#E51A1AB2',
-    '800': '#E51A1ACC',
-    '900': '#E51A1AE5',
+    '50': '#EF44440D',
+    '100': '#EF44441A',
+    '200': '#EF444433',
+    '300': '#EF44444D',
+    '400': '#EF444466',
+    '500': '#EF444480',
+    '600': '#EF444499',
+    '700': '#EF4444B2',
+    '800': '#EF4444CC',
+    '900': '#EF4444E5',
   },
   yellow: {
     '50': '#F7BD080D',

package/src/tokens/primitives/colors/colors.js

@@ -101,17 +101,17 @@ export const primitives = {
     },
 
   red: {
-    '50': '#FCE8E8',
-    '100': '#F9D2D2',
-    '200': '#F3A5A5',
-    '300': '#ED7878',
-    '400': '#E74B4B',
-    '500': '#E51A1A',
-    '600': '#B71515',
-    '700': '#891010',
-    '800': '#5B0B0B',
-    '900': '#2E0606',
-    '950': '#170303',
+    '50': '#FFE5E5',
+    '100': '#FFCCCC',
+    '200': '#FECACA',
+    '300': '#FCA5A5',
+    '400': '#F87171',
+    '500': '#EF4444',
+    '600': '#DC2626',
+    '700': '#B91C1C',
+    '800': '#991B1B',
+    '900': '#7F1D1D',
+    '950': '#430A0A',
     },
   brand,
   surface: {

package/src/tokens/primitives/shape/shape.js

@@ -1,12 +1,12 @@
-import { radius } from './radius.js'
-import { borderWidths } from '../border-widths.js'
+import { radius } from './radius.js';
+import { borderWidths } from '../border-widths.js';
 
 export const shape = {
   'shape-flat': radius.none,
-  'shape-card': radius['lg'],
-  'shape-button': radius['md'],
-  'shape-elements': radius['md'],
-  'border-width-default': borderWidths[1]
-}
+  'shape-card': radius.DEFAULT,
+  'shape-button': radius.DEFAULT,
+  'shape-elements': radius.DEFAULT,
+  'border-width-default': borderWidths[1],
+};
 
-export default { shape }
+export default { shape };

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

@@ -6,9 +6,6 @@
  * 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)
@@ -35,11 +32,11 @@ export const textsData = {
   },
   'text-heading-2xl': {
     fontSize: { _: '1.875rem', sm: '3rem', md: '3.75rem' },
-    lineHeight: '1.1'
+    lineHeight: '1.2'
   },
   'text-heading-xl': {
     fontSize: { _: '1.25rem', sm: '1.875rem', md: '2.25rem' },
-    lineHeight: '1.1'
+    lineHeight: '1.2'
   },
   'text-heading-lg': {
     fontSize: { _: '1.125rem', md: '1.875rem' },
@@ -47,19 +44,11 @@ export const textsData = {
   },
   'text-heading-md': {
     fontSize: { _: '1rem', sm: '1.25rem', md: '1.5rem' },
-    lineHeight: '1.3'
+    lineHeight: '1.2'
   },
   'text-heading-sm': {
     fontSize: { _: '0.875rem', sm: '1rem', md: '1.125rem' },
-    lineHeight: '1.4'
-  },
-  'text-heading-xs': {
-    fontSize: '1rem',
-    lineHeight: '1.4'
-  },
-  'text-heading-xxs': {
-    fontSize: '0.875rem',
-    lineHeight: '1.4'
+    lineHeight: '1.2'
   },
   'text-label-lg': {
     fontSize: '1rem',
@@ -92,16 +81,6 @@ export const textsData = {
     fontSize: '0.75rem',
     lineHeight: '1.5'
   },
-  'text-tag-sm': {
-    fontSize: '0.6875rem',
-    lineHeight: '1',
-    fontWeight: '600'
-  },
-  'text-tag-md': {
-    fontSize: '0.75rem',
-    lineHeight: '1',
-    fontWeight: '600'
-  },
   'text-body-xxs': {
     fontSize: '0.625rem',
     lineHeight: '1.5'
@@ -140,24 +119,6 @@ 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'
-      }
-    }
   }
 }
 

package/src/tokens/theme/background.js

@@ -15,7 +15,7 @@ export const background = {
     'bg-disabled': tokenRef('theme.surfaces.surface-200')
   },
   dark: {
-    'bg-canvas': tokenRef('primitives.base.black'),
+    'bg-canvas': tokenRef('theme.surfaces.surface-950'),
     'bg-surface': tokenRef('theme.surfaces.surface-950'),
     'bg-surface-raised': tokenRef('theme.surfaces.surface-900'),
     'bg-mask': tokenRef('primitives.alpha.white.50'),