@dxos/ui-theme 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/src/css/theme/spacing.css

@@ -2,14 +2,18 @@
  * Tokens
  */
 
+/**
+ * Utility classes 
+ */
 @theme {
   /** Minimum inset from the viewport edge for floating surfaces. */
-  --spacing-screen-border: 1rem;
+  --spacing-screen-border: 2rem;
 
-  --spacing-article-max-width: 50rem;
-  --spacing-prose-max-width: 50rem;
+  --spacing-popover-default-width: 20rem;
+  --spacing-popover-min-width: 16rem;
 
-  --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-card-default-width: 20rem;
   --spacing-card-min-width: 18rem;
@@ -17,16 +21,17 @@
   --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);
+  --spacing-form-section-gap: var(--spacing-trim-lg);
 
   /**
    * 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: 1rem; /* size=4 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -91,19 +103,24 @@
 
   :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: 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);

package/src/css/utilities.css

@@ -1,7 +1,118 @@
 /**
- * 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;
+}
+
+/**
+ * Container that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
+}
+
+/**
+ * Column that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Shimmer text — animates opacity left → right across the contained text.
+ * See @keyframes shimmer-text in theme/animation.css for the keyframe definition.
+ * Geometry: mask-size 200% 100% with mask-repeat: repeat-x means each tile is
+ * 2× the element width; the keyframe slides mask-position-x by 200% (one full
+ * tile period), giving a seamless loop. The 5-stop gradient (0.4 → 1.0 → 0.4)
+ * produces a single bright pulse per cycle that traverses left → right during
+ * the first half, with a brief calm interval during the second half.
+ */
+@utility shimmer-text {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  mask-size: 200% 100%;
+  -webkit-mask-size: 200% 100%;
+  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+  animation: shimmer-text 2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    animation: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+    opacity: 0.6;
+  }
 }

package/src/defs.ts

@@ -7,7 +7,7 @@ import { type ChromaticPalette } from '@dxos/ui-types';
 /**
  * Translation namespace for OS-level translations.
  */
-export const osTranslations = 'dxos.org/i18n/os';
+export const osTranslations = 'org.dxos.i18n.os';
 
 /**
  * Available color hues for UI components.

package/src/fragments/AUDIT.md

@@ -0,0 +1,57 @@
+# 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)

package/src/fragments/density.ts

@@ -4,10 +4,13 @@
 
 import { type Density } from '@dxos/ui-types';
 
-export const coarseBlockSize = 'min-h-[2.5rem]';
-export const coarseDimensions = `${coarseBlockSize} px-3`;
+const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const coarseBlockSize = 'min-h-[2.5rem]';
 
-export const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
-export const fineDimensions = `${fineBlockSize} px-2`;
+const fineDimensions = `${fineBlockSize} px-2`;
+const coarseDimensions = `${coarseBlockSize} px-3`;
 
-export const densityBlockSize = (density: Density = 'coarse') => (density === 'fine' ? fineBlockSize : coarseBlockSize);
+export const densityDimensions = (density: Density = 'fine') =>
+  density === 'fine' ? fineDimensions : coarseDimensions;
+
+export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

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';
+// TODO(burdon): Replace with Message component.
 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}

@@ -11,7 +11,17 @@
  */
 @layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
 
-@import 'tailwindcss';
+/**
+ * `source(none)` disables Tailwind 4's automatic content discovery (which
+ * scans the project root, including `publicDir`). With auto-detection on,
+ * every write to `public/icons.svg` from `vite-plugin-icons` triggers a
+ * Tailwind CSS regeneration, which invalidates `main.css` through its
+ * import graph and produces a 3–5-ping HMR storm per icon-sprite write
+ * during cold-start (icons land in tight bursts as plugin chunks stream
+ * in). Explicit `@source` directives below replace the auto-scan with a
+ * stable, source-only set.
+ */
+@import 'tailwindcss' source(none);
 
 /* @theme extensions */
 @import './css/theme/animation.css';
@@ -30,10 +40,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';
@@ -52,7 +64,24 @@
 @import './css/integrations/tldraw.css';
 
 /**
- * Force-emit CSS variables for the full color palette for all: 
+ * With `source(none)` on the Tailwind import above, these are the *only*
+ * paths Tailwind scans for utility classes. Cover every workspace source
+ * directory so lazy-loaded plugin / UI / SDK chunks don't surface new
+ * utilities mid-session, and root-level HTML entrypoints (index.html,
+ * internal.html, …) are visible too.
+ *
+ * Paths are relative to this file (`packages/ui/ui-theme/src/main.css`):
+ *   ../../../          → `packages/`
+ *   ../../../../tools/ → `tools/`
+ *
+ * Tailwind ignores `node_modules` and common build/output dirs by default,
+ * so a broad workspace glob is safe.
+ */
+@source "../../../**/*.{ts,tsx,html}";
+@source "../../../../tools/**/*.{ts,tsx,html}";
+
+/**
+ * Force-emit CSS variables for the full color palette for all:
  * --color-{hue}-{shade}
  * --color-{hue}-{style}
  */
@@ -62,6 +91,13 @@
 @source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
 @source inline("border-{info,success,warning,error}-border");
 
+/**
+ * Force-emit tokens consumed by web components / .pcss files outside the
+ * Tailwind source-scan graph (e.g. lit-grid's dx-grid.pcss uses
+ * var(--color-grid-line)).
+ */
+@source inline("bg-grid-{surface,highlight,comment,comment-active,hover-overlay,selection-overlay,line,focus-indicator}");
+
 /**
  * Plugins must come after all imports.
  */
@@ -75,9 +111,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"]));

