Skip to content

feat: allow animated stroke and text background #771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hcopp wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: allow animated stroke and text background #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
19f6a61
feat: allow animated stroke and text background
hcopp Jun 24, 2026
9eef6e8
Update changelog
hcopp Jun 24, 2026
2b86dbc
Fix types
hcopp Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/common/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 9.5.0 ((6/24/2026, 01:54 PM PST))

This is an artificial version bump with no new change.

## 9.4.3 ((6/23/2026, 10:18 AM PST))

This is an artificial version bump with no new change.
Expand Down
2 changes: 1 addition & 1 deletion packages/common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-common",
"version": "9.4.3",
"version": "9.5.0",
"description": "Coinbase Design System - Common",
"repository": {
"type": "git",
Expand Down
4 changes: 4 additions & 0 deletions packages/mcp-server/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 9.5.0 ((6/24/2026, 01:54 PM PST))

This is an artificial version bump with no new change.

## 9.4.3 ((6/23/2026, 10:18 AM PST))

This is an artificial version bump with no new change.
Expand Down
2 changes: 1 addition & 1 deletion packages/mcp-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mcp-server",
"version": "9.4.3",
"version": "9.5.0",
"description": "Coinbase Design System - MCP Server",
"repository": {
"type": "git",
Expand Down
6 changes: 6 additions & 0 deletions packages/mobile/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 9.5.0 (6/24/2026 PST)

#### 🚀 Updates

- Feat: allow animated stroke and text background. [[#771](https://github.com/coinbase/cds/pull/771)]

## 9.4.3 (6/23/2026 PST)

#### 🐞 Fixes
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mobile",
"version": "9.4.3",
"version": "9.5.0",
"description": "Coinbase Design System - Mobile",
"repository": {
"type": "git",
Expand Down
4 changes: 2 additions & 2 deletions packages/mobile/src/visualizations/chart/Path.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export type PathBaseProps = {
* When provided, will render a fill with the given color.
* If not provided, will not render a fill.
*/
fill?: string;
fill?: AnimatedProp<string>;
/**
* Opacity for the path fill.
*/
Expand All @@ -52,7 +52,7 @@ export type PathBaseProps = {
* When provided, will render a fill with the given color.
* If not provided, will not render a fill.
*/
stroke?: string;
stroke?: AnimatedProp<string>;
/**
* Opacity for the path stroke.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/visualizations/chart/line/Line.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export type LineBaseProps = {
* The color of the line.
* @default color of the series or theme.color.fgPrimary
*/
stroke?: string;
stroke?: AnimatedProp<string>;
/**
* Opacity of the line
* @note when combined with gradient, both will be applied
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/visualizations/chart/line/ReferenceLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export type ReferenceLineBaseProps = {
* The color of the line.
* @default theme.color.bgLine
*/
stroke?: string;
stroke?: AnimatedProp<string>;
/**
* Opacity applied to both the line and label.
* @default 1
Expand Down
21 changes: 11 additions & 10 deletions packages/mobile/src/visualizations/chart/point/Point.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type ComponentType, memo, useEffect, useMemo } from 'react';
import { cancelAnimation, useDerivedValue, useSharedValue } from 'react-native-reanimated';
import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
import { Circle, type Color, Group, interpolateColors } from '@shopify/react-native-skia';
import { type AnimatedProp, Circle, Group, interpolateColors } from '@shopify/react-native-skia';

import { useTheme } from '../../../hooks/useTheme';
import { useCartesianChartContext } from '../ChartProvider';
Expand Down Expand Up @@ -30,7 +30,7 @@ export type PointBaseProps = {
* The fill color of the point.
* @default theme.color.fgPrimary
*/
fill?: string;
fill?: AnimatedProp<string>;
/**
* Optional Y-axis id to specify which axis to plot along.
* @default first y-axis defined in chart props.
Expand All @@ -56,7 +56,7 @@ export type PointBaseProps = {
* Color of the outer stroke around the point.
* @default theme.color.bg
*/
stroke?: string;
stroke?: AnimatedProp<string>;
/**
* Outer stroke width of the point.
* Set to 0 to remove the stroke.
Expand Down Expand Up @@ -111,7 +111,7 @@ export type PointLabelProps = {
/**
* Fill color for the point.
*/
fill: string;
fill: AnimatedProp<string>;
/**
* Position of the label relative to the point.
* @default 'center'
Expand Down Expand Up @@ -285,10 +285,11 @@ export const Point = memo<PointProps>(

// Interpolate between previous and current fill color
const animatedFillColor = useDerivedValue(() => {
if (!previousFill || previousFill === fill) {
return fill;
if (typeof fill !== 'string') return fill.value;
if (typeof previousFill === 'string' && previousFill && previousFill !== fill) {
return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
}
return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
return fill;

@hcopp hcopp Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All still works as expected here

Simulator.Screen.Recording.-.iPhone.17.-.2026-06-24.at.17.18.46.mov

}, [colorProgress, previousFill, fill]);

const isWithinDrawingArea = useMemo(() => {
Expand Down Expand Up @@ -327,14 +328,14 @@ export const Point = memo<PointProps>(
{strokeWidth > 0 && (
<Circle
c={{ x: pixelCoordinate.x, y: pixelCoordinate.y }}
color={stroke as Color}
color={stroke}
r={radius + strokeWidth / 2}
/>
)}
{/* Inner fill circle */}
<Circle
c={{ x: pixelCoordinate.x, y: pixelCoordinate.y }}
color={fill as Color}
color={fill}
r={radius - strokeWidth / 2}
/>
</Group>
Expand All @@ -359,7 +360,7 @@ export const Point = memo<PointProps>(
return (
<Group opacity={effectiveOpacity}>
{strokeWidth > 0 && (
<Circle c={animatedPoint} color={stroke as Color} r={radius + strokeWidth / 2} />
<Circle c={animatedPoint} color={stroke} r={radius + strokeWidth / 2} />
)}
<Circle c={animatedPoint} color={animatedFillColor} r={radius - strokeWidth / 2} />
{label && (
Expand Down
5 changes: 2 additions & 3 deletions packages/mobile/src/visualizations/chart/text/ChartText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { Rect } from '@coinbase/cds-common/types/Rect';
import {
type AnimatedProp,
type Color,
FontSlant,
FontWeight,
Group,
Expand Down Expand Up @@ -73,7 +72,7 @@ export type ChartTextBaseProps = {
* The background color of the text's background rectangle.
* @default theme.color.bgElevation1 if elevated, otherwise 'transparent'
*/
background?: string;
background?: AnimatedProp<string>;
/**
* Whether the text's background should have an elevated appearance with a shadow.
*/
Expand Down Expand Up @@ -487,7 +486,7 @@ export const ChartText = memo<ChartTextProps>(
<Group layer={<Paint opacity={groupOpacity} />}>
{background !== 'transparent' && (
<RoundedRect
color={background as Color}
color={background}
height={backgroundRectHeight}
r={borderRadius}
width={backgroundRectWidth}
Expand Down
4 changes: 4 additions & 0 deletions packages/web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.

<!-- template-start -->

## 9.5.0 ((6/24/2026, 01:54 PM PST))

This is an artificial version bump with no new change.

## 9.4.3 (6/23/2026 PST)

#### 🐞 Fixes
Expand Down
2 changes: 1 addition & 1 deletion packages/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-web",
"version": "9.4.3",
"version": "9.5.0",
"description": "Coinbase Design System - Web",
"repository": {
"type": "git",
Expand Down
Loading