@dxos/ui-theme 0.8.4-main.6fa680abb7 → 0.8.4-main.74a063c4e0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.8.4-main.6fa680abb7",
+  "version": "0.8.4-main.74a063c4e0",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -57,15 +57,19 @@
     "tailwind-scrollbar": "^4.0.0",
     "tailwindcss": "^4.2.0",
     "tailwindcss-radix": "^4.0.2",
-    "@dxos/node-std": "0.8.4-main.6fa680abb7",
-    "@dxos/util": "0.8.4-main.6fa680abb7"
+    "@dxos/log": "0.8.4-main.74a063c4e0",
+    "@dxos/node-std": "0.8.4-main.74a063c4e0",
+    "@dxos/util": "0.8.4-main.74a063c4e0"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
     "esbuild": "0.25.11",
     "vite": "^7.1.11",
-    "@dxos/ui-types": "0.8.4-main.6fa680abb7"
+    "@dxos/ui-types": "0.8.4-main.74a063c4e0"
+  },
+  "peerDependencies": {
+    "react": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"

package/src/css/components/button.css

@@ -10,7 +10,8 @@
 
   /* Base styles */
   .dx-button {
-    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-input-surface min-h-[2.5rem] px-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2.5rem] px-3;
+    @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
     &[aria-pressed='true'],
     &[aria-checked='true'] {
       @apply text-accent-text bg-attention-surface;

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

@@ -29,6 +29,13 @@
     }
   }
 
+  .dx-focus-ring-none {
+    &:focus,
+    &:focus-visible {
+      @apply outline-hidden! ring-0!;
+    }
+  }
+
   .dx-focus-ring-always,
   .dx-focus-ring-inset-always {
     &:not([disabled]),
@@ -180,7 +187,6 @@
 
         &:hover {
           @apply outline-hidden;
-
           .dark & {
             @apply outline-hidden;
           }
@@ -226,4 +232,12 @@
       }
     }
   }
+
+  .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/selected.css

@@ -0,0 +1,30 @@
+/**
+ * Selected / Highlighted state utilities
+ */
+
+@layer dx-components {
+  .dx-hover {
+    @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
+  }
+
+  /** TODO(burdon): Disambiguate from dx-hover */
+  .dx-highlighted {
+    @apply data-[highlighted]:bg-highlight-surface
+      data-[highlighted]:text-highlight-surface-text
+      hover:data-[highlighted]:bg-highlight-surface-hover;
+  }
+
+  /** TODO(burdon): Only show active if container has attention. */
+  .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!;
+  }
+
+  .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/integrations/codemirror.css

@@ -6,6 +6,7 @@
  * TODO(burdon): This could move into the ui-editor package (similar to graph.css).
  */
 
+/** TODO(burdon): Move to ui-editor */
 @theme {
   --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1);
   --color-cm-active-line: light-dark(
@@ -25,8 +26,9 @@
   --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200));
 
   /* Markdown syntax highlighting */
-  --color-cm-code: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400));
+  --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500));
   --color-cm-code-mark: var(--color-blue-500);
-  --color-cm-mark-opacity: 0.5;
-  --color-cm-heading: light-dark(var(--color-neutral-900), var(--color-neutral-400));
+  --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400));
 }

package/src/css/integrations/tldraw.css

@@ -2,6 +2,7 @@
  * Tldraw
  */
 
+/** TODO(burdon): Move to tldraw */
 .tl-background {
   --color-background: var(--color-base-surface);
 }

package/src/css/layout/main.css

@@ -18,13 +18,6 @@
     z-index: 0;
   }
 
