Fixes focus outline color

gitkraken · Nov 21, 2024 · b2ed2b1 · b2ed2b1
1 parent 51d30e5
commit b2ed2b1
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts
@@ -10,7 +10,7 @@ import type { GetOverviewBranch, OpenInGraphParams, State } from '../../../../ho
 import { stateContext } from '../../../home/context';
 import { ipcContext } from '../../../shared/context';
 import type { HostIpc } from '../../../shared/ipc';
-import { branchCardStyles, createCommandLink, headingLoaderStyles } from './branch-section';
+import { linkStyles } from '../../shared/components/vscode.css';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/button';
@@ -29,6 +29,7 @@ export const activeWorkTagName = 'gl-active-work';
 @customElement(activeWorkTagName)
 export class GlActiveWork extends SignalWatcher(LitElement) {
 	static override styles = [
+		linkStyles,
 		branchCardStyles,
 		headingLoaderStyles,
 		css`

diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
@@ -5,6 +5,7 @@ import type { Commands } from '../../../../../constants.commands';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import type { GetOverviewBranch, OpenInGraphParams } from '../../../../home/protocol';
 import { srOnlyStyles } from '../../../shared/components/styles/lit/a11y.css';
+import { linkStyles } from '../../shared/components/vscode.css';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/avatar/avatar';
 import '../../../shared/components/avatar/avatar-list';
@@ -181,7 +182,7 @@ export const branchCardStyles = css`
 
 @customElement('gl-branch-card')
 export class GlBranchCard extends LitElement {
-	static override styles = branchCardStyles;
+	static override styles = [linkStyles, branchCardStyles];
 
 	@property()
 	repo!: string;

diff --git a/src/webviews/apps/plus/home/components/launchpad.ts b/src/webviews/apps/plus/home/components/launchpad.ts
@@ -15,6 +15,7 @@ import { AsyncComputedState } from '../../../shared/components/signal-utils';
 import { ipcContext } from '../../../shared/context';
 import type { Disposable } from '../../../shared/events';
 import type { HostIpc } from '../../../shared/ipc';
+import { linkStyles } from '../../shared/components/vscode.css';
 import '../../../shared/components/button';
 import '../../../shared/components/button-container';
 import '../../../shared/components/code-icon';
@@ -31,6 +32,7 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 	};
 
 	static override styles = [
+		linkStyles,
 		css`
 			:host {
 				display: block;

diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
@@ -8,7 +8,7 @@ import { SetOverviewFilter } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
 import { ipcContext } from '../../../shared/context';
 import type { HostIpc } from '../../../shared/ipc';
-import { headingLoaderStyles } from './branch-section';
+import { linkStyles } from '../../shared/components/vscode.css';
 import type { OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/skeleton-loader';
@@ -21,7 +21,7 @@ export const overviewTagName = 'gl-overview';
 @customElement(overviewTagName)
 export class GlOverview extends SignalWatcher(LitElement) {
 	static override styles = [
-		headingLoaderStyles,
+		linkStyles,
 		css`
 			:host {
 				display: block;

diff --git a/src/webviews/apps/plus/shared/components/vscode.css.ts b/src/webviews/apps/plus/shared/components/vscode.css.ts
@@ -10,7 +10,7 @@ export const linkStyles = css`
 	}
 	a:focus,
 	a:focus-visible {
-		outline-color: var(--focus-border);
+		outline-color: var(--color-focus-border);
 		outline-style: solid;
 		outline-width: 1px;
 		border-radius: 0.2rem;