Skip to content

Commit 33cb580

Browse files
jsscclrjsscclr
authored
refactor(dotcom): use --tl-space tokens for matching spacing values (tldraw#9211)
In order to route spacing through the shared scale instead of hardcoded pixels, this PR replaces single-value `padding` / `margin` / `gap` declarations that exactly match a `--tl-space-*` rung with the corresponding token, across the dotcom client CSS modules (52 declarations in 10 files). Part of tldraw#9197 (design-system consistency, tldraw#9189). Because each token resolves to the same pixel value it replaced (e.g. `8px` = `var(--tl-space-3)`), there is **no visual change** — this is a pure refactor. Deliberately left for follow-up: - **Off-scale values** (`6px`, `10px`, `24px`) — no matching rung; they need the scale decision discussed in tldraw#9197. - **Multi-value shorthands** (e.g. the bespoke auth/dialog card paddings) — left as-is. - **`button.module.css` / `cta-button.module.css`** — skipped to avoid conflicts with the in-flight button PR tldraw#9205. ### Change type - [x] `improvement` ### Test plan No visual change is expected — every substituted token equals its previous pixel value. A reviewer can confirm there is no layout difference versus production in the affected areas (sidebar, dialogs, menus, invite/auth dialogs, admin panel). - [ ] Unit tests - [ ] End to end tests ### Code changes | Section | LOC change | | ------- | ---------- | | Apps | +52 / -52 |
1 parent 7b3dfe5 commit 33cb580

10 files changed

Lines changed: 52 additions & 52 deletions

File tree

‎apps/dotcom/client/src/pages/admin.module.css‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,19 @@
4040
padding: 24px 32px;
4141
display: flex;
4242
flex-direction: column;
43-
gap: 32px;
43+
gap: var(--tl-space-8);
4444
overflow: auto;
4545
}
4646

4747
.adminSection {
4848
display: flex;
4949
flex-direction: column;
50-
gap: 16px;
50+
gap: var(--tl-space-5);
5151
}
5252

5353
.searchContainer {
5454
display: flex;
55-
gap: 12px;
55+
gap: var(--tl-space-4);
5656
align-items: center;
5757
}
5858

@@ -100,7 +100,7 @@
100100

101101
.userActions {
102102
display: flex;
103-
gap: 12px;
103+
gap: var(--tl-space-4);
104104
align-items: center;
105105
}
106106

@@ -116,7 +116,7 @@
116116
background-color: var(--tl-color-low);
117117
border: 1px solid var(--tl-color-divider);
118118
border-radius: var(--tl-radius-1);
119-
padding: 16px;
119+
padding: var(--tl-space-5);
120120
font-family: 'IBMPlexMono', monospace;
121121
font-size: 11px;
122122
line-height: 1.4;
@@ -129,38 +129,38 @@
129129
.fileOperations {
130130
display: flex;
131131
flex-direction: column;
132-
gap: 16px;
132+
gap: var(--tl-space-5);
133133
}
134134

135135
.fileOperation {
136136
display: flex;
137137
flex-direction: column;
138-
gap: 12px;
139-
padding: 16px;
138+
gap: var(--tl-space-4);
139+
padding: var(--tl-space-5);
140140
background-color: var(--tl-color-panel);
141141
border: 1px solid var(--tl-color-divider);
142142
border-radius: var(--tl-radius-1);
143143
}
144144

145145
.downloadContainer {
146146
display: flex;
147-
gap: 12px;
147+
gap: var(--tl-space-4);
148148
align-items: center;
149149
}
150150

151151
.dangerZone {
152152
display: flex;
153153
flex-direction: column;
154-
gap: 12px;
155-
padding: 16px;
154+
gap: var(--tl-space-4);
155+
padding: var(--tl-space-5);
156156
background-color: var(--tl-color-panel);
157157
border: 1px solid var(--tl-color-danger);
158158
border-radius: var(--tl-radius-1);
159159
}
160160

161161
.deleteContainer {
162162
display: flex;
163-
gap: 12px;
163+
gap: var(--tl-space-4);
164164
align-items: center;
165165
}
166166

