extract color constants to css

Author: Kr0nox

src/features/constraintMenu/commands.ts

@@ -31,7 +31,7 @@ export class ChooseConstraintCommand extends Command {
         const nodes = context.root.children.filter((node) => getBasicType(node) === "node") as DfdNodeImpl[];
         if (names.length === 0) {
             nodes.forEach((node) => {
-                node.setColor("#1D1C22");
+                node.setColor("var(--color-primary)");
             });
             return context.root;
         }
@@ -56,14 +56,14 @@ export class ChooseConstraintCommand extends Command {
                     }
                 });
             });
-            if (!wasAdjusted) node.setColor("#1D1C22");
+            if (!wasAdjusted) node.setColor("var(--color-primary)");
         });
 
         nodes.forEach((node) => {
             const inTFG = node.annotations!.filter((annotation) =>
                 this.annnotationsManager.getSelectedTfgs().has(annotation.tfg!),
             );
-            if (inTFG.length > 0) node.setColor("#77777A", false);
+            if (inTFG.length > 0) node.setColor("var(--color-highlighted)", false);
         });
 
         return context.root;

src/features/dfdElements/elementStyles.css

@@ -19,7 +19,7 @@
     /* Background fill of the node.
        When --color is unset this is just --color-primary.
        If this node is annotated and --color is set, it will be included in the color mix. */
-    fill: color-mix(in srgb, var(--color-primary), var(--color, transparent) 25%);
+    fill: color-mix(in srgb, var(--color-primary), var(--color, transparent) 40%);
 }
 
 .sprotty-node .node-label text {

src/features/dfdElements/nodes.tsx

@@ -39,8 +39,8 @@ export abstract class DfdNodeImpl extends DynamicChildrenNode implements WithEdi
     static readonly DEFAULT_FEATURES = [...SNodeImpl.DEFAULT_FEATURES, withEditLabelFeature, containsDfdLabelFeature];
     static readonly DEFAULT_WIDTH = 50;
     static readonly WIDTH_PADDING = 12;
-    static readonly NODE_COLOR = "#1D1C22";
-    static readonly HIGHLIGHTED_COLOR = "#77777A";
+    static readonly NODE_COLOR = "var(--color-primary)";
+    static readonly HIGHLIGHTED_COLOR = "var(--color-highlighted)";
 
     text: string = "";
     color?: string;

src/theme.css

@@ -5,6 +5,7 @@
     --color-spacer: #e5e5e5;
     --color-error: #f00;
     --color-valid: #00b600;
+    --color-highlighted: #77777a;
     --color-tool-palette-hover: #ccc;
     --color-tool-palette-selected: #bbb;
     --dark-mode: 0;