[CL-846] forbid hardcoded colors in svg (#16167)

* add eslint rule to prevent hardcoded colors in svgs

* add tests

* warn instead of error for now

libs/eslint/components/require-theme-colors-in-svg.spec.mjs

@@ -0,0 +1,53 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+import rule from "./require-theme-colors-in-svg.mjs";
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      project: [__dirname + "/../tsconfig.spec.json"],
+      projectService: {
+        allowDefaultProject: ["*.ts*"],
+      },
+      tsconfigRootDir: __dirname + "/..",
+    },
+  },
+});
+
+ruleTester.run("require-theme-colors-in-svg", rule.default, {
+  valid: [
+    {
+      name: "Allows fill=none",
+      code: 'const icon = svgIcon`<svg><path fill="none"/></svg>`;',
+    },
+    {
+      name: "Allows CSS variable",
+      code: 'const icon = svgIcon`<svg><path fill="var(--my-color)"/></svg>`;',
+    },
+    {
+      name: "Allows class-based coloring",
+      code: 'const icon = svgIcon`<svg><path class="tw-fill-art-primary"/></svg>`;',
+    },
+  ],
+  invalid: [
+    {
+      name: "Errors on fill with hex color",
+      code: 'const icon = svgIcon`<svg><path fill="#000000"/></svg>`;',
+      errors: [{ messageId: "hardcodedColor", data: { color: "#000000" } }],
+    },
+    {
+      name: "Errors on stroke with named color",
+      code: 'const icon = svgIcon`<svg><path stroke="red"/></svg>`;',
+      errors: [{ messageId: "hardcodedColor", data: { color: "red" } }],
+    },
+    {
+      name: "Errors on fill with rgb()",
+      code: 'const icon = svgIcon`<svg><path fill="rgb(255,0,0)"/></svg>`;',
+      errors: [{ messageId: "hardcodedColor", data: { color: "rgb(255,0,0)" } }],
+    },
+    {
+      name: "Errors on fill with named color",
+      code: 'const icon = svgIcon`<svg><path fill="blue"/></svg>`;',
+      errors: [{ messageId: "hardcodedColor", data: { color: "blue" } }],
+    },
+  ],
+});