twntyx-css 1.0.7 → 1.0.8

package/llm/components/avatar.json

@@ -93,9 +93,9 @@
     "background-error",
     "background-error-active",
     "background-inverted",
-    "background-neutral",
     "background-neutral-active",
     "background-page",
+    "background-success",
     "background-success-active",
     "background-surface",
     "background-surface-elevated",
@@ -112,8 +112,10 @@
     "line-brand",
     "line-default",
     "line-error",
+    "line-highlight",
     "line-strong",
     "line-subtle",
+    "line-success",
     "text-attention",
     "text-brand",
     "text-brand-active",

package/llm/components/badge.json

@@ -21,133 +21,21 @@
   "sourcePaths": [
     "app/design-system/badge/page.js",
     "assets/styles/badge.css",
-    "assets/styles/button.css",
     "assets/styles/contest.css",
     "assets/styles/form-text-select.css",
     "assets/styles/shared.css"
   ],
   "apiModel": "html-class",
   "baseClass": "badge",
-  "variants": [
-    {
-      "name": "badge-placeholder",
-      "className": "badge-placeholder",
-      "description": "Placeholder badge style"
-    },
-    {
-      "name": "badge-neutral",
-      "className": "badge-neutral",
-      "description": "Neutral badge style"
-    },
-    {
-      "name": "badge-success",
-      "className": "badge-success",
-      "description": "Success badge style"
-    },
-    {
-      "name": "badge-error",
-      "className": "badge-error",
-      "description": "Error badge style"
-    },
-    {
-      "name": "badge-warning",
-      "className": "badge-warning",
-      "description": "Warning badge style"
-    },
-    {
-      "name": "badge-info",
-      "className": "badge-info",
-      "description": "Info badge style"
-    },
-    {
-      "name": "badge-attention",
-      "className": "badge-attention",
-      "description": "Attention badge style"
-    },
-    {
-      "name": "badge-brand",
-      "className": "badge-brand",
-      "description": "Brand badge style"
-    },
-    {
-      "name": "badge-filled",
-      "className": "badge-filled",
-      "description": "Filled badge style variant"
-    },
-    {
-      "name": "badge-interactive",
-      "className": "badge-interactive",
-      "description": "Interactive/clickable badge style"
-    },
-    {
-      "name": "badge-status-undefined",
-      "className": "badge-status-undefined",
-      "description": "Status badge - no data"
-    },
-    {
-      "name": "badge-status-verylow",
-      "className": "badge-status-verylow",
-      "description": "Status badge - very low"
-    },
-    {
-      "name": "badge-status-low",
-      "className": "badge-status-low",
-      "description": "Status badge - low"
-    },
-    {
-      "name": "badge-status-high",
-      "className": "badge-status-high",
-      "description": "Status badge - high"
-    },
-    {
-      "name": "badge-status-veryhigh",
-      "className": "badge-status-veryhigh",
-      "description": "Status badge - very high"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "badge-sm",
-      "className": "badge-sm",
-      "description": "Small badge size"
-    },
-    {
-      "name": "badge-lg",
-      "className": "badge-lg",
-      "description": "Large badge size"
-    },
-    {
-      "name": "badge-status-medium",
-      "className": "badge-status-medium",
-      "description": "Status badge - medium"
-    }
-  ],
+  "variants": [],
+  "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "badge"
     ],
