Skip to content

Commit e3259b0

Browse files
vdavidvdavid
committed
Tooling: Enforce CSS spacing tokens via Stylelint
- Add `declaration-property-value-disallowed-list` rule banning raw `px` in `padding`, `margin`, `gap`, `row-gap`, `column-gap` - Migrate ~180 raw px values to `var(--spacing-*)` tokens across 44 components - Off-scale values (20px, 10px, 5px, 6px, 22px, 28px) rounded to nearest token - `stylelint-disable-next-line` for intentional exceptions: button height targets (`7px 20px`, `3px 12px`), fine visual adjustments (`1px`, `-1px`), tooltip padding, `calc()` expressions - Debug page fully exempted (dev utility)
1 parent 833ce7e commit e3259b0

45 files changed

Lines changed: 144 additions & 116 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/desktop/.stylelintrc.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
// Forbid var() with fallback values - all colors should be in app.css
2020
'declaration-property-value-disallowed-list': {
2121
'/.*/': ['/var\\(--[\\w-]+\\s*,/'],
22+
'/^(padding|margin|gap|row-gap|column-gap)(-\\w+)?$/': ['/\\d+px/'],
2223
'font-size': ['/\\dpx/'],
2324
'border-radius': ['/\\dpx/'],
2425
'z-index': ['/^\\d{2,}/'],

‎apps/desktop/src/app.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -417,8 +417,8 @@ a:focus-visible,
417417

418418
p {
419419
text-wrap: pretty;
420-
margin-block-start: 16px;
421-
margin-block-end: 16px;
420+
margin-block-start: var(--spacing-lg);
421+
margin-block-end: var(--spacing-lg);
422422
}
423423
}
424424

