@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.ef1bc66f44",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -64,16 +64,16 @@
     "tailwindcss": "~3.4.1",
     "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.8.0",
-    "@dxos/util": "0.8.4-main.bc674ce",
-    "@dxos/node-std": "0.8.4-main.bc674ce"
+    "@dxos/node-std": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "devDependencies": {
     "@ch-ui/colors": "1.2.1",
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
-    "esbuild": "0.25.10",
+    "esbuild": "0.25.11",
     "vite": "7.1.9",
-    "@dxos/ui-types": "0.8.4-main.bc674ce"
+    "@dxos/ui-types": "0.8.4-main.ef1bc66f44"
   },
   "publishConfig": {
     "access": "public"

package/src/Tokens.stories.tsx

@@ -14,7 +14,7 @@ const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalA
   const [luminosity, alpha] = parseAlphaLuminosity(value);
 
   return (
-    <div className='shrink-0 is-40 flex flex-col rounded overflow-hidden'>
+    <div className='shrink-0 is-48 flex flex-col rounded overflow-hidden'>
       <dd className='aspect-video' style={{ background: `var(${variableName})` }}></dd>
       <dt className='text-xs bg-baseSurface grow pli-2 plb-1'>
         <p className='text-sm'>
@@ -26,7 +26,7 @@ const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalA
         {semantic.length > 0 && (
           <ul>
             {semantic.map(({ sememeName, conditionId }) => {
-              const sememeCondition = `${sememeName} / ${conditionId}`;
+              const sememeCondition = `${conditionId}:${sememeName}`;
               return <li key={sememeCondition}>{sememeCondition}</li>;
             })}
           </ul>

package/src/config/tailwind.ts

@@ -38,12 +38,13 @@ export const tailwindConfig = ({
       {
         // Generates is-card-default-width, is-card-min-width, etc.
         spacing: {
+          'prose-max-width': 'var(--dx-prose-max-width)',
+          'container-max-width': 'var(--dx-container-max-width)',
           'card-default-width': 'var(--dx-card-default-width)',
           'card-min-width': 'var(--dx-card-min-width)',
           'card-max-width': 'var(--dx-card-max-width)',
-          'container-max-width': 'var(--dx-container-max-width)',
-          'popover-max-width': 'var(--dx-popover-max-width)',
-          'prose-max-width': 'var(--dx-prose-max-width)',
+          'card-min-height': 'var(--dx-card-min-height)',
+          'card-max-height': 'var(--dx-card-max-height)',
         },
         backgroundImage: {
           'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',

package/src/config/tokens/index.ts

@@ -1,92 +1,6 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import { type TailwindAdapterConfig } from '@ch-ui/tailwind-tokens';
-import adapter from '@ch-ui/tailwind-tokens';
-import { type TokenSet } from '@ch-ui/tokens';
-
-import { aliasColors } from './alias-colors';
-import { lengthsFacet, maxSizesFacet } from './lengths';
-import { huePalettes, physicalColors } from './physical-colors';
-import { semanticColors } from './semantic-colors';
-import { systemAliases, systemSememes } from './sememes-system';
-
 export * from './sizes';
-
-export const hues = Object.keys(huePalettes);
-
-export const tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors,
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet,
-} satisfies TokenSet;
-
-const adapterConfig: TailwindAdapterConfig = {
-  colors: {
-    facet: 'colors',
-    disposition: 'overwrite',
-    tokenization: 'recursive',
-  },
-  borderWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringOffsetWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  outlineWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  spacing: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'keep-series',
-  },
-};
-
-export const userDefaultTokenSet = {
-  colors: {
-    physical: {
-      definitions: {
-        series: {
-          neutral: physicalColors.definitions!.series!.neutral,
-          primary: physicalColors.definitions!.series!.primary,
-        },
-        accompanyingSeries: physicalColors.definitions!.accompanyingSeries,
-      },
-      conditions: physicalColors.conditions,
-      series: {
-        neutral: physicalColors.series.neutral,
-        primary: physicalColors.series.primary,
-      },
-      namespace: physicalColors.namespace,
-    },
-    semantic: {
-      conditions: semanticColors.conditions,
-      sememes: systemSememes,
-      namespace: semanticColors.namespace,
-    },
-    alias: {
-      conditions: aliasColors.conditions,
-      aliases: systemAliases,
-      namespace: aliasColors.namespace,
-    },
-  },
-} satisfies TokenSet;
-
-export const tokensTailwindConfig = adapter(tokenSet, adapterConfig);
+export * from './tokens';

package/src/config/tokens/lengths.ts

@@ -5,7 +5,13 @@
 
 import { type Facet, type LinearPhysicalLayer } from '@ch-ui/tokens';
 
-import { cardDefaultInlineSize, cardMaxInlineSize, cardMinInlineSize } from './sizes';
+import {
+  cardDefaultInlineSize,
+  cardMaxBlockSize,
+  cardMaxInlineSize,
+  cardMinBlockSize,
+  cardMinInlineSize,
+} from './sizes';
 
 export const lengthsFacet = {
   physical: {
@@ -58,11 +64,13 @@ export const lengthsFacet = {
       noLine: { fine: ['focusOffset'] },
       hairLine: { fine: ['modalLine', 'landmarkLine', 'positionedLine', 'gridGap', 'gridFocusIndicatorWidth'] },
       thickLine: { fine: ['focusLine'], gridFocusStack: ['gridFocusIndicatorWidth'] },
-      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] }, // TODO(burdon): Remove need for this.
-      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
       inputFine: { fine: ['iconButtonPadding'] },
       inputCoarse: { coarse: ['iconButtonPadding'] },
+
+      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] },
+      // TODO(burdon): Remove?
+      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
+      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
     },
   },
 } satisfies Facet;
@@ -88,10 +96,11 @@ export const maxSizesFacet = {
     sememes: {
       'prose-max-width': { root: ['size', 50] },
       'container-max-width': { root: ['size', 50] },
-      'popover-max-width': { root: ['size', cardDefaultInlineSize] },
       'card-default-width': { root: ['size', cardDefaultInlineSize] },
       'card-min-width': { root: ['size', cardMinInlineSize] },
       'card-max-width': { root: ['size', cardMaxInlineSize] },
+      'card-min-height': { root: ['size', cardMinBlockSize] },
+      'card-max-height': { root: ['size', cardMaxBlockSize] },
     },
   },
 } satisfies Facet;

package/src/config/tokens/sememes-system.ts

@@ -113,9 +113,14 @@ export const systemSememes = {
   separatorBase: contrastCadence(3, 2),
   separatorGroup: contrastCadence(3, 2.5),
   separatorModal: contrastCadence(3, 3),
-
   subduedSeparator: contrastCadence(3, 1),
 
+  scrollbarTrack: contrastCadence(0),
+  scrollbarThumbSubdued: contrastCadence(1, 1),
+  scrollbarThumb: contrastCadence(2.5, 2.5),
+  scrollbarThumbHover: contrastCadence(3.5, 3.5),
+  scrollbarThumbActive: contrastCadence(4.5, 4.5),
+
   unAccent: {
     light: ['neutral', 400],
     dark: ['neutral', 400],

package/src/config/tokens/sizes.ts

@@ -8,3 +8,5 @@
 export const cardMinInlineSize = 18;
 export const cardDefaultInlineSize = 20; // 320px
 export const cardMaxInlineSize = 22;
+export const cardMinBlockSize = 18;
+export const cardMaxBlockSize = 30;

package/src/config/tokens/tokens.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TailwindAdapterConfig } from '@ch-ui/tailwind-tokens';
+import adapter from '@ch-ui/tailwind-tokens';
+import { type TokenSet } from '@ch-ui/tokens';
+
+import { aliasColors } from './alias-colors';
+import { lengthsFacet, maxSizesFacet } from './lengths';
+import { huePalettes, physicalColors } from './physical-colors';
+import { semanticColors } from './semantic-colors';
+import { systemAliases, systemSememes } from './sememes-system';
+
+export const hues = Object.keys(huePalettes);
+
+export const tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors,
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet,
+} satisfies TokenSet;
+
+const adapterConfig: TailwindAdapterConfig = {
+  colors: {
+    facet: 'colors',
+    disposition: 'overwrite',
+    tokenization: 'recursive',
+  },
+  borderWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  ringWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  ringOffsetWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  outlineWidth: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'omit-series',
+  },
+  spacing: {
+    facet: 'lengths',
+    disposition: 'extend',
+    tokenization: 'keep-series',
+  },
+};
+
+export const userDefaultTokenSet = {
+  colors: {
+    physical: {
+      definitions: {
+        series: {
+          neutral: physicalColors.definitions!.series!.neutral,
+          primary: physicalColors.definitions!.series!.primary,
+        },
+        accompanyingSeries: physicalColors.definitions!.accompanyingSeries,
+      },
+      conditions: physicalColors.conditions,
+      series: {
+        neutral: physicalColors.series.neutral,
+        primary: physicalColors.series.primary,
+      },
+      namespace: physicalColors.namespace,
+    },
+    semantic: {
+      conditions: semanticColors.conditions,
+      sememes: systemSememes,
+      namespace: semanticColors.namespace,
+    },
+    alias: {
+      conditions: aliasColors.conditions,
+      aliases: systemAliases,
+      namespace: aliasColors.namespace,
+    },
+  },
+} satisfies TokenSet;
+
+export const tokensTailwindConfig = adapter(tokenSet, adapterConfig);

