Merge branch 'dev' into luis/aria-update

Satellite-im · Mar 28, 2024 · 061bbb3 · 061bbb3
2 parents af2b88b + ab044ec
commit 061bbb3
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 10 deletions.
diff --git a/kit/src/components/embeds/file_embed/style.scss b/kit/src/components/embeds/file_embed/style.scss
@@ -14,7 +14,7 @@
   display: inline-flex;
   gap: var(--gap);
   width: 100%;
-  color: var(--text-color);
+  color: var(--text-color-primary);
   align-content: center;
   align-self: flex-end;
   position: relative;

diff --git a/kit/src/components/message/style.scss b/kit/src/components/message/style.scss
@@ -1,6 +1,6 @@
 .message {
 	background: var(--primary);
-	color: var(--text-color);
+	color: var(--text-color-primary);
 	border-radius: var(--border-radius-more);
 	border-bottom-right-radius: var(--border-radius);
 	min-height: var(--height-input);
@@ -20,7 +20,7 @@
 	}
 
 	.text {
-		color: var(--text-color);
+		color: var(--text-color-primary);
 		display: flex;
 		flex-direction: column;
 		white-space: pre-wrap;
@@ -123,7 +123,7 @@
 
 .emoji-reaction-self {
 	background-color: var(--primary);
-	color: var(--text-color);
+	color: var(--text-color-primary);
 }
 
 .attachment-list {

diff --git a/kit/src/components/message_reply/style.scss b/kit/src/components/message_reply/style.scss
@@ -32,7 +32,7 @@
 	.text {
 		display: flex;
     	flex-direction: column;
-		color: var(--text-color);
+		color: var(--text-color-primary);
 		background-color: var(--primary);
 		padding: var(--gap) var(--padding);
 		font-size: var(--text-size-less);

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);
+  color: var(--text-color-primary);
   gap: var(--gap);
   padding: 0 var(--padding);
   justify-content: center;
@@ -19,7 +19,7 @@
   }
 
   svg {
-    stroke: var(--text-color);
+    stroke: var(--text-color-primary);
     fill: transparent;
     height: 1.1rem;
     width: 1.1rem;

diff --git a/kit/src/elements/select/style.scss b/kit/src/elements/select/style.scss
@@ -1,6 +1,6 @@
 .select select, .fancy-select{
     --webkit-appearance: none;
-    color: var(--text-color);
+    color: var(--text-color-primary);
     appearance: none;
     border-radius: var(--border-radius-more);
     min-width: fit-content;

diff --git a/kit/src/style.scss b/kit/src/style.scss
@@ -260,6 +260,7 @@ pre code {
   --border-subtle-color: #1c1d2b;
 
   --text-color: #d6def4;
+  --text-color-primary: var(--text-color);
   --text-color-muted: #6b78ac;
   --text-color-dark: #000;
   --text-color-bright: #ffffff;

diff --git a/ui/extra/themes/example.scss b/ui/extra/themes/example.scss
@@ -39,6 +39,7 @@
     // --border-color: #fff;
     // --border-subtle-color: #0f0f0f;
     // --text-color: #f8f9fa;
+    // --text-color-accent: var(--text-color);
     // --text-color-muted: #dee2e6;
     // --text-color-dark: #343a40;
     // --text-color-bright: #ffffff;

diff --git a/ui/src/layouts/storage/send_files_layout/style.scss b/ui/src/layouts/storage/send_files_layout/style.scss
@@ -14,6 +14,6 @@
     }
     .plus-some {
         background-color: var(--primary);
-        color: var(--text-color);
+        color: var(--text-color-primary);
     }
   }
diff --git a/ui/src/lib.rs b/ui/src/lib.rs
@@ -320,8 +320,12 @@ pub fn get_app_style(state: &State) -> String {
         format!(
             ":root {{
                     --primary: rgb({},{},{});
+                    --text-color-primary: {};
                 }}",
-            color.0, color.1, color.2,
+            color.0,
+            color.1,
+            color.2,
+            get_text_color(color.0, color.1, color.2)
         )
     } else {
         "".into()
@@ -330,6 +334,19 @@ pub fn get_app_style(state: &State) -> String {
     format!("{UIKIT_STYLES} {APP_STYLE} {PRISM_STYLE} {PRISM_THEME} {theme} {accent_color} {font_style} {open_dyslexic} {font_scale}")
 }
 
+// Decide if text should be dark or bright
+fn get_text_color(r: u8, g: u8, b: u8) -> &'static str {
+    // See https://en.wikipedia.org/wiki/Relative_luminance
+    let luminance: f64 = 0.2126729 * (r as f64 / 255.).powf(2.2)
+        + 0.7151522 * (g as f64 / 255.).powf(2.2)
+        + 0.0721750 * (b as f64 / 255.).powf(2.2);
+    if luminance > 0.5 {
+        "var(--text-color-dark)"
+    } else {
+        "var(--text-color)"
+    }
+}
+
 fn use_auto_updater(cx: &ScopeState) -> Option<()> {
     let download_state = use_shared_state::<DownloadState>(cx)?;
     let updater_ch = use_coroutine(cx, |mut rx: UnboundedReceiver<SoftwareUpdateCmd>| {