diff --git a/frontend/components/Avatar/_styles.scss b/frontend/components/Avatar/_styles.scss
index f70c2f3c86..a2938f7a10 100644
--- a/frontend/components/Avatar/_styles.scss
+++ b/frontend/components/Avatar/_styles.scss
@@ -1,5 +1,5 @@
.avatar {
- background: $white url('../assets/images/avatar-default.png') center 100% no-repeat;
+ background: $core-white url('../assets/images/avatar-default.png') center 100% no-repeat;
background-size: cover;
border-radius: 50%;
diff --git a/frontend/components/IconToolTip/IconToolTip.tsx b/frontend/components/IconToolTip/IconToolTip.tsx
index 6accd1d392..2ef376d9bc 100644
--- a/frontend/components/IconToolTip/IconToolTip.tsx
+++ b/frontend/components/IconToolTip/IconToolTip.tsx
@@ -17,7 +17,7 @@ const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
- {/* same colour as $core-dark-blue-grey */}
+ {/* same colour as $core-fleet-blue */}
);
diff --git a/frontend/components/InfoBanner/_styles.scss b/frontend/components/InfoBanner/_styles.scss
index 5f57ea7802..cbb457a157 100644
--- a/frontend/components/InfoBanner/_styles.scss
+++ b/frontend/components/InfoBanner/_styles.scss
@@ -2,5 +2,5 @@
padding: 16px;
border-radius: $border-radius;
border: 1px solid #D9D9FE;
- background-color: $info;
+ background-color: $ui-vibrant-blue-10;
}
diff --git a/frontend/components/KolideAce/_styles.scss b/frontend/components/KolideAce/_styles.scss
index 03f019daf3..98f2f522e0 100644
--- a/frontend/components/KolideAce/_styles.scss
+++ b/frontend/components/KolideAce/_styles.scss
@@ -2,20 +2,20 @@
&__label {
font-size: $x-small;
font-weight: $regular;
- color: $core-black;
+ color: $core-fleet-black;
display: block;
margin-bottom: 4px;
min-height: 25px;
&--error {
- color: $alert;
+ color: $ui-error;
}
}
&__wrapper {
&--error {
.ace-kolide {
- border: 1px solid $alert;
+ border: 1px solid $ui-error;
}
}
}
@@ -23,10 +23,10 @@
&__hint {
font-size: $x-small;
font-weight: $regular;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
code {
- color: $core-blue;
+ color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
diff --git a/frontend/components/LoginRoutes/_styles.scss b/frontend/components/LoginRoutes/_styles.scss
index 64684e06c4..3db8a8804a 100644
--- a/frontend/components/LoginRoutes/_styles.scss
+++ b/frontend/components/LoginRoutes/_styles.scss
@@ -5,5 +5,5 @@
justify-content: center;
position: relative;
min-height: 100vh;
- background-color: $core-gradient;
+ background-color: $gradients-dark-gradient-vertical;
}
diff --git a/frontend/components/NumberPill/_styles.scss b/frontend/components/NumberPill/_styles.scss
index 1f8f3fb2d3..3e34105c47 100644
--- a/frontend/components/NumberPill/_styles.scss
+++ b/frontend/components/NumberPill/_styles.scss
@@ -1,7 +1,7 @@
.number-pill {
- background-color: $core-blue;
+ background-color: $core-vibrant-blue;
border-radius: 14px;
- color: $white;
+ color: $core-white;
display: inline-block;
line-height: 26px;
height: 26px;
diff --git a/frontend/components/Pagination/_style.scss b/frontend/components/Pagination/_style.scss
index dad9b19d99..c9a5291a98 100644
--- a/frontend/components/Pagination/_style.scss
+++ b/frontend/components/Pagination/_style.scss
@@ -9,7 +9,7 @@
text-align: right;
button {
- color: $core-blue;
+ color: $core-vibrant-blue;
padding: 6px;
.kolidecon-chevronleft {
@@ -22,7 +22,7 @@
}
button:hover {
- background-color: $core-blue-label-over;
+ background-color: $ui-vibrant-blue-10;
}
.button--disabled:hover {
diff --git a/frontend/components/StackedWhiteBoxes/_styles.scss b/frontend/components/StackedWhiteBoxes/_styles.scss
index 629d3c7b00..f72c612469 100644
--- a/frontend/components/StackedWhiteBoxes/_styles.scss
+++ b/frontend/components/StackedWhiteBoxes/_styles.scss
@@ -17,7 +17,7 @@
}
&__box {
- background-color: $white;
+ background-color: $core-white;
border-radius: 10px;
min-height: 360px;
box-sizing: border-box;
@@ -25,7 +25,7 @@
font-weight: 300;
&-text {
- color: $core-black;
+ color: $core-fleet-black;
font-size: $small;
margin: 40px 0 24px;
}
@@ -37,7 +37,7 @@
&-text {
font-size: $large;
font-weight: 300;
- color: $core-black;
+ color: $core-fleet-black;
line-height: 32px;
margin-top: 0;
margin-bottom: 0;
@@ -50,7 +50,7 @@
&-link {
transition: color 150ms ease-in-out;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
text-decoration: none;
position: absolute;
top: 10px;
@@ -60,7 +60,7 @@
font-size: 30px;
&:hover {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
}
diff --git a/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss b/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss
index 00ee2686cb..512f953131 100644
--- a/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss
@@ -11,7 +11,7 @@
.Select-placeholder {
line-height: normal;
- color: $core-black;
+ color: $core-fleet-black;
}
.Select-input {
diff --git a/frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss b/frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss
index b60c0cff83..8318fb9e8b 100644
--- a/frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss
@@ -16,27 +16,27 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-bottom: 6px solid $ui-dark-grey;
+ border-bottom: 6px solid $ui-fleet-black-25;
}
.descending-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-top: 6px solid $ui-dark-grey;
+ border-top: 6px solid $ui-fleet-black-25;
}
&.ascending {
.ascending-arrow {
- border-bottom-color: $core-blue;
+ border-bottom-color: $core-vibrant-blue;
}
}
&.descending {
.descending-arrow {
- border-top-color: $core-blue;
+ border-top-color: $core-vibrant-blue;
}
}
}
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index 4a9086e260..4015b139f8 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -3,7 +3,7 @@
.data-table {
&__wrapper {
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
border-radius: 6px;
margin-top: $pad-half;
overflow: scroll;
@@ -13,12 +13,12 @@
&__table {
width: 100%;
border-collapse: collapse;
- color: $core-black;
+ color: $core-fleet-black;
font-size: $x-small;
}
tr {
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
@@ -26,15 +26,15 @@
}
thead {
- background-color: $core-light-blue-grey;
- color: $core-black;
+ background-color: $ui-off-white;
+ color: $core-fleet-black;
text-align: left;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
th {
padding: 16px 27px;
white-space: nowrap;
- border-right: 1px solid $ui-borders;
+ border-right: 1px solid $ui-fleet-blue-15;
&:last-child {
border-right: none;
@@ -52,18 +52,18 @@
margin: 0;
}
.Select-control {
- background-color: $white;
+ background-color: $core-white;
border: none;
}
}
}
&__hostname {
- color: $core-black;
+ color: $core-fleet-black;
}
&__status {
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
text-transform: capitalize;
&:before {
diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss
index 4232e1a1a1..8cb9882f62 100644
--- a/frontend/components/TableContainer/_styles.scss
+++ b/frontend/components/TableContainer/_styles.scss
@@ -9,7 +9,7 @@
&__results-count {
font-size: $x-small;
font-weight: $bold;
- color: $core-black;
+ color: $core-fleet-black;
margin: 0;
}
@@ -23,7 +23,7 @@
display: flex;
align-items: center;
font-size: $x-small;
- color: $core-blue;
+ color: $core-vibrant-blue;
img {
width: 20px;
@@ -34,12 +34,12 @@
&__edit-columns-button:hover {
cursor: pointer;
text-decoration: underline;
- color: $core-blue-over;
+ color: $core-vibrant-blue-over;
}
&__search-input {
position: relative;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
width: 344px;
margin-left: $pad-medium;
@@ -57,7 +57,7 @@
top: 10px;
left: 12px;
font-size: 20px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
}
}
}
diff --git a/frontend/components/UserRow/_styles.scss b/frontend/components/UserRow/_styles.scss
index c05c66e3cb..9857b36028 100644
--- a/frontend/components/UserRow/_styles.scss
+++ b/frontend/components/UserRow/_styles.scss
@@ -32,7 +32,7 @@
&__status--active {
&:before {
- background-color: $success;
+ background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -44,7 +44,7 @@
&__status--invited {
&:before {
- background-color: $warning;
+ background-color: $ui-warning;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -56,7 +56,7 @@
&__status--disabled {
&:before {
- background-color: $core-red;
+ background-color: $core-vibrant-red;
border-radius: 100%;
content: ' ';
display: inline-block;
diff --git a/frontend/components/WarningBanner/_styles.scss b/frontend/components/WarningBanner/_styles.scss
index 5527745979..58c9d6006e 100644
--- a/frontend/components/WarningBanner/_styles.scss
+++ b/frontend/components/WarningBanner/_styles.scss
@@ -2,11 +2,11 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
- background-color: $warning;
- color: $black;
+ background-color: $ui-warning;
+ color: $core-fleet-black;
padding: 15px 20px;
border-radius: $border-radius;
- border: 1px solid $warning-border;
+ border: 1px solid $ui-warning;
font-size: $x-small;
margin: 0 0 25px;
diff --git a/frontend/components/YamlAce/_styles.scss b/frontend/components/YamlAce/_styles.scss
index d53cf8be0d..d133d76ea9 100644
--- a/frontend/components/YamlAce/_styles.scss
+++ b/frontend/components/YamlAce/_styles.scss
@@ -5,20 +5,20 @@
font-style: normal;
font-stretch: normal;
letter-spacing: -0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
display: block;
margin: 0 0 4px;
min-height: 25px;
&--error {
- color: $alert;
+ color: $ui-error;
}
}
&__wrapper {
&--error {
.ace-kolide {
- border: 1px solid $alert;
+ border: 1px solid $ui-error;
}
}
}
diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index 15b7333255..5d9111466d 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -27,10 +27,10 @@ $base-class: 'button';
}
.#{$base-class} {
- @include button-variant($core-blue);
+ @include button-variant($core-vibrant-blue);
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;
- color: $white;
+ color: $core-white;
text-decoration: none;
flex-direction: row;
justify-content: center;
@@ -51,37 +51,37 @@ $base-class: 'button';
}
&--brand {
- @include button-variant($core-blue, $core-blue-over, $core-blue-down);
+ @include button-variant($core-vibrant-blue, $core-vibrant-blue-over, $core-vibrant-blue-down);
}
&--success {
- @include button-variant($success);
+ @include button-variant($ui-success);
}
&--alert {
- @include button-variant($alert, $core-red-over, $core-red-down);
+ @include button-variant($ui-error, $core-vibrant-red-over, $core-vibrant-red-down);
}
&--blue-green {
- @include button-variant($core-blue-green)
+ @include button-variant($ui-success)
}
&--grey {
- @include button-variant($core-medium-blue-grey, $core-dark-blue-grey-over, $core-dark-blue-grey-down);
+ @include button-variant($core-fleet-blue, $core-fleet-blue-over, $core-fleet-blue-down);
}
&--warning {
- @include button-variant($warning);
+ @include button-variant($ui-warning);
}
&--link {
- @include button-variant($core-purple);
+ @include button-variant($core-fleet-purple);
}
&--label {
- @include button-variant($core-light-blue-grey, $core-blue-over, null, $inverse: true);
- color: $core-blue;
- border: 1px solid $core-blue;
+ @include button-variant($ui-off-white, $core-vibrant-blue-over, null, $inverse: true);
+ color: $core-vibrant-blue;
+ border: 1px solid $core-vibrant-blue;
box-sizing: border-box;
font-size: $xx-small;
padding: 4px 10px;
@@ -92,7 +92,7 @@ $base-class: 'button';
}
&:hover {
- border: 1px solid $core-blue;
+ border: 1px solid $core-vibrant-blue;
}
}
@@ -100,7 +100,7 @@ $base-class: 'button';
@include button-variant(transparent);
border: 0;
box-shadow: none;
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $x-small;
cursor: pointer;
margin: 0;
@@ -109,7 +109,7 @@ $base-class: 'button';
line-height: normal;
&:active {
- color: $core-blue-down;
+ color: $core-vibrant-blue-down;
box-shadow: none;
top: 0;
}
@@ -119,7 +119,7 @@ $base-class: 'button';
}
&:hover {
- color: $core-blue-over;
+ color: $core-vibrant-blue-over;
background-color: transparent;
box-shadow: none;
text-decoration: underline;
@@ -127,16 +127,16 @@ $base-class: 'button';
}
&--inverse {
- @include button-variant($white, $core-blue-over, $core-blue-down, $inverse: true);
- color: $core-blue;
- border: 2px solid $core-blue;
+ @include button-variant($core-white, $core-vibrant-blue-over, $core-vibrant-blue-down, $inverse: true);
+ color: $core-vibrant-blue;
+ border: 2px solid $core-vibrant-blue;
box-sizing: border-box;
}
&--inverse-alert {
- @include button-variant($white, $core-red-over, $core-red-down, $inverse: true);
- color: $alert;
- border: 2px solid $alert;
+ @include button-variant($core-white, $core-vibrant-red-over, $core-vibrant-red-down, $inverse: true);
+ color: $ui-error;
+ border: 2px solid $ui-error;
box-sizing: border-box;
}
@@ -159,7 +159,7 @@ $base-class: 'button';
@include button-variant(transparent);
border: 0;
box-shadow: none;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
cursor: pointer;
margin: 0;
padding: 0;
@@ -182,7 +182,7 @@ $base-class: 'button';
}
&--contextual-nav-item {
- @include button-variant(transparent, $core-blue-label-over);
+ @include button-variant(transparent, $ui-vibrant-blue-10);
display: flex;
justify-content: space-between;
}
diff --git a/frontend/components/buttons/DropdownButton/_styles.scss b/frontend/components/buttons/DropdownButton/_styles.scss
index 91619aa8ad..8221835232 100644
--- a/frontend/components/buttons/DropdownButton/_styles.scss
+++ b/frontend/components/buttons/DropdownButton/_styles.scss
@@ -20,7 +20,7 @@
display: none;
z-index: 2;
border-radius: 2px;
- background-color: $white;
+ background-color: $core-white;
box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15);
&--opened {
@@ -32,7 +32,7 @@
display: block;
.button {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
text-transform: none;
text-align: left;
font-weight: $regular;
@@ -46,8 +46,8 @@
letter-spacing: -0.5px;
&:hover {
- background-color: $core-blue;
- color: $white;
+ background-color: $core-vibrant-blue;
+ color: $core-white;
}
}
}
diff --git a/frontend/components/buttons/EllipsisMenu/_styles.scss b/frontend/components/buttons/EllipsisMenu/_styles.scss
index 4c5cf998cf..2ed5a35bf0 100644
--- a/frontend/components/buttons/EllipsisMenu/_styles.scss
+++ b/frontend/components/buttons/EllipsisMenu/_styles.scss
@@ -4,7 +4,7 @@
position: absolute;
&__btn {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $medium;
font-weight: $bold;
letter-spacing: -1px;
diff --git a/frontend/components/config/EnrollSecretTable/_styles.scss b/frontend/components/config/EnrollSecretTable/_styles.scss
index 6559dbba01..28bfce5692 100644
--- a/frontend/components/config/EnrollSecretTable/_styles.scss
+++ b/frontend/components/config/EnrollSecretTable/_styles.scss
@@ -22,7 +22,7 @@
}
&__secret-copy-icon {
- color: $core-blue;
+ color: $core-vibrant-blue;
margin-right: 16px;
}
@@ -52,7 +52,7 @@
&__secret-download-icon {
display: block;
font-size: $x-small;
- color: $core-blue;
+ color: $core-vibrant-blue;
font-weight: $bold;
a {
@@ -78,7 +78,7 @@
width: 100%;
height: 17px;
// We explicityly use rgba(255,255,255,0) because it's equivalent to transparent for most broswers except Safari.
- background-image: linear-gradient(to bottom, $white, rgba(255, 255, 255, 0));
+ background-image: linear-gradient(to bottom, $core-white, rgba(255, 255, 255, 0));
}
&:after {
@@ -90,7 +90,7 @@
width: 100%;
height: 17px;
// We explicityly use rgba(255,255,255,0) because it's equivalent to transparent for most broswers except Safari.
- background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $white);
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $core-white);
}
.form-field__label {
diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index 87da04f178..50c120c6bd 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -13,7 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: $white;
+ color: $core-white;
padding: $pad-half;
z-index: 3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@@ -26,13 +26,13 @@
&--success {
.kolidecon {
- color: $success;
+ color: $ui-success;
}
}
&--error {
.kolidecon {
- color: $alert;
+ color: $ui-error;
}
}
@@ -51,7 +51,7 @@
}
&__undo {
- color: $white;
+ color: $core-white;
cursor: pointer;
font-size: 16px;
text-decoration: underline;
@@ -66,11 +66,11 @@
.kolidecon {
transition: color 150ms ease-in-out;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
font-size: 24px;
&:hover {
- color: $white;
+ color: $core-white;
}
}
}
diff --git a/frontend/components/flash_messages/PersistentFlash/_styles.scss b/frontend/components/flash_messages/PersistentFlash/_styles.scss
index 9a2efe2736..4b749a7f20 100644
--- a/frontend/components/flash_messages/PersistentFlash/_styles.scss
+++ b/frontend/components/flash_messages/PersistentFlash/_styles.scss
@@ -13,7 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: $white;
+ color: $core-white;
padding: $pad-half;
z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@@ -25,7 +25,7 @@
text-align: center;
i {
- color: $alert;
+ color: $ui-error;
font-size: 24px;
}
diff --git a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
index cc4ea94d69..3fd432111a 100644
--- a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
+++ b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
@@ -23,7 +23,7 @@
font-size: 16px;
font-weight: $bold;
letter-spacing: -0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
border-bottom: 1px solid #eaeefb;
padding: 0 0 9px;
margin: 0 0 9px;
diff --git a/frontend/components/forms/FormField/_styles.scss b/frontend/components/forms/FormField/_styles.scss
index debd112058..5d861abde8 100644
--- a/frontend/components/forms/FormField/_styles.scss
+++ b/frontend/components/forms/FormField/_styles.scss
@@ -4,21 +4,21 @@
&__label {
font-size: $x-small;
font-weight: $regular;
- color: $core-black;
+ color: $core-fleet-black;
display: block;
margin-bottom: 4px;
&--error {
- color: $alert;
+ color: $ui-error;
}
}
&__hint {
font-weight: $regular;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
code {
- color: $core-blue;
+ color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
diff --git a/frontend/components/forms/LoginForm/_styles.scss b/frontend/components/forms/LoginForm/_styles.scss
index 20a5349bb2..0c0170cbad 100644
--- a/frontend/components/forms/LoginForm/_styles.scss
+++ b/frontend/components/forms/LoginForm/_styles.scss
@@ -14,7 +14,7 @@
&__container {
display: flex;
align-items: center;
- background-color: $white;
+ background-color: $core-white;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-sizing: border-box;
@@ -41,7 +41,7 @@
&__forgot-link {
font-size: $x-small;
text-decoration: none;
- color: $core-blue;
+ color: $core-vibrant-blue;
}
&__sso-image {
diff --git a/frontend/components/forms/LogoutForm/_styles.scss b/frontend/components/forms/LogoutForm/_styles.scss
index ba7ccdf584..78597e6629 100644
--- a/frontend/components/forms/LogoutForm/_styles.scss
+++ b/frontend/components/forms/LogoutForm/_styles.scss
@@ -6,7 +6,7 @@
display: flex;
align-items: center;
flex-direction: column;
- background-color: $white;
+ background-color: $core-white;
box-sizing: border-box;
padding: 30px;
width: 460px;
@@ -14,19 +14,19 @@
}
&__avatar {
- border: 1px solid $core-blue;
+ border: 1px solid $core-vibrant-blue;
border-radius: 50%;
}
&__username {
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $large;
margin: $pad-half 0;
text-transform: uppercase;
}
&__subtext {
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
font-size: $medium;
margin-top: $pad-half;
}
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
index e460d4ab18..e4ec731cbe 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
@@ -8,7 +8,7 @@
}
&__icon {
- color: $success;
+ color: $ui-success;
font-size: 120px;
display: block;
text-align: center;
@@ -67,7 +67,7 @@
font-weight: $regular;
line-height: 1.71;
letter-spacing: 0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 30px 0 0;
.kolide-checkbox {
diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss
index 08ebc057f5..aae3c69e38 100644
--- a/frontend/components/forms/RegistrationForm/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/_styles.scss
@@ -10,7 +10,7 @@
@include position(absolute, 49% 0 null null);
transition: left 300ms ease, opacity 300ms ease;
border-radius: 10px;
- background-color: $core-light-blue-grey;
+ background-color: $ui-off-white;
box-sizing: border-box;
padding: 40px;
z-index: 1;
@@ -23,7 +23,7 @@
padding: 0 0 16px;
margin: 0;
margin-bottom: 40px;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
}
p {
@@ -61,7 +61,7 @@
.user-registration__title {
font-size: 24px;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding: 25px 35px;
}
}
@@ -162,19 +162,19 @@
&__description {
font-size: 14px;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
}
&__title {
font-size: 18px;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 0;
padding: 0;
}
&__field-wrapper {
- background-color: $core-light-blue-grey;
+ background-color: $ui-off-white;
box-sizing: border-box;
z-index: 2;
display: flex;
diff --git a/frontend/components/forms/_styles.scss b/frontend/components/forms/_styles.scss
index 71206038ea..768e378554 100644
--- a/frontend/components/forms/_styles.scss
+++ b/frontend/components/forms/_styles.scss
@@ -1,8 +1,8 @@
.form {
&__base-error {
- background-color: $alert;
+ background-color: $ui-error;
border-radius: 3px;
- color: $white;
+ color: $core-white;
font-size: 14px;
margin-top: 10px;
padding: 5px 0;
diff --git a/frontend/components/forms/admin/AppConfigForm/_styles.scss b/frontend/components/forms/admin/AppConfigForm/_styles.scss
index 8394b242fe..cc04d1dfd7 100644
--- a/frontend/components/forms/admin/AppConfigForm/_styles.scss
+++ b/frontend/components/forms/admin/AppConfigForm/_styles.scss
@@ -4,7 +4,7 @@
font-size: 15px;
button {
- color: $core-purple;
+ color: $core-fleet-purple;
font-size: 15px;
font-weight: $regular;
float: right;
@@ -13,7 +13,7 @@
}
input {
- color: $core-purple;
+ color: $core-fleet-purple;
}
}
@@ -35,7 +35,7 @@
h2 {
a {
- color: $black;
+ color: $core-fleet-black;
scroll-margin-top: 210px; // used to push down anchor to visible area when there are sticky headers
}
}
@@ -43,7 +43,7 @@
.smtp-options {
font-size: 15px;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding-left: 15px;
em {
@@ -52,13 +52,13 @@
&--configured {
em {
- color: $success;
+ color: $ui-success;
}
}
&--notconfigured {
em {
- color: $alert;
+ color: $ui-error;
}
}
}
@@ -104,10 +104,10 @@
}
.hint {
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
&--brand {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
}
@@ -119,13 +119,13 @@
border-radius: 20%;
height: 120px;
width: 120px;
- border: 1px solid $ui-borders;
+ border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
transform: translate(-100px, 20px);
}
p {
- color: $core-purple;
+ color: $core-fleet-purple;
font-size: 18px;
font-weight: $bold;
margin-top: 0;
@@ -143,11 +143,11 @@
vertical-align: text-bottom;
&--off {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
}
&--on {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss
index 49253d9386..bddf888a38 100644
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@@ -9,14 +9,14 @@
&:focus + .kolide-checkbox__tick {
&::after {
- border-color: $core-blue;
+ border-color: $core-vibrant-blue;
}
}
&:checked + .kolide-checkbox__tick {
&::after {
- background-color: $core-blue;
- border: solid 2px $core-blue;
+ background-color: $core-vibrant-blue;
+ border: solid 2px $core-vibrant-blue;
}
&::before {
@@ -27,7 +27,7 @@
width: 7px;
height: 13px;
margin: -8px 0 0 -3px;
- border: 2px solid $white;
+ border: 2px solid $core-white;
border-top: 0;
border-left: 0;
content: '';
@@ -45,17 +45,17 @@
@include size(20px);
transition: border 75ms ease-in-out, background 75ms ease-in-out;
border-radius: 2px;
- border: solid 2px $ui-borders;
+ border: solid 2px $ui-fleet-blue-15;
content: '';
box-sizing: border-box;
display: block;
- background-color: $white;
+ background-color: $core-white;
visibility: visible;
}
&--disabled {
&::after {
- background-color: $ui-borders;
+ background-color: $ui-fleet-blue-15;
}
}
}
@@ -65,7 +65,7 @@
font-weight: $regular;
line-height: 20px;
letter-spacing: 0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding-left: $pad-small;
}
}
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index 3d9b45044b..7a2ea385e2 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -3,11 +3,11 @@
display: block;
font-size: $x-small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
margin-bottom: $pad-xsmall;
&--error {
- color: $alert;
+ color: $ui-error;
}
}
@@ -15,12 +15,12 @@
&--error {
&.Select {
.Select-control {
- border-color: $alert;
- background-color: $alert-light;
+ border-color: $ui-error;
+ background-color: $ui-error;
}
.Select-arrow {
- border-top-color: $alert;
+ border-top-color: $ui-error;
}
}
}
@@ -35,14 +35,14 @@
margin-top: 4px;
font-size: $xx-small;
white-space: normal;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
font-style: italic;
}
}
.Select {
.Select-control {
- border: 1px solid $ui-borders;
+ border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
border-radius: 4px;
height: 40px;
@@ -56,7 +56,7 @@
font-size: $x-small;
border-radius: 4px;
background-color: $ui-light-grey;
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
.Select-value-icon {
border: 0;
@@ -78,13 +78,13 @@
left: 50%;
visibility: visible;
font-size: $x-small;
- color: $ui-medium-grey;
+ color: $ui-gray;
text-indent: 0;
}
&:hover {
&::after {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
}
}
}
@@ -92,7 +92,7 @@
.Select-value-label {
font-size: $x-small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
line-height: 28px;
}
}
@@ -106,12 +106,12 @@
}
.Select-arrow {
- border-top-color: $core-dark-blue-grey;
+ border-top-color: $core-fleet-blue;
}
&.is-focused {
.Select-control {
- border: 1px solid $core-blue;
+ border: 1px solid $core-vibrant-blue;
}
&:not(.is-open) {
@@ -126,7 +126,7 @@
&.is-pseudo-focused > .Select-control {
.Select-value {
.Select-value-label {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
}
}
@@ -147,22 +147,22 @@
}
.Select-option {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
margin: $pad-small;
padding: $pad-half;
display: block;
&.is-focused {
- background-color: $core-blue-label-over;
+ background-color: $ui-vibrant-blue-25;
.Select-icon {
- color: $core-blue-label-over;
+ color: $ui-vibrant-blue-25;
}
}
&.is-disabled {
- color: $ui-medium-grey;
+ color: $ui-gray;
.Select-icon {
visibility: hidden;
@@ -172,11 +172,11 @@
}
.Select-icon {
- color: $ui-medium-grey;
+ color: $ui-gray;
}
.Select-placeholder {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
line-height: 40px;
padding: 0 12px;
@@ -201,12 +201,12 @@
.Select-option {
&.is-disabled {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
cursor: default;
&.is-focused {
- background-color: $core-blue-label-down;
- color: $white;
+ background-color: $ui-vibrant-blue-25;
+ color: $core-white;
}
}
}
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index f563859a25..f8adb0395d 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -1,23 +1,23 @@
.input-field {
line-height: 34px;
background-color: $ui-light-grey;
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
border-radius: 4px;
font-size: $small;
padding: $pad-xsmall 12px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
font-family: 'Nunito Sans', sans-serif;
box-sizing: border-box;
height: 40px;
::placeholder {
- color: $core-medium-blue-grey;
+ color: $ui-fleet-black-50;
}
&:focus {
outline: none;
- border-color: $core-blue;
- border-top-color: $core-purple;
+ border-color: $core-vibrant-blue;
+ border-top-color: $core-fleet-purple;
}
&--disabled {
@@ -26,14 +26,14 @@
&--error {
transition: background 150ms ease-in-out, color 150ms ease-in-out;
- border-color: $alert;
- background-color: $alert-light;
- color: $white;
+ border-color: $ui-error;
+ background-color: $ui-error;
+ color: $core-white;
&:focus {
- border-bottom-color: $alert;
- background-color: $white;
- color: $core-dark-blue-grey;
+ border-bottom-color: $ui-error;
+ background-color: $core-white;
+ color: $core-fleet-black;
}
}
@@ -51,11 +51,11 @@
display: block;
font-size: $medium;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin-bottom: $pad-xsmall;
&--error {
- color: $alert;
+ color: $ui-error;
}
}
@@ -68,11 +68,11 @@
font-weight: $regular;
line-height: 1.57;
letter-spacing: 1px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
code {
- color: $core-blue;
- background-color: $ui-medium-grey;
+ color: $core-vibrant-blue;
+ background-color: $ui-gray;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
}
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index 347ba0dbad..70ac381172 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -8,19 +8,19 @@
right: 6px;
top: 28px;
font-size: 18px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
&--active {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
&--error {
- color: $alert;
+ color: $ui-error;
}
}
&__input {
- border: 1px solid $ui-borders;
+ border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
border-radius: 4px;
padding: 9px 30px 9px 16px;
@@ -29,11 +29,11 @@
position: relative;
width: 100%;
box-sizing: border-box;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-weight: $regular;
::placeholder {
- color: $core-medium-blue-grey;
+ color: $ui-fleet-black-50;
}
&:focus {
@@ -41,7 +41,7 @@
}
&--error {
- border-bottom-color: $alert;
+ border-bottom-color: $ui-error;
}
}
@@ -65,7 +65,7 @@
margin-top: 8px;
code {
- color: $core-blue;
+ color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
diff --git a/frontend/components/forms/fields/Radio/_styles.scss b/frontend/components/forms/fields/Radio/_styles.scss
index ef61533a44..37314acc56 100644
--- a/frontend/components/forms/fields/Radio/_styles.scss
+++ b/frontend/components/forms/fields/Radio/_styles.scss
@@ -20,7 +20,7 @@
content: "";
width: 10px;
height: 10px;
- box-shadow: inset 1em 1em $core-blue;
+ box-shadow: inset 1em 1em $core-vibrant-blue;
border-radius: 50%;
top: 5px;
left: 5px;
@@ -33,7 +33,7 @@
}
&:focus + .radio__control {
- border-color: $core-blue;
+ border-color: $core-vibrant-blue;
}
}
}
@@ -44,7 +44,7 @@
width: 20px;
height: 20px;
border-radius: 50%;
- border: 2px solid $ui-borders;
+ border: 2px solid $ui-fleet-blue-15;
transform: translateY(-0.05em);
}
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
index 4b13cd1c5a..0f87937d83 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
@@ -6,9 +6,9 @@
text-transform: uppercase;
font-weight: $bold;
font-size: $xx-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
letter-spacing: 0.5px;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
&:first-child {
margin: 0;
@@ -23,15 +23,15 @@
position: relative;
z-index: 2;
padding: 24px 16px;
- border-right: 1px solid $ui-borders;
- background-color: $white;
+ border-right: 1px solid $ui-fleet-blue-15;
+ background-color: $core-white;
}
&__spotlight {
width: 50%;
float: right;
overflow-y: auto;
- background-color: $white;
+ background-color: $core-white;
min-height: 500px;
position: relative;
z-index: 1;
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss
index 57e7b798fb..23d61d3fef 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss
@@ -3,7 +3,7 @@
padding: $pad-large;
&__back {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $xx-small;
display: none;
@@ -30,21 +30,21 @@
font-size: $medium;
font-weight: $bold;
letter-spacing: 0.6px;
- color: $core-black;
+ color: $core-fleet-black;
margin: 0;
}
&__icon {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
margin-right: $pad-small;
width: 21px;
&--online {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
&--offline {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
@@ -56,11 +56,11 @@
text-transform: uppercase;
&--is-online {
- color: $success;
+ color: $ui-success;
}
&--is-offline {
- color: $alert;
+ color: $ui-error;
}
}
@@ -73,7 +73,7 @@
font-size: $small;
font-weight: $bold;
letter-spacing: 0.9px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
text-transform: uppercase;
margin: 0;
}
@@ -83,7 +83,7 @@
font-weight: $regular;
line-height: 1.85;
letter-spacing: 0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
list-style: none;
margin: 0;
padding: 0;
@@ -119,12 +119,12 @@
font-size: $medium;
font-weight: $bold;
letter-spacing: 0.6px;
- color: $core-black;
+ color: $core-fleet-black;
margin: 0;
}
&__icon {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
margin-right: $pad-small;
width: 21px;
}
@@ -138,7 +138,7 @@
&__hosts-count {
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
strong {
min-width: 21px;
@@ -150,14 +150,14 @@
}
&__hosts-online {
- color: $success;
+ color: $ui-success;
}
&__description {
font-size: $pad-medium;
font-weight: $regular;
line-height: 1.71;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 0 0 $pad-small;
}
}
@@ -174,7 +174,7 @@
th {
font-weight: $bold;
line-height: 2.3;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding-right: $pad-half;
}
}
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
index 76d13d5756..7f3521cd65 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
@@ -27,7 +27,7 @@
&__add-btn {
transition: color 0ms;
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $medium;
}
@@ -40,9 +40,9 @@
}
&__count {
- background-color: $core-dark-blue-grey;
+ background-color: $core-fleet-black;
border-radius: $border-radius;
- color: $white;
+ color: $core-white;
font-size: $xx-small;
line-height: 16px;
font-weight: bold;
@@ -51,35 +51,35 @@
}
&__icon {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $small;
&--online {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
&--offline {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
&--mia {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
&__ip {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $small;
}
&__label-host {
- color: $core-purple;
+ color: $core-fleet-purple;
font-size: $medium;
margin-left: $pad-half;
}
&__label-label {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: 14px;
margin-left: $pad-half;
@@ -89,7 +89,7 @@
}
&__more-info {
- color: $core-blue;
+ color: $core-vibrant-blue;
cursor: pointer;
float: right;
margin-right: $pad-base;
@@ -97,7 +97,7 @@
&__target-icon {
font-size: $medium;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin-right: $pad-xsmall;
}
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index 6f3308e412..4c7d8ec981 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@@ -3,14 +3,14 @@
&__label {
font-size: $x-small;
- color: $core-black;
+ color: $core-fleet-black;
display: block;
margin: 40px 0 4px;
text-align: right;
&--error {
.target-select__select-targets {
- color: $alert;
+ color: $ui-error;
}
}
}
@@ -22,7 +22,7 @@
&__targets-count {
font-size: $small;
font-weight: $regular;
- color: $core-blue;
+ color: $core-vibrant-blue;
}
&.Select {
@@ -55,7 +55,7 @@
> input {
line-height: 30px;
padding: 8px 0;
- color: $core-black;
+ color: $core-fleet-black;
font-size: 16px;
}
}
@@ -76,7 +76,7 @@
&.is-disabled {
&.is-focused {
- background-color: $core-blue-label-down;
+ background-color: $ui-vibrant-blue-25;
border-radius: 8px;
}
}
@@ -89,7 +89,7 @@
.Select-value {
line-height: 34px;
- border: 1px solid $core-dark-blue-grey;
+ border: 1px solid $core-fleet-black;
margin-top: 5px;
margin-bottom: 0;
}
@@ -97,7 +97,7 @@
&.is-focused {
.Select-control {
- border: 1px solid $core-blue;
+ border: 1px solid $core-vibrant-blue;
}
}
}
@@ -135,8 +135,8 @@
.Select-value {
border-radius: $border-radius;
- background-color: $white;
- border: solid 1px $ui-borders;
+ background-color: $core-white;
+ border: solid 1px $ui-fleet-blue-15;
.Select-value-icon {
border: 0;
@@ -157,14 +157,14 @@
top: 50%;
left: 50%;
visibility: visible;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
display: block;
text-indent: 0;
}
&:hover {
&::after {
- color: $alert;
+ color: $ui-error;
}
}
}
@@ -172,7 +172,7 @@
.Select-value-label {
font-size: 16px;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding: 0 0 0 $pad-medium;
line-height: 34px;
}
@@ -181,10 +181,10 @@
.Select-clear {
font-size: 28px;
margin-right: 10px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
&:hover {
- color: $alert;
+ color: $ui-error;
}
}
@@ -199,7 +199,7 @@
content: '\f049';
font-size: 180px;
margin-top: -90px;
- color: $ui-medium-grey;
+ color: $ui-gray;
}
}
}
diff --git a/frontend/components/forms/fields/Slider/_styles.scss b/frontend/components/forms/fields/Slider/_styles.scss
index f6332493fc..14d0cbc1e6 100644
--- a/frontend/components/forms/fields/Slider/_styles.scss
+++ b/frontend/components/forms/fields/Slider/_styles.scss
@@ -1,6 +1,6 @@
.kolide-slider {
transition: background-color 150ms ease-in-out;
- background-color: $core-dark-blue-grey;
+ background-color: $core-fleet-black;
border-radius: 12px;
border: 1px solid #eaeaea;
cursor: pointer;
@@ -12,15 +12,15 @@
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);
&:hover {
- background-color: $core-dark-blue-grey;
+ background-color: $core-fleet-black;
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
&--active {
- background-color: $core-blue;
+ background-color: $core-vibrant-blue;
&:hover {
- background-color: $core-blue;
+ background-color: $core-vibrant-blue;
}
}
@@ -37,7 +37,7 @@
transition: left 150ms ease-in-out;
margin-top: 3px;
border-radius: 50%;
- background-color: $white;
+ background-color: $core-white;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
&--active {
@@ -51,10 +51,10 @@
text-align: left;
vertical-align: text-bottom;
margin-right: 10px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
&--active {
- color: $core-blue;
+ color: $core-vibrant-blue;
margin-right: 0;
margin-left: 10px;
}
diff --git a/frontend/components/forms/queries/QueryForm/_styles.scss b/frontend/components/forms/queries/QueryForm/_styles.scss
index d1179c2077..c1bb2374c4 100644
--- a/frontend/components/forms/queries/QueryForm/_styles.scss
+++ b/frontend/components/forms/queries/QueryForm/_styles.scss
@@ -34,7 +34,7 @@
}
&__title {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
display: inline-block;
font-size: $large;
}
diff --git a/frontend/components/hosts/AddHostModal/_styles.scss b/frontend/components/hosts/AddHostModal/_styles.scss
index ac4ff68855..ba799b53b3 100644
--- a/frontend/components/hosts/AddHostModal/_styles.scss
+++ b/frontend/components/hosts/AddHostModal/_styles.scss
@@ -47,13 +47,13 @@
font-weight: $regular;
line-height: 20px;
letter-spacing: normal;
- color: $black;
+ color: $core-fleet-black;
margin: 8px 0 0 44px;
}
a {
font-size: $x-small;
- color: $core-blue;
+ color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
@@ -84,8 +84,8 @@
width: 24px;
height: 24px;
border-radius: 100px;
- border: 2px solid $core-blue;
- color: $core-blue;
+ border: 2px solid $core-vibrant-blue;
+ color: $core-vibrant-blue;
font-weight: $bold;
text-align: center;
margin-right: 16px;
@@ -118,16 +118,16 @@
pre,
code {
- background-color: $core-light-blue-grey;
- color: $core-medium-blue-grey;
- border: 1px solid $ui-borders;
+ background-color: $ui-off-white;
+ color: $core-fleet-black;
+ border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
padding: 7px 16px;
margin: 24px 0 0 44px;
}
&__error {
- color: $alert;
+ color: $ui-error;
}
}
diff --git a/frontend/components/loaders/ProgressBar/_styles.scss b/frontend/components/loaders/ProgressBar/_styles.scss
index fb28b40765..1c361ee2cc 100644
--- a/frontend/components/loaders/ProgressBar/_styles.scss
+++ b/frontend/components/loaders/ProgressBar/_styles.scss
@@ -1,6 +1,6 @@
.progress-bar {
display: flex;
- background-color: $ui-dark-grey;
+ background-color: $ui-fleet-black-25;
height: 10px;
overflow: hidden;
border-radius: 2px;
@@ -12,11 +12,11 @@
transition: width 300ms ease-in;
&--error {
- background-color: $alert;
+ background-color: $ui-error;
}
&--success {
- background-color: $success;
+ background-color: $ui-success;
}
}
}
diff --git a/frontend/components/loaders/Timer/_styles.scss b/frontend/components/loaders/Timer/_styles.scss
index 564d06c512..0bb784f622 100644
--- a/frontend/components/loaders/Timer/_styles.scss
+++ b/frontend/components/loaders/Timer/_styles.scss
@@ -1,4 +1,4 @@
.kolide-timer {
font-size: 14px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
diff --git a/frontend/components/modals/Modal/_styles.scss b/frontend/components/modals/Modal/_styles.scss
index 41dbfe0bcd..78b2d942d5 100644
--- a/frontend/components/modals/Modal/_styles.scss
+++ b/frontend/components/modals/Modal/_styles.scss
@@ -23,11 +23,11 @@
.button {
@include size(30px);
line-height: 30px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $x-large;
&:hover {
- color: $alert-light;
+ color: $ui-error;
}
}
}
@@ -37,14 +37,14 @@
font-weight: $regular;
text-align: left;
padding-bottom: 15px;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
display: flex;
justify-content: space-between;
}
&__modal_container {
@include position(absolute, 22px null null null);
- background-color: $white;
+ background-color: $core-white;
width: 658px;
padding: 40px;
border-radius: 8px;
diff --git a/frontend/components/packs/EditPackFormWrapper/_styles.scss b/frontend/components/packs/EditPackFormWrapper/_styles.scss
index e1913a7f8f..430a9de98a 100644
--- a/frontend/components/packs/EditPackFormWrapper/_styles.scss
+++ b/frontend/components/packs/EditPackFormWrapper/_styles.scss
@@ -7,7 +7,7 @@
@include ellipsis(80%);
.kolidecon {
- color: $ui-medium-grey;
+ color: $ui-gray;
}
}
@@ -15,7 +15,7 @@
font-size: 15px;
font-weight: $regular;
line-height: 2;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
max-width: 800px;
word-wrap: break-word;
}
diff --git a/frontend/components/packs/PacksList/Row/_styles.scss b/frontend/components/packs/PacksList/Row/_styles.scss
index 7f288588d2..ab17fd65a2 100644
--- a/frontend/components/packs/PacksList/Row/_styles.scss
+++ b/frontend/components/packs/PacksList/Row/_styles.scss
@@ -1,9 +1,9 @@
.packs-list-row {
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
cursor: pointer;
&--selected {
- background-color: $core-blue-label-down;
+ background-color: $ui-vibrant-blue-25;
}
&:focus {
@@ -11,7 +11,7 @@
}
&:hover {
- background-color: $core-blue-label-over;
+ background-color: $ui-vibrant-blue-10;
}
&:last-child {
@@ -19,7 +19,7 @@
}
&__td {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
padding: 7px 0;
@@ -48,16 +48,16 @@
&__status-icon {
&--enabled {
- color: $success;
+ color: $ui-success;
}
&--disabled {
- color: $alert;
+ color: $ui-error;
}
}
&__status-text {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $regular;
margin-left: 10px;
diff --git a/frontend/components/packs/PacksList/_styles.scss b/frontend/components/packs/PacksList/_styles.scss
index 5e48c2a640..1e71481e77 100644
--- a/frontend/components/packs/PacksList/_styles.scss
+++ b/frontend/components/packs/PacksList/_styles.scss
@@ -3,15 +3,15 @@
overflow: scroll;
&__wrapper {
- border: 1px solid $ui-borders;
+ border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
overflow: hidden;
margin-top: 16px;
}
thead {
- background-color: $core-light-blue-grey;
- border-bottom: 1px solid $ui-borders;
+ background-color: $ui-off-white;
+ border-bottom: 1px solid $ui-fleet-blue-15;
}
&__th {
@@ -41,6 +41,6 @@
&__empty-table {
text-align: center;
font-size: $x-small;
- color: $core-black;
+ color: $core-fleet-black;
}
}
diff --git a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
index a5c0f763d1..9b1ad30c13 100644
--- a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
+++ b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
@@ -1,6 +1,6 @@
.queries-list-row {
line-height: 38px;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
&__description {
max-width: 280px;
@@ -11,12 +11,12 @@
}
&--selected {
- background-color: $core-blue-label-down;
+ background-color: $ui-vibrant-blue-25;
}
&:hover {
cursor: pointer;
- background-color: $core-blue-label-over;
+ background-color: $ui-vibrant-blue-10;
}
&:active,
diff --git a/frontend/components/queries/QueriesList/_styles.scss b/frontend/components/queries/QueriesList/_styles.scss
index 24ea263ce7..59dfcebd86 100644
--- a/frontend/components/queries/QueriesList/_styles.scss
+++ b/frontend/components/queries/QueriesList/_styles.scss
@@ -1,6 +1,6 @@
.queries-list {
- background-color: $white;
- border: 1px solid $ui-borders;
+ background-color: $core-white;
+ border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
box-sizing: border-box;
margin-top: 16px;
@@ -11,8 +11,8 @@
width: 100%;
thead {
- background-color: $core-light-blue-grey;
- border-bottom: 1px solid $ui-borders;
+ background-color: $ui-off-white;
+ border-bottom: 1px solid $ui-fleet-blue-15;
.form-field {
margin: 0;
diff --git a/frontend/components/queries/QueryProgressDetails/_styles.scss b/frontend/components/queries/QueryProgressDetails/_styles.scss
index 83d6f3c0ff..dc5dfc075d 100644
--- a/frontend/components/queries/QueryProgressDetails/_styles.scss
+++ b/frontend/components/queries/QueryProgressDetails/_styles.scss
@@ -9,7 +9,7 @@
max-width: 420px;
em {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
font-size: 0.8em;
}
}
@@ -22,7 +22,7 @@
&__text-online {
&:before {
- background-color: $success;
+ background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -34,7 +34,7 @@
&__text-offline {
&:before {
- background-color: $ui-dark-grey;
+ background-color: $ui-fleet-black-25;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -46,7 +46,7 @@
&__text-error {
&:before {
- background-color: $alert;
+ background-color: $ui-error;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -57,7 +57,7 @@
}
&__text-results {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
}
&__btn-wrapper {
diff --git a/frontend/components/queries/QueryResultsTable/_styles.scss b/frontend/components/queries/QueryResultsTable/_styles.scss
index 25fe5772fb..6f261eb06b 100644
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@@ -1,7 +1,7 @@
.query-results-table {
display: flex;
flex-direction: column;
- background-color: $white;
+ background-color: $core-white;
width: 100%;
min-height: calc(500px + (#{$pad-base} * 2));
box-sizing: border-box;
@@ -20,10 +20,10 @@
}
&__filter-icon {
- color: $ui-dark-grey;
+ color: $ui-fleet-black-25;
&--is-active {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
@@ -34,7 +34,7 @@
&__results-table-wrapper {
display: flex;
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
border-radius: 3px;
overflow: scroll;
margin-top: 4px;
@@ -60,7 +60,7 @@
&__error-table-wrapper {
display: flex;
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
border-radius: 3px;
overflow: scroll;
margin-bottom: 40px;
@@ -71,16 +71,16 @@
&__table {
border-collapse: collapse;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
width: 100%;
}
thead {
- background-color: $core-light-blue-grey;
- color: $core-black;
+ background-color: $ui-off-white;
+ color: $core-fleet-black;
text-align: left;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
th {
padding: 12px 24px;
@@ -105,7 +105,7 @@
}
tbody {
- background-color: $white;
+ background-color: $core-white;
td {
padding: 12px 24px;
@@ -113,7 +113,7 @@
}
tr {
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
@@ -126,7 +126,7 @@
animation-fill-mode: forwards;
border-radius: 3px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
z-index: 99;
padding: 20px;
diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
index 5cfe1a64b7..9e6468be80 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
@@ -1,13 +1,13 @@
.scheduled-query-list-item {
outline: none;
cursor: pointer;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
}
&--selected {
- background-color: $core-blue-label-down;
+ background-color: $ui-vibrant-blue-25;
}
}
diff --git a/frontend/components/queries/ScheduledQueriesList/_styles.scss b/frontend/components/queries/ScheduledQueriesList/_styles.scss
index 2eb174901a..5e7a318285 100644
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@@ -1,6 +1,6 @@
.scheduled-queries-list {
- background-color: $white;
- border: 1px solid $ui-borders;
+ background-color: $core-white;
+ border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
box-sizing: border-box;
@@ -11,8 +11,8 @@
thead {
height: 50px;
- background-color: $core-light-blue-grey;
- border-bottom: 1px solid $ui-borders;
+ background-color: $ui-off-white;
+ border-bottom: 1px solid $ui-fleet-blue-15;
th {
font-size: $x-small;
@@ -73,7 +73,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: left;
- color: $core-black;
+ color: $core-fleet-black;
}
&:nth-child(3) {
@@ -81,7 +81,7 @@
font-weight: $regular;
line-height: 2.71;
letter-spacing: -0.5px;
- color: $core-black;
+ color: $core-fleet-black;
}
&:nth-child(4) {
@@ -90,7 +90,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: left;
- color: $core-black;
+ color: $core-fleet-black;
}
&:nth-child(5),
@@ -100,7 +100,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: center;
- color: $core-black;
+ color: $core-fleet-black;
.kolidecon {
font-size: 18px;
@@ -110,7 +110,7 @@
&:nth-child(7) {
text-align: center;
font-size: 18px;
- color: $core-black;
+ color: $core-fleet-black;
}
}
@@ -125,7 +125,7 @@
text-align: left;
h1 {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: 24px;
font-weight: $regular;
line-height: 1.96;
@@ -137,7 +137,7 @@
font-size: 20px;
line-height: 2;
letter-spacing: -0.4px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-weight: $regular;
margin: 0;
}
@@ -146,7 +146,7 @@
font-size: 16px;
font-weight: $regular;
line-height: 2.5;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 0;
}
@@ -161,7 +161,7 @@
font-size: 16px;
font-weight: $regular;
line-height: 2.5;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
index a7264d13a3..2c434f4466 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
@@ -5,7 +5,7 @@ $base-class: 'panel-group-item';
width: 100%;
font-size: $x-small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
text-align: left;
padding: 10px 0;
margin: 2px 0;
@@ -13,7 +13,7 @@ $base-class: 'panel-group-item';
&.#{$base-class}--selected {
font-weight: $bold;
- background-color: $core-blue-label-down;
+ background-color: $ui-vibrant-blue-25;
.#{$base-class}__count {
font-weight: $bold;
diff --git a/frontend/components/side_panels/HostSidePanel/_styles.scss b/frontend/components/side_panels/HostSidePanel/_styles.scss
index 6cbc10f2c7..2af306fd05 100644
--- a/frontend/components/side_panels/HostSidePanel/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/_styles.scss
@@ -1,5 +1,5 @@
.host-side-panel {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding: 14px 20px 22px;
.input-icon-field {
@@ -17,7 +17,7 @@
h3 {
font-size: $x-small;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 24px 0 10px 16px;
}
@@ -27,7 +27,7 @@
}
&__panel-group-item {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
width: 100%;
&--filter {
@@ -38,7 +38,7 @@
top: 10px;
left: 12px;
font-size: 20px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
}
}
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
index 224bb6c6b0..f0a983b9c3 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
@@ -2,7 +2,7 @@
padding: 16px 20px 0;
&__description {
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
font-size: 14px;
word-wrap: break-word;
}
@@ -18,20 +18,20 @@
}
&__pack-icon {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
margin-right: 11px;
}
&__pack-name {
@include ellipsis(250px);
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $small;
font-weight: $regular;
margin: 0;
}
&__query-icon {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
font-size: 16px;
margin-right: 15px;
}
@@ -45,7 +45,7 @@
&__query-name {
@include ellipsis(240px);
font-size: $small;
- color: $core-blue;
+ color: $core-vibrant-blue;
text-decoration: none;
}
}
diff --git a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
index 548c763502..9c69f58c4c 100644
--- a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
@@ -1,7 +1,7 @@
.pack-info-side-panel {
- background-color: $white;
+ background-color: $core-white;
bottom: 0;
- border-left: 1px solid $ui-borders;
+ border-left: 1px solid $ui-fleet-blue-15;
box-sizing: border-box;
overflow: scroll;
padding: 30px;
@@ -9,8 +9,8 @@
&__title {
font-size: $medium;
font-weight: $regular;
- color: $core-dark-blue-grey;
- border-bottom: 1px solid $ui-borders;
+ color: $core-fleet-black;
+ border-bottom: 1px solid $ui-fleet-blue-15;
padding-bottom: 8px;
margin: 0 0 4px;
}
@@ -18,7 +18,7 @@
&__subtitle {
font-size: $small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
margin: 0 0 10px;
padding-top: 15px;
}
@@ -26,14 +26,14 @@
p,
ul {
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
dl {
dt {
font-weight: $bold;
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
.kolidecon {
font-size: 20px;
@@ -47,7 +47,7 @@
dd {
font-size: 13px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin-left: 30px;
}
}
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
index dd1a275247..ff3e0787af 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@@ -7,7 +7,7 @@
font-size: $small;
.kolidecon {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
margin-right: 6px;
}
}
@@ -21,7 +21,7 @@
&__description {
font-size: $small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
word-wrap: break-word;
}
@@ -48,6 +48,6 @@
text-decoration: none;
font-size: $small;
vertical-align: middle;
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
diff --git a/frontend/components/side_panels/QuerySidePanel/_styles.scss b/frontend/components/side_panels/QuerySidePanel/_styles.scss
index feca160ec0..efd840aaea 100644
--- a/frontend/components/side_panels/QuerySidePanel/_styles.scss
+++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss
@@ -5,7 +5,7 @@
margin: 0 0 16px;
font-size: $x-small;
font-weight: $bold;
- color: $core-darkest-blue-grey;
+ color: $core-fleet-black;
}
&__choose-table {
@@ -23,13 +23,13 @@
&__description {
font-size: $x-small;
font-style: italic;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
margin: 0;
}
&__platforms {
font-size: 14px;
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
list-style: none;
margin: 0 0 24px;
padding: 0;
@@ -72,7 +72,7 @@
display: flex;
margin: 0 0 15px;
padding-top: $pad-half;
- border-top: 1px solid $ui-borders;
+ border-top: 1px solid $ui-fleet-blue-15;
}
&__suggestion {
@@ -81,7 +81,7 @@
line-height: 1.71;
letter-spacing: 0.5px;
text-align: left;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
}
&__load-suggestion {
@@ -96,8 +96,8 @@
display: flex;
align-items: center;
justify-content: space-between;
- border-top: 1px solid $ui-borders;
- color: $core-dark-blue-grey;
+ border-top: 1px solid $ui-fleet-blue-15;
+ color: $core-fleet-black;
font-size: px-to-rem(14);
padding: 12px 0;
@@ -108,12 +108,12 @@
&__name {
border-radius: 4px;
- border: solid 1px $core-dark-blue-grey;
+ border: solid 1px $core-fleet-black;
padding: 4px 10px;
box-sizing: border-box;
font-size: $xx-small;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
}
&__description {
@@ -123,14 +123,14 @@
&__type {
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
&__help {
margin-left: 12px;
vertical-align: text-bottom;
font-size: 20px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
index 20796527aa..f86382e969 100644
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
@@ -4,7 +4,7 @@
font-size: 18px;
font-weight: $bold;
letter-spacing: -0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
margin: 0 0 10px;
}
@@ -24,7 +24,7 @@
font-size: 16px;
font-weight: $bold;
letter-spacing: -0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
border-bottom: 1px solid #eaeefb;
padding: 0 0 9px;
margin: 0 0 9px;
@@ -35,7 +35,7 @@
font-size: 14px;
font-weight: $regular;
line-height: 1.71;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
}
diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
index 87eefbe25e..9e6716f141 100644
--- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
+++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
@@ -1,8 +1,8 @@
.secondary-side-panel-container {
align-self: stretch;
- background-color: $core-light-blue-grey;
+ background-color: $ui-off-white;
box-sizing: border-box;
- border-left: 1px solid $ui-medium-grey;
+ border-left: 1px solid $ui-gray;
overflow: auto;
width: $sidepanel-width;
diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss
index 780369ba44..66196599d6 100644
--- a/frontend/components/side_panels/SiteNavHeader/_styles.scss
+++ b/frontend/components/side_panels/SiteNavHeader/_styles.scss
@@ -16,7 +16,7 @@
@include ellipsis(110px);
margin: 0;
padding: 0;
- color: $white;
+ color: $core-white;
font-size: $small;
font-weight: $bold;
position: relative;
diff --git a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
index d516e43583..eb2397fb2a 100644
--- a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
+++ b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
@@ -5,7 +5,7 @@
border-bottom: 3px solid transparent;
&:hover {
- background-color: $core-black-over;
+ background-color: $core-fleet-black;
}
&--multiple.site-nav-item--active {
@@ -17,8 +17,8 @@
}
.site-nav-item__link {
- border-right: 3px solid $core-blue;
- background-color: $core-black;
+ border-right: 3px solid $core-vibrant-blue;
+ background-color: $core-fleet-black;
}
}
@@ -39,7 +39,7 @@
}
a {
- color: $white;
+ color: $core-white;
text-align: center;
display: flex;
align-items: center;
@@ -47,11 +47,11 @@
}
&--active {
- border-bottom: 3px solid $core-blue;
- background-color: $core-black;
+ border-bottom: 3px solid $core-vibrant-blue;
+ background-color: $core-fleet-black;
&:hover {
- background-color: $core-black;
+ background-color: $core-fleet-black;
}
.site-nav-item__name {
diff --git a/frontend/components/side_panels/UserMenu/_styles.scss b/frontend/components/side_panels/UserMenu/_styles.scss
index 21230e3a29..a1fe83f314 100644
--- a/frontend/components/side_panels/UserMenu/_styles.scss
+++ b/frontend/components/side_panels/UserMenu/_styles.scss
@@ -12,7 +12,7 @@
min-width: 125px;
&:hover {
- background-color: $info;
+ background-color: $ui-vibrant-blue-10;
color: #3e4771;
}
}
diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss
index 80b2441624..c5706900df 100644
--- a/frontend/layouts/CoreLayout/_styles.scss
+++ b/frontend/layouts/CoreLayout/_styles.scss
@@ -9,13 +9,13 @@
margin: 0;
padding: 0;
position: relative;
- background-color: $white;
+ background-color: $core-white;
display: flex;
flex-direction: column;
}
.site-nav {
- background: $core-gradient-horizontal;
+ background: $gradients-dark-gradient;
box-sizing: border-box;
display: flex;
top: 0;
diff --git a/frontend/pages/ConfirmInvitePage/_styles.scss b/frontend/pages/ConfirmInvitePage/_styles.scss
index 9851942bf3..9ebb1d518f 100644
--- a/frontend/pages/ConfirmInvitePage/_styles.scss
+++ b/frontend/pages/ConfirmInvitePage/_styles.scss
@@ -1,5 +1,5 @@
.confirm-invite-page {
- background-color: $white;
+ background-color: $core-white;
border-radius: 10px;
width: 436px;
padding: 40px;
@@ -11,13 +11,13 @@
font-weight: $bold;
line-height: 0.72;
letter-spacing: 0.6px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
margin: 0;
padding: 0;
}
p {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: 14px;
font-weight: $regular;
}
diff --git a/frontend/pages/Fleet404/_styles.scss b/frontend/pages/Fleet404/_styles.scss
index 28be6a9db6..260f9543c9 100644
--- a/frontend/pages/Fleet404/_styles.scss
+++ b/frontend/pages/Fleet404/_styles.scss
@@ -5,7 +5,7 @@
}
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
text-decoration: none;
&:hover {
@@ -39,7 +39,7 @@
display: inline;
font-size: 32px;
max-width: 479px;
- color: $core-black;
+ color: $core-fleet-black;
span {
font-weight: $bold;
diff --git a/frontend/pages/Fleet500/_styles.scss b/frontend/pages/Fleet500/_styles.scss
index 612d86e3c2..98771ed4e9 100644
--- a/frontend/pages/Fleet500/_styles.scss
+++ b/frontend/pages/Fleet500/_styles.scss
@@ -4,7 +4,7 @@
}
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
text-decoration: none;
display: block;
margin-top: 16px;
@@ -43,7 +43,7 @@
> h1 {
font-size: 32px;
min-width: 479px;
- color: $core-black;
+ color: $core-fleet-black;
span {
font-weight: $bold;
diff --git a/frontend/pages/ForgotPasswordPage/_styles.scss b/frontend/pages/ForgotPasswordPage/_styles.scss
index 65dfbaf266..4c66cf501c 100644
--- a/frontend/pages/ForgotPasswordPage/_styles.scss
+++ b/frontend/pages/ForgotPasswordPage/_styles.scss
@@ -13,11 +13,11 @@
font-size: $small;
span {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
&__email {
- color: $core-purple;
+ color: $core-fleet-purple;
}
}
diff --git a/frontend/pages/LoginSuccessfulPage/_styles.scss b/frontend/pages/LoginSuccessfulPage/_styles.scss
index b7c47153ab..f561d11f9d 100644
--- a/frontend/pages/LoginSuccessfulPage/_styles.scss
+++ b/frontend/pages/LoginSuccessfulPage/_styles.scss
@@ -1,5 +1,5 @@
.login-success {
- background-color: $white;
+ background-color: $core-white;
margin-top: 20px;
padding: 40px;
text-align: center;
@@ -14,6 +14,6 @@
&__sub-text {
font-size: $x-small;
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
}
}
diff --git a/frontend/pages/LogoutPage/_styles.scss b/frontend/pages/LogoutPage/_styles.scss
index 5a3b372e93..aa680b042b 100644
--- a/frontend/pages/LogoutPage/_styles.scss
+++ b/frontend/pages/LogoutPage/_styles.scss
@@ -8,12 +8,12 @@
&__tab {
align-self: center;
- background-color: $white;
+ background-color: $core-white;
height: 30px;
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
- box-shadow: 0 5px 30px 0 rgba($black, 0.3);
+ box-shadow: 0 5px 30px 0 rgba($core-fleet-black, 0.3);
width: 376px;
}
}
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
index 8bda29c0ed..dc69cf198a 100644
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@@ -15,7 +15,7 @@
width: 150px;
font-size: $small;
font-weight: $regular;
- color: $white;
+ color: $core-white;
position: relative;
&::before {
@@ -23,7 +23,7 @@
position: absolute;
width: 200px;
height: 2px;
- background-color: $core-blue;
+ background-color: $core-vibrant-blue;
bottom: 43px;
left: 87px;
@@ -56,29 +56,29 @@
&--active {
font-weight: $bold;
- color: $white;
+ color: $core-white;
}
&--1 {
&::after {
- border: 2px solid $white;
+ border: 2px solid $core-white;
}
&.registration-breadcrumbs__page--active {
&::before {
- background: linear-gradient(to right, $white 50%, $core-blue 50%);
+ background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
- border: 2px solid $white;
+ border: 2px solid $core-white;
}
}
&.registration-breadcrumbs__page--complete {
&::before {
- background-color: $white;
+ background-color: $core-white;
background-size: auto;
z-index: 2;
}
@@ -86,7 +86,7 @@
&::after {
@include size(28px);
content: '\f035';
- color: $white;
+ color: $core-white;
border: 0;
}
}
@@ -94,30 +94,30 @@
&--2 {
&::after {
- border: solid 1px $core-blue;
+ border: solid 1px $core-vibrant-blue;
}
&.registration-breadcrumbs__page--active {
&::before {
- background: linear-gradient(to right, $white 50%, $core-blue 50%);
+ background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
- border: 2px solid $white;
+ border: 2px solid $core-white;
}
}
&.registration-breadcrumbs__page--complete {
&::before {
- background: $white;
+ background: $core-white;
z-index: 2;
}
&::after {
@include size(28px);
content: '\f035';
- color: $white;
+ color: $core-white;
border: 0;
}
}
@@ -129,18 +129,18 @@
}
&::after {
- border: solid 1px $core-blue;
+ border: solid 1px $core-vibrant-blue;
}
&.registration-breadcrumbs__page--active {
&::before {
- background: linear-gradient(to right, $white 50%, $core-blue 50%);
+ background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
- border: 2px solid $white;
+ border: 2px solid $core-white;
}
}
@@ -148,7 +148,7 @@
&::after {
@include size(28px);
content: '\f035';
- color: $white;
+ color: $core-white;
border: 0;
}
}
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index ce5ee01e23..0da76040e2 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@@ -32,7 +32,7 @@
a {
display: block;
- color: $core-blue;
+ color: $core-vibrant-blue;
text-align: center;
position: relative;
z-index: 1;
@@ -56,17 +56,17 @@
&__avatar {
@include size(120px);
- border: solid 1px $ui-borders;
+ border: solid 1px $ui-fleet-blue-15;
margin: 0 auto;
display: block;
}
&__more-info-detail {
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
.kolidecon {
- color: $ui-medium-grey;
+ color: $ui-gray;
font-size: 18px;
margin-right: 11px;
}
@@ -93,7 +93,7 @@
margin: 0 0 4px;
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
}
}
@@ -111,7 +111,7 @@
top: 8px;
right: 10px;
font-size: 18px;
- color: $core-blue;
+ color: $core-vibrant-blue;
&:active {
top: 8px;
@@ -121,8 +121,8 @@
&__secret-input {
input {
border-radius: 2px;
- background-color: $core-light-blue-grey;
- border-color: $ui-borders;
+ background-color: $ui-off-white;
+ border-color: $ui-fleet-blue-15;
padding-right: 36px;
font-family: 'SourceCodePro', $monospace;
diff --git a/frontend/pages/admin/AppSettingsPage/_styles.scss b/frontend/pages/admin/AppSettingsPage/_styles.scss
index a9618ec914..33806caf17 100644
--- a/frontend/pages/admin/AppSettingsPage/_styles.scss
+++ b/frontend/pages/admin/AppSettingsPage/_styles.scss
@@ -3,15 +3,15 @@
&__page-description {
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
@include sticky-settings-description;
}
h2 {
font-size: 20px;
font-weight: $regular;
- color: $core-black;
- border-bottom: solid 1px $ui-borders;
+ color: $core-fleet-black;
+ border-bottom: solid 1px $ui-fleet-blue-15;
margin: 0 0 15px;
padding: 0 0 8px;
@@ -28,7 +28,7 @@
small {
font-size: $x-small;
font-weight: $regular;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
}
}
@@ -54,7 +54,7 @@
}
a {
- color: $black;
+ color: $core-fleet-black;
text-decoration: none;
}
}
diff --git a/frontend/pages/admin/OsqueryOptionsPage/_styles.scss b/frontend/pages/admin/OsqueryOptionsPage/_styles.scss
index 5308e43f65..f8e8ab103b 100644
--- a/frontend/pages/admin/OsqueryOptionsPage/_styles.scss
+++ b/frontend/pages/admin/OsqueryOptionsPage/_styles.scss
@@ -9,7 +9,7 @@
&__page-description {
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
@@ -26,7 +26,7 @@
}
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;
@@ -53,7 +53,7 @@
font-weight: $regular;
line-height: 1.6;
letter-spacing: 0.5px;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
}
}
diff --git a/frontend/pages/admin/SettingsWrapper/_styles.scss b/frontend/pages/admin/SettingsWrapper/_styles.scss
index 923208b592..45d3be0e3a 100644
--- a/frontend/pages/admin/SettingsWrapper/_styles.scss
+++ b/frontend/pages/admin/SettingsWrapper/_styles.scss
@@ -7,7 +7,7 @@
padding-top: 15px;
position: sticky;
top: 0;
- background-color: $white;
+ background-color: $core-white;
z-index: 2;
}
@@ -21,7 +21,7 @@
.react-tabs {
.react-tabs__tab-list {
- border-bottom: 1px solid $ui-medium-grey;
+ border-bottom: 1px solid $ui-gray;
}
&__tab {
@@ -61,7 +61,7 @@
&__tab--selected, &__tab--selected:focus {
font-weight: $bold;
- border-bottom: 1px solid $core-blue;
+ border-bottom: 1px solid $core-vibrant-blue;
}
}
}
diff --git a/frontend/pages/admin/UserManagementPage/_styles.scss b/frontend/pages/admin/UserManagementPage/_styles.scss
index 408bed73ee..e66531df1d 100644
--- a/frontend/pages/admin/UserManagementPage/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/_styles.scss
@@ -3,7 +3,7 @@
&__page-description {
font-size: $x-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
@@ -14,7 +14,7 @@
&__config-button {
text-decoration: none;
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $x-small;
margin-left: $pad-medium;
}
@@ -31,19 +31,19 @@
&--active {
&:before {
- background-color: $success;
+ background-color: $ui-success;
}
}
&--no-access {
&:before {
- background-color: $ui-dark-grey;
+ background-color: $ui-offline;
}
}
&--invite-pending {
&:before {
- background-color: $warning;
+ background-color: $ui-warning;
}
}
diff --git a/frontend/pages/admin/UserManagementPage/components/DeleteUserForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/DeleteUserForm/_styles.scss
index 6857560a9b..badbb4f806 100644
--- a/frontend/pages/admin/UserManagementPage/components/DeleteUserForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/DeleteUserForm/_styles.scss
@@ -6,7 +6,7 @@
}
&__warning {
- color: $alert
+ color: $ui-error;
}
&__btn-wrap {
diff --git a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss b/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
index 5d25597a1c..257e72c44f 100644
--- a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
@@ -20,7 +20,7 @@
}
p {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
index f06a260d62..7c48055749 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
@@ -1,7 +1,7 @@
.selected-teams-form {
- border: 1px solid $ui-borders;
+ border: 1px solid $ui-fleet-blue-15;
border-radius: $border-radius;
- background-color: $core-light-blue-grey;
+ background-color: $ui-off-white;
padding: $pad-medium;
&__team-item {
diff --git a/frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss
index d7967aa688..03ba3e3b4d 100644
--- a/frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss
@@ -10,14 +10,14 @@
&__label {
font-size: $x-small;
font-weight: $bold;
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
padding-left: 32px;
}
}
}
&__label {
- color: $core-black;
+ color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin-bottom: 4px;
@@ -33,7 +33,7 @@
}
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index a4d7dcc5ba..d9b7a52672 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -30,7 +30,7 @@
}
&__header {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $bold;
}
@@ -55,7 +55,7 @@
.title {
flex-direction: row;
justify-content: space-between;
- border-bottom: 1px solid $ui-borders;
+ border-bottom: 1px solid $ui-fleet-blue-15;
margin: 0;
&__inner {
@@ -75,7 +75,7 @@
.last-fetched {
font-size: $xx-small;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
margin: 0;
padding-left: $pad-small;
}
@@ -112,12 +112,12 @@
}
.status {
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
text-transform: capitalize;
&--online {
&:before {
- background-color: $success;
+ background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@@ -129,7 +129,7 @@
&--offline {
&:before {
- background-color: $ui-dark-grey;
+ background-color: $ui-fleet-black-25;
border-radius: 100%;
content: ' ';
display: inline-block;
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 8747466ca6..f716016084 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -38,13 +38,13 @@
h2 {
text-transform: uppercase;
- color: $core-dark-blue-grey;
+ color: $core-fleet-blue;
font-weight: $regular;
font-size: 16px;
}
p {
- color: $core-medium-blue-grey;
+ color: $core-fleet-blue;
margin: 0;
font-size: $x-small;
font-style: italic;
@@ -67,13 +67,13 @@
&--online {
&:before {
- background-color: $success;
+ background-color: $ui-success;
}
}
&--offline {
&:before {
- background-color: $ui-dark-grey;
+ background-color: $ui-offline;
}
}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
index 5767ad6465..1c2ee0ce27 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
@@ -20,7 +20,7 @@
}
p {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
index 49ccfd4fec..77eb7aa633 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
@@ -9,7 +9,7 @@
font-weight: $regular;
line-height: normal;
letter-spacing: normal;
- color: $core-black;
+ color: $core-fleet-black;
}
h2 {
@@ -17,20 +17,20 @@
font-weight: $bold;
margin: 0 0 24px;
line-height: 20px;
- color: $core-black;
+ color: $core-fleet-black;
}
ul {
margin: 0;
padding: 0;
- color: $core-black;
+ color: $core-fleet-black;
list-style: none;
li {
&::before {
content: '•';
- color: $core-blue;
+ color: $core-vibrant-blue;
margin-right: 16px;
}
}
@@ -52,7 +52,7 @@
}
p {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;
@@ -74,14 +74,14 @@
margin-top: 24px;
p {
- color: $core-black;
+ color: $core-fleet-black;
font-weight: $bold;
font-size: $x-small;
margin: 0;
}
a {
- color: $core-blue;
+ color: $core-vibrant-blue;
font-weight: $regular;
font-size: $x-small;
text-decoration: none;
diff --git a/frontend/pages/packs/AllPacksPage/_styles.scss b/frontend/pages/packs/AllPacksPage/_styles.scss
index bbc1ff335f..19dd35ab6c 100644
--- a/frontend/pages/packs/AllPacksPage/_styles.scss
+++ b/frontend/pages/packs/AllPacksPage/_styles.scss
@@ -1,6 +1,6 @@
.all-packs-page {
&__bulk-action-btn {
- color: $core-purple;
+ color: $core-fleet-purple;
font-size: 15px;
font-weight: $regular;
margin-left: 26px;
@@ -9,19 +9,19 @@
margin-left: 0;
i {
- color: $alert;
+ color: $ui-error;
}
}
&--enable {
i {
- color: $success;
+ color: $ui-success;
}
}
&--delete {
i {
- color: $core-medium-blue-grey;
+ color: $core-fleet-black;
}
}
}
@@ -33,7 +33,7 @@
}
&__pack-count {
- color: $core-darkest-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin: 0;
@@ -55,7 +55,7 @@
top: 36px;
left: 9px;
font-size: 18px;
- color: $ui-medium-grey;
+ color: $ui-gray;
}
}
@@ -68,7 +68,7 @@
}
&__table {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $small;
width: 100%;
}
diff --git a/frontend/pages/packs/PackComposerPage/_styles.scss b/frontend/pages/packs/PackComposerPage/_styles.scss
index aa735da0a1..3bdf99315f 100644
--- a/frontend/pages/packs/PackComposerPage/_styles.scss
+++ b/frontend/pages/packs/PackComposerPage/_styles.scss
@@ -1,6 +1,6 @@
.pack-composer {
&__pack-form {
- background-color: $white;
+ background-color: $core-white;
border-radius: 3px;
}
}
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index e690d017b1..a92574d644 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -15,7 +15,7 @@
}
&__query-count {
- color: $core-dark-blue-grey;
+ color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin: 0 12px 0 0;
@@ -51,7 +51,7 @@
top: 36px;
left: 9px;
font-size: 18px;
- color: $ui-medium-grey;
+ color: $ui-gray;
}
}
diff --git a/frontend/styles/global/_forms.scss b/frontend/styles/global/_forms.scss
index 11220d5fbd..b09e41a306 100644
--- a/frontend/styles/global/_forms.scss
+++ b/frontend/styles/global/_forms.scss
@@ -1,6 +1,6 @@
.input-with-icon {
::placeholder {
- color: $core-medium-blue-grey;
+ color: $ui-fleet-black-50;
opacity: 1;
}
}
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index a7c1dfe534..8c27428a2c 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -8,7 +8,7 @@ html {
}
body {
- color: $core-black;
+ color: $core-fleet-black;
padding: 0;
margin: 0;
font-family: 'Nunito Sans', sans-serif;
@@ -37,16 +37,16 @@ h1 {
font-size: $large;
font-weight: $regular;
letter-spacing: -0.5px;
- color: $core-black;
+ color: $core-fleet-black;
margin: 0;
}
a {
- color: $core-purple;
+ color: $core-fleet-purple;
}
.wrapper {
- background: $core-gradient;
+ background: $gradients-dark-gradient-vertical;
margin: 0;
}
@@ -54,8 +54,8 @@ a {
.body-wrap {
padding: 40px 30px 0;
border-radius: 3px;
- background-color: $white;
- border: solid 1px $white;
+ background-color: $core-white;
+ border: solid 1px $core-white;
min-width: 910px;
@at-root {
@@ -91,7 +91,7 @@ button {
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
- -webkit-text-fill-color: $core-dark-blue-grey !important; //sass-lint:disable-line no-important
+ -webkit-text-fill-color: $core-fleet-black !important; //sass-lint:disable-line no-important
}
}
diff --git a/frontend/styles/global/_styles.scss b/frontend/styles/global/_styles.scss
index d52413d960..625c4e9249 100644
--- a/frontend/styles/global/_styles.scss
+++ b/frontend/styles/global/_styles.scss
@@ -31,14 +31,14 @@
&.left {
&::after {
- border-color: transparent $white transparent transparent;
+ border-color: transparent $core-white transparent transparent;
border-width: 15px;
right: 99%;
top: 23px;
}
&::before {
- border-color: transparent $core-dark-blue-grey transparent transparent;
+ border-color: transparent $core-fleet-blue transparent transparent;
border-width: 16px;
right: 99%;
top: 22px;
@@ -48,14 +48,14 @@
&.right {
&::after {
- border-color: transparent transparent transparent $white;
+ border-color: transparent transparent transparent $core-white;
border-width: 15px;
left: 99%;
top: 23px;
}
&::before {
- border-color: transparent transparent transparent $core-dark-blue-grey;
+ border-color: transparent transparent transparent $core-fleet-blue;
border-width: 16px;
left: 99%;
top: 22px;
diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss
index 0017743425..9ccdfee016 100644
--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@@ -1,42 +1,39 @@
-// Fleet brand colors
-$white: #fff;
-$black: #000;
-$core-gradient: linear-gradient(360deg, #201e43 0%, #353d62 100%);
-$core-gradient-horizontal: linear-gradient(270deg, #201E43 0%, #353D62 100%);
-$core-black: #192147;
-$core-blue: #6a67fe;
-$core-blue-selected: rgba(106, 103, 254, 0.2);
-$core-purple: #ae6ddf;
-$core-red: #ff5c83;
-$core-medium-blue-grey: #506e92;
-$core-dark-blue-grey: #3e4771;
-$core-darkest-blue-grey: #353d62;
-$core-light-blue-grey: #f9fafc;
-$core-fleet-black: #201e43;
-$core-blue-green: #25c3ba;
-$ui-borders: #dbe3e5;
+// Core
+$core-fleet-black: #192147;
+$core-fleet-blue: #3e4771;
+$core-vibrant-blue: #6a67fe;
+$core-vibrant-red: #ff5c83;
+$core-fleet-purple: #ae6ddf;
+$core-white: #ffffff;
+
+// UI
+$ui-fleet-black-50: #8b8fa2;
+$ui-fleet-black-25: #c5c7d1;
+$ui-fleet-blue-15: #e2e4ea;
+$ui-dark-blue-gray: #afbec1;
+$ui-blue-gray: #dbe3e5;
+$ui-gray: #e3e3e3;
$ui-light-grey: #fafafa;
-$ui-medium-grey: #e3e3e3;
-$ui-dark-grey: #afbec1;
+$ui-off-white: #f9fafc;
+$ui-vibrant-blue-25: #d9d9fe;
+$ui-vibrant-blue-10: #f1f0ff;
+
+// Notifications & status
+$ui-offline: #8b8fa2;
+$ui-success: #3DB67B;
+$ui-warning: #ebbc43;
+$ui-error: #d66c7b;
+$ui-info: #6a67fe;
+
+// Gradients
+$gradients-dark-gradient: linear-gradient(270deg, #201e43 0%, #353d62 100%);
+$gradients-dark-gradient-vertical: linear-gradient(360deg, #201e43 0%, #353d62 100%);
+$gradients-bright-gradient: linear-gradient(180deg, #ae6ddf 0%, #6a67fe 100%);
// Colors for over (hover) and down (active) buttons styles
-$core-red-over: #e93661;
-$core-red-down: #cb3559;
-$core-blue-over: #5855eb;
-$core-blue-down: #3f3cd4;
-$core-dark-blue-grey-over: #426186;
-$core-dark-blue-grey-down: #345073;
-$core-blue-label-over: rgba(106, 103, 254, 0.1);
-$core-blue-label-down: rgba(106, 103, 254, 0.2);
-$core-black-over: rgba(25, 33, 71, 0.5);
-
-$alert: #ff5c83;
-$alert-light: #ffb5b2;
-$brand-light: #c38dec;
-$core-blue-ultralight: #edd6ff;
-$button-shadow: #734893;
-$success: #27d77e;
-$success-light: #48da90;
-$warning: #fff4d8;
-$warning-border: #ffeab5;
-$info: #f1f0ff;
+$core-vibrant-red-over: #e93661;
+$core-vibrant-red-down: #cb3559;
+$core-vibrant-blue-over: #5855eb;
+$core-vibrant-blue-down: #3f3cd4;
+$core-fleet-blue-over: #303860;
+$core-fleet-blue-down: $core-fleet-black;
diff --git a/frontend/styles/var/mixins.scss b/frontend/styles/var/mixins.scss
index b4445a3811..0f60f836a8 100644
--- a/frontend/styles/var/mixins.scss
+++ b/frontend/styles/var/mixins.scss
@@ -32,7 +32,7 @@ $max-width: 2560px;
// this is the current spacing needed to keep the description looking correct under the sub nav when scrolling.
top: 97px;
z-index: 2;
- background-color: $white;
+ background-color: $core-white;
margin: 0;
padding: 40px 0 54px 0;
}