@vireo-ai/trellis-ui 0.1.29 → 0.1.30

package/packages/client/src/styles/recipes/action.css

@@ -0,0 +1,175 @@
+@layer components {
+  /* Shared action treatment: Button and interactive Badge. */
+  [data-ui-action-recipe] {
+    --ui-action-text: var(--ui-surface-ink);
+    --ui-action-text-hover: var(--ui-surface-ink);
+    --ui-action-soft: var(--color-intent-neutral-soft);
+    --ui-action-soft-hover: var(--color-intent-neutral-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-neutral-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-neutral-soft-ink);
+    --ui-action-solid: var(--color-intent-neutral-solid);
+    --ui-action-solid-hover: var(--color-intent-neutral-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-neutral-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-neutral-solid-ink);
+    --ui-action-edge: var(--ui-surface-edge);
+    --ui-action-edge-hover: var(--ui-surface-edge-hover);
+    --ui-action-edge-strong: var(--ui-surface-edge-strong);
+    --ui-action-focus: var(--color-intent-neutral-focus);
+    --ui-action-focus-width: var(--color-intent-neutral-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="accent"] {
+    --ui-action-text: var(--color-intent-accent-text);
+    --ui-action-text-hover: var(--color-intent-accent-text-hover);
+    --ui-action-soft: var(--color-intent-accent-soft);
+    --ui-action-soft-hover: var(--color-intent-accent-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-accent-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-accent-soft-ink);
+    --ui-action-solid: var(--color-intent-accent-solid);
+    --ui-action-solid-hover: var(--color-intent-accent-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-accent-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-accent-solid-ink);
+    --ui-action-edge: var(--color-intent-accent-edge);
+    --ui-action-edge-hover: var(--color-intent-accent-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-accent-edge-strong);
+    --ui-action-focus: var(--color-intent-accent-focus);
+    --ui-action-focus-width: var(--color-intent-accent-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="success"] {
+    --ui-action-text: var(--color-intent-success-text);
+    --ui-action-text-hover: var(--color-intent-success-text-hover);
+    --ui-action-soft: var(--color-intent-success-soft);
+    --ui-action-soft-hover: var(--color-intent-success-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-success-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-success-soft-ink);
+    --ui-action-solid: var(--color-intent-success-solid);
+    --ui-action-solid-hover: var(--color-intent-success-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-success-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-success-solid-ink);
+    --ui-action-edge: var(--color-intent-success-edge);
+    --ui-action-edge-hover: var(--color-intent-success-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-success-edge-strong);
+    --ui-action-focus: var(--color-intent-success-focus);
+    --ui-action-focus-width: var(--color-intent-success-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="warning"] {
+    --ui-action-text: var(--color-intent-warning-text);
+    --ui-action-text-hover: var(--color-intent-warning-text-hover);
+    --ui-action-soft: var(--color-intent-warning-soft);
+    --ui-action-soft-hover: var(--color-intent-warning-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-warning-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-warning-soft-ink);
+    --ui-action-solid: var(--color-intent-warning-solid);
+    --ui-action-solid-hover: var(--color-intent-warning-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-warning-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-warning-solid-ink);
+    --ui-action-edge: var(--color-intent-warning-edge);
+    --ui-action-edge-hover: var(--color-intent-warning-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-warning-edge-strong);
+    --ui-action-focus: var(--color-intent-warning-focus);
+    --ui-action-focus-width: var(--color-intent-warning-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="danger"] {
+    --ui-action-text: var(--color-intent-danger-text);
+    --ui-action-text-hover: var(--color-intent-danger-text-hover);
+    --ui-action-soft: var(--color-intent-danger-soft);
+    --ui-action-soft-hover: var(--color-intent-danger-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-danger-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-danger-soft-ink);
+    --ui-action-solid: var(--color-intent-danger-solid);
+    --ui-action-solid-hover: var(--color-intent-danger-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-danger-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-danger-solid-ink);
+    --ui-action-edge: var(--color-intent-danger-edge);
+    --ui-action-edge-hover: var(--color-intent-danger-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-danger-edge-strong);
+    --ui-action-focus: var(--color-intent-danger-focus);
+    --ui-action-focus-width: var(--color-intent-danger-focus-width);
+  }
+
+  [data-ui-action-recipe]:where([data-variant="ghost"], [data-variant="link"]) {
+    color: var(--ui-action-text);
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  [data-ui-action-recipe][data-variant="soft"] {
+    color: var(--ui-action-soft-ink);
+    background-color: var(--ui-action-soft);
+    box-shadow: none;
+  }
+
+  /* Selected values need one more step of separation from their control surface than informational badges. */
+  [data-ui-select-chip][data-variant="soft"] {
+    background-color: var(--ui-action-soft-hover);
+  }
+
+  [data-ui-action-recipe][data-variant="surface"] {
+    color: var(--ui-action-text);
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
+  }
+
+  [data-ui-action-recipe][data-variant="outline"] {
+    color: var(--ui-action-text);
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
+  }
+
+  [data-ui-action-recipe][data-variant="solid"] {
+    color: var(--ui-action-solid-ink);
+    background-color: var(--ui-action-solid);
+    box-shadow: var(--shadow-elevation-1);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):focus-visible {
+    box-shadow: 0 0 0 var(--ui-action-focus-width) var(--ui-action-focus);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="surface"], [data-variant="outline"]):hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+    background-color: var(--color-interaction-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="link"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-soft-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-solid-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-soft-pressed);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-solid-pressed);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="ghost"], [data-variant="surface"], [data-variant="outline"]):active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--color-interaction-pressed);
+  }
+
+  [data-ui-badge-close]:hover,
+  [data-ui-badge-close]:focus-visible {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
+
+  [data-ui-badge-close]:focus-visible {
+    box-shadow: 0 0 0 1px currentColor;
+  }
+}

