@tailor-platform/app-shell 1.15.0 → 1.17.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,97 @@ 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;
+    /** `--app-shell-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*--app-shell-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-...)`, keyed by property name. */
+    const bridgedText = new Map(
+      [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*var\((--app-shell-type-[a-z-]+)\);/gm)].map(
+        (m) => [m[1], 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]}`, `--app-shell-type-${role}-${slot}`);
+        }
+      }
+      expect(bridgedText).toEqual(expected);
+    });
+
+    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);
+      }
+    });
+  });
 });

package/dist/theme.bridge.css

@@ -36,6 +36,56 @@
     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`.
+   */
+  --text-heading-lg: var(--app-shell-type-heading-lg-size);
+  --text-heading-lg--line-height: var(--app-shell-type-heading-lg-line-height);
+  --text-heading-lg--font-weight: var(--app-shell-type-heading-lg-weight);
+  --text-heading-lg--letter-spacing: var(--app-shell-type-heading-lg-letter-spacing);
+  --text-heading-md: var(--app-shell-type-heading-md-size);
+  --text-heading-md--line-height: var(--app-shell-type-heading-md-line-height);
+  --text-heading-md--font-weight: var(--app-shell-type-heading-md-weight);
+  --text-heading-md--letter-spacing: var(--app-shell-type-heading-md-letter-spacing);
+  --text-heading-sm: var(--app-shell-type-heading-sm-size);
+  --text-heading-sm--line-height: var(--app-shell-type-heading-sm-line-height);
+  --text-heading-sm--font-weight: var(--app-shell-type-heading-sm-weight);
+  --text-heading-sm--letter-spacing: var(--app-shell-type-heading-sm-letter-spacing);
+  --text-body-md: var(--app-shell-type-body-md-size);
+  --text-body-md--line-height: var(--app-shell-type-body-md-line-height);
+  --text-body-md--font-weight: var(--app-shell-type-body-md-weight);
+  --text-body-md--letter-spacing: var(--app-shell-type-body-md-letter-spacing);
+  --text-body-sm: var(--app-shell-type-body-sm-size);
+  --text-body-sm--line-height: var(--app-shell-type-body-sm-line-height);
+  --text-body-sm--font-weight: var(--app-shell-type-body-sm-weight);
+  --text-body-sm--letter-spacing: var(--app-shell-type-body-sm-letter-spacing);
+  --text-label-md: var(--app-shell-type-label-md-size);
+  --text-label-md--line-height: var(--app-shell-type-label-md-line-height);
+  --text-label-md--font-weight: var(--app-shell-type-label-md-weight);
+  --text-label-md--letter-spacing: var(--app-shell-type-label-md-letter-spacing);
+  --text-label-sm: var(--app-shell-type-label-sm-size);
+  --text-label-sm--line-height: var(--app-shell-type-label-sm-line-height);
+  --text-label-sm--font-weight: var(--app-shell-type-label-sm-weight);
+  --text-label-sm--letter-spacing: var(--app-shell-type-label-sm-letter-spacing);
+  --text-code-sm: var(--app-shell-type-code-sm-size);
+  --text-code-sm--line-height: var(--app-shell-type-code-sm-line-height);
+  --text-code-sm--font-weight: var(--app-shell-type-code-sm-weight);
+  --text-code-sm--letter-spacing: var(--app-shell-type-code-sm-letter-spacing);
+  --text-body-md-relaxed: var(--app-shell-type-body-md-relaxed-size);
+  --text-body-md-relaxed--line-height: var(--app-shell-type-body-md-relaxed-line-height);
+  --text-body-md-relaxed--font-weight: var(--app-shell-type-body-md-relaxed-weight);
+  --text-body-md-relaxed--letter-spacing: var(--app-shell-type-body-md-relaxed-letter-spacing);
+  --text-body-sm-relaxed: var(--app-shell-type-body-sm-relaxed-size);
+  --text-body-sm-relaxed--line-height: var(--app-shell-type-body-sm-relaxed-line-height);
+  --text-body-sm-relaxed--font-weight: var(--app-shell-type-body-sm-relaxed-weight);
+  --text-body-sm-relaxed--letter-spacing: var(--app-shell-type-body-sm-relaxed-letter-spacing);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -100,6 +150,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

@@ -16,7 +16,12 @@
  *   4. PALETTE        — optional: radius, charts, shadows, destructive.
  *
  * Inherited from default.css — do not duplicate in new palettes:
- *   --ring, --sidebar-*, --status-*, --alert-*.
+ *   --ring, --sidebar-*, --primitive-* (colour scales), --status-*, --alert-*,
+ *   --app-shell-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,13 @@
  *    `@tailor-platform/app-shell/styles` in the consuming app.
  *
  * DO NOT SET (inherited from `:root` in default.css):
- *   --ring, --sidebar-*, --status-*, --alert-*
+ *   --ring, --sidebar-*, --primitive-* (colour scales), --status-*, --alert-*,
+ *   --app-shell-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-* or --alert-*, they alias the roles.
+ * Typography roles (--app-shell-type-*) inherit too: do not copy the defaults,
+ * override only the variables whose values differ.
  *
  * PREVIEW: `/showcase/colors` in the Vite example app.
  * ═══════════════════════════════════════════════════════════════════════════

package/dist/themes/bloom.css

@@ -146,15 +146,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

@@ -146,15 +146,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);
-}