@@ -171,7 +171,7 @@
171171
/* Progress Log */
172172
.progressLog {
173173
margin-top: 16px;
174-
padding: 16px;
174+
padding: var(--tl-space-5);
175175
background-color: var(--tl-color-low);
176176
border: 1px solid var(--tl-color-divider);
177177
border-radius: var(--tl-radius-1);
@@ -196,7 +196,7 @@
196196
background-color: var(--tl-color-selected-contrast);
197197
border: 1px solid var(--tl-color-divider);
198198
border-radius: var(--tl-radius-1);
199-
padding: 8px;
199+
padding: var(--tl-space-3);
200200
}
201201

202202
.logEntry {
@@ -215,7 +215,7 @@
215215
position: relative;
216216
display: flex;
217217
flex-direction: column;
218-
gap: 12px;
218+
gap: var(--tl-space-4);
219219
}
220220

221221
.copyButton {
@@ -227,7 +227,7 @@
227227

228228
/* User Summary */
229229
.userSummary {
230-
padding: 16px;
230+
padding: var(--tl-space-5);
231231
background-color: var(--tl-color-panel);
232232
border: 1px solid var(--tl-color-divider);
233233
border-radius: var(--tl-radius-1);
@@ -236,13 +236,13 @@
236236
.summaryGrid {
237237
display: grid;
238238
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
239-
gap: 12px;
239+
gap: var(--tl-space-4);
240240
}
241241

242242
.summaryItem {
243243
display: flex;
244244
flex-direction: column;
245-
gap: 4px;
245+
gap: var(--tl-space-2);
246246
}
247247

248248
.fieldLabel {
@@ -264,8 +264,8 @@
264264
.migrationSection {
265265
display: flex;
266266
flex-direction: column;
267-
gap: 12px;
268-
padding: 16px;
267+
gap: var(--tl-space-4);
268+
padding: var(--tl-space-5);
269269
background-color: var(--tl-color-panel);
270270
border: 1px solid var(--tl-color-primary);
271271
border-radius: var(--tl-radius-1);
@@ -275,15 +275,15 @@
275275
/* Stats Display */
276276
.statsContainer {
277277
display: flex;
278-
gap: 16px;
279-
padding: 12px;
278+
gap: var(--tl-space-5);
279+
padding: var(--tl-space-4);
280280
flex-wrap: wrap;
281281
}
282282

283283
.statItem {
284284
display: flex;
285285
flex-direction: column;
286-
gap: 4px;
286+
gap: var(--tl-space-2);
287287
}
288288

289289
.statLabel {
@@ -302,7 +302,7 @@
302302
/* Count Container */
303303
.countContainer {
304304
display: flex;
305-
gap: 12px;
305+
gap: var(--tl-space-4);
306306
align-items: center;
307307
}
308308

@@ -314,7 +314,7 @@
314314
/* Config Container */
315315
.configContainer {
316316
display: flex;
317-
gap: 16px;
317+
gap: var(--tl-space-5);
318318
flex-wrap: wrap;
319319
}
320320

@@ -330,20 +330,20 @@
330330
.featureFlagsContainer {
331331
display: flex;
332332
flex-direction: column;
333-
gap: 16px;
333+
gap: var(--tl-space-5);
334334
margin-top: 16px;
335335
}
336336

337337
.featureFlagItem {
338338
display: flex;
339339
align-items: center;
340-
gap: 12px;
340+
gap: var(--tl-space-4);
341341
}
342342

343343
.featureFlagLabel {
344344
display: flex;
345345
align-items: center;
346-
gap: 8px;
346+
gap: var(--tl-space-3);
347347
cursor: pointer;
348348
min-width: 200px;
349349
}

‎apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
right: max(var(--tl-space-2), env(safe-area-inset-right));
55
z-index: calc(var(--tl-layer-watermark) + 1);
66
height: 36px;
7-
padding: 2px;
7+
padding: var(--tl-space-1);
88
}
99

1010
.anonDotDevLink > div {
@@ -38,7 +38,7 @@
3838
position: relative;
3939
display: flex;
4040
align-items: center;
41-
gap: 4px;
41+
gap: var(--tl-space-2);
4242
height: 100%;
4343
padding: 0 8px;
4444
color: inherit;

‎apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
justify-content: center;
77
height: 100%;
88
text-align: center;
9-
gap: 20px;
9+
gap: var(--tl-space-6);
1010
}
1111

1212
.content {

‎apps/dotcom/client/src/tla/components/TlaFileShareMenu/file-share-menu.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
height: 100%;
1414
overflow: hidden;
1515
border-radius: 4px;
16-
padding: 8px;
16+
padding: var(--tl-space-3);
1717
border: 1px solid var(--tl-color-divider);
1818
background-color: var(--tl-color-panel);
1919
}

‎apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@
226226
.sidebar[data-workspaces='true'] .sidebarTopRow {
227227
height: 44px;
228228
padding: 3px 8px 0px 4px;
229-
gap: 8px;
229+
gap: var(--tl-space-3);
230230
}
231231

232232
/* Workspace link */
@@ -466,7 +466,7 @@
466466
display: flex;
467467
flex-direction: row;
468468
align-items: center;
469-
gap: 4px;
469+
gap: var(--tl-space-2);
470470
color: var(--tl-color-text-3);
471471
}
472472

@@ -782,7 +782,7 @@
782782
}
783783

784784
.sidebarSearchEmpty {
785-
padding: 8px;
785+
padding: var(--tl-space-3);
786786
color: var(--tl-color-text-3);
787787
}
788788

@@ -844,7 +844,7 @@
844844
flex-direction: row;
845845
align-items: center;
846846
justify-content: flex-start;
847-
gap: 8px;
847+
gap: var(--tl-space-3);
848848
position: relative;
849849
pointer-events: none;
850850
z-index: 2;
@@ -881,7 +881,7 @@
881881
justify-content: flex-start;
882882
padding: 0px 8px 0px calc(8px + var(--tla-sidebar-group-item-padding-left, 0px));
883883
outline-offset: -2px;
884-
gap: 8px;
884+
gap: var(--tl-space-3);
885885
position: relative;
886886
}
887887

‎apps/dotcom/client/src/tla/components/dialogs/TlaInviteDialog.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
border: none;
5353
color: var(--tl-color-text-3);
5454
cursor: pointer;
55-
padding: 8px;
55+
padding: var(--tl-space-3);
5656
height: 32px;
5757
}
5858

