@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.0.0",
+  "version": "0.8.4-main.16b68245aa",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": [
@@ -16,24 +20,11 @@
       "types": "./dist/types/src/index.d.ts",
       "default": "./dist/lib/browser/index.mjs"
     },
-    "./esbuild-plugin": {
-      "source": "./src/plugins/esbuild-plugin.ts",
-      "types": "./dist/types/src/plugins/esbuild-plugin.d.ts",
-      "import": "./dist/plugin/node-esm/plugins/esbuild-plugin.mjs",
-      "require": "./dist/plugin/node-cjs/plugins/esbuild-plugin.cjs"
-    },
     "./plugin": {
-      "source": "./src/plugins/plugin.ts",
-      "types": "./dist/types/src/plugins/plugin.d.ts",
-      "import": "./dist/plugin/node-esm/plugins/plugin.mjs",
-      "require": "./dist/plugin/node-cjs/plugins/plugin.cjs"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "plugin": [
-        "dist/types/src/plugins/plugin.d.ts"
-      ]
+      "source": "./src/plugins/ThemePlugin.ts",
+      "types": "./dist/types/src/plugins/ThemePlugin.d.ts",
+      "import": "./dist/plugin/node-esm/plugins/ThemePlugin.mjs",
+      "require": "./dist/plugin/node-cjs/plugins/ThemePlugin.cjs"
     }
   },
   "files": [
@@ -41,40 +32,43 @@
     "src"
   ],
   "dependencies": {
-    "@ch-ui/tailwind-tokens": "2.8.1",
-    "@ch-ui/tokens": "3.0.1",
-    "@fontsource-variable/inter": "5.0.16",
+    "@fontsource-variable/inter": "5.2.8",
     "@fontsource-variable/jetbrains-mono": "5.0.21",
     "@fontsource/poiret-one": "^5.0.20",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.3",
-    "autoprefixer": "^10.4.12",
+    "@radix-ui/react-slot": "1.1.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/postcss": "^4.2.0",
+    "autoprefixer": "^10.5.0",
     "esbuild-style-plugin": "^1.6.1",
     "glob": "^7.2.3",
     "globby": "14.1.0",
     "lodash.merge": "^4.6.2",
-    "postcss": "^8.4.41",
+    "postcss": "^8.5.12",
     "postcss-import": "^16.1.0",
-    "tailwind-merge": "^2.2.1",
-    "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "~3.4.1",
-    "tailwindcss-logical": "^3.0.0",
-    "tailwindcss-radix": "^2.8.0",
-    "@dxos/node-std": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "postcss-nesting": "^13.0.1",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-scrollbar": "^4.0.0",
+    "tailwindcss": "^4.2.0",
+    "tailwindcss-radix": "^4.0.2",
+    "@dxos/log": "0.8.4-main.16b68245aa",
+    "@dxos/node-std": "0.8.4-main.16b68245aa",
+    "@dxos/util": "0.8.4-main.16b68245aa"
   },
   "devDependencies": {
-    "@ch-ui/colors": "1.2.1",
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
-    "esbuild": "0.25.10",
-    "vite": "7.1.9",
-    "@dxos/ui-types": "0.0.0"
+    "esbuild": "0.28.0",
+    "vite": "^8.0.10",
+    "@dxos/ui-types": "0.8.4-main.16b68245aa"
+  },
+  "peerDependencies": {
+    "react": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "audit-classes": "npx tsx bin/audit-classes.mts",
     "tailwind-check": "tailwindcss -i ./dist/plugin/node-esm/theme.css --config ./src/tailwind.ts --content \"./src/**/*.{js,ts,jsx,tsx,vue}\" --check"
   }
 }

package/src/Theme.stories.tsx

