@dxos/ui-theme 0.0.0

package/src/styles/components/toolbar.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { textBlockWidth } from '../fragments';
+
+export type ToolbarStyleProps = Partial<{ layoutManaged: boolean; disabled: boolean }>;
+
+export const toolbarLayout =
+  'is-full shrink-0 flex flex-nowrap items-center gap-1 p-1 overflow-x-auto scrollbar-none contain-layout';
+
+// TODO(burdon): Detect: &:not([data-is-attention-source]_&)]:
+export const toolbarInactive = '*:opacity-20';
+
+export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged, disabled }, ...etc) => {
+  return mx('bg-toolbarSurface dx-toolbar', !layoutManaged && toolbarLayout, disabled && toolbarInactive, ...etc);
+};
+
+export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {
+  return mx(!layoutManaged && ['flex gap-1', textBlockWidth], ...etc);
+};
+
+export const toolbarTheme: Theme<ToolbarStyleProps> = {
+  root: toolbarRoot,
+  inner: toolbarInner,
+};

package/src/styles/components/tooltip.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { chromeText, popperMotion, surfaceShadow, 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/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', 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/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/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/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,25 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/**
+ * @deprecated
+ */
+export const hoverColors = 'transition-colors duration-100 linear hover:bg-hoverSurface';
+
+export const ghostHover = 'hover:bg-hoverSurface';
+export const ghostFocusWithin = 'focus-within:bg-hoverSurface';
+export const subtleHover = 'hover:bg-hoverOverlay';
+
+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 hoverableControlItemTransition = 'transition-opacity duration-200';
+export const staticHoverableControls = 'hover-hover:[--controls-opacity:1]';

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';

package/src/styles/fragments/selected.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment } from '@dxos/ui-types';
+
+import { ghostHover } from './hover';
+
+// TODO(burdon): Use semantic tokens (e.g., accentSurfaceHover, bg-gridSelectionOverlay)?
+
+export const ghostSelectedCurrent = [
+  ghostHover,
+  'aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface',
+  'aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800',
+  'aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750',
+];
+
+export const ghostHighlighted =
+  'data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500';
+
+export const ghostSelectedTrackingInterFromNormal = 'tracking-[0.0092em]';
+
+export const ghostSelected =
+  'aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]';
+
+export const ghostSelectedContainerMd =
+  '@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]';
+
+export type SelectedStyleProps = {
+  current?: boolean;
+  selected?: boolean;
+};
+
+export const staticGhostSelectedCurrent: ComponentFragment<SelectedStyleProps> = ({ current, selected }) => [
+  current && selected
+    ? 'bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750'
+    : current
+      ? 'bg-inputSurface hover:bg-hoverSurface'
+      : selected
+        ? 'bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800'
+        : ghostHover,
+];
+
+export const staticGhostSelected: ComponentFragment<Pick<SelectedStyleProps, 'selected'>> = ({ selected }) =>
+  selected ? ['bg-primary-200 dark:bg-primary-750'] : [];

package/src/styles/fragments/shimmer.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const shimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden';
+
+export const strongShimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden';

