@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/src/plugins/resolveContent.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { glob as globCb } from 'glob';
+import { promisify } from 'node:util';
+
+const glob = promisify(globCb);
+
+/**
+ *
+ */
+// TODO(burdon): Comment.
+const knownIndirectPeers = [
+  '@dxos/gem-*',
+  '@dxos/react-*',
+  '@dxos/react-ui-*',
+  '@dxos/devtools',
+  '@dxos/shell',
+  // TODO(thure): glob v7 runs out of memory if we do a `**` search, and this is (hopefully) the only L3 content package; find a better solution.
+  '@dxos/react-ui-table/node_modules/@dxos/react-ui-searchlist',
+];
+
+const knownDirectPeers = ['@dxos/plugin-*', ...knownIndirectPeers];
+
+const packageNamePattern = /.*node_modules\/(.+?)$/;
+const packageName = (path: string) => path.match(packageNamePattern)?.[1];
+
+const flatten = (acc: string[], group: string[]) => [...acc, ...group];
+const dedupe = (acc: Record<string, string>, path: string) => {
+  const name = packageName(path);
+  if (name && !acc[name]) {
+    acc[name] = path;
+  }
+  return acc;
+};
+
+export const resolveKnownPeers = async (content: string[], cwd: string): Promise<string[]> => {
+  const globOptions = { cwd, absolute: true };
+
+  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));
+
+  // NOTE(thure): With glob v7, JS runs out of memory if `**` is used, so this limits the search to @dxos/plugin-*/node_modules
+  const indirectPeers = await Promise.all(
+    knownIndirectPeers.map((peer) => glob(`./node_modules/@dxos/plugin-*/node_modules/${peer}`, globOptions)),
+  );
+
+  const knownPeerContent = Object.values(
+    indirectPeers.reduce(flatten, []).reduce(dedupe, directPeers.reduce(flatten, []).reduce(dedupe, {})),
+  ).map((value) => `${value}/dist/lib/**/*.mjs`);
+
+  // console.log('[found known peer content paths]', knownPeerContent);
+
+  return [...content, ...knownPeerContent];
+};

package/src/styles/components/README.md

@@ -0,0 +1,6 @@
+# react-ui themes
+
+References: 
+- https://tailwindcss-radix.vercel.app
+- https://github.com/ecklf/tailwindcss-radix
+- https://www.radix-ui.com/primitives/docs/components

package/src/styles/components/anchored-overflow.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type AnchoredOverflowStyleProps = {};
+
+export const anchoredOverflowRoot: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
+  mx('overflow-anchored overflow-auto', ...etc);
+
+export const anchoredOverflowAnchor: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
+  mx('overflow-anchor is-px bs-px', ...etc);
+
+export const anchoredOverflowTheme: Theme<AnchoredOverflowStyleProps> = {
+  root: anchoredOverflowRoot,
+  anchor: anchoredOverflowAnchor,
+};

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-amber-350 dark:text-amber-250'
+      : status === 'active'
+        ? 'text-emerald-350 dark:text-emerald-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-emerald-400 dark:border-emerald-400'
+        : status === 'error'
+          ? 'border-rose-400 dark:border-rose-500'
+          : status === 'warning'
+            ? 'border-amber-400 dark:border-amber-500'
+            : status === 'inactive'
+              ? 'border-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,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { Density, Elevation, ComponentFunction, Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { ghostHover } from '../fragments';
+
+export const primaryButtonColors =
+  'text-accentSurfaceText bg-accentSurface hover:bg-accentSurfaceHover 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-inputSurface';
+
+export const defaultButtonColors = mx(
+  staticDefaultButtonColors,
+  'data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
+);
+
+export const ghostButtonColors = mx(
+  ghostHover,
+  'hover:text-inherit data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
+);
+
+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('dx-button dx-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',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root: buttonRoot,
+  group: buttonGroup,
+};

package/src/styles/components/dialog.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { descriptionText } from '../fragments';
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+};
+
+export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout }, ...etc) =>
+  mx(
+    'dx-dialog__content modal-surface density-coarse @container dx-focus-ring',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    ...etc,
+  );
+
+export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', descriptionText, srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay: dialogOverlay,
+  content: dialogContent,
+  title: dialogTitle,
+  description: dialogDescription,
+};

