@tailor-platform/app-shell 1.16.0 → 1.18.0

package/dist/theme-bridge.test.ts

@@ -14,6 +14,9 @@ const here = dirname(fileURLToPath(import.meta.url));
 const bridge = readFileSync(join(here, "theme.bridge.css"), "utf8");
 const defaultTheme = readFileSync(join(here, "themes/default.css"), "utf8");
 
+/** Semantic colour roles: 5 intents x 8 roles, named `--{intent}-{role}`. */
+const SEMANTIC_PREFIX = "(?:info|success|warning|danger|neutral)";
+
 /** Token names defined in the default palette for a given prefix, e.g. `alert`. */
 function definedTokens(prefix: string): string[] {
   const matches = defaultTheme.matchAll(new RegExp(`^\\s*--(${prefix}-[a-z-]+):`, "gm"));
@@ -29,7 +32,11 @@ function bridgedTokens(prefix: string): Map<string, string> {
 }
 
 describe("theme bridge", () => {
-  describe.each(["alert", "status"])("--%s-* tokens", (prefix) => {
+  describe.each([
+    ["alert", "alert"],
+    ["status", "status"],
+    ["semantic colour role", SEMANTIC_PREFIX],
+  ])("--%s-* tokens", (_label, prefix) => {
     const defined = definedTokens(prefix);
     const bridged = bridgedTokens(prefix);
 
@@ -56,4 +63,120 @@ describe("theme bridge", () => {
     // both files — fails loudly.
     expect(bridgedTokens("alert").size).toBe(20);
   });
+
+  it("bridges all 40 semantic colour roles", () => {
+    // 5 intents x 8 roles, pinned for the same reason as the alert count.
+    expect(bridgedTokens(SEMANTIC_PREFIX).size).toBe(40);
+  });
+
+  describe("typography roles", () => {
+    const slots = ["size", "line-height", "weight", "letter-spacing"] as const;
+    /** `--type-<role>-<slot>` variables in the default palette, grouped by role. */
+    const defined = new Map<string, Map<string, string>>();
+    for (const m of defaultTheme.matchAll(
+      /^\s*--type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
+    )) {
+      const role = m[1];
+      defined.set(role, (defined.get(role) ?? new Map()).set(m[2], m[3].trim()));
+    }
+    /**
+     * Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-X, var(--type-X))`,
+     * keyed by property name. The value is the `--type-*` name, or a marker when the
+     * entry does not read the same deprecated `--app-shell-type-*` name first.
+     */
+    const bridgedText = new Map(
+      [
+        ...bridge.matchAll(
+          /^\s*(--text-[a-z-]+):\s*var\(\s*--app-shell-type-([a-z-]+),\s*var\(\s*--type-([a-z-]+)\s*\)\s*\);/gm,
+        ),
+      ].map((m) => [m[1], m[2] === m[3] ? `--type-${m[3]}` : `mismatched old name ${m[2]}`]),
+    );
+
+    it("pins the role count at 10", () => {
+      // Dropping a whole role from both files would still pass the symmetry checks.
+      expect(defined.size).toBe(10);
+    });
+
+    it("defines exactly four variables per role", () => {
+      for (const [role, values] of defined) {
+        expect([...values.keys()].toSorted(), role).toEqual([...slots].toSorted());
+      }
+    });
+
+    it("bridges every role slot to its own variable", () => {
+      const suffix = {
+        size: "",
+        "line-height": "--line-height",
+        weight: "--font-weight",
+        "letter-spacing": "--letter-spacing",
+      } as const;
+      const expected = new Map<string, string>();
+      for (const role of defined.keys()) {
+        for (const slot of slots) {
+          expected.set(`--text-${role}${suffix[slot]}`, `--type-${role}-${slot}`);
+        }
+      }
+      expect(bridgedText).toEqual(expected);
+    });
+
+    it("reads the deprecated --app-shell-type-* name first in every bridge entry", () => {
+      // 1.17.0 shipped the roles under --app-shell-type-*. The bridge resolves the
+      // fallback on the element, so an old-name override keeps working at any scope.
+      const typeEntries = [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*([^;]+);/gm)].filter((m) =>
+        m[2].includes("--type-"),
+      );
+      expect(typeEntries.length).toBe(defined.size * slots.length);
+      expect(typeEntries.filter((m) => !bridgedText.has(m[1])).map((m) => m[1])).toEqual([]);
+    });
+
+    it("does not collide with a --color-* token that Tailwind resolves first", () => {
+      // `text-<name>` resolves against --color-<name> before --text-<name>.
+      const colors = [...bridge.matchAll(/^\s*--color-([a-z0-9-]+):/gm)].map((m) => m[1]);
+      for (const role of defined.keys()) {
+        expect(colors, role).not.toContain(role);
+      }
+      for (const name of colors) {
+        expect(name).not.toMatch(/^(heading|body|label|code)(-|$)/);
+      }
+    });
+
+    it("keeps the line boxes on the spec values", () => {
+      // size (px) x line-height ratio = line box (px); weight and letter spacing are pinned too. Values from decisions/typography-roles.md.
+      const spec: Record<
+        string,
+        [size: number, lineBox: number, weight: number, letterSpacing: string]
+      > = {
+        "heading-lg": [24, 32, 700, "-0.025em"],
+        "heading-md": [18, 28, 600, "0em"],
+        "heading-sm": [14, 20, 600, "0em"],
+        "body-md": [14, 20, 400, "0em"],
+        "body-sm": [12, 16, 400, "0em"],
+        "label-md": [14, 20, 500, "0em"],
+        "label-sm": [12, 16, 500, "0em"],
+        "code-sm": [12, 18, 400, "0em"],
+        "body-md-relaxed": [14, 24, 400, "0em"],
+        "body-sm-relaxed": [12, 20, 400, "0em"],
+      };
+      expect([...defined.keys()].toSorted()).toEqual(Object.keys(spec).toSorted());
+      for (const [role, [size, lineBox, weight, letterSpacing]] of Object.entries(spec)) {
+        const values = defined.get(role)!;
+        const rem = /^([0-9.]+)rem$/.exec(values.get("size") ?? "");
+        expect(rem, `${role} size`).not.toBeNull();
+        expect(Number(rem![1]) * 16, `${role} size`).toBe(size);
+        const ratio = /^calc\((\d+) \/ (\d+)\)$/.exec(values.get("line-height") ?? "");
+        expect(ratio, `${role} line-height`).not.toBeNull();
+        expect(Number(ratio![2]), `${role} ratio base`).toBe(size);
+        expect(Number(ratio![1]), `${role} line box`).toBe(lineBox);
+        expect(Number(values.get("weight")), `${role} weight`).toBe(weight);
+        expect(values.get("letter-spacing"), `${role} letter-spacing`).toBe(letterSpacing);
+      }
+    });
+  });
+
+  it("defines --backdrop in the default palette and bridges it as bg-backdrop", () => {
+    // Dialog, Sheet and the CsvImporter drawer use `bg-backdrop`; without both
+    // lines the backdrop compiles to an undefined variable and turns transparent.
+    expect(defaultTheme).toMatch(/^\s*--backdrop:\s*var\(--primitive-black-a7\);/m);
+    expect(bridge).toMatch(/^\s*--color-backdrop:\s*var\(--backdrop\);/m);
+  });
 });

package/dist/theme.bridge.css

@@ -36,6 +36,142 @@
     sans-serif
   );
 
+  /*
+   * Typography roles. `text-heading-lg` sets font-size, line-height, font-weight and
+   * letter-spacing together. The values live in themes/default.css and are referenced
+   * with `var()` here, like the colors: `@theme inline` writes literals into the
+   * utility, so a value placed here could not be overridden on `:root`.
+   *
+   * The `--text-*` namespace cannot set font-family. `text-code-sm` is used with
+   * `font-mono`.
+   *
+   * Each entry reads the deprecated `--app-shell-type-*` name first: 1.17.0
+   * shipped the roles under that name. The fallback is resolved on the element
+   * that uses the utility, so an old-name override keeps working at any scope,
+   * not only on `:root`. Remove the old names in the next major.
+   */
+  --text-heading-lg: var(--app-shell-type-heading-lg-size, var(--type-heading-lg-size));
+  --text-heading-lg--line-height: var(
+    --app-shell-type-heading-lg-line-height,
+    var(--type-heading-lg-line-height)
+  );
+  --text-heading-lg--font-weight: var(
+    --app-shell-type-heading-lg-weight,
+    var(--type-heading-lg-weight)
+  );
+  --text-heading-lg--letter-spacing: var(
+    --app-shell-type-heading-lg-letter-spacing,
+    var(--type-heading-lg-letter-spacing)
+  );
+  --text-heading-md: var(--app-shell-type-heading-md-size, var(--type-heading-md-size));
+  --text-heading-md--line-height: var(
+    --app-shell-type-heading-md-line-height,
+    var(--type-heading-md-line-height)
+  );
+  --text-heading-md--font-weight: var(
+    --app-shell-type-heading-md-weight,
+    var(--type-heading-md-weight)
+  );
+  --text-heading-md--letter-spacing: var(
+    --app-shell-type-heading-md-letter-spacing,
+    var(--type-heading-md-letter-spacing)
+  );
+  --text-heading-sm: var(--app-shell-type-heading-sm-size, var(--type-heading-sm-size));
+  --text-heading-sm--line-height: var(
+    --app-shell-type-heading-sm-line-height,
+    var(--type-heading-sm-line-height)
+  );
+  --text-heading-sm--font-weight: var(
+    --app-shell-type-heading-sm-weight,
+    var(--type-heading-sm-weight)
+  );
+  --text-heading-sm--letter-spacing: var(
+    --app-shell-type-heading-sm-letter-spacing,
+    var(--type-heading-sm-letter-spacing)
+  );
+  --text-body-md: var(--app-shell-type-body-md-size, var(--type-body-md-size));
+  --text-body-md--line-height: var(
+    --app-shell-type-body-md-line-height,
+    var(--type-body-md-line-height)
+  );
+  --text-body-md--font-weight: var(--app-shell-type-body-md-weight, var(--type-body-md-weight));
+  --text-body-md--letter-spacing: var(
+    --app-shell-type-body-md-letter-spacing,
+    var(--type-body-md-letter-spacing)
+  );
+  --text-body-sm: var(--app-shell-type-body-sm-size, var(--type-body-sm-size));
+  --text-body-sm--line-height: var(
+    --app-shell-type-body-sm-line-height,
+    var(--type-body-sm-line-height)
+  );
+  --text-body-sm--font-weight: var(--app-shell-type-body-sm-weight, var(--type-body-sm-weight));
+  --text-body-sm--letter-spacing: var(
+    --app-shell-type-body-sm-letter-spacing,
+    var(--type-body-sm-letter-spacing)
+  );
+  --text-label-md: var(--app-shell-type-label-md-size, var(--type-label-md-size));
+  --text-label-md--line-height: var(
+    --app-shell-type-label-md-line-height,
+    var(--type-label-md-line-height)
+  );
+  --text-label-md--font-weight: var(--app-shell-type-label-md-weight, var(--type-label-md-weight));
+  --text-label-md--letter-spacing: var(
+    --app-shell-type-label-md-letter-spacing,
+    var(--type-label-md-letter-spacing)
+  );
+  --text-label-sm: var(--app-shell-type-label-sm-size, var(--type-label-sm-size));
+  --text-label-sm--line-height: var(
+    --app-shell-type-label-sm-line-height,
+    var(--type-label-sm-line-height)
+  );
+  --text-label-sm--font-weight: var(--app-shell-type-label-sm-weight, var(--type-label-sm-weight));
+  --text-label-sm--letter-spacing: var(
+    --app-shell-type-label-sm-letter-spacing,
+    var(--type-label-sm-letter-spacing)
+  );
+  --text-code-sm: var(--app-shell-type-code-sm-size, var(--type-code-sm-size));
+  --text-code-sm--line-height: var(
+    --app-shell-type-code-sm-line-height,
+    var(--type-code-sm-line-height)
+  );
+  --text-code-sm--font-weight: var(--app-shell-type-code-sm-weight, var(--type-code-sm-weight));
+  --text-code-sm--letter-spacing: var(
+    --app-shell-type-code-sm-letter-spacing,
+    var(--type-code-sm-letter-spacing)
+  );
+  --text-body-md-relaxed: var(
+    --app-shell-type-body-md-relaxed-size,
+    var(--type-body-md-relaxed-size)
+  );
+  --text-body-md-relaxed--line-height: var(
+    --app-shell-type-body-md-relaxed-line-height,
+    var(--type-body-md-relaxed-line-height)
+  );
+  --text-body-md-relaxed--font-weight: var(
+    --app-shell-type-body-md-relaxed-weight,
+    var(--type-body-md-relaxed-weight)
+  );
+  --text-body-md-relaxed--letter-spacing: var(
+    --app-shell-type-body-md-relaxed-letter-spacing,
+    var(--type-body-md-relaxed-letter-spacing)
+  );
+  --text-body-sm-relaxed: var(
+    --app-shell-type-body-sm-relaxed-size,
+    var(--type-body-sm-relaxed-size)
+  );
+  --text-body-sm-relaxed--line-height: var(
+    --app-shell-type-body-sm-relaxed-line-height,
+    var(--type-body-sm-relaxed-line-height)
+  );
+  --text-body-sm-relaxed--font-weight: var(
+    --app-shell-type-body-sm-relaxed-weight,
+    var(--type-body-sm-relaxed-weight)
+  );
+  --text-body-sm-relaxed--letter-spacing: var(
+    --app-shell-type-body-sm-relaxed-letter-spacing,
+    var(--type-body-sm-relaxed-letter-spacing)
+  );
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -55,6 +191,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-backdrop: var(--backdrop);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -100,6 +237,47 @@
   --color-alert-info-foreground-muted: var(--alert-info-foreground-muted);
   --color-alert-info-border: var(--alert-info-border);
 
+  --color-neutral-surface: var(--neutral-surface);
+  --color-neutral-surface-hover: var(--neutral-surface-hover);
+  --color-neutral-border: var(--neutral-border);
+  --color-neutral-solid: var(--neutral-solid);
+  --color-neutral-solid-hover: var(--neutral-solid-hover);
+  --color-neutral-text: var(--neutral-text);
+  --color-neutral-contrast: var(--neutral-contrast);
+  --color-neutral-indicator: var(--neutral-indicator);
+  --color-info-surface: var(--info-surface);
+  --color-info-surface-hover: var(--info-surface-hover);
+  --color-info-border: var(--info-border);
+  --color-info-solid: var(--info-solid);
+  --color-info-solid-hover: var(--info-solid-hover);
+  --color-info-text: var(--info-text);
+  --color-info-contrast: var(--info-contrast);
+  --color-info-indicator: var(--info-indicator);
+  --color-success-surface: var(--success-surface);
+  --color-success-surface-hover: var(--success-surface-hover);
+  --color-success-border: var(--success-border);
+  --color-success-solid: var(--success-solid);
+  --color-success-solid-hover: var(--success-solid-hover);
+  --color-success-text: var(--success-text);
+  --color-success-contrast: var(--success-contrast);
+  --color-success-indicator: var(--success-indicator);
+  --color-warning-surface: var(--warning-surface);
+  --color-warning-surface-hover: var(--warning-surface-hover);
+  --color-warning-border: var(--warning-border);
+  --color-warning-solid: var(--warning-solid);
+  --color-warning-solid-hover: var(--warning-solid-hover);
+  --color-warning-text: var(--warning-text);
+  --color-warning-contrast: var(--warning-contrast);
+  --color-warning-indicator: var(--warning-indicator);
+  --color-danger-surface: var(--danger-surface);
+  --color-danger-surface-hover: var(--danger-surface-hover);
+  --color-danger-border: var(--danger-border);
+  --color-danger-solid: var(--danger-solid);
+  --color-danger-solid-hover: var(--danger-solid-hover);
+  --color-danger-text: var(--danger-text);
+  --color-danger-contrast: var(--danger-contrast);
+  --color-danger-indicator: var(--danger-indicator);
+
   --shadow-xs: var(--semantic-shadow-xs);
   --shadow-sm: var(--semantic-shadow-sm);
   --shadow-md: var(--semantic-shadow-md);

package/dist/theme.css

@@ -13,10 +13,16 @@
  *   2. SHELL GRADIENT — optional; branded palettes only (bloom, cream).
  *   3. SYSTEM         — surfaces & chrome; copy default or tune for brand tint
  *                       (foreground, muted, popover, card, borders).
- *   4. PALETTE        — optional: radius, charts, shadows, destructive.
+ *   4. PALETTE        — optional: radius, charts, shadows.
  *
  * Inherited from default.css — do not duplicate in new palettes:
- *   --ring, --sidebar-*, --status-*, --alert-*.
+ *   --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
+ *   --destructive, --destructive-foreground (aliases of the danger roles),
+ *   --type-* (typography roles).
+ *   The colour roles --{intent}-{role} inherit too; a palette overrides them
+ *   only to recolour the status components. Typography roles are inherited
+ *   the same way: do not copy the defaults, override only the variables
+ *   whose values differ.
  *
  * Light/dark mode is controlled separately via `.dark` on <html>.
  * Palette selection is by CSS import; there is no runtime palette prop.

package/dist/themes/_template.css

@@ -17,7 +17,14 @@
  *    `@tailor-platform/app-shell/styles` in the consuming app.
  *
  * DO NOT SET (inherited from `:root` in default.css):
- *   --ring, --sidebar-*, --status-*, --alert-*
+ *   --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
+ *   --destructive, --destructive-foreground, --type-*
+ * The colour roles --{info|success|warning|danger|neutral}-{role} also inherit.
+ * Override a role only to recolour the status components (Badge, Alert, ...)
+ * for this palette; never set --status-*, --alert-* or --destructive*, they alias the roles
+ * (--destructive is the danger solid; recolour it with --danger-solid).
+ * Typography roles (--type-*) inherit too: do not copy the defaults,
+ * override only the variables whose values differ.
  *
  * PREVIEW: `/showcase/colors` in the Vite example app.
  * ═══════════════════════════════════════════════════════════════════════════
@@ -54,7 +61,6 @@
   --sidebar-border: rgba(229, 229, 229, 1);
 
   /* ── 4. PALETTE — optional overrides (else inherited from :root) ──────── */
-  --destructive: rgba(220, 38, 38, 1);
   --radius: 0.625rem;
   --chart-1: /* brand-adjacent */;
   --chart-2: /* ... */;
@@ -98,7 +104,6 @@
   --sidebar-border: rgba(255, 255, 255, 0.1);
 
   /* ── 4. PALETTE (dark overrides) ─────────────────────────────────────── */
-  --destructive: rgba(248, 113, 113, 1);
   --chart-1: /* ... */;
   --chart-2: /* ... */;
   --chart-3: /* ... */;

package/dist/themes/bloom.css

@@ -34,7 +34,6 @@
   --sidebar-border: rgba(0, 0, 0, 0.08);
 
   /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
-  --destructive: rgba(220, 38, 38, 1);
   --radius: 1rem;
   --chart-1: rgba(83, 90, 232, 1);
   --chart-2: rgba(0, 151, 156, 1);
@@ -78,7 +77,6 @@
   --sidebar-border: rgba(255, 255, 255, 0.08);
 
   /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
-  --destructive: rgba(248, 113, 113, 1);
   --chart-1: rgba(131, 138, 247, 1);
   --chart-2: rgba(45, 191, 196, 1);
   --chart-3: rgba(94, 234, 212, 1);
@@ -146,15 +144,9 @@ html
   background-color: transparent;
 }
 
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
 html [data-slot="data-table-filter-chip"] {
   background-color: transparent;
   transition:
     background-color 0.12s ease,
     color 0.12s ease;
 }
-
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}

package/dist/themes/cream.css

@@ -34,7 +34,6 @@
   --sidebar-border: rgba(0, 0, 0, 0.08);
 
   /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
-  --destructive: rgba(220, 38, 38, 1);
   --radius: 1rem;
   --chart-1: rgba(83, 90, 232, 1);
   --chart-2: rgba(0, 151, 156, 1);
@@ -78,7 +77,6 @@
   --sidebar-border: rgba(255, 255, 255, 0.08);
 
   /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
-  --destructive: rgba(248, 113, 113, 1);
   --chart-1: rgba(131, 138, 247, 1);
   --chart-2: rgba(45, 191, 196, 1);
   --chart-3: rgba(94, 234, 212, 1);
@@ -146,15 +144,9 @@ html
   background-color: transparent;
 }
 
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
 html [data-slot="data-table-filter-chip"] {
   background-color: transparent;
   transition:
     background-color 0.12s ease,
     color 0.12s ease;
 }
-
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}