From 90dc37758df08c072230905ed44a60306c468fb6 Mon Sep 17 00:00:00 2001 From: killerbee Date: Fri, 18 Nov 2022 19:26:23 -0800 Subject: [PATCH 1/7] Increased contrast --- app/javascript/styles/meemu-default.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index a4c7416..d08dea2 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -1,9 +1,9 @@ -$classic-base-color: #322a4f; +$classic-base-color: #261f3f; $ui-base-color: $classic-base-color; -$ui-base-lighter-color: #885b8c; +$ui-base-lighter-color: #a87ea8; $ui-primary-color: #9bcbed; $ui-secondary-color: #ba8d98; $ui-highlight-color: #CC7AFF; -@import 'application'; \ No newline at end of file +@import 'application'; From 4d21d6bdd19696a4257b1d3da9f1b687be0034b3 Mon Sep 17 00:00:00 2001 From: killerbee Date: Mon, 21 Nov 2022 00:39:10 -0800 Subject: [PATCH 2/7] Increase hashtag contrast ratio from 5.44 (AA) to 7.26 (AAA) Also from 4.14 (fail) to 5.52 (AA) on highlighted toot (though I can't find in the generated CSS currently where the highlighted toot background color is coming from; this may not be as bad when the $ui-base-color is properly updated, if the highlight color is derived from it) --- app/javascript/styles/meemu-default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index d08dea2..cfe49fc 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -2,7 +2,7 @@ $classic-base-color: #261f3f; $ui-base-color: $classic-base-color; $ui-base-lighter-color: #a87ea8; $ui-primary-color: #9bcbed; -$ui-secondary-color: #ba8d98; +$ui-secondary-color: #d8a2ba; $ui-highlight-color: #CC7AFF; From e402150171d367a142a78b2199b6267b8572882c Mon Sep 17 00:00:00 2001 From: killerbee Date: Mon, 21 Nov 2022 17:30:28 -0800 Subject: [PATCH 3/7] Add explanatory comments Color variables now have roles noted. Relevant contrast ratios are now noted. --- app/javascript/styles/meemu-default.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index cfe49fc..b184082 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -1,8 +1,21 @@ +/* Main background: CR 15.55 against white text */ $classic-base-color: #261f3f; $ui-base-color: $classic-base-color; + +/* 'grey' text: CR 4.6 against base */ $ui-base-lighter-color: #a87ea8; + +/* Highlight text: CR 9.0 against base, + Reply box: CR 12.16 against black text */ $ui-primary-color: #9bcbed; + +/* Hashtags and @s: CR 7.25 against base, + ! CR 1.24 against reply box + Is it possible to override the reply box color? Re-using a + text color for a background color does not make sense. */ $ui-secondary-color: #d8a2ba; + +/* Winning poll option: CR 5.77 against base */ $ui-highlight-color: #CC7AFF; From 4c255bc996d7b399badca32d20f15478bd285e99 Mon Sep 17 00:00:00 2001 From: killerbee Date: Wed, 14 Dec 2022 15:10:57 -0800 Subject: [PATCH 4/7] Fixes for minor UI elements Add the actual CSS patch I'm basing these changes off, for reference (in the very probable case that I've messed something up) --- app/javascript/styles/meemu-default.scss | 19 ++++++ .../styles/meemu-purple-contrast-patch.css | 64 +++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 app/javascript/styles/meemu-purple-contrast-patch.css diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index b184082..99bd020 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -18,5 +18,24 @@ $ui-secondary-color: #d8a2ba; /* Winning poll option: CR 5.77 against base */ $ui-highlight-color: #CC7AFF; +/* Selected toot */ +.detailed-status { +background: #332a54; +} +.detailed-status__action-bar { +background: #332a54; +} + +/* Replied-to-toot text over toot box */ +.reply-indicator { + a { + color: var(--fbc-light-gray) } +} + +/* OCR image description button */ +.link-button { + color: #00446c; + text-decoration: underline; +} @import 'application'; diff --git a/app/javascript/styles/meemu-purple-contrast-patch.css b/app/javascript/styles/meemu-purple-contrast-patch.css new file mode 100644 index 0000000..a537418 --- /dev/null +++ b/app/javascript/styles/meemu-purple-contrast-patch.css @@ -0,0 +1,64 @@ +/* Increase contrast */ +/* meemu-purple-221234c0.chunk.css | https://queer.party/packs/css/meemu-purple-221234c0.chunk.css */ +.column > .scrollable { + /* background: #322a4f; */ + background: #261f3f; +} + +.status__relative-time { + /* color: #885b8c; */ + color: #a87ea8; +} + +.status__display-name { + /* color: #885b8c; */ + color: #a87ea8; +} + +.status { + /* border-bottom: 1px solid #43386a; */ + border-bottom: 1px solid #524486; +} + +.muted .status__content, +.muted .status__content a, +.muted .status__content p, +.muted .status__display-name strong { + color: #a87ea8; +} + +.muted .poll { + /* color: #885b8c; */ + color: #a87ea8; +} +.reply-indicator__content a, .status__content a { +color: #d8a2ba; +} +.detailed-status { +background: #332a54; +} +.detailed-status__action-bar { +background: #332a54; +} + + +/* meemu-purple-652b2e02.chunk.css | https://queer.party/packs/css/meemu-purple-652b2e02.chunk.css */ + +.reply-indicator { + /* background: var\(--fbc-grey-20; */ + background: var(--fbc-light-gray); +} + +.link-button { + color: #00446c; + text-decoration: underline; +} + + +@media screen and (min-width: 631px) { + .column, + .drawer { + /* background: #2a2440; */ + background: #1c172d; + } +} From be266473af47c1e9478df513dd00cf786afd10ec Mon Sep 17 00:00:00 2001 From: killerbee Date: Wed, 14 Dec 2022 18:18:16 -0800 Subject: [PATCH 5/7] Improved contrast of many UI elements Improved contrast of usernames, hashtags and @s against reply box, account bio field box contents, icons/buttons, left panel UI elements, toot borders, etc Added CR value notes to all colors Made indentation consistent --- app/javascript/styles/meemu-default.scss | 156 +++++++++++++++--- .../styles/meemu-purple-contrast-patch.css | 89 +++++++--- 2 files changed, 196 insertions(+), 49 deletions(-) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index 99bd020..962494a 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -1,41 +1,151 @@ -/* Main background: CR 15.55 against white text */ +/* Main/base background: CR 15.55 (AAA) against white text */ $classic-base-color: #261f3f; $ui-base-color: $classic-base-color; -/* 'grey' text: CR 4.6 against base */ -$ui-base-lighter-color: #a87ea8; +/* Left panel background: + * (Unknown variable, components.scss) +.drawer__inner { + background: #4d417a; +} +*/ -/* Highlight text: CR 9.0 against base, - Reply box: CR 12.16 against black text */ +/* Toot! and Follow/Unfollow buttons: CR 3.2 (AA for UI) against white text, + * would be 6.54 (AA) against black text, but I think that looks worse */ +.button, +.button .logo-button { + background: #c363ff !important; +} +/* Hovering over Unfollow button (unknown variable, boost.scss) + * CR 4.18 (AA for UI) against white text, would be 5.01 (AA) against black +.button. logo-button .button--destructive:active, +.button. logo-button .button--destructive:focus, +.button. logo-button .button--destructive:hover { + background: #df405a; +} +*/ + +/* Account view background: CR 11.84 (AAA) against white text + * (Unknown variable, components.scss): +.account__header { + background: #3a315c; +} + * Account header fields box background: + * (Unknown variable, components.scss) +.account__header__bio .account__header__fields { + background: #2a2342; +} +*/ + +/* Highlight text: CR 9.0 (AAA) against base, + * CR 6.85 (AA) against account view + * CR 8.58 against account bio field background #2a2342; */ $ui-primary-color: #9bcbed; -/* Hashtags and @s: CR 7.25 against base, - ! CR 1.24 against reply box - Is it possible to override the reply box color? Re-using a - text color for a background color does not make sense. */ -$ui-secondary-color: #d8a2ba; - -/* Winning poll option: CR 5.77 against base */ -$ui-highlight-color: #CC7AFF; - -/* Selected toot */ +/* Selected toot: CR 13.13 (AAA) against white text, + CR 6.12 (AA) against @s */ .detailed-status { -background: #332a54; + background: #332a54; } .detailed-status__action-bar { -background: #332a54; + background: #332a54; } -/* Replied-to-toot text over toot box */ +/* Informational text under highlighted toots and polls, for image + * attachment names, in link embeds, and for the load-more text buttons */ +.detailed-status__meta, +.poll__footer, +.poll__link, +.attachment-list__list a, +.status-card, +.load-more { + color: #b38bdb !important; +} + +/* Reply box: CR 11.70 (AAA) against black text, + CR 4.71 (AA) against hashtags and @s */ .reply-indicator { - a { - color: var(--fbc-light-gray) } + color: #F0F0F4; } -/* OCR image description button */ +/* Usernames: CR 15.55 (AAA) against base */ +.account__display-name strong, .status__display-name strong { + color: #fff !important; +} + +/* 'grey' text: CR 4.6 (AA) against base */ +$ui-base-lighter-color: #a87ea8; +/* Account name for boost labels */ +.status__prepend, +.status__prepend .status__display-name strong { + color: $ui-base-lighter-color; +} + +/* Border between toots in timelines: CR 1.87 against base + * (Not a text element, so no WCAG score) */ +.status { + border-bottom-color: #524486; +} + +/* Icons: CR 4.60 against base, + * CR 3.88 (Fail) against highlighted toot */ +.icon-button { + color: #b576b4; +} + +/* CW labels: 5.35 (AA) against button #885b8c */ +.status__content__spoiler-link { + color: #fff; +} +/* Image CW overlay buttons: CR 5.74 (AA) against white text */ +.spoiler-button__overlay__label { + background: rgba(0,0,0,.6); +} + +/* Username of user, shown above toot box: re-use highlight text color + * CR 5.17 (AA) against left panel background */ +.navigation-bar strong { + color: $ui-primary-color !important; +} +/* Menu button above toot box: CR 8.93 (AAA) against left panel background */ +.navigation-bar .icon-button { + color: #fff; +} + +/* Toot box buttons: CR 4.61 (AA) against medium gray + * (unknown variable, components.scss) +.compose-form__buttons-wrapper { background: #ebebeb; } +*/ +.icon-button.inverted, +.text-icon-button, +.character-counter { + color: #88588c; +} + + +/* Hashtags and @s: CR 7.25 (AAA) against base, + * Overridden (would be CR 1.89 (Fail)) in reply box + * Not used for account view */ +$ui-secondary-color: #d8a2ba; + +/* Hashtags and @s in reply box: CR 4.71 (AA) */ +.reply-indicator__content a { + color: #885b8c; +} + +/* Account field labels: CR 10.09 (AAA) against background #2a2342; */ +.account__header__fields dt { + color: #e8cde6 !important; +} + +/* Winning poll option: CR 5.77 against base + * (not a text element, but would be AA) */ +$ui-highlight-color: #CC7AFF; + + +/* image description OCR button: CR 4.68 (AA) */ .link-button { - color: #00446c; - text-decoration: underline; + color: #00446c; + text-decoration: underline; } @import 'application'; diff --git a/app/javascript/styles/meemu-purple-contrast-patch.css b/app/javascript/styles/meemu-purple-contrast-patch.css index a537418..d43683e 100644 --- a/app/javascript/styles/meemu-purple-contrast-patch.css +++ b/app/javascript/styles/meemu-purple-contrast-patch.css @@ -1,52 +1,48 @@ /* Increase contrast */ -/* meemu-purple-221234c0.chunk.css | https://queer.party/packs/css/meemu-purple-221234c0.chunk.css */ .column > .scrollable { /* background: #322a4f; */ background: #261f3f; } -.status__relative-time { - /* color: #885b8c; */ - color: #a87ea8; -} - -.status__display-name { - /* color: #885b8c; */ - color: #a87ea8; +.navigation-bar strong { + color: #9bcbed !important; } .status { - /* border-bottom: 1px solid #43386a; */ - border-bottom: 1px solid #524486; + /* border-bottom-color: #43386a; */ + border-bottom-color: #524486; } +.status__relative-time, +.status__display-name, .muted .status__content, .muted .status__content a, .muted .status__content p, -.muted .status__display-name strong { - color: #a87ea8; -} - -.muted .poll { +.muted .status__display-name strong, +.muted .poll, +.status__prepend, +.status__prepend .status__display-name strong { /* color: #885b8c; */ color: #a87ea8; } -.reply-indicator__content a, .status__content a { -color: #d8a2ba; + +/* hashtags and @s */ +.status__content a { + color: #d8a2ba; } -.detailed-status { -background: #332a54; + +/* hashtags and @s in reply box */ +.reply-indicator__content a { + color: #885b8c; } + +.detailed-status, .detailed-status__action-bar { -background: #332a54; + background: #332a54; } - -/* meemu-purple-652b2e02.chunk.css | https://queer.party/packs/css/meemu-purple-652b2e02.chunk.css */ - .reply-indicator { - /* background: var\(--fbc-grey-20; */ - background: var(--fbc-light-gray); + background: #f0f0f4; } .link-button { @@ -54,6 +50,47 @@ background: #332a54; text-decoration: underline; } +.icon-button { + color: #b576b4; +} + +.navigation-bar .icon-button { + color: #fff; +} + +.icon-button.inverted, +.text-icon-button, +.character-counter { + color: #88588c; +} + +.account__header__fields dt { + /* color: #ba8d98; */ + color: #e8cde6 !important; +} + +.detailed-status__meta, +.poll__footer, +.poll__link, +.attachment-list__list a, +.status-card, +.load-more { + /* color: #885b8c; */ + color: #b38bdb; +} + +.button, +.button .logo-button { + /* background: #c870ff */ + background: #c363ff !important; +} + +.status__content__spoiler-link { + color: #fff; +} +.spoiler-button__overlay__label { + background: rgba(0,0,0,.6); +} @media screen and (min-width: 631px) { .column, From 3470cf2a78204abceca917fb6506c6d659cc4139 Mon Sep 17 00:00:00 2001 From: killerbee Date: Thu, 15 Dec 2022 08:22:38 -0800 Subject: [PATCH 6/7] Improved readability of vote button --- app/javascript/styles/meemu-default.scss | 9 +++++++++ .../styles/meemu-purple-contrast-patch.css | 17 ++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index 962494a..e745a72 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -24,6 +24,15 @@ $ui-base-color: $classic-base-color; } */ +/* Vote button: CR 3.21 (AA for UI) */ +.button .button-secondary { + color: #fff; +} +/* Deactivated vote button: CR 5.04 (AA) */ +.button .button-secondary :deactivated { + opacity: 0.7; +} + /* Account view background: CR 11.84 (AAA) against white text * (Unknown variable, components.scss): .account__header { diff --git a/app/javascript/styles/meemu-purple-contrast-patch.css b/app/javascript/styles/meemu-purple-contrast-patch.css index d43683e..897157e 100644 --- a/app/javascript/styles/meemu-purple-contrast-patch.css +++ b/app/javascript/styles/meemu-purple-contrast-patch.css @@ -58,7 +58,7 @@ color: #fff; } -.icon-button.inverted, +.icon-button .inverted, .text-icon-button, .character-counter { color: #88588c; @@ -82,14 +82,25 @@ .button, .button .logo-button { /* background: #c870ff */ - background: #c363ff !important; + background: #c363ff !important; +} + +.button .button-secondary { + /* color: #9bcbed; */ + color: #fff; +} + +.button .button-secondary:disabled { + /* opacity: .5; */ + opacity: .7; } .status__content__spoiler-link { color: #fff; } + .spoiler-button__overlay__label { - background: rgba(0,0,0,.6); + background: rgba(0, 0, 0, .6); } @media screen and (min-width: 631px) { From d251570d942cccf57fbbe56519f2de17b2bb4315 Mon Sep 17 00:00:00 2001 From: killerbee Date: Tue, 7 Feb 2023 20:26:51 -0800 Subject: [PATCH 7/7] Fix domain blocks so that they are even just basically functional --- app/javascript/styles/meemu-default.scss | 7 +++++++ app/javascript/styles/meemu-purple-contrast-patch.css | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss index e745a72..b2f66e8 100644 --- a/app/javascript/styles/meemu-default.scss +++ b/app/javascript/styles/meemu-default.scss @@ -157,4 +157,11 @@ $ui-highlight-color: #CC7AFF; text-decoration: underline; } +/* Fix domain blocks so that they are even just basically functional */ +.about__domain-blocks__domain h6, +.about__domain-blocks__domain p { + white-space: unset; + overflow: initial; +} + @import 'application'; diff --git a/app/javascript/styles/meemu-purple-contrast-patch.css b/app/javascript/styles/meemu-purple-contrast-patch.css index 897157e..f969677 100644 --- a/app/javascript/styles/meemu-purple-contrast-patch.css +++ b/app/javascript/styles/meemu-purple-contrast-patch.css @@ -110,3 +110,10 @@ background: #1c172d; } } + +/* Fix domain blocks so that they are even just basically functional */ +.about__domain-blocks__domain h6, +.about__domain-blocks__domain p { + white-space: unset; + overflow: initial; +}