@dxos/ui-theme 0.0.0

package/src/styles/layers/tag.css

@@ -0,0 +1,132 @@
+@layer dx-tokens {
+  :root {
+    --dx-tag-padding-block: 0.125rem;
+  }
+}
+
+@layer dx-components {
+  .dx-tag {
+    @apply inline-block text-xs font-semibold m-0.5 pli-1 rounded-sm cursor-default truncate;
+    padding-block: var(--dx-tag-padding-block);
+    user-select: none;
+  }
+
+  .dx-tag--anchor {
+    /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
+    @apply inline cursor-pointer -mli-[4px] pli-[3px] plb-0.5 border border-separator rounded-sm bg-groupSurface transition-colors;
+
+    &:hover {
+      @apply bg-hoverSurface;
+    }
+  }
+
+  .dx-tag[data-hue='neutral'],
+  .dx-tag--neutral {
+    @apply bg-separator text-neutral-700 dark:text-neutral-150;
+  }
+
+  .dx-tag[data-hue='red'],
+  .dx-tag--red {
+    @apply bg-redSurface text-redSurfaceText;
+  }
+
+  .dx-tag[data-hue='orange'],
+  .dx-tag--orange {
+    @apply bg-orangeSurface text-orangeSurfaceText;
+  }
+
+  .dx-tag[data-hue='amber'],
+  .dx-tag--amber {
+    @apply bg-amberSurface text-amberSurfaceText;
+  }
+
+  .dx-tag[data-hue='yellow'],
+  .dx-tag--yellow {
+    @apply bg-yellowSurface text-yellowSurfaceText;
+  }
+
+  .dx-tag[data-hue='lime'],
+  .dx-tag--lime {
+    @apply bg-limeSurface text-limeSurfaceText;
+  }
+
+  .dx-tag[data-hue='green'],
+  .dx-tag--green {
+    @apply bg-greenSurface text-greenSurfaceText;
+  }
+
+  .dx-tag[data-hue='emerald'],
+  .dx-tag--emerald {
+    @apply bg-emeraldSurface text-emeraldSurfaceText;
+  }
+
+  .dx-tag[data-hue='teal'],
+  .dx-tag--teal {
+    @apply bg-tealSurface text-tealSurfaceText;
+  }
+
+  .dx-tag[data-hue='cyan'],
+  .dx-tag--cyan {
+    @apply bg-cyanSurface text-cyanSurfaceText;
+  }
+
+  .dx-tag[data-hue='sky'],
+  .dx-tag--sky {
+    @apply bg-skySurface text-skySurfaceText;
+  }
+
+  .dx-tag[data-hue='blue'],
+  .dx-tag--blue {
+    @apply bg-blueSurface text-blueSurfaceText;
+  }
+
+  .dx-tag[data-hue='indigo'],
+  .dx-tag--indigo {
+    @apply bg-indigoSurface text-indigoSurfaceText;
+  }
+
+  .dx-tag[data-hue='violet'],
+  .dx-tag--violet {
+    @apply bg-violetSurface text-violetSurfaceText;
+  }
+
+  .dx-tag[data-hue='purple'],
+  .dx-tag--purple {
+    @apply bg-purpleSurface text-purpleSurfaceText;
+  }
+
+  .dx-tag[data-hue='fuchsia'],
+  .dx-tag--fuchsia {
+    @apply bg-fuchsiaSurface text-fuchsiaSurfaceText;
+  }
+
+  .dx-tag[data-hue='pink'],
+  .dx-tag--pink {
+    @apply bg-pinkSurface text-pinkSurfaceText;
+  }
+
+  .dx-tag[data-hue='rose'],
+  .dx-tag--rose {
+    @apply bg-roseSurface text-roseSurfaceText;
+  }
+
+  .dx-tag[data-hue='info'],
+  .dx-tag--info {
+    @apply bg-cyanSurface text-cyanSurfaceText;
+  }
+
+  .dx-tag[data-hue='success'],
+  .dx-tag--success {
+    @apply bg-emeraldSurface text-emeraldSurfaceText;
+  }
+
+  .dx-tag[data-hue='warning'],
+  .dx-tag--warning {
+    @apply bg-amberSurface text-amberSurfaceText;
+  }
+
+  .dx-tag[data-hue='error'],
+  .dx-tag--error {
+    @apply bg-roseSurface text-roseSurfaceText;
+  }
+}

package/src/styles/layers/tldraw.css

