fix rgba variables

src/assets/styles/_common-functions.scss

@@ -0,0 +1,3 @@
+@function hexToRgb($color) {
+    @return #{red($color) + ', ' + green($color) + ', ' + blue($color)};
+}

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;

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);

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);
         }
     }