package/src/plugins/ThemePlugin.ts

@@ -4,11 +4,10 @@
 
 /* eslint-disable no-console */
 
-import { existsSync, readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-
 import tailwindcss from '@tailwindcss/postcss';
 import autoprefixer from 'autoprefixer';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
 import postcssImport from 'postcss-import';
 import postcssNesting from 'postcss-nesting';
 import { type HtmlTagDescriptor, type Plugin, type UserConfig } from 'vite';
@@ -44,16 +43,15 @@ export type ThemePluginOptions = {
  */
 export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
   // Prefer source CSS if available (monorepo dev), fall back to dist for installed package.
-  const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/theme.css');
-  const distThemePath = resolve(import.meta.dirname, '../theme.css');
+  const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/main.css');
+  const distThemePath = resolve(import.meta.dirname, '../main.css');
   const isMonorepo = existsSync(srcThemePath);
 
-  // dark-mode.ts is always read from src (ships via "files": ["src"] in package.json).
-  // In monorepo: import.meta.dirname = src/plugins/, so the file is right here.
-  // In installed package: import.meta.dirname = dist/plugin/{format}/plugins/, so go up 4 levels.
-  const srcDarkModePath = resolve(import.meta.dirname, ROOT, 'src/plugins/dark-mode.ts');
-  const distDarkModePath = resolve(import.meta.dirname, ROOT, 'src/plugins/dark-mode.ts');
-  const darkModeScriptPath = existsSync(srcDarkModePath) ? srcDarkModePath : distDarkModePath;
+  // Static assets shipped via "files": ["src"] in package.json.
+  // Both monorepo and installed package resolve to the same src/plugins/ directory.
+  const pluginsDir = resolve(import.meta.dirname, ROOT, 'src/plugins');
+  const darkModeScriptPath = resolve(pluginsDir, 'dark-mode.ts');
+  const mainCssPath = resolve(pluginsDir, 'main.css');
 
   const config: ThemePluginOptions = {
     srcCssPath: isMonorepo ? srcThemePath : distThemePath,
@@ -112,23 +110,13 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
         injectTo: 'head-prepend',
       };
 
-      // Critical pre-CSS fallbacks so text is readable before (and during) Vite HMR.
-      // In dev mode Vite injects CSS via JS; when an HMR update fires the old style tag is
-      // removed before the new one is inserted, briefly leaving all --color-* vars undefined.
-      // These static approximations of neutral-50/950 survive that gap.
-      // Values are intentionally kept in sync with @theme tokens in semantic.css.
+      // Critical styles: font sizing, overscroll, color fallbacks.
+      // Loaded from critical.css to keep styles maintainable and out of index.html.
       const criticalTag: HtmlTagDescriptor = {
         tag: 'style',
         attrs: { 'data-dxos-critical': '' },
         injectTo: 'head-prepend',
-        children: [
-          ':root { color-scheme: light; }',
-          'html { color: oklch(0.145 0 0); background-color: oklch(0.985 0 0); }', // ≈ neutral-950 / neutral-50
-          'html.dark { color-scheme: dark; color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }',
-          '@media (prefers-color-scheme: dark) {',
-          '  html:not(.dark) { color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }',
-          '}',
-        ].join('\n'),
+        children: readFileSync(mainCssPath, 'utf-8'),
       };
 
       return [darkModeTag, layersTag, criticalTag];

package/src/plugins/main.css

@@ -0,0 +1,45 @@
+/*
+ * Critical styles injected into <head> by the Vite ThemePlugin before any stylesheets load.
+ * Ensures text is readable and layout is stable on the very first paint.
+ */
+
+/* Base font size: larger default for touch devices, smaller for precision pointers. */
+html {
+  font-size: 20px;
+}
+@media (pointer: fine) {
+  html {
+    font-size: 16px;
+  }
+}
+
+/* Prevent overscroll bounce and ensure full viewport height. */
+html,
+body {
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+}
+body {
+  height: 100vh;
+}
+
+/* Pre-CSS color fallbacks so text is readable before and during Vite HMR. */
+/* Values are intentionally kept in sync with @theme tokens in semantic.css. */
+:root {
+  color-scheme: light;
+}
+html {
+  color: oklch(0.145 0 0);
+  background-color: oklch(0.985 0 0);
+}
+html.dark {
+  color-scheme: dark;
+  color: oklch(0.985 0 0);
+  background-color: oklch(0.145 0 0);
+}
+@media (prefers-color-scheme: dark) {
+  html:not(.dark) {
+    color: oklch(0.985 0 0);
+    background-color: oklch(0.145 0 0);
+  }
+}

package/src/theme/components/avatar.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
-import { getSize, getSizeHeight } from '../../fragments';
-import { mx } from '../../util';
+import { mx, getSize, getHeight } from '../../util';
 
 export type AvatarStyleProps = Partial<{
   size: Size;
@@ -30,7 +29,7 @@ export const avatarDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly
   mx('text-description', srOnly && 'sr-only', ...etc);
 
 export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
-  mx('w-full h-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
+  mx('h-full w-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
 
 export const avatarStatusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
   mx(
@@ -75,7 +74,7 @@ export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, sr
     srOnly
       ? 'sr-only'
       : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
-    size && getSizeHeight(size),
+    size && getHeight(size),
     ...etc,
   );
 

package/src/theme/components/button.ts

@@ -32,7 +32,7 @@ export type ButtonStyleProps = Partial<{
 }>;
 
 const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
-  return mx('dx-button dx-focus-ring group max-w-full [&_span]:truncate', ...etc);
+  return mx('dx-button dx-focus-ring group [&_span]:truncate', ...etc);
 };
 
 const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {