chore: add comment to generated files

scripts/generate-palette.mjs

@@ -6,6 +6,13 @@ import figma from "../storybook/Figma.json" with {type: "json"}
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname)
 
+const autoGeneratedComment = `/**
+ * This file is auto-generated by scripts/generate-palette.mjs. 
+ * It is a summary of color choices made in Figma.
+ * Should you need to make a change in it, ask a designer 
+ * at Kestra first, so your changes are not overwritten. 
+ */`
+
 const [{
     color:paletteLight
 }, {
@@ -97,12 +104,12 @@ function makePalettes(palette, paletteName, selector) {
     const scss = baseColorNames.map(color => `$base-${color.name.split("/").pop()}: ${color.value};`).join("\n")
 
     // write the scss file containing colors in the base palette
-    fs.writeFileSync(path.resolve(__dirname, "../src/scss/_color-palette.scss"), scss, {encoding: "utf-8"})
+    fs.writeFileSync(path.resolve(__dirname, "../src/scss/_color-palette.scss"), `${autoGeneratedComment}\n${scss}`, {encoding: "utf-8"})
 
     const {tokenScss, cssVariableNames} = getVariableScss(palette.filter(c => !c.name.startsWith("base-color-palette/")), colorIndex)
 
     // write the scss file containing colors in the token palette
-    fs.writeFileSync(path.resolve(__dirname, `../src/scss/ks-theme-${paletteName}.scss`), `@import "./color-palette.scss";\n\n${selector}{\n\t${tokenScss}\n}`, {encoding: "utf-8"})
+    fs.writeFileSync(path.resolve(__dirname, `../src/scss/ks-theme-${paletteName}.scss`), `${autoGeneratedComment}\n@import "./color-palette.scss";\n\n${selector}{\n\t${tokenScss}\n}`, {encoding: "utf-8"})
 
     // write the css variables into an index for theme documentation
     // NOTE: we assume that all themes will have the same variables and write the same file over and over

src/components/topology/Topology.vue

@@ -401,8 +401,8 @@
 
 </script>
 
-<style scoped lang="scss">
-    :deep(.unused-path) {
+<style lang="scss">
+    .unused-path {
         opacity: 0.3;
     }
 </style>

src/scss/_color-palette.scss

@@ -1,3 +1,9 @@
+/**
+ * This file is auto-generated by scripts/generate-palette.mjs. 
+ * It is a summary of color choices made in Figma.
+ * Should you need to make a change in it, ask a designer 
+ * at Kestra first, so your changes are not overwritten. 
+ */
 $base-black: #14181f;
 $base-blue-50: #c7f0ff;
 $base-blue-100: #a2cdff;

src/scss/ks-theme-dark.scss

@@ -1,3 +1,9 @@
+/**
+ * This file is auto-generated by scripts/generate-palette.mjs. 
+ * It is a summary of color choices made in Figma.
+ * Should you need to make a change in it, ask a designer 
+ * at Kestra first, so your changes are not overwritten. 
+ */
 @import "./color-palette.scss";
 
 html.dark{

src/scss/ks-theme-light.scss

@@ -1,3 +1,9 @@
+/**
+ * This file is auto-generated by scripts/generate-palette.mjs. 
+ * It is a summary of color choices made in Figma.
+ * Should you need to make a change in it, ask a designer 
+ * at Kestra first, so your changes are not overwritten. 
+ */
 @import "./color-palette.scss";
 
 :root{