Merge pull request #12 from privacybydesign/ux-3.1

Implement Yivi UX3.1 colors and style
privacybydesign · Apr 12, 2023 · d3ecdb1 · d3ecdb1
2 parents 37fdf39 + 6b95f38
commit d3ecdb1
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 45 deletions.
diff --git a/docs/images/example.png b/docs/images/example.png
diff --git a/yivi-css/assets/images/yivi-button-background.svg b/yivi-css/assets/images/yivi-button-background.svg
diff --git a/yivi-css/src/animations/loading.scss b/yivi-css/src/animations/loading.scss
@@ -23,7 +23,7 @@
     width: 33%;
     height: 33%;
     border-radius: 50%;
-    background-color: $yivi-light-blue;
+    background-color: $yivi-link-blue;
     float: left;
 
     @include animation(loading-animation 1.3s infinite ease-in-out);

diff --git a/yivi-css/src/animations/waiting-for-user.scss b/yivi-css/src/animations/waiting-for-user.scss
@@ -17,7 +17,7 @@
   height: 39px;
   position: relative;
 
-  background-color: $yivi-light-blue;
+  background-color: $yivi-link-blue;
   border-radius: 2px;
 
   &:before,

diff --git a/yivi-css/src/components/yivi-button.scss b/yivi-css/src/components/yivi-button.scss
@@ -14,18 +14,21 @@
 // Styleguide Components.Yivi button
 
 @import '../mixins/reset', '../mixins/fonts', '../variables/colours',
-  '../variables/sizes';
+  '../variables/sizes', '../mixins/svg-url', '../variables/svg-images';
 
 .yivi-web-button {
   @include reset;
   @include font;
   display: inline-block;
-  padding: 1em 4em;
+  padding: 12px 32px;
+
+  background-image: svg-url($svg-image-yivi-button-background);
+  background-position: right top;
+  background-repeat: no-repeat;
 
   background-color: $button-color;
-  border: 1px solid darken($button-color, 10%);
+  border: 0px solid transparent;
   border-radius: $button-border-radius;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   text-decoration: none;
   color: $button-text-color;
   font-weight: 500;
@@ -41,11 +44,6 @@
   user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 
-  &:active {
-    transform: scale3d(0.99, 0.99, 1);
-    transform-origin: center;
-  }
-
   &:focus {
     outline: 0;
   }

diff --git a/yivi-css/src/components/yivi-form.scss b/yivi-css/src/components/yivi-form.scss
@@ -90,9 +90,10 @@
   }
 
   background-color: $background-color;
-  border: 1px solid $border-color;
   border-radius: $border-radius;
 
