wlxsp
/
test1
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

Moves theme css variables into css 

Moves font style blocks into head
main
Eric Amodio 1 рік тому
джерело
7f17815863
коміт
c53919c03e
23 змінених файлів з 291 додано та 261 видалено
Розділений перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +12
    -12
      src/webviews/apps/commitDetails/commitDetails.html
  2. +2
    -0
      src/webviews/apps/commitDetails/commitDetails.scss
  3. +12
    -12
      src/webviews/apps/home/home.html
  4. +1
    -0
      src/webviews/apps/home/home.scss
  5. +3
    -3
      src/webviews/apps/home/home.ts
  6. +6
    -6
      src/webviews/apps/plus/account/account.html
  7. +1
    -0
      src/webviews/apps/plus/account/account.scss
  8. +16
    -17
      src/webviews/apps/plus/focus/focus.html
  9. +2
    -0
      src/webviews/apps/plus/focus/focus.scss
  10. +12
    -12
      src/webviews/apps/plus/graph/graph.html
  11. +1
    -0
      src/webviews/apps/plus/graph/graph.scss
  12. +10
    -16
      src/webviews/apps/plus/timeline/timeline.html
  13. +3
    -1
      src/webviews/apps/plus/timeline/timeline.scss
  14. +7
    -7
      src/webviews/apps/rebase/rebase.html
  15. +1
    -0
      src/webviews/apps/rebase/rebase.scss
  16. +7
    -7
      src/webviews/apps/settings/settings.html
  17. +1
    -0
      src/webviews/apps/settings/settings.scss
  18. +10
    -7
      src/webviews/apps/shared/appBase.ts
  19. +83
    -0
      src/webviews/apps/shared/styles/theme.scss
  20. +80
    -140
      src/webviews/apps/shared/theme.ts
  21. +16
    -17
      src/webviews/apps/welcome/welcome.html
  22. +1
    -0
      src/webviews/apps/welcome/welcome.scss
  23. +4
    -4
      src/webviews/home/homeWebview.ts

+ 12
- 12
src/webviews/apps/commitDetails/commitDetails.html Переглянути файл

@ -2,6 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</head>
<body class="preload" data-placement="#{placement}">
@ -251,17 +263,5 @@
</main>
</div>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</body>
</html>

+ 2
- 0
src/webviews/apps/commitDetails/commitDetails.scss Переглянути файл

