chore(Colors): Changed colors to more closely match mockups

Satellite-im · Mar 19, 2024 · a542584 · a542584
1 parent d668299
commit a542584
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/kit/src/components/message/style.scss b/kit/src/components/message/style.scss
@@ -1,5 +1,6 @@
 .message {
 	background: var(--primary);
+	color: var(--text-color);
 	border-radius: var(--border-radius-more);
 	border-bottom-right-radius: var(--border-radius);
 	min-height: var(--height-input);
@@ -18,7 +19,7 @@
 		align-self: flex-end;
 	}
 	.text {
-		color: var(--text-color-dark);
+		color: var(--text-color);
 		display: block;
 		white-space:pre-wrap;
 
@@ -100,7 +101,7 @@
 
 .emoji-reaction-self {
 	background-color: var(--primary);
-	color: var(--text-color-dark);
+	color: var(--text-color);
 }
 
 .attachment-list {

diff --git a/kit/src/elements/button/style.scss b/kit/src/elements/button/style.scss
@@ -5,7 +5,7 @@
   height: var(--height-input);
   border-radius: var(--border-radius-more);
   background-color: var(--primary);
-  color: var(--text-color-dark);
+  color: var(--text-color);
   gap: var(--gap);
   padding: 0 var(--padding);
   justify-content: center;
@@ -19,7 +19,7 @@
   }
 
   svg {
-    stroke: var(--text-color-dark);
+    stroke: var(--text-color);
     fill: transparent;
     height: 1.1rem;
     width: 1.1rem;
@@ -37,7 +37,7 @@
     background-color: var(--text-selection);
     color: var(--text-color-bright);
     svg {
-      stroke: var(--text-color-dark);
+      stroke: var(--text-color);
       fill: transparent;
     }
     &:hover {

diff --git a/kit/src/elements/select/style.scss b/kit/src/elements/select/style.scss
@@ -1,12 +1,12 @@
 .select select, .fancy-select{
     --webkit-appearance: none;
-    color: var(--text-color-dark);
+    color: var(--text-color);
     appearance: none;
     border-radius: var(--border-radius-more);
     min-width: fit-content;
     width: 100%;
     height: var(--height-input);
-    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='black'><polygon points='0,0 40,0 20,20'/></svg>")
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='white'><polygon points='0,0 40,0 20,20'/></svg>")
     no-repeat;
     background-size: 12px;
     background-position: calc(100% - 16px) 18px;

diff --git a/kit/src/style.scss b/kit/src/style.scss
@@ -256,28 +256,28 @@ pre code {
   --border-radius-more: 20px;
   --border-radius-inner: 10px;
   --border-radius-app-window: 10px;
-  --border-color: #fff;
-  --border-subtle-color: #141414;
+  --border-color: #1c1d2b;
+  --border-subtle-color: #1c1d2b;
 
-  --text-color: #f8f9fa;
-  --text-color-muted: #aaafb2;
-  --text-color-dark: #343a40;
+  --text-color: #d6def4;
+  --text-color-muted: #6b78ac;
+  --text-color-dark: #000;
   --text-color-bright: #ffffff;
   --text-color-link: #4761fc;
   --text-color-user-tag: #576ae5b1;
   --text-selection: #e0e0e0;
   --placeholder: #bcbcbc;
-  --primary: #fcfbf4;
+  --primary: #4d4dff;
   --primary-dark: color-mix(in srgb, var(--primary) 50%, black);
   --primary-light: color-mix(in srgb, var(--primary) 50%, white);
   --primary-light-less: color-mix(in srgb, var(--primary) 50%, #d3d2cb);
-  --secondary: #343a40;
-  --secondary-light: #4c555d;
-  --secondary-dark: #212529;
-  --secondary-darker: #16191c;
-  --background: #000000;
+  --secondary: #21263a;
+  --secondary-light: #23293e;
+  --secondary-dark: #1a1e2d;
+  --secondary-darker: #141723;
+  --background: #0d0e16;
   --background-light: var(--secondary-light);
-  --background-dark: #161a21;
+  --background-dark: #141420;
   --background-modal: rgba(0,0,0, 0.9);
   --background-mention: #eda46ca1;
   --success: #1dd1a1;