@@ -0,0 +1,91 @@
+@layer dx-components {
+
+  .tl-container.tl-theme__light {
+    /* Converted */
+    /* General */
+    --color-accent: var(--color-accent);
+    --color-background: var(--surface-bg); /* Main background. */
+
+    /* Panels *
+    --color-panel: theme(colors.neutral.50);
+    --color-divider: theme(colors.neutral.75); /* Separator light. */
+    --color-panel-contrast: var(--dx-separator);
+    --color-panel-overlay: rgba(255, 255, 255, 0.82);
+
+    /* Unmodified.
+    --color-brush-fill: rgba(144, 144, 144, 0.102);
+    --color-brush-stroke: rgba(144, 144, 144, 0.251);
+    --color-grid: rgba(144, 144, 144, 0.902);
+    --color-low: rgb(237, 240, 242);
+    --color-culled: rgb(235, 238, 240);
+    --color-muted-0: rgba(0, 0, 0, 0.02);
+    --color-muted-1: rgba(0, 0, 0, 0.1);
+    --color-muted-2: rgba(0, 0, 0, 0.035);
+    --color-hint: rgba(0, 0, 0, 0.055);
+    --color-overlay: rgba(0, 0, 0, 0.2);
+    --color-focus: #004094;
+    --color-selected: #2f80ed;
+    --color-selected-contrast: #ffffff;
+    --color-selection-fill: #1e90ff06;
+    --color-selection-stroke: #2f80ed;
+    --color-text-0: #1d1d1d;
+    --color-text-1: #2d2d2d;
+    --color-text-2: #5f6369;
+    --color-text-3: #b6b7ba;
+    --color-primary: #2f80ed;
+    --color-warn: #d10b0b;
+    --color-text: #000000;
+    --color-laser: #ff0000;
+    --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.22), 0px 1px 3px rgba(0, 0, 0, 0.09);
+    --shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.24), 0px 2px 6px rgba(0, 0, 0, 0.1),
+      inset 0px 0px 0px 1px var(--color-panel-contrast);
+    --shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 2px 6px rgba(0, 0, 0, 0.14),
+      inset 0px 0px 0px 1px var(--color-panel-contrast);
+    --shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.16), 0px 5px 4px rgba(0, 0, 0, 0.16), 0px 2px 16px rgba(0, 0, 0, 0.06),
+      inset 0px 0px 0px 1px var(--color-panel-contrast);
+  */
+  }
+
+  .tl-container.tl-theme__dark {
+    /* Converted */
+    /* General */
+    --color-accent: var(--color-accent);
+    --color-background: var(--surface-bg);
+
+    /* Panels */
+    --color-divider: var(--dx-separator); /* Separator dark. */
+    --color-panel: var(--dx-attention);
+    --color-panel-contrast: var(--dx-separator);
+    --color-panel-overlay: rgba(54, 61, 68, 0.82);
+
+    /* Unmodified.
+    --color-brush-fill: rgba(180, 180, 180, 0.05);
+    --color-brush-stroke: rgba(180, 180, 180, 0.25);
+    --color-grid: #909090e6;
+    --color-low: #2c3136;
+    --color-culled: rgb(47, 52, 57);
+    --color-muted-0: rgba(255, 255, 255, 0.02);
+    --color-muted-1: rgba(255, 255, 255, 0.1);
+    --color-muted-2: rgba(255, 255, 255, 0.05);
+    --color-hint: rgba(255, 255, 255, 0.1);
+    --color-overlay: rgba(0, 0, 0, 0.35);
+    --color-focus: #a5c3f3;
+    --color-selected: #4285f4;
+    --color-selected-contrast: #ffffff;
+    --color-selection-fill: rgba(38, 150, 255, 0.05);
+    --color-selection-stroke: #2f80ed;
+    --color-text-0: #f0eded;
+    --color-text-1: #d9d9d9;
+    --color-text-2: #8e9094;
+    --color-text-3: #515a62;
+    --color-primary: #2f80ed;
+    --color-warn: #d10b0b;
+    --color-text: #f8f9fa;
+    --color-laser: #ff0000;
+    --shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038, inset 0px 0px 0px 1px var(--color-panel-contrast);
+    --shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055, inset 0px 0px 0px 1px var(--color-panel-contrast);
+    --shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22), inset 0px 0px 0px 1px var(--color-panel-contrast);
+    */
+  }
+
+}

package/src/styles/layers/tokens.css

