From b4e422e43485a1dc6a4577f520abb9d160e4d1f8 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sun, 6 Jul 2025 19:21:39 +0200 Subject: [PATCH 01/12] INCREASE border to fullfill a11y contrast --- ts/lib/sass/_vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/sass/_vars.scss b/ts/lib/sass/_vars.scss index a8da766ad..434c0f7cb 100644 --- a/ts/lib/sass/_vars.scss +++ b/ts/lib/sass/_vars.scss @@ -153,7 +153,7 @@ $vars: ( default: ( "Border color with medium contrast against window background", ( - light: palette(lightgray, 6), + light: palette(lightgray, 9), dark: palette(darkgray, 7), ), ), From 785a6b37c8562cf5d0b74962838fd5857ae8f5ad Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sun, 6 Jul 2025 19:29:51 +0200 Subject: [PATCH 02/12] Use ankis border instead of bs border for .form-check-input --- ts/lib/components/Switch.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/ts/lib/components/Switch.svelte b/ts/lib/components/Switch.svelte index d48f46fb3..c39a27748 100644 --- a/ts/lib/components/Switch.svelte +++ b/ts/lib/components/Switch.svelte @@ -31,6 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } .form-check-input { + border-color: var(--border); -webkit-appearance: none; appearance: none; height: 1.5em; From 8bef13a4927c19fa524ef917bcb7429e636732a7 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sun, 6 Jul 2025 19:36:58 +0200 Subject: [PATCH 03/12] Use ankis border for -select-container and .chevron --- ts/lib/components/Select.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/lib/components/Select.svelte b/ts/lib/components/Select.svelte index 24b7bc12e..ace0527e1 100644 --- a/ts/lib/components/Select.svelte +++ b/ts/lib/components/Select.svelte @@ -262,6 +262,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html display: flex; flex-flow: row; justify-content: space-between; + border-color: var(--border); .inner { flex-grow: 1; @@ -287,13 +288,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .chevron { height: 100%; align-self: flex-end; - border-left: 1px solid var(--border-subtle); + border-left: 1px solid var(--border); } :global([dir="rtl"]) { .chevron { border-left: none; - border-right: 1px solid var(--border-subtle); + border-right: 1px solid var(--border); } } From 236260a8ccd1f65e77ac91b9a0c73c68497737be Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Tue, 8 Jul 2025 13:48:38 +0200 Subject: [PATCH 04/12] Do not change color of borders below headers --- ts/lib/components/TitledContainer.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/TitledContainer.svelte b/ts/lib/components/TitledContainer.svelte index 70e4a078c..44d04e4b9 100644 --- a/ts/lib/components/TitledContainer.svelte +++ b/ts/lib/components/TitledContainer.svelte @@ -70,7 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html page-break-inside: avoid; } h1 { - border-bottom: 1px solid var(--border); + border-bottom: 1px solid #c4c4c4; padding-bottom: 0.25em; } .help-badge { From 872ef63f3067e7e25ed1496b16e5d62e3b417c9f Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 22:40:39 +0200 Subject: [PATCH 05/12] Revert Changes --- ts/lib/components/Select.svelte | 5 ++--- ts/lib/components/Switch.svelte | 1 - ts/lib/components/TitledContainer.svelte | 2 +- ts/lib/sass/_vars.scss | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/ts/lib/components/Select.svelte b/ts/lib/components/Select.svelte index ace0527e1..24b7bc12e 100644 --- a/ts/lib/components/Select.svelte +++ b/ts/lib/components/Select.svelte @@ -262,7 +262,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html display: flex; flex-flow: row; justify-content: space-between; - border-color: var(--border); .inner { flex-grow: 1; @@ -288,13 +287,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .chevron { height: 100%; align-self: flex-end; - border-left: 1px solid var(--border); + border-left: 1px solid var(--border-subtle); } :global([dir="rtl"]) { .chevron { border-left: none; - border-right: 1px solid var(--border); + border-right: 1px solid var(--border-subtle); } } diff --git a/ts/lib/components/Switch.svelte b/ts/lib/components/Switch.svelte index c39a27748..d48f46fb3 100644 --- a/ts/lib/components/Switch.svelte +++ b/ts/lib/components/Switch.svelte @@ -31,7 +31,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } .form-check-input { - border-color: var(--border); -webkit-appearance: none; appearance: none; height: 1.5em; diff --git a/ts/lib/components/TitledContainer.svelte b/ts/lib/components/TitledContainer.svelte index 110e79d8f..3ea932ba3 100644 --- a/ts/lib/components/TitledContainer.svelte +++ b/ts/lib/components/TitledContainer.svelte @@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html page-break-inside: avoid; } h1 { - border-bottom: 1px solid #c4c4c4; + border-bottom: 1px solid var(--border); padding-bottom: 0.25em; } .help-badge { diff --git a/ts/lib/sass/_vars.scss b/ts/lib/sass/_vars.scss index 434c0f7cb..a8da766ad 100644 --- a/ts/lib/sass/_vars.scss +++ b/ts/lib/sass/_vars.scss @@ -153,7 +153,7 @@ $vars: ( default: ( "Border color with medium contrast against window background", ( - light: palette(lightgray, 9), + light: palette(lightgray, 6), dark: palette(darkgray, 7), ), ), From d36bec8b327fc610dc1887a95b72bb51d3fb7528 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 22:55:53 +0200 Subject: [PATCH 06/12] Add new gray to palette --- ts/lib/sass/_color-palette.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ts/lib/sass/_color-palette.scss b/ts/lib/sass/_color-palette.scss index 940e7531c..fa8ce1791 100644 --- a/ts/lib/sass/_color-palette.scss +++ b/ts/lib/sass/_color-palette.scss @@ -17,6 +17,7 @@ $color-palette: ( 7: #afafaf, 8: #999999, 9: #858585, + 10: #949494, ), darkgray: ( 0: #737373, From d3cd240de3cd02dd8518e7adfca11f8649100ce2 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 22:59:06 +0200 Subject: [PATCH 07/12] Add new border type 'ui' --- ts/lib/sass/_vars.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ts/lib/sass/_vars.scss b/ts/lib/sass/_vars.scss index a8da766ad..9d75aa48d 100644 --- a/ts/lib/sass/_vars.scss +++ b/ts/lib/sass/_vars.scss @@ -178,6 +178,13 @@ $vars: ( dark: palette(blue, 5), ), ), + ui: ( + "Border color of ui elements, designed for minimum A11Y contrast against the background.", + ( + light: palette(lightgray, 10), + dark: palette(blue, 5), + ), + ), ), button: ( bg: ( From 1e92881864365a2c69d74bed8e0c98c0ab18fabd Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 23:01:06 +0200 Subject: [PATCH 08/12] Let h1 use 'ui' border style --- ts/lib/components/TitledContainer.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/TitledContainer.svelte b/ts/lib/components/TitledContainer.svelte index 3ea932ba3..fcf2a0249 100644 --- a/ts/lib/components/TitledContainer.svelte +++ b/ts/lib/components/TitledContainer.svelte @@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html page-break-inside: avoid; } h1 { - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border-ui); padding-bottom: 0.25em; } .help-badge { From c1fcbb263dd6f2abff4cde7a703242f310d496e5 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 23:02:46 +0200 Subject: [PATCH 09/12] Let switch use 'ui' border style --- ts/lib/components/Switch.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/ts/lib/components/Switch.svelte b/ts/lib/components/Switch.svelte index d48f46fb3..560ee403b 100644 --- a/ts/lib/components/Switch.svelte +++ b/ts/lib/components/Switch.svelte @@ -31,6 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } .form-check-input { + border-color: var(--border-ui); -webkit-appearance: none; appearance: none; height: 1.5em; From bd2d76164a68e79df1cf74b83c4fc74eb3c72590 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 23:04:38 +0200 Subject: [PATCH 10/12] Let select use 'ui' border style --- ts/lib/components/Select.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/lib/components/Select.svelte b/ts/lib/components/Select.svelte index 24b7bc12e..482501a10 100644 --- a/ts/lib/components/Select.svelte +++ b/ts/lib/components/Select.svelte @@ -262,6 +262,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html display: flex; flex-flow: row; justify-content: space-between; + border-color: var(border-ui); .inner { flex-grow: 1; @@ -287,13 +288,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .chevron { height: 100%; align-self: flex-end; - border-left: 1px solid var(--border-subtle); + border-left: 1px solid var(--border-ui); } :global([dir="rtl"]) { .chevron { border-left: none; - border-right: 1px solid var(--border-subtle); + border-right: 1px solid var(--border-ui); } } From 4dce9cffbfc317a1dde4bc606d7ceab0f683922f Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 23:05:48 +0200 Subject: [PATCH 11/12] Let select use 'ui' border style --- ts/lib/components/Select.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/Select.svelte b/ts/lib/components/Select.svelte index 482501a10..bbe1d8866 100644 --- a/ts/lib/components/Select.svelte +++ b/ts/lib/components/Select.svelte @@ -262,7 +262,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html display: flex; flex-flow: row; justify-content: space-between; - border-color: var(border-ui); + border-color: var(--border-ui); .inner { flex-grow: 1; From c7fa2151de5e8be28bfe179ce6a21b5cdb102854 Mon Sep 17 00:00:00 2001 From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com> Date: Sat, 30 Aug 2025 23:19:08 +0200 Subject: [PATCH 12/12] Let spinbox use 'ui' border style --- ts/lib/components/SpinBox.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index f52845a4d..60462d6b1 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -210,7 +210,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .spin-box { width: 100%; background: var(--canvas-inset); - border: 1px solid var(--border); + border: 1px solid var(--border-ui); border-radius: var(--border-radius); overflow: hidden; position: relative;