Merge branch 'develop' into feature/safari

.env.arm.mac

@@ -0,0 +1,2 @@
+PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+PUPPETEER_EXEC_PATH=/opt/homebrew/bin/chromium

.github/FUNDING.yml

@@ -1,8 +1,8 @@
 # These are supported funding model platforms
 
 github: enixcoda
-patreon: enixcoda
-open_collective: enixcoda
+patreon: # enixcoda
+open_collective: # enixcoda
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

Makefile

@@ -4,6 +4,11 @@ FULL_VERSION=v$(RAW_VERSION)
 pull-icons:
 	git clone git@github.com:vscode-icons/vscode-icons.git vscode-icons --depth=1
 
+update-icons:
+	cd vscode-icons && git pull
+	node scripts/resolve-languages-map
+	node scripts/generate-icon-index
+
 build:
 	rm -rf dist
 	yarn build

README.md

@@ -1,45 +1,47 @@
 # Gitako
 
 <p align="center">
-  <img width="256" src="src/assets/icons/Gitako.png" />
+  <img width="192" src="src/assets/icons/Gitako.png" />
 </p>
 
-Gitako is a file tree extension for GitHub, available for Chrome, Firefox and Edge. And more than that, it has lots of useful features.
+Gitako is a free file tree extension for GitHub, available on Chrome, Firefox and Edge.
 
 ### Features
 
