Skip to content

Commit 12b5f5d

Browse files
wangdicoderwangdicoder
authored
feat: refresh component styling and theme runtime (#98)
* fix: update card ui * fix: unify field and button size * fix: component styles * fix: component styles * fix: styles * fix: styles * fix: popup issues * chore: clean up * chore: remove plan doc * chore: add changeset for react popup and overlay fixes * fix: pro build * fix: test
1 parent 4fdb8a0 commit 12b5f5d

File tree

219 files changed

+7790
-1999
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

219 files changed

+7790
-1999
lines changed

‎.changeset/fix-react-popup-and-overlays.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@tiny-design/react": patch
3+
---
4+
5+
Fix popup positioning and interaction regressions across overlay-based React components, and align related input, table, tree, tour, and upload behaviors

‎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/defaults.ts‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,25 @@ export const DEFAULT_FIELDS: ThemeEditorFields = {
4949
h1Size: '40px',
5050
h2Size: '32px',
5151
letterSpacing: '-0.02em',
52-
radius: '14px',
52+
radius: '0.3rem',
5353
shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
5454
shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
55-
buttonRadius: '999px',
56-
inputRadius: '14px',
57-
cardRadius: '22px',
58-
buttonPaddingX: '18px',
59-
inputHeight: '40px',
60-
cardPadding: '24px',
55+
buttonRadius: '0.3rem',
56+
inputRadius: '0.3rem',
57+
cardRadius: '0.3rem',
58+
fieldPaddingSm: '8px',
59+
fieldPaddingMd: '8px',
60+
fieldPaddingLg: '8px',
61+
buttonPaddingSm: '8px',
62+
buttonPaddingMd: '15px',
63+
buttonPaddingLg: '20px',
64+
fieldHeightSm: '24px',
65+
fieldHeightMd: '35px',
66+
fieldHeightLg: '44px',
67+
buttonHeightSm: '24px',
68+
buttonHeightMd: '35px',
69+
buttonHeightLg: '44px',
70+
cardPadding: '18px',
6171
};
6272

6373
export function createDraft(

‎apps/docs/src/containers/theme-studio/editor-draft.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,18 @@ export function buildPreviewVars(fields: ThemeEditorFields): React.CSSProperties
126126
'--editor-button-radius': fields.buttonRadius,
127127
'--editor-input-radius': fields.inputRadius,
128128
'--editor-card-radius': fields.cardRadius,
129-
'--editor-button-padding-x': fields.buttonPaddingX,
130-
'--editor-input-height': fields.inputHeight,
129+
'--editor-field-padding-sm': fields.fieldPaddingSm,
130+
'--editor-field-padding-md': fields.fieldPaddingMd,
131+
'--editor-field-padding-lg': fields.fieldPaddingLg,
132+
'--editor-button-padding-sm': fields.buttonPaddingSm,
133+
'--editor-button-padding-md': fields.buttonPaddingMd,
134+
'--editor-button-padding-lg': fields.buttonPaddingLg,
135+
'--editor-field-height-sm': fields.fieldHeightSm,
136+
'--editor-field-height-md': fields.fieldHeightMd,
137+
'--editor-field-height-lg': fields.fieldHeightLg,
138+
'--editor-button-height-sm': fields.buttonHeightSm,
139+
'--editor-button-height-md': fields.buttonHeightMd,
140+
'--editor-button-height-lg': fields.buttonHeightLg,
131141
'--editor-card-padding': fields.cardPadding,
132142
} as React.CSSProperties;
133143
}

‎apps/docs/src/containers/theme-studio/editor-fields.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function swatchTextStyle(background: string, foreground: string): React.C
99
};
1010
}
1111

