This is page 2 of 2. Use http://codebase.md/microsoft/playwright-mcp?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .github
│ └── workflows
│ ├── ci.yml
│ └── publish.yml
├── .gitignore
├── .npmignore
├── cli.js
├── config.d.ts
├── CONTRIBUTING.md
├── Dockerfile
├── extension
│ ├── icons
│ │ ├── icon-128.png
│ │ ├── icon-16.png
│ │ ├── icon-32.png
│ │ └── icon-48.png
│ ├── manifest.json
│ ├── package-lock.json
│ ├── package.json
│ ├── playwright.config.ts
│ ├── README.md
│ ├── src
│ │ ├── background.ts
│ │ ├── relayConnection.ts
│ │ └── ui
│ │ ├── authToken.css
│ │ ├── authToken.tsx
│ │ ├── colors.css
│ │ ├── connect.css
│ │ ├── connect.html
│ │ ├── connect.tsx
│ │ ├── copyToClipboard.css
│ │ ├── copyToClipboard.tsx
│ │ ├── icons.css
│ │ ├── icons.tsx
│ │ ├── status.html
│ │ ├── status.tsx
│ │ ├── tabItem.tsx
│ │ └── tsconfig.json
│ ├── tests
│ │ └── extension.spec.ts
│ ├── tsconfig.json
│ ├── tsconfig.ui.json
│ ├── vite.config.mts
│ └── vite.sw.config.mts
├── index.d.ts
├── index.js
├── LICENSE
├── package-lock.json
├── package.json
├── playwright.config.ts
├── README.md
├── SECURITY.md
├── src
│ └── README.md
├── tests
│ ├── capabilities.spec.ts
│ ├── click.spec.ts
│ ├── core.spec.ts
│ ├── fixtures.ts
│ ├── library.spec.ts
│ └── testserver
│ ├── cert.pem
│ ├── index.ts
│ ├── key.pem
│ └── san.cnf
└── update-readme.js
```
# Files
--------------------------------------------------------------------------------
/extension/tests/extension.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import fs from 'fs';
18 | import path from 'path';
19 | import { chromium } from 'playwright';
20 | import { test as base, expect } from '../../tests/fixtures';
21 |
22 | import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
23 | import type { BrowserContext } from 'playwright';
24 | import type { StartClient } from '../../tests/fixtures';
25 |
26 | type BrowserWithExtension = {
27 | userDataDir: string;
28 | launch: (mode?: 'disable-extension') => Promise<BrowserContext>;
29 | };
30 |
31 | type TestFixtures = {
32 | browserWithExtension: BrowserWithExtension,
33 | pathToExtension: string,
34 | useShortConnectionTimeout: (timeoutMs: number) => void
35 | overrideProtocolVersion: (version: number) => void
36 | };
37 |
38 | const test = base.extend<TestFixtures>({
39 | pathToExtension: async ({}, use) => {
40 | await use(path.resolve(__dirname, '../dist'));
41 | },
42 |
43 | browserWithExtension: async ({ mcpBrowser, pathToExtension }, use, testInfo) => {
44 | // The flags no longer work in Chrome since
45 | // https://chromium.googlesource.com/chromium/src/+/290ed8046692651ce76088914750cb659b65fb17%5E%21/chrome/browser/extensions/extension_service.cc?pli=1#
46 | test.skip('chromium' !== mcpBrowser, '--load-extension is not supported for official builds of Chromium');
47 |
48 | let browserContext: BrowserContext | undefined;
49 | const userDataDir = testInfo.outputPath('extension-user-data-dir');
50 | await use({
51 | userDataDir,
52 | launch: async (mode?: 'disable-extension') => {
53 | browserContext = await chromium.launchPersistentContext(userDataDir, {
54 | channel: mcpBrowser,
55 | // Opening the browser singleton only works in headed.
56 | headless: false,
57 | // Automation disables singleton browser process behavior, which is necessary for the extension.
58 | ignoreDefaultArgs: ['--enable-automation'],
59 | args: mode === 'disable-extension' ? [] : [
60 | `--disable-extensions-except=${pathToExtension}`,
61 | `--load-extension=${pathToExtension}`,
62 | ],
63 | });
64 |
65 | // for manifest v3:
66 | let [serviceWorker] = browserContext.serviceWorkers();
67 | if (!serviceWorker)
68 | serviceWorker = await browserContext.waitForEvent('serviceworker');
69 |
70 | return browserContext;
71 | }
72 | });
73 | await browserContext?.close();
74 | },
75 |
76 | useShortConnectionTimeout: async ({}, use) => {
77 | await use((timeoutMs: number) => {
78 | process.env.PWMCP_TEST_CONNECTION_TIMEOUT = timeoutMs.toString();
79 | });
80 | process.env.PWMCP_TEST_CONNECTION_TIMEOUT = undefined;
81 | },
82 |
83 | overrideProtocolVersion: async ({}, use) => {
84 | await use((version: number) => {
85 | process.env.PWMCP_TEST_PROTOCOL_VERSION = version.toString();
86 | });
87 | process.env.PWMCP_TEST_PROTOCOL_VERSION = undefined;
88 | }
89 | });
90 |
91 | async function startAndCallConnectTool(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
92 | const { client } = await startClient({
93 | args: [`--connect-tool`],
94 | config: {
95 | browser: {
96 | userDataDir: browserWithExtension.userDataDir,
97 | }
98 | },
99 | });
100 |
101 | expect(await client.callTool({
102 | name: 'browser_connect',
103 | arguments: {
104 | name: 'extension'
105 | }
106 | })).toHaveResponse({
107 | result: 'Successfully changed connection method.',
108 | });
109 |
110 | return client;
111 | }
112 |
113 | async function startWithExtensionFlag(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
114 | const { client } = await startClient({
115 | args: [`--extension`],
116 | config: {
117 | browser: {
118 | userDataDir: browserWithExtension.userDataDir,
119 | }
120 | },
121 | });
122 | return client;
123 | }
124 |
125 | const testWithOldExtensionVersion = test.extend({
126 | pathToExtension: async ({}, use, testInfo) => {
127 | const extensionDir = testInfo.outputPath('extension');
128 | const oldPath = path.resolve(__dirname, '../dist');
129 |
130 | await fs.promises.cp(oldPath, extensionDir, { recursive: true });
131 | const manifestPath = path.join(extensionDir, 'manifest.json');
132 | const manifest = JSON.parse(await fs.promises.readFile(manifestPath, 'utf8'));
133 | manifest.version = '0.0.1';
134 | await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
135 |
136 | await use(extensionDir);
137 | },
138 | });
139 |
140 | for (const [mode, startClientMethod] of [
141 | ['connect-tool', startAndCallConnectTool],
142 | ['extension-flag', startWithExtensionFlag],
143 | ] as const) {
144 |
145 | test(`navigate with extension (${mode})`, async ({ browserWithExtension, startClient, server }) => {
146 | const browserContext = await browserWithExtension.launch();
147 |
148 | const client = await startClientMethod(browserWithExtension, startClient);
149 |
150 | const confirmationPagePromise = browserContext.waitForEvent('page', page => {
151 | return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
152 | });
153 |
154 | const navigateResponse = client.callTool({
155 | name: 'browser_navigate',
156 | arguments: { url: server.HELLO_WORLD },
157 | });
158 |
159 | const selectorPage = await confirmationPagePromise;
160 | // For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
161 | await selectorPage.getByRole('button', { name: 'Allow' }).click();
162 |
163 | expect(await navigateResponse).toHaveResponse({
164 | pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
165 | });
166 | });
167 |
168 | test(`snapshot of an existing page (${mode})`, async ({ browserWithExtension, startClient, server }) => {
169 | const browserContext = await browserWithExtension.launch();
170 |
171 | const page = await browserContext.newPage();
172 | await page.goto(server.HELLO_WORLD);
173 |
174 | // Another empty page.
175 | await browserContext.newPage();
176 | expect(browserContext.pages()).toHaveLength(3);
177 |
178 | const client = await startClientMethod(browserWithExtension, startClient);
179 | expect(browserContext.pages()).toHaveLength(3);
180 |
181 | const confirmationPagePromise = browserContext.waitForEvent('page', page => {
182 | return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
183 | });
184 |
185 | const navigateResponse = client.callTool({
186 | name: 'browser_snapshot',
187 | arguments: { },
188 | });
189 |
190 | const selectorPage = await confirmationPagePromise;
191 | expect(browserContext.pages()).toHaveLength(4);
192 |
193 | await selectorPage.locator('.tab-item', { hasText: 'Title' }).getByRole('button', { name: 'Connect' }).click();
194 |
195 | expect(await navigateResponse).toHaveResponse({
196 | pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
197 | });
198 |
199 | expect(browserContext.pages()).toHaveLength(4);
200 | });
201 |
202 | test(`extension not installed timeout (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
203 | useShortConnectionTimeout(100);
204 |
205 | const browserContext = await browserWithExtension.launch();
206 |
207 | const client = await startClientMethod(browserWithExtension, startClient);
208 |
209 | const confirmationPagePromise = browserContext.waitForEvent('page', page => {
210 | return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
211 | });
212 |
213 | expect(await client.callTool({
214 | name: 'browser_navigate',
215 | arguments: { url: server.HELLO_WORLD },
216 | })).toHaveResponse({
217 | result: expect.stringContaining('Extension connection timeout. Make sure the "Playwright MCP Bridge" extension is installed.'),
218 | isError: true,
219 | });
220 |
221 | await confirmationPagePromise;
222 | });
223 |
224 | testWithOldExtensionVersion(`works with old extension version (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
225 | useShortConnectionTimeout(500);
226 |
227 | // Prelaunch the browser, so that it is properly closed after the test.
228 | const browserContext = await browserWithExtension.launch();
229 |
230 | const client = await startClientMethod(browserWithExtension, startClient);
231 |
232 | const confirmationPagePromise = browserContext.waitForEvent('page', page => {
233 | return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
234 | });
235 |
236 | const navigateResponse = client.callTool({
237 | name: 'browser_navigate',
238 | arguments: { url: server.HELLO_WORLD },
239 | });
240 |
241 | const selectorPage = await confirmationPagePromise;
242 | // For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
243 | await selectorPage.getByRole('button', { name: 'Allow' }).click();
244 |
245 | expect(await navigateResponse).toHaveResponse({
246 | pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
247 | });
248 | });
249 |
250 | test(`extension needs update (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout, overrideProtocolVersion }) => {
251 | useShortConnectionTimeout(500);
252 | overrideProtocolVersion(1000);
253 |
254 | // Prelaunch the browser, so that it is properly closed after the test.
255 | const browserContext = await browserWithExtension.launch();
256 |
257 | const client = await startClientMethod(browserWithExtension, startClient);
258 |
259 | const confirmationPagePromise = browserContext.waitForEvent('page', page => {
260 | return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
261 | });
262 |
263 | const navigateResponse = client.callTool({
264 | name: 'browser_navigate',
265 | arguments: { url: server.HELLO_WORLD },
266 | });
267 |
268 | const confirmationPage = await confirmationPagePromise;
269 | await expect(confirmationPage.locator('.status-banner')).toContainText(`Playwright MCP version trying to connect requires newer extension version`);
270 |
271 | expect(await navigateResponse).toHaveResponse({
272 | result: expect.stringContaining('Extension connection timeout.'),
273 | isError: true,
274 | });
275 | });
276 |
277 | }
278 |
279 | test(`custom executablePath`, async ({ startClient, server, useShortConnectionTimeout }) => {
280 | useShortConnectionTimeout(1000);
281 |
282 | const executablePath = test.info().outputPath('echo.sh');
283 | await fs.promises.writeFile(executablePath, '#!/bin/bash\necho "Custom exec args: $@" > "$(dirname "$0")/output.txt"', { mode: 0o755 });
284 |
285 | const { client } = await startClient({
286 | args: [`--extension`],
287 | config: {
288 | browser: {
289 | launchOptions: {
290 | executablePath,
291 | },
292 | }
293 | },
294 | });
295 |
296 | const navigateResponse = await client.callTool({
297 | name: 'browser_navigate',
298 | arguments: { url: server.HELLO_WORLD },
299 | timeout: 1000,
300 | });
301 | expect(await navigateResponse).toHaveResponse({
302 | result: expect.stringContaining('Extension connection timeout.'),
303 | isError: true,
304 | });
305 | expect(await fs.promises.readFile(test.info().outputPath('output.txt'), 'utf8')).toContain('Custom exec args: chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html?');
306 | });
307 |
308 | test(`bypass connection dialog with token`, async ({ browserWithExtension, startClient, server }) => {
309 | const browserContext = await browserWithExtension.launch();
310 |
311 | const page = await browserContext.newPage();
312 | await page.goto('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/status.html');
313 | const token = await page.locator('.auth-token-code').textContent();
314 | const [name, value] = token?.split('=') || [];
315 |
316 | const { client } = await startClient({
317 | args: [`--extension`],
318 | extensionToken: value,
319 | config: {
320 | browser: {
321 | userDataDir: browserWithExtension.userDataDir,
322 | }
323 | },
324 | });
325 |
326 | const navigateResponse = await client.callTool({
327 | name: 'browser_navigate',
328 | arguments: { url: server.HELLO_WORLD },
329 | });
330 |
331 | expect(await navigateResponse).toHaveResponse({
332 | pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
333 | });
334 |
335 |
336 | });
337 |
```
--------------------------------------------------------------------------------
/extension/src/ui/colors.css:
--------------------------------------------------------------------------------
```css
1 | /* The MIT License (MIT)
2 |
3 | Copyright (c) 2021 GitHub Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE. */
22 |
23 | :root {
24 | --color-canvas-default-transparent: rgba(255,255,255,0);
25 | --color-marketing-icon-primary: #218bff;
26 | --color-marketing-icon-secondary: #54aeff;
27 | --color-diff-blob-addition-num-text: #24292f;
28 | --color-diff-blob-addition-fg: #24292f;
29 | --color-diff-blob-addition-num-bg: #CCFFD8;
30 | --color-diff-blob-addition-line-bg: #E6FFEC;
31 | --color-diff-blob-addition-word-bg: #ABF2BC;
32 | --color-diff-blob-deletion-num-text: #24292f;
33 | --color-diff-blob-deletion-fg: #24292f;
34 | --color-diff-blob-deletion-num-bg: #FFD7D5;
35 | --color-diff-blob-deletion-line-bg: #FFEBE9;
36 | --color-diff-blob-deletion-word-bg: rgba(255,129,130,0.4);
37 | --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
38 | --color-diff-blob-expander-icon: #57606a;
39 | --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
40 | --color-diffstat-deletion-border: rgba(27,31,36,0.15);
41 | --color-diffstat-addition-border: rgba(27,31,36,0.15);
42 | --color-diffstat-addition-bg: #2da44e;
43 | --color-search-keyword-hl: #fff8c5;
44 | --color-prettylights-syntax-comment: #6e7781;
45 | --color-prettylights-syntax-constant: #0550ae;
46 | --color-prettylights-syntax-entity: #8250df;
47 | --color-prettylights-syntax-storage-modifier-import: #24292f;
48 | --color-prettylights-syntax-entity-tag: #116329;
49 | --color-prettylights-syntax-keyword: #cf222e;
50 | --color-prettylights-syntax-string: #0a3069;
51 | --color-prettylights-syntax-variable: #953800;
52 | --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
53 | --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
54 | --color-prettylights-syntax-invalid-illegal-bg: #82071e;
55 | --color-prettylights-syntax-carriage-return-text: #f6f8fa;
56 | --color-prettylights-syntax-carriage-return-bg: #cf222e;
57 | --color-prettylights-syntax-string-regexp: #116329;
58 | --color-prettylights-syntax-markup-list: #3b2300;
59 | --color-prettylights-syntax-markup-heading: #0550ae;
60 | --color-prettylights-syntax-markup-italic: #24292f;
61 | --color-prettylights-syntax-markup-bold: #24292f;
62 | --color-prettylights-syntax-markup-deleted-text: #82071e;
63 | --color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
64 | --color-prettylights-syntax-markup-inserted-text: #116329;
65 | --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
66 | --color-prettylights-syntax-markup-changed-text: #953800;
67 | --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
68 | --color-prettylights-syntax-markup-ignored-text: #eaeef2;
69 | --color-prettylights-syntax-markup-ignored-bg: #0550ae;
70 | --color-prettylights-syntax-meta-diff-range: #8250df;
71 | --color-prettylights-syntax-brackethighlighter-angle: #57606a;
72 | --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
73 | --color-prettylights-syntax-constant-other-reference-link: #0a3069;
74 | --color-codemirror-text: #24292f;
75 | --color-codemirror-bg: #ffffff;
76 | --color-codemirror-gutters-bg: #ffffff;
77 | --color-codemirror-guttermarker-text: #ffffff;
78 | --color-codemirror-guttermarker-subtle-text: #6e7781;
79 | --color-codemirror-linenumber-text: #57606a;
80 | --color-codemirror-cursor: #24292f;
81 | --color-codemirror-selection-bg: rgba(84,174,255,0.4);
82 | --color-codemirror-activeline-bg: rgba(234,238,242,0.5);
83 | --color-codemirror-matchingbracket-text: #24292f;
84 | --color-codemirror-lines-bg: #ffffff;
85 | --color-codemirror-syntax-comment: #24292f;
86 | --color-codemirror-syntax-constant: #0550ae;
87 | --color-codemirror-syntax-entity: #8250df;
88 | --color-codemirror-syntax-keyword: #cf222e;
89 | --color-codemirror-syntax-storage: #cf222e;
90 | --color-codemirror-syntax-string: #0a3069;
91 | --color-codemirror-syntax-support: #0550ae;
92 | --color-codemirror-syntax-variable: #953800;
93 | --color-checks-bg: #24292f;
94 | --color-checks-run-border-width: 0px;
95 | --color-checks-container-border-width: 0px;
96 | --color-checks-text-primary: #f6f8fa;
97 | --color-checks-text-secondary: #8c959f;
98 | --color-checks-text-link: #54aeff;
99 | --color-checks-btn-icon: #afb8c1;
100 | --color-checks-btn-hover-icon: #f6f8fa;
101 | --color-checks-btn-hover-bg: rgba(255,255,255,0.125);
102 | --color-checks-input-text: #eaeef2;
103 | --color-checks-input-placeholder-text: #8c959f;
104 | --color-checks-input-focus-text: #8c959f;
105 | --color-checks-input-bg: #32383f;
106 | --color-checks-input-shadow: none;
107 | --color-checks-donut-error: #fa4549;
108 | --color-checks-donut-pending: #bf8700;
109 | --color-checks-donut-success: #2da44e;
110 | --color-checks-donut-neutral: #afb8c1;
111 | --color-checks-dropdown-text: #afb8c1;
112 | --color-checks-dropdown-bg: #32383f;
113 | --color-checks-dropdown-border: #424a53;
114 | --color-checks-dropdown-shadow: rgba(27,31,36,0.3);
115 | --color-checks-dropdown-hover-text: #f6f8fa;
116 | --color-checks-dropdown-hover-bg: #424a53;
117 | --color-checks-dropdown-btn-hover-text: #f6f8fa;
118 | --color-checks-dropdown-btn-hover-bg: #32383f;
119 | --color-checks-scrollbar-thumb-bg: #57606a;
120 | --color-checks-header-label-text: #d0d7de;
121 | --color-checks-header-label-open-text: #f6f8fa;
122 | --color-checks-header-border: #32383f;
123 | --color-checks-header-icon: #8c959f;
124 | --color-checks-line-text: #d0d7de;
125 | --color-checks-line-num-text: rgba(140,149,159,0.75);
126 | --color-checks-line-timestamp-text: #8c959f;
127 | --color-checks-line-hover-bg: #32383f;
128 | --color-checks-line-selected-bg: rgba(33,139,255,0.15);
129 | --color-checks-line-selected-num-text: #54aeff;
130 | --color-checks-line-dt-fm-text: #24292f;
131 | --color-checks-line-dt-fm-bg: #9a6700;
132 | --color-checks-gate-bg: rgba(125,78,0,0.15);
133 | --color-checks-gate-text: #d0d7de;
134 | --color-checks-gate-waiting-text: #afb8c1;
135 | --color-checks-step-header-open-bg: #32383f;
136 | --color-checks-step-error-text: #ff8182;
137 | --color-checks-step-warning-text: #d4a72c;
138 | --color-checks-logline-text: #8c959f;
139 | --color-checks-logline-num-text: rgba(140,149,159,0.75);
140 | --color-checks-logline-debug-text: #c297ff;
141 | --color-checks-logline-error-text: #d0d7de;
142 | --color-checks-logline-error-num-text: #ff8182;
143 | --color-checks-logline-error-bg: rgba(164,14,38,0.15);
144 | --color-checks-logline-warning-text: #d0d7de;
145 | --color-checks-logline-warning-num-text: #d4a72c;
146 | --color-checks-logline-warning-bg: rgba(125,78,0,0.15);
147 | --color-checks-logline-command-text: #54aeff;
148 | --color-checks-logline-section-text: #4ac26b;
149 | --color-checks-ansi-black: #24292f;
150 | --color-checks-ansi-black-bright: #32383f;
151 | --color-checks-ansi-white: #d0d7de;
152 | --color-checks-ansi-white-bright: #d0d7de;
153 | --color-checks-ansi-gray: #8c959f;
154 | --color-checks-ansi-red: #ff8182;
155 | --color-checks-ansi-red-bright: #ffaba8;
156 | --color-checks-ansi-green: #4ac26b;
157 | --color-checks-ansi-green-bright: #6fdd8b;
158 | --color-checks-ansi-yellow: #d4a72c;
159 | --color-checks-ansi-yellow-bright: #eac54f;
160 | --color-checks-ansi-blue: #54aeff;
161 | --color-checks-ansi-blue-bright: #80ccff;
162 | --color-checks-ansi-magenta: #c297ff;
163 | --color-checks-ansi-magenta-bright: #d8b9ff;
164 | --color-checks-ansi-cyan: #76e3ea;
165 | --color-checks-ansi-cyan-bright: #b3f0ff;
166 | --color-project-header-bg: #24292f;
167 | --color-project-sidebar-bg: #ffffff;
168 | --color-project-gradient-in: #ffffff;
169 | --color-project-gradient-out: rgba(255,255,255,0);
170 | --color-mktg-success: rgba(36,146,67,1);
171 | --color-mktg-info: rgba(19,119,234,1);
172 | --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
173 | --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
174 | --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
175 | --color-mktg-btn-bg-bottom: #4969ed;
176 | --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
177 | --color-mktg-btn-bg-overlay-bottom: #3355e0;
178 | --color-mktg-btn-text: #ffffff;
179 | --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
180 | --color-mktg-btn-primary-bg-bottom: #2ea44f;
181 | --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
182 | --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
183 | --color-mktg-btn-primary-text: #ffffff;
184 | --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
185 | --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
186 | --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
187 | --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
188 | --color-mktg-btn-enterprise-text: #ffffff;
189 | --color-mktg-btn-outline-text: #4969ed;
190 | --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
191 | --color-mktg-btn-outline-hover-text: #3355e0;
192 | --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
193 | --color-mktg-btn-outline-focus-border: #4969ed;
194 | --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
195 | --color-mktg-btn-dark-text: #ffffff;
196 | --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
197 | --color-mktg-btn-dark-hover-text: #ffffff;
198 | --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
199 | --color-mktg-btn-dark-focus-border: #ffffff;
200 | --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
201 | --color-avatar-bg: #ffffff;
202 | --color-avatar-border: rgba(27,31,36,0.15);
203 | --color-avatar-stack-fade: #afb8c1;
204 | --color-avatar-stack-fade-more: #d0d7de;
205 | --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
206 | --color-topic-tag-border: rgba(0,0,0,0);
207 | --color-select-menu-backdrop-border: rgba(0,0,0,0);
208 | --color-select-menu-tap-highlight: rgba(175,184,193,0.5);
209 | --color-select-menu-tap-focus-bg: #b6e3ff;
210 | --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
211 | --color-header-text: rgba(255,255,255,0.7);
212 | --color-header-bg: #24292f;
213 | --color-header-logo: #ffffff;
214 | --color-header-search-bg: #24292f;
215 | --color-header-search-border: #57606a;
216 | --color-sidenav-selected-bg: #ffffff;
217 | --color-menu-bg-active: rgba(0,0,0,0);
218 | --color-control-transparent-bg-hover: #818b981a;
219 | --color-input-disabled-bg: rgba(175,184,193,0.2);
220 | --color-timeline-badge-bg: #eaeef2;
221 | --color-ansi-black: #24292f;
222 | --color-ansi-black-bright: #57606a;
223 | --color-ansi-white: #6e7781;
224 | --color-ansi-white-bright: #8c959f;
225 | --color-ansi-gray: #6e7781;
226 | --color-ansi-red: #cf222e;
227 | --color-ansi-red-bright: #a40e26;
228 | --color-ansi-green: #116329;
229 | --color-ansi-green-bright: #1a7f37;
230 | --color-ansi-yellow: #4d2d00;
231 | --color-ansi-yellow-bright: #633c01;
232 | --color-ansi-blue: #0969da;
233 | --color-ansi-blue-bright: #218bff;
234 | --color-ansi-magenta: #8250df;
235 | --color-ansi-magenta-bright: #a475f9;
236 | --color-ansi-cyan: #1b7c83;
237 | --color-ansi-cyan-bright: #3192aa;
238 | --color-btn-text: #24292f;
239 | --color-btn-bg: #f6f8fa;
240 | --color-btn-border: rgba(27,31,36,0.15);
241 | --color-btn-shadow: 0 1px 0 rgba(27,31,36,0.04);
242 | --color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
243 | --color-btn-hover-bg: #f3f4f6;
244 | --color-btn-hover-border: rgba(27,31,36,0.15);
245 | --color-btn-active-bg: hsla(220,14%,93%,1);
246 | --color-btn-active-border: rgba(27,31,36,0.15);
247 | --color-btn-selected-bg: hsla(220,14%,94%,1);
248 | --color-btn-focus-bg: #f6f8fa;
249 | --color-btn-focus-border: rgba(27,31,36,0.15);
250 | --color-btn-focus-shadow: 0 0 0 3px rgba(9,105,218,0.3);
251 | --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
252 | --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9,105,218,0.3);
253 | --color-btn-counter-bg: rgba(27,31,36,0.08);
254 | --color-btn-primary-text: #ffffff;
255 | --color-btn-primary-bg: #2da44e;
256 | --color-btn-primary-border: rgba(27,31,36,0.15);
257 | --color-btn-primary-shadow: 0 1px 0 rgba(27,31,36,0.1);
258 | --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
259 | --color-btn-primary-hover-bg: #2c974b;
260 | --color-btn-primary-hover-border: rgba(27,31,36,0.15);
261 | --color-btn-primary-selected-bg: hsla(137,55%,36%,1);
262 | --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
263 | --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
264 | --color-btn-primary-disabled-bg: #94d3a2;
265 | --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
266 | --color-btn-primary-focus-bg: #2da44e;
267 | --color-btn-primary-focus-border: rgba(27,31,36,0.15);
268 | --color-btn-primary-focus-shadow: 0 0 0 3px rgba(45,164,78,0.4);
269 | --color-btn-primary-icon: rgba(255,255,255,0.8);
270 | --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
271 | --color-btn-outline-text: #0969da;
272 | --color-btn-outline-hover-text: #ffffff;
273 | --color-btn-outline-hover-bg: #0969da;
274 | --color-btn-outline-hover-border: rgba(27,31,36,0.15);
275 | --color-btn-outline-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
276 | --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
277 | --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
278 | --color-btn-outline-selected-text: #ffffff;
279 | --color-btn-outline-selected-bg: hsla(212,92%,42%,1);
280 | --color-btn-outline-selected-border: rgba(27,31,36,0.15);
281 | --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
282 | --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
283 | --color-btn-outline-disabled-bg: #f6f8fa;
284 | --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
285 | --color-btn-outline-focus-border: rgba(27,31,36,0.15);
286 | --color-btn-outline-focus-shadow: 0 0 0 3px rgba(5,80,174,0.4);
287 | --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
288 | --color-btn-danger-text: #cf222e;
289 | --color-btn-danger-hover-text: #ffffff;
290 | --color-btn-danger-hover-bg: #a40e26;
291 | --color-btn-danger-hover-border: rgba(27,31,36,0.15);
292 | --color-btn-danger-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
293 | --color-btn-danger-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
294 | --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
295 | --color-btn-danger-selected-text: #ffffff;
296 | --color-btn-danger-selected-bg: hsla(356,72%,44%,1);
297 | --color-btn-danger-selected-border: rgba(27,31,36,0.15);
298 | --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
299 | --color-btn-danger-disabled-text: rgba(207,34,46,0.5);
300 | --color-btn-danger-disabled-bg: #f6f8fa;
301 | --color-btn-danger-disabled-counter-bg: rgba(207,34,46,0.05);
302 | --color-btn-danger-focus-border: rgba(27,31,36,0.15);
303 | --color-btn-danger-focus-shadow: 0 0 0 3px rgba(164,14,38,0.4);
304 | --color-btn-danger-counter-bg: rgba(207,34,46,0.1);
305 | --color-btn-danger-icon: #cf222e;
306 | --color-btn-danger-hover-icon: #ffffff;
307 | --color-underlinenav-icon: #6e7781;
308 | --color-underlinenav-border-hover: rgba(175,184,193,0.2);
309 | --color-fg-default: #24292f;
310 | --color-fg-muted: #57606a;
311 | --color-fg-subtle: #6e7781;
312 | --color-fg-on-emphasis: #ffffff;
313 | --color-canvas-default: #ffffff;
314 | --color-canvas-overlay: #ffffff;
315 | --color-canvas-inset: #f6f8fa;
316 | --color-canvas-subtle: #f6f8fa;
317 | --color-border-default: #d0d7de;
318 | --color-border-muted: hsla(210,18%,87%,1);
319 | --color-border-subtle: rgba(27,31,36,0.15);
320 | --color-shadow-small: 0 1px 0 rgba(27,31,36,0.04);
321 | --color-shadow-medium: 0 3px 6px rgba(140,149,159,0.15);
322 | --color-shadow-large: 0 8px 24px rgba(140,149,159,0.2);
323 | --color-shadow-extra-large: 0 12px 28px rgba(140,149,159,0.3);
324 | --color-neutral-emphasis-plus: #24292f;
325 | --color-neutral-emphasis: #6e7781;
326 | --color-neutral-muted: rgba(175,184,193,0.2);
327 | --color-neutral-subtle: rgba(234,238,242,0.5);
328 | --color-accent-fg: #0969da;
329 | --color-accent-emphasis: #0969da;
330 | --color-accent-muted: rgba(84,174,255,0.4);
331 | --color-accent-subtle: #ddf4ff;
332 | --color-success-fg: #1a7f37;
333 | --color-success-emphasis: #2da44e;
334 | --color-success-muted: rgba(74,194,107,0.4);
335 | --color-success-subtle: #dafbe1;
336 | --color-attention-fg: #9a6700;
337 | --color-attention-emphasis: #bf8700;
338 | --color-attention-muted: rgba(212,167,44,0.4);
339 | --color-attention-subtle: #fff8c5;
340 | --color-severe-fg: #bc4c00;
341 | --color-severe-emphasis: #bc4c00;
342 | --color-severe-muted: rgba(251,143,68,0.4);
343 | --color-severe-subtle: #fff1e5;
344 | --color-danger-fg: #cf222e;
345 | --color-danger-emphasis: #cf222e;
346 | --color-danger-muted: rgba(255,129,130,0.4);
347 | --color-danger-subtle: #FFEBE9;
348 | --color-done-fg: #8250df;
349 | --color-done-emphasis: #8250df;
350 | --color-done-muted: rgba(194,151,255,0.4);
351 | --color-done-subtle: #fbefff;
352 | --color-sponsors-fg: #bf3989;
353 | --color-sponsors-emphasis: #bf3989;
354 | --color-sponsors-muted: rgba(255,128,200,0.4);
355 | --color-sponsors-subtle: #ffeff7;
356 | --color-primer-canvas-backdrop: rgba(27,31,36,0.5);
357 | --color-primer-canvas-sticky: rgba(255,255,255,0.95);
358 | --color-primer-border-active: #FD8C73;
359 | --color-primer-border-contrast: rgba(27,31,36,0.1);
360 | --color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
361 | --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
362 | --color-primer-shadow-focus: 0 0 0 3px rgba(9,105,218,0.3);
363 | --color-scale-black: #1b1f24;
364 | --color-scale-white: #ffffff;
365 | --color-scale-gray-0: #f6f8fa;
366 | --color-scale-gray-1: #eaeef2;
367 | --color-scale-gray-2: #d0d7de;
368 | --color-scale-gray-3: #afb8c1;
369 | --color-scale-gray-4: #8c959f;
370 | --color-scale-gray-5: #6e7781;
371 | --color-scale-gray-6: #57606a;
372 | --color-scale-gray-7: #424a53;
373 | --color-scale-gray-8: #32383f;
374 | --color-scale-gray-9: #24292f;
375 | --color-scale-blue-0: #ddf4ff;
376 | --color-scale-blue-1: #b6e3ff;
377 | --color-scale-blue-2: #80ccff;
378 | --color-scale-blue-3: #54aeff;
379 | --color-scale-blue-4: #218bff;
380 | --color-scale-blue-5: #0969da;
381 | --color-scale-blue-6: #0550ae;
382 | --color-scale-blue-7: #033d8b;
383 | --color-scale-blue-8: #0a3069;
384 | --color-scale-blue-9: #002155;
385 | --color-scale-green-0: #dafbe1;
386 | --color-scale-green-1: #aceebb;
387 | --color-scale-green-2: #6fdd8b;
388 | --color-scale-green-3: #4ac26b;
389 | --color-scale-green-4: #2da44e;
390 | --color-scale-green-5: #1a7f37;
391 | --color-scale-green-6: #116329;
392 | --color-scale-green-7: #044f1e;
393 | --color-scale-green-8: #003d16;
394 | --color-scale-green-9: #002d11;
395 | --color-scale-yellow-0: #fff8c5;
396 | --color-scale-yellow-1: #fae17d;
397 | --color-scale-yellow-2: #eac54f;
398 | --color-scale-yellow-3: #d4a72c;
399 | --color-scale-yellow-4: #bf8700;
400 | --color-scale-yellow-5: #9a6700;
401 | --color-scale-yellow-6: #7d4e00;
402 | --color-scale-yellow-7: #633c01;
403 | --color-scale-yellow-8: #4d2d00;
404 | --color-scale-yellow-9: #3b2300;
405 | --color-scale-orange-0: #fff1e5;
406 | --color-scale-orange-1: #ffd8b5;
407 | --color-scale-orange-2: #ffb77c;
408 | --color-scale-orange-3: #fb8f44;
409 | --color-scale-orange-4: #e16f24;
410 | --color-scale-orange-5: #bc4c00;
411 | --color-scale-orange-6: #953800;
412 | --color-scale-orange-7: #762c00;
413 | --color-scale-orange-8: #5c2200;
414 | --color-scale-orange-9: #471700;
415 | --color-scale-red-0: #FFEBE9;
416 | --color-scale-red-1: #ffcecb;
417 | --color-scale-red-2: #ffaba8;
418 | --color-scale-red-3: #ff8182;
419 | --color-scale-red-4: #fa4549;
420 | --color-scale-red-5: #cf222e;
421 | --color-scale-red-6: #a40e26;
422 | --color-scale-red-7: #82071e;
423 | --color-scale-red-8: #660018;
424 | --color-scale-red-9: #4c0014;
425 | --color-scale-purple-0: #fbefff;
426 | --color-scale-purple-1: #ecd8ff;
427 | --color-scale-purple-2: #d8b9ff;
428 | --color-scale-purple-3: #c297ff;
429 | --color-scale-purple-4: #a475f9;
430 | --color-scale-purple-5: #8250df;
431 | --color-scale-purple-6: #6639ba;
432 | --color-scale-purple-7: #512a97;
433 | --color-scale-purple-8: #3e1f79;
434 | --color-scale-purple-9: #2e1461;
435 | --color-scale-pink-0: #ffeff7;
436 | --color-scale-pink-1: #ffd3eb;
437 | --color-scale-pink-2: #ffadda;
438 | --color-scale-pink-3: #ff80c8;
439 | --color-scale-pink-4: #e85aad;
440 | --color-scale-pink-5: #bf3989;
441 | --color-scale-pink-6: #99286e;
442 | --color-scale-pink-7: #772057;
443 | --color-scale-pink-8: #611347;
444 | --color-scale-pink-9: #4d0336;
445 | --color-scale-coral-0: #FFF0EB;
446 | --color-scale-coral-1: #FFD6CC;
447 | --color-scale-coral-2: #FFB4A1;
448 | --color-scale-coral-3: #FD8C73;
449 | --color-scale-coral-4: #EC6547;
450 | --color-scale-coral-5: #C4432B;
451 | --color-scale-coral-6: #9E2F1C;
452 | --color-scale-coral-7: #801F0F;
453 | --color-scale-coral-8: #691105;
454 | --color-scale-coral-9: #510901
455 | }
456 |
457 | @media(prefers-color-scheme: dark) {
458 | :root {
459 | --color-canvas-default-transparent: rgba(13,17,23,0);
460 | --color-marketing-icon-primary: #79c0ff;
461 | --color-marketing-icon-secondary: #1f6feb;
462 | --color-diff-blob-addition-num-text: #c9d1d9;
463 | --color-diff-blob-addition-fg: #c9d1d9;
464 | --color-diff-blob-addition-num-bg: rgba(63,185,80,0.3);
465 | --color-diff-blob-addition-line-bg: rgba(46,160,67,0.15);
466 | --color-diff-blob-addition-word-bg: rgba(46,160,67,0.4);
467 | --color-diff-blob-deletion-num-text: #c9d1d9;
468 | --color-diff-blob-deletion-fg: #c9d1d9;
469 | --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3);
470 | --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15);
471 | --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4);
472 | --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4);
473 | --color-diff-blob-expander-icon: #8b949e;
474 | --color-diff-blob-selected-line-highlight-mix-blend-mode: screen;
475 | --color-diffstat-deletion-border: rgba(240,246,252,0.1);
476 | --color-diffstat-addition-border: rgba(240,246,252,0.1);
477 | --color-diffstat-addition-bg: #3fb950;
478 | --color-search-keyword-hl: rgba(210,153,34,0.4);
479 | --color-prettylights-syntax-comment: #8b949e;
480 | --color-prettylights-syntax-constant: #79c0ff;
481 | --color-prettylights-syntax-entity: #d2a8ff;
482 | --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
483 | --color-prettylights-syntax-entity-tag: #7ee787;
484 | --color-prettylights-syntax-keyword: #ff7b72;
485 | --color-prettylights-syntax-string: #a5d6ff;
486 | --color-prettylights-syntax-variable: #ffa657;
487 | --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
488 | --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
489 | --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
490 | --color-prettylights-syntax-carriage-return-text: #f0f6fc;
491 | --color-prettylights-syntax-carriage-return-bg: #b62324;
492 | --color-prettylights-syntax-string-regexp: #7ee787;
493 | --color-prettylights-syntax-markup-list: #f2cc60;
494 | --color-prettylights-syntax-markup-heading: #1f6feb;
495 | --color-prettylights-syntax-markup-italic: #c9d1d9;
496 | --color-prettylights-syntax-markup-bold: #c9d1d9;
497 | --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
498 | --color-prettylights-syntax-markup-deleted-bg: #67060c;
499 | --color-prettylights-syntax-markup-inserted-text: #aff5b4;
500 | --color-prettylights-syntax-markup-inserted-bg: #033a16;
501 | --color-prettylights-syntax-markup-changed-text: #ffdfb6;
502 | --color-prettylights-syntax-markup-changed-bg: #5a1e02;
503 | --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
504 | --color-prettylights-syntax-markup-ignored-bg: #1158c7;
505 | --color-prettylights-syntax-meta-diff-range: #d2a8ff;
506 | --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
507 | --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
508 | --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
509 | --color-codemirror-text: #c9d1d9;
510 | --color-codemirror-bg: #0d1117;
511 | --color-codemirror-gutters-bg: #0d1117;
512 | --color-codemirror-guttermarker-text: #0d1117;
513 | --color-codemirror-guttermarker-subtle-text: #484f58;
514 | --color-codemirror-linenumber-text: #8b949e;
515 | --color-codemirror-cursor: #c9d1d9;
516 | --color-codemirror-selection-bg: rgba(56,139,253,0.4);
517 | --color-codemirror-activeline-bg: rgba(110,118,129,0.1);
518 | --color-codemirror-matchingbracket-text: #c9d1d9;
519 | --color-codemirror-lines-bg: #0d1117;
520 | --color-codemirror-syntax-comment: #8b949e;
521 | --color-codemirror-syntax-constant: #79c0ff;
522 | --color-codemirror-syntax-entity: #d2a8ff;
523 | --color-codemirror-syntax-keyword: #ff7b72;
524 | --color-codemirror-syntax-storage: #ff7b72;
525 | --color-codemirror-syntax-string: #a5d6ff;
526 | --color-codemirror-syntax-support: #79c0ff;
527 | --color-codemirror-syntax-variable: #ffa657;
528 | --color-checks-bg: #010409;
529 | --color-checks-run-border-width: 1px;
530 | --color-checks-container-border-width: 1px;
531 | --color-checks-text-primary: #c9d1d9;
532 | --color-checks-text-secondary: #8b949e;
533 | --color-checks-text-link: #58a6ff;
534 | --color-checks-btn-icon: #8b949e;
535 | --color-checks-btn-hover-icon: #c9d1d9;
536 | --color-checks-btn-hover-bg: rgba(110,118,129,0.1);
537 | --color-checks-input-text: #8b949e;
538 | --color-checks-input-placeholder-text: #484f58;
539 | --color-checks-input-focus-text: #c9d1d9;
540 | --color-checks-input-bg: #161b22;
541 | --color-checks-input-shadow: none;
542 | --color-checks-donut-error: #f85149;
543 | --color-checks-donut-pending: #d29922;
544 | --color-checks-donut-success: #2ea043;
545 | --color-checks-donut-neutral: #8b949e;
546 | --color-checks-dropdown-text: #c9d1d9;
547 | --color-checks-dropdown-bg: #161b22;
548 | --color-checks-dropdown-border: #30363d;
549 | --color-checks-dropdown-shadow: rgba(1,4,9,0.3);
550 | --color-checks-dropdown-hover-text: #c9d1d9;
551 | --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1);
552 | --color-checks-dropdown-btn-hover-text: #c9d1d9;
553 | --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1);
554 | --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4);
555 | --color-checks-header-label-text: #8b949e;
556 | --color-checks-header-label-open-text: #c9d1d9;
557 | --color-checks-header-border: #21262d;
558 | --color-checks-header-icon: #8b949e;
559 | --color-checks-line-text: #8b949e;
560 | --color-checks-line-num-text: #484f58;
561 | --color-checks-line-timestamp-text: #484f58;
562 | --color-checks-line-hover-bg: rgba(110,118,129,0.1);
563 | --color-checks-line-selected-bg: rgba(56,139,253,0.15);
564 | --color-checks-line-selected-num-text: #58a6ff;
565 | --color-checks-line-dt-fm-text: #f0f6fc;
566 | --color-checks-line-dt-fm-bg: #9e6a03;
567 | --color-checks-gate-bg: rgba(187,128,9,0.15);
568 | --color-checks-gate-text: #8b949e;
569 | --color-checks-gate-waiting-text: #d29922;
570 | --color-checks-step-header-open-bg: #161b22;
571 | --color-checks-step-error-text: #f85149;
572 | --color-checks-step-warning-text: #d29922;
573 | --color-checks-logline-text: #8b949e;
574 | --color-checks-logline-num-text: #484f58;
575 | --color-checks-logline-debug-text: #a371f7;
576 | --color-checks-logline-error-text: #8b949e;
577 | --color-checks-logline-error-num-text: #484f58;
578 | --color-checks-logline-error-bg: rgba(248,81,73,0.15);
579 | --color-checks-logline-warning-text: #8b949e;
580 | --color-checks-logline-warning-num-text: #d29922;
581 | --color-checks-logline-warning-bg: rgba(187,128,9,0.15);
582 | --color-checks-logline-command-text: #58a6ff;
583 | --color-checks-logline-section-text: #3fb950;
584 | --color-checks-ansi-black: #0d1117;
585 | --color-checks-ansi-black-bright: #161b22;
586 | --color-checks-ansi-white: #b1bac4;
587 | --color-checks-ansi-white-bright: #b1bac4;
588 | --color-checks-ansi-gray: #6e7681;
589 | --color-checks-ansi-red: #ff7b72;
590 | --color-checks-ansi-red-bright: #ffa198;
591 | --color-checks-ansi-green: #3fb950;
592 | --color-checks-ansi-green-bright: #56d364;
593 | --color-checks-ansi-yellow: #d29922;
594 | --color-checks-ansi-yellow-bright: #e3b341;
595 | --color-checks-ansi-blue: #58a6ff;
596 | --color-checks-ansi-blue-bright: #79c0ff;
597 | --color-checks-ansi-magenta: #bc8cff;
598 | --color-checks-ansi-magenta-bright: #d2a8ff;
599 | --color-checks-ansi-cyan: #76e3ea;
600 | --color-checks-ansi-cyan-bright: #b3f0ff;
601 | --color-project-header-bg: #0d1117;
602 | --color-project-sidebar-bg: #161b22;
603 | --color-project-gradient-in: #161b22;
604 | --color-project-gradient-out: rgba(22,27,34,0);
605 | --color-mktg-success: rgba(41,147,61,1);
606 | --color-mktg-info: rgba(42,123,243,1);
607 | --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
608 | --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
609 | --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
610 | --color-mktg-btn-bg-bottom: #4969ed;
611 | --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
612 | --color-mktg-btn-bg-overlay-bottom: #3355e0;
613 | --color-mktg-btn-text: #f0f6fc;
614 | --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
615 | --color-mktg-btn-primary-bg-bottom: #2ea44f;
616 | --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
617 | --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
618 | --color-mktg-btn-primary-text: #f0f6fc;
619 | --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
620 | --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
621 | --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
622 | --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
623 | --color-mktg-btn-enterprise-text: #f0f6fc;
624 | --color-mktg-btn-outline-text: #f0f6fc;
625 | --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
626 | --color-mktg-btn-outline-hover-text: #f0f6fc;
627 | --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
628 | --color-mktg-btn-outline-focus-border: #f0f6fc;
629 | --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
630 | --color-mktg-btn-dark-text: #f0f6fc;
631 | --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
632 | --color-mktg-btn-dark-hover-text: #f0f6fc;
633 | --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
634 | --color-mktg-btn-dark-focus-border: #f0f6fc;
635 | --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5);
636 | --color-avatar-bg: rgba(240,246,252,0.1);
637 | --color-avatar-border: rgba(240,246,252,0.1);
638 | --color-avatar-stack-fade: #30363d;
639 | --color-avatar-stack-fade-more: #21262d;
640 | --color-avatar-child-shadow: -2px -2px 0 #0d1117;
641 | --color-topic-tag-border: rgba(0,0,0,0);
642 | --color-select-menu-backdrop-border: #484f58;
643 | --color-select-menu-tap-highlight: rgba(48,54,61,0.5);
644 | --color-select-menu-tap-focus-bg: #0c2d6b;
645 | --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
646 | --color-header-text: rgba(240,246,252,0.7);
647 | --color-header-bg: #161b22;
648 | --color-header-logo: #f0f6fc;
649 | --color-header-search-bg: #0d1117;
650 | --color-header-search-border: #30363d;
651 | --color-sidenav-selected-bg: #21262d;
652 | --color-menu-bg-active: #161b22;
653 | --color-control-transparent-bg-hover: #656c7633;
654 | --color-input-disabled-bg: rgba(110,118,129,0);
655 | --color-timeline-badge-bg: #21262d;
656 | --color-ansi-black: #484f58;
657 | --color-ansi-black-bright: #6e7681;
658 | --color-ansi-white: #b1bac4;
659 | --color-ansi-white-bright: #f0f6fc;
660 | --color-ansi-gray: #6e7681;
661 | --color-ansi-red: #ff7b72;
662 | --color-ansi-red-bright: #ffa198;
663 | --color-ansi-green: #3fb950;
664 | --color-ansi-green-bright: #56d364;
665 | --color-ansi-yellow: #d29922;
666 | --color-ansi-yellow-bright: #e3b341;
667 | --color-ansi-blue: #58a6ff;
668 | --color-ansi-blue-bright: #79c0ff;
669 | --color-ansi-magenta: #bc8cff;
670 | --color-ansi-magenta-bright: #d2a8ff;
671 | --color-ansi-cyan: #39c5cf;
672 | --color-ansi-cyan-bright: #56d4dd;
673 | --color-btn-text: #c9d1d9;
674 | --color-btn-bg: #21262d;
675 | --color-btn-border: rgba(240,246,252,0.1);
676 | --color-btn-shadow: 0 0 transparent;
677 | --color-btn-inset-shadow: 0 0 transparent;
678 | --color-btn-hover-bg: #30363d;
679 | --color-btn-hover-border: #8b949e;
680 | --color-btn-active-bg: hsla(212,12%,18%,1);
681 | --color-btn-active-border: #6e7681;
682 | --color-btn-selected-bg: #161b22;
683 | --color-btn-focus-bg: #21262d;
684 | --color-btn-focus-border: #8b949e;
685 | --color-btn-focus-shadow: 0 0 0 3px rgba(139,148,158,0.3);
686 | --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15);
687 | --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31,111,235,0.3);
688 | --color-btn-counter-bg: #30363d;
689 | --color-btn-primary-text: #ffffff;
690 | --color-btn-primary-bg: #238636;
691 | --color-btn-primary-border: rgba(240,246,252,0.1);
692 | --color-btn-primary-shadow: 0 0 transparent;
693 | --color-btn-primary-inset-shadow: 0 0 transparent;
694 | --color-btn-primary-hover-bg: #2ea043;
695 | --color-btn-primary-hover-border: rgba(240,246,252,0.1);
696 | --color-btn-primary-selected-bg: #238636;
697 | --color-btn-primary-selected-shadow: 0 0 transparent;
698 | --color-btn-primary-disabled-text: rgba(240,246,252,0.5);
699 | --color-btn-primary-disabled-bg: rgba(35,134,54,0.6);
700 | --color-btn-primary-disabled-border: rgba(240,246,252,0.1);
701 | --color-btn-primary-focus-bg: #238636;
702 | --color-btn-primary-focus-border: rgba(240,246,252,0.1);
703 | --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4);
704 | --color-btn-primary-icon: #f0f6fc;
705 | --color-btn-primary-counter-bg: rgba(240,246,252,0.2);
706 | --color-btn-outline-text: #58a6ff;
707 | --color-btn-outline-hover-text: #58a6ff;
708 | --color-btn-outline-hover-bg: #30363d;
709 | --color-btn-outline-hover-border: rgba(240,246,252,0.1);
710 | --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
711 | --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03);
712 | --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2);
713 | --color-btn-outline-selected-text: #f0f6fc;
714 | --color-btn-outline-selected-bg: #0d419d;
715 | --color-btn-outline-selected-border: rgba(240,246,252,0.1);
716 | --color-btn-outline-selected-shadow: 0 0 transparent;
717 | --color-btn-outline-disabled-text: rgba(88,166,255,0.5);
718 | --color-btn-outline-disabled-bg: #0d1117;
719 | --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
720 | --color-btn-outline-focus-border: rgba(240,246,252,0.1);
721 | --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17,88,199,0.4);
722 | --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
723 | --color-btn-danger-text: #f85149;
724 | --color-btn-danger-hover-text: #f0f6fc;
725 | --color-btn-danger-hover-bg: #da3633;
726 | --color-btn-danger-hover-border: #f85149;
727 | --color-btn-danger-hover-shadow: 0 0 transparent;
728 | --color-btn-danger-hover-inset-shadow: 0 0 transparent;
729 | --color-btn-danger-hover-icon: #f0f6fc;
730 | --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
731 | --color-btn-danger-selected-text: #ffffff;
732 | --color-btn-danger-selected-bg: #b62324;
733 | --color-btn-danger-selected-border: #ff7b72;
734 | --color-btn-danger-selected-shadow: 0 0 transparent;
735 | --color-btn-danger-disabled-text: rgba(248,81,73,0.5);
736 | --color-btn-danger-disabled-bg: #0d1117;
737 | --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05);
738 | --color-btn-danger-focus-border: #f85149;
739 | --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248,81,73,0.4);
740 | --color-btn-danger-counter-bg: rgba(218,54,51,0.1);
741 | --color-btn-danger-icon: #f85149;
742 | --color-underlinenav-icon: #484f58;
743 | --color-underlinenav-border-hover: rgba(110,118,129,0.4);
744 | --color-fg-default: #c9d1d9;
745 | --color-fg-muted: #8b949e;
746 | --color-fg-subtle: #484f58;
747 | --color-fg-on-emphasis: #f0f6fc;
748 | --color-canvas-default: #0d1117;
749 | --color-canvas-overlay: #161b22;
750 | --color-canvas-inset: #010409;
751 | --color-canvas-subtle: #161b22;
752 | --color-border-default: #30363d;
753 | --color-border-muted: #21262d;
754 | --color-border-subtle: rgba(240,246,252,0.1);
755 | --color-shadow-small: 0 0 transparent;
756 | --color-shadow-medium: 0 3px 6px #010409;
757 | --color-shadow-large: 0 8px 24px #010409;
758 | --color-shadow-extra-large: 0 12px 48px #010409;
759 | --color-neutral-emphasis-plus: #6e7681;
760 | --color-neutral-emphasis: #6e7681;
761 | --color-neutral-muted: rgba(110,118,129,0.4);
762 | --color-neutral-subtle: rgba(110,118,129,0.1);
763 | --color-accent-fg: #58a6ff;
764 | --color-accent-emphasis: #1f6feb;
765 | --color-accent-muted: rgba(56,139,253,0.4);
766 | --color-accent-subtle: rgba(56,139,253,0.15);
767 | --color-success-fg: #3fb950;
768 | --color-success-emphasis: #238636;
769 | --color-success-muted: rgba(46,160,67,0.4);
770 | --color-success-subtle: rgba(46,160,67,0.15);
771 | --color-attention-fg: #d29922;
772 | --color-attention-emphasis: #9e6a03;
773 | --color-attention-muted: rgba(187,128,9,0.4);
774 | --color-attention-subtle: rgba(187,128,9,0.15);
775 | --color-severe-fg: #db6d28;
776 | --color-severe-emphasis: #bd561d;
777 | --color-severe-muted: rgba(219,109,40,0.4);
778 | --color-severe-subtle: rgba(219,109,40,0.15);
779 | --color-danger-fg: #f85149;
780 | --color-danger-emphasis: #da3633;
781 | --color-danger-muted: rgba(248,81,73,0.4);
782 | --color-danger-subtle: rgba(248,81,73,0.15);
783 | --color-done-fg: #a371f7;
784 | --color-done-emphasis: #8957e5;
785 | --color-done-muted: rgba(163,113,247,0.4);
786 | --color-done-subtle: rgba(163,113,247,0.15);
787 | --color-sponsors-fg: #db61a2;
788 | --color-sponsors-emphasis: #bf4b8a;
789 | --color-sponsors-muted: rgba(219,97,162,0.4);
790 | --color-sponsors-subtle: rgba(219,97,162,0.15);
791 | --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
792 | --color-primer-canvas-sticky: rgba(13,17,23,0.95);
793 | --color-primer-border-active: #F78166;
794 | --color-primer-border-contrast: rgba(240,246,252,0.2);
795 | --color-primer-shadow-highlight: 0 0 transparent;
796 | --color-primer-shadow-inset: 0 0 transparent;
797 | --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
798 | --color-scale-black: #010409;
799 | --color-scale-white: #f0f6fc;
800 | --color-scale-gray-0: #f0f6fc;
801 | --color-scale-gray-1: #c9d1d9;
802 | --color-scale-gray-2: #b1bac4;
803 | --color-scale-gray-3: #8b949e;
804 | --color-scale-gray-4: #6e7681;
805 | --color-scale-gray-5: #484f58;
806 | --color-scale-gray-6: #30363d;
807 | --color-scale-gray-7: #21262d;
808 | --color-scale-gray-8: #161b22;
809 | --color-scale-gray-9: #0d1117;
810 | --color-scale-blue-0: #cae8ff;
811 | --color-scale-blue-1: #a5d6ff;
812 | --color-scale-blue-2: #79c0ff;
813 | --color-scale-blue-3: #58a6ff;
814 | --color-scale-blue-4: #388bfd;
815 | --color-scale-blue-5: #1f6feb;
816 | --color-scale-blue-6: #1158c7;
817 | --color-scale-blue-7: #0d419d;
818 | --color-scale-blue-8: #0c2d6b;
819 | --color-scale-blue-9: #051d4d;
820 | --color-scale-green-0: #aff5b4;
821 | --color-scale-green-1: #7ee787;
822 | --color-scale-green-2: #56d364;
823 | --color-scale-green-3: #3fb950;
824 | --color-scale-green-4: #2ea043;
825 | --color-scale-green-5: #238636;
826 | --color-scale-green-6: #196c2e;
827 | --color-scale-green-7: #0f5323;
828 | --color-scale-green-8: #033a16;
829 | --color-scale-green-9: #04260f;
830 | --color-scale-yellow-0: #f8e3a1;
831 | --color-scale-yellow-1: #f2cc60;
832 | --color-scale-yellow-2: #e3b341;
833 | --color-scale-yellow-3: #d29922;
834 | --color-scale-yellow-4: #bb8009;
835 | --color-scale-yellow-5: #9e6a03;
836 | --color-scale-yellow-6: #845306;
837 | --color-scale-yellow-7: #693e00;
838 | --color-scale-yellow-8: #4b2900;
839 | --color-scale-yellow-9: #341a00;
840 | --color-scale-orange-0: #ffdfb6;
841 | --color-scale-orange-1: #ffc680;
842 | --color-scale-orange-2: #ffa657;
843 | --color-scale-orange-3: #f0883e;
844 | --color-scale-orange-4: #db6d28;
845 | --color-scale-orange-5: #bd561d;
846 | --color-scale-orange-6: #9b4215;
847 | --color-scale-orange-7: #762d0a;
848 | --color-scale-orange-8: #5a1e02;
849 | --color-scale-orange-9: #3d1300;
850 | --color-scale-red-0: #ffdcd7;
851 | --color-scale-red-1: #ffc1ba;
852 | --color-scale-red-2: #ffa198;
853 | --color-scale-red-3: #ff7b72;
854 | --color-scale-red-4: #f85149;
855 | --color-scale-red-5: #da3633;
856 | --color-scale-red-6: #b62324;
857 | --color-scale-red-7: #8e1519;
858 | --color-scale-red-8: #67060c;
859 | --color-scale-red-9: #490202;
860 | --color-scale-purple-0: #eddeff;
861 | --color-scale-purple-1: #e2c5ff;
862 | --color-scale-purple-2: #d2a8ff;
863 | --color-scale-purple-3: #bc8cff;
864 | --color-scale-purple-4: #a371f7;
865 | --color-scale-purple-5: #8957e5;
866 | --color-scale-purple-6: #6e40c9;
867 | --color-scale-purple-7: #553098;
868 | --color-scale-purple-8: #3c1e70;
869 | --color-scale-purple-9: #271052;
870 | --color-scale-pink-0: #ffdaec;
871 | --color-scale-pink-1: #ffbedd;
872 | --color-scale-pink-2: #ff9bce;
873 | --color-scale-pink-3: #f778ba;
874 | --color-scale-pink-4: #db61a2;
875 | --color-scale-pink-5: #bf4b8a;
876 | --color-scale-pink-6: #9e3670;
877 | --color-scale-pink-7: #7d2457;
878 | --color-scale-pink-8: #5e103e;
879 | --color-scale-pink-9: #42062a;
880 | --color-scale-coral-0: #FFDDD2;
881 | --color-scale-coral-1: #FFC2B2;
882 | --color-scale-coral-2: #FFA28B;
883 | --color-scale-coral-3: #F78166;
884 | --color-scale-coral-4: #EA6045;
885 | --color-scale-coral-5: #CF462D;
886 | --color-scale-coral-6: #AC3220;
887 | --color-scale-coral-7: #872012;
888 | --color-scale-coral-8: #640D04;
889 | --color-scale-coral-9: #460701
890 | }
891 | }
892 |
```