-- 📂 neat file tree for repository and pull request
-- 🔎 instant file search and navigation
-- 🕶️ support private repositories and [GitHub enterprise](https://github.com/EnixCoda/Gitako/wiki/Use-in-GitHub-enterprise-and-other-sites)
-- 🏎 extremely fast even in gigantic projects
-- ⌨️ intuitive keyboard accessibility
-- 🗂 support git submodule
-- ↔️ resizable layout
-- 📋 copy snippets and file
-- 🎨 friendly UI and rich icons
+- 📂 File tree for repository and pull request
+- 🔎 Instant file search and navigation
+- 🕶️ Support private repositories
+- 🧩 Support [GitHub enterprise](https://github.com/EnixCoda/Gitako/wiki/Use-in-GitHub-enterprise-and-other-sites), Gitea, Gitee, and [more](https://github.com/EnixCoda/Gitako/issues/60)
+- 🏎 Always performant, even in gigantic projects
+- ⌨️ Intuitive keyboard navigation
+- 📋 Copy snippets and file content
+- 🎨 Various icons and official themes support
+- 🗂 Support git submodule
+- 📏 Fold source code
 
-### Installation
+### Install
 
-[![Install for Chrome](./ChromeWebStoreBadge.svg)](https://chrome.google.com/webstore/detail/gitako-github-file-tree/giljefjcheohhamkjphiebfjnlphnokk)
+<a href="https://chrome.google.com/webstore/detail/gitako-github-file-tree/giljefjcheohhamkjphiebfjnlphnokk"><img width="64" alt="Chrome" src="./assets/Chrome.svg" /></a>
+<a href="https://microsoftedge.microsoft.com/addons/detail/alpoloddcggjhakjemghahlkofjekbca"><img width="64" alt="Edge" src="./assets/Edge.svg" /></a>
+<a href="https://addons.mozilla.org/en-US/firefox/addon/gitako-github-file-tree/"><img width="64" alt="Firefox" src="./assets/Firefox.svg" /></a>
 
-[for Edge](https://microsoftedge.microsoft.com/addons/detail/alpoloddcggjhakjemghahlkofjekbca)
-
-[for Firefox](https://addons.mozilla.org/en-US/firefox/addon/gitako-github-file-tree/)
+It is more recommended for Edge users to install from Chrome store. It may delay for weeks before updates got published to Edge store because its review process is slow.
 
 ### Help Gitako
 
-If you appreciate Gitako and would like to help it grow better, please either
-- Give it a star ⭐️ at GitHub
-- Leave a review 👍 in the extension store
+Gitako is **FREE**. If you like it, please
 
-Feature request discussions and bug reports are welcome, feel free to draft an [issue](https://github.com/EnixCoda/Gitako/issues/)!
+- ⭐️ Star it at GitHub
+- 👍 Review in the extension store
+
+[Feature discussions](https://github.com/EnixCoda/Gitako/discussions) and [bug reports](https://github.com/EnixCoda/Gitako/issues/) are also welcome!
 
 ### About
 
-#### Name and logo?
+#### Source of the name and logo?
 
 The totem of GitHub is a cute octopus. And octopus in Japanese is `タコ`(tako).
-Then link them together:
+Then concat them together:
 
     git + tako -> gitako
 

__tests__/cases/non-parallel/pjax.commits-page.ts

@@ -1,4 +1,4 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../utils'
+import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/commits/develop'))

__tests__/cases/non-parallel/pjax.files-page.ts

@@ -1,4 +1,4 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../utils'
+import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
@@ -9,8 +9,9 @@ describe(`in Gitako project page`, () => {
         `.js-details-container div[role="row"] div[role="rowheader"] a[title*="."]`,
       )
       if (commitLinks.length < 2) throw new Error(`No enough files`)
-      await commitLinks[i].click()
-      await waitForLegacyPJAXRedirect()
+      await waitForLegacyPJAXRedirect(async () => {
+        await commitLinks[i].click()
+      })
       await expectToFind('table.js-file-line-container')
       await sleep(1000)
 

__tests__/cases/non-parallel/pjax.general.ts

@@ -4,8 +4,8 @@ import {
   patientClick,
   selectFileTreeItem,
   sleep,
-  waitForLegacyPJAXRedirect,
-} from '../utils'
+  waitForLegacyPJAXRedirect
+} from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))

__tests__/cases/non-parallel/pjax.internal.ts

@@ -5,8 +5,8 @@ import {
   patientClick,
   selectFileTreeItem,
   sleep,
-  waitForPJAXAPIRedirect,
-} from '../utils'
+  waitForLegacyPJAXRedirect
+} from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako'))
@@ -16,17 +16,17 @@ describe(`in Gitako project page`, () => {
 
     await expandFloatModeSidebar()
     await patientClick(selectFileTreeItem('.babelrc'))
-    await waitForPJAXAPIRedirect()
+    await waitForLegacyPJAXRedirect()
 
     // The selector for file content
     await expectToFind('table.js-file-line-container')
 
-    page.goBack()
-    await waitForPJAXAPIRedirect()
+    await waitForLegacyPJAXRedirect(async () => {
+      await sleep(1000) // This prevents failing in some cases due to some mystery scheduling issue of puppeteer or jest
+      page.goBack()
+    })
 
     // The selector for file content
     await expectToNotFind('table.js-file-line-container')
-
-    // await waitForPJAXAPIRedirect()
   })
 })

__tests__/cases/non-parallel/project-page.gitako.ts

@@ -3,8 +3,8 @@ import {
   expectToFind,
   expectToNotFind,
   scroll,
-  selectFileTreeItem,
-} from '../utils'
+  selectFileTreeItem
+} from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako'))
@@ -22,11 +22,11 @@ describe(`in Gitako project page`, () => {
 
     const filesEle = await page.waitForSelector('.gitako-side-bar .files')
     // node of tsconfig.json should NOT be rendered before scroll down
-    await expectToNotFind(selectFileTreeItem('tsconfig.json'))
-    const box = await filesEle.boundingBox()
+    await expectToNotFind(selectFileTreeItem('package.json'))
+    const box = await filesEle?.boundingBox()
     if (box) {
       await page.mouse.move(box.x + 40, box.y + 40)
-      await scroll({ totalDistance: 100, duration: 1000 })
+      await scroll({ totalDistance: 200, duration: 1000 })
 
       // node of tsconfig.json should be rendered now
       await expectToFind(selectFileTreeItem('tsconfig.json'))

__tests__/cases/parallel/baseline.ts

@@ -1,8 +1,8 @@
 /**
- * Make sure some basic behaviors of puppeteer assertions
+ * Confirm basic behaviors of puppeteer assertions
  */
 
-import { expectToFind, expectToNotFind } from '../utils'
+import { expectToFind, expectToNotFind } from '../../utils'
 
 describe(`in random page`, () => {
   beforeAll(() => page.goto('https://google.com'))

__tests__/cases/parallel/expand-to-target.ts

@@ -0,0 +1,25 @@
+import {
+  expectToFind,
+  selectFileTreeItem,
+  sleep,
+  waitForLegacyPJAXRedirect
+} from '../../utils'
+
+describe(`in Gitako project page`, () => {
+  beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
+
+  it('expand to target on load and after PJAX', async () => {
+    await sleep(3000)
+
+    // Expect Gitako sidebar to have expanded src to see contents
+    await expectToFind(selectFileTreeItem('src/components'))
+
+    await page.click(
+      `.js-details-container div[role="row"] div[role="rowheader"] [title="components"]`,
+    )
+    await waitForLegacyPJAXRedirect()
+
+    // Expect Gitako sidebar to have expanded components and see contents
+    await expectToFind(selectFileTreeItem('src/components/Gitako.tsx'))
+  })
+})

__tests__/cases/parallel/homepage.not-render.ts

@@ -1,4 +1,4 @@
-import { expectToNotFind } from '../utils'
+import { expectToNotFind } from '../../utils'
 
 describe(`in GitHub homepage`, () => {
   beforeAll(() => page.goto('https://github.com'))

__tests__/cases/parallel/pull-request-page.gitako.ts

@@ -1,4 +1,4 @@
-import { expectToFind } from '../utils'
+import { expectToFind } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/pull/71'))

__tests__/jest.config.js

@@ -0,0 +1,185 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // Respect "browser" field in package.json when resolving modules
+  // browser: false,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/private/var/folders/6j/kp9yt47x4872_k7d4gdjbwfm0000gn/T/jest_dx",
+
+  // Automatically clear mock calls and instances between every test
+  // clearMocks: false,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: false,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: null,
+
+  // The directory where Jest should output its coverage files
+  // coverageDirectory: null,
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: null,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: null,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: null,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: null,
+
+  // A set of global variables that need to be available in all test environments
+  // 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: 8,
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "json",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  preset: 'jest-puppeteer',
+
+  // Run tests from one or more projects
+  // projects: null,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state between every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: null,
+
+  // Automatically restore mock state between every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: null,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  // testEnvironment: 'node',
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ['/node_modules/', '.d.ts$', '<rootDir>/vscode-icons/'],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: null,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jasmine2",
+
+  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+  // testURL: "http://localhost",
+
+  testTimeout: 20000,
+
+  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+  // timers: "real",
+
+  // A map from regular expressions to paths to transformers
+  // transform: null,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: null,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+}

__tests__/jest.non-parallel.config.js

@@ -3,5 +3,5 @@ const baseConfig = require('./jest.config')
 module.exports = {
   ...baseConfig,
   maxWorkers: 1,
-  testMatch: ['**/__tests__/non-parallel-cases/*.ts?(x)'],
+  testMatch: [...baseConfig.testMatch, '**/__tests__/cases/non-parallel/*.ts?(x)'],
 }

__tests__/jest.parallel.config.js

@@ -0,0 +1,6 @@
+const baseConfig = require('./jest.config')
+
+module.exports = {
+  ...baseConfig,
+  testMatch: [...baseConfig.testMatch, '**/__tests__/cases/parallel/*.ts?(x)'],
+}

__tests__/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "include": ["."],
+  "exclude": ["tsconfig.json"],
   "compilerOptions": {
     "target": "ES3",
     "module": "CommonJS",

__tests__/utils.ts

@@ -68,12 +68,10 @@ export function once(event: string, target: 'document' | 'window') {
   })
 }
 
-export function waitForLegacyPJAXRedirect() {
-  return once('pjax:end', 'document')
-}
-
-export function waitForPJAXAPIRedirect() {
-  return once('pjax:ready', 'document')
+export async function waitForLegacyPJAXRedirect(action?: () => void | Promise<void>) {
+  const promise = once('pjax:end', 'document')
+  await action?.()
+  return promise
 }
 
 export function selectFileTreeItem(path: string): string {

assets/Chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 190 190"><linearGradient id="d" x1="28.3" x2="80.8" y1="75" y2="44.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".7" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="109.9" x2="51.5" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".3" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".7" stop-color="#ea6100" stop-opacity="0"/></linearGradient><radialGradient id="a" cx="91.2" cy="55" r="84.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><radialGradient id="i" cx="20.9" cy="47.5" r="78" xlink:href="#a"/><radialGradient id="j" cx="94.8" cy="95.1" r="87.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="k" cx="33.3" cy="31" r="176.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><clipPath id="b"><circle cx="95" cy="95" r="88"/></clipPath><g clip-path="url(#b)"><use fill="#db4437" xlink:href="#c"/><use fill="url(#d)" xlink:href="#c"/><use fill="#0f9d58" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/><use fill="#ffcd40" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/><g fill-opacity=".1"><path fill="#3e2723" d="M61.3 114.7L21 47.4l39 67.8z"/><path fill="#263238" d="M128.8 116.3l-.8-.4-37.3 67 38.3-67z"/></g><path id="e" d="M7 183h83.8l39-39v-29H60.2L7 23.5z"/><path id="g" d="M95 55l34.6 60L91 183h92V55z"/><path id="c" d="M21 7v108h39.4L95 55h88V7z"/><path fill="url(#a)" d="M95 55v21l78.4-21z"/><path fill="url(#i)" d="M21 47.5l57.2 57.2L60.4 115z"/><path fill="url(#j)" d="M90.8 183l21-78.3 17.8 10.3z"/><circle cx="95" cy="95" r="40" fill="#f1f1f1"/><circle cx="95" cy="95" r="32" fill="#4285f4"/><circle cx="95" cy="95" r="88" fill="url(#k)"/><g fill="#3e2723" fill-opacity=".1"><path fill="#fff" d="M129.6 115a40 40 0 01-69.2 0L7 24.5 60.4 116a40 40 0 0069.2 0z"/><path d="M96 55h-.5a40 40 0 110 80h.5c22 0 40-18 40-40s-18-40-40-40zm-1 127a88 88 0 0088-87.5v.5A88 88 0 017 95v-.5A88 88 0 0095 182z"/><g fill-opacity=".2"><path fill="#fff" d="M130 116.3a39.3 39.3 0 003.4-32 38 38 0 01-3.8 30.7L92 183l38.2-66.5zM95 8a88 88 0 0188 87.5V95A88 88 0 007 95v.5A88 88 0 0195 8z"/><path d="M95 54c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1z"/></g></g></g></svg>

assets/Edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><linearGradient id="A" gradientUnits="userSpaceOnUse"/><linearGradient id="B" x1="6870" x2="24704" y1="18705" y2="18705" xlink:href="#A"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="C" x1="16272" x2="5133" y1="10968" y2="23102" xlink:href="#A"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="D" cx="16720" cy="18747" r="9538" xlink:href="#A"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="E" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" xlink:href="#A"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="F" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" xlink:href="#A"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="G" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" xlink:href="#A"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="H" d="M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z"/><path id="I" d="M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z"/><path id="J" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#B)" xlink:href="#H"/><use fill="url(#D)" opacity=".35" xlink:href="#H"/><use fill="url(#C)" xlink:href="#I"/><use fill="url(#E)" opacity=".4" xlink:href="#I"/><use fill="url(#F)" xlink:href="#J"/><use fill="url(#G)" xlink:href="#J"/></svg>

jest-puppeteer.config.js

@@ -1,11 +1,19 @@
 const path = require('path')
+if (process.arch === 'arm64' && process.platform === 'darwin') {
+  require('dotenv').config({
+    path: '.env.arm.mac',
+  })
+}
 
 const CRX_PATH = path.resolve(__dirname, 'dist')
 
 module.exports = {
   launch: {
-    executablePath: process.env.PUPPETEER_EXEC_PATH, // set by mujo-code/puppeteer-headful
-    headless: false, // required for extensions
+    // set by mujo-code/puppeteer-headful on GitHub actions
+    // also for usages on ARM chip Mac
+    executablePath: process.env.PUPPETEER_EXEC_PATH,
+    // required for enabling extensions
+    headless: false,
     args: [`--disable-extensions-except=${CRX_PATH}`, `--load-extension=${CRX_PATH}`],
   },
 }

jest.config.js

@@ -91,7 +91,7 @@ module.exports = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: 'jest-puppeteer',
+  // preset: undefined,
 
   // Run tests from one or more projects
   // projects: null,
@@ -141,7 +141,7 @@ module.exports = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  testMatch: ['**/__tests__/cases/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: ['/node_modules/', '.d.ts$', '<rootDir>/vscode-icons/'],
@@ -158,7 +158,7 @@ module.exports = {
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   // testURL: "http://localhost",
 
-  testTimeout: 20000,
+  testTimeout: 5000,
 
   // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
   // timers: "real",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitako",
-  "version": "3.1.0",
+  "version": "3.6.1",
   "description": "File tree for GitHub, and more than that.",
   "repository": "https://github.com/EnixCoda/Gitako",
   "author": "EnixCoda",
@@ -15,8 +15,8 @@
     "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack",
     "roll": "make release",
     "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"
+    "test:parallel": "NODE_ENV=test jest --config __tests__/jest.parallel.config.js",
+    "test:non-parallel": "NODE_ENV=test jest --config __tests__/jest.non-parallel.config.js"
   },
   "dependencies": {
     "@primer/components": "^22.0.2",
@@ -55,21 +55,22 @@
     "@babel/preset-typescript": "^7.3.3",
     "@sentry/cli": "^1.64.2",
     "@types/firefox-webext-browser": "^70.0.1",
-    "@types/jest": "^24.0.25",
+    "@types/jest": "^26.0.23",
     "@types/node": "^11.10.4",
-    "@types/puppeteer": "^3.0.2",
+    "@types/puppeteer": "^5.4.3",
     "babel-loader": "^8.0.5",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "copy-webpack-plugin": "^5.0.0",
     "css-loader": "^2.1.0",
+    "dotenv": "^6.2.0",
     "dotenv-webpack": "^1.7.0",
     "file-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^0.5.2",
-    "jest": "^24.9.0",
-    "jest-puppeteer": "^4.4.0",
+    "jest": "^27.0.6",
+    "jest-puppeteer": "^5.0.4",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^0.9.0",
-    "puppeteer": "^5.4.1",
+    "puppeteer": "^10.1.0",
     "raw-loader": "^4.0.0",
     "sass": "^1.26.2",
     "sass-loader": "^8.0.2",

scripts/check-emit-dir.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const fs = require('fs').promises
+
+const emitDirPath = path.resolve(__dirname, 'tmp')
+exports.emitDirPath = emitDirPath
+
+async function checkEmitDir() {
+  try {
+    await fs.mkdir(emitDirPath)
+  } catch (err) {
+    await fs.stat(emitDirPath)
+  }
+}
+exports.checkEmitDir = checkEmitDir

scripts/fix-pjax-api.js

@@ -5,16 +5,16 @@
 const fs = require('fs').promises
 const path = require('path')
 
-function modify(source = '', pairs = [], loose = true) {
+function modify(source = '', pairs = []) {
   for (const [original, replace] of pairs) {
     if (source.includes(original)) {
       source = source.replace(original, replace)
-      if (source.includes(original)) {
-        throw new Error(`More than one original string found`, JSON.stringify(original))
-      }
     } else {
-      if (loose) console.log(`Skipped missing snippet`, original)
-      else throw new Error(`Original string not found`, JSON.stringify(original))
+      throw new Error(`Original string not found: ${JSON.stringify(original)}`)
+    }
+
+    if (source.includes(original)) {
+      throw new Error(`More than one original string found`, JSON.stringify(original))
     }
   }
 
@@ -54,11 +54,16 @@ async function fixPJAXAPI(loose) {
             }`,
     ],
   ]
-  const filePath = path.resolve(__dirname, '..', `node_modules/pjax-api/dist/pjax-api.js`)
-  const source = await fs.readFile(filePath, 'utf-8')
-  const modified = modify(source, pairs, loose)
-  fs.writeFile(filePath, modified, 'utf-8')
+  try {
+    const filePath = path.resolve(__dirname, '..', `node_modules/pjax-api/dist/pjax-api.js`)
+    const source = await fs.readFile(filePath, 'utf-8')
+    const modified = modify(source, pairs, loose)
+    await fs.writeFile(filePath, modified, 'utf-8')
+  } catch (err) {
+    console.error((err && err.message) || err)
+    const shouldTerminate = process.env.IGNORE_FIX_PJAX_API_FAILURE !== 'true'
+    if (shouldTerminate) process.exit(1)
+  }
 }
 
-const loose = process.argv.includes('loose')
-fixPJAXAPI(loose)
+fixPJAXAPI()

scripts/generate-file-icon-index.js

@@ -1,18 +1,21 @@
-const languageIds = require('./language-id-ext.json')
+const { languages } = require('./tmp/languages')
+const fileName = 'file-icons-index'
 
-function generateCSV() {
+const link = 'https://github.com/vscode-icons/vscode-icons/wiki/ListOfFiles'
+
+function parsePageContent() {
   const records = []
-
   document.body
     .querySelector('table')
     .querySelectorAll('tbody tr')
     .forEach(tr => {
       const [name, id, dark, light] = Array.from(tr.querySelectorAll('td'))
       const exts = []
+      const ids = []
       const names = []
-      id.innerHTML
-        .replace(/<sub>|<\/sub>/g, '')
-        .split(', ')
+
+      id.querySelector('sub')
+        .innerHTML.split(', ')
         .map(part => {
           const tags = part.match(/<(\w+)>(.*?)<\/\1>/g)
           if (tags) {
@@ -21,51 +24,50 @@ function generateCSV() {
               if (match) {
                 const [, tag, content] = match
                 if (tag === 'strong') {
-                  // filenames in bold
-                  names.push(content)
+                  // filenames
+                  names.push(content.toLowerCase())
                 } else if (tag === 'code') {
-                  // language ids in code block
-                  const map = Object.values(languageIds).find(({ ids }) =>
-                    (Array.isArray(ids) ? ids : [ids]).includes(content),
-                  )
-                  if (map && map.exts) exts.push(map.exts)
+                  // language ids
+                  ids.push(content)
                 } else {
                   console.warn(`Found unrecognized format`, subPart, tag) // unknown
                 }
               }
             })
           } else if (part) {
-            // extensions are in regular fonts
-            exts.push(part.replace(/^\./, ''))
+            // extensions
+            exts.push(part.toLowerCase())
           }
         })
       records.push({
         name: name.innerText,
-        exts,
         names,
+        exts,
+        ids,
         icon: getSrc(dark.querySelector('img')) || getSrc(light.querySelector('img')),
       })
     })
+  return records
 
   function getSrc(img) {
     return img && img.src
   }
-
-  const prepend = 'https://github.com/vscode-icons/vscode-icons/raw/master/icons/file_type_'
-  const append = '.svg?sanitize=true'
-  const separator = ':'
-  const csv = records
-    .map(({ name, names, exts, icon }) =>
-      [
-        name,
-        names.join(separator),
-        exts.join(separator),
-        // icon.replace(prepend, '').replace(append, ''), // assumption: name is equal to this
-      ].join(','),
-    )
-    .join('\n')
-
-  return csv
 }
 
-console.log(generateCSV())
+function prepareCSV({ name, names, exts, ids, icon }) {
+  ids.forEach(content => {
+    const defaultExtension = Object.values(languages)
+      .find(({ ids }) => (Array.isArray(ids) ? ids : [ids]).includes(content))
+      .defaultExtension.toLowerCase()
+    if (!exts.includes(defaultExtension)) exts.push(defaultExtension)
+  })
+  const iconFile = icon.replace(/^.*?file_type_(.*?)\..*$/, '$1')
+  const cols = [name, names.join(':'), exts.join(':')]
+  if (!['file'].includes(name) && name !== iconFile) cols.push(iconFile)
+  return cols
+}
+
+exports.fileName = fileName
+exports.link = link
+exports.parsePageContent = parsePageContent
+exports.prepareCSV = prepareCSV

scripts/generate-folder-icon-index.js

@@ -1,3 +1,7 @@
+const fileName = 'folder-icons-index'
+
+const link = 'https://github.com/vscode-icons/vscode-icons/wiki/ListOfFolders'
+
 function parsePageContent() {
   const records = []
   document.body
@@ -16,26 +20,27 @@ function parsePageContent() {
       })
     })
   return records
+
+  function getSrc(img) {
+    return img && img.src
+  }
 }
 
-function getSrc(img) {
-  return img && img.src
+function prepareCSV({ name, names, icon }) {
+  const [iconFileOpen, iconFileClosed] = [
+    icon.open.replace(/^.*?folder_type_(.*?)_opened\..*$/, '$1'),
+    icon.closed.replace(/^.*?folder_type_(.*?)\..*$/, '$1'),
+  ]
+  const cols = [name, names.join(':')]
+  if (
+    !['folder', 'root_folder'].includes(name) &&
+    (name !== iconFileOpen || iconFileOpen !== iconFileClosed)
+  )
+    cols.push(iconFileOpen, iconFileClosed)
+  return cols
 }
 
-function generateCSV(records) {
-  const prepend = 'https://github.com/vscode-icons/vscode-icons/raw/master/icons/folder_type_'
-  const append = '.svg?sanitize=true'
-  const separator = ':'
-  const csv = records
-    .map(({ name, names, icon }) =>
-      [
-        name,
-        names.join(separator),
-        // icon.replace(prepend, '').replace(append, ''), // assumption: name is equal to this
-      ].join(','),
-    )
-    .join('\n')
-  return csv
-}
-
-console.log(generateCSV(parsePageContent()))
+exports.fileName = fileName
+exports.link = link
+exports.parsePageContent = parsePageContent
+exports.prepareCSV = prepareCSV

scripts/generate-icon-index.js

@@ -0,0 +1,49 @@
+const path = require('path')
+const { promises: fs, existsSync } = require('fs')
+const puppeteer = require('puppeteer')
+const generateFileIconIndex = require('./generate-file-icon-index')
+const generateFolderIconIndex = require('./generate-folder-icon-index')
+const { emitDirPath, checkEmitDir } = require('./check-emit-dir')
+
+let browser
+async function getPage() {
+  const headless = process.env.HEADLESS !== 'false'
+  browser = browser || (await puppeteer.launch({ headless }))
+  return await browser.newPage()
+}
+
+async function generateCSV() {
+  await checkEmitDir()
+
+  await Promise.all(
+    [generateFileIconIndex, generateFolderIconIndex].map(
+      async ({ fileName, link, parsePageContent, prepareCSV }) => {
+        let records
+        const emitJSONPath = path.resolve(emitDirPath, fileName + '.json')
+        if (!existsSync(emitJSONPath)) {
+          const page = await getPage()
+          await page.goto(link)
+          records = await page.evaluate(parsePageContent)
+          await page.close()
+          await fs.writeFile(emitJSONPath, JSON.stringify(records))
+        } else {
+          records = require(emitJSONPath)
+        }
+
+        const rowSeparator = '\n'
+        const columnSeparator = ','
+        const csv = records.map(prepareCSV)
+
+        const emitPath = path.resolve(__dirname, '..', 'src/assets/icons')
+        await fs.writeFile(
+          path.resolve(emitPath, fileName + '.csv'),
+          csv.map(cols => cols.join(columnSeparator)).join(rowSeparator),
+        )
+      },
+    ),
+  )
+
+  if (browser) await browser.close()
+}
+
+generateCSV()

scripts/resolve-languages-map.js

@@ -0,0 +1,32 @@
+const path = require('path')
+const fs = require('fs').promises
+const typescript = require('typescript')
+const { emitDirPath, checkEmitDir } = require('./check-emit-dir')
+
+const files = [path.resolve(__dirname, '..', 'vscode-icons/src/iconsManifest/languages.ts')]
+
+const options = {
+  module: typescript.ModuleKind.CommonJS,
+  target: typescript.ScriptTarget.ES2015,
+  strict: true,
+  suppressOutputPathCheck: false,
+}
+
+async function main() {
+  await checkEmitDir()
+
+  const compilerHost = typescript.createCompilerHost(options)
+  compilerHost.writeFile = async (fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+    if (sourceFiles.some(file => files.includes(file.fileName))) {
+      await fs.writeFile(path.resolve(emitDirPath, path.basename(fileName)), data)
+      console.log(`Emitted`, fileName)
+    } else {
+      console.log(`Skipped`, fileName)
+    }
+  }
+
+  const program = typescript.createProgram(files, options, compilerHost)
+  program.emit()
+}
+
+main()

src/analytics.ts

@@ -58,9 +58,9 @@ Sentry.init(sentryOptions)
 
 export const withErrorLog: Middleware = function withErrorLog(method, args) {
   return [
-    async function (...args: any[]) {
+    async function () {
       try {
-        await method.apply(null, args)
+        await method.apply(null, arguments as any)
       } catch (error) {
         raiseError(error)
       }

src/assets/icons/file-icons-index.csv

@@ -60,6 +60,7 @@ ng_smart_component_ts2,,page.ts:container.ts
 ng_smart_component_js2,,page.js:container.js
 ng_service_ts2,,service.ts
 ng_service_js2,,service.js
+ng_tailwind,ng-tailwind.js,
 affectscript,,affect
 ansible,,ansible
 antlr,,g4
@@ -67,36 +68,46 @@ anyscript,,any
 apache,,htaccess
 apex,,cls
 apib,,apib
+api_extractor,api-extractor.json:api-extractor-base.json,
 apl,,apl
 applescript,,applescript
+appsemble,.appsemblerc.yaml:app-definition.yaml,
 appveyor,appveyor.yml:.appveyor.yml,
 arduino,,ino:pde
 asciidoc,,adoc
-asp,,asp:asp
+asp,,asp
 aspx,,aspx:ascx
-assembly,,asm:asm
+assembly,,asm
+astro,,astro
+astroconfig,astro.config.js:astro.config.cjs:astro.config.mjs,
 ats,,ats
 audio,,aac:act:aiff:amr:ape:au:dct:dss:dvf:flac:gsm:iklax:ivs:m4a:m4b:m4p:mmf:mogg:mp3:mpc:msv:oga:ogg:opus:ra:raw:tta:vox:wav:wma
 aurelia,aurelia.json,
 autohotkey,,ahk
 autoit,,au3
+avif,,avif
 avro,,avcs
+awk,,awk
 aws,,
 azure,,azcli
 azurepipelines,azure-pipelines.yml:.vsts-ci.yml,azure-pipelines.yml
-babel,.babelrc:babelrc.js:.babelrc.js:babelrc.json:babel.config.js:.babelignore,
-babel2,.babelrc:babelrc.js:.babelrc.js:babelrc.json:babel.config.js:.babelignore,
+babel,.babelrc:.babelignore:.babelrc.js:.babelrc.cjs:.babelrc.mjs:.babelrc.json:babel.config.js:babel.config.cjs:babel.config.mjs:babel.config.json,
+babel2,.babelrc:.babelignore:.babelrc.js:.babelrc.cjs:.babelrc.mjs:.babelrc.json:babel.config.js:babel.config.cjs:babel.config.mjs:babel.config.json,
 ballerina,,bal
 bat,,bat
+bats,,bats
 bazaar,.bzrignore,
-bazel,.bazelrc:bazel.rc:bazel.bazelrc,bzl
-befunge,,bf:bf
+bazel,BUILD.bazel:.bazelrc:bazel.rc:bazel.bazelrc,bzl:bazel
+befunge,,bf
+bicep,,bicep
 biml,,biml
 binary,,a:app:bin:cmo:cmx:cma:cmxa:cmi:dll:exe:hl:ilk:lib:n:ndll:o:obj:pyc:pyd:pyo:pdb:scpt:scptd:so
 bithound,.bithoundrc,
 bitbucketpipeline,bitbucket-pipelines.yml,
-blade,,blade.php:blade.php
+blade,,blade.php
+blitzbasic,,bb:blitzbasic
 bolt,,bolt
+bosque,,bsq
 bower,.bowerrc:bower.json,
 browserslist,.browserslistrc:browserslist,
 buckbuild,.buckconfig,
@@ -107,28 +118,31 @@ c2,,c
 c3,,c
 c_al,,cal
 cabal,,cabal
-caddy,,Caddyfile
+caddy,,caddyfile
 cake,,cake
 cakephp,,
 capacitor,capacitor.config.json,
 cargo,cargo.toml:cargo.lock,
+casc,,casc
+cddl,,cddl
 cert,,csr:crt:cer:der:pfx:p12:p7b:p7r:src:crl:sst:stl
 ceylon,,ceylon
-cf,,lucee:cfml:cfml
-cf2,,lucee:cfml:cfml
+cf,,lucee:cfml
+cf2,,lucee:cfml
 cfc,,cfc
 cfc2,,cfc
 cfm,,cfm
 cfm2,,cfm
 cheader,,h
-chef,chefignore:berksfile:berksfile.lock:policyfile,
+chef,chefignore:berksfile:berksfile.lock:policyfile.rb:policyfile.lock.json,
 class,,class
 circleci,circle.yml,
 clojure,,cjm:cljc:clojure
 clojurescript,,cljs:clojurescript
-cloudfoundry,.cfignore,
-cmake,,cmake:CMakeCache.txt
+cloudfoundry,.cfignore,yml
+cmake,,cmake:cmakecache.txt
 cobol,,cbl
+codeql,,ql
 codacy,.codacy.yml:.codacy.yaml,
 codeclimate,.codeclimate.yml,
 codecov,codecov.yml:.codecov.yml,
@@ -139,6 +153,7 @@ coffeescript,,coffee
 conan,conanfile.txt:conanfile.py,
 conda,.condarc,
 config,,plist:properties:env
+commitlint,commitlint.config.js:.commitlintrc.js:.commitlintrc.json:.commitlintrc.yml,
 compass,,
 composer,composer.json:composer.lock,
 chef_cookbook,,ckbk
@@ -147,7 +162,7 @@ coveralls,.coveralls.yml,
 cpp,,cpp
 cpp2,,cpp
 cpp3,,cpp
-cppheader,,hpp
+cppheader,,hpp:hh:hxx:h++
 crowdin,crowdin.yml,
 crystal,,cr
 csharp,,csx:cs
@@ -166,28 +181,32 @@ dal,,dal
 darcs,.boringignore,
 dartlang,,dart
 db,,db
+dependabot,dependabot.yml,
 dependencies,dependencies.yml,
-delphi,,pas:pas
-django,,djt:html:html
-dlang,,d:d:d:d
+delphi,,pas
+devcontainer,devcontainer.json,
+django,,djt:html
+dlang,,d
 diff,,diff
-docker,docker-compose.yml:docker-compose.ci-build.yml:docker-compose.override.yml:docker-compose.vs.debug.yml:docker-compose.vs.release.yml:docker-cloud.yml,dockerfile:dockerignore
-docker2,docker-compose.yml:docker-compose.ci-build.yml:docker-compose.override.yml:docker-compose.vs.debug.yml:docker-compose.vs.release.yml:docker-cloud.yml,dockerfile:dockerignore
+docker,compose.yaml:compose.yml:docker-compose.yaml:docker-compose.yml:docker-compose.ci-build.yaml:docker-compose.ci-build.yml:docker-compose.override.yaml:docker-compose.override.yml:docker-compose.vs.debug.yaml:docker-compose.vs.debug.yml:docker-compose.vs.release.yaml:docker-compose.vs.release.yml:docker-cloud.yaml:docker-cloud.yml,dockerfile:dockerignore
+docker2,compose.yaml:compose.yml:docker-compose.yaml:docker-compose.yml:docker-compose.ci-build.yaml:docker-compose.ci-build.yml:docker-compose.override.yaml:docker-compose.override.yml:docker-compose.vs.debug.yaml:docker-compose.vs.debug.yml:docker-compose.vs.release.yaml:docker-compose.vs.release.yml:docker-cloud.yaml:docker-cloud.yml,dockerfile:dockerignore
 dockertest,docker-compose.test.yml,
 dockertest2,docker-compose.test.yml,
 docpad,,eco
 docz,.doczrc:docz.js:docz.json:.docz.js:.docz.json:doczrc.js:doczrc.json:docz.config.js:docz.config.json,
 dojo,.dojorc,
 doxygen,,dox
+drawio,,drawio:dio .drawio.png:.drawio.svg
 drone,.drone.yml:.drone.yml.sig,
 drools,,drl
 dotjs,,dot
 dustjs,,dust
-dylan,,dylan:dylan
+dvc,.dvc,
+dylan,,dylan
 editorconfig,.editorconfig,
 edge,,edge
 edge2,,edge
-eex,,eex:eex
+eex,,eex
 ejs,,ejs
 elastic,,es
 elasticbeanstalk,,
@@ -201,11 +220,13 @@ eps,,eps
 erb,,erb
 erlang,emakefile:.emakerfile,erl
 erlang2,emakefile:.emakerfile,erl
-eslint,.eslintrc:.eslintignore:.eslintcache:.eslintrc.js:.eslintrc.json:.eslintrc.yaml:.eslintrc.yml,
-eslint2,.eslintrc:.eslintignore:.eslintcache:.eslintrc.js:.eslintrc.json:.eslintrc.yaml:.eslintrc.yml,
+eslint,.eslintrc:.eslintignore:.eslintcache:.eslintrc.js:.eslintrc.mjs:.eslintrc.cjs:.eslintrc.json:.eslintrc.yaml:.eslintrc.yml,
+eslint2,.eslintrc:.eslintignore:.eslintcache:.eslintrc.js:.eslintrc.mjs:.eslintrc.cjs:.eslintrc.json:.eslintrc.yaml:.eslintrc.yml,
 excel,,xls:xlsx:xlsm:ods:fods
 excel2,,xls:xlsx:xlsm:ods:fods
+expo,app.json:app.config.js:app.config.json:app.config.json5,
 falcon,,falcon
+fauna,.faunarc,fql
 favicon,favicon.ico,
 fbx,,fbx
 firebase,.firebaserc,
@@ -219,43 +240,51 @@ flow,.flowconfig,
 flutter,.flutter-plugins:.metadata,
 flutter_package,pubspec.lock:pubspec.yaml:.packages,
 font,,woff:woff2:ttf:otf:eot:pfa:pfb:sfd
-fortran,,f:f:f:f
+fortran,,f
 fossa,.fossaignore,
 fossil,ignore-glob,
 fsharp,,fs
 fsproj,,fsproj
 freemarker,,ftl
+fthtml,,fthtml
 fusebox,fuse.js,
 galen,,gspec
 galen2,,gspec
-git,.gitattributes:.gitconfig:.gitignore:.gitmodules:.gitkeep:.mailmap,git:git
+git,.gitattributes:.gitconfig:.gitignore:.gitmodules:.gitkeep:.mailmap,git
 gamemaker,,gmx:gml
 gamemaker2,,yy:yyp:gml
 gamemaker81,,gml
 gatsby,gatsby-config.js:gatsby-config.ts:gatsby-node.js:gatsby-node.ts:gatsby-browser.js:gatsby-browser.ts:gatsby-ssr.js:gatsby-ssr.ts,
 gcode,,gcode
+genstat,,gen
 gitlab,.gitlab-ci.yml,
+gitpod,.gitpod.yaml:.gitpod.yml:gitpod.yaml:gitpod.yml,
 glide,glide.yml,
+glitter,.glitterrc,
 glsl,,glsl
+glyphs,,glyphs
+gnuplot,,gp
 go,,go
 go_package,go.sum:go.mod,
 godot,,gd
 gradle,,gradle
+gradle2,,gradle
 graphql,.gqlconfig,gql
+graphql_config,.graphqlconfig:.graphqlconfig.yml:.graphqlconfig.yaml,
 graphviz,,gv
 greenkeeper,greenkeeper.json,
 gridsome,gridsome.config.js:gridsome.config.ts:gridsome.server.js:gridsome.server.ts:gridsome.client.js:gridsome.client.ts,
 groovy,,groovy
 groovy2,,groovy
 grunt,gruntfile.js:gruntfile.coffee:gruntfile.ts:gruntfile.babel.js:gruntfile.babel.coffee:gruntfile.babel.ts,
-gulp,gulpfile.js:gulpfile.coffee:gulpfile.ts:gulpfile.babel.js:gulpfile.babel.coffee:gulpfile.babel.ts,
+gulp,gulpfile.js:gulpfile.coffee:gulpfile.ts:gulpfile.mjs:gulpfile.esm.js:gulpfile.esm.coffee:gulpfile.esm.ts:gulpfile.esm.mjs:gulpfile.babel.js:gulpfile.babel.coffee:gulpfile.babel.ts:gulpfile.babel.mjs,
 haml,,haml
 handlebars,,hbs
 handlebars2,,hbs
 harbour,,prg
 haskell,,hs:lhs
 haskell2,,hs:lhs
-haxe,haxelib.json,haxe:haxe:haxe
+haxe,haxelib.json,haxe
 haxecheckstyle,checkstyle.json,
 haxedevelop,,hxproj
 helix,.p4ignore,
@@ -263,18 +292,22 @@ helm,,helm.tpl
 hjson,,hjson
 hlsl,,hlsl
 homeassistant,,yaml
+horusec,horusec-config.json,
 host,,hosts
 html,,html
 htmlhint,.htmlhintrc,
 http,,http
-hunspell,,aff:aff
-husky,.huskyrc:.huskyrc.js:.huskyrc.json:.huskyrc.yaml:.huskyrc.yml,
+hunspell,,aff
+husky,.huskyrc:husky.config.js:.huskyrc.js:.huskyrc.json:.huskyrc.yaml:.huskyrc.yml,
+hy,,hy
+hygen,,ejs.t
+hypr,,hypr
 icl,,icl
 idris,,idr:lidr
 idrisbin,,ibc
 idrispkg,,ipkg
 image,,jpeg:jpg:gif:png:bmp:tiff:ico
-imba,,imba
+imba,,imba:imba2
 inc,,inc:include
 infopath,,infopathxml:xsn:xsf:xtp2
 informix,,4gl
@@ -285,54 +318,63 @@ ionic,ionic.project:ionic.config.json,
 jake,jakefile:jakefile.js,
 janet,,janet
 jar,,jar
+jasmine,jasmine.json,
 java,,java
 jbuilder,,jbuilder
-jest,jest.config.js:jest.json:jest.config.json:.jestrc:.jestrc.js:.jestrc.json,
+jest,jest.config.json:jest.config.base.json:jest.config.common.json:jest.config.ts:jest.config.base.ts:jest.config.common.ts:jest.json:.jestrc:.jestrc.js:.jestrc.json:jest.config.js:jest.config.cjs:jest.config.mjs:jest.config.base.js:jest.config.base.cjs:jest.config.base.mjs:jest.config.common.js:jest.config.common.cjs:jest.config.common.mjs:jest.config.babel.js:jest.config.babel.cjs:jest.config.babel.mjs,
 jest_snapshot,,js.snap:jsx.snap:ts.snap:tsx.snap
 jekyll,,jekyll
-jenkins,,jenkins:jenkins:jenkins
+jenkins,,jenkins
 jinja,,jinja
 jpm,.jpmignore,
 js,,js
 js_official,,js
 jsbeautify,.jsbeautifyrc:jsbeautifyrc:.jsbeautify:jsbeautify,
 jsconfig,jsconfig.json,
+jscpd,.jscpd.json:jscpd-report.xml:jscpd-report.json:jscpd-report.html,
 jshint,.jshintrc:.jshintignore,
 jsmap,,js.map
-json,,json:JSON-tmLanguage:jsonc
-json_official,,json:JSON-tmLanguage:jsonc
-json2,,json:JSON-tmLanguage:jsonc
+json,,json:json-tmlanguage:jsonc
+json_official,,json:json-tmlanguage:jsonc
+json2,,json:json-tmlanguage:jsonc
 jsonnet,,jsonnet
-json5,,json5:json5
+json5,,json5
 jsonld,,jsonld:json-ld
 jsp,,jsp
 jss,,jss
-julia,,jl:jl
-julia2,,jl:jl
+julia,,jl
+julia2,,jl
 jupyter,,ipynb
 io,,io
 iodine,,id
 karma,karma.conf.js:karma.conf.coffee:karma.conf.ts,
 key,,key:pem
 kite,.kiteignore,
-kitchenci,.kitchen.yml,
+kitchenci,.kitchen.yml:kitchen.yml,
 kivy,,kv
 kos,,ks
 kotlin,,kt
+kusto,,.kusto
+latino,,lat
 layout,,master:layout.html:layout.htm
 layout,layout.html:layout.htm,
 lerna,lerna.json,
 less,,less
+lex,,flex
 license,,enc
-license,license:licence:license.md:license.txt:licence.md:licence.txt,
+license,license:licence:copying:copying.lesser:license.md:license.txt:licence.md:licence.txt:copying.md:copying.txt:copying.lesser.md:copying.lesser.txt,
+licensebat,.licrc,
+lighthouse,.lighthouserc.js:.lighthouserc.json:.lighthouserc.yaml:.lighthouserc.yml,
 lisp,,lisp
 lime,,hxp
 lime,include.xml,
 lintstagedrc,.lintstagedrc:lint-staged.config.js:.lintstagedrc.js:.lintstagedrc.json:.lintstagedrc.yaml:.lintstagedrc.yml,
 liquid,,liquid
 livescript,,ls
+lnk,,lnk
 locale,,
 log,,log:tlg
+log,,log:tlg
 lolcode,,lol
 lsl,,lsl
 lua,,lua
@@ -356,8 +398,9 @@ mercurial,.hgignore,
 meson,,meson.build
 meteor,,
 mjml,,mjml
-mlang,,pq:pq
+mlang,,pq
 mocha,mocha.opts:.mocharc.js:.mocharc.json:.mocharc.jsonc:.mocharc.yaml:.mocharc.yml,
+modernizr,modernizr:modernizr.js:modernizrrc.js:.modernizr.js:.modernizrrc.js,
 mojolicious,,ep
 moleculer,moleculer.config.js:moleculer.config.json:moleculer.config.ts,
 mongo,,mongo
@@ -389,25 +432,31 @@ nest_pipe_ts,,pipe.ts
 nest_service_js,,service.js
 nest_service_ts,,service.ts
 netlify,netlify.toml,
+next,next.config.js,
 nginx,nginx.conf,
-nim,,nim:nim
+nim,,nim
+nimble,,nimble
 ninja,build.ninja,
+nix,,nix
 njsproj,,njsproj
 node,.node-version:.nvmrc,
 node2,.node-version:.nvmrc,
 nodemon,nodemon.json,
 npm,.npmignore:.npmrc:package.json:package-lock.json:npm-shrinkwrap.json,
-nsi,,nsi:nsi:nsi:nsi
-nsri,.nsrirc:.nsriignore:.nsrirc.js:.nsrirc.json:.nsrirc.yaml:.nsrirc.yml:.nsrirc.config.js,
+nsi,,nsi
+nsri,.nsrirc:.nsriignore:nsri.config.js:.nsrirc.js:.nsrirc.json:.nsrirc.yaml:.nsrirc.yml,
 nsri-integrity,.integrity.json,
-nuget,,nupkg:nuspec:psmdcp
+nuget,,nupkg:snupkg:nuspec:psmdcp
+numpy,,npy:npz
 nunjucks,,nunj:njs:nunjucks
 nuxt,nuxt.config.js:nuxt.config.ts,
 nyc,.nycrc:.nycrc.json,
 objectivec,,m
 objectivecpp,,mm
-ocaml,.merlin,ml:ml:ml
+ocaml,.merlin,ml
+ogone,,o3
 onenote,,one:onepkg:onetoc:onetoc2:sig
+openscad,,scad
 opencl,,cl:opencl
 openHAB,,things
 org,,org
@@ -436,18 +485,20 @@ phpunit,phpunit:phpunit.xml:phpunit.xml.dist,
 phraseapp,.phraseapp.yml,
 pine,,pine
 pip,pipfile:pipfile.lock,requirements.txt
-platformio,platformio.ini,dbgasm:dbgasm:dbgasm
+pipeline,,pipeline
+platformio,platformio.ini,dbgasm
 plantuml,,pu:plantuml:iuml:puml
-plsql,,ddl:ddl
+plsql,,ddl
 plsql_package,,pck
 plsql_package_body,,pkb
 plsql_package_header,,pkh
 plsql_package_spec,,pks
+pnpm,pnpmfile.js:pnpm-lock.yaml:pnpm-workspace.yaml,
 poedit,,po:mo
 polymer,,polymer
 pony,,pony
 postcss,,pcss
-postcssconfig,.postcssrc:.postcssrc.json:.postcssrc.yml:.postcssrc.js:postcss.config.js,
+postcssconfig,.postcssrc:.postcssrc.json:.postcssrc.yaml:.postcssrc.yml:.postcssrc.ts:.postcssrc.js:.postcssrc.cjs:postcss.config.ts:postcss.config.js:postcss.config.cjs,
 powerpoint,,pot:potx:potm:pps:ppsx:ppsm:ppt:pptx:pptm:pa:ppa:ppam:sldm:sldx
 powerpoint2,,pot:potx:potm:pps:ppsx:ppsm:ppt:pptx:pptm:pa:ppa:ppam:sldm:sldx
 powershell,,ps1
@@ -460,15 +511,15 @@ powershell_psm2,,psm1
 powershell_psd2,,psd1
 precommit,.pre-commit-config.yaml,
 prettier,.prettierrc:.prettierignore,
-prettier,prettier.config.js:prettier.config.ts:prettier.config.coffee,
-prettier,.prettierrc.js:.prettierrc.json:.prettierrc.yml:.prettierrc.yaml,
+prettier,prettier.config.js:prettier.config.cjs:prettier.config.ts:prettier.config.coffee,
+prettier,.prettierrc.js:.prettierrc.cjs:.prettierrc.json:.prettierrc.json5:.prettierrc.yml:.prettierrc.yaml,
 prisma,,prisma
 processinglang,,pde
 procfile,procfile,
 progress,,w
-prolog,,pro:P:pro
+prolog,,pro:P
 prometheus,,rules
-protobuf,,proto:proto
+protobuf,,proto
 protractor,protractor.conf.js:protractor.conf.coffee:protractor.conf.ts,
 publisher,,pub:puz
 puppet,,pp
@@ -476,6 +527,7 @@ pug,.jade-lintrc:.pug-lintrc:.jade-lint.json:.pug-lintrc.js:.pug-lintrc.json,pug
 purescript,,purs
 pyret,,arr
 python,,py
+pytyped,py.typed,
 pyup,.pyup:.pyup.yml,
 q,,q
 qbs,,qbs
@@ -490,7 +542,7 @@ rails,,
 rake,,rake
 rake,rakefile,
 raml,,raml
-razor,,cshtml:cshtml
+razor,,cshtml
 razzle,razzle.config.js,
 reactjs,,jsx
 reacttemplate,,rt
@@ -498,22 +550,29 @@ reactts,,tsx
 reason,,re
 red,,red
 registry,,reg
+rego,,rego
 rehype,.rehyperc:.rehypeignore:.rehyperc.js:.rehyperc.json:.rehyperc.yml:.rehyperc.yaml,
 remark,.remarkrc:.remarkignore:.remarkrc.js:.remarkrc.json:.remarkrc.yml:.remarkrc.yaml,
 renovate,.renovaterc:renovate.json:.renovaterc.json,
+rescript,,res
 rest,,rst
 retext,.retextrc:.retextignore:.retextrc.js:.retextrc.json:.retextrc.yml:.retextrc.yaml,
+rexx,,rex
 riot,,tag
 robotframework,,robot
 robots,robots.txt,
-rollup,rollup.config.js:rollup.config.mjs:rollup.config.coffee:rollup.config.ts:rollup.config.common.js:rollup.config.common.mjs:rollup.config.common.coffee:rollup.config.common.ts:rollup.config.dev.js:rollup.config.dev.mjs:rollup.config.dev.coffee:rollup.config.dev.ts:rollup.config.prod.js:rollup.config.prod.mjs:rollup.config.prod.coffee:rollup.config.prod.ts,
+rollup,rollup.config.js:rollup.config.cjs:rollup.config.mjs:rollup.config.coffee:rollup.config.ts:rollup.config.common.js:rollup.config.common.cjs:rollup.config.common.mjs:rollup.config.common.coffee:rollup.config.common.ts:rollup.config.dev.js:rollup.config.dev.cjs:rollup.config.dev.mjs:rollup.config.dev.coffee:rollup.config.dev.ts:rollup.config.prod.js:rollup.config.prod.cjs:rollup.config.prod.mjs:rollup.config.prod.coffee:rollup.config.prod.ts,
+rmd,,rmd
 rproj,,rproj
 rspec,.rspec,
 rubocop,.rubocop.yml:.rubocop_todo.yml,
 ruby,,rb
 rust,,rs
+rust_toolchain,rust-toolchain,
+sails,.sailsrc,
 saltstack,,sls
 san,,san
+sas,,sas
 sass,,sass
 sbt,,sbt
 scala,,scala
@@ -522,9 +581,9 @@ scss,,scssm:scss
 scilab,,sce
 sdlang,,sdl
 sentry,.sentryclirc,
-serverless,serverless.yml,
+serverless,serverless.yml:serverless.json:serverless.js:serverless.ts,
 sequelize,.sequelizerc:.sequelizerc.js:.sequelizerc.json,
-shaderlab,,shader
+shaderlab,,unity:shader
 shell,,fish:sh
 sketch,,sketch
 slang,,slang
@@ -533,7 +592,7 @@ slim,,slim
 sln,,sln
 sln2,,sln
 silverstripe,,ss
-skipper,,eskip:eskip
+skipper,,eskip
 smarty,,tpl
 snapcraft,snapcraft.yaml,
 snort,,snort
@@ -541,6 +600,8 @@ snyk,.snyk,
 solidarity,.solidarity:.solidarity.json,
 solidity,,sol
 source,,
+spacengine,,spe
+sparql,,rq
 sqf,,sqf
 sql,,sql
 sqlite,,sqlite:sqlite3:db3
@@ -550,52 +611,61 @@ stan,,stan
 stata,,dta:do
 stencil,,stencil:html.stencil
 style,,
-stylelint,.stylelintrc:.stylelintignore:.stylelintcache:stylelint.config.js:stylelint.config.json:stylelint.config.yaml:stylelint.config.yml:stylelint.config.ts:.stylelintrc.js:.stylelintrc.json:.stylelintrc.yaml:.stylelintrc.yml:.stylelintrc.ts,
+stylelint,.stylelintrc:.stylelintignore:.stylelintcache:stylelint.config.js:stylelint.config.json:stylelint.config.yaml:stylelint.config.yml:stylelint.config.ts:stylelint.config.cjs:.stylelintrc.js:.stylelintrc.json:.stylelintrc.yaml:.stylelintrc.yml:.stylelintrc.ts:.stylelintrc.cjs,
 stylable,,st.css
 styled,,styled
+stylish_haskell,.stylish-haskell.yaml,
 stylus,,styl
 storyboard,,storyboard
-storybook,,story.js:story.jsx:story.ts:story.tsx:stories.js:stories.jsx:stories.ts:stories.tsx
+storybook,,story.js:story.jsx:story.ts:story.tsx:story.mdx:stories.js:stories.jsx:stories.ts:stories.tsx:stories.mdx
 subversion,.svnignore,
 svelte,,svelte
 svg,,svg
-swagger,,swagger:swagger
+swagger,,swagger
 swift,package.pins,swift
 swig,,swig
 symfony,symfony.lock,
 systemd,,link
 systemverilog,,sv
 t4tt,,tt
-tailwind,tailwind.js:tailwind.coffee:tailwind.ts:tailwind.config.js:tailwind.config.coffee:tailwind.config.ts,
+tailwind,tailwind.js:tailwind.cjs:tailwind.coffee:tailwind.ts:tailwind.json:tailwind.config.js:tailwind.config.cjs:tailwind.config.coffee:tailwind.config.ts:tailwind.config.json,
+teal,,teal
 tt,,tt2:tt3
 tcl,,tcl:exp
 tera,,tera
 terraform,,tfstate:tf
 test,,tst
+testcafe,.testcaferc.json,
 testjs,,test.js:test.jsx:test.mjs:spec.js:spec.jsx:spec.mjs
 testts,,test.ts:test.tsx:spec.ts:spec.tsx:e2e-test.ts:e2e-test.tsx:e2e-spec.ts:e2e-spec.tsx
 tex,,texi:tikz:sty:tex:bib:dtx
-text,,csv:txt
+text,,csv:tsv:txt
 textile,,textile
+tiltfile,,tiltfile
 tfs,.tfignore,
 todo,,todo
 toml,,toml
-tox,.ini,
+tox,tox.ini,
 travis,.travis.yml,
-tsconfig,tsconfig.json:tsconfig.app.json:tsconfig.spec.json:tsconfig.e2e.json:tsconfig.base.json:tsconfig.common.json:tsconfig.dev.json:tsconfig.development.json:tsconfig.staging.json:tsconfig.test.json:tsconfig.prod.json:tsconfig.production.json,
+tsconfig,tsconfig.json:tsconfig.app.json:tsconfig.base.json:tsconfig.common.json:tsconfig.dev.json:tsconfig.development.json:tsconfig.e2e.json:tsconfig.prod.json:tsconfig.production.json:tsconfig.server.json:tsconfig.spec.json:tsconfig.staging.json:tsconfig.test.json:tsconfig.lib.json:tsconfig.lib.prod.json,
+tsconfig_official,tsconfig.json:tsconfig.app.json:tsconfig.base.json:tsconfig.common.json:tsconfig.dev.json:tsconfig.development.json:tsconfig.e2e.json:tsconfig.prod.json:tsconfig.production.json:tsconfig.server.json:tsconfig.spec.json:tsconfig.staging.json:tsconfig.test.json:tsconfig.lib.json:tsconfig.lib.prod.json,
 tslint,tslint.json:tslint.yaml:tslint.yml,
 ttcn,,ttcn3
+tuc,,tuc
 twig,,twig
+typedoc,typedoc.js:typedoc.json,
 typescript,,ts
 typescript_official,,ts
 typescriptdef,,d.ts
 typescriptdef_official,,d.ts
 typo3,,typoscript
 unibeautify,.unibeautifyrc:unibeautify.config.js:.unibeautifyrc.js:.unibeautifyrc.json:.unibeautifyrc.yaml:.unibeautifyrc.yml,
+unlicense,unlicense:unlicence:unlicense.md:unlicense.txt:unlicence.md:unlicence.txt,
 vagrant,vagrantfile,
 vala,,vala
 vapi,,vapi
 vash,,vash
+vapor,vapor.yml,
 vb,,vb
 vba,,cls
 vbhtml,,vbhtml
@@ -607,6 +677,7 @@ vhdl,,vhdl
 video,,3g2:3gp:asf:amv:avi:divx:qt:f4a:f4b:f4p:f4v:flv:m2v:m4v:mkv:mk3d:mov:mp2:mp4:mpe:mpeg:mpeg2:mpg:mpv:nsv:ogv:rm:rmvb:svi:vob:webm:wmv
 view,,
 vim,.vimrc:.gvimrc,vim
+vite,vite.config.js:vite.config.ts,
 vlang,,v
 volt,,volt
 vscode,.vscodeignore:launch.json:tasks.json:vscodeignore.json,
@@ -619,30 +690,34 @@ vue,,vue
 vueconfig,.vuerc:vue.config.js,
 wallaby,wallaby.json:wallaby.js:wallaby.ts:wallaby.coffee:wallaby.conf.json:wallaby.conf.js:wallaby.conf.ts:wallaby.conf.coffee:.wallaby.json:.wallaby.js:.wallaby.ts:.wallaby.coffee:.wallaby.conf.json:.wallaby.conf.js:.wallaby.conf.ts:.wallaby.conf.coffee,
 watchmanconfig,.watchmanconfig,
-wasm,,wasm:wasm:wasm
+wasm,,wasm
 webp,,webp
-webpack,webpack.base.conf.js:webpack.base.conf.coffee:webpack.base.conf.ts:webpack.common.js:webpack.common.coffee:webpack.common.ts:webpack.config.js:webpack.config.coffee:webpack.config.ts:webpack.config.base.js:webpack.config.base.coffee:webpack.config.base.ts:webpack.config.common.js:webpack.config.common.coffee:webpack.config.common.ts:webpack.config.dev.js:webpack.config.dev.coffee:webpack.config.dev.ts:webpack.config.development.js:webpack.config.development.coffee:webpack.config.development.ts:webpack.config.staging.js:webpack.config.staging.coffee:webpack.config.staging.ts:webpack.config.test.js:webpack.config.test.coffee:webpack.config.test.ts:webpack.config.prod.js:webpack.config.prod.coffee:webpack.config.prod.ts:webpack.config.production.js:webpack.config.production.coffee:webpack.config.production.ts:webpack.config.babel.js:webpack.config.babel.coffee:webpack.config.babel.ts:webpack.config.base.babel.js:webpack.config.base.babel.coffee:webpack.config.base.babel.ts:webpack.config.common.babel.js:webpack.config.common.babel.coffee:webpack.config.common.babel.ts:webpack.config.dev.babel.js:webpack.config.dev.babel.coffee:webpack.config.dev.babel.ts:webpack.config.development.babel.js:webpack.config.development.babel.coffee:webpack.config.development.babel.ts:webpack.config.staging.babel.js:webpack.config.staging.babel.coffee:webpack.config.staging.babel.ts:webpack.config.test.babel.js:webpack.config.test.babel.coffee:webpack.config.test.babel.ts:webpack.config.prod.babel.js:webpack.config.prod.babel.coffee:webpack.config.prod.babel.ts:webpack.config.production.babel.js:webpack.config.production.babel.coffee:webpack.config.production.babel.ts:webpack.dev.js:webpack.dev.coffee:webpack.dev.ts:webpack.dev.conf.js:webpack.dev.conf.coffee:webpack.dev.conf.ts:webpack.prod.js:webpack.prod.coffee:webpack.prod.ts:webpack.prod.conf.js:webpack.prod.conf.coffee:webpack.prod.conf.ts:webpack.mix.js:webpack.mix.coffee:webpack.mix.ts:webpack.test.conf.js:webpack.test.conf.coffee:webpack.test.conf.ts,
+webpack,webpack.base.conf.js:webpack.base.conf.coffee:webpack.base.conf.ts:webpack.common.js:webpack.common.coffee:webpack.common.ts:webpack.config.js:webpack.config.coffee:webpack.config.ts:webpack.config.base.js:webpack.config.base.coffee:webpack.config.base.ts:webpack.config.common.js:webpack.config.common.coffee:webpack.config.common.ts:webpack.config.dev.js:webpack.config.dev.coffee:webpack.config.dev.ts:webpack.config.development.js:webpack.config.development.coffee:webpack.config.development.ts:webpack.config.staging.js:webpack.config.staging.coffee:webpack.config.staging.ts:webpack.config.test.js:webpack.config.test.coffee:webpack.config.test.ts:webpack.config.prod.js:webpack.config.prod.coffee:webpack.config.prod.ts:webpack.config.production.js:webpack.config.production.coffee:webpack.config.production.ts:webpack.config.babel.js:webpack.config.babel.coffee:webpack.config.babel.ts:webpack.config.base.babel.js:webpack.config.base.babel.coffee:webpack.config.base.babel.ts:webpack.config.common.babel.js:webpack.config.common.babel.coffee:webpack.config.common.babel.ts:webpack.config.dev.babel.js:webpack.config.dev.babel.coffee:webpack.config.dev.babel.ts:webpack.config.development.babel.js:webpack.config.development.babel.coffee:webpack.config.development.babel.ts:webpack.config.staging.babel.js:webpack.config.staging.babel.coffee:webpack.config.staging.babel.ts:webpack.config.test.babel.js:webpack.config.test.babel.coffee:webpack.config.test.babel.ts:webpack.config.prod.babel.js:webpack.config.prod.babel.coffee:webpack.config.prod.babel.ts:webpack.config.production.babel.js:webpack.config.production.babel.coffee:webpack.config.production.babel.ts:webpack.dev.js:webpack.dev.coffee:webpack.dev.ts:webpack.dev.conf.js:webpack.dev.conf.coffee:webpack.dev.conf.ts:webpack.prod.js:webpack.prod.coffee:webpack.prod.ts:webpack.prod.conf.js:webpack.prod.conf.coffee:webpack.prod.conf.ts:webpack.main.config.js:webpack.main.config.coffee:webpack.main.config.ts:webpack.mix.js:webpack.mix.coffee:webpack.mix.ts:webpack.plugins.js:webpack.plugins.coffee:webpack.plugins.ts:webpack.renderer.config.js:webpack.renderer.config.coffee:webpack.renderer.config.ts:webpack.rules.js:webpack.rules.coffee:webpack.rules.ts:webpack.test.conf.js:webpack.test.conf.coffee:webpack.test.conf.ts,
+wenyan,,wy
 wercker,wercker.yml,
 wolfram,,wl
 word,,doc:docx:docm:dot:dotx:dotm:wll
 word2,,doc:docx:docm:dot:dotx:dotm:wll
 wpml,wpml-config.xml,
-wurst,,wurst:wurst
+wurst,,wurst
 wxml,,wxml
 wxss,,wxss
 xcode,,xcodeproj
 xfl,,xfl
 xib,,xib
 xliff,,xliff:xlf
+xmake,,xmake.lua
 xml,,pex:tmlanguage:xml
 xquery,,xquery
 xsl,,xsl
-yaml,,yaml:YAML-tmLanguage
+yacc,,bison
+yaml,,yaml:yaml-tmlanguage
 yamllint,.yamllint,
 yandex,.yaspellerrc:.yaspeller.json,
 yang,,yang
-yarn,yarn.lock:.yarnrc:.yarnclean:.yarn-integrity:.yarn-metadata.json:.yarnignore,
+yarn,yarn.lock:.yarnrc:.yarnrc.yml:.yarnclean:.yarn-integrity:.yarn-metadata.json:.yarnignore,
 yeoman,.yo-rc.json,
-zeit,now.json:.nowignore,
-zip,,zip:rar:7z:tar:gz:bzip2:xz:bz2
-zip2,,zip:rar:7z:tar:gz:bzip2:xz:bz2
+zeit,now.json:.nowignore:vercel.json:.vercelignore,
+zig,,zig
+zip,,zip:rar:7z:tar:tgz:bz:gz:bzip2:xz:bz2:zipx
+zip2,,zip:rar:7z:tar:tgz:bz:gz:bzip2:xz:bz2:zipx

src/assets/icons/folder-icons-index.csv

@@ -1,7 +1,7 @@
 folder,
 root_folder,
 android,android
-api,api:.api
+api,api:.api:apis:.apis
 app,app:.app
 arangodb,arangodb:arango
 asset,assets:.assets
@@ -11,6 +11,7 @@ aws,aws:.aws
 azure,azure:.azure
 azurepipelines,azure-pipelines:.azure-pipelines
 binary,bin:.bin
+bloc,blocs:bloc
 blueprint,blueprint:.blueprint:blueprints:.blueprints
 bower,bower_components
 buildkite,.buildkite
@@ -18,24 +19,29 @@ cake,cake:.cake
 certificate,certificates:.certificates:certs:certs.
 chef,chef:.chef
 circleci,.circleci
-controller,controllers:.controllers:handlers:.handlers
-component,components:.components:widgets
+controller,controller:controllers:.controllers:handlers:.handlers
+component,component:components:.components:widgets
 composer,composer:.composer
 cli,cli:cmd:command:commands:commandline:console
-client,client
+client,client:clients
 cmake,.cmake:cmake
-config,config:.config:configs:.configs:configuration:.configuration:configurations:.configurations:setting:.setting:settings:.settings:ini:.ini:initializers:.initializers
+config,conf:.conf:config:.config:configs:.configs:configuration:.configuration:configurations:.configurations:setting:.setting:settings:.settings:ini:.ini:initializers:.initializers
 coverage,coverage
 css,css:_css
+cubit,cubits:cubit
 cypress,cypress
+dapr,.dapr:dapr
 db,db:database:sql:data:repo:repository:repositories
-debian,debian
-dist,dist:dists:out:outs:export:exports:build:builds:release:releases:target:targets
+debian,debian:deb
+dependabot,.dependabot
+devcontainer,.devcontainer
+dist,dist:.dist:dists:out:outs:export:exports:build:.build:builds:release:releases:target:targets
 docker,docker:.docker
 docs,docs:doc
 e2e,e2e
 elasticbeanstalk,.elasticbeanstalk:.ebextensions
 electron,electron
+expo,.expo:.expo-shared
 favicon,favicon:favicons
 flow,flow:flow-typed
 fonts,fonts:font:fnt
@@ -48,18 +54,20 @@ graphql,graphql
 grunt,grunt
 gulp,gulp:gulpfile.js:gulpfile.coffee:gulpfile.ts:gulpfile.babel.js:gulpfile.babel.coffee:gulpfile.babel.ts
 haxelib,.haxelib:haxe_libraries
-helper,helpers:.helpers
+helper,helper:.helper:helpers:.helpers
+hook,hook:.hook:hooks:.hooks
+husky,.husky
 idea,.idea
 images,images:image:img:icons:icon:ico:screenshot:screenshots:svg
 include,include:includes:incl:inc:.include:.includes:.incl:.inc:_include:_includes:_incl:_inc
-interfaces,interfaces
+interfaces,interface:interfaces
 ios,ios
 js,js
 json,json
 json_official,json
 kubernetes,kubernetes:k8s:kube:kuber:.kubernetes:.k8s:.kube:.kuber
 less,less:_less
-library,lib:.lib:library
+library,lib:libs:.lib:.libs:library:libraries
 linux,linux
 locale,lang:language:languages:locale:locales:_locale:_locales:internationalization:globalization:localization:i18n:g11n:l10n
 log,log:logs
@@ -67,14 +75,15 @@ macos,macos:darwin
 mariadb,mariadb:maria
 maven,.mvn
 memcached,memcached:.memcached
-middleware,middleware
+middleware,middleware:middlewares
 mjml,mjml:.mjml
 minikube,minikube:minik8s:minikuber
 mock,mocks:.mocks:__mocks__
-model,models:.models:entities:.entities
+model,model:.model:models:.models:entities:.entities
 module,modules
 mongodb,mongodb:mongo
 mysql,mysqldb:mysql
+next,.next
 nginx,nginx:conf.d
 node,node_modules
 notification,notification:notifications:event:events
@@ -92,20 +101,21 @@ ravendb,ravendb
 route,route:routes:_route:_routes:routers
 redux,redux
 meteor,.meteor
+nuxt,.nuxt
 sass,sass:scss:_sass:_scss
 script,script:scripts
 server,server
-services,services
+services,service:services
 src,src:source:sources
 sso,sso
-story,stories:__stories__
+story,story:stories:__stories__:.storybook
 style,style:styles
 test,tests:.tests:test:.test:__tests__:__test__:spec:.spec:specs:.specs
 temp,temp:.temp:tmp:.tmp
 template,template:.template:templates:.templates
 theme,theme:themes
 travis,.travis
-tools,tools:.tools:util:utils
+tools,tool:tools:.tools:util:utils
 typescript,typescript:ts
 typings,typings:@types
 typings2,typings:@types
@@ -122,4 +132,4 @@ vscode_test2,.vscode-test
 vscode_test3,.vscode-test
 webpack,webpack
 windows,windows:win32
-www,www:wwwroot
+www,www:wwwroot

src/components/DiffStatGraph.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { resolveDiffGraphMeta } from 'utils/general'
+import { Icon } from './Icon'
+
+export function DiffStatGraph({
+  diff: { status, changes, additions, deletions },
+}: {
+  diff: Required<TreeNode>['diff']
+}) {
+  const { g, r, w } = resolveDiffGraphMeta(additions, deletions, changes)
+
+  const children: React.ReactNode[] = []
+  for (let i = 0; i < g; i++)
+    children.push(<span key={`g-${i}`} className="diff-stat-graph-addition" />)
+  for (let i = 0; i < r; i++)
+    children.push(<span key={`r-${i}`} className="diff-stat-graph-deletion" />)
+  for (let i = 0; i < w; i++)
+    children.push(<span key={`w-${i}`} className="diff-stat-graph-no-change" />)
+
+  return (
+    <span className={'diff-stat-graph'}>
+      <Icon
+        className={status}
+        type={
+          {
+            added: 'diffAdded',
+            ignored: 'diffIgnored',
+            modified: 'diffModified',
+            removed: 'diffRemoved',
+            renamed: 'diffRenamed',
+          }[status]
+        }
+      />
+      {children}
+    </span>
+  )
+}

src/components/DiffStatText.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { Icon } from './Icon'
+
+export function DiffStatText({
+  diff: { status, changes, additions, deletions },
+}: {
+  diff: Required<TreeNode>['diff']
+}) {
+  return (
+    <span className={'diff-stat-text'}>
+      {status !== 'modified' && (
+        <Icon
+          className={status}
+          type={
+            {
+              added: 'diffAdded',
+              ignored: 'diffIgnored',
+              // modified: 'diffModified', // hide modified icon
+              removed: 'diffRemoved',
+              renamed: 'diffRenamed',
+            }[status]
+          }
+        />
+      )}
+      {additions > 0 && (
+        <span className={'additions'}>{status === 'modified' ? `+${additions}` : additions}</span>
+      )}
+      {additions > 0 && deletions > 0 && '/'}
+      {deletions > 0 && (
+        <span className={'deletions'}>{status === 'modified' ? `-${deletions}` : deletions}</span>
+      )}
+    </span>
+  )
+}

src/components/FileExplorer.tsx

@@ -17,6 +17,8 @@ import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../containers/SideBarState'
+import { DiffStatGraph } from './DiffStatGraph'
+import { DiffStatText } from './DiffStatText'
 import { Icon } from './Icon'
 import { SearchMode, searchModes } from './searchModes'
 import { SizeObserver } from './SizeObserver'
@@ -46,17 +48,27 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     searched,
   } = props
   const {
-    value: { accessToken, compressSingletonFolder, searchMode, commentToggle },
+    value: {
+      accessToken,
+      compressSingletonFolder,
+      searchMode,
+      commentToggle,
+      restoreExpandedFolders,
+      showDiffInText,
+    },
   } = useConfigs()
 
   const onSearch = React.useCallback(
     (searchKey: string, searchMode: SearchMode) => {
       updateSearchKey(searchKey)
       if (visibleNodesGenerator) {
-        visibleNodesGenerator.search(searchModes[searchMode].getSearchParams(searchKey))
+        visibleNodesGenerator.search(
+          searchModes[searchMode].getSearchParams(searchKey),
+          restoreExpandedFolders,
+        )
       }
     },
-    [updateSearchKey, visibleNodesGenerator],
+    [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
   )
 
   const stateContext = useLoadedContext(SideBarStateContext)
@@ -74,8 +86,8 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
   }, [setUpTree, metaData, compressSingletonFolder, accessToken])
 
   React.useEffect(() => {
-    if (visibleNodes?.focusedNode) focusFileExplorer()
-  })
+    focusFileExplorer()
+  }, [])
 
   const renderActions: ((node: TreeNode) => React.ReactNode) | undefined = React.useMemo(() => {
     const renderGoToButton = (node: TreeNode): React.ReactNode => (
@@ -106,14 +118,28 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
         </button>
       ) : undefined
     const renderFileCommentAmounts = (node: TreeNode): React.ReactNode =>
-      node.comments !== undefined &&
-      node.comments > 0 && (
-        <span className={'node-item-comment'}>
-          <Icon type={'comment'} /> {node.comments > 9 ? '9+' : node.comments}
+      node.comments?.active ? (
+        <span
+          className={'node-item-comment'}
+          title={`${node.comments.active + node.comments.resolved} comments, ${
+            node.comments.active
+          } active, ${node.comments.resolved} resolved`}
+        >
+          <Icon type={'comment'} /> {node.comments.active > 9 ? '9+' : node.comments.active}
+        </span>
+      ) : null
+    const renderFileStatus = ({ diff }: TreeNode): React.ReactNode =>
+      diff && (
+        <span
+          className={'node-item-diff'}
+          title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
+        >
+          {showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
         </span>
       )
 
     const renders: ((node: TreeNode) => React.ReactNode)[] = []
+    renders.push(renderFileStatus)
     if (commentToggle) renders.push(renderFileCommentAmounts)
     if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton)
     if (searched) renders.push(renderGoToButton)
@@ -121,7 +147,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     return renders.length
       ? node => renders.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
       : undefined
-  }, [goTo, onSearch, searched, searchMode, commentToggle])
+  }, [goTo, onSearch, searched, searchMode, commentToggle, showDiffInText])
 
   const renderLabelText = React.useCallback(
     (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
@@ -167,13 +193,15 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                   )}
                   <SizeObserver className={'files'}>
                     {({ width = 0, height = 0 }) => (
-                      <ListView
-                        height={height}
-                        width={width}
-                        renderNodeContext={renderNodeContext}
-                        expandTo={expandTo}
-                        metaData={metaData}
-                      />
+                      <div className={'magic-size-container'}>
+                        <ListView
+                          height={height}
+                          width={width}
+                          renderNodeContext={renderNodeContext}
+                          expandTo={expandTo}
+                          metaData={metaData}
+                        />
+                      </div>
                     )}
                   </SizeObserver>
 

src/components/Icon.tsx

@@ -3,6 +3,12 @@ import {
   ChevronRightIcon as ChevronRight,
   ClockIcon as Clock,
   CommentIcon as Comment,
+  DiffAddedIcon as DiffAdded,
+  DiffIcon as Diff,
+  DiffIgnoredIcon as DiffIgnored,
+  DiffModifiedIcon as DiffModified,
+  DiffRemovedIcon as DiffRemoved,
+  DiffRenamedIcon as DiffRenamed,
   FileCodeIcon as FileCode,
   FileIcon as File,
   FileMediaIcon as FileMedia,
@@ -18,7 +24,7 @@ import {
   ReplyIcon as Reply,
   SearchIcon as Search,
   TabIcon as Tab,
-  XIcon as X,
+  XIcon as X
 } from '@primer/octicons-react'
 import * as React from 'react'
 import { cx } from 'utils/cx'
@@ -27,6 +33,12 @@ const iconToComponentMap = {
   Search,
   Clock,
   Comment,
+  Diff,
+  DiffAdded,
+  DiffIgnored,
+  DiffModified,
+  DiffRemoved,
+  DiffRenamed,
   Hourglass,
   Submodule,
   Grabber,
@@ -60,6 +72,12 @@ const typeToIconComponentMap: {
   pin: 'Pin',
   tab: 'Tab',
   gear: 'Gear',
+  diff: 'Diff',
+  diffAdded: 'DiffAdded',
+  diffIgnored: 'DiffIgnored',
+  diffModified: 'DiffModified',
+  diffRemoved: 'DiffRemoved',
+  diffRenamed: 'DiffRenamed',
   folder: 'ChevronRight',
   'chevron-down': 'ChevronDown',
   'go-to': 'Reply',

src/components/MetaBar.tsx

@@ -2,6 +2,8 @@ import { BranchName, Breadcrumb, Flex, Text } from '@primer/components'
 import { GitBranchIcon } from '@primer/octicons-react'
 import { platform } from 'platforms'
 import * as React from 'react'
+import { isOpenInNewWindowClick } from 'utils/general'
+import { loadWithPJAX } from 'utils/hooks/usePJAX'
 
 type Props = {
   metaData: MetaData
@@ -9,12 +11,14 @@ type Props = {
 
 export function MetaBar({ metaData }: Props) {
   const { userName, repoName, branchName } = metaData
-  const { repoUrl, userUrl } = platform.resolveUrlFromMetaData(metaData)
+  const { repoUrl, userUrl, branchUrl } = platform.resolveUrlFromMetaData(metaData)
   return (
     <>
       <Breadcrumb className={'user-and-repo'}>
-        <Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
-        <Breadcrumb.Item href={repoUrl}>
+        <Breadcrumb.Item className={'user-name'} href={userUrl}>
+          {userName}
+        </Breadcrumb.Item>
+        <Breadcrumb.Item className={'repo-name'} href={repoUrl}>
           <Text fontWeight="bolder">{repoName}</Text>
         </Breadcrumb.Item>
       </Breadcrumb>
@@ -22,7 +26,18 @@ export function MetaBar({ metaData }: Props) {
         <div className={'octicon-wrapper'}>
           <GitBranchIcon size="small" />
         </div>
-        <BranchName as="span" className={'branch-name'}>
+        <BranchName
+          href={branchUrl}
+          as="a"
+          className={'branch-name'}
+          onClick={e => {
+            if (isOpenInNewWindowClick(e)) return
+
+            e.preventDefault()
+            loadWithPJAX(branchUrl, e.currentTarget)
+          }}
+          {...platform.delegatePJAXProps?.()}
+        >
           {branchName || '...'}
         </BranchName>
       </Flex>

src/components/Node.tsx

@@ -1,8 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { cx } from 'utils/cx'
-import { OperatingSystems, os } from 'utils/general'
-import { getFileIconSrc, getFolderIconSrc } from 'utils/parseIconMapCSV'
+import { getFileIconURL, getFolderIconURL } from 'utils/parseIconMapCSV'
 import { Icon } from './Icon'
 
 function getIconType(node: TreeNode) {
@@ -42,21 +42,11 @@ export function Node({
   return (
     <a
       href={node.url}
-      onClick={event => {
-        if (
-          (os === OperatingSystems.macOS && event.metaKey) ||
-          (os === OperatingSystems.Linux && event.ctrlKey) ||
-          (os === OperatingSystems.Windows && event.ctrlKey)
-        ) {
-          // The default behavior, open in new tab
-          return
-        }
-
-        onClick(event, node)
-      }}
+      onClick={event => onClick(event, node)}
       className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded, compact })}
       style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }}
       title={node.path}
+      {...platform.delegatePJAXProps?.({ node })}
     >
       <div className={'node-item-label'}>
         <NodeItemIcon node={node} open={expanded} loading={loading} />
@@ -81,7 +71,7 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
   } = useConfigs()
 
   const src = React.useMemo(
-    () => (node.type === 'tree' ? getFolderIconSrc(node, open) : getFileIconSrc(node)),
+    () => (node.type === 'tree' ? getFolderIconURL(node, open) : getFileIconURL(node)),
     [open],
   )
 

src/components/ResizeHandler.tsx

@@ -1,10 +1,10 @@
 import { Icon } from 'components/Icon'
 import * as React from 'react'
-import { Size } from './SideBarBodyWrapper'
+import { Size2D } from './SideBarBodyWrapper'
 
 type Props = {
-  size: Size
-  onResize(size: Size): void
+  size: Size2D
+  onResize(size: Size2D): void
   onResetSize?(): void
   onResizeStateChange?(state: ResizeState): void
   style?: React.CSSProperties
@@ -12,55 +12,13 @@ type Props = {
 
 type ResizeState = 'idle' | 'resizing'
 
-export function HorizontalResizeHandler({
-  onResize,
-  onResetSize,
-  onResizeStateChange,
-  size,
-  style,
-}: Props) {
-  const pointerDown = React.useRef(false)
-  const startX = React.useRef(0)
-  const baseSize = React.useRef(size)
-  const latestPropSize = React.useRef(size)
-
-  React.useEffect(() => {
-    latestPropSize.current = size
-  }, [size])
-
-  const onPointerDown = React.useCallback(({ clientX }: React.MouseEvent) => {
-    startX.current = clientX
-    pointerDown.current = true
-    baseSize.current = latestPropSize.current
-    onResizeStateChange?.('resizing')
-  }, [])
-
-  React.useEffect(() => {
-    const onPointerMove = ({ clientX }: MouseEvent) => {
-      if (!pointerDown.current) return
-      const shift = clientX - startX.current
-      onResize(baseSize.current + shift)
-    }
-    window.addEventListener('mousemove', onPointerMove)
-    return () => window.removeEventListener('mousemove', onPointerMove)
-  }, [onResize])
-
-  React.useEffect(() => {
-    const onPointerUp = () => {
-      if (pointerDown.current) {
-        pointerDown.current = false
-        baseSize.current = latestPropSize.current
-        onResizeStateChange?.('idle')
-      }
-    }
-    window.addEventListener('mouseup', onPointerUp)
-    return () => window.removeEventListener('mouseup', onPointerUp)
-  }, [])
+export function ResizeHandler({ onResize, onResetSize, onResizeStateChange, size, style }: Props) {
+  const { onPointerDown } = useResizeHandler(size, onResize, { onResizeStateChange })
 
   return (
     <div
       className={'gitako-resize-handler'}
-      onMouseDown={onPointerDown}
+      onPointerDown={onPointerDown}
       onDoubleClick={onResetSize}
       style={style}
     >
@@ -68,3 +26,61 @@ export function HorizontalResizeHandler({
     </div>
   )
 }
+
+export function useResizeHandler(
+  size: Size2D,
+  onResize: (size: Size2D) => void,
+  {
+    onResizeStateChange,
+    onClick,
+  }: Partial<{
+    onResizeStateChange: (state: ResizeState) => void
+    onClick: (e: PointerEvent) => void
+  }> = {},
+) {
+  const pointerDown = React.useRef(false)
+  const pointerMoved = React.useRef(false)
+  const initialSizeRef = React.useRef([0, 0])
+  const baseSize = React.useRef(size)
+  const latestPropSize = React.useRef(size)
+
+  React.useEffect(() => {
+    latestPropSize.current = size
+  }, [size])
+
+  React.useEffect(() => {
+    const onPointerMove = ({ clientX, clientY }: PointerEvent) => {
+      if (!pointerDown.current) return
+      pointerMoved.current = true
+      const [x, y] = baseSize.current
+      onResize([x + clientX - initialSizeRef.current[0], y + clientY - initialSizeRef.current[1]])
+    }
+    window.addEventListener('pointermove', onPointerMove)
+    return () => window.removeEventListener('pointermove', onPointerMove)
+  }, [onResize])
+
+  React.useEffect(() => {
+    const onPointerUp = (e: PointerEvent) => {
+      if (pointerDown.current) {
+        pointerDown.current = false
+
+        if (!pointerMoved.current) onClick?.(e)
+        pointerMoved.current = false
+
+        baseSize.current = latestPropSize.current
+        onResizeStateChange?.('idle')
+      }
+    }
+    window.addEventListener('pointerup', onPointerUp)
+    return () => window.removeEventListener('pointerup', onPointerUp)
+  }, [])
+
+  const onPointerDown = React.useCallback(({ clientX, clientY }: React.PointerEvent) => {
+    pointerDown.current = true
+    initialSizeRef.current = [clientX, clientY]
+    baseSize.current = latestPropSize.current
+    onResizeStateChange?.('resizing')
+  }, [])
+
+  return { onPointerDown }
+}

src/components/SearchBar.tsx

@@ -15,6 +15,12 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
   const configs = useConfigs()
   const { searchMode } = configs.value
 
+  const toggleButtonDescription = `${
+    searchMode === 'regex'
+      ? 'Match file name with regular expression.'
+      : 'Match file path sequence with input.'
+  } Click to toggle.`
+
   return (
     <div className={'search-input-wrapper'}>
       <TextInput
@@ -36,7 +42,7 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
       <div className={`actions`}>
         <button
           className={`toggle-search-mode`}
-          title="Toggle search mode"
+          title={toggleButtonDescription}
           onClick={() => {
             const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
             configs.onChange({
@@ -44,7 +50,7 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
             })
             onSearch(value, newMode)
           }}
-          aria-label="Toggle search mode"
+          aria-label={toggleButtonDescription}
         >
           {searchMode === 'regex' ? '.*' : 'path'}
         </button>

src/components/SideBar.tsx

@@ -13,8 +13,7 @@ import * as DOMHelper from 'utils/DOMHelper'
 import { run } from 'utils/general'
 import { useCatchNetworkError } from 'utils/hooks/useCatchNetworkError'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
-import { loadWithPJAX, useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
-import { useProgressBar } from 'utils/hooks/useProgressBar'
+import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { SideBarErrorContext } from '../containers/ErrorContext'
 import { RepoContext } from '../containers/RepoContext'
@@ -98,7 +97,6 @@ export function SideBar() {
   platform.usePlatformHooks?.()
 
   usePJAX()
-  useProgressBar()
 
   // Hide sidebar when error due to auth but token is set  #128
   const hideSidebarOnInvalidToken: boolean =
@@ -128,6 +126,7 @@ export function SideBar() {
           })}
           baseSize={baseSize}
           onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
+          sizeVariableMountPoint={sidebarToggleMode === 'persistent' ? document.body : undefined}
         >
           <div className={'gitako-side-bar-body'}>
             <div
@@ -181,7 +180,6 @@ export function SideBar() {
                               metaData={metaData}
                               freeze={showSettings}
                               accessToken={accessToken}
-                              loadWithPJAX={loadWithPJAX}
                               config={configContext.value}
                               catchNetworkErrors={useCatchNetworkError()}
                             />

src/components/SideBarBodyWrapper.tsx

@@ -1,28 +1,36 @@
-import { HorizontalResizeHandler } from 'components/ResizeHandler'
+import { ResizeHandler } 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 { setCSSVariable } from 'utils/DOMHelper'
 import * as features from 'utils/features'
-import { useCSSVariable } from 'utils/hooks/useCSSVariable'
 
-export type Size = number
+type Size = number
+export type Size2D = [Size, Size]
 type Props = {
   baseSize: Size
   className?: string
   onLeave?: React.HTMLAttributes<HTMLElement>['onMouseLeave']
+  sizeVariableMountPoint?: HTMLElement
 }
 
 const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
 const MINIMAL_WIDTH = 240
 
+function getSafeSize(size: number, width: number) {
+  if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH) return width - MINIMAL_CONTENT_VIEWPORT_WIDTH
+  if (size < MINIMAL_WIDTH) return MINIMAL_WIDTH
+  return size
+}
+
 export function SideBarBodyWrapper({
   baseSize,
   className,
   children,
   onLeave,
+  sizeVariableMountPoint,
 }: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
   const configContext = useConfigs()
@@ -34,27 +42,50 @@ export function SideBarBodyWrapper({
 
   const { width } = useWindowSize()
   React.useEffect(() => {
-    if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-      setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-    else if (size < MINIMAL_WIDTH) setSize(MINIMAL_WIDTH)
+    const safeSize = getSafeSize(size, width)
+    if (safeSize !== size) setSize(safeSize)
   }, [width, size])
-
-  React.useEffect(() => {
-    setResizingState(true)
-    const timer = setTimeout(() => setResizingState(false), 100)
-    return () => clearTimeout(timer)
-  }, [width, size])
-
-  useCSSVariable('--gitako-width', `${size}px`)
+  const bodyWrapperRef = React.useRef<HTMLDivElement | null>(null)
   useDebounce(() => configContext.onChange({ sideBarWidth: size }), 100, [size])
 
-  const onResize = React.useCallback((size: number) => {
-    // do NOT merge this with the above similar effect, side bar will jump otherwise
-    if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-      setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-    else if (size < MINIMAL_WIDTH) setSize(MINIMAL_WIDTH)
-    else setSize(size)
-  }, [])
+  function apply(sizeVariableMountPoint: HTMLElement | undefined, size: number) {
+    if (sizeVariableMountPoint)
+      setCSSVariable(
+        '--gitako-width',
+        sizeVariableMountPoint ? `${size}px` : undefined,
+        sizeVariableMountPoint,
+      )
+
+    if (bodyWrapperRef.current)
+      setCSSVariable(
+        '--gitako-width',
+        sizeVariableMountPoint ? undefined : `${size}px`,
+        bodyWrapperRef.current,
+      )
+  }
+
+  // Update size using useEffect would cause delay
+  const onResize = React.useMemo(() => {
+    let sizeToApply: number,
+      applied = true
+    return ([size]: number[]) => {
+      // do NOT merge this with the above similar effect, side bar will jump otherwise
+      sizeToApply = getSafeSize(size, width)
+      setSize(sizeToApply)
+
+      if (applied) {
+        applied = false
+        requestAnimationFrame(() => {
+          applied = true
+          apply(sizeVariableMountPoint, sizeToApply)
+        })
+      }
+    }
+  }, [width, sizeVariableMountPoint])
+
+  React.useEffect(() => {
+    apply(sizeVariableMountPoint, size)
+  }, [sizeVariableMountPoint])
 
   const onMouseLeave = React.useCallback(
     e => {
@@ -64,17 +95,25 @@ export function SideBarBodyWrapper({
     [onLeave],
   )
 
+  const newLocal: [number, number] = React.useMemo(() => [size, size], [size])
   return (
-    <div className={cx('gitako-side-bar-body-wrapper', className)} onMouseLeave={onMouseLeave}>
+    <div
+      ref={bodyWrapperRef}
+      className={cx('gitako-side-bar-body-wrapper', className)}
+      onMouseLeave={onMouseLeave}
+    >
       <div className={'gitako-side-bar-body-wrapper-content'}>{children}</div>
       {features.resize && (
-        <HorizontalResizeHandler
+        <ResizeHandler
           onResize={onResize}
-          onResetSize={() => setSize(defaultConfigs.sideBarWidth)}
+          onResetSize={() => {
+            setSize(defaultConfigs.sideBarWidth)
+            apply(sizeVariableMountPoint, defaultConfigs.sideBarWidth)
+          }}
           onResizeStateChange={state => {
             blockLeaveRef.current = state === 'resizing'
           }}
-          size={size}
+          size={newLocal}
         />
       )}
     </div>

src/components/SizeObserver.tsx

@@ -19,16 +19,6 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
     height: undefined,
   })
 
-  const safeSetSize = React.useCallback(function safeSetSize(rect: DOMRectReadOnly) {
-    // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
-    requestAnimationFrame(() =>
-      setSize({
-        width: rect.width,
-        height: rect.height,
-      }),
-    )
-  }, [])
-
   React.useEffect(() => {
     if (ref.current) {
       if (features.resize) {
@@ -36,7 +26,7 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
           const entry = entries[0]
           if (!entry) return
           const rect = entry.contentRect
-          safeSetSize(rect)
+          setSize(rect)
         })
         observer.observe(ref.current)
         return () => observer.disconnect()

src/components/ToggleShowButton.tsx

@@ -1,33 +1,34 @@
-import iconSrc from 'assets/icons/Gitako.png'
+import iconURL from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { Icon } from './Icon'
+import { useResizeHandler } from './ResizeHandler'
 
 type Props = {
   error?: string | null
   className?: React.HTMLAttributes<HTMLButtonElement>['className']
   onHover?: React.HTMLAttributes<HTMLButtonElement>['onMouseEnter']
-} & Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick'>
+  onClick?: (e: PointerEvent) => void
+}
+
+const buttonHeight = 42
+
+function getSafeDistance(y: number, height: number) {
+  return Math.max(0, Math.min(y, height - buttonHeight))
+}
 
 export function ToggleShowButton({ error, className, onClick, onHover }: Props) {
   const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfigs()
   const [distance, setDistance] = React.useState(config.value.toggleButtonVerticalDistance)
   const { height } = useWindowSize()
-  const buttonHeight = 42
   React.useEffect(() => {
     // make sure it is inside viewport
-    if (height - buttonHeight < distance) {
-      setDistance(Math.max(0, height - buttonHeight))
-    }
+    const safeDistance = getSafeDistance(distance, height)
+    if (safeDistance !== distance) setDistance(safeDistance)
   }, [height, distance])
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.style.top = distance + 'px'
-    }
-  }, [distance])
 
   // updating context
   useDebounce(
@@ -36,42 +37,40 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
     [distance],
   )
 
-  const toggleIconMode = config.value.toggleButtonContent
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.style.top = distance + 'px'
+    }
+  }, [])
+  const { onPointerDown } = useResizeHandler(
+    [distance, distance],
+    ([, y]) => {
+      const distance = getSafeDistance(y, height)
+      setDistance(distance)
+      if (ref.current) {
+        ref.current.style.top = distance + 'px'
+      }
+    },
+    { onClick },
+  )
+
   return (
     <div ref={ref} className={cx('gitako-toggle-show-button-wrapper', className)}>
       <button
         className={cx('gitako-toggle-show-button', {
           error,
         })}
-        onClick={onClick}
-        onMouseEnter={onHover}
-        draggable
-        onDragStart={event => {
-          hideDragPreview(event)
-        }}
-        onDrag={e => {
-          if (e.clientY !== 0) {
-            // It will be 0 when release pointer
-            setDistance(e.clientY - buttonHeight / 2)
-          }
-        }}
+        onPointerEnter={onHover}
+        onPointerDown={onPointerDown}
         title={'Gitako (draggable)'}
       >
-        {toggleIconMode === 'octoface' ? (
+        {config.value.toggleButtonContent === 'octoface' ? (
           <Icon className={'octoface-icon'} type={'octoface'} />
         ) : (
-          <img className={'tentacle'} draggable={false} src={iconSrc} />
+          <img className={'tentacle'} draggable={false} src={iconURL} />
         )}
       </button>
       {error && <span className={'error-message'}>{error}</span>}
     </div>
   )
 }
-
-function hideDragPreview(event: React.DragEvent<HTMLButtonElement>) {
-  const img = new Image()
-  const EMPTY_IMAGE_BASE64 =
-    'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
-  img.src = EMPTY_IMAGE_BASE64
-  event.dataTransfer.setDragImage(img, 0, 0)
-}

src/components/settings/FileTreeSettings.tsx

@@ -76,6 +76,13 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
           tooltip: 'Merge folders and their only child folder to make UI more compact.',
         }}
       />
+      <SimpleToggleField
+        field={{
+          key: 'restoreExpandedFolders',
+          label: 'Restore expanded folders',
+          tooltip: 'Folders will be expanded again when clear search input',
+        }}
+      />
       <SimpleToggleField
         field={{
           key: 'commentToggle',
@@ -83,6 +90,13 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
           tooltip: 'Show number of comments next to file names in Pull Requests.',
         }}
       />
+      <SimpleToggleField
+        field={{
+          key: 'showDiffInText',
+          label: 'Show PR file diff in text',
+          tooltip: 'Glance diff in a more precise way.',
+        }}
+      />
       <SimpleToggleField
         field={{
           key: 'compactFileTree',

src/components/settings/SettingsBar.tsx

@@ -73,9 +73,13 @@ function SettingsBarContent() {
             {reloadHint && <div className={'hint'}>{reloadHint}</div>}
           </SettingsSection>
         )}
-        <SettingsSection title={'Feedback'}>
+        <SettingsSection title={'Talk to the author'}>
           <a href="https://github.com/EnixCoda/Gitako/issues" target="_blank">
-            Report bug / Request feature.
+            Report bug
+          </a>
+          {' / '}
+          <a href="https://github.com/EnixCoda/Gitako/discussions" target="_blank">
+            Discuss feature
           </a>
         </SettingsSection>
       </div>

src/driver/core/FileExplorer.ts

@@ -3,7 +3,8 @@ 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 { isOpenInNewWindowClick, OperatingSystems, os } from 'utils/general'
+import { loadWithPJAX } from 'utils/hooks/usePJAX'
 import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
 export type Props = {
@@ -11,7 +12,6 @@ export type Props = {
   freeze: boolean
   accessToken: string | undefined
   config: Config
-  loadWithPJAX(url: string): void
   catchNetworkErrors: <T>(fn: () => T) => Promise<T | undefined>
 }
 
@@ -49,158 +49,146 @@ export const setUpTree: BoundMethodCreator<
         config: Pick<Config, 'compressSingletonFolder' | 'accessToken'>
       },
   ]
-> = dispatch => ({ stateContext, metaData, config }) => {
-  const {
-    props: { catchNetworkErrors },
-  } = dispatch.get()
+> =
+  dispatch =>
+  ({ stateContext, metaData, config }) => {
+    const {
+      props: { catchNetworkErrors },
+    } = dispatch.get()
 
-  catchNetworkErrors(async () => {
-    const { userName, repoName, branchName } = metaData
+    catchNetworkErrors(async () => {
+      const { userName, repoName, branchName } = metaData
 
-    stateContext.onChange('tree-loading')
-    const { root: treeRoot, defer = false } = await platform.getTreeData(
-      {
-        branchName: branchName,
-        userName,
-        repoName,
-      },
-      '/',
-      true,
-      config.accessToken,
-    )
+      stateContext.onChange('tree-loading')
+      const { root: treeRoot, defer = false } = await platform.getTreeData(
+        {
+          branchName: branchName,
+          userName,
+          repoName,
+        },
+        '/',
+        true,
+        config.accessToken,
+      )
 
-    stateContext.onChange('tree-rendering')
-    dispatch.set({ defer })
+      stateContext.onChange('tree-rendering')
+      dispatch.set({ defer })
 
-    const visibleNodesGenerator = new VisibleNodesGenerator({
-      root: treeRoot,
-      compress: config.compressSingletonFolder,
-      async getTreeData(path) {
-        const { root } = await platform.getTreeData(metaData, path, false, config.accessToken)
-        return root
-      },
-    })
-    dispatch.set({ visibleNodesGenerator })
-    visibleNodesGenerator.onUpdate(visibleNodes => dispatch.set({ visibleNodes }))
-
-    if (platform.shouldExpandAll?.()) {
-      const unsubscribe = visibleNodesGenerator.onUpdate(visibleNodes => {
-        unsubscribe()
-        visibleNodes.nodes.forEach(node =>
-          dispatch.call(toggleNodeExpansion, node, { recursive: true }),
-        )
+      const visibleNodesGenerator = new VisibleNodesGenerator({
+        root: treeRoot,
+        compress: config.compressSingletonFolder,
+        async getTreeData(path) {
+          const { root } = await platform.getTreeData(metaData, path, false, config.accessToken)
+          return root
+        },
       })
-    } else {
-      const targetPath = platform.getCurrentPath(metaData.branchName)
-      if (targetPath) dispatch.call(goTo, targetPath)
-    }
+      dispatch.set({ visibleNodesGenerator })
+      visibleNodesGenerator.onUpdate(visibleNodes => dispatch.set({ visibleNodes }))
 
-    stateContext.onChange('tree-rendered')
-  })
-}
+      if (platform.shouldExpandAll?.()) {
+        const unsubscribe = visibleNodesGenerator.onUpdate(visibleNodes => {
+          unsubscribe()
+          visibleNodes.nodes.forEach(node =>
+            dispatch.call(toggleNodeExpansion, node, { recursive: true }),
+          )
+        })
+      } else {
+        const targetPath = platform.getCurrentPath(metaData.branchName)
+        if (targetPath) dispatch.call(goTo, targetPath)
+      }
 
-export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
-  const {
-    state: { searched, visibleNodes },
-    props: { loadWithPJAX },
-  } = dispatch.get()
-  if (!visibleNodes) return
-  const { nodes, focusedNode, expandedNodes } = visibleNodes
-  function handleVerticalMove(index: number) {
-    if (0 <= index && index < nodes.length) {
-      DOMHelper.focusFileExplorer()
-      dispatch.call(focusNode, nodes[index])
-    } else {
-      DOMHelper.focusSearchInput()
-      dispatch.call(focusNode, null)
-    }
+      stateContext.onChange('tree-rendered')
+    })
   }
 
-  const { key } = event
-  // prevent document body scrolling if the keypress results in Gitako action
-  let muteEvent = true
-  if (focusedNode) {
-    const focusedNodeIndex = nodes.findIndex(node => node.path === focusedNode.path)
-    switch (key) {
-      case 'ArrowUp':
-        // focus on previous node
-        handleVerticalMove(focusedNodeIndex - 1)
-        break
+export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent<HTMLElement>]> =
+  dispatch => event => {
+    const {
+      state: { searched, visibleNodes },
+    } = dispatch.get()
+    if (!visibleNodes) return
+    const { nodes, focusedNode, expandedNodes } = visibleNodes
+    function handleVerticalMove(index: number) {
+      if (0 <= index && index < nodes.length) {
+        DOMHelper.focusFileExplorer()
+        dispatch.call(focusNode, nodes[index])
+      } else {
+        DOMHelper.focusSearchInput()
+        dispatch.call(focusNode, null)
+      }
+    }
 
-      case 'ArrowDown':
-        // focus on next node
-        handleVerticalMove(focusedNodeIndex + 1)
-        break
-
-      case 'ArrowLeft':
-        if (wouldBlockHistoryNavigation(event)) {
-          muteEvent = false
+    const { key } = event
+    // prevent document body scrolling if the keypress results in Gitako action
+    let muteEvent = true
+    if (focusedNode) {
+      const focusedNodeIndex = nodes.findIndex(node => node.path === focusedNode.path)
+      switch (key) {
+        case 'ArrowUp':
+          // focus on previous node
+          handleVerticalMove(focusedNodeIndex - 1)
           break
-        }
-        if (expandedNodes.has(focusedNode.path)) {
-          dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
-        } else {
-          // go forward to the start of the list, find the closest node with lower depth
-          const parentNode = getVisibleParentNode(nodes, focusedNode)
-          if (parentNode) {
-            dispatch.call(focusNode, parentNode)
+
+        case 'ArrowDown':
+          // focus on next node
+          handleVerticalMove(focusedNodeIndex + 1)
+          break
+
+        case 'ArrowLeft':
+          if (wouldBlockHistoryNavigation(event)) {
+            muteEvent = false
+            break
           }
-        }
-        break
-
-      // 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)) {
-            const nextNode = nodes[focusedNodeIndex + 1]
-            if (focusedNode.contents?.includes(nextNode)) {
-              dispatch.call(focusNode, nextNode)
-            }
+            dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
           } else {
-            dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
+            // go forward to the start of the list, find the closest node with lower depth
+            const parentNode = getVisibleParentNode(nodes, focusedNode)
+            if (parentNode) {
+              dispatch.call(focusNode, parentNode)
+            }
           }
-        } else if (focusedNode.type === 'blob') {
-          if (focusedNode.url) loadWithPJAX(focusedNode.url)
-        } else if (focusedNode.type === 'commit') {
-          window.open(focusedNode.url)
-        }
-        break
-      case 'Enter':
-        // expand node or redirect to file page
-        if (searched) {
-          dispatch.call(goTo, focusedNode.path.split('/'))
-        } else {
+          break
+
+        // 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') {
-            dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
+            if (expandedNodes.has(focusedNode.path)) {
+              const nextNode = nodes[focusedNodeIndex + 1]
+              if (focusedNode.contents?.includes(nextNode)) {
+                dispatch.call(focusNode, nextNode)
+              }
+            } else {
+              dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
+            }
           } else if (focusedNode.type === 'blob') {
-            if (focusedNode.url) loadWithPJAX(focusedNode.url)
+            const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
+            if (focusedNodeElement && focusedNode.url)
+              loadWithPJAX(focusedNode.url, focusedNodeElement)
           } else if (focusedNode.type === 'commit') {
             window.open(focusedNode.url)
           }
-        }
-        break
-      default:
-        muteEvent = false
-    }
-    if (muteEvent) {
-      event.preventDefault()
-    }
-  } else {
-    // now search input is focused
-    if (nodes.length) {
-      switch (key) {
-        case 'ArrowDown':
-          DOMHelper.focusFileExplorer()
-          dispatch.call(focusNode, nodes[0])
           break
-        case 'ArrowUp':
-          DOMHelper.focusFileExplorer()
-          dispatch.call(focusNode, nodes[nodes.length - 1])
+        case 'Enter':
+          // expand node or redirect to file page
+          if (searched) {
+            dispatch.call(goTo, focusedNode.path.split('/'))
+          } else {
+            if (focusedNode.type === 'tree') {
+              dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
+            } else if (focusedNode.type === 'blob') {
+              const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
+              if (focusedNodeElement && focusedNode.url)
+                loadWithPJAX(focusedNode.url, focusedNodeElement)
+            } else if (focusedNode.type === 'commit') {
+              window.open(focusedNode.url)
+            }
+          }
           break
         default:
           muteEvent = false
@@ -208,9 +196,27 @@ export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch
       if (muteEvent) {
         event.preventDefault()
       }
+    } else {
+      // now search input is focused
+      if (nodes.length) {
+        switch (key) {
+          case 'ArrowDown':
+            DOMHelper.focusFileExplorer()
+            dispatch.call(focusNode, nodes[0])
+            break
+          case 'ArrowUp':
+            DOMHelper.focusFileExplorer()
+            dispatch.call(focusNode, nodes[nodes.length - 1])
+            break
+          default:
+            muteEvent = false
+        }
+        if (muteEvent) {
+          event.preventDefault()
+        }
+      }
     }
   }
-}
 
 export const onFocusSearchBar: BoundMethodCreator = dispatch => () => dispatch.call(focusNode, null)
 
@@ -231,18 +237,17 @@ export const goTo: BoundMethodCreator<[string[]]> = dispatch => path => {
   })
 }
 
-export const setExpand: BoundMethodCreator<[TreeNode, boolean]> = dispatch => async (
-  node,
-  expand = false,
-) => {
-  const {
-    state: { visibleNodesGenerator },
-  } = dispatch.get()
-  if (!visibleNodesGenerator) return
+export const setExpand: BoundMethodCreator<[TreeNode, boolean]> =
+  dispatch =>
+  async (node, expand = false) => {
+    const {
+      state: { visibleNodesGenerator },
+    } = dispatch.get()
+    if (!visibleNodesGenerator) return
 
-  await visibleNodesGenerator.setExpand(node, expand)
-  dispatch.call(focusNode, node)
-}
+    await visibleNodesGenerator.setExpand(node, expand)
+    dispatch.call(focusNode, node)
+  }
 
 export const toggleNodeExpansion: BoundMethodCreator<
   [
@@ -251,30 +256,35 @@ export const toggleNodeExpansion: BoundMethodCreator<
       recursive?: boolean
     },
   ]
-> = dispatch => async (node, { recursive = false }) => {
-  const {
-    state: { visibleNodesGenerator },
-  } = dispatch.get()
-  if (!visibleNodesGenerator) return
+> =
+  dispatch =>
+  async (node, { recursive = false }) => {
+    const {
+      state: { visibleNodesGenerator },
+    } = dispatch.get()
+    if (!visibleNodesGenerator) return
 
-  visibleNodesGenerator.focusNode(node)
-  await visibleNodesGenerator.toggleExpand(node, recursive)
-}
+    if (node.type === 'tree') {
+      visibleNodesGenerator.focusNode(node)
+      await visibleNodesGenerator.toggleExpand(node, recursive)
+    }
+  }
 
-export const focusNode: BoundMethodCreator<[TreeNode | null]> = dispatch => (
-  node: TreeNode | null,
-) => {
-  const {
-    state: { visibleNodesGenerator },
-  } = dispatch.get()
-  if (!visibleNodesGenerator) return
+export const focusNode: BoundMethodCreator<[TreeNode | null]> =
+  dispatch => (node: TreeNode | null) => {
+    const {
+      state: { visibleNodesGenerator },
+    } = dispatch.get()
+    if (!visibleNodesGenerator) return
 
-  visibleNodesGenerator.focusNode(node)
-}
+    visibleNodesGenerator.focusNode(node)
+  }
 
 export const onNodeClick: BoundMethodCreator<
   [React.MouseEvent<HTMLElement, MouseEvent>, TreeNode]
 > = dispatch => (event, node) => {
+  if (isOpenInNewWindowClick(event)) return
+
   const preventDefault = !(node.type === 'blob' && node.url?.includes('#'))
   if (preventDefault) event.preventDefault()
 
@@ -289,12 +299,9 @@ export const onNodeClick: BoundMethodCreator<
       (recursiveToggleFolder === 'alt' && event.altKey)
     dispatch.call(toggleNodeExpansion, node, { recursive })
   } else if (node.type === 'blob') {
-    const {
-      props: { loadWithPJAX },
-    } = dispatch.get()
     dispatch.call(focusNode, node)
     if (node.url && !node.url.includes('#')) {
-      loadWithPJAX(node.url)
+      loadWithPJAX(node.url, event.currentTarget)
     }
   } else if (node.type === 'commit') {
     if (node.url) {
@@ -316,6 +323,10 @@ export const expandTo: BoundMethodCreator<[string[]]> = dispatch => async curren
 }
 
 function wouldBlockHistoryNavigation(event: React.KeyboardEvent) {
-  // Alt + left/right is usually history navigation shortcut on OS other than macOS
-  return os !== OperatingSystems.macOS && event.altKey
+  // Cmd + left/right on macOS
+  // Alt + left/right on other OSes
+  return (
+    (os === OperatingSystems.macOS && event.metaKey) ||
+    (os !== OperatingSystems.macOS && event.altKey)
+  )
 }

src/global.d.ts

@@ -16,7 +16,16 @@ type TreeNode = {
   url?: string
   sha?: string
   accessDenied?: boolean
-  comments?: number
+  comments?: {
+    active: number,
+    resolved: number,
+  }
+  diff?: {
+    status: 'modified' | 'added' | 'removed' | 'renamed'
+    additions: number
+    deletions: number
+    changes: number
+  }
 }
 
 type IO<T, ChangeT = T> = {

src/platforms/GitHub/API.ts

@@ -116,11 +116,11 @@ export async function getPullComments(
   return await request(url, { accessToken })
 }
 
-export async function getPullPageDocument(
+export async function getPullPageDocuments(
   userName: string,
   repoName: string,
   pullId: string, // not used
-): Promise<Document> {
+): Promise<Document[]> {
   // Response of this API contains view of few files but is not complete.
   const filesDOM = await getDOM(
     `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
@@ -137,11 +137,26 @@ export async function getPullPageDocument(
   const search = new URLSearchParams(window.location.search)
   search.set('sha1', baseSHA)
   search.set('sha2', headSHA)
-  return await getDOM(`https://${window.location.host}/${userName}/${repoName}/diffs?${search}`)
+  let lines = 0
+  const diffsDOMs: Document[] = []
+  while (true) {
+    search.set('lines', lines.toString())
+    const diffsDOM = await getDOM(
+      `https://${window.location.host}/${userName}/${repoName}/diffs?${search}`,
+    )
+    diffsDOMs.push(diffsDOM)
 
-  async function getDOM(url: string) {
-    return new DOMParser().parseFromString(await (await fetch(url)).text(), 'text/html')
+    if (diffsDOM.querySelector('.js-diff-progressive-container')) {
+      lines += 3000
+    } else {
+      break
+    }
   }
+  return diffsDOMs
+}
+
+async function getDOM(url: string) {
+  return new DOMParser().parseFromString(await (await fetch(url)).text(), 'text/html')
 }
 
 export async function getBlobData(

src/platforms/GitHub/DOMHelper.ts

@@ -2,13 +2,13 @@ import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
 import { $ } from 'utils/DOMHelper'
-import { renderReact } from 'utils/general'
+import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
 export function resolveMeta(): Partial<MetaData> {
   const metaData = {
-    userName: $('[itemprop="author"]', e => e.textContent?.trim()),
-    repoName: $('[itemprop="name"]', e => e.textContent?.trim()),
+    userName: $('[itemprop="author"] > a[rel="author"]', e => e.textContent?.trim()),
+    repoName: $('[itemprop="name"] > a[href]', e => e.textContent?.trim()),
     branchName: getCurrentBranch(true),
   }
   if (!metaData.userName || !metaData.repoName) {
@@ -148,21 +148,28 @@ export function attachCopyFileBtn() {
   }
 
   if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
-    // the button group in file content header
-    const buttonGroupSelector = '.repository-content .Box-header .BtnGroup'
-    const buttonGroups = document.querySelectorAll(buttonGroupSelector)
+    let buttonGroup: HTMLElement | null = null
 
-    if (buttonGroups.length === 0) {
-      raiseError(new Error(`No button groups found`))
+    if (!buttonGroup) {
+      const rawUrlButtonSelector = '#raw-url'
+      const $buttonGroup = document.querySelector(rawUrlButtonSelector)?.parentElement
+      if ($buttonGroup) buttonGroup = $buttonGroup
     }
 
-    removeButtons() // prevent duplicated buttons
+    if (!buttonGroup) {
+      const buttonGroupSelector = '.repository-content .Box-header .BtnGroup'
+      const buttonGroups = document.querySelectorAll(buttonGroupSelector)
+      const $buttonGroup = buttonGroups[buttonGroups.length - 1]
+      if ($buttonGroup) buttonGroup = $buttonGroup as HTMLElement
+    }
 
-    buttonGroups.forEach(async buttonGroup => {
-      if (!buttonGroup.lastElementChild) return
-      const button = await renderReact(React.createElement(CopyFileButton))
-      if (button instanceof HTMLElement) {
-        buttonGroup.appendChild(button)
+    run(async () => {
+      if (!buttonGroup) raiseError(new Error(`No button groups found`))
+      else if (!buttonGroup.lastElementChild) return
+      else {
+        removeButtons() // prevent duplicated buttons
+        const button = await renderReact(React.createElement(CopyFileButton))
+        if (button instanceof HTMLElement) buttonGroup.appendChild(button)
       }
     })
   }

src/platforms/GitHub/Request.d.ts

@@ -37,6 +37,7 @@ declare namespace GitHubAPI {
 
   type PullComment = {
     path: string
+    position: number | null
     pull_request_review_id: number
     id: number
     node_id: string

src/platforms/GitHub/hooks/useGitHubCodeFold.tsx

@@ -11,7 +11,7 @@ const tableSelector = `.blob-wrapper table`
 const selectorOfLineNumber = `.blob-num`
 const selectorOfLineContent = `.blob-code`
 
-const theCSSClassForToggleElementOnActive = 'active'
+const theCSSClassForToggleElementOnActive = 'gitako-code-fold-active'
 function init() {
   type LineNumber = number // alias
   const blocks: LineNumber[] = [] // startLine -> exclusiveEndLine
@@ -87,6 +87,7 @@ function init() {
     if (!end) return
 
     const toggleElement = document.createElement('div')
+    toggleElement.setAttribute('title', 'Code Folding by Gitako')
     toggleElement.setAttribute('role', 'button')
     toggleElement.classList.add(theCSSClassForToggleElement)
 

src/platforms/GitHub/index.ts

@@ -1,6 +1,7 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
+import { run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -105,6 +106,11 @@ function resolvePageScope(defaultBranchName?: string) {
 
 const pathSHAMap = new Map<string, string>()
 
+// Try lookup PJAX containers, #js-repo-pjax-container could exist while #repo-content-pjax-container does not.
+const pjaxContainerSelector = ['#repo-content-pjax-container', '#js-repo-pjax-container'].find(
+  selector => document.querySelector(selector),
+)
+
 export const GitHub: Platform = {
   isEnterprise,
   resolvePartialMetaData() {
@@ -142,113 +148,24 @@ export const GitHub: Platform = {
   async getDefaultBranchName({ userName, repoName }, accessToken) {
     return (await API.getRepoMeta(userName, repoName, accessToken)).default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
+    const userUrl = `https://${window.location.host}/${userName}`
+    const pullId = URLHelper.isInPullPage()
+    const branchUrl = pullId ? `${repoUrl}/pull/${pullId}` : `${repoUrl}/tree/${branchName}`
     return {
-      repoUrl: `https://${window.location.host}/${userName}/${repoName}`,
-      userUrl: `https://${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path = '/', recursive, accessToken) {
-    const { userName, repoName, branchName } = metaData
-
     const pullId = URLHelper.isInPullPage()
     if (pullId) {
-      // https://developer.github.com/v3/pulls/#list-pull-requests-files
-      const GITHUB_API_RESPONSE_LENGTH_LIMIT = 3000
-      const GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT = 30
-      const MAX_PAGE = Math.ceil(
-        GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT,
-      )
-      let page = 1
-      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
-      if (treeData.length < count) {
-        const restPages = []
-        while (page * GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT < count) {
-          restPages.push(++page)
-        }
-        if (page > MAX_PAGE) {
-          // TODO: hint
-        }
-        const moreFiles = await Promise.all(
-          restPages.map(page => API.getPullTreeData(userName, repoName, pullId, page, accessToken)),
-        )
-        treeData.push(...([] as GitHubAPI.PullTreeData).concat(...moreFiles))
-      }
-
-      const creator = await createPullFileResolver(userName, repoName, pullId)
-
-      const nodes: TreeNode[] = treeData.map(item => ({
-        path: item.filename || '',
-        type: 'blob',
-        name: item.filename?.replace(/^.*\//, '') || '',
-        url: `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${
-          window.location.search
-        }#${creator(item.filename) || ''}`,
-        sha: item.sha,
-        comments: commentData?.filter(comment => item.filename === comment.path).length,
-      }))
-
-      const root = processTree(nodes)
-      return { root }
+      return await getPullRequestTreeData(metaData, pullId, accessToken)
     }
 
-    const sha = path === '/' ? branchName : pathSHAMap.get(path)
-    if (!sha) throw new Error(`No sha for path "${path}"`)
-    const treeData = await API.getTreeData(userName, repoName, sha, recursive, accessToken)
-
-    // remove deep items
-    if (treeData.truncated) {
-      if (treeData.tree.some(item => item.path.includes('/')))
-        treeData.tree = treeData.tree.filter(item => !item.path.includes('/'))
-    }
-
-    // update map
-    if (path !== '/' || treeData.truncated) {
-      if (path !== '/') {
-        function sanitizePath(path: string) {
-          return path.replace(/\/\/+/g, '/').replace(/^\/|\/$/g, '') || '/'
-        }
-        treeData.tree.forEach(item => {
-          item.path = sanitizePath(`${path}/${item.path}`)
-        })
-      }
-      treeData.tree.forEach(item => {
-        pathSHAMap.set(item.path, item.sha)
-      })
-    }
-
-    const root = processTree(
-      treeData.tree.map(item => ({
-        path: item.path || '',
-        type: item.type || 'blob',
-        name: item.path?.replace(/^.*\//, '') || '',
-        url:
-          item.url && item.type && item.path
-            ? getUrlForRedirect(userName, repoName, branchName, item.type, item.path)
-            : undefined,
-        contents: item.type === 'tree' ? [] : undefined,
-        sha: item.sha,
-      })),
-    )
-
-    const gitModules = root.contents?.find(
-      item => item.type === 'blob' && item.name === '.gitmodules',
-    )
-    if (gitModules?.sha) {
-      const blobData = await API.getBlobData(userName, repoName, gitModules.sha, accessToken)
-
-      if (blobData && blobData.encoding === 'base64' && blobData.content) {
-        await resolveGitModules(root, Base64.decode(blobData.content))
-      }
-    }
-
-    return { root, defer: treeData.truncated }
+    return await getRepositoryTreeData(metaData, path, recursive, accessToken)
   },
   shouldShow() {
     return Boolean(DOMHelper.isInCodePage() || URLHelper.isInPullPage())
@@ -257,8 +174,14 @@ export const GitHub: Platform = {
     return Boolean(URLHelper.isInPullPage())
   },
   getCurrentPath(branchName) {
-    if (URLHelper.parse().path.length) {
-      return DOMHelper.getPath()
+    const pathFromURL = URLHelper.parse().path.join('/')
+    if (pathFromURL.length) {
+      if (branchName && pathFromURL.startsWith(branchName + '/')) {
+        return pathFromURL.replace(branchName + '/', '').split('/')
+      } else {
+        // This would fail before PJAX replace, but works well when no branchName, e.g. first load
+        return DOMHelper.getPath()
+      }
     } else {
       return []
     }
@@ -280,13 +203,161 @@ export const GitHub: Platform = {
     useGitHubAttachCopySnippetButton(copySnippetButton)
     useGitHubCodeFold(codeFolding)
   },
+  delegatePJAXProps(options) {
+    if (!options?.node || options.node.type === 'blob')
+      return {
+        'data-pjax': pjaxContainerSelector,
+        onClick() {
+          /* Overwriting default onClick */
+        },
+      }
+  },
+  loadWithPJAX(url, element) {
+    element.click()
+  },
 }
 
-async function createPullFileResolver(userName: string, repoName: string, pullId: string) {
-  const doc = await API.getPullPageDocument(userName, repoName, pullId)
+function sanitizePath(path: string) {
+  return path.replace(/\/\/+/g, '/').replace(/^\/|\/$/g, '') || '/'
+}
 
-  return (path: string) => {
-    const id = doc.querySelector(`*[data-path^="${path}"]`)?.parentElement?.id
-    return id
+async function getRepositoryTreeData(
+  { userName, repoName, branchName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  path: string,
+  recursive: boolean | undefined,
+  accessToken: string | undefined,
+) {
+  const sha = path === '/' ? branchName : pathSHAMap.get(path)
+  if (!sha) throw new Error(`No sha for path "${path}"`)
+  const treeData = await API.getTreeData(userName, repoName, sha, recursive, accessToken)
+
+  // remove deep items
+  if (treeData.truncated) {
+    if (treeData.tree.some(item => item.path.includes('/')))
+      treeData.tree = treeData.tree.filter(item => !item.path.includes('/'))
   }
+
+  // update map
+  if (path !== '/' || treeData.truncated) {
+    if (path !== '/') {
+      treeData.tree.forEach(item => {
+        item.path = sanitizePath(`${path}/${item.path}`)
+      })
+    }
+    treeData.tree.forEach(item => {
+      pathSHAMap.set(item.path, item.sha)
+    })
+  }
+
+  const root = processTree(
+    treeData.tree.map(item => ({
+      path: item.path || '',
+      type: item.type || 'blob',
+      name: item.path?.replace(/^.*\//, '') || '',
+      url:
+        item.url && item.type && item.path
+          ? getUrlForRedirect(userName, repoName, branchName, item.type, item.path)
+          : undefined,
+      contents: item.type === 'tree' ? [] : undefined,
+      sha: item.sha,
+    })),
+  )
+
+  const gitModules = root.contents?.find(
+    item => item.type === 'blob' && item.name === '.gitmodules',
+  )
+  if (gitModules?.sha) {
+    const blobData = await API.getBlobData(userName, repoName, gitModules.sha, accessToken)
+
+    if (blobData && blobData.encoding === 'base64' && blobData.content) {
+      await resolveGitModules(root, Base64.decode(blobData.content))
+    }
+  }
+
+  return { root, defer: treeData.truncated }
+}
+
+async function getPullRequestTreeData(
+  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  pullId: string,
+  accessToken?: string,
+) {
+  // https://developer.github.com/v3/pulls/#list-pull-requests-files
+  const GITHUB_API_RESPONSE_LENGTH_LIMIT = 3000
+  const GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT = 30
+  const MAX_PAGE = Math.ceil(
+    GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT,
+  )
+  let page = 1
+  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
+  if (treeData.length < count) {
+    const restPages = []
+    while (page * GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT < count) {
+      restPages.push(++page)
+    }
+    if (page > MAX_PAGE) {
+      // TODO: hint
+    }
+    const moreFiles = await Promise.all(
+      restPages.map(page => API.getPullTreeData(userName, repoName, pullId, page, accessToken)),
+    )
+    treeData.push(...([] as GitHubAPI.PullTreeData).concat(...moreFiles))
+  }
+
+  const docs = await API.getPullPageDocuments(userName, repoName, pullId)
+  // query all elements at once to make getFileElementHash run faster
+  const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
+  const getFileElementHash = (path: string) => {
+    let e
+    for (const group of elementsHavePath) {
+      for (let i = 0; i < group.length; i++) {
+        const element = group[i]
+        if (element.getAttribute('data-path')?.startsWith(path)) {
+          e = element
+          break
+        }
+      }
+      if (e) break
+    }
+    return e?.parentElement?.id
+  }
+
+  const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
+  const nodes: TreeNode[] = treeData.map(
+    ({ filename, sha, additions, deletions, changes, status }) => ({
+      path: filename || '',
+      type: 'blob',
+      name: filename?.replace(/^.*\//, '') || '',
+      url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
+      sha: sha,
+      comments: run(() => {
+        const comments = commentData?.filter(comment => filename === comment.path)
+        if (comments?.length)
+          return {
+            active: comments.filter(comment => comment.position !== null).length,
+            resolved: comments.filter(comment => comment.position === null).length,
+          }
+      }),
+      diff: {
+        status,
+        additions,
+        deletions,
+        changes,
+      },
+    }),
+  )
+
+  const root = processTree(nodes)
+  return { root }
+}
+
+function formatHash(hash?: string) {
+  if (hash) return '#' + hash
+  return ''
 }

src/platforms/Gitea/index.ts

@@ -1,4 +1,5 @@
 import { resolveGitModules } from 'utils/gitSubmodule'
+import { useProgressBar } from 'utils/hooks/useProgressBar'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -105,10 +106,14 @@ export const Gitea: Platform = {
     const data = await API.getRepoMeta(userName, repoName, accessToken)
     return data.default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`
+    const userUrl = `${window.location.protocol}//${window.location.host}/${userName}`
+    const branchUrl = `${repoUrl}/src/branch/${branchName}`
     return {
-      repoUrl: `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`,
-      userUrl: `${window.location.protocol}//${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path, recursive, accessToken) {
@@ -165,4 +170,7 @@ export const Gitea: Platform = {
   getOAuthLink() {
     return `${window.location.protocol}//${window.location.host}/api/v1/user/applications/oauth2`
   },
+  usePlatformHooks() {
+    useProgressBar()
+  },
 }

src/platforms/Gitee/index.ts

@@ -3,6 +3,7 @@ import { platform } from 'platforms'
 import * as React from 'react'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useProgressBar } from 'utils/hooks/useProgressBar'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -82,7 +83,7 @@ export const Gitee: Platform = {
     if (DOMHelper.isInCodePage()) {
       // not working well with non-branch blob
       // cannot handle '/' split branch name, should not use when possibly on branch page
-      branchName = DOMHelper.getCurrentBranch() || URLHelper.parseSHA()
+      branchName = (DOMHelper.getCurrentBranch() || URLHelper.parseSHA())?.trim()
     }
 
     const { userName, repoName, type } = URLHelper.parse()
@@ -102,10 +103,14 @@ export const Gitee: Platform = {
     const data = await API.getRepoMeta(userName, repoName, accessToken)
     return data.default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
+    const userUrl = `https://${window.location.host}/${userName}`
+    const branchUrl = `${repoUrl}/tree/${branchName}`
     return {
-      repoUrl: `https://${window.location.host}/${userName}/${repoName}`,
-      userUrl: `https://${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path, recursive, accessToken) {
@@ -170,6 +175,9 @@ export const Gitee: Platform = {
   setOAuth(code) {
     return API.OAuth(code)
   },
+  usePlatformHooks() {
+    useProgressBar()
+  },
 }
 
 export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {

src/platforms/platform.d.ts

@@ -7,9 +7,10 @@ type Platform = {
     metaData: Pick<MetaData, 'userName' | 'repoName'>,
     accessToken?: string,
   ): Promise<string>
-  resolveUrlFromMetaData(metaData: Pick<MetaData, 'userName' | 'repoName'>): {
+  resolveUrlFromMetaData(metaData: MetaData): {
     userUrl: string
     repoUrl: string
+    branchUrl: string
   }
   getTreeData(
     metaData: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
@@ -22,5 +23,9 @@ type Platform = {
   getCurrentPath(branchName: string): string[] | null
   setOAuth(code: string): Promise<string | null>
   getOAuthLink(): string
+  delegatePJAXProps?(options?: {
+    node?: TreeNode
+  }): void | (React.DOMAttributes<HTMLElement> & Record<string, any>) // support data-* attributes
+  loadWithPJAX?(url: string, element: HTMLElement): void
   usePlatformHooks?(): void
 }

src/styles/dark/variables.scss

@@ -1,566 +0,0 @@
-$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',
-);

src/styles/darkDimmed/variables.scss

@@ -1,680 +0,0 @@
-$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',
-);

src/styles/index.scss

@@ -11,9 +11,42 @@ $min-width-with-gitako: $min-screen-width + $side-bar-base-width;
 
 $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;
+$github-notifications-center-header-z-index: 999;
+$minimal-z-index: max(
+    $github-header-z-index,
+    $github-pull-request-float-header-z-index,
+    $github-notifications-center-header-z-index
+  ) + 1;
 
-@mixin interactive-background($default, $hover, $active, $focus: $hover) {
+@mixin interactive-frame() {
+  @include interactive-border;
+  @include interactive-background;
+}
+
+@mixin interactive-border(
+  $default: var(--gitako-btn-border),
+  $hover: var(--gitako-btn-hover-border),
+  $active: var(--gitako-btn-active-border),
+  $focus: $hover
+) {
+  border: 1px solid $default;
+  &:hover {
+    border: 1px solid $hover;
+  }
+  &:focus {
+    border: 1px solid $focus;
+  }
+  &:active {
+    border: 1px solid $active;
+  }
+}
+
+@mixin interactive-background(
+  $default: var(--gitako-btn-bg),
+  $hover: var(--gitako-btn-hover-bg),
+  $active: var(--gitako-btn-active-bg),
+  $focus: $hover
+) {
   background-color: $default;
   &:hover {
     background-color: $hover;
@@ -47,47 +80,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   }
 }
 
-:root {
-  --gitako-width: #{$side-bar-base-width};
+@mixin hide-for-print {
+  @media print {
+    display: none;
+  }
 }
 
 .#{$name}-ready {
   // github
-  &.shrink-github-header {
-    .js-header-wrapper {
-      background: var(--gitako-bg-canvas-inverse);
-    }
-    .Header {
-      max-width: 1280px;
-      margin: 0 auto;
-      @media (max-width: 1020px) {
-        overflow: hidden; // prevent blank scroll area when Gitako is open and window is narrow
-      }
-      @media (min-width: 1280px) {
-        padding: 0 32px !important;
-      }
-    }
-    main {
-      // overflow: hidden;
-      // This prevents blank scroll area when Gitako is open and window is narrow.
-      // But it conflicts with the pr toolbar. Keep it here as a reminder.
-
-      & > *:first-child {
-        // repo info and nav bar
-        box-shadow: inset 0 -1px 0 var(--gitako-border-overlay); // from .UnderlineNav
-
-        & > * {
-          max-width: 1280px;
-          margin: 0 auto;
-        }
-
-        nav {
-          overflow: auto !important;
-        }
-      }
-    }
-  }
-
   // code folding start
   .blob-wrapper table .blob-num {
     position: relative; // for positioning
@@ -95,17 +95,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     padding-right: 20px;
   }
 
-  // cancel code fold if not wrapped with .gitako-code-fold-mark
+  // hide code fold handler if not enabled
   .gitako-code-fold-handler {
     display: none;
   }
-  .gitako-code-fold-hidden {
-    display: table-cell;
-  }
 
-  .gitako-code-fold-attached {
+  .gitako-code-fold-attached:not(.gitako-code-fold-attached-disabled) {
     tr {
       .gitako-code-fold-handler {
+        @include hide-for-print();
+
         display: initial;
         position: absolute;
         top: 0px;
@@ -133,29 +132,32 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
 
         @include interactive-background-on-before(
-          var(--gitako-icon-tertiary),
-          var(--gitako-icon-primary),
-          var(--gitako-icon-secondary)
+          var(--gitako-fg-subtle),
+          var(--gitako-fg-default),
+          var(--gitako-fg-muted)
         );
       }
 
-      &.active {
+      &.gitako-code-fold-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)
+            var(--gitako-fg-muted),
+            var(--gitako-fg-default),
+            var(--gitako-fg-subtle)
           );
         }
       }
-    }
 
-    .gitako-code-fold-hidden {
-      display: none;
+      // hide folded sections, except for print
+      &.gitako-code-fold-hidden {
+        @media screen {
+          display: none;
+        }
+      }
     }
   }
   // code folding end
@@ -173,14 +175,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       .clippy {
         width: 32px;
         height: 32px;
-        border: 1px solid var(--gitako-border-tertiary);
+        border: 1px solid var(--gitako-border-default);
         border-radius: 4px;
 
-        @include interactive-background(
-          var(--gitako-btn-bg),
-          var(--gitako-btn-hover-bg),
-          var(--gitako-btn-focus-bg)
-        );
+        @include interactive-background;
         .icon {
           width: 100%;
           height: 100%;
@@ -212,7 +210,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 }
 
 .with-gitako-spacing {
-  margin-left: var(--gitako-width);
+  @media screen {
+    margin-left: var(--gitako-width);
+  }
 
   // gitee
   &.git-project {
@@ -272,13 +272,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 // Why does not TextInput get theme properly?
 @mixin input {
-  color: var(--gitako-text-primary);
-  background-color: var(--gitako-input-bg);
-  border-color: var(--gitako-border-primary);
-  box-shadow: var(--gitako-input-shadow);
+  color: var(--gitako-fg-default);
+  background-color: var(--gitako-canvas-default);
+  border-color: var(--gitako-border-default);
+  box-shadow: var(--gitako-primer-shadow-inset);
 }
 
 .#{$name}-toggle-show-button-wrapper {
+  @include hide-for-print();
+
   z-index: $minimal-z-index;
   position: fixed;
   top: 124px; // align with GitHub's navbar items
@@ -310,11 +312,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       height: 32px;
       padding: 4px;
       border-radius: 6px;
-      border: 1px solid var(--gitako-border-tertiary);
-      background: var(--gitako-bg-tertiary);
-      color: var(--gitako-icon-primary);
+      @include interactive-frame;
+      color: var(--gitako-fg-default);
       &:active {
-        color: var(--gitako-icon-tertiary);
+        color: var(--gitako-fg-subtle);
       }
       transition: all ease 0.3s;
       font-size: 16px;
@@ -330,13 +331,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       object-fit: contain;
       transition: all ease 0.4s;
       transform: translateX(-8px);
-      filter: drop-shadow(0 0 1px var(--gitako-bg-backdrop));
+      filter: drop-shadow(0 0 1px var(--gitako-primer-canvas-backdrop));
     }
     &:active,
     &:hover {
       .tentacle {
         transform: translateX(-4px);
-        filter: drop-shadow(0 0 2px var(--gitako-bg-backdrop));
+        filter: drop-shadow(0 0 2px var(--gitako-primer-canvas-backdrop));
       }
     }
   }
@@ -346,10 +347,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     margin-left: 4px;
     padding: 2px 4px;
     font-size: 12px;
-    color: var(--gitako-text-red);
-    border: 1px solid var(--gitako-border-overlay);
+    color: var(--gitako-danger-fg);
+    border: 1px solid var(--gitako-border-default);
     border-radius: 2px;
-    background-color: var(--gitako-bg-tertiary);
+    background-color: var(--gitako-bg-subtle);
   }
 
   &:hover {
@@ -360,13 +361,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 }
 
 .#{$name}-side-bar {
+  @include hide-for-print();
+
   @import '~@primer/css/base/index.scss';
   button {
     border-radius: 6px;
     font-weight: 600;
   }
   a {
-    color: var(--gitako-text-link);
+    color: var(--gitako-accent-fg);
   }
 
   $resizeHandlerWidth: 1px;
@@ -393,7 +396,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     }
 
     .gitako-side-bar-body-wrapper-content {
-      width: var(--gitako-width);
     }
   }
   .#{$name}-resize-handler {
@@ -402,15 +404,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     cursor: ew-resize;
     user-select: none;
     width: 0;
-    background: var(--gitako-bg-tertiary);
-    border-right: $resizeHandlerWidth solid var(--gitako-border-tertiary);
+    background: var(--gitako-bg-subtle);
+    border-right: $resizeHandlerWidth solid var(--gitako-border-default);
     overflow: hidden;
     box-sizing: content-box;
     &:hover,
     &:active {
       width: 16px;
-      background: var(--gitako-bg-secondary);
-      border-left: 1px solid var(--gitako-border-tertiary);
+      background: var(--gitako-bg-subtle);
+      border-left: 1px solid var(--gitako-border-default);
     }
 
     .octicon.Grabber {
@@ -423,23 +425,23 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   .#{$name}-side-bar-body {
     $button-size: 32px;
     position: relative;
-    width: 100%;
+    width: var(--gitako-width);
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: var(--gitako-bg-secondary);
-    border-left: 1px solid var(--gitako-border-overlay);
+    background: var(--gitako-bg-subtle);
+    border-left: 1px solid var(--gitako-border-default);
     overflow: hidden;
 
     .octicon {
       transition: transform 0.3s ease;
-      color: var(--gitako-icon-tertiary);
+      color: var(--gitako-fg-subtle);
       width: 100%;
       height: 100%;
     }
 
     .octicon-color {
-      color: var(--gitako-icon-tertiary);
+      color: var(--gitako-fg-subtle);
     }
 
     .octicon-wrapper {
@@ -458,26 +460,33 @@ $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);
+        background: var(--gitako-bg-subtle);
         padding: 6px 10px;
         flex-shrink: 0;
         position: relative; // prevent overlap by outline of other elements
 
         .user-and-repo {
           display: inline; // would be override by CSS rule of section from @primer/css
-          line-height: 32px;
 
-          a {
-            color: var(--gitako-text-link);
-            white-space: normal;
+          li {
+            display: inline-flex;
+            align-items: center;
+            min-height: 32px;
+            padding: 4px 0;
+
+            a {
+              color: var(--gitako-accent-fg);
+              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);
+          color: var(--gitako-fg-muted);
+          background-color: var(--gitako-accent-subtle);
+          word-break: break-word;
         }
 
         .close-side-bar-button-position {
@@ -496,11 +505,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             }
 
             &.active .octicon {
-              color: var(--gitako-icon-primary);
+              color: var(--gitako-fg-default);
             }
 
             .action-icon {
-              color: var(--gitako-icon-tertiary);
+              color: var(--gitako-fg-subtle);
               width: 20px;
               height: 20px;
               text-align: center;
@@ -529,12 +538,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         width: 100%;
         height: 100%;
         @include flex-center();
-        border-top: 1px solid var(--gitako-border-overlay);
+        border-top: 1px solid var(--gitako-border-default);
 
         .loading-indicator {
           display: flex;
           align-items: center;
-          color: var(--gitako-text-placeholder);
+          color: var(--gitako-fg-subtle);
 
           &-icon {
             width: 20px;
@@ -574,14 +583,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
-            border-color: var(--gitako-border-overlay);
+            border-width: 1px 0 1px 0; // remove border on left&right to make UI clear
+            border-color: var(--gitako-border-default);
             border-radius: 0; // its rounded corner not match with nearby elements
-            color: var(--gitako-text-primary);
-            background: var(--gitako-bg-canvas);
+            color: var(--gitako-fg-default);
+            background: var(--gitako-bg-default);
             padding-right: 40px; // save space for actions
 
             &.error {
-              border-color: var(--gitako-border-danger);
+              border-color: var(--gitako-danger-emphasis);
             }
           }
 
@@ -599,27 +609,30 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               margin: 0;
               padding: 2px 4px;
               min-width: 32px;
-              border: 1px solid var(--gitako-border-secondary);
+              border: 1px solid var(--gitako-border-muted);
               border-radius: 8px;
-              color: var(--gitako-text-secondary);
+              color: var(--gitako-fg-muted);
               font-size: 12px;
               font-weight: 500;
               line-height: 1;
               outline: none;
 
-              @include interactive-background(
-                var(--gitako-bg-primary),
-                var(--gitako-bg-secondary),
-                var(--gitako-bg-tertiary)
-              );
+              @include interactive-frame;
             }
           }
         }
 
         .files {
+          position: relative;
           flex: 1;
-          overflow: auto;
-          overflow-x: hidden; // prevent x-scroll bar show up while sizing
+          overflow: hidden;
+
+          // Put this inside files will help files to get proper size derived from parents, regardless of its content size
+          .magic-size-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+          }
         }
 
         .node-item {
@@ -632,21 +645,21 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
           &.focused {
             @include interactive-background(
-              var(--gitako-bg-tertiary),
-              var(--gitako-bg-secondary),
-              var(--gitako-bg-overlay)
+              var(--gitako-canvas-subtle),
+              var(--gitako-canvas-subtle),
+              var(--gitako-canvas-inset)
             );
           }
 
           @include interactive-background(
-            var(--gitako-auto-white),
-            var(--gitako-bg-secondary),
-            var(--gitako-bg-tertiary)
+            var(--gitako-canvas-default),
+            var(--gitako-canvas-subtle),
+            var(--gitako-canvas-inset)
           );
 
           &.disabled {
             pointer-events: none;
-            color: var(--gitako-text-disabled);
+            color: var(--gitako-fg-muted);
           }
           display: flex;
           justify-content: space-between;
@@ -657,17 +670,17 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
 
-          border-bottom: 1px solid var(--gitako-border-secondary);
+          border-bottom: 1px solid var(--gitako-border-muted);
           &.compact {
             border-bottom: none;
             &.focused {
-              border-top: 1px solid var(--gitako-border-secondary);
-              border-bottom: 1px solid var(--gitako-border-secondary);
+              border-top: 1px solid var(--gitako-border-muted);
+              border-bottom: 1px solid var(--gitako-border-muted);
             }
           }
 
           &:not(:hover) {
-            color: var(--gitako-text-primary);
+            color: var(--gitako-fg-default);
           }
 
           @mixin icon-size() {
@@ -714,7 +727,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
           &:not(:hover) {
             .node-item-label .prefix {
-              color: var(--gitako-text-tertiary);
+              color: var(--gitako-fg-muted);
             }
           }
 
@@ -723,13 +736,79 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             padding-right: 8px;
 
             .node-item-comment {
-              display: inline-block;
-              width: 48px;
+              display: inline-flex;
+              align-items: center;
+              min-width: 36px;
               padding: 0 4px;
-              color: var(--gitako-text-tertiary);
+              color: var(--gitako-fg-muted);
 
               .octicon-wrapper {
-                margin: 0; // make it closer to the comment amount label
+                margin: 2px; // make it closer to the comment amount label
+              }
+            }
+
+            .node-item-diff {
+              display: inline-flex;
+              align-items: center;
+              padding: 0 4px;
+              color: var(--gitako-fg-muted);
+
+              .octicon-wrapper {
+                margin: 0; // make it closer to the diff details
+              }
+
+              .added .octicon {
+                color: var(--gitako-success-emphasis);
+              }
+              .removed .octicon {
+                color: var(--gitako-danger-emphasis);
+              }
+              .renamed .octicon {
+                color: var(--gitako-done-emphasis);
+              }
+              .modified .octicon {
+                color: var(--gitako-accent-emphasis);
+              }
+              .ignored .octicon {
+                color: var(--gitako-neutral-emphasis);
+              }
+
+              .diff-stat-graph {
+                display: inline-block;
+                white-space: nowrap;
+                > span {
+                  display: inline-block;
+                  width: 2px;
+                  height: 10px;
+                  margin: 0 1px;
+                  border-radius: 2px;
+                  background: var(--gitako-neutral-emphasis);
+                }
+
+                .diff-stat-graph-addition {
+                  background: var(--gitako-success-emphasis);
+                }
+
+                .diff-stat-graph-deletion {
+                  background: var(--gitako-danger-emphasis);
+                }
+              }
+
+              .diff-stat-text {
+                display: inline-block;
+                white-space: nowrap;
+                // Use some commonly available monospace font, the leading ones are copied from GitHub
+                font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
+                  monospace, 'Cascadia Code', 'Courier New', Courier;
+                .additions {
+                  color: var(--gitako-success-emphasis);
+                }
+                .delimiter {
+                  color: var(--gitako-neutral-emphasis);
+                }
+                .deletions {
+                  color: var(--gitako-danger-emphasis);
+                }
               }
             }
 
@@ -767,12 +846,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
     .#{$name}-settings-bar {
       z-index: 2;
-      background: var(--gitako-bg-tertiary);
+      background: var(--gitako-bg-subtle);
       display: flex;
       flex-direction: column;
       max-height: calc(100vh - 120px);
       &-title {
-        border-top: 1px solid var(--gitako-border-secondary);
+        border-top: 1px solid var(--gitako-border-muted);
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
@@ -790,7 +869,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           height: 10px;
           top: 0;
           left: 0;
-          background: var(--gitako-bg-tertiary);
+          background: var(--gitako-bg-subtle);
           z-index: 1;
         }
         .settings-section {
@@ -821,10 +900,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               // make it look like text inputs
               height: 36px;
               border-radius: 6px;
-              border: 1px solid var(--gitako-input-border);
-              background: var(--gitako-input-bg);
-              color: var(--gitako-text-primary);
-              box-shadow: var(--gitako-input-shadow);
+              border: 1px solid var(--gitako-border-default);
+              background: var(--gitako-canvas-default);
+              color: var(--gitako-fg-default);
+              box-shadow: var(--gitako-primer-shadow-inset);
             }
             &.field-checkbox {
               padding-left: 20px;
@@ -849,7 +928,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         margin-bottom: 4px;
       }
       .hint {
-        color: var(--gitako-text-placeholder);
+        color: var(--gitako-fg-subtle);
       }
       .access-token-input-control {
         display: flex;
@@ -871,10 +950,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         justify-content: space-between;
         align-items: center;
         padding: 2px 6px 2px 10px;
-        border-top: 1px solid var(--gitako-border-secondary);
+        border-top: 1px solid var(--gitako-border-muted);
 
         .version {
-          color: var(--gitako-text-tertiary);
+          color: var(--gitako-fg-muted);
         }
 
         .header-right {

src/styles/light/variables.scss

@@ -1,566 +0,0 @@
-$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',
-);

src/styles/themes.scss

@@ -1,6 +1,10 @@
-@use './light/variables.scss' as light;
-@use './dark/variables.scss' as dark;
-@use './darkDimmed/variables.scss' as darkDimmed;
+@use './themes/light.scss' as light;
+@use './themes/dark.scss' as dark;
+@use './themes/lightHighContrast.scss' as lightHighContrast;
+@use './themes/darkHighContrast.scss' as darkHighContrast;
+@use './themes/lightColorblind.scss' as lightColorblind;
+@use './themes/darkColorblind.scss' as darkColorblind;
+@use './themes/darkDimmed.scss' as darkDimmed;
 
 @mixin setVariables($variables) {
   @each $name, $value in $variables {
@@ -8,57 +12,45 @@
   }
 }
 
-// Following rules are organized according to common variables to reduce output CSS size
 :root {
   // default, e.g. when not login
   @include setVariables(light.$variables);
+
+  // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
+  --gitako-bg-default-transparent: var(--gitako-canvas-default-transparent);
+  --gitako-bg-default: var(--gitako-canvas-default);
+  --gitako-bg-inset: var(--gitako-canvas-inset);
+  --gitako-bg-overlay: var(--gitako-canvas-overlay);
+  --gitako-bg-subtle: var(--gitako-canvas-subtle);
 }
 
-:root {
-  &[data-color-mode='light'][data-light-theme='light'],
-  &[data-color-mode='dark'][data-dark-theme='light'] {
-    @include setVariables(light.$variables);
-  }
-
-  &[data-color-mode='light'][data-light-theme='dark'],
-  &[data-color-mode='dark'][data-dark-theme='dark'] {
-    @include setVariables(dark.$variables);
-  }
-
-  &[data-color-mode='light'][data-light-theme='dark_dimmed'],
-  &[data-color-mode='dark'][data-dark-theme='dark_dimmed'] {
-    @include setVariables(darkDimmed.$variables);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root[data-color-mode='auto'] {
-    &[data-light-theme='light'] {
-      @include setVariables(light.$variables);
+@mixin theme($themeName, $variables) {
+  :root {
+    &[data-color-mode='light'][data-light-theme='#{$themeName}'],
+    &[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
+      @include setVariables($variables);
     }
 
-    &[data-light-theme='dark'] {
-      @include setVariables(dark.$variables);
-    }
+    &[data-color-mode='auto'] {
+      &[data-light-theme='#{$themeName}'] {
+        @media (prefers-color-scheme: light) {
+          @include setVariables($variables);
+        }
+      }
 
-    &[data-light-theme='dark_dimmed'] {
-      @include setVariables(darkDimmed.$variables);
+      &[data-dark-theme='#{$themeName}'] {
+        @media (prefers-color-scheme: dark) {
+          @include setVariables($variables);
+        }
+      }
     }
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root[data-color-mode='auto'] {
-    &[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);
-    }
-  }
-}
+@include theme('light', light.$variables);
+@include theme('dark', dark.$variables);
+@include theme('light_high_contrast', lightHighContrast.$variables);
+@include theme('dark_high_contrast', darkHighContrast.$variables);
+@include theme('light_colorblind', lightColorblind.$variables);
+@include theme('dark_colorblind', darkColorblind.$variables);
+@include theme('dark_dimmed', darkDimmed.$variables);

src/styles/themes/dark.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#1f6feb',
+  'accent-fg': '#58a6ff',
+  'accent-muted': 'rgba(56,139,253,0.4)',
+  'accent-subtle': 'rgba(56,139,253,0.15)',
+  'action-list-item-danger-active-bg': 'rgba(248,81,73,0.24)',
+  'action-list-item-danger-hover-bg': 'rgba(248,81,73,0.16)',
+  'action-list-item-danger-hover-text': '#ff7b72',
+  'action-list-item-default-active-bg': 'rgba(177,186,196,0.2)',
+  'action-list-item-default-hover-bg': 'rgba(177,186,196,0.12)',
+  'action-list-item-default-selected-bg': 'rgba(177,186,196,0.08)',
+  'action-list-item-inline-divider': 'rgba(48,54,61,0.48)',
+  'ansi-black-bright': '#6e7681',
+  'ansi-black': '#484f58',
+  'ansi-blue-bright': '#79c0ff',
+  'ansi-blue': '#58a6ff',
+  'ansi-cyan-bright': '#56d4dd',
+  'ansi-cyan': '#39c5cf',
+  'ansi-gray': '#6e7681',
+  'ansi-green-bright': '#56d364',
+  'ansi-green': '#3fb950',
+  'ansi-magenta-bright': '#d2a8ff',
+  'ansi-magenta': '#bc8cff',
+  'ansi-red-bright': '#ffa198',
+  'ansi-red': '#ff7b72',
+  'ansi-white-bright': '#f0f6fc',
+  'ansi-white': '#b1bac4',
+  'ansi-yellow-bright': '#e3b341',
+  'ansi-yellow': '#d29922',
+  'attention-emphasis': '#9e6a03',
+  'attention-fg': '#d29922',
+  'attention-muted': 'rgba(187,128,9,0.4)',
+  'attention-subtle': 'rgba(187,128,9,0.15)',
+  'avatar-bg': 'rgba(240,246,252,0.1)',
+  'avatar-border': 'rgba(240,246,252,0.1)',
+  'avatar-child-shadow': '-2px -2px 0 #0d1117',
+  'avatar-stack-fade-more': '#21262d',
+  'avatar-stack-fade': '#30363d',
+  'border-default': '#30363d',
+  'border-muted': '#21262d',
+  'border-subtle': 'rgba(240,246,252,0.1)',
+  'btn-active-bg': 'hsla(212,12%,18%,1)',
+  'btn-active-border': '#6e7681',
+  'btn-bg': '#21262d',
+  'btn-border': 'rgba(240,246,252,0.1)',
+  'btn-counter-bg': '#30363d',
+  'btn-danger-counter-bg': 'rgba(218,54,51,0.1)',
+  'btn-danger-disabled-bg': '#0d1117',
+  'btn-danger-disabled-counter-bg': 'rgba(218,54,51,0.05)',
+  'btn-danger-disabled-text': 'rgba(248,81,73,0.5)',
+  'btn-danger-focus-border': '#f85149',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(248,81,73,0.4)',
+  'btn-danger-hover-bg': '#da3633',
+  'btn-danger-hover-border': '#f85149',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#f0f6fc',
+  'btn-danger-hover-inset-shadow': '0 0 transparent',
+  'btn-danger-hover-shadow': '0 0 transparent',
+  'btn-danger-hover-text': '#f0f6fc',
+  'btn-danger-icon': '#f85149',
+  'btn-danger-selected-bg': '#b62324',
+  'btn-danger-selected-border': '#ff7b72',
+  'btn-danger-selected-shadow': '0 0 transparent',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#f85149',
+  'btn-focus-bg': '#21262d',
+  'btn-focus-border': '#8b949e',
+  'btn-focus-shadow': '0 0 0 3px rgba(139,148,158,0.3)',
+  'btn-hover-bg': '#30363d',
+  'btn-hover-border': '#8b949e',
+  'btn-inset-shadow': '0 0 transparent',
+  'btn-outline-counter-bg': 'rgba(31,111,235,0.1)',
+  'btn-outline-disabled-bg': '#0d1117',
+  'btn-outline-disabled-counter-bg': 'rgba(31,111,235,0.05)',
+  'btn-outline-disabled-text': 'rgba(88,166,255,0.5)',
+  'btn-outline-focus-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(17,88,199,0.4)',
+  'btn-outline-hover-bg': '#30363d',
+  'btn-outline-hover-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-hover-counter-bg': 'rgba(240,246,252,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(240,246,252,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-outline-hover-text': '#58a6ff',
+  'btn-outline-selected-bg': '#0d419d',
+  'btn-outline-selected-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-selected-shadow': '0 0 transparent',
+  'btn-outline-selected-text': '#f0f6fc',
+  'btn-outline-text': '#58a6ff',
+  'btn-primary-bg': '#238636',
+  'btn-primary-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-counter-bg': 'rgba(240,246,252,0.2)',
+  'btn-primary-disabled-bg': 'rgba(35,134,54,0.6)',
+  'btn-primary-disabled-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-disabled-text': 'rgba(240,246,252,0.5)',
+  'btn-primary-focus-bg': '#238636',
+  'btn-primary-focus-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
+  'btn-primary-hover-bg': '#2ea043',
+  'btn-primary-hover-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-icon': '#f0f6fc',
+  'btn-primary-inset-shadow': '0 0 transparent',
+  'btn-primary-selected-bg': '#238636',
+  'btn-primary-selected-shadow': '0 0 transparent',
+  'btn-primary-shadow': '0 0 transparent',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': '#161b22',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(31,111,235,0.3)',
+  'btn-shadow': '0 0 transparent',
+  'btn-text': '#c9d1d9',
+  'canvas-default-transparent': 'rgba(13,17,23,0)',
+  'canvas-default': '#0d1117',
+  'canvas-inset': '#010409',
+  'canvas-overlay': '#161b22',
+  'canvas-subtle': '#161b22',
+  'checks-ansi-black-bright': '#161b22',
+  'checks-ansi-black': '#0d1117',
+  'checks-ansi-blue-bright': '#79c0ff',
+  'checks-ansi-blue': '#58a6ff',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#6e7681',
+  'checks-ansi-green-bright': '#56d364',
+  'checks-ansi-green': '#3fb950',
+  'checks-ansi-magenta-bright': '#d2a8ff',
+  'checks-ansi-magenta': '#bc8cff',
+  'checks-ansi-red-bright': '#ffa198',
+  'checks-ansi-red': '#ff7b72',
+  'checks-ansi-white-bright': '#b1bac4',
+  'checks-ansi-white': '#b1bac4',
+  'checks-ansi-yellow-bright': '#e3b341',
+  'checks-ansi-yellow': '#d29922',
+  'checks-bg': '#010409',
+  'checks-btn-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-btn-hover-icon': '#c9d1d9',
+  'checks-btn-icon': '#8b949e',
+  'checks-container-border-width': '1px',
+  'checks-donut-error': '#f85149',
+  'checks-donut-neutral': '#8b949e',
+  'checks-donut-pending': '#d29922',
+  'checks-donut-success': '#2ea043',
+  'checks-dropdown-bg': '#161b22',
+  'checks-dropdown-border': '#30363d',
+  'checks-dropdown-btn-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-dropdown-btn-hover-text': '#c9d1d9',
+  'checks-dropdown-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-dropdown-hover-text': '#c9d1d9',
+  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
+  'checks-dropdown-text': '#c9d1d9',
+  'checks-gate-bg': 'rgba(187,128,9,0.15)',
+  'checks-gate-text': '#8b949e',
+  'checks-gate-waiting-text': '#d29922',
+  'checks-header-border': '#21262d',
+  'checks-header-icon': '#8b949e',
+  'checks-header-label-open-text': '#c9d1d9',
+  'checks-header-label-text': '#8b949e',
+  'checks-input-bg': '#161b22',
+  'checks-input-focus-text': '#c9d1d9',
+  'checks-input-placeholder-text': '#484f58',
+  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
+  'checks-input-text': '#8b949e',
+  'checks-line-dt-fm-bg': '#9e6a03',
+  'checks-line-dt-fm-text': '#f0f6fc',
+  'checks-line-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-line-num-text': '#484f58',
+  'checks-line-selected-bg': 'rgba(56,139,253,0.15)',
+  'checks-line-selected-num-text': '#58a6ff',
+  'checks-line-text': '#8b949e',
+  'checks-line-timestamp-text': '#484f58',
+  'checks-logline-command-text': '#58a6ff',
+  'checks-logline-debug-text': '#a371f7',
+  'checks-logline-error-bg': 'rgba(248,81,73,0.15)',
+  'checks-logline-error-num-text': '#484f58',
+  'checks-logline-error-text': '#8b949e',
+  'checks-logline-num-text': '#484f58',
+  'checks-logline-section-text': '#3fb950',
+  'checks-logline-text': '#8b949e',
+  'checks-logline-warning-bg': 'rgba(187,128,9,0.15)',
+  'checks-logline-warning-num-text': '#d29922',
+  'checks-logline-warning-text': '#8b949e',
+  'checks-run-border-width': '1px',
+  'checks-scrollbar-thumb-bg': 'rgba(110,118,129,0.4)',
+  'checks-step-error-text': '#f85149',
+  'checks-step-header-open-bg': '#161b22',
+  'checks-step-warning-text': '#d29922',
+  'checks-text-link': '#58a6ff',
+  'checks-text-primary': '#c9d1d9',
+  'checks-text-secondary': '#8b949e',
+  'codemirror-activeline-bg': 'rgba(110,118,129,0.1)',
+  'codemirror-bg': '#0d1117',
+  'codemirror-cursor': '#c9d1d9',
+  'codemirror-guttermarker-subtle-text': '#484f58',
+  'codemirror-guttermarker-text': '#0d1117',
+  'codemirror-gutters-bg': '#0d1117',
+  'codemirror-linenumber-text': '#8b949e',
+  'codemirror-lines-bg': '#0d1117',
+  'codemirror-matchingbracket-text': '#c9d1d9',
+  'codemirror-selection-bg': 'rgba(56,139,253,0.4)',
+  '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',
+  'codemirror-text': '#c9d1d9',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#da3633',
+  'danger-fg': '#f85149',
+  'danger-muted': 'rgba(248,81,73,0.4)',
+  'danger-subtle': 'rgba(248,81,73,0.15)',
+  'diff-blob-addition-fg': '#c9d1d9',
+  'diff-blob-addition-line-bg': 'rgba(46,160,67,0.15)',
+  'diff-blob-addition-num-bg': 'rgba(63,185,80,0.3)',
+  'diff-blob-addition-num-text': '#c9d1d9',
+  'diff-blob-addition-word-bg': 'rgba(46,160,67,0.4)',
+  'diff-blob-deletion-fg': '#c9d1d9',
+  'diff-blob-deletion-line-bg': 'rgba(248,81,73,0.15)',
+  'diff-blob-deletion-num-bg': 'rgba(248,81,73,0.3)',
+  'diff-blob-deletion-num-text': '#c9d1d9',
+  'diff-blob-deletion-word-bg': 'rgba(248,81,73,0.4)',
+  'diff-blob-expander-icon': '#8b949e',
+  'diff-blob-hunk-num-bg': 'rgba(56,139,253,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
+  'diffstat-addition-bg': '#3fb950',
+  'diffstat-addition-border': 'rgba(240,246,252,0.1)',
+  'diffstat-deletion-border': 'rgba(240,246,252,0.1)',
+  'done-emphasis': '#8957e5',
+  'done-fg': '#a371f7',
+  'done-muted': 'rgba(163,113,247,0.4)',
+  'done-subtle': 'rgba(163,113,247,0.15)',
+  'fg-default': '#c9d1d9',
+  'fg-muted': '#8b949e',
+  'fg-on-emphasis': '#f0f6fc',
+  'fg-subtle': '#484f58',
+  'header-bg': '#161b22',
+  'header-divider': '#8b949e',
+  'header-logo': '#f0f6fc',
+  'header-search-bg': '#0d1117',
+  'header-search-border': '#30363d',
+  'header-text': 'rgba(240,246,252,0.7)',
+  'input-disabled-bg': 'rgba(110,118,129,0)',
+  'marketing-icon-primary': '#79c0ff',
+  'marketing-icon-secondary': '#1f6feb',
+  'menu-bg-active': '#161b22',
+  'mktg-btn-bg': '#f6f8fa',
+  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
+  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#6e7681',
+  'neutral-emphasis': '#6e7681',
+  'neutral-muted': 'rgba(110,118,129,0.4)',
+  'neutral-subtle': 'rgba(110,118,129,0.1)',
+  'overlay-shadow': '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
+  'page-header-bg': '#0d1117',
+  'prettylights-syntax-brackethighlighter-angle': '#8b949e',
+  'prettylights-syntax-brackethighlighter-unmatched': '#f85149',
+  'prettylights-syntax-carriage-return-bg': '#b62324',
+  'prettylights-syntax-carriage-return-text': '#f0f6fc',
+  'prettylights-syntax-comment': '#8b949e',
+  'prettylights-syntax-constant-other-reference-link': '#a5d6ff',
+  'prettylights-syntax-constant': '#79c0ff',
+  'prettylights-syntax-entity-tag': '#7ee787',
+  'prettylights-syntax-entity': '#d2a8ff',
+  'prettylights-syntax-invalid-illegal-bg': '#8e1519',
+  'prettylights-syntax-invalid-illegal-text': '#f0f6fc',
+  'prettylights-syntax-keyword': '#ff7b72',
+  'prettylights-syntax-markup-bold': '#c9d1d9',
+  'prettylights-syntax-markup-changed-bg': '#5a1e02',
+  'prettylights-syntax-markup-changed-text': '#ffdfb6',
+  'prettylights-syntax-markup-deleted-bg': '#67060c',
+  'prettylights-syntax-markup-deleted-text': '#ffdcd7',
+  'prettylights-syntax-markup-heading': '#1f6feb',
+  'prettylights-syntax-markup-ignored-bg': '#1158c7',
+  'prettylights-syntax-markup-ignored-text': '#c9d1d9',
+  'prettylights-syntax-markup-inserted-bg': '#033a16',
+  'prettylights-syntax-markup-inserted-text': '#aff5b4',
+  'prettylights-syntax-markup-italic': '#c9d1d9',
+  'prettylights-syntax-markup-list': '#f2cc60',
+  'prettylights-syntax-meta-diff-range': '#d2a8ff',
+  'prettylights-syntax-storage-modifier-import': '#c9d1d9',
+  'prettylights-syntax-string-regexp': '#7ee787',
+  'prettylights-syntax-string': '#a5d6ff',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#484f58',
+  'prettylights-syntax-variable': '#ffa657',
+  'primer-border-active': '#F78166',
+  'primer-border-contrast': 'rgba(240,246,252,0.2)',
+  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
+  'primer-canvas-sticky': 'rgba(13,17,23,0.95)',
+  'primer-fg-disabled': '#484f58',
+  'primer-shadow-focus': '0 0 0 3px #0c2d6b',
+  'primer-shadow-highlight': '0 0 transparent',
+  'primer-shadow-inset': '0 0 transparent',
+  'project-gradient-in': '#161b22',
+  'project-gradient-out': 'rgba(22,27,34,0)',
+  'project-header-bg': '#0d1117',
+  'project-sidebar-bg': '#161b22',
+  'scale-black': '#010409',
+  'scale-blue-0': '#cae8ff',
+  'scale-blue-1': '#a5d6ff',
+  'scale-blue-2': '#79c0ff',
+  'scale-blue-3': '#58a6ff',
+  'scale-blue-4': '#388bfd',
+  'scale-blue-5': '#1f6feb',
+  'scale-blue-6': '#1158c7',
+  'scale-blue-7': '#0d419d',
+  'scale-blue-8': '#0c2d6b',
+  'scale-blue-9': '#051d4d',
+  'scale-coral-0': '#FFDDD2',
+  'scale-coral-1': '#FFC2B2',
+  'scale-coral-2': '#FFA28B',
+  'scale-coral-3': '#F78166',
+  'scale-coral-4': '#EA6045',
+  'scale-coral-5': '#CF462D',
+  'scale-coral-6': '#AC3220',
+  'scale-coral-7': '#872012',
+  'scale-coral-8': '#640D04',
+  'scale-coral-9': '#460701',
+  'scale-gray-0': '#f0f6fc',
+  'scale-gray-1': '#c9d1d9',
+  'scale-gray-2': '#b1bac4',
+  'scale-gray-3': '#8b949e',
+  'scale-gray-4': '#6e7681',
+  'scale-gray-5': '#484f58',
+  'scale-gray-6': '#30363d',
+  'scale-gray-7': '#21262d',
+  'scale-gray-8': '#161b22',
+  'scale-gray-9': '#0d1117',
+  'scale-green-0': '#aff5b4',
+  'scale-green-1': '#7ee787',
+  'scale-green-2': '#56d364',
+  'scale-green-3': '#3fb950',
+  'scale-green-4': '#2ea043',
+  'scale-green-5': '#238636',
+  'scale-green-6': '#196c2e',
+  'scale-green-7': '#0f5323',
+  'scale-green-8': '#033a16',
+  'scale-green-9': '#04260f',
+  'scale-orange-0': '#ffdfb6',
+  'scale-orange-1': '#ffc680',
+  'scale-orange-2': '#ffa657',
+  'scale-orange-3': '#f0883e',
+  'scale-orange-4': '#db6d28',
+  'scale-orange-5': '#bd561d',
+  'scale-orange-6': '#9b4215',
+  'scale-orange-7': '#762d0a',
+  'scale-orange-8': '#5a1e02',
+  'scale-orange-9': '#3d1300',
+  'scale-pink-0': '#ffdaec',
+  'scale-pink-1': '#ffbedd',
+  'scale-pink-2': '#ff9bce',
+  'scale-pink-3': '#f778ba',
+  'scale-pink-4': '#db61a2',
+  'scale-pink-5': '#bf4b8a',
+  'scale-pink-6': '#9e3670',
+  'scale-pink-7': '#7d2457',
+  'scale-pink-8': '#5e103e',
+  'scale-pink-9': '#42062a',
+  'scale-purple-0': '#eddeff',
+  'scale-purple-1': '#e2c5ff',
+  'scale-purple-2': '#d2a8ff',
+  'scale-purple-3': '#bc8cff',
+  'scale-purple-4': '#a371f7',
+  'scale-purple-5': '#8957e5',
+  'scale-purple-6': '#6e40c9',
+  'scale-purple-7': '#553098',
+  'scale-purple-8': '#3c1e70',
+  'scale-purple-9': '#271052',
+  'scale-red-0': '#ffdcd7',
+  'scale-red-1': '#ffc1ba',
+  'scale-red-2': '#ffa198',
+  'scale-red-3': '#ff7b72',
+  'scale-red-4': '#f85149',
+  'scale-red-5': '#da3633',
+  'scale-red-6': '#b62324',
+  'scale-red-7': '#8e1519',
+  'scale-red-8': '#67060c',
+  'scale-red-9': '#490202',
+  'scale-white': '#f0f6fc',
+  'scale-yellow-0': '#f8e3a1',
+  'scale-yellow-1': '#f2cc60',
+  'scale-yellow-2': '#e3b341',
+  'scale-yellow-3': '#d29922',
+  'scale-yellow-4': '#bb8009',
+  'scale-yellow-5': '#9e6a03',
+  'scale-yellow-6': '#845306',
+  'scale-yellow-7': '#693e00',
+  'scale-yellow-8': '#4b2900',
+  'scale-yellow-9': '#341a00',
+  'search-keyword-hl': 'rgba(210,153,34,0.4)',
+  'select-menu-backdrop-border': '#484f58',
+  'select-menu-tap-focus-bg': '#0c2d6b',
+  'select-menu-tap-highlight': 'rgba(48,54,61,0.5)',
+  'severe-emphasis': '#bd561d',
+  'severe-fg': '#db6d28',
+  'severe-muted': 'rgba(219,109,40,0.4)',
+  'severe-subtle': 'rgba(219,109,40,0.15)',
+  'shadow-extra-large': '0 12px 48px #010409',
+  'shadow-large': '0 8px 24px #010409',
+  'shadow-medium': '0 3px 6px #010409',
+  'shadow-small': '0 0 transparent',
+  'sidenav-selected-bg': '#21262d',
+  'sponsors-emphasis': '#bf4b8a',
+  'sponsors-fg': '#db61a2',
+  'sponsors-muted': 'rgba(219,97,162,0.4)',
+  'sponsors-subtle': 'rgba(219,97,162,0.15)',
+  'success-emphasis': '#238636',
+  'success-fg': '#3fb950',
+  'success-muted': 'rgba(46,160,67,0.4)',
+  'success-subtle': 'rgba(46,160,67,0.15)',
+  'timeline-badge-bg': '#21262d',
+  'topic-tag-border': 'rgba(0,0,0,0)',
+  'underlinenav-border-hover': 'rgba(110,118,129,0.4)',
+  'underlinenav-icon': '#484f58',
+);

src/styles/themes/darkColorblind.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#1f6feb',
+  'accent-fg': '#58a6ff',
+  'accent-muted': 'rgba(56,139,253,0.4)',
+  'accent-subtle': 'rgba(56,139,253,0.15)',
+  'action-list-item-danger-active-bg': 'rgba(195,128,0,0.24)',
+  'action-list-item-danger-hover-bg': 'rgba(195,128,0,0.16)',
+  'action-list-item-danger-hover-text': '#d69a00',
+  'action-list-item-default-active-bg': 'rgba(177,186,196,0.2)',
+  'action-list-item-default-hover-bg': 'rgba(177,186,196,0.12)',
+  'action-list-item-default-selected-bg': 'rgba(177,186,196,0.08)',
+  'action-list-item-inline-divider': 'rgba(48,54,61,0.48)',
+  'ansi-black-bright': '#6e7681',
+  'ansi-black': '#484f58',
+  'ansi-blue-bright': '#79c0ff',
+  'ansi-blue': '#58a6ff',
+  'ansi-cyan-bright': '#56d4dd',
+  'ansi-cyan': '#39c5cf',
+  'ansi-gray': '#6e7681',
+  'ansi-green-bright': '#66baff',
+  'ansi-green': '#42a0ff',
+  'ansi-magenta-bright': '#d2a8ff',
+  'ansi-magenta': '#bc8cff',
+  'ansi-red-bright': '#e6b716',
+  'ansi-red': '#d69a00',
+  'ansi-white-bright': '#f0f6fc',
+  'ansi-white': '#b1bac4',
+  'ansi-yellow-bright': '#e3b341',
+  'ansi-yellow': '#d29922',
+  'attention-emphasis': '#9e6a03',
+  'attention-fg': '#d29922',
+  'attention-muted': 'rgba(187,128,9,0.4)',
+  'attention-subtle': 'rgba(187,128,9,0.15)',
+  'avatar-bg': 'rgba(240,246,252,0.1)',
+  'avatar-border': 'rgba(240,246,252,0.1)',
+  'avatar-child-shadow': '-2px -2px 0 #0d1117',
+  'avatar-stack-fade-more': '#21262d',
+  'avatar-stack-fade': '#30363d',
+  'border-default': '#30363d',
+  'border-muted': '#21262d',
+  'border-subtle': 'rgba(240,246,252,0.1)',
+  'btn-active-bg': 'hsla(212,12%,18%,1)',
+  'btn-active-border': '#6e7681',
+  'btn-bg': '#21262d',
+  'btn-border': 'rgba(240,246,252,0.1)',
+  'btn-counter-bg': '#30363d',
+  'btn-danger-counter-bg': 'rgba(166,105,0,0.1)',
+  'btn-danger-disabled-bg': '#0d1117',
+  'btn-danger-disabled-counter-bg': 'rgba(166,105,0,0.05)',
+  'btn-danger-disabled-text': 'rgba(195,128,0,0.5)',
+  'btn-danger-focus-border': '#c38000',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(195,128,0,0.4)',
+  'btn-danger-hover-bg': '#a66900',
+  'btn-danger-hover-border': '#c38000',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#f0f6fc',
+  'btn-danger-hover-inset-shadow': '0 0 transparent',
+  'btn-danger-hover-shadow': '0 0 transparent',
+  'btn-danger-hover-text': '#f0f6fc',
+  'btn-danger-icon': '#c38000',
+  'btn-danger-selected-bg': '#865401',
+  'btn-danger-selected-border': '#d69a00',
+  'btn-danger-selected-shadow': '0 0 transparent',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#c38000',
+  'btn-focus-bg': '#21262d',
+  'btn-focus-border': '#8b949e',
+  'btn-focus-shadow': '0 0 0 3px rgba(139,148,158,0.3)',
+  'btn-hover-bg': '#30363d',
+  'btn-hover-border': '#8b949e',
+  'btn-inset-shadow': '0 0 transparent',
+  'btn-outline-counter-bg': 'rgba(31,111,235,0.1)',
+  'btn-outline-disabled-bg': '#0d1117',
+  'btn-outline-disabled-counter-bg': 'rgba(31,111,235,0.05)',
+  'btn-outline-disabled-text': 'rgba(88,166,255,0.5)',
+  'btn-outline-focus-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(17,88,199,0.4)',
+  'btn-outline-hover-bg': '#30363d',
+  'btn-outline-hover-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-hover-counter-bg': 'rgba(240,246,252,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(240,246,252,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-outline-hover-text': '#58a6ff',
+  'btn-outline-selected-bg': '#0d419d',
+  'btn-outline-selected-border': 'rgba(240,246,252,0.1)',
+  'btn-outline-selected-shadow': '0 0 transparent',
+  'btn-outline-selected-text': '#f0f6fc',
+  'btn-outline-text': '#58a6ff',
+  'btn-primary-bg': '#1d69e0',
+  'btn-primary-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-counter-bg': 'rgba(240,246,252,0.2)',
+  'btn-primary-disabled-bg': 'rgba(29,105,224,0.6)',
+  'btn-primary-disabled-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-disabled-text': 'rgba(240,246,252,0.5)',
+  'btn-primary-focus-bg': '#1d69e0',
+  'btn-primary-focus-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
+  'btn-primary-hover-bg': '#1585fd',
+  'btn-primary-hover-border': 'rgba(240,246,252,0.1)',
+  'btn-primary-icon': '#f0f6fc',
+  'btn-primary-inset-shadow': '0 0 transparent',
+  'btn-primary-selected-bg': '#1d69e0',
+  'btn-primary-selected-shadow': '0 0 transparent',
+  'btn-primary-shadow': '0 0 transparent',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': '#161b22',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(31,111,235,0.3)',
+  'btn-shadow': '0 0 transparent',
+  'btn-text': '#c9d1d9',
+  'canvas-default-transparent': 'rgba(13,17,23,0)',
+  'canvas-default': '#0d1117',
+  'canvas-inset': '#010409',
+  'canvas-overlay': '#161b22',
+  'canvas-subtle': '#161b22',
+  'checks-ansi-black-bright': '#161b22',
+  'checks-ansi-black': '#0d1117',
+  'checks-ansi-blue-bright': '#79c0ff',
+  'checks-ansi-blue': '#58a6ff',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#6e7681',
+  'checks-ansi-green-bright': '#66baff',
+  'checks-ansi-green': '#42a0ff',
+  'checks-ansi-magenta-bright': '#d2a8ff',
+  'checks-ansi-magenta': '#bc8cff',
+  'checks-ansi-red-bright': '#e6b716',
+  'checks-ansi-red': '#d69a00',
+  'checks-ansi-white-bright': '#b1bac4',
+  'checks-ansi-white': '#b1bac4',
+  'checks-ansi-yellow-bright': '#e3b341',
+  'checks-ansi-yellow': '#d29922',
+  'checks-bg': '#010409',
+  'checks-btn-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-btn-hover-icon': '#c9d1d9',
+  'checks-btn-icon': '#8b949e',
+  'checks-container-border-width': '1px',
+  'checks-donut-error': '#c38000',
+  'checks-donut-neutral': '#8b949e',
+  'checks-donut-pending': '#d29922',
+  'checks-donut-success': '#1585fd',
+  'checks-dropdown-bg': '#161b22',
+  'checks-dropdown-border': '#30363d',
+  'checks-dropdown-btn-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-dropdown-btn-hover-text': '#c9d1d9',
+  'checks-dropdown-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-dropdown-hover-text': '#c9d1d9',
+  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
+  'checks-dropdown-text': '#c9d1d9',
+  'checks-gate-bg': 'rgba(187,128,9,0.15)',
+  'checks-gate-text': '#8b949e',
+  'checks-gate-waiting-text': '#d29922',
+  'checks-header-border': '#21262d',
+  'checks-header-icon': '#8b949e',
+  'checks-header-label-open-text': '#c9d1d9',
+  'checks-header-label-text': '#8b949e',
+  'checks-input-bg': '#161b22',
+  'checks-input-focus-text': '#c9d1d9',
+  'checks-input-placeholder-text': '#484f58',
+  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
+  'checks-input-text': '#8b949e',
+  'checks-line-dt-fm-bg': '#9e6a03',
+  'checks-line-dt-fm-text': '#f0f6fc',
+  'checks-line-hover-bg': 'rgba(110,118,129,0.1)',
+  'checks-line-num-text': '#484f58',
+  'checks-line-selected-bg': 'rgba(56,139,253,0.15)',
+  'checks-line-selected-num-text': '#58a6ff',
+  'checks-line-text': '#8b949e',
+  'checks-line-timestamp-text': '#484f58',
+  'checks-logline-command-text': '#58a6ff',
+  'checks-logline-debug-text': '#a371f7',
+  'checks-logline-error-bg': 'rgba(195,128,0,0.15)',
+  'checks-logline-error-num-text': '#484f58',
+  'checks-logline-error-text': '#8b949e',
+  'checks-logline-num-text': '#484f58',
+  'checks-logline-section-text': '#42a0ff',
+  'checks-logline-text': '#8b949e',
+  'checks-logline-warning-bg': 'rgba(187,128,9,0.15)',
+  'checks-logline-warning-num-text': '#d29922',
+  'checks-logline-warning-text': '#8b949e',
+  'checks-run-border-width': '1px',
+  'checks-scrollbar-thumb-bg': 'rgba(110,118,129,0.4)',
+  'checks-step-error-text': '#c38000',
+  'checks-step-header-open-bg': '#161b22',
+  'checks-step-warning-text': '#d29922',
+  'checks-text-link': '#58a6ff',
+  'checks-text-primary': '#c9d1d9',
+  'checks-text-secondary': '#8b949e',
+  'codemirror-activeline-bg': 'rgba(110,118,129,0.1)',
+  'codemirror-bg': '#0d1117',
+  'codemirror-cursor': '#c9d1d9',
+  'codemirror-guttermarker-subtle-text': '#484f58',
+  'codemirror-guttermarker-text': '#0d1117',
+  'codemirror-gutters-bg': '#0d1117',
+  'codemirror-linenumber-text': '#8b949e',
+  'codemirror-lines-bg': '#0d1117',
+  'codemirror-matchingbracket-text': '#c9d1d9',
+  'codemirror-selection-bg': 'rgba(56,139,253,0.4)',
+  'codemirror-syntax-comment': '#8b949e',
+  'codemirror-syntax-constant': '#79c0ff',
+  'codemirror-syntax-entity': '#d2a8ff',
+  'codemirror-syntax-keyword': '#d69a00',
+  'codemirror-syntax-storage': '#d69a00',
+  'codemirror-syntax-string': '#a5d6ff',
+  'codemirror-syntax-support': '#79c0ff',
+  'codemirror-syntax-variable': '#ffa657',
+  'codemirror-text': '#c9d1d9',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#a66900',
+  'danger-fg': '#c38000',
+  'danger-muted': 'rgba(195,128,0,0.4)',
+  'danger-subtle': 'rgba(195,128,0,0.15)',
+  'diff-blob-addition-fg': '#c9d1d9',
+  'diff-blob-addition-line-bg': 'rgba(21,133,253,0.15)',
+  'diff-blob-addition-num-bg': 'rgba(66,160,255,0.3)',
+  'diff-blob-addition-num-text': '#c9d1d9',
+  'diff-blob-addition-word-bg': 'rgba(21,133,253,0.4)',
+  'diff-blob-deletion-fg': '#c9d1d9',
+  'diff-blob-deletion-line-bg': 'rgba(195,128,0,0.15)',
+  'diff-blob-deletion-num-bg': 'rgba(195,128,0,0.3)',
+  'diff-blob-deletion-num-text': '#c9d1d9',
+  'diff-blob-deletion-word-bg': 'rgba(195,128,0,0.4)',
+  'diff-blob-expander-icon': '#8b949e',
+  'diff-blob-hunk-num-bg': 'rgba(56,139,253,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
+  'diffstat-addition-bg': '#42a0ff',
+  'diffstat-addition-border': 'rgba(240,246,252,0.1)',
+  'diffstat-deletion-border': 'rgba(240,246,252,0.1)',
+  'done-emphasis': '#8957e5',
+  'done-fg': '#a371f7',
+  'done-muted': 'rgba(163,113,247,0.4)',
+  'done-subtle': 'rgba(163,113,247,0.15)',
+  'fg-default': '#c9d1d9',
+  'fg-muted': '#8b949e',
+  'fg-on-emphasis': '#f0f6fc',
+  'fg-subtle': '#484f58',
+  'header-bg': '#161b22',
+  'header-divider': '#8b949e',
+  'header-logo': '#f0f6fc',
+  'header-search-bg': '#0d1117',
+  'header-search-border': '#30363d',
+  'header-text': 'rgba(240,246,252,0.7)',
+  'input-disabled-bg': 'rgba(110,118,129,0)',
+  'marketing-icon-primary': '#79c0ff',
+  'marketing-icon-secondary': '#1f6feb',
+  'menu-bg-active': '#161b22',
+  'mktg-btn-bg': '#f6f8fa',
+  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
+  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#6e7681',
+  'neutral-emphasis': '#6e7681',
+  'neutral-muted': 'rgba(110,118,129,0.4)',
+  'neutral-subtle': 'rgba(110,118,129,0.1)',
+  'overlay-shadow': '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
+  'page-header-bg': '#0d1117',
+  'prettylights-syntax-brackethighlighter-angle': '#8b949e',
+  'prettylights-syntax-brackethighlighter-unmatched': '#c38000',
+  'prettylights-syntax-carriage-return-bg': '#865401',
+  'prettylights-syntax-carriage-return-text': '#f0f6fc',
+  'prettylights-syntax-comment': '#8b949e',
+  'prettylights-syntax-constant-other-reference-link': '#a5d6ff',
+  'prettylights-syntax-constant': '#79c0ff',
+  'prettylights-syntax-entity-tag': '#83d4ff',
+  'prettylights-syntax-entity': '#d2a8ff',
+  'prettylights-syntax-invalid-illegal-bg': '#633e00',
+  'prettylights-syntax-invalid-illegal-text': '#f0f6fc',
+  'prettylights-syntax-keyword': '#d69a00',
+  'prettylights-syntax-markup-bold': '#c9d1d9',
+  'prettylights-syntax-markup-changed-bg': '#5a1e02',
+  'prettylights-syntax-markup-changed-text': '#ffdfb6',
+  'prettylights-syntax-markup-deleted-bg': '#452f00',
+  'prettylights-syntax-markup-deleted-text': '#f0ec59',
+  'prettylights-syntax-markup-heading': '#1f6feb',
+  'prettylights-syntax-markup-ignored-bg': '#1158c7',
+  'prettylights-syntax-markup-ignored-text': '#c9d1d9',
+  'prettylights-syntax-markup-inserted-bg': '#0a2861',
+  'prettylights-syntax-markup-inserted-text': '#a0e8ff',
+  'prettylights-syntax-markup-italic': '#c9d1d9',
+  'prettylights-syntax-markup-list': '#f2cc60',
+  'prettylights-syntax-meta-diff-range': '#d2a8ff',
+  'prettylights-syntax-storage-modifier-import': '#c9d1d9',
+  'prettylights-syntax-string-regexp': '#83d4ff',
+  'prettylights-syntax-string': '#a5d6ff',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#484f58',
+  'prettylights-syntax-variable': '#ffa657',
+  'primer-border-active': '#F78166',
+  'primer-border-contrast': 'rgba(240,246,252,0.2)',
+  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
+  'primer-canvas-sticky': 'rgba(13,17,23,0.95)',
+  'primer-fg-disabled': '#484f58',
+  'primer-shadow-focus': '0 0 0 3px #0c2d6b',
+  'primer-shadow-highlight': '0 0 transparent',
+  'primer-shadow-inset': '0 0 transparent',
+  'project-gradient-in': '#161b22',
+  'project-gradient-out': 'rgba(22,27,34,0)',
+  'project-header-bg': '#0d1117',
+  'project-sidebar-bg': '#161b22',
+  'scale-black': '#010409',
+  'scale-blue-0': '#cae8ff',
+  'scale-blue-1': '#a5d6ff',
+  'scale-blue-2': '#79c0ff',
+  'scale-blue-3': '#58a6ff',
+  'scale-blue-4': '#388bfd',
+  'scale-blue-5': '#1f6feb',
+  'scale-blue-6': '#1158c7',
+  'scale-blue-7': '#0d419d',
+  'scale-blue-8': '#0c2d6b',
+  'scale-blue-9': '#051d4d',
+  'scale-coral-0': '#FFDDD2',
+  'scale-coral-1': '#FFC2B2',
+  'scale-coral-2': '#FFA28B',
+  'scale-coral-3': '#F78166',
+  'scale-coral-4': '#EA6045',
+  'scale-coral-5': '#CF462D',
+  'scale-coral-6': '#AC3220',
+  'scale-coral-7': '#872012',
+  'scale-coral-8': '#640D04',
+  'scale-coral-9': '#460701',
+  'scale-gray-0': '#f0f6fc',
+  'scale-gray-1': '#c9d1d9',
+  'scale-gray-2': '#b1bac4',
+  'scale-gray-3': '#8b949e',
+  'scale-gray-4': '#6e7681',
+  'scale-gray-5': '#484f58',
+  'scale-gray-6': '#30363d',
+  'scale-gray-7': '#21262d',
+  'scale-gray-8': '#161b22',
+  'scale-gray-9': '#0d1117',
+  'scale-green-0': '#a0e8ff',
+  'scale-green-1': '#83d4ff',
+  'scale-green-2': '#66baff',
+  'scale-green-3': '#42a0ff',
+  'scale-green-4': '#1585fd',
+  'scale-green-5': '#1d69e0',
+  'scale-green-6': '#0f53bc',
+  'scale-green-7': '#0b3c92',
+  'scale-green-8': '#0a2861',
+  'scale-green-9': '#041843',
+  'scale-orange-0': '#ffdfb6',
+  'scale-orange-1': '#ffc680',
+  'scale-orange-2': '#ffa657',
+  'scale-orange-3': '#f0883e',
+  'scale-orange-4': '#db6d28',
+  'scale-orange-5': '#bd561d',
+  'scale-orange-6': '#9b4215',
+  'scale-orange-7': '#762d0a',
+  'scale-orange-8': '#5a1e02',
+  'scale-orange-9': '#3d1300',
+  'scale-pink-0': '#ffdaec',
+  'scale-pink-1': '#ffbedd',
+  'scale-pink-2': '#ff9bce',
+  'scale-pink-3': '#f778ba',
+  'scale-pink-4': '#db61a2',
+  'scale-pink-5': '#bf4b8a',
+  'scale-pink-6': '#9e3670',
+  'scale-pink-7': '#7d2457',
+  'scale-pink-8': '#5e103e',
+  'scale-pink-9': '#42062a',
+  'scale-purple-0': '#eddeff',
+  'scale-purple-1': '#e2c5ff',
+  'scale-purple-2': '#d2a8ff',
+  'scale-purple-3': '#bc8cff',
+  'scale-purple-4': '#a371f7',
+  'scale-purple-5': '#8957e5',
+  'scale-purple-6': '#6e40c9',
+  'scale-purple-7': '#553098',
+  'scale-purple-8': '#3c1e70',
+  'scale-purple-9': '#271052',
+  'scale-red-0': '#f0ec59',
+  'scale-red-1': '#ecd334',
+  'scale-red-2': '#e6b716',
+  'scale-red-3': '#d69a00',
+  'scale-red-4': '#c38000',
+  'scale-red-5': '#a66900',
+  'scale-red-6': '#865401',
+  'scale-red-7': '#633e00',
+  'scale-red-8': '#452f00',
+  'scale-red-9': '#292100',
+  'scale-white': '#f0f6fc',
+  'scale-yellow-0': '#f8e3a1',
+  'scale-yellow-1': '#f2cc60',
+  'scale-yellow-2': '#e3b341',
+  'scale-yellow-3': '#d29922',
+  'scale-yellow-4': '#bb8009',
+  'scale-yellow-5': '#9e6a03',
+  'scale-yellow-6': '#845306',
+  'scale-yellow-7': '#693e00',
+  'scale-yellow-8': '#4b2900',
+  'scale-yellow-9': '#341a00',
+  'search-keyword-hl': 'rgba(210,153,34,0.4)',
+  'select-menu-backdrop-border': '#484f58',
+  'select-menu-tap-focus-bg': '#0c2d6b',
+  'select-menu-tap-highlight': 'rgba(48,54,61,0.5)',
+  'severe-emphasis': '#bd561d',
+  'severe-fg': '#db6d28',
+  'severe-muted': 'rgba(219,109,40,0.4)',
+  'severe-subtle': 'rgba(219,109,40,0.15)',
+  'shadow-extra-large': '0 12px 48px #010409',
+  'shadow-large': '0 8px 24px #010409',
+  'shadow-medium': '0 3px 6px #010409',
+  'shadow-small': '0 0 transparent',
+  'sidenav-selected-bg': '#21262d',
+  'sponsors-emphasis': '#bf4b8a',
+  'sponsors-fg': '#db61a2',
+  'sponsors-muted': 'rgba(219,97,162,0.4)',
+  'sponsors-subtle': 'rgba(219,97,162,0.15)',
+  'success-emphasis': '#1d69e0',
+  'success-fg': '#42a0ff',
+  'success-muted': 'rgba(21,133,253,0.4)',
+  'success-subtle': 'rgba(21,133,253,0.15)',
+  'timeline-badge-bg': '#21262d',
+  'topic-tag-border': 'rgba(0,0,0,0)',
+  'underlinenav-border-hover': 'rgba(110,118,129,0.4)',
+  'underlinenav-icon': '#484f58',
+);

src/styles/themes/darkDimmed.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#316dca',
+  'accent-fg': '#539bf5',
+  'accent-muted': 'rgba(65,132,228,0.4)',
+  'accent-subtle': 'rgba(65,132,228,0.15)',
+  'action-list-item-danger-active-bg': 'rgba(229,83,75,0.24)',
+  'action-list-item-danger-hover-bg': 'rgba(229,83,75,0.16)',
+  'action-list-item-danger-hover-text': '#f47067',
+  'action-list-item-default-active-bg': 'rgba(144,157,171,0.2)',
+  'action-list-item-default-hover-bg': 'rgba(144,157,171,0.12)',
+  'action-list-item-default-selected-bg': 'rgba(144,157,171,0.08)',
+  'action-list-item-inline-divider': 'rgba(68,76,86,0.48)',
+  'ansi-black-bright': '#636e7b',
+  'ansi-black': '#545d68',
+  'ansi-blue-bright': '#6cb6ff',
+  'ansi-blue': '#539bf5',
+  'ansi-cyan-bright': '#56d4dd',
+  'ansi-cyan': '#39c5cf',
+  'ansi-gray': '#636e7b',
+  'ansi-green-bright': '#6bc46d',
+  'ansi-green': '#57ab5a',
+  'ansi-magenta-bright': '#dcbdfb',
+  'ansi-magenta': '#b083f0',
+  'ansi-red-bright': '#ff938a',
+  'ansi-red': '#f47067',
+  'ansi-white-bright': '#cdd9e5',
+  'ansi-white': '#909dab',
+  'ansi-yellow-bright': '#daaa3f',
+  'ansi-yellow': '#c69026',
+  'attention-emphasis': '#966600',
+  'attention-fg': '#c69026',
+  'attention-muted': 'rgba(174,124,20,0.4)',
+  'attention-subtle': 'rgba(174,124,20,0.15)',
+  'avatar-bg': 'rgba(205,217,229,0.1)',
+  'avatar-border': 'rgba(205,217,229,0.1)',
+  'avatar-child-shadow': '-2px -2px 0 #22272e',
+  'avatar-stack-fade-more': '#373e47',
+  'avatar-stack-fade': '#444c56',
+  'border-default': '#444c56',
+  'border-muted': '#373e47',
+  'border-subtle': 'rgba(205,217,229,0.1)',
+  'btn-active-bg': 'hsla(213,12%,27%,1)',
+  'btn-active-border': '#636e7b',
+  'btn-bg': '#373e47',
+  'btn-border': 'rgba(205,217,229,0.1)',
+  'btn-counter-bg': '#444c56',
+  'btn-danger-counter-bg': 'rgba(201,60,55,0.1)',
+  'btn-danger-disabled-bg': '#22272e',
+  'btn-danger-disabled-counter-bg': 'rgba(201,60,55,0.05)',
+  'btn-danger-disabled-text': 'rgba(229,83,75,0.5)',
+  'btn-danger-focus-border': '#e5534b',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(229,83,75,0.4)',
+  'btn-danger-hover-bg': '#c93c37',
+  'btn-danger-hover-border': '#e5534b',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#cdd9e5',
+  'btn-danger-hover-inset-shadow': '0 0 transparent',
+  'btn-danger-hover-shadow': '0 0 transparent',
+  'btn-danger-hover-text': '#cdd9e5',
+  'btn-danger-icon': '#e5534b',
+  'btn-danger-selected-bg': '#ad2e2c',
+  'btn-danger-selected-border': '#f47067',
+  'btn-danger-selected-shadow': '0 0 transparent',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#e5534b',
+  'btn-focus-bg': '#373e47',
+  'btn-focus-border': '#768390',
+  'btn-focus-shadow': '0 0 0 3px rgba(118,131,144,0.3)',
+  'btn-hover-bg': '#444c56',
+  'btn-hover-border': '#768390',
+  'btn-inset-shadow': '0 0 transparent',
+  'btn-outline-counter-bg': 'rgba(49,109,202,0.1)',
+  'btn-outline-disabled-bg': '#22272e',
+  'btn-outline-disabled-counter-bg': 'rgba(49,109,202,0.05)',
+  'btn-outline-disabled-text': 'rgba(83,155,245,0.5)',
+  'btn-outline-focus-border': 'rgba(205,217,229,0.1)',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(37,90,178,0.4)',
+  'btn-outline-hover-bg': '#444c56',
+  'btn-outline-hover-border': 'rgba(205,217,229,0.1)',
+  'btn-outline-hover-counter-bg': 'rgba(205,217,229,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(205,217,229,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(28,33,40,0.1)',
+  'btn-outline-hover-text': '#539bf5',
+  'btn-outline-selected-bg': '#1b4b91',
+  'btn-outline-selected-border': 'rgba(205,217,229,0.1)',
+  'btn-outline-selected-shadow': '0 0 transparent',
+  'btn-outline-selected-text': '#cdd9e5',
+  'btn-outline-text': '#539bf5',
+  'btn-primary-bg': '#347d39',
+  'btn-primary-border': 'rgba(205,217,229,0.1)',
+  'btn-primary-counter-bg': 'rgba(205,217,229,0.2)',
+  'btn-primary-disabled-bg': 'rgba(52,125,57,0.6)',
+  'btn-primary-disabled-border': 'rgba(205,217,229,0.1)',
+  'btn-primary-disabled-text': 'rgba(205,217,229,0.5)',
+  'btn-primary-focus-bg': '#347d39',
+  'btn-primary-focus-border': 'rgba(205,217,229,0.1)',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
+  'btn-primary-hover-bg': '#46954a',
+  'btn-primary-hover-border': 'rgba(205,217,229,0.1)',
+  'btn-primary-icon': '#cdd9e5',
+  'btn-primary-inset-shadow': '0 0 transparent',
+  'btn-primary-selected-bg': '#347d39',
+  'btn-primary-selected-shadow': '0 0 transparent',
+  'btn-primary-shadow': '0 0 transparent',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': '#2d333b',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(28,33,40,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(49,109,202,0.3)',
+  'btn-shadow': '0 0 transparent',
+  'btn-text': '#adbac7',
+  'canvas-default-transparent': 'rgba(34,39,46,0)',
+  'canvas-default': '#22272e',
+  'canvas-inset': '#1c2128',
+  'canvas-overlay': '#2d333b',
+  'canvas-subtle': '#2d333b',
+  'checks-ansi-black-bright': '#2d333b',
+  'checks-ansi-black': '#22272e',
+  'checks-ansi-blue-bright': '#6cb6ff',
+  'checks-ansi-blue': '#539bf5',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#636e7b',
+  'checks-ansi-green-bright': '#6bc46d',
+  'checks-ansi-green': '#57ab5a',
+  'checks-ansi-magenta-bright': '#dcbdfb',
+  'checks-ansi-magenta': '#b083f0',
+  'checks-ansi-red-bright': '#ff938a',
+  'checks-ansi-red': '#f47067',
+  'checks-ansi-white-bright': '#909dab',
+  'checks-ansi-white': '#909dab',
+  'checks-ansi-yellow-bright': '#daaa3f',
+  'checks-ansi-yellow': '#c69026',
+  'checks-bg': '#1c2128',
+  'checks-btn-hover-bg': 'rgba(99,110,123,0.1)',
+  'checks-btn-hover-icon': '#adbac7',
+  'checks-btn-icon': '#768390',
+  'checks-container-border-width': '1px',
+  'checks-donut-error': '#e5534b',
+  'checks-donut-neutral': '#768390',
+  'checks-donut-pending': '#c69026',
+  'checks-donut-success': '#46954a',
+  'checks-dropdown-bg': '#2d333b',
+  'checks-dropdown-border': '#444c56',
+  'checks-dropdown-btn-hover-bg': 'rgba(99,110,123,0.1)',
+  'checks-dropdown-btn-hover-text': '#adbac7',
+  'checks-dropdown-hover-bg': 'rgba(99,110,123,0.1)',
+  'checks-dropdown-hover-text': '#adbac7',
+  'checks-dropdown-shadow': 'rgba(28,33,40,0.3)',
+  'checks-dropdown-text': '#adbac7',
+  'checks-gate-bg': 'rgba(174,124,20,0.15)',
+  'checks-gate-text': '#768390',
+  'checks-gate-waiting-text': '#c69026',
+  'checks-header-border': '#373e47',
+  'checks-header-icon': '#768390',
+  'checks-header-label-open-text': '#adbac7',
+  'checks-header-label-text': '#768390',
+  'checks-input-bg': '#2d333b',
+  'checks-input-focus-text': '#adbac7',
+  'checks-input-placeholder-text': '#545d68',
+  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
+  'checks-input-text': '#768390',
+  'checks-line-dt-fm-bg': '#966600',
+  'checks-line-dt-fm-text': '#cdd9e5',
+  'checks-line-hover-bg': 'rgba(99,110,123,0.1)',
+  'checks-line-num-text': '#545d68',
+  'checks-line-selected-bg': 'rgba(65,132,228,0.15)',
+  'checks-line-selected-num-text': '#539bf5',
+  'checks-line-text': '#768390',
+  'checks-line-timestamp-text': '#545d68',
+  'checks-logline-command-text': '#539bf5',
+  'checks-logline-debug-text': '#986ee2',
+  'checks-logline-error-bg': 'rgba(229,83,75,0.15)',
+  'checks-logline-error-num-text': '#545d68',
+  'checks-logline-error-text': '#768390',
+  'checks-logline-num-text': '#545d68',
+  'checks-logline-section-text': '#57ab5a',
+  'checks-logline-text': '#768390',
+  'checks-logline-warning-bg': 'rgba(174,124,20,0.15)',
+  'checks-logline-warning-num-text': '#c69026',
+  'checks-logline-warning-text': '#768390',
+  'checks-run-border-width': '1px',
+  'checks-scrollbar-thumb-bg': 'rgba(99,110,123,0.4)',
+  'checks-step-error-text': '#e5534b',
+  'checks-step-header-open-bg': '#2d333b',
+  'checks-step-warning-text': '#c69026',
+  'checks-text-link': '#539bf5',
+  'checks-text-primary': '#adbac7',
+  'checks-text-secondary': '#768390',
+  'codemirror-activeline-bg': 'rgba(99,110,123,0.1)',
+  'codemirror-bg': '#22272e',
+  'codemirror-cursor': '#adbac7',
+  'codemirror-guttermarker-subtle-text': '#545d68',
+  'codemirror-guttermarker-text': '#22272e',
+  'codemirror-gutters-bg': '#22272e',
+  'codemirror-linenumber-text': '#768390',
+  'codemirror-lines-bg': '#22272e',
+  'codemirror-matchingbracket-text': '#adbac7',
+  'codemirror-selection-bg': 'rgba(65,132,228,0.4)',
+  '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',
+  'codemirror-text': '#adbac7',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#c93c37',
+  'danger-fg': '#e5534b',
+  'danger-muted': 'rgba(229,83,75,0.4)',
+  'danger-subtle': 'rgba(229,83,75,0.15)',
+  'diff-blob-addition-fg': '#adbac7',
+  'diff-blob-addition-line-bg': 'rgba(70,149,74,0.15)',
+  'diff-blob-addition-num-bg': 'rgba(87,171,90,0.3)',
+  'diff-blob-addition-num-text': '#adbac7',
+  'diff-blob-addition-word-bg': 'rgba(70,149,74,0.4)',
+  'diff-blob-deletion-fg': '#adbac7',
+  'diff-blob-deletion-line-bg': 'rgba(229,83,75,0.15)',
+  'diff-blob-deletion-num-bg': 'rgba(229,83,75,0.3)',
+  'diff-blob-deletion-num-text': '#adbac7',
+  'diff-blob-deletion-word-bg': 'rgba(229,83,75,0.4)',
+  'diff-blob-expander-icon': '#768390',
+  'diff-blob-hunk-num-bg': 'rgba(65,132,228,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
+  'diffstat-addition-bg': '#57ab5a',
+  'diffstat-addition-border': 'rgba(205,217,229,0.1)',
+  'diffstat-deletion-border': 'rgba(205,217,229,0.1)',
+  'done-emphasis': '#8256d0',
+  'done-fg': '#986ee2',
+  'done-muted': 'rgba(152,110,226,0.4)',
+  'done-subtle': 'rgba(152,110,226,0.15)',
+  'fg-default': '#adbac7',
+  'fg-muted': '#768390',
+  'fg-on-emphasis': '#cdd9e5',
+  'fg-subtle': '#545d68',
+  'header-bg': '#2d333b',
+  'header-divider': '#768390',
+  'header-logo': '#cdd9e5',
+  'header-search-bg': '#22272e',
+  'header-search-border': '#444c56',
+  'header-text': 'rgba(205,217,229,0.7)',
+  'input-disabled-bg': 'rgba(99,110,123,0)',
+  'marketing-icon-primary': '#6cb6ff',
+  'marketing-icon-secondary': '#316dca',
+  'menu-bg-active': '#2d333b',
+  'mktg-btn-bg': '#f6f8fa',
+  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
+  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#636e7b',
+  'neutral-emphasis': '#636e7b',
+  'neutral-muted': 'rgba(99,110,123,0.4)',
+  'neutral-subtle': 'rgba(99,110,123,0.1)',
+  'overlay-shadow': '0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)',
+  'page-header-bg': '#22272e',
+  'prettylights-syntax-brackethighlighter-angle': '#768390',
+  'prettylights-syntax-brackethighlighter-unmatched': '#e5534b',
+  'prettylights-syntax-carriage-return-bg': '#ad2e2c',
+  'prettylights-syntax-carriage-return-text': '#cdd9e5',
+  'prettylights-syntax-comment': '#768390',
+  'prettylights-syntax-constant-other-reference-link': '#96d0ff',
+  'prettylights-syntax-constant': '#6cb6ff',
+  'prettylights-syntax-entity-tag': '#8ddb8c',
+  'prettylights-syntax-entity': '#dcbdfb',
+  'prettylights-syntax-invalid-illegal-bg': '#922323',
+  'prettylights-syntax-invalid-illegal-text': '#cdd9e5',
+  'prettylights-syntax-keyword': '#f47067',
+  'prettylights-syntax-markup-bold': '#adbac7',
+  'prettylights-syntax-markup-changed-bg': '#682d0f',
+  'prettylights-syntax-markup-changed-text': '#ffddb0',
+  'prettylights-syntax-markup-deleted-bg': '#78191b',
+  'prettylights-syntax-markup-deleted-text': '#ffd8d3',
+  'prettylights-syntax-markup-heading': '#316dca',
+  'prettylights-syntax-markup-ignored-bg': '#255ab2',
+  'prettylights-syntax-markup-ignored-text': '#adbac7',
+  'prettylights-syntax-markup-inserted-bg': '#1b4721',
+  'prettylights-syntax-markup-inserted-text': '#b4f1b4',
+  'prettylights-syntax-markup-italic': '#adbac7',
+  'prettylights-syntax-markup-list': '#eac55f',
+  'prettylights-syntax-meta-diff-range': '#dcbdfb',
+  'prettylights-syntax-storage-modifier-import': '#adbac7',
+  'prettylights-syntax-string-regexp': '#8ddb8c',
+  'prettylights-syntax-string': '#96d0ff',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#545d68',
+  'prettylights-syntax-variable': '#f69d50',
+  'primer-border-active': '#EC775C',
+  'primer-border-contrast': 'rgba(205,217,229,0.2)',
+  'primer-canvas-backdrop': 'rgba(28,33,40,0.8)',
+  'primer-canvas-sticky': 'rgba(34,39,46,0.95)',
+  'primer-fg-disabled': '#545d68',
+  'primer-shadow-focus': '0 0 0 3px #143d79',
+  'primer-shadow-highlight': '0 0 transparent',
+  'primer-shadow-inset': '0 0 transparent',
+  'project-gradient-in': '#2d333b',
+  'project-gradient-out': 'rgba(45,51,59,0)',
+  'project-header-bg': '#22272e',
+  'project-sidebar-bg': '#2d333b',
+  'scale-black': '#1c2128',
+  'scale-blue-0': '#c6e6ff',
+  'scale-blue-1': '#96d0ff',
+  'scale-blue-2': '#6cb6ff',
+  'scale-blue-3': '#539bf5',
+  'scale-blue-4': '#4184e4',
+  'scale-blue-5': '#316dca',
+  'scale-blue-6': '#255ab2',
+  'scale-blue-7': '#1b4b91',
+  'scale-blue-8': '#143d79',
+  'scale-blue-9': '#0f2d5c',
+  'scale-coral-0': '#FFDACF',
+  'scale-coral-1': '#FFB9A5',
+  'scale-coral-2': '#F79981',
+  'scale-coral-3': '#EC775C',
+  'scale-coral-4': '#DE5B41',
+  'scale-coral-5': '#C2442D',
+  'scale-coral-6': '#A93524',
+  'scale-coral-7': '#8D291B',
+  'scale-coral-8': '#771D13',
+  'scale-coral-9': '#5D1008',
+  'scale-gray-0': '#cdd9e5',
+  'scale-gray-1': '#adbac7',
+  'scale-gray-2': '#909dab',
+  'scale-gray-3': '#768390',
+  'scale-gray-4': '#636e7b',
+  'scale-gray-5': '#545d68',
+  'scale-gray-6': '#444c56',
+  'scale-gray-7': '#373e47',
+  'scale-gray-8': '#2d333b',
+  'scale-gray-9': '#22272e',
+  'scale-green-0': '#b4f1b4',
+  'scale-green-1': '#8ddb8c',
+  'scale-green-2': '#6bc46d',
+  'scale-green-3': '#57ab5a',
+  'scale-green-4': '#46954a',
+  'scale-green-5': '#347d39',
+  'scale-green-6': '#2b6a30',
+  'scale-green-7': '#245829',
+  'scale-green-8': '#1b4721',
+  'scale-green-9': '#113417',
+  'scale-orange-0': '#ffddb0',
+  'scale-orange-1': '#ffbc6f',
+  'scale-orange-2': '#f69d50',
+  'scale-orange-3': '#e0823d',
+  'scale-orange-4': '#cc6b2c',
+  'scale-orange-5': '#ae5622',
+  'scale-orange-6': '#94471b',
+  'scale-orange-7': '#7f3913',
+  'scale-orange-8': '#682d0f',
+  'scale-orange-9': '#4d210c',
+  'scale-pink-0': '#ffd7eb',
+  'scale-pink-1': '#ffb3d8',
+  'scale-pink-2': '#fc8dc7',
+  'scale-pink-3': '#e275ad',
+  'scale-pink-4': '#c96198',
+  'scale-pink-5': '#ae4c82',
+  'scale-pink-6': '#983b6e',
+  'scale-pink-7': '#7e325a',
+  'scale-pink-8': '#69264a',
+  'scale-pink-9': '#551639',
+  'scale-purple-0': '#eedcff',
+  'scale-purple-1': '#dcbdfb',
+  'scale-purple-2': '#dcbdfb',
+  'scale-purple-3': '#b083f0',
+  'scale-purple-4': '#986ee2',
+  'scale-purple-5': '#8256d0',
+  'scale-purple-6': '#6b44bc',
+  'scale-purple-7': '#5936a2',
+  'scale-purple-8': '#472c82',
+  'scale-purple-9': '#352160',
+  'scale-red-0': '#ffd8d3',
+  'scale-red-1': '#ffb8b0',
+  'scale-red-2': '#ff938a',
+  'scale-red-3': '#f47067',
+  'scale-red-4': '#e5534b',
+  'scale-red-5': '#c93c37',
+  'scale-red-6': '#ad2e2c',
+  'scale-red-7': '#922323',
+  'scale-red-8': '#78191b',
+  'scale-red-9': '#5D0F12',
+  'scale-white': '#cdd9e5',
+  'scale-yellow-0': '#fbe090',
+  'scale-yellow-1': '#eac55f',
+  'scale-yellow-2': '#daaa3f',
+  'scale-yellow-3': '#c69026',
+  'scale-yellow-4': '#ae7c14',
+  'scale-yellow-5': '#966600',
+  'scale-yellow-6': '#805400',
+  'scale-yellow-7': '#6c4400',
+  'scale-yellow-8': '#593600',
+  'scale-yellow-9': '#452700',
+  'search-keyword-hl': 'rgba(198,144,38,0.4)',
+  'select-menu-backdrop-border': '#545d68',
+  'select-menu-tap-focus-bg': '#143d79',
+  'select-menu-tap-highlight': 'rgba(68,76,86,0.5)',
+  'severe-emphasis': '#ae5622',
+  'severe-fg': '#cc6b2c',
+  'severe-muted': 'rgba(204,107,44,0.4)',
+  'severe-subtle': 'rgba(204,107,44,0.15)',
+  'shadow-extra-large': '0 12px 48px #1c2128',
+  'shadow-large': '0 8px 24px #1c2128',
+  'shadow-medium': '0 3px 6px #1c2128',
+  'shadow-small': '0 0 transparent',
+  'sidenav-selected-bg': '#373e47',
+  'sponsors-emphasis': '#ae4c82',
+  'sponsors-fg': '#c96198',
+  'sponsors-muted': 'rgba(201,97,152,0.4)',
+  'sponsors-subtle': 'rgba(201,97,152,0.15)',
+  'success-emphasis': '#347d39',
+  'success-fg': '#57ab5a',
+  'success-muted': 'rgba(70,149,74,0.4)',
+  'success-subtle': 'rgba(70,149,74,0.15)',
+  'timeline-badge-bg': '#373e47',
+  'topic-tag-border': 'rgba(0,0,0,0)',
+  'underlinenav-border-hover': 'rgba(99,110,123,0.4)',
+  'underlinenav-icon': '#545d68',
+);

src/styles/themes/darkHighContrast.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#409eff',
+  'accent-fg': '#71b7ff',
+  'accent-muted': '#409eff',
+  'accent-subtle': 'rgba(64,158,255,0.15)',
+  'action-list-item-danger-active-bg': '#ff4445',
+  'action-list-item-danger-hover-bg': '#ff6a69',
+  'action-list-item-danger-hover-text': '#0a0c10',
+  'action-list-item-default-active-bg': 'rgba(217,222,227,0.24)',
+  'action-list-item-default-hover-bg': 'rgba(217,222,227,0.12)',
+  'action-list-item-default-selected-bg': 'rgba(217,222,227,0.08)',
+  'action-list-item-inline-divider': '#7a828e',
+  'ansi-black-bright': '#9ea7b3',
+  'ansi-black': '#7a828e',
+  'ansi-blue-bright': '#91cbff',
+  'ansi-blue': '#71b7ff',
+  'ansi-cyan-bright': '#56d4dd',
+  'ansi-cyan': '#39c5cf',
+  'ansi-gray': '#9ea7b3',
+  'ansi-green-bright': '#4ae168',
+  'ansi-green': '#26cd4d',
+  'ansi-magenta-bright': '#dbb7ff',
+  'ansi-magenta': '#cb9eff',
+  'ansi-red-bright': '#ffb1af',
+  'ansi-red': '#ff9492',
+  'ansi-white-bright': '#ffffff',
+  'ansi-white': '#d9dee3',
+  'ansi-yellow-bright': '#f7c843',
+  'ansi-yellow': '#f0b72f',
+  'attention-emphasis': '#e09b13',
+  'attention-fg': '#f0b72f',
+  'attention-muted': '#e09b13',
+  'attention-subtle': 'rgba(224,155,19,0.15)',
+  'avatar-bg': 'rgba(255,255,255,0.1)',
+  'avatar-border': 'rgba(255,255,255,0.9)',
+  'avatar-child-shadow': '-2px -2px 0 #0a0c10',
+  'avatar-stack-fade-more': '#272b33',
+  'avatar-stack-fade': '#525964',
+  'border-default': '#7a828e',
+  'border-muted': '#7a828e',
+  'border-subtle': '#7a828e',
+  'btn-active-bg': 'hsla(217,10%,33%,1)',
+  'btn-active-border': '#9ea7b3',
+  'btn-bg': '#272b33',
+  'btn-border': '#7a828e',
+  'btn-counter-bg': '#525964',
+  'btn-danger-counter-bg': 'rgba(1,4,9,0.15)',
+  'btn-danger-disabled-bg': '#0a0c10',
+  'btn-danger-disabled-counter-bg': 'rgba(255,106,105,0.05)',
+  'btn-danger-disabled-text': 'rgba(255,106,105,0.5)',
+  'btn-danger-focus-border': '#ff6a69',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(255,106,105,0.4)',
+  'btn-danger-hover-bg': '#ff6a69',
+  'btn-danger-hover-border': '#ff6a69',
+  'btn-danger-hover-counter-bg': 'rgba(1,4,9,0.15)',
+  'btn-danger-hover-icon': '#0a0c10',
+  'btn-danger-hover-inset-shadow': '0 0 transparent',
+  'btn-danger-hover-shadow': '0 0 transparent',
+  'btn-danger-hover-text': '#0a0c10',
+  'btn-danger-icon': '#ff6a69',
+  'btn-danger-selected-bg': '#ff4445',
+  'btn-danger-selected-border': '#ff9492',
+  'btn-danger-selected-shadow': '0 0 transparent',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#ff6a69',
+  'btn-focus-bg': '#272b33',
+  'btn-focus-border': '#bdc4cc',
+  'btn-focus-shadow': '0 0 0 3px rgba(189,196,204,0.3)',
+  'btn-hover-bg': '#525964',
+  'btn-hover-border': '#bdc4cc',
+  'btn-inset-shadow': '0 0 transparent',
+  'btn-outline-counter-bg': 'rgba(64,158,255,0.1)',
+  'btn-outline-disabled-bg': '#0a0c10',
+  'btn-outline-disabled-counter-bg': 'rgba(64,158,255,0.05)',
+  'btn-outline-disabled-text': 'rgba(113,183,255,0.5)',
+  'btn-outline-focus-border': '#7a828e',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(49,139,248,0.4)',
+  'btn-outline-hover-bg': '#525964',
+  'btn-outline-hover-border': '#7a828e',
+  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-outline-hover-text': '#71b7ff',
+  'btn-outline-selected-bg': '#2672f3',
+  'btn-outline-selected-border': '#7a828e',
+  'btn-outline-selected-shadow': '0 0 transparent',
+  'btn-outline-selected-text': '#ffffff',
+  'btn-outline-text': '#71b7ff',
+  'btn-primary-bg': '#09b43a',
+  'btn-primary-border': '#4ae168',
+  'btn-primary-counter-bg': 'rgba(1,4,9,0.15)',
+  'btn-primary-disabled-bg': 'rgba(9,180,58,0.6)',
+  'btn-primary-disabled-border': 'rgba(74,225,104,0.4)',
+  'btn-primary-disabled-text': 'rgba(10,12,16,0.5)',
+  'btn-primary-focus-bg': '#09b43a',
+  'btn-primary-focus-border': '#7a828e',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
+  'btn-primary-hover-bg': '#26cd4d',
+  'btn-primary-hover-border': '#4ae168',
+  'btn-primary-icon': '#0a0c10',
+  'btn-primary-inset-shadow': '0 0 transparent',
+  'btn-primary-selected-bg': '#09b43a',
+  'btn-primary-selected-shadow': '0 0 transparent',
+  'btn-primary-shadow': '0 0 transparent',
+  'btn-primary-text': '#0a0c10',
+  'btn-selected-bg': 'rgba(82,89,100,0.9)',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(64,158,255,0.3)',
+  'btn-shadow': '0 0 transparent',
+  'btn-text': '#f0f3f6',
+  'canvas-default-transparent': 'rgba(10,12,16,0)',
+  'canvas-default': '#0a0c10',
+  'canvas-inset': '#010409',
+  'canvas-overlay': '#272b33',
+  'canvas-subtle': '#272b33',
+  'checks-ansi-black-bright': '#272b33',
+  'checks-ansi-black': '#0a0c10',
+  'checks-ansi-blue-bright': '#91cbff',
+  'checks-ansi-blue': '#71b7ff',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#9ea7b3',
+  'checks-ansi-green-bright': '#4ae168',
+  'checks-ansi-green': '#26cd4d',
+  'checks-ansi-magenta-bright': '#dbb7ff',
+  'checks-ansi-magenta': '#cb9eff',
+  'checks-ansi-red-bright': '#ffb1af',
+  'checks-ansi-red': '#ff9492',
+  'checks-ansi-white-bright': '#d9dee3',
+  'checks-ansi-white': '#d9dee3',
+  'checks-ansi-yellow-bright': '#f7c843',
+  'checks-ansi-yellow': '#f0b72f',
+  'checks-bg': '#010409',
+  'checks-btn-hover-bg': 'rgba(158,167,179,0.1)',
+  'checks-btn-hover-icon': '#f0f3f6',
+  'checks-btn-icon': '#f0f3f6',
+  'checks-container-border-width': '1px',
+  'checks-donut-error': '#ff6a69',
+  'checks-donut-neutral': '#bdc4cc',
+  'checks-donut-pending': '#f0b72f',
+  'checks-donut-success': '#09b43a',
+  'checks-dropdown-bg': '#272b33',
+  'checks-dropdown-border': '#7a828e',
+  'checks-dropdown-btn-hover-bg': 'rgba(158,167,179,0.1)',
+  'checks-dropdown-btn-hover-text': '#f0f3f6',
+  'checks-dropdown-hover-bg': 'rgba(158,167,179,0.1)',
+  'checks-dropdown-hover-text': '#f0f3f6',
+  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
+  'checks-dropdown-text': '#f0f3f6',
+  'checks-gate-bg': 'rgba(224,155,19,0.15)',
+  'checks-gate-text': '#f0f3f6',
+  'checks-gate-waiting-text': '#f0b72f',
+  'checks-header-border': '#7a828e',
+  'checks-header-icon': '#f0f3f6',
+  'checks-header-label-open-text': '#f0f3f6',
+  'checks-header-label-text': '#f0f3f6',
+  'checks-input-bg': '#272b33',
+  'checks-input-focus-text': '#f0f3f6',
+  'checks-input-placeholder-text': '#7a828e',
+  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
+  'checks-input-text': '#f0f3f6',
+  'checks-line-dt-fm-bg': '#e09b13',
+  'checks-line-dt-fm-text': '#0a0c10',
+  'checks-line-hover-bg': 'rgba(158,167,179,0.1)',
+  'checks-line-num-text': '#7a828e',
+  'checks-line-selected-bg': 'rgba(64,158,255,0.15)',
+  'checks-line-selected-num-text': '#71b7ff',
+  'checks-line-text': '#f0f3f6',
+  'checks-line-timestamp-text': '#7a828e',
+  'checks-logline-command-text': '#71b7ff',
+  'checks-logline-debug-text': '#b780ff',
+  'checks-logline-error-bg': 'rgba(255,106,105,0.15)',
+  'checks-logline-error-num-text': '#7a828e',
+  'checks-logline-error-text': '#f0f3f6',
+  'checks-logline-num-text': '#7a828e',
+  'checks-logline-section-text': '#26cd4d',
+  'checks-logline-text': '#f0f3f6',
+  'checks-logline-warning-bg': 'rgba(224,155,19,0.15)',
+  'checks-logline-warning-num-text': '#f0b72f',
+  'checks-logline-warning-text': '#f0f3f6',
+  'checks-run-border-width': '1px',
+  'checks-scrollbar-thumb-bg': 'rgba(158,167,179,0.4)',
+  'checks-step-error-text': '#ff6a69',
+  'checks-step-header-open-bg': '#272b33',
+  'checks-step-warning-text': '#f0b72f',
+  'checks-text-link': '#71b7ff',
+  'checks-text-primary': '#f0f3f6',
+  'checks-text-secondary': '#f0f3f6',
+  'codemirror-activeline-bg': 'rgba(158,167,179,0.1)',
+  'codemirror-bg': '#0a0c10',
+  'codemirror-cursor': '#f0f3f6',
+  'codemirror-guttermarker-subtle-text': '#7a828e',
+  'codemirror-guttermarker-text': '#0a0c10',
+  'codemirror-gutters-bg': '#0a0c10',
+  'codemirror-linenumber-text': '#f0f3f6',
+  'codemirror-lines-bg': '#0a0c10',
+  'codemirror-matchingbracket-text': '#f0f3f6',
+  'codemirror-selection-bg': 'rgba(64,158,255,0.4)',
+  'codemirror-syntax-comment': '#bdc4cc',
+  'codemirror-syntax-constant': '#91cbff',
+  'codemirror-syntax-entity': '#dbb7ff',
+  'codemirror-syntax-keyword': '#ff9492',
+  'codemirror-syntax-storage': '#ff9492',
+  'codemirror-syntax-string': '#addcff',
+  'codemirror-syntax-support': '#91cbff',
+  'codemirror-syntax-variable': '#ffb757',
+  'codemirror-text': '#f0f3f6',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#ff6a69',
+  'danger-fg': '#ff6a69',
+  'danger-muted': '#ff6a69',
+  'danger-subtle': 'rgba(255,106,105,0.15)',
+  'diff-blob-addition-fg': '#0a0c10',
+  'diff-blob-addition-line-bg': 'rgba(9,180,58,0.15)',
+  'diff-blob-addition-num-bg': 'rgba(38,205,77,0.3)',
+  'diff-blob-addition-num-text': '#f0f3f6',
+  'diff-blob-addition-word-bg': '#09b43a',
+  'diff-blob-deletion-fg': '#0a0c10',
+  'diff-blob-deletion-line-bg': 'rgba(255,106,105,0.15)',
+  'diff-blob-deletion-num-bg': 'rgba(255,106,105,0.3)',
+  'diff-blob-deletion-num-text': '#f0f3f6',
+  'diff-blob-deletion-word-bg': '#ff6a69',
+  'diff-blob-expander-icon': '#f0f3f6',
+  'diff-blob-hunk-num-bg': 'rgba(64,158,255,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
+  'diffstat-addition-bg': '#26cd4d',
+  'diffstat-addition-border': '#4ae168',
+  'diffstat-deletion-border': '#ffb1af',
+  'done-emphasis': '#b87fff',
+  'done-fg': '#b780ff',
+  'done-muted': '#b780ff',
+  'done-subtle': 'rgba(183,128,255,0.15)',
+  'fg-default': '#f0f3f6',
+  'fg-muted': '#f0f3f6',
+  'fg-on-emphasis': '#0a0c10',
+  'fg-subtle': '#7a828e',
+  'header-bg': '#272b33',
+  'header-divider': '#bdc4cc',
+  'header-logo': '#ffffff',
+  'header-search-bg': '#0a0c10',
+  'header-search-border': '#525964',
+  'header-text': 'rgba(255,255,255,0.7)',
+  'input-disabled-bg': 'rgba(158,167,179,0)',
+  'marketing-icon-primary': '#91cbff',
+  'marketing-icon-secondary': '#409eff',
+  'menu-bg-active': '#272b33',
+  'mktg-btn-bg': '#f6f8fa',
+  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
+  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#ffffff',
+  'neutral-emphasis': '#9ea7b3',
+  'neutral-muted': 'rgba(158,167,179,0.4)',
+  'neutral-subtle': 'rgba(158,167,179,0.1)',
+  'overlay-shadow': '0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)',
+  'page-header-bg': '#0a0c10',
+  'prettylights-syntax-brackethighlighter-angle': '#bdc4cc',
+  'prettylights-syntax-brackethighlighter-unmatched': '#ff6a69',
+  'prettylights-syntax-carriage-return-bg': '#ff4445',
+  'prettylights-syntax-carriage-return-text': '#ffffff',
+  'prettylights-syntax-comment': '#bdc4cc',
+  'prettylights-syntax-constant-other-reference-link': '#addcff',
+  'prettylights-syntax-constant': '#91cbff',
+  'prettylights-syntax-entity-tag': '#72f088',
+  'prettylights-syntax-entity': '#dbb7ff',
+  'prettylights-syntax-invalid-illegal-bg': '#e82a2f',
+  'prettylights-syntax-invalid-illegal-text': '#ffffff',
+  'prettylights-syntax-keyword': '#ff9492',
+  'prettylights-syntax-markup-bold': '#f0f3f6',
+  'prettylights-syntax-markup-changed-bg': '#a74c00',
+  'prettylights-syntax-markup-changed-text': '#ffe1b4',
+  'prettylights-syntax-markup-deleted-bg': '#cc1421',
+  'prettylights-syntax-markup-deleted-text': '#ffdedb',
+  'prettylights-syntax-markup-heading': '#409eff',
+  'prettylights-syntax-markup-ignored-bg': '#318bf8',
+  'prettylights-syntax-markup-ignored-text': '#f0f3f6',
+  'prettylights-syntax-markup-inserted-bg': '#007728',
+  'prettylights-syntax-markup-inserted-text': '#acf7b6',
+  'prettylights-syntax-markup-italic': '#f0f3f6',
+  'prettylights-syntax-markup-list': '#fbd669',
+  'prettylights-syntax-meta-diff-range': '#dbb7ff',
+  'prettylights-syntax-storage-modifier-import': '#f0f3f6',
+  'prettylights-syntax-string-regexp': '#72f088',
+  'prettylights-syntax-string': '#addcff',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#7a828e',
+  'prettylights-syntax-variable': '#ffb757',
+  'primer-border-active': '#FF967D',
+  'primer-border-contrast': 'rgba(255,255,255,0.2)',
+  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
+  'primer-canvas-sticky': 'rgba(10,12,16,0.95)',
+  'primer-fg-disabled': '#7a828e',
+  'primer-shadow-focus': '0 0 0 3px #1e60d5',
+  'primer-shadow-highlight': '0 0 transparent',
+  'primer-shadow-inset': '0 0 transparent',
+  'project-gradient-in': '#272b33',
+  'project-gradient-out': 'rgba(39,43,51,0)',
+  'project-header-bg': '#0a0c10',
+  'project-sidebar-bg': '#272b33',
+  'scale-black': '#010409',
+  'scale-blue-0': '#caeaff',
+  'scale-blue-1': '#addcff',
+  'scale-blue-2': '#91cbff',
+  'scale-blue-3': '#71b7ff',
+  'scale-blue-4': '#409eff',
+  'scale-blue-5': '#409eff',
+  'scale-blue-6': '#318bf8',
+  'scale-blue-7': '#2672f3',
+  'scale-blue-8': '#1e60d5',
+  'scale-blue-9': '#194fb1',
+  'scale-coral-0': '#FFDED4',
+  'scale-coral-1': '#FFCBB9',
+  'scale-coral-2': '#FFB39B',
+  'scale-coral-3': '#FF967D',
+  'scale-coral-4': '#FC704F',
+  'scale-coral-5': '#FC704F',
+  'scale-coral-6': '#F75133',
+  'scale-coral-7': '#E03B21',
+  'scale-coral-8': '#C62612',
+  'scale-coral-9': '#A91500',
+  'scale-gray-0': '#ffffff',
+  'scale-gray-1': '#f0f3f6',
+  'scale-gray-2': '#d9dee3',
+  'scale-gray-3': '#bdc4cc',
+  'scale-gray-4': '#9ea7b3',
+  'scale-gray-5': '#7a828e',
+  'scale-gray-6': '#525964',
+  'scale-gray-7': '#272b33',
+  'scale-gray-8': '#272b33',
+  'scale-gray-9': '#0a0c10',
+  'scale-green-0': '#acf7b6',
+  'scale-green-1': '#72f088',
+  'scale-green-2': '#4ae168',
+  'scale-green-3': '#26cd4d',
+  'scale-green-4': '#09b43a',
+  'scale-green-5': '#09b43a',
+  'scale-green-6': '#02a232',
+  'scale-green-7': '#008c2c',
+  'scale-green-8': '#007728',
+  'scale-green-9': '#006222',
+  'scale-orange-0': '#ffe1b4',
+  'scale-orange-1': '#ffcf86',
+  'scale-orange-2': '#ffb757',
+  'scale-orange-3': '#fe9a2d',
+  'scale-orange-4': '#e7811d',
+  'scale-orange-5': '#e7811d',
+  'scale-orange-6': '#d57014',
+  'scale-orange-7': '#bf5e0a',
+  'scale-orange-8': '#a74c00',
+  'scale-orange-9': '#8f3c00',
+  'scale-pink-0': '#ffdceb',
+  'scale-pink-1': '#ffc7e1',
+  'scale-pink-2': '#ffadd4',
+  'scale-pink-3': '#ff8dc7',
+  'scale-pink-4': '#ef6eb1',
+  'scale-pink-5': '#ef6eb1',
+  'scale-pink-6': '#e456a3',
+  'scale-pink-7': '#d23d91',
+  'scale-pink-8': '#b72c7d',
+  'scale-pink-9': '#9c1d6a',
+  'scale-purple-0': '#f0dfff',
+  'scale-purple-1': '#e6ccff',
+  'scale-purple-2': '#dbb7ff',
+  'scale-purple-3': '#cb9eff',
+  'scale-purple-4': '#b780ff',
+  'scale-purple-5': '#b87fff',
+  'scale-purple-6': '#a66bff',
+  'scale-purple-7': '#954ffd',
+  'scale-purple-8': '#8031f7',
+  'scale-purple-9': '#6921d7',
+  'scale-red-0': '#ffdedb',
+  'scale-red-1': '#ffc9c7',
+  'scale-red-2': '#ffb1af',
+  'scale-red-3': '#ff9492',
+  'scale-red-4': '#ff6a69',
+  'scale-red-5': '#ff6a69',
+  'scale-red-6': '#ff4445',
+  'scale-red-7': '#e82a2f',
+  'scale-red-8': '#cc1421',
+  'scale-red-9': '#ad0116',
+  'scale-white': '#ffffff',
+  'scale-yellow-0': '#fbe59e',
+  'scale-yellow-1': '#fbd669',
+  'scale-yellow-2': '#f7c843',
+  'scale-yellow-3': '#f0b72f',
+  'scale-yellow-4': '#e09b13',
+  'scale-yellow-5': '#e09b13',
+  'scale-yellow-6': '#c88508',
+  'scale-yellow-7': '#ae7104',
+  'scale-yellow-8': '#945d02',
+  'scale-yellow-9': '#7b4900',
+  'search-keyword-hl': 'rgba(240,183,47,0.4)',
+  'select-menu-backdrop-border': '#7a828e',
+  'select-menu-tap-focus-bg': '#1e60d5',
+  'select-menu-tap-highlight': 'rgba(82,89,100,0.5)',
+  'severe-emphasis': '#e7811d',
+  'severe-fg': '#e7811d',
+  'severe-muted': '#e7811d',
+  'severe-subtle': 'rgba(231,129,29,0.15)',
+  'shadow-extra-large': '0 12px 48px #010409',
+  'shadow-large': '0 8px 24px #010409',
+  'shadow-medium': '0 3px 6px #010409',
+  'shadow-small': '0 0 transparent',
+  'sidenav-selected-bg': '#272b33',
+  'sponsors-emphasis': '#ef6eb1',
+  'sponsors-fg': '#ef6eb1',
+  'sponsors-muted': '#ef6eb1',
+  'sponsors-subtle': 'rgba(239,110,177,0.15)',
+  'success-emphasis': '#09b43a',
+  'success-fg': '#26cd4d',
+  'success-muted': '#09b43a',
+  'success-subtle': 'rgba(9,180,58,0.15)',
+  'timeline-badge-bg': '#272b33',
+  'topic-tag-border': '#409eff',
+  'underlinenav-border-hover': '#bdc4cc',
+  'underlinenav-icon': '#f0f3f6',
+);

src/styles/themes/light.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#0969da',
+  'accent-fg': '#0969da',
+  'accent-muted': 'rgba(84,174,255,0.4)',
+  'accent-subtle': '#ddf4ff',
+  'action-list-item-danger-active-bg': '#FFEBE9',
+  'action-list-item-danger-hover-bg': 'rgba(255,235,233,0.64)',
+  'action-list-item-danger-hover-text': '#cf222e',
+  'action-list-item-default-active-bg': 'rgba(208,215,222,0.48)',
+  'action-list-item-default-hover-bg': 'rgba(208,215,222,0.32)',
+  'action-list-item-default-selected-bg': 'rgba(208,215,222,0.24)',
+  'action-list-item-inline-divider': 'rgba(208,215,222,0.48)',
+  'ansi-black-bright': '#57606a',
+  'ansi-black': '#24292f',
+  'ansi-blue-bright': '#218bff',
+  'ansi-blue': '#0969da',
+  'ansi-cyan-bright': '#3192aa',
+  'ansi-cyan': '#1b7c83',
+  'ansi-gray': '#6e7781',
+  'ansi-green-bright': '#1a7f37',
+  'ansi-green': '#116329',
+  'ansi-magenta-bright': '#a475f9',
+  'ansi-magenta': '#8250df',
+  'ansi-red-bright': '#a40e26',
+  'ansi-red': '#cf222e',
+  'ansi-white-bright': '#8c959f',
+  'ansi-white': '#6e7781',
+  'ansi-yellow-bright': '#633c01',
+  'ansi-yellow': '#4d2d00',
+  'attention-emphasis': '#bf8700',
+  'attention-fg': '#9a6700',
+  'attention-muted': 'rgba(212,167,44,0.4)',
+  'attention-subtle': '#fff8c5',
+  'avatar-bg': '#ffffff',
+  'avatar-border': 'rgba(27,31,36,0.15)',
+  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
+  'avatar-stack-fade-more': '#d0d7de',
+  'avatar-stack-fade': '#afb8c1',
+  'border-default': '#d0d7de',
+  'border-muted': 'hsla(210,18%,87%,1)',
+  'border-subtle': 'rgba(27,31,36,0.15)',
+  'btn-active-bg': 'hsla(220,14%,93%,1)',
+  'btn-active-border': 'rgba(27,31,36,0.15)',
+  'btn-bg': '#f6f8fa',
+  'btn-border': 'rgba(27,31,36,0.15)',
+  'btn-counter-bg': 'rgba(27,31,36,0.08)',
+  'btn-danger-counter-bg': 'rgba(207,34,46,0.1)',
+  'btn-danger-disabled-bg': '#f6f8fa',
+  'btn-danger-disabled-counter-bg': 'rgba(207,34,46,0.05)',
+  'btn-danger-disabled-text': 'rgba(207,34,46,0.5)',
+  'btn-danger-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(164,14,38,0.4)',
+  'btn-danger-hover-bg': '#a40e26',
+  'btn-danger-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#ffffff',
+  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-danger-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-danger-hover-text': '#ffffff',
+  'btn-danger-icon': '#cf222e',
+  'btn-danger-selected-bg': 'hsla(356,72%,44%,1)',
+  'btn-danger-selected-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(76,0,20,0.2)',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#cf222e',
+  'btn-focus-bg': '#f6f8fa',
+  'btn-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-focus-shadow': '0 0 0 3px rgba(9,105,218,0.3)',
+  'btn-hover-bg': '#f3f4f6',
+  'btn-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'btn-outline-counter-bg': 'rgba(9,105,218,0.1)',
+  'btn-outline-disabled-bg': '#f6f8fa',
+  'btn-outline-disabled-counter-bg': 'rgba(9,105,218,0.05)',
+  'btn-outline-disabled-text': 'rgba(9,105,218,0.5)',
+  'btn-outline-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(5,80,174,0.4)',
+  'btn-outline-hover-bg': '#0969da',
+  'btn-outline-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-outline-hover-text': '#ffffff',
+  'btn-outline-selected-bg': 'hsla(212,92%,42%,1)',
+  'btn-outline-selected-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
+  'btn-outline-selected-text': '#ffffff',
+  'btn-outline-text': '#0969da',
+  'btn-primary-bg': '#2da44e',
+  'btn-primary-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-primary-disabled-bg': '#94d3a2',
+  'btn-primary-disabled-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
+  'btn-primary-focus-bg': '#2da44e',
+  'btn-primary-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(45,164,78,0.4)',
+  'btn-primary-hover-bg': '#2c974b',
+  'btn-primary-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-icon': 'rgba(255,255,255,0.8)',
+  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-primary-selected-bg': 'hsla(137,55%,36%,1)',
+  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,45,17,0.2)',
+  'btn-primary-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': 'hsla(220,14%,94%,1)',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(27,31,36,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(9,105,218,0.3)',
+  'btn-shadow': '0 1px 0 rgba(27,31,36,0.04)',
+  'btn-text': '#24292f',
+  'canvas-default-transparent': 'rgba(255,255,255,0)',
+  'canvas-default': '#ffffff',
+  'canvas-inset': '#f6f8fa',
+  'canvas-overlay': '#ffffff',
+  'canvas-subtle': '#f6f8fa',
+  'checks-ansi-black-bright': '#32383f',
+  'checks-ansi-black': '#24292f',
+  'checks-ansi-blue-bright': '#80ccff',
+  'checks-ansi-blue': '#54aeff',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#8c959f',
+  'checks-ansi-green-bright': '#6fdd8b',
+  'checks-ansi-green': '#4ac26b',
+  'checks-ansi-magenta-bright': '#d8b9ff',
+  'checks-ansi-magenta': '#c297ff',
+  'checks-ansi-red-bright': '#ffaba8',
+  'checks-ansi-red': '#ff8182',
+  'checks-ansi-white-bright': '#d0d7de',
+  'checks-ansi-white': '#d0d7de',
+  'checks-ansi-yellow-bright': '#eac54f',
+  'checks-ansi-yellow': '#d4a72c',
+  'checks-bg': '#24292f',
+  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
+  'checks-btn-hover-icon': '#f6f8fa',
+  'checks-btn-icon': '#afb8c1',
+  'checks-container-border-width': '0px',
+  'checks-donut-error': '#fa4549',
+  'checks-donut-neutral': '#afb8c1',
+  'checks-donut-pending': '#bf8700',
+  'checks-donut-success': '#2da44e',
+  'checks-dropdown-bg': '#32383f',
+  'checks-dropdown-border': '#424a53',
+  'checks-dropdown-btn-hover-bg': '#32383f',
+  'checks-dropdown-btn-hover-text': '#f6f8fa',
+  'checks-dropdown-hover-bg': '#424a53',
+  'checks-dropdown-hover-text': '#f6f8fa',
+  'checks-dropdown-shadow': 'rgba(27,31,36,0.3)',
+  'checks-dropdown-text': '#afb8c1',
+  'checks-gate-bg': 'rgba(125,78,0,0.15)',
+  'checks-gate-text': '#d0d7de',
+  'checks-gate-waiting-text': '#afb8c1',
+  'checks-header-border': '#32383f',
+  'checks-header-icon': '#8c959f',
+  'checks-header-label-open-text': '#f6f8fa',
+  'checks-header-label-text': '#d0d7de',
+  'checks-input-bg': '#32383f',
+  'checks-input-focus-text': '#8c959f',
+  'checks-input-placeholder-text': '#8c959f',
+  'checks-input-shadow': 'none',
+  'checks-input-text': '#eaeef2',
+  'checks-line-dt-fm-bg': '#9a6700',
+  'checks-line-dt-fm-text': '#24292f',
+  'checks-line-hover-bg': '#32383f',
+  'checks-line-num-text': 'rgba(140,149,159,0.75)',
+  'checks-line-selected-bg': 'rgba(33,139,255,0.15)',
+  'checks-line-selected-num-text': '#54aeff',
+  'checks-line-text': '#d0d7de',
+  'checks-line-timestamp-text': '#8c959f',
+  'checks-logline-command-text': '#54aeff',
+  'checks-logline-debug-text': '#c297ff',
+  'checks-logline-error-bg': 'rgba(164,14,38,0.15)',
+  'checks-logline-error-num-text': '#ff8182',
+  'checks-logline-error-text': '#d0d7de',
+  'checks-logline-num-text': 'rgba(140,149,159,0.75)',
+  'checks-logline-section-text': '#4ac26b',
+  'checks-logline-text': '#8c959f',
+  'checks-logline-warning-bg': 'rgba(125,78,0,0.15)',
+  'checks-logline-warning-num-text': '#d4a72c',
+  'checks-logline-warning-text': '#d0d7de',
+  'checks-run-border-width': '0px',
+  'checks-scrollbar-thumb-bg': '#57606a',
+  'checks-step-error-text': '#ff8182',
+  'checks-step-header-open-bg': '#32383f',
+  'checks-step-warning-text': '#d4a72c',
+  'checks-text-link': '#54aeff',
+  'checks-text-primary': '#f6f8fa',
+  'checks-text-secondary': '#8c959f',
+  'codemirror-activeline-bg': 'rgba(234,238,242,0.5)',
+  'codemirror-bg': '#ffffff',
+  'codemirror-cursor': '#24292f',
+  'codemirror-guttermarker-subtle-text': '#6e7781',
+  'codemirror-guttermarker-text': '#ffffff',
+  'codemirror-gutters-bg': '#ffffff',
+  'codemirror-linenumber-text': '#57606a',
+  'codemirror-lines-bg': '#ffffff',
+  'codemirror-matchingbracket-text': '#24292f',
+  'codemirror-selection-bg': 'rgba(84,174,255,0.4)',
+  'codemirror-syntax-comment': '#24292f',
+  'codemirror-syntax-constant': '#0550ae',
+  'codemirror-syntax-entity': '#8250df',
+  'codemirror-syntax-keyword': '#cf222e',
+  'codemirror-syntax-storage': '#cf222e',
+  'codemirror-syntax-string': '#0a3069',
+  'codemirror-syntax-support': '#0550ae',
+  'codemirror-syntax-variable': '#953800',
+  'codemirror-text': '#24292f',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#cf222e',
+  'danger-fg': '#cf222e',
+  'danger-muted': 'rgba(255,129,130,0.4)',
+  'danger-subtle': '#FFEBE9',
+  'diff-blob-addition-fg': '#24292f',
+  'diff-blob-addition-line-bg': '#E6FFEC',
+  'diff-blob-addition-num-bg': '#CCFFD8',
+  'diff-blob-addition-num-text': '#24292f',
+  'diff-blob-addition-word-bg': '#ABF2BC',
+  'diff-blob-deletion-fg': '#24292f',
+  'diff-blob-deletion-line-bg': '#FFEBE9',
+  'diff-blob-deletion-num-bg': '#FFD7D5',
+  'diff-blob-deletion-num-text': '#24292f',
+  'diff-blob-deletion-word-bg': 'rgba(255,129,130,0.4)',
+  'diff-blob-expander-icon': '#57606a',
+  'diff-blob-hunk-num-bg': 'rgba(84,174,255,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
+  'diffstat-addition-bg': '#2da44e',
+  'diffstat-addition-border': 'rgba(27,31,36,0.15)',
+  'diffstat-deletion-border': 'rgba(27,31,36,0.15)',
+  'done-emphasis': '#8250df',
+  'done-fg': '#8250df',
+  'done-muted': 'rgba(194,151,255,0.4)',
+  'done-subtle': '#fbefff',
+  'fg-default': '#24292f',
+  'fg-muted': '#57606a',
+  'fg-on-emphasis': '#ffffff',
+  'fg-subtle': '#6e7781',
+  'header-bg': '#24292f',
+  'header-divider': '#57606a',
+  'header-logo': '#ffffff',
+  'header-search-bg': '#24292f',
+  'header-search-border': '#57606a',
+  'header-text': 'rgba(255,255,255,0.7)',
+  'input-disabled-bg': 'rgba(175,184,193,0.2)',
+  'marketing-icon-primary': '#218bff',
+  'marketing-icon-secondary': '#54aeff',
+  'menu-bg-active': 'rgba(0,0,0,0)',
+  'mktg-btn-bg': '#1b1f23',
+  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
+  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#24292f',
+  'neutral-emphasis': '#6e7781',
+  'neutral-muted': 'rgba(175,184,193,0.2)',
+  'neutral-subtle': 'rgba(234,238,242,0.5)',
+  'overlay-shadow': '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
+  'page-header-bg': '#f6f8fa',
+  'prettylights-syntax-brackethighlighter-angle': '#57606a',
+  'prettylights-syntax-brackethighlighter-unmatched': '#82071e',
+  'prettylights-syntax-carriage-return-bg': '#cf222e',
+  'prettylights-syntax-carriage-return-text': '#f6f8fa',
+  'prettylights-syntax-comment': '#6e7781',
+  'prettylights-syntax-constant-other-reference-link': '#0a3069',
+  'prettylights-syntax-constant': '#0550ae',
+  'prettylights-syntax-entity-tag': '#116329',
+  'prettylights-syntax-entity': '#8250df',
+  'prettylights-syntax-invalid-illegal-bg': '#82071e',
+  'prettylights-syntax-invalid-illegal-text': '#f6f8fa',
+  'prettylights-syntax-keyword': '#cf222e',
+  'prettylights-syntax-markup-bold': '#24292f',
+  'prettylights-syntax-markup-changed-bg': '#ffd8b5',
+  'prettylights-syntax-markup-changed-text': '#953800',
+  'prettylights-syntax-markup-deleted-bg': '#FFEBE9',
+  'prettylights-syntax-markup-deleted-text': '#82071e',
+  'prettylights-syntax-markup-heading': '#0550ae',
+  'prettylights-syntax-markup-ignored-bg': '#0550ae',
+  'prettylights-syntax-markup-ignored-text': '#eaeef2',
+  'prettylights-syntax-markup-inserted-bg': '#dafbe1',
+  'prettylights-syntax-markup-inserted-text': '#116329',
+  'prettylights-syntax-markup-italic': '#24292f',
+  'prettylights-syntax-markup-list': '#3b2300',
+  'prettylights-syntax-meta-diff-range': '#8250df',
+  'prettylights-syntax-storage-modifier-import': '#24292f',
+  'prettylights-syntax-string-regexp': '#116329',
+  'prettylights-syntax-string': '#0a3069',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#8c959f',
+  'prettylights-syntax-variable': '#953800',
+  'primer-border-active': '#FD8C73',
+  'primer-border-contrast': 'rgba(27,31,36,0.1)',
+  'primer-canvas-backdrop': 'rgba(27,31,36,0.5)',
+  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
+  'primer-fg-disabled': '#8c959f',
+  'primer-shadow-focus': '0 0 0 3px rgba(9,105,218,0.3)',
+  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'primer-shadow-inset': 'inset 0 1px 0 rgba(208,215,222,0.2)',
+  'project-gradient-in': '#ffffff',
+  'project-gradient-out': 'rgba(255,255,255,0)',
+  'project-header-bg': '#24292f',
+  'project-sidebar-bg': '#ffffff',
+  'scale-black': '#1b1f24',
+  'scale-blue-0': '#ddf4ff',
+  'scale-blue-1': '#b6e3ff',
+  'scale-blue-2': '#80ccff',
+  'scale-blue-3': '#54aeff',
+  'scale-blue-4': '#218bff',
+  'scale-blue-5': '#0969da',
+  'scale-blue-6': '#0550ae',
+  'scale-blue-7': '#033d8b',
+  'scale-blue-8': '#0a3069',
+  'scale-blue-9': '#002155',
+  'scale-coral-0': '#FFF0EB',
+  'scale-coral-1': '#FFD6CC',
+  'scale-coral-2': '#FFB4A1',
+  'scale-coral-3': '#FD8C73',
+  'scale-coral-4': '#EC6547',
+  'scale-coral-5': '#C4432B',
+  'scale-coral-6': '#9E2F1C',
+  'scale-coral-7': '#801F0F',
+  'scale-coral-8': '#691105',
+  'scale-coral-9': '#510901',
+  'scale-gray-0': '#f6f8fa',
+  'scale-gray-1': '#eaeef2',
+  'scale-gray-2': '#d0d7de',
+  'scale-gray-3': '#afb8c1',
+  'scale-gray-4': '#8c959f',
+  'scale-gray-5': '#6e7781',
+  'scale-gray-6': '#57606a',
+  'scale-gray-7': '#424a53',
+  'scale-gray-8': '#32383f',
+  'scale-gray-9': '#24292f',
+  'scale-green-0': '#dafbe1',
+  'scale-green-1': '#aceebb',
+  'scale-green-2': '#6fdd8b',
+  'scale-green-3': '#4ac26b',
+  'scale-green-4': '#2da44e',
+  'scale-green-5': '#1a7f37',
+  'scale-green-6': '#116329',
+  'scale-green-7': '#044f1e',
+  'scale-green-8': '#003d16',
+  'scale-green-9': '#002d11',
+  'scale-orange-0': '#fff1e5',
+  'scale-orange-1': '#ffd8b5',
+  'scale-orange-2': '#ffb77c',
+  'scale-orange-3': '#fb8f44',
+  'scale-orange-4': '#e16f24',
+  'scale-orange-5': '#bc4c00',
+  'scale-orange-6': '#953800',
+  'scale-orange-7': '#762c00',
+  'scale-orange-8': '#5c2200',
+  'scale-orange-9': '#471700',
+  'scale-pink-0': '#ffeff7',
+  'scale-pink-1': '#ffd3eb',
+  'scale-pink-2': '#ffadda',
+  'scale-pink-3': '#ff80c8',
+  'scale-pink-4': '#e85aad',
+  'scale-pink-5': '#bf3989',
+  'scale-pink-6': '#99286e',
+  'scale-pink-7': '#772057',
+  'scale-pink-8': '#611347',
+  'scale-pink-9': '#4d0336',
+  'scale-purple-0': '#fbefff',
+  'scale-purple-1': '#ecd8ff',
+  'scale-purple-2': '#d8b9ff',
+  'scale-purple-3': '#c297ff',
+  'scale-purple-4': '#a475f9',
+  'scale-purple-5': '#8250df',
+  'scale-purple-6': '#6639ba',
+  'scale-purple-7': '#512a97',
+  'scale-purple-8': '#3e1f79',
+  'scale-purple-9': '#2e1461',
+  'scale-red-0': '#FFEBE9',
+  'scale-red-1': '#ffcecb',
+  'scale-red-2': '#ffaba8',
+  'scale-red-3': '#ff8182',
+  'scale-red-4': '#fa4549',
+  'scale-red-5': '#cf222e',
+  'scale-red-6': '#a40e26',
+  'scale-red-7': '#82071e',
+  'scale-red-8': '#660018',
+  'scale-red-9': '#4c0014',
+  'scale-white': '#ffffff',
+  'scale-yellow-0': '#fff8c5',
+  'scale-yellow-1': '#fae17d',
+  'scale-yellow-2': '#eac54f',
+  'scale-yellow-3': '#d4a72c',
+  'scale-yellow-4': '#bf8700',
+  'scale-yellow-5': '#9a6700',
+  'scale-yellow-6': '#7d4e00',
+  'scale-yellow-7': '#633c01',
+  'scale-yellow-8': '#4d2d00',
+  'scale-yellow-9': '#3b2300',
+  'search-keyword-hl': '#fff8c5',
+  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
+  'select-menu-tap-focus-bg': '#b6e3ff',
+  'select-menu-tap-highlight': 'rgba(175,184,193,0.5)',
+  'severe-emphasis': '#bc4c00',
+  'severe-fg': '#bc4c00',
+  'severe-muted': 'rgba(251,143,68,0.4)',
+  'severe-subtle': '#fff1e5',
+  'shadow-extra-large': '0 12px 28px rgba(140,149,159,0.3)',
+  'shadow-large': '0 8px 24px rgba(140,149,159,0.2)',
+  'shadow-medium': '0 3px 6px rgba(140,149,159,0.15)',
+  'shadow-small': '0 1px 0 rgba(27,31,36,0.04)',
+  'sidenav-selected-bg': '#ffffff',
+  'sponsors-emphasis': '#bf3989',
+  'sponsors-fg': '#bf3989',
+  'sponsors-muted': 'rgba(255,128,200,0.4)',
+  'sponsors-subtle': '#ffeff7',
+  'success-emphasis': '#2da44e',
+  'success-fg': '#1a7f37',
+  'success-muted': 'rgba(74,194,107,0.4)',
+  'success-subtle': '#dafbe1',
+  'timeline-badge-bg': '#eaeef2',
+  'topic-tag-border': 'rgba(0,0,0,0)',
+  'underlinenav-border-hover': 'rgba(175,184,193,0.2)',
+  'underlinenav-icon': '#6e7781',
+);

src/styles/themes/lightColorblind.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#0969da',
+  'accent-fg': '#0969da',
+  'accent-muted': 'rgba(84,174,255,0.4)',
+  'accent-subtle': '#ddf4ff',
+  'action-list-item-danger-active-bg': '#fefe48',
+  'action-list-item-danger-hover-bg': 'rgba(254,254,72,0.64)',
+  'action-list-item-danger-hover-text': '#ac5e00',
+  'action-list-item-default-active-bg': 'rgba(208,215,222,0.48)',
+  'action-list-item-default-hover-bg': 'rgba(208,215,222,0.32)',
+  'action-list-item-default-selected-bg': 'rgba(208,215,222,0.24)',
+  'action-list-item-inline-divider': 'rgba(208,215,222,0.48)',
+  'ansi-black-bright': '#57606a',
+  'ansi-black': '#24292f',
+  'ansi-blue-bright': '#218bff',
+  'ansi-blue': '#0969da',
+  'ansi-cyan-bright': '#3192aa',
+  'ansi-cyan': '#1b7c83',
+  'ansi-gray': '#6e7781',
+  'ansi-green-bright': '#0566d5',
+  'ansi-green': '#054da9',
+  'ansi-magenta-bright': '#a475f9',
+  'ansi-magenta': '#8250df',
+  'ansi-red-bright': '#8b4600',
+  'ansi-red': '#ac5e00',
+  'ansi-white-bright': '#8c959f',
+  'ansi-white': '#6e7781',
+  'ansi-yellow-bright': '#633c01',
+  'ansi-yellow': '#4d2d00',
+  'attention-emphasis': '#bf8700',
+  'attention-fg': '#9a6700',
+  'attention-muted': 'rgba(212,167,44,0.4)',
+  'attention-subtle': '#fff8c5',
+  'avatar-bg': '#ffffff',
+  'avatar-border': 'rgba(27,31,36,0.15)',
+  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
+  'avatar-stack-fade-more': '#d0d7de',
+  'avatar-stack-fade': '#afb8c1',
+  'border-default': '#d0d7de',
+  'border-muted': 'hsla(210,18%,87%,1)',
+  'border-subtle': 'rgba(27,31,36,0.15)',
+  'btn-active-bg': 'hsla(220,14%,93%,1)',
+  'btn-active-border': 'rgba(27,31,36,0.15)',
+  'btn-bg': '#f6f8fa',
+  'btn-border': 'rgba(27,31,36,0.15)',
+  'btn-counter-bg': 'rgba(27,31,36,0.08)',
+  'btn-danger-counter-bg': 'rgba(172,94,0,0.1)',
+  'btn-danger-disabled-bg': '#f6f8fa',
+  'btn-danger-disabled-counter-bg': 'rgba(172,94,0,0.05)',
+  'btn-danger-disabled-text': 'rgba(172,94,0,0.5)',
+  'btn-danger-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(139,70,0,0.4)',
+  'btn-danger-hover-bg': '#8b4600',
+  'btn-danger-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#ffffff',
+  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-danger-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-danger-hover-text': '#ffffff',
+  'btn-danger-icon': '#ac5e00',
+  'btn-danger-selected-bg': 'hsla(33,100%,31%,1)',
+  'btn-danger-selected-border': 'rgba(27,31,36,0.15)',
+  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(47,41,0,0.2)',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#ac5e00',
+  'btn-focus-bg': '#f6f8fa',
+  'btn-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-focus-shadow': '0 0 0 3px rgba(9,105,218,0.3)',
+  'btn-hover-bg': '#f3f4f6',
+  'btn-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'btn-outline-counter-bg': 'rgba(9,105,218,0.1)',
+  'btn-outline-disabled-bg': '#f6f8fa',
+  'btn-outline-disabled-counter-bg': 'rgba(9,105,218,0.05)',
+  'btn-outline-disabled-text': 'rgba(9,105,218,0.5)',
+  'btn-outline-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(5,80,174,0.4)',
+  'btn-outline-hover-bg': '#0969da',
+  'btn-outline-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-outline-hover-text': '#ffffff',
+  'btn-outline-selected-bg': 'hsla(212,92%,42%,1)',
+  'btn-outline-selected-border': 'rgba(27,31,36,0.15)',
+  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
+  'btn-outline-selected-text': '#ffffff',
+  'btn-outline-text': '#0969da',
+  'btn-primary-bg': '#0088ff',
+  'btn-primary-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-primary-disabled-bg': '#65ccff',
+  'btn-primary-disabled-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
+  'btn-primary-focus-bg': '#0088ff',
+  'btn-primary-focus-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(0,136,255,0.4)',
+  'btn-primary-hover-bg': '#0566d5',
+  'btn-primary-hover-border': 'rgba(27,31,36,0.15)',
+  'btn-primary-icon': 'rgba(255,255,255,0.8)',
+  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-primary-selected-bg': 'hsla(212,95%,41%,1)',
+  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,31,80,0.2)',
+  'btn-primary-shadow': '0 1px 0 rgba(27,31,36,0.1)',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': 'hsla(220,14%,94%,1)',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(27,31,36,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(9,105,218,0.3)',
+  'btn-shadow': '0 1px 0 rgba(27,31,36,0.04)',
+  'btn-text': '#24292f',
+  'canvas-default-transparent': 'rgba(255,255,255,0)',
+  'canvas-default': '#ffffff',
+  'canvas-inset': '#f6f8fa',
+  'canvas-overlay': '#ffffff',
+  'canvas-subtle': '#f6f8fa',
+  'checks-ansi-black-bright': '#32383f',
+  'checks-ansi-black': '#24292f',
+  'checks-ansi-blue-bright': '#80ccff',
+  'checks-ansi-blue': '#54aeff',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#8c959f',
+  'checks-ansi-green-bright': '#65ccff',
+  'checks-ansi-green': '#35adff',
+  'checks-ansi-magenta-bright': '#d8b9ff',
+  'checks-ansi-magenta': '#c297ff',
+  'checks-ansi-red-bright': '#f8c200',
+  'checks-ansi-red': '#e7a100',
+  'checks-ansi-white-bright': '#d0d7de',
+  'checks-ansi-white': '#d0d7de',
+  'checks-ansi-yellow-bright': '#eac54f',
+  'checks-ansi-yellow': '#d4a72c',
+  'checks-bg': '#24292f',
+  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
+  'checks-btn-hover-icon': '#f6f8fa',
+  'checks-btn-icon': '#afb8c1',
+  'checks-container-border-width': '0px',
+  'checks-donut-error': '#d08002',
+  'checks-donut-neutral': '#afb8c1',
+  'checks-donut-pending': '#bf8700',
+  'checks-donut-success': '#0088ff',
+  'checks-dropdown-bg': '#32383f',
+  'checks-dropdown-border': '#424a53',
+  'checks-dropdown-btn-hover-bg': '#32383f',
+  'checks-dropdown-btn-hover-text': '#f6f8fa',
+  'checks-dropdown-hover-bg': '#424a53',
+  'checks-dropdown-hover-text': '#f6f8fa',
+  'checks-dropdown-shadow': 'rgba(27,31,36,0.3)',
+  'checks-dropdown-text': '#afb8c1',
+  'checks-gate-bg': 'rgba(125,78,0,0.15)',
+  'checks-gate-text': '#d0d7de',
+  'checks-gate-waiting-text': '#afb8c1',
+  'checks-header-border': '#32383f',
+  'checks-header-icon': '#8c959f',
+  'checks-header-label-open-text': '#f6f8fa',
+  'checks-header-label-text': '#d0d7de',
+  'checks-input-bg': '#32383f',
+  'checks-input-focus-text': '#8c959f',
+  'checks-input-placeholder-text': '#8c959f',
+  'checks-input-shadow': 'none',
+  'checks-input-text': '#eaeef2',
+  'checks-line-dt-fm-bg': '#9a6700',
+  'checks-line-dt-fm-text': '#24292f',
+  'checks-line-hover-bg': '#32383f',
+  'checks-line-num-text': 'rgba(140,149,159,0.75)',
+  'checks-line-selected-bg': 'rgba(33,139,255,0.15)',
+  'checks-line-selected-num-text': '#54aeff',
+  'checks-line-text': '#d0d7de',
+  'checks-line-timestamp-text': '#8c959f',
+  'checks-logline-command-text': '#54aeff',
+  'checks-logline-debug-text': '#c297ff',
+  'checks-logline-error-bg': 'rgba(139,70,0,0.15)',
+  'checks-logline-error-num-text': '#e7a100',
+  'checks-logline-error-text': '#d0d7de',
+  'checks-logline-num-text': 'rgba(140,149,159,0.75)',
+  'checks-logline-section-text': '#35adff',
+  'checks-logline-text': '#8c959f',
+  'checks-logline-warning-bg': 'rgba(125,78,0,0.15)',
+  'checks-logline-warning-num-text': '#d4a72c',
+  'checks-logline-warning-text': '#d0d7de',
+  'checks-run-border-width': '0px',
+  'checks-scrollbar-thumb-bg': '#57606a',
+  'checks-step-error-text': '#e7a100',
+  'checks-step-header-open-bg': '#32383f',
+  'checks-step-warning-text': '#d4a72c',
+  'checks-text-link': '#54aeff',
+  'checks-text-primary': '#f6f8fa',
+  'checks-text-secondary': '#8c959f',
+  'codemirror-activeline-bg': 'rgba(234,238,242,0.5)',
+  'codemirror-bg': '#ffffff',
+  'codemirror-cursor': '#24292f',
+  'codemirror-guttermarker-subtle-text': '#6e7781',
+  'codemirror-guttermarker-text': '#ffffff',
+  'codemirror-gutters-bg': '#ffffff',
+  'codemirror-linenumber-text': '#57606a',
+  'codemirror-lines-bg': '#ffffff',
+  'codemirror-matchingbracket-text': '#24292f',
+  'codemirror-selection-bg': 'rgba(84,174,255,0.4)',
+  'codemirror-syntax-comment': '#24292f',
+  'codemirror-syntax-constant': '#0550ae',
+  'codemirror-syntax-entity': '#8250df',
+  'codemirror-syntax-keyword': '#ac5e00',
+  'codemirror-syntax-storage': '#ac5e00',
+  'codemirror-syntax-string': '#0a3069',
+  'codemirror-syntax-support': '#0550ae',
+  'codemirror-syntax-variable': '#953800',
+  'codemirror-text': '#24292f',
+  'counter-border': 'rgba(0,0,0,0)',
+  'danger-emphasis': '#ac5e00',
+  'danger-fg': '#ac5e00',
+  'danger-muted': 'rgba(231,161,0,0.4)',
+  'danger-subtle': '#fefe48',
+  'diff-blob-addition-fg': '#24292f',
+  'diff-blob-addition-line-bg': 'rgba(192,246,255,0.5)',
+  'diff-blob-addition-num-bg': 'rgba(53,173,255,0.4)',
+  'diff-blob-addition-num-text': '#24292f',
+  'diff-blob-addition-word-bg': 'rgba(53,173,255,0.4)',
+  'diff-blob-deletion-fg': '#24292f',
+  'diff-blob-deletion-line-bg': 'rgba(254,254,72,0.5)',
+  'diff-blob-deletion-num-bg': 'rgba(231,161,0,0.4)',
+  'diff-blob-deletion-num-text': '#24292f',
+  'diff-blob-deletion-word-bg': 'rgba(248,194,0,0.5)',
+  'diff-blob-expander-icon': '#57606a',
+  'diff-blob-hunk-num-bg': 'rgba(84,174,255,0.4)',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
+  'diffstat-addition-bg': '#0088ff',
+  'diffstat-addition-border': 'rgba(27,31,36,0.15)',
+  'diffstat-deletion-border': 'rgba(27,31,36,0.15)',
+  'done-emphasis': '#8250df',
+  'done-fg': '#8250df',
+  'done-muted': 'rgba(194,151,255,0.4)',
+  'done-subtle': '#fbefff',
+  'fg-default': '#24292f',
+  'fg-muted': '#57606a',
+  'fg-on-emphasis': '#ffffff',
+  'fg-subtle': '#6e7781',
+  'header-bg': '#24292f',
+  'header-divider': '#57606a',
+  'header-logo': '#ffffff',
+  'header-search-bg': '#24292f',
+  'header-search-border': '#57606a',
+  'header-text': 'rgba(255,255,255,0.7)',
+  'input-disabled-bg': 'rgba(175,184,193,0.2)',
+  'marketing-icon-primary': '#218bff',
+  'marketing-icon-secondary': '#54aeff',
+  'menu-bg-active': 'rgba(0,0,0,0)',
+  'mktg-btn-bg': '#1b1f23',
+  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
+  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#24292f',
+  'neutral-emphasis': '#6e7781',
+  'neutral-muted': 'rgba(175,184,193,0.2)',
+  'neutral-subtle': 'rgba(234,238,242,0.5)',
+  'overlay-shadow': '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
+  'page-header-bg': '#f6f8fa',
+  'prettylights-syntax-brackethighlighter-angle': '#57606a',
+  'prettylights-syntax-brackethighlighter-unmatched': '#6c3900',
+  'prettylights-syntax-carriage-return-bg': '#ac5e00',
+  'prettylights-syntax-carriage-return-text': '#f6f8fa',
+  'prettylights-syntax-comment': '#6e7781',
+  'prettylights-syntax-constant-other-reference-link': '#0a3069',
+  'prettylights-syntax-constant': '#0550ae',
+  'prettylights-syntax-entity-tag': '#054da9',
+  'prettylights-syntax-entity': '#8250df',
+  'prettylights-syntax-invalid-illegal-bg': '#6c3900',
+  'prettylights-syntax-invalid-illegal-text': '#f6f8fa',
+  'prettylights-syntax-keyword': '#ac5e00',
+  'prettylights-syntax-markup-bold': '#24292f',
+  'prettylights-syntax-markup-changed-bg': '#ffd8b5',
+  'prettylights-syntax-markup-changed-text': '#953800',
+  'prettylights-syntax-markup-deleted-bg': '#fefe48',
+  'prettylights-syntax-markup-deleted-text': '#6c3900',
+  'prettylights-syntax-markup-heading': '#0550ae',
+  'prettylights-syntax-markup-ignored-bg': '#0550ae',
+  'prettylights-syntax-markup-ignored-text': '#eaeef2',
+  'prettylights-syntax-markup-inserted-bg': '#c0f6ff',
+  'prettylights-syntax-markup-inserted-text': '#054da9',
+  'prettylights-syntax-markup-italic': '#24292f',
+  'prettylights-syntax-markup-list': '#3b2300',
+  'prettylights-syntax-meta-diff-range': '#8250df',
+  'prettylights-syntax-storage-modifier-import': '#24292f',
+  'prettylights-syntax-string-regexp': '#054da9',
+  'prettylights-syntax-string': '#0a3069',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#8c959f',
+  'prettylights-syntax-variable': '#953800',
+  'primer-border-active': '#FD8C73',
+  'primer-border-contrast': 'rgba(27,31,36,0.1)',
+  'primer-canvas-backdrop': 'rgba(27,31,36,0.5)',
+  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
+  'primer-fg-disabled': '#8c959f',
+  'primer-shadow-focus': '0 0 0 3px rgba(9,105,218,0.3)',
+  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'primer-shadow-inset': 'inset 0 1px 0 rgba(208,215,222,0.2)',
+  'project-gradient-in': '#ffffff',
+  'project-gradient-out': 'rgba(255,255,255,0)',
+  'project-header-bg': '#24292f',
+  'project-sidebar-bg': '#ffffff',
+  'scale-black': '#1b1f24',
+  'scale-blue-0': '#ddf4ff',
+  'scale-blue-1': '#b6e3ff',
+  'scale-blue-2': '#80ccff',
+  'scale-blue-3': '#54aeff',
+  'scale-blue-4': '#218bff',
+  'scale-blue-5': '#0969da',
+  'scale-blue-6': '#0550ae',
+  'scale-blue-7': '#033d8b',
+  'scale-blue-8': '#0a3069',
+  'scale-blue-9': '#002155',
+  'scale-coral-0': '#FFF0EB',
+  'scale-coral-1': '#FFD6CC',
+  'scale-coral-2': '#FFB4A1',
+  'scale-coral-3': '#FD8C73',
+  'scale-coral-4': '#EC6547',
+  'scale-coral-5': '#C4432B',
+  'scale-coral-6': '#9E2F1C',
+  'scale-coral-7': '#801F0F',
+  'scale-coral-8': '#691105',
+  'scale-coral-9': '#510901',
+  'scale-gray-0': '#f6f8fa',
+  'scale-gray-1': '#eaeef2',
+  'scale-gray-2': '#d0d7de',
+  'scale-gray-3': '#afb8c1',
+  'scale-gray-4': '#8c959f',
+  'scale-gray-5': '#6e7781',
+  'scale-gray-6': '#57606a',
+  'scale-gray-7': '#424a53',
+  'scale-gray-8': '#32383f',
+  'scale-gray-9': '#24292f',
+  'scale-green-0': '#c0f6ff',
+  'scale-green-1': '#96e5ff',
+  'scale-green-2': '#65ccff',
+  'scale-green-3': '#35adff',
+  'scale-green-4': '#0088ff',
+  'scale-green-5': '#0566d5',
+  'scale-green-6': '#054da9',
+  'scale-green-7': '#033a86',
+  'scale-green-8': '#002d68',
+  'scale-green-9': '#001f50',
+  'scale-orange-0': '#fff1e5',
+  'scale-orange-1': '#ffd8b5',
+  'scale-orange-2': '#ffb77c',
+  'scale-orange-3': '#fb8f44',
+  'scale-orange-4': '#e16f24',
+  'scale-orange-5': '#bc4c00',
+  'scale-orange-6': '#953800',
+  'scale-orange-7': '#762c00',
+  'scale-orange-8': '#5c2200',
+  'scale-orange-9': '#471700',
+  'scale-pink-0': '#ffeff7',
+  'scale-pink-1': '#ffd3eb',
+  'scale-pink-2': '#ffadda',
+  'scale-pink-3': '#ff80c8',
+  'scale-pink-4': '#e85aad',
+  'scale-pink-5': '#bf3989',
+  'scale-pink-6': '#99286e',
+  'scale-pink-7': '#772057',
+  'scale-pink-8': '#611347',
+  'scale-pink-9': '#4d0336',
+  'scale-purple-0': '#fbefff',
+  'scale-purple-1': '#ecd8ff',
+  'scale-purple-2': '#d8b9ff',
+  'scale-purple-3': '#c297ff',
+  'scale-purple-4': '#a475f9',
+  'scale-purple-5': '#8250df',
+  'scale-purple-6': '#6639ba',
+  'scale-purple-7': '#512a97',
+  'scale-purple-8': '#3e1f79',
+  'scale-purple-9': '#2e1461',
+  'scale-red-0': '#fefe48',
+  'scale-red-1': '#fee325',
+  'scale-red-2': '#f8c200',
+  'scale-red-3': '#e7a100',
+  'scale-red-4': '#d08002',
+  'scale-red-5': '#ac5e00',
+  'scale-red-6': '#8b4600',
+  'scale-red-7': '#6c3900',
+  'scale-red-8': '#4c3100',
+  'scale-red-9': '#2f2900',
+  'scale-white': '#ffffff',
+  'scale-yellow-0': '#fff8c5',
+  'scale-yellow-1': '#fae17d',
+  'scale-yellow-2': '#eac54f',
+  'scale-yellow-3': '#d4a72c',
+  'scale-yellow-4': '#bf8700',
+  'scale-yellow-5': '#9a6700',
+  'scale-yellow-6': '#7d4e00',
+  'scale-yellow-7': '#633c01',
+  'scale-yellow-8': '#4d2d00',
+  'scale-yellow-9': '#3b2300',
+  'search-keyword-hl': '#fff8c5',
+  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
+  'select-menu-tap-focus-bg': '#b6e3ff',
+  'select-menu-tap-highlight': 'rgba(175,184,193,0.5)',
+  'severe-emphasis': '#bc4c00',
+  'severe-fg': '#bc4c00',
+  'severe-muted': 'rgba(251,143,68,0.4)',
+  'severe-subtle': '#fff1e5',
+  'shadow-extra-large': '0 12px 28px rgba(140,149,159,0.3)',
+  'shadow-large': '0 8px 24px rgba(140,149,159,0.2)',
+  'shadow-medium': '0 3px 6px rgba(140,149,159,0.15)',
+  'shadow-small': '0 1px 0 rgba(27,31,36,0.04)',
+  'sidenav-selected-bg': '#ffffff',
+  'sponsors-emphasis': '#bf3989',
+  'sponsors-fg': '#bf3989',
+  'sponsors-muted': 'rgba(255,128,200,0.4)',
+  'sponsors-subtle': '#ffeff7',
+  'success-emphasis': '#0088ff',
+  'success-fg': '#0566d5',
+  'success-muted': 'rgba(53,173,255,0.4)',
+  'success-subtle': '#c0f6ff',
+  'timeline-badge-bg': '#eaeef2',
+  'topic-tag-border': 'rgba(0,0,0,0)',
+  'underlinenav-border-hover': 'rgba(175,184,193,0.2)',
+  'underlinenav-icon': '#6e7781',
+);

src/styles/themes/lightHighContrast.scss

@@ -0,0 +1,418 @@
+$variables: (
+  'accent-emphasis': '#0349b4',
+  'accent-fg': '#0349b4',
+  'accent-muted': '#368cf9',
+  'accent-subtle': '#dff7ff',
+  'action-list-item-danger-active-bg': '#fff0ee',
+  'action-list-item-danger-hover-bg': 'rgba(255,240,238,0.64)',
+  'action-list-item-danger-hover-text': '#a0111f',
+  'action-list-item-default-active-bg': 'rgba(206,213,220,0.48)',
+  'action-list-item-default-hover-bg': 'rgba(206,213,220,0.32)',
+  'action-list-item-default-selected-bg': 'rgba(206,213,220,0.24)',
+  'action-list-item-inline-divider': 'rgba(32,37,44,0.48)',
+  'ansi-black-bright': '#4B535D',
+  'ansi-black': '#0E1116',
+  'ansi-blue-bright': '#1168e3',
+  'ansi-blue': '#0349b4',
+  'ansi-cyan-bright': '#3192aa',
+  'ansi-cyan': '#1b7c83',
+  'ansi-gray': '#66707B',
+  'ansi-green-bright': '#055d20',
+  'ansi-green': '#024c1a',
+  'ansi-magenta-bright': '#844ae7',
+  'ansi-magenta': '#622cbc',
+  'ansi-red-bright': '#86061d',
+  'ansi-red': '#a0111f',
+  'ansi-white-bright': '#88929D',
+  'ansi-white': '#66707B',
+  'ansi-yellow-bright': '#4e2c00',
+  'ansi-yellow': '#3f2200',
+  'attention-emphasis': '#744500',
+  'attention-fg': '#744500',
+  'attention-muted': '#b58407',
+  'attention-subtle': '#fcf7be',
+  'avatar-bg': '#ffffff',
+  'avatar-border': 'rgba(1,4,9,0.8)',
+  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
+  'avatar-stack-fade-more': '#CED5DC',
+  'avatar-stack-fade': '#ACB6C0',
+  'border-default': '#20252C',
+  'border-muted': '#88929D',
+  'border-subtle': 'rgba(1,4,9,0.8)',
+  'btn-active-bg': '#ACB6C0',
+  'btn-active-border': 'rgba(1,4,9,0.8)',
+  'btn-bg': '#E7ECF0',
+  'btn-border': 'rgba(1,4,9,0.8)',
+  'btn-counter-bg': 'rgba(1,4,9,0.08)',
+  'btn-danger-counter-bg': 'rgba(160,17,31,0.1)',
+  'btn-danger-disabled-bg': '#E7ECF0',
+  'btn-danger-disabled-counter-bg': 'rgba(160,17,31,0.05)',
+  'btn-danger-disabled-text': 'rgba(160,17,31,0.5)',
+  'btn-danger-focus-border': '#6e011a',
+  'btn-danger-focus-shadow': '0 0 0 3px rgba(134,6,29,0.4)',
+  'btn-danger-hover-bg': '#a0111f',
+  'btn-danger-hover-border': '#6e011a',
+  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-danger-hover-icon': '#ffffff',
+  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-danger-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-danger-hover-text': '#ffffff',
+  'btn-danger-icon': '#86061d',
+  'btn-danger-selected-bg': '#6e011a',
+  'btn-danger-selected-border': '#6e011a',
+  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(67,0,17,0.2)',
+  'btn-danger-selected-text': '#ffffff',
+  'btn-danger-text': '#86061d',
+  'btn-focus-bg': '#CED5DC',
+  'btn-focus-border': 'rgba(1,4,9,0.8)',
+  'btn-focus-shadow': '0 0 0 3px rgba(3,73,180,0.3)',
+  'btn-hover-bg': '#CED5DC',
+  'btn-hover-border': 'rgba(1,4,9,0.8)',
+  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'btn-outline-counter-bg': 'rgba(3,73,180,0.1)',
+  'btn-outline-disabled-bg': '#E7ECF0',
+  'btn-outline-disabled-counter-bg': 'rgba(3,73,180,0.05)',
+  'btn-outline-disabled-text': 'rgba(3,73,180,0.5)',
+  'btn-outline-focus-border': '#022f7a',
+  'btn-outline-focus-shadow': '0 0 0 3px rgba(2,59,149,0.4)',
+  'btn-outline-hover-bg': '#0349b4',
+  'btn-outline-hover-border': '#022f7a',
+  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-outline-hover-text': '#ffffff',
+  'btn-outline-selected-bg': '#022f7a',
+  'btn-outline-selected-border': '#022f7a',
+  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(2,26,74,0.2)',
+  'btn-outline-selected-text': '#ffffff',
+  'btn-outline-text': '#023b95',
+  'btn-primary-bg': '#055d20',
+  'btn-primary-border': '#013d14',
+  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
+  'btn-primary-disabled-bg': '#94d3a2',
+  'btn-primary-disabled-border': 'rgba(1,4,9,0.8)',
+  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
+  'btn-primary-focus-bg': '#013d14',
+  'btn-primary-focus-border': '#013d14',
+  'btn-primary-focus-shadow': '0 0 0 3px rgba(1,61,20,0.4)',
+  'btn-primary-hover-bg': '#024c1a',
+  'btn-primary-hover-border': '#013d14',
+  'btn-primary-icon': 'rgba(255,255,255,0.8)',
+  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
+  'btn-primary-selected-bg': 'hsla(139,95%,13%,1)',
+  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,35,11,0.2)',
+  'btn-primary-shadow': '0 1px 0 rgba(1,4,9,0.1)',
+  'btn-primary-text': '#ffffff',
+  'btn-selected-bg': '#ACB6C0',
+  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
+  'btn-shadow-input-focus': '0 0 0 0.2em rgba(3,73,180,0.3)',
+  'btn-shadow': '0 1px 0 rgba(1,4,9,0.04)',
+  'btn-text': '#0E1116',
+  'canvas-default-transparent': 'rgba(255,255,255,0)',
+  'canvas-default': '#ffffff',
+  'canvas-inset': '#ffffff',
+  'canvas-overlay': '#ffffff',
+  'canvas-subtle': '#E7ECF0',
+  'checks-ansi-black-bright': '#20252C',
+  'checks-ansi-black': '#0E1116',
+  'checks-ansi-blue-bright': '#67b3fd',
+  'checks-ansi-blue': '#368cf9',
+  'checks-ansi-cyan-bright': '#b3f0ff',
+  'checks-ansi-cyan': '#76e3ea',
+  'checks-ansi-gray': '#88929D',
+  'checks-ansi-green-bright': '#43c663',
+  'checks-ansi-green': '#26a148',
+  'checks-ansi-magenta-bright': '#c49bff',
+  'checks-ansi-magenta': '#a371f7',
+  'checks-ansi-red-bright': '#ff8e8a',
+  'checks-ansi-red': '#ee5a5d',
+  'checks-ansi-white-bright': '#CED5DC',
+  'checks-ansi-white': '#CED5DC',
+  'checks-ansi-yellow-bright': '#d5a824',
+  'checks-ansi-yellow': '#b58407',
+  'checks-bg': '#0E1116',
+  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
+  'checks-btn-hover-icon': '#FFFFFF',
+  'checks-btn-icon': '#ACB6C0',
+  'checks-container-border-width': '0px',
+  'checks-donut-error': '#d5232c',
+  'checks-donut-neutral': '#ACB6C0',
+  'checks-donut-pending': '#956400',
+  'checks-donut-success': '#117f32',
+  'checks-dropdown-bg': '#20252C',
+  'checks-dropdown-border': '#343B43',
+  'checks-dropdown-btn-hover-bg': '#20252C',
+  'checks-dropdown-btn-hover-text': '#FFFFFF',
+  'checks-dropdown-hover-bg': '#343B43',
+  'checks-dropdown-hover-text': '#FFFFFF',
+  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
+  'checks-dropdown-text': '#ACB6C0',
+  'checks-gate-bg': 'rgba(96,55,0,0.15)',
+  'checks-gate-text': '#CED5DC',
+  'checks-gate-waiting-text': '#ACB6C0',
+  'checks-header-border': '#20252C',
+  'checks-header-icon': '#88929D',
+  'checks-header-label-open-text': '#FFFFFF',
+  'checks-header-label-text': '#CED5DC',
+  'checks-input-bg': '#20252C',
+  'checks-input-focus-text': '#88929D',
+  'checks-input-placeholder-text': '#88929D',
+  'checks-input-shadow': 'none',
+  'checks-input-text': '#E7ECF0',
+  'checks-line-dt-fm-bg': '#744500',
+  'checks-line-dt-fm-text': '#0E1116',
+  'checks-line-hover-bg': '#20252C',
+  'checks-line-num-text': 'rgba(136,146,157,0.75)',
+  'checks-line-selected-bg': 'rgba(17,104,227,0.15)',
+  'checks-line-selected-num-text': '#368cf9',
+  'checks-line-text': '#CED5DC',
+  'checks-line-timestamp-text': '#88929D',
+  'checks-logline-command-text': '#368cf9',
+  'checks-logline-debug-text': '#a371f7',
+  'checks-logline-error-bg': 'rgba(134,6,29,0.15)',
+  'checks-logline-error-num-text': '#ee5a5d',
+  'checks-logline-error-text': '#CED5DC',
+  'checks-logline-num-text': 'rgba(136,146,157,0.75)',
+  'checks-logline-section-text': '#26a148',
+  'checks-logline-text': '#88929D',
+  'checks-logline-warning-bg': 'rgba(96,55,0,0.15)',
+  'checks-logline-warning-num-text': '#b58407',
+  'checks-logline-warning-text': '#CED5DC',
+  'checks-run-border-width': '0px',
+  'checks-scrollbar-thumb-bg': '#4B535D',
+  'checks-step-error-text': '#ee5a5d',
+  'checks-step-header-open-bg': '#20252C',
+  'checks-step-warning-text': '#b58407',
+  'checks-text-link': '#368cf9',
+  'checks-text-primary': '#FFFFFF',
+  'checks-text-secondary': '#88929D',
+  'codemirror-activeline-bg': '#E7ECF0',
+  'codemirror-bg': '#ffffff',
+  'codemirror-cursor': '#0E1116',
+  'codemirror-guttermarker-subtle-text': '#66707B',
+  'codemirror-guttermarker-text': '#ffffff',
+  'codemirror-gutters-bg': '#ffffff',
+  'codemirror-linenumber-text': '#0E1116',
+  'codemirror-lines-bg': '#ffffff',
+  'codemirror-matchingbracket-text': '#0E1116',
+  'codemirror-selection-bg': '#368cf9',
+  'codemirror-syntax-comment': '#0E1116',
+  'codemirror-syntax-constant': '#023b95',
+  'codemirror-syntax-entity': '#622cbc',
+  'codemirror-syntax-keyword': '#a0111f',
+  'codemirror-syntax-storage': '#a0111f',
+  'codemirror-syntax-string': '#032563',
+  'codemirror-syntax-support': '#023b95',
+  'codemirror-syntax-variable': '#702c00',
+  'codemirror-text': '#0E1116',
+  'counter-border': '#20252C',
+  'danger-emphasis': '#a0111f',
+  'danger-fg': '#a0111f',
+  'danger-muted': '#ee5a5d',
+  'danger-subtle': '#fff0ee',
+  'diff-blob-addition-fg': '#ffffff',
+  'diff-blob-addition-line-bg': '#E6FFEC',
+  'diff-blob-addition-num-bg': '#CCFFD8',
+  'diff-blob-addition-num-text': '#0E1116',
+  'diff-blob-addition-word-bg': '#055d20',
+  'diff-blob-deletion-fg': '#ffffff',
+  'diff-blob-deletion-line-bg': '#fff0ee',
+  'diff-blob-deletion-num-bg': '#FFD7D5',
+  'diff-blob-deletion-num-text': '#0E1116',
+  'diff-blob-deletion-word-bg': '#a0111f',
+  'diff-blob-expander-icon': '#0E1116',
+  'diff-blob-hunk-num-bg': '#9cd7ff',
+  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
+  'diffstat-addition-bg': '#117f32',
+  'diffstat-addition-border': 'rgba(1,4,9,0.8)',
+  'diffstat-deletion-border': 'rgba(1,4,9,0.8)',
+  'done-emphasis': '#622cbc',
+  'done-fg': '#622cbc',
+  'done-muted': '#a371f7',
+  'done-subtle': '#faf0fe',
+  'fg-default': '#0E1116',
+  'fg-muted': '#0E1116',
+  'fg-on-emphasis': '#ffffff',
+  'fg-subtle': '#66707B',
+  'header-bg': '#0E1116',
+  'header-divider': '#ACB6C0',
+  'header-logo': '#ffffff',
+  'header-search-bg': '#0E1116',
+  'header-search-border': '#4B535D',
+  'header-text': 'rgba(255,255,255,0.7)',
+  'input-disabled-bg': 'rgba(172,182,192,0.2)',
+  'marketing-icon-primary': '#1168e3',
+  'marketing-icon-secondary': '#368cf9',
+  'menu-bg-active': 'rgba(0,0,0,0)',
+  'mktg-btn-bg': '#1b1f23',
+  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
+  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+  'mktg-btn-shadow-hover':
+    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
+  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
+  'neutral-emphasis-plus': '#0E1116',
+  'neutral-emphasis': '#66707B',
+  'neutral-muted': 'rgba(172,182,192,0.2)',
+  'neutral-subtle': '#E7ECF0',
+  'overlay-shadow': '0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)',
+  'page-header-bg': '#ffffff',
+  'prettylights-syntax-brackethighlighter-angle': '#4B535D',
+  'prettylights-syntax-brackethighlighter-unmatched': '#6e011a',
+  'prettylights-syntax-carriage-return-bg': '#a0111f',
+  'prettylights-syntax-carriage-return-text': '#FFFFFF',
+  'prettylights-syntax-comment': '#66707B',
+  'prettylights-syntax-constant-other-reference-link': '#032563',
+  'prettylights-syntax-constant': '#023b95',
+  'prettylights-syntax-entity-tag': '#024c1a',
+  'prettylights-syntax-entity': '#622cbc',
+  'prettylights-syntax-invalid-illegal-bg': '#6e011a',
+  'prettylights-syntax-invalid-illegal-text': '#FFFFFF',
+  'prettylights-syntax-keyword': '#a0111f',
+  'prettylights-syntax-markup-bold': '#0E1116',
+  'prettylights-syntax-markup-changed-bg': '#ffc67b',
+  'prettylights-syntax-markup-changed-text': '#702c00',
+  'prettylights-syntax-markup-deleted-bg': '#fff0ee',
+  'prettylights-syntax-markup-deleted-text': '#6e011a',
+  'prettylights-syntax-markup-heading': '#023b95',
+  'prettylights-syntax-markup-ignored-bg': '#023b95',
+  'prettylights-syntax-markup-ignored-text': '#E7ECF0',
+  'prettylights-syntax-markup-inserted-bg': '#d2fedb',
+  'prettylights-syntax-markup-inserted-text': '#024c1a',
+  'prettylights-syntax-markup-italic': '#0E1116',
+  'prettylights-syntax-markup-list': '#2e1800',
+  'prettylights-syntax-meta-diff-range': '#622cbc',
+  'prettylights-syntax-storage-modifier-import': '#0E1116',
+  'prettylights-syntax-string-regexp': '#024c1a',
+  'prettylights-syntax-string': '#032563',
+  'prettylights-syntax-sublimelinter-gutter-mark': '#88929D',
+  'prettylights-syntax-variable': '#702c00',
+  'primer-border-active': '#ef5b48',
+  'primer-border-contrast': 'rgba(1,4,9,0.1)',
+  'primer-canvas-backdrop': 'rgba(1,4,9,0.5)',
+  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
+  'primer-fg-disabled': '#88929D',
+  'primer-shadow-focus': '0 0 0 3px rgba(3,73,180,0.3)',
+  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
+  'primer-shadow-inset': 'inset 0 1px 0 rgba(206,213,220,0.2)',
+  'project-gradient-in': '#ffffff',
+  'project-gradient-out': 'rgba(255,255,255,0)',
+  'project-header-bg': '#0E1116',
+  'project-sidebar-bg': '#ffffff',
+  'scale-black': '#010409',
+  'scale-blue-0': '#dff7ff',
+  'scale-blue-1': '#9cd7ff',
+  'scale-blue-2': '#67b3fd',
+  'scale-blue-3': '#368cf9',
+  'scale-blue-4': '#1168e3',
+  'scale-blue-5': '#0349b4',
+  'scale-blue-6': '#023b95',
+  'scale-blue-7': '#022f7a',
+  'scale-blue-8': '#032563',
+  'scale-blue-9': '#021a4a',
+  'scale-coral-0': '#fff0ed',
+  'scale-coral-1': '#ffc2b6',
+  'scale-coral-2': '#ff8f7e',
+  'scale-coral-3': '#ef5b48',
+  'scale-coral-4': '#cd3425',
+  'scale-coral-5': '#9f1710',
+  'scale-coral-6': '#870706',
+  'scale-coral-7': '#6f0107',
+  'scale-coral-8': '#5b0002',
+  'scale-coral-9': '#430200',
+  'scale-gray-0': '#FFFFFF',
+  'scale-gray-1': '#E7ECF0',
+  'scale-gray-2': '#CED5DC',
+  'scale-gray-3': '#ACB6C0',
+  'scale-gray-4': '#88929D',
+  'scale-gray-5': '#66707B',
+  'scale-gray-6': '#4B535D',
+  'scale-gray-7': '#343B43',
+  'scale-gray-8': '#20252C',
+  'scale-gray-9': '#0E1116',
+  'scale-green-0': '#d2fedb',
+  'scale-green-1': '#82e596',
+  'scale-green-2': '#43c663',
+  'scale-green-3': '#26a148',
+  'scale-green-4': '#117f32',
+  'scale-green-5': '#055d20',
+  'scale-green-6': '#024c1a',
+  'scale-green-7': '#013d14',
+  'scale-green-8': '#003110',
+  'scale-green-9': '#00230b',
+  'scale-orange-0': '#fff2d5',
+  'scale-orange-1': '#ffc67b',
+  'scale-orange-2': '#f99636',
+  'scale-orange-3': '#dc6d1a',
+  'scale-orange-4': '#b45105',
+  'scale-orange-5': '#873800',
+  'scale-orange-6': '#702c00',
+  'scale-orange-7': '#5b2300',
+  'scale-orange-8': '#491b00',
+  'scale-orange-9': '#361200',
+  'scale-pink-0': '#feeff7',
+  'scale-pink-1': '#ffbde0',
+  'scale-pink-2': '#fc87ca',
+  'scale-pink-3': '#ed4baf',
+  'scale-pink-4': '#c9248e',
+  'scale-pink-5': '#971368',
+  'scale-pink-6': '#7d0c57',
+  'scale-pink-7': '#660847',
+  'scale-pink-8': '#53043a',
+  'scale-pink-9': '#3e022b',
+  'scale-purple-0': '#faf0fe',
+  'scale-purple-1': '#e0c5ff',
+  'scale-purple-2': '#c49bff',
+  'scale-purple-3': '#a371f7',
+  'scale-purple-4': '#844ae7',
+  'scale-purple-5': '#622cbc',
+  'scale-purple-6': '#512598',
+  'scale-purple-7': '#411d7b',
+  'scale-purple-8': '#341763',
+  'scale-purple-9': '#260f49',
+  'scale-red-0': '#fff0ee',
+  'scale-red-1': '#ffc1bc',
+  'scale-red-2': '#ff8e8a',
+  'scale-red-3': '#ee5a5d',
+  'scale-red-4': '#d5232c',
+  'scale-red-5': '#a0111f',
+  'scale-red-6': '#86061d',
+  'scale-red-7': '#6e011a',
+  'scale-red-8': '#5a0016',
+  'scale-red-9': '#430011',
+  'scale-white': '#ffffff',
+  'scale-yellow-0': '#fcf7be',
+  'scale-yellow-1': '#f0ce53',
+  'scale-yellow-2': '#d5a824',
+  'scale-yellow-3': '#b58407',
+  'scale-yellow-4': '#956400',
+  'scale-yellow-5': '#744500',
+  'scale-yellow-6': '#603700',
+  'scale-yellow-7': '#4e2c00',
+  'scale-yellow-8': '#3f2200',
+  'scale-yellow-9': '#2e1800',
+  'search-keyword-hl': '#fcf7be',
+  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
+  'select-menu-tap-focus-bg': '#9cd7ff',
+  'select-menu-tap-highlight': 'rgba(172,182,192,0.5)',
+  'severe-emphasis': '#873800',
+  'severe-fg': '#873800',
+  'severe-muted': '#dc6d1a',
+  'severe-subtle': '#fff2d5',
+  'shadow-extra-large': '0 12px 28px rgba(136,146,157,0.3)',
+  'shadow-large': '0 8px 24px rgba(136,146,157,0.2)',
+  'shadow-medium': '0 3px 6px rgba(136,146,157,0.15)',
+  'shadow-small': '0 1px 0 rgba(1,4,9,0.04)',
+  'sidenav-selected-bg': '#ffffff',
+  'sponsors-emphasis': '#971368',
+  'sponsors-fg': '#971368',
+  'sponsors-muted': '#ed4baf',
+  'sponsors-subtle': '#feeff7',
+  'success-emphasis': '#055d20',
+  'success-fg': '#055d20',
+  'success-muted': '#26a148',
+  'success-subtle': '#d2fedb',
+  'timeline-badge-bg': '#E7ECF0',
+  'topic-tag-border': '#0349b4',
+  'underlinenav-border-hover': 'rgba(172,182,192,0.2)',
+  'underlinenav-icon': '#66707B',
+);

src/utils/DOMHelper.ts

@@ -123,9 +123,13 @@ export function focusSearchInput() {
   })
 }
 
-export function setResizingState(on: boolean) {
-  const target = document.querySelector('.gitako-toggle-show-button-wrapper')
-  if (!target) return
-  if (on) target.classList.add('resizing')
-  else target.classList.remove('resizing')
+export function findNodeElement(node: TreeNode, rootElement: HTMLElement): HTMLElement | null {
+  const nodeElement = rootElement.querySelector(`a[href="${node.url}"]`)
+  if (nodeElement instanceof HTMLElement) return nodeElement
+  return null
+}
+
+export function setCSSVariable(name: string, value: string | undefined, element: HTMLElement) {
+  if (value === undefined) element.style.removeProperty(name)
+  else element.style.setProperty(name, value)
 }

src/utils/VisibleNodesGenerator.ts

@@ -124,6 +124,10 @@ class ShakeLayer extends BaseLayer {
   lastSearchParams: SearchParams | null = null
   shakeHub = new EventHub<{ emit: TreeNode | null }>()
 
+  get isSearching() {
+    return this.lastSearchParams !== null
+  }
+
   constructor(options: Options) {
     super(options)
 
@@ -193,6 +197,7 @@ class FlattenLayer extends CompressLayer {
   focusedNode: TreeNode | null = null
   nodes: TreeNode[] = []
   expandedNodes: Set<TreeNode['path']> = new Set()
+  backupExpandedNodes: Set<TreeNode['path']> = new Set()
   flattenHub = new EventHub<{ emit: null }>()
 
   constructor(options: Options) {
@@ -268,8 +273,8 @@ class FlattenLayer extends CompressLayer {
     const expand = !this.expandedNodes.has(node.path)
     await traverse(
       [node],
-      async node => {
-        await this.$setExpand(node, expand)
+      node => {
+        this.$setExpand(node, expand)
         return recursive
       },
       node => node.contents || [],
@@ -300,18 +305,24 @@ class FlattenLayer extends CompressLayer {
     }
   }, this.generateVisibleNodes)
 
-  search = (searchParams: Pick<SearchParams, 'matchNode'> | null) => {
-    this.shake(
-      searchParams
-        ? {
-            matchNode: searchParams.matchNode,
-            onChildMatch: node => this.$setExpand(node, true),
-          }
-        : null,
-    )
-    // collapse all nodes on clearing search key
-    if (!searchParams) {
+  search = (searchParams: Pick<SearchParams, 'matchNode'> | null, restoreExpandedFolders?: boolean) => {
+    // backup expansion before search
+    if (searchParams) {
+      if (!this.isSearching) {
+        this.backupExpandedNodes.clear()
+        this.expandedNodes.forEach(path => this.backupExpandedNodes.add(path))
+      }
+      this.shake({
+        matchNode: searchParams.matchNode,
+        onChildMatch: node => this.$setExpand(node, true),
+      })
+    } else {
+      this.shake(null)
+      // collapse all nodes on clearing search key
       this.expandedNodes.clear()
+      if (restoreExpandedFolders) {
+        this.backupExpandedNodes.forEach(path => this.expandedNodes.add(path))
+      }
     }
   }
 }

src/utils/config/helper.ts

@@ -1,5 +1,4 @@
 import { SearchMode } from 'components/searchModes'
-import { platform, platformName } from 'platforms'
 import { storageHelper } from 'utils/storageHelper'
 import { migrateConfig } from './migrations'
 
@@ -20,6 +19,8 @@ export type Config = {
   commentToggle: boolean
   codeFolding: boolean
   compactFileTree: boolean
+  restoreExpandedFolders: boolean
+  showDiffInText: boolean
 }
 
 enum configKeys {
@@ -39,15 +40,20 @@ enum configKeys {
   commentToggle = 'commentToggle',
   codeFolding = 'codeFolding',
   compactFileTree = 'compactFileTree',
+  restoreExpandedFolders = 'restoreExpandedFolders',
+  showDiffInText = 'showDiffInText',
 }
 
+// do NOT use platform name
+const platformStorageKey = `platform_` + window.location.host.toLowerCase()
+
 export const defaultConfigs: Config = {
   sideBarWidth: 260,
   shortcut: undefined,
   accessToken: '',
   compressSingletonFolder: true,
-  copyFileButton: true,
-  copySnippetButton: !(platformName === 'GitHub' && !platform.isEnterprise()), // false when on github.com
+  copyFileButton: platformStorageKey !== 'platform_github.com', // false when on github.com,
+  copySnippetButton: platformStorageKey !== 'platform_github.com', // false when on github.com
   intelligentToggle: null,
   icons: 'rich',
   toggleButtonVerticalDistance: 124, // align with GitHub's navbar items
@@ -58,6 +64,8 @@ export const defaultConfigs: Config = {
   commentToggle: true,
   codeFolding: true,
   compactFileTree: false,
+  restoreExpandedFolders: true,
+  showDiffInText: false,
 }
 
 const configKeyArray = Object.values(configKeys)
@@ -71,8 +79,6 @@ function applyDefaultConfigs(configs: Partial<Config>) {
 
 export type VersionedConfig<SiteConfig> = Record<string, SiteConfig> & { configVersion: string }
 
-// do NOT use platform name
-const platformStorageKey = `platform_` + window.location.host.toLowerCase()
 const prepareConfig = new Promise<void>(async resolve => {
   await migrateConfig()
   resolve()

src/utils/config/migrations/1.0.1.ts

@@ -16,7 +16,12 @@ export const migration: Migration = {
       'intelligentToggle',
       'icons',
     ])
-    if (config && (!('configVersion' in config) || config.configVersion < version)) {
+    if (
+      config &&
+      (!('configVersion' in config) ||
+        config.configVersion === null ||
+        config.configVersion < version)
+    ) {
       await storageHelper.set({ platform_GitHub: config, configVersion: version })
     }
   },

src/utils/config/migrations/3.5.0.ts

@@ -0,0 +1,33 @@
+import { storageHelper } from 'utils/storageHelper'
+import { Migration, onConfigOutdated } from '.'
+
+export const migration: Migration = {
+  version: '3.5.0',
+  async migrate(version) {
+    // disable copy snippet button for github.com
+    type ConfigBeforeMigrate = {
+      copyFileButton: boolean
+    }
+    type ConfigAfterMigrate = {
+      copyFileButton: boolean
+    }
+
+    await onConfigOutdated(version, async configs => {
+      const key = 'platform_github.com'
+      const config = configs[key]
+      if (typeof config === 'object' && config !== null && 'copyFileButton' in config) {
+        const configBeforeMigrate: ConfigBeforeMigrate = config
+        const { copyFileButton, ...rest } = configBeforeMigrate
+        if (copyFileButton) {
+          const configAfterMigrate: ConfigAfterMigrate = {
+            ...rest,
+            copyFileButton: false,
+          }
+          await storageHelper.set({
+            [key]: configAfterMigrate,
+          })
+        }
+      }
+    })
+  },
+}

src/utils/config/migrations/index.ts

@@ -4,6 +4,7 @@ import { migration as v1v0v1 } from './1.0.1'
 import { migration as v1v3v4 } from './1.3.4'
 import { migration as v2v6v0 } from './2.6.0'
 import { migration as v3v0v0 } from './3.0.0'
+import { migration as v3v5v0 } from './3.5.0'
 
 export type Migration = {
   version: string
@@ -11,7 +12,7 @@ export type Migration = {
 }
 
 export async function migrateConfig() {
-  const migrations: Migration[] = [v1v0v1, v1v3v4, v2v6v0, v3v0v0]
+  const migrations: Migration[] = [v1v0v1, v1v3v4, v2v6v0, v3v0v0, v3v5v0]
 
   for (const { version, migrate } of migrations) {
     await migrate(version)

src/utils/general.test.ts

@@ -0,0 +1,29 @@
+import { resolveDiffGraphMeta } from './general'
+
+it(`should resolve diff stat graph meta properly`, () => {
+  const example = `
+    2 10 0 4
+    3 10 1 3
+    3 17 0 4
+    4 17 0 4
+    4 26 0 4
+    5 17 1 3
+    6 17 1 3
+   12  0 5 0
+    0 12 0 5
+   17 74 0 4
+   11 23 1 3
+   18 28 1 3
+   34 24 2 2
+  `
+
+  example
+    .split(/\n/)
+    .map(line => line.trim())
+    .filter(line => line.length)
+    .map(line => line.split(/\s+/).map(_ => parseInt(_)))
+    .forEach(([additions, deletions, g, r]) => {
+      const meta = resolveDiffGraphMeta(additions, deletions, additions + deletions)
+      expect([meta.g, meta.r]).toEqual([g, r])
+    })
+})

src/utils/general.ts

@@ -21,12 +21,14 @@ export enum OperatingSystems {
 }
 
 function detectOS(): OperatingSystems {
-  const {
-    navigator: { userAgent },
-  } = window
-  if (userAgent.indexOf(OperatingSystems.Windows) !== -1) return OperatingSystems.Windows
-  else if (userAgent.indexOf(OperatingSystems.macOS) !== -1) return OperatingSystems.macOS
-  else if (userAgent.indexOf(OperatingSystems.Linux) !== -1) return OperatingSystems.Linux
+  if (typeof window !== 'undefined') {
+    const {
+      navigator: { userAgent },
+    } = window
+    if (userAgent.indexOf(OperatingSystems.Windows) !== -1) return OperatingSystems.Windows
+    else if (userAgent.indexOf(OperatingSystems.macOS) !== -1) return OperatingSystems.macOS
+    else if (userAgent.indexOf(OperatingSystems.Linux) !== -1) return OperatingSystems.Linux
+  }
   return OperatingSystems.others
 }
 
@@ -189,3 +191,21 @@ export function createPromiseQueue() {
     },
   }
 }
+
+export function isOpenInNewWindowClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+  return (
+    (os === OperatingSystems.macOS && (event.metaKey || event.shiftKey)) ||
+    (os === OperatingSystems.Linux && event.ctrlKey) ||
+    (os === OperatingSystems.Windows && event.ctrlKey)
+  )
+}
+
+export function resolveDiffGraphMeta(additions: number, deletions: number, changes: number) {
+  const both = additions > 0 && deletions > 0,
+    overflow = changes > 5,
+    preserved = both && overflow ? 1 : 0,
+    g = overflow ? Math.floor(((5 - preserved) * (additions + 1)) / (changes + 1)) : additions,
+    r = overflow ? 5 - preserved - g : deletions,
+    w = 5 - g - r
+  return { g, r, w }
+}

src/utils/hooks/usePJAX.ts

@@ -1,4 +1,5 @@
 import { Config, Pjax } from 'pjax-api'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
 
@@ -9,7 +10,7 @@ const config: Config = {
     // gitee
     '#git-project-content',
     // gitea
-    '.repository > .ui.container'
+    '.repository > .ui.container',
   ],
   update: {
     css: false,
@@ -42,8 +43,9 @@ export function usePJAX() {
   useRedirectedEvents(document, 'pjax:ready', 'pjax:end')
 }
 
-export const loadWithPJAX = (url: string) => {
-  Pjax.assign(url, config)
+export const loadWithPJAX = (url: string, element: HTMLElement) => {
+  if (platform.loadWithPJAX) platform.loadWithPJAX(url, element)
+  else Pjax.assign(url, config)
 }
 
 export function useOnPJAXDone(callback: () => void) {

src/utils/hooks/useProgressBar.ts

@@ -1,6 +1,4 @@
 import * as NProgress from 'nprogress'
-import { platform } from 'platforms'
-import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 import { useEvent } from 'react-use'
 
@@ -13,14 +11,11 @@ const progressBar = {
   },
 }
 
-const isGitHub = platform === GitHub
 // use native progress bar on GitHub
-export const useProgressBar = isGitHub
-  ? function () {}
-  : function useProgressBar() {
-      React.useEffect(() => {
-        NProgress.configure({ showSpinner: false })
-      }, [])
-      useEvent('pjax:fetch', progressBar.mount, window)
-      useEvent('pjax:unload', progressBar.unmount, window)
-    }
+export function useProgressBar() {
+  React.useEffect(() => {
+    NProgress.configure({ showSpinner: false })
+  }, [])
+  useEvent('pjax:fetch', progressBar.mount, window)
+  useEvent('pjax:unload', progressBar.unmount, window)
+}

src/utils/parseIconMapCSV.ts

@@ -1,25 +1,29 @@
 import rawFileIconIndex from 'assets/icons/file-icons-index.csv'
 import rawFolderIconIndex from 'assets/icons/folder-icons-index.csv'
 
+const rowSeparator = '\n'
+const colSeparator = ','
+const arraySeparator = ':'
+
 function parseFileIconMapCSV() {
   const filenameIndex = new Map<string, string>()
   const fileExtensionIndex = new Map<string, string>()
-  rawFileIconIndex.split('\n').forEach(line => {
-    if (!line) return
-    const [name, names, exts] = line.split(',')
+  for (const line of rawFileIconIndex.split(rowSeparator)) {
+    if (!line) continue
+    const [name, names, exts] = line.split(colSeparator)
     if (names) {
-      names.split(':').forEach(filename => {
-        if (!filename) return
+      for (const filename of names.split(arraySeparator)) {
+        if (!filename) continue
         filenameIndex.set(filename, name)
-      })
+      }
     }
     if (exts) {
-      exts.split(':').forEach(ext => {
-        if (!ext) return
+      for (const ext of exts.split(arraySeparator)) {
+        if (!ext) continue
         fileExtensionIndex.set(ext, name)
-      })
+      }
     }
-  })
+  }
   return {
     filenameIndex,
     fileExtensionIndex,
@@ -28,14 +32,14 @@ function parseFileIconMapCSV() {
 
 function parseFolderIconMapCSV() {
   const folderNameIndex = new Map<string, string>()
-  rawFolderIconIndex.split('\n').forEach(line => {
-    if (!line) return
-    const [name, names] = line.split(',')
-    names.split(':').forEach(folderName => {
-      if (!folderName) return
+  for (const line of rawFolderIconIndex.split(rowSeparator)) {
+    if (!line) continue
+    const [name, names] = line.split(colSeparator)
+    for (const folderName of names.split(arraySeparator)) {
+      if (!folderName) continue
       folderNameIndex.set(folderName, name)
-    })
-  })
+    }
+  }
   return {
     folderNameIndex,
   }
@@ -43,32 +47,31 @@ function parseFolderIconMapCSV() {
 
 const { folderNameIndex } = parseFolderIconMapCSV()
 
-export function getFolderIconSrc(node: TreeNode, open: boolean) {
+export function getFolderIconURL(node: TreeNode, open: boolean) {
   const name = folderNameIndex.get(node.name.toLowerCase())
-  return getIconSrc('folder', name, open)
+  return getIconURL('folder', name, open)
 }
 
 const { filenameIndex, fileExtensionIndex } = parseFileIconMapCSV()
 
-export function getFileIconSrc(node: TreeNode) {
+export function getFileIconURL(node: TreeNode) {
   const fileName = node.name.toLowerCase()
   let iconName = filenameIndex.get(fileName)
   if (!iconName) {
     const tail = fileName.split('.')
-    tail.shift()
     while (!iconName && tail.length > 0) {
       iconName = fileExtensionIndex.get(tail.join('.'))
       tail.shift()
     }
   }
-  return getIconSrc('file', iconName)
+  return getIconURL('file', iconName)
 }
 
 // memorize for
 // 1. swap time with space
 // 2. prevent app crash on when extension context invalidates
 const extensionURL = browser.runtime.getURL('').replace(/\/$/, '')
-export function getIconSrc(type: 'folder' | 'file', name: string = 'default', open?: boolean) {
+export function getIconURL(type: 'folder' | 'file', name: string = 'default', open?: boolean) {
   const filename =
     (name === 'default' ? 'default_' + type : type + '_type_' + name) +
     (open ? '_opened' : '') +