Skip to content

Commit f461eba

Browse files
wangdicoderwangdicoder
committed
docs(react): make split demos theme-aware
1 parent fc9daa8 commit f461eba

8 files changed

Lines changed: 89 additions & 30 deletions

File tree

‎packages/react/src/split/demo/Collapse.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@ export default function CollapseDemo() {
88
min="128px"
99
collapsible
1010
collapsedSize={72}
11-
style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
12-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
11+
style={{
12+
height: 220,
13+
border: '1px solid var(--ty-color-border-secondary)',
14+
background: 'var(--ty-color-fill)',
15+
}}>
16+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
1317
Collapsible sidebar
1418
</Split.Pane>
1519
<Split.Pane min="160px" style={{ padding: 16 }}>

‎packages/react/src/split/demo/CustomHandle.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ export default function CustomHandleDemo() {
3131
style={{
3232
width: orientation === 'horizontal' ? 2 : '100%',
3333
height: orientation === 'vertical' ? 2 : '100%',
34-
background: dragging ? '#94a3b8' : '#cbd5e1',
34+
background: dragging
35+
? 'color-mix(in srgb, var(--ty-color-primary) 52%, var(--ty-color-border))'
36+
: 'var(--ty-color-border)',
3537
}}
3638
/>
3739
</div>
@@ -42,9 +44,17 @@ export default function CustomHandleDemo() {
4244
minWidth: orientation === 'horizontal' ? 20 : 36,
4345
minHeight: orientation === 'vertical' ? 20 : 36,
4446
borderRadius: 999,
45-
background: collapsed ? '#e2e8f0' : '#ffffff',
46-
border: `1px solid ${dragging ? '#94a3b8' : '#cbd5e1'}`,
47-
boxShadow: dragging ? '0 0 0 4px rgba(148, 163, 184, 0.12)' : '0 1px 3px rgba(15, 23, 42, 0.12)',
47+
background: collapsed
48+
? 'var(--ty-color-fill-secondary)'
49+
: 'var(--ty-color-bg-container)',
50+
border: `1px solid ${
51+
dragging
52+
? 'color-mix(in srgb, var(--ty-color-primary) 48%, var(--ty-color-border))'
53+
: 'var(--ty-color-border-secondary)'
54+
}`,
55+
boxShadow: dragging
56+
? '0 0 0 4px color-mix(in srgb, var(--ty-color-primary) 14%, transparent)'
57+
: '0 1px 2px rgba(15, 23, 42, 0.12)',
4858
display: 'flex',
4959
flexDirection: orientation === 'horizontal' ? 'column' : 'row',
5060
alignItems: 'center',
@@ -59,15 +69,21 @@ export default function CustomHandleDemo() {
5969
width: 3,
6070
height: 3,
6171
borderRadius: '50%',
62-
background: collapsed ? '#64748b' : '#94a3b8',
72+
background: collapsed
73+
? 'var(--ty-color-text-tertiary)'
74+
: 'var(--ty-color-text-secondary)',
6375
}}
6476
/>
6577
))}
6678
</div>
6779
</div>
6880
)}
69-
style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
70-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
81+
style={{
82+
height: 220,
83+
border: '1px solid var(--ty-color-border-secondary)',
84+
background: 'var(--ty-color-fill)',
85+
}}>
86+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
7187
Navigation
7288
</Split.Pane>
7389
<Split.Pane min="160px" style={{ padding: 16 }}>

