Dark Mode: Signature Windows (#14018)

ui/components/app/signature-request-original/index.scss

@@ -54,7 +54,7 @@
 
   &__header-background {
     position: absolute;
-    background-color: var(--athens-grey);
+    background-color: var(--color-background-alternative);
     z-index: 2;
     width: 100%;
     height: 100%;
@@ -63,7 +63,7 @@
   &__header__text {
     @include H3;
 
-    color: #5b5d67;
+    color: var(--color-default-text);
     z-index: 3;
   }
 
@@ -91,7 +91,7 @@
   }
 
   &__account {
-    color: var(--dusty-gray);
+    color: var(--color-text-alternative);
     margin-left: 17px;
   }
 
@@ -123,7 +123,7 @@
   }
 
   &__balance {
-    color: var(--dusty-gray);
+    color: var(--color-text-alternative);
     margin-right: 17px;
     width: 124px;
   }
@@ -181,7 +181,7 @@
   }
 
   &__notice {
-    color: var(--dusty-gray);
+    color: var(--color-text-alternative);
     padding: 0 10px;
   }
 
@@ -193,7 +193,7 @@
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
-    border-top: 1px solid var(--geyser);
+    border-top: 1px solid var(--color-border-default);
     display: flex;
     flex-flow: column;
   }
@@ -208,7 +208,7 @@
     @include H5;
 
     width: 80px;
-    color: var(--dusty-gray);
+    color: var(--color-text-alternative);
     margin-top: 12px;
     margin-left: 18px;
     width: 100%;
@@ -217,10 +217,10 @@
   &__row-value {
     @include H6;
 
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
     width: 100%;
     overflow-wrap: break-word;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-default);
     padding: 6px 18px 15px;
     white-space: pre-wrap;
   }
@@ -241,7 +241,7 @@
     justify-content: center;
     position: relative;
     flex: 0 0 auto;
-    border-top: 1px solid var(--geyser);
+    border-top: 1px solid var(--color-border-default);
     padding: 1.6rem;
 
     button {

ui/components/app/signature-request/signature-request-message/index.scss

@@ -9,7 +9,7 @@
     @include H6;
 
     font-weight: 500;
-    color: #636778;
+    color: var(--color-text-alternative);
     margin-left: 12px;
   }
 
@@ -18,15 +18,15 @@
 
     flex: 1 1 0;
     text-align: left;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-default);
     padding: 0.5rem;
     margin: 0;
-    color: #ccc;
+    color: var(--color-text-alternative);
   }
 
   &--root {
     flex: 1 100%;
-    background-color: #f8f9fb;
+    background-color: var(--color-background-alternative);
     padding-bottom: 0.5rem;
     overflow: auto;
     padding-left: 12px;
@@ -42,12 +42,12 @@
     padding-left: 0.3rem;
 
     &-label {
-      color: #5b5d67;
+      color: var(--color-text-alternative);
       margin-left: 0.5rem;
     }
 
     &-value {
-      color: black;
+      color: var(--color-text-default);
       margin-left: 0.5rem;
       white-space: pre-line;
       overflow: hidden;
@@ -63,7 +63,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--Grey-500);
+    background-color: var(--color-background-alternative);
     position: absolute;
     right: 24px;
     bottom: 12px;

ui/components/ui/identicon/index.scss

@@ -14,11 +14,11 @@
     border-style: solid;
     border-radius: 50%;
     border-width: 2px;
-    border-color: var(--primary-blue);
+    border-color: var(--color-primary-default);
   }
 
   &__image-border {
-    border: 1px solid var(--alto);
+    border: 1px solid var(--color-border-default);
-    background: var(--white);
+    background: var(--color-background-default);
   }
 }