From 72e099cb82200f7bf98680625eb19eb26f6c08bf Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 19 Dec 2023 14:40:14 +0100
Subject: [PATCH] review edits

---
 src/lib/components/ratio/ColorIssues.svelte | 31 +++++++++++++++++++--
 src/lib/components/ratio/index.svelte       |  2 +-
 src/sass/config/scale/_ui.scss              |  2 ++
 src/sass/patterns/_lists.scss               |  4 +++
 src/sass/patterns/_themes.scss              |  2 ++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index fc100ea9..fb2d561e 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -31,13 +31,40 @@
 <style lang="scss">
   .known-issues {
     grid-area: knownissues;
-    padding: var(--shim) var(--double-gutter);
+    margin-inline: calc(var(--gutter) * -1);
+    padding: var(--gutter);
+  }
+
+  summary {
+    align-items: center;
+    display: grid;
+    gap: var(--shim-plus);
+    grid-template-columns: max-content var(--triangle-height);
+    &::marker {
+      content: none;
+    }
+    &::before {
+      border-color: transparent transparent transparent currentColor;
+      border-style: solid;
+      border-width: var(--triangle-width) 0 var(--triangle-width)
+        var(--triangle-height);
+      content: '';
+      grid-column: 2;
+      grid-row: 1;
+      margin-top: var(--half-shim);
+      transform: rotate;
+    }
+  }
+
+  [open] summary::before {
+    transform: rotate(90deg);
   }
   .issues-list {
     display: grid;
-    gap: var(--gutter);
+    gap: var(--half-shim);
     grid-auto-rows: auto;
     grid-template-columns: 1fr;
+    margin-block-start: var(--gutter);
   }
 
   dt {
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index f7e68b92..db8e1828 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -76,7 +76,7 @@
     background-color: var(--bgcolor);
     color: var(--fgcolor);
     display: grid;
-    gap: var(--result-layout-gap, var(--double-gutter));
+    gap: var(--result-layout-gap, var(--shim));
     grid-template:
       'contrastinfo' min-content
       'status' min-content
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index 0ce73c07..bc6de04c 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -15,3 +15,5 @@ $icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
+$triangle-width: var(--shim);
+$triangle-height: var(--shim-plus);
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index fc1443d6..6cc42edd 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -33,6 +33,10 @@ dl {
   display: grid;
   grid-template-columns: auto 1fr;
   margin-block: var(--half-shim) var(--double-gutter);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 dd {
diff --git a/src/sass/patterns/_themes.scss b/src/sass/patterns/_themes.scss
index 4ab1d921..8a4862cc 100644
--- a/src/sass/patterns/_themes.scss
+++ b/src/sass/patterns/_themes.scss
@@ -5,6 +5,8 @@
 
 // If the ratio is too low, make sure important info has high enough contrast
 [data-pass='false'] {
+  --link: var(--status-result-fg);
+  --link-focus: var(--status-result-fg);
   --status-result-bg: var(--text);
   --status-result-fg: var(--bg);
 }