@vireo-ai/trellis-ui 0.1.41 → 0.1.43

package/package.json

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

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

@@ -22,9 +22,12 @@
 }
 @layer components {
   /* Field control treatment. */
-[data-ui-control][data-ui-control-recipe="field"] {
+  [data-ui-control][data-ui-control-recipe="field"] {
     color: inherit;
     background-color: transparent;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"] {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
   }
 
@@ -33,15 +36,15 @@
     box-shadow: none;
   }
 
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     background-color: var(--color-interaction-pressed);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow:
       0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
       0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);

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";