@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-staging.ac66bdf99f

package/src/css/theme/text.css

@@ -0,0 +1,37 @@
+/**
+ * Text
+ */
+
+@theme {
+  /* Font families */
+  --font-body: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
+
+  /* Font size scale (Tailwind v4 defaults — clean rem/px values) */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+}

package/src/css/utilities.css

@@ -0,0 +1,76 @@
+/**
+ * Tailwind utility classes.
+ */
+
+/**
+ * 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;
+}

package/src/defs.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ChromaticPalette } from '@dxos/ui-types';
+
+/**
+ * Translation namespace for OS-level translations.
+ */
+export const osTranslations = 'org.dxos.i18n.os';
+
+/**
+ * Available color hues for UI components.
+ */
+export const hues: ChromaticPalette[] = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const;
+
+export const hueShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
+
+export const roles = ['fill', 'surface', 'surface-text', 'text', 'border'] as const;
+
+/**
+ * Card size constants (Tailwind spacing units).
+ * Cards should be no larger than 320px per WCAG 2.1 SC 1.4.10.
+ */
+// TODO(burdon): Replace usage of these with semantic tokens.
+export const cardMinInlineSize = 18;
+export const cardDefaultInlineSize = 20; // 320px
+export const cardMaxInlineSize = 22;
+export const cardMinBlockSize = 18;
+export const cardMaxBlockSize = 30;

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

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Density } from '@dxos/ui-types';
+
+const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const coarseBlockSize = 'min-h-[2.5rem]';
+
+const fineDimensions = `${fineBlockSize} px-2`;
+const coarseDimensions = `${coarseBlockSize} px-3`;
+
+export const densityDimensions = (density: Density = 'fine') =>
+  density === 'fine' ? fineDimensions : coarseDimensions;
+
+export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

package/src/fragments/hover.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const subtleHover = 'hover:bg-hover-overlay';
+
+export const ghostHover = 'hover:bg-hover-surface';
+export const ghostFocusWithin = 'focus-within:bg-hover-surface';
+
+export const hoverableControls =
+  '[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]';
+
+export const groupHoverControlItemWithTransition = 'transition-opacity duration-200 opacity-0 group-hover:opacity-100';
+
+export const hoverableFocusedKeyboardControls = 'focus-visible:[--controls-opacity:1]';
+export const hoverableFocusedWithinControls = 'focus-within:[--controls-opacity:1]';
+export const hoverableOpenControlItem = 'hover-hover:aria-[expanded=true]:[--controls-opacity:1]';
+export const hoverableControlItem = 'opacity-(--controls-opacity)';

package/src/fragments/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(burdon): Remove export of fragments.
+
+export * from './density';
+export * from './disabled';
+export * from './hover';
+export * from './text';

package/src/fragments/text.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(burdon): Replace with Message component.
+export const descriptionMessage = 'text-description border border-dashed border-separator rounded-sm p-4';

package/src/index.ts

