twntyx-css 1.0.7 → 1.0.9

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/progress-bullet.json

@@ -150,9 +150,7 @@
     "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",

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

@@ -171,7 +171,6 @@
     "core-ui-400",
     "core-ui-50",
     "core-ui-500",
-    "core-ui-600",
     "core-ui-700",
     "core-ui-800",
     "core-ui-900",
@@ -186,6 +185,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>

package/llm/examples/command-palette.html

@@ -1 +1 @@
-<div class="command">Command palette</div>
+<div class="command-palette">Command palette</div>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.7",
+  "designSystemVersion": "1.0.9",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "edc2ab201c2009b080557686438a6f36046b978edb2a8a34abd944be502d8401",
+  "sourceFingerprint": "da5c687a1df4907a77f8f1b512ad33f27f39b7edff70707323b7590abd5d56ba",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -728,7 +728,7 @@
       "name": "Icons reference",
       "file": "components/icons-reference.json",
       "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/tokens.json

@@ -374,7 +374,7 @@
         "dark": "#0e2668"
       },
       "resolvedValues": {
-        "light": "#cdd6ef",
+        "light": "#a9bae7",
         "dark": "#0e2668"
       },
       "sourcePaths": [
@@ -432,7 +432,7 @@
         "dark": "#5a5248"
       },
       "resolvedValues": {
-        "light": "#f3f0eb",
+        "light": "#f9f7f3",
         "dark": "#5a5248"
       },
       "sourcePaths": [
@@ -578,7 +578,7 @@
       },
       "resolvedValues": {
         "light": "#e6f6ef",
-        "dark": "#0e6842"
+        "dark": "#084028"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -635,7 +635,7 @@
         "dark": "#1ba46b"
       },
       "resolvedValues": {
-        "light": "#cdefe1",
+        "light": "hsl(155, 56%, 65%)",
         "dark": "#1ba46b"
       },
       "sourcePaths": [
@@ -730,6 +730,30 @@
         "config/dataColors.js"
       ]
     },
