@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

package/src/css/components/dialog.css

@@ -0,0 +1,78 @@
+/**
+ * Dialog
+ */
+
+@layer dx-components {
+  .dx-dialog__overlay {
+    @apply z-40 fixed grid inset-x-0 top-0 h-dvh py-[env(safe-area-inset-top)] place-items-center;
+    @apply bg-scrim-surface backdrop-blur-xs;
+
+    &[data-state='open'] {
+      @apply animate-fade-in;
+    }
+
+    &[data-state='closed'] {
+      @apply animate-fade-out;
+    }
+
+    &[data-block-align='start'] {
+      align-items: start;
+      justify-items: center;
+    }
+
+    &[data-block-align='center'] {
+      place-items: center;
+    }
+
+    &[data-block-align='end'] {
+      align-items: end;
+      justify-items: center;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-sm)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
+    }
+  }
+
+  @media (width >= theme(--breakpoint-md)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
+    }
+  }
+
+  @media (width >= theme(--breakpoint-lg)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
+    }
+  }
+
+  .dx-dialog__content {
+    @apply flex flex-col w-dvw max-w-full max-h-full overflow-hidden shadow-md;
+
+    &[data-state='open'] {
+      @apply animate-slide-up-and-fade;
+    }
+
+    &[data-state='closed'] {
+      @apply animate-slide-down-and-fade;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-sm)) {
+    .dx-dialog__content {
+      @apply w-[95vw] border rounded-md border-separator;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-md)) {
+    .dx-dialog__content {
+      @apply max-w-[24rem];
+    }
+  }
+
+  .dx-dialog__title {
+    @apply shrink-0 text-xl font-medium;
+  }
+}

package/src/{styles/layers/focus-ring.css → css/components/focus.css}