@@ -0,0 +1,45 @@
+@layer dx-tokens {
+  @tokens dx;
+
+  :root {
+    /* Recitations */
+    --sticky-top: 0;
+
+    /* Lengths / sizes */
+    --rail-content: 3rem;
+    --rail-size: calc(var(--rail-content) + 1px);
+    --rail-action: calc(var(--rail-content) - 0.5rem + 1px);
+    --rail-item: calc(var(--rail-content) - 1rem);
+    --line-height: 32px;
+    --topbar-size: var(--rail-size);
+    --toolbar-size: var(--rail-content);
+    --statusbar-size: theme(spacing.8);
+    --nav-sidebar-size: 22.5rem;
+    --complementary-sidebar-size: 25rem;
+    /* NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls. */
+    --l0-size: 74px;
+    --l0-avatar-size: 3rem;
+    --l1-size: calc(var(--nav-sidebar-size) - var(--l0-size));
+    --r0-size: var(--rail-size);
+    --r1-size: calc(var(--complementary-sidebar-size) - var(--r0-size));
+    --text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
+  }
+
+  /* TODO(thure): Support arbitrary values (like for keywords e.g. `auto`, or font families) in @ch-ui/tokens */
+  :root {
+    --dx-calc-auto: auto;
+    --dx-calc-min: min-content;
+    --dx-calc-fit: fit-content;
+    --dx-calc-max: max-content;
+    --dx-calc-content: content;
+  }
+  @supports (block-size: calc-size(fit-content, size)) {
+    :root {
+      --dx-calc-auto: calc-size(auto, size);
+      --dx-calc-min: calc-size(min-content, size);
+      --dx-calc-fit: calc-size(fit-content, size);
+      --dx-calc-max: calc-size(max-content, size);
+      --dx-calc-content: calc-size(content, size);
+    }
+  }
+}

package/src/styles/layers/typography.css

@@ -0,0 +1,157 @@
+/**
+ * Typography configuration.
+ */
+
+@import '@fontsource-variable/jetbrains-mono/wght-italic.css';
+@import '@fontsource-variable/jetbrains-mono/wght.css';
+@import '@fontsource-variable/inter/slnt.css';
+@import '@fontsource/poiret-one';
+
+@layer utilities {
+  /* Font weights & `italic` handling */
+  .not-italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' 0;
+  }
+  .font-thin,
+  .not-italic.font-thin,
+  .not-italic .font-thin,
+  .font-thin .not-italic {
+    font-variation-settings:
+      'wght' 100,
+      'slnt' 0;
+  }
+  .font-extralight,
+  .not-italic.font-extralight,
+  .not-italic .font-extralight,
+  .font-extralight .not-italic {
+    font-variation-settings:
+      'wght' 200,
+      'slnt' 0;
+  }
+  .font-light,
+  .not-italic.font-light,
+  .not-italic .font-light,
+  .font-light .not-italic {
+    font-variation-settings:
+      'wght' 300,
+      'slnt' 0;
+  }
+  .font-normal,
+  .not-italic.font-normal,
+  .not-italic .font-normal,
+  .font-normal .not-italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' 0;
+  }
+  .font-medium,
+  .not-italic.font-medium,
+  .not-italic .font-medium,
+  .font-medium .not-italic {
+    font-variation-settings:
+      'wght' 500,
+      'slnt' 0;
+  }
+  .font-semibold,
+  .not-italic.font-semibold,
+  .not-italic .font-semibold,
+  .font-semibold .not-italic {
+    font-variation-settings:
+      'wght' 600,
+      'slnt' 0;
+  }
+  .font-bold,
+  .not-italic.font-bold,
+  .not-italic .font-bold,
+  .font-bold .not-italic {
+    font-variation-settings:
+      'wght' 700,
+      'slnt' 0;
+  }
+  .font-extrabold,
+  .not-italic.font-extrabold,
+  .not-italic .font-extrabold,
+  .font-extrabold .not-italic {
+    font-variation-settings:
+      'wght' 800,
+      'slnt' 0;
+  }
+  .font-black,
+  .not-italic.font-black,
+  .not-italic .font-black,
+  .font-black .not-italic {
+    font-variation-settings:
+      'wght' 900,
+      'slnt' 0;
+  }
+  .italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' -10;
+  }
+  .italic.font-thin,
+  .italic .font-thin,
+  .font-thin .italic {
+    font-variation-settings:
+      'wght' 100,
+      'slnt' -10;
+  }
+  .italic.font-extralight,
+  .italic .font-extralight,
+  .font-extralight .italic {
+    font-variation-settings:
+      'wght' 200,
+      'slnt' -10;
+  }
+  .italic.font-light,
+  .italic .font-light,
+  .font-light .italic {
+    font-variation-settings:
+      'wght' 300,
+      'slnt' -10;
+  }
+  .italic.font-normal,
+  .italic .font-normal,
+  .font-normal .italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' -10;
+  }
+  .italic.font-medium,
+  .italic .font-medium,
+  .font-medium .italic {
+    font-variation-settings:
+      'wght' 500,
+      'slnt' -10;
+  }
+  .italic.font-semibold,
+  .italic .font-semibold,
+  .font-semibold .italic {
+    font-variation-settings:
+      'wght' 600,
+      'slnt' -10;
+  }
+  .italic.font-bold,
+  .italic .font-bold,
+  .font-bold .italic {
+    font-variation-settings:
+      'wght' 700,
+      'slnt' -10;
+  }
+  .italic.font-extrabold,
+  .italic .font-extrabold,
+  .font-extrabold .italic {
+    font-variation-settings:
+      'wght' 800,
+      'slnt' -10;
+  }
+  .italic.font-black,
+  .italic .font-black,
+  .font-black .italic {
+    font-variation-settings:
+      'wght' 900,
+      'slnt' -10;
+  }
+}

