@rmdes/indiekit-endpoint-activitypub 1.1.4 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/assets/reader.css +233 -153
  2. package/package.json +1 -1
  3. package/views/partials/ap-item-card.njk +1 -1
package/assets/reader.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * ActivityPub Reader Styles
3
3
  * Card-based layout inspired by Phanpy/Elk
4
- * Uses Indiekit CSS custom properties
4
+ * Uses Indiekit CSS custom properties for automatic dark mode support
5
5
  */
6
6
 
7
7
  /* ==========================================================================
@@ -9,7 +9,7 @@
9
9
  ========================================================================== */
10
10
 
11
11
  .ap-tabs {
12
- border-bottom: 1px solid var(--color-offset);
12
+ border-bottom: var(--border-width-thin) solid var(--color-outline);
13
13
  display: flex;
14
14
  gap: var(--space-xs);
15
15
  margin-bottom: var(--space-m);
@@ -18,9 +18,9 @@
18
18
  }
19
19
 
20
20
  .ap-tab {
21
- border-bottom: 2px solid transparent;
22
- color: var(--color-text-muted);
23
- font-size: var(--font-size-body);
21
+ border-bottom: var(--border-width-thick) solid transparent;
22
+ color: var(--color-on-offset);
23
+ font-size: var(--font-size-m);
24
24
  padding: var(--space-s) var(--space-m);
25
25
  text-decoration: none;
26
26
  transition:
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  .ap-tab:hover {
33
- color: var(--color-text);
33
+ color: var(--color-on-background);
34
34
  }
35
35
 
36
36
  .ap-tab--active {
@@ -50,13 +50,14 @@
50
50
  }
51
51
 
52
52
  /* ==========================================================================
53
- Item Card
53
+ Item Card — Base
54
54
  ========================================================================== */
55
55
 
56
56
  .ap-card {
57
- background: var(--color-background);
58
- border: 1px solid var(--color-offset);
59
- border-radius: var(--border-radius);
57
+ background: var(--color-offset);
58
+ border: var(--border-width-thin) solid var(--color-outline);
59
+ border-left: var(--border-width-thickest) solid var(--color-outline);
60
+ border-radius: var(--border-radius-small);
60
61
  overflow: hidden;
61
62
  padding: var(--space-m);
62
63
  transition:
@@ -65,32 +66,79 @@
65
66
  }
66
67
 
67
68
  .ap-card:hover {
68
- border-color: var(--color-offset-active);
69
+ border-color: var(--color-outline-variant);
70
+ border-left-color: var(--color-outline-variant);
71
+ }
72
+
73
+ /* ==========================================================================
74
+ Item Card — Post Type Differentiation
75
+ ========================================================================== */
76
+
77
+ /* Notes: default purple-ish accent (the most common type) */
78
+ .ap-card--note {
79
+ border-left-color: var(--color-purple45);
80
+ }
81
+
82
+ .ap-card--note:hover {
83
+ border-left-color: var(--color-purple45);
84
+ }
85
+
86
+ /* Articles: green accent (long-form content stands out) */
87
+ .ap-card--article {
88
+ border-left-color: var(--color-green50);
89
+ }
90
+
91
+ .ap-card--article:hover {
92
+ border-left-color: var(--color-green50);
93
+ }
94
+
95
+ /* Boosts: yellow accent (shared content) */
96
+ .ap-card--boost {
97
+ border-left-color: var(--color-yellow50);
98
+ }
99
+
100
+ .ap-card--boost:hover {
101
+ border-left-color: var(--color-yellow50);
69
102
  }
70
103
 
71
- /* Boost header */
104
+ /* Replies: blue accent (via primary color) */
105
+ .ap-card--reply {
106
+ border-left-color: var(--color-primary);
107
+ }
108
+
109
+ .ap-card--reply:hover {
110
+ border-left-color: var(--color-primary);
111
+ }
112
+
113
+ /* ==========================================================================
114
+ Boost Header
115
+ ========================================================================== */
116
+
72
117
  .ap-card__boost {
73
- color: var(--color-text-muted);
74
- font-size: var(--font-size-small);
118
+ color: var(--color-on-offset);
119
+ font-size: var(--font-size-s);
75
120
  margin-bottom: var(--space-s);
76
121
  padding-bottom: var(--space-xs);
77
122
  }
78
123
 
79
124
  .ap-card__boost a {
80
- color: var(--color-text-muted);
125
+ color: var(--color-on-offset);
81
126
  font-weight: 600;
82
127
  text-decoration: none;
83
128
  }
84
129
 
85
130
  .ap-card__boost a:hover {
86
- color: var(--color-text);
131
+ color: var(--color-on-background);
87
132
  text-decoration: underline;
88
133
  }
89
134
 
90
- /* Reply context */
135
+ /* ==========================================================================
136
+ Reply Context
137
+ ========================================================================== */
138
+
91
139
  .ap-card__reply-to {
92
- color: var(--color-text-muted);
93
- font-size: var(--font-size-small);
140
+ color: var(--color-on-offset);
141
+ font-size: var(--font-size-s);
94
142
  margin-bottom: var(--space-s);
95
143
  overflow: hidden;
96
144
  text-overflow: ellipsis;
@@ -106,7 +154,10 @@
106
154
  text-decoration: underline;
107
155
  }
108
156
 
109
- /* Author header */
157
+ /* ==========================================================================
158
+ Author Header
159
+ ========================================================================== */
160
+
110
161
  .ap-card__author {
111
162
  align-items: center;
112
163
  display: flex;
@@ -115,7 +166,7 @@
115
166
  }
116
167
 
117
168
  .ap-card__avatar {
118
- border: 1px solid var(--color-offset);
169
+ border: var(--border-width-thin) solid var(--color-outline);
119
170
  border-radius: 50%;
120
171
  flex-shrink: 0;
121
172
  height: 40px;
@@ -125,8 +176,8 @@
125
176
 
126
177
  .ap-card__avatar--default {
127
178
  align-items: center;
128
- background: var(--color-offset);
129
- color: var(--color-text-muted);
179
+ background: var(--color-offset-variant);
180
+ color: var(--color-on-offset);
130
181
  display: inline-flex;
131
182
  font-size: 1.1em;
132
183
  font-weight: 600;
@@ -157,24 +208,27 @@
157
208
  }
158
209
 
159
210
  .ap-card__author-handle {
160
- color: var(--color-text-muted);
161
- font-size: var(--font-size-small);
211
+ color: var(--color-on-offset);
212
+ font-size: var(--font-size-s);
162
213
  overflow: hidden;
163
214
  text-overflow: ellipsis;
164
215
  white-space: nowrap;
165
216
  }
166
217
 
167
218
  .ap-card__timestamp {
168
- color: var(--color-text-muted);
219
+ color: var(--color-on-offset);
169
220
  flex-shrink: 0;
170
- font-size: var(--font-size-small);
221
+ font-size: var(--font-size-xs);
171
222
  }
172
223
 
173
- /* Post title (articles) */
224
+ /* ==========================================================================
225
+ Post Title (Articles)
226
+ ========================================================================== */
227
+
174
228
  .ap-card__title {
175
- font-size: var(--font-size-heading-4);
229
+ font-size: var(--font-size-l);
176
230
  font-weight: 600;
177
- line-height: 1.3;
231
+ line-height: var(--line-height-tight);
178
232
  margin-bottom: var(--space-s);
179
233
  }
180
234
 
@@ -187,10 +241,13 @@
187
241
  text-decoration: underline;
188
242
  }
189
243
 
190
- /* Content */
244
+ /* ==========================================================================
245
+ Content
246
+ ========================================================================== */
247
+
191
248
  .ap-card__content {
192
- color: var(--color-text);
193
- line-height: 1.6;
249
+ color: var(--color-on-background);
250
+ line-height: var(--line-height-prose);
194
251
  margin-bottom: var(--space-s);
195
252
  overflow-wrap: break-word;
196
253
  word-break: break-word;
@@ -209,20 +266,20 @@
209
266
  }
210
267
 
211
268
  .ap-card__content blockquote {
212
- border-left: 3px solid var(--color-offset);
269
+ border-left: var(--border-width-thickest) solid var(--color-outline);
213
270
  margin: var(--space-s) 0;
214
271
  padding-left: var(--space-m);
215
272
  }
216
273
 
217
274
  .ap-card__content pre {
218
- background: var(--color-offset);
219
- border-radius: var(--border-radius);
275
+ background: var(--color-offset-variant);
276
+ border-radius: var(--border-radius-small);
220
277
  overflow-x: auto;
221
278
  padding: var(--space-s);
222
279
  }
223
280
 
224
281
  .ap-card__content code {
225
- background: var(--color-offset);
282
+ background: var(--color-offset-variant);
226
283
  border-radius: 3px;
227
284
  font-size: 0.9em;
228
285
  padding: 1px 4px;
@@ -234,24 +291,27 @@
234
291
  }
235
292
 
236
293
  .ap-card__content img {
237
- border-radius: var(--border-radius);
294
+ border-radius: var(--border-radius-small);
238
295
  height: auto;
239
296
  max-width: 100%;
240
297
  }
241
298
 
242
- /* Content warning */
299
+ /* ==========================================================================
300
+ Content Warning
301
+ ========================================================================== */
302
+
243
303
  .ap-card__cw {
244
304
  margin-bottom: var(--space-s);
245
305
  }
246
306
 
247
307
  .ap-card__cw-toggle {
248
- background: var(--color-offset);
249
- border: 1px solid var(--color-offset-active);
250
- border-radius: var(--border-radius);
251
- color: var(--color-text);
308
+ background: var(--color-offset-variant);
309
+ border: var(--border-width-thin) solid var(--color-outline);
310
+ border-radius: var(--border-radius-small);
311
+ color: var(--color-on-background);
252
312
  cursor: pointer;
253
313
  display: block;
254
- font-size: var(--font-size-small);
314
+ font-size: var(--font-size-s);
255
315
  padding: var(--space-s) var(--space-m);
256
316
  text-align: left;
257
317
  transition: background 0.2s ease;
@@ -259,12 +319,15 @@
259
319
  }
260
320
 
261
321
  .ap-card__cw-toggle:hover {
262
- background: var(--color-offset-active);
322
+ background: var(--color-offset-variant-darker);
263
323
  }
264
324
 
265
- /* Photo gallery */
325
+ /* ==========================================================================
326
+ Photo Gallery
327
+ ========================================================================== */
328
+
266
329
  .ap-card__gallery {
267
- border-radius: var(--border-radius);
330
+ border-radius: var(--border-radius-small);
268
331
  display: grid;
269
332
  gap: 2px;
270
333
  margin-bottom: var(--space-s);
@@ -277,7 +340,7 @@
277
340
  }
278
341
 
279
342
  .ap-card__gallery img {
280
- background: var(--color-offset);
343
+ background: var(--color-offset-variant);
281
344
  display: block;
282
345
  height: 200px;
283
346
  object-fit: cover;
@@ -285,7 +348,7 @@
285
348
  }
286
349
 
287
350
  .ap-card__gallery-link--more::after {
288
- background: rgba(0, 0, 0, 0.5);
351
+ background: hsl(var(--tint-neutral) 10% / 0.5);
289
352
  bottom: 0;
290
353
  content: "";
291
354
  left: 0;
@@ -295,7 +358,7 @@
295
358
  }
296
359
 
297
360
  .ap-card__gallery-more {
298
- color: #fff;
361
+ color: var(--color-neutral99);
299
362
  font-size: 1.5em;
300
363
  font-weight: 600;
301
364
  left: 50%;
@@ -315,12 +378,12 @@
315
378
  max-height: 400px;
316
379
  }
317
380
 
318
- /* 2 photos - side by side */
381
+ /* 2 photos — side by side */
319
382
  .ap-card__gallery--2 {
320
383
  grid-template-columns: 1fr 1fr;
321
384
  }
322
385
 
323
- /* 3 photos - one large, two small */
386
+ /* 3 photos — one large, two small */
324
387
  .ap-card__gallery--3 {
325
388
  grid-template-columns: 2fr 1fr;
326
389
  grid-template-rows: 1fr 1fr;
@@ -331,24 +394,30 @@
331
394
  height: 100%;
332
395
  }
333
396
 
334
- /* 4+ photos - 2x2 grid */
397
+ /* 4+ photos — 2x2 grid */
335
398
  .ap-card__gallery--4 {
336
399
  grid-template-columns: 1fr 1fr;
337
400
  grid-template-rows: 1fr 1fr;
338
401
  }
339
402
 
340
- /* Video embed */
403
+ /* ==========================================================================
404
+ Video Embed
405
+ ========================================================================== */
406
+
341
407
  .ap-card__video {
342
408
  margin-bottom: var(--space-s);
343
409
  }
344
410
 
345
411
  .ap-card__video video {
346
- border-radius: var(--border-radius);
412
+ border-radius: var(--border-radius-small);
347
413
  max-height: 400px;
348
414
  width: 100%;
349
415
  }
350
416
 
351
- /* Audio player */
417
+ /* ==========================================================================
418
+ Audio Player
419
+ ========================================================================== */
420
+
352
421
  .ap-card__audio {
353
422
  margin-bottom: var(--space-s);
354
423
  }
@@ -357,7 +426,10 @@
357
426
  width: 100%;
358
427
  }
