From c46868d6a708511f6ab7d232f887b2179a0644f3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Jun 2026 19:40:11 +0000 Subject: [PATCH 1/3] Initial plan From a25ab8e3feee453df0f497c09709192a0f1d7d3d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Jun 2026 19:49:54 +0000 Subject: [PATCH 2/3] Add dark mode styling to clipper popup --- src/styles/renderer.less | 136 ++++++++++++++++++++++++++++----------- 1 file changed, 100 insertions(+), 36 deletions(-) diff --git a/src/styles/renderer.less b/src/styles/renderer.less index 6126ee4c..33eec387 100644 --- a/src/styles/renderer.less +++ b/src/styles/renderer.less @@ -1,5 +1,69 @@ // Renderer window styles — sidebar panel for capture progress and preview -// Color values follow Fluent 2 design tokens (white theme). +// Color values follow Fluent 2 design tokens and adapt to system light/dark theme. + +:root { + color-scheme: light; + --colorNeutralBackground1: #ffffff; + --colorNeutralBackground2: #fafafa; + --colorNeutralBackground3: #f5f5f5; + --colorNeutralForeground1: #242424; + --colorNeutralForeground2: #424242; + --colorNeutralForeground3: #707070; + --colorNeutralForeground4: #b4b4b4; + --colorNeutralStroke1: #d1d1d1; + --colorNeutralStroke2: #e0e0e0; + --colorNeutralStroke3: #f0f0f0; + --colorSubtleBackgroundHover: #f5f5f5; + --colorSubtleBackgroundPressed: #e0e0e0; + --previewAreaBackground: #e8e6e4; + --previewSurfaceBackground: #ffffff; + --previewFrameBorderColor: rgba(0,0,0,0.08); + --scrollbarThumbColor: rgba(0,0,0,0.2); + --layerShadow: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.1); + --buttonForegroundOnBrand: #fff; + --dangerForeground: #a80000; + --dangerBackground: #fdeaea; + --regionRemoveBorder: rgba(0,0,0,0.08); + --regionRemoveBackground: rgba(0,0,0,0.05); + --regionRemoveHoverBackground: rgba(0,0,0,0.1); + --regionRemoveIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23242424' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"); + --sectionPickerChevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23424242' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + --modeIconImageFilter: brightness(0); + --modeIconSelectedImageFilter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(4421%) hue-rotate(277deg) brightness(88%) contrast(92%); + --previewLoadingForeground: #666; +} + +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --colorNeutralBackground1: #1f1f1f; + --colorNeutralBackground2: #262626; + --colorNeutralBackground3: #2b2b2b; + --colorNeutralForeground1: #ffffff; + --colorNeutralForeground2: #d6d6d6; + --colorNeutralForeground3: #b3b3b3; + --colorNeutralForeground4: #8a8a8a; + --colorNeutralStroke1: #5c5c5c; + --colorNeutralStroke2: #3d3d3d; + --colorNeutralStroke3: #2f2f2f; + --colorSubtleBackgroundHover: #2b2b2b; + --colorSubtleBackgroundPressed: #333333; + --previewAreaBackground: #111111; + --previewSurfaceBackground: #1a1a1a; + --previewFrameBorderColor: rgba(255,255,255,0.12); + --scrollbarThumbColor: rgba(255,255,255,0.24); + --layerShadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.35); + --dangerForeground: #ff99a4; + --dangerBackground: #4a1b20; + --regionRemoveBorder: rgba(255,255,255,0.16); + --regionRemoveBackground: rgba(255,255,255,0.08); + --regionRemoveHoverBackground: rgba(255,255,255,0.14); + --regionRemoveIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"); + --sectionPickerChevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23d6d6d6' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + --modeIconImageFilter: brightness(0) invert(1); + --previewLoadingForeground: #c8c8c8; + } +} // Segoe UI for non-Windows users (matches V1; loaded from OneNote CDN). @font-face { @@ -12,18 +76,18 @@ } // --- Fluent 2 neutral tokens (light theme) --- -@colorNeutralBackground1: #ffffff; // Sidebar / surface -@colorNeutralBackground2: #fafafa; // Subtle hover -@colorNeutralBackground3: #f5f5f5; // Input / field rest -@colorNeutralForeground1: #242424; // Primary text -@colorNeutralForeground2: #424242; // Labels / secondary text -@colorNeutralForeground3: #707070; // Tertiary text (source URL) -@colorNeutralForeground4: #b4b4b4; // Placeholder -@colorNeutralStroke1: #d1d1d1; // Input/button border -@colorNeutralStroke2: #e0e0e0; // Divider -@colorNeutralStroke3: #f0f0f0; // Subtle separator -@colorSubtleBackgroundHover: #f5f5f5; -@colorSubtleBackgroundPressed: #e0e0e0; +@colorNeutralBackground1: var(--colorNeutralBackground1); // Sidebar / surface +@colorNeutralBackground2: var(--colorNeutralBackground2); // Subtle hover +@colorNeutralBackground3: var(--colorNeutralBackground3); // Input / field rest +@colorNeutralForeground1: var(--colorNeutralForeground1); // Primary text +@colorNeutralForeground2: var(--colorNeutralForeground2); // Labels / secondary text +@colorNeutralForeground3: var(--colorNeutralForeground3); // Tertiary text (source URL) +@colorNeutralForeground4: var(--colorNeutralForeground4); // Placeholder +@colorNeutralStroke1: var(--colorNeutralStroke1); // Input/button border +@colorNeutralStroke2: var(--colorNeutralStroke2); // Divider +@colorNeutralStroke3: var(--colorNeutralStroke3); // Subtle separator +@colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover); +@colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed); // --- OneNote brand ramp (from Fluent 2 "Colors/Brand/OneNote/*" in Figma) --- // Used for primary button, focus ring, selected states @@ -41,7 +105,7 @@ html, body { width: 100%; height: 100%; font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, sans-serif; } -body { display: flex; } +body { display: flex; background: @colorNeutralBackground1; color: @colorNeutralForeground1; } // Preview area wrapper — flex column for article header + content // When .preview-ready is added (after capture), child panels gain a thin rounded frame. @@ -52,7 +116,7 @@ body { display: flex; } #preview-area { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; position: relative; - background: #e8e6e4; // visible contrast against white page content inside the rounded frame + background: var(--previewAreaBackground); // visible contrast around page content inside the rounded frame // Rounded frame — thin inner ring only, no drop shadow &.preview-ready::after { @@ -60,7 +124,7 @@ body { display: flex; } position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; border-radius: @preview-radius; - box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); + box-shadow: inset 0 0 0 1px var(--previewFrameBorderColor); } // When ready, add real margin on child panels so content isn't hidden behind the rounded corners @@ -125,7 +189,7 @@ iframe#content-frame { iframe#preview-frame { flex: 1; min-width: 0; min-height: 0; border: none; display: block; - background: #fff; + background: var(--previewSurfaceBackground); } // Preview area — shown after capture with scrollable image @@ -134,12 +198,12 @@ iframe#preview-frame { #preview-container { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; display: none; - background: #e8e6e4; + background: var(--previewAreaBackground); // Full-width for full-page screenshot preview, but not for region thumbnails > img { width: 100%; display: block; } // Show scrollbar to indicate scrollable content &::-webkit-scrollbar { display: block; width: 6px; } - &::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; } + &::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor); border-radius: 3px; } &::-webkit-scrollbar-track { background: transparent; } &:focus-visible { outline: none; @@ -245,7 +309,7 @@ iframe#preview-frame { // Visible scrollbar so user can see there's more content below // !important overrides the global ::-webkit-scrollbar { display: none } at bottom of file &::-webkit-scrollbar { display: block !important; width: 5px !important; } - &::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 3px; } + &::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor) !important; border-radius: 3px; } &::-webkit-scrollbar-track { background: transparent; } } @@ -298,10 +362,10 @@ iframe#preview-frame { // brand color of the selected text/border. .mode-icon-img { width: 20px; height: 20px; flex-shrink: 0; - filter: brightness(0); + filter: var(--modeIconImageFilter); } &.selected .mode-icon-img { - filter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(4421%) hue-rotate(277deg) brightness(88%) contrast(92%); + filter: var(--modeIconSelectedImageFilter); } } @@ -373,7 +437,7 @@ iframe#preview-frame { user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // Chevron down arrow - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23424242' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-image: var(--sectionPickerChevron); background-repeat: no-repeat; background-position: right 8px center; &:focus { @@ -397,10 +461,10 @@ iframe#preview-frame { background: @colorNeutralBackground1; border: 1px solid @colorNeutralStroke1; border-radius: 4px; - box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.1); + box-shadow: var(--layerShadow); z-index: 50; &::-webkit-scrollbar { display: block !important; width: 5px !important; } - &::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 3px; } + &::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor) !important; border-radius: 3px; } &::-webkit-scrollbar-track { background: transparent; } } @@ -475,7 +539,7 @@ iframe#preview-frame { // Clip — Fluent primary (OneNote brand /80 rest → /60 hover → /50 pressed) #save-btn { background: @colorCompoundBrandBackground; - color: #fff; + color: var(--buttonForegroundOnBrand); border: 1px solid @colorCompoundBrandBackground; &:hover { background: @colorCompoundBrandBackgroundHover; border-color: @colorCompoundBrandBackgroundHover; } &:active { background: @colorCompoundBrandBackgroundPressed; border-color: @colorCompoundBrandBackgroundPressed; } @@ -664,19 +728,19 @@ iframe#preview-frame { height: 28px; padding: 0; padding-inline: 8px 12px; margin-bottom: 8px; // gap between button and image border-radius: 4px; - border: 1px solid rgba(0,0,0,0.08); - background: rgba(0,0,0,0.05); // translucent black alpha 5% per sticky note + border: 1px solid var(--regionRemoveBorder); + background: var(--regionRemoveBackground); color: @colorNeutralForeground1; font-size: 13px; font-weight: 400; line-height: 20px; font-family: inherit; cursor: pointer; transition: background 0.1s; - &:hover { background: rgba(0,0,0,0.1); } + &:hover { background: var(--regionRemoveHoverBackground); } // Trash icon — clean filled path &::before { content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23242424' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E") no-repeat center/contain; + background: var(--regionRemoveIcon) no-repeat center/contain; } } @@ -757,7 +821,7 @@ iframe#preview-frame { cursor: pointer; margin-bottom: 10px; transition: background 0.1s; - background: @colorCompoundBrandBackground; color: #fff; + background: @colorCompoundBrandBackground; color: var(--buttonForegroundOnBrand); &:hover { background: @colorCompoundBrandBackgroundHover; border-color: @colorCompoundBrandBackgroundHover; } &:disabled { opacity: 0.4; cursor: default; } } @@ -772,7 +836,7 @@ iframe#preview-frame { .signin-error { font-size: 12px; - color: #a80000; // Fluent danger color + color: var(--dangerForeground); margin-top: 8px; line-height: 16px; } @@ -1116,8 +1180,8 @@ iframe#preview-frame { } .pdf-range-error { - color: #a80000; font-size: 12px; margin-top: 2px; - padding: 4px 8px; background: #fdeaea; border-radius: 4px; + color: var(--dangerForeground); font-size: 12px; margin-top: 2px; + padding: 4px 8px; background: var(--dangerBackground); border-radius: 4px; } #pdf-checkboxes { @@ -1139,7 +1203,7 @@ iframe#preview-frame { } .pdf-attach-warning { - color: #a80000; font-size: 12px; + color: var(--dangerForeground); font-size: 12px; padding: 4px 0 0 0; padding-inline-start: 20px; } @@ -1173,7 +1237,7 @@ iframe#preview-frame { opacity: 0.3; } .pdf-loading-indicator { - text-align: center; padding: 20px; color: #666; + text-align: center; padding: 20px; color: var(--previewLoadingForeground); font-size: 13px; } // V1 .attachment-overlay parity: 84x96 box, 48px icon, filename below. From aa88ff4526323b7345f91eaf3d9ba56d11630c43 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 3 Jul 2026 09:19:27 +0000 Subject: [PATCH 3/3] fix: restore article preview toolbar icon contrast --- src/images/editorOptions/font_down.svg | 6 ++++++ src/images/editorOptions/font_up.svg | 6 ++++++ src/images/editorOptions/highlight_tool_off.svg | 6 ++++++ 3 files changed, 18 insertions(+) diff --git a/src/images/editorOptions/font_down.svg b/src/images/editorOptions/font_down.svg index 2429d307..ab2ef327 100644 --- a/src/images/editorOptions/font_down.svg +++ b/src/images/editorOptions/font_down.svg @@ -1,3 +1,9 @@ + diff --git a/src/images/editorOptions/font_up.svg b/src/images/editorOptions/font_up.svg index e4a8786a..21db3ebf 100644 --- a/src/images/editorOptions/font_up.svg +++ b/src/images/editorOptions/font_up.svg @@ -1,3 +1,9 @@ + diff --git a/src/images/editorOptions/highlight_tool_off.svg b/src/images/editorOptions/highlight_tool_off.svg index 55a43bdd..a30b661f 100644 --- a/src/images/editorOptions/highlight_tool_off.svg +++ b/src/images/editorOptions/highlight_tool_off.svg @@ -1,4 +1,10 @@ +