@@ -2,18 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type TailwindConfig, tailwindConfig } from './config';
-
-export { cardDefaultInlineSize, cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
-export * from './styles';
-export * from './types';
+export * from './defs';
+export * from './fragments';
+export * from './theme';
 export * from './util';
-
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
-
-export { tokens };
-
-/**
- * Translation namespace for OS-level translations.
- */
-export const osTranslations = 'dxos.org/i18n/os';

package/src/main.css

@@ -0,0 +1,87 @@
+/**
+ * Main theme.
+ */
+
+/**
+ * Establish CSS cascade layer order before Tailwind sets its own.
+ * First mention of a layer name wins its position in the order.
+ *
+ * NOTE: `utilities` must be last so it overrides all base and component layers.
+ * NOTE: This must be in sync with the `transformIndexHtml` function in `packages/ui/ui-theme/src/plugins/plugin.ts`.
+ */
+@layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
+
+@import 'tailwindcss';
+
+/* @theme extensions */
+@import './css/theme/animation.css';
+@import './css/theme/border.css';
+@import './css/theme/palette.css';
+@import './css/theme/semantic.css';
+@import './css/theme/spacing.css';
+@import './css/theme/styles.css';
+@import './css/theme/text.css';
+
+/* @layer dx-base, dx-tokens */
+@import './css/base/base.css';
+@import './css/base/typography.css';
+
+/* @layer dx-components (components) */
+@import './css/components/button.css';
+@import './css/components/checkbox.css';
+@import './css/components/dialog.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';
+
+/* @layer dx-components (layout) */
+@import './css/layout/main.css';
+@import './css/layout/native.css';
+@import './css/layout/positioning.css';
+@import './css/layout/size.css';
+
+/* @layer dx-utilities */
+@import './css/utilities.css';
+
+/* Third-party integrations */
+@import './css/integrations/codemirror.css';
+@import './css/integrations/tldraw.css';
+
+/**
+ * Force-emit CSS variables for the full color palette for all: 
+ * --color-{hue}-{shade}
+ * --color-{hue}-{style}
+ */
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
+@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
+@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
+@source inline("border-{info,success,warning,error}-border");
+
+/**
+ * Plugins must come after all imports.
+ */
+@plugin '@tailwindcss/forms';
+@plugin 'tailwind-scrollbar';
+@plugin 'tailwindcss-radix';
+
+/**
+ * Class-based dark mode.
+ * The `.dark` class on an ancestor toggles `dark:` utilities.
+ */
+@variant dark (&:where(.dark, .dark *));
+
+/** 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

@@ -0,0 +1,125 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/* eslint-disable no-console */
+
+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';
+
+/**
+ * CSS cascade layer order.
+ * Must be established before any stylesheets load so that Tailwind's own @layer declarations don't override our ordering. Exported so consuming
+ */
+export const LAYER_ORDER = [
+  'properties',
+  'theme',
+  'dx-tokens',
+  'user-tokens',
+  'base',
+  'tw-base',
+  'dx-base',
+  'components',
+  'tw-components',
+  'dx-components',
+  'utilities',
+] as const;
+
+const ROOT = '../../../../';
+
+export type ThemePluginOptions = {
+  srcCssPath?: string;
+  virtualFileId?: string;
+  verbose?: boolean;
+};
+
+/**
+ * Vite plugin to configure theme.
+ */
+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/main.css');
+  const distThemePath = resolve(import.meta.dirname, '../main.css');
+  const isMonorepo = existsSync(srcThemePath);
+
+  // 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,
+    virtualFileId: '@dxos-theme',
+    ...options,
+  };
+
+  // Derive project root from the source location so Tailwind scans all packages.
+  const base = isMonorepo ? resolve(dirname(srcThemePath), ROOT) : undefined;
+
+  if (process.env.DEBUG || options.verbose) {
+    console.log('ThemePlugin:\n', JSON.stringify(config, null, 2));
+  }
+
+  return {
+    name: 'vite-plugin-dxos-ui-theme',
+    config: (): UserConfig => {
+      return {
+        css: {
+          postcss: {
+            plugins: [
+              // Handles @import statements in CSS.
+              postcssImport(),
+              // Processes CSS nesting syntax.
+              postcssNesting(),
+              // Processes Tailwind directives and generates utilities from scanned content.
+              // base points to project root so all packages are scanned (not just ui-theme).
+              tailwindcss(base !== undefined ? { base } : {}),
+              // Adds vendor prefixes.
+              autoprefixer,
+            ],
+          },
+        },
+      };
+    },
+    resolveId: (id) => {
+      if (id === config.virtualFileId) {
+        return config.srcCssPath;
+      }
+    },
+    transformIndexHtml: () => {
+      // Apply .dark class to <html> synchronously before any scripts run, so that
+      // the critical CSS html.dark rules apply on the very first paint.
+      const darkModeTag: HtmlTagDescriptor = {
+        tag: 'script',
+        attrs: { 'data-dxos-theme': '' },
+        injectTo: 'head-prepend',
+        children: readFileSync(darkModeScriptPath, 'utf-8'),
+      };
+
+      // Establish cascade layer order before any stylesheet loads.
+      const layersTag: HtmlTagDescriptor = {
+        tag: 'style',
+        attrs: { 'data-dxos-layers': '' },
+        children: `@layer ${LAYER_ORDER.join(', ')};`,
+        injectTo: 'head-prepend',
+      };
+
+      // 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: readFileSync(mainCssPath, 'utf-8'),
+      };
+
+      return [darkModeTag, layersTag, criticalTag];
+    },
+  };
+};

