Skip to content

Commit e89a0ca

Browse files
wangdicoderwangdicoder
committed
chore: rebuild the docs app style
1 parent 8582902 commit e89a0ca

20 files changed

Lines changed: 1597 additions & 594 deletions

File tree

‎apps/docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="theme-color" content="#000000"/>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
1111
<title>Tiny UI | A Friendly UI Component Set for React</title>
1212
<meta name="keywords" content="tiny-design, tinyui, tiny, tiny-design.js, react.js, react, component, components, ui, framework, toolkit">
1313
<meta name="description" content="tiny-design, a friendly UI component set for React.js">

‎apps/docs/src/_variables.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
@forward "../../../packages/react/src/style/variables";
22

3-
$main-color: #6E41BF;
4-
$header-height: 60px;
5-
$font-family: 'Wix Madefor Text', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3+
$main-color: #0D9488;
4+
$header-height: 64px;
5+
$sidebar-width: 260px;
6+
$font-family: 'DM Sans', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7+
$font-display: 'Bricolage Grotesque', 'DM Sans', -apple-system, blinkmacsystemfont, sans-serif;
8+
9+
// Docs-specific accent colors (independent of component library theming)
10+
$docs-accent: #0D9488;
11+
$docs-accent-light: #14B8A6;
12+
$docs-accent-subtle: rgba(13, 148, 136, 0.08);
13+
$docs-surface-warm: #FDFCFA;
14+
$docs-surface-warm-alt: #F7F5F0;

‎apps/docs/src/components/demo-block/demo-block.scss‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,20 @@
2020
&__error {
2121
color: #e53e3e;
2222
font-size: 13px;
23-
padding: 12px;
23+
padding: 12px 16px;
2424
margin: 0;
2525
background-color: #fff5f5;
26-
border-radius: 4px;
27-
font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
26+
border-radius: 8px;
27+
font-family: 'SF Mono', Consolas, 'Droid Sans Mono', monospace;
2828
white-space: pre-wrap;
2929
word-break: break-word;
3030
}
3131

3232
&__editor-container {
3333
background-color: var(--ty-color-fill);
3434
border-top: solid 1px var(--ty-color-border-secondary);
35-
// Wrap editor text instead of forcing horizontal scrolling.
3635
overflow-x: hidden;
37-
font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
36+
font-family: 'SF Mono', 'Fira Code', Consolas, 'Droid Sans Mono', monospace;
3837
font-size: 13px;
3938
line-height: 1.6;
4039
tab-size: 2;
@@ -50,7 +49,6 @@
5049
pre {
5150
margin: 0;
5251
pointer-events: none;
53-
// Ensure long lines wrap in the highlighted background layer.
5452
white-space: pre-wrap;
5553
word-break: break-word;
5654
overflow-wrap: anywhere;
@@ -77,24 +75,21 @@
7775
font-size: inherit;
7876
line-height: inherit;
7977
tab-size: inherit;
80-
// Keep caret + selection aligned with the highlighted background layer.
8178
white-space: pre-wrap;
8279
word-break: break-word;
8380
overflow-wrap: anywhere;
8481
box-sizing: border-box;
8582

8683
&::selection {
87-
background: rgba(0, 0, 0, 0.15);
84+
background: rgba(0, 0, 0, 0.12);
8885
}
8986
}
9087

9188
&__actions {
92-
border-top: dashed 1px var(--ty-color-border-secondary);
89+
border-top: 1px solid var(--ty-color-border-secondary);
9390
height: 40px;
9491
box-sizing: border-box;
9592
background-color: var(--ty-color-bg-elevated);
96-
border-bottom-left-radius: 3px;
97-
border-bottom-right-radius: 3px;
9893
display: flex;
9994
align-items: center;
10095
justify-content: center;
@@ -113,9 +108,9 @@
113108
background: none;
114109
color: var(--ty-color-text-tertiary);
115110
cursor: pointer;
116-
border-radius: 4px;
111+
border-radius: 6px;
117112
font-size: 15px;
118-
transition: color 0.2s, background-color 0.2s;
113+
transition: color 0.15s, background-color 0.15s;
119114
padding: 0;
120115

121116
&:hover {
@@ -131,13 +126,14 @@
131126
cursor: pointer;
132127
font-size: 12px;
133128
padding: 4px 8px;
134-
border-radius: 4px;
135-
transition: color 0.2s, background-color 0.2s;
129+
border-radius: 6px;
130+
transition: color 0.15s, background-color 0.15s;
136131
user-select: none;
132+
font-weight: 500;
137133

138134
&:hover {
139135
color: var(--ty-color-primary);
140136
background-color: var(--ty-color-fill);
141137
}
142138
}
143-
}
139+
}

