Move color issues to main section

oddbird · Dec 10, 2024 · c1d5241 · c1d5241
1 parent 2fbf5f0
commit c1d5241
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -3,19 +3,13 @@
 
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
 
-  interface Props {
-    pass: boolean;
-  }
-
-  let { pass }: Props = $props();
-
   let startOpen = $state(false);
   onMount(() => {
     startOpen = window.matchMedia('(min-width: 80em)').matches;
   });
 </script>
 
-<details class="known-issues" open={startOpen} data-pass={pass}>
+<details class="known-issues" open={startOpen}>
   <summary>Known Color Issues</summary>
   <dl class="issues-list">
     <dt>Gamut Mapping Implementation</dt>

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { contrast } from 'colorjs.io/fn';
 
-  import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
@@ -66,7 +65,6 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
-  <ColorIssues {pass} />
 </aside>
 
 <style lang="scss">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
   import Header from '$lib/components/Header.svelte';
   import Ratio from '$lib/components/ratio/index.svelte';
   import { bg, fg, format } from '$lib/stores';
+  import ColorIssues from '$src/lib/components/ratio/ColorIssues.svelte';
   import { hashToStoreValues, storeValuesToHash } from '$src/lib/utils';
 
   let bg_fallback = $derived(display($bg));
@@ -49,6 +50,7 @@
   <Ratio />
   <main data-layout="main">
     <Colors />
+    <ColorIssues />
   </main>
   <Footer />
 </div>
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
@@ -2,12 +2,13 @@
 // ------------------------------
 
 details {
-  --link: var(--fgcolor);
-  --link-focus: var(--fgcolor);
+  // --link: var(--fgcolor);
+  // --link-focus: var(--fgcolor);
 
-  background-color: var(--status-result-bg, var(--bgcolor));
+  // background-color: var(--status-result-bg, var(--bgcolor));
   border-radius: var(--border-radius);
-  color: var(--status-result-fg, var(--fgcolor));
+
+  // color: var(--status-result-fg, var(--fgcolor));
 }
 
 summary {