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

package/src/styles/components/menu.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme, type Elevation } from '@dxos/react-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 px-2 py-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/react-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-trimMd rounded-md is-full', messageValence(valence), etc);
+};
+
+export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('mbe-trimSm last:mbe-0 font-medium flex items-center gap-trimXs', etc);
+};
+
+export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx(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 Theme, type Elevation } from '@dxos/react-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,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type ScrollAreaStyleProps = {};
+
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  mx('overflow-hidden', ...etc);
+
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
+  mx('is-full bs-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:w-full before:h-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,64 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import {
+  blockSeparator,
+  getSize,
+  ghostHighlighted,
+  modalSurface,
+  surfaceShadow,
+  separatorBorderColor,
+  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 selectTriggerIcon: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(getSize(2), ...etc);
+
+export const selectTheme: Theme<SelectStyleProps> = {
+  content: selectContent,
+  viewport: selectViewport,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton,
+  triggerIcon: selectTriggerIcon,
+};

package/src/styles/components/separator.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-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/react-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/react-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/react-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)] w-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:w-full md:max-w-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,
+};

package/src/styles/components/toolbar.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type ToolbarStyleProps = Partial<{ layoutManaged: boolean }>;
+
+export const toolbarLayout =
+  'is-full shrink-0 flex flex-nowrap items-center gap-1 p-2 overflow-x-auto scrollbar-none contain-layout';
+
+export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {
+  return mx('bg-toolbarSurface dx-toolbar', !layoutManaged && toolbarLayout, ...etc);
+};
+
+export const toolbarTheme: Theme<ToolbarStyleProps> = {
+  root: toolbarRoot,
+};

package/src/styles/components/tooltip.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme, type Elevation } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { chromeText, surfaceShadow, popperMotion, surfaceZIndex } from '../fragments';
+
+export type TooltipStyleProps = Partial<{
+  elevation: Elevation;
+}>;
+
+export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText',
+    popperMotion,
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'tooltip' }),
+    chromeText,
+    ...etc,
+  );
+
+export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) => mx('fill-inverseSurface', ...etc);
+
+export const tooltipTheme: Theme<TooltipStyleProps> = {
+  content: tooltipContent,
+  arrow: tooltipArrow,
+};

package/src/styles/components/treegrid.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type TreegridStyleProps = Partial<{
+  level: number;
+  indent: boolean;
+}>;
+
+const levelStyles = new Map<number, string>([
+  [1, '[&>.indent:first-of-type]:pis-0 font-medium'],
+  [2, '[&>.indent:first-of-type]:pis-0'],
+  [3, '[&>.indent:first-of-type]:pis-1'],
+  [4, '[&>.indent:first-of-type]:pis-2'],
+  [5, '[&>.indent:first-of-type]:pis-3'],
+  [6, '[&>.indent:first-of-type]:pis-4'],
+  [7, '[&>.indent:first-of-type]:pis-5'],
+  [8, '[&>.indent:first-of-type]:pis-6'],
+]);
+
+export const treegridRoot: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
+
+export const treegridRow: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
+  mx('contents dx-focus-ring-inset', levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+
+export const treegridCell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) =>
+  mx(indent && 'indent', ...etc);
+
+export const treegridTheme: Theme<TreegridStyleProps> = {
+  root: treegridRoot,
+  row: treegridRow,
+  cell: treegridCell,
+};

package/src/styles/fragments/density.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Density } from '@dxos/react-ui-types';
+
+export const coarseBlockSize = 'min-bs-[2.5rem]';
+export const coarseTextPadding = 'pli-3';
+export const coarseButtonPadding = 'pli-4';
+export const coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
+export const coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
+export const fineBlockSize = 'min-bs-[2.5rem] pointer-fine:min-bs-[2rem]';
+export const fineTextPadding = 'pli-2';
+export const fineButtonPadding = 'pli-2.5';
+export const fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
+export const fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
+export const densityBlockSize = (density: Density = 'coarse') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

package/src/styles/fragments/dimension.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/**
+ * Content areas that contain the text editor.
+ */
+export const textBlockWidth = 'is-full mli-auto max-is-[--text-content]';

package/src/styles/fragments/disabled.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const staticDisabled = 'opacity-40 cursor-not-allowed shadow-none';
+export const dataDisabled = 'data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed';

