From b9d0de1b7d7d7b88193d0aeaf50c3bf91758fab3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Sep 2019 16:14:39 +0200
Subject: [PATCH] create 0% and 50% opaque vars as #rgba trick doesn't work

---
 res/themes/light-custom/css/_custom.scss      | 24 ++++---------
 res/themes/light-custom/css/light-custom.scss | 34 +++++++++++++++++++
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 02ce63ce1d..38cc33b3c9 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -9,8 +9,8 @@ $roomsublist-chevron-color: var(--accent-color);
 $tab-label-active-bg-color: var(--accent-color);
 $togglesw-on-color: var(--accent-color);
 $username-variant3-color: var(--accent-color);
-$accent-color-50pct: var(--accent-color)"7F"; // uses #rrggbbaa notation, alpha at .5
 // background color
+$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
 $authpage-body-bg-color: var(--background-color);
 $avatar-bg-color: var(--background-color);
 $button-secondary-bg-color: var(--background-color);
@@ -22,9 +22,9 @@ $primary-bg-color: var(--background-color);
 $roomtile-focused-bg-color: var(--background-color);
 $roomtile-selected-bg-color: var(--background-color);
 $togglesw-ball-color: var(--background-color);
-$droptarget-bg-color: var(--background-color)"7F"; // uses #rrggbbaa notation, alpha at .5
-$authpage-modal-bg-color: var(--background-color)"CF"; // uses #rrggbbaa notation, alpha at .59
 // base color
+$droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5
+$authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59
 $interactive-tooltip-bg-color: var(--base-color);
 $tagpanel-bg-color: var(--base-color);
 $tooltip-timeline-bg-color: var(--base-color);
@@ -32,7 +32,7 @@ $tooltip-timeline-bg-color: var(--base-color);
 $event-selected-color: var(--panel-color);
 $header-panel-bg-color: var(--panel-color);
 $reaction-row-button-bg-color: var(--panel-color);
-$panel-gradient: var(--panel-color)"00", var(--panel-color)"FF";
+$panel-gradient: var(--panel-color-0pct), var(--panel-color);
 // these were #f2f5f8 instead of #f3f8fd, but close enough
 $dark-panel-bg-color: var(--panel-color);
 $input-lighter-bg-color: var(--panel-color);
@@ -48,8 +48,8 @@ $panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3
 $message-action-bar-fg-color: var(--body-text-color);
 $primary-fg-color: var(--body-text-color);
 $settings-profile-overlay-placeholder-fg-color: var(--body-text-color);
-$dialog-backdrop-color: var(--body-text-color)"82";  // uses #rrggbbaa notation, alpha at .38
 // body contrast color
+$dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38
 $authpage-secondary-color: var(--body-contrast-color);
 $memberstatus-placeholder-color: var(--body-contrast-color);
 $notice-secondary-color: var(--body-contrast-color);
@@ -68,17 +68,5 @@ $mention-user-pill-bg-color: var(--warning-color);
 $notice-primary-color: var(--warning-color);
 $pinned-unread-color: var(--warning-color);
 $warning-color: var(--warning-color);
-$button-danger-disabled-bg-color: var(--warning-color)"7C";
 
-// defaults
-body {
-    --accent-color: #03b381;
-    --background-color: #ffffff;
-    --base-color: #27303a;
-    --panel-color: #f3f8fd;
-    --panel-contrast-color: #e3e8f0;
-    --body-text-color: #2e2f32;
-    --body-contrast-color: #61708b;
-    --primary-color: #368bd6;
-    --warning-color: #ff4b55;
-}
+$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss
index 278ca5f0b1..a75db83305 100644
--- a/res/themes/light-custom/css/light-custom.scss
+++ b/res/themes/light-custom/css/light-custom.scss
@@ -3,3 +3,37 @@
 @import "../../light/css/_light.scss";
 @import "_custom.scss";
 @import "../../../../res/css/_components.scss";
+
+// defaults
+body {
+    // fully opaque
+    --accent-color: #03b381;
+    --background-color: #ffffff;
+    --base-color: #27303a;
+    --panel-color: #f3f8fd;
+    --panel-contrast-color: #e3e8f0;
+    --body-text-color: #2e2f32;
+    --body-contrast-color: #61708b;
+    --primary-color: #368bd6;
+    --warning-color: #ff4b55;
+    // 0% opaque
+    --accent-color-0pct: #03b38100;
+    --background-color-0pct: #ffffff00;
+    --base-color-0pct: #27303a00;
+    --panel-color-0pct: #f3f8fd00;
+    --panel-contrast-color-0pct: #e3e8f000;
+    --body-text-color-0pct: #2e2f3200;
+    --body-contrast-color-0pct: #61708b00;
+    --primary-color-0pct: #368bd600;
+    --warning-color-0pct: #ff4b5500;
+    // 50% opaque
+    --accent-color-50pct: #03b3817f;
+    --background-color-50pct: #ffffff7f;
+    --base-color-50pct: #27303a7f;
+    --panel-color-50pct: #f3f8fd7f;
+    --panel-contrast-color-50pct: #e3e8f07f;
+    --body-text-color-50pct: #2e2f327f;
+    --body-contrast-color-50pct: #61708b7f;
+    --primary-color-50pct: #368bd67f;
+    --warning-color-50pct: #ff4b557f;
+}