package/src/index.ts

@@ -2,14 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type TailwindConfig, tailwindConfig } from './config';
+import { tailwindConfig } from './config';
 
+// TODO(burdon): Factor out public vs. internals.
 export { cardDefaultInlineSize, cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
 export * from './styles';
 export * from './types';
 export * from './util';
 
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+const { theme: tokens } = tailwindConfig({});
 
 export { tokens };
 

package/src/styles/components/dialog.ts

@@ -27,7 +27,7 @@ export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...et
 
 export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size }, ...etc) => {
   return mx(
-    '@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-2',
+    '@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-4',
     !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
     size && sizeMap[size],
     ...etc,
@@ -37,6 +37,12 @@ export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLa
 export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
   mx('dx-dialog__header flex items-center justify-between', ...etc);
 
+export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body flex flex-col gap-4 bs-full overflow-hidden', ...etc);
+
+export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center density-coarse', ...etc);
+
 export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
   mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
 
@@ -47,6 +53,8 @@ export const dialogTheme: Theme<DialogStyleProps> = {
   overlay: dialogOverlay,
   content: dialogContent,
   header: dialogHeader,
+  body: dialogBody,
+  actionbar: dialogActionBar,
   title: dialogTitle,
   description: dialogDescription,
 };

package/src/styles/components/index.ts

@@ -19,6 +19,7 @@ export * from './popover';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
+export * from './skeleton';
 export * from './status';
 export * from './tag';
 export * from './toast';

package/src/styles/components/main.ts

@@ -25,14 +25,10 @@ export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...et
 export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
   mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
 
-export const mainDrawer: ComponentFunction<MainStyleProps> = (_, ...etc) =>
-  mx('dx-main-drawer', '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,
-  drawer: mainDrawer,
   overlay: mainOverlay,
 };

package/src/styles/components/menu.ts

@@ -5,15 +5,7 @@
 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';
+import { dataDisabled, descriptionText, modalSurface, subduedFocus, surfaceShadow, surfaceZIndex } from '../fragments';
 
 export type MenuStyleProps = Partial<{
   constrainBlockSize: boolean;
@@ -29,7 +21,7 @@ export const menuContent: ComponentFunction<MenuStyleProps> = ({ elevation }, ..
     surfaceZIndex({ elevation, level: 'menu' }),
     surfaceShadow({ elevation: 'positioned' }),
     modalSurface,
-    popperMotion,
+    // popperMotion,
     ...etc,
   );
 

package/src/styles/components/popover.ts

@@ -15,9 +15,9 @@ export type PopoverStyleProps = Partial<{
 
 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',
+    'flex flex-col rounded-md',
+    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-hidden',
+    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-hidden',
     ...etc,
   );
 

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

@@ -1,43 +1,90 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type ScrollAreaStyleProps = {};
+export type ScrollAreaStyleProps = {
+  orientation?: AllowedAxis;
+  autoHide?: boolean;
+  margin?: boolean;
+  padding?: boolean;
+  thin?: boolean;
+  snap?: boolean;
+};
 
-export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = (_props, ...etc) =>
-  mx('__bs-full __is-full overflow-hidden', ...etc);
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation, margin, thin }, ...etc) =>
+  mx(
+    'overflow-hidden',
 
-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);
+    orientation === 'vertical' && 'group/scroll-v bs-full is-full min-bs-0',
+    orientation === 'horizontal' && 'group/scroll-h bs-full is-full min-is-0',
+    orientation === 'all' && 'group/scroll-all bs-full is-full min-bs-0 min-is-0',
+
+    // Balance left/right, top/bottom "margin" with scrollbar.
+    margin && [
+      orientation === 'vertical' && (thin ? 'pis-[4px]' : 'pis-[8px]'),
+      orientation === 'horizontal' && (thin ? 'pbs-[4px]' : 'pbs-[8px]'),
+      orientation === 'all' && (thin ? 'pis-[4px] pbs-[8px]' : 'pis-[8px] pbs-[8px]'),
+    ],
 
-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) =>
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, autoHide, padding, snap, thin },
+  ...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]",
+    'bs-full is-full',
+
+    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll',
+    orientation === 'all' && 'overflow-scroll',
+
+    thin
+      ? '[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]'
+      : '[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]',
+
+    // '[&::-webkit-scrollbar-thumb]:rounded-full',
+    '[&::-webkit-scrollbar-thumb]:bg-transparent',
+    '[&::-webkit-scrollbar-corner]:bg-transparent',
+
+    // TODO(burdon): Define token.
+    autoHide
+      ? [
+          orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-subduedSeparator',
+        ],
+
+    // TODO(burdon): Are scrollbars reserved on native devices?
+    padding && [
+      orientation === 'vertical' && 'pli-[4px]',
+      orientation === 'horizontal' && 'pbe-[4px]',
+      orientation === 'all' && 'pis-[4px] pbe-[4px]',
+    ],
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
     ...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/skeleton.ts

