feat(colors): add transparent colors

Author: mallowigi

new/dark.scss

@@ -29,6 +29,33 @@ $accent2: var(--links);
 $accent2Alpha: var(--links);
 $accent3: var(--tags);
 
+$trans-bg: var(--trans-bg);
+$trans-background: var(--trans-bg);
+$trans-darkerBg: var(--trans-contrast);
+$trans-lighterBg: var(--trans-second);
+$trans-fg: var(--trans-fg);
+$trans-foreground: var(--trans-fg);
+$trans-primary: var(--trans-text);
+$trans-text: var(--trans-text);
+$trans-selBg: var(--trans-selBg);
+$trans-selFg: var(--trans-selFg);
+$trans-selFg2: var(--trans-selFg2);
+$trans-button: var(--trans-button);
+$trans-disabled: var(--trans-disabled);
+$trans-contrast: var(--trans-contrast);
+$trans-second: var(--trans-second);
+$trans-active: var(--trans-active);
+$trans-border: var(--trans-border);
+$trans-borderLight: var(--trans-active);
+$trans-hl: var(--trans-hl);
+$trans-highlight: var(--trans-hl);
+$trans-tree: var(--trans-tree);
+$trans-notif: var(--trans-notif);
+$trans-excluded: var(--trans-excluded);
+$trans-accent: var(--trans-accent);
+$trans-accent2: var(--trans-accent2);
+$trans-accent3: var(--trans-accent3);
+
 $tag-name-color: var(--tags);
 $tags: var(--tags);
 $attribute-name-color: var(--attributes);

new/default.scss

@@ -27,6 +27,28 @@
   --accent2Alpha: #80cbc480;
   --accent3: #ff4081;
 
+  --trans-bg: #26323850;
+  --trans-darkerBg: #212c3150;
+  --trans-lighterBg: #32424a50;
+  --trans-fg: #b0bec550;
+  --trans-text: #607d8b50;
+  --trans-selBg: #546e7a50;
+  --trans-selFg: #ffffff50;
+  --trans-selFg2: #11111150;
+  --trans-button: #2e3c4350;
+  --trans-second: #32424a50;
+  --trans-disabled: #41596750;
+  --trans-contrast: #1e272c50;
+  --trans-active: #31454950;
+  --trans-border: #2a373e50;
+  --trans-hl: #425b6750;
+  --trans-tree: #546e7a50;
+  --trans-notif: #1e272c50;
+  --trans-accent: #00968850;
+  --trans-excluded: #2e3c4350;
+  --trans-accent2: #80cbc450;
+  --trans-accent3: #ff408150;
+
   --tags: #f07178;
   --attributes: #ffcb6b;
   --comments: #546e7a;
@@ -84,6 +106,33 @@ $accent2: var(--links);
 $accent2Alpha: var(--links);
 $accent3: var(--tags);
 
+$trans-bg: var(--trans-bg);
+$trans-background: var(--trans-bg);
+$trans-darkerBg: var(--trans-contrast);
+$trans-lighterBg: var(--trans-second);
+$trans-fg: var(--trans-fg);
+$trans-foreground: var(--trans-fg);
+$trans-primary: var(--trans-text);
+$trans-text: var(--trans-text);
+$trans-selBg: var(--trans-selBg);
+$trans-selFg: var(--trans-selFg);
+$trans-selFg2: var(--trans-selFg2);
+$trans-button: var(--trans-button);
+$trans-disabled: var(--trans-disabled);
+$trans-contrast: var(--trans-contrast);
+$trans-second: var(--trans-second);
+$trans-active: var(--trans-active);
+$trans-border: var(--trans-border);
+$trans-borderLight: var(--trans-active);
+$trans-hl: var(--trans-hl);
+$trans-highlight: var(--trans-hl);
+$trans-tree: var(--trans-tree);
+$trans-notif: var(--trans-notif);
+$trans-excluded: var(--trans-excluded);
+$trans-accent: var(--trans-accent);
+$trans-accent2: var(--trans-accent2);
+$trans-accent3: var(--trans-accent3);
+
 $tag-name-color: var(--tags);
 $tags: var(--tags);
 $attribute-name-color: var(--attributes);

