Typography element inside Layout.Header|Layout.Sider with default less|css is unreadable.

[IzaacJ]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Import 'antd/dist/antd.css'
• Import Layout (Header, Sider, Content, Footer) and Typography (Title, Text)
• Add a Title or Text element to a Header or Sider

What is expected?

Readable text

What is actually happening?

Unreadable text

Environment	Info
antd	4.16.1
React	17.0.2
System	Ubuntu 20.04
Browser	Firefox 88.0.1

---

I'd suggest something like the example below for pretty much all components, with @text-color replaced with appropriate variables in special components (ie info|warning|error components). Any user-defined styles would still override them, but antd would still push a decent experience OOB.

color: if(boolean(luma($background) > 50%)  and boolean(luma(@text-color) < 25%), @text-color, contrast($background));

Note: Pretty new to less (and antd), which is why I'm not doing a pull request or anything. Might have missed something in the docs while trying to figure this out the past few days through simple css overrides and even by customizing the theme.