From 526fc8f9f6030527189c6bdace0ecd4eb7b3987e Mon Sep 17 00:00:00 2001 From: Anxhelo Lushka Date: Sun, 14 Jun 2020 22:09:15 +0200 Subject: [PATCH] Addressing some comments --- _includes/design/colors.html | 259 ++++++++++++++++++++++++++----- _includes/design/typography.html | 10 +- assets/styles/components.scss | 53 +++++-- assets/styles/layout.scss | 4 +- assets/styles/main.scss | 10 +- assets/styles/vars.scss | 50 ++++-- 6 files changed, 306 insertions(+), 80 deletions(-) diff --git a/_includes/design/colors.html b/_includes/design/colors.html index bb1f476..3235b7e 100644 --- a/_includes/design/colors.html +++ b/_includes/design/colors.html @@ -615,34 +615,237 @@ - - -
-
-
Dark
+
+
Red
-
- $night-50 - #EBF3FA +
+ $red-100 + #fbe5e1 +
+
+
+
WCAG Normal
+
AA
+
Pass
+
AA
+
Fail
+
+
+
WCAG Large
+
AA
+
Pass
+
AA
+
Fail
+
+
+
+
+
+ $red-200 + #f2b4a9 +
+
+
+
WCAG Normal
+
AA
+
Pass
+
AA
+
Fail
+
+
+
WCAG Large
+
AA
+
Pass
+
AA
+
Fail
+
+
+
+
+
+ $red-300 + #ea8271 +
+
+
+
WCAG Normal
+
AA
+
Pass
+
AA
+
Fail
+
+
+
WCAG Large
+
AA
+
Pass
+
AA
+
Fail
+
+
+
+
+
+ $red-400 + #e05842 +
+
+
+
WCAG Normal
+
AA
+
Fail
+
AA
+
Fail
+
+
+
WCAG Large
+
AA
+
Pass
+
AA
+
Pass
+
+
+
+
+
+ $red-500 + #db3b21 +
+
+
+
WCAG Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
WCAG Large
+
AA
+
Pass
+
AA
+
Pass
+
+
+
+
+
+ $red-600 + #c0341d
-
+
WCAG Normal
-
AA
-
Pass
-
AA
-
Fail
+
AA
+
Fail
+
AA
+
Pass
WCAG Large
-
AA
-
Pass
-
AA
-
Fail
+
AA
+
Fail
+
AA
+
Pass
+
+
+ $red-700 + #a62d19 +
+
+
+
WCAG Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
WCAG Large
+
AA
+
Fail
+
AA
+
Pass
+
+
+
+
+
+ $red-800 + #8b2615 +
+
+
+
WCAG Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
WCAG Large
+
AA
+
Fail
+
AA
+
Pass
+
+
+
+
+
+ $red-900 + #711e11 +
+
+
+
WCAG Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
WCAG Large
+
AA
+
Fail
+
AA
+
Pass
+
+
+
+
+
+ $red-950 + #4b140b +
+
+
+
WCAG Normal Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
WCAG Normal Normal
+
AA
+
Fail
+
AA
+
Pass
+
+
+
+
+
+
+ +
+
+
Dark
+
$night-100 @@ -841,28 +1044,6 @@
-
-
- $night-950 - #0E171F -
-
-
-
WCAG Normal
-
AA
-
Fail
-
AA
-
Pass
-
-
-
WCAG Large
-
AA
-
Fail
-
AA
-
Pass
-
-
-

The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.

diff --git a/_includes/design/typography.html b/_includes/design/typography.html index 1cc03b5..881f6fa 100644 --- a/_includes/design/typography.html +++ b/_includes/design/typography.html @@ -1,6 +1,6 @@

Typography

-

I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.

+

I2P's main fonts are Nunito and Inter.

@@ -115,7 +115,7 @@
-
+

Paragraph - Source Sans Pro Regular + Inter

I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other. @@ -147,7 +147,7 @@

