From 85c68ecc63d219b28f7c9221879a97c07636c3ac Mon Sep 17 00:00:00 2001
From: Anish K <65635876+AK1003018@users.noreply.github.com>
Date: Wed, 20 Nov 2024 05:26:26 +0530
Subject: [PATCH] Fix token sizes and icons alignment

Fixes #5203
---
 packages/react/src/Label/Label.tsx               |  2 +-
 packages/react/src/Token/Token.tsx               |  1 +
 .../src/Token/_RemoveTokenButton.module.css      | 16 ++++++++--------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index 095a70f06bc..787ddaad56b 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -24,7 +24,7 @@ export type LabelColorOptions =
   | 'done'
   | 'sponsors'
 
-type LabelSizeKeys = 'small' | 'large'
+type LabelSizeKeys = 'small' | 'medium' | 'large' | 'xlarge'
 
 export const variants: Record<LabelColorOptions, BetterSystemStyleObject> = {
   default: {
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index 71ef91143b1..62cae76937a 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -67,6 +67,7 @@ const Token = forwardRef((props, forwardedRef) => {
       color: props.isSelected ? 'fg.default' : 'fg.muted',
       maxWidth: '100%',
       paddingRight: !(hideRemoveButton || !onRemove) ? 0 : undefined,
+      height: `var(--control-size-${size})`,
       ...(isTokenInteractive(props)
         ? {
             '&:hover': {
diff --git a/packages/react/src/Token/_RemoveTokenButton.module.css b/packages/react/src/Token/_RemoveTokenButton.module.css
index e70a8867ec2..ec131971bba 100644
--- a/packages/react/src/Token/_RemoveTokenButton.module.css
+++ b/packages/react/src/Token/_RemoveTokenButton.module.css
@@ -17,24 +17,24 @@
 }
 
 .TokenButton[data-size='small'] {
-  width: var(--base-size-16);
-  height: var(--base-size-16);
+  width: var(--control-size-small);
+  height: var(--control-size-small);
 }
 
 .TokenButton[data-size='medium'] {
-  width: 20px;
-  height: 20px;
+  width: var(--control-size-medium);
+  height: var(--control-size-medium);
 }
 
 .TokenButton[data-size='large'] {
-  width: var(--base-size-24);
-  height: var(--base-size-24);
+  width: var(--control-size-large);
+  height: var(--control-size-large);
   margin-left: var(--base-size-8);
 }
 
 .TokenButton[data-size='xlarge'] {
-  width: var(--base-size-32);
-  height: var(--base-size-32);
+  width: var(--control-size-xlarge);
+  height: var(--control-size-xlarge);
   margin-left: var(--base-size-8);
 }