Fix token sizes and icons alignment

Fixes primer#5203
AK1003018 · Nov 19, 2024 · 85c68ec · 85c68ec
1 parent 1d4116d
commit 85c68ec
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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);
 }