diff --git a/public/sass/vendor/prism.scss b/public/sass/vendor/prism.scss index 6b28b508e..06e11a264 100644 --- a/public/sass/vendor/prism.scss +++ b/public/sass/vendor/prism.scss @@ -1,42 +1,59 @@ + // 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; - text-shadow: 0 1px white; + 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; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + 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, +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; } @@ -48,8 +65,9 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { } } -/* Code blocks */ +// Code blocks pre[class*="language-"] { + border: 1px solid $grey-2; padding: 1em; margin: 0 0 30px 0; overflow: auto; @@ -57,78 +75,81 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; + background: $code-background; } -/* Inline code */ +// Inline code :not(pre) > code[class*="language-"] { padding: .1em; 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.string, +.token.variable { + color: $code-blue; } -.token.regex, -.token.important, -.token.variable { - color: #e90; +// 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 { font-weight: bold; } + .token.italic { font-style: italic; }