From be266473af47c1e9478df513dd00cf786afd10ec Mon Sep 17 00:00:00 2001 From: killerbee Date: Wed, 14 Dec 2022 18:18:16 -0800 Subject: [PATCH] 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,