tailwind: upgrade a17t, somewhat functional dark mode

instead of adding dark: variants to each element, a preprocessor script
adds them. still needs to be implemented to typescript.

Makefile

@@ -118,18 +118,24 @@ bundle-css:
 	-mkdir -p $(DATA)/web/css
 	$(info bundling css)
 	$(ESBUILD) --bundle css/base.css --outfile=$(DATA)/web/css/bundle.css --external:remixicon.css --minify
+	npx tailwindcss -i $(DATA)/web/css/bundle.css -o $(DATA)/web/css/bundle.css
 
 inline:
 	cp html/crash.html $(DATA)/crash.html
 	$(UNCSS)
 	node scripts/inline.js root $(DATA) $(DATA)/crash.html $(DATA)/crash.html
 	rm $(DATA)/bundle.css
 
+variants-html:
+	$(info copying html)
+	cp -r html $(DATA)/
+	$(info adding dark variants to html)
+	scripts/dark-variant.sh $(DATA)/html
+
 copy:
 	$(info copying fonts)
 	cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 $(DATA)/web/css/
-	$(info copying html)
-	cp -r html $(DATA)/
+	$(info copying crash page)
 	mv $(DATA)/crash.html $(DATA)/html/
 	$(info copying static data)
 	-mkdir -p $(DATA)/web
@@ -159,4 +165,4 @@ clean:
 	-rm docs/docs.go docs/swagger.json docs/swagger.yaml
 	go clean
 
-all: configuration npm email typescript bundle-css inline swagger copy compile
+all: configuration npm email typescript variants-html bundle-css inline swagger copy compile

css/base.css

@@ -1,10 +1,13 @@
-@import "../node_modules/a17t/dist/a17t.css";
 @import "remixicon.css";
 @import "./modal.css";
 @import "./dark.css";
 @import "./tooltip.css";
 @import "./loader.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
     --border-width-default: 2px;
     --border-width-2: 3px;
@@ -16,7 +19,7 @@
     --settings-section-button-filter: 90%;
 }
 
-.body {
+.dark body {
     background-color: #101010;
 }
 
@@ -543,10 +546,10 @@ div.card:contains(section.banner.footer) {
     padding: var(--spacing-4, 1rem);
 }
 
-.button.discord.\!normal {
+.button.discord.\@low {
     background-color: rgba(88, 101, 242,60%);
 }
 
-.button.discord.\!normal:not(.lang-link) {
+.button.discord.\@low:not(.lang-link) {
     color: rgba(38, 51, 192, 90%);
 }

css/dark.css

@@ -1,4 +1,4 @@
-.dark-theme {
+.dark {
 
     --settings-section-button-filter: 110%;
 
@@ -86,6 +86,6 @@
   display: initial;
 }
 
-.dark-theme select option {
+.dark select option {
     background: #202020;
 }