12-
function parseSliderValue(value: string, unit?: 'px' | 'em'): number | undefined {
12+
function parseSliderValue(value: string, unit?: 'px' | 'em' | 'rem'): number | undefined {
1313
if (unit === 'px') {
1414
const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
1515
return match ? Number(match[1]) : undefined;
@@ -20,11 +20,16 @@ function parseSliderValue(value: string, unit?: 'px' | 'em'): number | undefined
2020
return match ? Number(match[1]) : undefined;
2121
}
2222

23+
if (unit === 'rem') {
24+
const match = /^(-?\d+(?:\.\d+)?)rem$/.exec(value.trim());
25+
return match ? Number(match[1]) : undefined;
26+
}
27+
2328
const parsed = Number(value);
2429
return Number.isNaN(parsed) ? undefined : parsed;
2530
}
2631

27-
function formatSliderValue(value: number, unit?: 'px' | 'em'): string {
32+
function formatSliderValue(value: number, unit?: 'px' | 'em' | 'rem'): string {
2833
if (!unit) return String(value);
2934
return `${value}${unit}`;
3035
}

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { useEffect, useMemo, useState } from 'react';
22
import type { ThemeDocument } from '@tiny-design/react';
3+
import { validateThemeDocument } from '@tiny-design/tokens/validate-theme';
34
import {
45
Button,
56
ConfigProvider,
67
Modal,
8+
Paragraph,
79
Segmented,
810
Select,
11+
Text,
912
Textarea,
10-
Typography,
1113
useTheme,
1214
} from '@tiny-design/react';
1315
import {
@@ -115,10 +117,16 @@ const ThemeStudioPage = (): React.ReactElement => {
115117
const handleImport = () => {
116118
try {
117119
const parsed = JSON.parse(importText) as ThemeDocument;
118-
setDraft(buildDraftFromThemeDocument(parsed));
120+
const validation = validateThemeDocument(parsed);
121+
if (!validation.valid) {
122+
setImportError(validation.errors.join('\n'));
123+
return;
124+
}
125+
126+
setDraft(buildDraftFromThemeDocument(validation.normalizedDocument as ThemeDocument));
119127
setImportVisible(false);
120128
setImportError(null);
121-
setStatus('Imported theme document');
129+
setStatus(validation.warnings.length > 0 ? 'Imported theme document with validation warnings' : 'Imported theme document');
122130
} catch {
123131
setImportError('Invalid theme document JSON');
124132
}
@@ -137,7 +145,7 @@ const ThemeStudioPage = (): React.ReactElement => {
137145
>
138146
<div className="theme-studio__topbar">
139147
<div className="theme-studio__topbar-copy">
140-
<Typography.Text className="theme-studio__eyebrow">Theme Editor</Typography.Text>
148+
<Text className="theme-studio__eyebrow">Theme Editor</Text>
141149
<div className="theme-studio__topbar-meta">
142150
<span>{activePreset.name}</span>
143151
<span>{THEME_EDITOR_PRESETS.length} presets</span>
@@ -194,9 +202,7 @@ const ThemeStudioPage = (): React.ReactElement => {
194202
</div>
195203
</div>
196204

197-
<div className={`theme-studio__preview theme-studio__preview_${draft.mode}`}>
198-
{renderPreview(draft.activeTemplate, draft.fields, draft.activeSection)}
199-
</div>
205+
{renderPreview(draft.activeTemplate, draft.fields, draft.activeSection)}
200206
</main>
201207
</div>
202208

@@ -215,18 +221,18 @@ const ThemeStudioPage = (): React.ReactElement => {
215221
}}
216222
>
217223
<div className="theme-studio__modal-copy">
218-
<Typography.Paragraph>
224+
<Paragraph>
219225
Paste a Tiny theme document JSON export to replace the current global theme.
220-
</Typography.Paragraph>
221-
<Typography.Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Typography.Text>
226+
</Paragraph>
227+
<Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Text>
222228
</div>
223229
<Textarea
224230
rows={16}
225231
className="theme-studio__import-textarea"
226232
value={importText}
227233
onChange={(next) => setImportText(next)}
228234
/>
229-
{importError ? <Typography.Paragraph className="theme-studio__error">{importError}</Typography.Paragraph> : null}
235+
{importError ? <Paragraph className="theme-studio__error">{importError}</Paragraph> : null}
230236
</Modal>
231237

232238
<Modal
@@ -247,8 +253,8 @@ const ThemeStudioPage = (): React.ReactElement => {
247253
>
248254
<div className="theme-studio__code-head">
249255
<div>
250-
<Typography.Text strong>Output</Typography.Text>
251-
<Typography.Text type="secondary">{activePreset.name} · {status}</Typography.Text>
256+
<Text strong>Output</Text>
257+
<Text type="secondary">{activePreset.name} · {status}</Text>
252258
</div>
253259
<Segmented
254260
options={CODE_VIEW_OPTIONS}

0 commit comments

Comments
 (0)