+    {
+      "id": "background-surface-sunken-darker",
+      "cssVariable": "--color-background-surface-sunken-darker",
+      "category": "background",
+      "semanticIntent": {
+        "name": "Background Surface Sunken Darker",
+        "path": [
+          "background"
+        ],
+        "reference": null
+      },
+      "values": {
+        "light": "#ede9e2",
+        "dark": "#302b24"
+      },
+      "resolvedValues": {
+        "light": "#ede9e2",
+        "dark": "#302b24"
+      },
+      "sourcePaths": [
+        "assets/styles/colors.css",
+        "config/dataColors.js"
+      ]
+    },
     {
       "id": "background-warning",
       "cssVariable": "--color-background-warning",
@@ -1596,11 +1620,11 @@
       },
       "values": {
         "light": "#a9e7cd",
-        "dark": "#a9e7cd"
+        "dark": "hsl(155, 56%, 65%)"
       },
       "resolvedValues": {
-        "light": "#a9e7cd",
-        "dark": "#a9e7cd"
+        "light": "hsl(155, 56%, 65%)",
+        "dark": "hsl(155, 56%, 65%)"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -2146,11 +2170,11 @@
       },
       "values": {
         "light": "#e7a9b2",
-        "dark": "#e7a9b2"
+        "dark": "hsl(351, 56%, 80%)"
       },
       "resolvedValues": {
-        "light": "#e7a9b2",
-        "dark": "#e7a9b2"
+        "light": "hsl(351, 56%, 80%)",
+        "dark": "hsl(351, 56%, 80%)"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -2977,8 +3001,8 @@
         "dark": "#403108"
       },
       "resolvedValues": {
-        "light": "#efe6cd",
-        "dark": "#403108"
+        "light": "#e7d6a9",
+        "dark": "#68500e"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3151,8 +3175,8 @@
         "dark": "#871425"
       },
       "resolvedValues": {
-        "light": "#efcdd2",
-        "dark": "#871425"
+        "light": "hsl(351, 56%, 80%)",
+        "dark": "#680e1c"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3286,8 +3310,8 @@
         "dark": "#1b3fa4"
       },
       "resolvedValues": {
-        "light": "#cdd6ef",
-        "dark": "#1b3fa4"
+        "light": "#a9bae7",
+        "dark": "#0e2668"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3402,8 +3426,8 @@
         "dark": "#1ba46b"
       },
       "resolvedValues": {
-        "light": "#cdefe1",
-        "dark": "#1ba46b"
+        "light": "hsl(155, 56%, 65%)",
+        "dark": "#0e6842"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3431,8 +3455,8 @@
         "dark": "#873c14"
       },
       "resolvedValues": {
-        "light": "#efd9cd",
-        "dark": "#873c14"
+        "light": "#e7bfa9",
+        "dark": "#682d0e"
       },
       "sourcePaths": [
         "assets/styles/colors.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",

package/styles/animation.css

@@ -1357,7 +1357,7 @@
 
   @keyframes tooltipSlideDown {
     0% {
-      transform: translate(0, -1rem);
+      transform: translate(0, 1rem);
       opacity: 0;
     }
     100% {
@@ -1368,7 +1368,7 @@
 
   @keyframes tooltipSlideUp {
     0% {
-      transform: translate(0, 1rem);
+      transform: translate(0, -1rem);
       opacity: 0;
     }
     100% {
@@ -1379,7 +1379,7 @@
 
   @keyframes tooltipSlideRight {
     0% {
-      transform: translateX(1rem);
+      transform: translateX(-1rem);
       opacity: 0;
     }
     100% {
@@ -1390,7 +1390,7 @@
 
   @keyframes tooltipSlideLeft {
     0% {
-      transform: translateX(-1rem);
+      transform: translateX(1rem);
       opacity: 0;
     }
     100% {
@@ -2057,7 +2057,7 @@
   @keyframes tooltip-in-top {
     0% {
       opacity: 0;
-      transform: translateY(4px);
+      transform: translateY(-4px);
     }
     100% {
       opacity: 1;
@@ -2068,7 +2068,7 @@
   @keyframes tooltip-in-bottom {
     0% {
       opacity: 0;
-      transform: translateY(-4px);
+      transform: translateY(4px);
     }
     100% {
       opacity: 1;
@@ -2079,7 +2079,7 @@
   @keyframes tooltip-in-left {
     0% {
       opacity: 0;
-      transform: translateX(4px);
+      transform: translateX(-4px);
     }
     100% {
       opacity: 1;
@@ -2090,7 +2090,7 @@
   @keyframes tooltip-in-right {
     0% {
       opacity: 0;
-      transform: translateX(-4px);
+      transform: translateX(4px);
     }
     100% {
       opacity: 1;

package/styles/avatar.css

@@ -57,10 +57,10 @@
   /* Placeholder styling */
   &.placeholder {
     .avatar-inner {
-      @apply flex justify-center items-center bg-background-neutral;
+      @apply flex justify-center items-center border border-line-strong/25 bg-background-surface-sunken;
 
       span {
-        @apply text-text-secondary;
+        @apply text-text-secondary font-bold text-xxs;
       }
     }
 

package/styles/background-ai.css

@@ -3,7 +3,7 @@
 /*----------------------------*/
 
 :root {
-   --light-gradient: repeating-linear-gradient(
+  --light-gradient: repeating-linear-gradient(
     100deg,
     color-mix(in srgb, var(--color-core-white) 100%, transparent 0%) 0%,
     color-mix(in srgb, var(--color-core-white) 20%, transparent 80%) 7%,
@@ -19,10 +19,9 @@
     transparent 25%,
     color-mix(in srgb, var(--color-brand-moderate) 100%, transparent 0%) 30%
   );
- 
 }
 :root.dark {
---light-gradient: repeating-linear-gradient(
+  --light-gradient: repeating-linear-gradient(
     100deg,
     color-mix(in srgb, var(--color-core-black) 100%, transparent 0%) 0%,
     color-mix(in srgb, var(--color-core-black) 20%, transparent 80%) 7%,
@@ -30,7 +29,7 @@
     transparent 12%,
     color-mix(in srgb, var(--color-core-black) 100%, transparent 0%) 16%
   );
-   --light-borealis: repeating-linear-gradient(
+  --light-borealis: repeating-linear-gradient(
     100deg,
     color-mix(in srgb, var(--color-brand-default) 100%, transparent 0%) 10%,
     color-mix(in srgb, var(--color-brand-soft) 100%, transparent 0%) 15%,
@@ -40,17 +39,14 @@
   );
 }
 
-@utility background-ai-silk{
+@utility background-ai-silk {
   @apply relative overflow-clip;
-  
+
   &::before,
   &::after {
     @apply content-[''] absolute inset-0 pointer-events-none will-change-transform animate-[borealis_60s_linear_infinite] bg-[image:var(--light-gradient),var(--light-borealis)];
-    ;
   }
 
-
-
   &::before {
     @apply z-0 -inset-[10px] opacity-20 mix-blend-darken;
     mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
@@ -98,8 +94,6 @@
   }
 }
 
-
-
 @utility background-ai-circles {
   @apply bg-core-white to-brand-light/50 from-brand-soft bg-size-[520px_100%] bg-repeat-x animate-[badge-ai-gradient_10s_linear_infinite] bg-[radial-gradient(520px_520px_at_50%_50%,_var(--tw-gradient-from)_0%,_var(--tw-gradient-to)_30%)];
 

package/styles/badge.css

@@ -5,7 +5,7 @@
 @utility badge {
   @apply font-body inline-flex gap-1 justify-center items-center font-semibold rounded-full border cursor-default shrink-0;
 
-  &[role="status"] {
+  &[role='status'] {
     @apply cursor-default;
   }
 
@@ -23,6 +23,10 @@
     &.badge-lg {
       @apply px-0 size-4;
     }
+
+    &.badge-xl {
+      @apply px-0 size-5;
+    }
   }
 
   /* Icon styles */
@@ -86,6 +90,20 @@
     }
   }
 
+  &.badge-xl {
+    @apply gap-2 px-3 py-1 text-base [&>svg]:size-5 min-h-[30px] min-w-[30px];
+    &:has(svg:first-child) {
+      @apply pl-2;
+    }
+    &:has(.button-close:last-child) {
+      @apply pr-1;
+    }
+    .button.button-close,
+    .button-close {
+      --close-size: calc(40px - 0.5rem - 2px) !important;
+    }
+  }
+
   /* VARIANTS */
 
   & {
@@ -178,6 +196,23 @@
       }
     }
   }
+  &.badge-warning {
+    @apply surface-warning;
+    &.badge-interactive {
+      @apply surface-interactive-warning;
+    }
+    &:empty {
+      @apply bg-text-warning from-text-warning to-text-warning border-text-warning text-core-white dark:text-core-black;
+    }
+    &.badge-filled {
+      @apply bg-background-brand border-background-brand text-core-white dark:text-core-black;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-warning/75 to-text-warning/75 border-text-warning;
+        }
+      }
+    }
+  }
 
   &.badge-info {
     @apply surface-info;
@@ -198,7 +233,7 @@
   }
 
   &.badge-attention {
-    @apply surface-attention;
+    @apply surface-attention text-text-attention;
     &.badge-interactive {
       @apply surface-interactive-attention;
     }
@@ -216,7 +251,7 @@
   }
 
   &.badge-brand {
-    @apply border-line-brand bg-background-brand/20 text-brand-default;
+    @apply border-line-brand/20 bg-background-brand/20 text-brand-default;
     &.badge-interactive {
       @apply surface-interactive-brand;
     }
@@ -246,7 +281,7 @@
 
   /* Role fit badges */
 
-  &[class*="-status-"].badge {
+  &[class*='-status-'].badge {
     @apply font-medium rounded border-none;
   }
 
@@ -254,21 +289,25 @@
     @apply bg-core-ui-200 dark:bg-core-ui-700 text-core-ui-600 dark:text-core-ui-300;
   }
   &.badge-status-verylow {
-    @apply bg-core-red-100 text-core-red-700;
+    @apply bg-core-red-100 text-core-red-700 dark:bg-core-red-900 dark:text-core-red-300;
   }
   &.badge-status-low {
-    @apply bg-core-orange-100 text-core-orange-700;
+    @apply bg-core-orange-100 text-core-orange-700 dark:bg-core-orange-900 dark:text-core-orange-300;
   }
   &.badge-status-medium {
-    @apply bg-core-green-50 text-core-green-700;
+    @apply bg-core-green-50 text-core-green-700 dark:bg-core-green-950 dark:text-core-green-400;
   }
   &.badge-status-high {
-    @apply bg-core-green-100 text-core-green-800;
+    @apply bg-core-green-100 text-core-green-800 dark:bg-core-green-900 dark:text-core-green-300;
   }
   &.badge-status-veryhigh {
-    @apply relative bg-core-green-200 text-core-green-900;
+    @apply relative bg-core-green-200 text-core-green-900 dark:bg-core-green-800 dark:text-core-green-200;
     &::after {
       @apply content-[''] overflow-hidden rounded-[inherit] block absolute z-0 inset-0 bg-blend-color-dodge opacity-50 animate-shine bg-[linear-gradient(30deg,_rgba(255,255,255,0)_35%,_rgba(255,255,255,1)_50%,_rgba(255,255,255,0)_60%)] dark:opacity-20 bg-no-repeat pointer-events-none;
     }
   }
 }
+
+@utility badge-number {
+  @apply inline-flex min-w-5 items-center justify-center rounded-full bg-background-brand px-1.5 py-0.5 text-[10px] font-semibold leading-none text-text-inverted;
+}

package/styles/button.css

@@ -110,7 +110,7 @@
       &,
       &:hover,
       &:active {
-        @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
+        @apply bg-none text-shadow-none bg-background-surface-elevated text-text-secondary/75 border-line-default;
       }
     }
     &.button-secondary {
@@ -317,6 +317,14 @@
   }
 }
 
+@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;
+
+  &.is-active {
+    @apply bg-background-surface-elevated;
+  }
+}
+
 @utility button-discreet {
   @apply border text-text-tertiary border-line-default/0 disabled:border-line-default;
 
@@ -331,6 +339,17 @@
   @apply include-interactive text-text-default include-hover-primary;
 }
 
+@utility button-ai {
+  @apply bg-background-surface include-border-secondary;
+
+  > * {
+    @apply relative z-10;
+  }
+  > i {
+    @apply content-[''] absolute z-0 rounded-[inherit] inset-0 background-ai-circles;
+  }
+}
+
 /* Close */
 .button.button-close,
 .button-close {