Merge branch 'main' into gamut

* main: remove unused sizes review cleanup Bump the dev-minor group with 3 updates remove unused sass removed unused sass remove unused disclosure styles change known issues section into a list remove colors from color issues section fix issues list spacing cleanup styling and spacing for relocated color issues section Move color issues to main section
oddbird · Feb 5, 2025 · 88d1140 · 88d1140
2 parents cdfec9a + 6d1e4e0
commit 88d1140
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "@testing-library/svelte": "^5.2.6",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__js": "^8.42.3",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.15",
     "@types/node": "^22",
     "@typescript-eslint/utils": "^8.22.0",
     "@vitest/coverage-v8": "^3.0.4",
@@ -70,7 +70,7 @@
     "sassdoc-theme-herman": "^6.0.2",
     "stylelint": "^16.14.1",
     "stylelint-config-standard-scss": "^14.0.0",
-    "svelte": "^5.19.3",
+    "svelte": "^5.19.6",
     "svelte-check": "^4.1.4",
     "svelte-eslint-parser": "^0.43.0",
     "typescript": "^5.7.3",

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -1,25 +1,13 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   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}>
-  <summary>Known Color Issues</summary>
-  <dl class="issues-list">
-    <dt>Gamut Mapping Implementation</dt>
-    <dd>
+<hr />
+<div class="known-issues">
+  <h2 class="section-heading">Known Color Issues</h2>
+  <ul class="issues-list">
+    <li>
+      <h3 class="list-item-heading">Gamut Mapping Implementation</h3>
       <p>
         Browsers implemented gamut mapping using clipping, which is fast but
         provides inferior results compared to the algorithm defined in the <ExternalLink
@@ -28,9 +16,9 @@
         >. Until browsers are updated, colors that are out of gamut for your
         screen may be displayed very differently than expected.
       </p>
-    </dd>
-    <dt>Checking for Out of Gamut Colors</dt>
-    <dd>
+    </li>
+    <li>
+      <h3 class="list-item-heading">Checking for Out of Gamut Colors</h3>
       <p>
         The new color features in CSS allow for a much wider range of colors,
         many of which cannot be shown on many (or any) screens. When selecting
@@ -53,42 +41,25 @@
         When a color is out of gamut for the user's screen, the browser will
         adjust the color to be in gamut.
       </p>
-    </dd>
-  </dl>
-</details>
+    </li>
+  </ul>
+</div>
 
 <style lang="scss">
-  @use 'config';
-  .known-issues {
-    grid-area: knownissues;
-    padding: var(--gutter);
-
-    @include config.above('lg-page-break') {
-      margin-inline: calc(var(--gutter) * -1);
-    }
+  hr {
+    border: unset;
+    border-block-start: var(--border-width) solid var(--border-light);
+    margin-block-end: var(--spacer);
+    margin-inline: var(--double-gutter);
   }
 
-  summary {
-    align-items: center;
-    display: grid;
-    gap: var(--shim-plus);
-    grid-template-columns: max-content var(--triangle-height);
+  .known-issues {
+    margin-block-end: var(--spacer);
   }
 
   .issues-list {
-    display: grid;
-    gap: var(--half-shim);
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr;
     margin-block-start: var(--gutter);
-  }
-
-  dt {
-    font-weight: bold;
-  }
-
-  dd {
-    --description-margin-inline: 0;
+    max-inline-size: 85ch;
   }
 
   p {

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, gamut } 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));
@@ -51,6 +52,7 @@
   <Ratio />
   <main data-layout="main">
     <Colors />