+  box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.15);
+
   .yivi-web-content {
     @include reset;
     @include center;
@@ -106,7 +107,7 @@
       @include reset;
       @include font($size: 16px, $weight: 18px);
       margin: 1em 4em;
-      color: $yivi-blue;
+      color: $yivi-anthracite;
 
       @include on-small-screen {
         margin: 1em 2em;
@@ -168,14 +169,14 @@
       @include transition(transform 0.4s ease);
 
       a {
-        @include font($color: $yivi-blue, $size: 16px, $weight: 400);
+        @include font($color: $yivi-anthracite, $size: 16px, $weight: 400);
         text-decoration-line: underline;
       }
 
       p {
         margin: 1em;
         text-align: center;
-        @include font($color: $yivi-blue, $size: 16px, $weight: 700);
+        @include font($color: $yivi-anthracite, $size: 16px, $weight: 700);
       }
     }
 

diff --git a/yivi-css/src/components/yivi-pairing-form.scss b/yivi-css/src/components/yivi-pairing-form.scss
@@ -111,7 +111,7 @@
     width: 30px;
     text-align: center;
     font-size: 1.5em;
-    border: 1px solid $yivi-blue;
+    border: 1px solid $yivi-link-blue;
     border-radius: 4px;
 
     @media screen and (max-width: 310px) {

diff --git a/yivi-css/src/variables/colours.scss b/yivi-css/src/variables/colours.scss
@@ -4,61 +4,57 @@
 
 // Colours from the Yivi app
 //
-// $yivi-blue        - #363e6a; New Yivi blue
-// $yivi-link-blue   - #0000ee; Yivi link blue
-// $yivi-green       - #2bc194; Yivi green
-// $yivi-light-blue  - #00b1e6; (Old) Yivi blue
-// $yivi-red         - #d44454; Yivi red
-// $yivi-yellow      - #ffbb58; Yivi yellow
+// $yivi-anthracite  - #484747; Yivi anthracite
+// $yivi-link-blue   - #00508a; Yivi link blue
+// $yivi-green       - #00973a; Yivi green
+// $yivi-light-blue  - #dcecf5; Yivi light blue
+// $yivi-red         - #e12747; Yivi red
 // $yivi-grey        - #eae5e2; Yivi grey
 //
 // Weight: 1
 //
 // Styleguide Variables.colours.app
 
-$yivi-blue: #363e6a;
-$yivi-link-blue: #0000ee;
-$yivi-green: #2bc194;
-$yivi-light-blue: #00b1e6;
-$yivi-red: #d44454;
-$yivi-yellow: #ffbb58;
+$yivi-anthracite: #484747;
+$yivi-link-blue: #00508a;
+$yivi-green: #00973a;
+$yivi-light-blue: #dcecf5;
+$yivi-red: #e12747;
 $yivi-grey: #eae5e2;
 
 // Colours for interface elements
 //
-// $border-color     - #ffffff; For a border around the whole element
-// $background-color - #e8e8e8; For the background
-// $helper-color     - #e8e8e8; For the helper background
+// $background-color - #dcecf5; For the background
+// $helper-color     - #dcecf5; For the helper background
 // $content-bg-color - #ffffff; For background of the actual content
-// $button-color     - #363e6a; For the background of the buttons
+// $button-color     - #e12747; For the background of the buttons
 //
 // Weight: 1
 //
 // Styleguide Variables.colours.app
 
 // From out to in:
-$border-color: white;
-$background-color: $yivi-grey;
-$helper-color: $yivi-grey;
+$background-color: $yivi-light-blue;
+$helper-color: $yivi-light-blue;
 $content-bg-color: white;
-$button-color: $yivi-blue;
+$button-color: $yivi-red;
 
 // Text colours
 //
 // For the fonts
 //
-// $header-text-color        - #363e6a; For the header text
-// $content-text-color       - #363e6a; For the content text
-// $content-link-color       - #0000ee; For links in the content
-// $content-link-color-hover - #363e6a; For the hover state on links in the content
+// $header-text-color        - #484747; For the header text
+// $content-text-color       - #484747; For the content text
+// $content-link-color       - #00508a; For links in the content
+// $content-link-color-hover - #484747; For the hover state on links in the content
 // $button-text-color        - #ffffff; For the button foreground text
 //
 // Weight: 2
 //
 // Styleguide Variables.colours.text
 
-$header-text-color: $yivi-blue;
-$content-text-color: $yivi-blue;
+$header-text-color: $yivi-anthracite;
+$content-text-color: $yivi-anthracite;
 $content-link-color: $yivi-link-blue;
-$content-link-color-hover: $yivi-blue;
+$content-link-color-hover: $yivi-anthracite;
 $button-text-color: white;
diff --git a/yivi-css/src/variables/sizes.scss b/yivi-css/src/variables/sizes.scss
@@ -5,6 +5,6 @@
 //
 // Styleguide Variables.sizes
 
-$border-radius: 4px;
-$button-border-radius: 4px;
+$border-radius: 8px;
+$button-border-radius: 8px;
 $qr-code-size: 256px;
diff --git a/yivi-css/src/variables/svg-images.scss b/yivi-css/src/variables/svg-images.scss
@@ -1,2 +1,3 @@
 // This file is auto-generated from the assets/images directory, so don't bother manually changing it.
+$svg-image-yivi-button-background: '<svg xmlns="http://www.w3.org/2000/svg" width="260" height="48" fill="none"><path fill="#BA3555" fill-rule="evenodd" d="M160.129 48h26.344l20.652-48H139.5l20.629 48Z" clip-rule="evenodd"/><path fill="#A03352" fill-rule="evenodd" d="m232.187 48 20.631-48h1.012a6 6 0 0 1 6 6v36a6 6 0 0 1-6 6h-21.643Z" clip-rule="evenodd"/><path fill="#87314F" fill-rule="evenodd" d="M252.818 0h-33.362v48h12.731l20.631-48Z" clip-rule="evenodd"/><path fill="#A03352" fill-rule="evenodd" d="M219.455 0h-12.33l-20.652 48h32.982V0Z" clip-rule="evenodd"/></svg>';
 $svg-image-yivi-logo: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="765.355" height="425.197"><g style="display:inline"><path fill="#3ea6de" d="M425.197 109.797h-85.039l85.039 228.449h85.039z"/><path fill="#e02146" d="M590.156 45.326C590.156 20.814 609.582 0 637.795 0c28.213 0 47.639 20.814 47.639 45.326s-19.426 45.789-47.639 45.789c-28.213 0-47.639-21.277-47.639-45.789z"/><path fill="#97c6dd" d="M680.314 109.799v228.447h.002l85.039-228.449h-85.041z"/><path fill="#e02146" d="m595.275 338.246 85.039-228.447v-.002h-85.039z"/><path fill="#6a2e4a" d="M680.314 338.246V109.799l-85.039 228.447z"/><path fill="#97c6dd" d="M340.156 109.799v228.447h.002l85.041-228.449h-85.041z"/><path fill="#e02146" d="M255.117 109.797v228.449h.002l85.037-228.447v-.002z"/><path fill="#6a2e4a" d="M340.156 338.246V109.799l-85.037 228.447z"/><path fill="#e02146" d="M85.039 338.246c-7.635 20.516-18.471 25.9-36.51 25.9-11.562 0-20.77-1.85-29.49-4.625l-1.441 61.051c11.947 3.238 27.178 4.625 40.59 4.625 59.201 0 87.168-20.521 105.021-68.488l6.871-18.463zM425.197 109.797h-85.039l85.039 228.449h85.039zM250 45.326C250 20.814 269.424 0 297.637 0s47.639 20.814 47.639 45.326-19.426 45.789-47.639 45.789C269.424 91.115 250 69.838 250 45.326z"/><path fill="#6a2e4a" d="m467.716 224.035 42.52 114.211h.002l85.039-228.449h-85.041z"/><path fill="#6a2e4a" d="m382.764 309.725-42.518 114.238 42.52 114.211 85.039-228.449z" style="display:inline" transform="translate(-212.686 -199.928)"/><path fill="#e02146" d="M297.725 538.174h85.041l-85.039-228.449h-85.041z" style="display:inline" transform="translate(-212.686 -199.928)"/><g style="display:inline"><path fill="#97c6dd" d="M85.041 109.797v.002z"/><path fill="#e02146" d="M0 109.799v-.002z"/><path fill="#6a2e4a" d="m42.519 224.039 42.522-114.24v-.002H0v.002z"/><path fill="#ba3353" d="m382.677 224.039 42.52-114.24v-.002h-85.039v.002zM467.716 224.039l-42.519 114.209v.002h85.041v-.002zM127.56 224.039 85.039 338.248v.002h85.041v-.002z"/></g></g></svg>';