fix: simplify workspace borders and design rules

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

@@ -7,9 +7,6 @@ Deno.test("BevelLine exposes a semantic directional separator", async () => {
   const source = await Deno.readTextFile(
     new URL("../src/lib/workspace/ui/BevelLine.svelte", import.meta.url),
   );
-  const appCss = await Deno.readTextFile(
-    new URL("../src/app.css", import.meta.url),
-  );
 
   for (
     const contract of [
@@ -28,41 +25,25 @@ Deno.test("BevelLine exposes a semantic directional separator", async () => {
   }
 
   assert(
-    appCss.includes("--bevel-face-width: 1px") &&
-      source.includes("--bevel-line-face-width: var(--bevel-face-width)") &&
-      source.includes(
-        "--bevel-line-width: calc(var(--bevel-line-face-width) * 2)",
-      ) &&
-      !source.includes("BevelLineWeight") &&
-      !source.includes("data-weight"),
-    "BevelLine must compose a fixed 2px ridge from two project-wide 1px faces",
+    source.includes("border-color: var(--line-strong)") &&
+      source.includes("border-top-style: solid") &&
+      source.includes("border-top-width: 1px") &&
+      source.includes("border-left-style: solid") &&
+      source.includes("border-left-width: 1px") &&
+      !source.includes("background:") &&
+      !source.includes("gradient") &&
+      !source.includes("color-mix") &&
+      !source.includes("BevelLineDepth") &&
+      !source.includes("depth"),
+    "BevelLine must remain a plain one-pixel directional border",
   );
   assert(
-    !source.includes("--bevel-line-inset") &&
-      !source.includes("padding-inline") &&
-      !source.includes("padding-block"),
+    !source.includes("padding-inline") &&
+      !source.includes("padding-block") &&
+      !source.includes("margin-inline") &&
+      !source.includes("margin-block"),
     "BevelLine must fill its parent layer without independent endpoint spacing",
   );
-  assert(
-    source.includes("background: var(--line-strong)") &&
-      source.includes("@supports") &&
-      source.includes("linear-gradient(to bottom") &&
-      source.includes("linear-gradient(to right"),
-    "BevelLine must retain a plain fallback and directional enhanced edges",
-  );
-  assert(
-    source.includes("var(--bevel-highlight)") &&
-      source.includes("var(--bevel-shadow)") &&
-      !source.includes("surface"),
-    "BevelLine must use the shared highlight and shadow palette without a surface color",
-  );
-  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%"),
-    "BevelLine must clamp unlit faces to the configured shadow without ambient light",
-  );
 });
 
 Deno.test("Workspace showroom demonstrates both BevelLine directions", async () => {
@@ -76,13 +57,14 @@ Deno.test("Workspace showroom demonstrates both BevelLine directions", async ()
   assert(
     source.includes('direction="x" length="100%"') &&
       source.includes('direction="y" length="72px"') &&
-      source.includes('direction="x" length="160px" depth="inset"') &&
+      source.includes('direction="x" length="160px"') &&
+      !source.includes("depth=") &&
       !source.includes("weight="),
-    "Workspace showroom must demonstrate horizontal, vertical, and inset BevelLine states",
+    "Workspace showroom must demonstrate horizontal and vertical plain separators",
   );
 });
 
-Deno.test("Shell regions use single-edge Bevel while open separators use BevelLine", async () => {
+Deno.test("Shell regions use selected Bevel edges while open separators use BevelLine", async () => {
   const rootLayout = await Deno.readTextFile(
     new URL("../src/routes/+layout.svelte", import.meta.url),
   );
@@ -110,21 +92,21 @@ Deno.test("Shell regions use single-edge Bevel while open separators use BevelLi
 
   assert(
     rootLayout.includes('class="app-shell__topbar-bevel"') &&
-      rootLayout.includes('depth="inset"') &&
       rootLayout.includes("top={false} right={false} left={false}") &&
       rootLayout.includes("bind:folded={sidebarFolded}") &&
       rootLayout.includes("app-shell__mobile-sidebar-toggle") &&
       rootLayout.includes("class:sidebar-open={!sidebarFolded}") &&
+      !rootLayout.includes("depth=") &&
       !rootLayout.includes("BevelLine") &&
       sidebarFrame.includes('class="sidebar-frame__bevel"') &&
-      sidebarFrame.includes('depth="inset"') &&
       sidebarFrame.includes("top={false} bottom={false} left={false}") &&
       sidebarFrame.includes("$bindable(false)") &&
+      !sidebarFrame.includes("depth=") &&
       !sidebarFrame.includes("BevelLine") &&
       sidebarCss.includes(".sidebar-frame.folded") &&
       sidebarCss.includes("display: none") &&
       sidebarCss.includes("display: grid"),
-    "Desktop shell boundaries must use one Bevel edge and Mobile must share Header fold state",
+    "Desktop shell boundaries must use one selected border edge and Mobile must share Header fold state",
   );
   assert(
     designLanguage.includes(
@@ -138,13 +120,13 @@ Deno.test("Shell regions use single-edge Bevel while open separators use BevelLi
       ) &&
       showroomCss.includes(".resource-list {") &&
       showroomCss.includes("margin-inline: var(--space-2)"),
-    "The design language and showroom must align same-layer lines and inset nested layers as a whole",
+    "The design language and showroom must preserve adjacent area and line hierarchy",
   );
   assert(
     !sidebarCss.includes("border-right:") &&
       !sidebarCss.includes("border-bottom:") &&
       !showroomCss.includes("border-top: 1px solid") &&
       !showroomCss.includes("border-bottom: 1px solid"),
-    "Shell and showroom structural boundaries must not fall back to one-sided solid borders",
+    "Shell and showroom structural boundaries must use shared Bevel components",
   );
 });