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.

ts/admin.ts

@@ -13,16 +13,16 @@ loadTheme();
 const themeButton = document.getElementById('button-theme') as HTMLSpanElement;
 const switchThemeIcon = () => {
     const icon = themeButton.childNodes[0] as HTMLElement;
-    if (document.documentElement.classList.contains("dark-theme")) {
+    if (document.documentElement.classList.contains("dark")) {
         icon.classList.add("ri-sun-line");
         icon.classList.remove("ri-moon-line");
         themeButton.classList.add("~warning");
         themeButton.classList.remove("~neutral");
-        themeButton.classList.remove("!high");
+        themeButton.classList.remove("@high");
     } else {
         icon.classList.add("ri-moon-line");
         icon.classList.remove("ri-sun-line");
-        themeButton.classList.add("!high");
+        themeButton.classList.add("@high");
         themeButton.classList.add("~neutral");
         themeButton.classList.remove("~warning");
     }
@@ -117,10 +117,10 @@ window.notifications = new notificationBox(document.getElementById('notification
     const user = document.getElementById('radio-use-user') as HTMLInputElement;
     const profileSelect = document.getElementById('modify-user-profiles') as HTMLDivElement;
     const userSelect = document.getElementById('modify-user-users') as HTMLDivElement;
-    (user.nextElementSibling as HTMLSpanElement).classList.toggle('!normal');
-    (user.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
-    (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal');
-    (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
+    (user.nextElementSibling as HTMLSpanElement).classList.toggle('@low');
+    (user.nextElementSibling as HTMLSpanElement).classList.toggle('@high');
+    (profile.nextElementSibling as HTMLSpanElement).classList.toggle('@low');
+    (profile.nextElementSibling as HTMLSpanElement).classList.toggle('@high');
     profileSelect.classList.toggle('unfocused');
     userSelect.classList.toggle('unfocused');
 }*/

ts/crash.ts

@@ -11,17 +11,17 @@ const buttonChange = (type: string) => {
     if (type == "normal") {
         logSanitized.classList.add("unfocused");
         logNormal.classList.remove("unfocused");
-        buttonNormal.classList.add("!high");
-        buttonNormal.classList.remove("!normal");
-        buttonSanitized.classList.add("!normal");
-        buttonSanitized.classList.remove("!high");
+        buttonNormal.classList.add("@high");
+        buttonNormal.classList.remove("@low");
+        buttonSanitized.classList.add("@low");
+        buttonSanitized.classList.remove("@high");
     } else {
         logNormal.classList.add("unfocused");
         logSanitized.classList.remove("unfocused");
-        buttonSanitized.classList.add("!high");
-        buttonSanitized.classList.remove("!normal");
-        buttonNormal.classList.add("!normal");
-        buttonNormal.classList.remove("!high");
+        buttonSanitized.classList.add("@high");
+        buttonSanitized.classList.remove("@low");
+        buttonNormal.classList.add("@low");
+        buttonNormal.classList.remove("@high");
     }
 }
 buttonNormal.onclick = () => buttonChange("normal");

ts/modules/accounts.ts

@@ -133,7 +133,7 @@ class user implements User {
         <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
         <div class="dropdown manual">
             <div class="dropdown-display lg">
-                <div class="card ~neutral !low">
+                <div class="card ~neutral @low">
                     <span class="supra sm">${window.lang.strings("contactThrough")}</span>
                     <label class="row switch pb-1 mt-half">
                         <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
@@ -193,8 +193,8 @@ class user implements User {
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
             this._matrix.innerHTML = `
-            <span class="chip btn !low">${window.lang.strings("add")}</span>
-            <input type="text" class="input ~neutral !normal stealth-input unfocused" placeholder="@user:riot.im">
+            <span class="chip btn @low">${window.lang.strings("add")}</span>
+            <input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
             `;
             (this._matrix.querySelector("span") as HTMLSpanElement).onclick = this._addMatrix;
         } else {
@@ -257,7 +257,7 @@ class user implements User {
         this._telegramUsername = u;
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
-            this._telegram.innerHTML = `<span class="chip btn !low">${window.lang.strings("add")}</span>`;
+            this._telegram.innerHTML = `<span class="chip btn @low">${window.lang.strings("add")}</span>`;
             (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
         } else {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -322,7 +322,7 @@ class user implements User {
         const lastNotifyMethod = this.lastNotifyMethod() == "discord";
         this._discordUsername = u;
         if (!u) {
-            this._discord.innerHTML = `<span class="chip btn !low">Add</span>`;
+            this._discord.innerHTML = `<span class="chip btn @low">Add</span>`;
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
             this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
         } else {
@@ -403,7 +403,7 @@ class user implements User {
         <td class="accounts-last-active"></td>
         `;
         this._row.innerHTML = innerHTML;
-        const emailEditor = `<input type="email" class="input ~neutral !normal stealth-input">`;
+        const emailEditor = `<input type="email" class="input ~neutral @low stealth-input">`;
         this._check = this._row.querySelector("input[type=checkbox]") as HTMLInputElement;
         this._username = this._row.querySelector(".accounts-username") as HTMLSpanElement;
         this._admin = this._row.querySelector(".accounts-admin") as HTMLSpanElement;
@@ -1281,17 +1281,17 @@ export class accountsList {
             if (this._modifySettingsProfile.checked) {
                 this._userSelect.parentElement.classList.add("unfocused");
                 this._profileSelect.parentElement.classList.remove("unfocused")
-                profileSpan.classList.add("!high");
-                profileSpan.classList.remove("!normal");
-                userSpan.classList.remove("!high");
-                userSpan.classList.add("!normal");
+                profileSpan.classList.add("@high");
+                profileSpan.classList.remove("@low");
+                userSpan.classList.remove("@high");
+                userSpan.classList.add("@low");
             } else {
                 this._userSelect.parentElement.classList.remove("unfocused");
                 this._profileSelect.parentElement.classList.add("unfocused");
-                userSpan.classList.add("!high");
-                userSpan.classList.remove("!normal");
-                profileSpan.classList.remove("!high");
-                profileSpan.classList.add("!normal");
+                userSpan.classList.add("@high");
+                userSpan.classList.remove("@low");
+                profileSpan.classList.remove("@high");
+                profileSpan.classList.add("@low");
             }
         };
         this._modifySettingsProfile.onchange = checkSource;

ts/modules/common.ts

@@ -104,14 +104,14 @@ export class notificationBox implements NotificationBox {
 
     private _error = (message: string): HTMLElement => {
         const noti = document.createElement('aside');
-        noti.classList.add("aside", "~critical", "!normal", "mt-half", "notification-error");
+        noti.classList.add("aside", "~critical", "@low", "mt-half", "notification-error");
         let error = "";
         if (window.lang) {
             error = window.lang.strings("error") + ":"
         }
         noti.innerHTML = `<strong>${error}</strong> ${message}`;
         const closeButton = document.createElement('span') as HTMLSpanElement;
-        closeButton.classList.add("button", "~critical", "!low", "ml-1");
+        closeButton.classList.add("button", "~critical", "@low", "ml-1");
         closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
         closeButton.onclick = () => { this._box.removeChild(noti); };
         noti.appendChild(closeButton);
@@ -120,10 +120,10 @@ export class notificationBox implements NotificationBox {
     
     private _positive = (bold: string, message: string): HTMLElement => {
         const noti = document.createElement('aside');
-        noti.classList.add("aside", "~positive", "!normal", "mt-half", "notification-positive");
+        noti.classList.add("aside", "~positive", "@low", "mt-half", "notification-positive");
         noti.innerHTML = `<strong>${bold}</strong> ${message}`;
         const closeButton = document.createElement('span') as HTMLSpanElement;
-        closeButton.classList.add("button", "~positive", "!low", "ml-1");
+        closeButton.classList.add("button", "~positive", "@low", "ml-1");
         closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
         closeButton.onclick = () => { this._box.removeChild(noti); };
         noti.appendChild(closeButton);

ts/modules/discord.ts

@@ -43,7 +43,7 @@ export function newDiscordSearch(title: string, description: string, buttonText:
                                 <p class="content">${users[i].name}</p>
                             </td>
                             <td class="sm">
-                                <span id="discord-user-${users[i].id}" class="button ~info !high">${buttonText}</span>
+                                <span id="discord-user-${users[i].id}" class="button ~info @high">${buttonText}</span>
                             </td>
                         </tr>
                         `;

ts/modules/invites.ts

@@ -251,14 +251,14 @@ class DOMInvite implements Invite {
 
         this._header = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._header);
-        this._header.classList.add("card", "~neutral", "!normal", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-half", "overflow-y");
+        this._header.classList.add("card", "~neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-half", "overflow-y");
 
         this._codeArea = document.createElement('div') as HTMLDivElement;
         this._header.appendChild(this._codeArea);
         this._codeArea.classList.add("inv-codearea");
         this._codeArea.innerHTML = `
         <a class="invite-link code monospace mr-1" href=""></a>
-        <span class="button ~info !normal" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
+        <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
         `;
         const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
         copyButton.onclick = () => { 
@@ -285,7 +285,7 @@ class DOMInvite implements Invite {
             <span class="content sm"></span>
         </div>
         <span class="inv-duration mr-1"></span>
-        <span class="button ~critical !normal inv-delete">${window.lang.strings("delete")}</span>
+        <span class="button ~critical @low inv-delete">${window.lang.strings("delete")}</span>
         <label>
             <i class="icon clickable ri-arrow-down-s-line not-rotated"></i>
             <input class="inv-toggle-details unfocused" type="checkbox">
@@ -304,7 +304,7 @@ class DOMInvite implements Invite {
 
         this._details = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._details);
-        this._details.classList.add("card", "~neutral", "!normal", "mt-half", "no-pad", "inv-details");
+        this._details.classList.add("card", "~neutral", "@low", "mt-half", "no-pad", "inv-details");
         const detailsInner = document.createElement('div') as HTMLDivElement;
         this._details.appendChild(detailsInner);
         detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
@@ -314,7 +314,7 @@ class DOMInvite implements Invite {
         this._left.classList.add("inv-profilearea");
         let innerHTML = `
         <p class="supra mb-1 top">${window.lang.strings("profile")}</p>
-        <div class="select ~neutral !normal inv-profileselect inline-block">
+        <div class="select ~neutral @low inv-profileselect inline-block">
             <select>
                 <option value="noProfile" selected>${window.lang.strings("inviteNoProfile")}</option>
             </select>
@@ -355,7 +355,7 @@ class DOMInvite implements Invite {
 
         this._right = document.createElement('div') as HTMLDivElement;
         detailsInner.appendChild(this._right);
-        this._right.classList.add("card", "~neutral", "!low", "inv-created-users");
+        this._right.classList.add("card", "~neutral", "@low", "inv-created-users");
         this._right.innerHTML = `<strong class="supra table-header">${window.lang.strings("inviteUsersCreated")}</strong>`;
         this._userTable = document.createElement('div') as HTMLDivElement;
         this._right.appendChild(this._userTable);
@@ -425,7 +425,7 @@ export class inviteList implements inviteList {
             this._list.classList.add("empty");
             this._list.innerHTML = `
             <div class="inv inv-empty">
-                <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                <div class="card ~neutral @low inv-header flex-expand mt-half">
                     <div class="inv-codearea">
                         <span class="code monospace">${window.lang.strings("inviteNoInvites")}</span>
                     </div>
@@ -787,17 +787,17 @@ export class createInvite {
             if (this._invDurationButton.checked) {
                 this._invDuration.classList.remove("unfocused");
                 this._userExpiry.classList.add("unfocused");
-                invSpan.classList.add("!high");
-                invSpan.classList.remove("!normal");
-                userSpan.classList.add("!normal");
-                userSpan.classList.remove("!high");
+                invSpan.classList.add("@high");
+                invSpan.classList.remove("@low");
+                userSpan.classList.add("@low");
+                userSpan.classList.remove("@high");
             } else if (this._userExpiryButton.checked) {
                 this._userExpiry.classList.remove("unfocused");
                 this._invDuration.classList.add("unfocused");
-                invSpan.classList.add("!normal");
-                invSpan.classList.remove("!high");
-                userSpan.classList.add("!high");
-                userSpan.classList.remove("!normal");
+                invSpan.classList.add("@low");
+                invSpan.classList.remove("@high");
+                userSpan.classList.add("@high");
+                userSpan.classList.remove("@low");
             }
         };
 

ts/modules/profiles.ts

@@ -62,12 +62,12 @@ class profile implements Profile {
             <td><input type="radio" name="profile-default"></td>
         `;
         if (window.ombiEnabled) innerHTML += `
-            <td><span class="button !normal profile-ombi"></span></td>
+            <td><span class="button @low profile-ombi"></span></td>
         `;
         innerHTML += `
             <td class="profile-from ellipsis"></td>
             <td class="profile-libraries"></td>
-            <td><span class="button ~critical !normal">${window.lang.strings("delete")}</span></td>
+            <td><span class="button ~critical @low">${window.lang.strings("delete")}</span></td>
         `;
         this._row.innerHTML = innerHTML;
         this._name = this._row.querySelector("b.profile-name");

ts/modules/settings.ts

@@ -109,7 +109,7 @@ class DOMInput {
                 <i class="icon ri-information-line"></i>
                 <span class="content sm"></span>
             </div>
-            <input type="${inputType}" class="input ~neutral !normal mt-half mb-half">
+            <input type="${inputType}" class="input ~neutral @low mt-half mb-half">
         </label>
         `;
         this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
@@ -403,7 +403,7 @@ class DOMSelect implements SSelect {
                 <i class="icon ri-information-line"></i>
                 <span class="content sm"></span>
             </div>
-            <div class="select ~neutral !normal mt-half mb-half">
+            <div class="select ~neutral @low mt-half mb-half">
                 <select class="settings-select"></select>
             </div>
         </label>
@@ -549,7 +549,7 @@ export class settingsList {
         this._sections[name] = section;
         this._panel.appendChild(this._sections[name].asElement());
         const button = document.createElement("span") as HTMLSpanElement;
-        button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
+        button.classList.add("button", "~neutral", "@low", "settings-section-button", "mb-half");
         button.textContent = s.meta.name;
         if (subButton) { button.appendChild(subButton); }
         button.onclick = () => { this._showPanel(name); };
@@ -710,7 +710,7 @@ export class settingsList {
                         const editButton = document.createElement("div");
                         editButton.classList.add("tooltip", "left");
                         editButton.innerHTML = `
-                        <span class="button ~neutral !normal">
+                        <span class="button ~neutral @low">
                             <i class="icon ri-edit-line"></i>
                         </span>
                         <span class="content sm">
@@ -731,7 +731,7 @@ export class settingsList {
                         const addButton = document.createElement("div");
                         addButton.classList.add("tooltip", "left");
                         addButton.innerHTML = `
-                        <span class="button ~neutral !normal">+</span>
+                        <span class="button ~neutral @low">+</span>
                         <span class="content sm">
                         ${window.lang.strings("linkMatrix")}
                         </span>
@@ -808,7 +808,7 @@ class EmailEditor {
                 let innerHTML = '';
                 for (let i = 0; i < this._templ.variables.length; i++) {
                     let ci = i % colors.length;
-                    innerHTML += '<span class="button ~' + colors[ci] +' !normal mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
+                    innerHTML += '<span class="button ~' + colors[ci] +' @low mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
                 }
                 if (this._templ.variables.length == 0) {
                     this._variablesLabel.classList.add("unfocused");
@@ -832,7 +832,7 @@ class EmailEditor {
                 } else {
                     for (let i = this._templ.conditionals.length-1; i >= 0; i--) {
                         let ci = i % colors.length;
-                        innerHTML += '<span class="button ~' + colors[ci] +' !normal mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
+                        innerHTML += '<span class="button ~' + colors[ci] +' @low mb-1" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
                     }
                     this._conditionalsLabel.classList.remove("unfocused");
                     this._conditionals.innerHTML = innerHTML
@@ -896,7 +896,7 @@ class EmailEditor {
                     tr.innerHTML = `
                     <td>${this._names[id].name}</td>
                     <td>${resetButton}</td>
-                    <td><span class="button ~info !normal" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
+                    <td><span class="button ~info @low" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
                     `;
                     (tr.querySelector("span.button") as HTMLSpanElement).onclick = () => {
                         window.modals.customizeEmails.close()

ts/modules/theme.ts

@@ -1,19 +1,19 @@
 export function toggleTheme() {
-    document.documentElement.classList.toggle('dark-theme');
-    document.documentElement.classList.toggle('light-theme');
-    localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light");
+    document.documentElement.classList.toggle('dark');
+    document.documentElement.classList.toggle('light');
+    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
 }
 
 export function loadTheme() {
     const theme = localStorage.getItem("theme");
     if (theme == "dark") {
-        document.documentElement.classList.add('dark-theme');
-        document.documentElement.classList.remove('light-theme');
+        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
     } else if (theme == "light") {
-        document.documentElement.classList.add('light-theme');
-        document.documentElement.classList.remove('dark-theme');
+        document.documentElement.classList.add('light');
+        document.documentElement.classList.remove('dark');
     } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
-        document.documentElement.classList.add('dark-theme');
-        document.documentElement.classList.remove('light-theme');
+        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
     }
 }