fix(ui): Theme - use color vars

relative-ci · Nov 23, 2024 · 0d181a4 · 0d181a4
1 parent dd892ef
commit 0d181a4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css b/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css
@@ -80,49 +80,49 @@
 
 /** Tile group nested variation */
 .nested .tileGroup {
-  background-color: rgba(27, 26, 33, 0.03);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
+  background-color: rgba(var(--color-background-rgba), 0.1);
+  outline: 1px solid rgba(var(--color-background-rgba), 0.8);
 }
 
 .nested .tileGroup:has(> .tileGroupTitle:hover),
 .nested .tileGroup:has(> .tile:hover) {
-  background-color: rgba(27, 26, 33, 0.06);
-  outline: 1px solid rgba(255, 255, 255, 1);
+  background-color: rgba(var(--color-background-rgba), 0.06);
+  outline: 1px solid rgba(var(--color-background-rgba), 1);
   transition: var(--transition-in);
   transition-property: background-color, outline;
 }
 
 .nested .tileGroup--NEGATIVE {
-  background-color: rgba(194, 31, 37, 0.04);
+  background-color: rgba(240, 0, 0, 0.04);
 }
 
 .nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
 .nested .tileGroup--NEGATIVE:has(> .tile:hover) {
-  background-color: rgba(194, 31, 37, 0.1);
+  background-color: rgba(240, 0, 0, 0.1);
 }
 
 .nested .tileGroup--POSITIVE {
-  background-color: rgba(42, 147, 39, 0.04);
+  background-color: rgba(0, 240, 0, 0.04);
 }
 
 .nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
 .nested .tileGroup--POSITIVE:has(> .tile:hover) {
-  background-color: rgba(42, 147, 39, 0.1);
+  background-color: rgba(0, 240, 0, 0.1);
 }
 
 /* reset bacground color when having a not changed group */
 .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
 .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
   background-color: var(--color-background);
-  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+  background-image: linear-gradient(var(--color-background-rgba), 0.1);
 }
 
 .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
 .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
 .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
 .nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
   background-color: var(--color-background);
-  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+  background-image: linear-gradient(var(--color-background-rgba), 0.1);
 }
 
 /** Leaf wrapper button */
@@ -214,7 +214,7 @@
 
 /** Tile diff variation */
 .tile {
-  outline: 1px solid rgba(255, 255, 255, 1);
+  outline: 1px solid rgba(var(--color-background-rgba), 1);
   color: var(--color-text);
 }
 
@@ -249,27 +249,27 @@
 }
 
 .tile-HIGH_NEGATIVE::before {
-  color: var(--red-2);
+  color: var(--red-5);
 }
 
 .tile-NEGATIVE::before {
-  color: var(--red-3);
+  color: var(--red-4);
 }
 
 .tile-LOW_NEGATIVE::before {
-  color: var(--red-4);
+  color: var(--red-3);
 }
 
 .tile-LOW_POSITIVE::before {
-  color: var(--green-2);
+  color: var(--green-3);
 }
 
 .tile-POSITIVE::before {
-  color: var(--green-3);
+  color: var(--green-4);
 }
 
 .tile-HIGH_POSITIVE::before {
-  color: var(--green-4);
+  color: var(--green-5);
 }
 
 /** empty message */

diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
@@ -83,10 +83,10 @@
   --yellow-11: #947300;
   --yellow-12: #443b1f;
 
-  --color-background: #FFF;
+  --color-background-rgba: 255, 255, 255;
+  --color-background: rgba(var(--color-background-rgba), 1);
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
-
 }
 
 .dark-theme {
@@ -168,7 +168,8 @@
   --yellow-11: #fbd13d;
   --yellow-12: #f9e9b8;
 
-  --color-background: #111;
+  --color-background-rgba: 17, 17, 17;
+  --color-background: rgba(var(--color-background-rgba), 1);
   --color-backdrop: rgba(255, 255, 255, 0.05);
   --color-shadow: rgba(255, 255, 255, 0.15);
 }

diff --git a/packages/ui/src/ui/filters/filters.module.css b/packages/ui/src/ui/filters/filters.module.css
@@ -16,6 +16,7 @@
   margin: 0;
   flex: 0 0 auto;
   height: 1em;
+  background: var(--color-background);
 }
 
 .filterLabel {
@@ -87,7 +88,7 @@
   right: 100%;
   bottom: 0;
   width: var(--space-4x);
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
+  background: linear-gradient(90deg, rgba(var(--color-background-rgb), 0), var(--color-highlight) 75%);
 }
 
 /** filter hover state */

diff --git a/packages/ui/src/ui/input/input.module.css b/packages/ui/src/ui/input/input.module.css
@@ -2,6 +2,7 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   color: var(--color-text-muted);
+  background: var(--color-background);
   width: 100%;
   transition: var(--transition-in);
   appearance: none;