package/src/styles/fragments/size.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Size } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export const sizeWidthMap = new Map<Size, string>([
+  [0, 'is-0'],
+  ['px', 'is-px'],
+  [0.5, 'is-0.5'],
+  [1, 'is-1'],
+  [1.5, 'is-1.5'],
+  [2, 'is-2'],
+  [2.5, 'is-2.5'],
+  [3, 'is-3'],
+  [3.5, 'is-3.5'],
+  [4, 'is-4'],
+  [5, 'is-5'],
+  [6, 'is-6'],
+  [7, 'is-7'],
+  [8, 'is-8'],
+  [9, 'is-9'],
+  [10, 'is-10'],
+  [11, 'is-11'],
+  [12, 'is-12'],
+  [14, 'is-14'],
+  [16, 'is-16'],
+  [20, 'is-20'],
+  [24, 'is-24'],
+  [28, 'is-28'],
+  [32, 'is-32'],
+  [36, 'is-36'],
+  [40, 'is-40'],
+  [44, 'is-44'],
+  [48, 'is-48'],
+  [52, 'is-52'],
+  [56, 'is-56'],
+  [60, 'is-60'],
+  [64, 'is-64'],
+  [72, 'is-72'],
+  [80, 'is-80'],
+  [96, 'is-96'],
+]);
+
+export const sizeHeightMap = new Map<Size, string>([
+  [0, 'bs-0'],
+  ['px', 'bs-px'],
+  [0.5, 'bs-0.5'],
+  [1, 'bs-1'],
+  [1.5, 'bs-1.5'],
+  [2, 'bs-2'],
+  [2.5, 'bs-2.5'],
+  [3, 'bs-3'],
+  [3.5, 'bs-3.5'],
+  [4, 'bs-4'],
+  [5, 'bs-5'],
+  [6, 'bs-6'],
+  [7, 'bs-7'],
+  [8, 'bs-8'],
+  [9, 'bs-9'],
+  [10, 'bs-10'],
+  [11, 'bs-11'],
+  [12, 'bs-12'],
+  [14, 'bs-14'],
+  [16, 'bs-16'],
+  [20, 'bs-20'],
+  [24, 'bs-24'],
+  [28, 'bs-28'],
+  [32, 'bs-32'],
+  [36, 'bs-36'],
+  [40, 'bs-40'],
+  [44, 'bs-44'],
+  [48, 'bs-48'],
+  [52, 'bs-52'],
+  [56, 'bs-56'],
+  [60, 'bs-60'],
+  [64, 'bs-64'],
+  [72, 'bs-72'],
+  [80, 'bs-80'],
+  [96, 'bs-96'],
+]);
+
+const sizes = new Set(sizeWidthMap.keys());
+
+export const getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
+export const getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
+export const getSize = (size: Size) => mx(getSizeHeight(size), getSizeWidth(size));
+
+export const computeSize = (value: number, defaultSize: Size) => {
+  if (sizes.has(value as Size)) {
+    return value as Size;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value === 1) {
+    return 'px';
+  } else {
+    const wholeSeries = Math.floor(value);
+    const halfSeries = Math.floor(value * 2) / 2;
+    const doubleSeries = Math.floor(value / 2) * 2;
+    const quadrupleSeries = Math.floor(value / 4) * 4;
+    if (sizes.has(halfSeries as Size)) {
+      return halfSeries as Size;
+    } else if (sizes.has(wholeSeries as Size)) {
+      return wholeSeries as Size;
+    } else if (sizes.has(doubleSeries as Size)) {
+      return doubleSeries as Size;
+    } else if (sizes.has(quadrupleSeries as Size)) {
+      return quadrupleSeries as Size;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+
+export const sizeValue = (size: Size): number => (size === 'px' ? 1 : size);

package/src/styles/fragments/surface.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// NOTE: Please don’t make changes to these fragments without testing *all* the places where they’re used.
+
+// If your scope of concern is narrower than exactly *the entire design system*, please define and apply your own
+// fragment, either to the specific component or in an override to `ThemeProvider`’s `tx` value.
+
+// Main background.
+// NOTE: This should align with theme's root --surface-bg.
+export const baseSurface = 'base-surface';
+
+// Sidebars.
+export const sidebarSurface = 'sidebar-surface backdrop-blur-md dark:backdrop-blur-lg';
+export const sidebarBorder = 'border-separator';
+
+// Generic grouping style.
+export const activeSurface = 'base-surface';
+export const groupBorder = 'border-separator';
+
+// Tooltips, popovers, menus, dialogs, etc.
+export const modalSurface = 'modal-surface backdrop-blur-md';
+
+// Elements that actively have the user’s “attention”; prefer to select with CSS-native selectors like focus-within,
+// but may be applied by app state. ⚠️ Do not apply statically.
+export const attentionSurface = 'attention-surface';
+
+export const accentSurface = 'bg-accentSurface text-accentSurfaceText';

package/src/styles/fragments/text.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const placeholderText = 'placeholder-neutral-300 dark:placeholder-neutral-500';
+export const staticPlaceholderText = 'text-neutral-300 dark:text-neutral-500';
+
+export const descriptionText = 'text-sm font-normal text-description';
+export const descriptionTextPrimary = 'text-sm font-normal text-baseText';
+export const descriptionMessage = [descriptionText, 'border border-dashed border-separator rounded p-4'];
+
+export const chromeText = 'text-sm font-normal';

package/src/styles/fragments/valence.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type MessageValence } from '@dxos/ui-types';
+
+export const successText = 'text-xs font-medium text-successText';
+export const infoText = 'text-xs font-medium text-infoText';
+export const warningText = 'text-xs font-medium text-warningText';
+export const errorText = 'text-xs font-medium text-errorText';
+
+export const valenceColorText = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return successText;
+    case 'info':
+      return infoText;
+    case 'warning':
+      return warningText;
+    case 'error':
+      return errorText;
+    default:
+      return undefined;
+  }
+};
+
+export const neutralMessageColors = 'border border-dashed border-separator text-subdued';
+export const successMessageColors = 'text-successSurfaceText bg-successSurface';
+export const infoMessageColors = 'text-infoSurfaceText bg-infoSurface';
+export const warningMessageColors = 'text-warningSurfaceText bg-warningSurface';
+export const errorMessageColors = 'text-errorSurfaceText bg-errorSurface';
+
+export const messageValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return successMessageColors;
+    case 'info':
+      return infoMessageColors;
+    case 'warning':
+      return warningMessageColors;
+    case 'error':
+      return errorMessageColors;
+    default:
+      return neutralMessageColors;
+  }
+};

