From 1bf615b91673a4d1b4a26bda6c2290e684aaf2cb Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 11 Oct 2023 12:42:22 +0100 Subject: [PATCH] Update app icons and favicon (#14) * Update app icons and favicon * Fix linting on colours * Update colour definitions to modern rgb() syntax * Fix hex-to-rgb function * Fix hex-to-rgb function * Remove SCSS debug --- .stylelintrc | 11 +- CHANGELOG.md | 1 + .../assets/images/favicon.ico | Bin 7406 -> 7406 bytes .../assets/images/mask-icon.svg | 22 ++- .../assets/images/mstile-150x150.png | Bin 0 -> 1265 bytes .../images/tna-horizontal-logo-inverted.svg | 51 ------ .../assets/images/tna-horizontal-logo.svg | 51 ------ src/nationalarchives/tools/_colour.scss | 20 +-- src/nationalarchives/variables/_colour.scss | 167 ++++++++++-------- 9 files changed, 129 insertions(+), 194 deletions(-) create mode 100644 src/nationalarchives/assets/images/mstile-150x150.png delete mode 100644 src/nationalarchives/assets/images/tna-horizontal-logo-inverted.svg delete mode 100644 src/nationalarchives/assets/images/tna-horizontal-logo.svg diff --git a/.stylelintrc b/.stylelintrc index 937f6eb3..aeae7a5b 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -17,6 +17,15 @@ "selector-class-pattern": null, "plugin/selector-bem-pattern": { "preset": "bem" - } + }, + "color-function-notation": [ + "modern", + { + "ignore": [ + "with-var-inside" + ] + } + ], + "scss/operator-no-newline-after": null } } diff --git a/CHANGELOG.md b/CHANGELOG.md index b136de08..d73cd566 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `typography.$base-font-size-px` is now `typography.$relative-1rem-px` - `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans - Card heading size defaults to `s` +- Updated app icons and favicon ### Deprecated ### Removed diff --git a/src/nationalarchives/assets/images/favicon.ico b/src/nationalarchives/assets/images/favicon.ico index 8645a6fb7ab5ba84b82437567ef71886ba1ea40c..a0ee9c2b922b2c1808a4cfdc1e93d78a8b4de46b 100644 GIT binary patch literal 7406 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 diff --git a/src/nationalarchives/assets/images/mask-icon.svg b/src/nationalarchives/assets/images/mask-icon.svg index a0e94565..95cb7ae2 100644 --- a/src/nationalarchives/assets/images/mask-icon.svg +++ b/src/nationalarchives/assets/images/mask-icon.svg @@ -1,6 +1,18 @@ - - - - - + + + + + + + + diff --git a/src/nationalarchives/assets/images/mstile-150x150.png b/src/nationalarchives/assets/images/mstile-150x150.png new file mode 100644 index 0000000000000000000000000000000000000000..dce29092bcd859846f3cc1c89e7711ea9a6c673a GIT binary patch literal 1265 zcmeAS@N?(olHy`uVBq!ia0y~yVB`Z~4rZW;e?I4QAjOjI=Cw?A8!v&57$MD7A#%5I4d(fHz#Z1g8A8586rab z5@N#bZLNj*dBTEx;-W&rg1pj_Vx1jr#YF{D5~5lfswv5dndxbn>8Y6+Y4Neq%1ZKX zu1@dYzx(_5@1H+^{{8#+;K6+pBYjD65qDSTj~_oidh{qaJFBF)P)15TFDL85h4ULX zZrHpDNUT41?yQTG!-o$a-oJl;<;rCv1HHzEIw0@&@88lAqRNVLj`p_BPWE=TR`Rma zdb(Q9j`luY9@nm3l@u2~bLOfS`0?W}U%t$n zJIC44&eg@y)!EU_#mUszKwDEiKQG7M*W1O};mMOHU%!5xKW~nQn~Rx=k(h{}qP*;x z)2Hv>zjqH=O_UBxjoZR}`Z*s0- zU|@3gba4!+xb^mKWWG?KM8iX-F6%3OQuOZus;P_o|4+ZQis@>X-CmiZ6N>F1;<(0> zh}if})6}yY%kKVqW0oV+mzQPYY34dr^3C1({~H6?`DNctvpMdgf7sSi8*C2> z(Zgo>WP&rFrP7(gC4VgY%KBTq`lj0-@0`5cX|7%HKN)S6b{WCvFV3Hv%X`(jeBW(9 zy(`V^(_-fIs~ul@@TvB}U*YSw-hTPD?#Gb}y|cG3I(gAAKRu%KCEtAIOKZ4|nyo)R zIT2s=J5y*lls)1Thwd#zXhuWV1|p0gL9?A}qd zBjYK^TVTIEnXtG37RVsm0&Sq;Crpn&`dy`OFK>5js`A{pIVUeJKVP_a)3$e;Y=CCo zmkR#*ZkNu_PhX>DERP-jfA)>MPRYLG6CeMdj4;``FCG@7{P0*tV=R8iu4F9C;1DtQ zA5ccM#5JNMC9x#cD!C{XNHG{07#Zst8t58Wh8S2{85&xdm}?stSQ!|ko+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/nationalarchives/assets/images/tna-horizontal-logo.svg b/src/nationalarchives/assets/images/tna-horizontal-logo.svg deleted file mode 100644 index a61a66d1..00000000 --- a/src/nationalarchives/assets/images/tna-horizontal-logo.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 09929eea..f21e5e77 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -2,8 +2,8 @@ @use "../variables/colour"; @use "../tools/media"; -@function brand-colour($colour) { - @return map.get(colour.$colour-palette-brand, $colour); +@function brand-colour($colour, $opacity: 1) { + @return colour.brand-colour($colour, $opacity); } @mixin colour-css-vars() { @@ -37,22 +37,22 @@ --accent-background-light: #{brand-colour("cream")} !important; --accent-font-base: #{brand-colour("black")} !important; --accent-font-dark: #{brand-colour("black")} !important; - --accent-font-light: #{rgba(brand-colour("black"), 0.7)} !important; - --accent-icon-light: #{rgba(brand-colour("black"), 0.45)} !important; + --accent-font-light: #{brand-colour("black", 0.7)} !important; + --accent-icon-light: #{brand-colour("black", 0.45)} !important; --accent-link: #{brand-colour("black")} !important; --accent-link-visited: #{brand-colour("black")} !important; - --accent-keyline: #{rgba(brand-colour("black"), 0.5)} !important; - --accent-keyline-dark: #{rgba(brand-colour("black"), 0.8)} !important; + --accent-keyline: #{brand-colour("black", 0.5)} !important; + --accent-keyline-dark: #{brand-colour("black", 0.8)} !important; --button-accent-background: #{brand-colour("yellow")} !important; } @else { --accent-font-base: #{brand-colour("white")} !important; --accent-font-dark: #{brand-colour("white")} !important; - --accent-font-light: #{rgba(brand-colour("white"), 0.7)} !important; - --accent-icon-light: #{rgba(brand-colour("white"), 0.45)} !important; + --accent-font-light: #{brand-colour("white", 0.7)} !important; + --accent-icon-light: #{brand-colour("white", 0.45)} !important; --accent-link: #{brand-colour("white")} !important; --accent-link-visited: #{brand-colour("white")} !important; - --accent-keyline: #{rgba(brand-colour("white"), 0.5)} !important; - --accent-keyline-dark: #{rgba(brand-colour("white"), 0.8)} !important; + --accent-keyline: #{brand-colour("white", 0.5)} !important; + --accent-keyline-dark: #{brand-colour("white", 0.8)} !important; @if $colour == "black" { // --accent: #{brand-colour("light-grey")} !important; diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index 2375ae00..0b206826 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -25,8 +25,22 @@ $colour-palette-brand: ( "pastel-blue": #d4e5ef, ); +@function hex-to-rgb($hex, $opacity: 1) { + @if $opacity == 1 { + @return rgb(red($hex) green($hex) blue($hex)); + } @else { + @return rgb(red($hex) green($hex) blue($hex) / #{$opacity}); + } +} + +@function brand-colour($colour, $opacity: 1) { + @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity); +} + $dark-grey: #26262a; -$base-font: #343338; +$base-font: #343338 !default; +$link-colour: #1d70ab !default; +$link-colour-visited: #4c2c92 !default; /* ========================================= @@ -37,45 +51,46 @@ $colour-palette-default: ( "page-background": #f4f4f4, "background-tint": #d8d8d8, "font-base": $base-font, - "font-dark": map.get($colour-palette-brand, "black"), - "font-light": rgba($base-font, 0.7), - "icon-light": rgba($base-font, 0.45), - "link": #1d70ab, - "link-visited": #4c2c92, - "focus-outline": map.get($colour-palette-brand, "blue"), - "keyline": #ccc, + "font-dark": brand-colour("black"), + "font-light": hex-to-rgb($base-font, 0.7), + "icon-light": hex-to-rgb($base-font, 0.45), + "link": $link-colour, + "link-visited": $link-colour-visited, + "focus-outline": brand-colour("blue"), + "keyline": hex-to-rgb($dark-grey, 0.25), "keyline-dark": $dark-grey, - "button-text": map.get($colour-palette-brand, "white"), - "button-background": map.get($colour-palette-brand, "black"), - "button-hover-text": map.get($colour-palette-brand, "black"), - "button-hover-background": map.get($colour-palette-brand, "white"), + "button-text": brand-colour("white"), + "button-background": brand-colour("black"), + "button-hover-text": brand-colour("black"), + "button-hover-background": brand-colour("white"), "contrast-background": #1e1e1e, - "contrast-font-base": map.get($colour-palette-brand, "white"), - "contrast-font-dark": map.get($colour-palette-brand, "white"), - "contrast-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7), - "contrast-icon-light": rgba(map.get($colour-palette-brand, "white"), 0.45), - "contrast-link": map.get($colour-palette-brand, "white"), - "contrast-link-visited": map.get($colour-palette-brand, "white"), - "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5), - "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8), - "contrast-button-text": map.get($colour-palette-brand, "black"), - "contrast-button-background": map.get($colour-palette-brand, "white"), - "contrast-button-hover-text": map.get($colour-palette-brand, "white"), - "contrast-button-hover-background": map.get($colour-palette-brand, "black"), + "contrast-font-base": brand-colour("white"), + "contrast-font-dark": brand-colour("white"), + // "contrast-font-light": brand-colour("white", 0.7), + "contrast-font-light": brand-colour("white", 0.7), + "contrast-icon-light": brand-colour("white", 0.45), + "contrast-link": brand-colour("white"), + "contrast-link-visited": brand-colour("white"), + "contrast-keyline": brand-colour("white", 0.5), + "contrast-keyline-dark": brand-colour("white", 0.8), + "contrast-button-text": brand-colour("black"), + "contrast-button-background": brand-colour("white"), + "contrast-button-hover-text": brand-colour("white"), + "contrast-button-hover-background": brand-colour("black"), "accent": map.get($colour-palette-brand, "light-grey"), "accent-background": #111, "accent-background-light": map.get($colour-palette-brand, "light-grey"), - "accent-font-base": map.get($colour-palette-brand, "white"), - "accent-font-dark": map.get($colour-palette-brand, "white"), - "accent-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7), - "accent-icon-light": rgba(map.get($colour-palette-brand, "white"), 0.45), - "accent-link": map.get($colour-palette-brand, "white"), + "accent-font-base": brand-colour("white"), + "accent-font-dark": brand-colour("white"), + "accent-font-light": brand-colour("white", 0.7), + "accent-icon-light": brand-colour("white", 0.45), + "accent-link": brand-colour("white"), "accent-link-visited": #b9f, - "accent-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5), - "accent-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8), - "button-accent-text": map.get($colour-palette-brand, "black"), - "button-accent-background": map.get($colour-palette-brand, "grey"), -); + "accent-keyline": brand-colour("white", 0.5), + "accent-keyline-dark": brand-colour("white", 0.8), + "button-accent-text": brand-colour("black"), + "button-accent-background": brand-colour("grey"), +) !default; /* ========================================= @@ -87,25 +102,25 @@ $colour-palette-dark: map.merge( ( "page-background": #111, "background-tint": #333, - "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95), - "font-dark": map.get($colour-palette-brand, "white"), - "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5), - "icon-light": rgba(map.get($colour-palette-brand, "white"), 0.35), - "link": map.get($colour-palette-brand, "blue"), + "font-base": brand-colour("white", 0.95), + "font-dark": brand-colour("white"), + "font-light": brand-colour("white", 0.5), + "icon-light": brand-colour("white", 0.35), + "link": brand-colour("blue"), "link-visited": #a8f, - "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25), - "keyline-dark": map.get($colour-palette-brand, "white"), - "button-text": map.get($colour-palette-brand, "black"), - "button-background": map.get($colour-palette-brand, "white"), - "button-hover-text": map.get($colour-palette-brand, "white"), - "button-hover-background": map.get($colour-palette-brand, "black"), + "keyline": brand-colour("white", 0.25), + "keyline-dark": brand-colour("white"), + "button-text": brand-colour("black"), + "button-background": brand-colour("white"), + "button-hover-text": brand-colour("white"), + "button-hover-background": brand-colour("black"), "contrast-background": #1e1e1e, "contrast-link-visited": map.get($colour-palette-default, "contrast-link-visited"), // --accent-background-light is the same as --contrast-background on dark themes - "accent-background-light": map.get($colour-palette-brand, "grey"), + "accent-background-light": brand-colour("grey"), ) -); +) !default; /* ========================================= @@ -115,29 +130,29 @@ LIGHT, HIGH_CONTRAST THEME $colour-palette-high-contrast: map.merge( $colour-palette-default, ( - "page-background": map.get($colour-palette-brand, "white"), - "font-base": map.get($colour-palette-brand, "black"), - "font-light": map.get($colour-palette-brand, "black"), - "icon-light": rgba(map.get($colour-palette-brand, "black"), 0.75), - "link": map.get($colour-palette-brand, "navy"), - "link-visited": map.get($colour-palette-brand, "black"), - "focus-outline": map.get($colour-palette-brand, "orange"), - "keyline": map.get($colour-palette-brand, "black"), - "keyline-dark": map.get($colour-palette-brand, "black"), + "page-background": brand-colour("white"), + "font-base": brand-colour("black"), + "font-light": brand-colour("black"), + "icon-light": brand-colour("black", 0.75), + "link": brand-colour("navy"), + "link-visited": brand-colour("black"), + "focus-outline": brand-colour("orange"), + "keyline": brand-colour("black"), + "keyline-dark": brand-colour("black"), "contrast-background": #f4f4f4, - "contrast-font-base": map.get($colour-palette-brand, "black"), - "contrast-font-dark": map.get($colour-palette-brand, "black"), - "contrast-font-light": map.get($colour-palette-brand, "black"), - "contrast-link": map.get($colour-palette-brand, "navy"), - "contrast-link-visited": map.get($colour-palette-brand, "black"), - "contrast-keyline": map.get($colour-palette-brand, "black"), - "contrast-keyline-dark": map.get($colour-palette-brand, "black"), - "contrast-button-text": map.get($colour-palette-brand, "white"), - "contrast-button-background": map.get($colour-palette-brand, "black"), - "contrast-button-hover-text": map.get($colour-palette-brand, "black"), - "contrast-button-hover-background": map.get($colour-palette-brand, "white"), + "contrast-font-base": brand-colour("black"), + "contrast-font-dark": brand-colour("black"), + "contrast-font-light": brand-colour("black"), + "contrast-link": brand-colour("navy"), + "contrast-link-visited": brand-colour("black"), + "contrast-keyline": brand-colour("black"), + "contrast-keyline-dark": brand-colour("black"), + "contrast-button-text": brand-colour("white"), + "contrast-button-background": brand-colour("black"), + "contrast-button-hover-text": brand-colour("black"), + "contrast-button-hover-background": brand-colour("white"), ) -); +) !default; /* ========================================= @@ -147,13 +162,13 @@ DARK, HIGH_CONTRAST THEME $colour-palette-high-contrast-dark: map.merge( $colour-palette-dark, ( - "page-background": map.get($colour-palette-brand, "black"), - "font-base": map.get($colour-palette-brand, "white"), - "font-light": map.get($colour-palette-brand, "white"), - "icon-light": rgba(map.get($colour-palette-brand, "white"), 0.75), - "link": map.get($colour-palette-brand, "white"), - "link-visited": map.get($colour-palette-brand, "white"), - "keyline": map.get($colour-palette-brand, "white"), + "page-background": brand-colour("black"), + "font-base": brand-colour("white"), + "font-light": brand-colour("white"), + "icon-light": brand-colour("white", 0.75), + "link": brand-colour("white"), + "link-visited": brand-colour("white"), + "keyline": brand-colour("white"), "contrast-background": #111, ) -); +) !default;