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

package/src/util/hash-styles.ts

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

package/src/util/mx.ts

@@ -4,48 +4,59 @@
 
 import { extendTailwindMerge, validators } from 'tailwind-merge';
 
-import { type WithLogicalClassGroups, withLogical } from './withLogical';
-
-type AdditionalClassGroups = 'density' | 'dx-focus-ring' | 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,
-        ],
-        density: ['density-fine', 'density-coarse'],
-        'dx-focus-ring': [
-          'dx-focus-ring',
-          'dx-focus-ring-inset',
-          'dx-focus-ring-always',
-          'dx-focus-ring-inset-always',
-          'dx-focus-ring-group',
-          'dx-focus-ring-group-x',
-          'dx-focus-ring-group-y',
-          'dx-focus-ring-group-always',
-          'dx-focus-ring-group-x-always',
-          'dx-focus-ring-group-y-always',
-          'dx-focus-ring-inset-over-all',
-          'dx-focus-ring-inset-over-all-always',
-          'dx-focus-ring-main',
-          'dx-focus-ring-main-always',
-        ],
-      },
+import { type ComposableProps } from '@dxos/ui-types';
+
+type AdditionalClassGroups = 'density' | 'dx-focus-ring';
+
+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,
+      ],
+
+      density: ['dx-density-fine', 'dx-density-coarse'],
+
+      'dx-focus-ring': [
+        'dx-focus-ring',
+        'dx-focus-ring-inset',
+        'dx-focus-ring-always',
+        'dx-focus-ring-inset-always',
+        'dx-focus-ring-group',
+        'dx-focus-ring-group-x',
+        'dx-focus-ring-group-y',
+        'dx-focus-ring-group-always',
+        'dx-focus-ring-group-x-always',
+        'dx-focus-ring-group-y-always',
+        'dx-focus-ring-inset-over-all',
+        'dx-focus-ring-inset-over-all-always',
+        'dx-focus-ring-main',
+        'dx-focus-ring-main-always',
+      ],
     },
   },
-  withLogical,
-);
+});
+
+/**
+ * Reconciles className properties from slot.
+ */
+export const useComposableProps = (
+  { classNames, className, ...props }: Pick<ComposableProps, 'classNames' | 'className'>,
+  etc?: string,
+) => ({
+  className: mx(etc, classNames, className),
+  props,
+});

package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs

@@ -1,79 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_UUMDOU7E_exports = {};
-__export(chunk_UUMDOU7E_exports, {
-  resolveKnownPeers: () => resolveKnownPeers
-});
-module.exports = __toCommonJS(chunk_UUMDOU7E_exports);
-var import_node_util = require("node:util");
-var import_glob = __toESM(require("glob"));
-var glob = (0, import_node_util.promisify)(import_glob.default.glob);
-var 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"
-];
-var knownDirectPeers = [
-  "@dxos/plugin-*",
-  ...knownIndirectPeers
-];
-var packageNamePattern = /.*node_modules\/(.+?)$/;
-var packageName = (path) => path.match(packageNamePattern)?.[1];
-var flatten = (acc, group) => [
-  ...acc,
-  ...group
-];
-var dedupe = (acc, path) => {
-  const name = packageName(path);
-  if (name && !acc[name]) {
-    acc[name] = path;
-  }
-  return acc;
-};
-var resolveKnownPeers = async (content, cwd) => {
-  const globOptions = {
-    cwd,
-    absolute: true
-  };
-  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));
-  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
-  ];
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  resolveKnownPeers
-});
-//# sourceMappingURL=chunk-UUMDOU7E.cjs.map