package/packages/client/src/styles/recipes/disabled.css

@@ -0,0 +1,16 @@
+@layer components {
+  /* Disabled is one terminal interaction treatment across every control anatomy. */
+  :is(
+    [data-ui-action-recipe]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]),
+    [data-ui-action-recipe][data-disabled],
+    [data-ui-control][data-ui-control-recipe]:is(
+      [data-disabled],
+      :disabled,
+      :has(:disabled):not(:has(:enabled))
+    ),
+    [data-ui-selection-root]:is([data-disabled], :has(:disabled):not(:has(:enabled)))
+  ) {
+    pointer-events: none;
+    opacity: var(--opacity-interaction-disabled);
+  }
+}

package/packages/client/src/styles/recipes/option.css

@@ -0,0 +1,123 @@
+@layer components {
+  /* Collection option treatment: Menu, Select, Date Picker, and Sidebar. */
+  [data-ui-option-recipe] {
+    --ui-option-text: var(--ui-surface-ink);
+    --ui-option-hover: var(--color-interaction-hover);
+    --ui-option-active: var(--color-interaction-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-neutral);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-neutral-hover);
+    --ui-option-selected-ink: var(--ui-surface-ink);
+    color: var(--ui-option-text);
+    background-color: transparent;
+  }
+
+  [data-ui-option-recipe][data-color="accent"] {
+    --ui-option-text: var(--color-intent-accent-text);
+    --ui-option-hover: var(--color-intent-accent-soft);
+    --ui-option-active: var(--color-intent-accent-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-accent);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-accent-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-accent-ink);
+  }
+
+  [data-ui-option-recipe][data-color="success"] {
+    --ui-option-text: var(--color-intent-success-text);
+    --ui-option-hover: var(--color-intent-success-soft);
+    --ui-option-active: var(--color-intent-success-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-success);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-success-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-success-ink);
+  }
+
+  [data-ui-option-recipe][data-color="warning"] {
+    --ui-option-text: var(--color-intent-warning-text);
+    --ui-option-hover: var(--color-intent-warning-soft);
+    --ui-option-active: var(--color-intent-warning-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-warning);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-warning-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-warning-ink);
+  }
+
+  [data-ui-option-recipe][data-color="danger"] {
+    --ui-option-text: var(--color-intent-danger-text);
+    --ui-option-hover: var(--background-interaction-selection-danger);
+    --ui-option-active: var(--background-interaction-selection-danger-hover);
+    --ui-option-selected-background: var(--background-interaction-selection-danger);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-danger-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-danger-ink);
+  }
+
+  [data-ui-option-recipe][data-variant="subtle"] {
+    background-color: var(--ui-option-hover);
+  }
+
+  [data-ui-option-recipe][data-variant="filled"] {
+    background-color: var(--ui-option-active);
+  }
+
+  [data-ui-option-recipe]:hover:not([data-disabled]),
+  [data-ui-option-recipe][data-selected]:hover:not([data-disabled]) {
+    color: var(--ui-option-text);
+    background-color: var(--ui-option-hover);
+  }
+
+  [data-ui-option-recipe]:is(:active, :focus-visible, [data-active], [data-highlighted]):not([data-disabled]) {
+    color: var(--ui-option-text);
+    background-color: var(--ui-option-active);
+  }
+
+  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):not([data-disabled]) {
+    color: var(--ui-option-selected-ink);
+    background: var(--ui-option-selected-background);
+  }
+
+  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):hover:not([data-disabled]) {
+    background: var(--ui-option-selected-background-hover);
+  }
+
+  [data-ui-option-recipe][data-disabled] {
+    pointer-events: none;
+    color: var(--color-interaction-disabled-ink);
+    background-color: transparent;
+  }
+
+  [data-ui-select-option-indicator] {
+    color: var(--color-intent-accent-text);
+  }
+
+  :is([data-ui-menu-label], [data-ui-select-label]) {
+    color: var(--ui-surface-ink-muted);
+  }
+
+  [data-ui-select-search] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
+  }
+
+  [data-ui-select-create],
+  [data-ui-date-picker-footer] {
+    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--ui-surface-separator);
+  }
+
+  @media (min-width: 40rem) {
+    [data-ui-date-picker-presets][data-position="left"] {
+      box-shadow: inset calc(var(--border-width-edge-separator) * -1) 0 0 var(--ui-surface-separator);
+    }
+
+    [data-ui-date-picker-presets][data-position="right"] {
+      box-shadow: inset var(--border-width-edge-separator) 0 0 var(--ui-surface-separator);
+    }
+  }
+
+  [data-ui-date-picker-presets][data-position="top"] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
+  }
+
+  [data-ui-date-picker-presets][data-position="bottom"] {
+    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--ui-surface-separator);
+  }
+
+  :is([data-ui-menu-separator], [data-ui-select-separator]) > [role="separator"],
+  [data-ui-select-separator] > div {
+    background-color: var(--ui-surface-separator);
+  }
+}

