@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/src/styles/components/avatar.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Size, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { descriptionText, getSize, getSizeHeight } from '../fragments';
+
+export type AvatarStyleProps = Partial<{
+  size: Size;
+  srOnly: boolean;
+  status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
+  animation: 'pulse' | 'none';
+  variant: 'circle' | 'square';
+  inGroup: boolean;
+}>;
+
+export const avatarRoot: ComponentFunction<AvatarStyleProps> = ({ size = 10, inGroup }, ...etc) =>
+  mx(
+    'relative inline-flex shrink-0',
+    getSize(size),
+    inGroup && (size === 'px' || size <= 3 ? '-mie-1' : '-mie-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);
+
+export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
+  mx('is-full bs-full bg-[--surface-bg]', variant === 'circle' ? 'rounded-full' : 'rounded', ...etc);
+
+export const avatarStatusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
+  mx(
+    'absolute block-end-0 inline-end-0',
+    getSize(size),
+    status === 'inactive'
+      ? 'text-warning-350 dark:text-warning-250'
+      : status === 'active'
+        ? 'text-success-350 dark:text-success-250'
+        : 'text-neutral-350 dark:text-neutral-250',
+    ...etc,
+  );
+
+export const avatarRing: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
+  mx(
+    'absolute inset-0 border-2',
+    variant === 'circle' ? 'rounded-full' : 'rounded',
+    status === 'current'
+      ? 'border-primary-400 dark:border-primary-500'
+      : status === 'active'
+        ? 'border-success-400 dark:border-success-400'
+        : status === 'error'
+          ? 'border-error-400 dark:border-error-500'
+          : status === 'warning'
+            ? 'border-warning-400 dark:border-warning-500'
+            : status === 'inactive'
+              ? 'separator-separator'
+              : status === 'internal'
+                ? 'border-fuchsia-600'
+                : 'border-[color:var(--surface-bg)]',
+    animation === 'pulse' ? 'animate-halo-pulse' : '',
+    ...etc,
+  );
+
+export const avatarFallbackText: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('fill-white', ...etc);
+
+export const avatarGroup: ComponentFunction<AvatarStyleProps> = (_props, ...etc) =>
+  mx('inline-flex items-center', ...etc);
+
+export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, srOnly }, ...etc) =>
+  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),
+    ...etc,
+  );
+
+export const avatarGroupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx(srOnly ? 'sr-only' : descriptionText, ...etc);
+
+export const avatarTheme: Theme<AvatarStyleProps> = {
+  root: avatarRoot,
+  label: avatarLabel,
+  description: avatarDescription,
+  statusIcon: avatarStatusIcon,
+  frame: avatarFrame,
+  ring: avatarRing,
+  fallbackText: avatarFallbackText,
+  group: avatarGroup,
+  groupLabel: avatarGroupLabel,
+  groupDescription: avatarGroupDescription,
+};

package/src/styles/components/breadcrumb.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type breadcrumbStyleProps = {};
+
+export const breadcrumbRoot: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('shrink-0 flex items-center', ...etc);
+
+export const breadcrumbList: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+export const breadcrumbListItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+export const breadcrumbCurrent: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
+
+export const breadcrumbSeparator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('opacity-50', ...etc);
+
+export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
+  root: breadcrumbRoot,
+  list: breadcrumbList,
+  listItem: breadcrumbListItem,
+  current: breadcrumbCurrent,
+  separator: breadcrumbSeparator,
+};

