From c1d524102fde9089479cb9dd4554e09676e9e48f Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 10 Dec 2024 19:16:40 +0000
Subject: [PATCH 01/10] Move color issues to main section
---
src/lib/components/ratio/ColorIssues.svelte | 8 +-------
src/lib/components/ratio/index.svelte | 2 --
src/routes/+page.svelte | 2 ++
src/sass/patterns/_disclosure.scss | 9 +++++----
4 files changed, 8 insertions(+), 13 deletions(-)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index f83f1e3..168b85e 100644
--- 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
index 7275d7e..75c98f5 100644
--- 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
index f3a1494..32c7402 100644
--- 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
index 2e2f9c0..78471bf 100644
--- 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 {
From 8b3c649b8d8ca6043793634357c7f6f850498fa8 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 28 Jan 2025 15:08:47 +0100
Subject: [PATCH 02/10] cleanup styling and spacing for relocated color issues
section
---
src/lib/components/ratio/ColorIssues.svelte | 10 +++-------
src/sass/initial/_layout.scss | 6 +++++-
src/sass/patterns/_disclosure.scss | 11 +++++------
3 files changed, 13 insertions(+), 14 deletions(-)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 168b85e..a8867b9 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -54,19 +54,15 @@
<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);
- }
+ margin-block-end: var(--spacer);
+ padding: var(--gutter) var(--shim-plus);
}
summary {
align-items: center;
display: grid;
gap: var(--shim-plus);
- grid-template-columns: max-content var(--triangle-height);
+ grid-template-columns: var(--triangle-height) max-content;
}
.issues-list {
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index c851724..6534577 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -55,10 +55,14 @@ body {
--layout-pad-block: 0;
--layout-pad-inline: 0; // allows warning to stretch to the edge
+ display: grid;
grid-area: main;
+ grid-template: '... content ...' auto / var(--double-gutter) 1fr var(
+ --double-gutter
+ );
> * {
- padding-inline: var(--double-gutter);
+ grid-column: content;
}
}
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index 78471bf..7417634 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -2,13 +2,12 @@
// ------------------------------
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 {
@@ -31,7 +30,7 @@ summary {
border-width: var(--triangle-width) 0 var(--triangle-width)
var(--triangle-height);
content: '';
- grid-column: 2;
+ grid-column: 1;
grid-row: 1;
margin-block-start: var(--half-shim);
rotate: var(--rotate-triangle, none);
From 4da790e1ffe95196d2d3f2d0a0198520463091ae Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 28 Jan 2025 15:17:11 +0100
Subject: [PATCH 03/10] fix issues list spacing
---
src/lib/components/ratio/ColorIssues.svelte | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index a8867b9..c3e851e 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -71,6 +71,8 @@
grid-auto-rows: auto;
grid-template-columns: 1fr;
margin-block-start: var(--gutter);
+ max-width: 85ch;
+ padding-inline: var(--double-gutter);
}
dt {
From 16ee6fd880f1d285e6e3fa0af190be1a14d45aff Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Wed, 29 Jan 2025 14:18:27 +0100
Subject: [PATCH 04/10] remove colors from color issues section
---
src/sass/patterns/_disclosure.scss | 9 ---------
1 file changed, 9 deletions(-)
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index 7417634..ca4ad3a 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -1,15 +1,6 @@
// The Details disclosure element
// ------------------------------
-details {
- --link: var(--fgcolor);
- --link-focus: var(--fgcolor);
-
- background-color: var(--status-result-bg, var(--bgcolor));
- border-radius: var(--border-radius);
- color: var(--status-result-fg, var(--fgcolor));
-}
-
summary {
cursor: pointer;
font-weight: bold;
From 1e6c2902ab2e7d0f9af9d9930fd4639edb6e6c3c Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Wed, 29 Jan 2025 15:41:18 +0100
Subject: [PATCH 05/10] change known issues section into a list
---
src/lib/components/ratio/ColorIssues.svelte | 59 +++++++--------------
src/sass/patterns/_lists.scss | 5 ++
2 files changed, 25 insertions(+), 39 deletions(-)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index c3e851e..bf88c7d 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -1,19 +1,13 @@
<script lang="ts">
- import { onMount } from 'svelte';
-
import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-
- let startOpen = $state(false);
- onMount(() => {
- startOpen = window.matchMedia('(min-width: 80em)').matches;
- });
</script>
-<details class="known-issues" open={startOpen}>
- <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
@@ -22,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
@@ -47,40 +41,27 @@
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 {
+
+ hr {
+ border: unset;
+ border-block-start: var(--border-width) solid var(--border-light);
margin-block-end: var(--spacer);
- padding: var(--gutter) var(--shim-plus);
+ margin-inline: unset;
}
- summary {
- align-items: center;
- display: grid;
- gap: var(--shim-plus);
- grid-template-columns: var(--triangle-height) max-content;
+ .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);
- max-width: 85ch;
- padding-inline: var(--double-gutter);
- }
-
- dt {
- font-weight: bold;
- }
-
- dd {
- --description-margin-inline: 0;
+ max-inline-size: 85ch;
}
p {
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index ede95de..a0fccaa 100644
--- 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-weight: bold;
+ font-size: var(--small);
+}
From 3512ba6e3e525d91147a8841e320e02c5f880ad2 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Wed, 29 Jan 2025 16:16:05 +0100
Subject: [PATCH 06/10] remove unused disclosure styles
---
src/sass/patterns/_disclosure.scss | 34 ------------------------------
1 file changed, 34 deletions(-)
delete mode 100644 src/sass/patterns/_disclosure.scss
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
deleted file mode 100644
index ca4ad3a..0000000
--- a/src/sass/patterns/_disclosure.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// The Details disclosure element
-// ------------------------------
-
-summary {
- cursor: pointer;
- font-weight: bold;
-
- // Hides marker some browsers add
- &::marker {
- content: none;
- }
-
- // Hides marker webkit adds
- &::-webkit-details-marker {
- display: 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: 1;
- grid-row: 1;
- margin-block-start: var(--half-shim);
- rotate: var(--rotate-triangle, none);
- transition: rotate var(--fast);
-
- [open] & {
- --rotate-triangle: 90deg;
- }
- }
-}
From e162e9c5a1fc2a66ec44e2ffe0cac2fca6d2ccb9 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Wed, 29 Jan 2025 16:18:50 +0100
Subject: [PATCH 07/10] removed unused sass
---
src/sass/patterns/_index.scss | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
index 902cbf1..85b59cb 100644
--- 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';
From 39744edde75db38a9c8ede06bf432390db5a9acd Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Fri, 31 Jan 2025 15:11:03 +0100
Subject: [PATCH 08/10] remove unused sass
---
src/lib/components/ratio/ColorIssues.svelte | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index bf88c7d..3fe7930 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -46,8 +46,6 @@
</div>
<style lang="scss">
- @use 'config';
-
hr {
border: unset;
border-block-start: var(--border-width) solid var(--border-light);
From 7e27f5eca78df035e0d1145ae0b81dd0346b27c2 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 4 Feb 2025 14:10:35 +0100
Subject: [PATCH 09/10] review cleanup
---
src/lib/components/ratio/ColorIssues.svelte | 2 +-
src/sass/initial/_layout.scss | 6 +-----
src/sass/patterns/_lists.scss | 2 +-
3 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 3fe7930..9c094f2 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -50,7 +50,7 @@
border: unset;
border-block-start: var(--border-width) solid var(--border-light);
margin-block-end: var(--spacer);
- margin-inline: unset;
+ margin-inline: var(--double-gutter);
}
.known-issues {
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index 6534577..c851724 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -55,14 +55,10 @@ body {
--layout-pad-block: 0;
--layout-pad-inline: 0; // allows warning to stretch to the edge
- display: grid;
grid-area: main;
- grid-template: '... content ...' auto / var(--double-gutter) 1fr var(
- --double-gutter
- );
> * {
- grid-column: content;
+ padding-inline: var(--double-gutter);
}
}
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index a0fccaa..9d819bd 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -29,6 +29,6 @@ dd {
}
.list-item-heading {
- font-weight: bold;
font-size: var(--small);
+ font-weight: bold;
}
From 7eae78d2a08f4a7ceb4ca3006b304d8fd92b3822 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 4 Feb 2025 14:15:49 +0100
Subject: [PATCH 10/10] remove unused sizes
---
src/sass/config/scale/_ui.scss | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index bc6de04..0ce73c0 100644
--- 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);