From bfe9819b7c6bbe2094e1a716b3c298642f8086e1 Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 17:00:47 +0530 Subject: [PATCH 1/8] update: correct color for unchecked checkboxes. --- src/lib/elements/forms/inputCheckbox.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte index ba4d1037f..4ef3a475d 100644 --- a/src/lib/elements/forms/inputCheckbox.svelte +++ b/src/lib/elements/forms/inputCheckbox.svelte @@ -65,3 +65,11 @@ {error} {/if} + + From caba7ec587441c94fdf8510d55cfb4be92006cfe Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 17:27:41 +0530 Subject: [PATCH 2/8] update: correct color for other selectors too. --- src/lib/elements/forms/inputCheckbox.svelte | 8 -------- src/routes/+layout.svelte | 8 ++++++++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte index 4ef3a475d..ba4d1037f 100644 --- a/src/lib/elements/forms/inputCheckbox.svelte +++ b/src/lib/elements/forms/inputCheckbox.svelte @@ -65,11 +65,3 @@ {error} {/if} - - diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 72fa9499e..a46991633 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -194,4 +194,12 @@ } } } + + /* TODO: remove this block once Pink V2 is incorporated */ + :global(.theme-dark) input[type='checkbox']:not(:checked), + :global(.theme-dark) input[type='radio']:not(:checked), + :global(.theme-dark) input[type='switchbox']:not(:checked) { + background-color: transparent; /* take whatever color is behind */ + border: 1px solid var(--color-mid-neutral-70, #56565c); + } From 5150169c831dcd77de099cbeb93047999b02b85c Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 17:39:48 +0530 Subject: [PATCH 3/8] update: improve selectors logic. --- src/routes/+layout.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a46991633..d6fbc0e0c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -196,9 +196,7 @@ } /* TODO: remove this block once Pink V2 is incorporated */ - :global(.theme-dark) input[type='checkbox']:not(:checked), - :global(.theme-dark) input[type='radio']:not(:checked), - :global(.theme-dark) input[type='switchbox']:not(:checked) { + .theme-dark input:is([type='checkbox'], [type='radio'], [type='switchbox']):not(:checked) { background-color: transparent; /* take whatever color is behind */ border: 1px solid var(--color-mid-neutral-70, #56565c); } From 19149d06cd9058eb3076ec03c10fdd16b3172ddb Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 17:53:28 +0530 Subject: [PATCH 4/8] fix: tests. --- src/routes/+layout.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d6fbc0e0c..e1afe05c0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -196,8 +196,12 @@ } /* TODO: remove this block once Pink V2 is incorporated */ - .theme-dark input:is([type='checkbox'], [type='radio'], [type='switchbox']):not(:checked) { + input[type='radio'], + input[type='checkbox'], + input[type='switchbox'] { + .theme-dark &:not(:checked) { background-color: transparent; /* take whatever color is behind */ border: 1px solid var(--color-mid-neutral-70, #56565c); + } } From 689bc7e3d0823be2a5bb6bc9cd3a715807d42158 Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 17:53:49 +0530 Subject: [PATCH 5/8] ran: formatter. --- src/routes/+layout.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e1afe05c0..2c2ee202e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -199,9 +199,9 @@ input[type='radio'], input[type='checkbox'], input[type='switchbox'] { - .theme-dark &:not(:checked) { - background-color: transparent; /* take whatever color is behind */ - border: 1px solid var(--color-mid-neutral-70, #56565c); - } + .theme-dark &:not(:checked) { + background-color: transparent; /* take whatever color is behind */ + border: 1px solid var(--color-mid-neutral-70, #56565c); + } } From 9187f3f3867cb8c0a71d3dd3e1de855239aac33f Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 18:31:54 +0530 Subject: [PATCH 6/8] fix: switch role checkbox being affected differently. --- src/routes/+layout.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2c2ee202e..f6902870d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -197,11 +197,17 @@ /* TODO: remove this block once Pink V2 is incorporated */ input[type='radio'], - input[type='checkbox'], + input[type='checkbox']:not([role='switch']), input[type='switchbox'] { .theme-dark &:not(:checked) { background-color: transparent; /* take whatever color is behind */ border: 1px solid var(--color-mid-neutral-70, #56565c); } } + + input[type='checkbox'][role='switch'] { + .theme-dark &:not(:checked) { + background-color: #56565c; + } + } From c20b253d47e987ecd4b29b1f63dd3c70b27a3428 Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 18:38:50 +0530 Subject: [PATCH 7/8] update: use `var` with color ref. --- src/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f6902870d..70e35d10b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -207,7 +207,7 @@ input[type='checkbox'][role='switch'] { .theme-dark &:not(:checked) { - background-color: #56565c; + background-color: var(--color-mid-neutral-70, #56565c); } } From 4f409f0d15291202d498404dd81b46a0bbc72944 Mon Sep 17 00:00:00 2001 From: ItzNotABug Date: Thu, 26 Sep 2024 19:02:00 +0530 Subject: [PATCH 8/8] fix: switch cases. --- src/routes/+layout.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 70e35d10b..8368d619f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -197,7 +197,7 @@ /* TODO: remove this block once Pink V2 is incorporated */ input[type='radio'], - input[type='checkbox']:not([role='switch']), + input[type='checkbox']:not([class='switch']), input[type='switchbox'] { .theme-dark &:not(:checked) { background-color: transparent; /* take whatever color is behind */ @@ -205,7 +205,7 @@ } } - input[type='checkbox'][role='switch'] { + input[type='checkbox'][class='switch'] { .theme-dark &:not(:checked) { background-color: var(--color-mid-neutral-70, #56565c); }