-  /**
-   * Main Mobile app.
-   */
-  .dx-main-mobile-layout {
-    @apply absolute inset-0 overflow-hidden flex flex-col;
-  }
-
   /** TODO(burdon): Reconcile with dx-main-bounce-layout */
   .dx-main-content-padding-transitions {
     transition-duration: 200ms;

package/src/css/layout/size.css

@@ -6,50 +6,27 @@
   /** 
    * 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])
    */
   .dx-size-container {
     container-type: size;
   }
 
   /**
-   * Layout rules for flex-based scroll containment:
-   * `flex flex-col`
-   *   On a container: makes it a flex column so children stack and can use `flex-1`.
-   * `flex-1`
-   *   On a child: grows to fill the flex parent. Requires the parent to be `flex`.
-   * `min-h-0` (alongside `flex-1`):
-   *   Overrides default flex children: `min-height:auto` (sized to content), which prevents shrinking.
-   *   Allows element to shrink and trigger overflow/scrolling.
-   *   Always pair with `flex-1` when scroll is needed.
-   * `h-full`:
-   *   Fills 100% of the parent's *computed* height.
-   *   Use when the parent has a definite height but is not a flex container (e.g. `overflow:hidden` wrapper).
-   *   Unlike `flex-1`, does not require the parent to be flex.
-   *
-   * Pattern for a scrollable region inside a flex ancestor:
-   *   ancestor         → `flex flex-col`             (or `flex flex-row`)
-   *   scroll root      → `flex-1 min-h-0`            (fills ancestor, can shrink)
-   *   scroll viewport  → `h-full overflow-y-scroll`  (fills root, scrolls)
+   * Document width.
    */
-
-  /**
-   * Container that fills the available space.
-   */
-  .dx-container {
-    @apply flex-1 min-h-0 min-w-0 h-full w-full;
-  }
-
-  /**
-   * Article width.
-   */
-  .dx-article {
-    @apply mx-auto w-full max-w-article-max-width;
+  .dx-document {
+    @apply mx-auto w-full max-w-document-max-width;
   }
 
   /**
    * Card
    */
 
+  .dx-card {
+    @apply flex flex-col w-full;
+  }
+
   .dx-card-square {
     inline-size: min(
       min(var(--radix-popper-available-width), var(--spacing-card-max-width)),

package/src/css/theme/palette.css

@@ -10,8 +10,10 @@
 
 @theme {
   --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%);
+  --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%);
   --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%);
   --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%);
+  --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%);
   --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%);
 
   --color-primary-50: var(--color-blue-50);
@@ -25,4 +27,10 @@
   --color-primary-800: var(--color-blue-800);
   --color-primary-900: var(--color-blue-900);
   --color-primary-950: var(--color-blue-950);
+
+  /* Composer logo colors */
+  --color-composer-100: rgb(5 40 61);
+  --color-composer-200: rgb(10 75 105);
+  --color-composer-300: rgb(1 122 183);
+  --color-composer-400: rgb(6 197 253);
 }

package/src/css/theme/semantic.css

@@ -17,25 +17,28 @@
   --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-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-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-scrim-surface: light-dark(
     oklch(from var(--color-neutral-50) l c h / 0.5),
     oklch(from var(--color-neutral-950) l c h / 0.25)
   );
+
   --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+  --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+
   --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
-  --color-card-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --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));
 
+  --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));
+
   /** TODO(burdon): current vs active vs selected */
   --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));
+
   /** TODO(burdon): Merge overlay/surface? */
   --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750));
   --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750));
@@ -47,12 +50,23 @@
   --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));
 
-  /* Accent */
+  /* 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-600), var(--color-blue-600));
+  --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-text: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --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));
 
@@ -62,8 +76,9 @@
   /* Separator */
 
   --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-primary-separator: light-dark(var(--color-neutral-400), var(--color-neutral-800));
-  --color-subdued-separator: light-dark(var(--color-neutral-300), var(--color-neutral-900));
+  --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 */
 

package/src/css/theme/spacing.css

@@ -2,31 +2,36 @@
  * Tokens
  */
 
