feat: Swiss/Helvetica theme with light and dark variants

2026-04-23 08:55:47 -07:00
parent 631e68cb63
commit 33b27f6061
1 changed files with 183 additions and 0 deletions
--- a/themes/swiss.css
+++ b/themes/swiss.css
@@ -0,0 +1,183 @@
+/*
+ * Outlook Relook — Swiss / Helvetica Theme
+ * Monochrome, tight grid, no decoration. Content density is king.
+ */
+
+/* ============================================================
+   LIGHT VARIANT
+   ============================================================ */
+html[data-outlook-relook-scheme="light"] {
+  --or-bg-primary: #ffffff;
+  --or-bg-secondary: #fafafa;
+  --or-bg-tertiary: #f0f0f0;
+  --or-bg-hover: #e8e8e8;
+  --or-bg-selected: #e0e0e0;
+  --or-text-primary: #000000;
+  --or-text-secondary: #333333;
+  --or-text-tertiary: #666666;
+  --or-text-disabled: #999999;
+  --or-border: #d0d0d0;
+  --or-border-light: #e5e5e5;
+  --or-accent: var(--or-accent-override, #000000);
+  --or-accent-hover: var(--or-accent-override, #333333);
+  --or-shadow: none;
+}
+
+/* ============================================================
+   DARK VARIANT
+   ============================================================ */
+html[data-outlook-relook-scheme="dark"] {
+  --or-bg-primary: #1a1a1a;
+  --or-bg-secondary: #222222;
+  --or-bg-tertiary: #2a2a2a;
+  --or-bg-hover: #333333;
+  --or-bg-selected: #3a3a3a;
+  --or-text-primary: #e8e8e8;
+  --or-text-secondary: #cccccc;
+  --or-text-tertiary: #999999;
+  --or-text-disabled: #666666;
+  --or-border: #3a3a3a;
+  --or-border-light: #2f2f2f;
+  --or-accent: var(--or-accent-override, #e8e8e8);
+  --or-accent-hover: var(--or-accent-override, #ffffff);
+  --or-shadow: none;
+}
+
+/* ============================================================
+   TYPOGRAPHY
+   ============================================================ */
+html[data-outlook-relook-scheme] body,
+html[data-outlook-relook-scheme] [role="main"],
+html[data-outlook-relook-scheme] [role="navigation"],
+html[data-outlook-relook-scheme] [role="complementary"],
+html[data-outlook-relook-scheme] [role="banner"],
+html[data-outlook-relook-scheme] input,
+html[data-outlook-relook-scheme] button,
+html[data-outlook-relook-scheme] select,
+html[data-outlook-relook-scheme] textarea {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+  letter-spacing: -0.01em !important;
+}
+
+/* ============================================================
+   SURFACES & BACKGROUNDS
+   ============================================================ */
+html[data-outlook-relook-scheme] body {
+  background-color: var(--or-bg-primary) !important;
+  color: var(--or-text-primary) !important;
+}
+
+/* Top bar */
+html[data-outlook-relook-scheme] [role="banner"],
+html[data-outlook-relook-scheme] header {
+  background-color: var(--or-bg-primary) !important;
+  border-bottom: 1px solid var(--or-border) !important;
+  box-shadow: var(--or-shadow) !important;
+}
+
+/* Folder pane */
+html[data-outlook-relook-scheme] [role="navigation"],
+html[data-outlook-relook-scheme] [role="complementary"] {
+  background-color: var(--or-bg-secondary) !important;
+  border-right: 1px solid var(--or-border-light) !important;
+}
+
+/* Message list */
+html[data-outlook-relook-scheme] [role="listbox"],
+html[data-outlook-relook-scheme] [role="list"] {
+  background-color: var(--or-bg-primary) !important;
+}
+
+/* Message list items */
+html[data-outlook-relook-scheme] [role="option"],
+html[data-outlook-relook-scheme] [role="listitem"] {
+  background-color: var(--or-bg-primary) !important;
+  border-bottom: 1px solid var(--or-border-light) !important;
+  color: var(--or-text-primary) !important;
+}
+
+html[data-outlook-relook-scheme] [role="option"]:hover,
+html[data-outlook-relook-scheme] [role="listitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
+}
+
+html[data-outlook-relook-scheme] [role="option"][aria-selected="true"],
+html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] {
+  background-color: var(--or-bg-selected) !important;
+}
+
+/* Reading pane */
+html[data-outlook-relook-scheme] [role="main"] {
+  background-color: var(--or-bg-primary) !important;
+}
+
+/* ============================================================
+   DECORATIVE REMOVAL
+   ============================================================ */
+html[data-outlook-relook-scheme] * {
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
+html[data-outlook-relook-scheme] button,
+html[data-outlook-relook-scheme] [role="button"],
+html[data-outlook-relook-scheme] [role="tab"],
+html[data-outlook-relook-scheme] [role="menuitem"] {
+  box-shadow: none !important;
+  background-image: none !important;
+}
+
+/* ============================================================
+   BUTTONS & INTERACTIVE
+   ============================================================ */
+html[data-outlook-relook-scheme] button:hover,
+html[data-outlook-relook-scheme] [role="button"]:hover {
+  background-color: var(--or-bg-hover) !important;
+}
+
+html[data-outlook-relook-scheme] a {
+  color: var(--or-accent) !important;
+}
+
+html[data-outlook-relook-scheme] a:hover {
+  color: var(--or-accent-hover) !important;
+}
+
+/* ============================================================
+   TOOLBAR / COMMAND BAR
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="toolbar"] {
+  background-color: var(--or-bg-primary) !important;
+  border-bottom: 1px solid var(--or-border-light) !important;
+  box-shadow: none !important;
+}
+
+/* ============================================================
+   FOLDER PANE TREE ITEMS
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="treeitem"] {
+  color: var(--or-text-secondary) !important;
+}
+
+html[data-outlook-relook-scheme] [role="treeitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-primary) !important;
+}
+
+html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
+  background-color: var(--or-bg-selected) !important;
+  color: var(--or-text-primary) !important;
+  font-weight: 600 !important;
+}
+
+/* ============================================================
+   SECONDARY TEXT
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="option"] span,
+html[data-outlook-relook-scheme] [role="listitem"] span {
+  color: var(--or-text-secondary) !important;
+}
+
+html[data-outlook-relook-scheme] time {
+  color: var(--or-text-tertiary) !important;
+}