1 files changed, 81 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/layout.css b/comm/mail/themes/shared/mail/layout.css
new file mode 100644
index 0000000000..cac83df115
--- /dev/null
+++ b/comm/mail/themes/shared/mail/layout.css
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://messenger/skin/colors.css");
+
+/* This file defines the colors used for the main layout of the application.
+ * Colors that define a containers for content or thier text color should go
+ *  here. Colors that define widgets or content should not */
+
+/* Background 0 should be used for the main content or page background */
+/* Background 1 should be used for center panes and secondary sidebars */
+/* Background 2 should be used for primary sidebars */
+/* Background 3 should be used for blocks of content inside the main content */
+/* Background 4 should be used for elements inside the main content */
+
+/* Color 0 should be used when the text needs more emphasis */
+/* Color 1 should be used for the main text color */
+/* Color 2 should be used when the text needs less emphasis */
+/* Color 2 should be used when the text need even less emphasis */
+
+/* Border 0 should be used for separation from main layout sections */
+/* Border 1 should be used when the separation is part of the element */
+
+:host,
+:root {
+  --layout-background-0: var(--color-white);
+  --layout-background-1: var(--color-gray-05);
+  --layout-background-2: var(--color-gray-10);
+  --layout-background-3: var(--color-gray-20);
+  --layout-background-4: var(--color-gray-30);
+
+  --layout-color-0: var(--color-black);
+  --layout-color-1: var(--color-gray-90);
+  --layout-color-2: var(--color-gray-70);
+  --layout-color-3: var(--color-gray-50);
+
+  --layout-border-0: var(--color-gray-30);
+  --layout-border-1: var(--color-gray-40);
+  --layout-border-2: var(--color-gray-50);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host,
+  :root {
+    --layout-background-0: var(--color-gray-90);
+    --layout-background-1: var(--color-gray-80);
+    --layout-background-2: var(--color-gray-70);
+    --layout-background-3: var(--color-gray-60);
+    --layout-background-4: var(--color-gray-50);
+
+    --layout-color-0: var(--color-white);
+    --layout-color-1: var(--color-gray-10);
+    --layout-color-2: var(--color-gray-30);
+    --layout-color-3: var(--color-gray-50);
+
+    --layout-border-0: var(--color-gray-70);
+    --layout-border-1: var(--color-gray-60);
+    --layout-border-2: var(--color-gray-50);
+  }
+}
+
+@media (prefers-contrast) {
+  :host,
+  :root:not(:-moz-lwtheme) {
+    --layout-background-0: Window;
+    --layout-background-1: -moz-Dialog;
+    --layout-background-2: transparent;
+    --layout-background-3: transparent;
+    --layout-background-4: transparent;
+
+    --layout-color-0: WindowText;
+    --layout-color-1: -moz-DialogText;
+    --layout-color-2: currentColor;
+    --layout-color-3: currentColor;
+
+    --layout-border-0: currentColor;
+    --layout-border-1: currentColor;
+    --layout-border-2: currentColor;
+  }
+}