diff --git a/packages/html-reporter/src/colors.css b/packages/html-reporter/src/colors.css index 42b254ffa3..7c3bef0b9f 100644 --- a/packages/html-reporter/src/colors.css +++ b/packages/html-reporter/src/colors.css @@ -454,438 +454,441 @@ SOFTWARE. */ --color-scale-coral-9: #510901 } -@media(prefers-color-scheme: dark) { - :root { - --color-canvas-default-transparent: rgba(13,17,23,0); - --color-marketing-icon-primary: #79c0ff; - --color-marketing-icon-secondary: #1f6feb; - --color-diff-blob-addition-num-text: #c9d1d9; - --color-diff-blob-addition-fg: #c9d1d9; - --color-diff-blob-addition-num-bg: rgba(63,185,80,0.3); - --color-diff-blob-addition-line-bg: rgba(46,160,67,0.15); - --color-diff-blob-addition-word-bg: rgba(46,160,67,0.4); - --color-diff-blob-deletion-num-text: #c9d1d9; - --color-diff-blob-deletion-fg: #c9d1d9; - --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3); - --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15); - --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4); - --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4); - --color-diff-blob-expander-icon: #8b949e; - --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; - --color-diffstat-deletion-border: rgba(240,246,252,0.1); - --color-diffstat-addition-border: rgba(240,246,252,0.1); - --color-diffstat-addition-bg: #3fb950; - --color-search-keyword-hl: rgba(210,153,34,0.4); - --color-prettylights-syntax-comment: #8b949e; - --color-prettylights-syntax-constant: #79c0ff; - --color-prettylights-syntax-entity: #d2a8ff; - --color-prettylights-syntax-storage-modifier-import: #c9d1d9; - --color-prettylights-syntax-entity-tag: #7ee787; - --color-prettylights-syntax-keyword: #ff7b72; - --color-prettylights-syntax-string: #a5d6ff; - --color-prettylights-syntax-variable: #ffa657; - --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; - --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; - --color-prettylights-syntax-invalid-illegal-bg: #8e1519; - --color-prettylights-syntax-carriage-return-text: #f0f6fc; - --color-prettylights-syntax-carriage-return-bg: #b62324; - --color-prettylights-syntax-string-regexp: #7ee787; - --color-prettylights-syntax-markup-list: #f2cc60; - --color-prettylights-syntax-markup-heading: #1f6feb; - --color-prettylights-syntax-markup-italic: #c9d1d9; - --color-prettylights-syntax-markup-bold: #c9d1d9; - --color-prettylights-syntax-markup-deleted-text: #ffdcd7; - --color-prettylights-syntax-markup-deleted-bg: #67060c; - --color-prettylights-syntax-markup-inserted-text: #aff5b4; - --color-prettylights-syntax-markup-inserted-bg: #033a16; - --color-prettylights-syntax-markup-changed-text: #ffdfb6; - --color-prettylights-syntax-markup-changed-bg: #5a1e02; - --color-prettylights-syntax-markup-ignored-text: #c9d1d9; - --color-prettylights-syntax-markup-ignored-bg: #1158c7; - --color-prettylights-syntax-meta-diff-range: #d2a8ff; - --color-prettylights-syntax-brackethighlighter-angle: #8b949e; - --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; - --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; - --color-codemirror-text: #c9d1d9; - --color-codemirror-bg: #0d1117; - --color-codemirror-gutters-bg: #0d1117; - --color-codemirror-guttermarker-text: #0d1117; - --color-codemirror-guttermarker-subtle-text: #484f58; - --color-codemirror-linenumber-text: #8b949e; - --color-codemirror-cursor: #c9d1d9; - --color-codemirror-selection-bg: rgba(56,139,253,0.4); - --color-codemirror-activeline-bg: rgba(110,118,129,0.1); - --color-codemirror-matchingbracket-text: #c9d1d9; - --color-codemirror-lines-bg: #0d1117; - --color-codemirror-syntax-comment: #8b949e; - --color-codemirror-syntax-constant: #79c0ff; - --color-codemirror-syntax-entity: #d2a8ff; - --color-codemirror-syntax-keyword: #ff7b72; - --color-codemirror-syntax-storage: #ff7b72; - --color-codemirror-syntax-string: #a5d6ff; - --color-codemirror-syntax-support: #79c0ff; - --color-codemirror-syntax-variable: #ffa657; - --color-checks-bg: #010409; - --color-checks-run-border-width: 1px; - --color-checks-container-border-width: 1px; - --color-checks-text-primary: #c9d1d9; - --color-checks-text-secondary: #8b949e; - --color-checks-text-link: #58a6ff; - --color-checks-btn-icon: #8b949e; - --color-checks-btn-hover-icon: #c9d1d9; - --color-checks-btn-hover-bg: rgba(110,118,129,0.1); - --color-checks-input-text: #8b949e; - --color-checks-input-placeholder-text: #484f58; - --color-checks-input-focus-text: #c9d1d9; - --color-checks-input-bg: #161b22; - --color-checks-input-shadow: none; - --color-checks-donut-error: #f85149; - --color-checks-donut-pending: #d29922; - --color-checks-donut-success: #2ea043; - --color-checks-donut-neutral: #8b949e; - --color-checks-dropdown-text: #c9d1d9; - --color-checks-dropdown-bg: #161b22; - --color-checks-dropdown-border: #30363d; - --color-checks-dropdown-shadow: rgba(1,4,9,0.3); - --color-checks-dropdown-hover-text: #c9d1d9; - --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1); - --color-checks-dropdown-btn-hover-text: #c9d1d9; - --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1); - --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4); - --color-checks-header-label-text: #8b949e; - --color-checks-header-label-open-text: #c9d1d9; - --color-checks-header-border: #21262d; - --color-checks-header-icon: #8b949e; - --color-checks-line-text: #8b949e; - --color-checks-line-num-text: #484f58; - --color-checks-line-timestamp-text: #484f58; - --color-checks-line-hover-bg: rgba(110,118,129,0.1); - --color-checks-line-selected-bg: rgba(56,139,253,0.15); - --color-checks-line-selected-num-text: #58a6ff; - --color-checks-line-dt-fm-text: #f0f6fc; - --color-checks-line-dt-fm-bg: #9e6a03; - --color-checks-gate-bg: rgba(187,128,9,0.15); - --color-checks-gate-text: #8b949e; - --color-checks-gate-waiting-text: #d29922; - --color-checks-step-header-open-bg: #161b22; - --color-checks-step-error-text: #f85149; - --color-checks-step-warning-text: #d29922; - --color-checks-logline-text: #8b949e; - --color-checks-logline-num-text: #484f58; - --color-checks-logline-debug-text: #a371f7; - --color-checks-logline-error-text: #8b949e; - --color-checks-logline-error-num-text: #484f58; - --color-checks-logline-error-bg: rgba(248,81,73,0.15); - --color-checks-logline-warning-text: #8b949e; - --color-checks-logline-warning-num-text: #d29922; - --color-checks-logline-warning-bg: rgba(187,128,9,0.15); - --color-checks-logline-command-text: #58a6ff; - --color-checks-logline-section-text: #3fb950; - --color-checks-ansi-black: #0d1117; - --color-checks-ansi-black-bright: #161b22; - --color-checks-ansi-white: #b1bac4; - --color-checks-ansi-white-bright: #b1bac4; - --color-checks-ansi-gray: #6e7681; - --color-checks-ansi-red: #ff7b72; - --color-checks-ansi-red-bright: #ffa198; - --color-checks-ansi-green: #3fb950; - --color-checks-ansi-green-bright: #56d364; - --color-checks-ansi-yellow: #d29922; - --color-checks-ansi-yellow-bright: #e3b341; - --color-checks-ansi-blue: #58a6ff; - --color-checks-ansi-blue-bright: #79c0ff; - --color-checks-ansi-magenta: #bc8cff; - --color-checks-ansi-magenta-bright: #d2a8ff; - --color-checks-ansi-cyan: #76e3ea; - --color-checks-ansi-cyan-bright: #b3f0ff; - --color-project-header-bg: #0d1117; - --color-project-sidebar-bg: #161b22; - --color-project-gradient-in: #161b22; - --color-project-gradient-out: rgba(22,27,34,0); - --color-mktg-success: rgba(41,147,61,1); - --color-mktg-info: rgba(42,123,243,1); - --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065); - --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0); - --color-mktg-btn-bg-top: hsla(228,82%,66%,1); - --color-mktg-btn-bg-bottom: #4969ed; - --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1); - --color-mktg-btn-bg-overlay-bottom: #3355e0; - --color-mktg-btn-text: #f0f6fc; - --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1); - --color-mktg-btn-primary-bg-bottom: #2ea44f; - --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1); - --color-mktg-btn-primary-bg-overlay-bottom: #22863a; - --color-mktg-btn-primary-text: #f0f6fc; - --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1); - --color-mktg-btn-enterprise-bg-bottom: #6f57ff; - --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1); - --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda; - --color-mktg-btn-enterprise-text: #f0f6fc; - --color-mktg-btn-outline-text: #f0f6fc; - --color-mktg-btn-outline-border: rgba(240,246,252,0.3); - --color-mktg-btn-outline-hover-text: #f0f6fc; - --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5); - --color-mktg-btn-outline-focus-border: #f0f6fc; - --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5); - --color-mktg-btn-dark-text: #f0f6fc; - --color-mktg-btn-dark-border: rgba(240,246,252,0.3); - --color-mktg-btn-dark-hover-text: #f0f6fc; - --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5); - --color-mktg-btn-dark-focus-border: #f0f6fc; - --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5); - --color-avatar-bg: rgba(240,246,252,0.1); - --color-avatar-border: rgba(240,246,252,0.1); - --color-avatar-stack-fade: #30363d; - --color-avatar-stack-fade-more: #21262d; - --color-avatar-child-shadow: -2px -2px 0 #0d1117; - --color-topic-tag-border: rgba(0,0,0,0); - --color-select-menu-backdrop-border: #484f58; - --color-select-menu-tap-highlight: rgba(48,54,61,0.5); - --color-select-menu-tap-focus-bg: #0c2d6b; - --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85); - --color-header-text: rgba(240,246,252,0.7); - --color-header-bg: #161b22; - --color-header-logo: #f0f6fc; - --color-header-search-bg: #0d1117; - --color-header-search-border: #30363d; - --color-sidenav-selected-bg: #21262d; - --color-menu-bg-active: #161b22; - --color-control-transparent-bg-hover: #656c7633; - --color-input-disabled-bg: rgba(110,118,129,0); - --color-timeline-badge-bg: #21262d; - --color-ansi-black: #484f58; - --color-ansi-black-bright: #6e7681; - --color-ansi-white: #b1bac4; - --color-ansi-white-bright: #f0f6fc; - --color-ansi-gray: #6e7681; - --color-ansi-red: #ff7b72; - --color-ansi-red-bright: #ffa198; - --color-ansi-green: #3fb950; - --color-ansi-green-bright: #56d364; - --color-ansi-yellow: #d29922; - --color-ansi-yellow-bright: #e3b341; - --color-ansi-blue: #58a6ff; - --color-ansi-blue-bright: #79c0ff; - --color-ansi-magenta: #bc8cff; - --color-ansi-magenta-bright: #d2a8ff; - --color-ansi-cyan: #39c5cf; - --color-ansi-cyan-bright: #56d4dd; - --color-btn-text: #c9d1d9; - --color-btn-bg: #21262d; - --color-btn-border: rgba(240,246,252,0.1); - --color-btn-shadow: 0 0 transparent; - --color-btn-inset-shadow: 0 0 transparent; - --color-btn-hover-bg: #30363d; - --color-btn-hover-border: #8b949e; - --color-btn-active-bg: hsla(212,12%,18%,1); - --color-btn-active-border: #6e7681; - --color-btn-selected-bg: #161b22; - --color-btn-focus-bg: #21262d; - --color-btn-focus-border: #8b949e; - --color-btn-focus-shadow: 0 0 0 3px rgba(139,148,158,0.3); - --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15); - --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31,111,235,0.3); - --color-btn-counter-bg: #30363d; - --color-btn-primary-text: #ffffff; - --color-btn-primary-bg: #238636; - --color-btn-primary-border: rgba(240,246,252,0.1); - --color-btn-primary-shadow: 0 0 transparent; - --color-btn-primary-inset-shadow: 0 0 transparent; - --color-btn-primary-hover-bg: #2ea043; - --color-btn-primary-hover-border: rgba(240,246,252,0.1); - --color-btn-primary-selected-bg: #238636; - --color-btn-primary-selected-shadow: 0 0 transparent; - --color-btn-primary-disabled-text: rgba(240,246,252,0.5); - --color-btn-primary-disabled-bg: rgba(35,134,54,0.6); - --color-btn-primary-disabled-border: rgba(240,246,252,0.1); - --color-btn-primary-focus-bg: #238636; - --color-btn-primary-focus-border: rgba(240,246,252,0.1); - --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4); - --color-btn-primary-icon: #f0f6fc; - --color-btn-primary-counter-bg: rgba(240,246,252,0.2); - --color-btn-outline-text: #58a6ff; - --color-btn-outline-hover-text: #58a6ff; - --color-btn-outline-hover-bg: #30363d; - --color-btn-outline-hover-border: rgba(240,246,252,0.1); - --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1); - --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03); - --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2); - --color-btn-outline-selected-text: #f0f6fc; - --color-btn-outline-selected-bg: #0d419d; - --color-btn-outline-selected-border: rgba(240,246,252,0.1); - --color-btn-outline-selected-shadow: 0 0 transparent; - --color-btn-outline-disabled-text: rgba(88,166,255,0.5); - --color-btn-outline-disabled-bg: #0d1117; - --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05); - --color-btn-outline-focus-border: rgba(240,246,252,0.1); - --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17,88,199,0.4); - --color-btn-outline-counter-bg: rgba(31,111,235,0.1); - --color-btn-danger-text: #f85149; - --color-btn-danger-hover-text: #f0f6fc; - --color-btn-danger-hover-bg: #da3633; - --color-btn-danger-hover-border: #f85149; - --color-btn-danger-hover-shadow: 0 0 transparent; - --color-btn-danger-hover-inset-shadow: 0 0 transparent; - --color-btn-danger-hover-icon: #f0f6fc; - --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2); - --color-btn-danger-selected-text: #ffffff; - --color-btn-danger-selected-bg: #b62324; - --color-btn-danger-selected-border: #ff7b72; - --color-btn-danger-selected-shadow: 0 0 transparent; - --color-btn-danger-disabled-text: rgba(248,81,73,0.5); - --color-btn-danger-disabled-bg: #0d1117; - --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05); - --color-btn-danger-focus-border: #f85149; - --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248,81,73,0.4); - --color-btn-danger-counter-bg: rgba(218,54,51,0.1); - --color-btn-danger-icon: #f85149; - --color-underlinenav-icon: #484f58; - --color-underlinenav-border-hover: rgba(110,118,129,0.4); - --color-fg-default: #c9d1d9; - --color-fg-muted: #8b949e; - --color-fg-subtle: #484f58; - --color-fg-on-emphasis: #f0f6fc; - --color-canvas-default: #0d1117; - --color-canvas-overlay: #161b22; - --color-canvas-inset: #010409; - --color-canvas-subtle: #161b22; - --color-border-default: #30363d; - --color-border-muted: #21262d; - --color-border-subtle: rgba(240,246,252,0.1); - --color-shadow-small: 0 0 transparent; - --color-shadow-medium: 0 3px 6px #010409; - --color-shadow-large: 0 8px 24px #010409; - --color-shadow-extra-large: 0 12px 48px #010409; - --color-neutral-emphasis-plus: #6e7681; - --color-neutral-emphasis: #6e7681; - --color-neutral-muted: rgba(110,118,129,0.4); - --color-neutral-subtle: rgba(110,118,129,0.1); - --color-accent-fg: #58a6ff; - --color-accent-emphasis: #1f6feb; - --color-accent-muted: rgba(56,139,253,0.4); - --color-accent-subtle: rgba(56,139,253,0.15); - --color-success-fg: #3fb950; - --color-success-emphasis: #238636; - --color-success-muted: rgba(46,160,67,0.4); - --color-success-subtle: rgba(46,160,67,0.15); - --color-attention-fg: #d29922; - --color-attention-emphasis: #9e6a03; - --color-attention-muted: rgba(187,128,9,0.4); - --color-attention-subtle: rgba(187,128,9,0.15); - --color-severe-fg: #db6d28; - --color-severe-emphasis: #bd561d; - --color-severe-muted: rgba(219,109,40,0.4); - --color-severe-subtle: rgba(219,109,40,0.15); - --color-danger-fg: #f85149; - --color-danger-emphasis: #da3633; - --color-danger-muted: rgba(248,81,73,0.4); - --color-danger-subtle: rgba(248,81,73,0.15); - --color-done-fg: #a371f7; - --color-done-emphasis: #8957e5; - --color-done-muted: rgba(163,113,247,0.4); - --color-done-subtle: rgba(163,113,247,0.15); - --color-sponsors-fg: #db61a2; - --color-sponsors-emphasis: #bf4b8a; - --color-sponsors-muted: rgba(219,97,162,0.4); - --color-sponsors-subtle: rgba(219,97,162,0.15); - --color-primer-canvas-backdrop: rgba(1,4,9,0.8); - --color-primer-canvas-sticky: rgba(13,17,23,0.95); - --color-primer-border-active: #F78166; - --color-primer-border-contrast: rgba(240,246,252,0.2); - --color-primer-shadow-highlight: 0 0 transparent; - --color-primer-shadow-inset: 0 0 transparent; - --color-primer-shadow-focus: 0 0 0 3px #0c2d6b; - --color-scale-black: #010409; - --color-scale-white: #f0f6fc; - --color-scale-gray-0: #f0f6fc; - --color-scale-gray-1: #c9d1d9; - --color-scale-gray-2: #b1bac4; - --color-scale-gray-3: #8b949e; - --color-scale-gray-4: #6e7681; - --color-scale-gray-5: #484f58; - --color-scale-gray-6: #30363d; - --color-scale-gray-7: #21262d; - --color-scale-gray-8: #161b22; - --color-scale-gray-9: #0d1117; - --color-scale-blue-0: #cae8ff; - --color-scale-blue-1: #a5d6ff; - --color-scale-blue-2: #79c0ff; - --color-scale-blue-3: #58a6ff; - --color-scale-blue-4: #388bfd; - --color-scale-blue-5: #1f6feb; - --color-scale-blue-6: #1158c7; - --color-scale-blue-7: #0d419d; - --color-scale-blue-8: #0c2d6b; - --color-scale-blue-9: #051d4d; - --color-scale-green-0: #aff5b4; - --color-scale-green-1: #7ee787; - --color-scale-green-2: #56d364; - --color-scale-green-3: #3fb950; - --color-scale-green-4: #2ea043; - --color-scale-green-5: #238636; - --color-scale-green-6: #196c2e; - --color-scale-green-7: #0f5323; - --color-scale-green-8: #033a16; - --color-scale-green-9: #04260f; - --color-scale-yellow-0: #f8e3a1; - --color-scale-yellow-1: #f2cc60; - --color-scale-yellow-2: #e3b341; - --color-scale-yellow-3: #d29922; - --color-scale-yellow-4: #bb8009; - --color-scale-yellow-5: #9e6a03; - --color-scale-yellow-6: #845306; - --color-scale-yellow-7: #693e00; - --color-scale-yellow-8: #4b2900; - --color-scale-yellow-9: #341a00; - --color-scale-orange-0: #ffdfb6; - --color-scale-orange-1: #ffc680; - --color-scale-orange-2: #ffa657; - --color-scale-orange-3: #f0883e; - --color-scale-orange-4: #db6d28; - --color-scale-orange-5: #bd561d; - --color-scale-orange-6: #9b4215; - --color-scale-orange-7: #762d0a; - --color-scale-orange-8: #5a1e02; - --color-scale-orange-9: #3d1300; - --color-scale-red-0: #ffdcd7; - --color-scale-red-1: #ffc1ba; - --color-scale-red-2: #ffa198; - --color-scale-red-3: #ff7b72; - --color-scale-red-4: #f85149; - --color-scale-red-5: #da3633; - --color-scale-red-6: #b62324; - --color-scale-red-7: #8e1519; - --color-scale-red-8: #67060c; - --color-scale-red-9: #490202; - --color-scale-purple-0: #eddeff; - --color-scale-purple-1: #e2c5ff; - --color-scale-purple-2: #d2a8ff; - --color-scale-purple-3: #bc8cff; - --color-scale-purple-4: #a371f7; - --color-scale-purple-5: #8957e5; - --color-scale-purple-6: #6e40c9; - --color-scale-purple-7: #553098; - --color-scale-purple-8: #3c1e70; - --color-scale-purple-9: #271052; - --color-scale-pink-0: #ffdaec; - --color-scale-pink-1: #ffbedd; - --color-scale-pink-2: #ff9bce; - --color-scale-pink-3: #f778ba; - --color-scale-pink-4: #db61a2; - --color-scale-pink-5: #bf4b8a; - --color-scale-pink-6: #9e3670; - --color-scale-pink-7: #7d2457; - --color-scale-pink-8: #5e103e; - --color-scale-pink-9: #42062a; - --color-scale-coral-0: #FFDDD2; - --color-scale-coral-1: #FFC2B2; - --color-scale-coral-2: #FFA28B; - --color-scale-coral-3: #F78166; - --color-scale-coral-4: #EA6045; - --color-scale-coral-5: #CF462D; - --color-scale-coral-6: #AC3220; - --color-scale-coral-7: #872012; - --color-scale-coral-8: #640D04; - --color-scale-coral-9: #460701 - } +:root.light-mode { + color-scheme: light; +} + +:root.dark-mode { + color-scheme: dark; + --color-canvas-default-transparent: rgba(13,17,23,0); + --color-marketing-icon-primary: #79c0ff; + --color-marketing-icon-secondary: #1f6feb; + --color-diff-blob-addition-num-text: #c9d1d9; + --color-diff-blob-addition-fg: #c9d1d9; + --color-diff-blob-addition-num-bg: rgba(63,185,80,0.3); + --color-diff-blob-addition-line-bg: rgba(46,160,67,0.15); + --color-diff-blob-addition-word-bg: rgba(46,160,67,0.4); + --color-diff-blob-deletion-num-text: #c9d1d9; + --color-diff-blob-deletion-fg: #c9d1d9; + --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3); + --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15); + --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4); + --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4); + --color-diff-blob-expander-icon: #8b949e; + --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; + --color-diffstat-deletion-border: rgba(240,246,252,0.1); + --color-diffstat-addition-border: rgba(240,246,252,0.1); + --color-diffstat-addition-bg: #3fb950; + --color-search-keyword-hl: rgba(210,153,34,0.4); + --color-prettylights-syntax-comment: #8b949e; + --color-prettylights-syntax-constant: #79c0ff; + --color-prettylights-syntax-entity: #d2a8ff; + --color-prettylights-syntax-storage-modifier-import: #c9d1d9; + --color-prettylights-syntax-entity-tag: #7ee787; + --color-prettylights-syntax-keyword: #ff7b72; + --color-prettylights-syntax-string: #a5d6ff; + --color-prettylights-syntax-variable: #ffa657; + --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; + --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; + --color-prettylights-syntax-invalid-illegal-bg: #8e1519; + --color-prettylights-syntax-carriage-return-text: #f0f6fc; + --color-prettylights-syntax-carriage-return-bg: #b62324; + --color-prettylights-syntax-string-regexp: #7ee787; + --color-prettylights-syntax-markup-list: #f2cc60; + --color-prettylights-syntax-markup-heading: #1f6feb; + --color-prettylights-syntax-markup-italic: #c9d1d9; + --color-prettylights-syntax-markup-bold: #c9d1d9; + --color-prettylights-syntax-markup-deleted-text: #ffdcd7; + --color-prettylights-syntax-markup-deleted-bg: #67060c; + --color-prettylights-syntax-markup-inserted-text: #aff5b4; + --color-prettylights-syntax-markup-inserted-bg: #033a16; + --color-prettylights-syntax-markup-changed-text: #ffdfb6; + --color-prettylights-syntax-markup-changed-bg: #5a1e02; + --color-prettylights-syntax-markup-ignored-text: #c9d1d9; + --color-prettylights-syntax-markup-ignored-bg: #1158c7; + --color-prettylights-syntax-meta-diff-range: #d2a8ff; + --color-prettylights-syntax-brackethighlighter-angle: #8b949e; + --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; + --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; + --color-codemirror-text: #c9d1d9; + --color-codemirror-bg: #0d1117; + --color-codemirror-gutters-bg: #0d1117; + --color-codemirror-guttermarker-text: #0d1117; + --color-codemirror-guttermarker-subtle-text: #484f58; + --color-codemirror-linenumber-text: #8b949e; + --color-codemirror-cursor: #c9d1d9; + --color-codemirror-selection-bg: rgba(56,139,253,0.4); + --color-codemirror-activeline-bg: rgba(110,118,129,0.1); + --color-codemirror-matchingbracket-text: #c9d1d9; + --color-codemirror-lines-bg: #0d1117; + --color-codemirror-syntax-comment: #8b949e; + --color-codemirror-syntax-constant: #79c0ff; + --color-codemirror-syntax-entity: #d2a8ff; + --color-codemirror-syntax-keyword: #ff7b72; + --color-codemirror-syntax-storage: #ff7b72; + --color-codemirror-syntax-string: #a5d6ff; + --color-codemirror-syntax-support: #79c0ff; + --color-codemirror-syntax-variable: #ffa657; + --color-checks-bg: #010409; + --color-checks-run-border-width: 1px; + --color-checks-container-border-width: 1px; + --color-checks-text-primary: #c9d1d9; + --color-checks-text-secondary: #8b949e; + --color-checks-text-link: #58a6ff; + --color-checks-btn-icon: #8b949e; + --color-checks-btn-hover-icon: #c9d1d9; + --color-checks-btn-hover-bg: rgba(110,118,129,0.1); + --color-checks-input-text: #8b949e; + --color-checks-input-placeholder-text: #484f58; + --color-checks-input-focus-text: #c9d1d9; + --color-checks-input-bg: #161b22; + --color-checks-input-shadow: none; + --color-checks-donut-error: #f85149; + --color-checks-donut-pending: #d29922; + --color-checks-donut-success: #2ea043; + --color-checks-donut-neutral: #8b949e; + --color-checks-dropdown-text: #c9d1d9; + --color-checks-dropdown-bg: #161b22; + --color-checks-dropdown-border: #30363d; + --color-checks-dropdown-shadow: rgba(1,4,9,0.3); + --color-checks-dropdown-hover-text: #c9d1d9; + --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1); + --color-checks-dropdown-btn-hover-text: #c9d1d9; + --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1); + --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4); + --color-checks-header-label-text: #8b949e; + --color-checks-header-label-open-text: #c9d1d9; + --color-checks-header-border: #21262d; + --color-checks-header-icon: #8b949e; + --color-checks-line-text: #8b949e; + --color-checks-line-num-text: #484f58; + --color-checks-line-timestamp-text: #484f58; + --color-checks-line-hover-bg: rgba(110,118,129,0.1); + --color-checks-line-selected-bg: rgba(56,139,253,0.15); + --color-checks-line-selected-num-text: #58a6ff; + --color-checks-line-dt-fm-text: #f0f6fc; + --color-checks-line-dt-fm-bg: #9e6a03; + --color-checks-gate-bg: rgba(187,128,9,0.15); + --color-checks-gate-text: #8b949e; + --color-checks-gate-waiting-text: #d29922; + --color-checks-step-header-open-bg: #161b22; + --color-checks-step-error-text: #f85149; + --color-checks-step-warning-text: #d29922; + --color-checks-logline-text: #8b949e; + --color-checks-logline-num-text: #484f58; + --color-checks-logline-debug-text: #a371f7; + --color-checks-logline-error-text: #8b949e; + --color-checks-logline-error-num-text: #484f58; + --color-checks-logline-error-bg: rgba(248,81,73,0.15); + --color-checks-logline-warning-text: #8b949e; + --color-checks-logline-warning-num-text: #d29922; + --color-checks-logline-warning-bg: rgba(187,128,9,0.15); + --color-checks-logline-command-text: #58a6ff; + --color-checks-logline-section-text: #3fb950; + --color-checks-ansi-black: #0d1117; + --color-checks-ansi-black-bright: #161b22; + --color-checks-ansi-white: #b1bac4; + --color-checks-ansi-white-bright: #b1bac4; + --color-checks-ansi-gray: #6e7681; + --color-checks-ansi-red: #ff7b72; + --color-checks-ansi-red-bright: #ffa198; + --color-checks-ansi-green: #3fb950; + --color-checks-ansi-green-bright: #56d364; + --color-checks-ansi-yellow: #d29922; + --color-checks-ansi-yellow-bright: #e3b341; + --color-checks-ansi-blue: #58a6ff; + --color-checks-ansi-blue-bright: #79c0ff; + --color-checks-ansi-magenta: #bc8cff; + --color-checks-ansi-magenta-bright: #d2a8ff; + --color-checks-ansi-cyan: #76e3ea; + --color-checks-ansi-cyan-bright: #b3f0ff; + --color-project-header-bg: #0d1117; + --color-project-sidebar-bg: #161b22; + --color-project-gradient-in: #161b22; + --color-project-gradient-out: rgba(22,27,34,0); + --color-mktg-success: rgba(41,147,61,1); + --color-mktg-info: rgba(42,123,243,1); + --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065); + --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0); + --color-mktg-btn-bg-top: hsla(228,82%,66%,1); + --color-mktg-btn-bg-bottom: #4969ed; + --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1); + --color-mktg-btn-bg-overlay-bottom: #3355e0; + --color-mktg-btn-text: #f0f6fc; + --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1); + --color-mktg-btn-primary-bg-bottom: #2ea44f; + --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1); + --color-mktg-btn-primary-bg-overlay-bottom: #22863a; + --color-mktg-btn-primary-text: #f0f6fc; + --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1); + --color-mktg-btn-enterprise-bg-bottom: #6f57ff; + --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1); + --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda; + --color-mktg-btn-enterprise-text: #f0f6fc; + --color-mktg-btn-outline-text: #f0f6fc; + --color-mktg-btn-outline-border: rgba(240,246,252,0.3); + --color-mktg-btn-outline-hover-text: #f0f6fc; + --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5); + --color-mktg-btn-outline-focus-border: #f0f6fc; + --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5); + --color-mktg-btn-dark-text: #f0f6fc; + --color-mktg-btn-dark-border: rgba(240,246,252,0.3); + --color-mktg-btn-dark-hover-text: #f0f6fc; + --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5); + --color-mktg-btn-dark-focus-border: #f0f6fc; + --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5); + --color-avatar-bg: rgba(240,246,252,0.1); + --color-avatar-border: rgba(240,246,252,0.1); + --color-avatar-stack-fade: #30363d; + --color-avatar-stack-fade-more: #21262d; + --color-avatar-child-shadow: -2px -2px 0 #0d1117; + --color-topic-tag-border: rgba(0,0,0,0); + --color-select-menu-backdrop-border: #484f58; + --color-select-menu-tap-highlight: rgba(48,54,61,0.5); + --color-select-menu-tap-focus-bg: #0c2d6b; + --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85); + --color-header-text: rgba(240,246,252,0.7); + --color-header-bg: #161b22; + --color-header-logo: #f0f6fc; + --color-header-search-bg: #0d1117; + --color-header-search-border: #30363d; + --color-sidenav-selected-bg: #21262d; + --color-menu-bg-active: #161b22; + --color-control-transparent-bg-hover: #656c7633; + --color-input-disabled-bg: rgba(110,118,129,0); + --color-timeline-badge-bg: #21262d; + --color-ansi-black: #484f58; + --color-ansi-black-bright: #6e7681; + --color-ansi-white: #b1bac4; + --color-ansi-white-bright: #f0f6fc; + --color-ansi-gray: #6e7681; + --color-ansi-red: #ff7b72; + --color-ansi-red-bright: #ffa198; + --color-ansi-green: #3fb950; + --color-ansi-green-bright: #56d364; + --color-ansi-yellow: #d29922; + --color-ansi-yellow-bright: #e3b341; + --color-ansi-blue: #58a6ff; + --color-ansi-blue-bright: #79c0ff; + --color-ansi-magenta: #bc8cff; + --color-ansi-magenta-bright: #d2a8ff; + --color-ansi-cyan: #39c5cf; + --color-ansi-cyan-bright: #56d4dd; + --color-btn-text: #c9d1d9; + --color-btn-bg: #21262d; + --color-btn-border: rgba(240,246,252,0.1); + --color-btn-shadow: 0 0 transparent; + --color-btn-inset-shadow: 0 0 transparent; + --color-btn-hover-bg: #30363d; + --color-btn-hover-border: #8b949e; + --color-btn-active-bg: hsla(212,12%,18%,1); + --color-btn-active-border: #6e7681; + --color-btn-selected-bg: #161b22; + --color-btn-focus-bg: #21262d; + --color-btn-focus-border: #8b949e; + --color-btn-focus-shadow: 0 0 0 3px rgba(139,148,158,0.3); + --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15); + --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31,111,235,0.3); + --color-btn-counter-bg: #30363d; + --color-btn-primary-text: #ffffff; + --color-btn-primary-bg: #238636; + --color-btn-primary-border: rgba(240,246,252,0.1); + --color-btn-primary-shadow: 0 0 transparent; + --color-btn-primary-inset-shadow: 0 0 transparent; + --color-btn-primary-hover-bg: #2ea043; + --color-btn-primary-hover-border: rgba(240,246,252,0.1); + --color-btn-primary-selected-bg: #238636; + --color-btn-primary-selected-shadow: 0 0 transparent; + --color-btn-primary-disabled-text: rgba(240,246,252,0.5); + --color-btn-primary-disabled-bg: rgba(35,134,54,0.6); + --color-btn-primary-disabled-border: rgba(240,246,252,0.1); + --color-btn-primary-focus-bg: #238636; + --color-btn-primary-focus-border: rgba(240,246,252,0.1); + --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4); + --color-btn-primary-icon: #f0f6fc; + --color-btn-primary-counter-bg: rgba(240,246,252,0.2); + --color-btn-outline-text: #58a6ff; + --color-btn-outline-hover-text: #58a6ff; + --color-btn-outline-hover-bg: #30363d; + --color-btn-outline-hover-border: rgba(240,246,252,0.1); + --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1); + --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03); + --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2); + --color-btn-outline-selected-text: #f0f6fc; + --color-btn-outline-selected-bg: #0d419d; + --color-btn-outline-selected-border: rgba(240,246,252,0.1); + --color-btn-outline-selected-shadow: 0 0 transparent; + --color-btn-outline-disabled-text: rgba(88,166,255,0.5); + --color-btn-outline-disabled-bg: #0d1117; + --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05); + --color-btn-outline-focus-border: rgba(240,246,252,0.1); + --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17,88,199,0.4); + --color-btn-outline-counter-bg: rgba(31,111,235,0.1); + --color-btn-danger-text: #f85149; + --color-btn-danger-hover-text: #f0f6fc; + --color-btn-danger-hover-bg: #da3633; + --color-btn-danger-hover-border: #f85149; + --color-btn-danger-hover-shadow: 0 0 transparent; + --color-btn-danger-hover-inset-shadow: 0 0 transparent; + --color-btn-danger-hover-icon: #f0f6fc; + --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2); + --color-btn-danger-selected-text: #ffffff; + --color-btn-danger-selected-bg: #b62324; + --color-btn-danger-selected-border: #ff7b72; + --color-btn-danger-selected-shadow: 0 0 transparent; + --color-btn-danger-disabled-text: rgba(248,81,73,0.5); + --color-btn-danger-disabled-bg: #0d1117; + --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05); + --color-btn-danger-focus-border: #f85149; + --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248,81,73,0.4); + --color-btn-danger-counter-bg: rgba(218,54,51,0.1); + --color-btn-danger-icon: #f85149; + --color-underlinenav-icon: #484f58; + --color-underlinenav-border-hover: rgba(110,118,129,0.4); + --color-fg-default: #c9d1d9; + --color-fg-muted: #8b949e; + --color-fg-subtle: #484f58; + --color-fg-on-emphasis: #f0f6fc; + --color-canvas-default: #0d1117; + --color-canvas-overlay: #161b22; + --color-canvas-inset: #010409; + --color-canvas-subtle: #161b22; + --color-border-default: #30363d; + --color-border-muted: #21262d; + --color-border-subtle: rgba(240,246,252,0.1); + --color-shadow-small: 0 0 transparent; + --color-shadow-medium: 0 3px 6px #010409; + --color-shadow-large: 0 8px 24px #010409; + --color-shadow-extra-large: 0 12px 48px #010409; + --color-neutral-emphasis-plus: #6e7681; + --color-neutral-emphasis: #6e7681; + --color-neutral-muted: rgba(110,118,129,0.4); + --color-neutral-subtle: rgba(110,118,129,0.1); + --color-accent-fg: #58a6ff; + --color-accent-emphasis: #1f6feb; + --color-accent-muted: rgba(56,139,253,0.4); + --color-accent-subtle: rgba(56,139,253,0.15); + --color-success-fg: #3fb950; + --color-success-emphasis: #238636; + --color-success-muted: rgba(46,160,67,0.4); + --color-success-subtle: rgba(46,160,67,0.15); + --color-attention-fg: #d29922; + --color-attention-emphasis: #9e6a03; + --color-attention-muted: rgba(187,128,9,0.4); + --color-attention-subtle: rgba(187,128,9,0.15); + --color-severe-fg: #db6d28; + --color-severe-emphasis: #bd561d; + --color-severe-muted: rgba(219,109,40,0.4); + --color-severe-subtle: rgba(219,109,40,0.15); + --color-danger-fg: #f85149; + --color-danger-emphasis: #da3633; + --color-danger-muted: rgba(248,81,73,0.4); + --color-danger-subtle: rgba(248,81,73,0.15); + --color-done-fg: #a371f7; + --color-done-emphasis: #8957e5; + --color-done-muted: rgba(163,113,247,0.4); + --color-done-subtle: rgba(163,113,247,0.15); + --color-sponsors-fg: #db61a2; + --color-sponsors-emphasis: #bf4b8a; + --color-sponsors-muted: rgba(219,97,162,0.4); + --color-sponsors-subtle: rgba(219,97,162,0.15); + --color-primer-canvas-backdrop: rgba(1,4,9,0.8); + --color-primer-canvas-sticky: rgba(13,17,23,0.95); + --color-primer-border-active: #F78166; + --color-primer-border-contrast: rgba(240,246,252,0.2); + --color-primer-shadow-highlight: 0 0 transparent; + --color-primer-shadow-inset: 0 0 transparent; + --color-primer-shadow-focus: 0 0 0 3px #0c2d6b; + --color-scale-black: #010409; + --color-scale-white: #f0f6fc; + --color-scale-gray-0: #f0f6fc; + --color-scale-gray-1: #c9d1d9; + --color-scale-gray-2: #b1bac4; + --color-scale-gray-3: #8b949e; + --color-scale-gray-4: #6e7681; + --color-scale-gray-5: #484f58; + --color-scale-gray-6: #30363d; + --color-scale-gray-7: #21262d; + --color-scale-gray-8: #161b22; + --color-scale-gray-9: #0d1117; + --color-scale-blue-0: #cae8ff; + --color-scale-blue-1: #a5d6ff; + --color-scale-blue-2: #79c0ff; + --color-scale-blue-3: #58a6ff; + --color-scale-blue-4: #388bfd; + --color-scale-blue-5: #1f6feb; + --color-scale-blue-6: #1158c7; + --color-scale-blue-7: #0d419d; + --color-scale-blue-8: #0c2d6b; + --color-scale-blue-9: #051d4d; + --color-scale-green-0: #aff5b4; + --color-scale-green-1: #7ee787; + --color-scale-green-2: #56d364; + --color-scale-green-3: #3fb950; + --color-scale-green-4: #2ea043; + --color-scale-green-5: #238636; + --color-scale-green-6: #196c2e; + --color-scale-green-7: #0f5323; + --color-scale-green-8: #033a16; + --color-scale-green-9: #04260f; + --color-scale-yellow-0: #f8e3a1; + --color-scale-yellow-1: #f2cc60; + --color-scale-yellow-2: #e3b341; + --color-scale-yellow-3: #d29922; + --color-scale-yellow-4: #bb8009; + --color-scale-yellow-5: #9e6a03; + --color-scale-yellow-6: #845306; + --color-scale-yellow-7: #693e00; + --color-scale-yellow-8: #4b2900; + --color-scale-yellow-9: #341a00; + --color-scale-orange-0: #ffdfb6; + --color-scale-orange-1: #ffc680; + --color-scale-orange-2: #ffa657; + --color-scale-orange-3: #f0883e; + --color-scale-orange-4: #db6d28; + --color-scale-orange-5: #bd561d; + --color-scale-orange-6: #9b4215; + --color-scale-orange-7: #762d0a; + --color-scale-orange-8: #5a1e02; + --color-scale-orange-9: #3d1300; + --color-scale-red-0: #ffdcd7; + --color-scale-red-1: #ffc1ba; + --color-scale-red-2: #ffa198; + --color-scale-red-3: #ff7b72; + --color-scale-red-4: #f85149; + --color-scale-red-5: #da3633; + --color-scale-red-6: #b62324; + --color-scale-red-7: #8e1519; + --color-scale-red-8: #67060c; + --color-scale-red-9: #490202; + --color-scale-purple-0: #eddeff; + --color-scale-purple-1: #e2c5ff; + --color-scale-purple-2: #d2a8ff; + --color-scale-purple-3: #bc8cff; + --color-scale-purple-4: #a371f7; + --color-scale-purple-5: #8957e5; + --color-scale-purple-6: #6e40c9; + --color-scale-purple-7: #553098; + --color-scale-purple-8: #3c1e70; + --color-scale-purple-9: #271052; + --color-scale-pink-0: #ffdaec; + --color-scale-pink-1: #ffbedd; + --color-scale-pink-2: #ff9bce; + --color-scale-pink-3: #f778ba; + --color-scale-pink-4: #db61a2; + --color-scale-pink-5: #bf4b8a; + --color-scale-pink-6: #9e3670; + --color-scale-pink-7: #7d2457; + --color-scale-pink-8: #5e103e; + --color-scale-pink-9: #42062a; + --color-scale-coral-0: #FFDDD2; + --color-scale-coral-1: #FFC2B2; + --color-scale-coral-2: #FFA28B; + --color-scale-coral-3: #F78166; + --color-scale-coral-4: #EA6045; + --color-scale-coral-5: #CF462D; + --color-scale-coral-6: #AC3220; + --color-scale-coral-7: #872012; + --color-scale-coral-8: #640D04; + --color-scale-coral-9: #460701 } diff --git a/packages/html-reporter/src/common.css b/packages/html-reporter/src/common.css index dc3323d29f..ae31afd527 100644 --- a/packages/html-reporter/src/common.css +++ b/packages/html-reporter/src/common.css @@ -40,6 +40,12 @@ svg { position: relative; } +.cursor-pointer, +.cursor-pointer > * { + cursor: pointer; + user-select: none; +} + .hbox { display: flex; flex: auto; @@ -296,6 +302,22 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se background-color: var(--color-btn-hover-bg); } +input[type="checkbox"] { + outline: var(--color-focus-border); + height: 24px; +} + +dialog { + background-color: var(--color-canvas-subtle); + border: 1px solid var(--color-border-default); + border-radius: 6px; + padding: 6px; +} + +.subnav-item .octicon.octicon-settings { + margin-right: 0; +} + @media only screen and (max-width: 600px) { .subnav-item, .form-control { border-radius: 0 !important; diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx index d385c12992..bbed14b7a4 100644 --- a/packages/html-reporter/src/headerView.tsx +++ b/packages/html-reporter/src/headerView.tsx @@ -24,6 +24,8 @@ import { Link, navigate, SearchParamsContext } from './links'; import { statusIcon } from './statusIcon'; import { filterWithQuery } from './filter'; import { linkifyText } from '@web/renderUtils'; +import { Dialog } from '@web/shared/dialog'; +import { useDarkModeSetting } from '@web/theme'; export const HeaderView: React.FC<{ title: string | undefined, @@ -90,6 +92,7 @@ const StatsNavView: React.FC<{ + ; }; @@ -112,3 +115,42 @@ const NavLink: React.FC<{ {count} ; }; + +const SettingsButton: React.FC = () => { + const settingsRef = React.useRef(null); + const [settingsOpen, setSettingsOpen] = React.useState(false); + const [darkMode, setDarkMode] = useDarkModeSetting(); + + return <> + setSettingsOpen(false)} + anchor={settingsRef} + dataTestId='settings-dialog' + > +
+ setDarkMode(!darkMode)}> + +
+ + { + setSettingsOpen(!settingsOpen); + e.preventDefault(); + }} + onMouseDown={preventDefault}> + {icons.settings()} + + ; +}; + +const preventDefault = (e: any) => { + e.stopPropagation(); + e.preventDefault(); +}; diff --git a/packages/html-reporter/src/icons.tsx b/packages/html-reporter/src/icons.tsx index a7368c5f4a..85ce05c3fc 100644 --- a/packages/html-reporter/src/icons.tsx +++ b/packages/html-reporter/src/icons.tsx @@ -103,3 +103,9 @@ export const copy = () => { ; }; + +export const settings = () => { + return ; +}; diff --git a/packages/html-reporter/src/index.tsx b/packages/html-reporter/src/index.tsx index 89a44fe026..df1f9b2ab7 100644 --- a/packages/html-reporter/src/index.tsx +++ b/packages/html-reporter/src/index.tsx @@ -28,6 +28,8 @@ const zipjs = zipImport as typeof zip; import logo from '@web/assets/playwright-logo.svg'; import { SearchParamsProvider } from './links'; +import { applyTheme } from '@web/theme'; + const link = document.createElement('link'); link.rel = 'shortcut icon'; link.href = logo; @@ -49,6 +51,7 @@ const ReportLoader: React.FC = () => { }; window.onload = () => { + applyTheme(); ReactDOM.createRoot(document.querySelector('#root')!).render(); }; diff --git a/packages/html-reporter/src/labels.css b/packages/html-reporter/src/labels.css index dbb38feaa4..ad9bdc3a36 100644 --- a/packages/html-reporter/src/labels.css +++ b/packages/html-reporter/src/labels.css @@ -35,7 +35,7 @@ color: var(--color-fg-default); } -@media(prefers-color-scheme: light) { +:root.light-mode { .label-color-0 { background-color: var(--color-scale-blue-0); color: var(--color-scale-blue-6); @@ -68,7 +68,7 @@ } } -@media(prefers-color-scheme: dark) { +:root.dark-mode { .label-color-0 { background-color: var(--color-scale-blue-9); color: var(--color-scale-blue-2); diff --git a/packages/html-reporter/src/testResultView.css b/packages/html-reporter/src/testResultView.css index 81fd61453d..7291d2a1c5 100644 --- a/packages/html-reporter/src/testResultView.css +++ b/packages/html-reporter/src/testResultView.css @@ -45,13 +45,13 @@ padding: 2px 8px; } -@media(prefers-color-scheme: light) { +:root.light-mode { .test-result-counter { background: var(--color-scale-gray-5); } } -@media(prefers-color-scheme: dark) { +:root.dark-mode { .test-result-counter { background: var(--color-scale-gray-3); } diff --git a/packages/recorder/src/recorder.css b/packages/recorder/src/recorder.css index defde39efb..c747f2b55c 100644 --- a/packages/recorder/src/recorder.css +++ b/packages/recorder/src/recorder.css @@ -40,7 +40,7 @@ color: #a1260d; } -body.dark-mode .recorder .toolbar-button.toggled.circle-large-filled { +:root:dark-mode .recorder .toolbar-button.toggled.circle-large-filled { color: #f48771; } diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx index de464bec8a..772c0154b9 100644 --- a/packages/recorder/src/recorder.tsx +++ b/packages/recorder/src/recorder.tsx @@ -30,7 +30,7 @@ import { useDarkModeSetting } from '@web/theme'; import { copy, useSetting } from '@web/uiUtils'; import yaml from 'yaml'; import { parseAriaSnapshot } from '@isomorphic/ariaSnapshot'; -import { Dialog } from '@web/components/dialog'; +import { Dialog } from '@web/shared/dialog'; export interface RecorderProps { sources: Source[], diff --git a/packages/trace-viewer/src/ui/browserFrame.css b/packages/trace-viewer/src/ui/browserFrame.css index c866646d4d..d2961aa12a 100644 --- a/packages/trace-viewer/src/ui/browserFrame.css +++ b/packages/trace-viewer/src/ui/browserFrame.css @@ -63,7 +63,7 @@ height: var(--browser-frame-header-height); } -body.dark-mode .browser-frame-header { +:root:dark-mode .browser-frame-header { background: #444950; } diff --git a/packages/trace-viewer/src/ui/timeline.css b/packages/trace-viewer/src/ui/timeline.css index fd8dc01ae9..57cf05937b 100644 --- a/packages/trace-viewer/src/ui/timeline.css +++ b/packages/trace-viewer/src/ui/timeline.css @@ -108,7 +108,7 @@ --action-background-color: #1a85ff66; } -body.dark-mode .timeline-bar.action.error { +:root:dark-mode .timeline-bar.action.error { --action-color: var(--vscode-errorForeground); --action-background-color: #f4877166; } @@ -162,7 +162,7 @@ body.dark-mode .timeline-bar.action.error { background-color: #3879d91a; } -body.dark-mode .timeline-window-curtain { +:root:dark-mode .timeline-window-curtain { background-color: #161718bf; } diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx index 932434f40b..86ce06f046 100644 --- a/packages/trace-viewer/src/ui/workbench.tsx +++ b/packages/trace-viewer/src/ui/workbench.tsx @@ -45,7 +45,7 @@ import type { HighlightedElement } from './snapshotTab'; import type { TestAnnotation } from '@playwright/test'; import { MetadataWithCommitInfo } from '@testIsomorphic/types'; import type { ActionGroup } from '@isomorphic/protocolFormatter'; -import { DialogToolbarButton } from '@web/components/dialog'; +import { DialogToolbarButton } from '@web/components/dialogToolbarButton'; import { SettingsView } from './settingsView'; export const Workbench: React.FunctionComponent<{ diff --git a/packages/trace-viewer/src/ui/workbenchLoader.css b/packages/trace-viewer/src/ui/workbenchLoader.css index 950f1da237..e62ca8206e 100644 --- a/packages/trace-viewer/src/ui/workbenchLoader.css +++ b/packages/trace-viewer/src/ui/workbenchLoader.css @@ -34,7 +34,7 @@ body .drop-target { background: rgba(255, 255, 255, 0.8); } -body.dark-mode .drop-target { +:root:dark-mode .drop-target { background: rgba(0, 0, 0, 0.8); } diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx index 519b7fea78..2da38b269b 100644 --- a/packages/trace-viewer/src/ui/workbenchLoader.tsx +++ b/packages/trace-viewer/src/ui/workbenchLoader.tsx @@ -20,7 +20,8 @@ import { MultiTraceModel } from './modelUtil'; import './workbenchLoader.css'; import { Workbench } from './workbench'; import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection'; -import { Dialog, DialogToolbarButton } from '@web/components/dialog'; +import { DialogToolbarButton } from '@web/components/dialogToolbarButton'; +import { Dialog } from '@web/shared/dialog'; import { DefaultSettingsView } from './defaultSettingsView'; export const WorkbenchLoader: React.FunctionComponent<{ diff --git a/packages/web/src/components/codeMirrorWrapper.css b/packages/web/src/components/codeMirrorWrapper.css index 59a519005e..a2383795b7 100644 --- a/packages/web/src/components/codeMirrorWrapper.css +++ b/packages/web/src/components/codeMirrorWrapper.css @@ -79,33 +79,33 @@ color: #267f99; } -body.dark-mode .CodeMirror span.cm-def, -body.dark-mode .CodeMirror span.cm-tag { +:root:dark-mode .CodeMirror span.cm-def, +:root:dark-mode .CodeMirror span.cm-tag { color: var(--vscode-debugView-valueChangedHighlight); } -body.dark-mode .CodeMirror span.cm-comment, -body.dark-mode .CodeMirror span.cm-link { +:root:dark-mode .CodeMirror span.cm-comment, +:root:dark-mode .CodeMirror span.cm-link { color: #6a9955; } -body.dark-mode .CodeMirror span.cm-variable, -body.dark-mode .CodeMirror span.cm-variable-2, -body.dark-mode .CodeMirror span.cm-atom { +:root:dark-mode .CodeMirror span.cm-variable, +:root:dark-mode .CodeMirror span.cm-variable-2, +:root:dark-mode .CodeMirror span.cm-atom { color: #4fc1ff; } -body.dark-mode .CodeMirror span.cm-property { +:root:dark-mode .CodeMirror span.cm-property { color: #dcdcaa; } -body.dark-mode .CodeMirror span.cm-qualifier, -body.dark-mode .CodeMirror span.cm-attribute { +:root:dark-mode .CodeMirror span.cm-qualifier, +:root:dark-mode .CodeMirror span.cm-attribute { color: #9cdcfe; } -body.dark-mode .CodeMirror span.cm-variable-3, -body.dark-mode .CodeMirror span.cm-type { +:root:dark-mode .CodeMirror span.cm-variable-3, +:root:dark-mode .CodeMirror span.cm-type { color: #4ec9b0; } diff --git a/packages/web/src/components/dialogToolbarButton.tsx b/packages/web/src/components/dialogToolbarButton.tsx new file mode 100644 index 0000000000..6282cecfbd --- /dev/null +++ b/packages/web/src/components/dialogToolbarButton.tsx @@ -0,0 +1,55 @@ +/* + Copyright (c) Microsoft Corporation. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import * as React from 'react'; +import { ToolbarButton } from './toolbarButton'; +import { Dialog } from '../shared/dialog'; + +export interface DialogToolbarButtonProps { + title?: string; + icon?: string; + dialogDataTestId?: string; +} + +export const DialogToolbarButton: React.FC> = ({ title, icon, dialogDataTestId, children }) => { + const hostingRef = React.useRef(null); + const [open, setOpen] = React.useState(false); + return ( + <> + setOpen(current => !current)} + /> + setOpen(false)} + anchor={hostingRef} + dataTestId={dialogDataTestId} + > + {children} + + + ); +}; diff --git a/packages/web/src/components/dialog.tsx b/packages/web/src/shared/dialog.tsx similarity index 79% rename from packages/web/src/components/dialog.tsx rename to packages/web/src/shared/dialog.tsx index 3a6e0b142a..86b3feb8cd 100644 --- a/packages/web/src/components/dialog.tsx +++ b/packages/web/src/shared/dialog.tsx @@ -15,7 +15,6 @@ */ import * as React from 'react'; -import { ToolbarButton } from './toolbarButton'; export interface DialogProps { className?: string; @@ -164,39 +163,3 @@ const buildTopLeftCoordWithAlignment = ( }; } }; - -export interface DialogToolbarButtonProps { - title?: string; - icon?: string; - dialogDataTestId?: string; -} - -export const DialogToolbarButton: React.FC> = ({ title, icon, dialogDataTestId, children }) => { - const hostingRef = React.useRef(null); - const [open, setOpen] = React.useState(false); - return ( - <> - setOpen(current => !current)} - /> - setOpen(false)} - anchor={hostingRef} - dataTestId={dialogDataTestId} - > - {children} - - - ); -}; diff --git a/packages/web/src/theme.ts b/packages/web/src/theme.ts index 3d84b8123b..e59418b196 100644 --- a/packages/web/src/theme.ts +++ b/packages/web/src/theme.ts @@ -41,7 +41,9 @@ export function applyTheme() { const currentTheme = settings.getString('theme', defaultTheme); if (currentTheme === 'dark-mode') - document.body.classList.add('dark-mode'); + document.documentElement.classList.add('dark-mode'); + else + document.documentElement.classList.add('light-mode'); } type Theme = 'dark-mode' | 'light-mode'; @@ -52,8 +54,8 @@ export function toggleTheme() { const newTheme = oldTheme === 'dark-mode' ? 'light-mode' : 'dark-mode'; if (oldTheme) - document.body.classList.remove(oldTheme); - document.body.classList.add(newTheme); + document.documentElement.classList.remove(oldTheme); + document.documentElement.classList.add(newTheme); settings.setString('theme', newTheme); for (const listener of listeners) listener(newTheme); @@ -68,7 +70,7 @@ export function removeThemeListener(listener: (theme: Theme) => void) { } export function currentTheme(): Theme { - return document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode'; + return document.documentElement.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode'; } export function useDarkModeSetting(): [boolean, (value: boolean) => void] { diff --git a/packages/web/src/third_party/vscode/colors.css b/packages/web/src/third_party/vscode/colors.css index fc455b5b20..aefb327a11 100644 --- a/packages/web/src/third_party/vscode/colors.css +++ b/packages/web/src/third_party/vscode/colors.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -body { +:root { --vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; --vscode-font-weight: normal; --vscode-font-size: 13px; @@ -544,13 +544,12 @@ body { --vscode-gitDecoration-submoduleResourceForeground: #1258a7; } -body.light-mode { +:root.light-mode { color-scheme: light; } -body.dark-mode { +:root.dark-mode { color-scheme: dark; - --vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; --vscode-font-weight: normal; --vscode-font-size: 13px;