Increase colour contrast for 'subtle' class, WCAG-audit:1, see #1181

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} />

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")} />

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;