chore: centralize style definitions

* add shared variables to define and override colors

assets/css/bpmn-js-bpmnlint.css

@@ -1,3 +1,13 @@
+.djs-parent {
+  --bjsl-color-info: var(--color-blue-205-100-45);
+  --bjsl-color-warning: #f7c71a;
+  --bjsl-color-error: var(--color-red-360-100-40);
+  --bjsl-color-success: #52b415;
+
+  --bjsl-font-color: var(--color-grey-225-10-15);
+  --bjsl-font-family: 'Arial', sans-serif;
+}
+
 .bjsl-overlay {
   z-index: 500;
 }
@@ -17,16 +27,18 @@
 
 .bjsl-issues {
   padding: 8px;
-  color: #444;
-  font-family: 'Arial', sans-serif;
+  color: var(--bjsl-font-color);
+  font-family: var(--bjsl-font-family);
   font-size: 12px;
   background: var(--color-grey-225-10-97);
   border: solid 1px var(--color-grey-225-10-75);
   border-radius: 2px;
 }
 
 .bjsl-icon {
-  background: white;
+  --icon-color: white;
+  background: var(--icon-bg-color);
+  color: var(--icon-color);
   border-radius: 100%;
   height: 20px;
   width: 20px;
@@ -36,22 +48,15 @@
 }
 
 .bjsl-icon-error {
-  background-color: #cc3300;
-  color: white;
-
-  /* color: #cc3300; */
+  --icon-bg-color: var(--bjsl-color-error);
 }
 
 .bjsl-icon-warning {
-  background-color: #f7c71a;
-  color: white;
-
-  /* color: #f7c71a; */
+  --icon-bg-color: var(--bjsl-color-warning);
 }
 
 .bjsl-icon-info {
-  background-color: hsl(205, 100%, 45%);
-  color: white;
+  --icon-bg-color: var(--bjsl-color-info);
 }
 
 .bjsl-overlay {
@@ -191,21 +196,16 @@
 }
 
 .bjsl-button-success {
-  background-color: #52b415;
+  background-color: var(--bjsl-color-success);
   color: white;
 }
 
 .bjsl-button-error {
-  background-color: #cc3300;
+  background-color: var(--bjsl-color-error);
   color: white;
 }
 
 .bjsl-button-warning {
-  background-color: #f7c71a;
-  color: white;
-}
-
-.bjsl-button-info {
-  background-color: hsl(205, 100%, 45%);
+  background-color: var(--bjsl-color-warning);
   color: white;
-}
+}