From a0f6ad33987aefd24dd7df5e41894f97aed789c7 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 8 Mar 2021 21:51:42 +0800 Subject: [PATCH 01/87] fix: prevent class name polution --- src/styles/index.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 4f0588a..5f5786e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -145,10 +145,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- display: none; } -.invisible { - visibility: hidden; -} - @mixin flex-center { display: inline-flex; justify-content: center; From d1bde9d4f481b98fe27634dfb339d125c4a75ae5 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 9 Mar 2021 22:22:23 +0800 Subject: [PATCH 02/87] 2.7.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e3fecc6..586e505 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.7.1", + "version": "2.7.2", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From b499da755bbccc4f79428391c58f564b12a98aef Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 09:40:37 +0800 Subject: [PATCH 03/87] refactor: simplify scss --- src/styles/dark/export.scss | 579 ---------------- src/styles/dark/variables.scss | 1130 ++++++++++++++++--------------- src/styles/index.scss | 3 +- src/styles/light/export.scss | 568 ---------------- src/styles/light/variables.scss | 1130 ++++++++++++++++--------------- src/styles/themes.scss | 29 + 6 files changed, 1162 insertions(+), 2277 deletions(-) delete mode 100644 src/styles/dark/export.scss delete mode 100644 src/styles/light/export.scss create mode 100644 src/styles/themes.scss diff --git a/src/styles/dark/export.scss b/src/styles/dark/export.scss deleted file mode 100644 index f143168..0000000 --- a/src/styles/dark/export.scss +++ /dev/null @@ -1,579 +0,0 @@ -@use './variables.scss' as variables; - -@mixin assign { - --gitako-auto-black: #{variables.$auto-black}; - --gitako-auto-white: #{variables.$auto-white}; - --gitako-auto-gray-0: #{variables.$auto-gray-0}; - --gitako-auto-gray-1: #{variables.$auto-gray-1}; - --gitako-auto-gray-2: #{variables.$auto-gray-2}; - --gitako-auto-gray-3: #{variables.$auto-gray-3}; - --gitako-auto-gray-4: #{variables.$auto-gray-4}; - --gitako-auto-gray-5: #{variables.$auto-gray-5}; - --gitako-auto-gray-6: #{variables.$auto-gray-6}; - --gitako-auto-gray-7: #{variables.$auto-gray-7}; - --gitako-auto-gray-8: #{variables.$auto-gray-8}; - --gitako-auto-gray-9: #{variables.$auto-gray-9}; - --gitako-auto-blue-0: #{variables.$auto-blue-0}; - --gitako-auto-blue-1: #{variables.$auto-blue-1}; - --gitako-auto-blue-2: #{variables.$auto-blue-2}; - --gitako-auto-blue-3: #{variables.$auto-blue-3}; - --gitako-auto-blue-4: #{variables.$auto-blue-4}; - --gitako-auto-blue-5: #{variables.$auto-blue-5}; - --gitako-auto-blue-6: #{variables.$auto-blue-6}; - --gitako-auto-blue-7: #{variables.$auto-blue-7}; - --gitako-auto-blue-8: #{variables.$auto-blue-8}; - --gitako-auto-blue-9: #{variables.$auto-blue-9}; - --gitako-auto-green-0: #{variables.$auto-green-0}; - --gitako-auto-green-1: #{variables.$auto-green-1}; - --gitako-auto-green-2: #{variables.$auto-green-2}; - --gitako-auto-green-3: #{variables.$auto-green-3}; - --gitako-auto-green-4: #{variables.$auto-green-4}; - --gitako-auto-green-5: #{variables.$auto-green-5}; - --gitako-auto-green-6: #{variables.$auto-green-6}; - --gitako-auto-green-7: #{variables.$auto-green-7}; - --gitako-auto-green-8: #{variables.$auto-green-8}; - --gitako-auto-green-9: #{variables.$auto-green-9}; - --gitako-auto-yellow-0: #{variables.$auto-yellow-0}; - --gitako-auto-yellow-1: #{variables.$auto-yellow-1}; - --gitako-auto-yellow-2: #{variables.$auto-yellow-2}; - --gitako-auto-yellow-3: #{variables.$auto-yellow-3}; - --gitako-auto-yellow-4: #{variables.$auto-yellow-4}; - --gitako-auto-yellow-5: #{variables.$auto-yellow-5}; - --gitako-auto-yellow-6: #{variables.$auto-yellow-6}; - --gitako-auto-yellow-7: #{variables.$auto-yellow-7}; - --gitako-auto-yellow-8: #{variables.$auto-yellow-8}; - --gitako-auto-yellow-9: #{variables.$auto-yellow-9}; - --gitako-auto-orange-0: #{variables.$auto-orange-0}; - --gitako-auto-orange-1: #{variables.$auto-orange-1}; - --gitako-auto-orange-2: #{variables.$auto-orange-2}; - --gitako-auto-orange-3: #{variables.$auto-orange-3}; - --gitako-auto-orange-4: #{variables.$auto-orange-4}; - --gitako-auto-orange-5: #{variables.$auto-orange-5}; - --gitako-auto-orange-6: #{variables.$auto-orange-6}; - --gitako-auto-orange-7: #{variables.$auto-orange-7}; - --gitako-auto-orange-8: #{variables.$auto-orange-8}; - --gitako-auto-orange-9: #{variables.$auto-orange-9}; - --gitako-auto-red-0: #{variables.$auto-red-0}; - --gitako-auto-red-1: #{variables.$auto-red-1}; - --gitako-auto-red-2: #{variables.$auto-red-2}; - --gitako-auto-red-3: #{variables.$auto-red-3}; - --gitako-auto-red-4: #{variables.$auto-red-4}; - --gitako-auto-red-5: #{variables.$auto-red-5}; - --gitako-auto-red-6: #{variables.$auto-red-6}; - --gitako-auto-red-7: #{variables.$auto-red-7}; - --gitako-auto-red-8: #{variables.$auto-red-8}; - --gitako-auto-red-9: #{variables.$auto-red-9}; - --gitako-auto-purple-0: #{variables.$auto-purple-0}; - --gitako-auto-purple-1: #{variables.$auto-purple-1}; - --gitako-auto-purple-2: #{variables.$auto-purple-2}; - --gitako-auto-purple-3: #{variables.$auto-purple-3}; - --gitako-auto-purple-4: #{variables.$auto-purple-4}; - --gitako-auto-purple-5: #{variables.$auto-purple-5}; - --gitako-auto-purple-6: #{variables.$auto-purple-6}; - --gitako-auto-purple-7: #{variables.$auto-purple-7}; - --gitako-auto-purple-8: #{variables.$auto-purple-8}; - --gitako-auto-purple-9: #{variables.$auto-purple-9}; - --gitako-auto-pink-0: #{variables.$auto-pink-0}; - --gitako-auto-pink-1: #{variables.$auto-pink-1}; - --gitako-auto-pink-2: #{variables.$auto-pink-2}; - --gitako-auto-pink-3: #{variables.$auto-pink-3}; - --gitako-auto-pink-4: #{variables.$auto-pink-4}; - --gitako-auto-pink-5: #{variables.$auto-pink-5}; - --gitako-auto-pink-6: #{variables.$auto-pink-6}; - --gitako-auto-pink-7: #{variables.$auto-pink-7}; - --gitako-auto-pink-8: #{variables.$auto-pink-8}; - --gitako-auto-pink-9: #{variables.$auto-pink-9}; - --gitako-text-primary: #{variables.$text-primary}; - --gitako-text-secondary: #{variables.$text-secondary}; - --gitako-text-tertiary: #{variables.$text-tertiary}; - --gitako-text-placeholder: #{variables.$text-placeholder}; - --gitako-text-disabled: #{variables.$text-disabled}; - --gitako-text-inverse: #{variables.$text-inverse}; - --gitako-text-link: #{variables.$text-link}; - --gitako-text-danger: #{variables.$text-danger}; - --gitako-text-success: #{variables.$text-success}; - --gitako-text-warning: #{variables.$text-warning}; - --gitako-text-white: #{variables.$text-white}; - --gitako-icon-primary: #{variables.$icon-primary}; - --gitako-icon-secondary: #{variables.$icon-secondary}; - --gitako-icon-tertiary: #{variables.$icon-tertiary}; - --gitako-icon-info: #{variables.$icon-info}; - --gitako-icon-danger: #{variables.$icon-danger}; - --gitako-icon-success: #{variables.$icon-success}; - --gitako-icon-warning: #{variables.$icon-warning}; - --gitako-border-primary: #{variables.$border-primary}; - --gitako-border-secondary: #{variables.$border-secondary}; - --gitako-border-tertiary: #{variables.$border-tertiary}; - --gitako-border-overlay: #{variables.$border-overlay}; - --gitako-border-inverse: #{variables.$border-inverse}; - --gitako-border-info: #{variables.$border-info}; - --gitako-border-danger: #{variables.$border-danger}; - --gitako-border-success: #{variables.$border-success}; - --gitako-border-warning: #{variables.$border-warning}; - --gitako-bg-canvas: #{variables.$bg-canvas}; - --gitako-bg-canvas-mobile: #{variables.$bg-canvas-mobile}; - --gitako-bg-canvas-inverse: #{variables.$bg-canvas-inverse}; - --gitako-bg-canvas-inset: #{variables.$bg-canvas-inset}; - --gitako-bg-primary: #{variables.$bg-primary}; - --gitako-bg-secondary: #{variables.$bg-secondary}; - --gitako-bg-tertiary: #{variables.$bg-tertiary}; - --gitako-bg-overlay: #{variables.$bg-overlay}; - --gitako-bg-backdrop: #{variables.$bg-backdrop}; - --gitako-bg-info: #{variables.$bg-info}; - --gitako-bg-info-inverse: #{variables.$bg-info-inverse}; - --gitako-bg-danger: #{variables.$bg-danger}; - --gitako-bg-danger-inverse: #{variables.$bg-danger-inverse}; - --gitako-bg-success: #{variables.$bg-success}; - --gitako-bg-success-inverse: #{variables.$bg-success-inverse}; - --gitako-bg-warning: #{variables.$bg-warning}; - --gitako-bg-warning-inverse: #{variables.$bg-warning-inverse}; - --gitako-shadow-small: #{variables.$shadow-small}; - --gitako-shadow-medium: #{variables.$shadow-medium}; - --gitako-shadow-large: #{variables.$shadow-large}; - --gitako-shadow-extra-large: #{variables.$shadow-extra-large}; - --gitako-shadow-highlight: #{variables.$shadow-highlight}; - --gitako-shadow-inset: #{variables.$shadow-inset}; - --gitako-state-hover-primary-bg: #{variables.$state-hover-primary-bg}; - --gitako-state-hover-primary-border: #{variables.$state-hover-primary-border}; - --gitako-state-hover-primary-text: #{variables.$state-hover-primary-text}; - --gitako-state-hover-primary-icon: #{variables.$state-hover-primary-icon}; - --gitako-state-hover-secondary-bg: #{variables.$state-hover-secondary-bg}; - --gitako-state-hover-secondary-border: #{variables.$state-hover-secondary-border}; - --gitako-state-selected-primary-bg: #{variables.$state-selected-primary-bg}; - --gitako-state-selected-primary-border: #{variables.$state-selected-primary-border}; - --gitako-state-selected-primary-text: #{variables.$state-selected-primary-text}; - --gitako-state-selected-primary-icon: #{variables.$state-selected-primary-icon}; - --gitako-state-focus-border: #{variables.$state-focus-border}; - --gitako-state-focus-shadow: #{variables.$state-focus-shadow}; - --gitako-fade-fg-10: #{variables.$fade-fg-10}; - --gitako-fade-fg-15: #{variables.$fade-fg-15}; - --gitako-fade-fg-30: #{variables.$fade-fg-30}; - --gitako-fade-fg-50: #{variables.$fade-fg-50}; - --gitako-fade-fg-70: #{variables.$fade-fg-70}; - --gitako-fade-fg-85: #{variables.$fade-fg-85}; - --gitako-fade-black-10: #{variables.$fade-black-10}; - --gitako-fade-black-15: #{variables.$fade-black-15}; - --gitako-fade-black-30: #{variables.$fade-black-30}; - --gitako-fade-black-50: #{variables.$fade-black-50}; - --gitako-fade-black-70: #{variables.$fade-black-70}; - --gitako-fade-black-85: #{variables.$fade-black-85}; - --gitako-fade-white-10: #{variables.$fade-white-10}; - --gitako-fade-white-15: #{variables.$fade-white-15}; - --gitako-fade-white-30: #{variables.$fade-white-30}; - --gitako-fade-white-50: #{variables.$fade-white-50}; - --gitako-fade-white-70: #{variables.$fade-white-70}; - --gitako-fade-white-85: #{variables.$fade-white-85}; - --gitako-alert-info-text: #{variables.$alert-info-text}; - --gitako-alert-info-icon: #{variables.$alert-info-icon}; - --gitako-alert-info-bg: #{variables.$alert-info-bg}; - --gitako-alert-info-border: #{variables.$alert-info-border}; - --gitako-alert-warn-text: #{variables.$alert-warn-text}; - --gitako-alert-warn-icon: #{variables.$alert-warn-icon}; - --gitako-alert-warn-bg: #{variables.$alert-warn-bg}; - --gitako-alert-warn-border: #{variables.$alert-warn-border}; - --gitako-alert-error-text: #{variables.$alert-error-text}; - --gitako-alert-error-icon: #{variables.$alert-error-icon}; - --gitako-alert-error-bg: #{variables.$alert-error-bg}; - --gitako-alert-error-border: #{variables.$alert-error-border}; - --gitako-alert-success-text: #{variables.$alert-success-text}; - --gitako-alert-success-icon: #{variables.$alert-success-icon}; - --gitako-alert-success-bg: #{variables.$alert-success-bg}; - --gitako-alert-success-border: #{variables.$alert-success-border}; - --gitako-autocomplete-shadow: #{variables.$autocomplete-shadow}; - --gitako-autocomplete-row-border: #{variables.$autocomplete-row-border}; - --gitako-blankslate-icon: #{variables.$blankslate-icon}; - --gitako-btn-text: #{variables.$btn-text}; - --gitako-btn-bg: #{variables.$btn-bg}; - --gitako-btn-border: #{variables.$btn-border}; - --gitako-btn-shadow: #{variables.$btn-shadow}; - --gitako-btn-inset-shadow: #{variables.$btn-inset-shadow}; - --gitako-btn-hover-bg: #{variables.$btn-hover-bg}; - --gitako-btn-hover-border: #{variables.$btn-hover-border}; - --gitako-btn-selected-bg: #{variables.$btn-selected-bg}; - --gitako-btn-focus-bg: #{variables.$btn-focus-bg}; - --gitako-btn-focus-border: #{variables.$btn-focus-border}; - --gitako-btn-focus-shadow: #{variables.$btn-focus-shadow}; - --gitako-btn-shadow-active: #{variables.$btn-shadow-active}; - --gitako-btn-shadow-input-focus: #{variables.$btn-shadow-input-focus}; - --gitako-btn-primary-text: #{variables.$btn-primary-text}; - --gitako-btn-primary-bg: #{variables.$btn-primary-bg}; - --gitako-btn-primary-border: #{variables.$btn-primary-border}; - --gitako-btn-primary-shadow: #{variables.$btn-primary-shadow}; - --gitako-btn-primary-inset-shadow: #{variables.$btn-primary-inset-shadow}; - --gitako-btn-primary-hover-bg: #{variables.$btn-primary-hover-bg}; - --gitako-btn-primary-hover-border: #{variables.$btn-primary-hover-border}; - --gitako-btn-primary-selected-bg: #{variables.$btn-primary-selected-bg}; - --gitako-btn-primary-selected-shadow: #{variables.$btn-primary-selected-shadow}; - --gitako-btn-primary-disabled-text: #{variables.$btn-primary-disabled-text}; - --gitako-btn-primary-disabled-bg: #{variables.$btn-primary-disabled-bg}; - --gitako-btn-primary-disabled-border: #{variables.$btn-primary-disabled-border}; - --gitako-btn-primary-focus-bg: #{variables.$btn-primary-focus-bg}; - --gitako-btn-primary-focus-border: #{variables.$btn-primary-focus-border}; - --gitako-btn-primary-focus-shadow: #{variables.$btn-primary-focus-shadow}; - --gitako-btn-primary-icon: #{variables.$btn-primary-icon}; - --gitako-btn-primary-counter-bg: #{variables.$btn-primary-counter-bg}; - --gitako-btn-outline-text: #{variables.$btn-outline-text}; - --gitako-btn-outline-hover-text: #{variables.$btn-outline-hover-text}; - --gitako-btn-outline-hover-bg: #{variables.$btn-outline-hover-bg}; - --gitako-btn-outline-hover-border: #{variables.$btn-outline-hover-border}; - --gitako-btn-outline-hover-shadow: #{variables.$btn-outline-hover-shadow}; - --gitako-btn-outline-hover-inset-shadow: #{variables.$btn-outline-hover-inset-shadow}; - --gitako-btn-outline-hover-counter-bg: #{variables.$btn-outline-hover-counter-bg}; - --gitako-btn-outline-selected-text: #{variables.$btn-outline-selected-text}; - --gitako-btn-outline-selected-bg: #{variables.$btn-outline-selected-bg}; - --gitako-btn-outline-selected-border: #{variables.$btn-outline-selected-border}; - --gitako-btn-outline-selected-shadow: #{variables.$btn-outline-selected-shadow}; - --gitako-btn-outline-disabled-text: #{variables.$btn-outline-disabled-text}; - --gitako-btn-outline-disabled-bg: #{variables.$btn-outline-disabled-bg}; - --gitako-btn-outline-disabled-counter-bg: #{variables.$btn-outline-disabled-counter-bg}; - --gitako-btn-outline-focus-border: #{variables.$btn-outline-focus-border}; - --gitako-btn-outline-focus-shadow: #{variables.$btn-outline-focus-shadow}; - --gitako-btn-outline-counter-bg: #{variables.$btn-outline-counter-bg}; - --gitako-btn-danger-text: #{variables.$btn-danger-text}; - --gitako-btn-danger-hover-text: #{variables.$btn-danger-hover-text}; - --gitako-btn-danger-hover-bg: #{variables.$btn-danger-hover-bg}; - --gitako-btn-danger-hover-border: #{variables.$btn-danger-hover-border}; - --gitako-btn-danger-hover-shadow: #{variables.$btn-danger-hover-shadow}; - --gitako-btn-danger-hover-inset-shadow: #{variables.$btn-danger-hover-inset-shadow}; - --gitako-btn-danger-hover-counter-bg: #{variables.$btn-danger-hover-counter-bg}; - --gitako-btn-danger-selected-text: #{variables.$btn-danger-selected-text}; - --gitako-btn-danger-selected-bg: #{variables.$btn-danger-selected-bg}; - --gitako-btn-danger-selected-border: #{variables.$btn-danger-selected-border}; - --gitako-btn-danger-selected-shadow: #{variables.$btn-danger-selected-shadow}; - --gitako-btn-danger-disabled-text: #{variables.$btn-danger-disabled-text}; - --gitako-btn-danger-disabled-bg: #{variables.$btn-danger-disabled-bg}; - --gitako-btn-danger-disabled-counter-bg: #{variables.$btn-danger-disabled-counter-bg}; - --gitako-btn-danger-focus-border: #{variables.$btn-danger-focus-border}; - --gitako-btn-danger-focus-shadow: #{variables.$btn-danger-focus-shadow}; - --gitako-btn-danger-counter-bg: #{variables.$btn-danger-counter-bg}; - --gitako-btn-counter-bg: #{variables.$btn-counter-bg}; - --gitako-counter-text: #{variables.$counter-text}; - --gitako-counter-bg: #{variables.$counter-bg}; - --gitako-counter-primary-text: #{variables.$counter-primary-text}; - --gitako-counter-primary-bg: #{variables.$counter-primary-bg}; - --gitako-counter-secondary-text: #{variables.$counter-secondary-text}; - --gitako-dropdown-shadow: #{variables.$dropdown-shadow}; - --gitako-label-border: #{variables.$label-border}; - --gitako-label-primary-text: #{variables.$label-primary-text}; - --gitako-label-primary-border: #{variables.$label-primary-border}; - --gitako-label-secondary-text: #{variables.$label-secondary-text}; - --gitako-label-secondary-border: #{variables.$label-secondary-border}; - --gitako-label-info-text: #{variables.$label-info-text}; - --gitako-label-info-border: #{variables.$label-info-border}; - --gitako-label-success-text: #{variables.$label-success-text}; - --gitako-label-success-border: #{variables.$label-success-border}; - --gitako-label-warning-text: #{variables.$label-warning-text}; - --gitako-label-warning-border: #{variables.$label-warning-border}; - --gitako-label-danger-text: #{variables.$label-danger-text}; - --gitako-label-danger-border: #{variables.$label-danger-border}; - --gitako-label-orange-text: #{variables.$label-orange-text}; - --gitako-label-orange-border: #{variables.$label-orange-border}; - --gitako-input-bg: #{variables.$input-bg}; - --gitako-input-contrast-bg: #{variables.$input-contrast-bg}; - --gitako-input-border: #{variables.$input-border}; - --gitako-input-shadow: #{variables.$input-shadow}; - --gitako-input-disabled-bg: #{variables.$input-disabled-bg}; - --gitako-input-disabled-border: #{variables.$input-disabled-border}; - --gitako-input-warning-border: #{variables.$input-warning-border}; - --gitako-input-error-border: #{variables.$input-error-border}; - --gitako-input-tooltip-success-text: #{variables.$input-tooltip-success-text}; - --gitako-input-tooltip-success-bg: #{variables.$input-tooltip-success-bg}; - --gitako-input-tooltip-success-border: #{variables.$input-tooltip-success-border}; - --gitako-input-tooltip-warning-text: #{variables.$input-tooltip-warning-text}; - --gitako-input-tooltip-warning-bg: #{variables.$input-tooltip-warning-bg}; - --gitako-input-tooltip-warning-border: #{variables.$input-tooltip-warning-border}; - --gitako-input-tooltip-error-text: #{variables.$input-tooltip-error-text}; - --gitako-input-tooltip-error-bg: #{variables.$input-tooltip-error-bg}; - --gitako-input-tooltip-error-border: #{variables.$input-tooltip-error-border}; - --gitako-avatar-bg: #{variables.$avatar-bg}; - --gitako-avatar-border: #{variables.$avatar-border}; - --gitako-avatar-stack-fade: #{variables.$avatar-stack-fade}; - --gitako-avatar-stack-fade-more: #{variables.$avatar-stack-fade-more}; - --gitako-avatar-child-shadow: #{variables.$avatar-child-shadow}; - --gitako-toast-text: #{variables.$toast-text}; - --gitako-toast-bg: #{variables.$toast-bg}; - --gitako-toast-border: #{variables.$toast-border}; - --gitako-toast-shadow: #{variables.$toast-shadow}; - --gitako-toast-icon: #{variables.$toast-icon}; - --gitako-toast-icon-bg: #{variables.$toast-icon-bg}; - --gitako-toast-icon-border: #{variables.$toast-icon-border}; - --gitako-toast-success-text: #{variables.$toast-success-text}; - --gitako-toast-success-border: #{variables.$toast-success-border}; - --gitako-toast-success-icon: #{variables.$toast-success-icon}; - --gitako-toast-success-icon-bg: #{variables.$toast-success-icon-bg}; - --gitako-toast-success-icon-border: #{variables.$toast-success-icon-border}; - --gitako-toast-warning-text: #{variables.$toast-warning-text}; - --gitako-toast-warning-border: #{variables.$toast-warning-border}; - --gitako-toast-warning-icon: #{variables.$toast-warning-icon}; - --gitako-toast-warning-icon-bg: #{variables.$toast-warning-icon-bg}; - --gitako-toast-warning-icon-border: #{variables.$toast-warning-icon-border}; - --gitako-toast-danger-text: #{variables.$toast-danger-text}; - --gitako-toast-danger-border: #{variables.$toast-danger-border}; - --gitako-toast-danger-icon: #{variables.$toast-danger-icon}; - --gitako-toast-danger-icon-bg: #{variables.$toast-danger-icon-bg}; - --gitako-toast-danger-icon-border: #{variables.$toast-danger-icon-border}; - --gitako-toast-loading-text: #{variables.$toast-loading-text}; - --gitako-toast-loading-border: #{variables.$toast-loading-border}; - --gitako-toast-loading-icon: #{variables.$toast-loading-icon}; - --gitako-toast-loading-icon-bg: #{variables.$toast-loading-icon-bg}; - --gitako-toast-loading-icon-border: #{variables.$toast-loading-icon-border}; - --gitako-timeline-text: #{variables.$timeline-text}; - --gitako-timeline-badge-bg: #{variables.$timeline-badge-bg}; - --gitako-timeline-target-badge-border: #{variables.$timeline-target-badge-border}; - --gitako-timeline-target-badge-shadow: #{variables.$timeline-target-badge-shadow}; - --gitako-select-menu-border-secondary: #{variables.$select-menu-border-secondary}; - --gitako-select-menu-shadow: #{variables.$select-menu-shadow}; - --gitako-select-menu-backdrop-bg: #{variables.$select-menu-backdrop-bg}; - --gitako-select-menu-backdrop-border: #{variables.$select-menu-backdrop-border}; - --gitako-select-menu-tap-highlight: #{variables.$select-menu-tap-highlight}; - --gitako-select-menu-tap-focus-bg: #{variables.$select-menu-tap-focus-bg}; - --gitako-box-blue-border: #{variables.$box-blue-border}; - --gitako-box-row-yellow-bg: #{variables.$box-row-yellow-bg}; - --gitako-box-row-blue-bg: #{variables.$box-row-blue-bg}; - --gitako-box-header-blue-bg: #{variables.$box-header-blue-bg}; - --gitako-box-header-blue-border: #{variables.$box-header-blue-border}; - --gitako-box-border-info: #{variables.$box-border-info}; - --gitako-box-bg-info: #{variables.$box-bg-info}; - --gitako-box-border-warning: #{variables.$box-border-warning}; - --gitako-box-bg-warning: #{variables.$box-bg-warning}; - --gitako-branch-name-text: #{variables.$branch-name-text}; - --gitako-branch-name-icon: #{variables.$branch-name-icon}; - --gitako-branch-name-bg: #{variables.$branch-name-bg}; - --gitako-branch-name-link-text: #{variables.$branch-name-link-text}; - --gitako-branch-name-link-icon: #{variables.$branch-name-link-icon}; - --gitako-branch-name-link-bg: #{variables.$branch-name-link-bg}; - --gitako-markdown-code-bg: #{variables.$markdown-code-bg}; - --gitako-markdown-frame-border: #{variables.$markdown-frame-border}; - --gitako-markdown-blockquote-border: #{variables.$markdown-blockquote-border}; - --gitako-markdown-table-border: #{variables.$markdown-table-border}; - --gitako-markdown-table-tr-border: #{variables.$markdown-table-tr-border}; - --gitako-menu-heading-text: #{variables.$menu-heading-text}; - --gitako-menu-border-active: #{variables.$menu-border-active}; - --gitako-menu-bg-active: #{variables.$menu-bg-active}; - --gitako-sidenav-selected-bg: #{variables.$sidenav-selected-bg}; - --gitako-sidenav-border-active: #{variables.$sidenav-border-active}; - --gitako-header-text: #{variables.$header-text}; - --gitako-header-bg: #{variables.$header-bg}; - --gitako-header-logo: #{variables.$header-logo}; - --gitako-filter-item-bar-bg: #{variables.$filter-item-bar-bg}; - --gitako-hidden-text-expander-bg: #{variables.$hidden-text-expander-bg}; - --gitako-hidden-text-expander-bg-hover: #{variables.$hidden-text-expander-bg-hover}; - --gitako-drag-and-drop-border: #{variables.$drag-and-drop-border}; - --gitako-upload-enabled-border: #{variables.$upload-enabled-border}; - --gitako-upload-enabled-border-focused: #{variables.$upload-enabled-border-focused}; - --gitako-previewable-comment-form-border: #{variables.$previewable-comment-form-border}; - --gitako-underlinenav-border: #{variables.$underlinenav-border}; - --gitako-underlinenav-border-hover: #{variables.$underlinenav-border-hover}; - --gitako-underlinenav-border-active: #{variables.$underlinenav-border-active}; - --gitako-underlinenav-text: #{variables.$underlinenav-text}; - --gitako-underlinenav-text-hover: #{variables.$underlinenav-text-hover}; - --gitako-underlinenav-text-active: #{variables.$underlinenav-text-active}; - --gitako-underlinenav-icon: #{variables.$underlinenav-icon}; - --gitako-underlinenav-icon-hover: #{variables.$underlinenav-icon-hover}; - --gitako-underlinenav-icon-active: #{variables.$underlinenav-icon-active}; - --gitako-underlinenav-counter-text: #{variables.$underlinenav-counter-text}; - --gitako-verified-badge-text: #{variables.$verified-badge-text}; - --gitako-verified-badge-bg: #{variables.$verified-badge-bg}; - --gitako-verified-badge-border: #{variables.$verified-badge-border}; - --gitako-social-count-bg: #{variables.$social-count-bg}; - --gitako-tooltip-text: #{variables.$tooltip-text}; - --gitako-tooltip-bg: #{variables.$tooltip-bg}; - --gitako-header-search-bg: #{variables.$header-search-bg}; - --gitako-header-search-border: #{variables.$header-search-border}; - --gitako-search-keyword-hl: #{variables.$search-keyword-hl}; - --gitako-diffstat-neutral-bg: #{variables.$diffstat-neutral-bg}; - --gitako-diffstat-neutral-border: #{variables.$diffstat-neutral-border}; - --gitako-diffstat-deletion-bg: #{variables.$diffstat-deletion-bg}; - --gitako-diffstat-deletion-border: #{variables.$diffstat-deletion-border}; - --gitako-diffstat-addition-bg: #{variables.$diffstat-addition-bg}; - --gitako-diffstat-addition-border: #{variables.$diffstat-addition-border}; - --gitako-files-explorer-icon: #{variables.$files-explorer-icon}; - --gitako-hl-author-bg: #{variables.$hl-author-bg}; - --gitako-hl-author-border: #{variables.$hl-author-border}; - --gitako-logo-subdued: #{variables.$logo-subdued}; - --gitako-discussion-border: #{variables.$discussion-border}; - --gitako-discussion-bg-success: #{variables.$discussion-bg-success}; - --gitako-actions-workflow-table-sticky-bg: #{variables.$actions-workflow-table-sticky-bg}; - --gitako-repo-language-color-border: #{variables.$repo-language-color-border}; - --gitako-code-selection-bg: #{variables.$code-selection-bg}; - --gitako-blob-line-highlight-bg: #{variables.$blob-line-highlight-bg}; - --gitako-blob-line-highlight-border: #{variables.$blob-line-highlight-border}; - --gitako-diff-addition-text: #{variables.$diff-addition-text}; - --gitako-diff-addition-bg: #{variables.$diff-addition-bg}; - --gitako-diff-addition-border: #{variables.$diff-addition-border}; - --gitako-diff-deletion-text: #{variables.$diff-deletion-text}; - --gitako-diff-deletion-bg: #{variables.$diff-deletion-bg}; - --gitako-diff-deletion-border: #{variables.$diff-deletion-border}; - --gitako-diff-change-text: #{variables.$diff-change-text}; - --gitako-diff-change-bg: #{variables.$diff-change-bg}; - --gitako-diff-change-border: #{variables.$diff-change-border}; - --gitako-diff-blob-num-text: #{variables.$diff-blob-num-text}; - --gitako-diff-blob-num-hover-text: #{variables.$diff-blob-num-hover-text}; - --gitako-diff-blob-addition-num-text: #{variables.$diff-blob-addition-num-text}; - --gitako-diff-blob-addition-num-hover-text: #{variables.$diff-blob-addition-num-hover-text}; - --gitako-diff-blob-addition-num-bg: #{variables.$diff-blob-addition-num-bg}; - --gitako-diff-blob-addition-line-bg: #{variables.$diff-blob-addition-line-bg}; - --gitako-diff-blob-addition-word-bg: #{variables.$diff-blob-addition-word-bg}; - --gitako-diff-blob-deletion-num-text: #{variables.$diff-blob-deletion-num-text}; - --gitako-diff-blob-deletion-num-hover-text: #{variables.$diff-blob-deletion-num-hover-text}; - --gitako-diff-blob-deletion-num-bg: #{variables.$diff-blob-deletion-num-bg}; - --gitako-diff-blob-deletion-line-bg: #{variables.$diff-blob-deletion-line-bg}; - --gitako-diff-blob-deletion-word-bg: #{variables.$diff-blob-deletion-word-bg}; - --gitako-diff-blob-hunk-text: #{variables.$diff-blob-hunk-text}; - --gitako-diff-blob-hunk-num-bg: #{variables.$diff-blob-hunk-num-bg}; - --gitako-diff-blob-hunk-line-bg: #{variables.$diff-blob-hunk-line-bg}; - --gitako-diff-blob-empty-block-bg: #{variables.$diff-blob-empty-block-bg}; - --gitako-diff-blob-selected-line-highlight-bg: #{variables.$diff-blob-selected-line-highlight-bg}; - --gitako-diff-blob-selected-line-highlight-border: #{variables.$diff-blob-selected-line-highlight-border}; - --gitako-diff-blob-selected-line-highlight-mix-blend-mode: #{variables.$diff-blob-selected-line-highlight-mix-blend-mode}; - --gitako-diff-blob-expander-icon: #{variables.$diff-blob-expander-icon}; - --gitako-diff-blob-expander-hover-icon: #{variables.$diff-blob-expander-hover-icon}; - --gitako-diff-blob-expander-hover-bg: #{variables.$diff-blob-expander-hover-bg}; - --gitako-diff-blob-comment-button-icon: #{variables.$diff-blob-comment-button-icon}; - --gitako-diff-blob-comment-button-bg: #{variables.$diff-blob-comment-button-bg}; - --gitako-diff-blob-comment-button-gradient-bg: #{variables.$diff-blob-comment-button-gradient-bg}; - --gitako-global-nav-logo: #{variables.$global-nav-logo}; - --gitako-global-nav-bg: #{variables.$global-nav-bg}; - --gitako-global-nav-text: #{variables.$global-nav-text}; - --gitako-global-nav-icon: #{variables.$global-nav-icon}; - --gitako-global-nav-input-bg: #{variables.$global-nav-input-bg}; - --gitako-global-nav-input-border: #{variables.$global-nav-input-border}; - --gitako-global-nav-input-icon: #{variables.$global-nav-input-icon}; - --gitako-global-nav-input-placeholder: #{variables.$global-nav-input-placeholder}; - --gitako-calendar-graph-day-bg: #{variables.$calendar-graph-day-bg}; - --gitako-calendar-graph-day-border: #{variables.$calendar-graph-day-border}; - --gitako-calendar-graph-day-l1-bg: #{variables.$calendar-graph-day-l1-bg}; - --gitako-calendar-graph-day-l2-bg: #{variables.$calendar-graph-day-l2-bg}; - --gitako-calendar-graph-day-l3-bg: #{variables.$calendar-graph-day-l3-bg}; - --gitako-calendar-graph-day-l4-bg: #{variables.$calendar-graph-day-l4-bg}; - --gitako-calendar-graph-day-l4-border: #{variables.$calendar-graph-day-l4-border}; - --gitako-calendar-graph-day-l3-border: #{variables.$calendar-graph-day-l3-border}; - --gitako-calendar-graph-day-l2-border: #{variables.$calendar-graph-day-l2-border}; - --gitako-calendar-graph-day-l1-border: #{variables.$calendar-graph-day-l1-border}; - --gitako-footer-invertocat-octicon: #{variables.$footer-invertocat-octicon}; - --gitako-footer-invertocat-octicon-hover: #{variables.$footer-invertocat-octicon-hover}; - --gitako-pr-state-draft-text: #{variables.$pr-state-draft-text}; - --gitako-pr-state-draft-bg: #{variables.$pr-state-draft-bg}; - --gitako-pr-state-draft-border: #{variables.$pr-state-draft-border}; - --gitako-pr-state-open-text: #{variables.$pr-state-open-text}; - --gitako-pr-state-open-bg: #{variables.$pr-state-open-bg}; - --gitako-pr-state-open-border: #{variables.$pr-state-open-border}; - --gitako-pr-state-merged-text: #{variables.$pr-state-merged-text}; - --gitako-pr-state-merged-bg: #{variables.$pr-state-merged-bg}; - --gitako-pr-state-merged-border: #{variables.$pr-state-merged-border}; - --gitako-pr-state-closed-text: #{variables.$pr-state-closed-text}; - --gitako-pr-state-closed-bg: #{variables.$pr-state-closed-bg}; - --gitako-pr-state-closed-border: #{variables.$pr-state-closed-border}; - --gitako-topic-tag-text: #{variables.$topic-tag-text}; - --gitako-topic-tag-bg: #{variables.$topic-tag-bg}; - --gitako-topic-tag-hover-bg: #{variables.$topic-tag-hover-bg}; - --gitako-topic-tag-active-bg: #{variables.$topic-tag-active-bg}; - --gitako-merge-box-success-icon-bg: #{variables.$merge-box-success-icon-bg}; - --gitako-merge-box-success-icon-text: #{variables.$merge-box-success-icon-text}; - --gitako-merge-box-success-icon-border: #{variables.$merge-box-success-icon-border}; - --gitako-merge-box-success-indicator-bg: #{variables.$merge-box-success-indicator-bg}; - --gitako-merge-box-success-indicator-border: #{variables.$merge-box-success-indicator-border}; - --gitako-merge-box-merged-icon-bg: #{variables.$merge-box-merged-icon-bg}; - --gitako-merge-box-merged-icon-text: #{variables.$merge-box-merged-icon-text}; - --gitako-merge-box-merged-icon-border: #{variables.$merge-box-merged-icon-border}; - --gitako-merge-box-merged-box-border: #{variables.$merge-box-merged-box-border}; - --gitako-merge-box-neutral-icon-bg: #{variables.$merge-box-neutral-icon-bg}; - --gitako-merge-box-neutral-icon-text: #{variables.$merge-box-neutral-icon-text}; - --gitako-merge-box-neutral-icon-border: #{variables.$merge-box-neutral-icon-border}; - --gitako-merge-box-neutral-indicator-bg: #{variables.$merge-box-neutral-indicator-bg}; - --gitako-merge-box-neutral-indicator-border: #{variables.$merge-box-neutral-indicator-border}; - --gitako-merge-box-warning-icon-bg: #{variables.$merge-box-warning-icon-bg}; - --gitako-merge-box-warning-icon-text: #{variables.$merge-box-warning-icon-text}; - --gitako-merge-box-warning-icon-border: #{variables.$merge-box-warning-icon-border}; - --gitako-merge-box-warning-box-border: #{variables.$merge-box-warning-box-border}; - --gitako-merge-box-warning-merge-highlight: #{variables.$merge-box-warning-merge-highlight}; - --gitako-merge-box-error-icon-bg: #{variables.$merge-box-error-icon-bg}; - --gitako-merge-box-error-icon-text: #{variables.$merge-box-error-icon-text}; - --gitako-merge-box-error-icon-border: #{variables.$merge-box-error-icon-border}; - --gitako-merge-box-error-indicator-bg: #{variables.$merge-box-error-indicator-bg}; - --gitako-merge-box-error-indicator-border: #{variables.$merge-box-error-indicator-border}; - --gitako-project-card-bg: #{variables.$project-card-bg}; - --gitako-project-header-bg: #{variables.$project-header-bg}; - --gitako-project-sidebar-bg: #{variables.$project-sidebar-bg}; - --gitako-project-gradient-in: #{variables.$project-gradient-in}; - --gitako-project-gradient-out: #{variables.$project-gradient-out}; - --gitako-marketing-icon-primary: #{variables.$marketing-icon-primary}; - --gitako-marketing-icon-secondary: #{variables.$marketing-icon-secondary}; - --gitako-prettylights-syntax-comment: #{variables.$prettylights-syntax-comment}; - --gitako-prettylights-syntax-constant: #{variables.$prettylights-syntax-constant}; - --gitako-prettylights-syntax-entity: #{variables.$prettylights-syntax-entity}; - --gitako-prettylights-syntax-storage-modifier-import: #{variables.$prettylights-syntax-storage-modifier-import}; - --gitako-prettylights-syntax-entity-tag: #{variables.$prettylights-syntax-entity-tag}; - --gitako-prettylights-syntax-keyword: #{variables.$prettylights-syntax-keyword}; - --gitako-prettylights-syntax-string: #{variables.$prettylights-syntax-string}; - --gitako-prettylights-syntax-variable: #{variables.$prettylights-syntax-variable}; - --gitako-prettylights-syntax-brackethighlighter-unmatched: #{variables.$prettylights-syntax-brackethighlighter-unmatched}; - --gitako-prettylights-syntax-invalid-illegal-text: #{variables.$prettylights-syntax-invalid-illegal-text}; - --gitako-prettylights-syntax-invalid-illegal-bg: #{variables.$prettylights-syntax-invalid-illegal-bg}; - --gitako-prettylights-syntax-carriage-return-text: #{variables.$prettylights-syntax-carriage-return-text}; - --gitako-prettylights-syntax-carriage-return-bg: #{variables.$prettylights-syntax-carriage-return-bg}; - --gitako-prettylights-syntax-string-regexp: #{variables.$prettylights-syntax-string-regexp}; - --gitako-prettylights-syntax-markup-list: #{variables.$prettylights-syntax-markup-list}; - --gitako-prettylights-syntax-markup-heading: #{variables.$prettylights-syntax-markup-heading}; - --gitako-prettylights-syntax-markup-italic: #{variables.$prettylights-syntax-markup-italic}; - --gitako-prettylights-syntax-markup-bold: #{variables.$prettylights-syntax-markup-bold}; - --gitako-prettylights-syntax-markup-deleted-text: #{variables.$prettylights-syntax-markup-deleted-text}; - --gitako-prettylights-syntax-markup-deleted-bg: #{variables.$prettylights-syntax-markup-deleted-bg}; - --gitako-prettylights-syntax-markup-inserted-text: #{variables.$prettylights-syntax-markup-inserted-text}; - --gitako-prettylights-syntax-markup-inserted-bg: #{variables.$prettylights-syntax-markup-inserted-bg}; - --gitako-prettylights-syntax-markup-changed-text: #{variables.$prettylights-syntax-markup-changed-text}; - --gitako-prettylights-syntax-markup-changed-bg: #{variables.$prettylights-syntax-markup-changed-bg}; - --gitako-prettylights-syntax-markup-ignored-text: #{variables.$prettylights-syntax-markup-ignored-text}; - --gitako-prettylights-syntax-markup-ignored-bg: #{variables.$prettylights-syntax-markup-ignored-bg}; - --gitako-prettylights-syntax-meta-diff-range: #{variables.$prettylights-syntax-meta-diff-range}; - --gitako-prettylights-syntax-brackethighlighter-angle: #{variables.$prettylights-syntax-brackethighlighter-angle}; - --gitako-prettylights-syntax-sublimelinter-gutter-mark: #{variables.$prettylights-syntax-sublimelinter-gutter-mark}; - --gitako-prettylights-syntax-constant-other-reference-link: #{variables.$prettylights-syntax-constant-other-reference-link}; - --gitako-codemirror-text: #{variables.$codemirror-text}; - --gitako-codemirror-bg: #{variables.$codemirror-bg}; - --gitako-codemirror-gutters-bg: #{variables.$codemirror-gutters-bg}; - --gitako-codemirror-guttermarker-text: #{variables.$codemirror-guttermarker-text}; - --gitako-codemirror-guttermarker-subtle-text: #{variables.$codemirror-guttermarker-subtle-text}; - --gitako-codemirror-linenumber-text: #{variables.$codemirror-linenumber-text}; - --gitako-codemirror-cursor: #{variables.$codemirror-cursor}; - --gitako-codemirror-selection-bg: #{variables.$codemirror-selection-bg}; - --gitako-codemirror-activeline-bg: #{variables.$codemirror-activeline-bg}; - --gitako-codemirror-matchingbracket-text: #{variables.$codemirror-matchingbracket-text}; - --gitako-codemirror-lines-bg: #{variables.$codemirror-lines-bg}; - --gitako-codemirror-syntax-comment: #{variables.$codemirror-syntax-comment}; - --gitako-codemirror-syntax-constant: #{variables.$codemirror-syntax-constant}; - --gitako-codemirror-syntax-entity: #{variables.$codemirror-syntax-entity}; - --gitako-codemirror-syntax-keyword: #{variables.$codemirror-syntax-keyword}; - --gitako-codemirror-syntax-storage: #{variables.$codemirror-syntax-storage}; - --gitako-codemirror-syntax-string: #{variables.$codemirror-syntax-string}; - --gitako-codemirror-syntax-support: #{variables.$codemirror-syntax-support}; - --gitako-codemirror-syntax-variable: #{variables.$codemirror-syntax-variable}; - --gitako-ansi-black: #{variables.$ansi-black}; - --gitako-ansi-black-bright: #{variables.$ansi-black-bright}; - --gitako-ansi-white: #{variables.$ansi-white}; - --gitako-ansi-white-bright: #{variables.$ansi-white-bright}; - --gitako-ansi-gray: #{variables.$ansi-gray}; - --gitako-ansi-red: #{variables.$ansi-red}; - --gitako-ansi-red-bright: #{variables.$ansi-red-bright}; - --gitako-ansi-green: #{variables.$ansi-green}; - --gitako-ansi-green-bright: #{variables.$ansi-green-bright}; - --gitako-ansi-yellow: #{variables.$ansi-yellow}; - --gitako-ansi-yellow-bright: #{variables.$ansi-yellow-bright}; - --gitako-ansi-blue: #{variables.$ansi-blue}; - --gitako-ansi-blue-bright: #{variables.$ansi-blue-bright}; - --gitako-ansi-magenta: #{variables.$ansi-magenta}; - --gitako-ansi-magenta-bright: #{variables.$ansi-magenta-bright}; - --gitako-ansi-cyan: #{variables.$ansi-cyan}; - --gitako-ansi-cyan-bright: #{variables.$ansi-cyan-bright}; -} - -// How to merge the selectors? -// Is it possible to not have two copies of dark theme variables? -@media (prefers-color-scheme: dark) { - :root[data-color-mode='auto'] { - @include assign(); - } -} -:root[data-color-mode='dark'] { - @include assign(); -} diff --git a/src/styles/dark/variables.scss b/src/styles/dark/variables.scss index a495c0c..182c783 100644 --- a/src/styles/dark/variables.scss +++ b/src/styles/dark/variables.scss @@ -1,564 +1,566 @@ -$auto-black: #f0f6fc; -$auto-white: #010409; -$auto-gray-0: #0d1117; -$auto-gray-1: #161b22; -$auto-gray-2: #21262d; -$auto-gray-3: #30363d; -$auto-gray-4: #484f58; -$auto-gray-5: #6e7681; -$auto-gray-6: #8b949e; -$auto-gray-7: #b1bac4; -$auto-gray-8: #c9d1d9; -$auto-gray-9: #f0f6fc; -$auto-blue-0: #051d4d; -$auto-blue-1: #0c2d6b; -$auto-blue-2: #0d419d; -$auto-blue-3: #1158c7; -$auto-blue-4: #1f6feb; -$auto-blue-5: #388bfd; -$auto-blue-6: #58a6ff; -$auto-blue-7: #79c0ff; -$auto-blue-8: #a5d6ff; -$auto-blue-9: #cae8ff; -$auto-green-0: #04260f; -$auto-green-1: #033a16; -$auto-green-2: #0f5323; -$auto-green-3: #196c2e; -$auto-green-4: #238636; -$auto-green-5: #2ea043; -$auto-green-6: #3fb950; -$auto-green-7: #56d364; -$auto-green-8: #7ee787; -$auto-green-9: #aff5b4; -$auto-yellow-0: #341a00; -$auto-yellow-1: #4b2900; -$auto-yellow-2: #693e00; -$auto-yellow-3: #845306; -$auto-yellow-4: #9e6a03; -$auto-yellow-5: #bb8009; -$auto-yellow-6: #d29922; -$auto-yellow-7: #e3b341; -$auto-yellow-8: #f2cc60; -$auto-yellow-9: #f8e3a1; -$auto-orange-0: #3d1300; -$auto-orange-1: #5a1e02; -$auto-orange-2: #762d0a; -$auto-orange-3: #9b4215; -$auto-orange-4: #bd561d; -$auto-orange-5: #db6d28; -$auto-orange-6: #f0883e; -$auto-orange-7: #ffa657; -$auto-orange-8: #ffc680; -$auto-orange-9: #ffdfb6; -$auto-red-0: #490202; -$auto-red-1: #67060c; -$auto-red-2: #8e1519; -$auto-red-3: #b62324; -$auto-red-4: #da3633; -$auto-red-5: #f85149; -$auto-red-6: #ff7b72; -$auto-red-7: #ffa198; -$auto-red-8: #ffc1ba; -$auto-red-9: #ffdcd7; -$auto-purple-0: #271052; -$auto-purple-1: #3c1e70; -$auto-purple-2: #553098; -$auto-purple-3: #6e40c9; -$auto-purple-4: #8957e5; -$auto-purple-5: #a371f7; -$auto-purple-6: #bc8cff; -$auto-purple-7: #d2a8ff; -$auto-purple-8: #e2c5ff; -$auto-purple-9: #eddeff; -$auto-pink-0: #42062a; -$auto-pink-1: #5e103e; -$auto-pink-2: #7d2457; -$auto-pink-3: #9e3670; -$auto-pink-4: #bf4b8a; -$auto-pink-5: #db61a2; -$auto-pink-6: #f778ba; -$auto-pink-7: #ff9bce; -$auto-pink-8: #ffbedd; -$auto-pink-9: #ffdaec; -$text-primary: #c9d1d9; -$text-secondary: #8b949e; -$text-tertiary: #8b949e; -$text-placeholder: #484f58; -$text-disabled: #484f58; -$text-inverse: #0d1117; -$text-link: #58a6ff; -$text-danger: #f85149; -$text-success: #56d364; -$text-warning: #e3b341; -$text-white: #f0f6fc; -$icon-primary: #c9d1d9; -$icon-secondary: #6e7681; -$icon-tertiary: #484f58; -$icon-info: #79c0ff; -$icon-danger: #f85149; -$icon-success: #56d364; -$icon-warning: #e3b341; -$border-primary: #30363d; -$border-secondary: #21262d; -$border-tertiary: #6e7681; -$border-overlay: #30363d; -$border-inverse: #f0f6fc; -$border-info: #388bfd66; -$border-danger: #f8514966; -$border-success: #3fb95066; -$border-warning: #bb800966; -$bg-canvas: #0d1117; -$bg-canvas-mobile: #010409; -$bg-canvas-inverse: #f0f6fc; -$bg-canvas-inset: #06090f; -$bg-primary: #0d1117; -$bg-secondary: #0d1117; -$bg-tertiary: #161b22; -$bg-overlay: #21262d; -$bg-backdrop: #010409cc; -$bg-info: #388bfd1a; -$bg-info-inverse: #388bfd; -$bg-danger: #f851491a; -$bg-danger-inverse: #da3633; -$bg-success: #2ea0431a; -$bg-success-inverse: #2ea043; -$bg-warning: #bb80091a; -$bg-warning-inverse: #bb8009; -$shadow-small: 0 0 #0000; -$shadow-medium: 0 3px 6px #010409; -$shadow-large: 0 8px 24px #010409; -$shadow-extra-large: 0 12px 48px #010409; -$shadow-highlight: 0 0 #0000; -$shadow-inset: 0 0 #0000; -$state-hover-primary-bg: #1f6feb; -$state-hover-primary-border: #388bfd; -$state-hover-primary-text: #f0f6fc; -$state-hover-primary-icon: #f0f6fc; -$state-hover-secondary-bg: #161b22; -$state-hover-secondary-border: #161b22; -$state-selected-primary-bg: #1f6feb; -$state-selected-primary-border: #388bfd; -$state-selected-primary-text: #f0f6fc; -$state-selected-primary-icon: #f0f6fc; -$state-focus-border: #388bfd; -$state-focus-shadow: 0 0 0 3px #0c2d6b; -$fade-fg-10: #f0f6fc1a; -$fade-fg-15: #f0f6fc26; -$fade-fg-30: #f0f6fc4d; -$fade-fg-50: #f0f6fc80; -$fade-fg-70: #f0f6fcb3; -$fade-fg-85: #f0f6fcd9; -$fade-black-10: #0104091a; -$fade-black-15: #01040926; -$fade-black-30: #0104094d; -$fade-black-50: #01040980; -$fade-black-70: #010409b3; -$fade-black-85: #010409d9; -$fade-white-10: #f0f6fc1a; -$fade-white-15: #f0f6fc26; -$fade-white-30: #f0f6fc4d; -$fade-white-50: #f0f6fc80; -$fade-white-70: #f0f6fcb3; -$fade-white-85: #f0f6fcd9; -$alert-info-text: #79c0ff; -$alert-info-icon: #79c0ff; -$alert-info-bg: #388bfd1a; -$alert-info-border: #388bfd66; -$alert-warn-text: #e3b341; -$alert-warn-icon: #e3b341; -$alert-warn-bg: #bb80091a; -$alert-warn-border: #bb800966; -$alert-error-text: #ff7b72; -$alert-error-icon: #ff7b72; -$alert-error-bg: #f851491a; -$alert-error-border: #f8514966; -$alert-success-text: #56d364; -$alert-success-icon: #56d364; -$alert-success-bg: #2ea0431a; -$alert-success-border: #2ea04366; -$autocomplete-shadow: 0 16px 32px #010409d9; -$autocomplete-row-border: #30363d; -$blankslate-icon: #535c66; -$btn-text: #c9d1d9; -$btn-bg: #21262d; -$btn-border: #30363d; -$btn-shadow: 0 0 #0000; -$btn-inset-shadow: 0 0 #0000; -$btn-hover-bg: #30363d; -$btn-hover-border: #8b949e; -$btn-selected-bg: #161b22; -$btn-focus-bg: #21262d; -$btn-focus-border: #8b949e; -$btn-focus-shadow: 0 0 0 3px #8b949e4d; -$btn-shadow-active: inset 0 0.15em 0.3em #01040926; -$btn-shadow-input-focus: 0 0 0 0.2em #1f6feb4d; -$btn-primary-text: #fff; -$btn-primary-bg: #238636; -$btn-primary-border: #2ea043; -$btn-primary-shadow: 0 0 #0000; -$btn-primary-inset-shadow: 0 0 #0000; -$btn-primary-hover-bg: #2ea043; -$btn-primary-hover-border: #3fb950; -$btn-primary-selected-bg: #238636; -$btn-primary-selected-shadow: 0 0 #0000; -$btn-primary-disabled-text: #f0f6fc80; -$btn-primary-disabled-bg: #23863699; -$btn-primary-disabled-border: #0000; -$btn-primary-focus-bg: #238636; -$btn-primary-focus-border: #3fb950; -$btn-primary-focus-shadow: 0 0 0 3px #2ea44f66; -$btn-primary-icon: #f0f6fc; -$btn-primary-counter-bg: #f0f6fc33; -$btn-outline-text: #58a6ff; -$btn-outline-hover-text: #58a6ff; -$btn-outline-hover-bg: #30363d; -$btn-outline-hover-border: #58a6ff; -$btn-outline-hover-shadow: 0 1px 0 #0104091a; -$btn-outline-hover-inset-shadow: inset 0 1px 0 #f0f6fc08; -$btn-outline-hover-counter-bg: #f0f6fc33; -$btn-outline-selected-text: #f0f6fc; -$btn-outline-selected-bg: #0d419d; -$btn-outline-selected-border: #f0f6fc1a; -$btn-outline-selected-shadow: 0 0 #0000; -$btn-outline-disabled-text: #58a6ff80; -$btn-outline-disabled-bg: #0d1117; -$btn-outline-disabled-counter-bg: #1f6feb0d; -$btn-outline-focus-border: #58a6ff; -$btn-outline-focus-shadow: 0 0 0 3px #1158c766; -$btn-outline-counter-bg: #1f6feb1a; -$btn-danger-text: #f85149; -$btn-danger-hover-text: #fff; -$btn-danger-hover-bg: #da3633; -$btn-danger-hover-border: #f85149; -$btn-danger-hover-shadow: 0 0 #0000; -$btn-danger-hover-inset-shadow: 0 0 #0000; -$btn-danger-hover-counter-bg: #fff3; -$btn-danger-selected-text: #fff; -$btn-danger-selected-bg: #b62324; -$btn-danger-selected-border: #f0f6fc1a; -$btn-danger-selected-shadow: 0 0 #0000; -$btn-danger-disabled-text: #f85149; -$btn-danger-disabled-bg: #0d1117; -$btn-danger-disabled-counter-bg: #da36330d; -$btn-danger-focus-border: #f85149; -$btn-danger-focus-shadow: 0 0 0 3px #b6232466; -$btn-danger-counter-bg: #da36331a; -$btn-counter-bg: #30363d; -$counter-text: #c9d1d9; -$counter-bg: #30363d; -$counter-primary-text: #c9d1d9; -$counter-primary-bg: #6e7681; -$counter-secondary-text: #8b949e; -$dropdown-shadow: 0 16px 32px #010409d9; -$label-border: #30363d; -$label-primary-text: #b1bac4; -$label-primary-border: #6e7681; -$label-secondary-text: #8b949e; -$label-secondary-border: #30363d; -$label-info-text: #388bfd; -$label-info-border: #388bfd66; -$label-success-text: #3fb950; -$label-success-border: #2ea04366; -$label-warning-text: #e3b341; -$label-warning-border: #f2d35b66; -$label-danger-text: #f85149; -$label-danger-border: #f8514966; -$label-orange-text: #db6d28; -$label-orange-border: #db6d2866; -$input-bg: #0d1117; -$input-contrast-bg: #0104094d; -$input-border: #21262d; -$input-shadow: 0 0 #0000; -$input-disabled-bg: #161b22; -$input-disabled-border: #30363d; -$input-warning-border: #d29922; -$input-error-border: #f85149; -$input-tooltip-success-text: #56d364; -$input-tooltip-success-bg: #101f1b; -$input-tooltip-success-border: #1c532b; -$input-tooltip-warning-text: #e3b341; -$input-tooltip-warning-bg: #1e1c16; -$input-tooltip-warning-border: #5d4411; -$input-tooltip-error-text: #ff7b72; -$input-tooltip-error-bg: #25171c; -$input-tooltip-error-border: #792e2e; -$avatar-bg: #f0f6fc; -$avatar-border: #f0f6fc1a; -$avatar-stack-fade: #30363d; -$avatar-stack-fade-more: #21262d; -$avatar-child-shadow: -2px -2px 0 #0d1117; -$toast-text: #79c0ff; -$toast-bg: #010409; -$toast-border: #214981; -$toast-shadow: 0 8px 24px #010409; -$toast-icon: #79c0ff; -$toast-icon-bg: #121d2e; -$toast-icon-border: #214981; -$toast-success-text: #56d364; -$toast-success-border: #1c532c; -$toast-success-icon: #56d364; -$toast-success-icon-bg: #111f1c; -$toast-success-icon-border: #1c532c; -$toast-warning-text: #e3b341; -$toast-warning-border: #5e4411; -$toast-warning-icon: #e3b341; -$toast-warning-icon-bg: #1f1c16; -$toast-warning-icon-border: #5e4411; -$toast-danger-text: #ff7b72; -$toast-danger-border: #792e2e; -$toast-danger-icon: #ff7b72; -$toast-danger-icon-bg: #25171c; -$toast-danger-icon-border: #792e2e; -$toast-loading-text: #c9d1d9; -$toast-loading-border: #30363d; -$toast-loading-icon: #f0f6fc; -$toast-loading-icon-bg: #30363d; -$toast-loading-icon-border: #30363d; -$timeline-text: #b1bac4; -$timeline-badge-bg: #0d1117; -$timeline-target-badge-border: #1f6feb; -$timeline-target-badge-shadow: #0d419d; -$select-menu-border-secondary: #30363d; -$select-menu-shadow: 0 0 18px #01040966; -$select-menu-backdrop-bg: #01040980; -$select-menu-backdrop-border: #484f58; -$select-menu-tap-highlight: #30363d80; -$select-menu-tap-focus-bg: #0c2d6b; -$box-blue-border: #0d419d; -$box-row-yellow-bg: #ebc4401a; -$box-row-blue-bg: #79c0ff1a; -$box-header-blue-bg: #0d1117; -$box-header-blue-border: #30363d; -$box-border-info: #388bfd66; -$box-bg-info: #388bfd1a; -$box-border-warning: #bb800966; -$box-bg-warning: #bb80091a; -$branch-name-text: #c9d1d9; -$branch-name-icon: #b1bac4; -$branch-name-bg: #58a6ff1a; -$branch-name-link-text: #58a6ff; -$branch-name-link-icon: #58a6ff; -$branch-name-link-bg: #58a6ff1a; -$markdown-code-bg: #f0f6fc26; -$markdown-frame-border: #3b434b; -$markdown-blockquote-border: #3b434b; -$markdown-table-border: #3b434b; -$markdown-table-tr-border: #272c32; -$menu-heading-text: #8b949e; -$menu-border-active: #f78166; -$menu-bg-active: #161b22; -$sidenav-selected-bg: #21262d; -$sidenav-border-active: #f78166; -$header-text: #f0f6fcb3; -$header-bg: #161b22; -$header-logo: #f0f6fc; -$filter-item-bar-bg: #12161c; -$hidden-text-expander-bg: #21262d; -$hidden-text-expander-bg-hover: #30363d; -$drag-and-drop-border: #25292f; -$upload-enabled-border: #3b434b; -$upload-enabled-border-focused: #4487ee; -$previewable-comment-form-border: #25292f; -$underlinenav-border: #30363d00; -$underlinenav-border-hover: #30363d; -$underlinenav-border-active: #f78166; -$underlinenav-text: #8b949e; -$underlinenav-text-hover: #c9d1d9; -$underlinenav-text-active: #c9d1d9; -$underlinenav-icon: #6e7681; -$underlinenav-icon-hover: #c9d1d9; -$underlinenav-icon-active: #c9d1d9; -$underlinenav-counter-text: #8b949e; -$verified-badge-text: #3fb950; -$verified-badge-bg: #3fb9501a; -$verified-badge-border: #3fb95066; -$social-count-bg: #21262d; -$tooltip-text: #f0f6fc; -$tooltip-bg: #21262d; -$header-search-bg: #0d1117; -$header-search-border: #21262d; -$search-keyword-hl: #bb800966; -$diffstat-neutral-bg: #30363d; -$diffstat-neutral-border: #f0f6fc1a; -$diffstat-deletion-bg: #da3633; -$diffstat-deletion-border: #f85149; -$diffstat-addition-bg: #238636; -$diffstat-addition-border: #2ea043; -$files-explorer-icon: #6e7681; -$hl-author-bg: #051d4d; -$hl-author-border: #0d419d; -$logo-subdued: #30363d; -$discussion-border: #34513b; -$discussion-bg-success: #2ea0431a; -$actions-workflow-table-sticky-bg: #0d1117f2; -$repo-language-color-border: #f0f6fc33; -$code-selection-bg: #79c0ff4d; -$blob-line-highlight-bg: #bb80091a; -$blob-line-highlight-border: #bb8009; -$diff-addition-text: #56d364; -$diff-addition-bg: #23863626; -$diff-addition-border: #196c2e; -$diff-deletion-text: #f85149; -$diff-deletion-bg: #da363326; -$diff-deletion-border: #b62324; -$diff-change-text: #e3b341; -$diff-change-bg: #341a00; -$diff-change-border: #9e6a03; -$diff-blob-num-text: #f0f6fc4d; -$diff-blob-num-hover-text: #f0f6fc99; -$diff-blob-addition-num-text: #3fb950; -$diff-blob-addition-num-hover-text: #7ee787; -$diff-blob-addition-num-bg: #2386360d; -$diff-blob-addition-line-bg: #23863626; -$diff-blob-addition-word-bg: #2386364d; -$diff-blob-deletion-num-text: #f85149; -$diff-blob-deletion-num-hover-text: #ffa198; -$diff-blob-deletion-num-bg: #da36330d; -$diff-blob-deletion-line-bg: #da363326; -$diff-blob-deletion-word-bg: #da36334d; -$diff-blob-hunk-text: #8b949e; -$diff-blob-hunk-num-bg: #58a6ff26; -$diff-blob-hunk-line-bg: #58a6ff1a; -$diff-blob-empty-block-bg: #161b22; -$diff-blob-selected-line-highlight-bg: #bb80091a; -$diff-blob-selected-line-highlight-border: #bb8009; -$diff-blob-selected-line-highlight-mix-blend-mode: normal; -$diff-blob-expander-icon: #8b949e; -$diff-blob-expander-hover-icon: #f0f6fc; -$diff-blob-expander-hover-bg: #1f6feb; -$diff-blob-comment-button-icon: #f0f6fc; -$diff-blob-comment-button-bg: #1f6feb; -$diff-blob-comment-button-gradient-bg: #367eed; -$global-nav-logo: #f0f6fc; -$global-nav-bg: #161b22; -$global-nav-text: #c9d1d9; -$global-nav-icon: #c9d1d9; -$global-nav-input-bg: #0d1117; -$global-nav-input-border: #21262d; -$global-nav-input-icon: #21262d; -$global-nav-input-placeholder: #484f58; -$calendar-graph-day-bg: #161b22; -$calendar-graph-day-border: #1b1f230f; -$calendar-graph-day-l1-bg: #01311f; -$calendar-graph-day-l2-bg: #034525; -$calendar-graph-day-l3-bg: #0f6d31; -$calendar-graph-day-l4-bg: #00c647; -$calendar-graph-day-l4-border: #1b1f230f; -$calendar-graph-day-l3-border: #1b1f230f; -$calendar-graph-day-l2-border: #1b1f230f; -$calendar-graph-day-l1-border: #1b1f230f; -$footer-invertocat-octicon: #30363d; -$footer-invertocat-octicon-hover: #6e7681; -$pr-state-draft-text: #8b949e; -$pr-state-draft-bg: #8b949e1a; -$pr-state-draft-border: #8b949e66; -$pr-state-open-text: #3fb950; -$pr-state-open-bg: #3fb9501a; -$pr-state-open-border: #3fb95066; -$pr-state-merged-text: #a371f7; -$pr-state-merged-bg: #bc8cff1a; -$pr-state-merged-border: #bc8cff66; -$pr-state-closed-text: #f85149; -$pr-state-closed-bg: #da36331a; -$pr-state-closed-border: #da363366; -$topic-tag-text: #58a6ff; -$topic-tag-bg: #388bfd1a; -$topic-tag-hover-bg: #388bfd33; -$topic-tag-active-bg: #388bfd26; -$merge-box-success-icon-bg: #2ea0431a; -$merge-box-success-icon-text: #3fb950; -$merge-box-success-icon-border: #2ea04366; -$merge-box-success-indicator-bg: #238636; -$merge-box-success-indicator-border: #2ea043; -$merge-box-merged-icon-bg: #bc8cff1a; -$merge-box-merged-icon-text: #a371f7; -$merge-box-merged-icon-border: #bc8cff66; -$merge-box-merged-box-border: #bc8cff66; -$merge-box-neutral-icon-bg: #c9d1d91a; -$merge-box-neutral-icon-text: #8b949e; -$merge-box-neutral-icon-border: #c9d1d966; -$merge-box-neutral-indicator-bg: #484f58; -$merge-box-neutral-indicator-border: #6e7681; -$merge-box-warning-icon-bg: #bb80091a; -$merge-box-warning-icon-text: #e3b341; -$merge-box-warning-icon-border: #bb800966; -$merge-box-warning-box-border: #bb800966; -$merge-box-warning-merge-highlight: #bb80091a; -$merge-box-error-icon-bg: #f851491a; -$merge-box-error-icon-text: #f85149; -$merge-box-error-icon-border: #f8514966; -$merge-box-error-indicator-bg: #da3633; -$merge-box-error-indicator-border: #f85149; -$project-card-bg: #161b22; -$project-header-bg: #0d1117; -$project-sidebar-bg: #161b22; -$project-gradient-in: #161b22; -$project-gradient-out: #161b2200; -$marketing-icon-primary: #79c0ff; -$marketing-icon-secondary: #1f6feb; -$prettylights-syntax-comment: #8b949e; -$prettylights-syntax-constant: #79c0ff; -$prettylights-syntax-entity: #d2a8ff; -$prettylights-syntax-storage-modifier-import: #c9d1d9; -$prettylights-syntax-entity-tag: #7ee787; -$prettylights-syntax-keyword: #ff7b72; -$prettylights-syntax-string: #a5d6ff; -$prettylights-syntax-variable: #ffa657; -$prettylights-syntax-brackethighlighter-unmatched: #f85149; -$prettylights-syntax-invalid-illegal-text: #f0f6fc; -$prettylights-syntax-invalid-illegal-bg: #8e1519; -$prettylights-syntax-carriage-return-text: #f0f6fc; -$prettylights-syntax-carriage-return-bg: #b62324; -$prettylights-syntax-string-regexp: #7ee787; -$prettylights-syntax-markup-list: #f2cc60; -$prettylights-syntax-markup-heading: #1f6feb; -$prettylights-syntax-markup-italic: #c9d1d9; -$prettylights-syntax-markup-bold: #c9d1d9; -$prettylights-syntax-markup-deleted-text: #ffdcd7; -$prettylights-syntax-markup-deleted-bg: #67060c; -$prettylights-syntax-markup-inserted-text: #aff5b4; -$prettylights-syntax-markup-inserted-bg: #033a16; -$prettylights-syntax-markup-changed-text: #ffdfb6; -$prettylights-syntax-markup-changed-bg: #5a1e02; -$prettylights-syntax-markup-ignored-text: #c9d1d9; -$prettylights-syntax-markup-ignored-bg: #1158c7; -$prettylights-syntax-meta-diff-range: #d2a8ff; -$prettylights-syntax-brackethighlighter-angle: #8b949e; -$prettylights-syntax-sublimelinter-gutter-mark: #484f58; -$prettylights-syntax-constant-other-reference-link: #a5d6ff; -$codemirror-text: #c9d1d9; -$codemirror-bg: #0d1117; -$codemirror-gutters-bg: #0d1117; -$codemirror-guttermarker-text: #0d1117; -$codemirror-guttermarker-subtle-text: #6e7681; -$codemirror-linenumber-text: #8b949e; -$codemirror-cursor: #f0f6fc; -$codemirror-selection-bg: #79c0ff4d; -$codemirror-activeline-bg: #161b22; -$codemirror-matchingbracket-text: #c9d1d9; -$codemirror-lines-bg: #0d1117; -$codemirror-syntax-comment: #8b949e; -$codemirror-syntax-constant: #79c0ff; -$codemirror-syntax-entity: #d2a8ff; -$codemirror-syntax-keyword: #ff7b72; -$codemirror-syntax-storage: #ff7b72; -$codemirror-syntax-string: #a5d6ff; -$codemirror-syntax-support: #79c0ff; -$codemirror-syntax-variable: #ffa657; -$ansi-black: #0d1117; -$ansi-black-bright: #161b22; -$ansi-white: #b1bac4; -$ansi-white-bright: #b1bac4; -$ansi-gray: #6e7681; -$ansi-red: #ff7b72; -$ansi-red-bright: #ffa198; -$ansi-green: #3fb950; -$ansi-green-bright: #56d364; -$ansi-yellow: #d29922; -$ansi-yellow-bright: #e3b341; -$ansi-blue: #58a6ff; -$ansi-blue-bright: #79c0ff; -$ansi-magenta: #bc8cff; -$ansi-magenta-bright: #d2a8ff; -$ansi-cyan: #76e3ea; -$ansi-cyan-bright: #b3f0ff; +$variables: ( + 'auto-black': '#f0f6fc', + 'auto-white': '#010409', + 'auto-gray-0': '#0d1117', + 'auto-gray-1': '#161b22', + 'auto-gray-2': '#21262d', + 'auto-gray-3': '#30363d', + 'auto-gray-4': '#484f58', + 'auto-gray-5': '#6e7681', + 'auto-gray-6': '#8b949e', + 'auto-gray-7': '#b1bac4', + 'auto-gray-8': '#c9d1d9', + 'auto-gray-9': '#f0f6fc', + 'auto-blue-0': '#051d4d', + 'auto-blue-1': '#0c2d6b', + 'auto-blue-2': '#0d419d', + 'auto-blue-3': '#1158c7', + 'auto-blue-4': '#1f6feb', + 'auto-blue-5': '#388bfd', + 'auto-blue-6': '#58a6ff', + 'auto-blue-7': '#79c0ff', + 'auto-blue-8': '#a5d6ff', + 'auto-blue-9': '#cae8ff', + 'auto-green-0': '#04260f', + 'auto-green-1': '#033a16', + 'auto-green-2': '#0f5323', + 'auto-green-3': '#196c2e', + 'auto-green-4': '#238636', + 'auto-green-5': '#2ea043', + 'auto-green-6': '#3fb950', + 'auto-green-7': '#56d364', + 'auto-green-8': '#7ee787', + 'auto-green-9': '#aff5b4', + 'auto-yellow-0': '#341a00', + 'auto-yellow-1': '#4b2900', + 'auto-yellow-2': '#693e00', + 'auto-yellow-3': '#845306', + 'auto-yellow-4': '#9e6a03', + 'auto-yellow-5': '#bb8009', + 'auto-yellow-6': '#d29922', + 'auto-yellow-7': '#e3b341', + 'auto-yellow-8': '#f2cc60', + 'auto-yellow-9': '#f8e3a1', + 'auto-orange-0': '#3d1300', + 'auto-orange-1': '#5a1e02', + 'auto-orange-2': '#762d0a', + 'auto-orange-3': '#9b4215', + 'auto-orange-4': '#bd561d', + 'auto-orange-5': '#db6d28', + 'auto-orange-6': '#f0883e', + 'auto-orange-7': '#ffa657', + 'auto-orange-8': '#ffc680', + 'auto-orange-9': '#ffdfb6', + 'auto-red-0': '#490202', + 'auto-red-1': '#67060c', + 'auto-red-2': '#8e1519', + 'auto-red-3': '#b62324', + 'auto-red-4': '#da3633', + 'auto-red-5': '#f85149', + 'auto-red-6': '#ff7b72', + 'auto-red-7': '#ffa198', + 'auto-red-8': '#ffc1ba', + 'auto-red-9': '#ffdcd7', + 'auto-purple-0': '#271052', + 'auto-purple-1': '#3c1e70', + 'auto-purple-2': '#553098', + 'auto-purple-3': '#6e40c9', + 'auto-purple-4': '#8957e5', + 'auto-purple-5': '#a371f7', + 'auto-purple-6': '#bc8cff', + 'auto-purple-7': '#d2a8ff', + 'auto-purple-8': '#e2c5ff', + 'auto-purple-9': '#eddeff', + 'auto-pink-0': '#42062a', + 'auto-pink-1': '#5e103e', + 'auto-pink-2': '#7d2457', + 'auto-pink-3': '#9e3670', + 'auto-pink-4': '#bf4b8a', + 'auto-pink-5': '#db61a2', + 'auto-pink-6': '#f778ba', + 'auto-pink-7': '#ff9bce', + 'auto-pink-8': '#ffbedd', + 'auto-pink-9': '#ffdaec', + 'text-primary': '#c9d1d9', + 'text-secondary': '#8b949e', + 'text-tertiary': '#8b949e', + 'text-placeholder': '#484f58', + 'text-disabled': '#484f58', + 'text-inverse': '#0d1117', + 'text-link': '#58a6ff', + 'text-danger': '#f85149', + 'text-success': '#56d364', + 'text-warning': '#e3b341', + 'text-white': '#f0f6fc', + 'icon-primary': '#c9d1d9', + 'icon-secondary': '#6e7681', + 'icon-tertiary': '#484f58', + 'icon-info': '#79c0ff', + 'icon-danger': '#f85149', + 'icon-success': '#56d364', + 'icon-warning': '#e3b341', + 'border-primary': '#30363d', + 'border-secondary': '#21262d', + 'border-tertiary': '#6e7681', + 'border-overlay': '#30363d', + 'border-inverse': '#f0f6fc', + 'border-info': '#388bfd66', + 'border-danger': '#f8514966', + 'border-success': '#3fb95066', + 'border-warning': '#bb800966', + 'bg-canvas': '#0d1117', + 'bg-canvas-mobile': '#010409', + 'bg-canvas-inverse': '#f0f6fc', + 'bg-canvas-inset': '#06090f', + 'bg-primary': '#0d1117', + 'bg-secondary': '#0d1117', + 'bg-tertiary': '#161b22', + 'bg-overlay': '#21262d', + 'bg-backdrop': '#010409cc', + 'bg-info': '#388bfd1a', + 'bg-info-inverse': '#388bfd', + 'bg-danger': '#f851491a', + 'bg-danger-inverse': '#da3633', + 'bg-success': '#2ea0431a', + 'bg-success-inverse': '#2ea043', + 'bg-warning': '#bb80091a', + 'bg-warning-inverse': '#bb8009', + 'shadow-small': '0 0 #0000', + 'shadow-medium': '0 3px 6px #010409', + 'shadow-large': '0 8px 24px #010409', + 'shadow-extra-large': '0 12px 48px #010409', + 'shadow-highlight': '0 0 #0000', + 'shadow-inset': '0 0 #0000', + 'state-hover-primary-bg': '#1f6feb', + 'state-hover-primary-border': '#388bfd', + 'state-hover-primary-text': '#f0f6fc', + 'state-hover-primary-icon': '#f0f6fc', + 'state-hover-secondary-bg': '#161b22', + 'state-hover-secondary-border': '#161b22', + 'state-selected-primary-bg': '#1f6feb', + 'state-selected-primary-border': '#388bfd', + 'state-selected-primary-text': '#f0f6fc', + 'state-selected-primary-icon': '#f0f6fc', + 'state-focus-border': '#388bfd', + 'state-focus-shadow': '0 0 0 3px #0c2d6b', + 'fade-fg-10': '#f0f6fc1a', + 'fade-fg-15': '#f0f6fc26', + 'fade-fg-30': '#f0f6fc4d', + 'fade-fg-50': '#f0f6fc80', + 'fade-fg-70': '#f0f6fcb3', + 'fade-fg-85': '#f0f6fcd9', + 'fade-black-10': '#0104091a', + 'fade-black-15': '#01040926', + 'fade-black-30': '#0104094d', + 'fade-black-50': '#01040980', + 'fade-black-70': '#010409b3', + 'fade-black-85': '#010409d9', + 'fade-white-10': '#f0f6fc1a', + 'fade-white-15': '#f0f6fc26', + 'fade-white-30': '#f0f6fc4d', + 'fade-white-50': '#f0f6fc80', + 'fade-white-70': '#f0f6fcb3', + 'fade-white-85': '#f0f6fcd9', + 'alert-info-text': '#79c0ff', + 'alert-info-icon': '#79c0ff', + 'alert-info-bg': '#388bfd1a', + 'alert-info-border': '#388bfd66', + 'alert-warn-text': '#e3b341', + 'alert-warn-icon': '#e3b341', + 'alert-warn-bg': '#bb80091a', + 'alert-warn-border': '#bb800966', + 'alert-error-text': '#ff7b72', + 'alert-error-icon': '#ff7b72', + 'alert-error-bg': '#f851491a', + 'alert-error-border': '#f8514966', + 'alert-success-text': '#56d364', + 'alert-success-icon': '#56d364', + 'alert-success-bg': '#2ea0431a', + 'alert-success-border': '#2ea04366', + 'autocomplete-shadow': '0 16px 32px #010409d9', + 'autocomplete-row-border': '#30363d', + 'blankslate-icon': '#535c66', + 'btn-text': '#c9d1d9', + 'btn-bg': '#21262d', + 'btn-border': '#30363d', + 'btn-shadow': '0 0 #0000', + 'btn-inset-shadow': '0 0 #0000', + 'btn-hover-bg': '#30363d', + 'btn-hover-border': '#8b949e', + 'btn-selected-bg': '#161b22', + 'btn-focus-bg': '#21262d', + 'btn-focus-border': '#8b949e', + 'btn-focus-shadow': '0 0 0 3px #8b949e4d', + 'btn-shadow-active': 'inset 0 0.15em 0.3em #01040926', + 'btn-shadow-input-focus': '0 0 0 0.2em #1f6feb4d', + 'btn-primary-text': '#fff', + 'btn-primary-bg': '#238636', + 'btn-primary-border': '#2ea043', + 'btn-primary-shadow': '0 0 #0000', + 'btn-primary-inset-shadow': '0 0 #0000', + 'btn-primary-hover-bg': '#2ea043', + 'btn-primary-hover-border': '#3fb950', + 'btn-primary-selected-bg': '#238636', + 'btn-primary-selected-shadow': '0 0 #0000', + 'btn-primary-disabled-text': '#f0f6fc80', + 'btn-primary-disabled-bg': '#23863699', + 'btn-primary-disabled-border': '#0000', + 'btn-primary-focus-bg': '#238636', + 'btn-primary-focus-border': '#3fb950', + 'btn-primary-focus-shadow': '0 0 0 3px #2ea44f66', + 'btn-primary-icon': '#f0f6fc', + 'btn-primary-counter-bg': '#f0f6fc33', + 'btn-outline-text': '#58a6ff', + 'btn-outline-hover-text': '#58a6ff', + 'btn-outline-hover-bg': '#30363d', + 'btn-outline-hover-border': '#58a6ff', + 'btn-outline-hover-shadow': '0 1px 0 #0104091a', + 'btn-outline-hover-inset-shadow': 'inset 0 1px 0 #f0f6fc08', + 'btn-outline-hover-counter-bg': '#f0f6fc33', + 'btn-outline-selected-text': '#f0f6fc', + 'btn-outline-selected-bg': '#0d419d', + 'btn-outline-selected-border': '#f0f6fc1a', + 'btn-outline-selected-shadow': '0 0 #0000', + 'btn-outline-disabled-text': '#58a6ff80', + 'btn-outline-disabled-bg': '#0d1117', + 'btn-outline-disabled-counter-bg': '#1f6feb0d', + 'btn-outline-focus-border': '#58a6ff', + 'btn-outline-focus-shadow': '0 0 0 3px #1158c766', + 'btn-outline-counter-bg': '#1f6feb1a', + 'btn-danger-text': '#f85149', + 'btn-danger-hover-text': '#fff', + 'btn-danger-hover-bg': '#da3633', + 'btn-danger-hover-border': '#f85149', + 'btn-danger-hover-shadow': '0 0 #0000', + 'btn-danger-hover-inset-shadow': '0 0 #0000', + 'btn-danger-hover-counter-bg': '#fff3', + 'btn-danger-selected-text': '#fff', + 'btn-danger-selected-bg': '#b62324', + 'btn-danger-selected-border': '#f0f6fc1a', + 'btn-danger-selected-shadow': '0 0 #0000', + 'btn-danger-disabled-text': '#f85149', + 'btn-danger-disabled-bg': '#0d1117', + 'btn-danger-disabled-counter-bg': '#da36330d', + 'btn-danger-focus-border': '#f85149', + 'btn-danger-focus-shadow': '0 0 0 3px #b6232466', + 'btn-danger-counter-bg': '#da36331a', + 'btn-counter-bg': '#30363d', + 'counter-text': '#c9d1d9', + 'counter-bg': '#30363d', + 'counter-primary-text': '#c9d1d9', + 'counter-primary-bg': '#6e7681', + 'counter-secondary-text': '#8b949e', + 'dropdown-shadow': '0 16px 32px #010409d9', + 'label-border': '#30363d', + 'label-primary-text': '#b1bac4', + 'label-primary-border': '#6e7681', + 'label-secondary-text': '#8b949e', + 'label-secondary-border': '#30363d', + 'label-info-text': '#388bfd', + 'label-info-border': '#388bfd66', + 'label-success-text': '#3fb950', + 'label-success-border': '#2ea04366', + 'label-warning-text': '#e3b341', + 'label-warning-border': '#f2d35b66', + 'label-danger-text': '#f85149', + 'label-danger-border': '#f8514966', + 'label-orange-text': '#db6d28', + 'label-orange-border': '#db6d2866', + 'input-bg': '#0d1117', + 'input-contrast-bg': '#0104094d', + 'input-border': '#21262d', + 'input-shadow': '0 0 #0000', + 'input-disabled-bg': '#161b22', + 'input-disabled-border': '#30363d', + 'input-warning-border': '#d29922', + 'input-error-border': '#f85149', + 'input-tooltip-success-text': '#56d364', + 'input-tooltip-success-bg': '#101f1b', + 'input-tooltip-success-border': '#1c532b', + 'input-tooltip-warning-text': '#e3b341', + 'input-tooltip-warning-bg': '#1e1c16', + 'input-tooltip-warning-border': '#5d4411', + 'input-tooltip-error-text': '#ff7b72', + 'input-tooltip-error-bg': '#25171c', + 'input-tooltip-error-border': '#792e2e', + 'avatar-bg': '#f0f6fc', + 'avatar-border': '#f0f6fc1a', + 'avatar-stack-fade': '#30363d', + 'avatar-stack-fade-more': '#21262d', + 'avatar-child-shadow': '-2px -2px 0 #0d1117', + 'toast-text': '#79c0ff', + 'toast-bg': '#010409', + 'toast-border': '#214981', + 'toast-shadow': '0 8px 24px #010409', + 'toast-icon': '#79c0ff', + 'toast-icon-bg': '#121d2e', + 'toast-icon-border': '#214981', + 'toast-success-text': '#56d364', + 'toast-success-border': '#1c532c', + 'toast-success-icon': '#56d364', + 'toast-success-icon-bg': '#111f1c', + 'toast-success-icon-border': '#1c532c', + 'toast-warning-text': '#e3b341', + 'toast-warning-border': '#5e4411', + 'toast-warning-icon': '#e3b341', + 'toast-warning-icon-bg': '#1f1c16', + 'toast-warning-icon-border': '#5e4411', + 'toast-danger-text': '#ff7b72', + 'toast-danger-border': '#792e2e', + 'toast-danger-icon': '#ff7b72', + 'toast-danger-icon-bg': '#25171c', + 'toast-danger-icon-border': '#792e2e', + 'toast-loading-text': '#c9d1d9', + 'toast-loading-border': '#30363d', + 'toast-loading-icon': '#f0f6fc', + 'toast-loading-icon-bg': '#30363d', + 'toast-loading-icon-border': '#30363d', + 'timeline-text': '#b1bac4', + 'timeline-badge-bg': '#0d1117', + 'timeline-target-badge-border': '#1f6feb', + 'timeline-target-badge-shadow': '#0d419d', + 'select-menu-border-secondary': '#30363d', + 'select-menu-shadow': '0 0 18px #01040966', + 'select-menu-backdrop-bg': '#01040980', + 'select-menu-backdrop-border': '#484f58', + 'select-menu-tap-highlight': '#30363d80', + 'select-menu-tap-focus-bg': '#0c2d6b', + 'box-blue-border': '#0d419d', + 'box-row-yellow-bg': '#ebc4401a', + 'box-row-blue-bg': '#79c0ff1a', + 'box-header-blue-bg': '#0d1117', + 'box-header-blue-border': '#30363d', + 'box-border-info': '#388bfd66', + 'box-bg-info': '#388bfd1a', + 'box-border-warning': '#bb800966', + 'box-bg-warning': '#bb80091a', + 'branch-name-text': '#c9d1d9', + 'branch-name-icon': '#b1bac4', + 'branch-name-bg': '#58a6ff1a', + 'branch-name-link-text': '#58a6ff', + 'branch-name-link-icon': '#58a6ff', + 'branch-name-link-bg': '#58a6ff1a', + 'markdown-code-bg': '#f0f6fc26', + 'markdown-frame-border': '#3b434b', + 'markdown-blockquote-border': '#3b434b', + 'markdown-table-border': '#3b434b', + 'markdown-table-tr-border': '#272c32', + 'menu-heading-text': '#8b949e', + 'menu-border-active': '#f78166', + 'menu-bg-active': '#161b22', + 'sidenav-selected-bg': '#21262d', + 'sidenav-border-active': '#f78166', + 'header-text': '#f0f6fcb3', + 'header-bg': '#161b22', + 'header-logo': '#f0f6fc', + 'filter-item-bar-bg': '#12161c', + 'hidden-text-expander-bg': '#21262d', + 'hidden-text-expander-bg-hover': '#30363d', + 'drag-and-drop-border': '#25292f', + 'upload-enabled-border': '#3b434b', + 'upload-enabled-border-focused': '#4487ee', + 'previewable-comment-form-border': '#25292f', + 'underlinenav-border': '#30363d00', + 'underlinenav-border-hover': '#30363d', + 'underlinenav-border-active': '#f78166', + 'underlinenav-text': '#8b949e', + 'underlinenav-text-hover': '#c9d1d9', + 'underlinenav-text-active': '#c9d1d9', + 'underlinenav-icon': '#6e7681', + 'underlinenav-icon-hover': '#c9d1d9', + 'underlinenav-icon-active': '#c9d1d9', + 'underlinenav-counter-text': '#8b949e', + 'verified-badge-text': '#3fb950', + 'verified-badge-bg': '#3fb9501a', + 'verified-badge-border': '#3fb95066', + 'social-count-bg': '#21262d', + 'tooltip-text': '#f0f6fc', + 'tooltip-bg': '#21262d', + 'header-search-bg': '#0d1117', + 'header-search-border': '#21262d', + 'search-keyword-hl': '#bb800966', + 'diffstat-neutral-bg': '#30363d', + 'diffstat-neutral-border': '#f0f6fc1a', + 'diffstat-deletion-bg': '#da3633', + 'diffstat-deletion-border': '#f85149', + 'diffstat-addition-bg': '#238636', + 'diffstat-addition-border': '#2ea043', + 'files-explorer-icon': '#6e7681', + 'hl-author-bg': '#051d4d', + 'hl-author-border': '#0d419d', + 'logo-subdued': '#30363d', + 'discussion-border': '#34513b', + 'discussion-bg-success': '#2ea0431a', + 'actions-workflow-table-sticky-bg': '#0d1117f2', + 'repo-language-color-border': '#f0f6fc33', + 'code-selection-bg': '#79c0ff4d', + 'blob-line-highlight-bg': '#bb80091a', + 'blob-line-highlight-border': '#bb8009', + 'diff-addition-text': '#56d364', + 'diff-addition-bg': '#23863626', + 'diff-addition-border': '#196c2e', + 'diff-deletion-text': '#f85149', + 'diff-deletion-bg': '#da363326', + 'diff-deletion-border': '#b62324', + 'diff-change-text': '#e3b341', + 'diff-change-bg': '#341a00', + 'diff-change-border': '#9e6a03', + 'diff-blob-num-text': '#f0f6fc4d', + 'diff-blob-num-hover-text': '#f0f6fc99', + 'diff-blob-addition-num-text': '#3fb950', + 'diff-blob-addition-num-hover-text': '#7ee787', + 'diff-blob-addition-num-bg': '#2386360d', + 'diff-blob-addition-line-bg': '#23863626', + 'diff-blob-addition-word-bg': '#2386364d', + 'diff-blob-deletion-num-text': '#f85149', + 'diff-blob-deletion-num-hover-text': '#ffa198', + 'diff-blob-deletion-num-bg': '#da36330d', + 'diff-blob-deletion-line-bg': '#da363326', + 'diff-blob-deletion-word-bg': '#da36334d', + 'diff-blob-hunk-text': '#8b949e', + 'diff-blob-hunk-num-bg': '#58a6ff26', + 'diff-blob-hunk-line-bg': '#58a6ff1a', + 'diff-blob-empty-block-bg': '#161b22', + 'diff-blob-selected-line-highlight-bg': '#bb80091a', + 'diff-blob-selected-line-highlight-border': '#bb8009', + 'diff-blob-selected-line-highlight-mix-blend-mode': 'normal', + 'diff-blob-expander-icon': '#8b949e', + 'diff-blob-expander-hover-icon': '#f0f6fc', + 'diff-blob-expander-hover-bg': '#1f6feb', + 'diff-blob-comment-button-icon': '#f0f6fc', + 'diff-blob-comment-button-bg': '#1f6feb', + 'diff-blob-comment-button-gradient-bg': '#367eed', + 'global-nav-logo': '#f0f6fc', + 'global-nav-bg': '#161b22', + 'global-nav-text': '#c9d1d9', + 'global-nav-icon': '#c9d1d9', + 'global-nav-input-bg': '#0d1117', + 'global-nav-input-border': '#21262d', + 'global-nav-input-icon': '#21262d', + 'global-nav-input-placeholder': '#484f58', + 'calendar-graph-day-bg': '#161b22', + 'calendar-graph-day-border': '#1b1f230f', + 'calendar-graph-day-l1-bg': '#01311f', + 'calendar-graph-day-l2-bg': '#034525', + 'calendar-graph-day-l3-bg': '#0f6d31', + 'calendar-graph-day-l4-bg': '#00c647', + 'calendar-graph-day-l4-border': '#1b1f230f', + 'calendar-graph-day-l3-border': '#1b1f230f', + 'calendar-graph-day-l2-border': '#1b1f230f', + 'calendar-graph-day-l1-border': '#1b1f230f', + 'footer-invertocat-octicon': '#30363d', + 'footer-invertocat-octicon-hover': '#6e7681', + 'pr-state-draft-text': '#8b949e', + 'pr-state-draft-bg': '#8b949e1a', + 'pr-state-draft-border': '#8b949e66', + 'pr-state-open-text': '#3fb950', + 'pr-state-open-bg': '#3fb9501a', + 'pr-state-open-border': '#3fb95066', + 'pr-state-merged-text': '#a371f7', + 'pr-state-merged-bg': '#bc8cff1a', + 'pr-state-merged-border': '#bc8cff66', + 'pr-state-closed-text': '#f85149', + 'pr-state-closed-bg': '#da36331a', + 'pr-state-closed-border': '#da363366', + 'topic-tag-text': '#58a6ff', + 'topic-tag-bg': '#388bfd1a', + 'topic-tag-hover-bg': '#388bfd33', + 'topic-tag-active-bg': '#388bfd26', + 'merge-box-success-icon-bg': '#2ea0431a', + 'merge-box-success-icon-text': '#3fb950', + 'merge-box-success-icon-border': '#2ea04366', + 'merge-box-success-indicator-bg': '#238636', + 'merge-box-success-indicator-border': '#2ea043', + 'merge-box-merged-icon-bg': '#bc8cff1a', + 'merge-box-merged-icon-text': '#a371f7', + 'merge-box-merged-icon-border': '#bc8cff66', + 'merge-box-merged-box-border': '#bc8cff66', + 'merge-box-neutral-icon-bg': '#c9d1d91a', + 'merge-box-neutral-icon-text': '#8b949e', + 'merge-box-neutral-icon-border': '#c9d1d966', + 'merge-box-neutral-indicator-bg': '#484f58', + 'merge-box-neutral-indicator-border': '#6e7681', + 'merge-box-warning-icon-bg': '#bb80091a', + 'merge-box-warning-icon-text': '#e3b341', + 'merge-box-warning-icon-border': '#bb800966', + 'merge-box-warning-box-border': '#bb800966', + 'merge-box-warning-merge-highlight': '#bb80091a', + 'merge-box-error-icon-bg': '#f851491a', + 'merge-box-error-icon-text': '#f85149', + 'merge-box-error-icon-border': '#f8514966', + 'merge-box-error-indicator-bg': '#da3633', + 'merge-box-error-indicator-border': '#f85149', + 'project-card-bg': '#161b22', + 'project-header-bg': '#0d1117', + 'project-sidebar-bg': '#161b22', + 'project-gradient-in': '#161b22', + 'project-gradient-out': '#161b2200', + 'marketing-icon-primary': '#79c0ff', + 'marketing-icon-secondary': '#1f6feb', + 'prettylights-syntax-comment': '#8b949e', + 'prettylights-syntax-constant': '#79c0ff', + 'prettylights-syntax-entity': '#d2a8ff', + 'prettylights-syntax-storage-modifier-import': '#c9d1d9', + 'prettylights-syntax-entity-tag': '#7ee787', + 'prettylights-syntax-keyword': '#ff7b72', + 'prettylights-syntax-string': '#a5d6ff', + 'prettylights-syntax-variable': '#ffa657', + 'prettylights-syntax-brackethighlighter-unmatched': '#f85149', + 'prettylights-syntax-invalid-illegal-text': '#f0f6fc', + 'prettylights-syntax-invalid-illegal-bg': '#8e1519', + 'prettylights-syntax-carriage-return-text': '#f0f6fc', + 'prettylights-syntax-carriage-return-bg': '#b62324', + 'prettylights-syntax-string-regexp': '#7ee787', + 'prettylights-syntax-markup-list': '#f2cc60', + 'prettylights-syntax-markup-heading': '#1f6feb', + 'prettylights-syntax-markup-italic': '#c9d1d9', + 'prettylights-syntax-markup-bold': '#c9d1d9', + 'prettylights-syntax-markup-deleted-text': '#ffdcd7', + 'prettylights-syntax-markup-deleted-bg': '#67060c', + 'prettylights-syntax-markup-inserted-text': '#aff5b4', + 'prettylights-syntax-markup-inserted-bg': '#033a16', + 'prettylights-syntax-markup-changed-text': '#ffdfb6', + 'prettylights-syntax-markup-changed-bg': '#5a1e02', + 'prettylights-syntax-markup-ignored-text': '#c9d1d9', + 'prettylights-syntax-markup-ignored-bg': '#1158c7', + 'prettylights-syntax-meta-diff-range': '#d2a8ff', + 'prettylights-syntax-brackethighlighter-angle': '#8b949e', + 'prettylights-syntax-sublimelinter-gutter-mark': '#484f58', + 'prettylights-syntax-constant-other-reference-link': '#a5d6ff', + 'codemirror-text': '#c9d1d9', + 'codemirror-bg': '#0d1117', + 'codemirror-gutters-bg': '#0d1117', + 'codemirror-guttermarker-text': '#0d1117', + 'codemirror-guttermarker-subtle-text': '#6e7681', + 'codemirror-linenumber-text': '#8b949e', + 'codemirror-cursor': '#f0f6fc', + 'codemirror-selection-bg': '#79c0ff4d', + 'codemirror-activeline-bg': '#161b22', + 'codemirror-matchingbracket-text': '#c9d1d9', + 'codemirror-lines-bg': '#0d1117', + 'codemirror-syntax-comment': '#8b949e', + 'codemirror-syntax-constant': '#79c0ff', + 'codemirror-syntax-entity': '#d2a8ff', + 'codemirror-syntax-keyword': '#ff7b72', + 'codemirror-syntax-storage': '#ff7b72', + 'codemirror-syntax-string': '#a5d6ff', + 'codemirror-syntax-support': '#79c0ff', + 'codemirror-syntax-variable': '#ffa657', + 'ansi-black': '#0d1117', + 'ansi-black-bright': '#161b22', + 'ansi-white': '#b1bac4', + 'ansi-white-bright': '#b1bac4', + 'ansi-gray': '#6e7681', + 'ansi-red': '#ff7b72', + 'ansi-red-bright': '#ffa198', + 'ansi-green': '#3fb950', + 'ansi-green-bright': '#56d364', + 'ansi-yellow': '#d29922', + 'ansi-yellow-bright': '#e3b341', + 'ansi-blue': '#58a6ff', + 'ansi-blue-bright': '#79c0ff', + 'ansi-magenta': '#bc8cff', + 'ansi-magenta-bright': '#d2a8ff', + 'ansi-cyan': '#76e3ea', + 'ansi-cyan-bright': '#b3f0ff', +); diff --git a/src/styles/index.scss b/src/styles/index.scss index 5f5786e..85a3e31 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,7 +1,6 @@ @import '~nprogress/nprogress.css'; -@import './dark/export.scss'; -@import './light/export.scss'; +@import './themes.scss'; $name: gitako; diff --git a/src/styles/light/export.scss b/src/styles/light/export.scss deleted file mode 100644 index 1253cf6..0000000 --- a/src/styles/light/export.scss +++ /dev/null @@ -1,568 +0,0 @@ -@use './variables.scss' as variables; - -:root { - --gitako-auto-black: #{variables.$auto-black}; - --gitako-auto-white: #{variables.$auto-white}; - --gitako-auto-gray-0: #{variables.$auto-gray-0}; - --gitako-auto-gray-1: #{variables.$auto-gray-1}; - --gitako-auto-gray-2: #{variables.$auto-gray-2}; - --gitako-auto-gray-3: #{variables.$auto-gray-3}; - --gitako-auto-gray-4: #{variables.$auto-gray-4}; - --gitako-auto-gray-5: #{variables.$auto-gray-5}; - --gitako-auto-gray-6: #{variables.$auto-gray-6}; - --gitako-auto-gray-7: #{variables.$auto-gray-7}; - --gitako-auto-gray-8: #{variables.$auto-gray-8}; - --gitako-auto-gray-9: #{variables.$auto-gray-9}; - --gitako-auto-blue-0: #{variables.$auto-blue-0}; - --gitako-auto-blue-1: #{variables.$auto-blue-1}; - --gitako-auto-blue-2: #{variables.$auto-blue-2}; - --gitako-auto-blue-3: #{variables.$auto-blue-3}; - --gitako-auto-blue-4: #{variables.$auto-blue-4}; - --gitako-auto-blue-5: #{variables.$auto-blue-5}; - --gitako-auto-blue-6: #{variables.$auto-blue-6}; - --gitako-auto-blue-7: #{variables.$auto-blue-7}; - --gitako-auto-blue-8: #{variables.$auto-blue-8}; - --gitako-auto-blue-9: #{variables.$auto-blue-9}; - --gitako-auto-green-0: #{variables.$auto-green-0}; - --gitako-auto-green-1: #{variables.$auto-green-1}; - --gitako-auto-green-2: #{variables.$auto-green-2}; - --gitako-auto-green-3: #{variables.$auto-green-3}; - --gitako-auto-green-4: #{variables.$auto-green-4}; - --gitako-auto-green-5: #{variables.$auto-green-5}; - --gitako-auto-green-6: #{variables.$auto-green-6}; - --gitako-auto-green-7: #{variables.$auto-green-7}; - --gitako-auto-green-8: #{variables.$auto-green-8}; - --gitako-auto-green-9: #{variables.$auto-green-9}; - --gitako-auto-yellow-0: #{variables.$auto-yellow-0}; - --gitako-auto-yellow-1: #{variables.$auto-yellow-1}; - --gitako-auto-yellow-2: #{variables.$auto-yellow-2}; - --gitako-auto-yellow-3: #{variables.$auto-yellow-3}; - --gitako-auto-yellow-4: #{variables.$auto-yellow-4}; - --gitako-auto-yellow-5: #{variables.$auto-yellow-5}; - --gitako-auto-yellow-6: #{variables.$auto-yellow-6}; - --gitako-auto-yellow-7: #{variables.$auto-yellow-7}; - --gitako-auto-yellow-8: #{variables.$auto-yellow-8}; - --gitako-auto-yellow-9: #{variables.$auto-yellow-9}; - --gitako-auto-orange-0: #{variables.$auto-orange-0}; - --gitako-auto-orange-1: #{variables.$auto-orange-1}; - --gitako-auto-orange-2: #{variables.$auto-orange-2}; - --gitako-auto-orange-3: #{variables.$auto-orange-3}; - --gitako-auto-orange-4: #{variables.$auto-orange-4}; - --gitako-auto-orange-5: #{variables.$auto-orange-5}; - --gitako-auto-orange-6: #{variables.$auto-orange-6}; - --gitako-auto-orange-7: #{variables.$auto-orange-7}; - --gitako-auto-orange-8: #{variables.$auto-orange-8}; - --gitako-auto-orange-9: #{variables.$auto-orange-9}; - --gitako-auto-red-0: #{variables.$auto-red-0}; - --gitako-auto-red-1: #{variables.$auto-red-1}; - --gitako-auto-red-2: #{variables.$auto-red-2}; - --gitako-auto-red-3: #{variables.$auto-red-3}; - --gitako-auto-red-4: #{variables.$auto-red-4}; - --gitako-auto-red-5: #{variables.$auto-red-5}; - --gitako-auto-red-6: #{variables.$auto-red-6}; - --gitako-auto-red-7: #{variables.$auto-red-7}; - --gitako-auto-red-8: #{variables.$auto-red-8}; - --gitako-auto-red-9: #{variables.$auto-red-9}; - --gitako-auto-purple-0: #{variables.$auto-purple-0}; - --gitako-auto-purple-1: #{variables.$auto-purple-1}; - --gitako-auto-purple-2: #{variables.$auto-purple-2}; - --gitako-auto-purple-3: #{variables.$auto-purple-3}; - --gitako-auto-purple-4: #{variables.$auto-purple-4}; - --gitako-auto-purple-5: #{variables.$auto-purple-5}; - --gitako-auto-purple-6: #{variables.$auto-purple-6}; - --gitako-auto-purple-7: #{variables.$auto-purple-7}; - --gitako-auto-purple-8: #{variables.$auto-purple-8}; - --gitako-auto-purple-9: #{variables.$auto-purple-9}; - --gitako-auto-pink-0: #{variables.$auto-pink-0}; - --gitako-auto-pink-1: #{variables.$auto-pink-1}; - --gitako-auto-pink-2: #{variables.$auto-pink-2}; - --gitako-auto-pink-3: #{variables.$auto-pink-3}; - --gitako-auto-pink-4: #{variables.$auto-pink-4}; - --gitako-auto-pink-5: #{variables.$auto-pink-5}; - --gitako-auto-pink-6: #{variables.$auto-pink-6}; - --gitako-auto-pink-7: #{variables.$auto-pink-7}; - --gitako-auto-pink-8: #{variables.$auto-pink-8}; - --gitako-auto-pink-9: #{variables.$auto-pink-9}; - --gitako-text-primary: #{variables.$text-primary}; - --gitako-text-secondary: #{variables.$text-secondary}; - --gitako-text-tertiary: #{variables.$text-tertiary}; - --gitako-text-placeholder: #{variables.$text-placeholder}; - --gitako-text-disabled: #{variables.$text-disabled}; - --gitako-text-inverse: #{variables.$text-inverse}; - --gitako-text-link: #{variables.$text-link}; - --gitako-text-danger: #{variables.$text-danger}; - --gitako-text-success: #{variables.$text-success}; - --gitako-text-warning: #{variables.$text-warning}; - --gitako-text-white: #{variables.$text-white}; - --gitako-icon-primary: #{variables.$icon-primary}; - --gitako-icon-secondary: #{variables.$icon-secondary}; - --gitako-icon-tertiary: #{variables.$icon-tertiary}; - --gitako-icon-info: #{variables.$icon-info}; - --gitako-icon-danger: #{variables.$icon-danger}; - --gitako-icon-success: #{variables.$icon-success}; - --gitako-icon-warning: #{variables.$icon-warning}; - --gitako-border-primary: #{variables.$border-primary}; - --gitako-border-secondary: #{variables.$border-secondary}; - --gitako-border-tertiary: #{variables.$border-tertiary}; - --gitako-border-overlay: #{variables.$border-overlay}; - --gitako-border-inverse: #{variables.$border-inverse}; - --gitako-border-info: #{variables.$border-info}; - --gitako-border-danger: #{variables.$border-danger}; - --gitako-border-success: #{variables.$border-success}; - --gitako-border-warning: #{variables.$border-warning}; - --gitako-bg-canvas: #{variables.$bg-canvas}; - --gitako-bg-canvas-mobile: #{variables.$bg-canvas-mobile}; - --gitako-bg-canvas-inverse: #{variables.$bg-canvas-inverse}; - --gitako-bg-canvas-inset: #{variables.$bg-canvas-inset}; - --gitako-bg-primary: #{variables.$bg-primary}; - --gitako-bg-secondary: #{variables.$bg-secondary}; - --gitako-bg-tertiary: #{variables.$bg-tertiary}; - --gitako-bg-overlay: #{variables.$bg-overlay}; - --gitako-bg-backdrop: #{variables.$bg-backdrop}; - --gitako-bg-info: #{variables.$bg-info}; - --gitako-bg-info-inverse: #{variables.$bg-info-inverse}; - --gitako-bg-danger: #{variables.$bg-danger}; - --gitako-bg-danger-inverse: #{variables.$bg-danger-inverse}; - --gitako-bg-success: #{variables.$bg-success}; - --gitako-bg-success-inverse: #{variables.$bg-success-inverse}; - --gitako-bg-warning: #{variables.$bg-warning}; - --gitako-bg-warning-inverse: #{variables.$bg-warning-inverse}; - --gitako-shadow-small: #{variables.$shadow-small}; - --gitako-shadow-medium: #{variables.$shadow-medium}; - --gitako-shadow-large: #{variables.$shadow-large}; - --gitako-shadow-extra-large: #{variables.$shadow-extra-large}; - --gitako-shadow-highlight: #{variables.$shadow-highlight}; - --gitako-shadow-inset: #{variables.$shadow-inset}; - --gitako-state-hover-primary-bg: #{variables.$state-hover-primary-bg}; - --gitako-state-hover-primary-border: #{variables.$state-hover-primary-border}; - --gitako-state-hover-primary-text: #{variables.$state-hover-primary-text}; - --gitako-state-hover-primary-icon: #{variables.$state-hover-primary-icon}; - --gitako-state-hover-secondary-bg: #{variables.$state-hover-secondary-bg}; - --gitako-state-hover-secondary-border: #{variables.$state-hover-secondary-border}; - --gitako-state-selected-primary-bg: #{variables.$state-selected-primary-bg}; - --gitako-state-selected-primary-border: #{variables.$state-selected-primary-border}; - --gitako-state-selected-primary-text: #{variables.$state-selected-primary-text}; - --gitako-state-selected-primary-icon: #{variables.$state-selected-primary-icon}; - --gitako-state-focus-border: #{variables.$state-focus-border}; - --gitako-state-focus-shadow: #{variables.$state-focus-shadow}; - --gitako-fade-fg-10: #{variables.$fade-fg-10}; - --gitako-fade-fg-15: #{variables.$fade-fg-15}; - --gitako-fade-fg-30: #{variables.$fade-fg-30}; - --gitako-fade-fg-50: #{variables.$fade-fg-50}; - --gitako-fade-fg-70: #{variables.$fade-fg-70}; - --gitako-fade-fg-85: #{variables.$fade-fg-85}; - --gitako-fade-black-10: #{variables.$fade-black-10}; - --gitako-fade-black-15: #{variables.$fade-black-15}; - --gitako-fade-black-30: #{variables.$fade-black-30}; - --gitako-fade-black-50: #{variables.$fade-black-50}; - --gitako-fade-black-70: #{variables.$fade-black-70}; - --gitako-fade-black-85: #{variables.$fade-black-85}; - --gitako-fade-white-10: #{variables.$fade-white-10}; - --gitako-fade-white-15: #{variables.$fade-white-15}; - --gitako-fade-white-30: #{variables.$fade-white-30}; - --gitako-fade-white-50: #{variables.$fade-white-50}; - --gitako-fade-white-70: #{variables.$fade-white-70}; - --gitako-fade-white-85: #{variables.$fade-white-85}; - --gitako-alert-info-text: #{variables.$alert-info-text}; - --gitako-alert-info-icon: #{variables.$alert-info-icon}; - --gitako-alert-info-bg: #{variables.$alert-info-bg}; - --gitako-alert-info-border: #{variables.$alert-info-border}; - --gitako-alert-warn-text: #{variables.$alert-warn-text}; - --gitako-alert-warn-icon: #{variables.$alert-warn-icon}; - --gitako-alert-warn-bg: #{variables.$alert-warn-bg}; - --gitako-alert-warn-border: #{variables.$alert-warn-border}; - --gitako-alert-error-text: #{variables.$alert-error-text}; - --gitako-alert-error-icon: #{variables.$alert-error-icon}; - --gitako-alert-error-bg: #{variables.$alert-error-bg}; - --gitako-alert-error-border: #{variables.$alert-error-border}; - --gitako-alert-success-text: #{variables.$alert-success-text}; - --gitako-alert-success-icon: #{variables.$alert-success-icon}; - --gitako-alert-success-bg: #{variables.$alert-success-bg}; - --gitako-alert-success-border: #{variables.$alert-success-border}; - --gitako-autocomplete-shadow: #{variables.$autocomplete-shadow}; - --gitako-autocomplete-row-border: #{variables.$autocomplete-row-border}; - --gitako-blankslate-icon: #{variables.$blankslate-icon}; - --gitako-btn-text: #{variables.$btn-text}; - --gitako-btn-bg: #{variables.$btn-bg}; - --gitako-btn-border: #{variables.$btn-border}; - --gitako-btn-shadow: #{variables.$btn-shadow}; - --gitako-btn-inset-shadow: #{variables.$btn-inset-shadow}; - --gitako-btn-hover-bg: #{variables.$btn-hover-bg}; - --gitako-btn-hover-border: #{variables.$btn-hover-border}; - --gitako-btn-selected-bg: #{variables.$btn-selected-bg}; - --gitako-btn-focus-bg: #{variables.$btn-focus-bg}; - --gitako-btn-focus-border: #{variables.$btn-focus-border}; - --gitako-btn-focus-shadow: #{variables.$btn-focus-shadow}; - --gitako-btn-shadow-active: #{variables.$btn-shadow-active}; - --gitako-btn-shadow-input-focus: #{variables.$btn-shadow-input-focus}; - --gitako-btn-primary-text: #{variables.$btn-primary-text}; - --gitako-btn-primary-bg: #{variables.$btn-primary-bg}; - --gitako-btn-primary-border: #{variables.$btn-primary-border}; - --gitako-btn-primary-shadow: #{variables.$btn-primary-shadow}; - --gitako-btn-primary-inset-shadow: #{variables.$btn-primary-inset-shadow}; - --gitako-btn-primary-hover-bg: #{variables.$btn-primary-hover-bg}; - --gitako-btn-primary-hover-border: #{variables.$btn-primary-hover-border}; - --gitako-btn-primary-selected-bg: #{variables.$btn-primary-selected-bg}; - --gitako-btn-primary-selected-shadow: #{variables.$btn-primary-selected-shadow}; - --gitako-btn-primary-disabled-text: #{variables.$btn-primary-disabled-text}; - --gitako-btn-primary-disabled-bg: #{variables.$btn-primary-disabled-bg}; - --gitako-btn-primary-disabled-border: #{variables.$btn-primary-disabled-border}; - --gitako-btn-primary-focus-bg: #{variables.$btn-primary-focus-bg}; - --gitako-btn-primary-focus-border: #{variables.$btn-primary-focus-border}; - --gitako-btn-primary-focus-shadow: #{variables.$btn-primary-focus-shadow}; - --gitako-btn-primary-icon: #{variables.$btn-primary-icon}; - --gitako-btn-primary-counter-bg: #{variables.$btn-primary-counter-bg}; - --gitako-btn-outline-text: #{variables.$btn-outline-text}; - --gitako-btn-outline-hover-text: #{variables.$btn-outline-hover-text}; - --gitako-btn-outline-hover-bg: #{variables.$btn-outline-hover-bg}; - --gitako-btn-outline-hover-border: #{variables.$btn-outline-hover-border}; - --gitako-btn-outline-hover-shadow: #{variables.$btn-outline-hover-shadow}; - --gitako-btn-outline-hover-inset-shadow: #{variables.$btn-outline-hover-inset-shadow}; - --gitako-btn-outline-hover-counter-bg: #{variables.$btn-outline-hover-counter-bg}; - --gitako-btn-outline-selected-text: #{variables.$btn-outline-selected-text}; - --gitako-btn-outline-selected-bg: #{variables.$btn-outline-selected-bg}; - --gitako-btn-outline-selected-border: #{variables.$btn-outline-selected-border}; - --gitako-btn-outline-selected-shadow: #{variables.$btn-outline-selected-shadow}; - --gitako-btn-outline-disabled-text: #{variables.$btn-outline-disabled-text}; - --gitako-btn-outline-disabled-bg: #{variables.$btn-outline-disabled-bg}; - --gitako-btn-outline-disabled-counter-bg: #{variables.$btn-outline-disabled-counter-bg}; - --gitako-btn-outline-focus-border: #{variables.$btn-outline-focus-border}; - --gitako-btn-outline-focus-shadow: #{variables.$btn-outline-focus-shadow}; - --gitako-btn-outline-counter-bg: #{variables.$btn-outline-counter-bg}; - --gitako-btn-danger-text: #{variables.$btn-danger-text}; - --gitako-btn-danger-hover-text: #{variables.$btn-danger-hover-text}; - --gitako-btn-danger-hover-bg: #{variables.$btn-danger-hover-bg}; - --gitako-btn-danger-hover-border: #{variables.$btn-danger-hover-border}; - --gitako-btn-danger-hover-shadow: #{variables.$btn-danger-hover-shadow}; - --gitako-btn-danger-hover-inset-shadow: #{variables.$btn-danger-hover-inset-shadow}; - --gitako-btn-danger-hover-counter-bg: #{variables.$btn-danger-hover-counter-bg}; - --gitako-btn-danger-selected-text: #{variables.$btn-danger-selected-text}; - --gitako-btn-danger-selected-bg: #{variables.$btn-danger-selected-bg}; - --gitako-btn-danger-selected-border: #{variables.$btn-danger-selected-border}; - --gitako-btn-danger-selected-shadow: #{variables.$btn-danger-selected-shadow}; - --gitako-btn-danger-disabled-text: #{variables.$btn-danger-disabled-text}; - --gitako-btn-danger-disabled-bg: #{variables.$btn-danger-disabled-bg}; - --gitako-btn-danger-disabled-counter-bg: #{variables.$btn-danger-disabled-counter-bg}; - --gitako-btn-danger-focus-border: #{variables.$btn-danger-focus-border}; - --gitako-btn-danger-focus-shadow: #{variables.$btn-danger-focus-shadow}; - --gitako-btn-danger-counter-bg: #{variables.$btn-danger-counter-bg}; - --gitako-btn-counter-bg: #{variables.$btn-counter-bg}; - --gitako-counter-text: #{variables.$counter-text}; - --gitako-counter-bg: #{variables.$counter-bg}; - --gitako-counter-primary-text: #{variables.$counter-primary-text}; - --gitako-counter-primary-bg: #{variables.$counter-primary-bg}; - --gitako-counter-secondary-text: #{variables.$counter-secondary-text}; - --gitako-dropdown-shadow: #{variables.$dropdown-shadow}; - --gitako-label-border: #{variables.$label-border}; - --gitako-label-primary-text: #{variables.$label-primary-text}; - --gitako-label-primary-border: #{variables.$label-primary-border}; - --gitako-label-secondary-text: #{variables.$label-secondary-text}; - --gitako-label-secondary-border: #{variables.$label-secondary-border}; - --gitako-label-info-text: #{variables.$label-info-text}; - --gitako-label-info-border: #{variables.$label-info-border}; - --gitako-label-success-text: #{variables.$label-success-text}; - --gitako-label-success-border: #{variables.$label-success-border}; - --gitako-label-warning-text: #{variables.$label-warning-text}; - --gitako-label-warning-border: #{variables.$label-warning-border}; - --gitako-label-danger-text: #{variables.$label-danger-text}; - --gitako-label-danger-border: #{variables.$label-danger-border}; - --gitako-label-orange-text: #{variables.$label-orange-text}; - --gitako-label-orange-border: #{variables.$label-orange-border}; - --gitako-input-bg: #{variables.$input-bg}; - --gitako-input-contrast-bg: #{variables.$input-contrast-bg}; - --gitako-input-border: #{variables.$input-border}; - --gitako-input-shadow: #{variables.$input-shadow}; - --gitako-input-disabled-bg: #{variables.$input-disabled-bg}; - --gitako-input-disabled-border: #{variables.$input-disabled-border}; - --gitako-input-warning-border: #{variables.$input-warning-border}; - --gitako-input-error-border: #{variables.$input-error-border}; - --gitako-input-tooltip-success-text: #{variables.$input-tooltip-success-text}; - --gitako-input-tooltip-success-bg: #{variables.$input-tooltip-success-bg}; - --gitako-input-tooltip-success-border: #{variables.$input-tooltip-success-border}; - --gitako-input-tooltip-warning-text: #{variables.$input-tooltip-warning-text}; - --gitako-input-tooltip-warning-bg: #{variables.$input-tooltip-warning-bg}; - --gitako-input-tooltip-warning-border: #{variables.$input-tooltip-warning-border}; - --gitako-input-tooltip-error-text: #{variables.$input-tooltip-error-text}; - --gitako-input-tooltip-error-bg: #{variables.$input-tooltip-error-bg}; - --gitako-input-tooltip-error-border: #{variables.$input-tooltip-error-border}; - --gitako-avatar-bg: #{variables.$avatar-bg}; - --gitako-avatar-border: #{variables.$avatar-border}; - --gitako-avatar-stack-fade: #{variables.$avatar-stack-fade}; - --gitako-avatar-stack-fade-more: #{variables.$avatar-stack-fade-more}; - --gitako-avatar-child-shadow: #{variables.$avatar-child-shadow}; - --gitako-toast-text: #{variables.$toast-text}; - --gitako-toast-bg: #{variables.$toast-bg}; - --gitako-toast-border: #{variables.$toast-border}; - --gitako-toast-shadow: #{variables.$toast-shadow}; - --gitako-toast-icon: #{variables.$toast-icon}; - --gitako-toast-icon-bg: #{variables.$toast-icon-bg}; - --gitako-toast-icon-border: #{variables.$toast-icon-border}; - --gitako-toast-success-text: #{variables.$toast-success-text}; - --gitako-toast-success-border: #{variables.$toast-success-border}; - --gitako-toast-success-icon: #{variables.$toast-success-icon}; - --gitako-toast-success-icon-bg: #{variables.$toast-success-icon-bg}; - --gitako-toast-success-icon-border: #{variables.$toast-success-icon-border}; - --gitako-toast-warning-text: #{variables.$toast-warning-text}; - --gitako-toast-warning-border: #{variables.$toast-warning-border}; - --gitako-toast-warning-icon: #{variables.$toast-warning-icon}; - --gitako-toast-warning-icon-bg: #{variables.$toast-warning-icon-bg}; - --gitako-toast-warning-icon-border: #{variables.$toast-warning-icon-border}; - --gitako-toast-danger-text: #{variables.$toast-danger-text}; - --gitako-toast-danger-border: #{variables.$toast-danger-border}; - --gitako-toast-danger-icon: #{variables.$toast-danger-icon}; - --gitako-toast-danger-icon-bg: #{variables.$toast-danger-icon-bg}; - --gitako-toast-danger-icon-border: #{variables.$toast-danger-icon-border}; - --gitako-toast-loading-text: #{variables.$toast-loading-text}; - --gitako-toast-loading-border: #{variables.$toast-loading-border}; - --gitako-toast-loading-icon: #{variables.$toast-loading-icon}; - --gitako-toast-loading-icon-bg: #{variables.$toast-loading-icon-bg}; - --gitako-toast-loading-icon-border: #{variables.$toast-loading-icon-border}; - --gitako-timeline-text: #{variables.$timeline-text}; - --gitako-timeline-badge-bg: #{variables.$timeline-badge-bg}; - --gitako-timeline-target-badge-border: #{variables.$timeline-target-badge-border}; - --gitako-timeline-target-badge-shadow: #{variables.$timeline-target-badge-shadow}; - --gitako-select-menu-border-secondary: #{variables.$select-menu-border-secondary}; - --gitako-select-menu-shadow: #{variables.$select-menu-shadow}; - --gitako-select-menu-backdrop-bg: #{variables.$select-menu-backdrop-bg}; - --gitako-select-menu-backdrop-border: #{variables.$select-menu-backdrop-border}; - --gitako-select-menu-tap-highlight: #{variables.$select-menu-tap-highlight}; - --gitako-select-menu-tap-focus-bg: #{variables.$select-menu-tap-focus-bg}; - --gitako-box-blue-border: #{variables.$box-blue-border}; - --gitako-box-row-yellow-bg: #{variables.$box-row-yellow-bg}; - --gitako-box-row-blue-bg: #{variables.$box-row-blue-bg}; - --gitako-box-header-blue-bg: #{variables.$box-header-blue-bg}; - --gitako-box-header-blue-border: #{variables.$box-header-blue-border}; - --gitako-box-border-info: #{variables.$box-border-info}; - --gitako-box-bg-info: #{variables.$box-bg-info}; - --gitako-box-border-warning: #{variables.$box-border-warning}; - --gitako-box-bg-warning: #{variables.$box-bg-warning}; - --gitako-branch-name-text: #{variables.$branch-name-text}; - --gitako-branch-name-icon: #{variables.$branch-name-icon}; - --gitako-branch-name-bg: #{variables.$branch-name-bg}; - --gitako-branch-name-link-text: #{variables.$branch-name-link-text}; - --gitako-branch-name-link-icon: #{variables.$branch-name-link-icon}; - --gitako-branch-name-link-bg: #{variables.$branch-name-link-bg}; - --gitako-markdown-code-bg: #{variables.$markdown-code-bg}; - --gitako-markdown-frame-border: #{variables.$markdown-frame-border}; - --gitako-markdown-blockquote-border: #{variables.$markdown-blockquote-border}; - --gitako-markdown-table-border: #{variables.$markdown-table-border}; - --gitako-markdown-table-tr-border: #{variables.$markdown-table-tr-border}; - --gitako-menu-heading-text: #{variables.$menu-heading-text}; - --gitako-menu-border-active: #{variables.$menu-border-active}; - --gitako-menu-bg-active: #{variables.$menu-bg-active}; - --gitako-sidenav-selected-bg: #{variables.$sidenav-selected-bg}; - --gitako-sidenav-border-active: #{variables.$sidenav-border-active}; - --gitako-header-text: #{variables.$header-text}; - --gitako-header-bg: #{variables.$header-bg}; - --gitako-header-logo: #{variables.$header-logo}; - --gitako-filter-item-bar-bg: #{variables.$filter-item-bar-bg}; - --gitako-hidden-text-expander-bg: #{variables.$hidden-text-expander-bg}; - --gitako-hidden-text-expander-bg-hover: #{variables.$hidden-text-expander-bg-hover}; - --gitako-drag-and-drop-border: #{variables.$drag-and-drop-border}; - --gitako-upload-enabled-border: #{variables.$upload-enabled-border}; - --gitako-upload-enabled-border-focused: #{variables.$upload-enabled-border-focused}; - --gitako-previewable-comment-form-border: #{variables.$previewable-comment-form-border}; - --gitako-underlinenav-border: #{variables.$underlinenav-border}; - --gitako-underlinenav-border-hover: #{variables.$underlinenav-border-hover}; - --gitako-underlinenav-border-active: #{variables.$underlinenav-border-active}; - --gitako-underlinenav-text: #{variables.$underlinenav-text}; - --gitako-underlinenav-text-hover: #{variables.$underlinenav-text-hover}; - --gitako-underlinenav-text-active: #{variables.$underlinenav-text-active}; - --gitako-underlinenav-icon: #{variables.$underlinenav-icon}; - --gitako-underlinenav-icon-hover: #{variables.$underlinenav-icon-hover}; - --gitako-underlinenav-icon-active: #{variables.$underlinenav-icon-active}; - --gitako-underlinenav-counter-text: #{variables.$underlinenav-counter-text}; - --gitako-verified-badge-text: #{variables.$verified-badge-text}; - --gitako-verified-badge-bg: #{variables.$verified-badge-bg}; - --gitako-verified-badge-border: #{variables.$verified-badge-border}; - --gitako-social-count-bg: #{variables.$social-count-bg}; - --gitako-tooltip-text: #{variables.$tooltip-text}; - --gitako-tooltip-bg: #{variables.$tooltip-bg}; - --gitako-header-search-bg: #{variables.$header-search-bg}; - --gitako-header-search-border: #{variables.$header-search-border}; - --gitako-search-keyword-hl: #{variables.$search-keyword-hl}; - --gitako-diffstat-neutral-bg: #{variables.$diffstat-neutral-bg}; - --gitako-diffstat-neutral-border: #{variables.$diffstat-neutral-border}; - --gitako-diffstat-deletion-bg: #{variables.$diffstat-deletion-bg}; - --gitako-diffstat-deletion-border: #{variables.$diffstat-deletion-border}; - --gitako-diffstat-addition-bg: #{variables.$diffstat-addition-bg}; - --gitako-diffstat-addition-border: #{variables.$diffstat-addition-border}; - --gitako-files-explorer-icon: #{variables.$files-explorer-icon}; - --gitako-hl-author-bg: #{variables.$hl-author-bg}; - --gitako-hl-author-border: #{variables.$hl-author-border}; - --gitako-logo-subdued: #{variables.$logo-subdued}; - --gitako-discussion-border: #{variables.$discussion-border}; - --gitako-discussion-bg-success: #{variables.$discussion-bg-success}; - --gitako-actions-workflow-table-sticky-bg: #{variables.$actions-workflow-table-sticky-bg}; - --gitako-repo-language-color-border: #{variables.$repo-language-color-border}; - --gitako-code-selection-bg: #{variables.$code-selection-bg}; - --gitako-blob-line-highlight-bg: #{variables.$blob-line-highlight-bg}; - --gitako-blob-line-highlight-border: #{variables.$blob-line-highlight-border}; - --gitako-diff-addition-text: #{variables.$diff-addition-text}; - --gitako-diff-addition-bg: #{variables.$diff-addition-bg}; - --gitako-diff-addition-border: #{variables.$diff-addition-border}; - --gitako-diff-deletion-text: #{variables.$diff-deletion-text}; - --gitako-diff-deletion-bg: #{variables.$diff-deletion-bg}; - --gitako-diff-deletion-border: #{variables.$diff-deletion-border}; - --gitako-diff-change-text: #{variables.$diff-change-text}; - --gitako-diff-change-bg: #{variables.$diff-change-bg}; - --gitako-diff-change-border: #{variables.$diff-change-border}; - --gitako-diff-blob-num-text: #{variables.$diff-blob-num-text}; - --gitako-diff-blob-num-hover-text: #{variables.$diff-blob-num-hover-text}; - --gitako-diff-blob-addition-num-text: #{variables.$diff-blob-addition-num-text}; - --gitako-diff-blob-addition-num-hover-text: #{variables.$diff-blob-addition-num-hover-text}; - --gitako-diff-blob-addition-num-bg: #{variables.$diff-blob-addition-num-bg}; - --gitako-diff-blob-addition-line-bg: #{variables.$diff-blob-addition-line-bg}; - --gitako-diff-blob-addition-word-bg: #{variables.$diff-blob-addition-word-bg}; - --gitako-diff-blob-deletion-num-text: #{variables.$diff-blob-deletion-num-text}; - --gitako-diff-blob-deletion-num-hover-text: #{variables.$diff-blob-deletion-num-hover-text}; - --gitako-diff-blob-deletion-num-bg: #{variables.$diff-blob-deletion-num-bg}; - --gitako-diff-blob-deletion-line-bg: #{variables.$diff-blob-deletion-line-bg}; - --gitako-diff-blob-deletion-word-bg: #{variables.$diff-blob-deletion-word-bg}; - --gitako-diff-blob-hunk-text: #{variables.$diff-blob-hunk-text}; - --gitako-diff-blob-hunk-num-bg: #{variables.$diff-blob-hunk-num-bg}; - --gitako-diff-blob-hunk-line-bg: #{variables.$diff-blob-hunk-line-bg}; - --gitako-diff-blob-empty-block-bg: #{variables.$diff-blob-empty-block-bg}; - --gitako-diff-blob-selected-line-highlight-bg: #{variables.$diff-blob-selected-line-highlight-bg}; - --gitako-diff-blob-selected-line-highlight-border: #{variables.$diff-blob-selected-line-highlight-border}; - --gitako-diff-blob-selected-line-highlight-mix-blend-mode: #{variables.$diff-blob-selected-line-highlight-mix-blend-mode}; - --gitako-diff-blob-expander-icon: #{variables.$diff-blob-expander-icon}; - --gitako-diff-blob-expander-hover-icon: #{variables.$diff-blob-expander-hover-icon}; - --gitako-diff-blob-expander-hover-bg: #{variables.$diff-blob-expander-hover-bg}; - --gitako-diff-blob-comment-button-icon: #{variables.$diff-blob-comment-button-icon}; - --gitako-diff-blob-comment-button-bg: #{variables.$diff-blob-comment-button-bg}; - --gitako-diff-blob-comment-button-gradient-bg: #{variables.$diff-blob-comment-button-gradient-bg}; - --gitako-global-nav-logo: #{variables.$global-nav-logo}; - --gitako-global-nav-bg: #{variables.$global-nav-bg}; - --gitako-global-nav-text: #{variables.$global-nav-text}; - --gitako-global-nav-icon: #{variables.$global-nav-icon}; - --gitako-global-nav-input-bg: #{variables.$global-nav-input-bg}; - --gitako-global-nav-input-border: #{variables.$global-nav-input-border}; - --gitako-global-nav-input-icon: #{variables.$global-nav-input-icon}; - --gitako-global-nav-input-placeholder: #{variables.$global-nav-input-placeholder}; - --gitako-calendar-graph-day-bg: #{variables.$calendar-graph-day-bg}; - --gitako-calendar-graph-day-border: #{variables.$calendar-graph-day-border}; - --gitako-calendar-graph-day-l1-bg: #{variables.$calendar-graph-day-l1-bg}; - --gitako-calendar-graph-day-l2-bg: #{variables.$calendar-graph-day-l2-bg}; - --gitako-calendar-graph-day-l3-bg: #{variables.$calendar-graph-day-l3-bg}; - --gitako-calendar-graph-day-l4-bg: #{variables.$calendar-graph-day-l4-bg}; - --gitako-calendar-graph-day-l4-border: #{variables.$calendar-graph-day-l4-border}; - --gitako-calendar-graph-day-l3-border: #{variables.$calendar-graph-day-l3-border}; - --gitako-calendar-graph-day-l2-border: #{variables.$calendar-graph-day-l2-border}; - --gitako-calendar-graph-day-l1-border: #{variables.$calendar-graph-day-l1-border}; - --gitako-footer-invertocat-octicon: #{variables.$footer-invertocat-octicon}; - --gitako-footer-invertocat-octicon-hover: #{variables.$footer-invertocat-octicon-hover}; - --gitako-pr-state-draft-text: #{variables.$pr-state-draft-text}; - --gitako-pr-state-draft-bg: #{variables.$pr-state-draft-bg}; - --gitako-pr-state-draft-border: #{variables.$pr-state-draft-border}; - --gitako-pr-state-open-text: #{variables.$pr-state-open-text}; - --gitako-pr-state-open-bg: #{variables.$pr-state-open-bg}; - --gitako-pr-state-open-border: #{variables.$pr-state-open-border}; - --gitako-pr-state-merged-text: #{variables.$pr-state-merged-text}; - --gitako-pr-state-merged-bg: #{variables.$pr-state-merged-bg}; - --gitako-pr-state-merged-border: #{variables.$pr-state-merged-border}; - --gitako-pr-state-closed-text: #{variables.$pr-state-closed-text}; - --gitako-pr-state-closed-bg: #{variables.$pr-state-closed-bg}; - --gitako-pr-state-closed-border: #{variables.$pr-state-closed-border}; - --gitako-topic-tag-text: #{variables.$topic-tag-text}; - --gitako-topic-tag-bg: #{variables.$topic-tag-bg}; - --gitako-topic-tag-hover-bg: #{variables.$topic-tag-hover-bg}; - --gitako-topic-tag-active-bg: #{variables.$topic-tag-active-bg}; - --gitako-merge-box-success-icon-bg: #{variables.$merge-box-success-icon-bg}; - --gitako-merge-box-success-icon-text: #{variables.$merge-box-success-icon-text}; - --gitako-merge-box-success-icon-border: #{variables.$merge-box-success-icon-border}; - --gitako-merge-box-success-indicator-bg: #{variables.$merge-box-success-indicator-bg}; - --gitako-merge-box-success-indicator-border: #{variables.$merge-box-success-indicator-border}; - --gitako-merge-box-merged-icon-bg: #{variables.$merge-box-merged-icon-bg}; - --gitako-merge-box-merged-icon-text: #{variables.$merge-box-merged-icon-text}; - --gitako-merge-box-merged-icon-border: #{variables.$merge-box-merged-icon-border}; - --gitako-merge-box-merged-box-border: #{variables.$merge-box-merged-box-border}; - --gitako-merge-box-neutral-icon-bg: #{variables.$merge-box-neutral-icon-bg}; - --gitako-merge-box-neutral-icon-text: #{variables.$merge-box-neutral-icon-text}; - --gitako-merge-box-neutral-icon-border: #{variables.$merge-box-neutral-icon-border}; - --gitako-merge-box-neutral-indicator-bg: #{variables.$merge-box-neutral-indicator-bg}; - --gitako-merge-box-neutral-indicator-border: #{variables.$merge-box-neutral-indicator-border}; - --gitako-merge-box-warning-icon-bg: #{variables.$merge-box-warning-icon-bg}; - --gitako-merge-box-warning-icon-text: #{variables.$merge-box-warning-icon-text}; - --gitako-merge-box-warning-icon-border: #{variables.$merge-box-warning-icon-border}; - --gitako-merge-box-warning-box-border: #{variables.$merge-box-warning-box-border}; - --gitako-merge-box-warning-merge-highlight: #{variables.$merge-box-warning-merge-highlight}; - --gitako-merge-box-error-icon-bg: #{variables.$merge-box-error-icon-bg}; - --gitako-merge-box-error-icon-text: #{variables.$merge-box-error-icon-text}; - --gitako-merge-box-error-icon-border: #{variables.$merge-box-error-icon-border}; - --gitako-merge-box-error-indicator-bg: #{variables.$merge-box-error-indicator-bg}; - --gitako-merge-box-error-indicator-border: #{variables.$merge-box-error-indicator-border}; - --gitako-project-card-bg: #{variables.$project-card-bg}; - --gitako-project-header-bg: #{variables.$project-header-bg}; - --gitako-project-sidebar-bg: #{variables.$project-sidebar-bg}; - --gitako-project-gradient-in: #{variables.$project-gradient-in}; - --gitako-project-gradient-out: #{variables.$project-gradient-out}; - --gitako-marketing-icon-primary: #{variables.$marketing-icon-primary}; - --gitako-marketing-icon-secondary: #{variables.$marketing-icon-secondary}; - --gitako-prettylights-syntax-comment: #{variables.$prettylights-syntax-comment}; - --gitako-prettylights-syntax-constant: #{variables.$prettylights-syntax-constant}; - --gitako-prettylights-syntax-entity: #{variables.$prettylights-syntax-entity}; - --gitako-prettylights-syntax-storage-modifier-import: #{variables.$prettylights-syntax-storage-modifier-import}; - --gitako-prettylights-syntax-entity-tag: #{variables.$prettylights-syntax-entity-tag}; - --gitako-prettylights-syntax-keyword: #{variables.$prettylights-syntax-keyword}; - --gitako-prettylights-syntax-string: #{variables.$prettylights-syntax-string}; - --gitako-prettylights-syntax-variable: #{variables.$prettylights-syntax-variable}; - --gitako-prettylights-syntax-brackethighlighter-unmatched: #{variables.$prettylights-syntax-brackethighlighter-unmatched}; - --gitako-prettylights-syntax-invalid-illegal-text: #{variables.$prettylights-syntax-invalid-illegal-text}; - --gitako-prettylights-syntax-invalid-illegal-bg: #{variables.$prettylights-syntax-invalid-illegal-bg}; - --gitako-prettylights-syntax-carriage-return-text: #{variables.$prettylights-syntax-carriage-return-text}; - --gitako-prettylights-syntax-carriage-return-bg: #{variables.$prettylights-syntax-carriage-return-bg}; - --gitako-prettylights-syntax-string-regexp: #{variables.$prettylights-syntax-string-regexp}; - --gitako-prettylights-syntax-markup-list: #{variables.$prettylights-syntax-markup-list}; - --gitako-prettylights-syntax-markup-heading: #{variables.$prettylights-syntax-markup-heading}; - --gitako-prettylights-syntax-markup-italic: #{variables.$prettylights-syntax-markup-italic}; - --gitako-prettylights-syntax-markup-bold: #{variables.$prettylights-syntax-markup-bold}; - --gitako-prettylights-syntax-markup-deleted-text: #{variables.$prettylights-syntax-markup-deleted-text}; - --gitako-prettylights-syntax-markup-deleted-bg: #{variables.$prettylights-syntax-markup-deleted-bg}; - --gitako-prettylights-syntax-markup-inserted-text: #{variables.$prettylights-syntax-markup-inserted-text}; - --gitako-prettylights-syntax-markup-inserted-bg: #{variables.$prettylights-syntax-markup-inserted-bg}; - --gitako-prettylights-syntax-markup-changed-text: #{variables.$prettylights-syntax-markup-changed-text}; - --gitako-prettylights-syntax-markup-changed-bg: #{variables.$prettylights-syntax-markup-changed-bg}; - --gitako-prettylights-syntax-markup-ignored-text: #{variables.$prettylights-syntax-markup-ignored-text}; - --gitako-prettylights-syntax-markup-ignored-bg: #{variables.$prettylights-syntax-markup-ignored-bg}; - --gitako-prettylights-syntax-meta-diff-range: #{variables.$prettylights-syntax-meta-diff-range}; - --gitako-prettylights-syntax-brackethighlighter-angle: #{variables.$prettylights-syntax-brackethighlighter-angle}; - --gitako-prettylights-syntax-sublimelinter-gutter-mark: #{variables.$prettylights-syntax-sublimelinter-gutter-mark}; - --gitako-prettylights-syntax-constant-other-reference-link: #{variables.$prettylights-syntax-constant-other-reference-link}; - --gitako-codemirror-text: #{variables.$codemirror-text}; - --gitako-codemirror-bg: #{variables.$codemirror-bg}; - --gitako-codemirror-gutters-bg: #{variables.$codemirror-gutters-bg}; - --gitako-codemirror-guttermarker-text: #{variables.$codemirror-guttermarker-text}; - --gitako-codemirror-guttermarker-subtle-text: #{variables.$codemirror-guttermarker-subtle-text}; - --gitako-codemirror-linenumber-text: #{variables.$codemirror-linenumber-text}; - --gitako-codemirror-cursor: #{variables.$codemirror-cursor}; - --gitako-codemirror-selection-bg: #{variables.$codemirror-selection-bg}; - --gitako-codemirror-activeline-bg: #{variables.$codemirror-activeline-bg}; - --gitako-codemirror-matchingbracket-text: #{variables.$codemirror-matchingbracket-text}; - --gitako-codemirror-lines-bg: #{variables.$codemirror-lines-bg}; - --gitako-codemirror-syntax-comment: #{variables.$codemirror-syntax-comment}; - --gitako-codemirror-syntax-constant: #{variables.$codemirror-syntax-constant}; - --gitako-codemirror-syntax-entity: #{variables.$codemirror-syntax-entity}; - --gitako-codemirror-syntax-keyword: #{variables.$codemirror-syntax-keyword}; - --gitako-codemirror-syntax-storage: #{variables.$codemirror-syntax-storage}; - --gitako-codemirror-syntax-string: #{variables.$codemirror-syntax-string}; - --gitako-codemirror-syntax-support: #{variables.$codemirror-syntax-support}; - --gitako-codemirror-syntax-variable: #{variables.$codemirror-syntax-variable}; - --gitako-ansi-black: #{variables.$ansi-black}; - --gitako-ansi-black-bright: #{variables.$ansi-black-bright}; - --gitako-ansi-white: #{variables.$ansi-white}; - --gitako-ansi-white-bright: #{variables.$ansi-white-bright}; - --gitako-ansi-gray: #{variables.$ansi-gray}; - --gitako-ansi-red: #{variables.$ansi-red}; - --gitako-ansi-red-bright: #{variables.$ansi-red-bright}; - --gitako-ansi-green: #{variables.$ansi-green}; - --gitako-ansi-green-bright: #{variables.$ansi-green-bright}; - --gitako-ansi-yellow: #{variables.$ansi-yellow}; - --gitako-ansi-yellow-bright: #{variables.$ansi-yellow-bright}; - --gitako-ansi-blue: #{variables.$ansi-blue}; - --gitako-ansi-blue-bright: #{variables.$ansi-blue-bright}; - --gitako-ansi-magenta: #{variables.$ansi-magenta}; - --gitako-ansi-magenta-bright: #{variables.$ansi-magenta-bright}; - --gitako-ansi-cyan: #{variables.$ansi-cyan}; - --gitako-ansi-cyan-bright: #{variables.$ansi-cyan-bright}; -} diff --git a/src/styles/light/variables.scss b/src/styles/light/variables.scss index 6e3c87d..ab58492 100644 --- a/src/styles/light/variables.scss +++ b/src/styles/light/variables.scss @@ -1,564 +1,566 @@ -$auto-black: #1b1f23; -$auto-white: #fff; -$auto-gray-0: #fafbfc; -$auto-gray-1: #f6f8fa; -$auto-gray-2: #e1e4e8; -$auto-gray-3: #d1d5da; -$auto-gray-4: #959da5; -$auto-gray-5: #6a737d; -$auto-gray-6: #586069; -$auto-gray-7: #444d56; -$auto-gray-8: #2f363d; -$auto-gray-9: #24292e; -$auto-blue-0: #f1f8ff; -$auto-blue-1: #dbedff; -$auto-blue-2: #c8e1ff; -$auto-blue-3: #79b8ff; -$auto-blue-4: #2188ff; -$auto-blue-5: #0366d6; -$auto-blue-6: #005cc5; -$auto-blue-7: #044289; -$auto-blue-8: #032f62; -$auto-blue-9: #05264c; -$auto-green-0: #f0fff4; -$auto-green-1: #dcffe4; -$auto-green-2: #bef5cb; -$auto-green-3: #85e89d; -$auto-green-4: #34d058; -$auto-green-5: #28a745; -$auto-green-6: #22863a; -$auto-green-7: #176f2c; -$auto-green-8: #165c26; -$auto-green-9: #144620; -$auto-yellow-0: #fffdef; -$auto-yellow-1: #fffbdd; -$auto-yellow-2: #fff5b1; -$auto-yellow-3: #ffea7f; -$auto-yellow-4: #ffdf5d; -$auto-yellow-5: #ffd33d; -$auto-yellow-6: #f9c513; -$auto-yellow-7: #dbab09; -$auto-yellow-8: #b08800; -$auto-yellow-9: #735c0f; -$auto-orange-0: #fff8f2; -$auto-orange-1: #ffebda; -$auto-orange-2: #ffd1ac; -$auto-orange-3: #ffab70; -$auto-orange-4: #fb8532; -$auto-orange-5: #f66a0a; -$auto-orange-6: #e36209; -$auto-orange-7: #d15704; -$auto-orange-8: #c24e00; -$auto-orange-9: #a04100; -$auto-red-0: #ffeef0; -$auto-red-1: #ffdce0; -$auto-red-2: #fdaeb7; -$auto-red-3: #f97583; -$auto-red-4: #ea4a5a; -$auto-red-5: #d73a49; -$auto-red-6: #cb2431; -$auto-red-7: #b31d28; -$auto-red-8: #9e1c23; -$auto-red-9: #86181d; -$auto-purple-0: #f5f0ff; -$auto-purple-1: #e6dcfd; -$auto-purple-2: #d1bcf9; -$auto-purple-3: #b392f0; -$auto-purple-4: #8a63d2; -$auto-purple-5: #6f42c1; -$auto-purple-6: #5a32a3; -$auto-purple-7: #4c2889; -$auto-purple-8: #3a1d6e; -$auto-purple-9: #29134e; -$auto-pink-0: #ffeef8; -$auto-pink-1: #fedbf0; -$auto-pink-2: #f9b3dd; -$auto-pink-3: #f692ce; -$auto-pink-4: #ec6cb9; -$auto-pink-5: #ea4aaa; -$auto-pink-6: #d03592; -$auto-pink-7: #b93a86; -$auto-pink-8: #99306f; -$auto-pink-9: #6d224f; -$text-primary: #24292e; -$text-secondary: #586069; -$text-tertiary: #6a737d; -$text-placeholder: #6a737d; -$text-disabled: #6a737d; -$text-inverse: #fff; -$text-link: #0366d6; -$text-danger: #cb2431; -$text-success: #22863a; -$text-warning: #b08800; -$text-white: #fff; -$icon-primary: #24292e; -$icon-secondary: #586069; -$icon-tertiary: #959da5; -$icon-info: #0366d6; -$icon-danger: #d73a49; -$icon-success: #22863a; -$icon-warning: #b08800; -$border-primary: #e1e4e8; -$border-secondary: #eaecef; -$border-tertiary: #d1d5da; -$border-overlay: #e1e4e8; -$border-inverse: #fff; -$border-info: #0366d6; -$border-danger: #d73a49; -$border-success: #34d058; -$border-warning: #f9c513; -$bg-canvas: #fff; -$bg-canvas-mobile: #fff; -$bg-canvas-inverse: #24292e; -$bg-canvas-inset: #f6f8fa; -$bg-primary: #fff; -$bg-secondary: #fafbfc; -$bg-tertiary: #f6f8fa; -$bg-overlay: #fff; -$bg-backdrop: #1b1f2380; -$bg-info: #f1f8ff; -$bg-info-inverse: #0366d6; -$bg-danger: #ffeef0; -$bg-danger-inverse: #d73a49; -$bg-success: #dcffe4; -$bg-success-inverse: #28a745; -$bg-warning: #fff5b1; -$bg-warning-inverse: #ffd33d; -$shadow-small: 0 1px 0 #1b1f230a; -$shadow-medium: 0 3px 6px #959da526; -$shadow-large: 0 8px 24px #959da533; -$shadow-extra-large: 0 12px 48px #959da54d; -$shadow-highlight: inset 0 1px 0 #ffffff40; -$shadow-inset: inset 0 1px 0 #e1e4e833; -$state-hover-primary-bg: #0366d6; -$state-hover-primary-border: #0366d6; -$state-hover-primary-text: #fff; -$state-hover-primary-icon: #fff; -$state-hover-secondary-bg: #f6f8fa; -$state-hover-secondary-border: #f6f8fa; -$state-selected-primary-bg: #0366d6; -$state-selected-primary-border: #0366d6; -$state-selected-primary-text: #fff; -$state-selected-primary-icon: #fff; -$state-focus-border: #0366d6; -$state-focus-shadow: 0 0 0 3px #0366d64d; -$fade-fg-10: #1b1f231a; -$fade-fg-15: #1b1f2326; -$fade-fg-30: #1b1f234d; -$fade-fg-50: #1b1f2380; -$fade-fg-70: #1b1f23b3; -$fade-fg-85: #1b1f23d9; -$fade-black-10: #1b1f231a; -$fade-black-15: #1b1f2326; -$fade-black-30: #1b1f234d; -$fade-black-50: #1b1f2380; -$fade-black-70: #1b1f23b3; -$fade-black-85: #1b1f23d9; -$fade-white-10: #ffffff1a; -$fade-white-15: #ffffff26; -$fade-white-30: #ffffff4d; -$fade-white-50: #ffffff80; -$fade-white-70: #ffffffb3; -$fade-white-85: #ffffffd9; -$alert-info-text: #24292e; -$alert-info-icon: #04428999; -$alert-info-bg: #dbedff; -$alert-info-border: #04428933; -$alert-warn-text: #24292e; -$alert-warn-icon: #b08800; -$alert-warn-bg: #fffbdd; -$alert-warn-border: #b0880033; -$alert-error-text: #24292e; -$alert-error-icon: #9e1c2399; -$alert-error-bg: #ffe3e6; -$alert-error-border: #9e1c2333; -$alert-success-text: #24292e; -$alert-success-icon: #176f2ccc; -$alert-success-bg: #dcffe4; -$alert-success-border: #176f2c33; -$autocomplete-shadow: 0 3px 6px #959da526; -$autocomplete-row-border: #eaecef; -$blankslate-icon: #a3aab1; -$btn-text: #24292e; -$btn-bg: #fafbfc; -$btn-border: #1b1f2326; -$btn-shadow: 0 1px 0 #1b1f230a; -$btn-inset-shadow: inset 0 1px 0 #ffffff40; -$btn-hover-bg: #f3f4f6; -$btn-hover-border: #1b1f2326; -$btn-selected-bg: #edeff2; -$btn-focus-bg: #fafbfc; -$btn-focus-border: #1b1f2326; -$btn-focus-shadow: 0 0 0 3px #0366d64d; -$btn-shadow-active: inset 0 0.15em 0.3em #1b1f2326; -$btn-shadow-input-focus: 0 0 0 0.2em #0366d64d; -$btn-primary-text: #fff; -$btn-primary-bg: #2ea44f; -$btn-primary-border: #1b1f2326; -$btn-primary-shadow: 0 1px 0 #1b1f231a; -$btn-primary-inset-shadow: inset 0 1px 0 #ffffff08; -$btn-primary-hover-bg: #2c974b; -$btn-primary-hover-border: #1b1f2326; -$btn-primary-selected-bg: #2a8f47; -$btn-primary-selected-shadow: inset 0 1px 0 #14462033; -$btn-primary-disabled-text: #fffc; -$btn-primary-disabled-bg: #94d3a2; -$btn-primary-disabled-border: #1b1f231a; -$btn-primary-focus-bg: #2ea44f; -$btn-primary-focus-border: #1b1f2326; -$btn-primary-focus-shadow: 0 0 0 3px #2ea44f66; -$btn-primary-icon: #fffc; -$btn-primary-counter-bg: #fff3; -$btn-outline-text: #0366d6; -$btn-outline-hover-text: #fff; -$btn-outline-hover-bg: #0366d6; -$btn-outline-hover-border: #1b1f2326; -$btn-outline-hover-shadow: 0 1px 0 #1b1f231a; -$btn-outline-hover-inset-shadow: inset 0 1px 0 #ffffff08; -$btn-outline-hover-counter-bg: #fff3; -$btn-outline-selected-text: #fff; -$btn-outline-selected-bg: #035fc7; -$btn-outline-selected-border: #1b1f2326; -$btn-outline-selected-shadow: inset 0 1px 0 #05264c33; -$btn-outline-disabled-text: #0366d680; -$btn-outline-disabled-bg: #fafbfc; -$btn-outline-disabled-counter-bg: #0366d60d; -$btn-outline-focus-border: #1b1f2326; -$btn-outline-focus-shadow: 0 0 0 3px #005cc566; -$btn-outline-counter-bg: #0366d61a; -$btn-danger-text: #d73a49; -$btn-danger-hover-text: #fff; -$btn-danger-hover-bg: #cb2431; -$btn-danger-hover-border: #1b1f2326; -$btn-danger-hover-shadow: 0 1px 0 #1b1f231a; -$btn-danger-hover-inset-shadow: inset 0 1px 0 #ffffff08; -$btn-danger-hover-counter-bg: #fff3; -$btn-danger-selected-text: #fff; -$btn-danger-selected-bg: #d42d3d; -$btn-danger-selected-border: #1b1f2326; -$btn-danger-selected-shadow: inset 0 1px 0 #86181d33; -$btn-danger-disabled-text: #d73a4980; -$btn-danger-disabled-bg: #fafbfc; -$btn-danger-disabled-counter-bg: #d73a490d; -$btn-danger-focus-border: #1b1f2326; -$btn-danger-focus-shadow: 0 0 0 3px #cb243166; -$btn-danger-counter-bg: #d73a491a; -$btn-counter-bg: #1b1f2314; -$counter-text: #24292e; -$counter-bg: #d1d5da80; -$counter-primary-text: #fff; -$counter-primary-bg: #6a737d; -$counter-secondary-text: #6a737d; -$dropdown-shadow: 0 8px 24px #959da533; -$label-border: #e1e4e8; -$label-primary-text: #24292e; -$label-primary-border: #6a737d; -$label-secondary-text: #586069; -$label-secondary-border: #e1e4e8; -$label-info-text: #0366d6; -$label-info-border: #0366d6; -$label-success-text: #22863a; -$label-success-border: #28a745; -$label-warning-text: #735c0f; -$label-warning-border: #b08800; -$label-danger-text: #d73a49; -$label-danger-border: #cb2431; -$label-orange-text: #c24e00; -$label-orange-border: #f66a0a; -$input-bg: #fff; -$input-contrast-bg: #fafbfc; -$input-border: #e1e4e8; -$input-shadow: inset 0 1px 2px #1b1f2313; -$input-disabled-bg: #fff; -$input-disabled-border: #e1e4e8; -$input-warning-border: #f9c513; -$input-error-border: #cb2431; -$input-tooltip-success-text: #144620; -$input-tooltip-success-bg: #dcffe4; -$input-tooltip-success-border: #34d058; -$input-tooltip-warning-text: #735c0f; -$input-tooltip-warning-bg: #fff5b1; -$input-tooltip-warning-border: #f9c513; -$input-tooltip-error-text: #86181d; -$input-tooltip-error-bg: #ffeef0; -$input-tooltip-error-border: #f97583; -$avatar-bg: #fff; -$avatar-border: #0000; -$avatar-stack-fade: #d1d5da; -$avatar-stack-fade-more: #e1e4e8; -$avatar-child-shadow: -2px -2px 0 #fffc; -$toast-text: #24292e; -$toast-bg: #fff; -$toast-border: #e1e4e8; -$toast-shadow: 0 8px 24px #959da533; -$toast-icon: #fff; -$toast-icon-bg: #0366d6; -$toast-icon-border: #0000; -$toast-success-text: #24292e; -$toast-success-border: #e1e4e8; -$toast-success-icon: #fff; -$toast-success-icon-bg: #28a745; -$toast-success-icon-border: #0000; -$toast-warning-text: #24292e; -$toast-warning-border: #e1e4e8; -$toast-warning-icon: #24292e; -$toast-warning-icon-bg: #ffd33d; -$toast-warning-icon-border: #0000; -$toast-danger-text: #24292e; -$toast-danger-border: #e1e4e8; -$toast-danger-icon: #fff; -$toast-danger-icon-bg: #d73a49; -$toast-danger-icon-border: #0000; -$toast-loading-text: #24292e; -$toast-loading-border: #e1e4e8; -$toast-loading-icon: #fff; -$toast-loading-icon-bg: #586069; -$toast-loading-icon-border: #0000; -$timeline-text: #444d56; -$timeline-badge-bg: #e1e4e8; -$timeline-target-badge-border: #2188ff; -$timeline-target-badge-shadow: #c8e1ff; -$select-menu-border-secondary: #eaecef; -$select-menu-shadow: 0 0 18px #1b1f2366; -$select-menu-backdrop-bg: #1b1f2380; -$select-menu-backdrop-border: #0000; -$select-menu-tap-highlight: #d1d5da80; -$select-menu-tap-focus-bg: #dbedff; -$box-blue-border: #c8e1ff; -$box-row-yellow-bg: #fffbdd; -$box-row-blue-bg: #f1f8ff; -$box-header-blue-bg: #f1f8ff; -$box-header-blue-border: #c8e1ff; -$box-border-info: #0366d633; -$box-bg-info: #f1f8ff; -$box-border-warning: #ffd33d66; -$box-bg-warning: #fffdef; -$branch-name-text: #1b1f2399; -$branch-name-icon: #a8bbd0; -$branch-name-bg: #eaf5ff; -$branch-name-link-text: #0366d6; -$branch-name-link-icon: #a8bbd0; -$branch-name-link-bg: #eaf5ff; -$markdown-code-bg: #1b1f230d; -$markdown-frame-border: #dfe2e5; -$markdown-blockquote-border: #dfe2e5; -$markdown-table-border: #dfe2e5; -$markdown-table-tr-border: #c6cbd1; -$menu-heading-text: #24292e; -$menu-border-active: #f9826c; -$menu-bg-active: #0000; -$sidenav-selected-bg: #fff; -$sidenav-border-active: #f9826c; -$header-text: #ffffffb3; -$header-bg: #24292e; -$header-logo: #fff; -$filter-item-bar-bg: #eff3f6; -$hidden-text-expander-bg: #dfe2e5; -$hidden-text-expander-bg-hover: #c6cbd1; -$drag-and-drop-border: #c3c8cf; -$upload-enabled-border: #dfe2e5; -$upload-enabled-border-focused: #4a9eff; -$previewable-comment-form-border: #c3c8cf; -$underlinenav-border: #d1d5da00; -$underlinenav-border-hover: #d1d5da; -$underlinenav-border-active: #f9826c; -$underlinenav-text: #24292e; -$underlinenav-text-hover: #24292e; -$underlinenav-text-active: #24292e; -$underlinenav-icon: #959da5; -$underlinenav-icon-hover: #959da5; -$underlinenav-icon-active: #24292e; -$underlinenav-counter-text: #24292e; -$verified-badge-text: #22863a; -$verified-badge-bg: #fff; -$verified-badge-border: #e1e4e8; -$social-count-bg: #fff; -$tooltip-text: #fff; -$tooltip-bg: #24292e; -$header-search-bg: #24292e; -$header-search-border: #444d56; -$search-keyword-hl: #fffbdd; -$diffstat-neutral-bg: #d1d5da; -$diffstat-neutral-border: #d1d5da; -$diffstat-deletion-bg: #d73a49; -$diffstat-deletion-border: #d73a49; -$diffstat-addition-bg: #28a745; -$diffstat-addition-border: #28a745; -$files-explorer-icon: #79b8ff; -$hl-author-bg: #f1f8ff; -$hl-author-border: #c8e1ff; -$logo-subdued: #d1d5da; -$discussion-border: #a2cbac; -$discussion-bg-success: #28a745; -$actions-workflow-table-sticky-bg: #fffffff2; -$repo-language-color-border: #1b1f231a; -$code-selection-bg: #c8e1ff; -$blob-line-highlight-bg: #fffbdd; -$blob-line-highlight-border: #0000; -$diff-addition-text: #22863a; -$diff-addition-bg: #e6ffed; -$diff-addition-border: #34d058; -$diff-deletion-text: #cb2431; -$diff-deletion-bg: #ffeef0; -$diff-deletion-border: #d73a49; -$diff-change-text: #b08800; -$diff-change-bg: #fff5b1; -$diff-change-border: #f9c513; -$diff-blob-num-text: #1b1f234d; -$diff-blob-num-hover-text: #1b1f2399; -$diff-blob-addition-num-text: #1b1f234d; -$diff-blob-addition-num-hover-text: #1b1f2399; -$diff-blob-addition-num-bg: #cdffd8; -$diff-blob-addition-line-bg: #e6ffed; -$diff-blob-addition-word-bg: #acf2bd; -$diff-blob-deletion-num-text: #1b1f234d; -$diff-blob-deletion-num-hover-text: #1b1f2399; -$diff-blob-deletion-num-bg: #ffdce0; -$diff-blob-deletion-line-bg: #ffeef0; -$diff-blob-deletion-word-bg: #fdb8c0; -$diff-blob-hunk-text: #1b1f23b3; -$diff-blob-hunk-num-bg: #dbedff; -$diff-blob-hunk-line-bg: #f1f8ff; -$diff-blob-empty-block-bg: #fafbfc; -$diff-blob-selected-line-highlight-bg: #ffdf5d33; -$diff-blob-selected-line-highlight-border: #ffd33d; -$diff-blob-selected-line-highlight-mix-blend-mode: multiply; -$diff-blob-expander-icon: #586069; -$diff-blob-expander-hover-icon: #fff; -$diff-blob-expander-hover-bg: #0366d6; -$diff-blob-comment-button-icon: #fff; -$diff-blob-comment-button-bg: #0366d6; -$diff-blob-comment-button-gradient-bg: #0372ef; -$global-nav-logo: #fff; -$global-nav-bg: #24292e; -$global-nav-text: #fff; -$global-nav-icon: #fff; -$global-nav-input-bg: #fafbfc; -$global-nav-input-border: #fafbfc; -$global-nav-input-icon: #d1d5da; -$global-nav-input-placeholder: #959da5; -$calendar-graph-day-bg: #ebedf0; -$calendar-graph-day-border: #1b1f230f; -$calendar-graph-day-l1-bg: #9be9a8; -$calendar-graph-day-l2-bg: #40c463; -$calendar-graph-day-l3-bg: #30a14e; -$calendar-graph-day-l4-bg: #216e39; -$calendar-graph-day-l4-border: #1b1f230f; -$calendar-graph-day-l3-border: #1b1f230f; -$calendar-graph-day-l2-border: #1b1f230f; -$calendar-graph-day-l1-border: #1b1f230f; -$footer-invertocat-octicon: #d1d5da; -$footer-invertocat-octicon-hover: #6a737d; -$pr-state-draft-text: #fff; -$pr-state-draft-bg: #6a737d; -$pr-state-draft-border: #0000; -$pr-state-open-text: #fff; -$pr-state-open-bg: #28a745; -$pr-state-open-border: #0000; -$pr-state-merged-text: #fff; -$pr-state-merged-bg: #6f42c1; -$pr-state-merged-border: #0000; -$pr-state-closed-text: #fff; -$pr-state-closed-bg: #d73a49; -$pr-state-closed-border: #0000; -$topic-tag-text: #0366d6; -$topic-tag-bg: #f1f8ff; -$topic-tag-hover-bg: #def; -$topic-tag-active-bg: #e7f3ff; -$merge-box-success-icon-bg: #28a745; -$merge-box-success-icon-text: #fff; -$merge-box-success-icon-border: #0000; -$merge-box-success-indicator-bg: #28a745; -$merge-box-success-indicator-border: #0000; -$merge-box-merged-icon-bg: #6f42c1; -$merge-box-merged-icon-text: #fff; -$merge-box-merged-icon-border: #0000; -$merge-box-merged-box-border: #6f42c1; -$merge-box-neutral-icon-bg: #6a737d; -$merge-box-neutral-icon-text: #fff; -$merge-box-neutral-icon-border: #0000; -$merge-box-neutral-indicator-bg: #6a737d; -$merge-box-neutral-indicator-border: #0000; -$merge-box-warning-icon-bg: #dbab09; -$merge-box-warning-icon-text: #fff; -$merge-box-warning-icon-border: #0000; -$merge-box-warning-box-border: #ffd33d; -$merge-box-warning-merge-highlight: #0000; -$merge-box-error-icon-bg: #d73a49; -$merge-box-error-icon-text: #fff; -$merge-box-error-icon-border: #0000; -$merge-box-error-indicator-bg: #d73a49; -$merge-box-error-indicator-border: #0000; -$project-card-bg: #fff; -$project-header-bg: #24292e; -$project-sidebar-bg: #fff; -$project-gradient-in: #fff; -$project-gradient-out: #fff0; -$marketing-icon-primary: #2188ff; -$marketing-icon-secondary: #79b8ff; -$prettylights-syntax-comment: #6a737d; -$prettylights-syntax-constant: #005cc5; -$prettylights-syntax-entity: #6f42c1; -$prettylights-syntax-storage-modifier-import: #24292e; -$prettylights-syntax-entity-tag: #22863a; -$prettylights-syntax-keyword: #d73a49; -$prettylights-syntax-string: #032f62; -$prettylights-syntax-variable: #e36209; -$prettylights-syntax-brackethighlighter-unmatched: #b31d28; -$prettylights-syntax-invalid-illegal-text: #fafbfc; -$prettylights-syntax-invalid-illegal-bg: #b31d28; -$prettylights-syntax-carriage-return-text: #fafbfc; -$prettylights-syntax-carriage-return-bg: #d73a49; -$prettylights-syntax-string-regexp: #22863a; -$prettylights-syntax-markup-list: #735c0f; -$prettylights-syntax-markup-heading: #005cc5; -$prettylights-syntax-markup-italic: #24292e; -$prettylights-syntax-markup-bold: #24292e; -$prettylights-syntax-markup-deleted-text: #b31d28; -$prettylights-syntax-markup-deleted-bg: #ffeef0; -$prettylights-syntax-markup-inserted-text: #22863a; -$prettylights-syntax-markup-inserted-bg: #f0fff4; -$prettylights-syntax-markup-changed-text: #e36209; -$prettylights-syntax-markup-changed-bg: #ffebda; -$prettylights-syntax-markup-ignored-text: #f6f8fa; -$prettylights-syntax-markup-ignored-bg: #005cc5; -$prettylights-syntax-meta-diff-range: #6f42c1; -$prettylights-syntax-brackethighlighter-angle: #586069; -$prettylights-syntax-sublimelinter-gutter-mark: #959da5; -$prettylights-syntax-constant-other-reference-link: #032f62; -$codemirror-text: #24292e; -$codemirror-bg: #fff; -$codemirror-gutters-bg: #fff; -$codemirror-guttermarker-text: #fff; -$codemirror-guttermarker-subtle-text: #d1d5da; -$codemirror-linenumber-text: #959da5; -$codemirror-cursor: #24292e; -$codemirror-selection-bg: #c8e1ff; -$codemirror-activeline-bg: #fafbfc; -$codemirror-matchingbracket-text: #24292e; -$codemirror-lines-bg: #fff; -$codemirror-syntax-comment: #6a737d; -$codemirror-syntax-constant: #005cc5; -$codemirror-syntax-entity: #6f42c1; -$codemirror-syntax-keyword: #d73a49; -$codemirror-syntax-storage: #d73a49; -$codemirror-syntax-string: #032f62; -$codemirror-syntax-support: #005cc5; -$codemirror-syntax-variable: #e36209; -$ansi-black: #24292e; -$ansi-black-bright: #2f363d; -$ansi-white: #e1e4e8; -$ansi-white-bright: #e1e4e8; -$ansi-gray: #959da5; -$ansi-red: #f97583; -$ansi-red-bright: #fdaeb7; -$ansi-green: #85e89d; -$ansi-green-bright: #bef5cb; -$ansi-yellow: #ffea7f; -$ansi-yellow-bright: #fff5b1; -$ansi-blue: #79b8ff; -$ansi-blue-bright: #c8e1ff; -$ansi-magenta: #b392f0; -$ansi-magenta-bright: #d1bcf9; -$ansi-cyan: #76e3ea; -$ansi-cyan-bright: #b3f0ff; +$variables: ( + 'auto-black': '#1b1f23', + 'auto-white': '#fff', + 'auto-gray-0': '#fafbfc', + 'auto-gray-1': '#f6f8fa', + 'auto-gray-2': '#e1e4e8', + 'auto-gray-3': '#d1d5da', + 'auto-gray-4': '#959da5', + 'auto-gray-5': '#6a737d', + 'auto-gray-6': '#586069', + 'auto-gray-7': '#444d56', + 'auto-gray-8': '#2f363d', + 'auto-gray-9': '#24292e', + 'auto-blue-0': '#f1f8ff', + 'auto-blue-1': '#dbedff', + 'auto-blue-2': '#c8e1ff', + 'auto-blue-3': '#79b8ff', + 'auto-blue-4': '#2188ff', + 'auto-blue-5': '#0366d6', + 'auto-blue-6': '#005cc5', + 'auto-blue-7': '#044289', + 'auto-blue-8': '#032f62', + 'auto-blue-9': '#05264c', + 'auto-green-0': '#f0fff4', + 'auto-green-1': '#dcffe4', + 'auto-green-2': '#bef5cb', + 'auto-green-3': '#85e89d', + 'auto-green-4': '#34d058', + 'auto-green-5': '#28a745', + 'auto-green-6': '#22863a', + 'auto-green-7': '#176f2c', + 'auto-green-8': '#165c26', + 'auto-green-9': '#144620', + 'auto-yellow-0': '#fffdef', + 'auto-yellow-1': '#fffbdd', + 'auto-yellow-2': '#fff5b1', + 'auto-yellow-3': '#ffea7f', + 'auto-yellow-4': '#ffdf5d', + 'auto-yellow-5': '#ffd33d', + 'auto-yellow-6': '#f9c513', + 'auto-yellow-7': '#dbab09', + 'auto-yellow-8': '#b08800', + 'auto-yellow-9': '#735c0f', + 'auto-orange-0': '#fff8f2', + 'auto-orange-1': '#ffebda', + 'auto-orange-2': '#ffd1ac', + 'auto-orange-3': '#ffab70', + 'auto-orange-4': '#fb8532', + 'auto-orange-5': '#f66a0a', + 'auto-orange-6': '#e36209', + 'auto-orange-7': '#d15704', + 'auto-orange-8': '#c24e00', + 'auto-orange-9': '#a04100', + 'auto-red-0': '#ffeef0', + 'auto-red-1': '#ffdce0', + 'auto-red-2': '#fdaeb7', + 'auto-red-3': '#f97583', + 'auto-red-4': '#ea4a5a', + 'auto-red-5': '#d73a49', + 'auto-red-6': '#cb2431', + 'auto-red-7': '#b31d28', + 'auto-red-8': '#9e1c23', + 'auto-red-9': '#86181d', + 'auto-purple-0': '#f5f0ff', + 'auto-purple-1': '#e6dcfd', + 'auto-purple-2': '#d1bcf9', + 'auto-purple-3': '#b392f0', + 'auto-purple-4': '#8a63d2', + 'auto-purple-5': '#6f42c1', + 'auto-purple-6': '#5a32a3', + 'auto-purple-7': '#4c2889', + 'auto-purple-8': '#3a1d6e', + 'auto-purple-9': '#29134e', + 'auto-pink-0': '#ffeef8', + 'auto-pink-1': '#fedbf0', + 'auto-pink-2': '#f9b3dd', + 'auto-pink-3': '#f692ce', + 'auto-pink-4': '#ec6cb9', + 'auto-pink-5': '#ea4aaa', + 'auto-pink-6': '#d03592', + 'auto-pink-7': '#b93a86', + 'auto-pink-8': '#99306f', + 'auto-pink-9': '#6d224f', + 'text-primary': '#24292e', + 'text-secondary': '#586069', + 'text-tertiary': '#6a737d', + 'text-placeholder': '#6a737d', + 'text-disabled': '#6a737d', + 'text-inverse': '#fff', + 'text-link': '#0366d6', + 'text-danger': '#cb2431', + 'text-success': '#22863a', + 'text-warning': '#b08800', + 'text-white': '#fff', + 'icon-primary': '#24292e', + 'icon-secondary': '#586069', + 'icon-tertiary': '#959da5', + 'icon-info': '#0366d6', + 'icon-danger': '#d73a49', + 'icon-success': '#22863a', + 'icon-warning': '#b08800', + 'border-primary': '#e1e4e8', + 'border-secondary': '#eaecef', + 'border-tertiary': '#d1d5da', + 'border-overlay': '#e1e4e8', + 'border-inverse': '#fff', + 'border-info': '#0366d6', + 'border-danger': '#d73a49', + 'border-success': '#34d058', + 'border-warning': '#f9c513', + 'bg-canvas': '#fff', + 'bg-canvas-mobile': '#fff', + 'bg-canvas-inverse': '#24292e', + 'bg-canvas-inset': '#f6f8fa', + 'bg-primary': '#fff', + 'bg-secondary': '#fafbfc', + 'bg-tertiary': '#f6f8fa', + 'bg-overlay': '#fff', + 'bg-backdrop': '#1b1f2380', + 'bg-info': '#f1f8ff', + 'bg-info-inverse': '#0366d6', + 'bg-danger': '#ffeef0', + 'bg-danger-inverse': '#d73a49', + 'bg-success': '#dcffe4', + 'bg-success-inverse': '#28a745', + 'bg-warning': '#fff5b1', + 'bg-warning-inverse': '#ffd33d', + 'shadow-small': '0 1px 0 #1b1f230a', + 'shadow-medium': '0 3px 6px #959da526', + 'shadow-large': '0 8px 24px #959da533', + 'shadow-extra-large': '0 12px 48px #959da54d', + 'shadow-highlight': 'inset 0 1px 0 #ffffff40', + 'shadow-inset': 'inset 0 1px 0 #e1e4e833', + 'state-hover-primary-bg': '#0366d6', + 'state-hover-primary-border': '#0366d6', + 'state-hover-primary-text': '#fff', + 'state-hover-primary-icon': '#fff', + 'state-hover-secondary-bg': '#f6f8fa', + 'state-hover-secondary-border': '#f6f8fa', + 'state-selected-primary-bg': '#0366d6', + 'state-selected-primary-border': '#0366d6', + 'state-selected-primary-text': '#fff', + 'state-selected-primary-icon': '#fff', + 'state-focus-border': '#0366d6', + 'state-focus-shadow': '0 0 0 3px #0366d64d', + 'fade-fg-10': '#1b1f231a', + 'fade-fg-15': '#1b1f2326', + 'fade-fg-30': '#1b1f234d', + 'fade-fg-50': '#1b1f2380', + 'fade-fg-70': '#1b1f23b3', + 'fade-fg-85': '#1b1f23d9', + 'fade-black-10': '#1b1f231a', + 'fade-black-15': '#1b1f2326', + 'fade-black-30': '#1b1f234d', + 'fade-black-50': '#1b1f2380', + 'fade-black-70': '#1b1f23b3', + 'fade-black-85': '#1b1f23d9', + 'fade-white-10': '#ffffff1a', + 'fade-white-15': '#ffffff26', + 'fade-white-30': '#ffffff4d', + 'fade-white-50': '#ffffff80', + 'fade-white-70': '#ffffffb3', + 'fade-white-85': '#ffffffd9', + 'alert-info-text': '#24292e', + 'alert-info-icon': '#04428999', + 'alert-info-bg': '#dbedff', + 'alert-info-border': '#04428933', + 'alert-warn-text': '#24292e', + 'alert-warn-icon': '#b08800', + 'alert-warn-bg': '#fffbdd', + 'alert-warn-border': '#b0880033', + 'alert-error-text': '#24292e', + 'alert-error-icon': '#9e1c2399', + 'alert-error-bg': '#ffe3e6', + 'alert-error-border': '#9e1c2333', + 'alert-success-text': '#24292e', + 'alert-success-icon': '#176f2ccc', + 'alert-success-bg': '#dcffe4', + 'alert-success-border': '#176f2c33', + 'autocomplete-shadow': '0 3px 6px #959da526', + 'autocomplete-row-border': '#eaecef', + 'blankslate-icon': '#a3aab1', + 'btn-text': '#24292e', + 'btn-bg': '#fafbfc', + 'btn-border': '#1b1f2326', + 'btn-shadow': '0 1px 0 #1b1f230a', + 'btn-inset-shadow': 'inset 0 1px 0 #ffffff40', + 'btn-hover-bg': '#f3f4f6', + 'btn-hover-border': '#1b1f2326', + 'btn-selected-bg': '#edeff2', + 'btn-focus-bg': '#fafbfc', + 'btn-focus-border': '#1b1f2326', + 'btn-focus-shadow': '0 0 0 3px #0366d64d', + 'btn-shadow-active': 'inset 0 0.15em 0.3em #1b1f2326', + 'btn-shadow-input-focus': '0 0 0 0.2em #0366d64d', + 'btn-primary-text': '#fff', + 'btn-primary-bg': '#2ea44f', + 'btn-primary-border': '#1b1f2326', + 'btn-primary-shadow': '0 1px 0 #1b1f231a', + 'btn-primary-inset-shadow': 'inset 0 1px 0 #ffffff08', + 'btn-primary-hover-bg': '#2c974b', + 'btn-primary-hover-border': '#1b1f2326', + 'btn-primary-selected-bg': '#2a8f47', + 'btn-primary-selected-shadow': 'inset 0 1px 0 #14462033', + 'btn-primary-disabled-text': '#fffc', + 'btn-primary-disabled-bg': '#94d3a2', + 'btn-primary-disabled-border': '#1b1f231a', + 'btn-primary-focus-bg': '#2ea44f', + 'btn-primary-focus-border': '#1b1f2326', + 'btn-primary-focus-shadow': '0 0 0 3px #2ea44f66', + 'btn-primary-icon': '#fffc', + 'btn-primary-counter-bg': '#fff3', + 'btn-outline-text': '#0366d6', + 'btn-outline-hover-text': '#fff', + 'btn-outline-hover-bg': '#0366d6', + 'btn-outline-hover-border': '#1b1f2326', + 'btn-outline-hover-shadow': '0 1px 0 #1b1f231a', + 'btn-outline-hover-inset-shadow': 'inset 0 1px 0 #ffffff08', + 'btn-outline-hover-counter-bg': '#fff3', + 'btn-outline-selected-text': '#fff', + 'btn-outline-selected-bg': '#035fc7', + 'btn-outline-selected-border': '#1b1f2326', + 'btn-outline-selected-shadow': 'inset 0 1px 0 #05264c33', + 'btn-outline-disabled-text': '#0366d680', + 'btn-outline-disabled-bg': '#fafbfc', + 'btn-outline-disabled-counter-bg': '#0366d60d', + 'btn-outline-focus-border': '#1b1f2326', + 'btn-outline-focus-shadow': '0 0 0 3px #005cc566', + 'btn-outline-counter-bg': '#0366d61a', + 'btn-danger-text': '#d73a49', + 'btn-danger-hover-text': '#fff', + 'btn-danger-hover-bg': '#cb2431', + 'btn-danger-hover-border': '#1b1f2326', + 'btn-danger-hover-shadow': '0 1px 0 #1b1f231a', + 'btn-danger-hover-inset-shadow': 'inset 0 1px 0 #ffffff08', + 'btn-danger-hover-counter-bg': '#fff3', + 'btn-danger-selected-text': '#fff', + 'btn-danger-selected-bg': '#d42d3d', + 'btn-danger-selected-border': '#1b1f2326', + 'btn-danger-selected-shadow': 'inset 0 1px 0 #86181d33', + 'btn-danger-disabled-text': '#d73a4980', + 'btn-danger-disabled-bg': '#fafbfc', + 'btn-danger-disabled-counter-bg': '#d73a490d', + 'btn-danger-focus-border': '#1b1f2326', + 'btn-danger-focus-shadow': '0 0 0 3px #cb243166', + 'btn-danger-counter-bg': '#d73a491a', + 'btn-counter-bg': '#1b1f2314', + 'counter-text': '#24292e', + 'counter-bg': '#d1d5da80', + 'counter-primary-text': '#fff', + 'counter-primary-bg': '#6a737d', + 'counter-secondary-text': '#6a737d', + 'dropdown-shadow': '0 8px 24px #959da533', + 'label-border': '#e1e4e8', + 'label-primary-text': '#24292e', + 'label-primary-border': '#6a737d', + 'label-secondary-text': '#586069', + 'label-secondary-border': '#e1e4e8', + 'label-info-text': '#0366d6', + 'label-info-border': '#0366d6', + 'label-success-text': '#22863a', + 'label-success-border': '#28a745', + 'label-warning-text': '#735c0f', + 'label-warning-border': '#b08800', + 'label-danger-text': '#d73a49', + 'label-danger-border': '#cb2431', + 'label-orange-text': '#c24e00', + 'label-orange-border': '#f66a0a', + 'input-bg': '#fff', + 'input-contrast-bg': '#fafbfc', + 'input-border': '#e1e4e8', + 'input-shadow': 'inset 0 1px 2px #1b1f2313', + 'input-disabled-bg': '#fff', + 'input-disabled-border': '#e1e4e8', + 'input-warning-border': '#f9c513', + 'input-error-border': '#cb2431', + 'input-tooltip-success-text': '#144620', + 'input-tooltip-success-bg': '#dcffe4', + 'input-tooltip-success-border': '#34d058', + 'input-tooltip-warning-text': '#735c0f', + 'input-tooltip-warning-bg': '#fff5b1', + 'input-tooltip-warning-border': '#f9c513', + 'input-tooltip-error-text': '#86181d', + 'input-tooltip-error-bg': '#ffeef0', + 'input-tooltip-error-border': '#f97583', + 'avatar-bg': '#fff', + 'avatar-border': '#0000', + 'avatar-stack-fade': '#d1d5da', + 'avatar-stack-fade-more': '#e1e4e8', + 'avatar-child-shadow': '-2px -2px 0 #fffc', + 'toast-text': '#24292e', + 'toast-bg': '#fff', + 'toast-border': '#e1e4e8', + 'toast-shadow': '0 8px 24px #959da533', + 'toast-icon': '#fff', + 'toast-icon-bg': '#0366d6', + 'toast-icon-border': '#0000', + 'toast-success-text': '#24292e', + 'toast-success-border': '#e1e4e8', + 'toast-success-icon': '#fff', + 'toast-success-icon-bg': '#28a745', + 'toast-success-icon-border': '#0000', + 'toast-warning-text': '#24292e', + 'toast-warning-border': '#e1e4e8', + 'toast-warning-icon': '#24292e', + 'toast-warning-icon-bg': '#ffd33d', + 'toast-warning-icon-border': '#0000', + 'toast-danger-text': '#24292e', + 'toast-danger-border': '#e1e4e8', + 'toast-danger-icon': '#fff', + 'toast-danger-icon-bg': '#d73a49', + 'toast-danger-icon-border': '#0000', + 'toast-loading-text': '#24292e', + 'toast-loading-border': '#e1e4e8', + 'toast-loading-icon': '#fff', + 'toast-loading-icon-bg': '#586069', + 'toast-loading-icon-border': '#0000', + 'timeline-text': '#444d56', + 'timeline-badge-bg': '#e1e4e8', + 'timeline-target-badge-border': '#2188ff', + 'timeline-target-badge-shadow': '#c8e1ff', + 'select-menu-border-secondary': '#eaecef', + 'select-menu-shadow': '0 0 18px #1b1f2366', + 'select-menu-backdrop-bg': '#1b1f2380', + 'select-menu-backdrop-border': '#0000', + 'select-menu-tap-highlight': '#d1d5da80', + 'select-menu-tap-focus-bg': '#dbedff', + 'box-blue-border': '#c8e1ff', + 'box-row-yellow-bg': '#fffbdd', + 'box-row-blue-bg': '#f1f8ff', + 'box-header-blue-bg': '#f1f8ff', + 'box-header-blue-border': '#c8e1ff', + 'box-border-info': '#0366d633', + 'box-bg-info': '#f1f8ff', + 'box-border-warning': '#ffd33d66', + 'box-bg-warning': '#fffdef', + 'branch-name-text': '#1b1f2399', + 'branch-name-icon': '#a8bbd0', + 'branch-name-bg': '#eaf5ff', + 'branch-name-link-text': '#0366d6', + 'branch-name-link-icon': '#a8bbd0', + 'branch-name-link-bg': '#eaf5ff', + 'markdown-code-bg': '#1b1f230d', + 'markdown-frame-border': '#dfe2e5', + 'markdown-blockquote-border': '#dfe2e5', + 'markdown-table-border': '#dfe2e5', + 'markdown-table-tr-border': '#c6cbd1', + 'menu-heading-text': '#24292e', + 'menu-border-active': '#f9826c', + 'menu-bg-active': '#0000', + 'sidenav-selected-bg': '#fff', + 'sidenav-border-active': '#f9826c', + 'header-text': '#ffffffb3', + 'header-bg': '#24292e', + 'header-logo': '#fff', + 'filter-item-bar-bg': '#eff3f6', + 'hidden-text-expander-bg': '#dfe2e5', + 'hidden-text-expander-bg-hover': '#c6cbd1', + 'drag-and-drop-border': '#c3c8cf', + 'upload-enabled-border': '#dfe2e5', + 'upload-enabled-border-focused': '#4a9eff', + 'previewable-comment-form-border': '#c3c8cf', + 'underlinenav-border': '#d1d5da00', + 'underlinenav-border-hover': '#d1d5da', + 'underlinenav-border-active': '#f9826c', + 'underlinenav-text': '#24292e', + 'underlinenav-text-hover': '#24292e', + 'underlinenav-text-active': '#24292e', + 'underlinenav-icon': '#959da5', + 'underlinenav-icon-hover': '#959da5', + 'underlinenav-icon-active': '#24292e', + 'underlinenav-counter-text': '#24292e', + 'verified-badge-text': '#22863a', + 'verified-badge-bg': '#fff', + 'verified-badge-border': '#e1e4e8', + 'social-count-bg': '#fff', + 'tooltip-text': '#fff', + 'tooltip-bg': '#24292e', + 'header-search-bg': '#24292e', + 'header-search-border': '#444d56', + 'search-keyword-hl': '#fffbdd', + 'diffstat-neutral-bg': '#d1d5da', + 'diffstat-neutral-border': '#d1d5da', + 'diffstat-deletion-bg': '#d73a49', + 'diffstat-deletion-border': '#d73a49', + 'diffstat-addition-bg': '#28a745', + 'diffstat-addition-border': '#28a745', + 'files-explorer-icon': '#79b8ff', + 'hl-author-bg': '#f1f8ff', + 'hl-author-border': '#c8e1ff', + 'logo-subdued': '#d1d5da', + 'discussion-border': '#a2cbac', + 'discussion-bg-success': '#28a745', + 'actions-workflow-table-sticky-bg': '#fffffff2', + 'repo-language-color-border': '#1b1f231a', + 'code-selection-bg': '#c8e1ff', + 'blob-line-highlight-bg': '#fffbdd', + 'blob-line-highlight-border': '#0000', + 'diff-addition-text': '#22863a', + 'diff-addition-bg': '#e6ffed', + 'diff-addition-border': '#34d058', + 'diff-deletion-text': '#cb2431', + 'diff-deletion-bg': '#ffeef0', + 'diff-deletion-border': '#d73a49', + 'diff-change-text': '#b08800', + 'diff-change-bg': '#fff5b1', + 'diff-change-border': '#f9c513', + 'diff-blob-num-text': '#1b1f234d', + 'diff-blob-num-hover-text': '#1b1f2399', + 'diff-blob-addition-num-text': '#1b1f234d', + 'diff-blob-addition-num-hover-text': '#1b1f2399', + 'diff-blob-addition-num-bg': '#cdffd8', + 'diff-blob-addition-line-bg': '#e6ffed', + 'diff-blob-addition-word-bg': '#acf2bd', + 'diff-blob-deletion-num-text': '#1b1f234d', + 'diff-blob-deletion-num-hover-text': '#1b1f2399', + 'diff-blob-deletion-num-bg': '#ffdce0', + 'diff-blob-deletion-line-bg': '#ffeef0', + 'diff-blob-deletion-word-bg': '#fdb8c0', + 'diff-blob-hunk-text': '#1b1f23b3', + 'diff-blob-hunk-num-bg': '#dbedff', + 'diff-blob-hunk-line-bg': '#f1f8ff', + 'diff-blob-empty-block-bg': '#fafbfc', + 'diff-blob-selected-line-highlight-bg': '#ffdf5d33', + 'diff-blob-selected-line-highlight-border': '#ffd33d', + 'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply', + 'diff-blob-expander-icon': '#586069', + 'diff-blob-expander-hover-icon': '#fff', + 'diff-blob-expander-hover-bg': '#0366d6', + 'diff-blob-comment-button-icon': '#fff', + 'diff-blob-comment-button-bg': '#0366d6', + 'diff-blob-comment-button-gradient-bg': '#0372ef', + 'global-nav-logo': '#fff', + 'global-nav-bg': '#24292e', + 'global-nav-text': '#fff', + 'global-nav-icon': '#fff', + 'global-nav-input-bg': '#fafbfc', + 'global-nav-input-border': '#fafbfc', + 'global-nav-input-icon': '#d1d5da', + 'global-nav-input-placeholder': '#959da5', + 'calendar-graph-day-bg': '#ebedf0', + 'calendar-graph-day-border': '#1b1f230f', + 'calendar-graph-day-l1-bg': '#9be9a8', + 'calendar-graph-day-l2-bg': '#40c463', + 'calendar-graph-day-l3-bg': '#30a14e', + 'calendar-graph-day-l4-bg': '#216e39', + 'calendar-graph-day-l4-border': '#1b1f230f', + 'calendar-graph-day-l3-border': '#1b1f230f', + 'calendar-graph-day-l2-border': '#1b1f230f', + 'calendar-graph-day-l1-border': '#1b1f230f', + 'footer-invertocat-octicon': '#d1d5da', + 'footer-invertocat-octicon-hover': '#6a737d', + 'pr-state-draft-text': '#fff', + 'pr-state-draft-bg': '#6a737d', + 'pr-state-draft-border': '#0000', + 'pr-state-open-text': '#fff', + 'pr-state-open-bg': '#28a745', + 'pr-state-open-border': '#0000', + 'pr-state-merged-text': '#fff', + 'pr-state-merged-bg': '#6f42c1', + 'pr-state-merged-border': '#0000', + 'pr-state-closed-text': '#fff', + 'pr-state-closed-bg': '#d73a49', + 'pr-state-closed-border': '#0000', + 'topic-tag-text': '#0366d6', + 'topic-tag-bg': '#f1f8ff', + 'topic-tag-hover-bg': '#def', + 'topic-tag-active-bg': '#e7f3ff', + 'merge-box-success-icon-bg': '#28a745', + 'merge-box-success-icon-text': '#fff', + 'merge-box-success-icon-border': '#0000', + 'merge-box-success-indicator-bg': '#28a745', + 'merge-box-success-indicator-border': '#0000', + 'merge-box-merged-icon-bg': '#6f42c1', + 'merge-box-merged-icon-text': '#fff', + 'merge-box-merged-icon-border': '#0000', + 'merge-box-merged-box-border': '#6f42c1', + 'merge-box-neutral-icon-bg': '#6a737d', + 'merge-box-neutral-icon-text': '#fff', + 'merge-box-neutral-icon-border': '#0000', + 'merge-box-neutral-indicator-bg': '#6a737d', + 'merge-box-neutral-indicator-border': '#0000', + 'merge-box-warning-icon-bg': '#dbab09', + 'merge-box-warning-icon-text': '#fff', + 'merge-box-warning-icon-border': '#0000', + 'merge-box-warning-box-border': '#ffd33d', + 'merge-box-warning-merge-highlight': '#0000', + 'merge-box-error-icon-bg': '#d73a49', + 'merge-box-error-icon-text': '#fff', + 'merge-box-error-icon-border': '#0000', + 'merge-box-error-indicator-bg': '#d73a49', + 'merge-box-error-indicator-border': '#0000', + 'project-card-bg': '#fff', + 'project-header-bg': '#24292e', + 'project-sidebar-bg': '#fff', + 'project-gradient-in': '#fff', + 'project-gradient-out': '#fff0', + 'marketing-icon-primary': '#2188ff', + 'marketing-icon-secondary': '#79b8ff', + 'prettylights-syntax-comment': '#6a737d', + 'prettylights-syntax-constant': '#005cc5', + 'prettylights-syntax-entity': '#6f42c1', + 'prettylights-syntax-storage-modifier-import': '#24292e', + 'prettylights-syntax-entity-tag': '#22863a', + 'prettylights-syntax-keyword': '#d73a49', + 'prettylights-syntax-string': '#032f62', + 'prettylights-syntax-variable': '#e36209', + 'prettylights-syntax-brackethighlighter-unmatched': '#b31d28', + 'prettylights-syntax-invalid-illegal-text': '#fafbfc', + 'prettylights-syntax-invalid-illegal-bg': '#b31d28', + 'prettylights-syntax-carriage-return-text': '#fafbfc', + 'prettylights-syntax-carriage-return-bg': '#d73a49', + 'prettylights-syntax-string-regexp': '#22863a', + 'prettylights-syntax-markup-list': '#735c0f', + 'prettylights-syntax-markup-heading': '#005cc5', + 'prettylights-syntax-markup-italic': '#24292e', + 'prettylights-syntax-markup-bold': '#24292e', + 'prettylights-syntax-markup-deleted-text': '#b31d28', + 'prettylights-syntax-markup-deleted-bg': '#ffeef0', + 'prettylights-syntax-markup-inserted-text': '#22863a', + 'prettylights-syntax-markup-inserted-bg': '#f0fff4', + 'prettylights-syntax-markup-changed-text': '#e36209', + 'prettylights-syntax-markup-changed-bg': '#ffebda', + 'prettylights-syntax-markup-ignored-text': '#f6f8fa', + 'prettylights-syntax-markup-ignored-bg': '#005cc5', + 'prettylights-syntax-meta-diff-range': '#6f42c1', + 'prettylights-syntax-brackethighlighter-angle': '#586069', + 'prettylights-syntax-sublimelinter-gutter-mark': '#959da5', + 'prettylights-syntax-constant-other-reference-link': '#032f62', + 'codemirror-text': '#24292e', + 'codemirror-bg': '#fff', + 'codemirror-gutters-bg': '#fff', + 'codemirror-guttermarker-text': '#fff', + 'codemirror-guttermarker-subtle-text': '#d1d5da', + 'codemirror-linenumber-text': '#959da5', + 'codemirror-cursor': '#24292e', + 'codemirror-selection-bg': '#c8e1ff', + 'codemirror-activeline-bg': '#fafbfc', + 'codemirror-matchingbracket-text': '#24292e', + 'codemirror-lines-bg': '#fff', + 'codemirror-syntax-comment': '#6a737d', + 'codemirror-syntax-constant': '#005cc5', + 'codemirror-syntax-entity': '#6f42c1', + 'codemirror-syntax-keyword': '#d73a49', + 'codemirror-syntax-storage': '#d73a49', + 'codemirror-syntax-string': '#032f62', + 'codemirror-syntax-support': '#005cc5', + 'codemirror-syntax-variable': '#e36209', + 'ansi-black': '#24292e', + 'ansi-black-bright': '#2f363d', + 'ansi-white': '#e1e4e8', + 'ansi-white-bright': '#e1e4e8', + 'ansi-gray': '#959da5', + 'ansi-red': '#f97583', + 'ansi-red-bright': '#fdaeb7', + 'ansi-green': '#85e89d', + 'ansi-green-bright': '#bef5cb', + 'ansi-yellow': '#ffea7f', + 'ansi-yellow-bright': '#fff5b1', + 'ansi-blue': '#79b8ff', + 'ansi-blue-bright': '#c8e1ff', + 'ansi-magenta': '#b392f0', + 'ansi-magenta-bright': '#d1bcf9', + 'ansi-cyan': '#76e3ea', + 'ansi-cyan-bright': '#b3f0ff', +); diff --git a/src/styles/themes.scss b/src/styles/themes.scss new file mode 100644 index 0000000..f6ca6a1 --- /dev/null +++ b/src/styles/themes.scss @@ -0,0 +1,29 @@ +@use './light/variables.scss' as light; +@use './dark/variables.scss' as dark; + +@mixin setVariables($variables) { + @each $name, $value in $variables { + --gitako-#{$name}: #{$value}; + } +} + +:root, // default +:root[data-color-mode='light'] { + @include setVariables(light.$variables); +} + +:root[data-color-mode='dark'][data-dark-theme='dark'] { + @include setVariables(dark.$variables); +} + +@media (prefers-color-scheme: light) { + :root[data-color-mode='auto'][data-light-theme='light'] { + @include setVariables(light.$variables); + } +} + +@media (prefers-color-scheme: dark) { + :root[data-color-mode='auto'][data-dark-theme='dark'] { + @include setVariables(dark.$variables); + } +} From a1394d9e107e4a2136fac3711899154aace15054 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 09:51:45 +0800 Subject: [PATCH 04/87] feat: support color mode - dark dimmed --- src/styles/darkDimmed/variables.scss | 680 +++++++++++++++++++++++++++ src/styles/themes.scss | 31 +- 2 files changed, 702 insertions(+), 9 deletions(-) create mode 100644 src/styles/darkDimmed/variables.scss diff --git a/src/styles/darkDimmed/variables.scss b/src/styles/darkDimmed/variables.scss new file mode 100644 index 0000000..6b46bd4 --- /dev/null +++ b/src/styles/darkDimmed/variables.scss @@ -0,0 +1,680 @@ +$variables: ( + 'auto-black': '#cdd9e5', + 'auto-white': '#1c2128', + 'auto-gray-0': '#22272e', + 'auto-gray-1': '#2d333b', + 'auto-gray-2': '#373e47', + 'auto-gray-3': '#444c56', + 'auto-gray-4': '#545d68', + 'auto-gray-5': '#636e7b', + 'auto-gray-6': '#768390', + 'auto-gray-7': '#909dab', + 'auto-gray-8': '#adbac7', + 'auto-gray-9': '#cdd9e5', + 'auto-blue-0': '#0f2d5c', + 'auto-blue-1': '#143d79', + 'auto-blue-2': '#1b4b91', + 'auto-blue-3': '#255ab2', + 'auto-blue-4': '#316dca', + 'auto-blue-5': '#4184e4', + 'auto-blue-6': '#539bf5', + 'auto-blue-7': '#6cb6ff', + 'auto-blue-8': '#96d0ff', + 'auto-blue-9': '#c6e6ff', + 'auto-green-0': '#113417', + 'auto-green-1': '#1b4721', + 'auto-green-2': '#245829', + 'auto-green-3': '#2b6a30', + 'auto-green-4': '#347d39', + 'auto-green-5': '#46954a', + 'auto-green-6': '#57ab5a', + 'auto-green-7': '#6bc46d', + 'auto-green-8': '#8ddb8c', + 'auto-green-9': '#b4f1b4', + 'auto-yellow-0': '#452700', + 'auto-yellow-1': '#593600', + 'auto-yellow-2': '#6c4400', + 'auto-yellow-3': '#805400', + 'auto-yellow-4': '#966600', + 'auto-yellow-5': '#ae7c14', + 'auto-yellow-6': '#c69026', + 'auto-yellow-7': '#daaa3f', + 'auto-yellow-8': '#eac55f', + 'auto-yellow-9': '#fbe090', + 'auto-orange-0': '#4d210c', + 'auto-orange-1': '#682d0f', + 'auto-orange-2': '#7f3913', + 'auto-orange-3': '#94471b', + 'auto-orange-4': '#ae5622', + 'auto-orange-5': '#cc6b2c', + 'auto-orange-6': '#e0823d', + 'auto-orange-7': '#f69d50', + 'auto-orange-8': '#ffbc6f', + 'auto-orange-9': '#ffddb0', + 'auto-red-0': '#78191b', + 'auto-red-1': '#78191b', + 'auto-red-2': '#922323', + 'auto-red-3': '#ad2e2c', + 'auto-red-4': '#c93c37', + 'auto-red-5': '#e5534b', + 'auto-red-6': '#f47067', + 'auto-red-7': '#ff938a', + 'auto-red-8': '#ffb8b0', + 'auto-red-9': '#ffd8d3', + 'auto-purple-0': '#352160', + 'auto-purple-1': '#472c82', + 'auto-purple-2': '#5936a2', + 'auto-purple-3': '#6b44bc', + 'auto-purple-4': '#8256d0', + 'auto-purple-5': '#986ee2', + 'auto-purple-6': '#b083f0', + 'auto-purple-7': '#dcbdfb', + 'auto-purple-8': '#dcbdfb', + 'auto-purple-9': '#eedcff', + 'auto-pink-0': '#551639', + 'auto-pink-1': '#69264a', + 'auto-pink-2': '#7e325a', + 'auto-pink-3': '#983b6e', + 'auto-pink-4': '#ae4c82', + 'auto-pink-5': '#c96198', + 'auto-pink-6': '#e275ad', + 'auto-pink-7': '#fc8dc7', + 'auto-pink-8': '#ffb3d8', + 'auto-pink-9': '#ffd7eb', + 'text-primary': '#adbac7', + 'text-secondary': '#768390', + 'text-tertiary': '#768390', + 'text-placeholder': '#545d68', + 'text-disabled': '#545d68', + 'text-inverse': '#22272e', + 'text-link': '#539bf5', + 'text-danger': '#e5534b', + 'text-success': '#6bc46d', + 'text-warning': '#daaa3f', + 'text-white': '#cdd9e5', + 'icon-primary': '#adbac7', + 'icon-secondary': '#636e7b', + 'icon-tertiary': '#545d68', + 'icon-info': '#6cb6ff', + 'icon-danger': '#e5534b', + 'icon-success': '#6bc46d', + 'icon-warning': '#daaa3f', + 'border-primary': '#444c56', + 'border-secondary': '#373e47', + 'border-tertiary': '#636e7b', + 'border-overlay': '#444c56', + 'border-inverse': '#cdd9e5', + 'border-info': '#4184e466', + 'border-danger': '#e5534b66', + 'border-success': '#57ab5a66', + 'border-warning': '#ae7c1466', + 'bg-canvas': '#22272e', + 'bg-canvas-mobile': '#1c2128', + 'bg-canvas-inverse': '#cdd9e5', + 'bg-canvas-inset': '#1e2228', + 'bg-primary': '#22272e', + 'bg-secondary': '#22272e', + 'bg-tertiary': '#2d333b', + 'bg-overlay': '#373e47', + 'bg-backdrop': '#1c2128cc', + 'bg-info': '#4184e41a', + 'bg-info-inverse': '#4184e4', + 'bg-danger': '#e5534b1a', + 'bg-danger-inverse': '#c93c37', + 'bg-success': '#46954a1a', + 'bg-success-inverse': '#46954a', + 'bg-warning': '#ae7c141a', + 'bg-warning-inverse': '#ae7c14', + 'shadow-small': '0 0 #0000', + 'shadow-medium': '0 3px 6px #1c2128', + 'shadow-large': '0 8px 24px #1c2128', + 'shadow-extra-large': '0 12px 48px #1c2128', + 'shadow-highlight': '0 0 #0000', + 'shadow-inset': '0 0 #0000', + 'state-hover-primary-bg': '#316dca', + 'state-hover-primary-border': '#4184e4', + 'state-hover-primary-text': '#cdd9e5', + 'state-hover-primary-icon': '#cdd9e5', + 'state-hover-secondary-bg': '#2d333b', + 'state-hover-secondary-border': '#2d333b', + 'state-selected-primary-bg': '#316dca', + 'state-selected-primary-border': '#4184e4', + 'state-selected-primary-text': '#cdd9e5', + 'state-selected-primary-icon': '#cdd9e5', + 'state-focus-border': '#4184e4', + 'state-focus-shadow': '0 0 0 3px #143d79', + 'fade-fg-10': '#cdd9e51a', + 'fade-fg-15': '#cdd9e526', + 'fade-fg-30': '#cdd9e54d', + 'fade-fg-50': '#cdd9e580', + 'fade-fg-70': '#cdd9e5b3', + 'fade-fg-85': '#cdd9e5d9', + 'fade-black-10': '#1c21281a', + 'fade-black-15': '#1c212826', + 'fade-black-30': '#1c21284d', + 'fade-black-50': '#1c212880', + 'fade-black-70': '#1c2128b3', + 'fade-black-85': '#1c2128d9', + 'fade-white-10': '#cdd9e51a', + 'fade-white-15': '#cdd9e526', + 'fade-white-30': '#cdd9e54d', + 'fade-white-50': '#cdd9e580', + 'fade-white-70': '#cdd9e5b3', + 'fade-white-85': '#cdd9e5d9', + 'alert-info-text': '#6cb6ff', + 'alert-info-icon': '#6cb6ff', + 'alert-info-bg': '#4184e41a', + 'alert-info-border': '#4184e466', + 'alert-warn-text': '#daaa3f', + 'alert-warn-icon': '#daaa3f', + 'alert-warn-bg': '#ae7c141a', + 'alert-warn-border': '#ae7c1466', + 'alert-error-text': '#f47067', + 'alert-error-icon': '#f47067', + 'alert-error-bg': '#e5534b1a', + 'alert-error-border': '#e5534b66', + 'alert-success-text': '#6bc46d', + 'alert-success-icon': '#6bc46d', + 'alert-success-bg': '#46954a1a', + 'alert-success-border': '#46954a66', + 'autocomplete-shadow': '0 16px 32px #1c2128d9', + 'autocomplete-row-border': '#444c56', + 'blankslate-icon': '#5f6a76', + 'btn-text': '#adbac7', + 'btn-bg': '#373e47', + 'btn-border': '#444c56', + 'btn-shadow': '0 0 #0000', + 'btn-inset-shadow': '0 0 #0000', + 'btn-hover-bg': '#444c56', + 'btn-hover-border': '#768390', + 'btn-selected-bg': '#2d333b', + 'btn-focus-bg': '#373e47', + 'btn-focus-border': '#768390', + 'btn-focus-shadow': '0 0 0 3px #7683904d', + 'btn-shadow-active': 'inset 0 0.15em 0.3em #1c212826', + 'btn-shadow-input-focus': '0 0 0 0.2em #316dca4d', + 'btn-primary-text': '#fff', + 'btn-primary-bg': '#347d39', + 'btn-primary-border': '#46954a', + 'btn-primary-shadow': '0 0 #0000', + 'btn-primary-inset-shadow': '0 0 #0000', + 'btn-primary-hover-bg': '#46954a', + 'btn-primary-hover-border': '#57ab5a', + 'btn-primary-selected-bg': '#347d39', + 'btn-primary-selected-shadow': '0 0 #0000', + 'btn-primary-disabled-text': '#cdd9e580', + 'btn-primary-disabled-bg': '#347d3999', + 'btn-primary-disabled-border': '#0000', + 'btn-primary-focus-bg': '#347d39', + 'btn-primary-focus-border': '#57ab5a', + 'btn-primary-focus-shadow': '0 0 0 3px #2ea44f66', + 'btn-primary-icon': '#cdd9e5', + 'btn-primary-counter-bg': '#cdd9e533', + 'btn-outline-text': '#539bf5', + 'btn-outline-hover-text': '#539bf5', + 'btn-outline-hover-bg': '#444c56', + 'btn-outline-hover-border': '#539bf5', + 'btn-outline-hover-shadow': '0 1px 0 #1c21281a', + 'btn-outline-hover-inset-shadow': 'inset 0 1px 0 #cdd9e508', + 'btn-outline-hover-counter-bg': '#cdd9e533', + 'btn-outline-selected-text': '#cdd9e5', + 'btn-outline-selected-bg': '#1b4b91', + 'btn-outline-selected-border': '#cdd9e51a', + 'btn-outline-selected-shadow': '0 0 #0000', + 'btn-outline-disabled-text': '#539bf580', + 'btn-outline-disabled-bg': '#22272e', + 'btn-outline-disabled-counter-bg': '#316dca0d', + 'btn-outline-focus-border': '#539bf5', + 'btn-outline-focus-shadow': '0 0 0 3px #255ab266', + 'btn-outline-counter-bg': '#316dca1a', + 'btn-danger-text': '#e5534b', + 'btn-danger-hover-text': '#fff', + 'btn-danger-hover-bg': '#c93c37', + 'btn-danger-hover-border': '#e5534b', + 'btn-danger-hover-shadow': '0 0 #0000', + 'btn-danger-hover-inset-shadow': '0 0 #0000', + 'btn-danger-hover-counter-bg': '#fff3', + 'btn-danger-selected-text': '#fff', + 'btn-danger-selected-bg': '#ad2e2c', + 'btn-danger-selected-border': '#cdd9e51a', + 'btn-danger-selected-shadow': '0 0 #0000', + 'btn-danger-disabled-text': '#e5534b80', + 'btn-danger-disabled-bg': '#22272e', + 'btn-danger-disabled-counter-bg': '#c93c370d', + 'btn-danger-focus-border': '#e5534b', + 'btn-danger-focus-shadow': '0 0 0 3px #ad2e2c66', + 'btn-danger-counter-bg': '#c93c371a', + 'btn-danger-icon': '#e5534b', + 'btn-danger-hover-icon': '#cdd9e5', + 'btn-counter-bg': '#444c56', + 'counter-text': '#adbac7', + 'counter-bg': '#444c56', + 'counter-primary-text': '#adbac7', + 'counter-primary-bg': '#636e7b', + 'counter-secondary-text': '#768390', + 'counter-secondary-bg': '#76839033', + 'dropdown-shadow': '0 16px 32px #1c2128d9', + 'label-border': '#444c56', + 'label-primary-text': '#909dab', + 'label-primary-border': '#636e7b', + 'label-secondary-text': '#768390', + 'label-secondary-border': '#444c56', + 'label-info-text': '#4184e4', + 'label-info-border': '#4184e466', + 'label-success-text': '#57ab5a', + 'label-success-border': '#46954a66', + 'label-warning-text': '#daaa3f', + 'label-warning-border': '#f2d35b66', + 'label-danger-text': '#e5534b', + 'label-danger-border': '#e5534b66', + 'label-orange-text': '#cc6b2c', + 'label-orange-border': '#cc6b2c66', + 'input-bg': '#22272e', + 'input-contrast-bg': '#1c212880', + 'input-border': '#373e47', + 'input-shadow': '0 0 #0000', + 'input-disabled-bg': '#2d333b', + 'input-disabled-border': '#444c56', + 'input-warning-border': '#c69026', + 'input-error-border': '#e5534b', + 'input-tooltip-success-text': '#6bc46d', + 'input-tooltip-success-bg': '#263231', + 'input-tooltip-success-border': '#335a3b', + 'input-tooltip-warning-text': '#daaa3f', + 'input-tooltip-warning-bg': '#30302b', + 'input-tooltip-warning-border': '#624e22', + 'input-tooltip-error-text': '#f47067', + 'input-tooltip-error-bg': '#362b31', + 'input-tooltip-error-border': '#7c3b3b', + 'avatar-bg': '#cdd9e51a', + 'avatar-border': '#cdd9e51a', + 'avatar-stack-fade': '#444c56', + 'avatar-stack-fade-more': '#373e47', + 'avatar-child-shadow': '-2px -2px 0 #22272e', + 'toast-text': '#adbac7', + 'toast-bg': '#444c56', + 'toast-border': '#636e7b', + 'toast-shadow': '0 8px 24px #1c2128', + 'toast-icon': '#cdd9e5', + 'toast-icon-bg': '#316dca', + 'toast-icon-border': '#4184e4', + 'toast-success-text': '#adbac7', + 'toast-success-border': '#636e7b', + 'toast-success-icon': '#cdd9e5', + 'toast-success-icon-bg': '#46954a', + 'toast-success-icon-border': '#57ab5a', + 'toast-warning-text': '#adbac7', + 'toast-warning-border': '#636e7b', + 'toast-warning-icon': '#cdd9e5', + 'toast-warning-icon-bg': '#ae7c14', + 'toast-warning-icon-border': '#c69026', + 'toast-danger-text': '#adbac7', + 'toast-danger-border': '#636e7b', + 'toast-danger-icon': '#cdd9e5', + 'toast-danger-icon-bg': '#c93c37', + 'toast-danger-icon-border': '#e5534b', + 'toast-loading-text': '#adbac7', + 'toast-loading-border': '#636e7b', + 'toast-loading-icon': '#cdd9e5', + 'toast-loading-icon-bg': '#636e7b', + 'toast-loading-icon-border': '#768390', + 'timeline-text': '#909dab', + 'timeline-badge-bg': '#22272e', + 'timeline-badge-success-border': '#46954a', + 'timeline-target-badge-border': '#316dca', + 'timeline-target-badge-shadow': '#1b4b91', + 'select-menu-border-secondary': '#444c56', + 'select-menu-shadow': '0 0 18px #1c212866', + 'select-menu-backdrop-bg': '#1c212880', + 'select-menu-backdrop-border': '#545d68', + 'select-menu-tap-highlight': '#444c5680', + 'select-menu-tap-focus-bg': '#143d79', + 'box-blue-border': '#1b4b91', + 'box-row-yellow-bg': '#ebc4401a', + 'box-row-blue-bg': '#6cb6ff1a', + 'box-header-blue-bg': '#22272e', + 'box-header-blue-border': '#444c56', + 'box-border-info': '#4184e466', + 'box-bg-info': '#4184e41a', + 'box-border-warning': '#ae7c1466', + 'box-bg-warning': '#ae7c141a', + 'branch-name-text': '#adbac7', + 'branch-name-icon': '#909dab', + 'branch-name-bg': '#539bf51a', + 'branch-name-link-text': '#539bf5', + 'branch-name-link-icon': '#539bf5', + 'branch-name-link-bg': '#539bf51a', + 'markdown-code-bg': '#cdd9e526', + 'markdown-frame-border': '#4f5964', + 'markdown-blockquote-border': '#4f5964', + 'markdown-table-border': '#4f5964', + 'markdown-table-tr-border': '#3b424b', + 'menu-heading-text': '#768390', + 'menu-border-active': '#f78166', + 'menu-bg-active': '#2d333b', + 'sidenav-selected-bg': '#373e47', + 'sidenav-border-active': '#f78166', + 'header-text': '#cdd9e5b3', + 'header-bg': '#2d333b', + 'header-logo': '#cdd9e5', + 'filter-item-bar-bg': '#292e35', + 'hidden-text-expander-bg': '#373e47', + 'hidden-text-expander-bg-hover': '#444c56', + 'drag-and-drop-border': '#393f48', + 'upload-enabled-border': '#4f5964', + 'upload-enabled-border-focused': '#4f84d4', + 'previewable-comment-form-border': '#393f48', + 'underlinenav-border': '#444c5600', + 'underlinenav-border-hover': '#444c56', + 'underlinenav-border-active': '#f78166', + 'underlinenav-text': '#768390', + 'underlinenav-text-hover': '#adbac7', + 'underlinenav-text-active': '#adbac7', + 'underlinenav-icon': '#636e7b', + 'underlinenav-icon-hover': '#adbac7', + 'underlinenav-icon-active': '#adbac7', + 'underlinenav-counter-text': '#768390', + 'underlinenav-counter-bg': '#76839033', + 'verified-badge-text': '#57ab5a', + 'verified-badge-bg': '#57ab5a1a', + 'verified-badge-border': '#57ab5a66', + 'social-count-bg': '#373e47', + 'tooltip-text': '#cdd9e5', + 'tooltip-bg': '#636e7b', + 'header-search-bg': '#22272e', + 'header-search-border': '#373e47', + 'search-keyword-hl': '#ae7c1466', + 'diffstat-neutral-bg': '#444c56', + 'diffstat-neutral-border': '#cdd9e51a', + 'diffstat-deletion-bg': '#c93c37', + 'diffstat-deletion-border': '#e5534b', + 'diffstat-addition-bg': '#347d39', + 'diffstat-addition-border': '#46954a', + 'mktg-success': '#3d8942', + 'mktg-info': '#3877d5', + 'mktg-bg-shade-gradient-top': '#1c212811', + 'mktg-bg-shade-gradient-bottom': '#1c212800', + 'mktg-btn-bg': '#316dca', + 'mktg-btn-border': '#316dca', + 'mktg-btn-text': '#cdd9e5', + 'mktg-btn-icon': '#cdd9e5', + 'mktg-btn-focus-shadow': '0 0 0 3px #316dca4d', + 'mktg-btn-hover-bg': '#4184e4', + 'mktg-btn-hover-border': '#4184e4', + 'mktg-btn-disabled-bg': '#4184e480', + 'mktg-btn-disabled-border': '#0000', + 'mktg-btn-disabled-text': '#cdd9e580', + 'mktg-btn-disabled-icon': '#cdd9e580', + 'mktg-btn-primary-bg': '#347d39', + 'mktg-btn-primary-border': '#347d39', + 'mktg-btn-primary-text': '#cdd9e5', + 'mktg-btn-primary-icon': '#cdd9e5', + 'mktg-btn-primary-focus-shadow': '0 0 0 3px #347d394d', + 'mktg-btn-primary-hover-bg': '#46954a', + 'mktg-btn-primary-hover-border': '#46954a', + 'mktg-btn-primary-disabled-bg': '#46954a80', + 'mktg-btn-primary-disabled-border': '#0000', + 'mktg-btn-primary-disabled-text': '#cdd9e580', + 'mktg-btn-primary-disabled-icon': '#cdd9e580', + 'mktg-btn-outline-bg': '#0000', + 'mktg-btn-outline-border': '#4184e480', + 'mktg-btn-outline-text': '#4184e4', + 'mktg-btn-outline-icon': '#4184e4', + 'mktg-btn-outline-focus-shadow': '0 0 0 3px #4184e44d', + 'mktg-btn-outline-hover-bg': '#0000', + 'mktg-btn-outline-hover-border': '#4184e4', + 'mktg-btn-outline-hover-text': '#539bf5', + 'mktg-btn-outline-hover-icon': '#539bf5', + 'mktg-btn-outline-disabled-bg': '#0000', + 'mktg-btn-outline-disabled-border': '#4184e433', + 'mktg-btn-outline-disabled-text': '#4184e480', + 'mktg-btn-outline-disabled-icon': '#4184e480', + 'mktg-btn-dark-bg': '#0000', + 'mktg-btn-dark-border': '#adbac780', + 'mktg-btn-dark-text': '#adbac7', + 'mktg-btn-dark-icon': '#adbac7', + 'mktg-btn-dark-focus-shadow': '0 0 0 3px #adbac74d', + 'mktg-btn-dark-hover-bg': '#adbac780', + 'mktg-btn-dark-hover-border': '#adbac780', + 'mktg-btn-dark-hover-text': '#22272e', + 'mktg-btn-dark-hover-icon': '#22272e', + 'mktg-btn-dark-disabled-bg': '#0000', + 'mktg-btn-dark-disabled-border': '#adbac733', + 'mktg-btn-dark-disabled-text': '#adbac780', + 'mktg-btn-dark-disabled-icon': '#adbac780', + 'files-explorer-icon': '#636e7b', + 'hl-author-bg': '#0f2d5c', + 'hl-author-border': '#1b4b91', + 'logo-subdued': '#444c56', + 'discussion-border': '#494c49', + 'discussion-bg-success': '#46954a1a', + 'actions-workflow-table-sticky-bg': '#22272ef2', + 'repo-language-color-border': '#cdd9e533', + 'code-selection-bg': '#6cb6ff4d', + 'highlight-text': '#ffd467', + 'highlight-bg': '#cc8f2c61', + 'blob-line-highlight-bg': '#c6902626', + 'blob-line-highlight-border': '#daaa3f', + 'diff-addition-text': '#6bc46d', + 'diff-addition-bg': '#46954a33', + 'diff-addition-border': '#2b6a30', + 'diff-deletion-text': '#e5534b', + 'diff-deletion-bg': '#c93c3733', + 'diff-deletion-border': '#ad2e2c', + 'diff-change-text': '#daaa3f', + 'diff-change-bg': '#452700', + 'diff-change-border': '#966600', + 'diff-blob-num-text': '#cdd9e54d', + 'diff-blob-num-hover-text': '#cdd9e599', + 'diff-blob-addition-num-text': '#57ab5a', + 'diff-blob-addition-num-hover-text': '#8ddb8c', + 'diff-blob-addition-num-bg': '#46954a1a', + 'diff-blob-addition-line-bg': '#46954a33', + 'diff-blob-addition-word-bg': '#46954a8c', + 'diff-blob-deletion-num-text': '#e5534b', + 'diff-blob-deletion-num-hover-text': '#ff938a', + 'diff-blob-deletion-num-bg': '#c93c371a', + 'diff-blob-deletion-line-bg': '#c93c3733', + 'diff-blob-deletion-word-bg': '#c93c3780', + 'diff-blob-hunk-text': '#768390', + 'diff-blob-hunk-num-bg': '#539bf526', + 'diff-blob-hunk-line-bg': '#539bf51a', + 'diff-blob-empty-block-bg': '#2d333b', + 'diff-blob-selected-line-highlight-bg': '#ae7c141a', + 'diff-blob-selected-line-highlight-border': '#ae7c14', + 'diff-blob-selected-line-highlight-mix-blend-mode': 'normal', + 'diff-blob-expander-icon': '#768390', + 'diff-blob-expander-hover-icon': '#cdd9e5', + 'diff-blob-expander-hover-bg': '#316dca', + 'diff-blob-comment-button-icon': '#cdd9e5', + 'diff-blob-comment-button-bg': '#316dca', + 'diff-blob-comment-button-gradient-bg': '#437bd1', + 'global-nav-logo': '#cdd9e5', + 'global-nav-bg': '#2d333b', + 'global-nav-text': '#adbac7', + 'global-nav-icon': '#adbac7', + 'global-nav-input-bg': '#22272e', + 'global-nav-input-border': '#373e47', + 'global-nav-input-icon': '#373e47', + 'global-nav-input-placeholder': '#545d68', + 'calendar-graph-day-bg': '#2d333b', + 'calendar-graph-day-border': '#1b1f230f', + 'calendar-graph-day-L1-bg': '#003820', + 'calendar-graph-day-L2-bg': '#00602d', + 'calendar-graph-day-L3-bg': '#10983d', + 'calendar-graph-day-L4-bg': '#27d545', + 'calendar-graph-day-L4-border': '#ffffff0d', + 'calendar-graph-day-L3-border': '#ffffff0d', + 'calendar-graph-day-L2-border': '#ffffff0d', + 'calendar-graph-day-L1-border': '#ffffff0d', + 'footer-invertocat-octicon': '#444c56', + 'footer-invertocat-octicon-hover': '#636e7b', + 'pr-state-draft-text': '#768390', + 'pr-state-draft-bg': '#7683901a', + 'pr-state-draft-border': '#76839066', + 'pr-state-open-text': '#57ab5a', + 'pr-state-open-bg': '#57ab5a1a', + 'pr-state-open-border': '#57ab5a66', + 'pr-state-merged-text': '#986ee2', + 'pr-state-merged-bg': '#b083f01a', + 'pr-state-merged-border': '#b083f066', + 'pr-state-closed-text': '#e5534b', + 'pr-state-closed-bg': '#c93c371a', + 'pr-state-closed-border': '#c93c3766', + 'topic-tag-text': '#539bf5', + 'topic-tag-bg': '#4184e41a', + 'topic-tag-hover-bg': '#4184e433', + 'topic-tag-active-bg': '#4184e426', + 'merge-box-success-icon-bg': '#46954a1a', + 'merge-box-success-icon-text': '#57ab5a', + 'merge-box-success-icon-border': '#46954a66', + 'merge-box-success-indicator-bg': '#347d39', + 'merge-box-success-indicator-border': '#46954a', + 'merge-box-merged-icon-bg': '#b083f01a', + 'merge-box-merged-icon-text': '#986ee2', + 'merge-box-merged-icon-border': '#b083f066', + 'merge-box-merged-box-border': '#b083f066', + 'merge-box-neutral-icon-bg': '#adbac71a', + 'merge-box-neutral-icon-text': '#768390', + 'merge-box-neutral-icon-border': '#adbac766', + 'merge-box-neutral-indicator-bg': '#545d68', + 'merge-box-neutral-indicator-border': '#636e7b', + 'merge-box-warning-icon-bg': '#ae7c141a', + 'merge-box-warning-icon-text': '#daaa3f', + 'merge-box-warning-icon-border': '#ae7c1466', + 'merge-box-warning-box-border': '#ae7c1466', + 'merge-box-warning-merge-highlight': '#ae7c141a', + 'merge-box-error-icon-bg': '#e5534b1a', + 'merge-box-error-icon-text': '#e5534b', + 'merge-box-error-icon-border': '#e5534b66', + 'merge-box-error-indicator-bg': '#c93c37', + 'merge-box-error-indicator-border': '#e5534b', + 'project-card-bg': '#2d333b', + 'project-header-bg': '#22272e', + 'project-sidebar-bg': '#2d333b', + 'project-gradient-in': '#2d333b', + 'project-gradient-out': '#2d333b00', + 'checks-bg': '#1e2228', + 'checks-run-border-width': '1px', + 'checks-container-border-width': '1px', + 'checks-text-primary': '#adbac7', + 'checks-text-secondary': '#768390', + 'checks-text-link': '#539bf5', + 'checks-btn-icon': '#636e7b', + 'checks-btn-hover-icon': '#adbac7', + 'checks-btn-hover-bg': '#444c56', + 'checks-input-text': '#768390', + 'checks-input-placeholder-text': '#545d68', + 'checks-input-focus-text': '#adbac7', + 'checks-input-bg': '#22272e', + 'checks-input-shadow': '0 0 0 1px #373e47', + 'checks-dropdown-text': '#adbac7', + 'checks-dropdown-bg': '#373e47', + 'checks-dropdown-border': '#444c56', + 'checks-dropdown-hover-text': '#cdd9e5', + 'checks-dropdown-hover-bg': '#316dca', + 'checks-dropdown-btn-hover-text': '#cdd9e5', + 'checks-dropdown-btn-hover-bg': '#2d333b', + 'checks-scrollbar-thumb-bg': '#444c56', + 'checks-header-label-text': '#768390', + 'checks-header-label-open-text': '#adbac7', + 'checks-header-border': '#373e47', + 'checks-header-icon': '#636e7b', + 'checks-line-text': '#768390', + 'checks-line-num-text': '#768390', + 'checks-line-timestamp-text': '#768390', + 'checks-line-hover-bg': '#2d333b', + 'checks-line-selected-bg': '#4184e41a', + 'checks-line-selected-num-text': '#539bf5', + 'checks-line-dt-fm-text': '#22272e', + 'checks-line-dt-fm-bg': '#c69026', + 'checks-gate-bg': '#80540026', + 'checks-gate-text': '#768390', + 'checks-gate-waiting-text': '#daaa3f', + 'checks-step-header-open-bg': '#2d333b', + 'checks-step-error-text': '#e5534b', + 'checks-step-warning-text': '#daaa3f', + 'checks-logline-text': '#636e7b', + 'checks-logline-num-text': '#768390', + 'checks-logline-debug-text': '#b083f0', + 'checks-logline-error-text': '#768390', + 'checks-logline-error-num-text': '#768390', + 'checks-logline-error-bg': '#e5534b1a', + 'checks-logline-warning-text': '#768390', + 'checks-logline-warning-num-text': '#daaa3f', + 'checks-logline-warning-bg': '#ae7c141a', + 'checks-logline-command-text': '#539bf5', + 'checks-logline-section-text': '#6bc46d', + 'intro-shelf-gradient-left': '#4184e41a', + 'intro-shelf-gradient-right': '#46954a1a', + 'intro-shelf-gradient-in': '#22272e', + 'intro-shelf-gradient-out': '#22272e00', + 'marketing-icon-primary': '#6cb6ff', + 'marketing-icon-secondary': '#316dca', + 'prettylights-syntax-comment': '#768390', + 'prettylights-syntax-constant': '#6cb6ff', + 'prettylights-syntax-entity': '#dcbdfb', + 'prettylights-syntax-storage-modifier-import': '#adbac7', + 'prettylights-syntax-entity-tag': '#8ddb8c', + 'prettylights-syntax-keyword': '#f47067', + 'prettylights-syntax-string': '#96d0ff', + 'prettylights-syntax-variable': '#f69d50', + 'prettylights-syntax-brackethighlighter-unmatched': '#e5534b', + 'prettylights-syntax-invalid-illegal-text': '#cdd9e5', + 'prettylights-syntax-invalid-illegal-bg': '#922323', + 'prettylights-syntax-carriage-return-text': '#cdd9e5', + 'prettylights-syntax-carriage-return-bg': '#ad2e2c', + 'prettylights-syntax-string-regexp': '#8ddb8c', + 'prettylights-syntax-markup-list': '#eac55f', + 'prettylights-syntax-markup-heading': '#316dca', + 'prettylights-syntax-markup-italic': '#adbac7', + 'prettylights-syntax-markup-bold': '#adbac7', + 'prettylights-syntax-markup-deleted-text': '#ffd8d3', + 'prettylights-syntax-markup-deleted-bg': '#78191b', + 'prettylights-syntax-markup-inserted-text': '#b4f1b4', + 'prettylights-syntax-markup-inserted-bg': '#1b4721', + 'prettylights-syntax-markup-changed-text': '#ffddb0', + 'prettylights-syntax-markup-changed-bg': '#682d0f', + 'prettylights-syntax-markup-ignored-text': '#adbac7', + 'prettylights-syntax-markup-ignored-bg': '#255ab2', + 'prettylights-syntax-meta-diff-range': '#dcbdfb', + 'prettylights-syntax-brackethighlighter-angle': '#768390', + 'prettylights-syntax-sublimelinter-gutter-mark': '#545d68', + 'prettylights-syntax-constant-other-reference-link': '#96d0ff', + 'codemirror-text': '#adbac7', + 'codemirror-bg': '#22272e', + 'codemirror-gutters-bg': '#22272e', + 'codemirror-guttermarker-text': '#22272e', + 'codemirror-guttermarker-subtle-text': '#636e7b', + 'codemirror-linenumber-text': '#768390', + 'codemirror-cursor': '#cdd9e5', + 'codemirror-selection-bg': '#6cb6ff4d', + 'codemirror-activeline-bg': '#2d333b', + 'codemirror-matchingbracket-text': '#adbac7', + 'codemirror-lines-bg': '#22272e', + 'codemirror-syntax-comment': '#768390', + 'codemirror-syntax-constant': '#6cb6ff', + 'codemirror-syntax-entity': '#dcbdfb', + 'codemirror-syntax-keyword': '#f47067', + 'codemirror-syntax-storage': '#f47067', + 'codemirror-syntax-string': '#96d0ff', + 'codemirror-syntax-support': '#6cb6ff', + 'codemirror-syntax-variable': '#f69d50', + 'ansi-black': '#22272e', + 'ansi-black-bright': '#2d333b', + 'ansi-white': '#909dab', + 'ansi-white-bright': '#909dab', + 'ansi-gray': '#636e7b', + 'ansi-red': '#f47067', + 'ansi-red-bright': '#ff938a', + 'ansi-green': '#57ab5a', + 'ansi-green-bright': '#6bc46d', + 'ansi-yellow': '#c69026', + 'ansi-yellow-bright': '#daaa3f', + 'ansi-blue': '#539bf5', + 'ansi-blue-bright': '#6cb6ff', + 'ansi-magenta': '#b083f0', + 'ansi-magenta-bright': '#dcbdfb', + 'ansi-cyan': '#76e3ea', + 'ansi-cyan-bright': '#b3f0ff', +); diff --git a/src/styles/themes.scss b/src/styles/themes.scss index f6ca6a1..05e82df 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -1,5 +1,6 @@ @use './light/variables.scss' as light; @use './dark/variables.scss' as dark; +@use './darkDimmed/variables.scss' as darkDimmed; @mixin setVariables($variables) { @each $name, $value in $variables { @@ -7,23 +8,35 @@ } } -:root, // default -:root[data-color-mode='light'] { - @include setVariables(light.$variables); +@mixin bindTheme($name) { + &[data-#{$name}-theme='light'] { + @include setVariables(light.$variables); + } + &[data-#{$name}-theme='dark'] { + @include setVariables(dark.$variables); + } + &[data-#{$name}-theme='dark_dimmed'] { + @include setVariables(darkDimmed.$variables); + } } -:root[data-color-mode='dark'][data-dark-theme='dark'] { - @include setVariables(dark.$variables); +:root, // default +:root[data-color-mode='light'] { + @include bindTheme('light'); +} + +:root[data-color-mode='dark'] { + @include bindTheme('dark'); } @media (prefers-color-scheme: light) { - :root[data-color-mode='auto'][data-light-theme='light'] { - @include setVariables(light.$variables); + :root[data-color-mode='auto'] { + @include bindTheme('light'); } } @media (prefers-color-scheme: dark) { - :root[data-color-mode='auto'][data-dark-theme='dark'] { - @include setVariables(dark.$variables); + :root[data-color-mode='auto'] { + @include bindTheme('dark'); } } From 56c9ed579c521abe28fe27c514e410a4c2fe869d Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 10:16:19 +0800 Subject: [PATCH 05/87] refactor: reduce output CSS size --- src/styles/themes.scss | 48 +++++++++++++++++++++++++++++------------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 05e82df..16edb1b 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -8,35 +8,53 @@ } } -@mixin bindTheme($name) { - &[data-#{$name}-theme='light'] { +// Following rules are organized according to common variables to reduce output CSS size +:root, // default +:root { + &[data-color-mode='light'][data-light-theme='light'], + &[data-color-mode='dark'][data-dark-theme='light'] { @include setVariables(light.$variables); } - &[data-#{$name}-theme='dark'] { + + &[data-color-mode='light'][data-light-theme='dark'], + &[data-color-mode='dark'][data-dark-theme='dark'] { @include setVariables(dark.$variables); } - &[data-#{$name}-theme='dark_dimmed'] { + + &[data-color-mode='light'][data-light-theme='dark_dimmed'], + &[data-color-mode='dark'][data-dark-theme='dark_dimmed'] { @include setVariables(darkDimmed.$variables); } } -:root, // default -:root[data-color-mode='light'] { - @include bindTheme('light'); -} - -:root[data-color-mode='dark'] { - @include bindTheme('dark'); -} - @media (prefers-color-scheme: light) { :root[data-color-mode='auto'] { - @include bindTheme('light'); + &[data-light-theme='light'] { + @include setVariables(light.$variables); + } + + &[data-light-theme='dark'] { + @include setVariables(dark.$variables); + } + + &[data-light-theme='dark_dimmed'] { + @include setVariables(darkDimmed.$variables); + } } } @media (prefers-color-scheme: dark) { :root[data-color-mode='auto'] { - @include bindTheme('dark'); + &[data-dark-theme='light'] { + @include setVariables(light.$variables); + } + + &[data-dark-theme='dark'] { + @include setVariables(dark.$variables); + } + + &[data-dark-theme='dark_dimmed'] { + @include setVariables(darkDimmed.$variables); + } } } From d92f93a85749bf743a105e39adb6aa9bd6329728 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 10:17:36 +0800 Subject: [PATCH 06/87] 2.7.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 586e505..93daa60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.7.2", + "version": "2.7.3", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From 0aeaab417993df5b5df7241bdd4095aced9aaa3b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 10:21:40 +0800 Subject: [PATCH 07/87] fix: apply default theme colors --- src/styles/themes.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 16edb1b..eb60cbf 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -9,7 +9,11 @@ } // Following rules are organized according to common variables to reduce output CSS size -:root, // default +:root { + // default, e.g. when not login + @include setVariables(light.$variables); +} + :root { &[data-color-mode='light'][data-light-theme='light'], &[data-color-mode='dark'][data-dark-theme='light'] { From 7390676ec2d944ab358bb6de05dcb03f7491ac21 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 3 Apr 2021 10:21:49 +0800 Subject: [PATCH 08/87] 2.7.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 93daa60..26bd5c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.7.3", + "version": "2.7.4", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From f026a7dfd2a94f221f204820ba80a3913ff055ba Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 13 Apr 2021 21:30:34 +0800 Subject: [PATCH 09/87] feature: hide sidebar when auth failed but token is set --- src/components/SideBar.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index b9b1115..c1c4ea5 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -68,18 +68,27 @@ const RawGitako: React.FC = function RawGitako(props) { ) const intelligentToggle = configContext.value.intelligentToggle + // Hide sidebar when error due to auth but token is set #128 + const hideSidebarOnInvalidToken: boolean = + intelligentToggle === null && Boolean(errorDueToAuth && accessToken) React.useEffect(() => { - const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle - props.setShouldShow(shouldShow) - }, [intelligentToggle, props.metaData]) + if (hideSidebarOnInvalidToken) { + props.setShouldShow(false) + } else { + const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle + props.setShouldShow(shouldShow) + } + }, [intelligentToggle, hideSidebarOnInvalidToken, props.metaData]) const updateSideBarVisibility = React.useCallback( function updateSideBarVisibility() { - if (intelligentToggle === null) { + if (hideSidebarOnInvalidToken) { + props.setShouldShow(false) + } else if (intelligentToggle === null) { props.setShouldShow(platform.shouldShow()) } }, - [props.metaData?.branchName, intelligentToggle], + [props.metaData?.branchName, intelligentToggle, hideSidebarOnInvalidToken], ) useOnPJAXDone(updateSideBarVisibility) From 4b96e018458e78656329d52b509bd23b99f869e0 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 13 Apr 2021 21:49:51 +0800 Subject: [PATCH 10/87] fix: catch unexpected PJAX with scope --- src/components/SideBar.tsx | 8 +++++++- src/platforms/GitHub/index.ts | 5 +++++ src/platforms/platform.d.ts | 1 + 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index c1c4ea5..cf022e9 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -15,6 +15,7 @@ import { cx } from 'utils/cx' import { parseURLSearch, run } from 'utils/general' import { loadWithPJAX, useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX' import { useProgressBar } from 'utils/hooks/useProgressBar' +import { useStateIO } from 'utils/hooks/useStateIO' import * as keyHelper from 'utils/keyHelper' import { Icon } from './Icon' import { LoadingIndicator } from './LoadingIndicator' @@ -47,9 +48,14 @@ const RawGitako: React.FC = function RawGitako(props) { }) }, []) + /** + * Catch unexpected PJAX, force trigger init on scope change. + */ + const pageScope = useStateIO(platform.resolvePageScope?.()) + useOnPJAXDone(() => pageScope.onChange(platform.resolvePageScope?.())) React.useEffect(() => { props.init() - }, [accessToken]) + }, [accessToken, pageScope.value]) React.useEffect( function attachKeyDown() { diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 0cb8037..674a41f 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -118,6 +118,11 @@ export const GitHub: Platform = { } return metaData }, + resolvePageScope() { + if (URLHelper.parse().type === 'releases') return 'releases' + if (URLHelper.isInPullPage()) return 'pull' + return 'general' + }, async getDefaultBranchName({ userName, repoName }, accessToken) { const data = await API.getRepoMeta(userName, repoName, accessToken) return data.default_branch diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts index 480e555..12cd2a6 100644 --- a/src/platforms/platform.d.ts +++ b/src/platforms/platform.d.ts @@ -2,6 +2,7 @@ type Platform = { isEnterprise(): boolean // branch name might not be available when resolving from DOM and URL resolveMeta(): MakeOptional | null + resolvePageScope?(): string getDefaultBranchName( metaData: Pick, accessToken?: string, From 48d2053851105d8013cb931f9eec39e25307945d Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 13 Apr 2021 21:54:23 +0800 Subject: [PATCH 11/87] fix: prevent duplicated copy file buttons --- src/platforms/GitHub/CopyFileButton.tsx | 2 +- src/platforms/GitHub/DOMHelper.ts | 16 ++++++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/platforms/GitHub/CopyFileButton.tsx b/src/platforms/GitHub/CopyFileButton.tsx index 753191b..47d26c0 100644 --- a/src/platforms/GitHub/CopyFileButton.tsx +++ b/src/platforms/GitHub/CopyFileButton.tsx @@ -43,7 +43,7 @@ export function CopyFileButton(props: React.PropsWithChildren) { }, []) return ( - + {content} ) diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts index c5d2b99..146812a 100644 --- a/src/platforms/GitHub/DOMHelper.ts +++ b/src/platforms/GitHub/DOMHelper.ts @@ -139,6 +139,13 @@ export function getCodeElement() { * click these buttons will copy file content to clipboard */ export function attachCopyFileBtn() { + const removeButtons = () => { + const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`) + buttons.forEach(button => { + button.parentElement?.removeChild(button) + }) + } + if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) { // the button group in file content header const buttonGroupSelector = '.repository-content .Box-header .BtnGroup' @@ -148,6 +155,8 @@ export function attachCopyFileBtn() { raiseError(new Error(`No button groups found`)) } + removeButtons() // prevent duplicated buttons + buttonGroups.forEach(async buttonGroup => { if (!buttonGroup.lastElementChild) return const button = await renderReact(React.createElement(CopyFileButton)) @@ -158,12 +167,7 @@ export function attachCopyFileBtn() { } // return callback so that disabling after redirecting from file page to non-page works properly - return () => { - const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`) - buttons.forEach(button => { - button.parentElement?.removeChild(button) - }) - } + return removeButtons } export function attachCopySnippet() { From 70981ed72a6a63cfb0952b3d4b1c5c35808c962b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 13 Apr 2021 22:23:36 +0800 Subject: [PATCH 12/87] feature: support new GitHub token format --- .../settings/AccessTokenSettings.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx index e3097b8..b675dbe 100644 --- a/src/components/settings/AccessTokenSettings.tsx +++ b/src/components/settings/AccessTokenSettings.tsx @@ -8,7 +8,7 @@ import * as React from 'react' import { useStateIO } from 'utils/hooks/useStateIO' import { SettingsSection } from './SettingsSection' -const ACCESS_TOKEN_REGEXP = /^[0-9a-f]+$/ +const ACCESS_TOKEN_REGEXP = /^([0-9a-fA-F]+|gh[pousr]_[A-Za-z0-9_]+)$/ type Props = {} @@ -37,30 +37,33 @@ export function AccessTokenSettings(props: React.PropsWithChildren) { [], ) - const onPressAccessToken = React.useCallback(({ key }: React.KeyboardEvent) => { - if (key === 'Enter') saveToken() - }, []) - const saveToken = React.useCallback( - async (hint?: typeof useAccessTokenHint.value) => { + async ( + hint: typeof useAccessTokenHint.value = ( + + window.location.reload()}> + Reload + {' '} + to activate! + + ), + ) => { if (accessToken) { configContext.onChange({ accessToken }) useAccessToken.onChange('') - useAccessTokenHint.onChange( - hint || ( - - window.location.reload()}> - Reload - {' '} - to activate! - - ), - ) + useAccessTokenHint.onChange(hint) } }, [accessToken], ) + const onPressAccessToken = React.useCallback( + ({ key }: React.KeyboardEvent) => { + if (key === 'Enter') saveToken() + }, + [saveToken], + ) + return ( ) { )} - {accessTokenHint && !focusInput.value && {accessTokenHint}} + {accessTokenHint && {accessTokenHint}} ) } From 6a21e7ce46bc8a7a6b79ba3699781503cea73cc1 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 13 Apr 2021 22:38:37 +0800 Subject: [PATCH 13/87] feat: resolve pull id into scope --- src/platforms/GitHub/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 674a41f..49cf7c0 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -120,7 +120,8 @@ export const GitHub: Platform = { }, resolvePageScope() { if (URLHelper.parse().type === 'releases') return 'releases' - if (URLHelper.isInPullPage()) return 'pull' + const pullId = URLHelper.isInPullPage() + if (pullId) return `pull-${pullId}` return 'general' }, async getDefaultBranchName({ userName, repoName }, accessToken) { From e40eca2922ef39164e35de08a0f190a0743cb51e Mon Sep 17 00:00:00 2001 From: dishuostec Date: Wed, 14 Apr 2021 10:17:30 +0800 Subject: [PATCH 14/87] Use "window.location.protocol" instead of hardcoded "https". --- src/platforms/Gitea/API.ts | 8 ++++---- src/platforms/Gitea/index.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/platforms/Gitea/API.ts b/src/platforms/Gitea/API.ts index 2a7a849..c566d33 100644 --- a/src/platforms/Gitea/API.ts +++ b/src/platforms/Gitea/API.ts @@ -57,14 +57,14 @@ async function request( } } -export const API_ENDPOINT = `${window.location.host}/api/v1` +export const API_ENDPOINT = `${window.location.protocol}//${window.location.host}/api/v1` export async function getRepoMeta( userName: string, repoName: string, accessToken?: string, ): Promise { - const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}` + const url = `${API_ENDPOINT}/repos/${userName}/${repoName}` return await request(url, { accessToken }) } @@ -78,7 +78,7 @@ export async function getTreeData( const search = new URLSearchParams() if (recursive) search.set('recursive', '1') const url = - `https://${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search + `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search return await request(url, { accessToken }) } @@ -88,7 +88,7 @@ export async function getBlobData( sha: string, accessToken?: string, ): Promise { - const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/git/blobs/${sha}` + const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/blobs/${sha}` return await request(url, { accessToken }) } diff --git a/src/platforms/Gitea/index.ts b/src/platforms/Gitea/index.ts index 04d12ee..8138794 100644 --- a/src/platforms/Gitea/index.ts +++ b/src/platforms/Gitea/index.ts @@ -65,7 +65,7 @@ function getUrlForRedirect( // Modern browsers have great support for handling unsafe URL, // It may be possible to sanitize path with // `path => path.includes('#') ? path.replace(/#/g, '%23') : '...' - return `https://${ + return `${window.location.protocol}//${ window.location.host }/${userName}/${repoName}/src/branch/${branchName}/${path .split('/') @@ -107,8 +107,8 @@ export const Gitea: Platform = { }, resolveUrlFromMetaData({ userName, repoName }) { return { - repoUrl: `https://${window.location.host}/${userName}/${repoName}`, - userUrl: `https://${window.location.host}/${userName}`, + repoUrl: `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`, + userUrl: `${window.location.protocol}//${window.location.host}/${userName}`, } }, async getTreeData(metaData, path, recursive, accessToken) { @@ -163,6 +163,6 @@ export const Gitea: Platform = { return API.OAuth(code) }, getOAuthLink() { - return `https://${window.location.host}/api/v1/user/applications/oauth2` + return `${window.location.protocol}//${window.location.host}/api/v1/user/applications/oauth2` }, } From ee472899ae627db52e76953907548b2683962d92 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 18 Apr 2021 00:22:06 +0800 Subject: [PATCH 15/87] refactor: hide metabar on auth error --- src/components/AccessDeniedDescription.tsx | 2 +- src/components/SideBar.tsx | 18 ++++++++---------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/AccessDeniedDescription.tsx b/src/components/AccessDeniedDescription.tsx index 7071ce9..cc8290b 100644 --- a/src/components/AccessDeniedDescription.tsx +++ b/src/components/AccessDeniedDescription.tsx @@ -6,7 +6,7 @@ import * as React from 'react' export function AccessDeniedDescription({ hasToken }: { hasToken: boolean }) { return (
-
Access Denied
+

Access Denied

{hasToken ? ( <>

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index cf022e9..0a864c4 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -120,17 +120,13 @@ const RawGitako: React.FC = function RawGitako(props) {

- {metaData ? ( -
- -
- ) : ( - - )} {errorDueToAuth ? ( - ) : ( - metaData && ( + ) : metaData ? ( + <> +
+ +
= function RawGitako(props) { config={configContext.value} defer={defer} /> - ) + + ) : ( + )}
Date: Sun, 18 Apr 2021 00:24:00 +0800 Subject: [PATCH 16/87] 2.8.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 26bd5c7..a40b7a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.7.4", + "version": "2.8.0", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From 50283e0ceabc37c27817d001b342bc6710dfd8d0 Mon Sep 17 00:00:00 2001 From: flowforfrank Date: Fri, 23 Apr 2021 08:30:54 +0200 Subject: [PATCH 17/87] Add support for showing comments associated with files --- src/components/Node.tsx | 5 +++++ src/components/settings/SidebarSettings.tsx | 8 +++++++ src/global.d.ts | 1 + src/platforms/GitHub/API.ts | 10 +++++++++ src/platforms/GitHub/Request.d.ts | 5 +++++ src/platforms/GitHub/index.ts | 4 +++- src/styles/index.scss | 23 +++++++++++++++++++++ src/utils/configHelper.ts | 4 ++++ 8 files changed, 59 insertions(+), 1 deletion(-) diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 5fa7942..7fd3ea1 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -38,6 +38,10 @@ export function Node({ style, onClick, }: Props) { + const { + value: { commentToggle }, + } = useConfigs() + return ( {renderLabelText(node)} + {(commentToggle && !!node.comments) && 💬 {node.comments}} {renderActions &&
{renderActions(node)}
} diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx index 8f805b0..3ac1ed8 100644 --- a/src/components/settings/SidebarSettings.tsx +++ b/src/components/settings/SidebarSettings.tsx @@ -102,6 +102,14 @@ export function SidebarSettings(props: React.PropsWithChildren) { }, }} /> + ) } diff --git a/src/global.d.ts b/src/global.d.ts index a7771b6..d18d63a 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -13,6 +13,7 @@ type TreeNode = { url?: string sha?: string accessDenied?: boolean + comments: number } type IO = { diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts index 083912e..0491ef9 100644 --- a/src/platforms/GitHub/API.ts +++ b/src/platforms/GitHub/API.ts @@ -106,6 +106,16 @@ export async function getPullTreeData( return await request(url, { accessToken }) } +export async function getPullComments( + userName: string, + repoName: string, + pullId: string, + accessToken?: string, +): Promise { + const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments` + return await request(url, { accessToken }) +} + export async function getPullPageDocument( userName: string, repoName: string, diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts index a010a1c..257cf46 100644 --- a/src/platforms/GitHub/Request.d.ts +++ b/src/platforms/GitHub/Request.d.ts @@ -35,7 +35,12 @@ declare namespace GitHubAPI { changed_files: number } + type PullComment = { + path: string + } + type PullTreeData = PullTreeItem[] + type PullComments = PullComment[] type MetaData = { name: string diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 49cf7c0..e75f1ab 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -146,9 +146,10 @@ export const GitHub: Platform = { GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT, ) let page = 1 - const [pullData, treeData] = await Promise.all([ + const [pullData, treeData, commentData] = await Promise.all([ API.getPullData(userName, repoName, pullId, accessToken), API.getPullTreeData(userName, repoName, pullId, page, accessToken), + API.getPullComments(userName, repoName, pullId, accessToken), ]) const count = pullData.changed_files @@ -176,6 +177,7 @@ export const GitHub: Platform = { window.location.search }#${creator(item.filename) || ''}`, sha: item.sha, + comments: commentData?.filter(comment => item.filename === comment.path).length, })) const root = processTree(nodes) diff --git a/src/styles/index.scss b/src/styles/index.scss index 85a3e31..bc813e2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -503,6 +503,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- &.focused, &:hover { background: var(--gitako-bg-tertiary); + + .node-item-comment { + background: var(--gitako-bg-tertiary); + background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + background: linear-gradient(to right, transparent 0% ,var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161b22', endColorstr='#161b22', GradientType=1); + } } &:active { background: var(--gitako-bg-secondary); @@ -574,6 +582,21 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } } + .node-item-comment { + position: absolute; + top: 0; + right: 0; + height: 36px; + line-height: 37px; + padding: 0 10px; + color: var(--gitako-auto-gray-5); + background: var(--gitako-bg-primary); + background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + background: linear-gradient(to right, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d1117', endColorstr='#0d1117', GradientType=1); + } + .go-to-button, .find-in-folder-button { @include icon-button(); diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts index 68ddd08..ca6ae44 100644 --- a/src/utils/configHelper.ts +++ b/src/utils/configHelper.ts @@ -14,6 +14,7 @@ export type Config = { toggleButtonContent: 'logo' | 'octoface' recursiveToggleFolder: 'shift' | 'alt' searchMode: SearchMode + commentToggle: boolean } enum configKeys { @@ -29,6 +30,7 @@ enum configKeys { toggleButtonContent = 'toggleButtonContent', recursiveToggleFolder = 'recursiveToggleFolder', searchMode = 'searchMode', + commentToggle = 'commentToggle', } const defaultConfigs: Config = { @@ -44,6 +46,7 @@ const defaultConfigs: Config = { toggleButtonContent: 'logo', recursiveToggleFolder: 'shift', searchMode: 'fuzzy', + commentToggle: true, } const configKeyArray = Object.values(configKeys) @@ -85,6 +88,7 @@ async function migrateConfig() { 'copySnippetButton', 'intelligentToggle', 'icons', + 'commentToggle', ]) if (config && (!('configVersion' in config) || config.configVersion < version)) { await storageHelper.set({ platform_GitHub: config, configVersion: version }) From e9f7ee2f9191bd7a72642aff73a27b842ed24a8c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 18 Apr 2021 13:24:46 +0800 Subject: [PATCH 18/87] refactor: status mapping --- src/components/FileExplorer.tsx | 11 ++---- src/components/SideBar.tsx | 60 ++++++++++++++++++--------------- src/driver/core/FileExplorer.ts | 2 +- src/driver/core/SideBar.ts | 16 ++++----- 4 files changed, 43 insertions(+), 46 deletions(-) diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index fb66e48..81002d4 100644 --- a/src/components/FileExplorer.tsx +++ b/src/components/FileExplorer.tsx @@ -138,14 +138,7 @@ const RawFileExplorer: React.FC = function RawFileExplor onClick={freeze ? toggleShowSettings : undefined} > {state !== 'done' ? ( - + ) : ( visibleNodes && renderNodeContext && ( @@ -183,7 +176,7 @@ const RawFileExplorer: React.FC = function RawFileExplor RawFileExplorer.defaultProps = { freeze: false, - state: 'pulling', + state: 'rendering', searchKey: '', visibleNodes: null, } diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 0a864c4..ab294b8 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -23,9 +23,9 @@ import { Theme } from './Theme' const RawGitako: React.FC = function RawGitako(props) { const { - errorDueToAuth, metaData, treeData, + status, defer, error, shouldShow, @@ -59,7 +59,7 @@ const RawGitako: React.FC = function RawGitako(props) { React.useEffect( function attachKeyDown() { - if (props.disabled || !configContext.value.shortcut) return + if (status === 'disabled' || !configContext.value.shortcut) return function onKeyDown(e: KeyboardEvent) { const keys = keyHelper.parseEvent(e) @@ -70,13 +70,13 @@ const RawGitako: React.FC = function RawGitako(props) { window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, - [toggleShowSideBar, props.disabled, configContext.value.shortcut], + [toggleShowSideBar, status === 'disabled', configContext.value.shortcut], ) const intelligentToggle = configContext.value.intelligentToggle // Hide sidebar when error due to auth but token is set #128 const hideSidebarOnInvalidToken: boolean = - intelligentToggle === null && Boolean(errorDueToAuth && accessToken) + intelligentToggle === null && Boolean(status === 'error-due-to-auth' && accessToken) React.useEffect(() => { if (hideSidebarOnInvalidToken) { props.setShouldShow(false) @@ -120,27 +120,34 @@ const RawGitako: React.FC = function RawGitako(props) {
- {errorDueToAuth ? ( - - ) : metaData ? ( - <> -
- -
- - - ) : ( - - )} + {(() => { + switch (status) { + case 'loading-meta': + return + case 'loading-tree': + return + case 'idle': + return metaData ? ( + <> +
+ +
+ + + ) : null + case 'error-due-to-auth': + return + } + })()}
= function RawGitako(props) { RawGitako.defaultProps = { shouldShow: false, showSettings: false, - errorDueToAuth: false, - disabled: false, + status: 'loading-meta', } export const SideBar = connect(SideBarCore)(RawGitako) diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts index 968affb..ca1df41 100644 --- a/src/driver/core/FileExplorer.ts +++ b/src/driver/core/FileExplorer.ts @@ -16,7 +16,7 @@ export type Props = { } export type ConnectorState = { - state: 'pulling' | 'rendering' | 'done' + state: 'rendering' | 'done' visibleNodesGenerator: VisibleNodesGenerator | null visibleNodes: VisibleNodes | null searchKey: string diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts index aebb81a..6417488 100644 --- a/src/driver/core/SideBar.ts +++ b/src/driver/core/SideBar.ts @@ -15,16 +15,13 @@ export type ConnectorState = { shouldShow: boolean // whether show settings pane showSettings: boolean - // whether failed loading the repo due to it is private - errorDueToAuth: boolean // meta data for the repository metaData?: MetaData // file tree data treeData?: TreeNode + status: 'loading-meta' | 'loading-tree' | 'idle' | 'error-due-to-auth' | 'disabled' logoContainerElement: Element | null defer?: boolean - disabled: boolean - initializingPromise: Promise | null } & { init: GetCreatedMethod setShouldShow: GetCreatedMethod @@ -40,16 +37,16 @@ export const init: BoundMethodCreator = dispatch => async () => { const leave = await promiseQueue.enter() try { + dispatch.set({ status: 'loading-meta' }) const metaData = platform.resolveMeta() if (!metaData) { - dispatch.set({ disabled: true }) + dispatch.set({ status: 'disabled' }) return } const { userName, repoName, branchName } = metaData DOMHelper.markGitakoReadyState(true) dispatch.set({ - errorDueToAuth: false, showSettings: false, logoContainerElement: DOMHelper.insertLogoMountPoint(), }) @@ -116,8 +113,9 @@ export const init: BoundMethodCreator = dispatch => async () => { } } + dispatch.set({ status: 'loading-tree' }) const { root: treeData, defer } = await getTreeData - dispatch.set({ treeData, defer }) + dispatch.set({ status: 'idle', treeData, defer }) } catch (err) { dispatch.call(handleError, err) } @@ -135,13 +133,13 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err => err.message === errors.BAD_CREDENTIALS || err.message === errors.API_RATE_LIMIT ) { - dispatch.set({ errorDueToAuth: true }) + dispatch.set({ status: 'error-due-to-auth' }) } else if (err.message === errors.CONNECTION_BLOCKED) { const { props } = dispatch.get() if (props.configContext.value.accessToken) { dispatch.call(setError, `Cannot connect to ${platformName}.`) } else { - dispatch.set({ errorDueToAuth: true }) + dispatch.set({ status: 'error-due-to-auth' }) } } else if (err.message === errors.SERVER_FAULT) { dispatch.call(setError, `${platformName} server went down.`) From 69614104ec02fc0ece3f16f60735a12fdd006b8b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 18 Apr 2021 13:26:55 +0800 Subject: [PATCH 19/87] chore: status vs state --- src/components/Clippy.tsx | 10 +++++----- src/components/SideBar.tsx | 12 ++++++------ src/driver/core/SideBar.ts | 14 +++++++------- src/utils/configHelper.ts | 2 +- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/Clippy.tsx b/src/components/Clippy.tsx index eacc560..2508ade 100644 --- a/src/components/Clippy.tsx +++ b/src/components/Clippy.tsx @@ -10,13 +10,13 @@ const className = 'clippy-wrapper' export const ClippyClassName = className export function Clippy({ codeSnippetElement }: Props) { - const [status, setStatus] = React.useState<'normal' | 'success' | 'fail'>('normal') + const [state, setState] = React.useState<'normal' | 'success' | 'fail'>('normal') React.useEffect(() => { const timer = window.setTimeout(() => { - setStatus('normal') + setState('normal') }, 1000) return () => window.clearTimeout(timer) - }, [status]) + }, [state]) // Temporary fix: // React moved root node of event delegation since v17 @@ -26,7 +26,7 @@ export function Clippy({ codeSnippetElement }: Props) { const element = elementRef.current if (element) { function onClippyClick() { - setStatus(copyElementContent(codeSnippetElement) ? 'success' : 'fail') + setState(copyElementContent(codeSnippetElement) ? 'success' : 'fail') } element.addEventListener('click', onClippyClick) return () => element.removeEventListener('click', onClippyClick) @@ -36,7 +36,7 @@ export function Clippy({ codeSnippetElement }: Props) { return (
) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index ab294b8..2e70fda 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -25,7 +25,7 @@ const RawGitako: React.FC = function RawGitako(props) { const { metaData, treeData, - status, + state, defer, error, shouldShow, @@ -59,7 +59,7 @@ const RawGitako: React.FC = function RawGitako(props) { React.useEffect( function attachKeyDown() { - if (status === 'disabled' || !configContext.value.shortcut) return + if (state === 'disabled' || !configContext.value.shortcut) return function onKeyDown(e: KeyboardEvent) { const keys = keyHelper.parseEvent(e) @@ -70,13 +70,13 @@ const RawGitako: React.FC = function RawGitako(props) { window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, - [toggleShowSideBar, status === 'disabled', configContext.value.shortcut], + [toggleShowSideBar, state === 'disabled', configContext.value.shortcut], ) const intelligentToggle = configContext.value.intelligentToggle // Hide sidebar when error due to auth but token is set #128 const hideSidebarOnInvalidToken: boolean = - intelligentToggle === null && Boolean(status === 'error-due-to-auth' && accessToken) + intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken) React.useEffect(() => { if (hideSidebarOnInvalidToken) { props.setShouldShow(false) @@ -121,7 +121,7 @@ const RawGitako: React.FC = function RawGitako(props) {
{(() => { - switch (status) { + switch (state) { case 'loading-meta': return case 'loading-tree': @@ -164,7 +164,7 @@ const RawGitako: React.FC = function RawGitako(props) { RawGitako.defaultProps = { shouldShow: false, showSettings: false, - status: 'loading-meta', + state: 'loading-meta', } export const SideBar = connect(SideBarCore)(RawGitako) diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts index 6417488..43b5c6d 100644 --- a/src/driver/core/SideBar.ts +++ b/src/driver/core/SideBar.ts @@ -19,7 +19,7 @@ export type ConnectorState = { metaData?: MetaData // file tree data treeData?: TreeNode - status: 'loading-meta' | 'loading-tree' | 'idle' | 'error-due-to-auth' | 'disabled' + state: 'loading-meta' | 'loading-tree' | 'idle' | 'error-due-to-auth' | 'disabled' logoContainerElement: Element | null defer?: boolean } & { @@ -37,10 +37,10 @@ export const init: BoundMethodCreator = dispatch => async () => { const leave = await promiseQueue.enter() try { - dispatch.set({ status: 'loading-meta' }) + dispatch.set({ state: 'loading-meta' }) const metaData = platform.resolveMeta() if (!metaData) { - dispatch.set({ status: 'disabled' }) + dispatch.set({ state: 'disabled' }) return } const { userName, repoName, branchName } = metaData @@ -113,9 +113,9 @@ export const init: BoundMethodCreator = dispatch => async () => { } } - dispatch.set({ status: 'loading-tree' }) + dispatch.set({ state: 'loading-tree' }) const { root: treeData, defer } = await getTreeData - dispatch.set({ status: 'idle', treeData, defer }) + dispatch.set({ state: 'idle', treeData, defer }) } catch (err) { dispatch.call(handleError, err) } @@ -133,13 +133,13 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err => err.message === errors.BAD_CREDENTIALS || err.message === errors.API_RATE_LIMIT ) { - dispatch.set({ status: 'error-due-to-auth' }) + dispatch.set({ state: 'error-due-to-auth' }) } else if (err.message === errors.CONNECTION_BLOCKED) { const { props } = dispatch.get() if (props.configContext.value.accessToken) { dispatch.call(setError, `Cannot connect to ${platformName}.`) } else { - dispatch.set({ status: 'error-due-to-auth' }) + dispatch.set({ state: 'error-due-to-auth' }) } } else if (err.message === errors.SERVER_FAULT) { dispatch.call(setError, `${platformName} server went down.`) diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts index 68ddd08..bbedd31 100644 --- a/src/utils/configHelper.ts +++ b/src/utils/configHelper.ts @@ -8,7 +8,7 @@ export type Config = { compressSingletonFolder: boolean copyFileButton: boolean copySnippetButton: boolean - intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open status + intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open state icons: 'rich' | 'dim' | 'native' toggleButtonVerticalDistance: number toggleButtonContent: 'logo' | 'octoface' From 5ddd6c6948f5df597c4c78ced612a8bf35eecb6b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 2 May 2021 22:04:19 +0800 Subject: [PATCH 20/87] fix: handle scope change --- src/components/SideBar.tsx | 7 ++++- src/driver/core/SideBar.ts | 8 +++--- src/global.d.ts | 1 + src/platforms/GitHub/DOMHelper.ts | 20 ++++++++++++++ src/platforms/GitHub/index.ts | 43 ++++++++++++++++++++++++++----- src/platforms/platform.d.ts | 2 +- 6 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 2e70fda..50b3649 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -52,7 +52,12 @@ const RawGitako: React.FC = function RawGitako(props) { * Catch unexpected PJAX, force trigger init on scope change. */ const pageScope = useStateIO(platform.resolvePageScope?.()) - useOnPJAXDone(() => pageScope.onChange(platform.resolvePageScope?.())) + useOnPJAXDone( + React.useCallback( + () => pageScope.onChange(platform.resolvePageScope?.(metaData?.defaultBranchName)), + [metaData?.defaultBranchName], + ), + ) React.useEffect(() => { props.init() }, [accessToken, pageScope.value]) diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts index 43b5c6d..31d21f8 100644 --- a/src/driver/core/SideBar.ts +++ b/src/driver/core/SideBar.ts @@ -43,7 +43,7 @@ export const init: BoundMethodCreator = dispatch => async () => { dispatch.set({ state: 'disabled' }) return } - const { userName, repoName, branchName } = metaData + const { userName, repoName, branchName, defaultBranchName } = metaData DOMHelper.markGitakoReadyState(true) dispatch.set({ @@ -70,10 +70,11 @@ export const init: BoundMethodCreator = dispatch => async () => { getTreeData.catch(error => error) // catch it early to prevent the error being raised higher if (branchName) { - const safeMetaData = { + const safeMetaData: MetaData = { userName, repoName, branchName, + defaultBranchName, } dispatch.set({ metaData: safeMetaData }) getTreeData.catch(error => { @@ -89,10 +90,11 @@ export const init: BoundMethodCreator = dispatch => async () => { throw new Error(`Failed resolving default branch name`) } - const safeMetaData = { + const safeMetaData: MetaData = { userName, repoName, branchName: defaultBranchName, + defaultBranchName, } dispatch.set({ metaData: safeMetaData }) diff --git a/src/global.d.ts b/src/global.d.ts index a7771b6..081c987 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -2,6 +2,7 @@ type MetaData = { userName: string repoName: string branchName: string + defaultBranchName?: string type?: EnumString<'tree' | 'blob' | 'pull'> } diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts index 146812a..0d62f0e 100644 --- a/src/platforms/GitHub/DOMHelper.ts +++ b/src/platforms/GitHub/DOMHelper.ts @@ -232,3 +232,23 @@ export function attachCopySnippet() { ) }) } + +export function getPath() { + const folderPathElementSelector = '.file-navigation .position-relative' // available when in path like '/tree/...' + const blobPathElementSelector = '#blob-path' // available when in path like '/blob/...' + const pathElement = + document.querySelector(blobPathElementSelector) || + document.querySelector(folderPathElementSelector)?.nextElementSibling + if (!pathElement || !pathElement.querySelector('.js-repo-root')) { + raiseError(new Error(`Path element not found`)) + return '' + } + const path = ((pathElement as HTMLDivElement).innerText || '') + .replace(/ \/ Jump to $/, '') + .trim() + .split('/') + .filter(Boolean) + .slice(1) // the first is the repo's name + .join('/') + return path +} diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 49cf7c0..4b63d68 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -1,3 +1,4 @@ +import { raiseError } from 'analytics' import { GITHUB_OAUTH } from 'env' import { Base64 } from 'js-base64' import { platform } from 'platforms' @@ -82,6 +83,40 @@ export function isEnterprise() { return !window.location.host.endsWith('github.com') } +function getBranchName() { + const pathFromDOM = DOMHelper.getPath() + const pathAndBranchFromURL = URLHelper.parse().path.filter(Boolean).join('/') + if (pathAndBranchFromURL.endsWith(pathFromDOM)) { + return pathAndBranchFromURL + .slice(0, pathAndBranchFromURL.length - pathFromDOM.length) + .replace(/\/$/, '') + } + raiseError(new Error(`Parsed path not end with path from DOM`)) +} + +function resolvePageScope(defaultBranchName?: string) { + const parsed = URLHelper.parse() + switch (parsed.type) { + // case undefined: + // return `branch-${defaultBranchName}` + case 'blob': + case 'tree': { + // handle URLs like {user}/{repo}/tree/{sha|branch}, issue#131 + const branchName = getBranchName() + if (branchName && branchName !== defaultBranchName) return `branch-${branchName}` + break + } + case 'tags': + return 'tags' + case 'releases': + return 'releases' + case 'pull': + const pullId = URLHelper.isInPullPage() + if (pullId) return `pull-${pullId}` + } + return 'general' +} + const pathSHAMap = new Map() export const GitHub: Platform = { @@ -115,15 +150,11 @@ export const GitHub: Platform = { repoName, type, branchName, + defaultBranchName: type ? undefined : branchName, } return metaData }, - resolvePageScope() { - if (URLHelper.parse().type === 'releases') return 'releases' - const pullId = URLHelper.isInPullPage() - if (pullId) return `pull-${pullId}` - return 'general' - }, + resolvePageScope, async getDefaultBranchName({ userName, repoName }, accessToken) { const data = await API.getRepoMeta(userName, repoName, accessToken) return data.default_branch diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts index 12cd2a6..6bf87ac 100644 --- a/src/platforms/platform.d.ts +++ b/src/platforms/platform.d.ts @@ -2,7 +2,7 @@ type Platform = { isEnterprise(): boolean // branch name might not be available when resolving from DOM and URL resolveMeta(): MakeOptional | null - resolvePageScope?(): string + resolvePageScope?(branchName?: string): string getDefaultBranchName( metaData: Pick, accessToken?: string, From 550345f9fea71e7e864c84735b67c07674a560fe Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 2 May 2021 22:06:39 +0800 Subject: [PATCH 21/87] test: assert PJAX works when going back --- __tests__/cases/pjax.mixed.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/__tests__/cases/pjax.mixed.ts b/__tests__/cases/pjax.mixed.ts index 73912b3..2e6822e 100644 --- a/__tests__/cases/pjax.mixed.ts +++ b/__tests__/cases/pjax.mixed.ts @@ -16,9 +16,11 @@ describe(`in Gitako project page`, () => { await waitForLegacyPJAXRedirect() page.goBack() + await waitForLegacyPJAXRedirect() await sleep(1000) page.goBack() + await waitForLegacyPJAXRedirect() await sleep(1000) expect( From 84db856160b4af780a9534f51eff526e5e714ca9 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 2 May 2021 22:06:56 +0800 Subject: [PATCH 22/87] 2.8.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a40b7a2..e957ec7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.8.0", + "version": "2.8.1", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From 35a313b51b70840fa93059a7e83e917ca31d55f9 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 2 May 2021 22:42:19 +0800 Subject: [PATCH 23/87] test: rename test file to prevent being ignored by jest --- __tests__/cases/{pjax.mixed.ts => pjax.general.ts} | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) rename __tests__/cases/{pjax.mixed.ts => pjax.general.ts} (77%) diff --git a/__tests__/cases/pjax.mixed.ts b/__tests__/cases/pjax.general.ts similarity index 77% rename from __tests__/cases/pjax.mixed.ts rename to __tests__/cases/pjax.general.ts index 2e6822e..1d8522c 100644 --- a/__tests__/cases/pjax.mixed.ts +++ b/__tests__/cases/pjax.general.ts @@ -1,7 +1,7 @@ import { patientClick, selectFileTreeItem, sleep, waitForLegacyPJAXRedirect } from '../utils' describe(`in Gitako project page`, () => { - beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/src')) + beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src')) it('should work with PJAX', async () => { await sleep(3000) @@ -9,18 +9,16 @@ describe(`in Gitako project page`, () => { await patientClick(page, selectFileTreeItem('src/analytics.ts')) await waitForLegacyPJAXRedirect() - await page.click('a[data-tab-item="issues-tab"]') + await page.click('a[data-selected-links^="repo_issues "]') await waitForLegacyPJAXRedirect() - await page.click('a[data-tab-item="pull-requests-tab"]') + await page.click('a[data-selected-links^="repo_pulls "]') await waitForLegacyPJAXRedirect() page.goBack() - await waitForLegacyPJAXRedirect() await sleep(1000) page.goBack() - await waitForLegacyPJAXRedirect() await sleep(1000) expect( From 31f803a03f8ff3392a2bbc09f22adc5e235104dd Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 3 May 2021 21:43:48 +0800 Subject: [PATCH 24/87] refactor: always fetch default branch --- src/driver/core/SideBar.ts | 67 +++++++++++++------------------ src/platforms/GitHub/DOMHelper.ts | 20 --------- src/platforms/GitHub/index.ts | 19 +-------- 3 files changed, 30 insertions(+), 76 deletions(-) diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts index 31d21f8..bb643f5 100644 --- a/src/driver/core/SideBar.ts +++ b/src/driver/core/SideBar.ts @@ -43,7 +43,7 @@ export const init: BoundMethodCreator = dispatch => async () => { dispatch.set({ state: 'disabled' }) return } - const { userName, repoName, branchName, defaultBranchName } = metaData + const { userName, repoName, branchName } = metaData DOMHelper.markGitakoReadyState(true) dispatch.set({ @@ -69,50 +69,39 @@ export const init: BoundMethodCreator = dispatch => async () => { ) getTreeData.catch(error => error) // catch it early to prevent the error being raised higher + const defaultBranchName = await platform.getDefaultBranchName( + { userName, repoName }, + accessToken, + ) + if (!defaultBranchName) { + throw new Error(`Failed resolving default branch name`) + } + + const safeMetaData: MetaData = { + userName, + repoName, + branchName: branchName || defaultBranchName, + defaultBranchName, + } + dispatch.set({ metaData: safeMetaData }) if (branchName) { - const safeMetaData: MetaData = { - userName, - repoName, - branchName, - defaultBranchName, - } - dispatch.set({ metaData: safeMetaData }) getTreeData.catch(error => { dispatch.call(handleError, error) }) - } else { - const defaultBranchName = await platform.getDefaultBranchName( - { userName, repoName }, + } else if (defaultBranchName !== guessDefaultBranch && metaData.type !== 'pull') { + // Accessing repository's non-homepage(no branch name in URL, nor in DOM) + // We predicted its default branch to be 'master' and sent aggressive request + // Throw that request due to the repo do not use {defaultBranchName} as default branch + getTreeData = platform.getTreeData( + { + branchName: defaultBranchName, + userName, + repoName, + }, + '/', + true, accessToken, ) - - if (!defaultBranchName) { - throw new Error(`Failed resolving default branch name`) - } - - const safeMetaData: MetaData = { - userName, - repoName, - branchName: defaultBranchName, - defaultBranchName, - } - dispatch.set({ metaData: safeMetaData }) - - if (defaultBranchName !== guessDefaultBranch && metaData.type !== 'pull') { - // Accessing repository's non-homepage(no branch name in URL, nor in DOM) - // We predicted its default branch to be 'master' and sent aggressive request - // Throw that request due to the repo do not use {defaultBranchName} as default branch - getTreeData = platform.getTreeData( - { - branchName: defaultBranchName, - userName, - repoName, - }, - '/', - true, - accessToken, - ) - } } dispatch.set({ state: 'loading-tree' }) diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts index 0d62f0e..146812a 100644 --- a/src/platforms/GitHub/DOMHelper.ts +++ b/src/platforms/GitHub/DOMHelper.ts @@ -232,23 +232,3 @@ export function attachCopySnippet() { ) }) } - -export function getPath() { - const folderPathElementSelector = '.file-navigation .position-relative' // available when in path like '/tree/...' - const blobPathElementSelector = '#blob-path' // available when in path like '/blob/...' - const pathElement = - document.querySelector(blobPathElementSelector) || - document.querySelector(folderPathElementSelector)?.nextElementSibling - if (!pathElement || !pathElement.querySelector('.js-repo-root')) { - raiseError(new Error(`Path element not found`)) - return '' - } - const path = ((pathElement as HTMLDivElement).innerText || '') - .replace(/ \/ Jump to $/, '') - .trim() - .split('/') - .filter(Boolean) - .slice(1) // the first is the repo's name - .join('/') - return path -} diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 4b63d68..13e362b 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -1,4 +1,3 @@ -import { raiseError } from 'analytics' import { GITHUB_OAUTH } from 'env' import { Base64 } from 'js-base64' import { platform } from 'platforms' @@ -83,26 +82,13 @@ export function isEnterprise() { return !window.location.host.endsWith('github.com') } -function getBranchName() { - const pathFromDOM = DOMHelper.getPath() - const pathAndBranchFromURL = URLHelper.parse().path.filter(Boolean).join('/') - if (pathAndBranchFromURL.endsWith(pathFromDOM)) { - return pathAndBranchFromURL - .slice(0, pathAndBranchFromURL.length - pathFromDOM.length) - .replace(/\/$/, '') - } - raiseError(new Error(`Parsed path not end with path from DOM`)) -} - function resolvePageScope(defaultBranchName?: string) { const parsed = URLHelper.parse() switch (parsed.type) { - // case undefined: - // return `branch-${defaultBranchName}` case 'blob': case 'tree': { - // handle URLs like {user}/{repo}/tree/{sha|branch}, issue#131 - const branchName = getBranchName() + // handle URLs like {user}/{repo}/{'tree'|'blob'}/{sha|branch}, issue #131 + const branchName = DOMHelper.getCurrentBranch() if (branchName && branchName !== defaultBranchName) return `branch-${branchName}` break } @@ -150,7 +136,6 @@ export const GitHub: Platform = { repoName, type, branchName, - defaultBranchName: type ? undefined : branchName, } return metaData }, From 5c25d9d0d868448adf614ee8f58177d7127c8b0c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 3 May 2021 21:44:55 +0800 Subject: [PATCH 25/87] chore: code clean --- src/components/SideBar.tsx | 4 ++-- src/platforms/GitHub/index.ts | 27 --------------------------- 2 files changed, 2 insertions(+), 29 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 50b3649..414063f 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -125,7 +125,7 @@ const RawGitako: React.FC = function RawGitako(props) {
- {(() => { + {run(() => { switch (state) { case 'loading-meta': return @@ -152,7 +152,7 @@ const RawGitako: React.FC = function RawGitako(props) { case 'error-due-to-auth': return } - })()} + })}
() - const foundFolders = new Set() - for (const node of nodes) { - let path = node.path - if (node.type === 'tree') foundFolders.add(path) - else { - while (true) { - // 'a/b' -> 'a' - // 'a' -> '' - path = path.substring(0, path.lastIndexOf('/')) - if (path === '') break - folders.add(path) - } - } - } - - const missingFolders: string[] = [] - for (const folder of folders) { - if (!foundFolders.has(folder)) { - missingFolders.push(folder) - } - } - - return missingFolders -} - export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) { const attachCopySnippetButton = React.useCallback( function attachCopySnippetButton() { From 72f825db2e83dd1330d88b72946f65b1d902958f Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 5 May 2021 22:28:31 +0800 Subject: [PATCH 26/87] refactor: control the flow using react --- src/components/FileExplorer.tsx | 122 ++++++++++-------- src/components/Gitako.tsx | 22 +++- src/components/IIFC.tsx | 8 ++ src/components/Node.tsx | 2 +- src/components/RepoContext.tsx | 98 ++++++++++++++ src/components/Resizable.tsx | 2 +- src/components/SideBar.tsx | 94 +++++++------- src/components/SideBarState.tsx | 26 ++++ src/components/settings/SettingsBar.tsx | 14 +- src/content.tsx | 2 +- src/driver/core/FileExplorer.ts | 33 +++-- src/driver/core/SideBar.ts | 113 ++-------------- src/global.d.ts | 4 +- src/platforms/GitHub/DOMHelper.ts | 18 +++ src/platforms/GitHub/index.ts | 12 +- src/platforms/Gitea/index.ts | 2 +- src/platforms/Gitee/index.ts | 2 +- src/platforms/dummyPlatformForTypeSafety.ts | 2 +- src/platforms/index.ts | 2 +- src/platforms/platform.d.ts | 8 +- .../hooks}/useCSSVariable.tsx | 0 .../hooks/useEffectOnSerializableUpdates.tsx | 9 ++ src/utils/hooks/useLoadedContext.tsx | 7 + 23 files changed, 351 insertions(+), 251 deletions(-) create mode 100644 src/components/IIFC.tsx create mode 100644 src/components/RepoContext.tsx create mode 100644 src/components/SideBarState.tsx rename src/{components => utils/hooks}/useCSSVariable.tsx (100%) create mode 100644 src/utils/hooks/useEffectOnSerializableUpdates.tsx create mode 100644 src/utils/hooks/useLoadedContext.tsx diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index 81002d4..ef43db4 100644 --- a/src/components/FileExplorer.tsx +++ b/src/components/FileExplorer.tsx @@ -1,4 +1,4 @@ -import { Text } from '@primer/components' +import { Label, Text } from '@primer/components' import { LoadingIndicator } from 'components/LoadingIndicator' import { Node } from 'components/Node' import { SearchBar } from 'components/SearchBar' @@ -11,11 +11,14 @@ import * as React from 'react' import { FixedSizeList, ListChildComponentProps } from 'react-window' import { cx } from 'utils/cx' import { focusFileExplorer } from 'utils/DOMHelper' +import { run } from 'utils/general' +import { useLoadedContext } from 'utils/hooks/useLoadedContext' import { useOnLocationChange } from 'utils/hooks/useOnLocationChange' import { useOnPJAXDone } from 'utils/hooks/usePJAX' import { VisibleNodes } from 'utils/VisibleNodesGenerator' import { Icon } from './Icon' import { SearchMode, searchModes } from './searchModes' +import { SideBarStateContext } from './SideBarState' import { SizeObserver } from './SizeObserver' type renderNodeContext = { @@ -27,7 +30,6 @@ type renderNodeContext = { const RawFileExplorer: React.FC = function RawFileExplorer(props) { const { - state, visibleNodes, visibleNodesGenerator, freeze, @@ -37,11 +39,9 @@ const RawFileExplorer: React.FC = function RawFileExplor onFocusSearchBar, goTo, handleKeyDown, - toggleShowSettings, metaData, expandTo, setUpTree, - treeRoot, defer, searched, } = props @@ -59,18 +59,19 @@ const RawFileExplorer: React.FC = function RawFileExplor [updateSearchKey, visibleNodesGenerator], ) + const stateContext = useLoadedContext(SideBarStateContext) + const state = stateContext.value + React.useEffect(() => { - if (treeRoot) { - setUpTree({ - treeRoot, - metaData, - config: { - compressSingletonFolder, - accessToken, - }, - }) - } - }, [setUpTree, treeRoot, metaData, compressSingletonFolder, accessToken]) + setUpTree({ + metaData, + config: { + compressSingletonFolder, + accessToken, + }, + stateContext, + }) + }, [setUpTree, metaData, compressSingletonFolder, accessToken]) React.useEffect(() => { if (visibleNodes?.focusedNode) focusFileExplorer() @@ -131,52 +132,63 @@ const RawFileExplorer: React.FC = function RawFileExplor ) return ( -
- {state !== 'done' ? ( - - ) : ( - visibleNodes && - renderNodeContext && ( - <> - - {searched && visibleNodes.nodes.length === 0 && ( - <> - - No results found. - - {defer && ( - - Lazy mode is ON. Search results are limited to loaded folders. - - )} - - )} - - {({ width = 0, height = 0 }) => ( - - )} - - - ) - )} +
+ {run(() => { + switch (state) { + case 'tree-loading': + return + case 'tree-rendering': + return + case 'tree-rendered': + return ( + visibleNodes && + renderNodeContext && ( + <> + + {searched && visibleNodes.nodes.length === 0 && ( + <> + + No results found. + + {defer && ( + + Lazy mode is ON. Search results are limited to loaded folders. + + )} + + )} + + {({ width = 0, height = 0 }) => ( + + )} + + + {defer && ( + + )} + + ) + ) + } + })}
) } RawFileExplorer.defaultProps = { freeze: false, - state: 'rendering', searchKey: '', visibleNodes: null, } diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx index 7c68258..9b386fa 100644 --- a/src/components/Gitako.tsx +++ b/src/components/Gitako.tsx @@ -1,15 +1,29 @@ +import { IIFC } from 'components/IIFC' import { SideBar } from 'components/SideBar' -import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext' +import { ConfigsContextWrapper, useConfigs } from 'containers/ConfigsContext' import * as React from 'react' +import { useLoadedContext } from 'utils/hooks/useLoadedContext' import { ErrorBoundary } from './ErrorBoundary' +import { RepoContext, RepoContextWrapper } from './RepoContext' +import { SideBarStateContext, StateBarStateContextWrapper } from './SideBarState' export function Gitako() { return ( - - {configContext => configContext && } - + + + + {() => ( + + )} + + + ) diff --git a/src/components/IIFC.tsx b/src/components/IIFC.tsx new file mode 100644 index 0000000..6a57b87 --- /dev/null +++ b/src/components/IIFC.tsx @@ -0,0 +1,8 @@ +import * as React from 'react' + +// I tried to install `react-iifc` but that causes TS build errors for unknown reason +// So here the duplicated code is + +export function IIFC({ children }: { children(): React.ReactNode }) { + return <>{children()} +} diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 5fa7942..97adbde 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -2,7 +2,7 @@ import { useConfigs } from 'containers/ConfigsContext' import * as React from 'react' import { cx } from 'utils/cx' import { OperatingSystems, os } from 'utils/general' -import { getFileIconSrc, getFolderIconSrc } from '../utils/parseIconMapCSV' +import { getFileIconSrc, getFolderIconSrc } from 'utils/parseIconMapCSV' import { Icon } from './Icon' function getIconType(node: TreeNode) { diff --git a/src/components/RepoContext.tsx b/src/components/RepoContext.tsx new file mode 100644 index 0000000..3b88e4b --- /dev/null +++ b/src/components/RepoContext.tsx @@ -0,0 +1,98 @@ +import { useConfigs } from 'containers/ConfigsContext' +import { platform } from 'platforms' +import * as React from 'react' +import { run } from 'utils/general' +import { useEffectOnSerializableUpdates } from 'utils/hooks/useEffectOnSerializableUpdates' +import { useLoadedContext } from 'utils/hooks/useLoadedContext' +import { useOnPJAXDone } from 'utils/hooks/usePJAX' +import { useStateIO } from 'utils/hooks/useStateIO' +import { SideBarStateContext } from './SideBarState' + +export const RepoContext = React.createContext(null) + +export function RepoContextWrapper({ children }: React.PropsWithChildren<{}>) { + const partialMetaData = usePartialMetaData() + const defaultBranch = useDefaultBranch(partialMetaData) + const metaData = useMetaData(partialMetaData, defaultBranch) + + return {metaData && children} +} + +function resolvePartialMetaData() { + const partialMetaData = platform.resolvePartialMetaData() + if (partialMetaData) { + const { userName, repoName, type } = partialMetaData + return { + userName, + repoName, + type: type === 'pull' ? type : undefined, + } + } else { + return partialMetaData + } +} + +function usePartialMetaData(): PartialMetaData | null { + // sync along URL and DOM + const $partialMetaData = useStateIO(resolvePartialMetaData) + const $committedPartialMetaData = useStateIO($partialMetaData.value) + useOnPJAXDone(() => $partialMetaData.onChange(resolvePartialMetaData())) + useEffectOnSerializableUpdates( + $partialMetaData.value, + JSON.stringify, + $committedPartialMetaData.onChange, + ) + return $committedPartialMetaData.value +} + +function useBranchName(): MetaData['branchName'] | null { + // sync along URL and DOM + const $branchName = useStateIO(() => platform.resolvePartialMetaData()?.branchName || null) + useOnPJAXDone(() => $branchName.onChange(platform.resolvePartialMetaData()?.branchName || null)) + return $branchName.value +} + +function useDefaultBranch(partialMetaData: PartialMetaData | null) { + const { accessToken } = useConfigs().value + const $defaultBranch = useStateIO(null) + React.useEffect(() => { + run(async () => { + if (!partialMetaData) return + + const defaultBranch = await platform.getDefaultBranchName(partialMetaData, accessToken) + $defaultBranch.onChange(defaultBranch) + }) + }, [partialMetaData, accessToken]) + return $defaultBranch.value +} + +function useMetaData( + partialMetaData: PartialMetaData | null, + defaultBranchName: MetaData['defaultBranchName'] | null, +) { + const $state = useLoadedContext(SideBarStateContext) + const $metaData = useStateIO(null) + const branchName = useBranchName() + React.useEffect(() => { + if (!partialMetaData) { + $state.onChange('disabled') + } else if (!defaultBranchName) { + $state.onChange('meta-loading') + } + + if (partialMetaData && defaultBranchName) { + const { userName, repoName } = partialMetaData + const safeMetaData: MetaData = { + userName, + repoName, + branchName: branchName || defaultBranchName, + defaultBranchName, + } + $metaData.onChange(safeMetaData) + } else { + $metaData.onChange(null) + } + $state.onChange('meta-loaded') + }, [partialMetaData, branchName, defaultBranchName]) + return $metaData.value +} diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx index bc1a786..c7758cd 100644 --- a/src/components/Resizable.tsx +++ b/src/components/Resizable.tsx @@ -5,7 +5,7 @@ import { useDebounce, useWindowSize } from 'react-use' import { cx } from 'utils/cx' import { setResizingState } from 'utils/DOMHelper' import * as features from 'utils/features' -import { useCSSVariable } from './useCSSVariable' +import { useCSSVariable } from 'utils/hooks/useCSSVariable' export type Size = number type Props = { diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 414063f..2876dec 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -5,6 +5,7 @@ import { Portal } from 'components/Portal' import { Resizable } from 'components/Resizable' import { SettingsBar } from 'components/settings/SettingsBar' import { ToggleShowButton } from 'components/ToggleShowButton' +import { useConfigs } from 'containers/ConfigsContext' import { connect } from 'driver/connect' import { SideBarCore } from 'driver/core' import { ConnectorState, Props } from 'driver/core/SideBar' @@ -12,33 +13,46 @@ import { platform } from 'platforms' import { useGitHubAttachCopyFileButton, useGitHubAttachCopySnippetButton } from 'platforms/GitHub' import * as React from 'react' import { cx } from 'utils/cx' +import * as DOMHelper from 'utils/DOMHelper' import { parseURLSearch, run } from 'utils/general' +import { useLoadedContext } from 'utils/hooks/useLoadedContext' import { loadWithPJAX, useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX' import { useProgressBar } from 'utils/hooks/useProgressBar' import { useStateIO } from 'utils/hooks/useStateIO' import * as keyHelper from 'utils/keyHelper' import { Icon } from './Icon' import { LoadingIndicator } from './LoadingIndicator' +import { SideBarStateContext } from './SideBarState' import { Theme } from './Theme' -const RawGitako: React.FC = function RawGitako(props) { - const { - metaData, - treeData, - state, - defer, - error, - shouldShow, - showSettings, - logoContainerElement, - toggleShowSideBar, - toggleShowSettings, - configContext, - } = props +const RawSideBar: React.FC = function RawGitako(props) { + const { metaData, error, shouldShow, toggleShowSideBar } = props + + const state = useLoadedContext(SideBarStateContext).value + const configContext = useConfigs() const accessToken = configContext.value.accessToken || '' const [baseSize] = React.useState(() => configContext.value.sideBarWidth) + const $showSettings = useStateIO(false) + const showSettings = $showSettings.value + const toggleShowSettings = React.useCallback(function toggleShowSettings() { + $showSettings.onChange(show => !show) + }, []) + + const $logoContainerElement = useStateIO(null) + + const hasMetaData = state !== 'disabled' + React.useEffect(() => { + if (hasMetaData) { + DOMHelper.markGitakoReadyState(true) + $showSettings.onChange(false) + $logoContainerElement.onChange(DOMHelper.insertLogoMountPoint()) + } else { + DOMHelper.markGitakoReadyState(false) + } + }, [hasMetaData]) + React.useEffect(() => { run(async function () { if (!accessToken) { @@ -48,20 +62,6 @@ const RawGitako: React.FC = function RawGitako(props) { }) }, []) - /** - * Catch unexpected PJAX, force trigger init on scope change. - */ - const pageScope = useStateIO(platform.resolvePageScope?.()) - useOnPJAXDone( - React.useCallback( - () => pageScope.onChange(platform.resolvePageScope?.(metaData?.defaultBranchName)), - [metaData?.defaultBranchName], - ), - ) - React.useEffect(() => { - props.init() - }, [accessToken, pageScope.value]) - React.useEffect( function attachKeyDown() { if (state === 'disabled' || !configContext.value.shortcut) return @@ -89,7 +89,7 @@ const RawGitako: React.FC = function RawGitako(props) { const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle props.setShouldShow(shouldShow) } - }, [intelligentToggle, hideSidebarOnInvalidToken, props.metaData]) + }, [intelligentToggle, hideSidebarOnInvalidToken, metaData]) const updateSideBarVisibility = React.useCallback( function updateSideBarVisibility() { @@ -99,7 +99,7 @@ const RawGitako: React.FC = function RawGitako(props) { props.setShouldShow(platform.shouldShow()) } }, - [props.metaData?.branchName, intelligentToggle, hideSidebarOnInvalidToken], + [metaData?.branchName, intelligentToggle, hideSidebarOnInvalidToken], ) useOnPJAXDone(updateSideBarVisibility) @@ -112,7 +112,7 @@ const RawGitako: React.FC = function RawGitako(props) { return (
- + {!shouldShow && ( )} @@ -124,41 +124,37 @@ const RawGitako: React.FC = function RawGitako(props) {
-
+
{run(() => { switch (state) { - case 'loading-meta': + case 'disabled': + return null + case 'meta-loading': return - case 'loading-tree': - return - case 'idle': + case 'error-due-to-auth': + return + default: return metaData ? ( <>
) : null - case 'error-due-to-auth': - return } })}
- +
@@ -166,13 +162,11 @@ const RawGitako: React.FC = function RawGitako(props) { ) } -RawGitako.defaultProps = { +RawSideBar.defaultProps = { shouldShow: false, - showSettings: false, - state: 'loading-meta', } -export const SideBar = connect(SideBarCore)(RawGitako) +export const SideBar = connect(SideBarCore)(RawSideBar) async function trySetUpAccessTokenWithCode() { const search = parseURLSearch() diff --git a/src/components/SideBarState.tsx b/src/components/SideBarState.tsx new file mode 100644 index 0000000..f41e30f --- /dev/null +++ b/src/components/SideBarState.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import { useStateIO } from 'utils/hooks/useStateIO' + +export type SideBarState = + | 'disabled' + | 'meta-loading' + | 'meta-loaded' + | 'tree-loading' + | 'tree-rendering' + | 'tree-rendered' + | 'idle' + | 'error-due-to-auth' + +export type SideBarStateContextShape = IO + +export const SideBarStateContext = React.createContext(null) + +export function StateBarStateContextWrapper({ children }: React.PropsWithChildren<{}>) { + const $state = useStateIO('disabled') + + return ( + + {$state.value !== null && children} + + ) +} diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx index 70b579e..d7f146d 100644 --- a/src/components/settings/SettingsBar.tsx +++ b/src/components/settings/SettingsBar.tsx @@ -1,4 +1,4 @@ -import { Label, Link } from '@primer/components' +import { Link } from '@primer/components' import { Icon } from 'components/Icon' import { VERSION } from 'env' import { platform } from 'platforms' @@ -21,7 +21,6 @@ export const wikiLinks = { } type Props = { - defer?: boolean activated: boolean toggleShowSettings: () => void } @@ -78,7 +77,7 @@ function SettingsBarContent() { } export function SettingsBar(props: Props) { - const { defer, toggleShowSettings, activated } = props + const { toggleShowSettings, activated } = props return (
{activated && } @@ -93,15 +92,6 @@ export function SettingsBar(props: Props) { {VERSION}
- {defer && ( - - )} ) : undefined + const renderFileCommentAmounts = (node: TreeNode): React.ReactNode => + node.comments !== undefined && + node.comments > 0 && ( + + {node.comments} + + ) const renders: ((node: TreeNode) => React.ReactNode)[] = [] + if (commentToggle) renders.push(renderFileCommentAmounts) if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton) if (searched) renders.push(renderGoToButton) return renders.length ? node => renders.map((render, i) => {render(node)}) : undefined - }, [goTo, onSearch, searched, searchMode]) + }, [goTo, onSearch, searched, searchMode, commentToggle]) const renderLabelText = React.useCallback( - node => searchModes[searchMode].renderNodeLabelText(node, searchKey), + (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey), [searchKey, searchMode], ) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index c5d9f07..ce98f05 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -2,6 +2,7 @@ import { ChevronDownIcon as ChevronDown, ChevronRightIcon as ChevronRight, ClockIcon as Clock, + CommentIcon as Comment, FileCodeIcon as FileCode, FileIcon as File, FileMediaIcon as FileMedia, @@ -28,6 +29,11 @@ function getSVGIconComponent( name: string } { switch (type) { + case 'comment': + return { + IconComponent: Comment, + name: 'Comment', + } case 'search': return { IconComponent: Search, diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 7fd3ea1..5fa7942 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -38,10 +38,6 @@ export function Node({ style, onClick, }: Props) { - const { - value: { commentToggle }, - } = useConfigs() - return ( {renderLabelText(node)} - {(commentToggle && !!node.comments) && 💬 {node.comments}}
{renderActions &&
{renderActions(node)}
} diff --git a/src/global.d.ts b/src/global.d.ts index e149322..199ec17 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -14,7 +14,7 @@ type TreeNode = { url?: string sha?: string accessDenied?: boolean - comments: number + comments?: number } type IO = { diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts index 257cf46..5b9d8c1 100644 --- a/src/platforms/GitHub/Request.d.ts +++ b/src/platforms/GitHub/Request.d.ts @@ -37,6 +37,13 @@ declare namespace GitHubAPI { type PullComment = { path: string + pull_request_review_id: number + id: number + node_id: string + diff_hunk: string + body: string + html_url: string + author_association: string } type PullTreeData = PullTreeItem[] diff --git a/src/styles/index.scss b/src/styles/index.scss index bc813e2..ee47712 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -500,17 +500,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- .node-item { background: var(--gitako-bg-primary); + &:hover { + text-decoration: initial; // revert underline from .gitako-side-bar a:hover + .node-item-label { + text-decoration: underline; // apply underline like .gitako-side-bar a:hover + } + } &.focused, &:hover { background: var(--gitako-bg-tertiary); - - .node-item-comment { - background: var(--gitako-bg-tertiary); - background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - background: linear-gradient(to right, transparent 0% ,var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161b22', endColorstr='#161b22', GradientType=1); - } } &:active { background: var(--gitako-bg-secondary); @@ -583,18 +581,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } .node-item-comment { - position: absolute; - top: 0; - right: 0; - height: 36px; - line-height: 37px; - padding: 0 10px; - color: var(--gitako-auto-gray-5); - background: var(--gitako-bg-primary); - background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - background: linear-gradient(to right, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d1117', endColorstr='#0d1117', GradientType=1); + padding: 0 4px; + color: var(--gitako-text-tertiary); + + .octicon-wrapper { + margin: 0; // make it closer to the comment amount label + } } .go-to-button, From 5402e49d425d69286f47d75e0d4e2bbb247513ba Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 22 May 2021 21:06:26 +0800 Subject: [PATCH 43/87] build: upgrade react to remove SharedArrayBuffer error --- package.json | 2 +- yarn.lock | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index aaa42e7..96c9c49 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "nprogress": "^0.2.0", "pjax-api": "^3.33.0", "react": "^17.0.1", - "react-dom": "^17.0.1", + "react-dom": "^17.0.2", "react-use": "^15.3.0", "react-window": "^1.8.5", "styled-components": "^5.2.0", diff --git a/yarn.lock b/yarn.lock index 2e1b384..c1e63a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8745,14 +8745,14 @@ react-clientside-effect@^1.2.2: dependencies: "@babel/runtime" "^7.0.0" -react-dom@^17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" - integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - scheduler "^0.20.1" + scheduler "^0.20.2" react-focus-lock@^2.1.0: version "2.2.1" @@ -8842,9 +8842,9 @@ react-window@^1.8.5: memoize-one ">=3.1.1 <6" react@^16.10.2, react@^17, react@^17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" - integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -9389,10 +9389,10 @@ sax@>=0.6.0, sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.20.1: - version "0.20.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" - integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From 45828116fe9d068a878e4edb7da8e8431f17b2ea Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:01:58 +0800 Subject: [PATCH 44/87] refactor: configify Icon --- src/components/Icon.tsx | 169 +++++++++++++--------------------------- 1 file changed, 54 insertions(+), 115 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index c5d9f07..5f0cf4a 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -10,7 +10,6 @@ import { GearIcon as Gear, GrabberIcon as Grabber, HourglassIcon as Hourglass, - Icon as OcticonIcon, IconProps, MarkdownIcon as Markdown, OctofaceIcon as Octoface, @@ -21,119 +20,58 @@ import { import * as React from 'react' import { cx } from 'utils/cx' -function getSVGIconComponent( - type: string, -): { - IconComponent: OcticonIcon - name: string -} { - switch (type) { - case 'search': - return { - IconComponent: Search, - name: 'Search', - } - case 'loading': - return { - IconComponent: Clock, - name: 'Clock', - } - case 'hourglass': - return { - IconComponent: Hourglass, - name: 'Hourglass', - } - case 'submodule': - return { - IconComponent: Submodule, - name: 'Submodule', - } - case 'grabber': - return { - IconComponent: Grabber, - name: 'Grabber', - } - case 'octoface': - return { - IconComponent: Octoface, - name: 'Octoface', - } - case 'chevron-down': - return { - IconComponent: ChevronDown, - name: 'ChevronDown', - } - case 'x': - return { - IconComponent: X, - name: 'X', - } - case 'gear': - return { - IconComponent: Gear, - name: 'Gear', - } - case 'folder': - return { - IconComponent: ChevronRight, - name: 'ChevronRight', - } - case 'go-to': - return { - IconComponent: Reply, - name: 'Reply', - } - // not supported in octicon v2 yet - // case '.pdf': - // return { - // IconComponent: FilePdf, - // name: 'FilePdf', - // } - case '.zip': - case '.rar': - case '.7z': - return { - IconComponent: FileZip, - name: 'FileZip', - } - case '.md': - return { - IconComponent: Markdown, - name: 'Markdown', - } - case '.png': - case '.jpg': - case '.gif': - case '.bmp': - return { - IconComponent: FileMedia, - name: 'FileMedia', - } - case '.js': - case '.jsx': - case '.ts': - case '.tsx': - case '.es6': - case '.coffee': - case '.css': - case '.less': - case '.scss': - case '.sass': - return { - IconComponent: FileCode, - name: 'FileCode', - } - // TODO: adapt to more file types - // case '': return FileBinary - // case '': return FileSubmodule - // case '': return FileSymlinkDirectory - // case '': return FileSymlinkFile - default: - return { - IconComponent: File, - name: 'File', - } - } +const iconToComponentMap = { + Search, + Clock, + Hourglass, + Submodule, + Grabber, + Octoface, + ChevronDown, + X, + Gear, + ChevronRight, + Reply, + FileZip, + Markdown, + FileMedia, + FileCode, + File, +} + +const defaultIcon = 'File' +const typeToIconComponentMap: { + [type: string]: keyof typeof iconToComponentMap +} = { + search: 'Search', + loading: 'Clock', + hourglass: 'Hourglass', + submodule: 'Submodule', + grabber: 'Grabber', + octoface: 'Octoface', + x: 'X', + gear: 'Gear', + folder: 'ChevronRight', + 'chevron-down': 'ChevronDown', + 'go-to': 'Reply', + '.zip': 'FileZip', + '.rar': 'FileZip', + '.7z': 'FileZip', + '.md': 'Markdown', + '.png': 'FileMedia', + '.jpg': 'FileMedia', + '.gif': 'FileMedia', + '.bmp': 'FileMedia', + '.js': 'FileCode', + '.jsx': 'FileCode', + '.ts': 'FileCode', + '.tsx': 'FileCode', + '.es6': 'FileCode', + '.coffee': 'FileCode', + '.css': 'FileCode', + '.less': 'FileCode', + '.scss': 'FileCode', + '.sass': 'FileCode', } type Props = { @@ -151,7 +89,8 @@ export const Icon = React.memo(function Icon({ }: Props) { let children: React.ReactNode = null if (!placeholder) { - const { name, IconComponent } = getSVGIconComponent(type) + const name = typeToIconComponentMap[type] || defaultIcon + const IconComponent = iconToComponentMap[name] children = } return ( From e7ad0917e90eb77a93879734cfc506f9d8fe3c5c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:04:50 +0800 Subject: [PATCH 45/87] refactor: better types for cx --- src/utils/cx.ts | 36 +++++++++++++++++++++++------------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/src/utils/cx.ts b/src/utils/cx.ts index 179b6d3..01ea737 100644 --- a/src/utils/cx.ts +++ b/src/utils/cx.ts @@ -1,18 +1,28 @@ +type CXValue = string | boolean | null | undefined + /** * cx('class1', { class2: true, class3: false }) --> 'class1 class2' */ -export function cx(...classNames: any[]): string { - return classNames - .filter(Boolean) - .map(className => { - switch (typeof className) { - case 'string': - return className - case 'object': - return cx(...Object.entries(className).map(([key, value]) => (value ? key : null))) - default: - return '' +export function cx( + ...classNames: ( + | CXValue + | { + [className: string]: CXValue } - }) - .join(' ') + )[] +): string { + return classNames.map(handleClassName).filter(Boolean).join(' ') +} + +function handleClassName(className: Parameters[number]): string | false { + switch (typeof className) { + case 'string': + return className + case 'object': + return className === null + ? false + : cx(...Object.entries(className).map(([key, value]) => (value ? key : false))) + default: + return false + } } From 14478e575769b1f9ed1e64a3618c29c0718e27cd Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:05:49 +0800 Subject: [PATCH 46/87] chore: rename sidebar body wrapper --- __tests__/cases/homepage.not-render.ts | 2 +- __tests__/cases/project-page.gitako.ts | 2 +- __tests__/cases/pull-request-page.gitako.ts | 2 +- src/components/ResizeHandler.tsx | 2 +- src/components/SideBar.tsx | 6 +++--- .../{Resizable.tsx => SideBarBodyWrapper.tsx} | 10 +++++++--- src/styles/index.scss | 4 ++-- 7 files changed, 16 insertions(+), 12 deletions(-) rename src/components/{Resizable.tsx => SideBarBodyWrapper.tsx} (86%) diff --git a/__tests__/cases/homepage.not-render.ts b/__tests__/cases/homepage.not-render.ts index 43cbac6..1a326a7 100644 --- a/__tests__/cases/homepage.not-render.ts +++ b/__tests__/cases/homepage.not-render.ts @@ -4,6 +4,6 @@ describe(`in GitHub homepage`, () => { beforeAll(() => page.goto('https://github.com')) it('should not render Gitako', async () => { - await expectToNotFind('.gitako-side-bar .gitako-position-wrapper') + await expectToNotFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) }) diff --git a/__tests__/cases/project-page.gitako.ts b/__tests__/cases/project-page.gitako.ts index 6df7c19..f9982e0 100644 --- a/__tests__/cases/project-page.gitako.ts +++ b/__tests__/cases/project-page.gitako.ts @@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => { beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako')) it('should render Gitako', async () => { - await expectToFind('.gitako-side-bar .gitako-position-wrapper') + await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) it('should render file list', async () => { diff --git a/__tests__/cases/pull-request-page.gitako.ts b/__tests__/cases/pull-request-page.gitako.ts index 4658ea1..00c7c18 100644 --- a/__tests__/cases/pull-request-page.gitako.ts +++ b/__tests__/cases/pull-request-page.gitako.ts @@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => { beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/pull/71')) it('should render Gitako', async () => { - await expectToFind('.gitako-side-bar .gitako-position-wrapper') + await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) it('should render file list', async () => { diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx index 70e983a..5d0d02b 100644 --- a/src/components/ResizeHandler.tsx +++ b/src/components/ResizeHandler.tsx @@ -1,6 +1,6 @@ import { Icon } from 'components/Icon' import * as React from 'react' -import { Size } from './Resizable' +import { Size } from './SideBarBodyWrapper' type Props = { size: Size diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index e2b022d..73fb14d 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -2,8 +2,8 @@ import { AccessDeniedDescription } from 'components/AccessDeniedDescription' import { FileExplorer } from 'components/FileExplorer' import { MetaBar } from 'components/MetaBar' import { Portal } from 'components/Portal' -import { Resizable } from 'components/Resizable' import { SettingsBar } from 'components/settings/SettingsBar' +import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper' import { ToggleShowButton } from 'components/ToggleShowButton' import { useConfigs } from 'containers/ConfigsContext' import { platform } from 'platforms' @@ -105,7 +105,7 @@ export function SideBar() { {!shouldShow && } - +
- +
) diff --git a/src/components/Resizable.tsx b/src/components/SideBarBodyWrapper.tsx similarity index 86% rename from src/components/Resizable.tsx rename to src/components/SideBarBodyWrapper.tsx index c7758cd..54735e4 100644 --- a/src/components/Resizable.tsx +++ b/src/components/SideBarBodyWrapper.tsx @@ -16,7 +16,11 @@ type Props = { const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100 const MINIMAL_WIDTH = 240 -export function Resizable({ baseSize, className, children }: React.PropsWithChildren) { +export function SideBarBodyWrapper({ + baseSize, + className, + children, +}: React.PropsWithChildren) { const [size, setSize] = React.useState(baseSize) const configContext = useConfigs() @@ -48,8 +52,8 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil else setSize(size) }, []) return ( -
-
{children}
+
+
{children}
{features.resize && }
) diff --git a/src/styles/index.scss b/src/styles/index.scss index 52d3179..a452a3b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -264,7 +264,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- color: var(--gitako-text-link); } - .#{$name}-position-wrapper { + .#{$name}-side-bar-body-wrapper { position: fixed; top: 0; left: 0; @@ -276,7 +276,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- @extend %hidden; } - .gitako-position-content { + .gitako-side-bar-body-wrapper-content { width: var(--gitako-width); } } From 8ff78b0caacdee7b6ba639d3651ab3d74bcfb60b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:18:36 +0800 Subject: [PATCH 47/87] refactor: better types of SimpleToggleField --- src/components/SimpleToggleField.tsx | 14 +++++++------- src/components/settings/SettingsBar.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/SimpleToggleField.tsx b/src/components/SimpleToggleField.tsx index 343aae0..2e05697 100644 --- a/src/components/SimpleToggleField.tsx +++ b/src/components/SimpleToggleField.tsx @@ -3,25 +3,25 @@ import * as React from 'react' import { Config } from 'utils/configHelper' import { Field } from './settings/Field' -export type SimpleField = { - key: keyof Config +export type SimpleField = { + key: Key label: string wikiLink?: string tooltip?: string description?: string overwrite?: { - value: (value: T) => boolean - onChange: (checked: boolean) => any + value: (value: Config[Key]) => boolean + onChange: (checked: boolean) => Config[Key] } } -type Props = { - field: SimpleField +type Props = { + field: SimpleField onChange?(): void } -export function SimpleToggleField({ field, onChange }: Props) { +export function SimpleToggleField({ field, onChange }: Props) { const { overwrite } = field const configContext = useConfigs() const value = configContext.value[field.key] diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx index d7f146d..6f84007 100644 --- a/src/components/settings/SettingsBar.tsx +++ b/src/components/settings/SettingsBar.tsx @@ -29,7 +29,7 @@ function SettingsBarContent() { const useReloadHint = useStateIO('') const { value: reloadHint } = useReloadHint - const moreFields: SimpleField[] = + const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton'>[] = platform === GitHub ? [ { From 31c45781a043726bf46538f6bca069ebddd9823e Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:19:01 +0800 Subject: [PATCH 48/87] feat: core toggle mode switch --- src/components/SideBar.tsx | 12 +++++++++--- src/components/settings/SidebarSettings.tsx | 10 ++++++++++ src/styles/index.scss | 18 ++++++++++++------ src/utils/configHelper.ts | 3 +++ 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 73fb14d..e7ba0da 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -51,14 +51,15 @@ export function SideBar() { } }, [hasMetaData]) + const sidebarToggleMode = configContext.value.sidebarToggleMode const $shouldShow = useStateIO(false) const shouldShow = $shouldShow.value React.useEffect(() => { - DOMHelper.setBodyIndent(shouldShow) + DOMHelper.setBodyIndent(shouldShow && sidebarToggleMode === 'persistent') if (shouldShow) { DOMHelper.focusFileExplorer() // TODO: verify if it works } - }, [shouldShow]) + }, [shouldShow, sidebarToggleMode]) const intelligentToggle = configContext.value.intelligentToggle @@ -105,7 +106,12 @@ export function SideBar() { {!shouldShow && } - +
+ )} +
) { value={configContext.value.toggleButtonContent} > - enabled === 'persistent', - onChange: checked => (checked ? 'persistent' : 'float'), - }, - }} - /> configContext.value.sidebarToggleMode === 'float' ? false : enabled === null, diff --git a/src/styles/index.scss b/src/styles/index.scss index 3521885..b8ab2ca 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -364,6 +364,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- transition: background linear 0.3s; } + &.active .octicon { + color: var(--gitako-icon-primary); + } + .action-icon { color: var(--gitako-icon-tertiary); width: 20px; @@ -373,8 +377,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- width: 100%; height: 100%; } + .Pin, + .Tab { + transform: rotateY(180deg); + } } } + + .close-side-bar-button + .close-side-bar-button { + margin-left: 4px; + } } .#{$name}-side-bar-content { @@ -392,7 +404,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- min-height: 62px; // GitHub header height if login flex-shrink: 0; padding: 8px 10px; - padding-right: $button-size + 8px * 2; // space for toggle button + padding-right: $button-size * 2 + 8px; // space for toggle buttons background: var(--gitako-bg-tertiary); .user-and-repo a { From 16eb77be63ea277b3ce56f35d3645ab22d112b5c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 30 May 2021 22:12:27 +0800 Subject: [PATCH 63/87] feat: reset sidebar width on double click resize handler --- src/components/ResizeHandler.tsx | 16 ++++++++++++++-- src/components/SideBarBodyWrapper.tsx | 2 ++ src/utils/config/helper.ts | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx index 2675a11..177de70 100644 --- a/src/components/ResizeHandler.tsx +++ b/src/components/ResizeHandler.tsx @@ -5,13 +5,20 @@ import { Size } from './SideBarBodyWrapper' type Props = { size: Size onResize(size: Size): void + onResetSize?(): void onResizeStateChange?(state: ResizeState): void style?: React.CSSProperties } type ResizeState = 'idle' | 'resizing' -export function HorizontalResizeHandler({ onResize, onResizeStateChange, size, style }: Props) { +export function HorizontalResizeHandler({ + onResize, + onResetSize, + onResizeStateChange, + size, + style, +}: Props) { const pointerDown = React.useRef(false) const startX = React.useRef(0) const baseSize = React.useRef(size) @@ -51,7 +58,12 @@ export function HorizontalResizeHandler({ onResize, onResizeStateChange, size, s }, []) return ( -
+
) diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx index b18599e..d0b1c10 100644 --- a/src/components/SideBarBodyWrapper.tsx +++ b/src/components/SideBarBodyWrapper.tsx @@ -2,6 +2,7 @@ import { HorizontalResizeHandler } from 'components/ResizeHandler' import { useConfigs } from 'containers/ConfigsContext' import * as React from 'react' import { useDebounce, useWindowSize } from 'react-use' +import { defaultConfigs } from 'utils/config/helper' import { cx } from 'utils/cx' import { setResizingState } from 'utils/DOMHelper' import * as features from 'utils/features' @@ -69,6 +70,7 @@ export function SideBarBodyWrapper({ {features.resize && ( setSize(defaultConfigs.sideBarWidth)} onResizeStateChange={state => { blockLeaveRef.current = state === 'resizing' }} diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts index 16b71fd..9680976 100644 --- a/src/utils/config/helper.ts +++ b/src/utils/config/helper.ts @@ -35,7 +35,7 @@ enum configKeys { sidebarToggleMode = 'sidebarToggleMode', } -const defaultConfigs: Config = { +export const defaultConfigs: Config = { sideBarWidth: 260, shortcut: undefined, accessToken: '', From c286ec7fbea785e5303b5a3461d06aa5c1077546 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 30 May 2021 22:35:27 +0800 Subject: [PATCH 64/87] chore: minor code clean --- src/components/settings/FileTreeSettings.tsx | 2 +- src/components/settings/SidebarSettings.tsx | 2 +- src/styles/index.scss | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx index d28154c..e3cd87f 100644 --- a/src/components/settings/FileTreeSettings.tsx +++ b/src/components/settings/FileTreeSettings.tsx @@ -54,7 +54,7 @@ export function FileTreeSettings(props: React.PropsWithChildren) { }) }} value={configContext.value.recursiveToggleFolder} - > + /> diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx index 67e7b93..1370a66 100644 --- a/src/components/settings/SidebarSettings.tsx +++ b/src/components/settings/SidebarSettings.tsx @@ -88,7 +88,7 @@ export function SidebarSettings(props: React.PropsWithChildren) { }) }} value={configContext.value.toggleButtonContent} - > + /> Date: Sun, 30 May 2021 23:17:34 +0800 Subject: [PATCH 65/87] fix: prevent reload when click file tree items from issues page --- src/containers/RepoContext.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/containers/RepoContext.tsx b/src/containers/RepoContext.tsx index d93ee89..3e7004a 100644 --- a/src/containers/RepoContext.tsx +++ b/src/containers/RepoContext.tsx @@ -87,13 +87,14 @@ function useMetaData( const $state = useLoadedContext(SideBarStateContext) const $metaData = useStateIO(null) const branchName = useBranchName() + const theBranch = branchName && branchName !== defaultBranchName ? branchName : defaultBranchName React.useEffect(() => { - if (partialMetaData && defaultBranchName) { + if (partialMetaData && defaultBranchName && theBranch) { const { userName, repoName } = partialMetaData const safeMetaData: MetaData = { userName, repoName, - branchName: branchName || defaultBranchName, + branchName: theBranch, defaultBranchName, } $metaData.onChange(safeMetaData) @@ -101,6 +102,6 @@ function useMetaData( } else { $metaData.onChange(null) } - }, [partialMetaData, branchName, defaultBranchName]) + }, [partialMetaData, defaultBranchName, theBranch]) return $metaData.value } From 863260a454c3253934556719afee9c50437d1702 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 30 May 2021 23:18:00 +0800 Subject: [PATCH 66/87] fix: enable auto expand --- src/components/SideBar.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index b440cfb..62bcf8c 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -52,7 +52,8 @@ export function SideBar() { }, [hasMetaData]) const sidebarToggleMode = configContext.value.sidebarToggleMode - const $shouldShow = useStateIO(false) + const intelligentToggle = configContext.value.intelligentToggle + const $shouldShow = useStateIO(intelligentToggle === null ? false : intelligentToggle) const shouldShow = $shouldShow.value React.useEffect(() => { if (sidebarToggleMode === 'persistent') { @@ -66,8 +67,6 @@ export function SideBar() { } }, [shouldShow, sidebarToggleMode]) - const intelligentToggle = configContext.value.intelligentToggle - // Save expand state on toggle if auto expand if not on React.useEffect(() => { if (intelligentToggle !== null) { @@ -204,14 +203,13 @@ export function SideBar() { function useSetShouldShowOnPJAXDone(setShouldShow: (value: boolean) => void) { const { intelligentToggle, sidebarToggleMode } = useConfigs().value - useOnPJAXDone( - React.useCallback( - function updateSideBarVisibility() { - if (intelligentToggle === null && sidebarToggleMode === 'persistent') { - setShouldShow(platform.shouldShow()) - } - }, - [intelligentToggle, sidebarToggleMode], - ), - ) + const updateSideBarVisibility = React.useCallback(() => { + if (intelligentToggle === null && sidebarToggleMode === 'persistent') { + setShouldShow(platform.shouldShow()) + } + }, [intelligentToggle, sidebarToggleMode]) + React.useEffect(() => { + updateSideBarVisibility() + }, [updateSideBarVisibility]) + useOnPJAXDone(updateSideBarVisibility) } From 345c5cec99d7cc386cde489ab6baf7b7e29fea5b Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 31 May 2021 17:31:55 +0800 Subject: [PATCH 67/87] test: divide cases according to parallelizibility --- .../{cases => non-parallel-cases}/pjax.commits-page.ts | 2 -- __tests__/{cases => non-parallel-cases}/pjax.files-page.ts | 0 __tests__/{cases => non-parallel-cases}/pjax.general.ts | 0 __tests__/{cases => non-parallel-cases}/pjax.internal.ts | 0 .../{cases => non-parallel-cases}/project-page.gitako.ts | 0 jest.config.js | 2 +- jest.non.parallel.config.js | 7 +++++++ package.json | 4 +++- 8 files changed, 11 insertions(+), 4 deletions(-) rename __tests__/{cases => non-parallel-cases}/pjax.commits-page.ts (90%) rename __tests__/{cases => non-parallel-cases}/pjax.files-page.ts (100%) rename __tests__/{cases => non-parallel-cases}/pjax.general.ts (100%) rename __tests__/{cases => non-parallel-cases}/pjax.internal.ts (100%) rename __tests__/{cases => non-parallel-cases}/project-page.gitako.ts (100%) create mode 100644 jest.non.parallel.config.js diff --git a/__tests__/cases/pjax.commits-page.ts b/__tests__/non-parallel-cases/pjax.commits-page.ts similarity index 90% rename from __tests__/cases/pjax.commits-page.ts rename to __tests__/non-parallel-cases/pjax.commits-page.ts index e1d219d..dde9484 100644 --- a/__tests__/cases/pjax.commits-page.ts +++ b/__tests__/non-parallel-cases/pjax.commits-page.ts @@ -4,8 +4,6 @@ describe(`in Gitako project page`, () => { beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/commits/develop')) it('should not break go back in history', async () => { - // temporarily skip this test as GitHub has unexpected PJAX behaviors - return for (let i = 0; i < 3; i++) { const commitLinks = await page.$$( `#js-repo-pjax-container .TimelineItem-body ol li > div:nth-child(1) a[href*="/commit/"]`, diff --git a/__tests__/cases/pjax.files-page.ts b/__tests__/non-parallel-cases/pjax.files-page.ts similarity index 100% rename from __tests__/cases/pjax.files-page.ts rename to __tests__/non-parallel-cases/pjax.files-page.ts diff --git a/__tests__/cases/pjax.general.ts b/__tests__/non-parallel-cases/pjax.general.ts similarity index 100% rename from __tests__/cases/pjax.general.ts rename to __tests__/non-parallel-cases/pjax.general.ts diff --git a/__tests__/cases/pjax.internal.ts b/__tests__/non-parallel-cases/pjax.internal.ts similarity index 100% rename from __tests__/cases/pjax.internal.ts rename to __tests__/non-parallel-cases/pjax.internal.ts diff --git a/__tests__/cases/project-page.gitako.ts b/__tests__/non-parallel-cases/project-page.gitako.ts similarity index 100% rename from __tests__/cases/project-page.gitako.ts rename to __tests__/non-parallel-cases/project-page.gitako.ts diff --git a/jest.config.js b/jest.config.js index eafe22d..f13eb4d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -61,7 +61,7 @@ module.exports = { // globals: {}, // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - maxWorkers: 1, // more than 1 workers may make tabs in background and never renders Gitako's file items. + maxWorkers: 8, // An array of directory names to be searched recursively up from the requiring module's location // moduleDirectories: [ diff --git a/jest.non.parallel.config.js b/jest.non.parallel.config.js new file mode 100644 index 0000000..74dc653 --- /dev/null +++ b/jest.non.parallel.config.js @@ -0,0 +1,7 @@ +const baseConfig = require('./jest.config') + +module.exports = { + ...baseConfig, + maxWorkers: 1, + testMatch: ['**/__tests__/non-parallel-cases/*.ts?(x)'], +} diff --git a/package.json b/package.json index 96c9c49..4d02fbc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "postinstall": "rm -rf node_modules/@types/react-native && node scripts/fix-pjax-api", "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack", "roll": "make release", - "test": "NODE_ENV=test jest" + "test": "yarn run test:parallel && yarn run test:non-parallel", + "test:parallel": "NODE_ENV=test jest", + "test:non-parallel": "NODE_ENV=test jest --config jest.non.parallel.config.js" }, "dependencies": { "@primer/components": "^22.0.2", From 0038b322710a2b498f276d8615d5b036fb4bae00 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 31 May 2021 18:39:25 +0800 Subject: [PATCH 68/87] fix: wait for migrations --- src/utils/config/migrations/2.6.0.ts | 2 +- src/utils/config/migrations/3.0.0.ts | 2 +- src/utils/config/migrations/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/config/migrations/2.6.0.ts b/src/utils/config/migrations/2.6.0.ts index 759cc30..d5a522f 100644 --- a/src/utils/config/migrations/2.6.0.ts +++ b/src/utils/config/migrations/2.6.0.ts @@ -11,7 +11,7 @@ export const migration: Migration = { accessToken?: string } - onConfigOutdated(version, async configs => { + await onConfigOutdated(version, async configs => { for (const key of Object.keys(configs)) { if ( typeof configs[key] === 'object' && diff --git a/src/utils/config/migrations/3.0.0.ts b/src/utils/config/migrations/3.0.0.ts index 2ff94fe..4db2fba 100644 --- a/src/utils/config/migrations/3.0.0.ts +++ b/src/utils/config/migrations/3.0.0.ts @@ -12,7 +12,7 @@ export const migration: Migration = { copySnippetButton: boolean } - onConfigOutdated(version, async configs => { + await onConfigOutdated(version, async configs => { const key = 'platform_github.com' const config = configs[key] if (typeof config === 'object' && config !== null && 'copySnippetButton' in config) { diff --git a/src/utils/config/migrations/index.ts b/src/utils/config/migrations/index.ts index bdcb137..b4b514f 100644 --- a/src/utils/config/migrations/index.ts +++ b/src/utils/config/migrations/index.ts @@ -26,7 +26,7 @@ export async function onConfigOutdated( if (config && config.configVersion < configVersion) { const { configVersion, ...restConfig } = config - runIfOutdated(restConfig as T) + await runIfOutdated(restConfig as T) await storageHelper.set({ configVersion }) } } From 69a448eaf00694e389da690399873300173b58c8 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Tue, 1 Jun 2021 00:09:53 +0800 Subject: [PATCH 69/87] 3.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4d02fbc..f9f9d37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "2.8.1", + "version": "3.0.0", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From e70f31567b6abc5b01bf2956e82ef474071a7314 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 2 Jun 2021 09:52:51 +0800 Subject: [PATCH 70/87] fix: OAuth blocked loading process --- src/containers/OAuthWrapper.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/containers/OAuthWrapper.tsx b/src/containers/OAuthWrapper.tsx index 72a058b..a107a77 100644 --- a/src/containers/OAuthWrapper.tsx +++ b/src/containers/OAuthWrapper.tsx @@ -13,15 +13,8 @@ export function OAuthWrapper({ children }: React.PropsWithChildren<{}>) { const running = useGetAccessToken() const $state = useLoadedContext(SideBarStateContext) - const firstRenderRef = React.useRef(true) React.useEffect(() => { - if (running) { - $state.onChange('getting-access-token') - } else if (firstRenderRef.current) { - firstRenderRef.current = false - } else { - $state.onChange('after-getting-access-token') - } + $state.onChange(running ? 'getting-access-token' : 'after-getting-access-token') }, [running]) // block children rendering on the first render if setting token From e1495fef45fd454de864242ddcb5d31f54c27a6f Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 2 Jun 2021 10:05:01 +0800 Subject: [PATCH 71/87] fix: prevent blocking history navigation shortcut --- src/driver/core/FileExplorer.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts index 8240357..6f82fc1 100644 --- a/src/driver/core/FileExplorer.ts +++ b/src/driver/core/FileExplorer.ts @@ -3,6 +3,7 @@ import { GetCreatedMethod, MethodCreator } from 'driver/connect' import { platform } from 'platforms' import { Config } from 'utils/config/helper' import * as DOMHelper from 'utils/DOMHelper' +import { OperatingSystems, os } from 'utils/general' import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator' export type Props = { @@ -132,6 +133,10 @@ export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch break case 'ArrowLeft': + if (wouldBlockHistoryNavigation(event)) { + muteEvent = false + break + } if (expandedNodes.has(focusedNode.path)) { dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey }) } else { @@ -145,6 +150,10 @@ export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch // consider the two keys as 'confirm' key case 'ArrowRight': + if (wouldBlockHistoryNavigation(event)) { + muteEvent = false + break + } // expand node or focus on first content node or redirect to file page if (focusedNode.type === 'tree') { if (expandedNodes.has(focusedNode.path)) { @@ -305,3 +314,8 @@ export const expandTo: BoundMethodCreator<[string[]]> = dispatch => async curren visibleNodesGenerator.focusNode(nodeExpandedTo) } } + +function wouldBlockHistoryNavigation(event: React.KeyboardEvent) { + // Alt + left/right is usually history navigation shortcut on OS other than macOS + return os !== OperatingSystems.macOS && event.altKey +} From f7b3f3a7b22def6594a7262870a52fee6283af41 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 2 Jun 2021 10:15:40 +0800 Subject: [PATCH 72/87] refactor: move toggle comments --- src/components/settings/FileTreeSettings.tsx | 7 +++++++ src/components/settings/SidebarSettings.tsx | 8 -------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx index e3cd87f..7068f4e 100644 --- a/src/components/settings/FileTreeSettings.tsx +++ b/src/components/settings/FileTreeSettings.tsx @@ -76,6 +76,13 @@ export function FileTreeSettings(props: React.PropsWithChildren) { tooltip: 'Merge folders and their only child folder to make UI more compact.', }} /> + ) } diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx index 69b7955..1370a66 100644 --- a/src/components/settings/SidebarSettings.tsx +++ b/src/components/settings/SidebarSettings.tsx @@ -107,14 +107,6 @@ export function SidebarSettings(props: React.PropsWithChildren) { }, }} /> - ) } From 752f3066cf51743c22273391a9fe2b9bfa355144 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 2 Jun 2021 10:29:52 +0800 Subject: [PATCH 73/87] 3.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f9f9d37..1f7fcb4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitako", - "version": "3.0.0", + "version": "3.0.1", "description": "File tree for GitHub, and more than that.", "repository": "https://github.com/EnixCoda/Gitako", "author": "EnixCoda", From 8184b8699e4fa675326408e10c8f227440d62b35 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Fri, 4 Jun 2021 23:31:56 +0800 Subject: [PATCH 74/87] chore: align comment amount --- src/components/FileExplorer.tsx | 2 +- src/platforms/GitHub/index.ts | 4 +--- src/styles/index.scss | 2 ++ 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index 923dff2..4307d8d 100644 --- a/src/components/FileExplorer.tsx +++ b/src/components/FileExplorer.tsx @@ -109,7 +109,7 @@ const RawFileExplorer: React.FC = function RawFileExplor node.comments !== undefined && node.comments > 0 && ( - {node.comments} + {node.comments > 9 ? '9+' : node.comments} ) diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 159d1b1..8af9ae4 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -70,9 +70,7 @@ function getUrlForRedirect( // Modern browsers have great support for handling unsafe URL, // It may be possible to sanitize path with // `path => path.includes('#') ? path.replace(/#/g, '%23') : '...' - return `https://${ - window.location.host - }/${userName}/${repoName}/${type}/${branchName}/${path + return `https://${window.location.host}/${userName}/${repoName}/${type}/${branchName}/${path .split('/') .map(encodeURIComponent) .join('/')}` diff --git a/src/styles/index.scss b/src/styles/index.scss index ecd8320..374b9cd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -605,6 +605,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } .node-item-comment { + display: inline-block; + width: 48px; padding: 0 4px; color: var(--gitako-text-tertiary); From 4e0bfee44e935c26d6c10a36b99fb6e6ce038ac0 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 7 Jun 2021 17:51:07 +0800 Subject: [PATCH 75/87] fix: write back config version --- src/utils/config/migrations/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/config/migrations/index.ts b/src/utils/config/migrations/index.ts index b4b514f..53a9dae 100644 --- a/src/utils/config/migrations/index.ts +++ b/src/utils/config/migrations/index.ts @@ -25,7 +25,7 @@ export async function onConfigOutdated( const config = await storageHelper.get() if (config && config.configVersion < configVersion) { - const { configVersion, ...restConfig } = config + const { configVersion: $configVersion, ...restConfig } = config await runIfOutdated(restConfig as T) await storageHelper.set({ configVersion }) } From d19b84c9eeeb338cbec331f1a0a7b59e8dbfa494 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 7 Jun 2021 17:22:34 +0800 Subject: [PATCH 76/87] fix: use textContent instead of innerText for better perf --- src/platforms/GitHub/DOMHelper.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts index 35af789..eea2f79 100644 --- a/src/platforms/GitHub/DOMHelper.ts +++ b/src/platforms/GitHub/DOMHelper.ts @@ -44,8 +44,9 @@ export function getCurrentBranch(passive = false) { if (branchButtonElement) { const branchNameSpanElement = branchButtonElement.querySelector('span') if (branchNameSpanElement) { - const partialBranchNameFromInnerText = branchNameSpanElement.innerText - if (!partialBranchNameFromInnerText.includes('…')) return partialBranchNameFromInnerText + const partialBranchNameFromInnerText = branchNameSpanElement.textContent || '' + if (partialBranchNameFromInnerText && !partialBranchNameFromInnerText.includes('…')) + return partialBranchNameFromInnerText } const defaultTitle = 'Switch branches or tags' const title = branchButtonElement.title.trim() @@ -242,7 +243,8 @@ export function getPath() { if (!pathElement?.querySelector('.js-repo-root')) { return [] } - const path = ((pathElement as HTMLDivElement).innerText || '') + const path = ((pathElement as HTMLDivElement).textContent || '') + .trim() .replace(/ \/ Jump to $/, '') .trim() .split('/') From d5df98f684d34829351130927d4a63ed5bf65c25 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 7 Jun 2021 18:01:46 +0800 Subject: [PATCH 77/87] fix: handle \s in path --- src/platforms/GitHub/DOMHelper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts index eea2f79..092a243 100644 --- a/src/platforms/GitHub/DOMHelper.ts +++ b/src/platforms/GitHub/DOMHelper.ts @@ -244,8 +244,8 @@ export function getPath() { return [] } const path = ((pathElement as HTMLDivElement).textContent || '') - .trim() - .replace(/ \/ Jump to $/, '') + .replace(/\n/g, '') + .replace(/\/\s+Jump to.*/m, '') .trim() .split('/') .filter(Boolean) From 246f79444207f009aa9033f5a821da539f0673a5 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 7 Jun 2021 17:22:00 +0800 Subject: [PATCH 78/87] feat: fold source code button --- src/components/SideBar.tsx | 7 +- src/components/settings/SettingsBar.tsx | 13 +- src/platforms/GitHub/index.ts | 1 + src/platforms/GitHub/useGitHubCodeFold.tsx | 162 +++++++++++++++++++++ src/styles/index.scss | 95 ++++++++++++ src/utils/config/helper.ts | 3 + 6 files changed, 277 insertions(+), 4 deletions(-) create mode 100644 src/platforms/GitHub/useGitHubCodeFold.tsx diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 62bcf8c..b2b7fea 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -7,7 +7,11 @@ import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper' import { ToggleShowButton } from 'components/ToggleShowButton' import { useConfigs } from 'containers/ConfigsContext' import { platform } from 'platforms' -import { useGitHubAttachCopyFileButton, useGitHubAttachCopySnippetButton } from 'platforms/GitHub' +import { + useGitHubAttachCopyFileButton, + useGitHubAttachCopySnippetButton, + useGitHubCodeFold, +} from 'platforms/GitHub' import * as React from 'react' import { cx } from 'utils/cx' import * as DOMHelper from 'utils/DOMHelper' @@ -98,6 +102,7 @@ export function SideBar() { useGitHubAttachCopyFileButton(configContext.value.copyFileButton) useGitHubAttachCopySnippetButton(configContext.value.copySnippetButton) + useGitHubCodeFold(configContext.value.codeFolding) usePJAX() useProgressBar() diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx index 6f84007..3a29e78 100644 --- a/src/components/settings/SettingsBar.tsx +++ b/src/components/settings/SettingsBar.tsx @@ -15,6 +15,7 @@ const WIKI_HOME_LINK = 'https://github.com/EnixCoda/Gitako/wiki' export const wikiLinks = { compressSingletonFolder: `${WIKI_HOME_LINK}/Compress-Singleton-Folder`, changeLog: `${WIKI_HOME_LINK}/Change-Log`, + codeFolding: `${WIKI_HOME_LINK}/Code-folding`, copyFileButton: `${WIKI_HOME_LINK}/Copy-file-and-snippet`, copySnippet: `${WIKI_HOME_LINK}/Copy-file-and-snippet`, createAccessToken: `${WIKI_HOME_LINK}/Access-token-for-Gitako`, @@ -29,18 +30,24 @@ function SettingsBarContent() { const useReloadHint = useStateIO('') const { value: reloadHint } = useReloadHint - const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton'>[] = + const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton'|'codeFolding'>[] = platform === GitHub ? [ + { + key: 'codeFolding', + label: 'Fold source code button', + wikiLink: wikiLinks.codeFolding, + tooltip: `Read more in Gitako's Wiki`, + }, { key: 'copyFileButton', - label: 'Copy file shortcut', + label: 'Copy file button', wikiLink: wikiLinks.copyFileButton, tooltip: `Read more in Gitako's Wiki`, }, { key: 'copySnippetButton', - label: 'Copy snippet shortcut', + label: 'Copy snippet button', wikiLink: wikiLinks.copySnippet, tooltip: `Read more in Gitako's Wiki`, }, diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 8af9ae4..b6dab28 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -8,6 +8,7 @@ import { sortFoldersToFront } from 'utils/treeParser' import * as API from './API' import * as DOMHelper from './DOMHelper' import * as URLHelper from './URLHelper' +export { useGitHubCodeFold } from './useGitHubCodeFold' function processTree(tree: TreeNode[]): TreeNode { // nodes are created from items and put onto tree diff --git a/src/platforms/GitHub/useGitHubCodeFold.tsx b/src/platforms/GitHub/useGitHubCodeFold.tsx new file mode 100644 index 0000000..df71aae --- /dev/null +++ b/src/platforms/GitHub/useGitHubCodeFold.tsx @@ -0,0 +1,162 @@ +import { platform } from 'platforms' +import { useCallback, useEffect } from 'react' +import { useOnPJAXDone } from 'utils/hooks/usePJAX' +import { GitHub } from '.' + +const theCSSClassMark = 'gitako-code-fold-attached' +const theCSSClassMarkWhenDisabled = 'gitako-code-fold-attached-disabled' +const theCSSClassForHiddenLine = 'gitako-code-fold-hidden' +const theCSSClassForToggleElement = 'gitako-code-fold-handler' +const tableSelector = `.blob-wrapper table` +const selectorOfLineNumber = `.blob-num` +const selectorOfLineContent = `.blob-code` + +const theCSSClassForToggleElementOnActive = 'active' +function init() { + type LineNumber = number // alias + const blocks: LineNumber[] = [] // startLine -> exclusiveEndLine + /** + * For example, given such input + * + * 0 |∇ line1 + * 1 |∇ line2 + * 2 | + * 3 |∇ line3 + * 4 | line4 + * 5 | line5 + * + * blocks will be + * 0 -> 5 + * 1 -> 3 + * 2 + * 3 -> 5 + * 4 + * 5 + */ + + const table = document.querySelector(tableSelector) + const lineElements = Array.from(document.querySelectorAll([tableSelector, 'tr'].join(' '))) + if (!table || !lineElements.length) return + if (table.classList.contains(theCSSClassMark)) { + if (table.classList.contains(theCSSClassMarkWhenDisabled)) { + // reactivate + table.classList.remove(theCSSClassMarkWhenDisabled) + } + return + } + table.classList.add(theCSSClassMark) + + // setup blocks + { + type Level = number // measured by leading whitespace amount + const stack: [Level, LineNumber][] = [] + + function trySeal(lineNumber: number, level: number) { + let ignoredTheHighestLevelItem = false + while (stack.length) { + const top = stack.pop()! // safe + const [$LineNumber, $level] = top + + if ($level < level) { + stack.push(top) + break + } else if (!ignoredTheHighestLevelItem) { + ignoredTheHighestLevelItem = true + } else { + blocks[$LineNumber] = lineNumber + } + } + stack.push([lineNumber, level]) + } + + lineElements.forEach((element, lineNumber) => { + const text = element.querySelector(selectorOfLineContent)?.textContent || null + if (text === null) return + + const level = getTextLevel(text) + if (level === -1) return + + trySeal(lineNumber, level) + }) + + trySeal(lineElements.length, -1) + } + + // attach toggle buttons + blocks.forEach((end, line) => { + if (!end) return + + const toggleElement = document.createElement('div') + toggleElement.setAttribute('role', 'button') + toggleElement.classList.add(theCSSClassForToggleElement) + + const lineNumberElement = lineElements[line].querySelector(selectorOfLineNumber) + lineNumberElement?.appendChild(toggleElement) + }) + + const foldLines = new Set() + function toggleLine(line: number) { + // const lineElements = Array.from(document.querySelectorAll(lineSelector)) + const element = lineElements[line] + element.classList.toggle(theCSSClassForToggleElementOnActive) + if (foldLines.has(line)) { + foldLines.delete(line) + } else { + foldLines.add(line) + } + + const linesToHide = new Set() + for (const line of foldLines.values()) { + const end = blocks[line] + for (let $line = line + 1; $line < end; $line++) linesToHide.add($line) + } + + lineElements.forEach((element, i) => { + if (linesToHide.has(i)) element.classList.add(theCSSClassForHiddenLine) + else element.classList.remove(theCSSClassForHiddenLine) + }) + } + + table.addEventListener('click', e => { + if (e.target instanceof HTMLElement) { + if (e.target.classList.contains(theCSSClassForToggleElement)) { + const tr = e.target.parentElement?.parentElement + if (tr) { + toggleLine(lineElements.indexOf(tr)) + e.stopPropagation() + } + } + } + }) +} + +function cancelToggleFeature() { + const table = document.querySelector(tableSelector) + table?.classList.add(theCSSClassMarkWhenDisabled) +} + +function getTextLevel(text: string) { + const leading = countLeadingWhitespace(text) + return leading === text.length ? -1 : leading +} + +function countLeadingWhitespace(text: string) { + let i = 0 + for (; i < text.length; i++) { + // Mixed usage of space and table indentation? ¯\_(ツ)_/¯ + if (!(text[i] === ' ' || text[i] === '\t' || text[i] === '\n')) break + } + return i +} + +export function useGitHubCodeFold(active: boolean) { + const effect = useCallback(() => { + if (platform !== GitHub) return + if (active) { + init() + return () => cancelToggleFeature() + } + }, [active]) + useEffect(effect, [effect]) + useOnPJAXDone(effect) +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 374b9cd..d867b7a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -13,6 +13,32 @@ $github-header-z-index: 32; $github-pull-request-float-header-z-index: 110; $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-z-index) + 1; +@mixin interactive-background($default, $hover, $active) { + background-color: $default; + &:hover { + background-color: $hover; + } + &:active { + background-color: $active; + } +} + +@mixin interactive-background-on-before($default, $hover, $active) { + &::before { + background-color: $default; + } + &:hover { + &::before { + background-color: $hover; + } + } + &:active { + &::before { + background-color: $active; + } + } +} + :root { --gitako-width: #{$side-bar-base-width}; } @@ -53,6 +79,75 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } } } + .blob-wrapper table .blob-num { + position: relative; // for positioning + min-width: 60px; + padding-right: 20px; + } + + // cancel code fold if not wrapped with .gitako-code-fold-mark + .gitako-code-fold-handler { + display: none; + } + .gitako-code-fold-hidden { + display: table-cell; + } + + .gitako-code-fold-attached { + tr { + .gitako-code-fold-handler { + display: initial; + position: absolute; + top: 0px; + right: 0px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + + &::before { + content: ''; + display: block; + width: 10px; + height: 20px; + cursor: pointer; + user-select: none; + transition: 0.25s ease; + -webkit-mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline'); + mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline'); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + } + + @include interactive-background-on-before( + var(--gitako-icon-tertiary), + var(--gitako-icon-primary), + var(--gitako-icon-secondary) + ); + } + + &.active { + .gitako-code-fold-handler { + &::before { + transform: rotate(-90deg); + } + + @include interactive-background-on-before( + var(--gitako-icon-secondary), + var(--gitako-icon-tertiary), + var(--gitako-icon-primary) + ); + } + } + } + + .gitako-code-fold-hidden { + display: none; + } + } // gitee &.git-project { diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts index 2bacbcf..20e2960 100644 --- a/src/utils/config/helper.ts +++ b/src/utils/config/helper.ts @@ -18,6 +18,7 @@ export type Config = { searchMode: SearchMode sidebarToggleMode: 'persistent' | 'float' commentToggle: boolean + codeFolding: boolean } enum configKeys { @@ -35,6 +36,7 @@ enum configKeys { searchMode = 'searchMode', sidebarToggleMode = 'sidebarToggleMode', commentToggle = 'commentToggle', + codeFolding = 'codeFolding', } export const defaultConfigs: Config = { @@ -52,6 +54,7 @@ export const defaultConfigs: Config = { searchMode: 'fuzzy', sidebarToggleMode: 'float', commentToggle: true, + codeFolding: true, } const configKeyArray = Object.values(configKeys) From ad3d2b10bc50628682f4d9221398aff009387944 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 7 Jun 2021 17:22:59 +0800 Subject: [PATCH 79/87] refactor: clean style code --- src/components/SearchBar.tsx | 2 +- src/styles/index.scss | 131 +++++++++++++++++------------------ 2 files changed, 65 insertions(+), 68 deletions(-) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index d266f7d..9f21e50 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -35,7 +35,7 @@ export function SearchBar({ onSearch, onFocus, value }: Props) { />
- )} - -
+
+
+ {sidebarToggleMode === 'persistent' && ( + + )} + +
+ {metaData && } +
{run(() => { switch (state) { case 'disabled': return null case 'getting-access-token': return + case 'after-getting-access-token': case 'meta-loading': return case 'error-due-to-auth': return default: - return metaData ? ( - <> -
- -
+ return ( + metaData && ( {() => ( )} - - ) : null + ) + ) } })}
diff --git a/src/styles/index.scss b/src/styles/index.scss index e7971d1..d155b4a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -449,48 +449,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- text-align: center; } - .close-side-bar-button-position { - position: absolute; - right: 6px; - top: 6px; - z-index: 1; // prevent being covered by following elements - - .close-side-bar-button { - @include icon-button; - width: $button-size; - height: $button-size; - border-radius: $button-size; - - // feedback to click should be instant - &:not(:active) { - transition: background linear 0.3s; - } - - &.active .octicon { - color: var(--gitako-icon-primary); - } - - .action-icon { - color: var(--gitako-icon-tertiary); - width: 20px; - height: 20px; - text-align: center; - .octicon { - width: 100%; - height: 100%; - } - .Pin, - .Tab { - transform: rotateY(180deg); - } - } - } - - .close-side-bar-button + .close-side-bar-button { - margin-left: 4px; - } - } - .#{$name}-side-bar-content { display: flex; flex: 1; @@ -499,24 +457,66 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- .header { position: relative; + min-height: 62px; // GitHub header height if login + background: var(--gitako-bg-tertiary); + padding: 6px 10px; + flex-shrink: 0; + position: relative; // prevent overlap by outline of other elements - .meta-bar { - position: relative; // prevent overlap by outline of other elements - min-height: 62px; // GitHub header height if login - flex-shrink: 0; - padding: 8px 10px; - padding-right: $button-size * 2 + 8px; // space for toggle buttons - background: var(--gitako-bg-tertiary); + .user-and-repo { + display: inline; // would be override by CSS rule of section from @primer/css + line-height: 32px; - .user-and-repo a { + a { color: var(--gitako-text-link); + white-space: normal; + } + } + + .branch-name { + margin-left: 4px; + padding: 4px 6px; // did not align well for some reason :/ + color: var(--gitako-branch-name-text); + background-color: var(--gitako-branch-name-bg); + } + + .close-side-bar-button-position { + float: right; + z-index: 1; // prevent being covered by following elements + + .close-side-bar-button { + @include icon-button; + width: $button-size; + height: $button-size; + border-radius: $button-size; + + // feedback to click should be instant + &:not(:active) { + transition: background linear 0.3s; + } + + &.active .octicon { + color: var(--gitako-icon-primary); + } + + .action-icon { + color: var(--gitako-icon-tertiary); + width: 20px; + height: 20px; + text-align: center; + .octicon { + width: 100%; + height: 100%; + } + .Pin, + .Tab { + transform: rotateY(180deg); + } + } } - .branch-name { + .close-side-bar-button + .close-side-bar-button { margin-left: 4px; - padding: 4px 6px; // did not align well for some reason :/ - color: var(--gitako-branch-name-text); - background-color: var(--gitako-branch-name-bg); } } }