From 18ae03554f02e28569e7100d0a4417bbc821d39a Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Thu, 30 Dec 2021 00:49:43 +0000 Subject: [PATCH] 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 | 12 +- css/base.css | 11 +- css/dark.css | 4 +- css/dark.js | 351 ++++++++ html/admin.html | 196 ++--- html/crash.html | 6 +- html/create-success.html | 4 +- html/form.html | 34 +- html/password-reset.html | 4 +- html/setup.html | 178 ++-- package-lock.json | 1680 +++++++++++++++++++++++++++++++++++--- package.json | 2 +- scripts/dark-variant.sh | 7 + site/index.html | 8 +- site/ts/main.ts | 8 +- site/ts/repo.ts | 2 +- tailwind.config.js | 26 + ts/admin.ts | 14 +- ts/crash.ts | 16 +- ts/modules/accounts.ts | 28 +- ts/modules/common.ts | 8 +- ts/modules/discord.ts | 2 +- ts/modules/invites.ts | 30 +- ts/modules/profiles.ts | 4 +- ts/modules/settings.ts | 16 +- ts/modules/theme.ts | 18 +- 26 files changed, 2255 insertions(+), 414 deletions(-) create mode 100644 css/dark.js create mode 100755 scripts/dark-variant.sh create mode 100644 tailwind.config.js diff --git a/Makefile b/Makefile index 9ef6d01..ef6bcc1 100644 --- a/Makefile +++ b/Makefile @@ -118,6 +118,7 @@ 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 @@ -125,11 +126,16 @@ inline: 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 diff --git a/css/base.css b/css/base.css index 56b0f0c..403737e 100644 --- a/css/base.css +++ b/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%); } diff --git a/css/dark.css b/css/dark.css index a4e6933..319e251 100644 --- a/css/dark.css +++ b/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; } diff --git a/css/dark.js b/css/dark.js new file mode 100644 index 0000000..353aa87 --- /dev/null +++ b/css/dark.js @@ -0,0 +1,351 @@ +var c = { + inherit: 'inherit', + current: 'currentColor', + transparent: 'transparent', + black: '#000', + white: '#fff', + d_neutral: { + 900: "rgba(255, 255, 255, 0.87)", + 800: "rgba(255, 255, 255, 0.8)", + 700: "rgba(255, 255, 255, 0.73)", + 600: "rgba(255, 255, 255, 0.66)", + 500: "rgb(153, 153, 153)", + 400: "#383838", + 300: "#303030", + 200: "#292929", + 100: "#242424", + 50: "#202020", + 000: "#101010" + }, + d_critical: { + 900: "#fef2f2", + 800: "#fee2e2", + 700: "#fecaca", + 600: "#fca5a5", + 500: "#f87171", + 400: "#ef4444", + 300: "#dc2626", + 200: "#b91c1c", + 100: "#991b1b", + 50: "#7f1d1d", + 000: "#441313" + }, + d_warning: { + 900: "#fffbeb", + 800: "#fef3c7", + 700: "#fde68a", + 600: "#fcd34d", + 500: "#fbbf24", + 400: "#f59e0b", + 300: "#d97706", + 200: "#b45309", + 100: "#92400e", + 50: "#783900", + 000: "#411e01" + }, + d_positive: { + 900: "#f0fdf4", + 800: "#dcfce7", + 700: "#bbf7d0", + 600: "#86efac", + 500: "#4ade80", + 400: "#22c55e", + 300: "#16a34a", + 200: "#15803d", + 100: "#166534", + 50: "#14532d", + 000: "#0f2e1b" + }, + d_urge: { + 900: "#e0ffff", + 800: "#c0fbff", + 700: "#a0f4ff", + 600: "#80e9ff", + 500: "#60dbfb", + 400: "#40cbf3", + 300: "#20b9e9", + 200: "#00a4dc", + 100: "#0054bc", + 50: "#00169a", + 000: "#050076" + }, + d_info: { + 900: "#f5f3ff", + 800: "#ede9fe", + 700: "#ddd6fe", + 600: "#c4b5fd", + 500: "#a78bfa", + 400: "#8b5cf6", + 300: "#7c3aed", + 200: "#6d28d9", + 100: "#5b21b6", + 50: "#4c1d95", + 000: "#240e44" + }, + slate: { + 50: '#f8fafc', + 100: '#f1f5f9', + 200: '#e2e8f0', + 300: '#cbd5e1', + 400: '#94a3b8', + 500: '#64748b', + 600: '#475569', + 700: '#334155', + 800: '#1e293b', + 900: '#0f172a' + }, + gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 200: '#e5e7eb', + 300: '#d1d5db', + 400: '#9ca3af', + 500: '#6b7280', + 600: '#4b5563', + 700: '#374151', + 800: '#1f2937', + 900: '#111827' + }, + zinc: { + 50: '#fafafa', + 100: '#f4f4f5', + 200: '#e4e4e7', + 300: '#d4d4d8', + 400: '#a1a1aa', + 500: '#71717a', + 600: '#52525b', + 700: '#3f3f46', + 800: '#27272a', + 900: '#18181b' + }, + neutral: { + 50: '#fafafa', + 100: '#f5f5f5', + 200: '#e5e5e5', + 300: '#d4d4d4', + 400: '#a3a3a3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#171717' + }, + stone: { + 50: '#fafaf9', + 100: '#f5f5f4', + 200: '#e7e5e4', + 300: '#d6d3d1', + 400: '#a8a29e', + 500: '#78716c', + 600: '#57534e', + 700: '#44403c', + 800: '#292524', + 900: '#1c1917' + }, + red: { + 50: '#fef2f2', + 100: '#fee2e2', + 200: '#fecaca', + 300: '#fca5a5', + 400: '#f87171', + 500: '#ef4444', + 600: '#dc2626', + 700: '#b91c1c', + 800: '#991b1b', + 900: '#7f1d1d' + }, + orange: { + 50: '#fff7ed', + 100: '#ffedd5', + 200: '#fed7aa', + 300: '#fdba74', + 400: '#fb923c', + 500: '#f97316', + 600: '#ea580c', + 700: '#c2410c', + 800: '#9a3412', + 900: '#7c2d12' + }, + amber: { + 50: '#fffbeb', + 100: '#fef3c7', + 200: '#fde68a', + 300: '#fcd34d', + 400: '#fbbf24', + 500: '#f59e0b', + 600: '#d97706', + 700: '#b45309', + 800: '#92400e', + 900: '#78350f' + }, + yellow: { + 50: '#fefce8', + 100: '#fef9c3', + 200: '#fef08a', + 300: '#fde047', + 400: '#facc15', + 500: '#eab308', + 600: '#ca8a04', + 700: '#a16207', + 800: '#854d0e', + 900: '#713f12' + }, + lime: { + 50: '#f7fee7', + 100: '#ecfccb', + 200: '#d9f99d', + 300: '#bef264', + 400: '#a3e635', + 500: '#84cc16', + 600: '#65a30d', + 700: '#4d7c0f', + 800: '#3f6212', + 900: '#365314' + }, + green: { + 50: '#f0fdf4', + 100: '#dcfce7', + 200: '#bbf7d0', + 300: '#86efac', + 400: '#4ade80', + 500: '#22c55e', + 600: '#16a34a', + 700: '#15803d', + 800: '#166534', + 900: '#14532d' + }, + emerald: { + 50: '#ecfdf5', + 100: '#d1fae5', + 200: '#a7f3d0', + 300: '#6ee7b7', + 400: '#34d399', + 500: '#10b981', + 600: '#059669', + 700: '#047857', + 800: '#065f46', + 900: '#064e3b' + }, + teal: { + 50: '#f0fdfa', + 100: '#ccfbf1', + 200: '#99f6e4', + 300: '#5eead4', + 400: '#2dd4bf', + 500: '#14b8a6', + 600: '#0d9488', + 700: '#0f766e', + 800: '#115e59', + 900: '#134e4a' + }, + cyan: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63' + }, + sky: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 300: '#7dd3fc', + 400: '#38bdf8', + 500: '#0ea5e9', + 600: '#0284c7', + 700: '#0369a1', + 800: '#075985', + 900: '#0c4a6e' + }, + blue: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a' + }, + indigo: { + 50: '#eef2ff', + 100: '#e0e7ff', + 200: '#c7d2fe', + 300: '#a5b4fc', + 400: '#818cf8', + 500: '#6366f1', + 600: '#4f46e5', + 700: '#4338ca', + 800: '#3730a3', + 900: '#312e81' + }, + violet: { + 50: '#f5f3ff', + 100: '#ede9fe', + 200: '#ddd6fe', + 300: '#c4b5fd', + 400: '#a78bfa', + 500: '#8b5cf6', + 600: '#7c3aed', + 700: '#6d28d9', + 800: '#5b21b6', + 900: '#4c1d95' + }, + purple: { + 50: '#faf5ff', + 100: '#f3e8ff', + 200: '#e9d5ff', + 300: '#d8b4fe', + 400: '#c084fc', + 500: '#a855f7', + 600: '#9333ea', + 700: '#7e22ce', + 800: '#6b21a8', + 900: '#581c87' + }, + fuchsia: { + 50: '#fdf4ff', + 100: '#fae8ff', + 200: '#f5d0fe', + 300: '#f0abfc', + 400: '#e879f9', + 500: '#d946ef', + 600: '#c026d3', + 700: '#a21caf', + 800: '#86198f', + 900: '#701a75' + }, + pink: { + 50: '#fdf2f8', + 100: '#fce7f3', + 200: '#fbcfe8', + 300: '#f9a8d4', + 400: '#f472b6', + 500: '#ec4899', + 600: '#db2777', + 700: '#be185d', + 800: '#9d174d', + 900: '#831843' + }, + rose: { + 50: '#fff1f2', + 100: '#ffe4e6', + 200: '#fecdd3', + 300: '#fda4af', + 400: '#fb7185', + 500: '#f43f5e', + 600: '#e11d48', + 700: '#be123c', + 800: '#9f1239', + 900: '#881337' + } +} + +module.exports = c; diff --git a/html/admin.html b/html/admin.html index f76fd28..2fc6f9f 100644 --- a/html/admin.html +++ b/html/admin.html @@ -22,23 +22,23 @@ @@ -59,13 +59,13 @@
-
+
GitHub Ko-fi
- discord + discord

