Skip to content

fix(welcome): visible icon chips, no stuck focus ring, scrollable recent list #80

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
th3-br41n merged 2 commits into from
Jul 3, 2026
Merged

fix(welcome): visible icon chips, no stuck focus ring, scrollable recent list #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93a1c44
fix(welcome): define missing surface-raised token, drop stuck tile fo…
th3-br41n Jul 3, 2026
10a97a8
contacts: wrap list controls, keep control labels on one line
th3-br41n Jul 3, 2026
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 apps/contacts/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ body.is-resizing .contacts__resize {
.contacts-list__controls {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
Expand All @@ -231,6 +232,7 @@ body.is-resizing .contacts__resize {
background: transparent;
color: var(--text-dim);
font-size: var(--text-size-xs);
white-space: nowrap;
cursor: pointer;
}

Expand Down
1 change: 1 addition & 0 deletions packages/sdk-types/src/token-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export const CANONICAL_TOKEN_NAMES = Object.freeze([
"--color-state-warning",
"--color-surface-default",
"--color-surface-overlay",
"--color-surface-raised",
"--color-text-inverse",
"--color-text-link",
"--color-text-primary",
Expand Down
32 changes: 27 additions & 5 deletions packages/shell/src/renderer/welcome/welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
display: flex;
align-items: center;
justify-content: center;
/* Short windows / tall steps (create form + template gallery): let the
* whole splash scroll instead of clipping. The auto margins on
* `.welcome__content` (not the flex centering above) are what keep the
* TOP reachable once content overflows — centered flex children clip
* their leading edge past the scroll origin. */
overflow-y: auto;
/* Splash-screen wallpaper — shipped runtime asset under the shell's
* `art/` folder (NOT docs/, which is example art only). The same
* rose-mountains image seeds a new vault's light slot, so the dashboard
Expand All @@ -17,7 +23,9 @@
}

.welcome__title-bar {
position: absolute;
/* Fixed (not absolute): `.welcome` scrolls when its content overflows,
* and the drag strip must stay pinned to the window's top edge. */
position: fixed;
top: 0;
inset-inline: 0;
height: 36px;
Expand All @@ -30,6 +38,7 @@
position: relative;
width: 100%;
max-width: 400px;
margin: auto; /* overflow-safe centering — see `.welcome` */
padding: var(--space-7);
text-align: center;
display: flex;
Expand Down Expand Up @@ -125,10 +134,11 @@
border-color: var(--color-border-strong);
}

.welcome__tile:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* No per-tile :focus-visible ring — the tile regains focus programmatically
* (folder-dialog close, join/migrate popover close) and Chromium marks that
* restore :focus-visible, so a local rule here lit a stuck accent ring after
* a plain mouse click. Deliberate Tab focus still gets the global themed
* ring via `:root[data-kbnav] :focus-visible` (styles.css). */

.welcome__tile:disabled {
cursor: default;
Expand Down Expand Up @@ -181,6 +191,10 @@
display: flex;
flex-direction: column;
gap: var(--space-1);
/* ~5 rows, then the list scrolls in place — with many vaults the menu
* card otherwise grows past the viewport and pushes the CTAs off-screen. */
max-height: 210px;
overflow-y: auto;
}

.welcome__recent-item {
Expand Down Expand Up @@ -221,9 +235,17 @@
flex-shrink: 0;
}

/* One line, ellipsized — the fixed-width path pushed multi-word (or even
* short) names into a two-line wrap once real paths filled the row. The name
* wins the space fight (no shrink, capped at 60%); the path yields first. */
.welcome__recent-name {
font-size: var(--text-size-md);
color: var(--color-text-primary);
flex-shrink: 0;
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.welcome__recent-path {
Expand Down
12 changes: 12 additions & 0 deletions packages/tokens/src/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,7 @@ export const defaultDark: Tokens = {
// the wallpaper.
default: "rgba(255, 255, 255, 0.05)",
overlay: "rgba(255, 255, 255, 0.10)",
raised: "rgba(255, 255, 255, 0.10)",
},
border: {
subtle: "rgba(231, 238, 249, 0.08)",
Expand Down Expand Up @@ -521,6 +522,7 @@ export const defaultLight: Tokens = {
// Alpha-channel raised surfaces — see dark-mode comment above.
default: "rgba(0, 0, 0, 0.04)",
overlay: "rgba(0, 0, 0, 0.08)",
raised: "rgba(0, 0, 0, 0.08)",
},
border: {
subtle: "rgba(17, 26, 46, 0.06)",
Expand Down Expand Up @@ -620,6 +622,7 @@ export const midnight: Tokens = {
surface: {
default: "rgba(140, 170, 255, 0.06)",
overlay: "rgba(140, 170, 255, 0.12)",
raised: "rgba(140, 170, 255, 0.12)",
},
border: {
subtle: "rgba(180, 200, 255, 0.08)",
Expand Down Expand Up @@ -708,6 +711,7 @@ export const sepia: Tokens = {
surface: {
default: "rgba(58, 46, 26, 0.05)",
overlay: "rgba(58, 46, 26, 0.10)",
raised: "rgba(58, 46, 26, 0.10)",
},
border: {
subtle: "rgba(58, 46, 26, 0.10)",
Expand Down Expand Up @@ -805,6 +809,7 @@ export const highContrast: Tokens = {
surface: {
default: "rgba(255, 255, 255, 0.08)",
overlay: "rgba(255, 255, 255, 0.16)",
raised: "rgba(255, 255, 255, 0.16)",
},
border: {
subtle: "rgba(255, 255, 255, 0.3)",
Expand Down Expand Up @@ -899,6 +904,7 @@ export const solar: Tokens = {
surface: {
default: "rgba(20, 30, 60, 0.04)",
overlay: "rgba(20, 30, 60, 0.08)",
raised: "rgba(20, 30, 60, 0.08)",
},
border: {
subtle: "rgba(20, 30, 60, 0.08)",
Expand Down Expand Up @@ -990,6 +996,7 @@ export const forest: Tokens = {
surface: {
default: "rgba(150, 255, 190, 0.05)",
overlay: "rgba(150, 255, 190, 0.10)",
raised: "rgba(150, 255, 190, 0.10)",
},
border: {
subtle: "rgba(190, 235, 205, 0.08)",
Expand Down Expand Up @@ -1078,6 +1085,7 @@ export const nord: Tokens = {
surface: {
default: "rgba(216, 222, 233, 0.06)",
overlay: "rgba(216, 222, 233, 0.12)",
raised: "rgba(216, 222, 233, 0.12)",
},
border: {
subtle: "rgba(216, 222, 233, 0.10)",
Expand Down Expand Up @@ -1166,6 +1174,7 @@ export const aurora: Tokens = {
surface: {
default: "rgba(220, 180, 255, 0.06)",
overlay: "rgba(220, 180, 255, 0.12)",
raised: "rgba(220, 180, 255, 0.12)",
},
border: {
subtle: "rgba(220, 190, 255, 0.10)",
Expand Down Expand Up @@ -1254,6 +1263,7 @@ export const mint: Tokens = {
surface: {
default: "rgba(15, 60, 50, 0.04)",
overlay: "rgba(15, 60, 50, 0.08)",
raised: "rgba(15, 60, 50, 0.08)",
},
border: {
subtle: "rgba(15, 60, 50, 0.08)",
Expand Down Expand Up @@ -1342,6 +1352,7 @@ export const rose: Tokens = {
surface: {
default: "rgba(90, 25, 45, 0.04)",
overlay: "rgba(90, 25, 45, 0.08)",
raised: "rgba(90, 25, 45, 0.08)",
},
border: {
subtle: "rgba(90, 25, 45, 0.08)",
Expand Down Expand Up @@ -1430,6 +1441,7 @@ export const slate: Tokens = {
surface: {
default: "rgba(30, 41, 59, 0.04)",
overlay: "rgba(30, 41, 59, 0.08)",
raised: "rgba(30, 41, 59, 0.08)",
},
border: {
subtle: "rgba(30, 41, 59, 0.08)",
Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/src/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export type Tokens = {
surface: {
default: string;
overlay: string;
/** Chip / thumbnail surface sitting ON a `default` card (icon chips,
* avatar wells) — one step stronger than `default` so it stays
* visible over cards and glass alike. */
raised: string;
};
border: {
subtle: string;
Expand Down
Loading