@@ -557,6 +557,7 @@ body {
557557
font-weight: 400;
558558
line-height: 1.3;
559559
color: var(--color-text-primary);
560+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
560561
padding: 3px 8px;
561562

562563
/* Entrance */
@@ -580,9 +581,10 @@ body {
580581
line-height: 1;
581582
color: var(--color-accent);
582583
background: var(--color-accent-subtle);
584+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
583585
padding: 1px 4px;
584586
border-radius: var(--radius-sm);
585-
margin-left: 6px;
587+
margin-left: var(--spacing-sm);
586588
}
587589

588590
@media (prefers-color-scheme: dark) {

‎apps/desktop/src/lib/ai/AiToastContent.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
.ai-content {
7878
display: flex;
7979
flex-direction: column;
80-
gap: 4px;
80+
gap: var(--spacing-xs);
8181
}
8282
8383
.ai-title {
@@ -95,7 +95,7 @@
9595
.ai-hint {
9696
font-size: var(--font-size-xs);
9797
color: var(--color-text-tertiary);
98-
margin-top: 4px;
98+
margin-top: var(--spacing-xs);
9999
}
100100
101101
.ai-progress-text {
@@ -110,7 +110,7 @@
110110
background: var(--color-bg-tertiary);
111111
border-radius: var(--radius-xs);
112112
overflow: hidden;
113-
margin-top: 4px;
113+
margin-top: var(--spacing-xs);
114114
}
115115
116116
.progress-bar-fill {

‎apps/desktop/src/lib/command-palette/CommandPalette.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,9 @@
282282
background: rgba(255, 255, 255, 0.25);
283283
color: inherit;
284284
border-radius: var(--radius-sm);
285+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
285286
padding: 1px 2px;
287+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
286288
margin: 0 -2px;
287289
}
288290

‎apps/desktop/src/lib/file-explorer/drag/DragOverlay.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
z-index: var(--z-notification);
6161
pointer-events: none;
6262
max-width: 320px;
63-
padding: 10px 14px;
63+
padding: var(--spacing-md) var(--spacing-md);
6464
border-radius: var(--radius-lg);
6565
background: rgba(30, 30, 30, 0.9);
6666
color: rgba(255, 255, 255, 0.92);
@@ -88,10 +88,11 @@
8888
white-space: nowrap;
8989
overflow: hidden;
9090
text-overflow: ellipsis;
91+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
9192
padding: 1px 0;
9293
display: flex;
9394
align-items: center;
94-
gap: 4px;
95+
gap: var(--spacing-xs);
9596
}
9697
9798
.name-icon {

‎apps/desktop/src/lib/file-explorer/navigation/VolumeBreadcrumb.svelte‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -527,11 +527,11 @@
527527
cursor: default;
528528
font-weight: 500;
529529
color: var(--color-text-primary);
530-
padding: 2px 4px;
530+
padding: var(--spacing-xxs) var(--spacing-xs);
531531
border-radius: var(--radius-sm);
532532
display: inline-flex;
533533
align-items: center;
534-
gap: 4px;
534+
gap: var(--spacing-xs);
535535
}
536536
537537
.volume-name:hover {
@@ -560,15 +560,15 @@
560560
561561
.path-separator {
562562
color: var(--color-text-tertiary);
563-
margin: 0 4px;
563+
margin: 0 var(--spacing-xs);
564564
font-size: var(--font-size-xs);
565565
}
566566
567567
.volume-dropdown {
568568
position: absolute;
569569
top: 100%;
570570
left: 0;
571-
margin-top: 4px;
571+
margin-top: var(--spacing-xs);
572572
min-width: 220px;
573573
max-height: calc(100vh - 30px); /* Fallback — overridden dynamically by fitDropdownToViewport() */
574574
overflow-y: auto;
@@ -577,14 +577,14 @@
577577
border-radius: var(--radius-md);
578578
box-shadow: var(--shadow-md);
579579
z-index: var(--z-dropdown);
580-
padding: 4px 0;
580+
padding: var(--spacing-xs) 0;
581581
}
582582
583583
.category-label {
584584
font-size: var(--font-size-sm);
585585
font-weight: 500;
586586
color: var(--color-text-tertiary);
587-
padding: 8px 12px 4px;
587+
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
588588
text-transform: uppercase;
589589
/*noinspection CssNonIntegerLengthInPixels*/
590590
letter-spacing: 0.5px;
@@ -593,13 +593,13 @@
593593
.category-separator {
594594
height: 1px;
595595
background-color: var(--color-border-strong);
596-
margin: 4px 8px;
596+
margin: var(--spacing-xs) var(--spacing-sm);
597597
}
598598
599599
.volume-item {
600600
display: flex;
601601
align-items: center;
602-
gap: 8px;
602+
gap: var(--spacing-sm);
603603
padding: var(--spacing-sm) var(--spacing-md);
604604
cursor: default;
605605
}
@@ -653,6 +653,7 @@
653653
display: flex;
654654
align-items: center;
655655
gap: var(--spacing-sm);
656+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
656657
padding: 0 var(--spacing-md) var(--spacing-xs) calc(14px + var(--spacing-sm) + 16px + var(--spacing-sm));
657658
}
658659

‎apps/desktop/src/lib/file-explorer/network/NetworkBrowser.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,7 @@
591591
.network-status-bar {
592592
display: flex;
593593
align-items: center;
594-
gap: 8px;
594+
gap: var(--spacing-sm);
595595
width: 100%;
596596
padding: var(--spacing-xs) var(--spacing-sm);
597597
font-family: var(--font-system), sans-serif;

‎apps/desktop/src/lib/file-explorer/network/NetworkLoginForm.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@
338338
339339
.field-input {
340340
width: 100%;
341-
padding: 10px 12px;
341+
padding: var(--spacing-md) var(--spacing-md);
342342
border: 1px solid var(--color-border-strong);
343343
border-radius: var(--radius-md);
344344
background-color: var(--color-bg-primary);
@@ -388,13 +388,13 @@
388388
display: flex;
389389
justify-content: flex-end;
390390
gap: var(--spacing-md);
391-
margin-top: 20px;
391+
margin-top: var(--spacing-xl);
392392
}
393393
394394
.btn-content {
395395
display: flex;
396396
align-items: center;
397-
gap: 8px;
397+
gap: var(--spacing-sm);
398398
}
399399
400400
.spinner {
@@ -418,6 +418,7 @@
418418
width: 1px;
419419
height: 1px;
420420
padding: 0;
421+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
421422
margin: -1px;
422423
overflow: hidden;
423424
clip-path: inset(50%);

‎apps/desktop/src/lib/file-explorer/network/ShareBrowser.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,7 @@
548548
display: flex;
549549
align-items: center;
550550
gap: var(--spacing-xs);
551+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
551552
padding: 1px var(--spacing-sm);
552553
font-family: var(--font-system), sans-serif;
553554
font-size: calc(var(--font-size-sm) * 0.9);

‎apps/desktop/src/lib/file-explorer/pane/FilePane.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1748,7 +1748,7 @@
17481748
}
17491749
17501750
.header {
1751-
padding: 2px var(--spacing-sm);
1751+
padding: var(--spacing-xxs) var(--spacing-sm);
17521752
background-color: var(--color-bg-secondary);
17531753
border-bottom: 1px solid var(--color-border-strong);
17541754
font-size: var(--font-size-sm);

0 commit comments

Comments
 (0)