@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/src/styles/components/popover.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { focusRing, surfaceElevation, groupArrow, modalSurface } from '../fragments';
+
+export type PopoverStyleProps = Partial<{
+  constrainInline?: boolean;
+  constrainBlock: boolean;
+}>;
+
+export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainInline, constrainBlock }, ...etc) =>
+  mx(
+    'p-1 rounded-lg',
+    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-x-auto',
+    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-y-auto',
+    ...etc,
+  );
+
+export const popoverContent: ComponentFunction<PopoverStyleProps> = (_props, ...etc) =>
+  mx('z-[30] rounded-lg', modalSurface, surfaceElevation({ elevation: 'group' }), focusRing, ...etc);
+
+export const popoverArrow: ComponentFunction<PopoverStyleProps> = (_props, ...etc) => mx(groupArrow, ...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]:surface-separator rounded-full',
+    '[&>div]:surface-unAccent sm:[&[data-variant=coarse]>div]:surface-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,55 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import {
+  arrow,
+  blockSeparator,
+  modalSurface,
+  ghostHighlighted,
+  surfaceElevation,
+  getSize,
+  separatorBorderColor,
+} from '../fragments';
+
+export type SelectStyleProps = Partial<{
+  elevation: Elevation;
+}>;
+
+export const selectContent: ComponentFunction<SelectStyleProps> = ({ elevation = 'chrome' }, ...etc) => {
+  return mx('p-1 z-[50] rounded', modalSurface, surfaceElevation({ elevation }), ...etc);
+};
+
+export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx(
+    'relative flex items-center pis-6 pie-3 plb-1',
+    'text-base leading-none rounded-sm select-none outline-none',
+    ghostHighlighted,
+    ...etc,
+  );
+
+export const selectItemIndicator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx('absolute inline-start-0 is-6 inline-flex items-center justify-center', ...etc);
+
+export const selectArrow: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(arrow, ...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,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton,
+  triggerIcon: selectTriggerIcon,
+};

package/src/styles/components/separator.ts

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

package/src/styles/components/status.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type StatusStyleProps = {
+  indeterminate?: boolean;
+};
+
+// TODO(burdon): How to customize color without requiring multiple classes.
+export const statusRoot: ComponentFunction<StatusStyleProps> = (_props, ...etc) =>
+  mx('relative block bs-1 overflow-hidden rounded-full bg-primary-400/20', ...etc);
+
+export const statusBar: ComponentFunction<StatusStyleProps> = ({ indeterminate }, ...etc) =>
+  mx(
+    'absolute block inline-start-0 inset-block-0 rounded-full bg-primary-400',
+    indeterminate && 'animate-progress-indeterminate',
+    ...etc,
+  );
+
+export const statusTheme: Theme<StatusStyleProps> = {
+  root: statusRoot,
+  bar: statusBar,
+};

package/src/styles/components/tag.ts

@@ -0,0 +1,49 @@
+//
+// 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;
+};
+
+const paletteColorMap: Record<Exclude<TagStyleProps['palette'], undefined>, string> = {
+  neutral: 'surface-separator text-neutral-800 dark:text-neutral-150',
+  red: 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-150',
+  orange: 'bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-150',
+  amber: 'bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-150',
+  yellow: 'bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-150',
+  lime: 'bg-lime-200 text-lime-800 dark:bg-lime-700 dark:text-lime-150',
+  green: 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-150',
+  emerald: 'bg-emerald-200 text-emerald-800 dark:bg-emerald-700 dark:text-emerald-150',
+  teal: 'bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-150',
+  cyan: 'bg-cyan-200 text-cyan-800 dark:bg-cyan-700 dark:text-cyan-150',
+  sky: 'bg-sky-200 text-sky-800 dark:bg-sky-700 dark:text-sky-150',
+  blue: 'bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-150',
+  indigo: 'bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-150',
+  violet: 'bg-violet-200 text-violet-800 dark:bg-violet-700 dark:text-violet-150',
+  purple: 'bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-150',
+  fuchsia: 'bg-fuchsia-200 text-fuchsia-800 dark:bg-fuchsia-700 dark:text-fuchsia-150',
+  pink: 'bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-150',
+  rose: 'bg-rose-200 text-rose-800 dark:bg-rose-700 dark:text-rose-150',
+  info: 'bg-info-200 text-info-800 dark:bg-info-700 dark:text-info-150',
+  success: 'bg-success-200 text-success-800 dark:bg-success-700 dark:text-success-150',
+  warning: 'bg-warning-200 text-warning-800 dark:bg-warning-700 dark:text-warning-150',
+  error: 'bg-error-200 text-error-800 dark:bg-error-700 dark:text-error-150',
+};
+
+export const tagRoot: ComponentFunction<TagStyleProps> = ({ palette = 'neutral' }, ...etc) =>
+  mx('text-xs font-semibold pli-2 plb-0.5 rounded cursor-default', paletteColorMap[palette], ...etc);
+
+export const tagTheme: Theme<TagStyleProps> = {
+  root: tagRoot,
+};

