From 88e82e7b2e28d3977c0e159077a4bef71ad4ef76 Mon Sep 17 00:00:00 2001
From: Kirill Pavlov <pavlov-kirill@github.com>
Date: Thu, 13 Oct 2022 15:08:34 +0400
Subject: [PATCH] changed style for focused VarianSelect element

---
 theme/src/components/variant-select.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/theme/src/components/variant-select.js b/theme/src/components/variant-select.js
index b7ca6b501c9..71f8ef1725a 100644
--- a/theme/src/components/variant-select.js
+++ b/theme/src/components/variant-select.js
@@ -6,13 +6,19 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Dropdown } from '@primer/components';
+import { Dropdown, themeGet } from '@primer/components';
 import NavHierarchy from '../nav-hierarchy'
 
 VariantSelect.Menu = styled(Dropdown.Menu)`
   width: ${props => props.width ? props.width : '160px'};
 `
 
+VariantSelect.Button = styled(Dropdown.Button)`
+  &:focus {
+    box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
+  }
+`
+
 function VariantSelect(props) {
   const path = NavHierarchy.getPath(props.location.pathname);
   const vp = NavHierarchy.getVariantAndPage(props.root, path);
@@ -39,7 +45,7 @@ function VariantSelect(props) {
 
   return (
       <Dropdown overlay={props.overlay}>
-          <Dropdown.Button>{selectedItem.variant.title}</Dropdown.Button>
+          <VariantSelect.Button>{selectedItem.variant.title}</VariantSelect.Button>
           <VariantSelect.Menu direction={props.direction} width={props.menuWidth}>
               {items}
           </VariantSelect.Menu>