@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-staging.ac66bdf99f

package/src/plugins/esbuild-plugin.ts

@@ -1,65 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { cp, mkdir } from 'node:fs/promises';
-import { basename, join, relative, resolve } from 'node:path';
-
-import autoprefixer from 'autoprefixer';
-import type { Plugin } from 'esbuild';
-import stylePlugin from 'esbuild-style-plugin';
-import tailwindcss from 'tailwindcss';
-import type { ThemeConfig } from 'tailwindcss/types/config';
-
-import { tailwindConfig } from '../config';
-
-import { resolveKnownPeers } from './resolveContent';
-
-export const ThemePlugins = async (options: {
-  content: string[];
-  root?: string;
-  outdir: string;
-  extensions?: Partial<ThemeConfig>[];
-}): Promise<Plugin[]> => {
-  const resolvedContent = options.root ? await resolveKnownPeers(options.content, options.root) : options.content;
-  return [
-    // TODO(thure): This really shouldn’t be this way, but after hours of searching for a reasonable way to do this I came up empty. The prior art I found was mainly this thread, though it’s only tangentially related: https://github.com/evanw/esbuild/issues/800#issuecomment-786151076
-    {
-      name: 'esbuild-plugin-dxos-ui-theme-resolvers',
-      setup: async (build) => {
-        const fontsDir = join(options.outdir, 'node_modules/@dxos/ui-theme/fonts');
-        try {
-          await mkdir(fontsDir);
-        } catch {}
-        build.onResolve({ filter: /\.woff2$/ }, async (args) => {
-          const depPath = resolve(args.resolveDir, args.path);
-          const destPath = join(fontsDir, basename(args.path));
-          try {
-            await cp(depPath, destPath);
-          } catch {}
-          return {
-            path: `./${relative(options.outdir, join('fonts', basename(args.path)))}`,
-            external: true,
-          };
-        });
-      },
-    },
-    // TODO(thure): theme.css must be part of entryPoints in order to be processed with `stylePlugin`, but this should not be necessary. ESBuild would not load theme.css using stylePlugin if referenced within index.ts(x) as with the Vite plugin.
-    // TODO(thure): Note also that because it is an entryPoint, the developer has to reference the built theme.css from `index.html`, which is inflexible and possibly inconvenient.
-    // TODO(zhenyasav): autoprefixer version misalignment with esbuild-style-plugin requires the `as any`.
-    stylePlugin({
-      postcss: {
-        plugins: [
-          tailwindcss(
-            tailwindConfig({
-              env: process.env.NODE_ENV,
-              content: resolvedContent,
-              extensions: options.extensions,
-            }),
-          ),
-          autoprefixer as any,
-        ],
-      },
-    }),
-  ];
-};

package/src/plugins/plugin.ts