Available under the MIT License.

{{ .license }}
@@ -78,17 +78,17 @@
-
+
-
+
@@ -109,10 +109,10 @@ {{ .strings.sendDeleteNotificationEmail }} - +
@@ -124,7 +124,7 @@
-
+
@@ -132,7 +132,7 @@
-
+
@@ -142,7 +142,7 @@
-
+
@@ -150,7 +150,7 @@
-
+
@@ -161,10 +161,10 @@ {{ .strings.sendDeleteNotificationEmail }} - +
@@ -177,27 +177,27 @@
{{ .strings.variables }}
- {username} + {username}
- + - +

{{ .strings.markdownSupported }}

- {{ .strings.saveAsTemplate }} + {{ .strings.saveAsTemplate }}
-
+
{{ .strings.preview }}
@@ -232,16 +232,16 @@ {{ .strings.conditionals }}
- +

{{ .strings.markdownSupported }}

-
+
{{ .strings.preview }}
@@ -249,38 +249,38 @@
{{ end }} @@ -369,7 +369,7 @@ ×

- +
@@ -379,12 +379,12 @@
{{ .strings.linkMatrix }}

{{ .strings.linkMatrixDescription }}

- - - + + +
@@ -395,7 +395,7 @@
-
+
- {{ .strings.logout }} + {{ .strings.logout }}
-
+
{{ .strings.invites }}
-
+
{{ .strings.create }}
-
+
-
+
@@ -455,7 +455,7 @@
-
+
@@ -465,7 +465,7 @@
-
+
@@ -473,7 +473,7 @@
-
+
@@ -484,7 +484,7 @@

{{ .strings.userExpiryDescription }}

-