From 5918f31e3217055ed178b8931d8946cc235f109e Mon Sep 17 00:00:00 2001 From: John Okely Date: Tue, 27 Jun 2017 12:11:30 +0800 Subject: [PATCH 1/2] MDL-58889 boost: Make text and link colours AA compliant We have to choose a colour that is 4.5:1 against white and 3:1 against the text colour. I darkened the link colour somewhat and darkened the text colour --- theme/boost/scss/preset/default.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss index db92ae99121..12eb66f11d5 100644 --- a/theme/boost/scss/preset/default.scss +++ b/theme/boost/scss/preset/default.scss @@ -12,7 +12,7 @@ $gray-light: #818a91 !default; $gray-lighter: #eceeef !default; $gray-lightest: #f7f7f9 !default; -$brand-primary: #00acdf !default; +$brand-primary: #1177d1 !default; $brand-success: #77b300 !default; $brand-warning: #ff8800 !default; $brand-danger: #ff4136 !default; @@ -27,7 +27,7 @@ $border-width: 1px !default; // Body $body-bg: #f4f4f4 !default; -$body-color: #3a3a3a !default; +$body-color: #262626 !default; // Typography $font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif !default; From 2fd7cdbe83cbe267cbd975829334213fc50b1064 Mon Sep 17 00:00:00 2001 From: John Okely Date: Tue, 27 Jun 2017 12:14:58 +0800 Subject: [PATCH 2/2] MDL-58889 boost: Use underline links in footer It's impossible to gain the right colour contrast against a dark footer using the same primary colour that gets 4.5 against white. --- theme/boost/scss/moodle/core.scss | 22 +++++++++++++++++++++- theme/boost/upgrade.txt | 7 +++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 theme/boost/upgrade.txt diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index a48811d197c..e87fa512f5a 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -1,5 +1,10 @@ /* core.less */ +// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class. +// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always +// want white default colour. +$bg-inverse-link-color: #fff !default; + #region-main > .card { overflow-x: auto; overflow-y: visible; @@ -2096,9 +2101,24 @@ ul { } } -$footer-link-color: $brand-primary !default; +// Footer link colour was added to allow the colour of footer links to be changed, +// but really in bootstrap we want the colour of links on .bg-inverse to be changed +// rather than being specific to the footer. This is kept for backwards compatibility. +$footer-link-color: $bg-inverse-link-color !default; #page-footer a { color: $footer-link-color; + text-decoration: underline; + .icon { + color: $footer-link-color; + } +} + +.bg-inverse a { + color: $bg-inverse-link-color; + text-decoration: underline; + .icon { + color: $bg-inverse-link-color; + } } .sitelink { diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt new file mode 100644 index 00000000000..e4f48a8848b --- /dev/null +++ b/theme/boost/upgrade.txt @@ -0,0 +1,7 @@ +This file describes API changes in /theme/boost +information provided here is intended especially for theme designers. + +=== 3.4 === +* For improved accessibility, the footer links for boost have been changed to use $bg-inverse-link-color (defaults to white) and + now have an underline text-decoration. To override the link colour simply set $bg-inverse-link-color in your preset file or + theme scss.