From 6dcd4bcb173901de28a889912c511ab2607d4ddc Mon Sep 17 00:00:00 2001 From: Edward Horsford Date: Wed, 26 Oct 2016 16:29:59 +0100 Subject: [PATCH 1/3] Update colours to improve contrast and readability --- public/sass/vendor/prism.scss | 83 ++++++++++++++++++++--------------- 1 file changed, 47 insertions(+), 36 deletions(-) diff --git a/public/sass/vendor/prism.scss b/public/sass/vendor/prism.scss index 6b28b508e..d1cd40119 100644 --- a/public/sass/vendor/prism.scss +++ b/public/sass/vendor/prism.scss @@ -1,32 +1,46 @@ + // http://prismjs.com/download.html?themes=prism&languages=markup+css+scss // -// prism.js default theme for JavaScript, CSS and HTML +// prism.js theme by Edward Horsford for GOV.UK +// based on prism default theme // Based on dabblet (http://dabblet.com) -// @author Lea Verou -// +@import "colours"; + +// Use GOV.UK colour palette where possible, or tints thereof to meet contrast rules +$code-text: $text-colour; +$code-grey: darken($secondary-text-colour, 2%); // grey #6a7276 4.62:1 +$code-background: scale-color($highlight-colour, $lightness:50%); // light grey +$code-light-red: darken($mellow-red, 2%); +$code-dark-red: darken($red, 7%); +$code-blue: $govuk-blue; +$code-green: #1E8400; code[class*="language-"], pre[class*="language-"] { - color: black; + color: $code-text; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; direction: ltr; text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; line-height: 1.5; - -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; - -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; + background-color: $code-background; // light grey + word-spacing: normal; + word-break: normal; + // Wrap lines of code rather than overflowing + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, @@ -50,6 +64,7 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { /* Code blocks */ pre[class*="language-"] { + border: 1px solid $grey-2; padding: 1em; margin: 0 0 30px 0; overflow: auto; @@ -57,7 +72,7 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; + background: $code-background; } /* Inline code */ @@ -66,65 +81,61 @@ pre[class*="language-"] { border-radius: .3em; } +// Comments .token.comment, .token.prolog, .token.doctype, -.token.cdata { - color: slategray; -} - +.token.cdata, .token.punctuation { - color: #999; + color: $code-grey; } .namespace { opacity: .7; } -.token.property, +// Tags / elements .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, -.token.deleted { - color: #905; +.token.deleted, +.token.selector, +.token.keyword { + color: $code-dark-red; } -.token.selector, +// Attribute names .token.attr-name, -.token.string, .token.char, .token.builtin, -.token.inserted { - color: #690; +.token.inserted, +.token.function, +.token.property { + color: $code-green; } +.token.regex, +.token.important, +.token.atrule, +.language-scss .token.keyword, .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); + color: $code-light-red; } -.token.atrule, +// Attribute values .token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function { - color: #DD4A68; -} - -.token.regex, -.token.important, +.token.string, .token.variable { - color: #e90; + color: $code-blue; } +// Other styling .token.important, .token.bold { font-weight: bold; From abef2fc981cd98429c5d417cb5c2fb568c2b0590 Mon Sep 17 00:00:00 2001 From: Edward Horsford Date: Wed, 26 Oct 2016 17:52:16 +0100 Subject: [PATCH 2/3] Improve css/scss colouring of numbers --- public/sass/vendor/prism.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/sass/vendor/prism.scss b/public/sass/vendor/prism.scss index d1cd40119..0cdb6a7cb 100644 --- a/public/sass/vendor/prism.scss +++ b/public/sass/vendor/prism.scss @@ -32,7 +32,6 @@ pre[class*="language-"] { -moz-hyphens: none; -ms-hyphens: none; hyphens: none; - background-color: $code-background; // light grey word-spacing: normal; word-break: normal; // Wrap lines of code rather than overflowing @@ -135,6 +134,11 @@ pre[class*="language-"] { color: $code-blue; } +// Color numbers the same as un-detected text for css - so 'core-16' and similar is coloured correctly. +.language-scss .token.number, .language-css .token.number { + color: $code-text; +} + // Other styling .token.important, .token.bold { From 5606514c57ddfcc6352a3f9724f1c86e237eddef Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Thu, 27 Oct 2016 15:53:35 +0100 Subject: [PATCH 3/3] Lint prism.scss - Use variables where they are defined by the govuk_frontend_toolkit - Use Sass comments - Each selector in a comma sequence should be on its own single line --- public/sass/vendor/prism.scss | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/public/sass/vendor/prism.scss b/public/sass/vendor/prism.scss index 0cdb6a7cb..06e11a264 100644 --- a/public/sass/vendor/prism.scss +++ b/public/sass/vendor/prism.scss @@ -19,7 +19,7 @@ $code-green: #1E8400; code[class*="language-"], pre[class*="language-"] { color: $code-text; - text-shadow: 0 1px white; + text-shadow: 0 1px $white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; direction: ltr; @@ -35,21 +35,25 @@ pre[class*="language-"] { word-spacing: normal; word-break: normal; // Wrap lines of code rather than overflowing - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ + white-space: pre-wrap; // css-3 + white-space: -moz-pre-wrap; // Mozilla, since 1999 + white-space: -pre-wrap; // Opera 4-6 + white-space: -o-pre-wrap; // Opera 7 + word-wrap: break-word; // Internet Explorer 5.5+ } -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } @@ -61,7 +65,7 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { } } -/* Code blocks */ +// Code blocks pre[class*="language-"] { border: 1px solid $grey-2; padding: 1em; @@ -74,7 +78,7 @@ pre[class*="language-"] { background: $code-background; } -/* Inline code */ +// Inline code :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; @@ -135,7 +139,8 @@ pre[class*="language-"] { } // Color numbers the same as un-detected text for css - so 'core-16' and similar is coloured correctly. -.language-scss .token.number, .language-css .token.number { +.language-scss .token.number, +.language-css .token.number { color: $code-text; } @@ -144,6 +149,7 @@ pre[class*="language-"] { .token.bold { font-weight: bold; } + .token.italic { font-style: italic; }