@@ -1,50 +1,61 @@
-@layer utilities {
+/**
+ * Focus ring
+ */
+
+@layer dx-components {
   .dx-focus-ring,
   .dx-focus-ring-inset {
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
     }
   }
 
+  .dx-focus-ring-none {
+    &:focus,
+    &:focus-visible {
+      @apply outline-hidden! ring-0!;
+    }
+  }
+
   .dx-focus-ring-always,
   .dx-focus-ring-inset-always {
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -60,7 +71,7 @@
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -68,17 +79,17 @@
   .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -86,17 +97,17 @@
   .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -129,23 +140,23 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -162,30 +173,30 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
 
         &:hover {
-          @apply outline-none;
-
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
     }
   }
 
-  .dx-focus-ring-inset-over-all, .dx-focus-ring-inset-over-all-always {
+  .dx-focus-ring-inset-over-all,
+  .dx-focus-ring-inset-over-all-always {
     &:not([disabled]),
     &[disabled='false'] {
       &::after {
@@ -202,23 +213,31 @@
         inset: 0;
       }
 
-      @media screen(lg) {
-        &[data-sidebar-inline-start-state='expanded']::after {
-          inset-inline-start: var(--nav-sidebar-size);
+      @media (width >= theme(--breakpoint-lg)) {
+        &[data-sidebar-left-state='expanded']::after {
+          inset-inline-start: var(--dx-nav-sidebar-size);
         }
 
-        &[data-sidebar-inline-start-state='collapsed']::after {
-          inset-inline-start: var(--l0-size);
+        &[data-sidebar-left-state='collapsed']::after {
+          inset-inline-start: var(--dx-l0-size);
         }
 
-        &[data-sidebar-inline-end-state='expanded']::after {
-          inset-inline-end: var(--complementary-sidebar-size);
+        &[data-sidebar-right-state='expanded']::after {
+          inset-inline-end: var(--dx-complementary-sidebar-size);
         }
 
-        &[data-sidebar-inline-end-state='collapsed']::after {
-          inset-inline-end: var(--r0-size);
+        &[data-sidebar-right-state='collapsed']::after {
+          inset-inline-end: var(--dx-r0-size);
         }
       }
     }
   }
+
+  .dx-focus-subdued {
+    @apply focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0;
+  }
+
+  .dx-focus-static {
+    @apply ring-2 ring-offset-0 ring-primary-300 ring-offset-white dark:ring-primary-400 dark:ring-offset-black;
+  }
 }

package/src/css/components/icon.css

@@ -0,0 +1,9 @@
+/**
+ * Icons
+ */
+
+@layer dx-components {
+  .dx-icon-inline {
+    @apply inline-block align-[-0.125em];
+  }
+}

package/src/css/components/link.css

@@ -0,0 +1,9 @@
+/**
+ * Link component styles.
+ */
+
+@layer dx-components {
+  .dx-link {
+    @apply text-accent-text hover:text-accent-text-hover;
+  }
+}

package/src/css/components/panel.css

@@ -0,0 +1,117 @@
+/**
+ * Panel — applies bg-{hue}-surface / text-{hue}-surface-text / border-{hue}-border tokens via data-hue attribute or BEM modifier.
+ * Example: <div className='dx-panel' data-hue='blue'>...</div>
+ * Example: <div className='dx-panel dx-panel--blue'>...</div>
+ */
+
+@layer dx-components {
+  [data-hue='neutral'] .dx-panel,
+  .dx-panel--neutral {
+    @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
+  }
+
+  [data-hue='red'] .dx-panel,
+  .dx-panel--red {
+    @apply bg-red-surface text-red-surface-text border-red-border;
+  }
+
+  [data-hue='orange'] .dx-panel,
+  .dx-panel--orange {
+    @apply bg-orange-surface text-orange-surface-text border-orange-border;
+  }
+
+  [data-hue='amber'] .dx-panel,
+  .dx-panel--amber {
+    @apply bg-amber-surface text-amber-surface-text border-amber-border;
+  }
+
+  [data-hue='yellow'] .dx-panel,
+  .dx-panel--yellow {
+    @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
+  }
+
+  [data-hue='lime'] .dx-panel,
+  .dx-panel--lime {
+    @apply bg-lime-surface text-lime-surface-text border-lime-border;
+  }
+
+  [data-hue='green'] .dx-panel,
+  .dx-panel--green {
+    @apply bg-green-surface text-green-surface-text border-green-border;
+  }
+
+  [data-hue='emerald'] .dx-panel,
+  .dx-panel--emerald {
+    @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
+  }
+
+  [data-hue='teal'] .dx-panel,
+  .dx-panel--teal {
+    @apply bg-teal-surface text-teal-surface-text border-teal-border;
+  }
+
+  [data-hue='cyan'] .dx-panel,
+  .dx-panel--cyan {
+    @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
+  }
+
+  [data-hue='sky'] .dx-panel,
+  .dx-panel--sky {
+    @apply bg-sky-surface text-sky-surface-text border-sky-border;
+  }
+
+  [data-hue='blue'] .dx-panel,
+  .dx-panel--blue {
+    @apply bg-blue-surface text-blue-surface-text border-blue-border;
+  }
+
+  [data-hue='indigo'] .dx-panel,
+  .dx-panel--indigo {
+    @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
+  }
+
+  [data-hue='violet'] .dx-panel,
+  .dx-panel--violet {
+    @apply bg-violet-surface text-violet-surface-text border-violet-border;
+  }
+
+  [data-hue='purple'] .dx-panel,
+  .dx-panel--purple {
+    @apply bg-purple-surface text-purple-surface-text border-purple-border;
+  }
+
+  [data-hue='fuchsia'] .dx-panel,
+  .dx-panel--fuchsia {
+    @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
+  }
+
+  [data-hue='pink'] .dx-panel,
+  .dx-panel--pink {
+    @apply bg-pink-surface text-pink-surface-text border-pink-border;
+  }
+
+  [data-hue='rose'] .dx-panel,
+  .dx-panel--rose {
+    @apply bg-rose-surface text-rose-surface-text border-rose-border;
+  }
+
+  [data-hue='info'] .dx-panel,
+  .dx-panel--info {
+    @apply bg-info-surface text-info-surface-text border-info-border;
+  }
+
+  [data-hue='success'] .dx-panel,
+  .dx-panel--success {
+    @apply bg-success-surface text-success-surface-text border-success-border;
+  }
+
+  [data-hue='warning'] .dx-panel,
+  .dx-panel--warning {
+    @apply bg-warning-surface text-warning-surface-text border-warning-border;
+  }
+
+  [data-hue='error'] .dx-panel,
+  .dx-panel--error {
+    @apply bg-error-surface text-error-surface-text border-error-border;
+  }
+}

package/src/css/components/scrollbar.css

@@ -0,0 +1,24 @@
+/**
+ * Scrolling 
+ * Pseudo-classes are not supported by Tailwind.
+ */
+
+@layer dx-components {
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-scrollbar-thumb-hover!;
+  }
+  ::-webkit-scrollbar-thumb:active {
+    @apply bg-scrollbar-thumb-active!;
+  }
+
+  .dx-scrollbar-thin::-webkit-scrollbar {
+    @apply w-[4px];
+  }
+  .dx-scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+    transition: background 0.15s;
+  }
+  .dx-scrollbar-thin:hover::-webkit-scrollbar-thumb {
+    @apply bg-scrollbar-thumb;
+  }
+}

package/src/css/components/selected.css

@@ -0,0 +1,35 @@
+/**
+ * Selected / Highlighted state utilities.
+ *
+ * See `./selected.md` for the ARIA pairing grammar — every class below
+ * fires off a specific attribute and silently does nothing without it.
+ */
+
+@layer dx-components {
+  /* Pure visual affordance, no ARIA pair. Combine with dx-selected or dx-current. */
+  .dx-hover {
+    @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
+  }
+
+  /* Pairs with Radix-managed `data-highlighted`. Don't set the attribute manually. */
+  .dx-highlighted {
+    @apply data-[highlighted]:bg-highlight-surface
+      data-[highlighted]:text-highlight-surface-text
+      hover:data-[highlighted]:bg-highlight-surface-hover;
+  }
+
+  /* Pairs with `aria-current="true|page|…"`. Use for "you are here" navigation. */
+  .dx-current {
+    @apply dx-ring-pseudo
+      aria-[current=true]:bg-highlight-surface aria-[current=true]:text-highlight-surface-text
+      aria-[current=true]:after:ring-active-separator!;
+  }
+
+  /* Pairs with `aria-selected`. Use for listbox/option selection (master/detail). */
+  .dx-selected {
+    @apply aria-selected:bg-selected-surface
+      aria-selected:text-selected-surface-text hover:aria-selected:text-selected-surface-text
+      aria-selected:font-semibold aria-selected:tracking-normal
+      transition-[color,font-variation-settings,letter-spacing];
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Surfaces
+ */
+
+@layer dx-components {
+  .dx-base-surface {
+    @apply bg-base-surface text-base-surface-text;
+    --surface-bg: var(--color-base-surface);
+  }
+
+  .dx-sidebar-surface {
+    @apply bg-sidebar-surface text-base-surface-text;
+    --surface-bg: var(--color-sidebar-surface);
+  }
+
+  .dx-modal-surface {
+    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    --surface-bg: var(--color-modal-surface);
+  }
+
+  .dx-attention-surface {
+    @apply bg-attention-surface text-base-surface-text;
+    --surface-bg: var(--color-attention-surface);
+  }
+}
+
+/* TODO(burdon): Resolve. */
+/* @layer dx-tokens {
+  .dx-sidebar-surface, .dx-modal-surface {
+    --color-hover-surface: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+    --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+    --color-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  }
+} */