@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/theme/components/link.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type LinkStyleProps = {
-  variant?: 'accent' | 'neutral';
-};
-
-export const linkRoot: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc) =>
-  mx(
-    'underline decoration-1 underline-offset-2 transition-color rounded-xs',
-    variant === 'neutral'
-      ? 'text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90'
-      : 'text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover',
-    'dx-focus-ring',
-    ...etc,
-  );
-
-export const linkTheme: Theme<LinkStyleProps> = {
-  root: linkRoot,
-};

package/src/theme/components/list.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-
-import { densityBlockSize, ghostHover } from '../../fragments';
-import { getSize, mx } from '../../util';
-
-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-center justify-center', ...etc);
-
-export const listItemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx(densityBlockSize(density), 'flex items-center overflow-hidden [&>span]:truncate', ...etc);
-
-export const listItemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) =>
-  mx(getSize(5), 'mt-2.5', ...etc);
-
-export const listItemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, 'dx-focus-ring', ...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/theme/components/main.ts

@@ -1,34 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-// Padding to apply to in-flow elements which need to clear the fixed topbar/bottombar.
-export const topbarBlockPaddingStart = 'py-(--dx-topbar-size) dx-sticky-top-from-topbar-bottom';
-export const bottombarBlockPaddingEnd = 'pb-(--dx-statusbar-size) dx-sticky-bottom-from-statusbar-bottom';
-
-export const mainPadding = 'dx-main-content-padding';
-export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
-export const mainIntrinsicSize = 'dx-main-intrinsic-size';
-
-export type MainStyleProps = Partial<{
-  bounce: boolean;
-  handlesFocus: boolean;
-}>;
-
-export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
-  mx(mainPadding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
-
-export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
-  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
-
-export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
-
-export const mainTheme = {
-  content: mainContent,
-  sidebar: mainSidebar,
-  overlay: mainOverlay,
-};

package/src/theme/components/menu.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { dataDisabled } from '../../fragments';
-import { mx, surfaceShadow, surfaceZIndex } from '../../util';
-
-export type MenuStyleProps = Partial<{
-  constrainBlockSize: boolean;
-  elevation: Elevation;
-}>;
-
-export const menuContent: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
-  mx(
-    'dx-modal-surface w-48 rounded-sm md:w-56 border border-separator',
-    surfaceZIndex({ elevation, level: 'menu' }),
-    surfaceShadow({ elevation: 'positioned' }),
-    ...etc,
-  );
-
-export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx('rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto', ...etc);
-
-export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx(
-    'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
-    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
-    'dx-focus-subdued',
-    dataDisabled,
-    ...etc,
-  );
-
-export const menuSeparator: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx('my-1 mx-2 h-px bg-separator', ...etc);
-
-export const menuGroupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx('text-description', 'select-none px-2 py-2', ...etc);
-
-export const menuArrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
-
-export const menuTheme: Theme<MenuStyleProps> = {
-  content: menuContent,
-  viewport: menuViewport,
-  item: menuItem,
-  separator: menuSeparator,
-  groupLabel: menuGroupLabel,
-  arrow: menuArrow,
-};

package/src/theme/components/message.ts

@@ -1,40 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
-
-import { mx, messageValence } from '../../util';
-
-export type MessageStyleProps = {
-  valence?: MessageValence;
-  elevation?: Elevation;
-};
-
-export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
-  return mx('grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm', messageValence(valence), etc);
-};
-
-export const messageHeader: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-span-2 grid grid-cols-subgrid items-center', etc);
-};
-
-export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-2 gap-trim-sm [&>svg]:inline-block', etc);
-};
-
-export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-1', etc);
-};
-
-export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('grid grid-cols-subgrid col-start-2 first:font-medium', etc);
-};
-
-export const messageTheme: Theme<MessageStyleProps> = {
-  root: messageRoot,
-  header: messageHeader,
-  icon: messageIcon,
-  title: messageTitle,
-  content: messageContent,
-};

package/src/theme/components/popover.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow, surfaceZIndex } from '../../util';
-
-export type PopoverStyleProps = Partial<{
-  constrainBlock: boolean;
-  constrainInline: boolean;
-  elevation: Elevation;
-}>;
-
-export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
-  mx(
-    'dx-modal-surface border border-separator rounded-sm',
-    surfaceShadow({ elevation: 'positioned' }),
-    surfaceZIndex({ elevation, level: 'menu' }),
-    'dx-focus-ring',
-    ...etc,
-  );
-
-export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
-  mx(
-    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
-    (constrainBlock || constrainInline) && 'overflow-hidden',
-    constrainBlock && 'max-h-(--radix-popover-content-available-height)',
-    constrainBlock &&
-      'max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]',
-    constrainInline && 'max-w-(--radix-popover-content-available-width)',
-    ...etc,
-  );
-
-export const popoverArrow: ComponentFunction<PopoverStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
-
-export const popoverTheme: Theme<PopoverStyleProps> = {
-  content: popoverContent,
-  viewport: popoverViewport,
-  arrow: popoverArrow,
-};