package/src/styles/components/icon-button.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/react-ui-types';
+
+import { type ButtonStyleProps } from './button';
+import { mx } from '../../util';
+
+// TODO(burdon): Gap/font size should depend on density.
+export const iconButtonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('ch-icon-button dx-focus-ring gap-2', ...etc);
+};
+
+export const iconButtonTheme: Theme<ButtonStyleProps> = {
+  root: iconButtonRoot,
+};

package/src/styles/components/icon.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Size, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { getSize } from '../fragments';
+
+export type IconStyleProps = {
+  size?: Size;
+};
+
+export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) =>
+  mx('shrink-0 bs-[1em] is-[1em] text-[var(--icons-color,currentColor)]', size && getSize(size), etc);
+
+export const iconTheme: Theme<IconStyleProps> = {
+  root: iconRoot,
+};

package/src/styles/components/index.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './anchored-overflow';
+export * from './avatar';
+export * from './breadcrumb';
+export * from './button';
+export * from './dialog';
+export * from './icon';
+export * from './icon-button';
+export * from './input';
+export * from './link';
+export * from './list';
+export * from './main';
+export * from './menu';
+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,176 @@
+//
+// 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 {
+  coarseBlockSize,
+  coarseDimensions,
+  computeSize,
+  descriptionText,
+  fineBlockSize,
+  fineDimensions,
+  focusRing,
+  getSize,
+  getSizeHeight,
+  getSizeWidth,
+  placeholderText,
+  sizeValue,
+  staticFocusRing,
+  staticDisabled,
+  subduedFocus,
+  valenceColorText,
+} from '../fragments';
+
+export type InputStyleProps = Partial<{
+  variant: 'default' | 'subdued' | 'static';
+  density: Density;
+  disabled: boolean;
+  elevation: Elevation;
+  focused: boolean;
+  validationValence: MessageValence;
+  size: Size;
+  checked: boolean;
+}>;
+
+export type InputMetaStyleProps = Partial<{
+  srOnly: boolean;
+  validationValence: MessageValence;
+}>;
+
+export const neutralInputValence = '';
+export const successInputValence = 'shadow-emerald-500/50 dark:shadow-emerald-600/50';
+export const infoInputValence = 'shadow-cyan-500/50 dark:shadow-cyan-600/50';
+export const warningInputValence = 'shadow-amber-500/50 dark:shadow-amber-600/50';
+export const errorInputValence = 'shadow-rose-500/50 dark:shadow-rose-600/50';
+
+const textInputSurfaceFocus =
+  'transition-colors bg-textInputSurface focus:bg-focusSurface border border-separator focus:border-separator';
+
+const textInputSurfaceHover = 'hover:bg-textInputSurface focus:hover:bg-focusSurface';
+
+const booleanInputSurface =
+  'shadow-inner transition-colors bg-unAccent aria-checked:bg-accentSurface aria-[checked=mixed]:bg-accentSurface';
+
+const booleanInputSurfaceHover =
+  'hover:bg-unAccentHover hover:aria-checked:bg-accentSurfaceHover hover:aria-[checked=mixed]:bg-accentSurfaceHover';
+
+export const inputTextLabel = 'text-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0';
+
+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) => [
+  'py-0 is-full bg-transparent text-current [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  props.density === 'fine' ? fineBlockSize : coarseBlockSize,
+  placeholderText,
+  subduedFocus,
+  props.disabled && staticDisabled,
+];
+
+const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  'py-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  textInputSurfaceFocus,
+  placeholderText,
+  props.density === 'fine' ? fineDimensions : coarseDimensions,
+  props.disabled ? staticDisabled : textInputSurfaceHover,
+];
+
+const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  'py-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && 'bg-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('dx-checkbox dx-focus-ring', getSize(size), ...etc);
+
+export const inputCheckboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
+  mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...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 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', inputTextLabel, 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-labelSpacingBlock', 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,26 @@
+//
+// 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';
+};
+
+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'
+      : 'text-accentText hover:text-accentTextHover visited:text-accentText visited:hover:text-accentTextHover',
+    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,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+// 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;
+  handlesFocus: boolean;
+}>;
+
+export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
+
+export const mainPadding = 'dx-main-content-padding';
+
+export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
+
+export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
+  mx(mainPadding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
+
+export const mainIntrinsicSize = 'dx-main-intrinsic-size';
+
+export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
+
+export const mainTheme = {
+  content: mainContent,
+  sidebar: mainSidebar,
+  overlay: mainOverlay,
+};