twntyx-css 1.0.10 → 1.0.11

package/README.md

@@ -28,12 +28,47 @@ npm install twntyx-css
 
 ### 3. Import the css
 
-Import the Framework CSS into your project stylesheet.
+Import the framework stylesheets into your project. Load fonts before globals so bundlers resolve packaged font files correctly:
 
 ```css
+@import url('twntyx-css/styles/font.css');
 @import 'twntyx-css/styles/globals.css';
 ```
 
+Or import both in your app entry:
+
+```js
+import 'twntyx-css/styles/font.css';
+import 'twntyx-css/styles/globals.css';
+```
+
+### Nuxt + Tailwind CSS v4
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: [
+    'twntyx-css/styles/font.css',
+    'twntyx-css/styles/globals.css',
+  ],
+  postcss: {
+    plugins: {
+      '@tailwindcss/postcss': {},
+    },
+  },
+})
+```
+
+twntyx-css ships `@font-face` rules for Instrument Sans and Gazpacho, so `@nuxt/fonts` is optional.
+
+### Fonts troubleshooting
+
+If fonts fall back to system defaults:
+
+1. Import `twntyx-css/styles/font.css` before `twntyx-css/styles/globals.css`.
+2. In DevTools Network, confirm font requests resolve to bundled assets (not `/fonts/...` at your site root).
+3. After upgrading, clear `.nuxt/` and `node_modules/.cache`.
+
 ### 4. Adapt webpack config.
 
 Add postcss-loader to webpack.config.js.

package/llm/components/chat-ai.json

@@ -17,64 +17,19 @@
     "new message state"
   ],
   "sourcePaths": [
-    "app/design-system/chat-ai/page.js",
-    "assets/styles/button.css",
-    "assets/styles/chat.css",
-    "assets/styles/form-text-select.css",
-    "assets/styles/panel.css",
-    "assets/styles/toast.css"
+    "app/design-system/chat-ai/page.js"
   ],
   "apiModel": "html-class",
   "baseClass": "chat-ai",
-  "variants": [
-    {
-      "name": "chat-secondary",
-      "className": "chat-secondary",
-      "description": "AI chat visual variant styling."
-    }
-  ],
-  "sizes": [
-    {
-      "name": "chat-loop-stack-lg",
-      "className": "chat-loop-stack-lg",
-      "description": "Large min-height variant for loop stack."
-    }
-  ],
-  "states": [
-    {
-      "name": "chat-loop-loading",
-      "className": "chat-loop-loading",
-      "description": "Animated loading row in loop simulation."
-    },
-    {
-      "name": "chat-loop-message",
-      "className": "chat-loop-message",
-      "description": "Animated resolved message row in loop simulation."
-    },
-    {
-      "name": "is-owner",
-      "className": "is-owner",
-      "description": "Marks messages authored by the current user."
-    },
-    {
-      "name": "is-loading",
-      "className": "is-loading",
-      "description": "Shows loading placeholder behavior for a message group."
-    }
-  ],
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-ai"
     ],
-    "optionalClasses": [
-      "chat-secondary",
-      "chat-loop-stack-lg",
-      "chat-loop-loading",
-      "chat-loop-message",
-      "is-owner",
-      "is-loading"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -114,56 +69,7 @@
     "Do not rely on undocumented internal classes in production templates.",
     "Do not remove required accessibility attributes when component is interactive."
   ],
-  "tokenUsage": [
-    "background-brand",
-    "background-brand-active",
-    "background-error",
-    "background-error-active",
-    "background-info",
-    "background-info-active",
-    "background-inverted",
-    "background-page",
-    "background-success",
-    "background-success-active",
-    "background-surface",
-    "background-surface-elevated",
-    "background-surface-sunken",
-    "background-warning",
-    "background-warning-active",
-    "brand-default",
-    "brand-moderate",
-    "brand-strong",
-    "core-black",
-    "core-ui-100",
-    "core-ui-50",
-    "core-ui-700",
-    "core-ui-800",
-    "core-ui-900",
-    "core-white",
-    "line-default",
-    "line-error",
-    "line-focus",
-    "line-highlight",
-    "line-info",
-    "line-strong",
-    "line-success",
-    "line-warning",
-    "text-attention",
-    "text-brand",
-    "text-brand-active",
-    "text-brand-hover",
-    "text-default",
-    "text-disabled",
-    "text-error",
-    "text-info",
-    "text-inverted",
-    "text-link",
-    "text-link-hover",
-    "text-secondary",
-    "text-success",
-    "text-tertiary",
-    "text-warning"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",

package/llm/examples/chat-ai.html

@@ -1 +1 @@
-<div class="chat-ai chat-secondary">AI chat structure</div>
+<div class="chat-ai">AI chat structure</div>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.10",
+  "designSystemVersion": "1.0.11",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "f7c8ee0540e7bb413846b1be281b9f5034f86ab48ade5f990858bbcce6fea5ad",
+  "sourceFingerprint": "bcce447bfbebb4a79325f5db8a4af76b85fb2dec7e871f5ff848f6e33901ee92",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",
@@ -11,6 +11,7 @@
     "./*": "./*",
     "./fonts/*": "./fonts/*",
     "./styles": "./styles/globals.css",
+    "./styles/font.css": "./styles/font.css",
     "./styles/*": "./styles/*",
     "./tailwind.config": "./tailwind.config.cjs"
   },

package/styles/button.css

@@ -310,7 +310,7 @@
 }
 
 @utility button-destructive {
-  @apply border backdrop-blur include-border-destructive bg-background-error border-line-error hover:border-line-error text-text-error active:bg-background-surface-elevated;
+  @apply border backdrop-blur include-border-destructive bg-background-error border-line-error hover:border-text-error text-text-error active:bg-background-surface-elevated;
 
   &.is-active {
     @apply bg-background-surface-elevated;
@@ -318,7 +318,7 @@
 }
 
 @utility button-constructive {
-  @apply border backdrop-blur include-border-destructive bg-background-success border-line-success hover:border-line-success text-text-success active:bg-background-surface-elevated;
+  @apply border backdrop-blur include-border-destructive bg-background-success border-line-success hover:border-text-success text-text-success active:bg-background-surface-elevated;
 
   &.is-active {
     @apply bg-background-surface-elevated;

package/styles/chat.css

@@ -332,7 +332,9 @@
         top-0
         md:top-3.5
         left-0
-        animate-loading-text-gradient;
+        animate-loading-text-gradient
+        from-text-default
+        to-text-default/10;
       }
     }
   }

package/styles/font.css

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: "Instrument Sans";
-  src: url("../fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
+  src: url("../fonts/InstrumentSans-Variable.ttf") format("truetype");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
@@ -12,7 +12,7 @@
 
 @font-face {
   font-family: "Instrument Sans";
-  src: url("../fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
+  src: url("../fonts/InstrumentSans-Italic-Variable.ttf") format("truetype");
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;

package/styles/globals.css

@@ -1,3 +1,4 @@
+@import url("./font.css");
 @import 'tailwindcss';
 @import './theme.css';
 
@@ -25,7 +26,6 @@
 @import './drawer.css';
 @import './fieldset.css';
 @import './field.css';
-@import './font.css';
 @import './dropdown.css';
 @import './form-shared.css';
 @import './form-checkbox-radio-toggle.css';

package/styles/menu.css

@@ -39,7 +39,7 @@
       &:has(svg:only-child) {
         @apply px-2;
       }
-      > *:not(svg, .avatar) {
+      > *:not(svg, .avatar, .material-symbols-rounded) {
         @apply w-full;
       }
       svg {

package/styles/typography.css

@@ -110,3 +110,7 @@ h6 {
     }
   }
 }
+
+.material-symbols-rounded {
+  @apply leading-none;
+}