package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/plugins/resolveContent.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { promisify } from 'node:util';\n\nimport Glob from 'glob';\n\nconst glob = promisify(Glob.glob);\n\n// TODO(burdon): Comment.\nconst knownIndirectPeers = [\n  '@dxos/devtools',\n  '@dxos/react-*',\n  '@dxos/react-ui-*',\n  // 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.\n  '@dxos/react-ui-table/node_modules/@dxos/react-ui-searchlist',\n  '@dxos/shell',\n];\n\nconst knownDirectPeers = ['@dxos/plugin-*', ...knownIndirectPeers];\n\nconst packageNamePattern = /.*node_modules\\/(.+?)$/;\nconst packageName = (path: string) => path.match(packageNamePattern)?.[1];\n\nconst flatten = (acc: string[], group: string[]) => [...acc, ...group];\nconst dedupe = (acc: Record<string, string>, path: string) => {\n  const name = packageName(path);\n  if (name && !acc[name]) {\n    acc[name] = path;\n  }\n\n  return acc;\n};\n\nexport const resolveKnownPeers = async (content: string[], cwd: string): Promise<string[]> => {\n  const globOptions = { cwd, absolute: true };\n\n  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));\n\n  // NOTE(thure): With glob v7, JS runs out of memory if `**` is used, so this limits the search to @dxos/plugin-*/node_modules\n  const indirectPeers = await Promise.all(\n    knownIndirectPeers.map((peer) => glob(`./node_modules/@dxos/plugin-*/node_modules/${peer}`, globOptions)),\n  );\n\n  const knownPeerContent = Object.values(\n    indirectPeers.reduce(flatten, []).reduce(dedupe, directPeers.reduce(flatten, []).reduce(dedupe, {})),\n  ).map((value) => `${value}/dist/lib/**/*.mjs`);\n\n  return [...content, ...knownPeerContent];\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,uBAA0B;AAE1B,kBAAiB;AAEjB,IAAMA,WAAOC,4BAAUC,YAAAA,QAAKF,IAAI;AAGhC,IAAMG,qBAAqB;EACzB;EACA;EACA;;EAEA;EACA;;AAGF,IAAMC,mBAAmB;EAAC;KAAqBD;;AAE/C,IAAME,qBAAqB;AAC3B,IAAMC,cAAc,CAACC,SAAiBA,KAAKC,MAAMH,kBAAAA,IAAsB,CAAA;AAEvE,IAAMI,UAAU,CAACC,KAAeC,UAAoB;KAAID;KAAQC;;AAChE,IAAMC,SAAS,CAACF,KAA6BH,SAAAA;AAC3C,QAAMM,OAAOP,YAAYC,IAAAA;AACzB,MAAIM,QAAQ,CAACH,IAAIG,IAAAA,GAAO;AACtBH,QAAIG,IAAAA,IAAQN;EACd;AAEA,SAAOG;AACT;AAEO,IAAMI,oBAAoB,OAAOC,SAAmBC,QAAAA;AACzD,QAAMC,cAAc;IAAED;IAAKE,UAAU;EAAK;AAE1C,QAAMC,cAAc,MAAMC,QAAQC,IAAIjB,iBAAiBkB,IAAI,CAACC,SAASvB,KAAK,kBAAkBuB,IAAAA,IAAQN,WAAAA,CAAAA,CAAAA;AAGpG,QAAMO,gBAAgB,MAAMJ,QAAQC,IAClClB,mBAAmBmB,IAAI,CAACC,SAASvB,KAAK,8CAA8CuB,IAAAA,IAAQN,WAAAA,CAAAA,CAAAA;AAG9F,QAAMQ,mBAAmBC,OAAOC,OAC9BH,cAAcI,OAAOnB,SAAS,CAAA,CAAE,EAAEmB,OAAOhB,QAAQO,YAAYS,OAAOnB,SAAS,CAAA,CAAE,EAAEmB,OAAOhB,QAAQ,CAAC,CAAA,CAAA,CAAA,EACjGU,IAAI,CAACO,UAAU,GAAGA,KAAAA,oBAAyB;AAE7C,SAAO;OAAId;OAAYU;;AACzB;",
-  "names": ["glob", "promisify", "Glob", "knownIndirectPeers", "knownDirectPeers", "packageNamePattern", "packageName", "path", "match", "flatten", "acc", "group", "dedupe", "name", "resolveKnownPeers", "content", "cwd", "globOptions", "absolute", "directPeers", "Promise", "all", "map", "peer", "indirectPeers", "knownPeerContent", "Object", "values", "reduce", "value"]
-}