@vireo-ai/trellis-ui 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",

package/packages/client/src/components/keybinding/styles.css

@@ -0,0 +1,14 @@
+@layer components {
+  [data-ui-keybinding-key] {
+    box-shadow:
+      inset 0 0 0 var(--border-width-edge-control)
+      color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent);
+  }
+
+  [data-ui-keybinding-key][data-pressed] {
+    background-color: var(--color-interaction-pressed);
+    box-shadow:
+      inset 0 0 0 var(--border-width-edge-control)
+      currentColor;
+  }
+}

package/packages/client/src/components/toast/styles.css

@@ -55,21 +55,9 @@
 @layer components {
   /* Feedback surface treatment: Toast. */
   [data-ui-toast-recipe] {
-    --ui-toast-ink: var(--ui-surface-ink);
-    --ui-toast-ink-muted: var(--ui-surface-ink-muted);
+    --ui-toast-ink: var(--ui-semantic-surface-ink);
+    --ui-toast-ink-muted: var(--ui-semantic-surface-ink-muted);
     color: var(--ui-toast-ink);
-    background-color: var(--ui-surface-color);
-  }
-
-  [data-ui-toast-recipe][data-variant="soft"] {
-    --ui-toast-ink: var(--ui-intent-soft-ink);
-    --ui-toast-ink-muted: var(--ui-intent-soft-ink-muted);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-intent-soft);
-  }
-
-  [data-ui-toast-recipe][data-variant="surface"] {
-    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-intent-edge);
   }
 
   [data-ui-toast-recipe][data-variant="outline"] {
@@ -80,13 +68,6 @@
     background-color: transparent;
   }
 
-  [data-ui-toast-recipe][data-variant="solid"] {
-    --ui-toast-ink: var(--ui-intent-solid-ink);
-    --ui-toast-ink-muted: var(--ui-intent-solid-ink);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-intent-solid);
-  }
-
   [data-ui-toast-marker] {
     background-color: var(--ui-intent-solid);
   }

package/packages/client/src/components/tooltip/styles.css

@@ -0,0 +1,23 @@
+@layer components {
+  [data-ui-tooltip-content][data-ui-semantic-surface] {
+    color: color-mix(
+      in oklab,
+      var(--ui-semantic-surface-ink),
+      var(--ui-semantic-surface-ink-muted) var(--label-ink-emphasis)
+    );
+  }
+
+  [data-ui-tooltip-content] [data-ui-keybinding-key] {
+    box-shadow:
+      inset 0 0 0 var(--border-width-edge-control)
+      var(--ui-surface-edge);
+  }
+
+  [data-ui-tooltip-content] [data-ui-keybinding-key][data-pressed] {
+    color: var(--ui-semantic-surface-ink);
+    background-color: var(--color-interaction-pressed);
+    box-shadow:
+      inset 0 0 0 var(--border-width-edge-control)
+      var(--ui-surface-edge-strong);
+  }
+}

package/packages/client/src/styles/components.css

@@ -19,6 +19,8 @@
 @import "../components/input/styles.css";
 @import "../components/sidebar/styles.css";
 @import "../components/panels/styles.css";
+@import "../components/tooltip/styles.css";
+@import "../components/keybinding/styles.css";
 @import "../directives/sortable.css";
 
 /*
@@ -29,6 +31,7 @@
 @import "./recipes/disabled.css";
 @import "./recipes/intent.css";
 @import "./recipes/action.css";
+@import "./recipes/floating-surface.css";
 @import "../components/toast/styles.css";
 @import "../components/tabs/styles.css";
 @import "./recipes/option.css";