package/src/styles/components/button.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { Density, Elevation, ComponentFunction, Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { contentElevation, ghostHover } from '../fragments';
+
+export const primaryButtonColors =
+  'fg-inverse surface-accent hover:surface-accentHover 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 = 'surface-input';
+
+export const defaultButtonColors =
+  staticDefaultButtonColors +
+  ' data-[state=open]:surface-input aria-pressed:fg-accent aria-pressed:surface-base aria-checked:fg-accent aria-checked:surface-base';
+
+export const ghostButtonColors =
+  ghostHover +
+  ' hover:text-inherit data-[state=open]:surface-input aria-pressed:fg-accent aria-pressed:surface-base aria-checked:fg-accent aria-checked:surface-base';
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+export const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('ch-button ch-focus-ring group', ...etc);
+};
+
+export const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (props, ...etc) => {
+  return mx(
+    'inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    contentElevation({ elevation: props.elevation }),
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root: buttonRoot,
+  group: buttonGroup,
+};

package/src/styles/components/dialog.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { descriptionText, focusRing, surfaceElevation, dialogMotion, groupBorder } from '../fragments';
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+};
+
+const dialogLayoutFragment = 'overflow-auto grid place-items-center p-2 md:p-4 lg:p-8';
+
+export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('fixed z-[22] inset-inline-0 block-start-0 bs-[100dvh] surface-scrim', dialogLayoutFragment, ...etc);
+
+export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, elevation = 'chrome' }, ...etc) =>
+  mx(
+    // TODO(thure): `flex` should not be default.
+    'flex flex-col',
+    !inOverlayLayout && 'fixed z-[22] top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    'is-[95vw] max-is-full md:max-is-[24rem] border rounded-lg p-4',
+    dialogMotion,
+    surfaceElevation({ elevation }),
+    'surface-baseGlass backdrop-blur',
+    groupBorder,
+    focusRing,
+    ...etc,
+  );
+
+export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('rounded shrink-0 text-xl font-medium', srOnly && 'sr-only', ...etc);
+
+export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('mlb-2', descriptionText, srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay: dialogOverlay,
+  content: dialogContent,
+  title: dialogTitle,
+  description: dialogDescription,
+};

package/src/styles/components/index.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './anchored-overflow';
+export * from './avatar';
+export * from './breadcrumb';
+export * from './button';
+export * from './dialog';
+export * from './menu';
+export * from './input';
+export * from './link';
+export * from './list';
+export * from './main';
+export * from './message';
+export * from './popover';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './status';
+export * from './tag';
+export * from './toast';
+export * from './toolbar';
+export * from './tooltip';
+export * from './treegrid';

package/src/styles/components/input.ts

