diff options
Diffstat (limited to 'src/features')
| -rw-r--r-- | src/features/tabs/ui.test.ts | 6 | ||||
| -rw-r--r-- | src/features/tabs/ui/TabGroupBox.svelte | 9 |
2 files changed, 8 insertions, 7 deletions
diff --git a/src/features/tabs/ui.test.ts b/src/features/tabs/ui.test.ts index 645c2dd..825d498 100644 --- a/src/features/tabs/ui.test.ts +++ b/src/features/tabs/ui.test.ts @@ -383,9 +383,9 @@ describe("TabList", () => { s?.paddingLeft, ]); } - // Every box paints 20% black, so nested boxes compound darker per level. - expect(outer).toHaveClass("bg-black/20"); - expect(inner).toHaveClass("bg-black/20"); + // Every box paints a 20% lavender tint, so nested boxes compound per level. + expect(outer).toHaveClass("bg-secondary/20"); + expect(inner).toHaveClass("bg-secondary/20"); expect(outer?.style.getPropertyValue("margin-inline")).toBe(`-${outer?.style.paddingLeft}`); }); diff --git a/src/features/tabs/ui/TabGroupBox.svelte b/src/features/tabs/ui/TabGroupBox.svelte index 289cb6d..daad8cb 100644 --- a/src/features/tabs/ui/TabGroupBox.svelte +++ b/src/features/tabs/ui/TabGroupBox.svelte @@ -6,15 +6,16 @@ import TabGroupBox from "./TabGroupBox.svelte"; /** - * A subagent group: a darker box spanning both grid columns that wraps the + * A subagent group: a tinted box spanning both grid columns that wraps the * group parent's (double-width) card + its subagents' cards. Recursive — * a subagent with its own subagents renders a nested box. The box BLEEDS * outward (negative margin + equal padding, `groupBleedPx`) so the cards * inside stay on the same two columns as top-level cards: every card keeps * identical dimensions at every depth. The padding is EQUAL on all four * sides (= the bleed) so the box looks even — except below a nested box on - * the last row, where it is trimmed to match that box's side gaps. Every box paints 20% black, - * which compounds: each nesting level reads darker than the one around it. + * the last row, where it is trimmed to match that box's side gaps. Every + * box paints a 20% secondary (lavender) tint, which compounds: each + * nesting level reads a little stronger than the one around it. */ let { node, @@ -40,7 +41,7 @@ </script> <div - class="col-span-2 rounded-lg bg-black/20" + class="col-span-2 rounded-lg bg-secondary/20" style:margin-inline="-{bleed}px" style:padding="{bleed}px {bleed}px {padBottom}px" role="group" |