package/packages/client/src/styles/recipes/selection.css

@@ -0,0 +1,78 @@
+@layer components {
+  /* Native selection treatment: Checkbox, Radio, Switch, and Slider. */
+  [data-ui-selection-root] {
+    color: inherit;
+  }
+
+  [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-track"] {
+    --ui-selection-edge: var(--ui-surface-edge);
+    color: var(--color-intent-accent-solid-ink);
+    background-color: var(--ui-surface-color);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-selection-edge);
+  }
+
+  [data-ui-selection-recipe="indicator"]:is([data-checked], [data-indeterminate]),
+  [data-ui-selection-recipe="switch-track"][data-checked] {
+    --ui-selection-edge: var(--ui-interaction-selected-edge, var(--color-intent-accent-edge));
+    color: var(--ui-selection-solid-ink, var(--color-intent-accent-solid-ink));
+    background-color: var(--ui-selection-solid, var(--color-intent-accent-solid));
+  }
+
+  [data-ui-selection-recipe="switch-thumb"],
+  [data-ui-selection-recipe="slider-thumb"] {
+    background-color: var(--ui-surface-color);
+  }
+
+  [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-track"] {
+    background-color: var(--color-intent-neutral-soft);
+  }
+
+  [data-ui-selection-recipe="switch-thumb"][data-checked] {
+    &::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--color-intent-accent-solid-ink);
+      content: "";
+    }
+  }
+
+  [data-ui-selection-recipe="slider-range"] {
+    background-color: var(--color-intent-accent-solid);
+  }
+
+  [data-ui-selection-recipe][data-invalid] {
+    --ui-selection-edge: var(--color-intent-danger-edge-strong);
+  }
+
+  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-thumb"][data-focus] {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--ui-surface-edge)),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-selection-recipe="slider-thumb"][data-focus] {
+    box-shadow:
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus),
+      var(--shadow-elevation-1);
+  }
+
+  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--color-intent-danger-edge-strong)),
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
+  }
+
+  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
+    box-shadow:
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus),
+      var(--shadow-elevation-1);
+  }
+}