Merge pull request #338 from alphagov/update_prism_colours

Update code example colours to improve contrast and readability

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,87 +65,91 @@ 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;
 }
 
 :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;
 }