From b4dd6c368d7217078a6bff36c632cdeb0ab01898 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 7 Feb 2023 17:37:24 +0100
Subject: [PATCH 1/9] :wheelchair: add new mute style

---
 src/open_inwoner/scss/components/Card/Card.scss | 2 +-
 src/open_inwoner/scss/views/App.scss            | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 478f666130..2381059a53 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -1,6 +1,6 @@
 .card {
   --card-color-background: white;
-  --card-color-border: var(--color-mute);
+  --card-color-border: var(--color-mute-deco);
   --card-size-border: var(--border-width);
   --card-size-dog-ear: var(--gutter-width);
   --card-spacing: var(--spacing-large);
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index 1566a42b32..8829f30004 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -12,7 +12,7 @@
     var(--color-accent-darker),
     var(--color-accent-lighter)
   );
-  --border-width: 2px;
+  --border-width: 1px;
   --border-radius: 3px;
 
   // Color.
@@ -150,6 +150,8 @@
   --color-body: var(--color-gray-dark);
   // changed to #949494 to get the required 3:1 contrast ratio
   --color-mute: #949494;
+  // decorative, non-meaningful elements do not have contrast requirements
+  --color-mute-deco: #D2D2D2;
 
   /// Font.
 

From 3373cf7c7e11c7001a8b7234bde9449e60e70a72 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 9 Feb 2023 17:35:57 +0100
Subject: [PATCH 2/9] :wheelchair: set decorative border-colors

---
 src/open_inwoner/scss/components/Faq/_Faq.scss              | 2 +-
 src/open_inwoner/scss/components/File/File.scss             | 2 +-
 .../scss/components/Questionnaire/Questionnaire.scss        | 6 +++---
 src/open_inwoner/scss/views/App.scss                        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
