diff --git a/src/features/profiles/profile-page.tsx b/src/features/profiles/profile-page.tsx
index e4818b7..ac542b5 100644
--- a/src/features/profiles/profile-page.tsx
+++ b/src/features/profiles/profile-page.tsx
@@ -6,7 +6,7 @@ import { getPublicProfile } from "@/features/profiles/profile-service";
function ProfileShell({ children }: { children: ReactNode }) {
return (
-
+
{
expect(window.localStorage.getItem("ideascape.theme")).toBe("dark");
expect(document.querySelector('meta[name="theme-color"]')).toHaveAttribute(
"content",
- "#050505",
+ "#000000",
);
});
diff --git a/src/features/theme/theme-provider.tsx b/src/features/theme/theme-provider.tsx
index 12f7775..e26781c 100644
--- a/src/features/theme/theme-provider.tsx
+++ b/src/features/theme/theme-provider.tsx
@@ -50,7 +50,7 @@ export function ThemeProvider({ children }: PropsWithChildren) {
document.documentElement.style.colorScheme = theme;
document
.querySelector('meta[name="theme-color"]')
- ?.setAttribute("content", theme === "dark" ? "#050505" : "#ffffff");
+ ?.setAttribute("content", theme === "dark" ? "#000000" : "#ffffff");
}, [theme]);
const value = useMemo(
diff --git a/src/index.css b/src/index.css
index f0bd017..3cbac3a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,7 +79,7 @@
--chart-4: #a3a3a3;
--chart-5: #e5e5e5;
--radius: 0.375rem;
- --sidebar: #fafafa;
+ --sidebar: #ffffff;
--sidebar-foreground: #0a0a0a;
--sidebar-primary: #0a0a0a;
--sidebar-primary-foreground: #ffffff;
@@ -90,14 +90,14 @@
}
.dark {
- --background: #050505;
+ --background: #000000;
--foreground: #fafafa;
- --card: #171717;
+ --card: #000000;
--card-foreground: #fafafa;
- --popover: #171717;
+ --popover: #000000;
--popover-foreground: #fafafa;
--primary: #fafafa;
- --primary-foreground: #0a0a0a;
+ --primary-foreground: #000000;
--secondary: #262626;
--secondary-foreground: #fafafa;
--muted: #262626;
@@ -115,10 +115,10 @@
--chart-3: #a3a3a3;
--chart-4: #525252;
--chart-5: #262626;
- --sidebar: #0a0a0a;
+ --sidebar: #000000;
--sidebar-foreground: #fafafa;
--sidebar-primary: #fafafa;
- --sidebar-primary-foreground: #0a0a0a;
+ --sidebar-primary-foreground: #000000;
--sidebar-accent: #262626;
--sidebar-accent-foreground: #fafafa;
--sidebar-border: #737373;
@@ -144,53 +144,6 @@
}
}
-.field-grid {
- background-image:
- linear-gradient(
- to right,
- color-mix(in oklch, var(--border), transparent 55%) 1px,
- transparent 1px
- ),
- linear-gradient(
- to bottom,
- color-mix(in oklch, var(--border), transparent 55%) 1px,
- transparent 1px
- );
- background-size: 32px 32px;
-}
-
-.contour-field {
- position: relative;
- isolation: isolate;
-}
-
-.contour-field::before {
- position: absolute;
- z-index: -1;
- inset: 0;
- pointer-events: none;
- content: "";
- background-image:
- radial-gradient(
- ellipse at 108% 24%,
- transparent 0 9rem,
- color-mix(in oklch, var(--primary), transparent 82%) 9.05rem 9.12rem,
- transparent 9.17rem 12rem,
- color-mix(in oklch, var(--primary), transparent 88%) 12.05rem 12.12rem,
- transparent 12.17rem 16rem,
- var(--signal) 16.05rem 16.12rem,
- transparent 16.17rem
- ),
- radial-gradient(
- ellipse at -8% 86%,
- transparent 0 7rem,
- color-mix(in oklch, var(--primary), transparent 88%) 7.05rem 7.12rem,
- transparent 7.17rem 10rem,
- color-mix(in oklch, var(--primary), transparent 91%) 10.05rem 10.12rem,
- transparent 10.17rem
- );
-}
-
@layer components {
.site-shell {
@apply mx-auto w-full max-w-[90rem] px-4 sm:px-8 lg:px-12;
diff --git a/src/theme-css.test.ts b/src/theme-css.test.ts
index 3e56bd0..dfaeeea 100644
--- a/src/theme-css.test.ts
+++ b/src/theme-css.test.ts
@@ -294,6 +294,9 @@ describe("civic field-notebook design system", () => {
it("uses only black, white, grayscale, and one bright orange signal", () => {
expect(rootTheme).toContain("--background: #ffffff");
+ expect(rootTheme).toContain("--card: #ffffff");
+ expect(rootTheme).toContain("--popover: #ffffff");
+ expect(rootTheme).toContain("--sidebar: #ffffff");
expect(rootTheme).toContain("--foreground: #0a0a0a");
expect(rootTheme).toContain("--primary: #0a0a0a");
expect(rootTheme).toContain("--signal: #ff5a1f");
@@ -302,7 +305,10 @@ describe("civic field-notebook design system", () => {
expect(rootTheme).toContain("--border: #737373");
expect(rootTheme).toContain("--input: #737373");
expect(rootTheme).toContain("--radius: 0.375rem");
- expect(darkTheme).toContain("--background: #050505");
+ expect(darkTheme).toContain("--background: #000000");
+ expect(darkTheme).toContain("--card: #000000");
+ expect(darkTheme).toContain("--popover: #000000");
+ expect(darkTheme).toContain("--sidebar: #000000");
expect(darkTheme).toContain("--foreground: #fafafa");
expect(darkTheme).toContain("--primary: #fafafa");
expect(darkTheme).toContain("--signal: #ff5a1f");
@@ -398,10 +404,15 @@ describe("civic field-notebook design system", () => {
);
});
- it("provides map-grid and contour-field composition primitives", () => {
- expect(stylesheet).toMatch(/\.field-grid\s*\{[\s\S]*background-image:/);
- expect(stylesheet).toMatch(
- /\.contour-field::before\s*\{[\s\S]*background-image:/,
+ it("uses flat pure canvases without grid or contour backgrounds", () => {
+ const productionSources = listVisualSourceFiles(
+ resolve(process.cwd(), "src"),
+ ).map((file) => readFileSync(file, "utf8"));
+ expect(stylesheet).not.toContain("background-image:");
+ expect(stylesheet).not.toContain(".field-grid");
+ expect(stylesheet).not.toContain(".contour-field");
+ expect(productionSources.join("\n")).not.toMatch(
+ /\b(?:field-grid|contour-field)\b/,
);
});