@@ -1,130 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-/* eslint-disable no-console */
-
-import { readFile, writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
-
-import chTokens from '@ch-ui/tokens/postcss';
-import autoprefixer from 'autoprefixer';
-import postcss from 'postcss';
-import postcssImport from 'postcss-import';
-import tailwindcss from 'tailwindcss';
-import nesting from 'tailwindcss/nesting/index.js';
-import { type ThemeConfig } from 'tailwindcss/types/config';
-import { type Plugin, type UserConfig } from 'vite';
-
-import { tailwindConfig, tokenSet } from '../config';
-
-import { resolveKnownPeers } from './resolveContent';
-
-export type ThemePluginOptions = {
-  jit?: boolean;
-  cssPath?: string;
-  srcCssPath?: string;
-  virtualFileId?: string;
-  content?: string[];
-  root?: string;
-  verbose?: boolean;
-  extensions?: Partial<ThemeConfig>[];
-};
-
-let environment!: string;
-
-/**
- * Configures PostCSS pipeline for theme.css processing.
- * @param environment - The current environment (development/production).
- * @param config - Theme plugin configuration options.
- * @returns Array of PostCSS plugins.
- */
-const createPostCSSPipeline = (environment: string, config: ThemePluginOptions): postcss.Transformer[] => [
-  // Handles @import statements in CSS.
-  postcssImport(),
-  // Processes CSS nesting syntax.
-  nesting,
-  // Processes custom design tokens.
-  chTokens({ config: () => tokenSet }),
-  // Processes Tailwind directives and utilities.
-  tailwindcss(
-    tailwindConfig({
-      env: environment,
-      content: config.content,
-      extensions: config.extensions,
-    }),
-  ),
-  // Adds vendor prefixes.
-  autoprefixer as any,
-];
-
-/**
- * Vite plugin to configure theme.
- */
-export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
-  const config: ThemePluginOptions = {
-    jit: true,
-    cssPath: resolve(import.meta.dirname, '../theme.css'),
-    srcCssPath: resolve(import.meta.dirname, '../../../../src/theme.css'),
-    virtualFileId: '@dxos-theme',
-    ...options,
-  };
-
-  if (process.env.DEBUG) {
-    console.log('ThemePlugin config:\n', JSON.stringify(config, null, 2));
-  }
-
-  return {
-    name: 'vite-plugin-dxos-ui-theme',
-    config: async ({ root }, env): Promise<UserConfig> => {
-      environment = env.mode;
-      const content = root ? await resolveKnownPeers(config.content ?? [], root) : config.content;
-      if (options.verbose) {
-        console.log('content', content);
-      }
-
-      return {
-        css: {
-          postcss: {
-            plugins: createPostCSSPipeline(environment, config),
-          },
-        },
-      };
-    },
-    resolveId: (id) => {
-      if (id === config.virtualFileId) {
-        return config.cssPath;
-      }
-    },
-    handleHotUpdate: async ({ file, server }) => {
-      // NOTE(ZaymonFC): Changes to *any* CSS file triggers this step. We might want to refine this.
-      //   Ignore the output file to prevent infinite loops.
-      if (file.endsWith('.css') && file !== config.cssPath) {
-        try {
-          // Get reference to the theme virtual module.
-          const module = server.moduleGraph.getModuleById(config.cssPath!);
-          if (module) {
-            // Read the source theme file that imports all other CSS files.
-            const css = await readFile(config.srcCssPath!, 'utf8');
-            const processor = postcss(createPostCSSPipeline(environment, config));
-            console.log('[theme-plugin] Reprocessing CSS with PostCSS.');
-            const result = await processor.process(css, {
-              from: config.srcCssPath,
-              to: config.cssPath,
-            });
-
-            if (result.css) {
-              await writeFile(config.cssPath!, result.css);
-              // Return the module to trigger HMR update.
-              return [];
-            }
-          }
-        } catch (err) {
-          console.error('[theme-plugin] Error:', err);
-        }
-      }
-    },
-  };
-};
-
-ThemePlugin.foo = 'bar';

package/src/plugins/resolveContent.ts

@@ -1,51 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { promisify } from 'node:util';
-
-import Glob from 'glob';
-
-const glob = promisify(Glob.glob);
-
-// TODO(burdon): Comment.
-const knownIndirectPeers = [
-  '@dxos/devtools',
-  '@dxos/react-*',
-  '@dxos/react-ui-*',
-  // TODO(thure): glob v7 runs out of memory if we do a `**` search, and this is (hopefully) the only L3 content package; find a better solution.
-  '@dxos/react-ui-table/node_modules/@dxos/react-ui-searchlist',
-  '@dxos/shell',
-];
-
-const knownDirectPeers = ['@dxos/plugin-*', ...knownIndirectPeers];
-
-const packageNamePattern = /.*node_modules\/(.+?)$/;
-const packageName = (path: string) => path.match(packageNamePattern)?.[1];
-
-const flatten = (acc: string[], group: string[]) => [...acc, ...group];
-const dedupe = (acc: Record<string, string>, path: string) => {
-  const name = packageName(path);
-  if (name && !acc[name]) {
-    acc[name] = path;
-  }
-
-  return acc;
-};
-
-export const resolveKnownPeers = async (content: string[], cwd: string): Promise<string[]> => {
-  const globOptions = { cwd, absolute: true };
-
-  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));
-
-  // NOTE(thure): With glob v7, JS runs out of memory if `**` is used, so this limits the search to @dxos/plugin-*/node_modules
-  const indirectPeers = await Promise.all(
-    knownIndirectPeers.map((peer) => glob(`./node_modules/@dxos/plugin-*/node_modules/${peer}`, globOptions)),
-  );
-
-  const knownPeerContent = Object.values(
-    indirectPeers.reduce(flatten, []).reduce(dedupe, directPeers.reduce(flatten, []).reduce(dedupe, {})),
-  ).map((value) => `${value}/dist/lib/**/*.mjs`);
-
-  return [...content, ...knownPeerContent];
-};