@@ -0,0 +1,224 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta } from '@storybook/react-vite';
+import React from 'react';
+
+import { hueShades, hues } from './defs';
+import { mx } from './util';
+
+// prettier-ignore
+const neutralShades: [number, string][] = [
+  [50,  'bg-neutral-50'],
+  [75,  'bg-neutral-75'],
+  [100, 'bg-neutral-100'],
+  [200, 'bg-neutral-200'],
+  [250, 'bg-neutral-250'],
+  [300, 'bg-neutral-300'],
+  [400, 'bg-neutral-400'],
+  [500, 'bg-neutral-500'],
+  [600, 'bg-neutral-600'],
+  [700, 'bg-neutral-700'],
+  [750, 'bg-neutral-750'],
+  [800, 'bg-neutral-800'],
+  [900, 'bg-neutral-900'],
+  [925, 'bg-neutral-925'],
+  [950, 'bg-neutral-950'],
+];
+
+const ColorSwatch = ({ hue }: { hue: string }) => {
+  return (
+    <div
+      style={{
+        borderColor: `var(--color-${hue}-border)`,
+      }}
+      className={mx('shrink-0 aspect-square w-36 grid grid-rows-3 border-2 overflow-hidden rounded-md')}
+    >
+      <div
+        style={{
+          color: `var(--color-${hue}-text)`,
+          backgroundColor: `var(--color-base-surface)`,
+        }}
+        className='p-2 text-sm'
+      >
+        {hue}
+      </div>
+      <div
+        style={{
+          color: `var(--color-${hue}-text)`,
+          backgroundColor: `var(--color-${hue}-fill)`,
+        }}
+        className='px-1 text-sm flex items-center'
+      >
+        <svg className='h-6 w-6'>
+          <use href='/icons.svg#ph--aperture--regular' />
+        </svg>
+      </div>
+      <div
+        style={{
+          color: `var(--color-${hue}-surface-text)`,
+          backgroundColor: `var(--color-${hue}-surface)`,
+        }}
+        className='p-2 text-sm'
+      >
+        {hue}
+      </div>
+    </div>
+  );
+};
+
+const HueSwatch = ({ hue, shades }: { hue: string; shades: readonly number[] }) => (
+  <div className='flex gap-1'>
+    {shades.map((shade) => (
+      <div
+        key={shade}
+        className='shrink-0 aspect-square w-24 flex flex-col rounded-sm'
+        style={{ backgroundColor: `var(--color-${hue}-${shade})` }}
+      >
+        <span
+          className='flex flex-col h-full justify-between text-sm p-2'
+          style={{ color: shade <= 500 ? 'black' : 'white' }}
+        >
+          <span className='text-xs'>{shade}</span>
+          {shade === 500 && <span className='text-xs'>{hue}</span>}
+        </span>
+      </div>
+    ))}
+  </div>
+);
+
+const meta = {
+  title: 'ui/ui-theme/Theme',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Styles = {
+  render: () => {
+    return (
+      <div className='p-4'>
+        <div className='flex flex-wrap gap-2'>
+          {['neutral', ...hues].map((hue) => (
+            <ColorSwatch key={hue} hue={hue} />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Colors = {
+  render: () => {
+    return (
+      <div className='p-4'>
+        <div className='flex flex-col gap-1'>
+          {['neutral', ...hues].map((hue) => (
+            <HueSwatch key={hue} hue={hue} shades={hueShades} />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Neutral = {
+  render: () => {
+    return (
+      <div className='p-4'>
+        <div className='flex flex-col items-center'>
+          {neutralShades.map(([value, className]) => (
+            <div
+              key={value}
+              className={mx(
+                'h-12 w-48 p-2 text-right text-sm',
+                className,
+                value <= 500 ? 'text-neutral-950' : 'text-neutral-50',
+              )}
+            >
+              {value}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Surfaces = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 h-full p-4 bg-white dark:bg-black'>
+        <div className='flex flex-wrap gap-2'>
+          {[
+            { className: 'bg-scrim-surface', label: 'scrim' },
+            { className: 'bg-base-surface', label: 'base' },
+            { className: 'bg-deck-surface', label: 'deck' },
+            { className: 'bg-group-surface', label: 'group' },
+            { className: 'bg-sidebar-surface', label: 'sidebar' },
+            { className: 'bg-header-surface', label: 'header' },
+            { className: 'bg-card-surface', label: 'card' },
+            { className: 'bg-modal-surface', label: 'modal' },
+            { className: 'bg-input-surface', label: 'input' },
+            { className: 'bg-active-surface', label: 'active' },
+            { className: 'bg-hover-surface', label: 'hover' },
+            { className: 'bg-inverse-surface text-inverse-surface-text', label: 'inverse' },
+          ].map(({ className, label }) => (
+            <div key={className} className={mx('shrink-0 p-2 aspect-square w-48 rounded-md', className)}>
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Tags = {
+  render: () => {
+    return (
+      <div className='p-4'>
+        <div className='flex flex-col gap-1'>
+          {['neutral', ...hues].map((hue) => (
+            <div key={hue} className='grid grid-cols-[8rem_8rem]'>
+              <div>
+                <span className='dx-tag' data-hue={hue}>
+                  {hue}
+                </span>
+              </div>
+              <div>
+                <span className='dx-text text-sm' data-hue={hue}>
+                  {hue}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Animation = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 grid place-items-center'>
+        <div className='dx-density-coarse border border-separator rounded-md'>
+          <div
+            className={mx(
+              'flex items-center font-mono text-2xl text-test-experimental',
+              'p-form-padding w-card-min-width grid grid-cols-[min-content_1fr_min-content]',
+            )}
+          >
+            <span className='animate-blink text-error-text'>*</span>
+            <span className='text-center'>experimental</span>
+            <span className='animate-blink text-error-text'>*</span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/css/base/base.css

@@ -0,0 +1,43 @@
+/**
+ * Base utilities.
+ */
+
+@layer dx-base {
+  :root {
+    color-scheme: light;
+    touch-action: pan-x pan-y;
+    font-synthesis: none;
+    font-variation-settings:
+      'wght' 400,
+      'slnt' 0;
+    scroll-padding-block-start: var(--spacing-14);
+    scroll-padding-block-end: var(--spacing-2);
+    @apply font-body;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+
+  button {
+    @apply cursor-pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer dx-tokens {
+  :root {
+    --dx-tag-padding-block: var(--spacing-tag-padding-block);
+  }
+
+  html,
+  html.dark,
+  html .dark,
+  .sb-show-main {
+    background-color: var(--color-base-surface);
+    color: var(--color-base-surface-text);
+    --surface-bg: var(--color-base-surface);
+    --surface-text: var(--color-base-surface-text);
+    --description-text: var(--color-description);
+  }
+}

package/src/{styles/layers → css/base}/typography.css

@@ -1,19 +1,19 @@
 /**
- * Typography configuration.
+ * Typography
  */
 
 @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 {
+@layer dx-components {
   /* Font weights & `italic` handling */
   .not-italic {
     font-variation-settings:
       'wght' 400,
       'slnt' 0;
   }
+
   .font-thin,
   .not-italic.font-thin,
   .not-italic .font-thin,
@@ -22,6 +22,7 @@
       'wght' 100,
       'slnt' 0;
   }
+
   .font-extralight,
   .not-italic.font-extralight,
   .not-italic .font-extralight,
@@ -30,6 +31,7 @@
       'wght' 200,
       'slnt' 0;
   }
+
   .font-light,
   .not-italic.font-light,
   .not-italic .font-light,
@@ -38,6 +40,7 @@
       'wght' 300,
       'slnt' 0;
   }
+
   .font-normal,
   .not-italic.font-normal,
   .not-italic .font-normal,
@@ -46,6 +49,7 @@
       'wght' 400,
       'slnt' 0;
   }
+
   .font-medium,
   .not-italic.font-medium,
   .not-italic .font-medium,
@@ -54,6 +58,7 @@
       'wght' 500,
       'slnt' 0;
   }
+
   .font-semibold,
   .not-italic.font-semibold,
   .not-italic .font-semibold,
@@ -62,6 +67,7 @@
       'wght' 600,
       'slnt' 0;
   }
+
   .font-bold,
   .not-italic.font-bold,
   .not-italic .font-bold,
@@ -70,6 +76,7 @@
       'wght' 700,
       'slnt' 0;
   }
+
   .font-extrabold,
   .not-italic.font-extrabold,
   .not-italic .font-extrabold,
@@ -78,6 +85,7 @@
       'wght' 800,
       'slnt' 0;
   }
+
   .font-black,
   .not-italic.font-black,
   .not-italic .font-black,
@@ -86,11 +94,13 @@
       'wght' 900,
       'slnt' 0;
   }
+
   .italic {
     font-variation-settings:
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-thin,
   .italic .font-thin,
   .font-thin .italic {
@@ -98,6 +108,7 @@
       'wght' 100,
       'slnt' -10;
   }
+
   .italic.font-extralight,
   .italic .font-extralight,
   .font-extralight .italic {
@@ -105,6 +116,7 @@
       'wght' 200,
       'slnt' -10;
   }
+
   .italic.font-light,
   .italic .font-light,
   .font-light .italic {
@@ -112,6 +124,7 @@
       'wght' 300,
       'slnt' -10;
   }
+
   .italic.font-normal,
   .italic .font-normal,
   .font-normal .italic {
@@ -119,6 +132,7 @@
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-medium,
   .italic .font-medium,
   .font-medium .italic {
@@ -126,6 +140,7 @@
       'wght' 500,
       'slnt' -10;
   }
+
   .italic.font-semibold,
   .italic .font-semibold,
   .font-semibold .italic {
@@ -133,6 +148,7 @@
       'wght' 600,
       'slnt' -10;
   }
+
   .italic.font-bold,
   .italic .font-bold,
   .font-bold .italic {
@@ -140,6 +156,7 @@
       'wght' 700,
       'slnt' -10;
   }
+
   .italic.font-extrabold,
   .italic .font-extrabold,
   .font-extrabold .italic {
@@ -147,6 +164,7 @@
       'wght' 800,
       'slnt' -10;
   }
+
   .italic.font-black,
   .italic .font-black,
   .font-black .italic {

package/src/{styles/layers → css/components}/button.css

@@ -1,3 +1,7 @@
+/**
+ * Button
+ */
+
 /* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component. */
 @layer dx-components {
   /**
@@ -6,71 +10,76 @@
 
   /* Base styles */
   .dx-button {
-    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-inputSurface min-bs-[2.5rem] pli-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2.5rem] px-3;
+    @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
     &[aria-pressed='true'],
     &[aria-checked='true'] {
-      @apply text-accentText bg-attention;
+      @apply text-accent-text bg-attention-surface;
     }
+
     /* Disabled styles */
     &[disabled]:not([disabled='false']) {
       @apply opacity-40 cursor-not-allowed shadow-none;
     }
+
     /* Variants consistent between enabled & disabled */
     &[data-variant='ghost'] {
       @apply bg-transparent;
       &:hover {
-        @apply bg-hoverSurface text-inherit;
+        @apply bg-hover-surface text-inherit;
       }
       &[data-state='open'] {
-        @apply bg-inputSurface;
+        @apply bg-input-surface;
       }
       &[aria-pressed='true'],
       &[aria-checked='true'] {
-        @apply bg-baseSurface text-accentText;
+        @apply bg-base-surface text-accent-text;
       }
     }
     &[data-variant='outline'] {
-      @apply border border-baseSurface bg-transparent;
+      @apply border border-base-surface bg-transparent;
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
     }
+
     /* Enabled styles */
     &:not([disabled]),
     &[disabled='false'] {
       /* Hover */
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
+
       /* Variants */
       &[data-variant='primary'] {
-        @apply text-accentSurfaceText bg-accentSurface;
+        @apply text-accent-surface-text bg-accent-surface;
         &:hover,
         &[aria-pressed='true'],
         &[aria-checked='true'] &[data-state='open'] {
-          @apply bg-accentSurfaceHover;
+          @apply bg-accent-surface-hover;
         }
       }
       &[data-variant='destructive'] {
-        @apply text-accentSurfaceText bg-roseFill;
+        @apply text-accent-surface-text bg-rose-fill;
         &:hover,
         &[aria-pressed='true'],
         &[aria-checked='true'] &[data-state='open'] {
-          @apply bg-roseFill;
+          @apply bg-rose-fill;
         }
       }
     }
   }
   /* Props */
   .dx-button:not([data-props~='grouped']) {
-    @apply rounded-sm;
+    @apply rounded-xs;
   }
   .dx-button:not([data-props~='wrap']) {
     @apply truncate;
   }
   @media (pointer: fine) {
     .dx-button[data-density='fine'] {
-      @apply min-bs-[2rem] pli-2.5;
+      @apply min-h-[2rem] px-2.5;
     }
   }
 }

package/src/{styles/layers → css/components}/checkbox.css

@@ -1,40 +1,44 @@
+/**
+ * Checkbox
+ */
+
 /* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
 @layer dx-components {
   .dx-checkbox--switch,
   .dx-checkbox {
-    @apply border border-unAccent;
+    @apply border border-un-accent;
     &[aria-checked='true'],
     &[aria-checked='mixed'],
     &:checked {
-      @apply bg-accentSurface accent-accentSurface border-accentSurface;
+      @apply bg-accent-surface accent-accent-surface border-accent-surface;
     }
 
     &:not([disabled]),
     &[disabled='false'] {
       &:hover {
-        @apply bg-unAccentHover accent-unAccentHover;
+        @apply bg-un-accent-hover accent-un-accent-hover;
         &[aria-checked='true'],
         &[aria-checked='mixed'],
         &:checked {
-          @apply bg-accentSurfaceHover accent-accentSurfaceHover border-accentSurfaceHover;
+          @apply bg-accent-surface-hover accent-accent-surface-hover border-accent-surface-hover;
         }
       }
     }
   }
 
   .dx-checkbox {
-    @apply is-4 bs-4 overflow-hidden shadow-inner transition-colors bg-unAccent accent-unAccent text-accentSurfaceText shrink-0 inline-grid place-items-center rounded-sm;
+    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-surface-text shrink-0 inline-grid place-items-center rounded-xs;
   }
 
   /* TODO(ZaymonFC): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
   /* NOTE: This isn't compatible with the Radix switch. */
   .dx-checkbox--switch {
-    @apply inline-block appearance-none relative shrink-0 bs-5 is-8;
-    @apply shadow-inner transition-colors bg-unAccent;
+    @apply inline-block appearance-none relative shrink-0 h-5 w-8;
+    @apply shadow-inner transition-colors bg-un-accent;
     @apply cursor-pointer rounded-full;
 
     &::before {
-      @apply is-3 bs-3 mli-[0.1875rem] mlb-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
+      @apply w-3 h-3 mx-[0.1875rem] my-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
       content: '';
     }