@@ -0,0 +1,172 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  type ComponentFragment,
+  type ComponentFunction,
+  type Density,
+  type Elevation,
+  type MessageValence,
+  type Size,
+} from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import {
+  coarseDimensions,
+  staticDisabled,
+  fineDimensions,
+  placeholderText,
+  focusRing,
+  subduedFocus,
+  fineBlockSize,
+  coarseBlockSize,
+  staticFocusRing,
+  descriptionText,
+  valenceColorText,
+  getSize,
+  computeSize,
+  sizeValue,
+  getSizeHeight,
+  getSizeWidth,
+} from '../fragments';
+
+export type InputStyleProps = Partial<{
+  variant: 'default' | 'subdued' | 'static';
+  disabled: boolean;
+  focused: boolean;
+  density: Density;
+  elevation: Elevation;
+  validationValence: MessageValence;
+  size: Size;
+}>;
+
+export type InputMetaStyleProps = Partial<{
+  srOnly: boolean;
+  validationValence: MessageValence;
+}>;
+
+export const neutralInputValence = '';
+export const successInputValence = 'shadow-success-500/50 dark:shadow-success-600/50';
+export const infoInputValence = 'shadow-info-500/50 dark:shadow-info-600/50';
+export const warningInputValence = 'shadow-warning-500/50 dark:shadow-warning-600/50';
+export const errorInputValence = 'shadow-error-500/50 dark:shadow-error-600/50';
+
+const textInputSurfaceFocus =
+  'transition-colors surface-input focus:surface-attention border-transparent focus:border-transparent';
+
+const textInputSurfaceHover = 'hover:surface-hover focus:hover:surface-attention';
+
+const booleanInputSurface =
+  'shadow-inner transition-colors surface-unAccent aria-checked:surface-accent aria-[checked=mixed]:surface-accent';
+
+const booleanInputSurfaceHover =
+  'hover:surface-unAccentHover hover:aria-checked:surface-accentHover hover:aria-[checked=mixed]:surface-accentHover';
+
+export const inputValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return successInputValence;
+    case 'info':
+      return infoInputValence;
+    case 'warning':
+      return warningInputValence;
+    case 'error':
+      return errorInputValence;
+    default:
+      return null;
+  }
+};
+
+// TODO(burdon): Factor out color defs?
+const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  'is-full bg-transparent text-current',
+  props.density === 'fine' ? fineBlockSize : coarseBlockSize,
+  placeholderText,
+  subduedFocus,
+  props.disabled && staticDisabled,
+];
+
+const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  'is-full text-base rounded text-[color:var(--surface-text)]',
+  textInputSurfaceFocus,
+  placeholderText,
+  props.density === 'fine' ? fineDimensions : coarseDimensions,
+  props.disabled ? staticDisabled : textInputSurfaceHover,
+];
+
+const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  'is-full text-base rounded text-[color:var(--surface-text)]',
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && 'surface-attention',
+  placeholderText,
+  inputValence(props.validationValence),
+  props.disabled && staticDisabled,
+  props.focused && staticFocusRing,
+];
+
+export const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  props.variant === 'subdued'
+    ? mx(...sharedSubduedInputStyles(props), ...etc)
+    : props.variant === 'static'
+      ? mx(...sharedStaticInputStyles(props), ...etc)
+      : mx(
+          ...sharedDefaultInputStyles(props),
+          !props.disabled && focusRing,
+          inputValence(props.validationValence) || neutralInputValence,
+          ...etc,
+        );
+
+export const inputCheckbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx('ch-checkbox ch-focus-ring', getSize(size), ...etc);
+
+export const inputCheckboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), ...etc);
+
+export const inputSwitch: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
+  mx(
+    getSizeHeight(size),
+    getSizeWidth(computeSize(sizeValue(size) * 1.75, 9)),
+    booleanInputSurface,
+    !disabled && booleanInputSurfaceHover,
+    // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
+    'cursor-pointer shrink-0 rounded-full pli-1 mx-1 relative',
+    focusRing,
+    ...etc,
+  );
+
+export const inputSwitchThumb: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx(
+    getSize(size === 'px' ? 'px' : ((size - 2) as Size)),
+    'block bg-white rounded-full separator-separator transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]',
+    ...etc,
+  );
+
+export const inputWithSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx('font-mono selection:bg-transparent mli-auto', props.disabled && 'cursor-not-allowed', ...etc);
+
+export const inputLabel: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('block text-sm font-medium', props.srOnly && 'sr-only', ...etc);
+
+export const inputDescription: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx(descriptionText, props.srOnly && 'sr-only', ...etc);
+
+export const inputDescriptionAndValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('leading-none mlb-1', props.srOnly && 'sr-only', ...etc);
+
+export const inputValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx(descriptionText, props.srOnly ? 'sr-only' : valenceColorText(props.validationValence), ...etc);
+
+export const inputTheme = {
+  input: inputInput,
+  inputWithSegments: inputWithSegmentsInput,
+  checkbox: inputCheckbox,
+  checkboxIndicator: inputCheckboxIndicator,
+  label: inputLabel,
+  description: inputDescription,
+  validation: inputValidation,
+  switch: inputSwitch,
+  switchThumb: inputSwitchThumb,
+  descriptionAndValidation: inputDescriptionAndValidation,
+};