package/src/styles/fragments/elevation.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment, type Elevation, type SurfaceLevel } from '@dxos/react-ui-types';
+
+/**
+ * @deprecated
+ */
+export const contentShadow: ComponentFragment<{ elevation?: Elevation }> = (_) => ['shadow-none'];
+
+// TODO(thure): These should become tokens.
+export const surfaceShadow: ComponentFragment<{ elevation?: Elevation }> = ({ elevation }) => [
+  elevation === 'positioned' ? 'shadow' : elevation === 'dialog' || elevation === 'toast' ? 'shadow-md' : 'shadow-none',
+];
+
+export const surfaceZIndex: ComponentFragment<{ level?: SurfaceLevel; elevation?: Elevation }> = ({
+  level,
+  elevation,
+}) => {
+  switch (level) {
+    case 'tooltip':
+      return elevation === 'dialog' ? ['z-[53]'] : elevation === 'toast' ? ['z-[43]'] : ['z-30'];
+    case 'menu':
+      return elevation === 'dialog' ? ['z-[52]'] : elevation === 'toast' ? ['z-[42]'] : ['z-20'];
+    default:
+      return elevation === 'dialog' ? ['z-[51]'] : elevation === 'toast' ? ['z-[41]'] : ['z-[1]'];
+  }
+};

package/src/styles/fragments/focus.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const focusRing = 'dx-focus-ring';
+
+export const dropRing =
+  'ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black';
+
+export const dropRingInner =
+  'before:z-[1] before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450';
+
+export const subduedFocus = 'focus:outline-none focus-visible:outline-none focus:ring-0 ring-0 focus:border-0 border-0';
+
+export const staticFocusRing =
+  'ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black';

package/src/styles/fragments/group.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment, type Elevation } from '@dxos/react-ui-types';
+
+import { surfaceShadow } from './elevation';
+
+export const group: ComponentFragment<{ elevation?: Elevation }> = (props) => [
+  props.elevation === 'base' ? 'bg-transparent border border-separator' : 'bg-modalSurface',
+  surfaceShadow(props),
+];

package/src/styles/fragments/hover.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/**
+ * @deprecated
+ */
+export const hoverColors = 'transition-colors duration-100 linear hover:bg-hoverSurface';
+
+export const ghostHover = 'hover:bg-hoverSurface';
+export const subtleHover = 'hover:bg-neutral-100/20 dark:hover:bg-neutral-800/20';
+
+export const hoverableControls =
+  '[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]';
+
+export const groupHoverControlItemWithTransition = 'transition-opacity duration-200 opacity-0 group-hover:opacity-100';
+
+export const hoverableFocusedKeyboardControls = 'focus-visible:[--controls-opacity:1]';
+export const hoverableFocusedWithinControls = 'focus-within:[--controls-opacity:1]';
+export const hoverableFocusedControls = 'focus:[--controls-opacity:1]';
+export const hoverableOpenControlItem = 'hover-hover:aria-[expanded=true]:[--controls-opacity:1]';
+export const hoverableControlItem = 'opacity-[--controls-opacity]';
+export const staticHoverableControls = 'hover-hover:[--controls-opacity:1]';
+export const hoverableControlItemTransition = 'transition-opacity duration-200';

package/src/styles/fragments/index.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './density';
+export * from './disabled';
+export * from './dimension';
+export * from './elevation';
+export * from './focus';
+export * from './group';
+export * from './hover';
+export * from './layout';
+export * from './motion';
+export * from './ornament';
+export * from './selected';
+export * from './shimmer';
+export * from './surface';
+export * from './size';
+export * from './text';
+export * from './valence';

package/src/styles/fragments/layout.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const bounceLayout = 'fixed inset-0 z-0 overflow-auto overscroll-auto';
+
+export const fixedInsetFlexLayout = 'flex flex-col fixed inset-0 overflow-hidden overscroll-none';

package/src/styles/fragments/motion.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const popperMotion =
+  'will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade';

package/src/styles/fragments/ornament.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// TODO(burdon): Remove?
+export const separatorBorderColor = 'border-separator';
+export const subduedSeparatorBorderColor = 'border-subduedSeparator';
+
+export const inlineSeparator = 'self-stretch border-ie mli-1';
+export const blockSeparator = 'self-stretch border-be mlb-1';