diff --git a/client/src/components/AddContentBlockButton.vue b/client/src/components/AddContentBlockButton.vue index dbff0f03..9af880d0 100644 --- a/client/src/components/AddContentBlockButton.vue +++ b/client/src/components/AddContentBlockButton.vue @@ -47,7 +47,7 @@ &__icon { height: 57px; - fill: $color-grey; + fill: $color-silver-dark; } } diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue index 565d50d8..a1266a67 100644 --- a/client/src/components/AddContentElement.vue +++ b/client/src/components/AddContentElement.vue @@ -22,14 +22,14 @@ .add-content-element { display: flex; justify-content: center; - border-bottom: 2px solid $color-grey; + border-bottom: 2px solid $color-silver-dark; margin-bottom: 21px + 25px; cursor: pointer; &__icon { width: 40px; height: 40px; - fill: $color-grey; + fill: $color-silver-dark; margin-bottom: -21px; background-color: $color-white; border-radius: 50px; diff --git a/client/src/components/AddObjectiveGroupButton.vue b/client/src/components/AddObjectiveGroupButton.vue index 6961e06d..8fe426cc 100644 --- a/client/src/components/AddObjectiveGroupButton.vue +++ b/client/src/components/AddObjectiveGroupButton.vue @@ -54,11 +54,11 @@ &__icon { width: 25px; height: 25px; - fill: $color-grey; + fill: $color-silver-dark; } &__text { - color: $color-grey; + color: $color-silver-dark; font-family: $sans-serif-font-family; } } diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue index 6eee2b4c..c84a70b9 100644 --- a/client/src/components/AddWidget.vue +++ b/client/src/components/AddWidget.vue @@ -60,7 +60,7 @@ &__add { width: 80px; - fill: $color-grey; + fill: $color-silver-dark; } &--reverse { diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue index 11ed0399..6c88ba23 100644 --- a/client/src/components/AssignmentWithSubmissions.vue +++ b/client/src/components/AssignmentWithSubmissions.vue @@ -84,7 +84,7 @@ &__link { display: block; &:first-of-type { - border-top: 1px solid $color-grey; + border-top: 1px solid $color-silver-dark; } } diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue index 50d3c3a7..4e7a092c 100644 --- a/client/src/components/ColorChooser.vue +++ b/client/src/components/ColorChooser.vue @@ -56,13 +56,13 @@ padding: 10px; &--selected { - border: 1px solid $color-darkgrey-1; + border: 1px solid $color-charcoal-dark; } } &__selected-icon { width: 17px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; } &__color { diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue index 4abe4df6..d839f2b9 100644 --- a/client/src/components/ContentBlock.vue +++ b/client/src/components/ContentBlock.vue @@ -150,6 +150,8 @@ } &--task { + @include light-border(bottom); + .content-block__title { color: $color-brand; margin-top: $default-padding; diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue index 153d4f5d..edbbf669 100644 --- a/client/src/components/FilterBar.vue +++ b/client/src/components/FilterBar.vue @@ -65,7 +65,7 @@ z-index: 9; padding: 0 24px; height: 50px; - background-color: $color-lightgrey; + background-color: $color-silver-light; display: flex; align-items: center; justify-items: left; diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue index b3a9e9d1..d9fd0f77 100644 --- a/client/src/components/HelpfulTooltip.vue +++ b/client/src/components/HelpfulTooltip.vue @@ -31,7 +31,7 @@ &__icon { width: 20px; height: 20px; - fill: $color-grey; + fill: $color-silver-dark; } &__tooltip { @@ -47,7 +47,7 @@ width: auto; background-color: $color-white; - border: 1px solid $color-grey; + border: 1px solid $color-silver-dark; border-radius: 5px; padding: $small-spacing; @include small-text; @@ -58,8 +58,8 @@ left: 0; top: 18px; margin-left: -1px; - border-left: 1px solid $color-grey; - border-top: 1px solid $color-grey; + border-left: 1px solid $color-silver-dark; + border-top: 1px solid $color-silver-dark; background-color: $color-white; width: 10px; height: 10px; diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue index bba0f6d4..20fba9e5 100644 --- a/client/src/components/LogoutWidget.vue +++ b/client/src/components/LogoutWidget.vue @@ -25,7 +25,7 @@ @import "@/styles/_variables.scss"; .logout-widget { - color: $color-grey; + color: $color-silver-dark; display: flex; align-items: center; diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue index 46c1aeb0..23157d55 100644 --- a/client/src/components/MobileHeader.vue +++ b/client/src/components/MobileHeader.vue @@ -48,7 +48,7 @@ &__hamburger { width: 30px; height: 30px; - fill: $color-grey; + fill: $color-silver-dark; } } diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue index 3fb0f7c8..6bd145c3 100644 --- a/client/src/components/Modal.vue +++ b/client/src/components/Modal.vue @@ -58,7 +58,7 @@ background-color: $color-white; border-radius: 12px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); - border: 1px solid $color-lightgrey; + border: 1px solid $color-silver-light; display: -ms-grid; @supports (display: grid) { display: grid; @@ -130,7 +130,7 @@ grid-area: header; -ms-grid-row: 1; padding: 10px $modal-lateral-padding; - border-bottom: 1px solid $color-lightgrey; + border-bottom: 1px solid $color-silver-light; } &__body { @@ -162,7 +162,7 @@ &__footer { grid-area: footer; -ms-grid-row: 3; - border-top: 1px solid $color-lightgrey; + border-top: 1px solid $color-silver-light; padding: 16px $modal-lateral-padding; } } diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue index d964f269..863129ba 100644 --- a/client/src/components/MoreOptionsWidget.vue +++ b/client/src/components/MoreOptionsWidget.vue @@ -39,7 +39,7 @@ &__ellipses { width: 30px; height: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-top: -7px; } diff --git a/client/src/components/NewsTeaser.vue b/client/src/components/NewsTeaser.vue index d55a2cd3..91584b25 100644 --- a/client/src/components/NewsTeaser.vue +++ b/client/src/components/NewsTeaser.vue @@ -22,13 +22,13 @@ .news-teaser { display: flex; - border-bottom: 1px solid $color-lightgrey; + border-bottom: 1px solid $color-silver-light; padding-bottom: $large-spacing; text-align: center; @include desktop { border-bottom: 0; - border-left: 1px solid $color-lightgrey; + border-left: 1px solid $color-silver-light; padding-bottom: 0; text-align: left; } diff --git a/client/src/components/SectionBlock.vue b/client/src/components/SectionBlock.vue index be7260fb..34d72822 100644 --- a/client/src/components/SectionBlock.vue +++ b/client/src/components/SectionBlock.vue @@ -54,7 +54,7 @@ .block-title { &__title, &__subtitle { - color: $color-darkgrey-1; + color: $color-charcoal-dark; font-family: $sans-serif-font-family; } @@ -86,7 +86,7 @@ font-weight: 600; &--disabled { - color: $color-grey; + color: $color-silver-dark; } } } diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue index ef6e9473..386d399c 100644 --- a/client/src/components/StudentSubmission.vue +++ b/client/src/components/StudentSubmission.vue @@ -54,7 +54,7 @@ grid-template-columns: 170px 1fr; grid-column-gap: 80px; align-items: center; - border-bottom: 1px solid $color-grey; + border-bottom: 1px solid $color-silver-dark; padding: 15px 0; &__student-name { diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue index 95c02f47..491c2de5 100644 --- a/client/src/components/TopNavigation.vue +++ b/client/src/components/TopNavigation.vue @@ -39,7 +39,7 @@ padding: 0 24px; font-family: $sans-serif-font-family; font-weight: $font-weight-regular; - color: $color-grey; + color: $color-silver-dark; &--active { color: $color-brand; diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue index 42e9aaa7..03c28f54 100644 --- a/client/src/components/UserWidget.vue +++ b/client/src/components/UserWidget.vue @@ -29,13 +29,13 @@ @import "@/styles/_variables.scss"; .user-widget { - color: $color-grey; + color: $color-silver-dark; display: flex; align-items: center; &__name { padding: 0px 10px; - color: $color-grey; + color: $color-silver-dark; font-family: $sans-serif-font-family; } @@ -46,7 +46,7 @@ &__avatar { width: 30px; height: 30px; - fill: $color-grey; + fill: $color-silver-dark; } &--is-profile { diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue index bb7de545..9cb04857 100644 --- a/client/src/components/book-navigation/BookTopicNavigation.vue +++ b/client/src/components/book-navigation/BookTopicNavigation.vue @@ -34,7 +34,7 @@ font-family: $sans-serif-font-family; font-size: toRem(14px); margin-bottom: 20px; - color: $color-grey; + color: $color-silver-dark; &--active { color: $color-brand; diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue index 613c0347..f3a0b5a6 100644 --- a/client/src/components/content-blocks/DocumentBlock.vue +++ b/client/src/components/content-blocks/DocumentBlock.vue @@ -66,7 +66,7 @@ &__trash-icon { width: 25px; height: 25px; - fill: $color-grey; + fill: $color-silver-dark; cursor: pointer; justify-self: center; } diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue index 7122f8e6..48fa6e66 100644 --- a/client/src/components/content-blocks/Solution.vue +++ b/client/src/components/content-blocks/Solution.vue @@ -42,7 +42,7 @@ &__toggle { font-family: $sans-serif-font-family; - color: $color-grey; + color: $color-silver-dark; font-size: toRem(15px); /*margin-bottom: 15px;*/ display: block; @@ -52,11 +52,11 @@ &__text { font-size: toRem(18px); - color: $color-grey; + color: $color-silver-dark; /deep/ p { font-size: toRem(18px); - color: $color-grey; + color: $color-silver-dark; } } } diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue index 7647ca51..31993722 100644 --- a/client/src/components/content-blocks/assignment/Assignment.vue +++ b/client/src/components/content-blocks/assignment/Assignment.vue @@ -254,13 +254,13 @@ padding: 5px 0; margin-right: 15px; outline: 0; - color: $color-grey; + color: $color-silver-dark; cursor: pointer; border-bottom: 2px solid transparent; &--active { - border-bottom-color: $color-darkgrey-1; - color: $color-darkgrey-1; + border-bottom-color: $color-charcoal-dark; + color: $color-charcoal-dark; } } diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue index 8ac8ee83..dd61eee7 100644 --- a/client/src/components/content-blocks/assignment/SubmissionForm.vue +++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue @@ -66,13 +66,13 @@ &__save-status-icon { width: 22px; height: 22px; - fill: $color-grey; + fill: $color-silver-dark; margin-right: 8px; } &__save-status-text { font-size: toRem(14px); - color: $color-grey; + color: $color-silver-dark; } @keyframes spin { diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue index 0ce15f71..1287a698 100644 --- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue +++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue @@ -84,7 +84,7 @@ grid-column-gap: 0px; font-family: $sans-serif-font-family; text-align: center; - border: 2px solid $color-grey; + border: 2px solid $color-silver-dark; padding: 30px 5px; border-radius: 12px; margin-top: 20px; @@ -126,7 +126,7 @@ position: absolute; width: 20px; height: 20px; - border: 2px solid $color-grey; + border: 2px solid $color-silver-dark; border-bottom: 0; border-right: 0; background-color: white; diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue index 4f23d235..d09c36ae 100644 --- a/client/src/components/content-forms/DocumentForm.vue +++ b/client/src/components/content-forms/DocumentForm.vue @@ -73,7 +73,7 @@ & + label { cursor: pointer; - background-color: $color-lightgrey; + background-color: $color-silver-light; height: 150px; display: flex; width: 100%; diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue index e588d5b3..259de7dd 100644 --- a/client/src/components/content-forms/ImageForm.vue +++ b/client/src/components/content-forms/ImageForm.vue @@ -101,7 +101,7 @@ & + label { cursor: pointer; - background-color: $color-lightgrey; + background-color: $color-silver-light; height: 150px; display: flex; width: 100%; diff --git a/client/src/components/inputs/BaseInput.vue b/client/src/components/inputs/BaseInput.vue index 00b20304..e0c0c59f 100644 --- a/client/src/components/inputs/BaseInput.vue +++ b/client/src/components/inputs/BaseInput.vue @@ -68,7 +68,7 @@ width: 20px; height: 20px; display: flex; - border: 2px solid $color-grey; + border: 2px solid $color-silver-dark; justify-content: center; align-items: center; box-sizing: border-box; diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue index 372e124d..6cf8b602 100644 --- a/client/src/components/modules/Module.vue +++ b/client/src/components/modules/Module.vue @@ -166,7 +166,7 @@ } &__meta-title { - color: $color-grey; + color: $color-silver-dark; font-size: 2.25rem; font-weight: 300; font-family: $serif-font-family; diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue index a7c3fd4e..d9f54bf6 100644 --- a/client/src/components/modules/ModuleNavigation.vue +++ b/client/src/components/modules/ModuleNavigation.vue @@ -101,7 +101,7 @@ @mixin module-navigation-typography { font-family: $sans-serif-font-family; - color: $color-grey; + color: $color-silver-dark; font-weight: $font-weight-regular; } diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue index 0883365f..fb0f23d3 100644 --- a/client/src/components/modules/ModuleTeaser.vue +++ b/client/src/components/modules/ModuleTeaser.vue @@ -56,7 +56,7 @@ } &__meta-title { - color: $color-grey; + color: $color-silver-dark; margin-bottom: $large-spacing; @include regular-text; } diff --git a/client/src/components/page-form/PageForm.vue b/client/src/components/page-form/PageForm.vue index 69aca5b0..47f54b19 100644 --- a/client/src/components/page-form/PageForm.vue +++ b/client/src/components/page-form/PageForm.vue @@ -57,7 +57,7 @@ } &__footer { - border-top: 1px solid $color-lightgrey; + border-top: 1px solid $color-silver-light; padding: $small-spacing $medium-spacing; } } diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue index 02e0a556..f27e1641 100644 --- a/client/src/components/portfolio/ProjectActions.vue +++ b/client/src/components/portfolio/ProjectActions.vue @@ -108,7 +108,7 @@ svg { width: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-right: 15px; } } diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue index 35e15ad9..3efab961 100644 --- a/client/src/components/portfolio/ProjectEntry.vue +++ b/client/src/components/portfolio/ProjectEntry.vue @@ -98,7 +98,7 @@ &__date { font-family: $sans-serif-font-family; - color: $color-grey; + color: $color-silver-dark; font-size: toRem(17px); } diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue index 0b8d7eb7..8e781a7e 100644 --- a/client/src/components/profile/Avatar.vue +++ b/client/src/components/profile/Avatar.vue @@ -47,7 +47,7 @@ &__placeholder { height: $max-width; - fill: $color-grey; + fill: $color-silver-dark; &--highlighted { fill: $color-brand; diff --git a/client/src/components/profile/Classlist.vue b/client/src/components/profile/Classlist.vue index c28b2f5d..7689be92 100644 --- a/client/src/components/profile/Classlist.vue +++ b/client/src/components/profile/Classlist.vue @@ -35,7 +35,7 @@ &__item { line-height: $height; height: $height; - border-bottom: 1px solid $color-grey; + border-bottom: 1px solid $color-silver-dark; } } diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue index 29ee43d1..7af3595d 100644 --- a/client/src/components/profile/ModuleActivity.vue +++ b/client/src/components/profile/ModuleActivity.vue @@ -65,7 +65,7 @@ &__module-name { @include small-text; - color: $color-grey; + color: $color-silver-dark; } } diff --git a/client/src/components/profile/PasswordChangeForm.vue b/client/src/components/profile/PasswordChangeForm.vue index a5f58eda..98749d10 100644 --- a/client/src/components/profile/PasswordChangeForm.vue +++ b/client/src/components/profile/PasswordChangeForm.vue @@ -109,7 +109,7 @@ &__hint { margin-top: $small-spacing; font-family: $sans-serif-font-family; - color: $color-grey; + color: $color-silver-dark; } } diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue index 46e81309..a925e2b2 100644 --- a/client/src/components/rooms/EntryCountWidget.vue +++ b/client/src/components/rooms/EntryCountWidget.vue @@ -27,7 +27,7 @@ svg { width: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-right: 15px; } diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue index b284dfff..d2c1217e 100644 --- a/client/src/components/rooms/RoomActions.vue +++ b/client/src/components/rooms/RoomActions.vue @@ -74,7 +74,7 @@ svg { width: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-right: 15px; } } diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue index 6508b25b..57b4d744 100644 --- a/client/src/components/rooms/RoomGroupWidget.vue +++ b/client/src/components/rooms/RoomGroupWidget.vue @@ -29,7 +29,7 @@ svg { width: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-right: 15px; } diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue index 49d05a29..7fab1336 100644 --- a/client/src/components/rooms/RoomWidget.vue +++ b/client/src/components/rooms/RoomWidget.vue @@ -79,13 +79,13 @@ svg { width: 30px; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; margin-right: 15px; } &__content { padding: 22px; - color: $color-darkgrey-1; + color: $color-charcoal-dark; cursor: pointer; /* diff --git a/client/src/components/rooms/WidgetPopover.vue b/client/src/components/rooms/WidgetPopover.vue index 31b0f57d..e97784f3 100644 --- a/client/src/components/rooms/WidgetPopover.vue +++ b/client/src/components/rooms/WidgetPopover.vue @@ -40,7 +40,7 @@ &__link { & > a { display: inline-block; - color: $color-grey; + color: $color-silver-dark; font-family: $sans-serif-font-family; font-size: toRem(14px); line-height: 1.5; diff --git a/client/src/components/visibility/VisibilityPopover.vue b/client/src/components/visibility/VisibilityPopover.vue index 883bd795..3f859075 100644 --- a/client/src/components/visibility/VisibilityPopover.vue +++ b/client/src/components/visibility/VisibilityPopover.vue @@ -112,7 +112,7 @@ .visibility-menu { border-radius: 13px; - border: 1px solid $color-lightgrey; + border: 1px solid $color-silver-light; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15); width: 180px; box-sizing: border-box; diff --git a/client/src/pages/project.vue b/client/src/pages/project.vue index 1ac73b1e..03b960c2 100644 --- a/client/src/pages/project.vue +++ b/client/src/pages/project.vue @@ -165,7 +165,7 @@ } &__content { - background-color: rgba($color-darkgrey-1, 0.18); + background-color: rgba($color-charcoal-dark, 0.18); display: flex; flex-direction: column; /*max-width: 840px;*/ diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue index a1001222..9b781af1 100644 --- a/client/src/pages/room.vue +++ b/client/src/pages/room.vue @@ -131,7 +131,7 @@ &__content { padding: 50px 15px; - background-color: rgba($color-darkgrey-1, 0.18); + background-color: rgba($color-charcoal-dark, 0.18); @include desktop { columns: 4; padding: 50px 60px; diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue index 0fde6ae4..b95af4cc 100644 --- a/client/src/pages/start.vue +++ b/client/src/pages/start.vue @@ -122,7 +122,7 @@ &__title { color: $color-brand; text-align: center; - border-bottom: 1px solid $color-lightgrey; + border-bottom: 1px solid $color-silver-light; padding-bottom: 30px; margin-left: 30px; margin-right: 30px; @@ -182,7 +182,7 @@ } .news { - background-color: $color-darkgrey-1; + background-color: $color-charcoal-dark; color: $color-white; padding-top: $large-spacing; padding-bottom: $large-spacing; @@ -246,7 +246,7 @@ @include desktop { text-align: left; - border-left: 1px solid $color-lightgrey; + border-left: 1px solid $color-silver-light; } } } diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue index 4cc38290..091686a5 100644 --- a/client/src/pages/topic.vue +++ b/client/src/pages/topic.vue @@ -69,7 +69,7 @@ .topic { &__teaser { - color: $color-darkgrey-1; + color: $color-charcoal-dark; width: 90%; @include lead-paragraph; margin-bottom: $large-spacing; diff --git a/client/src/styles/_actions.scss b/client/src/styles/_actions.scss index 20ab33c1..ee7a9673 100644 --- a/client/src/styles/_actions.scss +++ b/client/src/styles/_actions.scss @@ -1,5 +1,5 @@ .action-icon { width: 40px; height: 40px; - fill: $color-grey; + fill: $color-silver-dark; } diff --git a/client/src/styles/_article.scss b/client/src/styles/_article.scss index ef3787c8..a5595082 100644 --- a/client/src/styles/_article.scss +++ b/client/src/styles/_article.scss @@ -11,7 +11,7 @@ } &__meta { - border-bottom: 1px solid $color-lightgrey; + border-bottom: 1px solid $color-silver-light; align-self: end; padding: 20px 0; width: 100%; diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss index 6faafa9d..fccfe2ec 100644 --- a/client/src/styles/_buttons.scss +++ b/client/src/styles/_buttons.scss @@ -1,6 +1,6 @@ .button { background: transparent; - border: 2px solid $color-grey; + border: 2px solid $color-silver-dark; padding: 5px 15px; border-radius: 3px; font-family: $sans-serif-font-family; @@ -20,8 +20,8 @@ background-color: $color-white; } &--disabled { - border: 2px solid $color-lightgrey; - background-color: $color-lightgrey; + border: 2px solid $color-silver-light; + background-color: $color-silver-light; } } @@ -35,7 +35,7 @@ &__icon { width: 25px; height: 25px; - fill: $color-grey; + fill: $color-silver-dark; cursor: pointer; justify-self: center; } diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss index 22248bf6..dceb4cd4 100644 --- a/client/src/styles/_forms.scss +++ b/client/src/styles/_forms.scss @@ -4,7 +4,7 @@ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15); border-radius: 4px; box-sizing: border-box; - border: 1px solid $color-lightgrey; + border: 1px solid $color-silver-light; max-width: 100%; background-color: $color-white; } diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss index 7688b579..42084e7e 100644 --- a/client/src/styles/_mixins.scss +++ b/client/src/styles/_mixins.scss @@ -8,7 +8,7 @@ @mixin widget-shadow { @include widget-shadow-base; - border: 1px solid $color-lightgrey; + border: 1px solid $color-silver-light; } @mixin widget-shadow-reverse { @@ -19,7 +19,7 @@ @mixin room-widget-text-style { font-family: $sans-serif-font-family; font-size: 1rem; - fill: $color-darkgrey-1; + fill: $color-charcoal-dark; } @mixin input-box-shadow { @@ -140,5 +140,5 @@ } @mixin light-border($border-position) { - border-#{$border-position}: 1px solid $color-lightgrey; + border-#{$border-position}: 1px solid $color-silver; } diff --git a/client/src/styles/_top-navigation.scss b/client/src/styles/_top-navigation.scss index 4c93a283..7f4f07fa 100644 --- a/client/src/styles/_top-navigation.scss +++ b/client/src/styles/_top-navigation.scss @@ -6,7 +6,7 @@ padding: 0 24px; font-family: $sans-serif-font-family; font-weight: $font-weight-regular; - color: $color-grey; + color: $color-silver-dark; &--active { color: $color-brand; diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss index c37a822f..ba98ae3f 100644 --- a/client/src/styles/_typography.scss +++ b/client/src/styles/_typography.scss @@ -5,7 +5,7 @@ * { font-size: $base-font-size; font-weight: $font-weight-regular; - color: $color-darkgrey-1; + color: $color-charcoal-dark; } h1, h2, h3, h4, h5 { diff --git a/client/src/styles/_uploadcare_overwrite.scss b/client/src/styles/_uploadcare_overwrite.scss index d25d3886..690d414e 100644 --- a/client/src/styles/_uploadcare_overwrite.scss +++ b/client/src/styles/_uploadcare_overwrite.scss @@ -1,5 +1,5 @@ .uploadcare--panel { - background: $color-lightgrey; + background: $color-silver-light; height: 200px; border: none; border-radius: 0; diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss index a186ef59..cb4a296d 100644 --- a/client/src/styles/_variables.scss +++ b/client/src/styles/_variables.scss @@ -27,17 +27,20 @@ $color-brand-light: #DCF2ED; $color-error: #C02108; /* greyscale */ -$color-darkgrey-1: #333333; -$color-grey: #999999; +$color-silver: #d0d0d0; +$color-silver-light: #f0f0f0; +$color-silver-dark: #aaaaaa; + +$color-charcoal: #616161; +$color-charcoal-light: #828282; +$color-charcoal-dark: #333333; + //$color-grey--lighter: rgba(51, 51, 51, 0.18); $color-grey--lighter: transparent; -$color-lightgrey: #f0f0f0; $color-white: #ffffff; - - -$header-color: $color-darkgrey-1; -$intro-color: $color-grey; +$header-color: $color-charcoal-dark; +$intro-color: $color-silver-dark; $sans-serif-font-family: 'Montserrat', Arial, sans-serif; $serif-font-family: "ff-meta-serif-web-pro", serif;