@watt42/a2ui-theme 0.1.0

package/README.md

@@ -0,0 +1,39 @@
+# @watt42/a2ui-theme
+
+## Purpose
+
+Shared A2UI surface CSS and chart theme tokens so applications can apply corporate themes without changing component implementations.
+
+## Owns
+
+- Default surface CSS (`default/surface.css`)
+- Chart theme tokens (`chartThemeTokens`, including an 8-color `colors` palette for series and pie slices)
+- Design tokens consumable by `@watt42/a2ui-react-components` (including shadcn class token aliases `--primary`, `--ring`, … on `.a2ui-surface`)
+- Catalog control tokens (`--a2ui-control-*`) and styling for Card content, labels, Input/textarea, and Button `data-slot` hooks
+
+## Does Not Own
+
+- React catalog components
+- Registry or renderer
+- App shell layout / global app branding beyond A2UI surfaces
+
+## Public API
+
+```ts
+import "@watt42/a2ui-theme/default/surface.css";
+import { chartThemeTokens } from "@watt42/a2ui-theme";
+```
+
+Applications may override control tokens inside their own `.a2ui-surface` scope without changing React adapters:
+
+```css
+.a2ui-surface {
+  --a2ui-control-height: 3rem;
+  --a2ui-border-radius: 1rem;
+  --a2ui-color-primary: #2563eb;
+}
+```
+
+## Dependencies
+
+- None (CSS + token exports only)

package/dist/chart/tokens.d.ts

@@ -0,0 +1,17 @@
+/** Distinct ECharts series / pie-slice palette. */
+export declare const CHART_COLORS: readonly ["#1177ee", "#0d9488", "#d97706", "#7c3aed", "#e11d48", "#059669", "#ea580c", "#64748b"];
+/** Default ECharts color / layout tokens for shared Chart/Gauge. */
+export declare const chartThemeTokens: {
+    readonly primary: "#1177ee";
+    readonly muted: "#64748b";
+    readonly colors: readonly ["#1177ee", "#0d9488", "#d97706", "#7c3aed", "#e11d48", "#059669", "#ea580c", "#64748b"];
+    readonly background: "transparent";
+    readonly text: "#334155";
+    readonly defaultHeight: 360;
+    readonly minHeight: 120;
+    readonly maxHeight: 800;
+};
+export type ChartThemeTokens = typeof chartThemeTokens;
+/** Mutable palette copy for ECharts; tolerates stale theme bundles missing `colors`. */
+export declare function chartColorPalette(): string[];
+//# sourceMappingURL=tokens.d.ts.map

package/dist/chart/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/chart/tokens.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,eAAO,MAAM,YAAY,mGASf,CAAC;AAEX,oEAAoE;AACpE,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,OAAO,gBAAgB,CAAC;AAEvD,wFAAwF;AACxF,wBAAgB,iBAAiB,IAAI,MAAM,EAAE,CAM5C"}

package/dist/chart/tokens.js

@@ -0,0 +1,31 @@
+/** Distinct ECharts series / pie-slice palette. */
+export const CHART_COLORS = [
+    "#1177ee",
+    "#0d9488",
+    "#d97706",
+    "#7c3aed",
+    "#e11d48",
+    "#059669",
+    "#ea580c",
+    "#64748b",
+];
+/** Default ECharts color / layout tokens for shared Chart/Gauge. */
+export const chartThemeTokens = {
+    primary: CHART_COLORS[0],
+    muted: CHART_COLORS[7],
+    colors: CHART_COLORS,
+    background: "transparent",
+    text: "#334155",
+    defaultHeight: 360,
+    minHeight: 120,
+    maxHeight: 800,
+};
+/** Mutable palette copy for ECharts; tolerates stale theme bundles missing `colors`. */
+export function chartColorPalette() {
+    const palette = chartThemeTokens.colors;
+    if (Array.isArray(palette) && palette.length > 0) {
+        return [...palette];
+    }
+    return [chartThemeTokens.primary, chartThemeTokens.muted];
+}
+//# sourceMappingURL=tokens.js.map

