twntyx-css 1.0.2 → 1.0.5

package/styles/surface.css

@@ -4,16 +4,14 @@
 
 /* Base Surface */
 @utility surface {
-  @apply
-  border
+  @apply border
   bg-background-surface
   border-line-default;
 }
 
 /* Surface Variants */
 @utility surface-placeholder {
-  @apply
-  border
+  @apply border
   border-dashed
   bg-background-page
   border-line-highlight
@@ -21,11 +19,10 @@
 }
 
 @utility surface-elevated {
-  @apply
-  border
+  @apply border
   bg-background-surface-elevated
   border-line-hover/30
-  shadow-[inset_0_-2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_-4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  shadow-[inset_0_-1px_1px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_-2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
   inset-shadow-white/80
   dark:inset-shadow-white/5;
 }
@@ -34,10 +31,9 @@
   @apply border
   bg-background-surface-sunken
   border-line-strong/35
-  shadow-[inset_0_2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  shadow-[inset_0_1px_1px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
   inset-shadow-black/5
-  dark:inset-shadow-black/40
-  ;
+  dark:inset-shadow-black/40;
 }
 
 @utility surface-highlighted {
@@ -46,44 +42,36 @@
 
 /* Brand Surfaces */
 @utility surface-brand {
-  @apply 
-  text-text-inverted
+  @apply text-text-inverted
   bg-linear-to-b
   via-75%
   from-[0.5rem]
   to-[calc(100%-0.5rem)]
   from-brand-default
   to-brand-moderate
-  dark:from-brand-moderate
-  dark:to-brand-default
-  /* dark:from-brand-default
-  dark:via-brand-moderate
-  dark:to-brand-default */
+  /* dark:from-brand-moderate */
+  /* dark:to-brand-default */
   border
   border-brand-default
-  /* bg-size-[100%_calc(100%+0.5rem)]
-  bg-repeat
-  bg-position-[50%_calc(50%-0.5rem)] */
-  
-  /* dark:*:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_-1px_1px_var(--tw-drop-shadow-color),0_-1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)] */
-  
-  /* text-shadow-2xs
-  text-shadow-brand-strong/50 */
   transition-[background-position,brightness]
-  shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)]
-  dark:shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-soft)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-white)_50%,transparent)]
-  /* dark:shadow-[inset_0_-1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)] */
+  shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)]
+  /* dark:shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-soft)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-white)_50%,transparent)] */
   duration-75
-  ease-out-cubic
-    ;
+  ease-out-cubic;
 
-    > *, &::before, &::after {
-      @apply
-      drop-shadow-[0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_1px_color-mix(in_srgb,var(--tw-drop-shadow-color)_100%,transparent),0_1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)]
+  > *,
+  &::before,
+  &::after {
+    @apply drop-shadow-[0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_1px_color-mix(in_srgb,var(--tw-drop-shadow-color)_100%,transparent),0_1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)]
       dark:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_10%,transparent)]
-      drop-shadow-brand-strong/50
-      ;
-    }
+      drop-shadow-brand-strong/50;
+  }
+}
+
+@utility surface-brand-light {
+  @apply bg-background-brand/15
+  border
+  border-line-brand/15;
 }
 
 /* Status Surfaces */
