From aad18db51a3fbf1f9d7847fc7258bf2f8a7ab7b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 31 Oct 2024 11:12:59 +0100
Subject: [PATCH] Style radio buttons according to design

---
 src/components/AnnounceSwitch.svelte   |  42 +--
 src/components/Button.svelte           | 417 ++++++++++++++++---------
 src/components/IssueStateButton.svelte |   9 +-
 src/components/ThemeSwitch.svelte      |  44 +--
 4 files changed, 291 insertions(+), 221 deletions(-)

diff --git a/src/components/AnnounceSwitch.svelte b/src/components/AnnounceSwitch.svelte
index 3f8e42c27..51f9af456 100644
--- a/src/components/AnnounceSwitch.svelte
+++ b/src/components/AnnounceSwitch.svelte
@@ -27,54 +27,34 @@
 
 <script lang="ts">
   import { writable } from "svelte/store";
+  import Button from "./Button.svelte";
 </script>
 
 <style>
   .container {
-    background-color: var(--color-fill-ghost);
-    clip-path: var(--2px-corner-fill);
-    display: flex;
-    height: 32px;
-    align-items: center;
-    padding: 0 2px;
-  }
-  button {
-    height: 28px;
-    cursor: pointer;
     display: flex;
     align-items: center;
-    border: none;
-    white-space: nowrap;
-    touch-action: manipulation;
-    clip-path: var(--1px-corner-fill);
-    font-size: var(--font-size-small);
-    margin: 0;
-    padding: 0 1rem;
-    color: var(--color-foreground-contrast);
-    background-color: var(--color-fill-ghost);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .active {
-    color: var(--color-foreground-emphasized);
-    background-color: var(--color-background-dip);
   }
 </style>
 
 <div class="container">
-  <button
-    class:active={$announce}
+  <Button
+    flatRight
+    variant="ghost"
+    active={$announce}
     onclick={() => {
       storeAnnounce(true);
     }}>
     Right away
-  </button>
+  </Button>
 
-  <button
-    class:active={!$announce}
+  <Button
+    flatLeft
+    variant="ghost"
+    active={!$announce}
     onclick={() => {
       storeAnnounce(false);
     }}>
     Periodically
-  </button>
+  </Button>
 </div>
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 3ef60bc3b..a39b4bf09 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;
+
   export let disabled: boolean = false;
+  export let active: boolean = false;
+
+  export let flatLeft: boolean = false;
+  export let flatRight: boolean = false;
 
   $: style =
     `--button-color-1: var(--color-fill-${variant});` +
@@ -12,15 +17,230 @@
 </script>
 
 <style>
-  .pixel {
-    background-color: transparent;
+  .container {
+    white-space: nowrap;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    column-gap: 0;
+    row-gap: 0;
+    display: grid;
+    grid-template-columns: 2px 2px auto 2px 2px;
+    grid-template-rows: 2px 2px auto 2px 2px;
+    grid-template-areas:
+      "p1-1 p1-2 p1-3 p1-4 p1-5"
+      "p2-1 p2-2 p2-3 p2-4 p2-5"
+      "p3-1 p3-2 p3-3 p3-4 p3-5"
+      "p4-1 p4-2 p4-3 p4-4 p4-5"
+      "p5-1 p5-2 p5-3 p5-4 p5-5";
+  }
+
+  .container:hover:not(.disabled) .p1-3,
+  .container:hover:not(.disabled) .p2-2,
+  .container:hover:not(.disabled) .p2-4,
+  .container:hover:not(.disabled) .p3-1,
+  .container:hover:not(.disabled) .p3-3,
+  .container:hover:not(.disabled) .p4-2 {
+    background-color: var(--button-color-2);
+  }
+
+  .container:hover:not(.disabled) .p2-3,
+  .container:hover:not(.disabled) .p3-2 {
+    background-color: var(--button-color-4);
+  }
+
+  .container:hover:not(.disabled) .p3-4,
+  .container:hover:not(.disabled) .p3-5,
+  .container:hover:not(.disabled) .p4-3,
+  .container:hover:not(.disabled) .p4-4,
+  .container:hover:not(.disabled) .p5-3 {
+    background-color: var(--button-color-1);
+  }
+
+  .container.active:not(.disabled) .p1-3,
+  .container.active:not(.disabled) .p2-2,
+  .container.active:not(.disabled) .p2-4,
+  .container.active:not(.disabled) .p3-1,
+  .container.active:not(.disabled) .p3-3,
+  .container.active:not(.disabled) .p3-5,
+  .container.active:not(.disabled) .p4-2,
+  .container.active:not(.disabled) .p4-4,
+  .container.active:not(.disabled) .p5-3,
+  .container:active:not(.disabled) .p1-3,
+  .container:active:not(.disabled) .p2-2,
+  .container:active:not(.disabled) .p2-4,
+  .container:active:not(.disabled) .p3-1,
+  .container:active:not(.disabled) .p3-3,
+  .container:active:not(.disabled) .p3-5,
+  .container:active:not(.disabled) .p4-2,
+  .container:active:not(.disabled) .p4-4,
+  .container:active:not(.disabled) .p5-3 {
+    background-color: var(--button-color-1);
+  }
+
+  .container.active:not(.disabled) .p2-3,
+  .container.active:not(.disabled) .p3-2,
+  .container:active:not(.disabled) .p2-3,
+  .container:active:not(.disabled) .p3-2 {
+    background-color: var(--button-color-3);
+  }
+
+  .container.active:not(.disabled) .p3-4,
+  .container.active:not(.disabled) .p4-3,
+  .container:active:not(.disabled) .p3-4,
+  .container:active:not(.disabled) .p4-3 {
+    background-color: var(--button-color-2);
+  }
+
+  .container.disabled {
+    color: var(--color-foreground-disabled);
+  }
+
+  .disabled .p1-3,
+  .disabled .p2-2,
+  .disabled .p2-3,
+  .disabled .p2-4,
+  .disabled .p3-1,
+  .disabled .p3-2,
+  .disabled .p3-3,
+  .disabled .p3-4,
+  .disabled .p3-5,
+  .disabled .p4-2,
+  .disabled .p4-3,
+  .disabled .p4-4,
+  .disabled .p5-3 {
+    background-color: var(--color-fill-ghost);
+  }
+
+  .flat-right .p1-4,
+  .flat-right .p1-5,
+  .flat-right .p2-5,
+  .flat-right .p3-4 {
+    background-color: var(--button-color-1);
+  }
+  .flat-right .p2-4 {
+    background-color: var(--button-color-2);
+  }
+  .flat-right .p4-5,
+  .flat-right .p5-4,
+  .flat-right .p5-5 {
+    background-color: var(--button-color-3);
+  }
+
+  .container:hover:not(.disabled).flat-right .p1-4,
+  .container:hover:not(.disabled).flat-right .p1-5,
+  .container:hover:not(.disabled).flat-right .p2-5,
+  .container:hover:not(.disabled).flat-right .p3-4 {
+    background-color: var(--button-color-2);
+  }
+  .container:hover:not(.disabled).flat-right .p2-4 {
+    background-color: var(--button-color-4);
+  }
+  .container:hover:not(.disabled).flat-right .p4-5,
+  .container:hover:not(.disabled).flat-right .p5-4,
+  .container:hover:not(.disabled).flat-right .p5-5 {
+    background-color: var(--button-color-1);
+  }
+
+  .container.active:not(.disabled).flat-right .p1-4,
+  .container.active:not(.disabled).flat-right .p1-5,
+  .container.active:not(.disabled).flat-right .p2-5,
+  .container.active:not(.disabled).flat-right .p3-4,
+  .container.active:not(.disabled).flat-right .p4-5,
+  .container.active:not(.disabled).flat-right .p5-4,
+  .container.active:not(.disabled).flat-right .p5-5,
+  .container:active:not(.disabled).flat-right .p1-4,
+  .container:active:not(.disabled).flat-right .p1-5,
+  .container:active:not(.disabled).flat-right .p2-5,
+  .container:active:not(.disabled).flat-right .p3-4,
+  .container:active:not(.disabled).flat-right .p4-5,
+  .container:active:not(.disabled).flat-right .p5-4,
+  .container:active:not(.disabled).flat-right .p5-5 {
+    background-color: var(--button-color-1);
+  }
+  .container.active:not(.disabled).flat-right .p2-4,
+  .container:active:not(.disabled).flat-right .p2-4 {
+    background-color: var(--button-color-3);
+  }
+  .container.active:not(.disabled).flat-right .p3-5,
+  .container.active:not(.disabled).flat-right .p4-4,
+  .container:active:not(.disabled).flat-right .p3-5,
+  .container:active:not(.disabled).flat-right .p4-4 {
+    background-color: var(--button-color-2);
+  }
+
+  .flat-left .p1-1,
+  .flat-left .p1-2,
+  .flat-left .p2-1,
+  .flat-left .p3-2 {
+    background-color: var(--button-color-1);
+  }
+  .flat-left .p2-2,
+  .flat-left .p3-1 {
+    background-color: var(--button-color-2);
+  }
+  .flat-left .p4-1,
+  .flat-left .p4-2,
+  .flat-left .p5-1,
+  .flat-left .p5-2 {
+    background-color: var(--button-color-3);
+  }
+
+  .container:hover:not(.disabled).flat-left .p1-1,
+  .container:hover:not(.disabled).flat-left .p1-2,
+  .container:hover:not(.disabled).flat-left .p2-1,
+  .container:hover:not(.disabled).flat-left .p3-2 {
+    background-color: var(--button-color-2);
+  }
+  .container:hover:not(.disabled).flat-left .p2-2,
+  .container:hover:not(.disabled).flat-left .p3-1 {
+    background-color: var(--button-color-4);
+  }
+  .container:hover:not(.disabled).flat-left .p4-1,
+  .container:hover:not(.disabled).flat-left .p4-2,
+  .container:hover:not(.disabled).flat-left .p5-1,
+  .container:hover:not(.disabled).flat-left .p5-2 {
+    background-color: var(--button-color-1);
+  }
+
+  .container.active:not(.disabled).flat-left .p1-1,
+  .container.active:not(.disabled).flat-left .p1-2,
+  .container.active:not(.disabled).flat-left .p2-1,
+  .container.active:not(.disabled).flat-left .p3-2,
+  .container.active:not(.disabled).flat-left .p4-1,
+  .container.active:not(.disabled).flat-left .p4-2,
+  .container.active:not(.disabled).flat-left .p5-1,
+  .container.active:not(.disabled).flat-left .p5-2,
+  .container:active:not(.disabled).flat-left .p1-1,
+  .container:active:not(.disabled).flat-left .p1-2,
+  .container:active:not(.disabled).flat-left .p2-1,
+  .container:active:not(.disabled).flat-left .p3-2,
+  .container:active:not(.disabled).flat-left .p4-1,
+  .container:active:not(.disabled).flat-left .p4-2,
+  .container:active:not(.disabled).flat-left .p5-1,
+  .container:active:not(.disabled).flat-left .p5-2 {
+    background-color: var(--button-color-1);
+  }
+  .container.active:not(.disabled).flat-left .p2-2,
+  .container.active:not(.disabled).flat-left .p3-1,
+  .container:active:not(.disabled).flat-left .p2-2,
+  .container:active:not(.disabled).flat-left .p3-1 {
+    background-color: var(--button-color-3);
+  }
+  .container.active:not(.disabled).flat-left .p4-2,
+  .container:active:not(.disabled).flat-left .p4-2 {
+    background-color: var(--button-color-2);
   }
 
   .p1-1 {
     grid-area: p1-1;
+    background-color: transparent;
   }
   .p1-2 {
     grid-area: p1-2;
+    background-color: transparent;
   }
   .p1-3 {
     grid-area: p1-3;
@@ -28,13 +248,16 @@
   }
   .p1-4 {
     grid-area: p1-4;
+    background-color: transparent;
   }
   .p1-5 {
     grid-area: p1-5;
+    background-color: transparent;
   }
 
   .p2-1 {
     grid-area: p2-1;
+    background-color: transparent;
   }
   .p2-2 {
     grid-area: p2-2;
@@ -50,6 +273,7 @@
   }
   .p2-5 {
     grid-area: p2-5;
+    background-color: transparent;
   }
 
   .p3-1 {
@@ -79,6 +303,7 @@
 
   .p4-1 {
     grid-area: p4-1;
+    background-color: transparent;
   }
   .p4-2 {
     grid-area: p4-2;
@@ -94,13 +319,16 @@
   }
   .p4-5 {
     grid-area: p4-5;
+    background-color: transparent;
   }
 
   .p5-1 {
     grid-area: p5-1;
+    background-color: transparent;
   }
   .p5-2 {
     grid-area: p5-2;
+    background-color: transparent;
   }
   .p5-3 {
     grid-area: p5-3;
@@ -108,176 +336,53 @@
   }
   .p5-4 {
     grid-area: p5-4;
+    background-color: transparent;
   }
   .p5-5 {
     grid-area: p5-5;
-  }
-
-  .container:hover:not(.disabled) .p1-3 {
-    background-color: var(--button-color-2);
-  }
-
-  .container:hover:not(.disabled) .p2-2 {
-    background-color: var(--button-color-2);
-  }
-  .container:hover:not(.disabled) .p2-3 {
-    background-color: var(--button-color-4);
-  }
-  .container:hover:not(.disabled) .p2-4 {
-    background-color: var(--button-color-2);
-  }
-
-  .container:hover:not(.disabled) .p3-1 {
-    background-color: var(--button-color-2);
-  }
-  .container:hover:not(.disabled) .p3-2 {
-    background-color: var(--button-color-4);
-  }
-  .container:hover:not(.disabled) .p3-3 {
-    background-color: var(--button-color-2);
-  }
-  .container:hover:not(.disabled) .p3-4 {
-    background-color: var(--button-color-1);
-  }
-  .container:hover:not(.disabled) .p3-5 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:hover:not(.disabled) .p4-2 {
-    background-color: var(--button-color-2);
-  }
-  .container:hover:not(.disabled) .p4-3 {
-    background-color: var(--button-color-1);
-  }
-  .container:hover:not(.disabled) .p4-4 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:hover:not(.disabled) .p5-3 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:active:not(.disabled) .p1-3 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:active:not(.disabled) .p2-2 {
-    background-color: var(--button-color-1);
-  }
-  .container:active:not(.disabled) .p2-3 {
-    background-color: var(--button-color-3);
-  }
-  .container:active:not(.disabled) .p2-4 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:active:not(.disabled) .p3-1 {
-    background-color: var(--button-color-1);
-  }
-  .container:active:not(.disabled) .p3-2 {
-    background-color: var(--button-color-3);
-  }
-  .container:active:not(.disabled) .p3-3 {
-    background-color: var(--button-color-1);
-  }
-  .container:active:not(.disabled) .p3-4 {
-    background-color: var(--button-color-2);
-  }
-  .container:active:not(.disabled) .p3-5 {
-    background-color: var(--button-color-1);
-  }
-
-  .container:active:not(.disabled) .p4-2 {
-    background-color: var(--button-color-1);
-  }
-  .container:active:not(.disabled) .p4-3 {
-    background-color: var(--button-color-2);
-  }
-  .container:active:not(.disabled) .p4-4 {
-    background-color: var(--button-color-1);
-  }
-  .container:active:not(.disabled) .p5-3 {
-    background-color: var(--button-color-1);
-  }
-
-  .container.disabled {
-    color: var(--color-foreground-disabled);
-  }
-
-  .disabled .p1-3,
-  .disabled .p2-2,
-  .disabled .p2-3,
-  .disabled .p2-4,
-  .disabled .p3-1,
-  .disabled .p3-2,
-  .disabled .p3-3,
-  .disabled .p3-4,
-  .disabled .p3-5,
-  .disabled .p4-2,
-  .disabled .p4-3,
-  .disabled .p4-4,
-  .disabled .p5-3 {
-    background-color: var(--color-fill-ghost);
-  }
-
-  .container {
-    height: 32px;
-    white-space: nowrap;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-
-    column-gap: 0;
-    row-gap: 0;
-    display: grid;
-    grid-template-columns: 2px 2px auto 2px 2px;
-    grid-template-rows: 2px 2px auto 2px 2px;
-    grid-template-areas:
-      "p1-1 p1-2 p1-3 p1-4 p1-5"
-      "p2-1 p2-2 p2-3 p2-4 p2-5"
-      "p3-1 p3-2 p3-3 p3-4 p3-5"
-      "p4-1 p4-2 p4-3 p4-4 p4-5"
-      "p5-1 p5-2 p5-3 p5-4 p5-5";
+    background-color: transparent;
   }
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="container"
+  class="container active"
   style:cursor={!disabled ? "pointer" : "default"}
   class:disabled
+  class:active
+  class:flat-right={flatRight}
+  class:flat-left={flatLeft}
   onclick={!disabled ? onclick : undefined}
   role="button"
   tabindex="0"
   {style}>
-  <div class="pixel p1-1"></div>
-  <div class="pixel p1-2"></div>
-  <div class="pixel p1-3"></div>
-  <div class="pixel p1-4"></div>
-  <div class="pixel p1-5"></div>
+  <div class="p1-1"></div>
+  <div class="p1-2"></div>
+  <div class="p1-3"></div>
+  <div class="p1-4"></div>
+  <div class="p1-5"></div>
 
-  <div class="pixel p2-1"></div>
-  <div class="pixel p2-2"></div>
-  <div class="pixel p2-3"></div>
-  <div class="pixel p2-4"></div>
-  <div class="pixel p2-5"></div>
+  <div class="p2-1"></div>
+  <div class="p2-2"></div>
+  <div class="p2-3"></div>
+  <div class="p2-4"></div>
+  <div class="p2-5"></div>
 
-  <div class="pixel p3-1"></div>
-  <div class="pixel p3-2"></div>
-  <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
-  <div class="pixel p3-4"></div>
-  <div class="pixel p3-5"></div>
+  <div class="p3-1"></div>
+  <div class="p3-2"></div>
+  <div class="p3-3 txt-semibold txt-small"><slot /></div>
+  <div class="p3-4"></div>
+  <div class="p3-5"></div>
 
-  <div class="pixel p4-1"></div>
-  <div class="pixel p4-2"></div>
-  <div class="pixel p4-3"></div>
-  <div class="pixel p4-4"></div>
-  <div class="pixel p4-5"></div>
+  <div class="p4-1"></div>
+  <div class="p4-2"></div>
+  <div class="p4-3"></div>
+  <div class="p4-4"></div>
+  <div class="p4-5"></div>
 
-  <div class="pixel p5-1"></div>
-  <div class="pixel p5-2"></div>
-  <div class="pixel p5-3"></div>
-  <div class="pixel p5-4"></div>
-  <div class="pixel p5-5"></div>
+  <div class="p5-1"></div>
+  <div class="p5-2"></div>
+  <div class="p5-3"></div>
+  <div class="p5-4"></div>
+  <div class="p5-5"></div>
 </div>
diff --git a/src/components/IssueStateButton.svelte b/src/components/IssueStateButton.svelte
index 320a085fa..d638f779c 100644
--- a/src/components/IssueStateButton.svelte
+++ b/src/components/IssueStateButton.svelte
@@ -33,13 +33,13 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    gap: 1px;
   }
 </style>
 
 <div class="main">
   <Button
     variant="secondary"
+    flatRight
     onclick={() => void save(selectedAction["state"])}>
     {selectedAction["caption"]}
   </Button>
@@ -48,7 +48,12 @@
     popoverPadding="0"
     popoverPositionTop="3rem"
     popoverPositionRight="0">
-    <Button slot="toggle" let:toggle onclick={toggle} variant="secondary">
+    <Button
+      flatLeft
+      slot="toggle"
+      let:toggle
+      onclick={toggle}
+      variant="secondary">
       <div style:height="22px" class="global-flex">
         <Icon name="chevron-down" />
       </div>
diff --git a/src/components/ThemeSwitch.svelte b/src/components/ThemeSwitch.svelte
index 065cb6e6e..512857c8c 100644
--- a/src/components/ThemeSwitch.svelte
+++ b/src/components/ThemeSwitch.svelte
@@ -28,58 +28,38 @@
 
 <script lang="ts">
   import { writable } from "svelte/store";
+
   import Icon from "./Icon.svelte";
+  import Button from "./Button.svelte";
 </script>
 
 <style>
   .container {
-    background-color: var(--color-fill-ghost);
-    clip-path: var(--2px-corner-fill);
-    display: flex;
-    height: 32px;
-    align-items: center;
-    padding: 0 2px;
-  }
-  button {
-    height: 28px;
-    cursor: pointer;
     display: flex;
     align-items: center;
-    border: none;
-    white-space: nowrap;
-    touch-action: manipulation;
-    clip-path: var(--1px-corner-fill);
-    font-size: var(--font-size-small);
-    margin: 0;
-    padding: 0 1rem;
-    color: var(--color-foreground-contrast);
-    background-color: var(--color-fill-ghost);
-    font-weight: var(--font-weight-semibold);
-    gap: 6px;
-  }
-
-  .active {
-    color: var(--color-foreground-emphasized);
-    background-color: var(--color-background-dip);
   }
 </style>
 
 <div class="container">
-  <button
-    class:active={$theme === "dark"}
+  <Button
+    flatRight
+    active={$theme === "dark"}
+    variant="ghost"
     onclick={() => {
       storeTheme("dark");
     }}>
     <Icon name="moon" />
     Dark
-  </button>
+  </Button>
 
-  <button
-    class:active={$theme === "light"}
+  <Button
+    flatLeft
+    variant="ghost"
+    active={$theme === "light"}
     onclick={() => {
       storeTheme("light");
     }}>
     <Icon name="sun" />
     Light
-  </button>
+  </Button>
 </div>