[chores] Replaced hardcoded CSS colors with openwisp-utils variables #389

atif09 · nemesifier · web-flow · commit 237cd67f1478 · 2026-05-11T16:13:31.000-03:00
Replaced hardcoded color values in CSS files with the theme color variables defined in openwisp-utils Closes #360 --------- Co-authored-by: Federico Capoano <f.capoano@openwisp.io>
diff --git a/openwisp_firmware_upgrader/static/firmware-upgrader/css/batch-upgrade-operation.css b/openwisp_firmware_upgrader/static/firmware-upgrader/css/batch-upgrade-operation.css
@@ -142,24 +142,24 @@
 }
 
 .upgrade-status-container .upgrade-progress-fill.in-progress {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .upgrade-status-container .upgrade-progress-fill.success,
 .upgrade-status-container .upgrade-progress-fill.completed-successfully {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .upgrade-status-container .upgrade-progress-fill.failed {
-  background-color: #dc3545;
+  background-color: var(--ow-color-danger);
 }
 
 .upgrade-status-container .upgrade-progress-fill.aborted {
-  background-color: #6c757d;
+  background-color: var(--ow-color-fg-darker);
 }
 
 .upgrade-status-container .upgrade-progress-fill.cancelled {
-  background-color: #8b8b8b;
+  background-color: var(--ow-color-fg-dark);
 }
 
 .upgrade-status-container span {
@@ -173,28 +173,28 @@
 }
 
 .upgrade-status-in-progress {
-  color: #70bf2b;
+  color: var(--ow-color-success);
 }
 
 .upgrade-status-success,
 .upgrade-status-completed-successfully {
-  color: #70bf2b;
+  color: var(--ow-color-success);
 }
 
 .upgrade-status-failed {
-  color: #dc3545;
+  color: var(--ow-color-danger);
 }
 
 .upgrade-status-aborted {
-  color: #6c757d;
+  color: var(--ow-color-fg-darker);
 }
 
 .upgrade-status-cancelled {
-  color: #8b8b8b;
+  color: var(--ow-color-fg-dark);
 }
 
 .upgrade-status-idle {
-  color: #6c757d;
+  color: var(--ow-color-fg-dark);
 }
 
 .batch-main-progress {
@@ -207,7 +207,7 @@
 .batch-main-progress .upgrade-progress-bar {
   width: 300px;
   height: 12px;
-  background-color: #d9d9d9;
+  background-color: var(--ow-color-fg-medium);
   border-radius: 4px;
   overflow: hidden;
   border: 1px solid var(--border-color);
@@ -220,32 +220,32 @@
 }
 
 .batch-main-progress .upgrade-progress-fill.idle {
-  background-color: #6c757d;
+  background-color: var(--ow-color-fg-dark);
 }
 
 .batch-main-progress .upgrade-progress-fill.in-progress {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .batch-main-progress .upgrade-progress-fill.success,
 .batch-main-progress .upgrade-progress-fill.completed-successfully {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .batch-main-progress .upgrade-progress-fill.failed {
-  background-color: #dc3545;
+  background-color: var(--ow-color-danger);
 }
 
 .batch-main-progress .upgrade-progress-fill.aborted {
-  background-color: #6c757d;
+  background-color: var(--ow-color-fg-darker);
 }
 
 .batch-main-progress .upgrade-progress-fill.cancelled {
-  background-color: #8b8b8b;
+  background-color: var(--ow-color-fg-dark);
 }
 
 .batch-main-progress .upgrade-progress-fill.partial-success {
-  background-color: #ff9800;
+  background-color: var(--ow-color-warning);
 }
 
 .batch-main-progress .upgrade-progress-text {
diff --git a/openwisp_firmware_upgrader/static/firmware-upgrader/css/upgrade-progress.css b/openwisp_firmware_upgrader/static/firmware-upgrader/css/upgrade-progress.css
@@ -13,7 +13,7 @@
 .upgrade-progress-bar {
   width: 300px;
   height: 12px;
-  background-color: #d9d9d9;
+  background-color: var(--ow-color-fg-medium);
   border-radius: 4px;
   overflow: hidden;
   display: inline-block;
@@ -23,30 +23,30 @@
 
 .upgrade-progress-fill {
   height: 100%;
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
   transition: width 0.5s ease;
   border-radius: 2px;
   position: relative;
 }
 
 .upgrade-progress-fill.success {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .upgrade-progress-fill.failed {
-  background-color: #dc3545;
+  background-color: var(--ow-color-danger);
 }
 
 .upgrade-progress-fill.aborted {
-  background-color: #464646;
+  background-color: var(--ow-color-fg-darker);
 }
 
 .upgrade-progress-fill.cancelled {
-  background-color: #8b8b8b;
+  background-color: var(--ow-color-fg-dark);
 }
 
 .upgrade-progress-fill.in-progress {
-  background-color: #70bf2b;
+  background-color: var(--ow-color-success);
 }
 
 .upgrade-progress-text {

Original file line number	Diff line number	Diff line change
`@@ -142,24 +142,24 @@`
`142`	`142`	`}`
`143`	`143`
`144`	`144`	`.upgrade-status-container .upgrade-progress-fill.in-progress {`
`145`		`- background-color: #70bf2b;`
	`145`	`+ background-color: var(--ow-color-success);`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`.upgrade-status-container .upgrade-progress-fill.success,`
`149`	`149`	`.upgrade-status-container .upgrade-progress-fill.completed-successfully {`
`150`		`- background-color: #70bf2b;`
	`150`	`+ background-color: var(--ow-color-success);`
`151`	`151`	`}`
`152`	`152`
`153`	`153`	`.upgrade-status-container .upgrade-progress-fill.failed {`
`154`		`- background-color: #dc3545;`
	`154`	`+ background-color: var(--ow-color-danger);`
`155`	`155`	`}`
`156`	`156`
`157`	`157`	`.upgrade-status-container .upgrade-progress-fill.aborted {`
`158`		`- background-color: #6c757d;`
	`158`	`+ background-color: var(--ow-color-fg-darker);`
`159`	`159`	`}`
`160`	`160`
`161`	`161`	`.upgrade-status-container .upgrade-progress-fill.cancelled {`
`162`		`- background-color: #8b8b8b;`
	`162`	`+ background-color: var(--ow-color-fg-dark);`
`163`	`163`	`}`
`164`	`164`
`165`	`165`	`.upgrade-status-container span {`
`@@ -173,28 +173,28 @@`
`173`	`173`	`}`
`174`	`174`
`175`	`175`	`.upgrade-status-in-progress {`
`176`		`- color: #70bf2b;`
	`176`	`+ color: var(--ow-color-success);`
`177`	`177`	`}`
`178`	`178`
`179`	`179`	`.upgrade-status-success,`
`180`	`180`	`.upgrade-status-completed-successfully {`
`181`		`- color: #70bf2b;`
	`181`	`+ color: var(--ow-color-success);`
`182`	`182`	`}`
`183`	`183`
`184`	`184`	`.upgrade-status-failed {`
`185`		`- color: #dc3545;`
	`185`	`+ color: var(--ow-color-danger);`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`.upgrade-status-aborted {`
`189`		`- color: #6c757d;`
	`189`	`+ color: var(--ow-color-fg-darker);`
`190`	`190`	`}`
`191`	`191`
`192`	`192`	`.upgrade-status-cancelled {`
`193`		`- color: #8b8b8b;`
	`193`	`+ color: var(--ow-color-fg-dark);`
`194`	`194`	`}`
`195`	`195`
`196`	`196`	`.upgrade-status-idle {`
`197`		`- color: #6c757d;`
	`197`	`+ color: var(--ow-color-fg-dark);`
`198`	`198`	`}`
`199`	`199`
`200`	`200`	`.batch-main-progress {`
`@@ -207,7 +207,7 @@`
`207`	`207`	`.batch-main-progress .upgrade-progress-bar {`
`208`	`208`	`width: 300px;`
`209`	`209`	`height: 12px;`
`210`		`- background-color: #d9d9d9;`
	`210`	`+ background-color: var(--ow-color-fg-medium);`
`211`	`211`	`border-radius: 4px;`
`212`	`212`	`overflow: hidden;`
`213`	`213`	`border: 1px solid var(--border-color);`
`@@ -220,32 +220,32 @@`
`220`	`220`	`}`
`221`	`221`
`222`	`222`	`.batch-main-progress .upgrade-progress-fill.idle {`
`223`		`- background-color: #6c757d;`
	`223`	`+ background-color: var(--ow-color-fg-dark);`
`224`	`224`	`}`
`225`	`225`
`226`	`226`	`.batch-main-progress .upgrade-progress-fill.in-progress {`
`227`		`- background-color: #70bf2b;`
	`227`	`+ background-color: var(--ow-color-success);`
`228`	`228`	`}`
`229`	`229`
`230`	`230`	`.batch-main-progress .upgrade-progress-fill.success,`
`231`	`231`	`.batch-main-progress .upgrade-progress-fill.completed-successfully {`
`232`		`- background-color: #70bf2b;`
	`232`	`+ background-color: var(--ow-color-success);`
`233`	`233`	`}`
`234`	`234`
`235`	`235`	`.batch-main-progress .upgrade-progress-fill.failed {`
`236`		`- background-color: #dc3545;`
	`236`	`+ background-color: var(--ow-color-danger);`
`237`	`237`	`}`
`238`	`238`
`239`	`239`	`.batch-main-progress .upgrade-progress-fill.aborted {`
`240`		`- background-color: #6c757d;`
	`240`	`+ background-color: var(--ow-color-fg-darker);`
`241`	`241`	`}`
`242`	`242`
`243`	`243`	`.batch-main-progress .upgrade-progress-fill.cancelled {`
`244`		`- background-color: #8b8b8b;`
	`244`	`+ background-color: var(--ow-color-fg-dark);`
`245`	`245`	`}`
`246`	`246`
`247`	`247`	`.batch-main-progress .upgrade-progress-fill.partial-success {`
`248`		`- background-color: #ff9800;`
	`248`	`+ background-color: var(--ow-color-warning);`
`249`	`249`	`}`
`250`	`250`
`251`	`251`	`.batch-main-progress .upgrade-progress-text {`