✨ app: feat: use colors from firefox

Author: duduluu

app/scripts/gen-files.ts

@@ -45,7 +45,7 @@ const optionsList: GenFilesOptions[] = [
   },
 ];
 
-Promise.all(optionsList.map(genFiles)).catch((e: Error) => {
+Promise.all([genVariables(), ...optionsList.map(genFiles)]).catch((e: Error) => {
   /* eslint-disable no-console */
   console.error(e.message);
   console.error(e.stack);

app/scripts/gen-variables.ts

@@ -0,0 +1,63 @@
+/* eslint-disable no-console */
+import * as io from '@rimtrans/io';
+
+async function genColors(): Promise<void> {
+  const colorsJson: Record<string, Record<string, string>> = await io.load(
+    io.join(__dirname, 'variables', 'colors.json'),
+  );
+
+  const blocks: [string, string][][] = [];
+
+  Object.entries(colorsJson).forEach(([name, map]) => {
+    const block: [string, string][] = [];
+    blocks.push(block);
+
+    Object.keys(map)
+      .sort()
+      .forEach(level => {
+        const color = map[level];
+        block.push([`--color-${name}-${level}`, color]);
+      });
+
+    Object.keys(map)
+      .sort()
+      .forEach(level => {
+        const color = map[level];
+        const hex = color.replace('#', '');
+        const [r, g, b] = [[0, 2], [2, 4], [4, 6]].map(([start, end]) =>
+          Number.parseInt(hex.substring(start, end), 16),
+        );
+        const alphaBlock: [string, string][] = [];
+        blocks.push(alphaBlock);
+        for (let index = 1; index <= 9; index++) {
+          alphaBlock.push([
+            `--color-${name}-${level}-a${index * 10}`,
+            `rgba(${r}, ${g}, ${b}, ${index / 10})`,
+          ]);
+        }
+      });
+  });
+
+  const content = blocks
+    .map(block => block.map(([name, value]) => `  ${name}: ${value};`).join('\n'))
+    .join('\n\n');
+
+  const wrap = `%variables-color-palette {\n${content}\n}\n`;
+
+  await io.save(
+    io.join(
+      __dirname,
+      '..',
+      'src',
+      'renderer',
+      'components',
+      'base',
+      'variables-color-palette.scss',
+    ),
+    wrap,
+  );
+}
+
+export async function genVariables(): Promise<void> {
+  await Promise.all([genColors()]);
+}

app/scripts/variables/colors.json

@@ -0,0 +1,109 @@
+{
+  "green": {
+    "05": "#e3fff3",
+    "10": "#d0ffed",
+    "20": "#b3ffe3",
+    "30": "#87ffd1",
+    "40": "#53ffbc",
+    "50": "#3fe1b0",
+    "60": "#2ac4a2",
+    "70": "#018788",
+    "80": "#005e5e",
+    "90": "#084036"
+  },
+  "blue": {
+    "05": "#abf1fe",
+    "10": "#80ebff",
+    "20": "#01ddff",
+    "30": "#00b3f5",
+    "40": "#0090ed",
+    "50": "#0160e0",
+    "60": "#0250bc",
+    "70": "#063f96",
+    "80": "#073072",
+    "90": "#09204c"
+  },
+  "purple": {
+    "05": "#e6dfff",
+    "10": "#d9bfff",
+    "20": "#cb9dff",
+    "30": "#c588ff",
+    "40": "#ac71ff",
+    "50": "#9059ff",
+    "60": "#7543e4",
+    "70": "#582acb",
+    "80": "#46278e",
+    "90": "#321c64"
+  },
+  "violet": {
+    "05": "#f7e3ff",
+    "10": "#f6b9ff",
+    "20": "#f690ff",
+    "30": "#f564ff",
+    "40": "#d74cf0",
+    "50": "#b933e0",
+    "60": "#952bb9",
+    "70": "#722291",
+    "80": "#4f1a6a",
+    "90": "#2b1141"
+  },
+  "magenta": {
+    "05": "#ffdff0",
+    "10": "#ffb4db",
+    "20": "#ff8ac6",
+    "30": "#ff6aba",
+    "40": "#fe4aa2",
+    "50": "#ff2a8a",
+    "60": "#e11586",
+    "70": "#c60184",
+    "80": "#7f165b",
+    "90": "#50134c"
+  },
+  "red": {
+    "05": "#fedfe7",
+    "10": "#ffbec6",
+    "20": "#ff9aa2",
+    "30": "#ff848c",
+    "40": "#ff6a75",
+    "50": "#ff4f5f",
+    "60": "#e12851",
+    "70": "#c40042",
+    "80": "#810220",
+    "90": "#440307"
+  },
+  "orange": {
+    "05": "#fff4de",
+    "10": "#ffd5b2",
+    "20": "#ffb587",
+    "30": "#ffa265",
+    "40": "#fe8a4f",
+    "50": "#ff7139",
+    "60": "#e25821",
+    "70": "#cd3d00",
+    "80": "#9e280c",
+    "90": "#7b1604"
+  },
+  "yellow": {
+    "05": "#ffffcc",
+    "10": "#feff98",
+    "20": "#ffea80",
+    "30": "#ffd567",
+    "40": "#ffbd4f",
+    "50": "#ffa537",
+    "60": "#e27f2e",
+    "70": "#c45a28",
+    "80": "#a7341f",
+    "90": "#960e18"
+  },
+  "grey": {
+    "10": "#f9f9fa",
+    "20": "#ededf0",
+    "30": "#d7d7db",
+    "40": "#b1b1b3",
+    "50": "#737373",
+    "60": "#4a4a4f",
+    "70": "#38383d",
+    "80": "#2a2a2e",
+    "90": "#0c0c0d"
+  }
+}

app/src/renderer/components/atom/theme.scss

@@ -1,7 +1,7 @@
 /**
  * Component: Theme
  */
-@each $theme in $type-themes {
+@each $theme in $type-color-themes {
   @include comp('theme-#{$theme}') {
     @extend %variables-theme-#{$theme};
   }