Updated code block styles

public/resources/css/_options.scss

@@ -50,6 +50,7 @@ $cactus: #8BC34A;
 
 // YELLOW
 $sunshine: #FFF59D;
+$olive: #9E9D24;
 
 // ORANGE
 $sand: #FFF8E1;
@@ -60,6 +61,7 @@ $peach: #ffebee;
 $squid: #EF3872;
 $cardinal: #E23237;
 $ruby: #B52E31;
+$pink: #D43669;
 
 // BLUE COLORS
 $light: #E3F2FD;
@@ -78,9 +80,14 @@ $silver: #36474F;
 $platinum: #445A64;
 $metal: #536E7A;
 $tin: #8FA4AE;
+$darkgrey: #5C707A;
+$bismark: #90A4AE;
+$grey: #B0BEC5;
 
 // LIGHT GRAY COLORS
 $cloud: #AFBEC5;
 $fog: #CFD8DC;
 $mist: #ECEFF1;
-$snow: #FFFFFF;
+$snow: #FFFFFF;
+$heather: #546E7A;
+$lightgrey: #F5F6F7;

public/resources/css/base/_type.scss

@@ -15,10 +15,10 @@ a {
 }
 
 code {
-  background: $mist;
+  background: $lightgrey;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $metal;
+  color: $darkgrey;
   padding: 0px 4px;
   font-size: 90%;
 }
@@ -203,4 +203,4 @@ table td {
   > div:last-child > .card {
     margin-right: 0;
   }
-}
+}

public/resources/css/module/_code-box.scss

@@ -1,33 +1,34 @@
 .code-box {
   border-radius: 4px;
-  background: $steel;
-  box-shadow: 0px 2px 5px rgba($coal, .3);
+  background: $lightgrey;
+  // box-shadow: 0px 2px 5px rgba($coal, .3);
   margin-bottom: $unit * 2;
 
   header {
-    background: darken($steel, 5%);
+    background: $fog;
     color: $snow;
-    padding: $unit;
+    padding: $unit $unit 0px $unit;
     border-radius: 4px 4px 0px 0px;
   }
 
   nav {
     button {
-      line-height: $unit * 3;
-      height: $unit * 3;
+      line-height: $unit * 3.5;
+      height: $unit * 3.5;
       padding: 0px ($unit * 3);
       margin-right: $unit;
       font-size: 13px;
-      background: lighten($steel, 3%);
-      color: $tin;
-      font-weight: 500;
+      background: $grey;
+      color: $snow;
+      border-radius: 4px 4px 0px 0px;
+      // font-weight: 500;
       text-transform: none;
 
       &.is-selected,
       &.selected
        {
-        background: $blueberry;
-        color: $snow;
+        background: $lightgrey;
+        color: $darkgrey;
       }
     }
   }
@@ -36,4 +37,4 @@
     box-shadow: none;
     margin: 0px;
   }
-}
+}

public/resources/css/module/_code.scss

@@ -23,19 +23,19 @@
 */
 
 .prettyprint {
-  background: $steel;
+  background: $lightgrey;
   font-family: $mono-font;
-  color: $snow;
+  color: $darkgrey;
   width: auto;
   overflow: auto;
   position: relative;
   padding: 0px;
   font-size: 15px;
-  font-weight: 600;
+  // font-weight: 600;
   line-height: 24px;
   margin-bottom: $unit * 3;
-  border-radius: 4px;
-  box-shadow: 0px 2px 5px rgba($coal, .3);
+  // box-shadow: 0px 2px 5px rgba($coal, .3);
+  border-radius: 0px 0px 4px 4px;
   padding: ($unit * 2) ($unit * 4);
 
   &.linenums,
@@ -55,16 +55,15 @@
   }
 
   ol {
-    background: $steel;
+    background: $lightgrey;
     padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
     margin: 0px;
     overflow: auto;
-    border-radius: 3px;
-    font-weight: 600;
+    // font-weight: 600;
     font-size: 15px;
 
     li {
-      color: $metal;
+      color: $bismark;
       background: none;
       margin-bottom: 5px;
       line-height: normal;
@@ -90,47 +89,47 @@
 
   .pnk,
   .blk {
-    border-radius: 2px;
+    border-radius: 4px;
     padding: 2px 4px;
   }
   .pnk {
-    background: $squid;
-    color: $snow;
+    background: $lightgrey;
+    color: $darkgrey;
   }
   .blk {
     background: $coal;
   }
   .otl {
-    outline: 1px solid rgba(snow, .56);
+    outline: 1px solid rgba(darkgrey, .56);
   }
   .kwd {
-    color: $mist;
+    color: $pink;
   }
   .typ,
   .tag {
-    color: $squid;
+    color: $pink;
   }
   .str,
   .atv {
-    color: darken($sunshine, 10%);
+    color: $olive;
   }
   .atn {
-    color: darken($cactus, 10%);
+    color: $olive;
   }
   .com {
-    color: $tin;
+    color: $olive;
   }
   .lit {
-    color: darken($sunshine, 10%);
+    color: $olive;
   }
   .pun {
-    color: $snow;
+    color: $bismark;
   }
   .pln {
-    color: $snow;
+    color: $darkgrey;
   }
   .dec {
-    color: $grape;
+    color: $olive;
   }
 
 
@@ -140,42 +139,42 @@
   */
 
   @media print {
-    background: $snow;
+    background: $lightgrey;
     border: none;
     box-shadow: none;
 
     ol {
-      background: $snow;
+      background: $lightgrey;
     }
 
     .kwd {
-      color: $steel;
+      color: $pink;
     }
     .typ,
     .tag {
-      color: $ruby;
+      color: $pink;
     }
     .str,
     .atv {
-      color: darken($sunshine, 10%);
+      color: $olive;
     }
     .atn {
-      color: darken($cactus, 10%);
+      color: $olive;
     }
     .com {
-      color: $cloud;
+      color: $olive;
     }
     .lit {
-      color: darken($sunshine, 10%);
+      color: $olive;
     }
     .pun {
-      color: $coal;
+      color: $bismark;
     }
     .pln {
-      color: $coal;
+      color: $darkgrey;
     }
     .dec {
-      color: darken($grape, 5%);
+      color: $olive;
     }
   }
-}
+}

public/resources/css/module/_example-title.scss

@@ -1,12 +1,13 @@
 .example-title {
   @extend .alert;
 
-  color: $snow;
+  color: $heather;
   padding:  0 ($unit * 2);
   font-size: 14px;
-  font-weight: 500;
-  border-color: $blueberry;
-  background: $blueberry;
+  // font-weight: 500;
+  border-color: $fog;
+  background: $fog;
+  box-shadow: none;
   // temporary hack to remove space between example title and code-example
   margin-bottom: -18px;
-}
+}