chore(community-tags): make borders respond to browser font size

Remove focus outline styles for Firefox

Author: theetrain

packages/Tags/TagItem/TagItem.jsx

@@ -44,7 +44,7 @@ const StyledTagButton = styled(Box)(
       alignItems: 'center',
       position: 'relative',
       border: `1px solid ${colorTelusPurple}`,
-      borderRadius: '20px',
+      borderRadius: '1.25rem',
       height: '2.5rem',
       '&:hover': {
         background: colors.hover,
@@ -58,7 +58,10 @@ const StyledTagButton = styled(Box)(
         bottom: '-2px',
         right: '-2px',
         border: `1px solid ${colors.border}`,
-        borderRadius: '22px',
+        borderRadius: '1.375rem',
+      },
+      '::-moz-focus-inner': {
+        border: 0,
       },
       '&:focus': {
         outline: 'none',
@@ -72,7 +75,7 @@ const StyledTagButton = styled(Box)(
           right: isSelected ? '-10px' : '-11px',
           border: `${isSelected ? '2px' : '3px'} solid ${colors.outline}`,
           margin: '5px',
-          borderRadius: '25px',
+          borderRadius: '1.5625rem',
         },
       },
       '&:active': {

packages/Tags/TagItem/__tests__/__snapshots__/TagItem.spec.jsx.snap

@@ -38,7 +38,7 @@ exports[`TagItem renders 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -54,7 +54,11 @@ exports[`TagItem renders 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c0::-moz-focus-inner {
+  border: 0;
 }
 
 .c0:focus {
@@ -71,7 +75,7 @@ exports[`TagItem renders 1`] = `
   right: -11px;
   border: 3px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c0:active {
@@ -352,7 +356,7 @@ exports[`TagItem renders with a pressed state when isLoading is true 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -368,7 +372,11 @@ exports[`TagItem renders with a pressed state when isLoading is true 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c0::-moz-focus-inner {
+  border: 0;
 }
 
 .c0:focus {
@@ -385,7 +393,7 @@ exports[`TagItem renders with a pressed state when isLoading is true 1`] = `
   right: -11px;
   border: 3px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c0:active {

packages/Tags/__tests__/__snapshots__/Tags.spec.jsx.snap

@@ -61,7 +61,7 @@ exports[`Tags renders 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -77,7 +77,11 @@ exports[`Tags renders 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c3::-moz-focus-inner {
+  border: 0;
 }
 
 .c3:focus {
@@ -94,7 +98,7 @@ exports[`Tags renders 1`] = `
   right: -11px;
   border: 3px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c3:active {
@@ -827,7 +831,7 @@ exports[`Tags renders isSelected 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -843,7 +847,11 @@ exports[`Tags renders isSelected 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c3::-moz-focus-inner {
+  border: 0;
 }
 
 .c3:focus {
@@ -860,7 +868,7 @@ exports[`Tags renders isSelected 1`] = `
   right: -11px;
   border: 3px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c3:active {
@@ -886,7 +894,7 @@ exports[`Tags renders isSelected 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -903,7 +911,11 @@ exports[`Tags renders isSelected 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c7::-moz-focus-inner {
+  border: 0;
 }
 
 .c7:focus {
@@ -920,7 +932,7 @@ exports[`Tags renders isSelected 1`] = `
   right: -10px;
   border: 2px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c7:active {
@@ -1646,7 +1658,7 @@ exports[`Tags renders when using the children prop 1`] = `
   align-items: center;
   position: relative;
   border: 1px solid #4b286d;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   height: 2.5rem;
 }
 
@@ -1662,7 +1674,11 @@ exports[`Tags renders when using the children prop 1`] = `
   bottom: -2px;
   right: -2px;
   border: 1px solid #33204C;
-  border-radius: 22px;
+  border-radius: 1.375rem;
+}
+
+.c3::-moz-focus-inner {
+  border: 0;
 }
 
 .c3:focus {
@@ -1679,7 +1695,7 @@ exports[`Tags renders when using the children prop 1`] = `
   right: -11px;
   border: 3px solid #7557A0;
   margin: 5px;
-  border-radius: 25px;
+  border-radius: 1.5625rem;
 }
 
 .c3:active {