package/src/plugins/dark-mode.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// @ts-nocheck - This file is injected as a raw JS string into <head> by ThemePlugin (readFileSync).
+// It runs in the browser, not Node.js — browser globals (window, document) are intentional.
+// Must remain valid JavaScript (no TypeScript-specific syntax).
+
+// Applies the .dark class to <html> synchronously before any other scripts run so that the
+// critical CSS html.dark rules take effect on the very first paint. Continues to track changes.
+// NOTE: Theme switching may be overridden in Chrome via:
+//   chrome://settings/appearance and chrome://flags/#enable-force-dark
+(() => {
+  const query = window.matchMedia('(prefers-color-scheme: dark)');
+  const applyTheme = (dark) => {
+    document.documentElement.classList[dark ? 'add' : 'remove']('dark');
+  };
+  applyTheme(query.matches);
+  query.addEventListener('change', (event) => {
+    applyTheme(event.matches);
+  });
+})();

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/{styles → theme}/components/avatar.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import { descriptionText, getSize, getSizeHeight } from '../fragments';
+import { mx, getSize, getHeight } from '../../util';
 
 export type AvatarStyleProps = Partial<{
   size: Size;
@@ -20,34 +19,34 @@ export const avatarRoot: ComponentFunction<AvatarStyleProps> = ({ size = 10, inG
   mx(
     'relative inline-flex shrink-0',
     getSize(size),
-    inGroup && (size === 'px' || size <= 3 ? '-mie-1' : '-mie-2'),
+    inGroup && (size === 'px' || size <= 3 ? '-mr-1' : '-mr-2'),
     ...etc,
   );
 
 export const avatarLabel: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
 
 export const avatarDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
-  mx(descriptionText, srOnly && 'sr-only', ...etc);
+  mx('text-description', srOnly && 'sr-only', ...etc);
 
 export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
-  mx('is-full bs-full bg-[--surface-bg]', variant === 'circle' ? 'rounded-full' : 'rounded', ...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(
-    'absolute block-end-0 inline-end-0',
+    'absolute bottom-0 end-0',
     getSize(size),
     status === 'inactive'
-      ? 'text-amber-350 dark:text-amber-250'
+      ? 'text-amber-400 dark:text-amber-300'
       : status === 'active'
-        ? 'text-emerald-350 dark:text-emerald-250'
-        : 'text-neutral-350 dark:text-neutral-250',
+        ? 'text-emerald-400 dark:text-emerald-300'
+        : 'text-neutral-400 dark:text-neutral-300',
     ...etc,
   );
 
 export const avatarRing: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
   mx(
     'absolute inset-0 border-2',
-    variant === 'circle' ? 'rounded-full' : 'rounded',
+    variant === 'circle' ? 'rounded-full' : 'rounded-sm',
     status === 'current'
       ? 'border-primary-400 dark:border-primary-500'
       : status === 'active'
@@ -74,13 +73,13 @@ export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, sr
   mx(
     srOnly
       ? 'sr-only'
-      : 'rounded-full truncate text-sm leading-none plb-1 pli-2 relative z-[1] flex items-center justify-center',
-    size && getSizeHeight(size),
+      : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
+    size && getHeight(size),
     ...etc,
   );
 
 export const avatarGroupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
-  mx(srOnly ? 'sr-only' : descriptionText, ...etc);
+  mx(srOnly ? 'sr-only' : 'text-description', ...etc);
 
 export const avatarTheme: Theme<AvatarStyleProps> = {
   root: avatarRoot,