fix: simplify workspace borders and design rules

web/workspace/tests/bevel-contract.test.ts

@@ -3,7 +3,7 @@ function assert(condition: unknown, message: string): asserts condition {
   if (!condition) throw new Error(message);
 }
 
-Deno.test("Bevel keeps depth visual while semantic controls remain children", async () => {
+Deno.test("Bevel draws a plain selectable border around semantic children", async () => {
   const source = await Deno.readTextFile(
     new URL("../src/lib/workspace/ui/Bevel.svelte", import.meta.url),
   );
@@ -19,97 +19,71 @@ Deno.test("Bevel keeps depth visual while semantic controls remain children", as
 
   for (
     const contract of [
-      "export type BevelProfile = 'edge' | 'ridge'",
-      "export type BevelDepth = 'raised' | 'inset'",
       "children: Snippet<[]>",
       "top?: boolean",
       "right?: boolean",
       "bottom?: boolean",
       "left?: boolean",
-      "pointer-events: none",
-      "data-pressed={pressed || undefined}",
+      "data-invalid={invalid || undefined}",
+      "border-style: solid",
+      "border-color: var(--line-strong)",
+      "border-width: 1px",
       "aria-invalid='true'",
       "forced-colors: active",
-      "mask-composite: exclude",
     ]
   ) {
     assert(source.includes(contract), `Bevel must preserve ${contract}`);
   }
 
-  assert(
-    source.includes("@supports") &&
-      source.includes("border-style: solid") &&
-      source.includes(
-        "border-color: var(--_fallback-border, var(--line-strong))",
-      ) &&
-      source.includes("--_fallback-border: var(--line)") &&
-      source.includes("--_fallback-border: var(--line-strong)") &&
-      source.includes(
-        "border-width: var(--_top-w) var(--_right-w) var(--_bottom-w) var(--_left-w)",
-      ),
-    "Bevel fallback colors must not outrank the enhanced transparent border",
-  );
-  assert(
-    source.includes("calc(max(cos(180deg - var(--_L)), 0) * 100%)") &&
-      source.includes("var(--_s6) 90deg") &&
-      source.includes("var(--_s6) 270deg") &&
-      !source.includes("+ 1) * 50%"),
-    "Bevel must clamp unlit faces to the configured shadow without ambient light",
-  );
-  assert(
-    appCss.includes("--bevel-face-width: 1px") &&
-      source.includes("--_W: var(--bevel-face-width)") &&
-      source.includes("inset: var(--bevel-face-width)") &&
-      !source.includes("BevelSize") &&
-      !source.includes("data-size"),
-    "Bevel must use the project-wide 1px edge and compose ridge from two 1px faces",
-  );
   assert(
     source.includes("data-top={top ? 'true' : 'false'}") &&
       source.includes("data-right={right ? 'true' : 'false'}") &&
       source.includes("data-bottom={bottom ? 'true' : 'false'}") &&
       source.includes("data-left={left ? 'true' : 'false'}") &&
-      source.includes(".bevel[data-top='false'] {") &&
+      source.includes("border-top-width: 0") &&
+      source.includes("border-right-width: 0") &&
+      source.includes("border-bottom-width: 0") &&
+      source.includes("border-left-width: 0") &&
       source.includes("--bevel-top-left-radius: 0px") &&
-      source.includes("--bevel-top-right-radius: 0px") &&
-      source.includes(".bevel[data-right='false'] {") &&
-      source.includes("--bevel-bottom-right-radius: 0px") &&
-      source.includes(".bevel[data-bottom='false'] {") &&
-      source.includes("--bevel-bottom-left-radius: 0px") &&
-      source.includes(".bevel[data-left='false'] {") &&
-      source.includes("--bevel-top-inset: 0px") &&
-      source.includes("--bevel-right-inset: 0px") &&
-      source.includes("--bevel-bottom-inset: 0px") &&
-      source.includes("--bevel-left-inset: 0px"),
-    "Bevel must draw selected sides and round only corners shared by two enabled sides",
+      source.includes("--bevel-bottom-right-radius: 0px"),
+    "Bevel must draw only selected sides and round only corners shared by enabled sides",
   );
   assert(
-    source.includes("data-profile={profile}") &&
-      source.includes("[data-profile='ridge'][data-depth='raised']::after") &&
-      source.includes("[data-profile='ridge'][data-depth='inset']::after") &&
-      !source.includes("data-depth='ridge'"),
-    "Bevel must keep edge/ridge profile orthogonal to raised/inset depth",
+    !source.includes("BevelProfile") &&
+      !source.includes("BevelDepth") &&
+      !source.includes("profile") &&
+      !source.includes("depth") &&
+      !source.includes("pressed") &&
+      !source.includes("::before") &&
+      !source.includes("::after") &&
+      !source.includes("gradient") &&
+      !source.includes("mask") &&
+      !source.includes("color-mix") &&
+      !source.includes("cos(") &&
+      !source.includes("pow(") &&
+      !appCss.includes("--bevel-highlight") &&
+      !appCss.includes("--bevel-shadow") &&
+      !appCss.includes("--bevel-highlight-curve") &&
+      !appCss.includes("--bevel-face-width"),
+    "Bevel must remain a plain border without lighting or depth simulation",
   );
   assert(
-    appCss.includes("--bevel-highlight: #fff") &&
-      appCss.includes("--bevel-shadow: #000") &&
-      !source.includes("surface") &&
-      !source.includes("tone") &&
-      !source.includes("background-color:"),
-    "Bevel must use the shared highlight and shadow palette without owning a surface tone",
+    !source.includes("background:") &&
+      !source.includes("background-color:") &&
+      source.includes("button, input, select, textarea"),
+    "Bevel must not own surface color and must keep semantic controls as children",
   );
   assert(
-    designLanguage.includes("Bevel自体へbackgroundやsurface toneを与えず") &&
+    designLanguage.includes("1pxの単色borderを描くvisual wrapper") &&
+      designLanguage.includes(
+        "照明、raised／inset、ridge／grooveを表現しない",
+      ) &&
       designLanguage.includes("text/content areaへ適用する"),
-    "The design language must prohibit Bevel surface colors outside the child content area",
-  );
-  assert(
-    source.includes("button, input, select, textarea"),
-    "Bevel must leave native semantic controls inside the visual wrapper",
+    "The design language must define Bevel as a plain border without surface ownership",
   );
 });
 
-Deno.test("Workspace showroom exercises raised inset and ridge edges", async () => {
+Deno.test("Workspace showroom exercises closed and adjacent borders", async () => {
   const workspaceSource = await Deno.readTextFile(
     new URL(
       "../src/routes/design-lab/workspace-web-ux/+page.svelte",
@@ -133,21 +107,26 @@ Deno.test("Workspace showroom exercises raised inset and ridge edges", async ()
   )?.[1];
 
   assert(
-    workspaceSource.includes('profile="edge" depth="raised"') &&
-      workspaceSource.includes('profile="ridge" depth="raised"') &&
-      workspaceSource.includes('profile="ridge" depth="inset"') &&
+    workspaceSource.includes('<div class="border-matrix">') &&
       workspaceSource.includes("right={false} bottom={false}") &&
       workspaceSource.includes("top={false} left={false}") &&
-      workspaceSource.includes("pressed"),
-    "Workspace showroom must demonstrate edge and ridge depths with full and adjacent side selections",
+      workspaceSource.includes("Closed border") &&
+      workspaceSource.includes("Read-only border") &&
+      !workspaceSource.includes("profile=") &&
+      !workspaceSource.includes("depth=") &&
+      !workspaceSource.includes("<Bevel pressed"),
+    "Workspace showroom must demonstrate closed and adjacent plain borders",
   );
   assert(
     tactileGroupRule && !tactileGroupRule.includes("background"),
-    "Showroom ridge items must leave their content area background unset",
+    "Showroom bordered items must leave their content area background unset",
   );
   assert(
-    settingsSource.includes('profile="edge" depth="inset"') &&
-      settingsSource.includes('aria-invalid="true"'),
-    "Settings showroom must demonstrate inset and invalid fields",
+    settingsSource.includes("<Bevel fill>") &&
+      settingsSource.includes("<Bevel fill invalid>") &&
+      settingsSource.includes('aria-invalid="true"') &&
+      !settingsSource.includes("profile=") &&
+      !settingsSource.includes("depth="),
+    "Settings showroom must demonstrate plain and invalid borders",
   );
 });