Define and use color variables

edan-bainglass · Dec 29, 2024 · def74fe · def74fe
1 parent 8e03a3a
commit def74fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
@@ -88,23 +88,23 @@ footer {
 }
 
 .p-Accordion-child:has(.qe-app-step-ready) > .p-Collapse-header {
-  background-color: #fcf8e3;
+  background-color: var(--color-ready);
 }
 
 .p-Accordion-child:has(.qe-app-step-configured) > .p-Collapse-header {
-  background-color: #fcf8e3;
+  background-color: var(--color-ready);
   filter: brightness(0.95);
   -webkit-filter: brightness(0.95);
 }
 
 .p-Accordion-child:has(.qe-app-step-active) > .p-Collapse-header {
-  background-color: #d9edf7;
+  background-color: var(--color-active);
 }
 
 .p-Accordion-child:has(.qe-app-step-success) > .p-Collapse-header {
-  background-color: #dff0d8;
+  background-color: var(--color-success);
 }
 
 .p-Accordion-child:has(.qe-app-step-fail) > .p-Collapse-header {
-  background-color: #f2dede;
+  background-color: var(--color-failed);
 }
diff --git a/src/aiidalab_qe/app/static/styles/variables.css b/src/aiidalab_qe/app/static/styles/variables.css
@@ -0,0 +1,7 @@
+:root {
+  --color-init: #eee;
+  --color-ready: #fcf8e3;
+  --color-active: #d9edf7;
+  --color-success: #dff0d8;
+  --color-failed: #f2dede;
+}