‎apps/docs/src/components/header/header.scss‎

Lines changed: 110 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@
77
left: 0;
88
z-index: 101;
99
height: $header-height;
10-
background: var(--ty-color-bg-elevated);
11-
border-bottom: 1px solid var(--ty-color-border-secondary);
10+
background: color-mix(in srgb, var(--ty-color-bg) 80%, transparent);
11+
backdrop-filter: blur(16px) saturate(1.8);
12+
-webkit-backdrop-filter: blur(16px) saturate(1.8);
1213
display: flex;
1314
align-items: center;
1415
justify-content: space-between;
15-
padding: 0 40px 0 30px;
16+
padding: 0 32px;
17+
transition: background 0.3s;
1618

1719
&__left {
1820
display: flex;
1921
align-items: center;
22+
min-width: 140px;
2023
}
2124

2225
&__menu-toggle {
@@ -28,6 +31,12 @@
2831
margin-right: 12px;
2932
color: var(--ty-color-text);
3033
line-height: 0;
34+
border-radius: 8px;
35+
transition: background 0.2s;
36+
37+
&:hover {
38+
background: var(--ty-color-fill);
39+
}
3140
}
3241

3342
&__link {
@@ -45,23 +54,21 @@
4554

4655
&__title {
4756
margin-left: 10px;
48-
font-weight: 600;
57+
font-family: $font-display;
58+
font-weight: 700;
4959
color: var(--ty-color-text);
50-
font-size: 22px;
60+
font-size: 20px;
61+
letter-spacing: -0.02em;
5162
}
5263

64+
// Centered pill-shaped navigation cluster
5365
&__nav {
66+
position: absolute;
67+
left: 50%;
68+
transform: translateX(-50%);
5469
display: flex;
55-
list-style: none;
5670
height: 100%;
5771
min-width: 0;
58-
overflow-x: auto;
59-
-webkit-overflow-scrolling: touch;
60-
scrollbar-width: none;
61-
62-
&::-webkit-scrollbar {
63-
display: none;
64-
}
6572
}
6673

6774
&__nav-list {
@@ -70,96 +77,120 @@
7077
padding: 0;
7178
display: flex;
7279
align-items: center;
80+
gap: 2px;
81+
background: var(--ty-color-fill);
82+
border-radius: 12px;
83+
padding: 4px 10px;
7384
white-space: nowrap;
7485
}
7586

7687
&__nav-item {
77-
margin-left: 20px;
78-
font-size: 16px;
7988
list-style: none;
8089
position: relative;
81-
cursor: pointer;
8290
display: flex;
8391
align-items: center;
8492

8593
a {
8694
color: var(--ty-color-text-secondary);
87-
line-height: $header-height;
95+
padding: 6px 16px;
96+
border-radius: 8px;
97+
font-size: 14px;
98+
font-weight: 500;
99+
transition: all 0.2s;
100+
line-height: 1.5;
101+
102+
&:hover {
103+
color: var(--ty-color-text);
104+
background: var(--ty-color-bg-elevated);
105+
}
88106

89107
&.active {
90-
color: var(--ty-color-primary);
91-
font-weight: 500;
108+
color: var(--ty-color-text);
109+
background: var(--ty-color-bg-elevated);
110+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
111+
font-weight: 600;
92112
}
93113
}
94114
}
95115

116+
// Right-aligned utility items
117+
&__utils {
118+
display: flex;
119+
align-items: center;
120+
gap: 8px;
121+
min-width: 140px;
122+
justify-content: flex-end;
123+
}
124+
96125
&__version {
97-
background: var(--ty-color-primary);
98-
font-size: 12px;
99-
color: #fff;
100-
border-radius: 46px;
101-
margin-left: 10px;
102-
padding: 4px 13px;
126+
font-size: 11px;
127+
font-weight: 600;
128+
color: $docs-accent;
129+
background: $docs-accent-subtle;
130+
border-radius: 6px;
131+
padding: 3px 10px;
132+
letter-spacing: 0.02em;
103133
}
104134

105135
&__search-trigger {
106136
display: inline-flex;
107137
align-items: center;
108138
gap: 6px;
109-
height: 28px;
110-
padding: 0 8px;
111-
border: 1px solid var(--ty-color-border);
112-
border-radius: 14px;
139+
height: 32px;
140+
padding: 0 12px;
141+
border: 1px solid var(--ty-color-border-secondary);
142+
border-radius: 8px;
113143
background: var(--ty-color-bg-elevated);
114144
color: var(--ty-color-text-tertiary);
115145
cursor: pointer;
116146
transition: all 0.2s;
117147
font-size: 12px;
118148

119149
&:hover {
120-
color: var(--ty-color-primary);
121-
border-color: var(--ty-color-primary);
150+
color: var(--ty-color-text);
151+
border-color: var(--ty-color-border);
152+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
122153
}
123154
}
124155

125156
&__locale-toggle {
126157
display: inline-flex;
127158
align-items: center;
128159
justify-content: center;
129-
height: 28px;
130-
padding: 0 8px;
131-
border: 1px solid var(--ty-color-border);
132-
border-radius: 14px;
160+
height: 32px;
161+
padding: 0 10px;
162+
border: 1px solid var(--ty-color-border-secondary);
163+
border-radius: 8px;
133164
background: var(--ty-color-bg-elevated);
134165
color: var(--ty-color-text-secondary);
135166
cursor: pointer;
136167
transition: all 0.2s;
137168
font-size: 12px;
138-
font-weight: 500;
169+
font-weight: 600;
139170

140171
&:hover {
141-
color: var(--ty-color-primary);
142-
border-color: var(--ty-color-primary);
172+
color: var(--ty-color-text);
173+
border-color: var(--ty-color-border);
143174
}
144175
}
145176

146177
&__theme-toggle {
147178
display: inline-flex;
148179
align-items: center;
149180
justify-content: center;
150-
width: 28px;
151-
height: 28px;
152-
border: 1px solid var(--ty-color-border);
153-
border-radius: 50%;
181+
width: 32px;
182+
height: 32px;
183+
border: 1px solid var(--ty-color-border-secondary);
184+
border-radius: 8px;
154185
background: var(--ty-color-bg-elevated);
155186
color: var(--ty-color-text-secondary);
156187
cursor: pointer;
157188
transition: all 0.2s;
158189
padding: 0;
159190

160191
&:hover {
161-
color: var(--ty-color-primary);
162-
border-color: var(--ty-color-primary);
192+
color: var(--ty-color-text);
193+
border-color: var(--ty-color-border);
163194
}
164195
}
165196

@@ -169,24 +200,51 @@
169200
&__menu-toggle {
170201
display: block;
171202
}
172-
}
173203

174-
@media (max-width: $size-xs) {
175-
&__nav-item {
176-
margin-left: 8px;
204+
&__nav {
205+
position: static;
206+
transform: none;
207+
overflow-x: auto;
208+
-webkit-overflow-scrolling: touch;
209+
scrollbar-width: none;
210+
211+
&::-webkit-scrollbar {
212+
display: none;
213+
}
214+
}
215+
216+
&__nav-list {
217+
padding: 3px;
218+
}
219+
220+
&__nav-item a {
221+
padding: 5px 12px;
177222
font-size: 13px;
178223
}
179224

225+
&__utils {
226+
min-width: auto;
227+
}
228+
}
229+
230+
@media (max-width: $size-sm) {
231+
&__nav {
232+
display: none;
233+
}
234+
180235
&__version,
181-
&__locale-toggle,
182-
&__theme-toggle,
183-
&__github-link,
184-
&__home-link {
236+
&__github-link {
185237
display: none;
186238
}
187239

188240
&__search-trigger .ty-keyboard {
189241
display: none;
190242
}
191243
}
244+
245+
@media (max-width: $size-xs) {
246+
&__locale-toggle {
247+
display: none;
248+
}
249+
}
192250
}

0 commit comments

Comments
 (0)