package/src/styles/components/README.md

@@ -1,6 +0,0 @@
-# react-ui-theme
-
-References: 
-- https://tailwindcss-radix.vercel.app
-- https://github.com/ecklf/tailwindcss-radix
-- https://www.radix-ui.com/primitives/docs/components

package/src/styles/components/anchored-overflow.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type AnchoredOverflowStyleProps = {};
-
-export const anchoredOverflowRoot: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
-  mx('overflow-anchored overflow-auto', ...etc);
-
-export const anchoredOverflowAnchor: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
-  mx('overflow-anchor is-px bs-px', ...etc);
-
-export const anchoredOverflowTheme: Theme<AnchoredOverflowStyleProps> = {
-  root: anchoredOverflowRoot,
-  anchor: anchoredOverflowAnchor,
-};

package/src/styles/components/button.ts

@@ -1,48 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-import { ghostHover } from '../fragments';
-
-export const primaryButtonColors =
-  'text-accentSurfaceText bg-accentSurface hover:bg-accentSurfaceHover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
-
-export const staticDefaultButtonColors = 'bg-inputSurface';
-
-export const defaultButtonColors = mx(
-  staticDefaultButtonColors,
-  'data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
-);
-
-export const ghostButtonColors = mx(
-  ghostHover,
-  'hover:text-inherit data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
-);
-
-export type ButtonStyleProps = Partial<{
-  inGroup?: boolean;
-  textWrap?: boolean;
-  density: Density;
-  elevation: Elevation;
-  disabled: boolean;
-  variant: 'default' | 'primary' | 'ghost' | 'outline';
-}>;
-
-export const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
-  return mx('dx-button dx-focus-ring group max-is-full [&_span]:truncate', ...etc);
-};
-
-export const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
-  return mx(
-    'inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
-    ...etc,
-  );
-};
-
-export const buttonTheme: Theme<ButtonStyleProps> = {
-  root: buttonRoot,
-  group: buttonGroup,
-};

package/src/styles/components/icon.ts

@@ -1,19 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-import { getSize } from '../fragments';
-
-export type IconStyleProps = {
-  size?: Size;
-};
-
-export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) =>
-  mx('shrink-0 bs-[1em] is-[1em] text-[var(--icons-color,currentColor)]', size && getSize(size), etc);
-
-export const iconTheme: Theme<IconStyleProps> = {
-  root: iconRoot,
-};

package/src/styles/components/input.ts

@@ -1,177 +0,0 @@
-//
-// 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/scroll-area.ts

@@ -1,43 +0,0 @@
-//
-// 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/toolbar.ts

@@ -1,29 +0,0 @@
-//
-// 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/fragments/density.ts

@@ -1,17 +0,0 @@
-//
-// 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

@@ -1,8 +0,0 @@
-//
-// 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/focus.ts

@@ -1,16 +0,0 @@
-//
-// 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

@@ -1,12 +0,0 @@
-//
-// 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

@@ -1,25 +0,0 @@
-//
-// 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]';