package/dist/chart/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/chart/tokens.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAC;AAEX,oEAAoE;AACpE,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IACtB,MAAM,EAAE,YAAY;IACpB,UAAU,EAAE,aAAa;IACzB,IAAI,EAAE,SAAS;IACf,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACN,CAAC;AAIX,wFAAwF;AACxF,MAAM,UAAU,iBAAiB;IAC/B,MAAM,OAAO,GAAG,gBAAgB,CAAC,MAAuC,CAAC;IACzE,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACjD,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;IACtB,CAAC;IACD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { chartColorPalette, chartThemeTokens, CHART_COLORS, type ChartThemeTokens } from "./chart/tokens.js";
+export declare const A2UI_THEME_VERSION = "0.1.0";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE7G,eAAO,MAAM,kBAAkB,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { chartColorPalette, chartThemeTokens, CHART_COLORS } from "./chart/tokens.js";
+export const A2UI_THEME_VERSION = "0.1.0";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAyB,MAAM,mBAAmB,CAAC;AAE7G,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@watt42/a2ui-theme",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "A2UI surface CSS and chart theme tokens — swappable corporate themes",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./default/surface.css": "./src/default/surface.css",
+    "./chart": {
+      "types": "./dist/chart/tokens.d.ts",
+      "import": "./dist/chart/tokens.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/default/surface.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "test": "tsx --test test/**/*.test.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/default/surface.css

@@ -0,0 +1,372 @@
+/**
+ * Default A2UI surface theme tokens and control styling.
+ * Applications import: `@watt42/a2ui-theme/default/surface.css`
+ */
+
+.a2ui-surface.a2ui-light {
+  --a2ui-color-primary: #1177ee;
+  --a2ui-color-on-primary: #fff;
+  --a2ui-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.a2ui-surface {
+  --a2ui-font-size-m: 1rem;
+  --a2ui-font-size-xl: 1.5rem;
+  --a2ui-font-size-2xl: 1.75rem;
+  --a2ui-spacing-s: 0.25rem;
+  --a2ui-spacing-m: 0.5rem;
+  --a2ui-spacing-l: 1rem;
+  --a2ui-border-radius: 0.75rem;
+  --a2ui-border-width: 1px;
+  --a2ui-color-border: #cbd5e1;
+  --a2ui-color-secondary: #eee;
+  --a2ui-color-on-secondary: #333;
+  --a2ui-color-on-surface: #333;
+  --a2ui-color-muted: #64748b;
+  --a2ui-control-height: 2.75rem;
+  --a2ui-control-padding-x: 0.875rem;
+  --a2ui-control-gap: 0.75rem;
+  --a2ui-control-background: #fff;
+  --a2ui-control-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --a2ui-control-focus-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--a2ui-color-primary, #1177ee) 18%, transparent);
+  --a2ui-button-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+  --a2ui-chart-color-1: #1177ee;
+  --a2ui-chart-color-2: #0d9488;
+  --a2ui-chart-color-3: #d97706;
+  --a2ui-chart-color-4: #7c3aed;
+  --a2ui-chart-color-5: #e11d48;
+  --a2ui-chart-color-6: #059669;
+  --a2ui-chart-color-7: #ea580c;
+  --a2ui-chart-color-8: #64748b;
+}
+
+.a2ui-surface h1,
+.a2ui-surface h2,
+.a2ui-surface h3 {
+  margin: 0 0 var(--a2ui-spacing-m, 0.5rem);
+  font-family: var(--a2ui-font-family-title, inherit);
+  line-height: var(--a2ui-line-height-headings, 1.2);
+  color: var(--a2ui-color-on-surface, #333);
+}
+
+.a2ui-surface h1 {
+  font-size: var(--a2ui-font-size-2xl, 1.75rem);
+  font-weight: 700;
+}
+
+.a2ui-surface h2 {
+  font-size: var(--a2ui-font-size-xl, 1.5rem);
+  font-weight: 600;
+}
+
+.a2ui-surface p {
+  margin: 0 0 var(--a2ui-spacing-s, 0.25rem);
+}
+
+/* shadcn/Tailwind token names used by a2ui-react-components/src/ui (CLI 4.17.0). */
+.a2ui-surface {
+  --background: #fff;
+  --foreground: var(--a2ui-color-on-surface, #333);
+  --card: #fff;
+  --card-foreground: var(--a2ui-color-on-surface, #333);
+  --popover: #fff;
+  --popover-foreground: var(--a2ui-color-on-surface, #333);
+  --primary: var(--a2ui-color-primary, #1177ee);
+  --primary-foreground: var(--a2ui-color-on-primary, #fff);
+  --secondary: var(--a2ui-color-secondary, #eee);
+  --secondary-foreground: var(--a2ui-color-on-secondary, #333);
+  --muted: var(--a2ui-color-secondary, #eee);
+  --muted-foreground: var(--a2ui-color-muted, #64748b);
+  --destructive: #dc2626;
+  --border: var(--a2ui-color-border, #ccc);
+  --input: var(--a2ui-color-border, #ccc);
+  --ring: var(--a2ui-color-primary, #1177ee);
+  --radius: var(--a2ui-border-radius, 0.75rem);
+}
+
+/* Catalog control layout and visual treatment. */
+.a2ui-surface [data-slot="card-content"] {
+  display: grid;
+  gap: var(--a2ui-spacing-l, 1rem);
+}
+
+.a2ui-surface label:has([data-slot="input"]),
+.a2ui-surface label:has(textarea) {
+  gap: var(--a2ui-spacing-m, 0.5rem);
+  color: var(--a2ui-color-on-surface, #333);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.a2ui-surface [data-slot="input"],
+.a2ui-surface textarea {
+  min-height: var(--a2ui-control-height, 2.75rem);
+  border-color: var(--a2ui-color-border, #cbd5e1);
+  border-radius: var(--a2ui-border-radius, 0.75rem);
+  background: var(--a2ui-control-background, #fff);
+  padding-inline: var(--a2ui-control-padding-x, 0.875rem);
+  box-shadow: var(--a2ui-control-shadow);
+  color: var(--a2ui-color-on-surface, #333);
+}
+
+.a2ui-surface [data-slot="input"]::placeholder,
+.a2ui-surface textarea::placeholder {
+  color: var(--a2ui-color-muted, #64748b);
+  opacity: 0.85;
+}
+
+.a2ui-surface [data-slot="input"]:hover:not(:disabled),
+.a2ui-surface textarea:hover:not(:disabled) {
+  border-color: color-mix(
+    in srgb,
+    var(--a2ui-color-primary, #1177ee) 45%,
+    var(--a2ui-color-border, #cbd5e1)
+  );
+}
+
+.a2ui-surface [data-slot="input"]:focus-visible,
+.a2ui-surface textarea:focus-visible {
+  border-color: var(--a2ui-color-primary, #1177ee);
+  box-shadow: var(--a2ui-control-focus-shadow);
+}
+
+.a2ui-surface [data-slot="button"] {
+  min-height: var(--a2ui-control-height, 2.75rem);
+  width: fit-content;
+  min-width: 7rem;
+  border-radius: var(--a2ui-border-radius, 0.75rem);
+  padding-inline: calc(var(--a2ui-control-padding-x, 0.875rem) + 0.25rem);
+  box-shadow: var(--a2ui-button-shadow);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.a2ui-surface [data-slot="button"]:hover:not(:disabled) {
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14);
+  transform: translateY(-1px);
+}
+
+.a2ui-surface [data-slot="button"]:active:not(:disabled) {
+  box-shadow: var(--a2ui-button-shadow);
+  transform: translateY(0);
+}
+
+/* Carousel layout — must not depend on app Tailwind scanning linked packages.
+   Side gutters keep prev/next clear of slides. No negative track margin (that
+   pattern clips Card left borders under overflow:hidden and overlaps the prev control). */
+.a2ui-surface [data-slot="carousel"] {
+  position: relative;
+  width: 100%;
+  padding-inline: 2.75rem;
+  box-sizing: border-box;
+}
+
+.a2ui-surface [data-slot="carousel-viewport"] {
+  overflow: hidden;
+  width: 100%;
+}
+
+.a2ui-surface [data-slot="carousel-track"] {
+  display: flex;
+  margin: 0;
+}
+
+.a2ui-surface [data-slot="carousel-item"] {
+  box-sizing: border-box;
+  flex: 0 0 100%;
+  min-width: 0;
+  /* Inset so Card border/shadow is not clipped by the viewport */
+  padding: 0.5rem 0.25rem;
+}
+
+.a2ui-surface [data-slot="carousel"] [data-slot="card"] {
+  width: 100%;
+}
+
+.a2ui-surface [data-slot="carousel"] [data-slot="label"] {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+  color: var(--a2ui-color-on-surface, #333);
+}
+
+.a2ui-surface [data-slot="carousel-previous"],
+.a2ui-surface [data-slot="carousel-next"] {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 2rem;
+  min-width: 2rem;
+  max-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  padding: 0 !important;
+  gap: 0 !important;
+  border-radius: 9999px;
+  line-height: 0;
+  /* Beat Button active:translate-y-px so the control does not jump on click. */
+  transform: translateY(-50%) !important;
+}
+
+.a2ui-surface [data-slot="carousel-previous"]:hover,
+.a2ui-surface [data-slot="carousel-previous"]:active,
+.a2ui-surface [data-slot="carousel-previous"]:focus,
+.a2ui-surface [data-slot="carousel-previous"]:focus-visible,
+.a2ui-surface [data-slot="carousel-next"]:hover,
+.a2ui-surface [data-slot="carousel-next"]:active,
+.a2ui-surface [data-slot="carousel-next"]:focus,
+.a2ui-surface [data-slot="carousel-next"]:focus-visible {
+  transform: translateY(-50%) !important;
+}
+
+.a2ui-surface [data-slot="carousel-previous"] svg,
+.a2ui-surface [data-slot="carousel-next"] svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.a2ui-surface [data-slot="carousel-previous"] svg {
+  transform: translateX(1.5px);
+}
+
+.a2ui-surface [data-slot="carousel-next"] svg {
+  transform: translateX(-1.5px);
+}
+
+.a2ui-surface [data-slot="carousel-previous"] {
+  left: 0.25rem;
+}
+
+.a2ui-surface [data-slot="carousel-next"] {
+  right: 0.25rem;
+}
+
+/* HoverCard — absolutely positioned panel (no layout shift).
+   In-flow open/close pushed siblings under the cursor and caused hover flicker. */
+.a2ui-surface [data-slot="card"]:has(.a2ui-hover-card),
+.a2ui-surface [data-slot="card-content"]:has(.a2ui-hover-card) {
+  overflow: visible;
+}
+
+.a2ui-surface .a2ui-hover-card {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+  z-index: 1;
+}
+
+.a2ui-surface .a2ui-hover-card:has(.a2ui-hover-card-panel.is-open) {
+  z-index: 30;
+}
+
+.a2ui-surface .a2ui-hover-card-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 2rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--a2ui-color-border, #cbd5e1);
+  border-radius: var(--a2ui-border-radius, 0.75rem);
+  background: #fff;
+  color: var(--a2ui-color-on-surface, #333);
+  box-shadow: var(--a2ui-button-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+  cursor: help;
+}
+
+.a2ui-surface .a2ui-hover-card-trigger:hover,
+.a2ui-surface .a2ui-hover-card-trigger:focus-visible {
+  background: var(--a2ui-color-secondary, #f1f5f9);
+  outline: none;
+}
+
+.a2ui-surface .a2ui-hover-card-trigger:focus-visible {
+  box-shadow: var(--a2ui-control-focus-shadow);
+}
+
+.a2ui-surface .a2ui-hover-card-panel {
+  display: none;
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  z-index: 40;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(20rem, 100vw);
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--a2ui-color-border, #cbd5e1);
+  border-radius: var(--a2ui-border-radius, 0.75rem);
+  background: #fff;
+  color: var(--a2ui-color-on-surface, #333);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
+  pointer-events: auto;
+}
+
+.a2ui-surface .a2ui-hover-card-panel.is-open {
+  display: block;
+}
+
+.a2ui-surface .a2ui-hover-card-title {
+  margin: 0 0 0.25rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.a2ui-surface .a2ui-hover-card-body {
+  margin: 0;
+  color: var(--a2ui-color-muted, #64748b);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+/* Dialog modal — opaque panel + high z-index (hosts often use z-[10000] for app dialogs).
+   Do not rely solely on Tailwind bg-popover; portaled nodes may leave .a2ui-surface. */
+.a2ui-dialog-root {
+  --popover: #fff;
+  --popover-foreground: var(--a2ui-color-on-surface, #333);
+  --border: var(--a2ui-color-border, #cbd5e1);
+  --muted-foreground: var(--a2ui-color-muted, #64748b);
+  --primary: var(--a2ui-color-primary, #1177ee);
+  --primary-foreground: var(--a2ui-color-on-primary, #fff);
+}
+
+.a2ui-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.a2ui-dialog-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10001;
+  display: grid;
+  width: min(40rem, calc(100% - 2rem));
+  max-height: min(85vh, 40rem);
+  overflow: auto;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--a2ui-color-border, #cbd5e1);
+  border-radius: var(--a2ui-border-radius, 0.75rem);
+  background: #fff;
+  color: var(--a2ui-color-on-surface, #333);
+  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.24);
+  transform: translate(-50%, -50%);
+}