@coinbase/cds-mobile 8.66.2 → 8.68.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.68.0 (5/1/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update bgWarning to orange60. [[#659](https://github.com/coinbase/cds/pull/659)]
+
+## 8.67.0 (5/1/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: Add legalText prop to PageFooter component. [[#661](https://github.com/coinbase/cds/pull/661)]
+
 ## 8.66.2 ((4/28/2026, 01:06 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/page/PageFooter.d.ts

@@ -12,6 +12,10 @@ export type PageFooterBaseProps = SharedProps &
      * Set the background color of the box.
      */
     background?: ThemeVars.Color;
+    /**
+     * Optional legal text rendered below the action in a pre-styled caption. Centered on mobile.
+     */
+    legalText?: string;
   };
 export type PageFooterProps = PageFooterBaseProps & BoxProps;
 export declare const PageFooter: React.MemoExoticComponent<
@@ -25,6 +29,10 @@ export declare const PageFooter: React.MemoExoticComponent<
          * Set the background color of the box.
          */
         background?: ThemeVars.Color;
+        /**
+         * Optional legal text rendered below the action in a pre-styled caption. Centered on mobile.
+         */
+        legalText?: string;
       } & import('../styles/styleProps').StyleProps & {
         children?: React.ReactNode;
         style?: import('react-native').Animated.WithAnimatedValue<

package/dts/page/PageFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/page/PageFooter.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;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;+HAC2H;IAC3H,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,QAAQ,CAAC;AAE7D,eAAO,MAAM,UAAU;IAXnB;+HAC2H;YACnH,KAAK,CAAC,SAAS;IACvB;;OAEG;iBACU,SAAS,CAAC,KAAK;;;;;;;;;;;;;;;;;iFAuB/B,CAAC"}
+{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/page/PageFooter.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;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;+HAC2H;IAC3H,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,QAAQ,CAAC;AAE7D,eAAO,MAAM,UAAU;IAfnB;+HAC2H;YACnH,KAAK,CAAC,SAAS;IACvB;;OAEG;iBACU,SAAS,CAAC,KAAK;IAC5B;;OAEG;gBACS,MAAM;;;;;;;;;;;;;;;;;iFAgCrB,CAAC"}

package/dts/themes/coinbaseDenseTheme.d.ts

@@ -430,7 +430,7 @@ export declare const coinbaseDenseTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -475,7 +475,7 @@ export declare const coinbaseDenseTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/dts/themes/coinbaseTheme.d.ts

@@ -312,7 +312,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/dts/themes/defaultTheme.d.ts

@@ -312,7 +312,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/dts/utils/testHelpers.d.ts

@@ -333,7 +333,7 @@ export declare const theme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -378,7 +378,7 @@ export declare const theme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/esm/page/PageFooter.js

@@ -1,25 +1,36 @@
-const _excluded = ["action"];
+const _excluded = ["action", "legalText"];
 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 { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
-      action
+      action,
+      legalText
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: ref,
     accessibilityRole: "toolbar",
     alignItems: "center",
-    height: pageFooterHeight,
+    height: legalText ? undefined : pageFooterHeight,
     paddingX: 3,
     paddingY: 1.5
   }, props, {
-    children: action
+    children: legalText ? /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "center",
+      gap: 2,
+      children: [action, /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        children: legalText
+      })]
+    }) : action
   }));
 }));

package/esm/page/__figma__/PageFooter.figma.js

@@ -1,18 +1,61 @@
 import React from 'react';
 import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons/Button';
+import { ButtonGroup } from '../../buttons/ButtonGroup';
 import { PageFooter } from '../PageFooter';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(PageFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266', {
-  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'"],
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const url = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266';
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'", "import { Button } from '@coinbase/cds-mobile/buttons/Button'"],
+  variant: {
+    '# of actions': '1'
+  },
   props: {
-    action: figma.children('ButtonGroup')
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
   },
   example: _ref => {
     let {
-      action
+      legalText
     } = _ref;
     return /*#__PURE__*/_jsx(PageFooter, {
-      action: action
+      action: /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
+        children: "Next"
+      }),
+      legalText: legalText
+    });
+  }
+});
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'", "import { Button } from '@coinbase/cds-mobile/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-mobile/buttons/ButtonGroup'"],
+  variant: {
+    '# of actions': '2'
+  },
+  props: {
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let {
+      legalText
+    } = _ref2;
+    return /*#__PURE__*/_jsx(PageFooter, {
+      action: /*#__PURE__*/_jsxs(ButtonGroup, {
+        block: true,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Back"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Next"
+        })]
+      }),
+      legalText: legalText
     });
   }
 });

package/esm/themes/coinbaseTheme.js

@@ -316,7 +316,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(" + lightSpectrum.red0 + ")",
     bgPositive: "rgb(" + lightSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + lightSpectrum.green0 + ")",
-    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(" + darkSpectrum.red0 + ")",
     bgPositive: "rgb(" + darkSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + darkSpectrum.green0 + ")",
-    bgWarning: "rgb(" + darkSpectrum.yellow50 + ")",
+    bgWarning: "rgb(" + darkSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line

package/esm/themes/defaultTheme.js

@@ -316,7 +316,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(" + lightSpectrum.red0 + ")",
     bgPositive: "rgb(" + lightSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + lightSpectrum.green0 + ")",
-    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(" + darkSpectrum.red0 + ")",
     bgPositive: "rgb(" + darkSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + darkSpectrum.green0 + ")",
-    bgWarning: "rgb(" + darkSpectrum.yellow50 + ")",
+    bgWarning: "rgb(" + darkSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.66.2",
+  "version": "8.68.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.66.2",
+    "@coinbase/cds-common": "^8.68.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",