prism and dark theme

app/styles/app-dark.scss

@@ -1,10 +1,9 @@
+@import "lacsso";
+
 @import "app/styles/base/colors";
 @import "app/styles/helpers/mixins";
 @import "app/styles/helpers/functions";
 @import "vendor/icons/variables";
-@import "vendor/bootswatch-cosmo/_variables";
-
-@import "lacsso";
 
 //******************************************
 // THeme
@@ -14,14 +13,15 @@
 //******************************************
 @import "app/styles/themes/dark";
 
+
 //******************************************
 // Base
 //
 // Includes boilerplate for the project. Inlcude things like typography, Normalize, etc.
 //******************************************
+@import "app/styles/base/rancher";
 @import "app/styles/base/fonts";
-@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
+
-@import "vendor/bootswatch-cosmo/_bootswatch";
 
 
 //******************************************
@@ -33,8 +33,7 @@
 @import "app/styles/vendors/copy-to-clipboard";
 @import "app/styles/vendors/prism-theme";
 @import "ember-power-select";
-@import "app/styles/vendors/power-select";
+// @import "app/styles/vendors/power-select";
-@import "app/styles/vendors/bootstrap-tweak";
 
 //******************************************
 // Layout
@@ -97,7 +96,6 @@
 @import "app/styles/layout/sm-screen";
 @import "app/styles/layout/xs-screen";
 
-
 // Lacsso Dark Overrides until we clean it up a bit
 .theme-ui-dark {
   .lacsso {
@@ -118,5 +116,4 @@
   .icon-square {
     border: 1px solid rgba(white, .4) !important;
   }
-
+}
-}

app/styles/base/_fonts.scss

@@ -30,6 +30,7 @@ $text-font-stack: "Lato", "Helvetica Neue Light", "Helvetica Neue", "Helvetica",
 $base-font-size: 15px;
 
 body {
+  color: $text-color;
   font-family: $text-font-stack;
   font-size: $base-font-size;
   line-height: auto;

app/styles/base/_rancher.scss

@@ -52,9 +52,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 //btn
+.btn {
+  font-weight: 300;
+}
+
 .btn-group {
   .btn {
-    background-color: $btn-primary-color;
+    background-color: $btn-default-bg;
     border:$btn-default-border solid 1px;
     margin-left: -5px;
     border-radius: 0;
@@ -107,4 +111,20 @@ table{
       }
     }
   }
+}
+
+//inputs
+.searchable {
+  position: relative;
+
+  .icon-search {
+    position: absolute;
+    top: 20px;
+    left: 10px;
+
+  }
+
+  input {
+    padding: 15px 0 15px 30px;
+  }
 }

app/styles/components/_pod.scss

@@ -40,7 +40,7 @@ $subpod-detail   : $table-bg-accent;
     vertical-align             : top;
     display                    : inline-block;
     text-transform             : uppercase;
-    line-height                : 1;
+    line-height                : 1.364em;
 
     SPAN {
       position : relative;
@@ -131,6 +131,7 @@ $subpod-detail   : $table-bg-accent;
 
     H6 {
       margin: 3px 0;
+      font-size: 13px;
     }
 
     .icon-chevron-down {

app/styles/layout/_header.scss

@@ -175,6 +175,7 @@ HEADER {
       padding-top: 0;
       border-radius: 2px;
       right: 0;
+      left: -170px;
 
       & .theme-toggle, .dropdown-header {
         padding: 5px 20px;

app/styles/themes/_dark.scss

@@ -244,7 +244,7 @@ $pagination-disabled-border          : #ddd;
 
 $pager-bg                            : $pagination-bg;
 $pager-border                        : $pagination-border;
-$pager-border-radius                 : $border-radius-base;
+$pager-border-radius                 : 2px;
 
 $pager-hover-bg                      : $pagination-hover-bg;
 
@@ -369,7 +369,7 @@ $progress-bg                         : $lightGray;
 //** Progress bar text color
 $progress-bar-color                  : #fff;
 //** Variable for setting rounded corners on progress bar.
-$progress-border-radius              : $border-radius-base;
+$progress-border-radius              : 2px;
 
 //** Default progress bar color
 $progress-bar-bg                     : $brand-primary;
@@ -391,7 +391,7 @@ $list-group-bg                       : #fff;
 //** `.list-group-item` border color
 $list-group-border                   : #ddd;
 //** List group border radius
-$list-group-border-radius            : $border-radius-base;
+$list-group-border-radius            : 2px;
 
 //** Background color of single list items on hover
 $list-group-hover-bg                 : #f5f5f5;
@@ -516,7 +516,7 @@ $headings-small-color                : $gray;
 //** Blockquote small color
 $blockquote-small-color              : $gray;
 //** Blockquote font size
-$blockquote-font-size                : ($font-size-base * 1.25);
+$blockquote-font-size                : ($base-font-size * 1.25);
 //** Blockquote border color
 $blockquote-border-color             : $gray-lighter;
 //** Page header border color
@@ -524,7 +524,7 @@ $blockquote-border-color             : $gray-lighter;
 $page-header-border-color            : $darkestGrayDark;
 
 //** Width of horizontal description list titles
-$dl-horizontal-offset                : $component-offset-horizontal;
+$dl-horizontal-offset                : 10px;
 //** Horizontal line color.
 $hr-border                           : $gray-lighter;
 

app/styles/vendors/_prism-theme.scss

@@ -6,7 +6,7 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-  color: #236f2b;
+  color: $greenTwo;
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   direction: ltr;
   text-align: left;
@@ -35,7 +35,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #393d48;
+  background: $secondary;
 }
 
 /* Inline code */
@@ -48,11 +48,11 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+  color: $midGray;
 }
 
 .token.punctuation {
-  color: #f8f8f2;
+  color: $lightGrayTwo;
 }
 
 .namespace {
@@ -64,12 +64,12 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #f92672;
+  color: $redTwo;
 }
 
 .token.boolean,
 .token.number {
-  color: #ae81ff;
+  color: $yellowTwo;
 }
 
 .token.selector,
@@ -97,12 +97,12 @@ pre[class*="language-"] {
 }
 
 .token.keyword {
-  color: #66d9ef;
+  color: $lightTeal;
 }
 
 .token.regex,
 .token.important {
-  color: #fd971f;
+  color: $orange;
 }
 
 .token.important,