‎packages/react/src/split/demo/HitAreaSize.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function HitAreaSizeDemo() {
77

88
return (
99
<Flex vertical gap="md">
10-
<div style={{ fontSize: 12, color: '#6b7280' }}>Hit area: {hitAreaSize}px</div>
10+
<div style={{ fontSize: 12, color: 'var(--ty-color-text-secondary)' }}>Hit area: {hitAreaSize}px</div>
1111
<Slider
1212
min={16}
1313
max={96}
@@ -24,12 +24,16 @@ export default function HitAreaSizeDemo() {
2424
min="112px"
2525
separatorHitAreaSize={hitAreaSize}
2626
separatorStyle={{
27-
background: 'rgba(59, 130, 246, 0.24)',
28-
borderLeft: '2px solid rgba(59, 130, 246, 0.7)',
29-
borderRight: '2px solid rgba(59, 130, 246, 0.7)',
27+
background: 'color-mix(in srgb, var(--ty-color-info) 18%, transparent)',
28+
borderLeft: '2px solid color-mix(in srgb, var(--ty-color-info) 72%, transparent)',
29+
borderRight: '2px solid color-mix(in srgb, var(--ty-color-info) 72%, transparent)',
3030
}}
31-
style={{ height: 240, border: '1px solid #dcdee2', background: '#f8fafc' }}>
32-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
31+
style={{
32+
height: 240,
33+
border: '1px solid var(--ty-color-border-secondary)',
34+
background: 'var(--ty-color-fill)',
35+
}}>
36+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
3337
Navigation
3438
</Split.Pane>
3539
<Split.Pane min="160px" style={{ padding: 16, paddingLeft: 28 }}>

‎packages/react/src/split/demo/Horizontal.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@ import { Split } from '@tiny-design/react';
33

44
const paneStyle: React.CSSProperties = {
55
padding: 16,
6-
background: '#ffffff',
6+
background: 'var(--ty-color-bg-container)',
77
};
88

99
export default function HorizontalDemo() {
1010
return (
11-
<Split defaultSize="32%" min="120px" style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
11+
<Split
12+
defaultSize="32%"
13+
min="120px"
14+
style={{
15+
height: 220,
16+
border: '1px solid var(--ty-color-border-secondary)',
17+
background: 'var(--ty-color-fill)',
18+
}}>
1219
<Split.Pane style={paneStyle}>
1320
Navigation
1421
</Split.Pane>
15-
<Split.Pane min="160px" style={{ ...paneStyle, background: '#f8fafc' }}>
22+
<Split.Pane min="160px" style={{ ...paneStyle, background: 'var(--ty-color-fill)' }}>
1623
Workspace
1724
</Split.Pane>
1825
</Split>

‎packages/react/src/split/demo/Multiple.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@ export default function MultipleDemo() {
88
defaultSize="28%"
99
min="160px"
1010
max="420px"
11-
style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
11+
style={{
12+
height: 220,
13+
border: '1px solid var(--ty-color-border-secondary)',
14+
background: 'var(--ty-color-fill)',
15+
}}>
1216
<Split.Pane min="120px" style={{ padding: 16 }}>
1317
Canvas
1418
</Split.Pane>
15-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
19+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
1620
Secondary panel
1721
</Split.Pane>
1822
</Split>

‎packages/react/src/split/demo/Nest.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,27 @@ import { Split } from '@tiny-design/react';
33

44
export default function NestDemo() {
55
return (
6-
<Split defaultSize={220} min="120px" style={{ height: 320, border: '1px solid #dcdee2', background: '#f8fafc' }}>
7-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
6+
<Split
7+
defaultSize={220}
8+
min="120px"
9+
style={{
10+
height: 320,
11+
border: '1px solid var(--ty-color-border-secondary)',
12+
background: 'var(--ty-color-fill)',
13+
}}>
14+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
815
Sidebar
916
</Split.Pane>
1017
<Split.Pane min="180px">
1118
<Split orientation="vertical" defaultSize="38%" min="72px" style={{ height: '100%' }}>
12-
<Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
19+
<Split.Pane
20+
style={{
21+
padding: 16,
22+
background: 'color-mix(in srgb, var(--ty-color-warning) 10%, var(--ty-color-bg-container))',
23+
}}>
1324
Summary
1425
</Split.Pane>
15-
<Split.Pane min="96px" style={{ padding: 16, background: '#ffffff' }}>
26+
<Split.Pane min="96px" style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
1627
Detail
1728
</Split.Pane>
1829
</Split>

‎packages/react/src/split/demo/Step.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { Split } from '@tiny-design/react';
33

44
export default function StepDemo() {
55
return (
6-
<Split dragStep={24} keyboardStep={16} defaultSize={220} min="120px" style={{ height: 220, border: '1px solid #dcdee2' }}>
7-
<Split.Pane style={{ padding: 16, background: '#fff' }}>
6+
<Split
7+
dragStep={24}
8+
keyboardStep={16}
9+
defaultSize={220}
10+
min="120px"
11+
style={{ height: 220, border: '1px solid var(--ty-color-border-secondary)' }}>
12+
<Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
813
Step-based pane
914
</Split.Pane>
10-
<Split.Pane min="160px" style={{ padding: 16, background: '#f8fafc' }}>
15+
<Split.Pane min="160px" style={{ padding: 16, background: 'var(--ty-color-fill)' }}>
1116
Content
1217
</Split.Pane>
1318
</Split>

‎packages/react/src/split/demo/Vertical.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ import { Split } from '@tiny-design/react';
33

44
export default function VerticalDemo() {
55
return (
6-
<Split orientation="vertical" defaultSize="42%" min="64px" style={{ height: 220, border: '1px solid #dcdee2' }}>
7-
<Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
6+
<Split
7+
orientation="vertical"
8+
defaultSize="42%"
9+
min="64px"
10+
style={{ height: 220, border: '1px solid var(--ty-color-border-secondary)' }}>
11+
<Split.Pane
12+
style={{
13+
padding: 16,
14+
background: 'color-mix(in srgb, var(--ty-color-warning) 10%, var(--ty-color-bg-container))',
15+
}}>
816
Preview
917
</Split.Pane>
10-
<Split.Pane min="72px" style={{ padding: 16, background: '#fff' }}>
18+
<Split.Pane min="72px" style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
1119
Inspector
1220
</Split.Pane>
1321
</Split>

0 commit comments

Comments
 (0)