color ratio fixed (npm#290)

makhmudjon-inadullaev · Makhmudjon Inadullaev · web-flow · commit 6f5d0c7945ab · 2022-11-04T11:49:14.000+04:00
Co-authored-by: Makhmudjon Inadullaev &lt;makhmudjon@Makhmudjons-MacBook-Pro-2.local&gt;
diff --git a/theme/src/components/clipboard-copy.js b/theme/src/components/clipboard-copy.js
@@ -1,8 +1,15 @@
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, StyledOcticon, themeGet} from '@primer/components'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
+import styled from 'styled-components'
 import copy from 'copy-to-clipboard'
 import React from 'react'
 
+const CopyToClipboard = styled(Button)`
+  &:focus {
+    box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
+  }
+`
+
 function ClipboardCopy({value}) {
   const [copied, setCopied] = React.useState(false)
 
@@ -15,15 +22,15 @@ function ClipboardCopy({value}) {
   }, [copied])
 
   return (
-    <Button
+    <CopyToClipboard
       aria-label="Copy to clipboard"
       onClick={() => {
         copy(value)
         setCopied(true)
       }}
     >
       {copied ? <StyledOcticon icon={CheckIcon} color="green.5" /> : <StyledOcticon icon={CopyIcon} color="gray.7" />}
-    </Button>
+    </CopyToClipboard>
   )
 }
 
