change main theme, add dark theme

README.md

@@ -1,6 +1,6 @@
 This branch is for experimenting with [a17t](https://a17t.miles.land/) to possibly replace bootstrap in the future. Currently just working on the page structures, so none of this is actually usable in jfa-go yet.
 
-#### currently done:
+#### todo
 * [x] invites tab mockup (partially complete)
 * [x] accounts tab mockup
 * [x] settings tab mockup
@@ -11,11 +11,20 @@ This branch is for experimenting with [a17t](https://a17t.miles.land/) to possib
 * [ ] Integration with existing code
 
 #### screenshots
+##### dark
 <p>
-    <img src="images/invites.png" alt="invites" style="width: 32%; height: auto;">
+    <img src="images/dark/invites.png" alt="invites" style="width: 32%; height: auto;">
-    <img src="images/accounts.png" alt="accounts" style="width: 32%; height: auto;">
+    <img src="images/dark/accounts.png" alt="accounts" style="width: 32%; height: auto;">
-    <img src="images/settings.png" alt="settings" style="width: 32%; height: auto;">
+    <img src="images/dark/settings.png" alt="settings" style="width: 32%; height: auto;">
-    <img src="images/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
+    <img src="images/dark/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
-    <img src="images/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
+    <img src="images/dark/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
 </p>
 
+##### light
+<p>
+    <img src="images/light/invites.png" alt="invites" style="width: 32%; height: auto;">
+    <img src="images/light/accounts.png" alt="accounts" style="width: 32%; height: auto;">
+    <img src="images/light/settings.png" alt="settings" style="width: 32%; height: auto;">
+    <img src="images/light/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
+    <img src="images/light/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
+</p>

base.css

@@ -1,4 +1,15 @@
+@import "node_modules/a17t/dist/a17t.css";
+@import "node_modules/icons.css/dist/icons.css";
 @import "modal.css";
+@import "dark.css";
+
+.light-theme {
+    --settings-section-button-filter: 90%;
+}
+
+.body {
+    background-color: #101010;
+}
 
 .pageContainer {
     margin: 5% 20% 5% 20%;
@@ -8,15 +19,6 @@
         margin: 2%;
     }
 }
-/*input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input[type=number] {
-    -moz-appearance: textfield;
-}*/
 .contactBox {
     color: grey;
 }
@@ -77,7 +79,7 @@ input[type=number] {
     padding-bottom: 0.2rem;
 }
 .inv {
-    overflow: hidden;
+    overflow: visible;
 }
 .inv-header {
     display: flex;
@@ -87,23 +89,11 @@ input[type=number] {
     display: flex;
     justify-content: space-between;
 }
-/*.inv-details {
-    display: flex;
-    justify-content: space-between;
-}*/
-/*.invites {
-    transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-}*/
-.inv-details {
-}
 .inv-row {
     display: flex;
     justify-content: space-between;
     align-items: top;
 }
-/*.inv-profilearea {
-    align-items: top;
-}*/
 .ib {
     display: inline-block;
 }
@@ -224,11 +214,27 @@ input[type=number] {
     box-sizing: border-box;
     width: 100%;
     height: 2.5rem;
-    --button-filter-brightness: 90%;
+    background-color: rgba(0, 0, 0, 0);
+}
+.settings-section-button:hover {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.5rem;
+    background-color: var(--color-neutral-normal-fill);
+    filter: brightness(var(--settings-section-button-filter)) !important;
+
+}
+.settings-section-button:focus {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.5rem;
+    background-color: var(--color-neutral-normal-fill);
+    filter: brightness(var(--settings-section-button-filter)) !important;
 }
 .settings-section-button.selected {
-    --button-filter-brightness: 85%;
+    background-color: var(--color-neutral-normal-fill);
-    filter: brightness(85%);
+    --button-filter-brightness: var(--settings-section-button-filter);
+    filter: brightness(var(--settings-section-button-filter)) !important;
 }
 .text-critical {
     color: var(--color-critical-normal-content);
@@ -265,3 +271,11 @@ input[type=number] {
 .textarea {
     resize: vertical;
 }
+
+select {
+    color: inherit;
+}
+
+input {
+    color: inherit;
+}

dark.css

@@ -0,0 +1,87 @@
+.dark-theme {
+
+    --settings-section-button-filter: 110%;
+
+    --color-neutral-900: rgba(255, 255, 255, 0.87);
+    --color-neutral-800: rgba(255, 255, 255, 0.8);
+    --color-neutral-700: rgba(255, 255, 255, 0.73);
+    --color-neutral-600: rgba(255, 255, 255, 0.66);
+    --color-neutral-500: rgb(153, 153, 153);
+    --color-neutral-400: #383838;
+    --color-neutral-300: #303030;
+    --color-neutral-200: #292929;
+    --color-neutral-100: #242424;
+    --color-neutral-50: #202020;
+    --color-neutral-000: #101010;
+
+    --color-critical-900: #fef2f2;
+    --color-critical-800: #fee2e2;
+    --color-critical-700: #fecaca;
+    --color-critical-600: #fca5a5;
+    --color-critical-500: #f87171;
+    --color-critical-400: #ef4444;
+    --color-critical-300: #dc2626;
+    --color-critical-200: #b91c1c;
+    --color-critical-100: #991b1b;
+    --color-critical-50: #7f1d1d;
+    --color-critical-000: #441313;
+
+    --color-warning-900: #fffbeb;
+    --color-warning-800: #fef3c7;
+    --color-warning-700: #fde68a;
+    --color-warning-600: #fcd34d;
+    --color-warning-500: #fbbf24;
+    --color-warning-400: #f59e0b;
+    --color-warning-300: #d97706;
+    --color-warning-200: #b45309;
+    --color-warning-100: #92400e;
+    --color-warning-50: #783900;
+    --color-warning-000: #411e01;
+
+    --color-positive-900: #f0fdf4;
+    --color-positive-800: #dcfce7;
+    --color-positive-700: #bbf7d0;
+    --color-positive-600: #86efac;
+    --color-positive-500: #4ade80;
+    --color-positive-400: #22c55e;
+    --color-positive-300: #16a34a;
+    --color-positive-200: #15803d;
+    --color-positive-100: #166534;
+    --color-positive-50: #14532d;
+    --color-positive-000: #0f2e1b;
+
+    --color-urge-900: #e0ffff;
+    --color-urge-800: #c0fbff;
+    --color-urge-700: #a0f4ff;
+    --color-urge-600: #80e9ff;
+    --color-urge-500: #60dbfb;
+    --color-urge-400: #40cbf3;
+    --color-urge-300: #20b9e9;
+    --color-urge-200: #00a4dc; /* tab buttons */
+    --color-urge-100: #0054bc;
+    --color-urge-50: #00169a;
+    --color-urge-000: #050076;
+
+    --color-info-900: #f5f3ff;
+    --color-info-800: #ede9fe;
+    --color-info-700: #ddd6fe;
+    --color-info-600: #c4b5fd;
+    --color-info-500: #a78bfa;
+    --color-info-400: #8b5cf6;
+    --color-info-300: #7c3aed;
+    --color-info-200: #6d28d9;
+    --color-info-100: #5b21b6;
+    --color-info-50: #4c1d95;
+    --color-info-000: #240e44;
+
+
+    --color-neutral-normal-content: #ffffff;
+}
+
+.light-only {
+  display: none;
+}
+
+.dark-only {
+  display: initial;
+}

index.html

@@ -1,8 +1,6 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="light-theme">
     <head>
-        <link rel="stylesheet" type="text/css" href="node_modules/a17t/dist/a17t.css">
-        <link rel="stylesheet" type="text/css" href="node_modules/icons.css/dist/icons.css">
         <link rel="stylesheet" type="text/css" href="base.css">
         <title>jfa-no</title>
     </head>
@@ -12,7 +10,7 @@
                 <span class="heading">Login</span>
                 <input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="login-user">
                 <input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="login-password">
-                <input type="submit" class="button ~positive !normal full-width center supra submit" value="Login">
+                <input type="submit" class="button ~urge !normal full-width center supra submit" value="Login">
             </form>
         </div>
         <div id="modal-add-user" class="modal">
@@ -20,7 +18,7 @@
                 <span class="heading">New User <span class="modal-close">&times;</span></span>
                 <input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="add-user-user">
                 <input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="add-user-password">
-                <input type="submit" class="button ~positive !normal full-width center supra submit" value="Create">
+                <input type="submit" class="button ~urge !normal full-width center supra submit" value="Create">
             </form>
         </div>
         <div id="modal-about" class="modal">
@@ -64,7 +62,7 @@
                     <input type="checkbox" id="modify-user-homescreen" checked>
                     <span>Apply homescreen layout</span>
                 </label>
-                <input type="submit" class="button ~positive !normal full-width center supra submit" value="Apply">
+                <input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
             </form>
         </div>
         <div id="modal-delete-user" class="modal">
@@ -76,7 +74,7 @@
                         <span>Send notification email</span>
                     </label>
                     <textarea id="textarea-delete-user" class="textarea full-width ~neutral !normal mb-1" placeholder="Your account has been deleted."></textarea>
-                    <input type="submit" class="button ~positive !normal full-width center supra submit" value="Apply">
+                    <input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
                 </div>
             </form>
         </div>
@@ -91,7 +89,7 @@
             </div>
         </div>
         <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~positive !normal">
+            <div class="modal-content card ~urge !normal">
                 <span class="heading">Settings applied.</span>
                 <p class="content">Refresh the page in a few seconds.</p>
             </div>
@@ -106,28 +104,28 @@
                         <option>Other person</option>
                     </select>
                 </div>
-                <input type="submit" class="button ~positive !normal full-width center supra submit" value="Submit">
+                <input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
             </form>
         </div>
         <div class="pageContainer max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
-            <div class="relative mb-1">
+            <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
                     <div class="text-neutral-700">
-                        <span id="invitesTab-button" class="tabText portal ~positive active">Invites</span>
+                        <span id="invitesTab-button" class="tabText portal ~urge active">Invites</span>
                         <span id="accountsTab-button" class="tabText portal">Accounts</span>
                         <span id="settingsTab-button" class="tabText portal">Settings</span>
                     </div>
                 </header>
             </div>
-            <div class="relative mb-1">
+            <div class="mb-1">
                 <div class="text-neutral-700">
                     <span class="button ~critical !normal mb-1">Logout</span>
-                    <span class="button ~neutral !normal mb-1">Theme</span>
+                    <span id="button-theme" class="button ~neutral !normal mb-1">Theme</span>
                     <span id="modalButton" class="button ~neutral !normal mb-1">Trigger Login</span>
                 </div>
             </div>
             <div id="invitesTab">
-                <div class="card ~neutral !high invites mb-1">
+                <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
                     <div class="inv">
                         <div class="card ~neutral !normal inv-header mt-half">
@@ -190,10 +188,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="card ~neutral !high create-inv">
+                <div class="card ~neutral !low create-inv">
                     <span class="heading">Create</span>
                     <div class="row">
-                        <div class="card ~neutral !low col">
+                        <div class="card ~neutral !normal col">
                             <label class="label supra" for="inv-days">Days</label>
                             <div class="select ~neutral !normal mb-1">
                                 <select id="inv-days">
@@ -213,7 +211,7 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="card ~neutral !low col">
+                        <div class="card ~neutral !normal col">
                             <label class="label supra" for="inv-uses">Number of uses</label>
                             <div class="button-input mb-1">
                                 <input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
@@ -232,22 +230,22 @@
                             </div>
                             <label class="label supra">Send to</label>
                             <div class="button-input mb-1">
-                                <input type="text" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
+                                <input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
                                 <label for="inv-email-enabled" class="button ~neutral !normal">
                                     <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
                                 </label>
                             </div>
-                            <span class="button ~positive !normal supra full-width center button-lg">Create</span>
+                            <span class="button ~urge !normal supra full-width center button-lg">Create</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div id="accountsTab" class="unfocused">
-                <div class="card ~neutral !high accounts mb-1">
+                <div class="card ~neutral !low accounts mb-1">
                     <span class="heading">Accounts</span>
                     <div class="fr">
                         <span class="button ~neutral !normal" id="accounts-add-user">Add User</span>
-                        <span class="button ~positive !normal" id="accounts-modify-user">Modify Settings</span>
+                        <span class="button ~urge !normal" id="accounts-modify-user">Modify Settings</span>
                         <span class="button ~critical !normal" id="accounts-delete-user">Delete User</span>
                     </div>
                     <div class="card ~neutral !normal accounts-header mt-half">
@@ -279,7 +277,7 @@
                 </div>
             </div>
             <div id="settingsTab" class="unfocused">
-                <div class="card ~neutral !high settings">
+                <div class="card ~neutral !low settings">
                     <span class="heading">Settings</span>
                     <div class="fr">
                         <span class="button ~neutral !normal" id="accounts-add-user">Save</span>
@@ -287,10 +285,10 @@
                     <div class="row">
                         <div class="card ~neutral !normal col">
                             <aside class="aside small ~info mb-half">Note: <sup class="text-critical">*</sup> indicates a required field, <sup class="text-critical">R</sup> indicates changes require a restart.</aside> 
-                            <span class="button ~neutral !normal settings-section-button mb-half" id="setting-about">About</span>
+                            <span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
-                            <span class="button ~neutral !normal settings-section-button mb-half selected">User Profiles</span>
+                            <span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
                         </div>
-                        <div class="card ~neutral !low col">
+                        <div class="card ~neutral !normal col">
                             <div class="settings-section">
                                 <p class="support large mb-half">Settings section description.</p>
                                 <div class="setting">

ts/main.ts

@@ -9,6 +9,16 @@ interface ArrayConstructor {
 
 declare var window: Window;
 
+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");
+}
+
+if (localStorage.getItem('theme') == "dark") { document.documentElement.classList.add('dark-theme'); document.documentElement.classList.remove('light-theme'); }
+
+(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
+
 const whichAnimationEvent = () => {
     const el = document.createElement("fakeElement");
     if (el.style["animation"] !== void 0) {
@@ -134,11 +144,11 @@ for (let tab of tabs) {
             const tabEl = document.getElementById(t) as HTMLDivElement;
             const tabButtonEl = document.getElementById(`${t}-button`) as HTMLSpanElement;
             if (t == tab) {
-                tabButtonEl.classList.add("active", "~positive");
+                tabButtonEl.classList.add("active", "~urge");
                 tabEl.classList.remove("unfocused");
             } else {
                 tabButtonEl.classList.remove("active");
-                tabButtonEl.classList.remove("~positive");
+                tabButtonEl.classList.remove("~urge");
                 tabEl.classList.add("unfocused");
             }
         }