Skip to content

Commit 2bd02dd

Browse files
wangdicoderwangdicoder
committed
fix: component styles
1 parent e7b998c commit 2bd02dd

38 files changed

Lines changed: 910 additions & 269 deletions

‎apps/docs/public/llms.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Components that accept sizes use: `'sm' | 'md' | 'lg'`
6262
- **Button** — Trigger operations. Props: `btnType` (`'default'|'primary'|'outline'|'ghost'|'link'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
6363
- **Image** — Display images with preview support.
6464
- **Link** — Styled anchor element.
65-
- **Typography** — Headings, body text, lists. Subcomponents: `Typography.Title`, `Typography.Text`, `Typography.Paragraph`.
65+
- **Typography** — Headings, body text, lists. Prefer `Heading`, `Text`, `Paragraph`; compatibility entrypoints: `Typography.Heading`, `Typography.Text`, `Typography.Paragraph`.
6666

6767
### Layout
6868
- **AspectRatio** — Maintain width-to-height proportional relationship.

‎apps/docs/src/containers/home/theme-showcase.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useMemo, useState } from 'react';
22
import { useNavigate } from 'react-router-dom';
3-
import { Typography, Button, Marquee } from '@tiny-design/react';
3+
import { Button, Heading, Marquee, Paragraph } from '@tiny-design/react';
44
import {
55
buildThemeDocumentFromDraft,
66
getPresetDraft,
@@ -76,12 +76,12 @@ export const ThemeShowcase = (): React.ReactElement => {
7676

7777
return (
7878
<div className="home__section home__theme-showcase">
79-
<Typography.Heading level={1} className="home__feature-title">
79+
<Heading level={1} className="home__feature-title">
8080
{s.home.themeShowcase}
81-
</Typography.Heading>
82-
<Typography.Paragraph className="home__theme-showcase-desc">
81+
</Heading>
82+
<Paragraph className="home__theme-showcase-desc">
8383
{s.home.themeShowcaseDesc}
84-
</Typography.Paragraph>
84+
</Paragraph>
8585

8686
<div className="home__marquee-container">
8787
<Marquee duration={50} pauseOnHover>

‎apps/docs/src/containers/theme-studio/index.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import {
44
Button,
55
ConfigProvider,
66
Modal,
7+
Paragraph,
78
Segmented,
89
Select,
10+
Text,
911
Textarea,
10-
Typography,
1112
useTheme,
1213
} from '@tiny-design/react';
1314
import {
@@ -137,7 +138,7 @@ const ThemeStudioPage = (): React.ReactElement => {
137138
>
138139
<div className="theme-studio__topbar">
139140
<div className="theme-studio__topbar-copy">
140-
<Typography.Text className="theme-studio__eyebrow">Theme Editor</Typography.Text>
141+
<Text className="theme-studio__eyebrow">Theme Editor</Text>
141142
<div className="theme-studio__topbar-meta">
142143
<span>{activePreset.name}</span>
143144
<span>{THEME_EDITOR_PRESETS.length} presets</span>
@@ -213,18 +214,18 @@ const ThemeStudioPage = (): React.ReactElement => {
213214
}}
214215
>
215216
<div className="theme-studio__modal-copy">
216-
<Typography.Paragraph>
217+
<Paragraph>
217218
Paste a Tiny theme document JSON export to replace the current global theme.
218-
</Typography.Paragraph>
219-
<Typography.Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Typography.Text>
219+
</Paragraph>
220+
<Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Text>
220221
</div>
221222
<Textarea
222223
rows={16}
223224
className="theme-studio__import-textarea"
224225
value={importText}
225226
onChange={(next) => setImportText(next)}
226227
/>
227-
{importError ? <Typography.Paragraph className="theme-studio__error">{importError}</Typography.Paragraph> : null}
228+
{importError ? <Paragraph className="theme-studio__error">{importError}</Paragraph> : null}
228229
</Modal>
229230

230231
<Modal
@@ -245,8 +246,8 @@ const ThemeStudioPage = (): React.ReactElement => {
245246
>
246247
<div className="theme-studio__code-head">
247248
<div>
248-
<Typography.Text strong>Output</Typography.Text>
249-
<Typography.Text type="secondary">{activePreset.name} · {status}</Typography.Text>
249+
<Text strong>Output</Text>
250+
<Text type="secondary">{activePreset.name} · {status}</Text>
250251
</div>
251252
<Segmented
252253
options={CODE_VIEW_OPTIONS}

‎apps/docs/src/containers/theme-studio/preview-components.tsx‎

Lines changed: 64 additions & 79 deletions
Large diffs are not rendered by default.

‎apps/docs/src/containers/theme-studio/sidebar-content.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Collapse, Select, Typography } from '@tiny-design/react';
2+
import { Collapse, Select, Text } from '@tiny-design/react';
33
import { COLOR_GROUPS, CORE_COLOR_GROUP_TITLES, FONT_OPTIONS, MONO_OPTIONS } from './editor-config';
44
import { ColorField, SliderField, TextField } from './editor-fields';
55
import type { FieldKey, ThemeEditorDraft, ThemeEditorSection, ThemeEditorColorGroup } from './types';
@@ -12,7 +12,7 @@ function renderColorGroups(
1212
return groups.map((group) => (
1313
<div key={group.title} className="theme-studio__group-card">
1414
<div className="theme-studio__group-header">
15-
<Typography.Text strong>{group.title}</Typography.Text>
15+
<Text strong>{group.title}</Text>
1616
</div>
1717
<div className="theme-studio__group-fields">
1818
{group.fields.map((field) => (
@@ -46,10 +46,10 @@ export function ThemeStudioSidebarContent({
4646
<div className="theme-studio__panel-stack">
4747
<div className="theme-studio__group-section">
4848
<div className="theme-studio__section-header">
49-
<Typography.Text strong>Core Colors</Typography.Text>
50-
<Typography.Text type="secondary">
49+
<Text strong>Core Colors</Text>
50+
<Text type="secondary">
5151
Start with brand, surfaces, feedback, and focus.
52-
</Typography.Text>
52+
</Text>
5353
</div>
5454
{renderColorGroups(coreColorGroups, draft, updateField)}
5555
</div>
@@ -64,10 +64,10 @@ export function ThemeStudioSidebarContent({
6464
itemKey="advanced-colors"
6565
header={(
6666
<div className="theme-studio__section-header theme-studio__section-header_inline">
67-
<Typography.Text strong>Advanced Tokens</Typography.Text>
68-
<Typography.Text type="secondary">
67+
<Text strong>Advanced Tokens</Text>
68+
<Text type="secondary">
6969
Card, popover, sidebar, chart.
70-
</Typography.Text>
70+
</Text>
7171
</div>
7272
)}
7373
>
@@ -86,8 +86,8 @@ export function ThemeStudioSidebarContent({
8686
<div className="theme-studio__group-card theme-studio__group-card_toolbar">
8787
<div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
8888
<div>
89-
<Typography.Text strong>Typography System</Typography.Text>
90-
<Typography.Text type="secondary">Font, scale, rhythm.</Typography.Text>
89+
<Text strong>Typography System</Text>
90+
<Text type="secondary">Font, scale, rhythm.</Text>
9191
</div>
9292
</div>
9393
<div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
@@ -107,7 +107,7 @@ export function ThemeStudioSidebarContent({
107107
</div>
108108

109109
<div className="theme-studio__group-card">
110-
<Typography.Text strong>Font Family</Typography.Text>
110+
<Text strong>Font Family</Text>
111111
<div className="theme-studio__type-preview-card">
112112
<strong style={{ fontFamily: draft.fields.fontSans }}>The quick brown fox jumps over the lazy dog.</strong>
113113
<code style={{ fontFamily: draft.fields.fontMono }}>const theme = &#123; mode: &quot;{draft.mode}&quot; &#125;</code>
@@ -137,15 +137,15 @@ export function ThemeStudioSidebarContent({
137137
</div>
138138

139139
<div className="theme-studio__group-card">
140-
<Typography.Text strong>Type Scale</Typography.Text>
140+
<Text strong>Type Scale</Text>
141141
<SliderField label="Base Font Size" value={draft.fields.fontSizeBase} onChange={(next) => updateField('fontSizeBase', next)} config={{ min: 12, max: 20, step: 1, unit: 'px' }} />
142142
<SliderField label="Line Height" value={draft.fields.lineHeightBase} onChange={(next) => updateField('lineHeightBase', next)} config={{ min: 1.1, max: 2, step: 0.05 }} />
143143
<SliderField label="H1 Size" value={draft.fields.h1Size} onChange={(next) => updateField('h1Size', next)} config={{ min: 28, max: 64, step: 1, unit: 'px' }} />
144144
<SliderField label="H2 Size" value={draft.fields.h2Size} onChange={(next) => updateField('h2Size', next)} config={{ min: 22, max: 48, step: 1, unit: 'px' }} />
145145
</div>
146146

147147
<div className="theme-studio__group-card">
148-
<Typography.Text strong>Fine Tuning</Typography.Text>
148+
<Text strong>Fine Tuning</Text>
149149
<SliderField label="Letter Spacing" value={draft.fields.letterSpacing} onChange={(next) => updateField('letterSpacing', next)} config={{ min: -0.08, max: 0.08, step: 0.01, unit: 'em' }} />
150150
<div className="theme-studio__type-preview-lines">
151151
<span style={{ fontSize: draft.fields.h1Size, letterSpacing: draft.fields.letterSpacing }}>Heading Preview</span>
@@ -162,8 +162,8 @@ export function ThemeStudioSidebarContent({
162162
<div className="theme-studio__group-card theme-studio__group-card_toolbar">
163163
<div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
164164
<div>
165-
<Typography.Text strong>Surface & Shape</Typography.Text>
166-
<Typography.Text type="secondary">Corners, density, elevation.</Typography.Text>
165+
<Text strong>Surface & Shape</Text>
166+
<Text type="secondary">Corners, density, elevation.</Text>
167167
</div>
168168
</div>
169169
<div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
@@ -187,7 +187,7 @@ export function ThemeStudioSidebarContent({
187187
</div>
188188

189189
<div className="theme-studio__group-card">
190-
<Typography.Text strong>Shape</Typography.Text>
190+
<Text strong>Shape</Text>
191191
<SliderField label="Global Radius" value={draft.fields.radius} onChange={(next) => updateField('radius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
192192
<SliderField label="Button Radius" value={draft.fields.buttonRadius} onChange={(next) => updateField('buttonRadius', next)} config={{ min: 0, max: 4, step: 0.0625, unit: 'rem' }} />
193193
<SliderField label="Input Radius" value={draft.fields.inputRadius} onChange={(next) => updateField('inputRadius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
@@ -196,20 +196,20 @@ export function ThemeStudioSidebarContent({
196196

197197
<div className="theme-studio__group-card">
198198
<div className="theme-studio__section-header">
199-
<Typography.Text strong>Density</Typography.Text>
200-
<Typography.Text type="secondary">Tune spacing and heights for fields, buttons, and cards.</Typography.Text>
199+
<Text strong>Density</Text>
200+
<Text type="secondary">Tune spacing and heights for fields, buttons, and cards.</Text>
201201
</div>
202202
<div className="theme-studio__group-fields">
203-
<Typography.Text className="theme-studio__subgroup-title">Fields</Typography.Text>
203+
<Text className="theme-studio__subgroup-title">Fields</Text>
204204
<SliderField label="Field Height / Medium" value={draft.fields.fieldHeightMd} onChange={(next) => updateField('fieldHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
205205
<SliderField label="Field Padding / Medium" value={draft.fields.fieldPaddingMd} onChange={(next) => updateField('fieldPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
206206
<Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
207207
<Panel
208208
itemKey="field-density-advanced"
209209
header={(
210210
<div className="theme-studio__section-header theme-studio__section-header_inline">
211-
<Typography.Text strong>Advanced Sizes</Typography.Text>
212-
<Typography.Text type="secondary">Small and large field density.</Typography.Text>
211+
<Text strong>Advanced Sizes</Text>
212+
<Text type="secondary">Small and large field density.</Text>
213213
</div>
214214
)}
215215
>
@@ -222,16 +222,16 @@ export function ThemeStudioSidebarContent({
222222
</div>
223223

224224
<div className="theme-studio__group-fields">
225-
<Typography.Text className="theme-studio__subgroup-title">Buttons</Typography.Text>
225+
<Text className="theme-studio__subgroup-title">Buttons</Text>
226226
<SliderField label="Button Height / Medium" value={draft.fields.buttonHeightMd} onChange={(next) => updateField('buttonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
227227
<SliderField label="Button Padding / Medium" value={draft.fields.buttonPaddingMd} onChange={(next) => updateField('buttonPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
228228
<Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
229229
<Panel
230230
itemKey="button-density-advanced"
231231
header={(
232232
<div className="theme-studio__section-header theme-studio__section-header_inline">
233-
<Typography.Text strong>Advanced Sizes</Typography.Text>
234-
<Typography.Text type="secondary">Small and large button density.</Typography.Text>
233+
<Text strong>Advanced Sizes</Text>
234+
<Text type="secondary">Small and large button density.</Text>
235235
</div>
236236
)}
237237
>
@@ -244,13 +244,13 @@ export function ThemeStudioSidebarContent({
244244
</div>
245245

246246
<div className="theme-studio__group-fields">
247-
<Typography.Text className="theme-studio__subgroup-title">Cards</Typography.Text>
247+
<Text className="theme-studio__subgroup-title">Cards</Text>
248248
<SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
249249
</div>
250250
</div>
251251

252252
<div className="theme-studio__group-card">
253-
<Typography.Text strong>Elevation & Focus</Typography.Text>
253+
<Text strong>Elevation & Focus</Text>
254254
<div className="theme-studio__surface-preview-card">
255255
<div className="theme-studio__surface-proxy">Card Surface</div>
256256
<div className="theme-studio__focus-proxy">Focus Ring</div>

‎apps/docs/src/containers/theme-studio/theme-studio.scss‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -714,7 +714,6 @@
714714
.theme-studio__cards-actions-end,
715715
.theme-studio__cards-auth-actions,
716716
.theme-studio__cards-share-row,
717-
.theme-studio__cards-inline-card-head,
718717
.theme-studio__cards-goal-actions {
719718
display: flex;
720719
gap: 10px;
@@ -887,10 +886,6 @@
887886
padding-top: 0;
888887
}
889888

890-
.theme-studio__cards-inline-card.ty-card > .ty-card__body small {
891-
color: var(--editor-muted-foreground);
892-
}
893-
894889
.theme-studio__cards-chat-head {
895890
margin-bottom: 2px;
896891
}
@@ -899,13 +894,6 @@
899894
padding: 0;
900895
}
901896

902-
.theme-studio__cards-meta-row {
903-
display: flex;
904-
flex-wrap: wrap;
905-
gap: 8px;
906-
align-items: center;
907-
}
908-
909897
.theme-studio__cards-panel .theme-studio__member-row {
910898
gap: 10px;
911899
padding: 8px 0;
@@ -923,8 +911,7 @@
923911
.theme-studio__cards-member-select,
924912
.theme-studio__cards-inline-action,
925913
.theme-studio__cards-report-select,
926-
.theme-studio__cards-share-row .ty-btn,
927-
.theme-studio__cards-inline-card-head .ty-btn {
914+
.theme-studio__cards-share-row .ty-btn {
928915
width: auto !important;
929916
flex: 0 0 auto;
930917
}

‎packages/react/src/button/demo/Group.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import { Button, Typography } from '@tiny-design/react';
2+
import { Button, Heading } from '@tiny-design/react';
33

44
const { Group } = Button;
55

66
export default function GroupDemo() {
77
return (
88
<>
99
<div>
10-
<Typography.Heading level={6}>Basic</Typography.Heading>
10+
<Heading level={6}>Basic</Heading>
1111
<Group>
1212
<Button>Go Left</Button>
1313
<Button>Go Right</Button>
@@ -21,7 +21,7 @@ export default function GroupDemo() {
2121
</div>
2222
<br />
2323
<div>
24-
<Typography.Heading level={6}>Group props</Typography.Heading>
24+
<Heading level={6}>Group props</Heading>
2525
<Group size="lg">
2626
<Button>Go Left</Button>
2727
<Button>Go Right</Button>

‎packages/react/src/color-picker/__tests__/color-picker.test.tsx‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { render, fireEvent } from '@testing-library/react';
33
import ColorPicker from '../index';
4-
import { parseColor } from '../utils';
4+
import { formatColor, parseColor } from '../utils';
55

66
describe('<ColorPicker />', () => {
77
it('should match the snapshot', () => {
@@ -43,4 +43,59 @@ describe('<ColorPicker />', () => {
4343
expect(color.s).toBe(0);
4444
expect(color.b).toBeLessThan(20);
4545
});
46+
47+
it('should format color as oklch', () => {
48+
const color = parseColor('#1890ff');
49+
expect(formatColor(color, 'oklch')).toMatch(/^oklch\(/);
50+
});
51+
52+
it('should call onChange with meta', () => {
53+
const onChange = jest.fn();
54+
const { container } = render(<ColorPicker defaultValue="#1890ff" onChange={onChange} />);
55+
const trigger = container.querySelector('.ty-color-picker__trigger');
56+
fireEvent.click(trigger!);
57+
const preset = document.body.querySelector('.ty-color-picker__preset') as HTMLElement | null;
58+
59+
if (preset) {
60+
fireEvent.click(preset);
61+
} else {
62+
const input = document.body.querySelector('.ty-color-picker__hex-input') as HTMLInputElement;
63+
fireEvent.change(input, { target: { value: '#ff0000' } });
64+
}
65+
66+
expect(onChange).toHaveBeenCalled();
67+
const [, meta] = onChange.mock.calls.at(-1)!;
68+
expect(meta).toEqual(
69+
expect.objectContaining({
70+
format: 'hex',
71+
color: expect.objectContaining({ a: 1 }),
72+
})
73+
);
74+
});
75+
76+
it('should only cycle through configured formats', () => {
77+
const onFormatChange = jest.fn();
78+
const { container } = render(
79+
<ColorPicker defaultValue="#1890ff" formats={['hex', 'oklch']} onFormatChange={onFormatChange} />
80+
);
81+
const trigger = container.querySelector('.ty-color-picker__trigger');
82+
fireEvent.click(trigger!);
83+
const button = document.body.querySelector('.ty-color-picker__format-btn') as HTMLButtonElement;
84+
fireEvent.click(button);
85+
expect(onFormatChange).toHaveBeenCalledWith('oklch');
86+
});
87+
88+
it('should call onChangeComplete when preset is selected', () => {
89+
const onChangeComplete = jest.fn();
90+
const { container } = render(
91+
<ColorPicker open presets={['#ff0000']} onChangeComplete={onChangeComplete} />
92+
);
93+
94+
const preset = document.body.querySelector('.ty-color-picker__preset') as HTMLElement;
95+
fireEvent.click(preset);
96+
97+
expect(onChangeComplete).toHaveBeenCalled();
98+
const [, meta] = onChangeComplete.mock.calls[0];
99+
expect(meta).toEqual(expect.objectContaining({ format: 'hex' }));
100+
});
46101
});

0 commit comments

Comments
 (0)