Counted across every *.scss in src/:
- 12 distinct
border-radius values: 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 20 and 999 px. 29 rules use 6 px, and the other 11 values share the rest.
- 15 distinct
gap values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 20, 22 px.
- 15 distinct one-value
paddings, on the same kind of spread.
- 14 steps of
font-size between 9 px and 20 px, 225 declarations in all, with only 3 at 16 px or above.
None of it is wrong on its own; together it is why two panels never quite line up, and it is the difference a reader registers as "unfinished" without being able to name it.
The density preference is the same problem from the other end: var(--space-*) appears five times in the whole application.
note-card.component.scss padding: var(--space-card)
note-section.component.scss margin-bottom: var(--space-section)
note-section.component.scss gap: var(--space-grid)
notes-page.component.scss padding: var(--space-canvas)
vault-gate.component.scss padding: var(--space-canvas)
So "Compact" tightens the canvas, the cards and the grid, and changes nothing in the library rail, the topbar, the board, the editor or any dialog. A preference that reaches a fifth of the screen.
⚠️ This is not #36, which was closed not planned. #36 asked density to change how much of a note you see; that decision stands. This asks the gaps it already controls to reach the surfaces it already claims to control.
Shape
- A radius scale of three or four steps as custom properties on
:root (--radius-sm/md/lg/pill), and every rule moved onto one. 2/3/4/5 collapse to one step, 6/7 to one, 8/9/10 to one.
- A spacing scale in the same place, and the obvious candidates moved onto it. Not a dogmatic sweep — a 1 px gap inside a pill is a 1 px gap — but the 6/7/8 and 10/12/14 clusters are the same intent spelled three ways.
- The four
--space-* variables applied where they mean something: the rail's rows, the topbar, the board's own padding, the dialogs' --dialog-*.
- ⚠️ The variables live on
:root in src/styles/styles.scss and nowhere else. A :root block inside a component's SCSS is rewritten by Angular's emulated encapsulation into a selector that never matches <html>.
Done when
A radius or a gap is chosen from a scale rather than typed, "Compact" visibly tightens the whole window rather than the canvas alone, and nothing on screen moved that was not meant to.
Counted across every
*.scssinsrc/:border-radiusvalues: 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 20 and 999 px. 29 rules use 6 px, and the other 11 values share the rest.gapvalues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 20, 22 px.paddings, on the same kind of spread.font-sizebetween 9 px and 20 px, 225 declarations in all, with only 3 at 16 px or above.None of it is wrong on its own; together it is why two panels never quite line up, and it is the difference a reader registers as "unfinished" without being able to name it.
The density preference is the same problem from the other end:
var(--space-*)appears five times in the whole application.So "Compact" tightens the canvas, the cards and the grid, and changes nothing in the library rail, the topbar, the board, the editor or any dialog. A preference that reaches a fifth of the screen.
not planned. #36 asked density to change how much of a note you see; that decision stands. This asks the gaps it already controls to reach the surfaces it already claims to control.Shape
:root(--radius-sm/md/lg/pill), and every rule moved onto one. 2/3/4/5 collapse to one step, 6/7 to one, 8/9/10 to one.--space-*variables applied where they mean something: the rail's rows, the topbar, the board's own padding, the dialogs'--dialog-*.:rootinsrc/styles/styles.scssand nowhere else. A:rootblock inside a component's SCSS is rewritten by Angular's emulated encapsulation into a selector that never matches<html>.Done when
A radius or a gap is chosen from a scale rather than typed, "Compact" visibly tightens the whole window rather than the canvas alone, and nothing on screen moved that was not meant to.