feat: support tag theme customization (#671)

hcopp · web-flow · commit f1d6bbb9cb36 · 2026-05-12T16:31:36.000-04:00
* feat: support key Tag props in component configs

* Bump version

* Rename vars
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.72.0 ((5/12/2026, 02:00 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.71.0 ((5/12/2026, 11:37 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.71.0",
+  "version": "8.72.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.72.0 ((5/12/2026, 02:00 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.71.0 ((5/12/2026, 11:37 AM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.71.0",
+  "version": "8.72.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.72.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support key Tag props in component configs. [[#671](https://github.com/coinbase/cds/pull/671)]
+
 ## 8.71.0 (5/12/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.71.0",
+  "version": "8.72.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customComponentConfig.tsx b/packages/mobile/src/system/__stories__/componentConfigStickerSheet/customComponentConfig.tsx
@@ -137,4 +137,11 @@ export const customComponentConfig: ComponentConfig = {
     color: 'fgMuted',
     activeBackground: 'fg',
   },
+
+  Tag: {
+    paddingY: 0.5,
+    paddingX: 1,
+    font: 'caption',
+    emphasis: 'low',
+  },
 };
diff --git a/packages/mobile/src/tag/Tag.tsx b/packages/mobile/src/tag/Tag.tsx
@@ -19,11 +19,12 @@ import type {
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box, type BoxProps } from '../layout';
+import { Box, type BoxBaseProps, type BoxProps } from '../layout/Box';
 import { Text } from '../typography/Text';
 
 export type TagBaseProps = SharedProps &
-  SharedAccessibilityProps & {
+  SharedAccessibilityProps &
+  Omit<BoxBaseProps, 'children' | 'color' | 'background'> & {
     /** Children to render within the Tag. */
     children: React.ReactNode;
     /**
@@ -84,7 +85,13 @@ export const Tag = memo(
       flexDirection = 'row',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = 'cds-tag',
       ...props
     } = mergedProps;
@@ -103,7 +110,7 @@ export const Tag = memo(
         flexDirection={flexDirection}
         gap={gap}
         justifyContent={justifyContent}
-        paddingX={tagHorizontalSpacing[intent]}
+        paddingX={paddingX ?? tagHorizontalSpacing[intent]}
         paddingY={paddingY}
         testID={testID}
         {...props}
@@ -116,7 +123,11 @@ export const Tag = memo(
 
         <Text
           dangerouslySetColor={color}
-          font={tagFontMap[intent]}
+          font={font ?? tagFontMap[intent]}
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+          lineHeight={lineHeight}
           numberOfLines={1}
           testID={`${testID}--text`}
         >
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.72.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support key Tag props in component configs. [[#671](https://github.com/coinbase/cds/pull/671)]
+
 ## 8.71.0 (5/12/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.71.0",
+  "version": "8.72.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
diff --git a/packages/web/src/__stories__/componentConfigStickerSheet/customComponentConfig.tsx b/packages/web/src/__stories__/componentConfigStickerSheet/customComponentConfig.tsx
@@ -128,6 +128,7 @@ export const customComponentConfig: ComponentConfig = {
     labelColor: 'fgMuted',
     labelFont: props.compact ? (props.align === 'end' ? 'label1' : 'label2') : 'body',
   }),
+
   ListCell: (props) => {
     const spacingVariant = props.spacingVariant ?? (props.compact ? 'compact' : 'normal');
     return {
@@ -140,4 +141,11 @@ export const customComponentConfig: ComponentConfig = {
     color: 'fgMuted',
     activeBackground: 'fg',
   },
+
+  Tag: {
+    paddingY: 0.5,
+    paddingX: 1,
+    font: 'caption',
+    emphasis: 'low',
+  },
 };
diff --git a/packages/web/src/tag/Tag.tsx b/packages/web/src/tag/Tag.tsx
@@ -19,7 +19,7 @@ import { css } from '@linaria/core';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box, type BoxDefaultElement, type BoxProps } from '../layout/Box';
+import { Box, type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
 import { Text } from '../typography/Text';
 
 const nodeCss = css`
@@ -30,7 +30,8 @@ const nodeCss = css`
 export const tagStaticClassName = 'cds-tag';
 
 export type TagBaseProps = SharedProps &
-  SharedAccessibilityProps & {
+  SharedAccessibilityProps &
+  Omit<BoxBaseProps, 'children' | 'color' | 'background'> & {
     /** Children to render within the Tag. */
     children: React.ReactNode;
     /**
@@ -91,7 +92,13 @@ export const Tag = memo(
       alignItems = 'center',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = tagStaticClassName,
       ...props
     } = mergedProps;
@@ -116,7 +123,7 @@ export const Tag = memo(
         display={display}
         gap={gap}
         justifyContent={justifyContent}
-        paddingX={tagHorizontalSpacing[intent]}
+        paddingX={paddingX ?? tagHorizontalSpacing[intent]}
         paddingY={paddingY}
         style={boxStyles}
         testID={testID}
@@ -133,7 +140,11 @@ export const Tag = memo(
         <Text
           color="currentColor"
           display="inline"
-          font={tagFontMap[intent]}
+          font={font ?? tagFontMap[intent]}
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+          lineHeight={lineHeight}
           overflow="truncate"
           testID={`${testID}--text`}
         >

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-common",`
`3`		`- "version": "8.71.0",`
	`3`	`+ "version": "8.72.0",`
`4`	`4`	`"description": "Coinbase Design System - Common",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mcp-server",`
`3`		`- "version": "8.71.0",`
	`3`	`+ "version": "8.72.0",`
`4`	`4`	`"description": "Coinbase Design System - MCP Server",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mobile",`
`3`		`- "version": "8.71.0",`
	`3`	`+ "version": "8.72.0",`
`4`	`4`	`"description": "Coinbase Design System - Mobile",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-web",`
`3`		`- "version": "8.71.0",`
	`3`	`+ "version": "8.72.0",`
`4`	`4`	`"description": "Coinbase Design System - Web",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`