-    "optionalClasses": [
-      "badge-placeholder",
-      "badge-neutral",
-      "badge-success",
-      "badge-error",
-      "badge-warning",
-      "badge-info",
-      "badge-attention",
-      "badge-brand",
-      "badge-filled",
-      "badge-interactive",
-      "badge-status-undefined",
-      "badge-status-verylow",
-      "badge-status-low",
-      "badge-status-high",
-      "badge-status-veryhigh",
-      "badge-sm",
-      "badge-lg",
-      "badge-status-medium"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -184,10 +72,8 @@
   "tokenUsage": [
     "background-attention-active",
     "background-brand",
-    "background-brand-active",
     "background-error",
     "background-info",
-    "background-inverted",
     "background-neutral",
     "background-success",
     "background-surface",
@@ -200,14 +86,21 @@
     "core-black",
     "core-green-100",
     "core-green-200",
+    "core-green-300",
+    "core-green-400",
     "core-green-50",
     "core-green-700",
     "core-green-800",
     "core-green-900",
+    "core-green-950",
     "core-orange-100",
+    "core-orange-300",
     "core-orange-700",
+    "core-orange-900",
     "core-red-100",
+    "core-red-300",
     "core-red-700",
+    "core-red-900",
     "core-ui-100",
     "core-ui-200",
     "core-ui-300",
@@ -228,9 +121,6 @@
     "line-success",
     "line-warning",
     "text-attention",
-    "text-brand",
-    "text-brand-active",
-    "text-brand-hover",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/button-container.json

@@ -100,7 +100,6 @@
     "background-warning-active",
     "brand-default",
     "brand-moderate",
-    "brand-soft",
     "brand-strong",
     "core-black",
     "core-ui-100",

package/llm/components/button.json

@@ -33,114 +33,19 @@
     "assets/styles/form-text-select.css",
     "assets/styles/join.css",
     "assets/styles/shared.css",
-    "assets/styles/table.css",
-    "assets/styles/toast.css"
+    "assets/styles/table.css"
   ],
   "apiModel": "html-class",
   "baseClass": "button",
-  "variants": [
-    {
-      "name": "button-primary",
-      "className": "button-primary",
-      "description": "Primary button style"
-    },
-    {
-      "name": "button-secondary",
-      "className": "button-secondary",
-      "description": "Secondary button style"
-    },
-    {
-      "name": "button-tertiary",
-      "className": "button-tertiary",
-      "description": "Tertiary button style"
-    },
-    {
-      "name": "button-plain",
-      "className": "button-plain",
-      "description": "Plain button style without background"
-    },
-    {
-      "name": "button-destructive",
-      "className": "button-destructive",
-      "description": "Destructive action button style"
-    },
-    {
-      "name": "button-discreet",
-      "className": "button-discreet",
-      "description": "Discreet button style with minimal visual impact"
-    },
-    {
-      "name": "button-menu",
-      "className": "button-menu",
-      "description": "Menu button style"
-    },
-    {
-      "name": "button-sso",
-      "className": "button-sso",
-      "description": "Single sign-on button style"
-    },
-    {
-      "name": "button-close",
-      "className": "button-close",
-      "description": "Close button style with X icon"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "button-xs",
-      "className": "button-xs",
-      "description": "Extra small button size"
-    },
-    {
-      "name": "button-sm",
-      "className": "button-sm",
-      "description": "Small button size"
-    },
-    {
-      "name": "button-lg",
-      "className": "button-lg",
-      "description": "Large button size"
-    }
-  ],
-  "states": [
-    {
-      "name": "is-loading",
-      "className": "is-loading",
-      "description": "Shows loading spinner state"
-    },
-    {
-      "name": "is-charging",
-      "className": "is-charging",
-      "description": "Shows charging animation state"
-    },
-    {
-      "name": "is-charging-done",
-      "className": "is-charging-done",
-      "description": "Shows completed charging state"
-    }
-  ],
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "button",
     "requiredClasses": [
       "button"
     ],
-    "optionalClasses": [
-      "button-primary",
-      "button-secondary",
-      "button-tertiary",
-      "button-plain",
-      "button-destructive",
-      "button-discreet",
-      "button-menu",
-      "button-sso",
-      "button-close",
-      "button-xs",
-      "button-sm",
-      "button-lg",
-      "is-loading",
-      "is-charging",
-      "is-charging-done"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -196,33 +101,36 @@
     "background-brand",
     "background-brand-active",
     "background-error",
-    "background-error-active",
     "background-info",
-    "background-info-active",
     "background-inverted",
     "background-neutral",
     "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-green-100",
     "core-green-200",
+    "core-green-300",
+    "core-green-400",
     "core-green-50",
     "core-green-700",
     "core-green-800",
     "core-green-900",
+    "core-green-950",
     "core-orange-100",
+    "core-orange-300",
     "core-orange-700",
+    "core-orange-900",
     "core-red-100",
+    "core-red-300",
     "core-red-700",
+    "core-red-900",
     "core-ui-100",
     "core-ui-200",
     "core-ui-300",

package/llm/components/chat-footer.json

@@ -22,36 +22,15 @@
   ],
   "apiModel": "html-class",
   "baseClass": "chat-footer",
-  "variants": [
-    {
-      "name": "chat-footer-full",
-      "className": "chat-footer-full",
-      "description": "Extended footer layout for full chat composer demo."
-    },
-    {
-      "name": "chat-input-full",
-      "className": "chat-input-full",
-      "description": "Expanded input row behavior used in full footer mode."
-    }
-  ],
+  "variants": [],
   "sizes": [],
-  "states": [
-    {
-      "name": "is-listening",
-      "className": "is-listening",
-      "description": "Active dictation state with listening indicator."
-    }
-  ],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-footer"
     ],
