@coinbase/cds-mobile 8.24.0 → 8.25.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.25.0 (12/1/2025 PST)
+
+#### 🚀 Updates
+
+- Add emphasis prop to Tag. [[#197](https://github.com/coinbase/cds/pull/197)]
+
 ## 8.24.0 (12/1/2025 PST)
 
 #### 🚀 Updates

package/dts/tag/Tag.d.ts

@@ -5,6 +5,7 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
   TagColorScheme,
+  TagEmphasis,
   TagIntent,
 } from '@coinbase/cds-common/types';
 import { type BoxProps } from '../layout';
@@ -17,6 +18,11 @@ export type TagBaseProps = SharedProps &
      * @default informational
      */
     intent?: TagIntent;
+    /**
+     * Specify the emphasis of the Tag.
+     * @default 'low' when informational intent, 'high' when promotional intent
+     */
+    emphasis?: TagEmphasis;
     /**
      * Specify the colorScheme of the Tag
      * @default blue
@@ -42,6 +48,11 @@ export declare const Tag: React.MemoExoticComponent<
          * @default informational
          */
         intent?: TagIntent;
+        /**
+         * Specify the emphasis of the Tag.
+         * @default 'low' when informational intent, 'high' when promotional intent
+         */
+        emphasis?: TagEmphasis;
         /**
          * Specify the colorScheme of the Tag
          * @default blue

package/dts/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GAAG;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IAvBZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;kGAoDlC,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GAAG;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IA5BZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;eACQ,WAAW;IACtB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;kGAqDlC,CAAC"}

package/esm/tag/Tag.js

@@ -1,8 +1,8 @@
-const _excluded = ["children", "intent", "colorScheme", "background", "color", "alignItems", "justifyContent", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "alignItems", "justifyContent", "testID"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo } from 'react';
-import { tagBorderRadiusMap, tagColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
+import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 import { Text } from '../typography/Text';
@@ -11,6 +11,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
   let {
       children,
       intent = 'informational',
+      emphasis = intent === 'informational' ? 'low' : 'high',
       colorScheme = 'blue',
       background: customBackground,
       color: customColor,
@@ -23,7 +24,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
   const {
     background,
     foreground
-  } = tagColorMap[intent][colorScheme];
+  } = tagEmphasisColorMap[emphasis][colorScheme];
   const backgroundColor = "rgb(" + theme.spectrum[customBackground != null ? customBackground : background] + ")";
   const color = "rgb(" + theme.spectrum[customColor != null ? customColor : foreground] + ")";
   return /*#__PURE__*/_jsx(Box, _extends({

package/esm/tag/__figma__/Tag.figma.js

@@ -12,6 +12,10 @@ figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-
     intent: 'informational'
   },
   props: {
+    emphasis: figma.enum('emphasis', {
+      high: 'high',
+      low: 'low'
+    }),
     colorScheme: figma.enum('colorScheme', {
       green: 'green',
       purple: 'purple',
@@ -47,6 +51,10 @@ figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-
     intent: 'promotional'
   },
   props: {
+    emphasis: figma.enum('emphasis', {
+      high: 'high',
+      low: 'low'
+    }),
     colorScheme: figma.enum('colorScheme', {
       green: 'green',
       purple: 'purple',

package/esm/tag/__stories__/Tag.stories.js

@@ -6,6 +6,7 @@ import { Tag } from '../Tag';
 import { jsx as _jsx } from "react/jsx-runtime";
 const tagProps = {
   intent: ['informational', 'promotional'],
+  emphasis: ['high', 'low'],
   colorScheme: ['green', 'purple', 'blue', 'yellow', 'red', 'gray']
 };
 const tagMap = tagProps.intent.map(intent => {
@@ -20,7 +21,25 @@ const tagStories = {
     children: 'Default tag',
     colorScheme: 'blue'
   }],
-  all: tagMap,
+  all: [...tagProps.colorScheme.map(scheme => ({
+    intent: 'informational',
+    emphasis: 'high',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (High Informational)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'promotional',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (High)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'informational',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (Low)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'promotional',
+    emphasis: 'low',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (Low Promotional)"
+  }))],
   wildcard: [{
     children: 'Atlanta',
     background: 'blue100',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.24.0",
+  "version": "8.25.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.24.0",
+    "@coinbase/cds-common": "^8.25.0",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",