studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) make docs theme compatible

Browse Source 
Some docs were using design tokens and classes that were not theme
compliant, rendering ugly colors when switching to dark, it needed to
be aligned. Also update some code example to match the new format.
This commit is contained in:
Nathan Vasse
2023-09-26 11:42:15 +02:00
committed by NathanVss
parent b0d68becfe
commit 422834e6d2
4 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react/src/docs/spacings.mdx
View File

@@ -11,10 +11,10 @@ Here are the existing spacings:
<Canvas sourceState="none">
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{Object.keys(tokens.theme.spacings).map(key => (
{Object.keys(tokens.themes.default.theme.spacings).map(key => (
<div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
<div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.theme.spacings[key]}</div>
<div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.themes.default.theme.spacings[key]}</div>
<div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
</div>
))}
@@ -51,8 +51,8 @@ You can use the following classes to add paddings to your elements:
## Example
<Canvas sourceState="shown">
<div className="bg-danger-100">
<div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
<div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
<div className="clr-greyscale-800 bg-danger-100">
<div className="clr-greyscale-800 bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
<div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
</div>
</Canvas>