v0.0.6

src/web/css/00-tokens.css

@@ -194,6 +194,54 @@ html[data-color-preset="red"] {
   --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
 }
 
+html[data-color-preset="emerald"] {
+  --accent: #4f9b72;
+  --accent-strong: #68b38a;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="lime"] {
+  --accent: #86a84f;
+  --accent-strong: #9bbb68;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="sky"] {
+  --accent: #5d9ec4;
+  --accent-strong: #77b2d2;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="navy"] {
+  --accent: #647eae;
+  --accent-strong: #7f96bd;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="plum"] {
+  --accent: #9a6f9d;
+  --accent-strong: #af87b1;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="magenta"] {
+  --accent: #b76591;
+  --accent-strong: #c87da5;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="copper"] {
+  --accent: #b57755;
+  --accent-strong: #c78f70;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
+html[data-color-preset="sand"] {
+  --accent: #aa9465;
+  --accent-strong: #bcaa7d;
+  --selected: color-mix(in srgb, var(--accent) 20%, var(--panel));
+}
+
 
 :root {
   --toolbar-density-factor: 1;

src/web/index.html

@@ -625,6 +625,14 @@
                   <option value="violet">Violet</option>
                   <option value="rose">Rose</option>
                   <option value="red">Red</option>
+                  <option value="emerald">Emerald</option>
+                  <option value="lime">Lime</option>
+                  <option value="sky">Sky</option>
+                  <option value="navy">Navy</option>
+                  <option value="plum">Plum</option>
+                  <option value="magenta">Magenta</option>
+                  <option value="copper">Copper</option>
+                  <option value="sand">Sand</option>
                   <option value="custom">Custom</option>
                 </select></label>
               <label><span data-i18n="accent_color">Accent color</span>

src/web/js/40-messages-reader.js

@@ -562,7 +562,7 @@ function renderMessageBody(detail, forceRemote = false) {
   if (hasRemote && !allowRemote && (policy === "ask" || policy === "contacts")) remoteBar.classList.remove("hidden");
 
   const iframe = document.createElement("iframe");
-  iframe.setAttribute("sandbox", "");
+  iframe.setAttribute("sandbox", "allow-popups allow-popups-to-escape-sandbox");
   iframe.setAttribute("referrerpolicy", "no-referrer");
   const imageSources = allowRemote ? "data: cid: https: http:" : "data: cid:";
   const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${imageSources}; style-src 'unsafe-inline'; font-src data:">`;