new/light.scss

@@ -29,6 +29,33 @@ $accent2: var(--links);
 $accent2Alpha: var(--links);
 $accent3: var(--tags);
 
+$trans-bg: var(--trans-bg);
+$trans-background: var(--trans-bg);
+$trans-darkerBg: var(--trans-contrast);
+$trans-lighterBg: var(--trans-second);
+$trans-fg: var(--trans-fg);
+$trans-foreground: var(--trans-fg);
+$trans-primary: var(--trans-text);
+$trans-text: var(--trans-text);
+$trans-selBg: var(--trans-selBg);
+$trans-selFg: var(--trans-selFg);
+$trans-selFg2: var(--trans-selFg2);
+$trans-button: var(--trans-button);
+$trans-disabled: var(--trans-disabled);
+$trans-contrast: var(--trans-contrast);
+$trans-second: var(--trans-second);
+$trans-active: var(--trans-active);
+$trans-border: var(--trans-border);
+$trans-borderLight: var(--trans-active);
+$trans-hl: var(--trans-hl);
+$trans-highlight: var(--trans-hl);
+$trans-tree: var(--trans-tree);
+$trans-notif: var(--trans-notif);
+$trans-excluded: var(--trans-excluded);
+$trans-accent: var(--trans-accent);
+$trans-accent2: var(--trans-accent2);
+$trans-accent3: var(--trans-accent3);
+
 $tag-name-color: var(--tags);
 $tags: var(--tags);
 $attribute-name-color: var(--attributes);

src/utils/styleBuilder.ts

@@ -1,5 +1,6 @@
 import type { Store } from '~store/store';
 import type { Colors, AppSettings } from '~types/types';
+import hexRgb from 'hex-rgb';
 
 /**
  * Service to build the styles
@@ -155,6 +156,13 @@ export const styleBuilder = {
     fontSize,
     accentColor,
   }: Colors & AppSettings) {
+    function hexRGB(hex: string, alpha: number) {
+      if (!hex) {
+        return hexRgb('#000000', { format: 'css', alpha });
+      }
+      return hexRgb(hex.replace("'", ''), { format: 'css', alpha });
+    }
+
     // language=CSS
     return `
       :root {
@@ -176,6 +184,24 @@ export const styleBuilder = {
         --accent: ${accentColor || accent};
         --excluded: ${excluded};
 
+        --trans-bg: ${hexRGB(background, 0.5)};
+        --trans-fg: ${hexRGB(foreground, 0.5)};
+        --trans-text: ${hexRGB(text, 0.5)};
+        --trans-selBg: ${hexRGB(selectBg, 0.5)};
+        --trans-selFg: ${hexRGB(selectFg, 0.5)};
+        --trans-selFg2: ${hexRGB(selectFg2, 0.5)};
+        --trans-button: ${hexRGB(button, 0.5)};
+        --trans-disabled: ${hexRGB(disabled, 0.5)};
+        --trans-contrast: ${hexRGB(contrast, 0.5)};
+        --trans-second: ${hexRGB(second, 0.5)};
+        --trans-active: ${hexRGB(table, 0.5)};
+        --trans-border: ${hexRGB(border, 0.5)};
+        --trans-hl: ${hexRGB(hl, 0.5)};
+        --trans-tree: ${hexRGB(tree, 0.5)};
+        --trans-notif: ${hexRGB(notif, 0.5)};
+        --trans-accent: ${hexRGB(accentColor || accent, 0.5)};
+        --trans-excluded: ${hexRGB(excluded, 0.5)};
+
         --tags: ${tags};
         --attributes: ${attributes};
         --comments: ${comments};