package/src/styles/components/toast.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { descriptionText, focusRing, modalSurface, surfaceElevation } from '../fragments';
+
+export type ToastStyleProps = Partial<{
+  srOnly: boolean;
+}>;
+
+export const toastViewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    'z-[70] fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg flex flex-col gap-2',
+    ...etc,
+  );
+
+export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    'rounded-lg flex p-2 gap-2',
+    modalSurface,
+    surfaceElevation({ elevation: 'chrome' }),
+    '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 text-md 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,17 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type ToolbarStyleProps = Partial<{}>;
+
+export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = (_props, ...etc) => {
+  return mx('flex items-center gap-2 is-full', ...etc);
+};
+
+export const toolbarTheme: Theme<ToolbarStyleProps> = {
+  root: toolbarRoot,
+};

package/src/styles/components/tooltip.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+import { arrow, chromeText, surfaceElevation, modalSurface, popperMotion } from '../fragments';
+
+export type TooltipStyleProps = {};
+
+export const tooltipContent: ComponentFunction<TooltipStyleProps> = (_props, ...etc) =>
+  mx(
+    'inline-flex items-center rounded-md plb-2 pli-3 max-is-64',
+    modalSurface,
+    popperMotion,
+    surfaceElevation({ elevation: 'group' }),
+    chromeText,
+    ...etc,
+  );
+
+export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) => mx(arrow, ...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', 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/arrow.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const arrow = 'fill-[--surface-bg] dark:fill-[--surface-bg]';
+
+/**
+ * @deprecated With the implementation of the surface-bg variable, this is now obsolete.
+ */
+export const groupArrow = 'fill-[--surface-bg] dark:fill-[--surface-bg]';

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/dimensions.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const textBlockWidth = 'mli-auto max-is-[60rem]';

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,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment, type Elevation } from '@dxos/react-ui-types';
+
+/**
+ * @deprecated
+ */
+export const contentElevation: ComponentFragment<{ elevation?: Elevation }> = (_) => ['shadow-none'];
+
+export const surfaceElevation: ComponentFragment<{ elevation?: Elevation }> = ({ elevation }) => [
+  elevation === 'group' ? 'shadow' : elevation === 'chrome' ? 'shadow-lg' : 'shadow-none',
+];

package/src/styles/fragments/focus.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const focusRing =
+  'focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-350 focus-visible:ring-offset-white dark:focus-visible:ring-primary-450 dark:focus-visible:ring-offset-black';
+
+// TODO(burdon): Requires container to have m-1.
+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-10 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 { surfaceElevation } from './elevation';
+
+export const group: ComponentFragment<{ elevation?: Elevation }> = (props) => [
+  props.elevation === 'base' ? 'bg-transparent border separator-separator' : 'surface-modal',
+  surfaceElevation(props),
+];

