From a16d1db3ab938dccc2c9d82c5e3d283bb857f46c Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Tue, 21 Sep 2021 17:17:41 +0300
Subject: [PATCH] fix rgba variables

---
 src/assets/styles/_common-functions.scss | 3 +++
 src/assets/styles/_common-variables.scss | 2 ++
 src/assets/styles/common-buttons.scss    | 6 ++----
 src/assets/styles/common-inputs.scss     | 6 ++----
 4 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/styles/_common-functions.scss

diff --git a/src/assets/styles/_common-functions.scss b/src/assets/styles/_common-functions.scss
new file mode 100644
index 0000000..efdd0c0
--- /dev/null
+++ b/src/assets/styles/_common-functions.scss
@@ -0,0 +1,3 @@
+@function hexToRgb($color) {
+    @return #{red($color) + ', ' + green($color) + ', ' + blue($color)};
+}
diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index f51ce18..9ea478f 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -2,8 +2,10 @@
 
 :root {
     --iqser-primary: lightblue;
+    --iqser-primary-rgb: 220, 230, 234;
     --iqser-primary-2: orange;
     --iqser-accent: blue;
+    --iqser-accent-rgb: 123, 234, 111;
     --iqser-disabled: #9398a0;
     --iqser-not-disabled-table-item: #f9fafb;
     --iqser-btn-bg-hover: #e2e4e9;
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index f728b82..2624669 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -62,8 +62,7 @@ iqser-circle-button {
         transition: background-color 0.2s;
 
         &.overlay {
-            // TODO
-            background: rgba(var(--iqser-primary), 0.1);
+            background: rgba(var(--iqser-primary-rgb), 0.1);
         }
 
         &:not(.overlay):hover {
@@ -101,8 +100,7 @@ iqser-circle-button,
 iqser-icon-button {
     &[aria-expanded='true'] {
         button {
-            // TODO
-            background: rgba(var(--iqser-primary), 0.1);
+            background: rgba(var(--iqser-primary-rgb), 0.1);
 
             &.primary {
                 background: var(--iqser-primary-2);
diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss
index edc524f..f67dc0f 100644
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@@ -116,8 +116,7 @@ form .iqser-input-group:not(first-of-type) {
         }
 
         &.ng-invalid.ng-touched {
-            // TODO
-            border-color: rgba(var(--iqser-primary, 0.3));
+            border-color: rgba(var(--iqser-primary-rgb), 0.3);
 
             &:focus {
                 border-color: var(--iqser-primary);
@@ -127,8 +126,7 @@ form .iqser-input-group:not(first-of-type) {
         &:disabled,
         &.mat-select-disabled {
             background-color: var(--iqser-filter-bg);
-            // TODO
-            color: rgba(var(--iqser-accent, 0.3));
+            color: rgba(var(--iqser-accent-rgb), 0.3);
         }
     }