package/src/theme/components/scroll-area.ts

@@ -1,115 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-import { withColumn } from '../primitives/column';
-
-export const scrollbar = {
-  thin: {
-    size: 4,
-    padding: 4,
-  },
-  coarse: {
-    size: 8,
-    padding: 8,
-  },
-};
-
-export type ScrollAreaStyleProps = {
-  orientation?: AllowedAxis;
-  autoHide?: boolean;
-  /** Balance left/right, top/bottom offset with scrollbar. */
-  centered?: boolean;
-  /** Add default padding. */
-  /** TODO(burdon): Integrate with Column.Root padding. */
-  padding?: boolean;
-  /** Use thin scrollbars. */
-  /** TODO(burdon): Density fine/course. */
-  thin?: boolean;
-  /** Enable snap scrolling. */
-  snap?: boolean;
-};
-
-export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
-  mx(
-    // Expand
-    'dx-container',
-
-    orientation === 'vertical' && 'group/scroll-v flex flex-col',
-    orientation === 'horizontal' && 'group/scroll-h flex',
-    orientation === 'all' && 'group/scroll-all',
-
-    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
-    '[.dx-column-root_&]:col-span-full',
-
-    ...etc,
-  );
-
-/**
- * NOTE: The browser reserves space for scrollbars.
- */
-export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
-  { orientation, centered, padding, snap, autoHide },
-  ...etc
-) => {
-  return mx(
-    'flex-1 min-h-0 w-full',
-
-    // Reset --dx-col so nested components don't try to grid-position themselves.
-    // ScrollArea has already consumed --gutter for padding.
-    withColumn.consumed(),
-
-    orientation === 'vertical' && 'overflow-y-scroll',
-    orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
-    orientation === 'all' && 'overflow-scroll',
-
-    '[&::-webkit-scrollbar-corner]:bg-transparent',
-    '[&::-webkit-scrollbar-track]:bg-transparent',
-    '[&::-webkit-scrollbar-thumb]:rounded-none',
-
-    '[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]',
-
-    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
-    // If centered, left padding compensates for scrollbar width so content is visually centered.
-    (orientation === 'vertical' || orientation === 'all') &&
-      (padding
-        ? [
-            centered ? 'pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]' : 'pl-[var(--gutter,0)]',
-            'pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]',
-          ]
-        : centered && 'pl-[var(--scroll-width)]'),
-
-    (orientation === 'horizontal' || orientation === 'all') &&
-      (padding
-        ? [centered && 'pt-[calc(var(--scroll-width)+var(--scroll-padding))]', 'pb-[var(--scroll-padding)]']
-        : centered && 'pt-[var(--scroll-width)]'),
-
-    snap && [
-      orientation === 'vertical' && 'snap-y snap-mandatory',
-      orientation === 'horizontal' && 'snap-x snap-mandatory',
-      orientation === 'all' && 'snap-both snap-mandatory',
-    ],
-
-    autoHide
-      ? [
-          orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-        ]
-      : [
-          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
-        ],
-
-    ...etc,
-  );
-};
-
-export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
-  root: scrollAreaRoot,
-  viewport: scrollAreaViewport,
-};

package/src/theme/components/select.ts

@@ -1,52 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow, surfaceZIndex } from '../../util';
-
-export type SelectStyleProps = Partial<{
-  elevation: Elevation;
-}>;
-
-export const selectContent: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) => {
-  return mx(
-    'dx-modal-surface rounded-sm border border-separator',
-    'min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)',
-    surfaceShadow({ elevation: 'positioned' }),
-    surfaceZIndex({ elevation, level: 'menu' }),
-    ...etc,
-  );
-};
-
-export const selectViewport: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(...etc);
-
-export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx(
-    'flex items-center min-h-[2rem] px-3 py-1 gap-2',
-    'text-base-surface-text leading-none select-none outline-hidden',
-    '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
-    'dx-highlighted',
-    ...etc,
-  );
-
-export const selectItemIndicator: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('items-center', ...etc);
-
-export const selectArrow: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
-
-export const selectSeparator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx('self-stretch border-b my-1 border-separator', ...etc);
-
-export const selectScrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx('dx-modal-surface flex items-center justify-center cursor-default h-6 w-full', ...etc);
-
-export const selectTheme: Theme<SelectStyleProps> = {
-  content: selectContent,
-  viewport: selectViewport,
-  item: selectItem,
-  itemIndicator: selectItemIndicator,
-  arrow: selectArrow,
-  separator: selectSeparator,
-  scrollButton: selectScrollButton,
-};

package/src/theme/components/separator.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type SeparatorStyleProps = {
-  orientation?: 'horizontal' | 'vertical';
-  subdued?: boolean;
-};
-
-export const separatorRoot: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
-  mx(
-    'self-stretch',
-    orientation === 'vertical' ? 'border-e mx-1' : 'border-b my-1',
-    subdued ? 'border-subdued-separator' : 'border-separator',
-    ...etc,
-  );
-
-export const separatorTheme: Theme<SeparatorStyleProps> = {
-  root: separatorRoot,
-};