package/src/styles/fragments/hover.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/**
+ * @deprecated
+ */
+export const hoverColors = 'transition-colors duration-100 linear hover:surface-hover';
+
+export const ghostHover = 'hover:surface-hover';
+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 hoverableFocusedKeyboardControls = 'focus-visible:[--controls-opacity:1]';
+export const hoverableFocusedWithinControls = 'focus-within:[--controls-opacity:1]';
+export const hoverableFocusedControls = 'focus:[--controls-opacity:1]';
+export const staticHoverableControls = 'hover-hover:[--controls-opacity:1]';
+export const hoverableOpenControlItem = 'hover-hover:aria-[expanded=true]:[--controls-opacity:1]';
+
+export const hoverableControlItem = 'opacity-[--controls-opacity]';

package/src/styles/fragments/hue.ts

@@ -0,0 +1,151 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Theme } from '@dxos/react-ui-types';
+
+import { type HuePalette, physicalColors } from '../../config';
+
+export type HueToken = {
+  text: string;
+  textHover: string;
+  fill: string;
+  cursorLightValue: string;
+  cursorDarkValue: string;
+  // highlightLightValue: string;
+  // highlightDarkValue: string;
+};
+
+const hueTokenValueShades = {
+  cursorLightValue: 400,
+  cursorDarkValue: 300,
+  // highlightLightValue: 50,
+  // highlightDarkValue: 900,
+};
+
+export const hueTokenThemes: Record<HuePalette, Pick<HueToken, 'text' | 'textHover' | 'fill'>> = {
+  red: {
+    text: 'text-red-550 dark:text-red-300',
+    textHover: 'hover:text-red-450 focus-visible:text-red-450 dark:hover:text-red-200 dark:focus-visible:text-red-200',
+    fill: 'fill-red-500/60',
+  },
+  orange: {
+    text: 'text-orange-550 dark:text-orange-300',
+    textHover:
+      'hover:text-orange-450 focus-visible:text-orange-450 dark:hover:text-orange-200 dark:focus-visible:text-orange-200',
+    fill: 'fill-orange-500/60',
+  },
+  amber: {
+    text: 'text-amber-550 dark:text-amber-300',
+    textHover:
+      'hover:text-amber-450 focus-visible:text-amber-450 dark:hover:text-amber-200 dark:focus-visible:text-amber-200',
+    fill: 'fill-amber-500/60',
+  },
+  yellow: {
+    text: 'text-yellow-550 dark:text-yellow-300',
+    textHover:
+      'hover:text-yellow-450 focus-visible:text-yellow-450 dark:hover:text-yellow-200 dark:focus-visible:text-yellow-200',
+    fill: 'fill-yellow-500/60',
+  },
+  lime: {
+    text: 'text-lime-550 dark:text-lime-300',
+    textHover:
+      'hover:text-lime-450 focus-visible:text-lime-450 dark:hover:text-lime-200 dark:focus-visible:text-lime-200',
+    fill: 'fill-lime-500/60',
+  },
+  green: {
+    text: 'text-green-550 dark:text-green-300',
+    textHover:
+      'hover:text-green-450 focus-visible:text-green-450 dark:hover:text-green-200 dark:focus-visible:text-green-200',
+    fill: 'fill-green-500/60',
+  },
+  emerald: {
+    text: 'text-emerald-550 dark:text-emerald-300',
+    textHover:
+      'hover:text-emerald-450 focus-visible:text-emerald-450 dark:hover:text-emerald-200 dark:focus-visible:text-emerald-200',
+    fill: 'fill-emerald-500/60',
+  },
+  teal: {
+    text: 'text-teal-550 dark:text-teal-300',
+    textHover:
+      'hover:text-teal-450 focus-visible:text-teal-450 dark:hover:text-teal-200 dark:focus-visible:text-teal-200',
+    fill: 'fill-teal-500/60',
+  },
+  cyan: {
+    text: 'text-cyan-550 dark:text-cyan-300',
+    textHover:
+      'hover:text-cyan-450 focus-visible:text-cyan-450 dark:hover:text-cyan-200 dark:focus-visible:text-cyan-200',
+    fill: 'fill-cyan-500/60',
+  },
+  sky: {
+    text: 'text-sky-550 dark:text-sky-300',
+    textHover: 'hover:text-sky-450 focus-visible:text-sky-450 dark:hover:text-sky-200 dark:focus-visible:text-sky-200',
+    fill: 'fill-sky-500/60',
+  },
+  blue: {
+    text: 'text-blue-550 dark:text-blue-300',
+    textHover:
+      'hover:text-blue-450 focus-visible:text-blue-450 dark:hover:text-blue-200 dark:focus-visible:text-blue-200',
+    fill: 'fill-blue-500/60',
+  },
+  indigo: {
+    text: 'text-indigo-550 dark:text-indigo-300',
+    textHover:
+      'hover:text-indigo-450 focus-visible:text-indigo-450 dark:hover:text-indigo-200 dark:focus-visible:text-indigo-200',
+    fill: 'fill-indigo-500/60',
+  },
+  violet: {
+    text: 'text-violet-550 dark:text-violet-300',
+    textHover:
+      'hover:text-violet-450 focus-visible:text-violet-450 dark:hover:text-violet-200 dark:focus-visible:text-violet-200',
+    fill: 'fill-violet-500/60',
+  },
+  purple: {
+    text: 'text-purple-550 dark:text-purple-300',
+    textHover:
+      'hover:text-purple-450 focus-visible:text-purple-450 dark:hover:text-purple-200 dark:focus-visible:text-purple-200',
+    fill: 'fill-purple-500/60',
+  },
+  fuchsia: {
+    text: 'text-fuchsia-550 dark:text-fuchsia-300',
+    textHover:
+      'hover:text-fuchsia-450 focus-visible:text-fuchsia-450 dark:hover:text-fuchsia-200 dark:focus-visible:text-fuchsia-200',
+    fill: 'fill-fuchsia-500/60',
+  },
+  pink: {
+    text: 'text-pink-550 dark:text-pink-300',
+    textHover:
+      'hover:text-pink-450 focus-visible:text-pink-450 dark:hover:text-pink-200 dark:focus-visible:text-pink-200',
+    fill: 'fill-pink-500/60',
+  },
+  rose: {
+    text: 'text-rose-550 dark:text-rose-300',
+    textHover:
+      'hover:text-rose-450 focus-visible:text-rose-450 dark:hover:text-rose-200 dark:focus-visible:text-rose-200',
+    fill: 'fill-rose-500/60',
+  },
+};
+
+export const hueTokens: Record<HuePalette, HueToken> = Object.keys(hueTokenThemes).reduce(
+  (acc: Record<string, HueToken>, huePalette) => {
+    acc[huePalette] = {
+      ...hueTokenThemes[huePalette as HuePalette],
+      cursorDarkValue: `${physicalColors[huePalette][hueTokenValueShades.cursorDarkValue]}88`,
+      cursorLightValue: physicalColors[huePalette][hueTokenValueShades.cursorLightValue],
+      // highlightDarkValue: physicalColors[huePalette][hueTokenValueShades.highlightDarkValue],
+      // highlightLightValue: physicalColors[huePalette][hueTokenValueShades.highlightLightValue],
+    };
+    return acc;
+  },
+  {},
+);
+
+export type HueStyleProps = {
+  hue: HuePalette;
+};
+
+export const hueTheme: Theme<Record<string, any>> = {
+  text: ({ hue }) => hueTokenThemes[hue as HuePalette].text,
+  textHover: ({ hue }) => hueTokenThemes[hue as HuePalette].textHover,
+  fill: ({ hue }) => hueTokenThemes[hue as HuePalette].fill,
+};

package/src/styles/fragments/index.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './arrow';
+export * from './density';
+export * from './dimensions';
+export * from './disabled';
+export * from './elevation';
+export * from './focus';
+export * from './group';
+export * from './hover';
+export * from './hue';
+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';