@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.bc2380dfbc

package/src/css/components/selected.md

@@ -0,0 +1,101 @@
+# `dx-*` selection / navigation grammar
+
+Companion to `selected.css`. The four selection-state utilities below are
+each bound to a specific ARIA attribute (or `data-*`) selector. **The
+class only fires when the matching ARIA attribute is set on the same
+element.** Mismatches (e.g. `dx-current` paired with `aria-selected`)
+silently render as a plain row.
+
+| Class            | Bound selector         | Pair with                          | Use when                                                                                                                                                                                                    |
+| ---------------- | ---------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dx-hover`       | `hover:`               | (no ARIA — pure visual affordance) | Always, on any clickable row. Adds the cursor + hover bg/text.                                                                                                                                              |
+| `dx-selected`    | `aria-selected:`       | `aria-selected={boolean}`          | A row is "the chosen one" driving a master/detail panel. Listbox / option pattern. Multi-select OK.                                                                                                         |
+| `dx-current`     | `aria-[current=true]:` | `aria-current='true'`              | A row is "where you are" in a navigation set (current page, current step). At most one current per group. The CSS variant fires only on `aria-current='true'`, so use that literal even on `<a>`/nav links. |
+| `dx-highlighted` | `data-[highlighted]:`  | Radix `data-highlighted` (managed) | A Radix-managed transient highlight (menu / combobox active option). Don't set the attribute manually.                                                                                                      |
+
+## Rules
+
+1. **Never combine `dx-selected` and `dx-current` on the same element**
+   unless you also set both `aria-selected` and `aria-current`. They
+   express different things (chosen vs you-are-here) and the visual
+   weight is similar enough that combining them defeats both.
+2. **`aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled`
+   are not selection-row attributes.** None of the `dx-*` selection
+   utilities pair with them. Toggle buttons (mute/unmute) want
+   `aria-pressed`; a selection row wants `aria-selected`.
+3. **`aria-selected` is only valid on roles that admit it** — `option`,
+   `tab`, `gridcell`, `row`, `treeitem`, `columnheader`, `rowheader`.
+   On a plain `<button>` inside a `<ul role='listbox'>`, give the button
+   `role='option'` so assistive tech sees the attribute.
+4. **`dx-active` does not exist.** If you see it in code it's a no-op
+   string. Use `dx-selected` (selection) or `dx-current` (navigation)
+   instead.
+5. **Set ARIA before adding the class.** The class is inert without
+   the attribute; it's not a fallback styler. Reviewers should reject
+   PRs that add `dx-selected` without `aria-selected`.
+
+## Canonical patterns
+
+### Selectable row in a list (master/detail)
+
+```tsx
+<ul role='listbox' aria-label='…'>
+  {items.map((item) => (
+    <li key={item.id} role='presentation'>
+      <button
+        type='button'
+        role='option'
+        aria-selected={item.id === selectedId}
+        className='dx-hover dx-selected'
+        onClick={() => onSelect(item.id)}
+      >
+        {item.label}
+      </button>
+    </li>
+  ))}
+</ul>
+```
+
+### "You are here" in a navigation list
+
+```tsx
+<nav>
+  <ul>
+    {pages.map((page) => (
+      <li key={page.href}>
+        <a
+          href={page.href}
+          aria-current={page.href === currentHref ? 'true' : undefined}
+          className='dx-hover dx-current'
+        >
+          {page.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+```
+
+### Toggle button (NOT a row)
+
+Don't reach for `dx-selected` here. Toggle buttons want their own
+visual treatment via `aria-pressed:` variants — out of scope for this
+file.
+
+```tsx
+<button type='button' aria-pressed={muted} onClick={toggleMute}>
+  {muted ? 'Unmute' : 'Mute'}
+</button>
+```
+
+## Enforcing the grammar
+
+A future ESLint rule could flag:
+
+- `dx-selected` without `aria-selected` on the same element.
+- `dx-current` without `aria-current` on the same element.
+- `dx-active` literal anywhere.
+
+Until that exists, reviewers and the `react-ui-list` `RowList` /
+`CardList` containers (which set both attribute and class together)
+are the enforcement.

package/src/css/components/surface.css

@@ -4,22 +4,22 @@
 
 @layer dx-components {
   .dx-base-surface {
-    @apply bg-base-surface text-base-surface-text;
+    @apply bg-base-surface text-base-foreground;
     --surface-bg: var(--color-base-surface);
   }
 
   .dx-sidebar-surface {
-    @apply bg-sidebar-surface text-base-surface-text;
+    @apply bg-sidebar-surface text-base-foreground;
     --surface-bg: var(--color-sidebar-surface);
   }
 
   .dx-modal-surface {
-    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    @apply bg-modal-surface text-base-foreground backdrop-blur-md;
     --surface-bg: var(--color-modal-surface);
   }
 
   .dx-attention-surface {
-    @apply bg-attention-surface text-base-surface-text;
+    @apply bg-attention-surface text-base-foreground;
     --surface-bg: var(--color-attention-surface);
   }
 }

package/src/css/components/tag.css

@@ -11,7 +11,9 @@
 
   .dx-tag--anchor {
     /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+    @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
+    /** TODO(burdon): Configure secondary color. */
+    @apply bg-group-surface text-sky-foreground border-sky-border;
 
     &:hover {
       @apply bg-hover-surface;
@@ -20,111 +22,111 @@
 
   .dx-tag[data-hue='neutral'],
   .dx-tag--neutral {
-    @apply bg-neutral-surface text-neutral-surface-text;
+    @apply bg-neutral-surface text-neutral-foreground;
   }
 
   .dx-tag[data-hue='red'],
   .dx-tag--red {
-    @apply bg-red-surface text-red-surface-text;
+    @apply bg-red-surface text-red-foreground;
   }
 
   .dx-tag[data-hue='orange'],
   .dx-tag--orange {
-    @apply bg-orange-surface text-orange-surface-text;
+    @apply bg-orange-surface text-orange-foreground;
   }
 
   .dx-tag[data-hue='amber'],
   .dx-tag--amber {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-foreground;
   }
 
   .dx-tag[data-hue='yellow'],
   .dx-tag--yellow {
-    @apply bg-yellow-surface text-yellow-surface-text;
+    @apply bg-yellow-surface text-yellow-foreground;
   }
 
   .dx-tag[data-hue='lime'],
   .dx-tag--lime {
-    @apply bg-lime-surface text-lime-surface-text;
+    @apply bg-lime-surface text-lime-foreground;
   }
 
   .dx-tag[data-hue='green'],
   .dx-tag--green {
-    @apply bg-green-surface text-green-surface-text;
+    @apply bg-green-surface text-green-foreground;
   }
 
   .dx-tag[data-hue='emerald'],
   .dx-tag--emerald {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-foreground;
   }
 
   .dx-tag[data-hue='teal'],
   .dx-tag--teal {
-    @apply bg-teal-surface text-teal-surface-text;
+    @apply bg-teal-surface text-teal-foreground;
   }
 
   .dx-tag[data-hue='cyan'],
   .dx-tag--cyan {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-foreground;
   }
 
   .dx-tag[data-hue='sky'],
   .dx-tag--sky {
-    @apply bg-sky-surface text-sky-surface-text;
+    @apply bg-sky-surface text-sky-foreground;
   }
 
   .dx-tag[data-hue='blue'],
   .dx-tag--blue {
-    @apply bg-blue-surface text-blue-surface-text;
+    @apply bg-blue-surface text-blue-foreground;
   }
 
   .dx-tag[data-hue='indigo'],
   .dx-tag--indigo {
-    @apply bg-indigo-surface text-indigo-surface-text;
+    @apply bg-indigo-surface text-indigo-foreground;
   }
 
   .dx-tag[data-hue='violet'],
   .dx-tag--violet {
-    @apply bg-violet-surface text-violet-surface-text;
+    @apply bg-violet-surface text-violet-foreground;
   }
 
   .dx-tag[data-hue='purple'],
   .dx-tag--purple {
-    @apply bg-purple-surface text-purple-surface-text;
+    @apply bg-purple-surface text-purple-foreground;
   }
 
   .dx-tag[data-hue='fuchsia'],
   .dx-tag--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-surface-text;
+    @apply bg-fuchsia-surface text-fuchsia-foreground;
   }
 
   .dx-tag[data-hue='pink'],
   .dx-tag--pink {
-    @apply bg-pink-surface text-pink-surface-text;
+    @apply bg-pink-surface text-pink-foreground;
   }
 
   .dx-tag[data-hue='rose'],
   .dx-tag--rose {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-foreground;
   }
 
   .dx-tag[data-hue='info'],
   .dx-tag--info {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-foreground;
   }
 
   .dx-tag[data-hue='success'],
   .dx-tag--success {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-foreground;
   }
 
   .dx-tag[data-hue='warning'],
   .dx-tag--warning {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-foreground;
   }
 
   .dx-tag[data-hue='error'],
   .dx-tag--error {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-foreground;
   }
 }

package/src/css/layout/size.css

@@ -3,15 +3,28 @@
  */
 
 @layer dx-components {
-  /** 
-   * Registers the element as a size query container. 
+  /**
+   * Registers the element as a size query container.
    * Children can use @container queries to apply styles based on the container's dimensions (both width and height).
-   * Also enables children to use cqi units (e.g., max-w-[100cqi])
+   * Also enables children to use cqi/cqb units (e.g., max-w-[100cqi]).
+   * NOTE: `container-type: size` implies layout/size containment, which breaks CodeMirror's
+   * coordinate measurement (causes blank viewport sections during scroll until a click forces
+   * a re-measure). For editor content where only inline (width-based) queries are needed,
+   * use `.dx-inline-size-container` instead.
    */
   .dx-size-container {
     container-type: size;
   }
 
+  /**
+   * Inline-only size query container. Provides cqi units for children without the layout
+   * containment side-effects of `container-type: size`. Use this in CodeMirror content
+   * wrappers where size containment would break viewport measurement.
+   */
+  .dx-inline-size-container {
+    container-type: inline-size;
+  }
+
   /**
    * Document width.
    */

package/src/css/theme/animation.css

@@ -227,3 +227,34 @@
   }
   --animate-blink: blink 1s step-start infinite;
 }
+
+/**
+ * Shimmer (text)
+ * Sweeps a brighter band across text via mask alpha — preserves the consumer's color.
+ * Translates exactly one tile period (2× element width) per cycle so the loop seam is invisible.
+ */
+@keyframes shimmer-text {
+  from {
+    mask-position-x: 100%;
+    -webkit-mask-position-x: 100%;
+  }
+  to {
+    mask-position-x: -100%;
+    -webkit-mask-position-x: -100%;
+  }
+}
+
+/**
+ * Honor user reduced-motion preference for decorative animations.
+ * Functional transitions (fade/slide/toast/blink) are intentionally excluded —
+ * suppressing them would hide UI state changes.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .animate-halo-pulse,
+  .animate-spin-slow,
+  .animate-trail,
+  .animate-trail-offset,
+  .animate-shimmer {
+    animation: none;
+  }
+}

package/src/css/theme/semantic.css

@@ -1,21 +1,25 @@
 /**
  * Tokens
+ *
+ * Naming convention: --color-{name}-{part}[-{state}]
+ *   part  : surface | foreground | border | fill | text
+ *   state : hover | active (optional)
+ *
+ * See DESIGN_SYSTEM.md.
  */
 
 @theme {
   /**
-   * Surfaces 
-   *
-   * TODO(burdon): Align suffix with styles.css?
-   * -xxx-surface
-   * -xxx-surface-text
+   * Surfaces
    */
 
   --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
-  --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-base-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
   --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
-  --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-inverse-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+
+  --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
 
   --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-scrim-surface: light-dark(
@@ -31,85 +35,77 @@
   --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
 
+  /* input */
   --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-input-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
-  /** TODO(burdon): current vs active vs selected */
+  /* current (aria-current) */
   --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-current-surface-hover: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-current-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* selected (aria-selected) */
+  --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
+  --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-selected-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
-  /** TODO(burdon): Merge overlay/surface? */
-  --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  /* hover (:hover, data-highlighted) */
   --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750));
-  --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-hover-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
   /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
   --color-attention-surface: var(--color-focus-surface);
   --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3);
-  --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
-  --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600));
-
-  /* Highlight and Selected */
-
-  --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
-  --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
-  --color-highlight-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-
-  --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
-  --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
-  --color-selected-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
   /* Accent (primary) */
-  /* TODO(burdon): Rename primary */
-
   --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700));
   --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800));
-  --color-accent-surface-text: var(--color-blue-100);
+  --color-accent-foreground: var(--color-blue-100);
   --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400));
   --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500));
-  --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600));
 
   --color-un-accent: var(--color-neutral-400);
   --color-un-accent-hover: var(--color-neutral-500);
 
-  /* Separator */
+  /* Focus rings (global) */
+  --color-focus-ring: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --color-focus-ring-subtle: light-dark(var(--color-neutral-400), var(--color-neutral-600));
 
+  /* Separator */
   --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850));
   --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700));
   --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
 
   /* Scrollbar */
-
   --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600));
   --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
 
   /* Sheet */
-
   --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800));
   --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
 
-  /* Grid */
-
+  /*
+   * Grid
+   * NOTE: Update main.css when changing grid tokens (and restart dev server).
+   */
   --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-grid-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5);
+  --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400));
+  --color-grid-selection-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600));
   --color-grid-comment-active: light-dark(
     oklch(from var(--color-green-400) l c h / 0.5),
     oklch(from var(--color-green-600) l c h / 0.5)
   );
-  --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1);
-  --color-grid-selection-overlay: var(--color-blue-500);
-  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600));
 
   /* Text */
-
   --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
   --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500));
   --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));

package/src/css/theme/spacing.css

@@ -9,13 +9,12 @@
   /** Minimum inset from the viewport edge for floating surfaces. */
   --spacing-screen-border: 2rem;
 
-  --spacing-popover-min-width: 12rem;
+  --spacing-popover-default-width: 20rem;
+  --spacing-popover-min-width: 16rem;
 
   --spacing-document-max-width: 50rem;
   --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
 
-  --spacing-popover-min-width: 16rem;
-
   --spacing-card-default-width: 20rem;
   --spacing-card-min-width: 18rem;
   --spacing-card-max-width: 22rem;
@@ -95,7 +94,7 @@
     --dx-input-fine: var(--dx-lacuna-3);
     --dx-input-coarse: var(--dx-lacuna-4);
 
-    --dx-default-icons-size: 1.25rem; /* size=5 */
+    --dx-default-icons-size: 1rem; /* size=4 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -116,16 +115,16 @@
     --dx-toolbar-size: var(--dx-rail-action); /* 40px */
     --dx-statusbar-size: var(--dx-rail-item); /* 32px */
 
-    /** NOTE: On MBP, should have nav sidebare open with 4 column mosaic board. */
-    --dx-nav-sidebar-size: 21.5rem;
+    /** NOTE: Sidebar optimized to show plank + companion with sidebar open on 16" MBP. */
+    --dx-nav-sidebar-size: 350px;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
 
-    --dx-l0-size: 74px; /* MacOS windowing controls. */
+    --dx-l0-size: 72px;
     --dx-l0-avatar-size: 3rem;
     --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
     --dx-r0-size: var(--dx-rail-size);
-    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
+    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
   }
 
   :root {