WIP! A BB-style forum, on the ATmosphere! We're still working... we'll be back soon when we have something to show off!
node typescript hono htmx atproto
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(web): replace all hardcoded CSS values with design tokens in mod and structure UI (ATB-52)

Malpercio af4216c1 25f26efb

+31 -31
+31 -31
apps/web/public/static/css/theme.css
··· 752 752 753 753 .post-card__mod-actions { 754 754 display: flex; 755 - gap: var(--space-2); 756 - margin-top: var(--space-2); 757 - padding-top: var(--space-2); 758 - border-top: 1px solid var(--color-border); 755 + gap: var(--space-sm); 756 + margin-top: var(--space-sm); 757 + padding-top: var(--space-sm); 758 + border-top: var(--border-width) solid var(--color-border); 759 759 } 760 760 761 761 .mod-btn { 762 - font-size: 0.75rem; 763 - padding: 0.25rem 0.6rem; 764 - border: 2px solid currentColor; 765 - border-radius: 0; 762 + font-size: var(--font-size-xs); 763 + padding: var(--space-xs) var(--space-sm); 764 + border: var(--border-width) solid currentColor; 765 + border-radius: var(--radius); 766 766 cursor: pointer; 767 767 background: transparent; 768 768 font-family: inherit; 769 - font-weight: 700; 769 + font-weight: var(--font-weight-bold); 770 770 text-transform: uppercase; 771 771 letter-spacing: 0.05em; 772 772 } 773 773 774 774 .mod-btn--hide, 775 775 .mod-btn--lock { 776 - color: var(--color-danger, #d00); 776 + color: var(--color-danger); 777 777 } 778 778 779 779 .mod-btn--hide:hover, 780 780 .mod-btn--lock:hover { 781 - background: var(--color-danger, #d00); 782 - color: #fff; 781 + background: var(--color-danger); 782 + color: var(--color-surface); 783 783 } 784 784 785 785 .mod-btn--unhide, 786 786 .mod-btn--unlock, 787 787 .mod-btn--ban { 788 - color: var(--color-text-muted, #666); 788 + color: var(--color-text-muted); 789 789 } 790 790 791 791 .mod-btn--unhide:hover, 792 792 .mod-btn--unlock:hover, 793 793 .mod-btn--ban:hover { 794 - background: var(--color-text-muted, #666); 795 - color: #fff; 794 + background: var(--color-text-muted); 795 + color: var(--color-surface); 796 796 } 797 797 798 798 .topic-mod-controls { 799 - margin-bottom: var(--space-4); 799 + margin-bottom: var(--space-md); 800 800 } 801 801 802 802 .mod-dialog { 803 - border: 3px solid var(--color-border); 804 - border-radius: 0; 805 - padding: var(--space-6); 803 + border: var(--border-width) solid var(--color-border); 804 + border-radius: var(--radius); 805 + padding: var(--space-lg); 806 806 max-width: 480px; 807 807 width: 90vw; 808 - box-shadow: 6px 6px 0 var(--color-shadow); 808 + box-shadow: var(--card-shadow); 809 809 background: var(--color-bg); 810 810 } 811 811 ··· 815 815 816 816 .mod-dialog__title { 817 817 margin-top: 0; 818 - margin-bottom: var(--space-4); 819 - font-size: 1.25rem; 818 + margin-bottom: var(--space-md); 819 + font-size: var(--font-size-lg); 820 820 } 821 821 822 822 /* ═══════════════════════════════════════════════════════════════════════════ ··· 931 931 } 932 932 933 933 .admin-nav-card__icon { 934 - font-size: var(--font-size-xl, 2rem); 934 + font-size: var(--font-size-xl); 935 935 margin-bottom: var(--space-sm); 936 936 } 937 937 ··· 1005 1005 .structure-page { 1006 1006 display: flex; 1007 1007 flex-direction: column; 1008 - gap: var(--space-6, 1.5rem); 1008 + gap: var(--space-lg); 1009 1009 } 1010 1010 1011 1011 .structure-category { 1012 1012 background: var(--color-surface); 1013 1013 border: var(--border-width) solid var(--color-border); 1014 - border-radius: var(--radius, 0.5rem); 1014 + border-radius: var(--radius); 1015 1015 overflow: hidden; 1016 1016 } 1017 1017 ··· 1051 1051 .structure-board { 1052 1052 background: var(--color-bg); 1053 1053 border: var(--border-width) solid var(--color-border); 1054 - border-radius: var(--radius, 0.375rem); 1054 + border-radius: var(--radius); 1055 1055 } 1056 1056 1057 1057 .structure-board__header { ··· 1094 1094 1095 1095 .structure-add-board { 1096 1096 border: var(--border-width) dashed var(--color-border); 1097 - border-radius: var(--radius, 0.375rem); 1097 + border-radius: var(--radius); 1098 1098 background: transparent; 1099 1099 } 1100 1100 ··· 1109 1109 1110 1110 .structure-add-board__trigger:hover { 1111 1111 background: var(--color-surface); 1112 - border-radius: var(--radius, 0.375rem); 1112 + border-radius: var(--radius); 1113 1113 } 1114 1114 1115 1115 .structure-add-category { ··· 1117 1117 } 1118 1118 1119 1119 .structure-confirm-dialog { 1120 - border-radius: var(--radius, 0.5rem); 1120 + border-radius: var(--radius); 1121 1121 border: var(--border-width) solid var(--color-border); 1122 - padding: var(--space-6, 1.5rem); 1122 + padding: var(--space-lg); 1123 1123 max-width: 24rem; 1124 1124 } 1125 1125 ··· 1142 1142 color: var(--color-danger); 1143 1143 border: var(--border-width) solid var(--color-danger); 1144 1144 border-left-width: calc(var(--border-width) * 3); 1145 - border-radius: var(--radius, 0.5rem); 1145 + border-radius: var(--radius); 1146 1146 padding: var(--space-sm) var(--space-md); 1147 1147 margin-bottom: var(--space-md); 1148 1148 }