‎apps/dotcom/client/src/tla/components/dialogs/TlaInviteExpiredDialog.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
flex-direction: column;
1212
align-items: center;
13-
gap: 8px;
13+
gap: var(--tl-space-3);
1414
padding: 0 24px 24px;
1515
width: 300px;
1616
}

‎apps/dotcom/client/src/tla/components/dialogs/auth.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
.authCtaButton img {
5959
width: 22px;
6060
height: 22px;
61-
padding: 4px;
61+
padding: var(--tl-space-2);
6262
z-index: 2;
6363
background-color: var(--tl-color-selected-contrast);
6464
border-radius: 100%;
@@ -187,7 +187,7 @@
187187
.authOtpBoxes {
188188
display: grid;
189189
grid-template-columns: repeat(6, 40px);
190-
gap: 8px;
190+
gap: var(--tl-space-3);
191191
}
192192

193193
.authOtpBox {

‎apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
}
7171

7272
.cookieText {
73-
padding: 8px;
73+
padding: var(--tl-space-3);
7474
padding-bottom: 12px;
7575
font-size: 12px;
7676
color: var(--tl-color-text-0);
@@ -83,14 +83,14 @@
8383

8484
.cookieButtonsRow {
8585
display: flex;
86-
gap: 4px;
86+
gap: var(--tl-space-2);
8787
justify-content: space-between;
8888
flex-wrap: wrap;
8989
}
9090

9191
.cookieButtons {
9292
display: flex;
93-
gap: 4px;
93+
gap: var(--tl-space-2);
9494
flex-wrap: wrap;
9595
justify-content: space-between;
9696
}

0 commit comments

Comments
 (0)