Token: Fix sizing, padding, and selected state styling

.changeset/cuddly-worms-knock.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes multiple styling issues in the Token component.

packages/react/src/Token/Token.module.css

@@ -14,6 +14,8 @@
 
 .Token:where([data-is-selected='true']) {
   color: var(--fgColor-default);
+  border-style: solid;
+  border-color: var(--borderColor-emphasis);
 }
 
 .Token[data-is-remove-btn='true'] {

packages/react/src/Token/Token.tsx

@@ -16,6 +16,7 @@ import {clsx} from 'clsx'
 export interface TokenProps extends TokenBaseProps {
   /**
    * A component that renders before the token text
+   * disabled when size is 'small'
    */
   leadingVisual?: React.ElementType
 }
@@ -71,7 +72,7 @@ const Token = forwardRef((props, forwardedRef) => {
       ref={forwardedRef}
       style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}}
     >
-      {LeadingVisual ? (
+      {LeadingVisual && size !== 'small' ? (
         <LeadingVisualContainer size={size}>
           <LeadingVisual />
         </LeadingVisualContainer>

packages/react/src/Token/TokenBase.module.css

@@ -30,8 +30,8 @@
 .TokenBase:where([data-size='medium']) {
   width: auto;
   height: var(--base-size-20);
-  padding-right: var(--base-size-8);
-  padding-left: var(--base-size-8);
+  padding-right: var(--base-size-4);
+  padding-left: var(--base-size-4);
   font-size: var(--text-body-size-small);
 }
 
@@ -40,15 +40,15 @@
   height: var(--base-size-24);
   padding-right: var(--base-size-8);
   padding-left: var(--base-size-8);
-  font-size: var(--text-body-size-small);
+  font-size: var(--text-body-size-medium);
 }
 
 .TokenBase[data-size='xlarge'] {
   width: auto;
   height: var(--base-size-32);
   padding-top: 0;
-  padding-right: var(--base-size-16);
+  padding-right: var(--base-size-12);
   padding-bottom: 0;
-  padding-left: var(--base-size-16);
+  padding-left: var(--base-size-12);
   font-size: var(--text-body-size-medium);
 }

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -36,7 +36,7 @@ const RemoveTokenButton = ({
           transform: `translate(${borderOffset}px, -${borderOffset}px)`,
         }}
       >
-        <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
+        <XIcon size={size === 'small' || size === 'medium' ? 12 : 16} />
       </span>
     )
   }
@@ -55,7 +55,7 @@ const RemoveTokenButton = ({
       ref={rest.ref as React.Ref<HTMLButtonElement>}
       type="button"
     >
-      <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
+      <XIcon size={size === 'small' || size === 'medium' ? 12 : 16} />
     </button>
   )
 }