Skip to content

feat(friends): cardstock texture behind the add-friend dialog #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
scotej merged 1 commit into from
Jul 25, 2026
Merged

feat(friends): cardstock texture behind the add-friend dialog #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions DESIGN-SYSTEM.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,8 @@ Three modes wired through the same token map:

Theme switch is purely a re-render of the variable layer; component logic does not branch on theme.

One sanctioned static texture exists: `.texture-cardstock` (`src/design/index.css`), a whisper-quiet graph-paper grid + top wash derived entirely from the live theme variables, used on the add-friend dialog surface (user-requested, 2026-07). It is a static background layer — §6's "no decorative motion" rules are untouched. Any further decorative surface remains a §7-rule-3 discussion, not a copy-paste.

## 6. Motion

Use motion only when it serves comprehension. Five permitted uses:
Expand Down
34 changes: 34 additions & 0 deletions src/design/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,37 @@
scroll-behavior: auto !important;
}
}

@layer components {
/* Sanctioned static texture (DESIGN-SYSTEM.md §5 note): a graph-paper
grid on the section spacing rhythm plus a faint warm wash bleeding
down from the top edge. Applied to the add-friend dialog surface.
Everything derives from the live theme variables, so both themes and
any future palette edit flow through untouched; it is a background
layer only — no motion, so §6 and the reduce-motion kill switch are
unaffected. Keep the color-mix strengths whisper-quiet: the contrast
gate (scripts/check-contrast.ts) compares token pairs, not rendered
layers, so a louder grid behind text-muted would slip past CI. */
.texture-cardstock {
background-image:
radial-gradient(
120% 60% at 50% 0%,
color-mix(in srgb, var(--accent-muted) 10%, transparent),
transparent 70%
),
linear-gradient(
to right,
color-mix(in srgb, var(--border-subtle) 55%, transparent) 1px,
transparent 1px
),
linear-gradient(
to bottom,
color-mix(in srgb, var(--border-subtle) 55%, transparent) 1px,
transparent 1px
);
background-size:
100% 100%,
24px 24px,
24px 24px;
}
}
2 changes: 1 addition & 1 deletion src/features/friends/AddFriendDialogView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function AddFriendDialogView({
window minimum — the dialog is fixed-centered, so without it
overflow clips equally off both screen edges with nothing to
scroll (title, footer and close button all become unreachable). */}
<DialogContent className="max-h-[calc(100vh-4rem)] max-w-3xl overflow-y-auto">
<DialogContent className="texture-cardstock max-h-[calc(100vh-4rem)] max-w-3xl overflow-y-auto">
{missingDisplayName ? (
<MissingDisplayNamePanel onCancel={onCancel} />
) : mode === 'legacy' ? (
Expand Down