@dxos/ui-theme 0.0.0

package/src/styles/components/input.ts

@@ -0,0 +1,177 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  type ComponentFragment,
+  type ComponentFunction,
+  type Density,
+  type Elevation,
+  type MessageValence,
+  type Size,
+} from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import {
+  coarseBlockSize,
+  coarseDimensions,
+  computeSize,
+  descriptionText,
+  fineBlockSize,
+  fineDimensions,
+  focusRing,
+  getSize,
+  getSizeHeight,
+  getSizeWidth,
+  placeholderText,
+  sizeValue,
+  staticDisabled,
+  staticFocusRing,
+  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-description 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) => [
+  'plb-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) => [
+  'plb-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) => [
+  'plb-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/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/ui-types';
+
+import { mx } from '../../util';
+import { densityBlockSize, focusRing, 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-center justify-center', ...etc);
+
+export const listItemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx(densityBlockSize(density), 'flex items-center', ...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/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,
+};

package/src/styles/components/menu.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import {
+  dataDisabled,
+  descriptionText,
+  modalSurface,
+  popperMotion,
+  subduedFocus,
+  surfaceShadow,
+  surfaceZIndex,
+} from '../fragments';
+
+export type MenuStyleProps = Partial<{
+  constrainBlockSize: boolean;
+  elevation: Elevation;
+}>;
+
+export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto', ...etc);
+
+export const menuContent: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'is-48 rounded md:is-56 border border-separator',
+    surfaceZIndex({ elevation, level: 'menu' }),
+    surfaceShadow({ elevation: 'positioned' }),
+    modalSurface,
+    popperMotion,
+    ...etc,
+  );
+
+export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex cursor-pointer select-none items-center gap-2 rounded-sm pli-2 plb-2 text-sm',
+    'data-[highlighted]:bg-hoverSurface',
+    subduedFocus,
+    dataDisabled,
+    ...etc,
+  );
+
+export const menuSeparator: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('mlb-1 mli-2 bs-px bg-separator', ...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('fill-separator', ...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,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { messageValence } from '../fragments';
+
+export type MessageStyleProps = {
+  valence?: MessageValence;
+  elevation?: Elevation;
+};
+
+export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
+  return mx('p-trimSm rounded-md', messageValence(valence), etc);
+};
+
+export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('font-medium flex gap-trimSm', etc);
+};
+
+export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('flex bs-[1lh] items-center', etc);
+};
+
+export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('first:font-medium', etc);
+};
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root: messageRoot,
+  content: messageContent,
+  icon: messageIcon,
+  title: messageTitle,
+};

package/src/styles/components/popover.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { focusRing, modalSurface, surfaceShadow, surfaceZIndex } from '../fragments';
+
+export type PopoverStyleProps = Partial<{
+  constrainBlock: boolean;
+  constrainInline: boolean;
+  elevation: Elevation;
+}>;
+
+export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
+  mx(
+    'rounded-md',
+    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-y-auto',
+    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-x-auto',
+    ...etc,
+  );
+
+export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'border border-separator rounded-md',
+    modalSurface,
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'menu' }),
+    focusRing,
+    ...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/styles/components/scroll-area.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type ScrollAreaStyleProps = {};
+
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  mx('__bs-full __is-full overflow-hidden', ...etc);
+
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  // mx('bs-full is-full [&>div]:is-full [&>div]:bs-auto', ...etc);
+  mx('bs-full is-full [&>div]:table-fixed [&>div]:is-full', ...etc);
+
+export const scrollAreaScrollbar: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex select-none touch-none p-0.5 ease-out',
+    'data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3',
+    'data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3',
+    'sm:data-[variant=coarse]:bg-separator rounded-full',
+    '[&>div]:bg-unAccent sm:[&[data-variant=coarse]>div]:bg-attention',
+    ...etc,
+  );
+
+export const scrollAreaThumb: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex-1 rounded-full relative',
+    "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:is-full before:bs-full before:min-w-[6px] before:min-h-[6px]",
+    ...etc,
+  );
+
+export const scrollAreaCorner: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) => mx(...etc);
+
+export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
+  root: scrollAreaRoot,
+  viewport: scrollAreaViewport,
+  scrollbar: scrollAreaScrollbar,
+  thumb: scrollAreaThumb,
+  corner: scrollAreaCorner,
+};

package/src/styles/components/select.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import {
+  blockSeparator,
+  ghostHighlighted,
+  modalSurface,
+  separatorBorderColor,
+  surfaceShadow,
+  surfaceZIndex,
+} from '../fragments';
+
+export type SelectStyleProps = Partial<{
+  elevation: Elevation;
+}>;
+
+export const selectContent: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) => {
+  return mx(
+    'min-w-[--radix-select-trigger-width] rounded max-bs-[--radix-select-content-available-height] border border-separator',
+    modalSurface,
+    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-bs-[2rem] pli-3 plb-1 gap-2',
+    'text-baseText leading-none select-none outline-none',
+    '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
+    ghostHighlighted,
+    ...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(blockSeparator, separatorBorderColor, ...etc);
+
+export const selectScrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx(modalSurface, 'flex items-center justify-center cursor-default bs-6 is-full', ...etc);
+
+export const selectTheme: Theme<SelectStyleProps> = {
+  content: selectContent,
+  viewport: selectViewport,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton,
+};

package/src/styles/components/separator.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { blockSeparator, inlineSeparator, separatorBorderColor, subduedSeparatorBorderColor } from '../fragments';
+
+export type SeparatorStyleProps = {
+  orientation?: 'horizontal' | 'vertical';
+  subdued?: boolean;
+};
+
+export const separatorRoot: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
+  mx(
+    orientation === 'vertical' ? inlineSeparator : blockSeparator,
+    subdued ? subduedSeparatorBorderColor : separatorBorderColor,
+    ...etc,
+  );
+
+export const separatorTheme: Theme<SeparatorStyleProps> = {
+  root: separatorRoot,
+};

package/src/styles/components/status.ts

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

package/src/styles/components/tag.ts

@@ -0,0 +1,23 @@
+//
+// 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> = ({ palette = 'neutral' }, ...etc) => mx('dx-tag', ...etc);
+
+export const tagTheme: Theme<TagStyleProps> = {
+  root: tagRoot,
+};

package/src/styles/components/toast.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { descriptionText, focusRing, modalSurface, surfaceShadow } from '../fragments';
+
+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 block-end-[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)] is-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:is-full md:max-is-sm',
+    'rounded-md flex flex-col gap-2',
+    ...etc,
+  );
+
+export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    'rounded-md flex p-2 gap-2',
+    modalSurface,
+    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]',
+    focusRing,
+    ...etc,
+  );
+
+export const toastBody: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx('grow flex flex-col gap-1 justify-center pis-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(descriptionText, 'shrink-0', srOnly && 'sr-only', ...etc);
+
+export const toastTheme: Theme<ToastStyleProps> = {
+  viewport: toastViewport,
+  root: toastRoot,
+  body: toastBody,
+  title: toastTitle,
+  description: toastDescription,
+  actions: toastActions,
+};