359
428
 
360
- /* Tags */
429
+ /* ==========================================================================
430
+ Tags
431
+ ========================================================================== */
432
+
361
433
  .ap-card__tags {
362
434
  display: flex;
363
435
  flex-wrap: wrap;
@@ -366,22 +438,25 @@
366
438
  }
367
439
 
368
440
  .ap-card__tag {
369
- background: var(--color-offset);
370
- border-radius: var(--border-radius);
371
- color: var(--color-text-muted);
372
- font-size: var(--font-size-small);
441
+ background: var(--color-offset-variant);
442
+ border-radius: var(--border-radius-large);
443
+ color: var(--color-on-offset);
444
+ font-size: var(--font-size-s);
373
445
  padding: 2px var(--space-xs);
374
446
  text-decoration: none;
375
447
  }
376
448
 
377
449
  .ap-card__tag:hover {
378
- background: var(--color-offset-active);
379
- color: var(--color-text);
450
+ background: var(--color-offset-variant-darker);
451
+ color: var(--color-on-background);
380
452
  }
381
453
 
382
- /* Interaction buttons */
454
+ /* ==========================================================================
455
+ Interaction Buttons
456
+ ========================================================================== */
457
+
383
458
  .ap-card__actions {
384
- border-top: 1px solid var(--color-offset);
459
+ border-top: var(--border-width-thin) solid var(--color-outline);
385
460
  display: flex;
386
461
  flex-wrap: wrap;
387
462
  gap: var(--space-s);
@@ -391,12 +466,12 @@
391
466
  .ap-card__action {
392
467
  align-items: center;
393
468
  background: transparent;
394
- border: 1px solid var(--color-offset);
395
- border-radius: var(--border-radius);
396
- color: var(--color-text-muted);
469
+ border: var(--border-width-thin) solid var(--color-outline);
470
+ border-radius: var(--border-radius-small);
471
+ color: var(--color-on-offset);
397
472
  cursor: pointer;
398
473
  display: inline-flex;
399
- font-size: var(--font-size-small);
474
+ font-size: var(--font-size-s);
400
475
  gap: var(--space-xs);
401
476
  padding: var(--space-xs) var(--space-s);
402
477
  text-decoration: none;
@@ -404,22 +479,22 @@
404
479
  }
405
480
 
406
481
  .ap-card__action:hover {
407
- background: var(--color-offset);
408
- border-color: var(--color-offset-active);
409
- color: var(--color-text);
482
+ background: var(--color-offset-variant);
483
+ border-color: var(--color-outline-variant);
484
+ color: var(--color-on-background);
410
485
  }
411
486
 
412
- /* Active interaction states */
487
+ /* Active interaction states — using Indiekit's color palette */
413
488
  .ap-card__action--like.ap-card__action--active {
414
- background: rgba(225, 29, 72, 0.1);
415
- border-color: #e11d48;
416
- color: #e11d48;
489
+ background: var(--color-red90);
490
+ border-color: var(--color-red45);
491
+ color: var(--color-red45);
417
492
  }
418
493
 
419
494
  .ap-card__action--boost.ap-card__action--active {
420
- background: rgba(22, 163, 74, 0.1);
421
- border-color: #16a34a;
422
- color: #16a34a;
495
+ background: var(--color-green90);
496
+ border-color: var(--color-green50);
497
+ color: var(--color-green50);
423
498
  }
424
499
 
425
500
  .ap-card__action:disabled {
@@ -429,8 +504,8 @@
429
504
 
430
505
  /* Error message */
431
506
  .ap-card__action-error {
432
- color: #e11d48;
433
- font-size: var(--font-size-small);
507
+ color: var(--color-error);
508
+ font-size: var(--font-size-s);
434
509
  width: 100%;
435
510
  }
436
511
 
@@ -439,7 +514,7 @@
439
514
  ========================================================================== */
440
515
 
441
516
  .ap-pagination {
442
- border-top: 1px solid var(--color-offset);
517
+ border-top: var(--border-width-thin) solid var(--color-outline);
443
518
  display: flex;
444
519
  gap: var(--space-m);
445
520
  justify-content: space-between;
@@ -462,15 +537,15 @@
462
537
 
463
538
  .ap-compose__context {
464
539
  background: var(--color-offset);
465
- border-left: 3px solid var(--color-primary);
466
- border-radius: var(--border-radius);
540
+ border-left: var(--border-width-thickest) solid var(--color-primary);
541
+ border-radius: var(--border-radius-small);
467
542
  margin-bottom: var(--space-m);
468
543
  padding: var(--space-m);
469
544
  }
470
545
 
471
546
  .ap-compose__context-label {
472
- color: var(--color-text-muted);
473
- font-size: var(--font-size-small);
547
+ color: var(--color-on-offset);
548
+ font-size: var(--font-size-s);
474
549
  margin-bottom: var(--space-xs);
475
550
  }
476
551
 
@@ -481,15 +556,15 @@
481
556
 
482
557
  .ap-compose__context-text {
483
558
  border: 0;
484
- font-size: var(--font-size-small);
485
- line-height: 1.5;
559
+ font-size: var(--font-size-s);
560
+ line-height: var(--line-height-loose);
486
561
  margin: var(--space-xs) 0;
487
562
  padding: 0;
488
563
  }
489
564
 
490
565
  .ap-compose__context-link {
491
- color: var(--color-text-muted);
492
- font-size: var(--font-size-small);
566
+ color: var(--color-on-offset);
567
+ font-size: var(--font-size-s);
493
568
  overflow: hidden;
494
569
  text-overflow: ellipsis;
495
570
  white-space: nowrap;
@@ -502,8 +577,8 @@
502
577
  }
503
578
 
504
579
  .ap-compose__mode {
505
- border: 1px solid var(--color-offset);
506
- border-radius: var(--border-radius);
580
+ border: var(--border-width-thin) solid var(--color-outline);
581
+ border-radius: var(--border-radius-small);
507
582
  display: flex;
508
583
  flex-direction: column;
509
584
  gap: var(--space-s);
@@ -522,9 +597,9 @@
522
597
  }
523
598
 
524
599
  .ap-compose__mode-hint {
525
- color: var(--color-text-muted);
600
+ color: var(--color-on-offset);
526
601
  display: block;
527
- font-size: var(--font-size-small);
602
+ font-size: var(--font-size-s);
528
603
  margin-left: 1.5em;
529
604
  width: 100%;
530
605
  }
@@ -534,11 +609,13 @@
534
609
  }
535
610
 
536
611
  .ap-compose__textarea {
537
- border: 1px solid var(--color-offset-active);
538
- border-radius: var(--border-radius);
612
+ background: var(--color-background);
613
+ border: var(--border-width-thick) solid var(--color-outline);
614
+ border-radius: var(--border-radius-small);
615
+ color: var(--color-on-background);
539
616
  font-family: inherit;
540
- font-size: var(--font-size-body);
541
- line-height: 1.6;
617
+ font-size: var(--font-size-m);
618
+ line-height: var(--line-height-prose);
542
619
  padding: var(--space-s);
543
620
  resize: vertical;
544
621
  width: 100%;
@@ -546,28 +623,28 @@
546
623
 
547
624
  .ap-compose__textarea:focus {
548
625
  border-color: var(--color-primary);
549
- outline: 2px solid var(--color-primary);
626
+ outline: var(--border-width-thick) solid var(--color-primary);
550
627
  outline-offset: -2px;
551
628
  }
552
629
 
553
630
  .ap-compose__counter {
554
- font-size: var(--font-size-small);
631
+ font-size: var(--font-size-s);
555
632
  padding-top: var(--space-xs);
556
633
  text-align: right;
557
634
  }
558
635
 
559
636
  .ap-compose__counter--warn {
560
- color: #d97706;
637
+ color: var(--color-yellow50);
561
638
  }
562
639
 
563
640
  .ap-compose__counter--over {
564
- color: #e11d48;
641
+ color: var(--color-error);
565
642
  font-weight: 600;
566
643
  }
567
644
 
568
645
  .ap-compose__syndication {
569
- border: 1px solid var(--color-offset);
570
- border-radius: var(--border-radius);
646
+ border: var(--border-width-thin) solid var(--color-outline);
647
+ border-radius: var(--border-radius-small);
571
648
  display: flex;
572
649
  flex-direction: column;
573
650
  gap: var(--space-xs);
@@ -593,10 +670,10 @@
593
670
  .ap-compose__submit {
594
671
  background: var(--color-primary);
595
672
  border: 0;
596
- border-radius: var(--border-radius);
597
- color: #fff;
673
+ border-radius: var(--border-radius-small);
674
+ color: var(--color-on-primary, var(--color-neutral99));
598
675
  cursor: pointer;
599
- font-size: var(--font-size-body);
676
+ font-size: var(--font-size-m);
600
677
  font-weight: 600;
601
678
  padding: var(--space-s) var(--space-l);
602
679
  }
@@ -606,12 +683,12 @@
606
683
  }
607
684
 
608
685
  .ap-compose__cancel {
609
- color: var(--color-text-muted);
686
+ color: var(--color-on-offset);
610
687
  text-decoration: none;
611
688
  }
612
689
 
613
690
  .ap-compose__cancel:hover {
614
- color: var(--color-text);
691
+ color: var(--color-on-background);
615
692
  text-decoration: underline;
616
693
  }
617
694
 
@@ -621,17 +698,17 @@
621
698
 
622
699
  .ap-notification {
623
700
  align-items: flex-start;
624
- background: var(--color-background);
625
- border: 1px solid var(--color-offset);
626
- border-radius: var(--border-radius);
701
+ background: var(--color-offset);
702
+ border: var(--border-width-thin) solid var(--color-outline);
703
+ border-radius: var(--border-radius-small);
627
704
  display: flex;
628
705
  gap: var(--space-s);
629
706
  padding: var(--space-m);
630
707
  }
631
708
 
632
709
  .ap-notification--unread {
633
- border-color: rgba(255, 204, 0, 0.5);
634
- box-shadow: 0 0 8px 0 rgba(255, 204, 0, 0.3);
710
+ border-color: var(--color-yellow50);
711
+ box-shadow: 0 0 8px 0 hsl(var(--tint-yellow) 50% / 0.3);
635
712
  }
636
713
 
637
714
  .ap-notification__icon {
@@ -649,13 +726,13 @@
649
726
  }
650
727
 
651
728
  .ap-notification__action {
652
- color: var(--color-text-muted);
729
+ color: var(--color-on-offset);
653
730
  }
654
731
 
655
732
  .ap-notification__target {
656
- color: var(--color-text-muted);
733
+ color: var(--color-on-offset);
657
734
  display: block;
658
- font-size: var(--font-size-small);
735
+ font-size: var(--font-size-s);
659
736
  margin-top: var(--space-xs);
660
737
  overflow: hidden;
661
738
  text-overflow: ellipsis;
@@ -663,17 +740,17 @@
663
740
  }
664
741
 
665
742
  .ap-notification__excerpt {
666
- background: var(--color-offset);
667
- border-radius: var(--border-radius);
668
- font-size: var(--font-size-small);
743
+ background: var(--color-offset-variant);
744
+ border-radius: var(--border-radius-small);
745
+ font-size: var(--font-size-s);
669
746
  margin-top: var(--space-xs);
670
747
  padding: var(--space-xs) var(--space-s);
671
748
  }
672
749
 
673
750
  .ap-notification__time {
674
- color: var(--color-text-muted);
751
+ color: var(--color-on-offset);
675
752
  flex-shrink: 0;
676
- font-size: var(--font-size-small);
753
+ font-size: var(--font-size-xs);
677
754
  }
678
755
 
679
756
  /* ==========================================================================
@@ -681,7 +758,7 @@
681
758
  ========================================================================== */
682
759
 
683
760
  .ap-profile__header {
684
- border-radius: var(--border-radius);
761
+ border-radius: var(--border-radius-small);
685
762
  height: 200px;
686
763
  margin-bottom: var(--space-m);
687
764
  overflow: hidden;
@@ -702,7 +779,7 @@
702
779
  }
703
780
 
704
781
  .ap-profile__avatar {
705
- border: 3px solid var(--color-background);
782
+ border: var(--border-width-thickest) solid var(--color-background);
706
783
  border-radius: 50%;
707
784
  height: 80px;
708
785
  object-fit: cover;
@@ -711,8 +788,8 @@
711
788
 
712
789
  .ap-profile__avatar--placeholder {
713
790
  align-items: center;
714
- background: var(--color-offset);
715
- color: var(--color-text-muted);
791
+ background: var(--color-offset-variant);
792
+ color: var(--color-on-offset);
716
793
  display: flex;
717
794
  font-size: 2em;
718
795
  font-weight: 600;
@@ -720,17 +797,17 @@
720
797
  }
721
798
 
722
799
  .ap-profile__name {
723
- font-size: var(--font-size-heading-3);
800
+ font-size: var(--font-size-xl);
724
801
  margin-bottom: var(--space-xs);
725
802
  }
726
803
 
727
804
  .ap-profile__handle {
728
- color: var(--color-text-muted);
805
+ color: var(--color-on-offset);
729
806
  margin-bottom: var(--space-s);
730
807
  }
731
808
 
732
809
  .ap-profile__bio {
733
- line-height: 1.6;
810
+ line-height: var(--line-height-prose);
734
811
  margin-bottom: var(--space-s);
735
812
  }
736
813
 
@@ -747,11 +824,11 @@
747
824
 
748
825
  .ap-profile__action {
749
826
  background: transparent;
750
- border: 1px solid var(--color-offset-active);
751
- border-radius: var(--border-radius);
752
- color: var(--color-text);
827
+ border: var(--border-width-thin) solid var(--color-outline);
828
+ border-radius: var(--border-radius-small);
829
+ color: var(--color-on-background);
753
830
  cursor: pointer;
754
- font-size: var(--font-size-small);
831
+ font-size: var(--font-size-s);
755
832
  padding: var(--space-xs) var(--space-m);
756
833
  text-decoration: none;
757
834
  }
@@ -763,12 +840,12 @@
763
840
  .ap-profile__action--follow.ap-profile__action--active {
764
841
  background: var(--color-primary);
765
842
  border-color: var(--color-primary);
766
- color: #fff;
843
+ color: var(--color-on-primary, var(--color-neutral99));
767
844
  }
768
845
 
769
846
  .ap-profile__action--danger:hover {
770
- border-color: #e11d48;
771
- color: #e11d48;
847
+ border-color: var(--color-error);
848
+ color: var(--color-error);
772
849
  }
773
850
 
774
851
  .ap-profile__posts {
@@ -776,8 +853,8 @@
776
853
  }
777
854
 
778
855
  .ap-profile__posts h3 {
779
- border-bottom: 1px solid var(--color-offset);
780
- font-size: var(--font-size-heading-4);
856
+ border-bottom: var(--border-width-thin) solid var(--color-outline);
857
+ font-size: var(--font-size-l);
781
858
  margin-bottom: var(--space-m);
782
859
  padding-bottom: var(--space-s);
783
860
  }
@@ -791,7 +868,7 @@
791
868
  }
792
869
 
793
870
  .ap-moderation__section h2 {
794
- font-size: var(--font-size-heading-4);
871
+ font-size: var(--font-size-l);
795
872
  margin-bottom: var(--space-s);
796
873
  }
797
874
 
@@ -803,7 +880,7 @@
803
880
 
804
881
  .ap-moderation__entry {
805
882
  align-items: center;
806
- border-bottom: 1px solid var(--color-offset);
883
+ border-bottom: var(--border-width-thin) solid var(--color-outline);
807
884
  display: flex;
808
885
  gap: var(--space-s);
809
886
  justify-content: space-between;
@@ -819,18 +896,18 @@
819
896
 
820
897
  .ap-moderation__remove {
821
898
  background: transparent;
822
- border: 1px solid var(--color-offset-active);
823
- border-radius: var(--border-radius);
824
- color: var(--color-text-muted);
899
+ border: var(--border-width-thin) solid var(--color-outline);
900
+ border-radius: var(--border-radius-small);
901
+ color: var(--color-on-offset);
825
902
  cursor: pointer;
826
903
  flex-shrink: 0;
827
- font-size: var(--font-size-small);
904
+ font-size: var(--font-size-s);
828
905
  padding: var(--space-xs) var(--space-s);
829
906
  }
830
907
 
831
908
  .ap-moderation__remove:hover {
832
- border-color: #e11d48;
833
- color: #e11d48;
909
+ border-color: var(--color-error);
910
+ color: var(--color-error);
834
911
  }
835
912
 
836
913
  .ap-moderation__add-form {
@@ -839,24 +916,27 @@
839
916
  }
840
917
 
841
918
  .ap-moderation__input {
842
- border: 1px solid var(--color-offset-active);
843
- border-radius: var(--border-radius);
919
+ background: var(--color-background);
920
+ border: var(--border-width-thick) solid var(--color-outline);
921
+ border-radius: var(--border-radius-small);
922
+ color: var(--color-on-background);
844
923
  flex: 1;
845
- font-size: var(--font-size-body);
924
+ font-size: var(--font-size-m);
846
925
  padding: var(--space-xs) var(--space-s);
847
926
  }
848
927
 
849
928
  .ap-moderation__add-btn {
850
929
  background: var(--color-offset);
851
- border: 1px solid var(--color-offset-active);
852
- border-radius: var(--border-radius);
930
+ border: var(--border-width-thin) solid var(--color-outline);
931
+ border-radius: var(--border-radius-small);
932
+ color: var(--color-on-background);
853
933
  cursor: pointer;
854
- font-size: var(--font-size-body);
934
+ font-size: var(--font-size-m);
855
935
  padding: var(--space-xs) var(--space-m);
856
936
  }
857
937
 
858
938
  .ap-moderation__add-btn:hover {
859
- background: var(--color-offset-active);
939
+ background: var(--color-offset-variant);
860
940
  }
861
941
 
862
942
  /* ==========================================================================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rmdes/indiekit-endpoint-activitypub",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
5
5
  "keywords": [
6
6
  "indiekit",
package/views/partials/ap-item-card.njk CHANGED
@@ -1,6 +1,6 @@
1
1
  {# Timeline item card partial - reusable across timeline and profile views #}
2
2
 
3
- <article class="ap-card">
3
+ <article class="ap-card{% if item.type %} ap-card--{{ item.type }}{% endif %}{% if item.inReplyTo %} ap-card--reply{% endif %}">
4
4
  {# Boost header if this is a boosted post #}
5
5
  {% if item.type == "boost" and item.boostedBy %}
6
6
  <div class="ap-card__boost">