@ -1,3 +1,5 @@
@use '../shared/styles/theme';
:root {
--gitlens-gutter-width: 20px;
--gitlens-scrollbar-gutter-width: 10px;

+ 12
- 12
src/webviews/apps/home/home.html Переглянути файл

@ -2,6 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</head>
<body class="home preload" data-placement="#{placement}">
@ -280,17 +292,5 @@
</main>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</body>
</html>

+ 1
- 0
src/webviews/apps/home/home.scss Переглянути файл

@ -1,5 +1,6 @@
@use '../shared/styles/utils';
@use '../shared/styles/properties';
@use '../shared/styles/theme';
:root {
--gitlens-z-inline: 1000;

+ 3
- 3
src/webviews/apps/home/home.ts Переглянути файл

@ -116,11 +116,11 @@ function setElementVisibility(elementOrId: string | HTMLElement | null | undefin
if (el == null) return;
if (visible) {
el.setAttribute('aria-hidden', 'false');
el.removeAttribute('aria-hidden');
el.removeAttribute('hidden');
} else {
el.setAttribute('aria-hidden', 'true');
el?.setAttribute('hidden', 'true');
el.setAttribute('aria-hidden', '');
el?.setAttribute('hidden', '');
}
}

+ 6
- 6
src/webviews/apps/plus/account/account.html Переглянути файл

@ -2,12 +2,6 @@
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body class="account scrollable preload" data-placement="#{placement}">
<account-content id="account-content"></account-content>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
@ -15,5 +9,11 @@
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
</style>
</head>
<body class="account scrollable preload" data-placement="#{placement}">
<account-content id="account-content"></account-content>
#{endOfBody}
</body>
</html>

+ 1
- 0
src/webviews/apps/plus/account/account.scss Переглянути файл

@ -1,4 +1,5 @@
@use '../../shared/styles/properties';
@use '../../shared/styles/theme';
:root {
--gitlens-z-inline: 1000;

+ 16
- 17
src/webviews/apps/plus/focus/focus.html Переглянути файл

@ -2,6 +2,22 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
:root {
--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop-opacity.webp);
}
</style>
</head>
<body class="preload" data-placement="#{placement}">
@ -142,22 +158,5 @@
</div>
</div>
#{endOfBody}
<style nonce="#{cspNonce}">
:root {
--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop-opacity.webp);
}
</style>
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</body>
</html>

+ 2
- 0
src/webviews/apps/plus/focus/focus.scss Переглянути файл

@ -1,3 +1,5 @@
@use '../../shared/styles/theme';
@mixin focusStyles() {
outline: 1px solid var(--vscode-focusBorder);
outline-offset: -1px;

+ 12
- 12
src/webviews/apps/plus/graph/graph.html Переглянути файл

@ -2,18 +2,6 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="application/javascript" nonce="#{cspNonce}">
window.webpackResourceBasePath = '#{webroot}/';
</script>
</head>
<body
class="graph-app scrollable"
data-placement="#{placement}"
data-vscode-context='{ "preventDefaultContextMenuItems": true }'
>
<div id="root" class="graph-app__container"></div>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
@ -26,5 +14,17 @@
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
<script type="application/javascript" nonce="#{cspNonce}">
window.webpackResourceBasePath = '#{webroot}/';
</script>
</head>
<body
class="graph-app scrollable"
data-placement="#{placement}"
data-vscode-context='{ "preventDefaultContextMenuItems": true }'
>
<div id="root" class="graph-app__container"></div>
#{endOfBody}
</body>
</html>

+ 1
- 0
src/webviews/apps/plus/graph/graph.scss Переглянути файл

@ -1,3 +1,4 @@
@use '../../shared/styles/theme';
@import '../../shared/base';
@import '../../shared/codicons';
@import '../../shared/glicons';

+ 10
- 16
src/webviews/apps/plus/timeline/timeline.html Переглянути файл

@ -2,9 +2,16 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.hidden {
display: none !important;
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</head>
@ -58,18 +65,5 @@
<section id="footer"></section>
</div>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</body>
</html>

+ 3
- 1
src/webviews/apps/plus/timeline/timeline.scss Переглянути файл

@ -1,4 +1,5 @@
@use '../../shared/styles/properties';
@use '../../shared/styles/theme';
* {
box-sizing: border-box;
@ -173,8 +174,9 @@ h4 {
}
}
[hidden],
[data-visible] {
display: none;
display: none !important;
}
body[data-placement='editor'] {

+ 7
- 7
src/webviews/apps/rebase/rebase.html Переглянути файл

@ -2,6 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
</style>
</head>
<body class="scrollable preload" data-placement="#{placement}">
@ -61,12 +68,5 @@
</footer>
</div>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
</style>
</body>
</html>

+ 1
- 0
src/webviews/apps/rebase/rebase.scss Переглянути файл

@ -1,3 +1,4 @@
@use '../shared/styles/theme';
@import '../shared/base';
@import '../shared/buttons';
@import '../shared/utils';

+ 7
- 7
src/webviews/apps/settings/settings.html Переглянути файл

@ -2,6 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
</style>
</head>
<body class="scrollable preload" data-placement="#{placement}">
@ -351,13 +358,6 @@
</div>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
</style>
</body>
<template id="token-popup">

+ 1
- 0
src/webviews/apps/settings/settings.scss Переглянути файл

@ -1,3 +1,4 @@
@use '../shared/styles/theme';
@import '../shared/base';
@import '../shared/buttons';
@import '../shared/icons';

+ 10
- 7
src/webviews/apps/shared/appBase.ts Переглянути файл

@ -13,7 +13,7 @@ import { onIpc, WebviewFocusChangedCommandType, WebviewReadyCommandType } from '
import { DOM } from './dom';
import type { Disposable } from './events';
import type { ThemeChangeEvent } from './theme';
import { initializeAndWatchThemeColors, onDidChangeTheme } from './theme';
import { computeThemeColors, onDidChangeTheme, watchThemeColors } from './theme';
declare const DEBUG: boolean;
@ -44,6 +44,14 @@ export abstract class App
protected readonly placement: 'editor' | 'view';
constructor(protected readonly appName: string) {
const disposables: Disposable[] = [];
const themeEvent = computeThemeColors();
if (this.onThemeUpdated != null) {
this.onThemeUpdated(themeEvent);
disposables.push(onDidChangeTheme(this.onThemeUpdated, this));
}
this.state = (window as any).bootstrap;
(window as any).bootstrap = undefined;
@ -77,12 +85,7 @@ export abstract class App
}
}
const disposables: Disposable[] = [];
if (this.onThemeUpdated != null) {
disposables.push(onDidChangeTheme(this.onThemeUpdated, this));
}
disposables.push(initializeAndWatchThemeColors());
disposables.push(watchThemeColors());
requestAnimationFrame(() => {
this.log(`ctor(): initializing...`);

+ 83
- 0
src/webviews/apps/shared/styles/theme.scss Переглянути файл

@ -0,0 +1,83 @@
:root {
--font-family: var(--vscode-font-family);
--font-size: var(--vscode-font-size);
--font-weight: var(--vscode-font-weight);
--editor-font-family: var(--vscode-editor-font-family);
--editor-font-size: var(--vscode-editor-font-size);
--editor-font-weight: var(--vscode-editor-font-weight);
--color-background: var(--vscode-editor-background);
// Computed variants in code
--color-background--lighten-05: var(--color-background);
--color-background--darken-05: var(--color-background);
--color-background--lighten-075: var(--color-background);
--color-background--darken-075: var(--color-background);
--color-background--lighten-10: var(--color-background);
--color-background--darken-10: var(--color-background);
--color-background--lighten-15: var(--color-background);
--color-background--darken-15: var(--color-background);
--color-background--lighten-30: var(--color-background);
--color-background--darken-30: var(--color-background);
--color-background--lighten-50: var(--color-background);
--color-background--darken-50: var(--color-background);
--color-button-background: var(--vscode-button-background, transparent);
// Computed variants in code
--color-button-background--darken-30: var(--color-button-background);
--color-button-secondary-background: var(--vscode-button-secondaryBackground, transparent);
// Computed variants in code
--color-button-secondary-background--darken-30: var(--color-button-secondaryBackground);
--color-highlight: var(--vscode-button-background, var(--vscode-button-border));
// Computed variants in code
--color-highlight--75: var(--color-highlight);
--color-highlight--50: var(--color-highlight);
--color-highlight--25: var(--color-highlight);
--color-foreground: var(--vscode-editor-foreground, var(--vscode-foreground));
// Computed variants in code
--color-foreground--85: var(--color-foreground);
--color-foreground--75: var(--color-foreground);
--color-foreground--65: var(--color-foreground);
--color-foreground--50: var(--color-foreground);
--color-focus-border: var(--vscode-focusBorder);
--color-link-foreground: var(--vscode-textLink-foreground);
// Computed variants in code
--color-link-foreground--darken-20: var(--color-link-foreground);
--color-link-foreground--lighten-20: var(--color-link-foreground);
--color-view-background: var(--vscode-sideBar-background, var(--color-background));
--color-view-foreground: var(--vscode-sideBar-foreground, var(--color-foreground));
--color-view-header-foreground: var(--vscode-sideBarSectionHeader-foreground, var(--color-foreground));
--color-hover-background: var(--vscode-editorHoverWidget-background);
--color-hover-border: var(--vscode-editorHoverWidget-border);
--color-hover-foreground: var(--vscode-editorHoverWidget-foreground);
--color-hover-statusBarBackground: var(--vscode-editorHoverWidget-statusBarBackground);
--color-alert-infoBackground: var(--vscode-inputValidation-infoBackground);
--color-alert-infoBorder: var(--vscode-inputValidation-infoBorder);
// Computed variants in code
--color-alert-infoHoverBackground: var(--color-alert-infoBackground);
--color-alert-warningBackground: var(--vscode-inputValidation-warningBackground);
--color-alert-warningBorder: var(--vscode-inputValidation-warningBorder);
// Computed variants in code
--color-alert-warningHoverBackground: var(--color-alert-warningBackground);
--color-alert-errorBackground: var(--vscode-inputValidation-errorBackground);
--color-alert-errorBorder: var(--vscode-inputValidation-errorBorder);
// Computed variants in code
--color-alert-errorHoverBackground: var(--color-alert-errorBackground);
--color-alert-neutralBackground: var(--vscode-editor-background); // Computed in code
--color-alert-neutralBorder: var(--vscode-input-foreground);
// Computed variants in code
--color-alert-neutralHoverBackground: var(--color-alert-neutralBackground);
--color-alert-foreground: var(--vscode-input-foreground);
}

+ 80
- 140
src/webviews/apps/shared/theme.ts Переглянути файл

@ -19,148 +19,88 @@ export interface ThemeChangeEvent {
const _onDidChangeTheme = new Emitter<ThemeChangeEvent>();
export const onDidChangeTheme: Event<ThemeChangeEvent> = _onDidChangeTheme.event;
export function initializeAndWatchThemeColors(): Disposable {
const onColorThemeChanged = (mutations?: MutationRecord[]) => {
const body = document.body;
const computedStyle = window.getComputedStyle(body);
const isLightTheme =
body.classList.contains('vscode-light') || body.classList.contains('vscode-high-contrast-light');
const isHighContrastTheme =
body.classList.contains('vscode-high-contrast') || body.classList.contains('vscode-high-contrast-light');
const bodyStyle = body.style;
bodyStyle.setProperty('--font-family', computedStyle.getPropertyValue('--vscode-font-family').trim());
bodyStyle.setProperty('--font-size', computedStyle.getPropertyValue('--vscode-font-size').trim());
bodyStyle.setProperty('--font-weight', computedStyle.getPropertyValue('--vscode-font-weight').trim());
bodyStyle.setProperty(
'--editor-font-family',
computedStyle.getPropertyValue('--vscode-editor-font-family').trim(),
);
bodyStyle.setProperty('--editor-font-size', computedStyle.getPropertyValue('--vscode-editor-font-size').trim());
bodyStyle.setProperty(
'--editor-font-weight',
computedStyle.getPropertyValue('--vscode-editor-font-weight').trim(),
);
const backgroundColor = computedStyle.getPropertyValue('--vscode-editor-background').trim();
let foregroundColor = computedStyle.getPropertyValue('--vscode-editor-foreground').trim();
if (!foregroundColor) {
foregroundColor = computedStyle.getPropertyValue('--vscode-foreground').trim();
}
let color = backgroundColor;
bodyStyle.setProperty('--color-background', color);
bodyStyle.setProperty('--color-background--lighten-05', lighten(color, 5));
bodyStyle.setProperty('--color-background--darken-05', darken(color, 5));
bodyStyle.setProperty('--color-background--lighten-075', lighten(color, 7.5));
bodyStyle.setProperty('--color-background--darken-075', darken(color, 7.5));
bodyStyle.setProperty('--color-background--lighten-10', lighten(color, 10));
bodyStyle.setProperty('--color-background--darken-10', darken(color, 10));
bodyStyle.setProperty('--color-background--lighten-15', lighten(color, 15));
bodyStyle.setProperty('--color-background--darken-15', darken(color, 15));
bodyStyle.setProperty('--color-background--lighten-30', lighten(color, 30));
bodyStyle.setProperty('--color-background--darken-30', darken(color, 30));
bodyStyle.setProperty('--color-background--lighten-50', lighten(color, 50));
bodyStyle.setProperty('--color-background--darken-50', darken(color, 50));
color = computedStyle.getPropertyValue('--vscode-button-background').trim();
bodyStyle.setProperty('--color-button-background', color);
bodyStyle.setProperty('--color-button-background--darken-30', darken(color, 30));
bodyStyle.setProperty('--color-highlight', color);
bodyStyle.setProperty('--color-highlight--75', opacity(color, 75));
bodyStyle.setProperty('--color-highlight--50', opacity(color, 50));
bodyStyle.setProperty('--color-highlight--25', opacity(color, 25));
color = computedStyle.getPropertyValue('--vscode-button-secondaryBackground').trim();
bodyStyle.setProperty('--color-button-secondary-background', color);
bodyStyle.setProperty('--color-button-secondary-background--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--vscode-button-foreground').trim();
bodyStyle.setProperty('--color-button-foreground', color);
bodyStyle.setProperty('--color-foreground', foregroundColor);
bodyStyle.setProperty('--color-foreground--85', opacity(foregroundColor, 85));
bodyStyle.setProperty('--color-foreground--75', opacity(foregroundColor, 75));
bodyStyle.setProperty('--color-foreground--65', opacity(foregroundColor, 65));
bodyStyle.setProperty('--color-foreground--50', opacity(foregroundColor, 50));
color = computedStyle.getPropertyValue('--vscode-focusBorder').trim();
bodyStyle.setProperty('--color-focus-border', color);
color = computedStyle.getPropertyValue('--vscode-textLink-foreground').trim();
bodyStyle.setProperty('--color-link-foreground', color);
bodyStyle.setProperty('--color-link-foreground--darken-20', darken(color, 20));
bodyStyle.setProperty('--color-link-foreground--lighten-20', lighten(color, 20));
color = computedStyle.getPropertyValue('--vscode-sideBar-background').trim();
bodyStyle.setProperty('--color-view-background', color || backgroundColor);
color = computedStyle.getPropertyValue('--vscode-sideBar-foreground').trim();
bodyStyle.setProperty('--color-view-foreground', color || foregroundColor);
bodyStyle.setProperty(
'--color-view-header-foreground',
computedStyle.getPropertyValue('--vscode-sideBarSectionHeader-foreground').trim() ||
color ||
foregroundColor,
);
color = computedStyle.getPropertyValue('--vscode-editorHoverWidget-background').trim();
bodyStyle.setProperty('--color-hover-background', color);
color = computedStyle.getPropertyValue('--vscode-editorHoverWidget-border').trim();
bodyStyle.setProperty('--color-hover-border', color);
color = computedStyle.getPropertyValue('--vscode-editorHoverWidget-foreground').trim();
bodyStyle.setProperty('--color-hover-foreground', color);
color = computedStyle.getPropertyValue('--vscode-editorHoverWidget-statusBarBackground').trim();
bodyStyle.setProperty('--color-hover-statusBarBackground', color);
// alert colors
color = computedStyle.getPropertyValue('--vscode-inputValidation-infoBackground').trim();
bodyStyle.setProperty('--color-alert-infoHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
bodyStyle.setProperty('--color-alert-infoBackground', color);
color = computedStyle.getPropertyValue('--vscode-inputValidation-warningBackground').trim();
bodyStyle.setProperty(
'--color-alert-warningHoverBackground',
isLightTheme ? darken(color, 5) : lighten(color, 5),
);
bodyStyle.setProperty('--color-alert-warningBackground', color);
color = computedStyle.getPropertyValue('--vscode-inputValidation-errorBackground').trim();
bodyStyle.setProperty(
'--color-alert-errorHoverBackground',
isLightTheme ? darken(color, 5) : lighten(color, 5),
);
bodyStyle.setProperty('--color-alert-errorBackground', color);
color = isLightTheme ? darken(backgroundColor, 5) : lighten(backgroundColor, 5);
bodyStyle.setProperty(
'--color-alert-neutralHoverBackground',
isLightTheme ? darken(color, 5) : lighten(color, 5),
);
bodyStyle.setProperty('--color-alert-neutralBackground', color);
bodyStyle.setProperty('--color-alert-infoBorder', 'var(--vscode-inputValidation-infoBorder)');
bodyStyle.setProperty('--color-alert-warningBorder', 'var(--vscode-inputValidation-warningBorder)');
bodyStyle.setProperty('--color-alert-errorBorder', 'var(--vscode-inputValidation-errorBorder)');
bodyStyle.setProperty('--color-alert-neutralBorder', 'var(--vscode-input-foreground)');
bodyStyle.setProperty('--color-alert-foreground', 'var(--vscode-input-foreground)');
_onDidChangeTheme.fire({
colors: {
background: backgroundColor,
foreground: foregroundColor,
},
computedStyle: computedStyle,
isLightTheme: isLightTheme,
isHighContrastTheme: isHighContrastTheme,
isInitializing: mutations == null,
});
export function computeThemeColors(mutations?: MutationRecord[]): ThemeChangeEvent {
const body = document.body;
const computedStyle = window.getComputedStyle(body);
const isLightTheme =
body.classList.contains('vscode-light') || body.classList.contains('vscode-high-contrast-light');
const isHighContrastTheme =
body.classList.contains('vscode-high-contrast') || body.classList.contains('vscode-high-contrast-light');
const bodyStyle = body.style;
const backgroundColor = computedStyle.getPropertyValue('--vscode-editor-background').trim();
let foregroundColor = computedStyle.getPropertyValue('--vscode-editor-foreground').trim();
if (!foregroundColor) {
foregroundColor = computedStyle.getPropertyValue('--vscode-foreground').trim();
}
let color = computedStyle.getPropertyValue('--color-background').trim();
bodyStyle.setProperty('--color-background--lighten-05', lighten(color, 5));
bodyStyle.setProperty('--color-background--darken-05', darken(color, 5));
bodyStyle.setProperty('--color-background--lighten-075', lighten(color, 7.5));
bodyStyle.setProperty('--color-background--darken-075', darken(color, 7.5));
bodyStyle.setProperty('--color-background--lighten-10', lighten(color, 10));
bodyStyle.setProperty('--color-background--darken-10', darken(color, 10));
bodyStyle.setProperty('--color-background--lighten-15', lighten(color, 15));
bodyStyle.setProperty('--color-background--darken-15', darken(color, 15));
bodyStyle.setProperty('--color-background--lighten-30', lighten(color, 30));
bodyStyle.setProperty('--color-background--darken-30', darken(color, 30));
bodyStyle.setProperty('--color-background--lighten-50', lighten(color, 50));
bodyStyle.setProperty('--color-background--darken-50', darken(color, 50));
color = computedStyle.getPropertyValue('--color-button-background').trim();
bodyStyle.setProperty('--color-button-background--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--color-highlight').trim();
bodyStyle.setProperty('--color-highlight--75', opacity(color, 75));
bodyStyle.setProperty('--color-highlight--50', opacity(color, 50));
bodyStyle.setProperty('--color-highlight--25', opacity(color, 25));
color = computedStyle.getPropertyValue('--color-button-secondary-background').trim();
bodyStyle.setProperty('--color-button-secondary-background--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--color-foreground').trim();
bodyStyle.setProperty('--color-foreground--85', opacity(color, 85));
bodyStyle.setProperty('--color-foreground--75', opacity(color, 75));
bodyStyle.setProperty('--color-foreground--65', opacity(color, 65));
bodyStyle.setProperty('--color-foreground--50', opacity(color, 50));
color = computedStyle.getPropertyValue('--color-link-foreground').trim();
bodyStyle.setProperty('--color-link-foreground--darken-20', darken(color, 20));
bodyStyle.setProperty('--color-link-foreground--lighten-20', lighten(color, 20));
color = computedStyle.getPropertyValue('--color-alert-infoBackground').trim();
bodyStyle.setProperty('--color-alert-infoHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
color = computedStyle.getPropertyValue('--color-alert-warningBackground').trim();
bodyStyle.setProperty('--color-alert-warningHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
color = computedStyle.getPropertyValue('--color-alert-errorBackground').trim();
bodyStyle.setProperty('--color-alert-errorHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
color = isLightTheme ? darken(backgroundColor, 5) : lighten(backgroundColor, 5);
bodyStyle.setProperty('--color-alert-neutralBackground', color);
bodyStyle.setProperty('--color-alert-neutralHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
return {
colors: {
background: backgroundColor,
foreground: foregroundColor,
},
computedStyle: computedStyle,
isLightTheme: isLightTheme,
isHighContrastTheme: isHighContrastTheme,
isInitializing: mutations == null,
};
}
onColorThemeChanged();
const observer = new MutationObserver(onColorThemeChanged);
export function watchThemeColors(): Disposable {
const observer = new MutationObserver((mutations?: MutationRecord[]) => {
_onDidChangeTheme.fire(computeThemeColors(mutations));
});
observer.observe(document.body, { attributeFilter: ['class'] });
return { dispose: () => observer.disconnect() };
}

+ 16
- 17
src/webviews/apps/welcome/welcome.html Переглянути файл

@ -2,6 +2,22 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
.video-button {
--video-banner-bg: url(#{webroot}/media/getting-started.webp);
}
</style>
</head>
<body class="welcome scrollable preload" data-placement="#{placement}">
@ -475,11 +491,6 @@
<h2>Tutorial Video</h2>
<nav class="welcome__starting-nav" aria-label="Getting started links">
<style nonce="#{cspNonce}">
.video-button {
--video-banner-bg: url(#{webroot}/media/getting-started.webp);
}
</style>
<a
class="video-button"
href="https://www.youtube.com/watch?v=UQPb73Zz9qk"
@ -631,17 +642,5 @@
<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
</footer>
#{endOfBody}
<style nonce="#{cspNonce}">
@font-face {
font-family: 'codicon';
font-display: block;
src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
}
@font-face {
font-family: 'glicons';
font-display: block;
src: url('#{root}/dist/glicons.woff2?ab6c9110fb0444acd9ba719c4c55fa68') format('woff2');
}
</style>
</body>
</html>

+ 1
- 0
src/webviews/apps/welcome/welcome.scss Переглянути файл

@ -1,6 +1,7 @@
@use '../shared/styles/utils';
@use '../shared/styles/properties';
@use '../shared/styles/normalize';
@use '../shared/styles/theme';
// normalize type
body {

+ 4
- 4
src/webviews/home/homeWebview.ts Переглянути файл

@ -35,16 +35,16 @@ export class HomeWebviewProvider implements WebviewProvider {
return [registerCommand(`${this.host.id}.refresh`, () => this.host.refresh(true), this)];
}
includeBootstrap(): Promise<State> {
includeBootstrap(): State {
return this.getState();
}
private async getState(): Promise<State> {
return Promise.resolve({
private getState(): State {
return {
timestamp: Date.now(),
repositories: this.getRepositoriesState(),
webroot: this.host.getWebRoot(),
});
};
}
private getRepositoriesState(): DidChangeRepositoriesParams {

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти