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

package/src/css/utilities.css

@@ -0,0 +1,7 @@
+/**
+ * Misc
+ */
+
+@utility dx-icon-inline {
+  @apply inline-block align-[-0.125em];
+}

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 = 'dxos.org/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/density.ts

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

package/src/{styles/fragments → fragments}/elevation.ts

@@ -4,14 +4,12 @@
 
 import { type ComponentFragment, type Elevation, type SurfaceLevel } from '@dxos/ui-types';
 
-/**
- * @deprecated
- */
-export const contentShadow: ComponentFragment<{ elevation?: Elevation }> = (_) => ['shadow-none'];
-
-// TODO(thure): These should become tokens.
 export const surfaceShadow: ComponentFragment<{ elevation?: Elevation }> = ({ elevation }) => [
-  elevation === 'positioned' ? 'shadow' : elevation === 'dialog' || elevation === 'toast' ? 'shadow-md' : 'shadow-none',
+  elevation === 'positioned'
+    ? 'shadow-sm'
+    : elevation === 'dialog' || elevation === 'toast'
+      ? 'shadow-md'
+      : 'shadow-none',
 ];
 
 export const surfaceZIndex: ComponentFragment<{ level?: SurfaceLevel; elevation?: Elevation }> = ({
@@ -20,7 +18,7 @@ export const surfaceZIndex: ComponentFragment<{ level?: SurfaceLevel; elevation?
 }) => {
   switch (level) {
     case 'tooltip':
-      return elevation === 'dialog' ? ['z-[53]'] : elevation === 'toast' ? ['z-[43]'] : ['z-30'];
+      return elevation === 'dialog' ? ['z-[53]'] : elevation === 'toast' ? ['z-[43]'] : ['z-50'];
     case 'menu':
       return elevation === 'dialog' ? ['z-[52]'] : elevation === 'toast' ? ['z-[42]'] : ['z-20'];
     default:

package/src/fragments/focus.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const focusRing = 'dx-focus-ring';
+
+export const subduedFocus =
+  'focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0';
+
+export const staticFocusRing =
+  'ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black';

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/{styles/fragments → fragments}/index.ts

@@ -2,19 +2,14 @@
 // Copyright 2022 DXOS.org
 //
 
+// TODO(burdon): Replace fragments with utility and component classes.
+
 export * from './density';
 export * from './disabled';
-export * from './dimension';
 export * from './elevation';
 export * from './focus';
-export * from './group';
 export * from './hover';
-export * from './layout';
-export * from './motion';
-export * from './ornament';
 export * from './selected';
-export * from './shimmer';
-export * from './surface';
 export * from './size';
 export * from './text';
 export * from './valence';

package/src/fragments/selected.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const ghostHighlighted =
+  'data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500';
+
+export const ghostSelected =
+  'aria-selected:bg-base-surface aria-selected:text-accent-text hover:aria-selected:text-accent-text-hover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]';
+
+export const ghostSelectedContainerMd =
+  '@md:aria-selected:bg-base-surface @md:aria-selected:text-accent-text @md:hover:aria-selected:text-accent-text-hover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]';

package/src/fragments/size.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Size } from '@dxos/ui-types';
+
+import { mx } from '../util';
+
+const sizeWidthMap = new Map<Size, string>([
+  [0, 'w-0'],
+  ['px', 'w-px'], // 1px
+  [0.5, 'w-0.5'],
+  [1, 'w-1'],
+  [1.5, 'w-1.5'],
+  [2, 'w-2'],
+  [2.5, 'w-2.5'],
+  [3, 'w-3'],
+  [3.5, 'w-3.5'],
+  [4, 'w-4'],
+  [5, 'w-5'],
+  [6, 'w-6'],
+  [7, 'w-7'],
+  [8, 'w-8'],
+  [9, 'w-9'],
+  [10, 'w-10'],
+  [11, 'w-11'],
+  [12, 'w-12'],
+  [14, 'w-14'],
+  [16, 'w-16'],
+  [20, 'w-20'],
+  [24, 'w-24'],
+  [28, 'w-28'],
+  [32, 'w-32'],
+  [36, 'w-36'],
+  [40, 'w-40'],
+  [44, 'w-44'],
+  [48, 'w-48'],
+  [52, 'w-52'],
+  [56, 'w-56'],
+  [60, 'w-60'],
+  [64, 'w-64'],
+  [72, 'w-72'],
+  [80, 'w-80'],
+  [96, 'w-96'],
+]);
+
+const sizeHeightMap = new Map<Size, string>([
+  [0, 'h-0'],
+  ['px', 'h-px'], // 1px
+  [0.5, 'h-0.5'],
+  [1, 'h-1'],
+  [1.5, 'h-1.5'],
+  [2, 'h-2'],
+  [2.5, 'h-2.5'],
+  [3, 'h-3'],
+  [3.5, 'h-3.5'],
+  [4, 'h-4'],
+  [5, 'h-5'],
+  [6, 'h-6'],
+  [7, 'h-7'],
+  [8, 'h-8'],
+  [9, 'h-9'],
+  [10, 'h-10'],
+  [11, 'h-11'],
+  [12, 'h-12'],
+  [14, 'h-14'],
+  [16, 'h-16'],
+  [20, 'h-20'],
+  [24, 'h-24'],
+  [28, 'h-28'],
+  [32, 'h-32'],
+  [36, 'h-36'],
+  [40, 'h-40'],
+  [44, 'h-44'],
+  [48, 'h-48'],
+  [52, 'h-52'],
+  [56, 'h-56'],
+  [60, 'h-60'],
+  [64, 'h-64'],
+  [72, 'h-72'],
+  [80, 'h-80'],
+  [96, 'h-96'],
+]);
+
+const sizes = new Set(sizeWidthMap.keys());
+
+export const getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
+export const getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
+export const getSize = (size: Size) => mx(getSizeHeight(size), getSizeWidth(size));
+
+export const computeSize = (value: number, defaultSize: Size) => {
+  if (sizes.has(value as Size)) {
+    return value as Size;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value === 1) {
+    return 'px';
+  } else {
+    const wholeSeries = Math.floor(value);
+    const halfSeries = Math.floor(value * 2) / 2;
+    const doubleSeries = Math.floor(value / 2) * 2;
+    const quadrupleSeries = Math.floor(value / 4) * 4;
+    if (sizes.has(halfSeries as Size)) {
+      return halfSeries as Size;
+    } else if (sizes.has(wholeSeries as Size)) {
+      return wholeSeries as Size;
+    } else if (sizes.has(doubleSeries as Size)) {
+      return doubleSeries as Size;
+    } else if (sizes.has(quadrupleSeries as Size)) {
+      return quadrupleSeries as Size;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+
+export const sizeValue = (size: Size): number => (size === 'px' ? 1 : size);

package/src/fragments/text.ts

@@ -0,0 +1,11 @@
+//
+// 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/fragments/valence.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type MessageValence } from '@dxos/ui-types';
+
+export const textValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return 'font-medium text-success-text';
+    case 'info':
+      return 'font-medium text-info-text';
+    case 'warning':
+      return 'font-medium text-warning-text';
+    case 'error':
+      return 'font-medium text-error-text';
+  }
+};
+
+export const messageValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return 'font-medium text-success-text border-success-text bg-success-surface';
+    case 'info':
+      return 'font-medium text-info-text border-info-text bg-info-surface';
+    case 'warning':
+      return 'font-medium text-warning-text border-warning-text bg-warning-surface';
+    case 'error':
+      return 'font-medium text-error-text border-error-text bg-error-surface';
+    default:
+      return 'font-medium text-neutral-text border-neutral-text bg-neutral-surface';
+  }
+};

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/index';
 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/plugins/ThemePlugin.ts

@@ -0,0 +1,137 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/* 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 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/theme.css');
+  const distThemePath = resolve(import.meta.dirname, '../theme.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;
+
+  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 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.
+      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'),
+      };
+
+      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/{styles → theme}/components/avatar.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
+import { getSize, getSizeHeight } from '../../fragments';
 import { mx } from '../../util';
-import { descriptionText, getSize, getSizeHeight } from '../fragments';
 
 export type AvatarStyleProps = Partial<{
   size: Size;
@@ -20,34 +20,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('w-full h-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 +74,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',
+      : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
     size && getSizeHeight(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,

package/src/theme/components/button.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
+
+import { ghostHover } from '../../fragments';
+import { mx } from '../../util';
+
+export const primaryButtonColors =
+  'text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
+
+export const staticDefaultButtonColors = 'bg-input-surface text-input-surface-text';
+
+export const defaultButtonColors = mx(
+  staticDefaultButtonColors,
+  'data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
+);
+
+export const ghostButtonColors = mx(
+  ghostHover,
+  'hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
+);
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('dx-button dx-focus-ring group max-w-full [&_span]:truncate', ...etc);
+};
+
+const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
+  return mx(
+    'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root: buttonRoot,
+  group: buttonGroup,
+};