Theme flagged content controls

scss/westgate/_controls.scss

@@ -498,6 +498,36 @@ table[component="notification/table"] a[data-type]:focus {
 	color: #f2dddd;
 }
 
+.page-flags .filter-btn,
+.page-flags [component="flags/filters"] .btn,
+.page-flags [component="flags/bulk-actions"] .btn {
+	color: var(--wg-text-soft) !important;
+}
+
+.page-flags [component="flags/filters"] .btn-warning {
+	--bs-btn-color: var(--wg-text-soft);
+	--bs-btn-bg: rgba(8, 7, 10, 0.12);
+	--bs-btn-border-color: rgba(216, 194, 138, 0.28);
+	--bs-btn-hover-color: var(--wg-text);
+	--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+	--bs-btn-hover-border-color: rgba(216, 194, 138, 0.46);
+	--bs-btn-active-color: var(--wg-text);
+	--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+	--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
+	background-image: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.06));
+	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
+}
+
+.page-flags [component="flags/filters"] .caret {
+	color: var(--wg-gold) !important;
+	opacity: 0.8 !important;
+}
+
+.page-flags [component="flags/filters"] .text-bg-primary,
+.page-flags [component="flags/filters"] .text-bg-primary .btn {
+	color: var(--wg-ledger-ink) !important;
+}
+
 :focus-visible {
 	outline: 2px solid var(--wg-focus) !important;
 	outline-offset: 2px;

scss/westgate/_surfaces.scss

@@ -295,3 +295,43 @@ li[component="category/topic"] .user-icon {
 	color: var(--wg-text) !important;
 	font-weight: 600;
 }
+
+.page-flags [component="flags/filters"] {
+	border-bottom-color: rgba(194, 163, 90, 0.12) !important;
+}
+
+.page-flags [component="flags/list"] {
+	--bs-table-bg: transparent;
+	--bs-table-color: var(--wg-text-soft);
+	--bs-table-border-color: rgba(194, 163, 90, 0.1);
+	--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
+	--bs-table-hover-color: var(--wg-text);
+	color: var(--wg-text-soft) !important;
+}
+
+.page-flags [component="flags/list"] :where(th, td) {
+	color: var(--wg-text-soft) !important;
+	border-color: rgba(194, 163, 90, 0.1) !important;
+}
+
+.page-flags [component="flags/list"] thead :where(th, td) {
+	color: var(--wg-ledger-ink-muted) !important;
+}
+
+.page-flags [component="flags/list"] a.text-reset {
+	color: var(--wg-text-muted) !important;
+}
+
+.page-flags [component="flags/list"] a.text-reset:hover,
+.page-flags [component="flags/list"] a.text-reset:focus {
+	color: var(--wg-text) !important;
+}
+
+.page-flags [component="flags/list"] input[type="checkbox"] {
+	accent-color: var(--wg-gold);
+}
+
+.page-flags [component="flags/list"] .badge,
+.page-flags .card.card-header {
+	color: var(--wg-text) !important;
+}