index 050eb2e323..cdeb2873f9 100644
--- a/src/open_inwoner/scss/components/Faq/_Faq.scss
+++ b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -14,7 +14,7 @@
   }
 
   &__list-item {
-    border: var(--border-width) solid var(--color-mute);
+    border: var(--border-width) solid var(--color-mute-deco);
     padding: var(--spacing-large);
   }
 
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index fb9226acec..f95f5f635b 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -1,7 +1,7 @@
 .file {
   &__file {
     align-items: center;
-    border: 1px solid var(--color-mute);
+    border: 1px solid var(--color-mute-deco);
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: flex;
diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 398fbcf037..2a542b84da 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -13,12 +13,12 @@
   }
 
   &__list-item {
-    border-bottom: var(--border-width) solid var(--color-mute);
+    border-bottom: var(--border-width) solid var(--color-mute-deco);
     padding: var(--spacing-large) var(--spacing-medium);
   }
 
   &__list-item:nth-child(1) {
-    border-top: var(--border-width) solid var(--color-mute);
+    border-top: var(--border-width) solid var(--color-mute-deco);
   }
 
   h2 {
@@ -34,7 +34,7 @@
     }
 
     &__list-item:nth-child(2) {
-      border-top: var(--border-width) solid var(--color-mute);
+      border-top: var(--border-width) solid var(--color-mute-deco);
     }
 
     &__list-item {
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index 8829f30004..016926e9ec 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -151,7 +151,7 @@
   // changed to #949494 to get the required 3:1 contrast ratio
   --color-mute: #949494;
   // decorative, non-meaningful elements do not have contrast requirements
-  --color-mute-deco: #D2D2D2;
+  --color-mute-deco: #d2d2d2;
 
   /// Font.
 

From 7553e6c150ecb39076234a0fc7b70bcf91eb8d53 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 9 Feb 2023 17:55:55 +0100
Subject: [PATCH 3/9] :wheelchair: set decorative border-widths

---
 src/open_inwoner/scss/components/Card/Card.scss | 2 +-
 src/open_inwoner/scss/components/Faq/_Faq.scss  | 3 ++-
 src/open_inwoner/scss/views/App.scss            | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 2381059a53..44de8eede9 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -1,7 +1,7 @@
 .card {
   --card-color-background: white;
   --card-color-border: var(--color-mute-deco);
-  --card-size-border: var(--border-width);
+  --card-size-border: 1px;
   --card-size-dog-ear: var(--gutter-width);
   --card-spacing: var(--spacing-large);
 
diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
index cdeb2873f9..21803da9c8 100644
--- a/src/open_inwoner/scss/components/Faq/_Faq.scss
+++ b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -14,7 +14,8 @@
   }
 
   &__list-item {
-    border: var(--border-width) solid var(--color-mute-deco);
+    border: 1px solid var(--color-mute-deco);
+    border-radius: var(--border-radius);
     padding: var(--spacing-large);
   }
 
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index 016926e9ec..b06afd0456 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -12,7 +12,7 @@
     var(--color-accent-darker),
     var(--color-accent-lighter)
   );
-  --border-width: 1px;
+  --border-width: 2px;
   --border-radius: 3px;
 
   // Color.

From 02c4cef5304f849cf636001e2b2d366c0523c2ea Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Fri, 10 Feb 2023 13:01:08 +0100
Subject: [PATCH 4/9] :art: revert to original color

---
 src/open_inwoner/scss/views/App.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index b06afd0456..d54167f8eb 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -151,7 +151,7 @@
   // changed to #949494 to get the required 3:1 contrast ratio
   --color-mute: #949494;
   // decorative, non-meaningful elements do not have contrast requirements
-  --color-mute-deco: #d2d2d2;
+  --color-mute-deco: var(--color-gray);
 
   /// Font.
 

From 38a18fca360a44fe775ca7155a3ec9361173d357 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 13 Feb 2023 09:46:48 +0100
Subject: [PATCH 5/9] :art: revert to original colors

---
 src/open_inwoner/scss/components/Card/Card.scss               | 2 +-
 src/open_inwoner/scss/components/Faq/_Faq.scss                | 2 +-
 src/open_inwoner/scss/components/File/File.scss               | 2 +-
 .../scss/components/Questionnaire/Questionnaire.scss          | 2 +-
 src/open_inwoner/scss/views/App.scss                          | 4 +---
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 44de8eede9..5247575633 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -1,6 +1,6 @@
 .card {
   --card-color-background: white;
-  --card-color-border: var(--color-mute-deco);
+  --card-color-border: var(--color-gray);
   --card-size-border: 1px;
   --card-size-dog-ear: var(--gutter-width);
   --card-spacing: var(--spacing-large);
diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
index 21803da9c8..84bb2c027f 100644
--- a/src/open_inwoner/scss/components/Faq/_Faq.scss
+++ b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -14,7 +14,7 @@
   }
 
   &__list-item {
-    border: 1px solid var(--color-mute-deco);
+    border: 1px solid var(--color-gray);
     border-radius: var(--border-radius);
     padding: var(--spacing-large);
   }
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index f95f5f635b..4fd0f11da8 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -1,7 +1,7 @@
 .file {
   &__file {
     align-items: center;
-    border: 1px solid var(--color-mute-deco);
+    border: 1px solid var(--color-gray);
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: flex;
diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 2a542b84da..26cfebd76c 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -34,7 +34,7 @@
     }
 
     &__list-item:nth-child(2) {
-      border-top: var(--border-width) solid var(--color-mute-deco);
+      border-top: var(--border-width) solid var(--color-gray);
     }
 
     &__list-item {
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index d54167f8eb..a15d91a9a1 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -148,10 +148,8 @@
   --color-font-accent: var(--color-gray-dark);
 
   --color-body: var(--color-gray-dark);
-  // changed to #949494 to get the required 3:1 contrast ratio
+  // changed to #949494 to get the required 3:1 contrast ratio - in case of decorative border use var(--color-gray).
   --color-mute: #949494;
-  // decorative, non-meaningful elements do not have contrast requirements
-  --color-mute-deco: var(--color-gray);
 
   /// Font.
 

From 531959323b23a429cddf2f27d1bbe33275c8073c Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 13 Feb 2023 12:28:09 +0100
Subject: [PATCH 6/9] :art: revert to original color

---
 .../scss/components/Questionnaire/Questionnaire.scss          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 26cfebd76c..7b908a0150 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -13,12 +13,12 @@
   }
 
   &__list-item {
-    border-bottom: var(--border-width) solid var(--color-mute-deco);
+    border-bottom: var(--border-width) solid var(--color-gray);
     padding: var(--spacing-large) var(--spacing-medium);
   }
 
   &__list-item:nth-child(1) {
-    border-top: var(--border-width) solid var(--color-mute-deco);
+    border-top: var(--border-width) solid var(--color-gray);
   }
 
   h2 {

From a868248aff0bffb57ccc0d80e136882f25d95e1c Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 13 Feb 2023 17:45:55 +0100
Subject: [PATCH 7/9] :art: fix negative/positive color and borders for
 feedback labels

---
 .../scss/components/Form/ButtonRadio.scss     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/open_inwoner/scss/components/Form/ButtonRadio.scss b/src/open_inwoner/scss/components/Form/ButtonRadio.scss
index 98f183f694..2c4dcbf2aa 100644
--- a/src/open_inwoner/scss/components/Form/ButtonRadio.scss
+++ b/src/open_inwoner/scss/components/Form/ButtonRadio.scss
@@ -12,16 +12,38 @@
       color: var(--color-primary);
       cursor: default;
     }
+    &#negative {
+      &:checked ~ .button-radio__button {
+        color: #cf1c08;
+        cursor: default;
+      }
+    }
+    &#positive {
+      &:checked ~ .button-radio__button {
+        color: var(--color-green-dark);
+        cursor: default;
+      }
+    }
   }
 
   &__button {
-    border: 1px solid #d2d2d2;
+    border: 1px solid var(--color-gray-light);
     border-left: 0;
     background-color: var(--color-gray-lightest);
     color: var(--color-gray-lighter);
     display: inline-block;
     padding: 12px;
     cursor: pointer;
+
+    &[for='negative'] {
+      border-top-right-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+
+    &[for='positive'] {
+      border-top-left-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+    }
   }
 
   &:first-child {

From 742cdb890102ba8564a2edb24cfac41980eb112d Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 14 Feb 2023 10:13:52 +0100
Subject: [PATCH 8/9] :art: add thin border variable

---
 src/open_inwoner/scss/components/Card/Card.scss                 | 2 +-
 src/open_inwoner/scss/components/Faq/_Faq.scss                  | 2 +-
 src/open_inwoner/scss/components/File/File.scss                 | 2 +-
 src/open_inwoner/scss/components/Form/ButtonRadio.scss          | 2 +-
 .../scss/components/Questionnaire/Questionnaire.scss            | 2 +-
 src/open_inwoner/scss/views/App.scss                            | 1 +
 6 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 5247575633..cbd162a6a9 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -1,7 +1,7 @@
 .card {
   --card-color-background: white;
   --card-color-border: var(--color-gray);
-  --card-size-border: 1px;
+  --card-size-border: var(--border-width-thin);
   --card-size-dog-ear: var(--gutter-width);
   --card-spacing: var(--spacing-large);
 
diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
index 84bb2c027f..6847c38d70 100644
--- a/src/open_inwoner/scss/components/Faq/_Faq.scss
+++ b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -14,7 +14,7 @@
   }
 
   &__list-item {
-    border: 1px solid var(--color-gray);
+    border: var(--border-width-thin) solid var(--color-gray);
     border-radius: var(--border-radius);
     padding: var(--spacing-large);
   }
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index 4fd0f11da8..302c22905f 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -1,7 +1,7 @@
 .file {
   &__file {
     align-items: center;
-    border: 1px solid var(--color-gray);
+    border: var(--border-width-thin) solid var(--color-gray);
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: flex;
diff --git a/src/open_inwoner/scss/components/Form/ButtonRadio.scss b/src/open_inwoner/scss/components/Form/ButtonRadio.scss
index 2c4dcbf2aa..433729a975 100644
--- a/src/open_inwoner/scss/components/Form/ButtonRadio.scss
+++ b/src/open_inwoner/scss/components/Form/ButtonRadio.scss
@@ -27,7 +27,7 @@
   }
 
   &__button {
-    border: 1px solid var(--color-gray-light);
+    border: var(--border-width-thin) solid var(--color-gray-light);
     border-left: 0;
     background-color: var(--color-gray-lightest);
     color: var(--color-gray-lighter);
diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 7b908a0150..2351125f25 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -34,7 +34,7 @@
     }
 
     &__list-item:nth-child(2) {
-      border-top: var(--border-width) solid var(--color-gray);
+      border-top: var(--border-width-thin) solid var(--color-gray);
     }
 
     &__list-item {
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index a15d91a9a1..7e3449684a 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -13,6 +13,7 @@
     var(--color-accent-lighter)
   );
   --border-width: 2px;
+  --border-width-thin: 1px;
   --border-radius: 3px;
 
   // Color.

From 6726dd39746ee031e9bf022e71865d3d89a2bdd7 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 14 Feb 2023 14:20:20 +0100
Subject: [PATCH 9/9] :art: add thin border variables for questionnaire list

---
 .../scss/components/Questionnaire/Questionnaire.scss          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 2351125f25..fd50eac88a 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -13,12 +13,12 @@
   }
 
   &__list-item {
-    border-bottom: var(--border-width) solid var(--color-gray);
+    border-bottom: var(--border-width-thin) solid var(--color-gray);
     padding: var(--spacing-large) var(--spacing-medium);
   }
 
   &__list-item:nth-child(1) {
-    border-top: var(--border-width) solid var(--color-gray);
+    border-top: var(--border-width-thin) solid var(--color-gray);
   }
 
   h2 {