@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/src/styles/layers/tag.css

@@ -0,0 +1,123 @@
+@layer dx-tokens {
+  :root {
+    --dx-tag-padding-block: 0.2rem;
+  }
+}
+
+@layer dx-components {
+  .dx-tag {
+    @apply inline-block text-xs font-semibold mli-0.5 pli-1 rounded-sm cursor-default truncate;
+    padding-block: var(--dx-tag-padding-block);
+    user-select: none;
+  }
+
+  .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,44 @@
+@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);
+    --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,152 @@
+@import '@fontsource-variable/jetbrains-mono/wght-italic.css';
+@import '@fontsource-variable/jetbrains-mono/wght.css';
+@import '@fontsource-variable/inter/slnt.css';
+
+@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/react-ui-types';
+import { get } from '@dxos/util';
+
+import {
+  anchoredOverflowTheme,
+  avatarTheme,
+  breadcrumbTheme,
+  buttonTheme,
+  dialogTheme,
+  menuTheme,
+  iconTheme,
+  iconButtonTheme,
+  inputTheme,
+  linkTheme,
+  listTheme,
+  mainTheme,
+  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,5 @@
+@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.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export type Color = {
+  color: string;
+  text: string;
+  bg: string;
+  tag: string;
+};
+
+// NOTE: Don't include blue/red which are used as system colors.
+const colors: Color[] = [
+  { color: 'orange', bg: 'bg-orangeFill', text: 'text-orangeFill', tag: 'bg-orangeSurface' },
+  { color: 'amber', bg: 'bg-amberFill', text: 'text-amberFill', tag: 'bg-amberSurface' },
+  { color: 'yellow', bg: 'bg-yellowFill', text: 'text-yellowFill', tag: 'bg-yellowSurface' },
+  { color: 'lime', bg: 'bg-limeFill', text: 'text-limeFill', tag: 'bg-limeSurface' },
+  { color: 'green', bg: 'bg-greenFill', text: 'text-greenFill', tag: 'bg-greenSurface' },
+  { color: 'emerald', bg: 'bg-emeraldFill', text: 'text-emeraldFill', tag: 'bg-emeraldSurface' },
+  { color: 'teal', bg: 'bg-tealFill', text: 'text-tealFill', tag: 'bg-tealSurface' },
+  { color: 'cyan', bg: 'bg-cyanFill', text: 'text-cyanFill', tag: 'bg-cyanSurface' },
+  { color: 'sky', bg: 'bg-skyFill', text: 'text-skyFill', tag: 'bg-skySurface' },
+  { color: 'indigo', bg: 'bg-indigoFill', text: 'text-indigoFill', tag: 'bg-indigoSurface' },
+  { color: 'violet', bg: 'bg-violetFill', text: 'text-violetFill', tag: 'bg-violetSurface' },
+  { color: 'purple', bg: 'bg-purpleFill', text: 'text-purpleFill', tag: 'bg-purpleSurface' },
+  { color: 'fuchsia', bg: 'bg-fuchsiaFill', text: 'text-fuchsiaFill', tag: 'bg-fuchsiaSurface' },
+  { color: 'rose', bg: 'bg-roseFill', text: 'text-roseFill', tag: 'bg-roseSurface' },
+  { color: 'pink', bg: 'bg-pinkFill', text: 'text-pinkFill', tag: 'bg-pinkSurface' },
+];
+
+// TODO(thure): Reconcile with `to-fallback.ts` which exports `toHue` which overlaps a lot.
+export const getHashColor = (type: string | undefined): Color => {
+  if (!type) {
+    return { color: 'neutral', bg: 'bg-neutralFill', text: 'text-neutralFill', tag: 'bg-neutralSurface' };
+  }
+
+  const hash = type.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return colors[hash % colors.length];
+};

package/src/util/index.ts

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

package/src/util/mx.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { extendTailwindMerge, validators } from 'tailwind-merge';
+
+import { withLogical, type WithLogicalClassGroups } from './withLogical';
+
+type AdditionalClassGroups = 'foreground' | 'surface' | 'separator' | WithLogicalClassGroups;
+
+export const mx = extendTailwindMerge<AdditionalClassGroups>(
+  {
+    extend: {
+      classGroups: {
+        'font-family': ['font-body', 'font-mono'],
+        'font-weight': [
+          // App weights
+          'font-thin',
+          'font-extralight',
+          'font-light',
+          'font-normal',
+          'font-medium',
+          'font-semibold',
+          'font-bold',
+          'font-extrabold',
+          'font-black',
+          // Arbitrary numbers
+          validators.isArbitraryNumber,
+        ],
+      },
+    },
+  },
+  withLogical,
+);