-    "optionalClasses": [
-      "chat-footer-full",
-      "chat-input-full",
-      "is-listening"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -63,14 +42,18 @@
     "dataAttributes": [],
     "roles": [],
     "aria": [
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-pressed"
     ]
   },
   "a11y": {
     "interactive": false,
     "requiredRoles": [],
     "requiredAria": [
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-pressed"
     ],
     "keyboardSupport": [],
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
@@ -86,7 +69,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "background-error",
     "background-page",
     "background-surface",
     "background-surface-elevated",
@@ -94,6 +76,7 @@
     "core-black",
     "core-white",
     "line-default",
+    "line-highlight",
     "line-strong",
     "text-default",
     "text-link",

package/llm/components/chat.json

@@ -52,7 +52,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "background-error",
     "background-page",
     "background-surface",
     "background-surface-elevated",
@@ -60,6 +59,7 @@
     "core-black",
     "core-white",
     "line-default",
+    "line-highlight",
     "line-strong",
     "text-default",
     "text-link",

package/llm/components/combobox.json

@@ -112,6 +112,7 @@
     "line-success",
     "line-warning",
     "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/command-palette.json

@@ -15,46 +15,19 @@
     "spotlight"
   ],
   "sourcePaths": [
-    "app/design-system/command-palette/page.js",
-    "assets/styles/breadcrumb.css",
-    "assets/styles/button.css",
-    "assets/styles/chat.css",
-    "assets/styles/checkmark.css",
-    "assets/styles/command.css",
-    "assets/styles/form-text-select.css",
-    "assets/styles/menu.css",
-    "assets/styles/pagination.css",
-    "assets/styles/progress.css",
-    "assets/styles/steps.css",
-    "assets/styles/tab.css",
-    "assets/styles/table.css",
-    "assets/styles/toast.css"
+    "app/design-system/command-palette/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "command",
+  "baseClass": "command-palette",
   "variants": [],
   "sizes": [],
-  "states": [
-    {
-      "name": "is-active",
-      "className": "is-active",
-      "description": "Highlights the current command option (on li or trigger element)."
-    },
-    {
-      "name": "is-empty",
-      "className": "is-empty",
-      "description": "Styles the empty-result message block."
-    }
-  ],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "command"
-    ],
-    "optionalClasses": [
-      "is-active",
-      "is-empty"
+      "command-palette"
     ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -75,7 +48,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'command' on the root element.",
+    "Apply the base class 'command-palette' on the root element.",
     "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
     "Keep semantic color usage aligned with token classes for light/dark support."
   ],
@@ -84,61 +57,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-300",
-    "core-ui-400",
-    "core-ui-50",
-    "core-ui-600",
-    "core-ui-700",
-    "core-ui-800",
-    "core-ui-900",
-    "core-white",
-    "line-brand",
-    "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-active",
-    "text-link-hover",
-    "text-secondary",
-    "text-success",
-    "text-tertiary",
-    "text-warning"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",

package/llm/components/datepicker.json

@@ -122,6 +122,7 @@
     "line-success",
     "line-warning",
     "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/icons-reference.json

@@ -2,7 +2,7 @@
   "id": "icons-reference",
   "name": "Icons reference",
   "status": "stable",
-  "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
+  "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, grade 0, optical size 24px, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
   "keywords": [
     "assets",
     "collection",

package/llm/components/join.json

@@ -64,6 +64,7 @@
     "background-brand-active",
     "background-error",
     "background-inverted",
+    "background-success",
     "background-surface",
     "background-surface-elevated",
     "brand-default",
@@ -75,6 +76,7 @@
     "line-default",
     "line-error",
     "line-strong",
+    "line-success",
     "text-attention",
     "text-brand",
     "text-brand-active",

package/llm/components/menu.json

@@ -163,7 +163,6 @@
   ],
   "tokenUsage": [
     "background-brand",
-    "background-error",
     "background-page",
     "background-surface",
     "background-surface-elevated",
@@ -172,8 +171,9 @@
     "core-white",
     "line-brand",
     "line-default",
+    "line-highlight",
     "line-strong",
-    "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-link",

package/llm/components/scrollbar.json

@@ -71,6 +71,7 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "core-ui-100",
     "core-ui-300",
     "core-ui-400",

package/llm/components/surface.json

@@ -130,7 +130,6 @@
     "background-warning-active",
     "brand-default",
     "brand-moderate",
-    "brand-soft",
     "brand-strong",
     "core-black",
     "core-ui-200",

package/llm/components/table.json

@@ -186,6 +186,7 @@
     "line-success",
     "line-warning",
     "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/examples/badge.html

@@ -1 +1 @@
-<div class="badge badge-placeholder">Badge</div>
+<div class="badge">Badge</div>

package/llm/examples/chat-footer.html

@@ -1 +1 @@
-<div class="chat-footer chat-footer-full">Chat footer</div>
+<div class="chat-footer">Chat footer</div>