fix: tint unread mail and draw the mail search, subject, quick reply and thread buttons like the webmail

src/theme/__tests__/mix.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { mix, DARK_COLORS, LIGHT_COLORS } from '../tokens';
+
+describe('mix', () => {
+  it('blends like a translucent layer, but opaque', () => {
+    expect(mix('#ffffff', '#000000', 0.5)).toBe('#808080');
+    expect(mix('#1e3a8a', '#0a0a0a', 0)).toBe('#0a0a0a');
+    expect(mix('#1e3a8a', '#0a0a0a', 1)).toBe('#1e3a8a');
+    expect(mix('rgba(0,0,0,0.5)', '#0a0a0a', 0.3)).toBe('#0a0a0a');
+  });
+
+  it('gives the webmail unread row tint (bg-accent/30)', () => {
+    // #1e3a8a at 30% over #0a0a0a, and #dbeafe at 30% over white.
+    expect(mix(DARK_COLORS.accent, DARK_COLORS.background, 0.3)).toBe('#101830');
+    expect(mix(LIGHT_COLORS.accent, LIGHT_COLORS.background, 0.3)).toBe('#f4f9ff');
+  });
+});

src/theme/tokens.ts

@@ -329,3 +329,22 @@ export const componentSizes = {
   toggleHeight: 24, toggleWidth: 44, toggleThumb: 20,
   fab: 56, badgeSize: 16,
 } as const;
+
+/**
+ * `top` over `bottom` at `amount` opacity, as an opaque #rrggbb: the
+ * webmail's `bg-accent/30` for a surface that must hide what is behind it
+ * (a list row over its swipe actions). Takes #rrggbb; anything else
+ * returns `bottom` unchanged.
+ */
+export function mix(top: string, bottom: string, amount: number): string {
+  const parse = (hex: string) => {
+    const m = /^#([0-9a-f]{6})$/i.exec(hex);
+    if (!m) return null;
+    const n = parseInt(m[1], 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  };
+  const a = parse(top);
+  const b = parse(bottom);
+  if (!a || !b) return bottom;
+  return `#${a.map((v, i) => Math.round(v * amount + b[i] * (1 - amount)).toString(16).padStart(2, '0')).join('')}`;
+}