package/src/styles/components/link.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { focusRing } from '../fragments';
+
+export type LinkStyleProps = {
+  variant?: 'accent' | 'neutral';
+};
+
+// TODO(burdon): Export fragment.
+export const linkRoot: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc) =>
+  mx(
+    'underline decoration-1 underline-offset-2 transition-color rounded-sm',
+    variant === 'neutral'
+      ? 'text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90'
+      : 'fg-accent hover:fg-accentHover visited:fg-accent visited:hover:fg-accentHover',
+    focusRing,
+    ...etc,
+  );
+
+export const linkTheme: Theme<LinkStyleProps> = {
+  root: linkRoot,
+};

package/src/styles/components/list.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { focusRing, densityBlockSize, getSize, ghostHover } from '../fragments';
+
+export type ListStyleProps = Partial<{
+  density: Density;
+  collapsible: boolean;
+}>;
+
+export const listRoot: ComponentFunction<ListStyleProps> = (_, ...etc) => mx(...etc);
+
+export const listItem: ComponentFunction<ListStyleProps> = ({ collapsible }, ...etc) =>
+  mx(!collapsible && 'flex', ...etc);
+
+export const listItemEndcap: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx(density === 'fine' ? getSize(8) : getSize(10), 'shrink-0 flex items-start justify-center', ...etc);
+
+export const listItemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx(densityBlockSize(density), ...etc);
+
+export const listItemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) =>
+  mx(getSize(5), 'mbs-2.5', ...etc);
+
+export const listItemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx('is-5 rounded flex justify-center items-center', densityBlockSize(density), ghostHover, focusRing, ...etc);
+
+export const listItemOpenTriggerIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => {
+  return mx(getSize(5), ...etc);
+};
+
+export const listTheme: Theme<ListStyleProps> = {
+  root: listRoot,
+  item: {
+    root: listItem,
+    endcap: listItemEndcap,
+    heading: listItemHeading,
+    dragHandleIcon: listItemDragHandleIcon,
+    openTrigger: listItemOpenTrigger,
+    openTriggerIcon: listItemOpenTriggerIcon,
+  },
+};

package/src/styles/components/main.ts

@@ -0,0 +1,81 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/react-ui-types/src';
+
+import { mx } from '../../util';
+import { bounceLayout, fixedBorder, fixedSurface } from '../fragments';
+
+// Padding to apply to in-flow elements which need to clear the fixed topbar / bottombar.
+export const topbarBlockPaddingStart = 'pbs-[--topbar-size] sticky-top-from-topbar-bottom';
+export const bottombarBlockPaddingEnd = 'pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom';
+
+export type MainStyleProps = Partial<{
+  bounce: boolean;
+}>;
+
+// Sidebar widths (used by main and complementary sidebar).
+const sidebarSlots = {
+  start: {
+    width: 'sm:data-[side=is]:is-[270px]',
+    sidebar: 'sm:data-[side=is]:-inline-start-[270px]',
+    content:
+      'lg:data-[sidebar-inline-start-state=open]:pis-[270px] lg:data-[sidebar-inline-start-state=open]:scroll-ps-[270px]',
+    notch: 'max-is-[270px]',
+  },
+  // TODO(burdon): Maximal size for phone.
+  end: {
+    width: 'sm:data-[side=ie]:is-[360px]',
+    sidebar: 'sm:data-[side=ie]:-inline-end-[360px]',
+    content:
+      'lg:data-[sidebar-inline-end-state=open]:pie-[360px] lg:data-[sidebar-inline-end-state=open]:scroll-pe-[360px]',
+  },
+};
+
+export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx(
+    'fixed block-start-0 block-end-0 is-[100vw] z-10 data-[side=ie]:z-20 overscroll-contain overflow-x-hidden overflow-y-auto',
+    'transition-[inset-inline-start,inset-inline-end] duration-0 data-[resizing=false]:duration-200 ease-in-out',
+    `data-[side=is]:-inline-start-[100vw] ${sidebarSlots.start.width} ${sidebarSlots.start.sidebar}`,
+    `data-[side=ie]:-inline-end-[100vw] ${sidebarSlots.end.width} ${sidebarSlots.end.sidebar}`,
+    'data-[side=is]:data-[state=open]:inline-start-0 data-[side=ie]:data-[state=open]:inline-end-0',
+    'data-[side=is]:border-ie data-[side=ie]:border-is',
+    fixedBorder,
+    fixedSurface,
+    ...etc,
+  );
+
+export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
+  mx(
+    'transition-[padding-inline-start,padding-inline-end,scroll-padding-start,scroll-padding-end] duration-200 ease-in-out',
+    `pis-0 scroll-ps-0 ${sidebarSlots.start.content}`,
+    `pie-0 scroll-pe-0 ${sidebarSlots.end.content}`,
+    bounce && bounceLayout,
+    ...etc,
+  );
+
+export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx(
+    'fixed inset-0 z-[9] surface-scrim',
+    'transition-opacity duration-200 ease-in-out',
+    'opacity-0 data-[state=open]:opacity-100 lg:data-[state=open]:opacity-100',
+    'hidden data-[state=open]:block lg:data-[state=open]:hidden',
+    ...etc,
+  );
+
+export const mainNotch: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx(
+    'fixed z-[11] block-end-0 inline-start-0 pbe-[env(safe-area-inset-bottom)] rounded-se-lg min-bs-[var(--rail-size)] is-fit separator-separator surface-base',
+    'transition-[border-width] box-content border-bs border-ie data-[nav-sidebar-state=open]:border-bs-0 data-[nav-sidebar-state=open]:border-ie-0',
+    'pli-1 grid grid-cols-[repeat(auto-fit,var(--rail-action))]',
+    sidebarSlots.start.notch,
+    ...etc,
+  );
+
+export const mainTheme = {
+  content: mainContent,
+  sidebar: mainSidebar,
+  overlay: mainOverlay,
+  notch: mainNotch,
+};