package/src/theme/components/skeleton.ts

@@ -1,23 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type SkeletonStyleProps = {
-  variant?: 'default' | 'circle' | 'text';
-};
-
-export const skeletonRoot: ComponentFunction<SkeletonStyleProps> = ({ variant = 'default' }, ...etc) =>
-  mx(
-    'animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md',
-    variant === 'circle' && 'rounded-full',
-    variant === 'text' && 'rounded-sm',
-    ...etc,
-  );
-
-export const skeletonTheme: Theme<SkeletonStyleProps> = {
-  root: skeletonRoot,
-};

package/src/theme/components/splitter.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type SplitterStyleProps = {};
-
-const splitterRoot: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
-  mx('relative h-full overflow-hidden', ...etc);
-
-const splitterPanel: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
-  mx('absolute inset-x-0 flex flex-col overflow-hidden', ...etc);
-
-export const splitterTheme: Theme<SplitterStyleProps> = {
-  root: splitterRoot,
-  panel: splitterPanel,
-};

package/src/theme/components/status.ts

@@ -1,32 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type StatusStyleProps = {
-  variant?: 'default' | 'main-bottom';
-  indeterminate?: boolean;
-};
-
-export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
-  mx(
-    'h-1 relative rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
-    ...etc,
-  );
-
-export const statusBar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
-  mx(
-    'absolute inset-y-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
-    indeterminate ? 'animate-progress-indeterminate' : 'start-0',
-    ...etc,
-  );
-
-export const statusTheme: Theme<StatusStyleProps> = {
-  root: statusRoot,
-  bar: statusBar,
-};

package/src/theme/components/tag.ts

@@ -1,23 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  type ChromaticPalette,
-  type ComponentFunction,
-  type MessageValence,
-  type NeutralPalette,
-  type Theme,
-} from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type TagStyleProps = {
-  palette?: ChromaticPalette | NeutralPalette | MessageValence;
-};
-
-export const tagRoot: ComponentFunction<TagStyleProps> = (_, ...etc) => mx('dx-tag', ...etc);
-
-export const tagTheme: Theme<TagStyleProps> = {
-  root: tagRoot,
-};

package/src/theme/components/toast.ts

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow } from '../../util';
-
-export type ToastStyleProps = Partial<{
-  srOnly: boolean;
-}>;
-
-export const toastViewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx(
-    // TODO(burdon): block-end should take into account status bar.
-    'z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm',
-    'rounded-md flex flex-col gap-2',
-    ...etc,
-  );
-
-export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx(
-    'dx-modal-surface rounded-md flex p-2 gap-2',
-    surfaceShadow({ elevation: 'toast' }),
-    'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
-    'radix-state-closed:animate-toast-hide',
-    'radix-swipe-end:animate-toast-swipe-out',
-    'translate-x-radix-toast-swipe-move-x',
-    'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-    'dx-focus-ring',
-    ...etc,
-  );
-
-export const toastBody: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx('grow flex flex-col gap-1 justify-center pl-2', ...etc);
-
-export const toastActions: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx('shrink-0 flex flex-col gap-1 justify-center', ...etc);
-
-export const toastTitle: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...etc) =>
-  mx('shrink-0 font-medium', srOnly && 'sr-only', ...etc);
-
-export const toastDescription: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...etc) =>
-  mx('text-description', 'shrink-0', srOnly && 'sr-only', ...etc);
-
-export const toastTheme: Theme<ToastStyleProps> = {
-  viewport: toastViewport,
-  root: toastRoot,
-  body: toastBody,
-  title: toastTitle,
-  description: toastDescription,
-  actions: toastActions,
-};

package/src/theme/components/toolbar.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type ToolbarStyleProps = Partial<{
-  density: Density;
-  disabled: boolean;
-  layoutManaged: boolean;
-}>;
-
-export const toolbarLayout =
-  'w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout';
-
-export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, disabled, layoutManaged }, ...etc) => {
-  return mx(
-    'bg-toolbar-surface dx-toolbar',
-    density === 'coarse' && 'h-(--dx-rail-size) px-3!',
-    disabled && '*:opacity-20',
-    !layoutManaged && toolbarLayout,
-    ...etc,
-  );
-};
-
-export const toolbarText: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
-  return mx('px-2 grow truncate items-center', ...etc);
-};
-
-export const toolbarTheme: Theme<ToolbarStyleProps> = {
-  root: toolbarRoot,
-  text: toolbarText,
-};

package/src/theme/components/tooltip.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow, surfaceZIndex } from '../../util';
-
-export type TooltipStyleProps = Partial<{
-  elevation: Elevation;
-}>;
-
-export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
-  mx(
-    'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm',
-    surfaceShadow({ elevation: 'positioned' }),
-    surfaceZIndex({ elevation, level: 'tooltip' }),
-    ...etc,
-  );
-
-export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) =>
-  mx('fill-inverse-surface', ...etc);
-
-export const tooltipTheme: Theme<TooltipStyleProps> = {
-  content: tooltipContent,
-  arrow: tooltipArrow,
-};