@@ -136,61 +124,59 @@
 }
 
 @utility surface-interactive-brand {
-  @apply 
-  surface-brand
+  @apply surface-brand
   hover:brightness-105
   hover:border-brand-strong
-  active:border-brand-default
-  ;
+  active:border-brand-default;
 }
 
 @utility surface-interactive {
-    @apply cursor-pointer hover:transition-colors include-interactive;
-
-    /* Interactive states for base surface */
-    &.surface {
-      @apply surface-interactive-neutral;
-    }
-
-    /* Interactive states for placeholder surface */
-    &.surface-placeholder {
-      @apply surface-interactive-placeholder;
-    }
-
-    /* Interactive states for elevated surface */
-    &.surface-elevated {
-      @apply hover:bg-background-surface-elevated/90 hover:border-line-hover active:bg-background-surface-elevated/75 active:border-line-strong;
-    }
-
-    /* Interactive states for sunken surface */
-    &.surface-sunken {
-      @apply hover:bg-background-surface hover:border-line-hover active:bg-background-page active:border-line-strong;
-    }
-
-    /* Interactive states for brand surface */
-    &.surface-brand {
-      @apply surface-interactive-brand;
-    }
-
-    /* Interactive states for success surface */
-    &.surface-success {
-      @apply surface-interactive-success;
-    }
-
-    /* Interactive states for error surface */
-    &.surface-error {
-      @apply surface-interactive-error;
-    }
-
-    /* Interactive states for warning surface */
-    &.surface-warning {
-      @apply surface-interactive-warning;
-    }
-
-    /* Interactive states for attention surface */
-    &.surface-attention {
-      @apply surface-interactive-attention;
-    }
+  @apply cursor-pointer hover:transition-colors include-interactive;
+
+  /* Interactive states for base surface */
+  &.surface {
+    @apply surface-interactive-neutral;
+  }
+
+  /* Interactive states for placeholder surface */
+  &.surface-placeholder {
+    @apply surface-interactive-placeholder;
+  }
+
+  /* Interactive states for elevated surface */
+  &.surface-elevated {
+    @apply hover:bg-background-surface-elevated/90 hover:border-line-hover active:bg-background-surface-elevated/75 active:border-line-strong;
+  }
+
+  /* Interactive states for sunken surface */
+  &.surface-sunken {
+    @apply hover:bg-background-surface hover:border-line-hover active:bg-background-page active:border-line-strong;
+  }
+
+  /* Interactive states for brand surface */
+  &.surface-brand {
+    @apply surface-interactive-brand;
+  }
+
+  /* Interactive states for success surface */
+  &.surface-success {
+    @apply surface-interactive-success;
+  }
+
+  /* Interactive states for error surface */
+  &.surface-error {
+    @apply surface-interactive-error;
+  }
+
+  /* Interactive states for warning surface */
+  &.surface-warning {
+    @apply surface-interactive-warning;
+  }
+
+  /* Interactive states for attention surface */
+  &.surface-attention {
+    @apply surface-interactive-attention;
+  }
 
   /* Interactive states for info surface */
   &.surface-info {
@@ -199,8 +185,7 @@
 }
 
 @utility surface-claim {
-  @apply
-  relative
+  @apply relative
   overflow-clip
   rounded-full
   bg-brand-moderate! 
@@ -217,8 +202,7 @@
   --claim-color-3: var(--color-text-inverted);
   --claim-color-4: var(--color-text-inverted);
 
-  @apply 
-  absolute
+  @apply absolute
   z-0
   -inset-1.5
   rounded-full

package/styles/table.css

@@ -100,7 +100,7 @@
   }
 
   th {
-    @apply font-medium text-left whitespace-nowrap text-text-secondary;
+    @apply font-semibold text-left whitespace-nowrap text-text-secondary;
   }
 
   td {
@@ -157,8 +157,8 @@
   }
 
   /* Row selection styles */
-  tr:has(input[type="checkbox"]:checked),
-  tr:has(input[type="radio"]:checked) {
+  tr:has(input[type='checkbox']:checked),
+  tr:has(input[type='radio']:checked) {
     @apply bg-background-brand/5;
     .table-item-title {
       @apply font-medium text-text-default;

package/styles/toast.css

@@ -10,7 +10,7 @@
 }
 
 @utility toast {
-  @apply relative pt-0.5 mx-auto w-full max-w-lg overflow-clip rounded border shadow-xl duration-300 text-text-default bg-background-surface ease-snappy-out border-line-default;
+  @apply relative pt-0.5 mx-auto w-full max-w-lg overflow-clip rounded border shadow-xl duration-300 text-text-default surface-elevated ease-snappy-out;
 
   &::before {
     @apply content-[''] absolute inset-x-0 top-0 h-0.5 rounded-t-xl duration-200 ease-in-out-cubic origin-center;
@@ -71,12 +71,10 @@
 }
 
 @utility toast-action {
-  @apply
-  px-3
+  @apply px-3
   py-1
   ml-3
-  rounded-2xl
-  ;
+  rounded-2xl;
 }
 
 @utility toast-close {

package/llm/components/navbar.json

@@ -1,158 +0,0 @@
-{
-  "id": "navbar",
-  "name": "Navbar",
-  "status": "stable",
-  "summary": "Navbar layout pattern for top-level product navigation and actions.",
-  "keywords": [
-    "header",
-    "nav",
-    "navbar",
-    "navigation bar",
-    "site navigation",
-    "top bar"
-  ],
-  "sourcePaths": [
-    "app/design-system/navbar/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/navbar.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"
-  ],
-  "apiModel": "html-class",
-  "baseClass": "navbar",
-  "variants": [],
-  "sizes": [],
-  "states": [
-    {
-      "name": "is-active",
-      "className": "is-active",
-      "description": "Highlights the active navigation item."
-    }
-  ],
-  "structure": {
-    "rootElement": "a",
-    "requiredClasses": [
-      "navbar"
-    ],
-    "optionalClasses": [
-      "is-active"
-    ],
-    "requiredChildren": [],
-    "optionalChildren": []
-  },
-  "attributes": {
-    "allowed": [
-      "class"
-    ],
-    "required": [],
-    "dataAttributes": [],
-    "roles": [],
-    "aria": [
-      "aria-current",
-      "aria-label"
-    ]
-  },
-  "a11y": {
-    "interactive": false,
-    "requiredRoles": [],
-    "requiredAria": [
-      "aria-current",
-      "aria-label"
-    ],
-    "keyboardSupport": [],
-    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
-  },
-  "dos": [
-    "Apply the base class 'navbar' 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."
-  ],
-  "donts": [
-    "Do not combine conflicting state classes on the same element.",
-    "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"
-  ],
-  "examples": [
-    {
-      "id": "canonical",
-      "file": "examples/navbar.html",
-      "description": "Minimal canonical Navbar usage."
-    }
-  ],
-  "composition": {
-    "patterns": [
-      "navigation-hierarchy"
-    ],
-    "relatedComponents": [],
-    "notes": []
-  },
-  "breakingChangePolicy": {
-    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
-    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
-  }
-}

package/llm/examples/banner-marketplace.html

@@ -1 +0,0 @@
-<div class="banner-marketplace">Funding banner</div>

package/llm/examples/empty-state.html

@@ -1 +0,0 @@
-<div class="empty-state">Empty state</div>

package/llm/examples/input-group.html

@@ -1 +0,0 @@
-<div class="input-group">Input group</div>

package/llm/examples/loader.html

@@ -1 +0,0 @@
-<div class="loader">Loader</div>

package/llm/examples/navbar.html

@@ -1 +0,0 @@
-<a class="navbar" href="#">Navbar</a>

package/llm/examples/skeleton.html

@@ -1 +0,0 @@
-<div class="skeleton">Skeleton</div>

package/styles/empty-state.css

@@ -1,48 +0,0 @@
-/*----------------------------*/
-/* EMPTY STATE */
-/*----------------------------*/
-
-@utility empty-state {
-  @apply p-8 rounded-3xl border bg-background-surface border-line-default text-center;
-
-  > :where(.empty-state-icon) {
-    @apply inline-flex justify-center items-center mx-auto mb-4 rounded-full size-14 surface-elevated text-text-tertiary;
-
-    > svg {
-      @apply size-7 fill-current;
-    }
-  }
-
-  > :where(h1, h2, h3, h4, h5, h6, .empty-state-title) {
-    @apply mb-2 h4;
-  }
-
-  > :where(p, .empty-state-description) {
-    @apply p2 text-text-secondary;
-  }
-
-  > :where(:last-child, .empty-state-actions) {
-    @apply flex flex-wrap gap-2 justify-center mt-4;
-  }
-}
-
-/* Compatibility aliases */
-@utility empty-state-icon {
-  @apply inline-flex justify-center items-center mx-auto mb-4 rounded-full size-14 surface-elevated text-text-tertiary;
-
-  > svg {
-    @apply size-7 fill-current;
-  }
-}
-
-@utility empty-state-title {
-  @apply mb-2 h4;
-}
-
-@utility empty-state-description {
-  @apply p2 text-text-secondary;
-}
-
-@utility empty-state-actions {
-  @apply flex flex-wrap gap-2 justify-center mt-4;
-}

package/styles/navbar.css

@@ -1,48 +0,0 @@
-/*----------------------------*/
-/* NAVBAR */
-/*----------------------------*/
-
-@utility navbar {
-  @apply w-full flex gap-3 items-center p-2 rounded-2xl border bg-background-surface border-line-default;
-
-  > :where(:first-child, .navbar-start) {
-    @apply flex flex-1 gap-2 items-center min-w-0;
-  }
-
-  > :where(:nth-child(2), .navbar-center) {
-    @apply flex gap-2 justify-center items-center;
-  }
-
-  > :where(:last-child, .navbar-end) {
-    @apply flex flex-1 gap-2 justify-end items-center min-w-0;
-  }
-
-  :where(a, button, .navbar-item) {
-    @apply inline-flex gap-2 items-center px-3 py-1.5 rounded-full text-sm include-interactive include-hover-primary text-text-secondary hover:text-text-default;
-
-    &.is-active {
-      @apply include-hover-primary-active text-text-brand;
-    }
-  }
-}
-
-/* Compatibility aliases */
-@utility navbar-start {
-  @apply flex flex-1 gap-2 items-center min-w-0;
-}
-
-@utility navbar-center {
-  @apply flex gap-2 justify-center items-center;
-}
-
-@utility navbar-end {
-  @apply flex flex-1 gap-2 justify-end items-center min-w-0;
-}
-
-@utility navbar-item {
-  @apply inline-flex gap-2 items-center px-3 py-1.5 rounded-full text-sm include-interactive include-hover-primary text-text-secondary hover:text-text-default;
-
-  &.is-active {
-    @apply include-hover-primary-active text-text-brand;
-  }
-}