+/**
+ * Utility classes 
+ */
 @theme {
   /** Minimum inset from the viewport edge for floating surfaces. */
-  --spacing-screen-border: 1rem;
-
-  --spacing-article-max-width: 50rem;
-  --spacing-prose-max-width: 50rem;
+  --spacing-screen-border: 2rem;
 
   --spacing-popover-min-width: 12rem;
 
+  --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;
   --spacing-card-min-height: 18rem;
   --spacing-card-max-height: 30rem;
 
-  --spacing-trim-xs: 0.375rem;
+  --spacing-tag-padding-block: 0.125rem;
+
+  --spacing-trim-xs: 0.25rem;
   --spacing-trim-sm: 0.5rem;
   --spacing-trim-md: 0.75rem;
   --spacing-trim-lg: 1.5rem;
 
-  --spacing-tag-padding-block: 0.125rem;
-  --spacing-text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
-
   /** Minimal trim to allow for ring/outline. */
   --spacing-form-chrome: var(--spacing-trim-xs);
+  --spacing-form-gap: var(--spacing-trim-sm);
 
   /**
    * Density: fine
@@ -38,15 +43,20 @@
 
 @layer dx-tokens {
   /**
-   * Density: coarse
+   * TODO(burdon): Density: coarse
    */
+  /*
   .dx-density-coarse {
     --spacing-form-padding: var(--spacing-trim-md);
     --spacing-icon-button-padding: var(--spacing-trim-sm);
     --spacing-scroll-padding: 8px;
   }
+  */
 }
 
