From 95eb17775402dae61eb26ee4fdc15244807aee22 Mon Sep 17 00:00:00 2001 From: Joel Brock Date: Thu, 23 Apr 2026 08:56:15 -0700 Subject: [PATCH] feat: Material flat theme with light and dark variants --- themes/material.css | 192 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 themes/material.css diff --git a/themes/material.css b/themes/material.css new file mode 100644 index 0000000..6352185 --- /dev/null +++ b/themes/material.css @@ -0,0 +1,192 @@ +/* + * Outlook Relook — Material Flat Theme + * Clean, subtle elevation, comfortable density. + */ + +/* ============================================================ + LIGHT VARIANT + ============================================================ */ +html[data-outlook-relook-scheme="light"] { + --or-bg-primary: #ffffff; + --or-bg-secondary: #f5f5f5; + --or-bg-tertiary: #eeeeee; + --or-bg-hover: #e0e0e0; + --or-bg-selected: #e3f2fd; + --or-text-primary: #212121; + --or-text-secondary: #424242; + --or-text-tertiary: #757575; + --or-text-disabled: #9e9e9e; + --or-border: #e0e0e0; + --or-border-light: #eeeeee; + --or-accent: var(--or-accent-override, #1976d2); + --or-accent-hover: var(--or-accent-override, #1565c0); + --or-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + --or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.12); +} + +/* ============================================================ + DARK VARIANT + ============================================================ */ +html[data-outlook-relook-scheme="dark"] { + --or-bg-primary: #121212; + --or-bg-secondary: #1e1e1e; + --or-bg-tertiary: #252525; + --or-bg-hover: #333333; + --or-bg-selected: #1a3a5c; + --or-text-primary: #e0e0e0; + --or-text-secondary: #b0b0b0; + --or-text-tertiary: #808080; + --or-text-disabled: #5a5a5a; + --or-border: #333333; + --or-border-light: #2a2a2a; + --or-accent: var(--or-accent-override, #64b5f6); + --or-accent-hover: var(--or-accent-override, #90caf9); + --or-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + --or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.4); +} + +/* ============================================================ + 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: 'Roboto', system-ui, -apple-system, 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; +} + +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; +} + +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; +} + +html[data-outlook-relook-scheme] [role="listbox"], +html[data-outlook-relook-scheme] [role="list"] { + background-color: var(--or-bg-primary) !important; +} + +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; +} + +html[data-outlook-relook-scheme] [role="main"] { + background-color: var(--or-bg-primary) !important; +} + +/* ============================================================ + MATERIAL ROUNDING (4px on interactive elements only) + ============================================================ */ +html[data-outlook-relook-scheme] button, +html[data-outlook-relook-scheme] [role="button"], +html[data-outlook-relook-scheme] input, +html[data-outlook-relook-scheme] select, +html[data-outlook-relook-scheme] [role="tab"], +html[data-outlook-relook-scheme] [role="menuitem"] { + border-radius: 4px !important; +} + +/* Cards / elevated surfaces */ +html[data-outlook-relook-scheme] [role="dialog"], +html[data-outlook-relook-scheme] [role="alertdialog"] { + border-radius: 8px !important; + box-shadow: var(--or-shadow-elevated) !important; +} + +/* ============================================================ + BUTTONS & INTERACTIVE + ============================================================ */ +html[data-outlook-relook-scheme] button, +html[data-outlook-relook-scheme] [role="button"] { + box-shadow: none !important; + background-image: none !important; + transition: background-color 0.15s ease !important; +} + +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 + ============================================================ */ +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: var(--or-shadow) !important; +} + +/* ============================================================ + FOLDER PANE + ============================================================ */ +html[data-outlook-relook-scheme] [role="treeitem"] { + color: var(--or-text-secondary) !important; + border-radius: 4px !important; + margin: 1px 4px !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-accent) !important; + font-weight: 500 !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; +}