@@ -0,0 +1,23 @@
+//
+// 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-250 dark:bg-neutral-750 rounded-md',
+    variant === 'circle' && 'rounded-full',
+    variant === 'text' && 'rounded',
+    ...etc,
+  );
+
+export const skeletonTheme: Theme<SkeletonStyleProps> = {
+  root: skeletonRoot,
+};

package/src/styles/components/toolbar.ts

@@ -2,21 +2,28 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 import { textBlockWidth } from '../fragments';
 
-export type ToolbarStyleProps = Partial<{ layoutManaged: boolean; disabled: boolean }>;
+export type ToolbarStyleProps = Partial<{
+  density: Density;
+  disabled: boolean;
+  layoutManaged: 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);
+  'is-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none contain-layout';
+
+export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx(
+    'bg-toolbarSurface dx-toolbar',
+    density === 'coarse' && 'bs-[var(--rail-size)] !pli-3',
+    disabled && '*:opacity-20',
+    !layoutManaged && toolbarLayout,
+    ...etc,
+  );
 };
 
 export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {

package/src/styles/components/tooltip.ts

@@ -5,7 +5,7 @@
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { chromeText, popperMotion, surfaceShadow, surfaceZIndex } from '../fragments';
+import { chromeText, surfaceShadow, surfaceZIndex } from '../fragments';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;
@@ -14,7 +14,7 @@ export type TooltipStyleProps = Partial<{
 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,
+    // popperMotion,
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'tooltip' }),
     chromeText,

package/src/styles/fragments/size.ts

@@ -8,7 +8,7 @@ import { mx } from '../../util';
 
 export const sizeWidthMap = new Map<Size, string>([
   [0, 'is-0'],
-  ['px', 'is-px'],
+  ['px', 'is-px'], // 1px
   [0.5, 'is-0.5'],
   [1, 'is-1'],
   [1.5, 'is-1.5'],
@@ -46,7 +46,7 @@ export const sizeWidthMap = new Map<Size, string>([
 
 export const sizeHeightMap = new Map<Size, string>([
   [0, 'bs-0'],
-  ['px', 'bs-px'],
+  ['px', 'bs-px'], // 1px
   [0.5, 'bs-0.5'],
   [1, 'bs-1'],
   [1.5, 'bs-1.5'],

package/src/styles/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './fragments';
 export * from './components';
+export * from './fragments';
+export * from './primitives';
 export * from './theme';