package/src/styles/theme.ts

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { get } from '@dxos/util';
+
+import {
+  anchoredOverflowTheme,
+  avatarTheme,
+  breadcrumbTheme,
+  buttonTheme,
+  dialogTheme,
+  iconButtonTheme,
+  iconTheme,
+  inputTheme,
+  linkTheme,
+  listTheme,
+  mainTheme,
+  menuTheme,
+  messageTheme,
+  popoverTheme,
+  scrollAreaTheme,
+  selectTheme,
+  separatorTheme,
+  statusTheme,
+  tagTheme,
+  toastTheme,
+  toolbarTheme,
+  tooltipTheme,
+  treegridTheme,
+} from './components';
+
+export const defaultTheme: Theme<Record<string, any>> = {
+  themeName: () => 'default',
+
+  anchoredOverflow: anchoredOverflowTheme,
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  dialog: dialogTheme,
+  icon: iconTheme,
+  iconButton: iconButtonTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  menu: menuTheme,
+  popover: popoverTheme,
+  select: selectTheme,
+  scrollArea: scrollAreaTheme,
+  separator: separatorTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+};
+
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>) => {
+  return (path: string, defaultClassName: string, styleProps: P, ...options: any[]): string => {
+    const result: Theme<P> | ComponentFunction<P> = get(theme, path);
+    return typeof result === 'function' ? result(styleProps, ...options) : defaultClassName;
+  };
+};
+
+export const defaultTx = bindTheme(defaultTheme);

package/src/tailwind.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// Empty for vscode tooling.

package/src/theme.css

@@ -0,0 +1,9 @@
+/**
+ * Main theme.
+ */
+
+@import 'tailwindcss/base' layer(tw-base);
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/components' layer(tw-components);
+
+@import './styles/layers/index.css';

package/src/types.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type huePalettes } from './config/tokens/physical-colors';
+
+export type HuePalette = keyof typeof huePalettes;

package/src/typings.d.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+declare module 'fast-glob';
+declare module 'tailwindcss/stubs/config.full.js';
+declare module 'tailwindcss-radix';
+declare module 'tailwindcss-logical';

package/src/util/hash-styles.ts