package/src/styles/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './fragments';
+export * from './components';
+export * from './theme';

package/src/styles/layers/README.md

@@ -0,0 +1,15 @@
+# Layers
+
+NOTE: The order of the layers is important and defined in the root `index.html`.
+
+Example: `composer-app/index.html`
+
+```html
+<style>
+  @layer dx-tokens, user-tokens, tw-base, dx-base, tw-components, dx-components, utilities;
+</style>
+```
+
+## Resources
+
+- https://cube.fyi

package/src/styles/layers/anchored-overflow.css

@@ -0,0 +1,9 @@
+@layer utilities {
+  .overflow-anchored * {
+    overflow-anchor: none;
+  }
+
+  .overflow-anchor {
+    overflow-anchor: auto;
+  }
+}

package/src/styles/layers/animation.css

@@ -0,0 +1,17 @@
+@layer utilities {
+  @keyframes blink {
+    0%,
+    50%,
+    100% {
+      opacity: 1;
+    }
+    25%,
+    75% {
+      opacity: 0;
+    }
+  }
+
+  .animate-blink {
+    animation: blink 1s step-start infinite;
+  }
+}

package/src/styles/layers/attention.css

@@ -0,0 +1,8 @@
+@layer utilities {
+  /* If an element should apply attention-related color tokens, it should use this class. */
+  .attention-surface {
+    --surface-separator: transparent;
+    background-color: var(--dx-baseSurface);
+    border-color: var(--dx-separator);
+  }
+}

package/src/styles/layers/base.css

@@ -0,0 +1,25 @@
+@layer dx-base {
+  :root {
+    touch-action: pan-x pan-y;
+    font-synthesis: none;
+    font-variation-settings: 'wght' 400,
+    'slnt' 0;
+    scroll-padding-block-start: theme(spacing.14);
+    scroll-padding-block-end: theme(spacing.2);
+    @apply font-body;
+  }
+
+  button {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer dx-tokens {
+  html, html.dark, html .dark {
+    background-color: var(--dx-baseSurface);
+    --surface-bg: var(--dx-baseSurface);
+    color: var(--dx-baseText);
+    --surface-text: var(--dx-baseText);
+    --description-text: var(--dx-description);
+  }
+}