@multiplatform.one/theme 7.84.0 → 7.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.84.0",
+  "version": "7.84.1",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -115,8 +115,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.84.0",
-    "@multiplatform.one/store": "^7.84.0",
+    "@multiplatform.one/platform": "^7.84.1",
+    "@multiplatform.one/store": "^7.84.1",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -132,20 +132,20 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.84.0",
-    "@multiplatform.one/test-utils": "7.84.0",
+    "@multiplatform.one/config": "7.84.1",
+    "@multiplatform.one/test-utils": "7.84.1",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/build": "2.7.6",
     "@tamagui/font-inter": "2.7.6",
     "@testing-library/react": "^16.3.3",
     "@vitejs/plugin-react": "^6.1.2",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.12",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "tamagui": "2.7.6",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.12"
   },
   "peerDependencies": {
     "@tamagui/animations-css": "^2.0.0-rc",

package/src/theme/devtools/ColorLineVisualizer.spec.tsx

@@ -0,0 +1,104 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { semanticGroups } from "../colorRules";
+import { defaultKnobs } from "../knobs";
+import { ColorLineVisualizer } from "./ColorLineVisualizer";
+import { cellSize } from "./vizConstants";
+
+const ramp = (hue: number) =>
+  Array.from({ length: 12 }, (_, i) => `hsl(${hue}, 60%, ${90 - i * 6}%)`);
+
+function normalized(color: string) {
+  const probe = document.createElement("div");
+  probe.style.background = color;
+  return probe.style.background;
+}
+
+function stepCells() {
+  return Array.from({ length: 12 }, (_, i) => screen.getAllByTitle(`$color${i + 1}`));
+}
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("style");
+});
+
+describe("ColorLineVisualizer", () => {
+  it("paints the twelve steps of the given ramp in order, numbered 1 to 12", () => {
+    const colors = ramp(210);
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={colors} />);
+    expect(screen.getByText("Theme")).toBeTruthy();
+    stepCells().forEach(([cell], i) => {
+      expect(cell.textContent).toBe(String(i + 1));
+      expect(cell.style.background).toBe(normalized(colors[i]));
+      expect(cell.style.width).toBe(`${cellSize}px`);
+      expect(cell.style.height).toBe(`${cellSize}px`);
+    });
+  });
+
+  it("brackets every semantic group over the steps it spans", () => {
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={ramp(30)} />);
+    for (const group of semanticGroups) {
+      const bracket = screen.getByText(group.label).parentElement as HTMLElement;
+      expect(bracket.style.left).toBe(`${(group.from - 1) * cellSize}px`);
+      expect(bracket.style.width).toBe(`${(group.to - group.from + 1) * cellSize}px`);
+    }
+  });
+
+  it("adds a half-height opposite row and an accent section only for full ramps", () => {
+    const { rerender } = render(
+      <ColorLineVisualizer
+        knobs={defaultKnobs}
+        isDark={false}
+        themeColors={ramp(210)}
+        oppositeThemeColors={ramp(200).slice(0, 11)}
+        accentColors={ramp(120).slice(0, 4)}
+      />,
+    );
+    expect(stepCells().every((cells) => cells.length === 1)).toBe(true);
+    expect(screen.queryByText("accent")).toBeNull();
+
+    const opposite = ramp(200);
+    const accent = ramp(120);
+    rerender(
+      <ColorLineVisualizer
+        knobs={defaultKnobs}
+        isDark={false}
+        themeColors={ramp(210)}
+        oppositeThemeColors={opposite}
+        accentColors={accent}
+        oppositeAccentColors={ramp(100)}
+      />,
+    );
+    expect(screen.getByText("accent")).toBeTruthy();
+    const cells = stepCells();
+    expect(cells.every((rows) => rows.length === 4)).toBe(true);
+    const [, oppositeRow, accentRow, oppositeAccentRow] = cells[0];
+    expect(oppositeRow.style.height).toBe(`${Math.round(cellSize / 2)}px`);
+    expect(oppositeRow.style.background).toBe(normalized(opposite[0]));
+    expect(accentRow.style.height).toBe(`${cellSize}px`);
+    expect(accentRow.style.background).toBe(normalized(accent[0]));
+    expect(oppositeAccentRow.style.height).toBe(`${Math.round(cellSize / 2)}px`);
+  });
+
+  it("reads the page's --color1..12 when no ramp is passed", () => {
+    const colors = ramp(330);
+    colors.forEach((color, i) =>
+      document.documentElement.style.setProperty(`--color${i + 1}`, color),
+    );
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} />);
+    stepCells().forEach(([cell], i) => {
+      expect(cell.style.background).toBe(normalized(colors[i]));
+    });
+  });
+
+  it("draws its card in the scheme it is told", () => {
+    const { container, rerender } = render(
+      <ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={ramp(0)} />,
+    );
+    const light = (container.firstElementChild as HTMLElement).style.background;
+    rerender(<ColorLineVisualizer knobs={defaultKnobs} isDark themeColors={ramp(0)} />);
+    const dark = (container.firstElementChild as HTMLElement).style.background;
+    expect(light).not.toBe(dark);
+  });
+});