Implement global colors. Add italic font. (#64)

The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added. Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
fleetdm · Nov 24, 2020 · 51cfb07 · 51cfb07
1 parent 6dccabb
commit 51cfb07
Show file tree

Hide file tree

Showing 86 changed files with 486 additions and 526 deletions.
diff --git a/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.eot b/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.eot
diff --git a/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.ttf b/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.ttf
diff --git a/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.woff b/assets/fonts/nunito-sans/Nunito-Sans-Regular-Italic.woff
diff --git a/assets/images/osquery-certificate.svg b/assets/images/osquery-certificate.svg
diff --git a/frontend/components/KolideAce/_styles.scss b/frontend/components/KolideAce/_styles.scss
@@ -1,11 +1,8 @@
 .kolide-ace {
   &__label {
-    font-size: 16px;
-    font-weight: $bold;
-    font-style: normal;
-    font-stretch: normal;
-    letter-spacing: -0.5px;
-    color: $text-dark;
+    font-size: $x-small;
+    font-weight: $regular;
+    color: $core-black;
     display: block;
     margin-bottom: 4px;
     min-height: 25px;
@@ -28,11 +25,11 @@
     font-weight: $regular;
     line-height: 1.57;
     letter-spacing: 1px;
-    color: $accent-text;
+    color: $core-medium-blue-grey;
 
     code {
-      color: $brand;
-      background-color: $accent-light;
+      color: $core-blue;
+      background-color: $ui-light-grey;
       padding: 2px;
       font-family: 'SourceCodePro', $monospace;
     }

diff --git a/frontend/components/KolideAce/theme.css b/frontend/components/KolideAce/theme.css
@@ -1,10 +1,10 @@
 .ace_editor.ace-kolide {
   font-family: 'SourceCodePro', monospace;
   font-size: 14px;
-  background-color: #fcfcff;
+  background-color: #FAFAFA;
   color: #66696f;
-  border-radius: 2px;
-  border: solid 1px #d2daf4;
+  border-radius: 4px;
+  border: solid 1px #DBE3E5;
   line-height: 24px;
 }
 
@@ -33,7 +33,7 @@
   background: #fff;
   color: #c38dec;
   z-index: 1;
-  border-right: solid 1px #d2daf4;
+  border-right: solid 1px #E3E3E3;
 }
 
 .ace-kolide .ace_gutter-active-line {

diff --git a/frontend/components/NumberPill/_styles.scss b/frontend/components/NumberPill/_styles.scss
@@ -1,5 +1,5 @@
 .number-pill {
-  background-color: $brand;
+  background-color: $core-blue;
   border-radius: 14px;
   color: $white;
   display: inline-block;

diff --git a/frontend/components/StackedWhiteBoxes/_styles.scss b/frontend/components/StackedWhiteBoxes/_styles.scss
@@ -29,7 +29,7 @@
     font-weight: 300;
 
     &-text {
-      color: $text-ultradark;
+      color: $core-black;
       font-size: $medium;
       line-height: 30px;
       letter-spacing: 0.64px;
@@ -42,7 +42,7 @@
     &-text {
       font-size: $large;
       font-weight: 300;
-      color: $text-ultradark;
+      color: $core-black;
       line-height: 32px;
       margin-top: 0;
       margin-bottom: 0;
@@ -56,7 +56,7 @@
 
     &-link {
       transition: color 150ms ease-in-out;
-      color: $text-light;
+      color: $core-medium-blue-grey;
       text-decoration: none;
       position: absolute;
       top: 10px;
@@ -66,7 +66,7 @@
       font-size: 30px;
 
       &:hover {
-        color: $brand-light;
+        color: $core-blue;
       }
     }
   }

diff --git a/frontend/components/UserBlock/_styles.scss b/frontend/components/UserBlock/_styles.scss
@@ -12,32 +12,32 @@
   border-radius: 2px;
 
   &--invited {
-    border: 1px dashed $brand;
+    border: 1px dashed $core-blue;
   }
 
   &--disabled {
-    background-color: $bg-medium;
+    background-color: $core-light-blue-grey;
   }
 
   &__header {
     transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
-    background-color: $bg-light;
-    border-bottom: 1px solid $accent-light;
-    color: $text-ultradark;
+    background-color: $core-light-blue-grey;
+    border-bottom: 1px solid $ui-borders;
+    color: $core-black;
     height: 51px;
     margin-bottom: $pad-xsmall;
     text-align: center;
     width: 100%;
     border-radius: 2px 2px 0 0;
 
     &--admin {
-      background-color: $brand;
+      background-color: $core-blue;
       color: $white;
     }
 
     &--user {
       background-color: $white;
-      color: $text-ultradark;
+      color: $core-black;
     }
 
     &--invited {
@@ -46,8 +46,8 @@
     }
 
     &--disabled {
-      background-color: $text-light;
-      color: $text-ultradark;
+      background-color: $core-medium-blue-grey;
+      color: $core-black;
     }
   }
 
@@ -74,19 +74,19 @@
   &__avatar {
     @include size(100px);
     transition: border 300ms ease-in-out;
-    border: 1px solid $text-medium;
+    border: 1px solid $core-dark-blue-grey;
     filter: none;
     display: block;
     margin: 0 auto;
 
     &--enabled {
-      border: 1px solid $brand;
+      border: 1px solid $core-blue;
     }
   }
 
   &__status-wrapper {
-    border-top: 1px solid $border-medium;
-    border-bottom: 1px solid $border-medium;
+    border-top: 1px solid $ui-borders;
+    border-bottom: 1px solid $ui-borders;
     margin-top: $pad-xsmall;
     padding: $pad-xsmall 0;
   }
@@ -109,29 +109,29 @@
     letter-spacing: 1px;
 
     &--invited {
-      color: $brand;
+      color: $core-blue;
     }
 
     &--enabled {
       color: $success;
     }
 
     &--disabled {
-      color: $text-medium;
+      color: $core-dark-blue-grey;
     }
   }
 
   &__username {
     transition: color 300ms ease-in-out;
-    color: $text-medium;
+    color: $core-dark-blue-grey;
     font-size: $medium;
     text-transform: uppercase;
     line-height: $x-large;
     margin: 0;
     letter-spacing: 1px;
 
     &--enabled {
-      color: $brand;
+      color: $core-blue;
     }
 
     &--hidden {
@@ -145,7 +145,7 @@
     line-height: $x-large;
     margin: 0;
     letter-spacing: 0.5px;
-    color: $text-ultradark;
+    color: $core-black;
     font-weight: $regular;
 
     &--hidden {
@@ -155,21 +155,21 @@
 
   &__email {
     transition: color 300ms ease-in-out;
-    color: $link;
+    color: $core-purple;
     font-size: $small;
     line-height: $x-large;
     margin: 0;
 
     &--disabled {
-      color: $text-medium;
+      color: $core-dark-blue-grey;
     }
   }
 
   &__last-seen {
     font-size: $x-small;
     line-height: $x-large;
     margin: 0;
-    color: $text-medium;
+    color: $core-dark-blue-grey;
   }
 }
 

diff --git a/frontend/components/YamlAce/_styles.scss b/frontend/components/YamlAce/_styles.scss
@@ -5,7 +5,7 @@
     font-style: normal;
     font-stretch: normal;
     letter-spacing: -0.5px;
-    color: $text-dark;
+    color: $core-dark-blue-grey;
     display: block;
     margin-bottom: 4px;
     min-height: 25px;

diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
@@ -1,5 +1,5 @@
-$gradient-start: $brand-dark;
-$gradient-end: $brand;
+$gradient-start: $core-blue;
+$gradient-end: $core-blue;
 $inverse-hover: #fafbff;
 $base-class: 'button';
 
@@ -26,7 +26,7 @@ $base-class: 'button';
 }
 
 .#{$base-class} {
-  @include button-variant($link);
+  @include button-variant($core-purple);
   user-select: none;
   transition: color 150ms ease-in-out, background 150ms ease-in-out, top 50ms ease-in-out, box-shadow 50ms ease-in-out, border 50ms ease-in-out;
   position: relative;
@@ -37,8 +37,8 @@ $base-class: 'button';
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
-  border-radius: 0;
-  font-size: $medium;
+  border-radius: 4px;
+  font-size: $small;
   font-family: 'Nunito Sans', sans-serif;
   font-weight: $bold;
   display: inline-block;
@@ -53,7 +53,7 @@ $base-class: 'button';
   }
 
   &--brand {
-    @include button-variant($brand);
+    @include button-variant($core-blue);
   }
 
   &--success {
@@ -65,34 +65,34 @@ $base-class: 'button';
   }
 
   &--muted {
-    @include button-variant(#eceef1, null, $footer-accent);
+    @include button-variant(#eceef1, null, $core-darkest-blue-grey);
 
-    color: $footer-accent;
+    color: $core-darkest-blue-grey;
   }
 
   &--warning {
     @include button-variant($warning);
   }
 
   &--link {
-    @include button-variant($link);
+    @include button-variant($core-purple);
   }
 
   &--inverse {
-    @include button-variant($white, $inverse-hover, $brand);
-    color: $brand;
-    border: 1px solid $brand;
-    border-bottom-color: $brand;
+    @include button-variant($white, $inverse-hover, $core-blue);
+    color: $core-blue;
+    border: 2px solid $core-blue;
+    border-bottom-color: $core-blue;
 
     &:active {
-      border-bottom-color: $brand;
+      border-bottom-color: $core-blue;
     }
   }
 
   &--inverse-alert {
     @include button-variant($white, $inverse-hover, $alert);
     color: $alert;
-    border: 1px solid $alert;
+    border: 2px solid $alert;
     border-bottom-color: $white;
 
     &:active {
@@ -141,7 +141,7 @@ $base-class: 'button';
     @include button-variant(transparent);
     border: 0;
     box-shadow: none;
-    color: $text-dark;
+    color: $core-dark-blue-grey;
     cursor: pointer;
     margin: 0;
     padding: 0;

diff --git a/frontend/components/buttons/DropdownButton/_styles.scss b/frontend/components/buttons/DropdownButton/_styles.scss
@@ -21,7 +21,7 @@
     z-index: 2;
     border-radius: 2px;
     background-color: $white;
-    border: solid 1px $accent-medium;
+    border: solid 1px $ui-borders;
 
     &--opened {
       display: inline-block;
@@ -32,7 +32,7 @@
     display: block;
 
     .button {
-      color: $text-dark;
+      color: $core-dark-blue-grey;
       text-transform: none;
       text-align: left;
       font-weight: $regular;
@@ -46,7 +46,7 @@
       letter-spacing: -0.5px;
 
       &:hover {
-        background-color: $brand-light;
+        background-color: $core-blue;
         color: $white;
       }
     }

diff --git a/frontend/components/buttons/EllipsisMenu/_styles.scss b/frontend/components/buttons/EllipsisMenu/_styles.scss
@@ -4,7 +4,7 @@
   position: absolute;
 
   &__btn {
-    color: $text-dark;
+    color: $core-dark-blue-grey;
     font-size: $medium;
     font-weight: $bold;
     letter-spacing: -1px;

diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -70,7 +70,7 @@
 
     .kolidecon {
       transition: color 150ms ease-in-out;
-      color: $text-light;
+      color: $core-medium-blue-grey;
       font-size: 24px;
 
       &:hover {