Skip to content

Commit 19e08b9

Browse files
wangdicoderwangdicoder
committed
chore: update docs
1 parent a2689b4 commit 19e08b9

13 files changed

Lines changed: 50 additions & 42 deletions

File tree

‎packages/react/src/flex/demo/Align.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function AlignDemo() {
1212
width: '100%',
1313
height: 120,
1414
borderRadius: 6,
15-
border: '1px solid #6e41bf',
15+
border: '1px solid var(--ty-color-primary)',
1616
};
1717

1818
return (
@@ -29,4 +29,4 @@ export default function AlignDemo() {
2929
</Flex>
3030
</Flex>
3131
);
32-
}
32+
}

‎packages/react/src/flex/demo/Basic.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,17 @@ export default function BasicDemo() {
1818
</Radio.Group>
1919
<Flex vertical={vertical}>
2020
{Array.from({ length: 4 }).map((_, i) => (
21-
<div key={i} style={{ ...baseStyle, backgroundColor: i % 2 ? '#6e41bf' : 'rgba(110, 65, 191, 0.75)' }} />
21+
<div
22+
key={i}
23+
style={{
24+
...baseStyle,
25+
backgroundColor: i % 2
26+
? 'var(--ty-color-primary)'
27+
: 'color-mix(in srgb, var(--ty-color-primary) 75%, transparent)',
28+
}}
29+
/>
2230
))}
2331
</Flex>
2432
</Flex>
2533
);
26-
}
34+
}

‎packages/react/src/grid/demo/Alignment.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ export default function AlignmentDemo() {
3434
};
3535

3636
const lighterBox = {
37-
backgroundColor: '#6E41BFD6',
37+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
3838
};
3939

4040
const darkerBox = {
41-
backgroundColor: '#6E41BFFA',
41+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
4242
};
4343

4444
return (
@@ -68,4 +68,4 @@ export default function AlignmentDemo() {
6868
</Row>
6969
</>
7070
);
71-
}
71+
}

‎packages/react/src/grid/demo/AlignmentGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function AlignmentGridDemo() {
1313
padding: 16,
1414
border: '1px dashed var(--ty-color-border)',
1515
borderRadius: 12,
16-
background: 'linear-gradient(180deg, rgba(110,65,191,0.06), rgba(110,65,191,0.01))',
16+
background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 6%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 45%, transparent))',
1717
}}
1818
>
1919
<Button btnType="primary">Primary</Button>

‎packages/react/src/grid/demo/Basic.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ export default function BasicDemo() {
1313
};
1414

1515
const lighterBox = {
16-
backgroundColor: '#6E41BFD6',
16+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
1717
};
1818

1919
const darkerBox = {
20-
backgroundColor: '#6E41BFFA',
20+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
2121
};
2222

2323
return (
@@ -42,4 +42,4 @@ export default function BasicDemo() {
4242
</Row>
4343
</>
4444
);
45-
}
45+
}

‎packages/react/src/grid/demo/DashboardShell.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const shellCardStyle: React.CSSProperties = {
1212
const metricStyle: React.CSSProperties = {
1313
...shellCardStyle,
1414
minHeight: 144,
15-
background: 'linear-gradient(180deg, rgba(110,65,191,0.1), rgba(110,65,191,0.02))',
15+
background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 10%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
1616
};
1717

1818
const sectionLabelStyle: React.CSSProperties = {
@@ -108,12 +108,12 @@ export default function DashboardShellDemo() {
108108
<Text type="secondary">Last 7 days</Text>
109109
</div>
110110
<Grid columns={6} gap={8} align="end" style={{ minHeight: 84 }}>
111-
<div style={{ height: 42, borderRadius: 8, background: 'rgba(110,65,191,0.18)' }} />
112-
<div style={{ height: 68, borderRadius: 8, background: 'rgba(110,65,191,0.24)' }} />
113-
<div style={{ height: 54, borderRadius: 8, background: 'rgba(110,65,191,0.2)' }} />
114-
<div style={{ height: 88, borderRadius: 8, background: 'rgba(110,65,191,0.28)' }} />
115-
<div style={{ height: 60, borderRadius: 8, background: 'rgba(110,65,191,0.22)' }} />
116-
<div style={{ height: 76, borderRadius: 8, background: 'rgba(110,65,191,0.26)' }} />
111+
<div style={{ height: 42, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 18%, transparent)' }} />
112+
<div style={{ height: 68, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 24%, transparent)' }} />
113+
<div style={{ height: 54, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 20%, transparent)' }} />
114+
<div style={{ height: 88, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 28%, transparent)' }} />
115+
<div style={{ height: 60, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 22%, transparent)' }} />
116+
<div style={{ height: 76, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 26%, transparent)' }} />
117117
</Grid>
118118
<Text type="secondary">Wide content region spanning two columns on desktop.</Text>
119119
</Card>

‎packages/react/src/grid/demo/ExplicitColumns.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const panelStyle: React.CSSProperties = {
77
display: 'flex',
88
flexDirection: 'column',
99
justifyContent: 'space-between',
10-
background: 'linear-gradient(180deg, rgba(110,65,191,0.12), rgba(110,65,191,0.02))',
10+
background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 12%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
1111
};
1212

1313
export default function ExplicitColumnsDemo() {

‎packages/react/src/grid/demo/Gutter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ export default function GutterDemo() {
99
};
1010

1111
const lighterBox = {
12-
backgroundColor: '#6E41BFD6',
12+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
1313
};
1414

1515
const darkerBox = {
16-
backgroundColor: '#6E41BFFA',
16+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
1717
};
1818

1919
const [gutter, setGutter] = React.useState(8);
@@ -46,4 +46,4 @@ export default function GutterDemo() {
4646
</Row>
4747
</>
4848
);
49-
}
49+
}

‎packages/react/src/grid/demo/Offset.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ export default function OffsetDemo() {
1313
};
1414

1515
const lighterBox = {
16-
backgroundColor: '#6E41BFD6',
16+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
1717
};
1818

1919
const darkerBox = {
20-
backgroundColor: '#6E41BFFA',
20+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
2121
};
2222

2323
return (
@@ -35,4 +35,4 @@ export default function OffsetDemo() {
3535
</Row>
3636
</>
3737
);
38-
}
38+
}

‎packages/react/src/grid/demo/Order.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ export default function OrderDemo() {
99
};
1010

1111
const lighterBox = {
12-
backgroundColor: '#6E41BFD6',
12+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
1313
};
1414

1515
const darkerBox = {
16-
backgroundColor: '#6E41BFFA',
16+
backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
1717
};
1818

1919
return (
@@ -26,4 +26,4 @@ export default function OrderDemo() {
2626
</Row>
2727
</>
2828
);
29-
}
29+
}

0 commit comments

Comments
 (0)