Code Snippet - Source Code Pro + Inter 

           $('.i2p-sidebar').on('click', 'a',function() {
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 877ac6b..5ba8e65 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -111,10 +111,6 @@
 
 // Other color backgrounds
 
-.background-gray-50 {
-  background-color: $gray-50;
-}
-
 .background-gray-100 {
   background-color: $gray-100;
 }
@@ -259,8 +255,40 @@
   background-color: $orange-900;
 }
 
-.background-night-50 {
-  background-color: $night-50;
+.background-red-100 {
+  background-color: $red-100;
+}
+
+.background-red-200 {
+  background-color: $red-200;
+}
+
+.background-red-300 {
+  background-color: $red-300;
+}
+
+.background-red-400 {
+  background-color: $red-400;
+}
+
+.background-red-500 {
+  background-color: $red-500;
+}
+
+.background-red-600 {
+  background-color: $red-600;
+}
+
+.background-red-700 {
+  background-color: $red-700;
+}
+
+.background-red-800 {
+  background-color: $red-800;
+}
+
+.background-red-900 {
+  background-color: $red-900;
 }
 
 .background-night-100 {
@@ -299,10 +327,6 @@
   background-color: $night-900;
 }
 
-.background-night-950 {
-  background-color: $night-950;
-}
-
 // Text colors
 
 .color-primary {
@@ -444,10 +468,11 @@
 }
 
 .btn-link {
-  color: $primary !important;
+  color: var(--link) !important;
+  font-family: "Nunito", sans-serif;
 
   &:hover {
-    color: $secondary !important;
+    color: var(--link-hover) !important;
   }
 }
 
@@ -557,9 +582,9 @@
 }
 
 .rb-link {
-  color: $primary !important;
+  color: var(--link) !important;
   &:hover {
-    color: $secondary !important;
+    color: var(--link-hover) !important;
   }
 }
 
diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss
index 266ffdc..dff6413 100644
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -8,6 +8,7 @@
   height: 100%;
   width: 100%;
   background-color: var(--sidebar-inner-bg);
+  font-family: "Nunito", sans-serif;
 
   // position: fixed;
 
@@ -76,6 +77,7 @@
 
 .navbar__top {
   background-color: var(--navbar-bg);
+  font-family: "Nunito", sans-serif;
 }
 
 // bootstrap navbar-light class is not working, overwriting classes to fix this
@@ -248,7 +250,7 @@
       flex-basis: 50%;
 
       .pass { color: $indigo-700; }
-      .fail { color: $orange-500; }
+      .fail { color: $red-800; }
     }
   }
 
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 968a928..21cf67a 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -37,7 +37,7 @@ a:hover {
   --logo-text-color: #{$indigo-900};
   --header-text: #{$gray-900};
   --sidebar-bg: #{$gray-100};
-  --sidebar-inner-bg: #{$gray-50};
+  --sidebar-inner-bg: #{$gray-100};
   --sidebar-text: #{$gray-800};
   --navbar-bg: #{$indigo-500};
   --hover: #{$black};
@@ -69,14 +69,14 @@ html[data-theme="light"] {
   --secondary-2nd: #{$orange-400};
   --body: #{$white};
   --text: #{$gray-900};
-  --link: #{$teal-500};
+  --link: #{$indigo-600};
   --link-hover: #{$teal-600};
   --logo-text-color: #{$indigo-900};
   --header-text: #{$gray-900};
   --sidebar-bg: #{$gray-100};
-  --sidebar-inner-bg: #{$gray-50};
+  --sidebar-inner-bg: #{$gray-100};
   --sidebar-text: #{$gray-800};
-  --navbar-bg: #{$indigo-500};
+  --navbar-bg: #{$indigo-600};
   --hover: #{$black};
   --border: #{$gray-300};
   --card-bg: #{$gray-100};
@@ -113,7 +113,7 @@ html[data-theme="dark"] {
   --sidebar-bg: #{$night-800};
   --sidebar-inner-bg: #{$night-800};
   --sidebar-text: #{$gray-100};
-  --navbar-bg: #{$night-800};
+  --navbar-bg: #{$indigo-900};
   --hover: #{$gray-200};
   --border: #{$night-600};
   --card-bg: #{$night-800};
diff --git a/assets/styles/vars.scss b/assets/styles/vars.scss
index b0fc502..581bdbc 100644
--- a/assets/styles/vars.scss
+++ b/assets/styles/vars.scss
@@ -13,19 +13,17 @@ $black: #000000;
 
 //  Gray
 $gray-list: (
-  "50": #f8f9fa,
-  "100": #f1f3f5,
-  "200": #e9ecef,
-  "300": #dee2e6,
-  "400": #ced4da,
-  "500": #adb5bd,
-  "600": #868e96,
-  "700": #495057,
-  "800": #343a40,
-  "900": #212529
+  "100": #F7FAFC,
+  "200": #EDF2F7,
+  "300": #E2E8F0,
+  "400": #CBD5E0,
+  "500": #A0AEC0,
+  "600": #718096,
+  "700": #4A5568,
+  "800": #2D3748,
+  "900": #1A202C
 );
 
-$gray-50: map-get($gray-list, "50");
 $gray-100: map-get($gray-list, "100");
 $gray-200: map-get($gray-list, "200");
 $gray-300: map-get($gray-list, "300");
@@ -39,7 +37,6 @@ $gray-900: map-get($gray-list, "900");
 // Night
 
 $night-list: (
-      "50": #EBF3FA,
       "100": #D1DAE6,
       "200": #B1BFCF,
       "300": #8A9CB3,
@@ -48,11 +45,9 @@ $night-list: (
       "600": #374B61,
       "700": #2E3D4F,
       "800": #212D3B,
-      "900": #15212D,
-      "950": #0E171F
+      "900": #15212D
 );
 
-$night-50: map-get($night-list, "50");
 $night-100: map-get($night-list, "100");
 $night-200: map-get($night-list, "200");
 $night-300: map-get($night-list, "300");
@@ -62,7 +57,6 @@ $night-600: map-get($night-list, "600");
 $night-700: map-get($night-list, "700");
 $night-800: map-get($night-list, "800");
 $night-900: map-get($night-list, "900");
-$night-950: map-get($night-list, "950");
 
 //  Indigo
 $indigo-list: (
@@ -133,6 +127,30 @@ $orange-700: map-get($orange-list, "700");
 $orange-800: map-get($orange-list, "800");
 $orange-900: map-get($orange-list, "900");
 
+
+//  Red
+$red-list: (
+        "100": #FFF5F5,
+        "200": #FED7D7,
+        "300": #FEB2B2,
+        "400": #FC8181,
+        "500": #F56565,
+        "600": #E53E3E,
+        "700": #C53030,
+        "800": #9B2C2C,
+        "900": #742A2A
+);
+
+$red-100: map-get($red-list, "100");
+$red-200: map-get($red-list, "200");
+$red-300: map-get($red-list, "300");
+$red-400: map-get($red-list, "400");
+$red-500: map-get($red-list, "500");
+$red-600: map-get($red-list, "600");
+$red-700: map-get($red-list, "700");
+$red-800: map-get($red-list, "800");
+$red-900: map-get($red-list, "900");
+
 // Mixins
 //
 // .header-display :before size and position