package/src/styles/components/menu.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import {
+  arrow,
+  modalSurface,
+  dataDisabled,
+  descriptionText,
+  popperMotion,
+  subduedFocus,
+  surfaceElevation,
+} from '../fragments';
+
+export type MenuStyleProps = Partial<{
+  constrainBlockSize: boolean;
+}>;
+
+export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded-md p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto', ...etc);
+
+export const menuContent: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('is-48 rounded-md md:is-56 z-[30]', popperMotion, modalSurface, surfaceElevation({ elevation: 'group' }), ...etc);
+
+export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2 text-sm',
+    'data-[highlighted]:surface-hover',
+    subduedFocus,
+    dataDisabled,
+    ...etc,
+  );
+
+export const menuSeparator: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('mlb-1 mli-2 bs-px bg-neutral-75 dark:bg-neutral-700', ...etc);
+
+export const menuGroupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(descriptionText, 'select-none pli-2 plb-2', ...etc);
+
+export const menuArrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx(arrow, ...etc);
+
+export const menuTheme: Theme<MenuStyleProps> = {
+  content: menuContent,
+  viewport: menuViewport,
+  item: menuItem,
+  separator: menuSeparator,
+  groupLabel: menuGroupLabel,
+  arrow: menuArrow,
+};

package/src/styles/components/message.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { messageValence, contentElevation } from '../fragments';
+
+export type MessageStyleProps = {
+  valence?: MessageValence;
+  elevation?: Elevation;
+};
+
+export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence, elevation }, ...etc) =>
+  mx('p-3 rounded-md max-is-full overflow-auto', contentElevation({ elevation }), messageValence(valence), ...etc);
+
+export const messageTitle: ComponentFunction<MessageStyleProps> = (_props, ...etc) =>
+  mx('text-base font-medium mb-2', ...etc);
+
+export const messageBody: ComponentFunction<MessageStyleProps> = (_props, ...etc) => mx(...etc);
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root: messageRoot,
+  title: messageTitle,
+  body: messageBody,
+};