Update Token close button sizing

.changeset/fresh-turtles-carry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+update token close button sizing

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

@@ -7,6 +7,8 @@
   white-space: nowrap;
   border-radius: var(--borderRadius-full);
   align-items: center;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
 }
 
 .TokenBase:where([data-cursor-is-interactive='true']) {
@@ -19,42 +21,34 @@
 
 .TokenBase:where([data-size='small']) {
   width: auto;
-  height: 16px;
+  height: var(--base-size-16);
   padding-right: var(--base-size-4);
   padding-left: var(--base-size-4);
   font-size: var(--text-body-size-small);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 16px;
 }
 
 .TokenBase:where([data-size='medium']) {
   width: auto;
-  height: 20px;
+  height: var(--base-size-20);
   padding-right: var(--base-size-8);
   padding-left: var(--base-size-8);
   font-size: var(--text-body-size-small);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 20px;
 }
 
 .TokenBase[data-size='large'] {
   width: auto;
-  height: 24px;
+  height: var(--base-size-24);
   padding-right: var(--base-size-8);
   padding-left: var(--base-size-8);
   font-size: var(--text-body-size-small);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 24px;
 }
 
 .TokenBase[data-size='xlarge'] {
   width: auto;
-  height: 32px;
+  height: var(--base-size-32);
   padding-top: 0;
   padding-right: var(--base-size-16);
   padding-bottom: 0;
   padding-left: var(--base-size-16);
   font-size: var(--text-body-size-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 32px;
 }

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

@@ -22,8 +22,8 @@
 }
 
 .TokenButton[data-size='medium'] {
-  width: 20px;
-  height: 20px;
+  width: var(--base-size-20);
+  height: var(--base-size-20);
 }
 
 .TokenButton[data-size='large'] {
@@ -40,11 +40,9 @@
 
 .TokenButton:hover,
 .TokenButton:focus {
-  /* TODO: choose a better functional color variable for this */
-  background-color: var(--bgColor-neutral-muted);
+  background-color: var(--control-transparent-bgColor-hover);
 }
 
 .TokenButton:active {
-  /* TODO: choose a better functional color variable for this */
-  background-color: var(--bgColor-neutral-muted);
+  background-color: var(--control-transparent-bgColor-active);
 }

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -2,7 +2,7 @@ import type React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {clsx} from 'clsx'
 import type {TokenSizeKeys} from './TokenBase'
-import {tokenSizes, defaultTokenSize} from './TokenBase'
+import {defaultTokenSize} from './TokenBase'
 
 import classes from './_RemoveTokenButton.module.css'
 
@@ -12,8 +12,6 @@ interface TokenButtonProps {
   isParentInteractive?: boolean
 }
 
-const getTokenButtonIconSize = (size?: TokenSizeKeys) => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75
-
 type RemoveTokenButtonProps = TokenButtonProps & Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement>, 'size'>
 
 const RemoveTokenButton = ({
@@ -39,7 +37,7 @@ const RemoveTokenButton = ({
           transform: `translate(${borderOffset}px, -${borderOffset}px)`,
         }}
       >
-        <XIcon size={getTokenButtonIconSize(size)} />
+        <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
       </span>
     )
   }
@@ -56,7 +54,7 @@ const RemoveTokenButton = ({
       ref={rest.ref as React.Ref<HTMLButtonElement>}
       type="button"
     >
-      <XIcon size={getTokenButtonIconSize(size)} />
+      <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
     </button>
   )
 }