From 34f0fa639c56c76889b7e604bda95ba40296a934 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 16 Nov 2023 01:48:57 +0100
Subject: [PATCH] Increase colour contrast for 'subtle' class, WCAG-audit:1,
 see #1181

---
 public/css/index-tailwind-output.css    | 36 ++++++++++++++++++-------
 src/UI/BigComponents/ThemeButton.svelte |  6 ++---
 src/UI/StylesheetTestGui.svelte         | 13 ++++++---
 src/index.css                           | 10 ++++++-
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 1da46e851..6839e5b62 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -848,20 +848,11 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .mx-12 {
   margin-left: 3rem;
   margin-right: 3rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -890,6 +881,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1606,6 +1601,10 @@ video {
   border-style: dashed;
 }
 
+.border-dotted {
+  border-style: dotted;
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1621,6 +1620,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -2506,10 +2510,18 @@ select:hover {
 
 .subtle {
   /* For all information that is not important for 99% of the users */
-  color: #999;
+  color: #666;
   font-weight: normal;
 }
 
+.low-interaction .subtle {
+  color: #444;
+}
+
+.interactive .subtle {
+  color: #333;
+}
+
 .link-underline .subtle a {
   -webkit-text-decoration: underline 1px #7193bb88;
           text-decoration: underline 1px #7193bb88;
@@ -2758,6 +2770,10 @@ a.link-underline {
     margin-top: 1.25rem;
   }
 
+  .sm\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .sm\:mr-2 {
     margin-right: 0.5rem;
   }
diff --git a/src/UI/BigComponents/ThemeButton.svelte b/src/UI/BigComponents/ThemeButton.svelte
index a9a41d295..e0236bf76 100644
--- a/src/UI/BigComponents/ThemeButton.svelte
+++ b/src/UI/BigComponents/ThemeButton.svelte
@@ -87,12 +87,10 @@
 
 {#if theme.id !== personal.id || $unlockedPersonal}
   <SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
-    <img slot="image" src={theme.icon} class="mx-4 block h-11 w-11" alt="" />
+    <img slot="image" src={theme.icon} class="mr-2 m-1 sm:mr-4 sm:m-2 block h-11 w-11" alt="" />
     <span class="flex flex-col overflow-hidden text-ellipsis">
       <Tr t={title} />
-      <span class="subtle max-h-12 truncate text-ellipsis">
-        <Tr t={description} />
-      </span>
+    
       {#if selected}
         <span class="alert">
           <Tr t={Translations.t.general.morescreen.enterToOpen} />
diff --git a/src/UI/StylesheetTestGui.svelte b/src/UI/StylesheetTestGui.svelte
index c94966d3d..fe4aecdcb 100644
--- a/src/UI/StylesheetTestGui.svelte
+++ b/src/UI/StylesheetTestGui.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Svg from "../Svg"
-  import Loading from "./Base/Loading.svelte"
-  import ToSvelte from "./Base/ToSvelte.svelte"
+  import Svg from "../Svg";
+  import Loading from "./Base/Loading.svelte";
+  import ToSvelte from "./Base/ToSvelte.svelte";
 </script>
 
 <div>
@@ -15,7 +15,8 @@
     <span class="literal-code">normal-background</span>
     -style which is used if there is nothing special going on. Some general information, with at most
     <a href="https://example.com" target="_blank">a link to someplace</a>
-    .
+    <div class="subtle">Subtle</div>
+
     <div class="alert">Alert: something went wrong</div>
     <div class="warning">Warning</div>
     <div class="information">Some important information</div>
@@ -35,6 +36,7 @@
     <div class="border-interactive interactive">
       Highly interactive area (mostly: active question)
     </div>
+    <div class="subtle">Subtle</div>
 
     <div class="flex">
       <button class="primary">
@@ -53,6 +55,7 @@
 
       <button class="small primary">Small button</button>
       <button class="small primary disabled">Small, disabled button</button>
+
     </div>
     <div class="flex">
       <button>
@@ -99,6 +102,7 @@
       There are <span class="literal-code">interactive</span>
       areas, where many buttons and input elements will appear.
     </p>
+    <div class="subtle">Subtle</div>
 
     <div class="flex">
       <button class="primary">
@@ -114,6 +118,7 @@
         Small button
       </button>
     </div>
+
     <div class="flex">
       <button>
         <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
diff --git a/src/index.css b/src/index.css
index 1bece80e9..143298299 100644
--- a/src/index.css
+++ b/src/index.css
@@ -438,10 +438,18 @@ select:hover {
 
 .subtle {
     /* For all information that is not important for 99% of the users */
-    color: #999;
+    color: #666;
     font-weight: normal;
 }
 
+.low-interaction .subtle {
+    color: #444;
+}
+
+.interactive .subtle {
+    color: #333;
+}
+
 .link-underline .subtle a {
     text-decoration: underline 1px #7193bb88;
     color: #7193bb;