@@ -0,0 +1,168 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ChromaticPalette } from '@dxos/ui-types';
+
+export type Hue = ChromaticPalette | 'neutral';
+
+// TODO(burdon): Rename?
+export type ColorStyles = {
+  hue: Hue;
+  text: string;
+  icon: string;
+  bg: string;
+  surface: string;
+  border: string;
+};
+
+const neutralColor: ColorStyles = {
+  hue: 'neutral',
+  text: 'text-neutralFill',
+  icon: 'text-neutralSurfaceText',
+  bg: 'bg-neutralFill',
+  surface: 'bg-neutralSurface',
+  border: 'border-neutralFill',
+};
+
+// NOTE: Don't include blue/red which are used as system colors.
+// NOTE: Cordinated with `tag.css`.
+// https://github.com/dxos/dxos/blob/main/packages/ui/react-ui-theme/src/styles/layers/tag.css
+export const styles: ColorStyles[] = [
+  {
+    hue: 'orange',
+    text: 'text-orangeFill',
+    icon: 'text-orangeSurfaceText',
+    bg: 'bg-orangeFill',
+    surface: 'bg-orangeSurface',
+    border: 'border-orangeFill',
+  },
+  {
+    hue: 'amber',
+    text: 'text-amberFill',
+    icon: 'text-amberSurfaceText',
+    bg: 'bg-amberFill',
+    surface: 'bg-amberSurface',
+    border: 'border-amberFill',
+  },
+  {
+    hue: 'yellow',
+    text: 'text-yellowFill',
+    icon: 'text-yellowSurfaceText',
+    bg: 'bg-yellowFill',
+    surface: 'bg-yellowSurface',
+    border: 'border-yellowFill',
+  },
+  {
+    hue: 'lime',
+    text: 'text-limeFill',
+    icon: 'text-limeSurfaceText',
+    bg: 'bg-limeFill',
+    surface: 'bg-limeSurface',
+    border: 'border-limeFill',
+  },
+  {
+    hue: 'green',
+    text: 'text-greenFill',
+    icon: 'text-greenSurfaceText',
+    bg: 'bg-greenFill',
+    surface: 'bg-greenSurface',
+    border: 'border-greenFill',
+  },
+  {
+    hue: 'emerald',
+    text: 'text-emeraldFill',
+    icon: 'text-emeraldSurfaceText',
+    bg: 'bg-emeraldFill',
+    surface: 'bg-emeraldSurface',
+    border: 'border-emeraldFill',
+  },
+  {
+    hue: 'teal',
+    text: 'text-tealFill',
+    icon: 'text-tealSurfaceText',
+    bg: 'bg-tealFill',
+    surface: 'bg-tealSurface',
+    border: 'border-tealFill',
+  },
+  {
+    hue: 'cyan',
+    text: 'text-cyanFill',
+    icon: 'text-cyanSurfaceText',
+    bg: 'bg-cyanFill',
+    surface: 'bg-cyanSurface',
+    border: 'border-cyanFill',
+  },
+  {
+    hue: 'sky',
+    text: 'text-skyFill',
+    icon: 'text-skySurfaceText',
+    bg: 'bg-skyFill',
+    surface: 'bg-skySurface',
+    border: 'border-skyFill',
+  },
+  {
+    hue: 'indigo',
+    text: 'text-indigoFill',
+    icon: 'text-indigoSurfaceText',
+    bg: 'bg-indigoFill',
+    surface: 'bg-indigoSurface',
+    border: 'border-indigoFill',
+  },
+  {
+    hue: 'violet',
+    text: 'text-violetFill',
+    icon: 'text-violetSurfaceText',
+    bg: 'bg-violetFill',
+    surface: 'bg-violetSurface',
+    border: 'border-violetFill',
+  },
+  {
+    hue: 'purple',
+    text: 'text-purpleFill',
+    icon: 'text-purpleSurfaceText',
+    bg: 'bg-purpleFill',
+    surface: 'bg-purpleSurface',
+    border: 'border-purpleFill',
+  },
+  {
+    hue: 'fuchsia',
+    text: 'text-fuchsiaFill',
+    icon: 'text-fuchsiaSurfaceText',
+    bg: 'bg-fuchsiaFill',
+    surface: 'bg-fuchsiaSurface',
+    border: 'border-fuchsiaFill',
+  },
+  {
+    hue: 'rose',
+    text: 'text-roseFill',
+    icon: 'text-roseSurfaceText',
+    bg: 'bg-roseFill',
+    surface: 'bg-roseSurface',
+    border: 'border-roseFill',
+  },
+  {
+    hue: 'pink',
+    text: 'text-pinkFill',
+    icon: 'text-pinkSurfaceText',
+    bg: 'bg-pinkFill',
+    surface: 'bg-pinkSurface',
+    border: 'border-pinkFill',
+  },
+];
+
+export const getStyles = (hue: string): ColorStyles => {
+  return styles.find((color) => color.hue === hue) || neutralColor;
+};
+
+export const getHashHue = (id: string | undefined): Hue => {
+  return id ? styles[getHash(id) % styles.length].hue : 'neutral';
+};
+
+// TODO(thure): Reconcile with `to-fallback.ts` which exports `toHue` which overlaps a lot.
+export const getHashStyles = (id: string | undefined): ColorStyles => {
+  const hue = getHashHue(id);
+  return getStyles(hue);
+};
+
+const getHash = (id: string): number => id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);

package/src/util/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './hash-styles';
+export * from './mx';