add styling to button

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/button.njk

@@ -1,11 +1,62 @@
 <template id="tesoft-button-template">
     <style>
         @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        button, a {
+            align-content: center;
+            background-color: transparent;
+            border-radius: var(--button-border-radius);
+            border-style: none;
+            color: var(--light-gray);
+            display: grid;
+            font-weight: 600;
+            height: 100%;
+            justify-content: center;
+            padding: var(--medium-padding);
+            text-decoration: none;
+            width: 100%;
+        }
+
+        :host([selected]) button, :host([selected]) a {
+            background-color: var(--light-gray);
+            color: var(--gray);
+            font-weight: 800;
+        }
+
+        button:focus, a:focus {
+            outline-color: var(--gold);
+            outline-offset: 0.2rem;
+            outline-style: solid;
+        }
+
+        button:hover, a:hover {
+            background-color: var(--gold) !important;
+            color: var(--gray);
+            cursor: pointer;
+        }
+
+        ::slotted(svg) {
+            fill: var(--light-gray);
+        }
+
+        :host([selected]) ::slotted(svg) {
+            fill: var(--gray);
+        }
+
+        button:hover ::slotted(svg), a:hover ::slotted(svg) {
+            fill: var(--gray);
+        }
     </style>
 
-    <button>
+    <div>
+        <button part="children">
             <slot></slot>
         </button>
+    </div>
 </template>
 
 <script src="/src/components/button.ts" type="module"></script>

frontend/src/components/button.ts

@@ -1,6 +1,10 @@
 import {TesoftComponent} from "../scripts/main.ts";
 
 export class TesoftButton extends TesoftComponent {
+    static observedAttributes = ["href", "selected"];
+
+    private readonly rootDiv: HTMLDivElement;
+
     constructor() {
         super();
 
@@ -9,6 +13,48 @@ export class TesoftButton extends TesoftComponent {
 
         const shadowRoot = this.attachShadow({mode: "open"});
         shadowRoot.appendChild(templateContent.cloneNode(true));
+
+        this.rootDiv = shadowRoot.querySelector<HTMLDivElement>("div")!;
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        if (name === "href") {
+            this.rootDiv.innerHTML = "";
+
+            let linkOrButton: HTMLElement;
+            if (newValue) {
+                linkOrButton = document.createElement("a");
+                (linkOrButton as HTMLAnchorElement).href = newValue;
+            } else {
+                linkOrButton = document.createElement("button");
+            }
+            linkOrButton.part = "children";
+            this.rootDiv.appendChild(linkOrButton);
+
+            const slot = document.createElement("slot");
+            linkOrButton.appendChild(slot);
+        }
+    }
+
+    get href(): string | null {
+        return this.getAttribute("href");
+    }
+
+    set href(value: string | null) {
+        if (value) {
+            this.setAttribute("href", value);
+        } else {
+            this.removeAttribute("href");
+        }
+    }
+
+    set selected(value: string | null) {
+        if (value === null) {
+            this.removeAttribute("selected");
+        } else {
+            this.setAttribute("selected", "");
+        }
     }
 }
 

frontend/src/styles/default.css

@@ -1,8 +1,13 @@
 :root {
     --dark-gray: #222831;
-    --gray: #393E46;
     --gold: #FFD369;
+    --gray: #393E46;
     --light-gray: #EEEEEE;
+
+    --small-padding: 0.6rem;
+    --medium-padding: 0.8rem;
+    --large-padding: 1.2rem;
+    --button-border-radius: 0.5rem;
 }
 
 html {
@@ -12,12 +17,11 @@ html {
 
 * {
     box-sizing: border-box;
+    font-family: "Adwaita Sans", sans-serif;
+    font-size: 1.4rem;
+    line-height: 2.1rem;
     margin: 0;
     padding: 0;
-
-    font-family: "Adwaita Sans", sans-serif;
-    line-height: 2.1rem;
-    font-size: 1.4rem;
 }
 
 *::after {
@@ -39,3 +43,9 @@ html {
 a {
     color: var(--gold);
 }
+
+a:focus {
+    outline-color: var(--gold);
+    outline-offset: 0.2rem;
+    outline-style: solid;
+}

frontend/src/styles/main.css

@@ -1,11 +1,11 @@
 @import "default.css";
 
 @font-face {
+    font-display: swap;
     font-family: "Adwaita Sans";
+    font-stretch: 100%;
     font-style: normal;
     font-weight: 300 800;
-    font-stretch: 100%;
-    font-display: swap;
     src: url(/public/assets/AdwaitaSans-Regular.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }