From 34551ec4d744c32e7509805d24645fc57c21016f Mon Sep 17 00:00:00 2001 From: Isabel Date: Sat, 18 Nov 2023 22:45:33 +0000 Subject: [PATCH 1/6] refactor(github): make more similar to default github --- styles/github/catppuccin.user.css | 461 ++---------------------------- 1 file changed, 18 insertions(+), 443 deletions(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index 1709ccadcc..b6b5b2ca92 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -2,7 +2,7 @@ @name Github Catppuccin @namespace github.com/catppuccin/userstyles/styles/github @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github -@version 1.2.12 +@version 1.3.0 @description Soothing pastel theme for GitHub @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css @@ -12,7 +12,6 @@ @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater*", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -@var checkbox topbar "Topbar colors" 1 ==/UserStyle== */ /* prettier-ignore */ @@ -61,21 +60,11 @@ #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: @crust; --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); } #catppuccin(@lookup, @accent) { @@ -111,7 +100,6 @@ & 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: @sky; --color-marketing-icon-secondary: @blue; @@ -126,12 +114,8 @@ --color-diff-blob-deletion-line-bg: fadeout(@red, 85%); --color-diff-blob-deletion-word-bg: fadeout(@red, 70%); --color-diff-blob-hunk-num-bg: fadeout(@blue, 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: @green; - --color-search-keyword-hl: rgba(210, 153, 34, 0.4); --color-prettylights-syntax-comment: @overlay1; --color-prettylights-syntax-constant: @blue; --color-prettylights-syntax-entity: @blue; @@ -140,13 +124,8 @@ --color-prettylights-syntax-keyword: @pink; --color-prettylights-syntax-string: @green; --color-prettylights-syntax-variable: @peach; - --color-prettylights-syntax-brackethighlighter-unmatched: #f0f; --color-prettylights-syntax-invalid-illegal-text: @red; --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 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: @teal; --color-prettylights-syntax-markup-italic: @yellow; --color-prettylights-syntax-markup-bold: @yellow; @@ -157,33 +136,13 @@ --color-prettylights-syntax-markup-changed-text: @text; --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); --color-prettylights-syntax-markup-ignored-text: @text; - --color-prettylights-syntax-markup-ignored-bg: #f0f; - --color-prettylights-syntax-meta-diff-range: @mauve; - --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: @mantle; - --color-checks-run-border-width: 1px; - --color-checks-container-border-width: 1px; --color-checks-text-primary: @text; --color-checks-text-secondary: @subtext1; --color-checks-text-link: @sapphire; @@ -194,7 +153,6 @@ --color-checks-input-placeholder-text: @subtext1; --color-checks-input-focus-text: @text; --color-checks-input-bg: @surface0; - --color-checks-input-shadow: 0 0 0 1px; --color-checks-donut-error: @red; --color-checks-donut-pending: @peach; --color-checks-donut-success: @green; @@ -217,10 +175,6 @@ --color-checks-line-timestamp-text: @subtext0; --color-checks-line-hover-bg: @surface0; --color-checks-line-selected-bg: @surface0; - --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: @yellow; --color-checks-step-header-open-bg: @surface0; @@ -252,7 +206,6 @@ --color-checks-ansi-white-bright: @surface1; } - --color-checks-ansi-gray: #f0f; --color-checks-ansi-red: @red; --color-checks-ansi-red-bright: @red; --color-checks-ansi-green: @green; @@ -265,274 +218,64 @@ --color-checks-ansi-magenta-bright: @pink; --color-checks-ansi-cyan: @teal; --color-checks-ansi-cyan-bright: @teal; - --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: @mantle; - } - - --color-header-divider: #8b949e; + --color-header-bg: @mantle; --color-header-logo: @text; --color-header-search-bg: @surface0; --color-header-search-border: @surface1; --color-sidenav-selected-bg: @surface1; --color-menu-bg-active: @surface2; - --color-input-disabled-bg: rgba(110, 118, 129, 0); --color-timeline-badge-bg: @surface0; - --color-ansi-black: #484f58; - --color-ansi-black-bright: #6e7681; - --color-ansi-white: #b1bac4; - --color-ansi-white-bright: #fff; - --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: @surface0; - --color-btn-border: transparent; - --color-btn-shadow: 0 0 transparent; - --color-btn-inset-shadow: 0 0 transparent; + --color-btn-border: @surface1; --color-btn-hover-bg: @surface1; - --color-btn-hover-border: transparent; + --color-btn-hover-border: @surface2; --color-btn-active-bg: @surface2; - --color-btn-active-border: transparent; --color-btn-selected-bg: @surface2; - --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: @surface2; #coloredButton(primary, @green); - --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: #fff; - --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: @subtext0; - --color-btn-outline-disabled-bg: @surface2; - --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, @red); - --color-underlinenav-icon: #6e7681; - --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4); --color-action-list-item-inline-divider: @surface2; --color-action-list-item-default-hover-bg: @surface0; - --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: @surface1; - --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: @subtext1; --color-fg-subtle: @subtext1; --color-fg-on-emphasis: @base; --color-canvas-default: @base; --color-canvas-overlay: @mantle; - --color-canvas-inset: @surface0; - --color-canvas-subtle: @mantle; + --color-canvas-inset: @mantle; // background + --color-canvas-subtle: @surface0; --color-border-default: @surface1; --color-border-muted: @surface0; - --color-border-subtle: rgba(240, 246, 252, 0.1); - --color-shadow-small: 0 0 transparent; --color-shadow-medium: 0 3px 6px @crust; --color-shadow-large: 0 8px 24px @crust; --color-shadow-extra-large: 0 12px 48px @crust; --color-neutral-emphasis-plus: @overlay0; --color-neutral-emphasis: @overlay2; - --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: @green; --color-success-emphasis: @green; - --color-success-muted: rgba(46, 160, 67, 0.4); - --color-success-subtle: rgba(46, 160, 67, 0.15); --color-attention-fg: @peach; --color-attention-emphasis: @peach; - --color-attention-muted: rgba(187, 128, 9, 0.4); - --color-attention-subtle: rgba(187, 128, 9, 0.15); --color-severe-fg: @maroon; --color-severe-emphasis: @maroon; - --color-severe-muted: rgba(219, 109, 40, 0.4); - --color-severe-subtle: rgba(219, 109, 40, 0.15); --color-danger-fg: @red; --color-danger-emphasis: @red; - --color-danger-muted: rgba(248, 81, 73, 0.4); - --color-danger-subtle: rgba(248, 81, 73, 0.15); --color-open-fg: @green; --color-open-emphasis: @green; - --color-open-muted: rgba(46, 160, 67, 0.4); - --color-open-subtle: rgba(46, 160, 67, 0.15); --color-closed-fg: @red; --color-closed-emphasis: @red; - --color-closed-muted: rgba(248, 81, 73, 0.4); - --color-closed-subtle: rgba(248, 81, 73, 0.15); --color-done-fg: @mauve; --color-done-emphasis: @mauve; - --color-done-muted: rgba(163, 113, 247, 0.4); - --color-done-subtle: rgba(163, 113, 247, 0.15); --color-sponsors-fg: @mauve; --color-sponsors-emphasis: @mauve; - --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: @red; - --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: #fff; - --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: @overlay0; --color-workflow-card-connector-bg: @overlay0; @@ -542,7 +285,6 @@ --color-workflow-card-connector-highlight-bg: @accent-color; --color-workflow-card-bg: @surface1; --color-workflow-card-inactive-bg: @surface0; - --color-workflow-card-header-shadow: #dc2286; --color-workflow-card-progress-complete-bg: fadeout(@blue, 85%); --color-workflow-card-progress-incomplete-bg: @surface1; --color-discussions-state-answered-icon: var(--color-scale-green-3); @@ -554,10 +296,10 @@ --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-halloween-graph-day-L1-bg: fadeout(@accent-color, 3); + --color-calendar-halloween-graph-day-L2-bg: fadeout(@accent-color, 2); + --color-calendar-halloween-graph-day-L3-bg: @accent-color; + --color-calendar-halloween-graph-day-L4-bg: @mantle; --color-calendar-graph-day-bg: @surface0; --color-calendar-graph-day-border: transparent; /* These could do with a bit of refining */ @@ -569,9 +311,13 @@ --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-user-mention-fg: @accent-color; + --color-user-mention-bg: @crust; --color-text-white: @text; + + // .AppHeader { + // --AppHeader-bg: @base; + // } /* Buttons */ .btn-danger, @@ -579,7 +325,7 @@ background: var(--color-btn-danger-bg); } - /* Create PR button & New branch button & Fork repo button & Commit Changes button */ + /* Create PR button & New branch button & Frok repo button & Commit Changes button*/ .iRoQzU, .ifkUYV, .bOZDzN, @@ -618,57 +364,6 @@ --text: @text; } - .hx_IssueLabel when not (@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); @@ -691,11 +386,6 @@ 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; @@ -730,10 +420,6 @@ } /* Misc */ - .col-md-8 { - background-color: @base; - } - .user-mention, .team-mention { color: @accent-color; @@ -753,25 +439,6 @@ --color-attention-subtle: fadeout(@accent-color, 85%); } - /* Button Fix */ - .color-bg-subtle { - background-color: transparent !important; - } - - .command-palette-details-dialog .color-bg-subtle { - background-color: @surface0 !important; - } - - /* Button selection Fix */ - .navigation-item[aria-selected="true"] .color-fg-muted { - color: @base !important; - } - - /* Darker bg for new AppHeader */ - .AppHeader { - background: var(--color-header-bg); - } - /* Headers */ h1, h2, @@ -1404,6 +1071,7 @@ /* New Repository Overview Fix */ .gWjhfa, + .klBOTR, .jMdYTc { background-color: @mantle; } @@ -1705,99 +1373,6 @@ @accent-color: @catppuccin[@@lookup][@@accent]; /* Colors */ - --color-scale-black: #010409; - --color-scale-white: #fff; - --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; - --jp-border-color0: var(--color-scale-gray-7); --jp-border-color1: var(--color-scale-gray-7); --jp-border-color2: var(--color-scale-gray-8); From 429826712e48a9d0aa15c93eb16b292a7d281c7e Mon Sep 17 00:00:00 2001 From: Isabel Date: Sat, 18 Nov 2023 22:49:33 +0000 Subject: [PATCH 2/6] fix(gh): typo --- styles/github/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index b6b5b2ca92..6f024fc2cf 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -325,7 +325,7 @@ background: var(--color-btn-danger-bg); } - /* Create PR button & New branch button & Frok repo button & Commit Changes button*/ + /* Create PR button & New branch button & Fork repo button & Commit Changes button */ .iRoQzU, .ifkUYV, .bOZDzN, From 23a2175c3ce0764ebd451de0c61aee41de1cc388 Mon Sep 17 00:00:00 2001 From: isabel Date: Wed, 22 Nov 2023 14:55:32 +0000 Subject: [PATCH 3/6] refactor: buttons and misc --- styles/github/catppuccin.user.css | 91 ++++++++++++++++--------------- 1 file changed, 46 insertions(+), 45 deletions(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index 6f024fc2cf..46222c5ffe 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -57,14 +57,47 @@ z-index: 9999; } - #coloredButton(@name, @color) { - --color-btn-@{name}-text: @base; - --color-btn-@{name}-bg: @color; - --color-btn-@{name}-hover-bg: mix(@color, @text, 30%); - --color-btn-@{name}-selected-bg: mix(@color, @text, 50%); - --color-btn-@{name}-disabled-text: @crust; - --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%); - --color-btn-@{name}-icon: @base; + #coloredButton(@name, @color, @flat) { + & when (@flat) { + --color-btn-@{name}-text: @color; + --color-btn-@{name}-bg: @base; + --color-btn-@{name}-icon: @color; + + --color-btn-@{name}-hover-text: @base; + --color-btn-@{name}-hover-bg: @color; + --color-btn-@{name}-hover-border: @color; + + --color-btn-@{name}-selected-text: @base; + --color-btn-@{name}-selected-bg: @color; + --color-btn-@{name}-selected-border: @color; + + --color-btn-@{name}-disabled-text: @text; + --color-btn-@{name}-disabled-bg: @curst; + } + + & when not (@flat) { + --color-btn-@{name}-text: @base; + --color-btn-@{name}-bg: @color; + --color-btn-@{name}-icon: @base; + + --color-btn-@{name}-hover-text: @base; + --color-btn-@{name}-hover-bg: lighten(@color, 10%); + --color-btn-@{name}-hover-border: lighten(@color, 10%); + + --color-btn-@{name}-selected-text: @base; + --color-btn-@{name}-selected-bg: lighten(@color, 10%); + --color-btn-@{name}-selected-border: lighten(@color, 10%); + + --color-btn-@{name}-disabled-text: @crust; + --color-btn-@{name}-disabled-bg: fadeout(@color, 60%); + } + + /* set these to transparent for the looks */ + --color-btn-@{name}-border: transparent; + --color-btn-@{name}-shadow: 0 0 transparent; + --color-btn-@{name}-inset-shadow: 0 0 transparent; + --color-btn-@{name}-selected-shadow: 0 0 transparent; + --color-btn-@{name}-disabled-border: transparent; } #catppuccin(@lookup, @accent) { @@ -234,8 +267,8 @@ --color-btn-active-bg: @surface2; --color-btn-selected-bg: @surface2; --color-btn-counter-bg: @surface2; - #coloredButton(primary, @green); - #coloredButton(danger, @red); + #coloredButton(primary, @green, false); + #coloredButton(danger, @red, true); --color-action-list-item-inline-divider: @surface2; --color-action-list-item-default-hover-bg: @surface0; --color-action-list-item-default-selected-bg: @surface1; @@ -265,6 +298,7 @@ --color-severe-fg: @maroon; --color-severe-emphasis: @maroon; --color-danger-fg: @red; + --color-danger-muted: fadeout(@red, 60%); --color-danger-emphasis: @red; --color-open-fg: @green; --color-open-emphasis: @green; @@ -314,18 +348,12 @@ --color-user-mention-fg: @accent-color; --color-user-mention-bg: @crust; --color-text-white: @text; - + // .AppHeader { // --AppHeader-bg: @base; // } - /* Buttons */ - .btn-danger, - .Button--danger { - background: var(--color-btn-danger-bg); - } - - /* Create PR button & New branch button & Fork repo button & Commit Changes button */ + /* New PR, new branch, fork repository, and commit changes buttons */ .iRoQzU, .ifkUYV, .bOZDzN, @@ -364,28 +392,6 @@ --text: @text; } - /* Labels */ - .Label { - color: var(--color-accent-fg); - background-color: @surface0; - border-color: transparent; - } - - .Label--secondary { - background-color: @surface0; - color: @text; - } - - .Label--success { - color: @base; - background-color: @green; - } - - .Label--danger { - background-color: var(--color-danger-emphasis); - color: var(--color-btn-danger-text); - } - /* Search */ .header-search-input { color: @text !important; @@ -414,11 +420,6 @@ color: @accent-color; } - /* Committer */ - .ftOYgF { - color: @text; - } - /* Misc */ .user-mention, .team-mention { From 4cfb3a90bf0ee92d0f7f1a9ba0d98cff7b5b2894 Mon Sep 17 00:00:00 2001 From: isabel Date: Wed, 22 Nov 2023 17:53:36 +0000 Subject: [PATCH 4/6] fix(github): typo --- styles/github/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index 46222c5ffe..f413673846 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -72,7 +72,7 @@ --color-btn-@{name}-selected-border: @color; --color-btn-@{name}-disabled-text: @text; - --color-btn-@{name}-disabled-bg: @curst; + --color-btn-@{name}-disabled-bg: @crust; } & when not (@flat) { From db58e4a9fa7d40da237caa62cf4b9bdf69a757c6 Mon Sep 17 00:00:00 2001 From: isabel Date: Wed, 22 Nov 2023 23:04:09 +0000 Subject: [PATCH 5/6] fix(github): additonal fixes --- styles/github/catppuccin.user.css | 40 +++++++++---------------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index f413673846..dd8111aa87 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -71,8 +71,8 @@ --color-btn-@{name}-selected-bg: @color; --color-btn-@{name}-selected-border: @color; - --color-btn-@{name}-disabled-text: @text; - --color-btn-@{name}-disabled-bg: @crust; + --color-btn-@{name}-disabled-text: fadeout(@color, 60%); + --color-btn-@{name}-disabled-bg: @mantle; } & when not (@flat) { @@ -147,7 +147,6 @@ --color-diff-blob-deletion-line-bg: fadeout(@red, 85%); --color-diff-blob-deletion-word-bg: fadeout(@red, 70%); --color-diff-blob-hunk-num-bg: fadeout(@blue, 60%); - --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; --color-diffstat-addition-bg: @green; --color-prettylights-syntax-comment: @overlay1; --color-prettylights-syntax-constant: @blue; @@ -173,7 +172,6 @@ --color-codemirror-bg: @base; --color-codemirror-gutters-bg: @base; --color-codemirror-guttermarker-text: @base; - --color-codemirror-guttermarker-subtle-text: #6e7681; --color-codemirror-lines-bg: @base; --color-checks-bg: @mantle; --color-checks-text-primary: @text; @@ -270,14 +268,14 @@ #coloredButton(primary, @green, false); #coloredButton(danger, @red, true); --color-action-list-item-inline-divider: @surface2; - --color-action-list-item-default-hover-bg: @surface0; + --color-action-list-item-default-hover-bg: @surface1; --color-action-list-item-default-selected-bg: @surface1; --color-fg-default: @text; --color-fg-muted: @subtext1; --color-fg-subtle: @subtext1; --color-fg-on-emphasis: @base; --color-canvas-default: @base; - --color-canvas-overlay: @mantle; + --color-canvas-overlay: @surface0; --color-canvas-inset: @mantle; // background --color-canvas-subtle: @surface0; --color-border-default: @surface1; @@ -287,6 +285,7 @@ --color-shadow-extra-large: 0 12px 48px @crust; --color-neutral-emphasis-plus: @overlay0; --color-neutral-emphasis: @overlay2; + --color-neutral-muted: fadeout(@overlay0, 60%); --color-accent-fg: @accent-color; --color-accent-emphasis: @accent-color; --color-accent-muted: fadeout(@accent-color, 60%); @@ -349,10 +348,6 @@ --color-user-mention-bg: @crust; --color-text-white: @text; - // .AppHeader { - // --AppHeader-bg: @base; - // } - /* New PR, new branch, fork repository, and commit changes buttons */ .iRoQzU, .ifkUYV, @@ -462,14 +457,14 @@ .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); - } + &:hover { + background-color: var(--color-btn-danger-hover-bg); + } - .btn.color-fg-danger.cursor-default > svg.octicon { - color: var(--color-btn-danger-text) !important; + & > svg.octicon { + color: var(--color-btn-danger-text) !important; + } } /* New change visibility box danger buttons Fix */ @@ -1061,8 +1056,6 @@ /* Tree Fix */ - /* Tree Fix */ - /* Weird barely visible outlines | Can be removed if intentional */ .brFBoI, .ldUAkr, @@ -1208,17 +1201,6 @@ } } - /* Dropdown Menus */ - .jfOCiu, - .gNXjVV, - .iGzDhH, - .Overlay { - background-color: @mantle; - border-color: @surface1; - border-radius: 6px; - box-shadow: var(--shadow-floating-large, var(--color-shadow-large)); - } - .jfOCiu li { color: @text; } From 0330cb8eff1255062c1c75cb0d7a689b37dfefe1 Mon Sep 17 00:00:00 2001 From: Isabel Date: Thu, 30 Nov 2023 20:59:49 +0000 Subject: [PATCH 6/6] chore(gh): update --- styles/github/catppuccin.user.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index dd8111aa87..f6ee505704 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -79,7 +79,7 @@ --color-btn-@{name}-text: @base; --color-btn-@{name}-bg: @color; --color-btn-@{name}-icon: @base; - + --color-btn-@{name}-hover-text: @base; --color-btn-@{name}-hover-bg: lighten(@color, 10%); --color-btn-@{name}-hover-border: lighten(@color, 10%); @@ -92,6 +92,8 @@ --color-btn-@{name}-disabled-bg: fadeout(@color, 60%); } + --color-btn-@{name}-hover-icon: @base; + /* set these to transparent for the looks */ --color-btn-@{name}-border: transparent; --color-btn-@{name}-shadow: 0 0 transparent;