Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The color of <a>/Typography.Link elements don't respect colorPrimary design token

See original GitHub issue

Reproduction link

Steps to reproduce

Wrap an <a> or <Typography.Link> element with ConfigProvider and specify a different colorPrimary design token.

What is expected?

The color of the a element is the new colorPrimary, just like other elements like Button.

What is actually happening?

The color of the a element is still #1677ff, the new default color of antd v5.

Environment	Info
antd	5.0.0
React	18.2.0
System	Arch Linux
Browser	Edge/Chrome/Firefox

Issue Analytics

State:
Created 10 months ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

ddadaalcommented, Nov 19, 2022

If it is not possible to make <a> respect design tokens, it is better to remove <a>'s global styles completely to avoid confusion.

1reaction

Dunqingcommented, Nov 19, 2022

Look like Typography.Link use colorInfo token

Top Results From Across the Web

Design Tokens beyond colors, typography, and spacing.

In my experience, design tokens' great potential and power are fully expressed when two other things form part of the equation, when they...

Design tokens - Adobe Spectrum

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc.

Creating & Crafting a Design Token System - Satellytes

Coincidentally, blue is also a good color to highlighting links and buttons, so we create a component token for it to be used...

Supercharge your Design System with Design Tokens

Design Token is a concept created by Salesforce, and the name was coined first by a product designer, Jina Anne. According to the...

Customizing - Shoelace's components

Shoelace makes use of several design tokens to provide a consistent ... Changes the primary theme color to purple using primitives */ --sl-color-primary-50: ......