Align colors.sccs to design system colors

1024pix · Oct 13, 2020 · 674e47a · 674e47a
1 parent 34e21ec
commit 674e47a
Show file tree

Hide file tree

Showing 32 changed files with 182 additions and 138 deletions.
diff --git a/assets/scss/components/_main-nav.scss b/assets/scss/components/_main-nav.scss
@@ -3,6 +3,6 @@
 }
 
 .link-separator-left {
-  border-left: 1px solid $grey-8;
+  border-left: 1px solid #96A0AF;
   padding-left: 24px;
 }
diff --git a/assets/scss/globals/_colors.scss b/assets/scss/globals/_colors.scss
@@ -1,32 +1,76 @@
-$grey-1: #222222;
-$grey-2: #555555;
-$grey-3: #f5f5f5;
-$grey-4: #cccccc;
-$grey-5: #666666;
-$grey-6: #444444;
-$grey-7: #dddddd;
-$grey-8: #96a0af;
-$grey-9: #5e6c84;
-$grey-10: #6b778c;
-$grey-11: #253858;
-$grey-20: #dfe1e6;
-
-$blue-1: #3d68ff;
-$blue-2: #12a3ff;
-$blue-3: #3257d9;
-$blue-4: #388aff;
-$blue-5: #172b4d;
-
-$error: #990000;
-$error-2: #ffdbcc;
-
-$purple-1: #985fff;
-
-$pix-yellow: #ffcb00;
-$pix-yellow-2: #EBAF00;
-$pix-yellow-3: #D6A000;
-
-$black: #000000;
-$white: #ffffff;
-
-$gradient-purple: linear-gradient(135.25deg, $blue-4 0%, $purple-1 100%);
+// primary
+$blue: #3D68FF;
+$blue-zodiac: #505F79;
+$white: #FFFFFF;
+
+// secondary
+$blue-hover: darken($blue, 4%);
+$dark-blue-pro: #1A38A0;
+$green-certif: #1A8C89;
+$dark-orga: #0095C0;
+$orga: #00DDFF;
+$green: #038A25;
+$green-hover: darken($green, 4%);
+$red: #D63F00;
+$red-hover: darken($red, 4%);
+$yellow: #FFBE00;
+$yellow-hover: darken($yellow, 8%);
+$light-blue: #388AFF;
+$pure-orange: #F45C00;
+
+// gradients
+$blue-gradient: linear-gradient(135deg, #12A3FF 0%, #3D68FF 100%);
+$default-gradient: linear-gradient(135deg, #388AFF 0%, #985FFF 100%);
+$green-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
+$pix-orange-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
+$pix-orga-gradient: linear-gradient(134deg, #00DDFF 0%, #0095C0 100%);
+$pix-orga-old-gradient: linear-gradient(0deg, #0D7DC4 0%, #213371 100%);
+$pix-pink-gradient: linear-gradient(135deg, #FF3F93 0%, #AC008D 100%);
+$pix-purple-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
+$yellow-gradient: linear-gradient(180deg, #FEDC41 0%, #F45C00 100%);
+
+// light
+$grey-5: #FAFBFC;
+$grey-10: #F4F5F7;
+$grey-15: #EAECF0;
+$grey-20: #DFE1E6;
+$grey-22: #C1C7D0;
+$grey-25: #A5ADBA;
+
+// medium
+$grey-30: #97A0AF;
+$grey-35: #8993A4;
+$grey-40: #7A869A;
+$grey-45: #6B778C;
+$grey-50: #5E6C84;
+$grey-60: #505F79;
+
+// dark
+$grey-70: #344563;
+$grey-80: #253858;
+$grey-90: #172B4D;
+$grey-100: #091E42;
+$grey-200: #07142E;
+
+// solids
+$environment-dark: #5E2563;
+$environment-light: #564DA6;
+$communication-dark: #3D68FF;
+$communication-light: #12A3FF;
+$content-dark: #1A8C89;
+$content-light: #52D987;
+$information-dark: #F24645;
+$information-light: #F1A141;
+$security-dark: #AC008D;
+$security-light: #FF3F94;
+
+// status
+$error: #FF4B00;
+$light-red: lighten($error, 8%);
+$dark-error: darken($error, 8%);
+$success: #57C884;
+$warning: #FFBE00;
+
+// box shadows
+$box-shadow-competence-cards: 0 3px 4px 0 rgba(12, 22, 58, 0.1), 0 1px 3px 0 rgba($grey-200, 0.1);
+$box-shadow-competence-cards-hover: 0 7px 14px 0 rgba(12, 22, 58, 0.2), 0 3px 6px 0 rgba($grey-200, 0.2);
diff --git a/assets/scss/shared/_buttons.scss b/assets/scss/shared/_buttons.scss
@@ -26,10 +26,10 @@
 
   transition: background-color 0.3s ease;
 
-  @include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
+  @include colorizeButton($white, transparent, $blue, $blue-hover, $white);
 
   &.button-video {
-    @include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
+    @include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
     svg { margin-right: 10px; }
   }
 
@@ -42,42 +42,42 @@
     font-size: 0.8125rem;
     letter-spacing: 0.0625rem;
 
-    @include colorizeButton($blue-1, $blue-1, $white, $blue-1, $white);
+    @include colorizeButton($blue, $blue, $white, $blue, $white);
   }
 
   &--light {
-    @include colorizeButton($grey-11, transparent, $pix-yellow, $white, $grey-11);
+    @include colorizeButton($grey-80, transparent, #ffcb00, $white, $grey-80);
 
     &:hover {
-      @include colorizeButton($grey-11, transparent, $pix-yellow-2, $pix-yellow-2, $grey-11);
+      @include colorizeButton($grey-80, transparent, #EBAF00, #EBAF00, $grey-80);
     }
 
     &:active,
     &:focus {
-      @include colorizeButton($grey-11, transparent, $pix-yellow-3, $pix-yellow-3, $grey-11);
+      @include colorizeButton($grey-80, transparent, #D6A000, #D6A000, $grey-80);
     }
 
     &.button-video {
       svg { margin-right: 10px; }
       @include colorizeButton($white, $white, transparent, transparent, $white);
 
       &:hover {
-        @include colorizeButton($white, $white, transparent, $blue-1, $white);
+        @include colorizeButton($white, $white, transparent, $blue, $white);
       }
 
       &:active,
       &:focus {
-        @include colorizeButton($white, $white, transparent, $blue-3, $white);
+        @include colorizeButton($white, $white, transparent, $blue-hover, $white);
       }
     }
   }
 
   &--dark {
-    @include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
+    @include colorizeButton($white, transparent, $blue, $blue-hover, $white);
 
     &.button-video {
       svg { margin-right: 10px; }
-      @include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
+      @include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
     }
   }
 }

diff --git a/assets/scss/shared/_normalize.scss b/assets/scss/shared/_normalize.scss
@@ -9,7 +9,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
-  color: $grey-1;
+  color: $grey-45;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -72,7 +72,7 @@ ul {
 
     &::before {
       content: "● ";
-      color: $blue-1;
+      color: $blue;
       margin-right: 5px;
     }
   }
@@ -100,7 +100,7 @@ ol {
     &::before {
       content: counter(item) ".";
       margin-right: 8px;
-      color: $blue-1;
+      color: $blue;
       font-weight: 600;
     }
   }

diff --git a/assets/scss/shared/_pages.scss b/assets/scss/shared/_pages.scss
@@ -1,7 +1,7 @@
 .page-banner-layout {
   .page-banner {
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-    background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
+    background: $default-gradient;
     height: 240px;
   }
 
@@ -13,7 +13,7 @@
 .page-header {
   min-height: 240px;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
+  background: $default-gradient;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/assets/scss/shared/_text.scss b/assets/scss/shared/_text.scss
@@ -95,15 +95,15 @@
 }
 
 .text.text-black {
-  color: $grey-1;
+  color: $grey-45;
 }
 
 .text.text-black-l {
-  color: $grey-2;
+  color: #555555;
 }
 
 .text.text-blue {
-  color: $blue-1;
+  color: $blue;
 }
 
 .text.light {
@@ -130,14 +130,14 @@
   &--normal p {
     font-size: 1rem;
     line-height: 1.625rem;
-    color: $grey-10;
+    color: $grey-45;
   }
 
   &--light p {
     color: $white;
   }
 
   &--dark p {
-    color: $grey-10;
+    color: $grey-45;
   }
 }
diff --git a/assets/scss/shared/_titles.scss b/assets/scss/shared/_titles.scss
@@ -1,6 +1,6 @@
 .title {
   &--big h1 {
-    color: $grey-11;
+    color: $grey-80;
     font-size: 2.125rem;
     line-height: 2.75rem;
     font-weight: 400;
@@ -11,7 +11,7 @@
   }
 
   &--dark h1 {
-    color: $blue-5;
+    color: $grey-90;
   }
 }
 

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -129,7 +129,7 @@ footer {
   }
 
   .icon-parent {
-    background-color: $blue-1;
+    background-color: $blue;
     width: 36px;
     height: 36px;
     display: flex;
@@ -139,7 +139,7 @@ footer {
     transition: all ease-in 0.2s;
 
     &:hover {
-      background-color: $blue-3;
+      background-color: $blue-hover;
       transition: all ease-out 0.25s;
     }
   }
@@ -234,7 +234,7 @@ footer {
     line-height: 28px !important;
 
     &:hover {
-      color: $blue-1 !important;
+      color: $blue !important;
     }
   }
 

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
@@ -47,7 +47,7 @@ export default {
 <style lang="scss">
 .navigation-slice-zone {
   .bm-menu {
-    background: linear-gradient(134.72deg, $blue-2 0%, $blue-1 100%);
+    background: $blue-gradient;
 
     @include device-is('large-screen') {
       display: none;
@@ -101,7 +101,7 @@ export default {
   }
 
   .bm-burger-bars {
-    background-color: $grey-1;
+    background-color: $grey-45;
   }
 
   .bm-burger-button {
@@ -113,7 +113,7 @@ export default {
   }
 
   .bm-cross {
-    background: $grey-1;
+    background: $grey-45;
     height: 24px !important;
   }
 }

diff --git a/components/CtaButton.vue b/components/CtaButton.vue
@@ -25,14 +25,14 @@ export default {
 <style lang="scss">
 .cta-button {
   width: fit-content;
-  background: $blue-1;
+  background: $blue;
   border-radius: 5px;
   padding: 0 20px;
   cursor: pointer;
 
   &:hover {
     transition: opacity 0.5s ease-out;
-    background: $blue-3;
+    background: $blue-hover;
   }
 
   &:hover:after {

diff --git a/components/FormablePage.vue b/components/FormablePage.vue
@@ -71,16 +71,16 @@ export default {
   .Formable__Label {
     font-weight: 500;
     font-size: 15px;
-    color: $grey-6;
+    color: $grey-45;
   }
 
   .Formable__Input,
   .Formable__Select,
   .Formable__TextArea {
     font-weight: 400;
     font-size: 16px;
-    color: $grey-1;
-    border: 2px solid $grey-7;
+    color: $grey-45;
+    border: 2px solid #dddddd;
     border-radius: 4px;
     background-color: $white;
     padding: 15px;
@@ -89,7 +89,7 @@ export default {
 
     &:active,
     &:focus {
-      border-color: $blue-1;
+      border-color: $blue;
     }
   }
 
@@ -102,15 +102,15 @@ export default {
   }
 
   .Formable__SubmitButton {
-    background-color: $blue-1;
+    background-color: $blue;
     border-radius: 4px;
     font-family: Roboto, Arial, sans-serif;
     padding: 12px 30px;
 
     &:active,
     &:hover,
     &:focus {
-      background-color: $blue-3;
+      background-color: $blue-hover;
     }
   }