+/**
+ * CSS variables.
+ */
 @layer dx-tokens {
   :root {
     --dx-line-0: 0px;
@@ -58,10 +68,10 @@
     --dx-lacuna-4: 0.5rem;
     --dx-lacuna-6: 0.75rem;
 
-    --dx-gutter-xs: 0.125rem;
-    --dx-gutter-sm: 0.5rem;
-    --dx-gutter-md: 1rem;
-    --dx-gutter-lg: 2rem;
+    --dx-gutter-xs: 0.25rem; /* Input rings */
+    --dx-gutter-sm: 1rem;
+    --dx-gutter-md: 2rem; /* 32px (fine card) */
+    --dx-gutter-lg: 2.5rem; /* 40px (dialog, coarse card) */
   }
 
   :root {
@@ -83,6 +93,8 @@
 
     --dx-input-fine: var(--dx-lacuna-3);
     --dx-input-coarse: var(--dx-lacuna-4);
+
+    --dx-default-icons-size: 1.25rem; /* size=5 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -91,15 +103,20 @@
 
   :root {
     --dx-rail-content: 3rem;
+    /** TODO(burdon): Audit. */
+    /** TODO(burdon): Density (2 sizes). */
     --dx-rail-size: calc(var(--dx-rail-content) + 1px);
     --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
-    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem + 1px);
+    /* TODO(burdon): Added 1px for border. */
+    /* TODO(burdon): Remove direct usage. */
+    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
 
-    --dx-topbar-size: var(--dx-rail-size);
-    --dx-toolbar-size: var(--dx-rail-content);
-    --dx-statusbar-size: var(--dx-rail-content);
+    --dx-topbar-size: var(--dx-rail-size); /* 50px */
+    --dx-toolbar-size: var(--dx-rail-action); /* 40px */
+    --dx-statusbar-size: var(--dx-rail-item); /* 32px */
 
-    --dx-nav-sidebar-size: 23rem;
+    /** NOTE: On MBP, should have nav sidebare open with 4 column mosaic board. */
+    --dx-nav-sidebar-size: 21.5rem;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
 

package/src/css/utilities.css

@@ -1,7 +1,76 @@
 /**
- * Misc
+ * Tailwind utility classes.
  */
 
-@utility dx-icon-inline {
-  @apply inline-block align-[-0.125em];
+/**
+ * Layout rules for flex-based scroll containment:
+ * `flex flex-col`
+ *   On a container: makes it a flex column so children stack and can use `flex-1`.
+ * `flex-1`
+ *   On a child: grows to fill the flex parent. Requires the parent to be `flex`.
+ * `min-h-0` (alongside `flex-1`):
+ *   Overrides default flex children: `min-height:auto` (sized to content), which prevents shrinking.
+ *   Allows element to shrink and trigger overflow/scrolling.
+ *   Always pair with `flex-1` when scroll is needed.
+ * `h-full`:
+ *   Fills 100% of the parent's *computed* height.
+ *   Use when the parent has a definite height but is not a flex container (e.g. `overflow:hidden` wrapper).
+ *   Unlike `flex-1`, does not require the parent to be flex.
+ *
+ * Pattern for a scrollable region inside a flex ancestor:
+ *   ancestor         → `flex flex-col`             (or `flex flex-row`)
+ *   scroll root      → `flex-1 min-h-0`            (fills ancestor, can shrink)
+ *   scroll viewport  → `h-full overflow-y-scroll`  (fills root, scrolls)
+ */
+
+/**
+ * Fills the available space.
+ */
+@utility dx-expander {
+  @apply flex-1 min-h-0 min-w-0 h-full w-full;
+}
+
+/**
+ * Column that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
+}
+
+/**
+ * Container that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
+}
+
+/**
+ * Fullscreen
+ */
+@utility dx-fullscreen {
+  @apply absolute inset-0;
+}
+
+/**
+ * Visual warning to indicate incorrect usage of `slottable`.
+ */
+@utility dx-slot-warning {
+  @apply border border-rose-500 border-dashed;
+}
+
+/**
+ * Pseudo-element overlay for ring indicators (focus, current, etc.).
+ *
+ * A standard CSS `box-shadow` ring is painted behind child content, so children with
+ * opaque backgrounds (e.g., cards, avatars) obscure it. By painting the ring on an
+ * absolutely-positioned `::after` pseudo-element that sits above the element's children
+ * in stacking order, the ring is always visible regardless of child backgrounds.
+ *
+ * The pseudo-element inherits `border-radius` from its parent and is `pointer-events-none`
+ * so it doesn't interfere with interactions. The ring starts transparent; consumers
+ * activate it conditionally (e.g., `focus:after:ring-*`, `aria-[current=true]:after:ring-*`).
+ */
+@utility dx-ring-pseudo {
+  @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit]
+    after:pointer-events-none after:ring after:ring-inset after:ring-transparent;
 }

package/src/fragments/AUDIT.md

@@ -0,0 +1,58 @@
+# Fragment Definitions Audit
+
+External packages importing fragment definitions from `ui-theme/src/fragments`.
+
+## Current Fragment Exports
+
+| File          | Definition                            | External | Internal |
+| ------------- | ------------------------------------- | -------- | -------- |
+| `density.ts`  | `densityBlockSize`                    | -        | 1        |
+| `density.ts`  | `coarseBlockSize`                     | -        | 1        |
+| `density.ts`  | `coarseDimensions`                    | -        | 1        |
+| `density.ts`  | `fineBlockSize`                       | -        | 1        |
+| `density.ts`  | `fineDimensions`                      | -        | 1        |
+| `disabled.ts` | `staticDisabled`                      | -        | 1        |
+| `disabled.ts` | `dataDisabled`                        | -        | 1        |
+| `focus.ts`    | `focusRing`                           | 2        | 5        |
+| `focus.ts`    | `subduedFocus`                        | -        | 2        |
+| `focus.ts`    | `staticFocusRing`                     | -        | 1        |
+| `hover.ts`    | `subtleHover`                         | 4        | -        |
+| `hover.ts`    | `ghostHover`                          | 8        | 2        |
+| `hover.ts`    | `ghostFocusWithin`                    | 1        | -        |
+| `hover.ts`    | `hoverableControls`                   | 9        | -        |
+| `hover.ts`    | `groupHoverControlItemWithTransition` | 2        | -        |
+| `hover.ts`    | `hoverableFocusedKeyboardControls`    | 1        | -        |
+| `hover.ts`    | `hoverableFocusedWithinControls`      | 9        | -        |
+| `hover.ts`    | `hoverableOpenControlItem`            | 3        | -        |
+| `hover.ts`    | `hoverableControlItem`                | 7        | -        |
+| `text.ts`     | `descriptionTextPrimary`              | 1        | -        |
+| `text.ts`     | `descriptionMessage`                  | 5        | -        |
+
+## Summary
+
+**Total fragments:** 21
+**Total imports (external + internal):** 96
+
+- **External:** 63
+- **Internal:** 33
+
+**Most imported overall:**
+
+- `hoverableControls` (9 external)
+- `hoverableFocusedWithinControls` (9 external)
+- `ghostHover` (8 external + 2 internal = 10 total)
+- `hoverableControlItem` (7 external)
+- `focusRing` (2 external + 5 internal = 7 total)
+
+**Internal imports by file:**
+
+- `input.ts`: 8 definitions (coarseBlockSize, coarseDimensions, fineBlockSize, fineDimensions, focusRing, staticDisabled, staticFocusRing, subduedFocus)
+- `list.ts`: 3 definitions (densityBlockSize, focusRing, ghostHover)
+- `menu.ts`: 2 definitions (dataDisabled, subduedFocus)
+- `button.ts`, `link.ts`, `popover.ts`, `toast.ts`: 1 definition each (ghostHover, focusRing, focusRing, focusRing)
+
+**Completely unused:** 7 fragments
+
+- `subtleHover` from `hover.ts`
+- `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)
+- `descriptionTextPrimary` from `text.ts` (only 1 use)

package/src/fragments/index.ts

@@ -2,14 +2,9 @@
 // Copyright 2022 DXOS.org
 //
 
-// TODO(burdon): Replace fragments with utility and component classes.
+// TODO(burdon): Remove export of fragments.
 
 export * from './density';
 export * from './disabled';
-export * from './elevation';
-export * from './focus';
 export * from './hover';
-export * from './selected';
-export * from './size';
 export * from './text';
-export * from './valence';

package/src/fragments/text.ts

@@ -2,10 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-/**
- * Content areas that contain the text editor.
- */
-export const textBlockWidth = 'w-full max-w-text-content mx-auto';
-
 export const descriptionTextPrimary = 'text-sm font-normal text-base-surface-text';
 export const descriptionMessage = 'text-description border border-dashed border-separator rounded-sm p-4';

package/src/index.ts

@@ -4,5 +4,5 @@
 
 export * from './defs';
 export * from './fragments';
-export * from './theme/index';
+export * from './theme';
 export * from './util';

package/src/{theme.css → main.css}

@@ -30,10 +30,12 @@
 @import './css/components/button.css';
 @import './css/components/checkbox.css';
 @import './css/components/dialog.css';
-@import './css/components/focus-ring.css';
+@import './css/components/focus.css';
+@import './css/components/icon.css';
 @import './css/components/panel.css';
 @import './css/components/link.css';
 @import './css/components/scrollbar.css';
+@import './css/components/selected.css';
 @import './css/components/surface.css';
 @import './css/components/tag.css';
 @import './css/components/text.css';
@@ -75,9 +77,11 @@
  */
 @variant dark (&:where(.dark, .dark *));
 
-/**
- * Custom variants.
- */
-@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
-@custom-variant hover-hover (@media (hover: hover));
+/** Mobile */
+@custom-variant pointer-coarse (@media (pointer: coarse));
+/** Web */
 @custom-variant pointer-fine (@media (pointer: fine));
+/** Supports mouse/trackpad (Web) */
+@custom-variant hover-hover (@media (hover: hover));
+/** Active navigation */
+@custom-variant is-current (&[aria-current]:not([aria-current="false"]));