+    <ColorIssues />
   </main>
   <Footer />
 </div>
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
@@ -15,5 +15,3 @@ $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/_disclosure.scss b/src/sass/patterns/_disclosure.scss
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
@@ -7,5 +7,4 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
-@forward 'disclosure';
 @forward 'themes';
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
@@ -27,3 +27,8 @@ dl {
 dd {
   margin-inline-start: var(--description-margin-inline, var(--gutter));
 }
+
+.list-item-heading {
+  font-size: var(--small);
+  font-weight: bold;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -969,19 +969,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.17.14":
-  version: 4.17.14
-  resolution: "@types/lodash@npm:4.17.14"
-  checksum: 10/6ee40725f3e192f5ef1f493caca19210aa7acd7adc3136b8dba84d418a35be0abea0668105aed9f696ad62a54310a9c0d328971ad4b157f5bcda700424ed5aae
+"@types/lodash@npm:^4.17.15":
+  version: 4.17.15
+  resolution: "@types/lodash@npm:4.17.15"
+  checksum: 10/27b348b5971b9c670215331b52448a13d7d65bf1fbd320a7049c9c153c1186ff5d116ba75f05f07d32d7ece8a992b26a30c7bdc9be22a3d1e4e3e6068aa04603
   languageName: node
   linkType: hard
 
 "@types/node@npm:^22":
-  version: 22.10.10
-  resolution: "@types/node@npm:22.10.10"
+  version: 22.13.0
+  resolution: "@types/node@npm:22.13.0"
   dependencies:
     undici-types: "npm:~6.20.0"
-  checksum: 10/61559b62bc7e62b947876e097c99472dd01317dd3b5916b538e2c40db8d68a1fc23c8de48149ef04cd2790a97bf2c005ea60cbb067e55ddbefd013d73da7a147
+  checksum: 10/a7563e57df48cb7e28f936dbabe228316dcdb4c7c3a88a6c1659fae898ffde2647a7193a9e29e0cbcb7dacc05a91fb3bc30c1a1d6fc9294694a734ff71a5f12e
   languageName: node
   linkType: hard
 
@@ -6115,7 +6115,7 @@ __metadata:
     "@testing-library/svelte": "npm:^5.2.6"
     "@types/eslint-config-prettier": "npm:^6.11.3"
     "@types/eslint__js": "npm:^8.42.3"
-    "@types/lodash": "npm:^4.17.14"
+    "@types/lodash": "npm:^4.17.15"
     "@types/node": "npm:^22"
     "@typescript-eslint/utils": "npm:^8.22.0"
     "@vitest/coverage-v8": "npm:^3.0.4"
@@ -6141,7 +6141,7 @@ __metadata:
     sassdoc-theme-herman: "npm:^6.0.2"
     stylelint: "npm:^16.14.1"
     stylelint-config-standard-scss: "npm:^14.0.0"
-    svelte: "npm:^5.19.3"
+    svelte: "npm:^5.19.6"
     svelte-check: "npm:^4.1.4"
     svelte-eslint-parser: "npm:^0.43.0"
     typescript: "npm:^5.7.3"
@@ -8386,9 +8386,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte@npm:^5.19.3":
-  version: 5.19.3
-  resolution: "svelte@npm:5.19.3"
+"svelte@npm:^5.19.6":
+  version: 5.19.6
+  resolution: "svelte@npm:5.19.6"
   dependencies:
     "@ampproject/remapping": "npm:^2.3.0"
     "@jridgewell/sourcemap-codec": "npm:^1.5.0"
@@ -8404,7 +8404,7 @@ __metadata:
     locate-character: "npm:^3.0.0"
     magic-string: "npm:^0.30.11"
     zimmerframe: "npm:^1.1.2"
-  checksum: 10/f04b2a5cfc945c0564456b458688b39cc92f7400510841b860f0c8a5272d9d3c5df509bd1a6631b7b59d38e633f16d284694cf4d2cd91100ded507b3913fea4b
+  checksum: 10/4f9bcd852c9184fe0e4726eda14bdfd81b6706369370216c69a8a96f0eaa537793d42d852b5051c4ffe5eabd8bab43b6d3e30d813fc1184e04c0214689db416c
   languageName: node
   linkType: hard