From 79bba68f818ee04bec6ee1363ae05a55d8705238 Mon Sep 17 00:00:00 2001
From: HeleenSG <magned@gmail.com>
Date: Fri, 6 Sep 2024 09:14:58 +0200
Subject: [PATCH] fix: toggle styling (#3449)

Co-authored-by: Jan Klopper <janklopper+underdark@gmail.com>
---
 rocky/assets/css/components/toggle.scss       | 70 +++++++++++++++++++
 rocky/assets/css/components/toolbar.scss      |  1 +
 rocky/assets/css/main.scss                    |  1 +
 .../soft/fundamentals/border-radii.scss       |  3 +-
 .../css/themes/soft/manon/button-icon.scss    |  2 +
 .../assets/css/themes/soft/manon/button.scss  |  2 +-
 .../templates/partials/katalogus_toolbar.html |  6 +-
 7 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 rocky/assets/css/components/toggle.scss

diff --git a/rocky/assets/css/components/toggle.scss b/rocky/assets/css/components/toggle.scss
new file mode 100644
index 00000000000..d2a1dc59717
--- /dev/null
+++ b/rocky/assets/css/components/toggle.scss
@@ -0,0 +1,70 @@
+button,
+a,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  $breakpoint: 24rem !default;
+
+  &.toggle-button {
+    /* Alignment */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+    gap: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* Styling */
+    border-radius: var(--border-radius-l);
+    padding: var(--spacing-grid-150);
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 1px solid var(--colors-purrple-300);
+
+    /* Text and icon styling */
+    background-color: var(--colors-white);
+    color: var(--colors-purrple-500);
+    text-decoration: none;
+    font-size: 0;
+
+    &::before {
+      color: var(--colors-purrple-500);
+      padding: 0;
+    }
+
+    /* Behaviour */
+    cursor: pointer;
+    overflow-wrap: break-word;
+
+    /* States */
+    &[aria-current="page"] {
+      background-color: var(--colors-purrple-200);
+      border-color: var(--colors-purrple-200);
+
+      &::before {
+        color: var(--colors-purrple-700);
+      }
+    }
+
+    &:hover,
+    &:active {
+      border-color: var(--colors-purrple-500);
+    }
+
+    &:focus {
+      outline: 2px solid var(--colors-purrple-500);
+      outline-offset: 0.125rem;
+      z-index: 2;
+      position: relative;
+    }
+  }
+}
+
+a {
+  &.toggle-button {
+    &:visited {
+      color: var(--colors-purrple-500);
+    }
+  }
+}
diff --git a/rocky/assets/css/components/toolbar.scss b/rocky/assets/css/components/toolbar.scss
index ae148bb349c..f8c3e962c81 100644
--- a/rocky/assets/css/components/toolbar.scss
+++ b/rocky/assets/css/components/toolbar.scss
@@ -4,6 +4,7 @@
   justify-content: flex-end;
   align-items: center;
   width: 100%;
+  overflow: visible; /* Making sure outline is visible on focus */
 
   &.start {
     justify-content: flex-start;
diff --git a/rocky/assets/css/main.scss b/rocky/assets/css/main.scss
index d68d91f47e0..f6171506258 100644
--- a/rocky/assets/css/main.scss
+++ b/rocky/assets/css/main.scss
@@ -65,6 +65,7 @@
 @import "components/sticky";
 @import "components/state-tags";
 @import "components/table";
+@import "components/toggle";
 @import "components/toolbar";
 @import "components/tree-tables";
 @import "components/user-icon";
diff --git a/rocky/assets/css/themes/soft/fundamentals/border-radii.scss b/rocky/assets/css/themes/soft/fundamentals/border-radii.scss
index 6ca1b1c20b7..0ac5c9d7060 100644
--- a/rocky/assets/css/themes/soft/fundamentals/border-radii.scss
+++ b/rocky/assets/css/themes/soft/fundamentals/border-radii.scss
@@ -3,7 +3,8 @@
 :root {
   --border-radius-s: 0.25rem;
   --border-radius-m: 0.5rem;
-  --border-radius-l: 1.5rem;
+  --border-radius-l: 1rem;
+  --border-radius-xl: 1.5rem;
   --border-radius-round: 50%;
 }
 
diff --git a/rocky/assets/css/themes/soft/manon/button-icon.scss b/rocky/assets/css/themes/soft/manon/button-icon.scss
index e814863f4a2..d8cff1a5e1e 100644
--- a/rocky/assets/css/themes/soft/manon/button-icon.scss
+++ b/rocky/assets/css/themes/soft/manon/button-icon.scss
@@ -2,7 +2,9 @@
 
 :root {
   --button-icon-min-width: 2.75rem;
+  --button-icon-width: 2.75rem;
   --button-icon-min-height: 2.75rem;
+  --button-icon-height: 2.75rem;
   --button-icon-icon-font-size: 0.8rem;
   --button-icon-icon-width: 0.75rem;
 }
diff --git a/rocky/assets/css/themes/soft/manon/button.scss b/rocky/assets/css/themes/soft/manon/button.scss
index 93c3c716d21..a8260df13ec 100644
--- a/rocky/assets/css/themes/soft/manon/button.scss
+++ b/rocky/assets/css/themes/soft/manon/button.scss
@@ -4,7 +4,7 @@
   /* Button */
   --button-base-background-color: var(--branding-color-2-background-color);
   --button-base-text-color: var(--branding-color-2-text-color);
-  --button-base-border-radius: 1rem;
+  --button-base-border-radius: var(--border-radius-l);
   --button-base-font-family: var(--application-base-font-family);
   --button-base-padding-top: var(--spacing-grid-150);
   --button-base-padding-right: var(--spacing-grid-200);
diff --git a/rocky/katalogus/templates/partials/katalogus_toolbar.html b/rocky/katalogus/templates/partials/katalogus_toolbar.html
index cea35c9210b..96f21fe1c29 100644
--- a/rocky/katalogus/templates/partials/katalogus_toolbar.html
+++ b/rocky/katalogus/templates/partials/katalogus_toolbar.html
@@ -3,8 +3,10 @@
 {% if object_list %}
     <div class="horizontal-view horizontal-scroll toolbar">
         <a href="{% url url_name organization_code=organization.code view_type="grid" %}?{{ request.GET.urlencode }}"
-           class="button icon ti-layout-grid {% if view_type == "table" %}ghost{% endif %}">{% translate "Gridview" %}</a>
+           class=" icon toggle-button ti-layout-grid"
+           {% if view_type == "grid" %}aria-current="page"{% endif %}>{% translate "Gridview" %}</a>
         <a href="{% url url_name organization_code=organization.code view_type="table" %}?{{ request.GET.urlencode }}"
-           class="button icon ti-menu-2 {% if view_type != "table" %}ghost{% endif %}">{% translate "Tableview" %}</a>
+           class=" icon toggle-button ti-menu-2"
+           {% if view_type == "table" %}aria-current="page"{% endif %}>{% translate "Tableview" %}</a>
     </div>
 {% endif %}