From 239ca6d951720125893d2ca4d6f87d6d0bfe89ae Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 13 Feb 2018 15:14:52 +0000 Subject: [PATCH 1/4] Remove unused colour definitions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit None of these defined ‘applied’ colours are actually being used anywhere, so let’s remove them. The panel colour was used by the previous / next component which has been temporarily removed, but it would probably make more sense for that component to reference $govuk-grey-4 directly anyway. --- .../scss/settings/_colours-applied.scss | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/src/globals/scss/settings/_colours-applied.scss b/src/globals/scss/settings/_colours-applied.scss index b8ad0ba38f..5cae3e8975 100644 --- a/src/globals/scss/settings/_colours-applied.scss +++ b/src/globals/scss/settings/_colours-applied.scss @@ -11,27 +11,4 @@ $govuk-text-colour: $govuk-black; // Standard text colour $govuk-print-text-colour: #000000; // Text colour when printing $govuk-secondary-text-colour: $govuk-grey-1; // Section headers, help text etc. $govuk-border-colour: $govuk-grey-2; // Borders, seperators, rules, keylines etc. -$govuk-panel-colour: $govuk-grey-3; // Related links panel, page footer etc. -$govuk-canvas-colour: $govuk-grey-4; // Page background -$govuk-highlight-colour: $govuk-grey-4; // Table stripes etc. -$govuk-page-colour: $govuk-white; // The page -$govuk-discovery-colour: $govuk-fuschia; // Discovery badges and banners -$govuk-alpha-colour: $govuk-pink; // Alpha badges and banners -$govuk-beta-colour: $govuk-orange; // Beta badges and banners -$govuk-live-colour: $govuk-grass-green; // Live badges and banners $govuk-error-colour: $govuk-red; // Error text and border colour -$govuk-error-background: #fef7f7; // Error background colour - -// https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/styleguide/_colours.scss#L3 -// GOV.UK template colours - -$govuk-proposition-border: #2e3133; -// Based on GOV.UK brand blue but slightly lighter so it hits contrast on the -// black header bar when used as copy colour. -$govuk-proposition-active-nav: #1d8feb; - -$govuk-footer-background: $govuk-grey-3; -$govuk-footer-border-top: #a1acb2; -$govuk-footer-link: #454a4c; -$govuk-footer-link-hover: #171819; -$govuk-footer-text: $govuk-footer-link; From b44f146f4b0bc9e662029db7a9eb30e436088982 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 13 Feb 2018 15:28:40 +0000 Subject: [PATCH 2/4] =?UTF-8?q?Restructure=20=E2=80=98applied=E2=80=99=20c?= =?UTF-8?q?olour=20settings=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Better structure and document the applied colour settings file to make it clearer what each thing does. --- .../scss/settings/_colours-applied.scss | 51 +++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/src/globals/scss/settings/_colours-applied.scss b/src/globals/scss/settings/_colours-applied.scss index 5cae3e8975..b991bd5346 100644 --- a/src/globals/scss/settings/_colours-applied.scss +++ b/src/globals/scss/settings/_colours-applied.scss @@ -1,14 +1,47 @@ -// Semantic colour names +// Text colour + +$govuk-text-colour: $govuk-black; + +// Text colour for print media +// +// Use 'true black' to avoid printers using colour ink to print body text + +$govuk-print-text-colour: #000000; + +// Secondary text colour +// +// Used for 'muted' text, help text, etc. + +$govuk-secondary-text-colour: $govuk-grey-1; + +// Links + $govuk-link-colour: $govuk-blue; -$govuk-link-active-colour: $govuk-light-blue; -$govuk-link-hover-colour: $govuk-light-blue; $govuk-link-visited-colour: #4c2c92; +$govuk-link-hover-colour: $govuk-light-blue; +$govuk-link-active-colour: $govuk-light-blue; + +// Focus colour +// +// Used for outline (and background, where appropriate) when interactive +// elements (links, form controls) have keyboard focus. + +$govuk-focus-colour: $govuk-yellow; + +// Error colour +// +// Used to highlight error messages and form controls in an error state + +$govuk-error-colour: $govuk-red; + +// Border colour +// +// Used for borders, separators, rules, keylines etc. + +$govuk-border-colour: $govuk-grey-2; + +// Buttons + $govuk-button-colour: #00823b; $govuk-button-hover-colour: darken($govuk-button-colour, 5%); $govuk-button-colour-darken-15: darken($govuk-button-colour, 15%); -$govuk-focus-colour: $govuk-yellow; -$govuk-text-colour: $govuk-black; // Standard text colour -$govuk-print-text-colour: #000000; // Text colour when printing -$govuk-secondary-text-colour: $govuk-grey-1; // Section headers, help text etc. -$govuk-border-colour: $govuk-grey-2; // Borders, seperators, rules, keylines etc. -$govuk-error-colour: $govuk-red; // Error text and border colour From 6448a42a0001955fa150cb45a83e62260bf1bbea Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 13 Feb 2018 15:30:04 +0000 Subject: [PATCH 3/4] Rename govuk-button-colour-darken-15 Rename govuk-button-colour-darken-15 to govuk-button-shadow-colour to better communicate how it is used, and decouple the name from the value. Currently to change the button shadow colour we would also have to change the name of the variable. --- src/components/button/_button.scss | 10 +++++----- src/globals/scss/settings/_colours-applied.scss | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 98d41dd0d6..c4602012dd 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -28,7 +28,7 @@ outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template background-color: $govuk-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-button-colour-darken-15; // s0 + box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 font-family: $govuk-font-stack; text-align: center; text-decoration: none; @@ -132,9 +132,9 @@ &:active { top: 0; - box-shadow: 0 $button-shadow-size 0 $govuk-button-colour-darken-15; // s0 + box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 @include ie-lte(8) { - border-bottom: $button-shadow-size solid $govuk-button-colour-darken-15; // s0 + border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0 } } } @@ -165,9 +165,9 @@ background-repeat: no-repeat; background-position: 100% 50%; - box-shadow: 0 $button-shadow-size 0 $govuk-button-colour-darken-15; + box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; @include ie-lte(8) { - border-bottom: $button-shadow-size solid $govuk-button-colour-darken-15; + border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; } } diff --git a/src/globals/scss/settings/_colours-applied.scss b/src/globals/scss/settings/_colours-applied.scss index b991bd5346..9ea5aaab9d 100644 --- a/src/globals/scss/settings/_colours-applied.scss +++ b/src/globals/scss/settings/_colours-applied.scss @@ -44,4 +44,4 @@ $govuk-border-colour: $govuk-grey-2; $govuk-button-colour: #00823b; $govuk-button-hover-colour: darken($govuk-button-colour, 5%); -$govuk-button-colour-darken-15: darken($govuk-button-colour, 15%); +$govuk-button-shadow-colour: darken($govuk-button-colour, 15%); From 3415f1c7f20cb7d16c02f5cfe11ef4cf627934fe Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 15 Feb 2018 10:44:02 +0000 Subject: [PATCH 4/4] Document colour removals / rename in changelog --- CHANGELOG.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92d82ccee2..963a11b689 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,27 @@ Breaking changes: - Remove Cookie-banner and Previous-next components (PR [#488](https://github.com/alphagov/govuk-frontend/pull/488), PR [#523](https://github.com/alphagov/govuk-frontend/pull/523)) +- Remove unused colours from the 'applied' colour palette: + (PR [#525](https://github.com/alphagov/govuk-frontend/pull/525)) + - `$govuk-panel-colour` + - `$govuk-canvas-colour` + - `$govuk-highlight-colour` + - `$govuk-page-colour` + - `$govuk-discovery-colour` + - `$govuk-alpha-colour` + - `$govuk-beta-colour` + - `$govuk-live-colour` + - `$govuk-error-background` + - `$govuk-proposition-border` + - `$govuk-proposition-active-nav` + - `$govuk-footer-background` + - `$govuk-footer-border-top` + - `$govuk-footer-link` + - `$govuk-footer-link-hover` + - `$govuk-footer-text` +- Rename `$govuk-button-colour-darken-15` to `$govuk-button-shadow-colour` to + avoid tying it to a particular colour. + (PR [#525](https://github.com/alphagov/govuk-frontend/pull/525)) New features: