Skip to content

Commit ac30424

Browse files
RylanBotRylanBot
committed
refactor: enhance token management 😈
1 parent 8128c0b commit ac30424

File tree

12 files changed

+295
-130
lines changed

12 files changed

+295
-130
lines changed

‎packages/theme-generator/src/color-panel/index.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ import {
339339
modifyToken,
340340
syncColorTokensToStyle,
341341
themeStore,
342+
updateLocalOption,
342343
updateStyleSheetColor,
343344
} from '../common/themes';
344345
import { colorAnimation, getThemeMode, getTokenValue, handleAttach, setUpModeObserver } from '../common/utils';
@@ -502,7 +503,7 @@ export default {
502503
}
503504
const { lightPalette, darkPalette } = generateFunctionalPalette(hex);
504505
updateStyleSheetColor(type, lightPalette, darkPalette);
505-
// updateLocalOption(type, hex, DEFAULT_FUNCTION_COLORS[type] !== hex);
506+
updateLocalOption(type, hex);
506507
this.$nextTick(this.refreshAllTokens);
507508
},
508509
changeGradation(hex, idx, type, saveToLocal = true) {

‎packages/theme-generator/src/common/components/SegmentSelection/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div class="segment-panel__round-slider">
88
<div
9-
v-for="(v, i) in selectOptions.slice(0, 5)"
9+
v-for="(_, i) in selectOptions.slice(0, 5)"
1010
:key="i"
1111
class="slider-split"
1212
:style="{

‎packages/theme-generator/src/common/themes/built-in/css/mobile/TDesign/extra.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
:root {
2+
--td-font-family: pingfang sc, microsoft yahei, arial regular;
3+
--td-font-family-medium: pingfang sc, microsoft yahei, arial medium;
4+
--td-font-size-link-small: 12px;
5+
--td-font-size-link-medium: 14px;
6+
--td-font-size-link-large: 16px;
7+
--td-font-size-mark-extra-small: 10px;
8+
--td-font-size-mark-small: 12px;
9+
--td-font-size-mark-medium: 14px;
10+
--td-font-size-mark-large: 16px;
11+
--td-font-size-body-extra-small: 10px;
12+
--td-font-size-body-small: 12px;
13+
--td-font-size-body-medium: 14px;
14+
--td-font-size-body-large: 16px;
15+
--td-font-size-title-small: 14px;
16+
--td-font-size-title-medium: 16px;
17+
--td-font-size-title-large: 18px;
18+
--td-font-size-title-extra-large: 20px;
19+
--td-font-size-headline-small: 24px;
20+
--td-font-size-headline-medium: 28px;
21+
--td-font-size-headline-large: 36px;
22+
--td-font-size-display-medium: 48px;
23+
--td-font-size-display-large: 64px;
24+
--td-font-size: 10px;
25+
--td-font-size-xs: var(--td-font-size-body-extra-small);
26+
--td-font-size-s: var(--td-font-size-body-small);
27+
--td-font-size-base: var(--td-font-size-title-small);
28+
--td-font-size-m: var(--td-font-size-title-medium);
29+
--td-font-size-l: var(--td-font-size-title-large);
30+
--td-font-size-xl: var(--td-font-size-title-extra-large);
31+
--td-font-size-xxl: var(--td-font-size-headline-large);
32+
33+
--td-radius-small: 3px;
34+
--td-radius-default: 6px;
35+
--td-radius-large: 9px;
36+
--td-radius-extraLarge: 12px;
37+
--td-radius-round: 999px;
38+
--td-radius-circle: 50%;
39+
}

‎packages/theme-generator/src/common/themes/built-in/css/web/TDesign/extra.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
:root {
2+
--td-font-family: pingfang sc, microsoft yahei, arial regular;
3+
--td-font-family-medium: pingfang sc, microsoft yahei, arial medium;
4+
--td-font-size-link-small: 12px;
5+
--td-font-size-link-medium: 14px;
6+
--td-font-size-link-large: 16px;
7+
--td-font-size-mark-small: 12px;
8+
--td-font-size-mark-medium: 14px;
9+
--td-font-size-body-small: 12px;
10+
--td-font-size-body-medium: 14px;
11+
--td-font-size-body-large: 16px;
12+
--td-font-size-title-small: 14px;
13+
--td-font-size-title-medium: 16px;
14+
--td-font-size-title-large: 18px;
15+
--td-font-size-title-extraLarge: 20px;
16+
--td-font-size-headline-small: 24px;
17+
--td-font-size-headline-medium: 28px;
18+
--td-font-size-headline-large: 36px;
19+
--td-font-size-display-medium: 48px;
20+
--td-font-size-display-large: 64px;
21+
--td-line-height-link-small: 20px;
22+
--td-line-height-link-medium: 22px;
23+
--td-line-height-link-large: 24px;
24+
--td-line-height-mark-small: 20px;
25+
--td-line-height-mark-medium: 22px;
26+
--td-line-height-body-small: 20px;
27+
--td-line-height-body-medium: 22px;
28+
--td-line-height-body-large: 24px;
29+
--td-line-height-title-small: 22px;
30+
--td-line-height-title-medium: 24px;
31+
--td-line-height-title-large: 26px;
32+
--td-line-height-title-extraLarge: 28px;
33+
--td-line-height-headline-small: 32px;
34+
--td-line-height-headline-medium: 36px;
35+
--td-line-height-headline-large: 44px;
36+
--td-line-height-display-medium: 56px;
37+
--td-line-height-display-large: 72px;
38+
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
39+
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
40+
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
41+
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
42+
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
43+
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
44+
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
45+
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
46+
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
47+
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);
48+
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
49+
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);
50+
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);
51+
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);
52+
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);
53+
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);
54+
55+
--td-radius-small: 2px;
56+
--td-radius-default: 3px;
57+
--td-radius-medium: 6px;
58+
--td-radius-large: 9px;
59+
--td-radius-extraLarge: 12px;
60+
--td-radius-round: 999px;
61+
--td-radius-circle: 50%;
62+
63+
--td-size-1: 2px;
64+
--td-size-2: 4px;
65+
--td-size-3: 6px;
66+
--td-size-4: 8px;
67+
--td-size-5: 12px;
68+
--td-size-6: 16px;
69+
--td-size-7: 20px;
70+
--td-size-8: 24px;
71+
--td-size-9: 28px;
72+
--td-size-10: 32px;
73+
--td-size-11: 36px;
74+
--td-size-12: 40px;
75+
--td-size-13: 48px;
76+
--td-size-14: 56px;
77+
--td-size-15: 64px;
78+
--td-size-16: 72px;
79+
--td-comp-size-xxxs: var(--td-size-6);
80+
--td-comp-size-xxs: var(--td-size-7);
81+
--td-comp-size-xs: var(--td-size-8);
82+
--td-comp-size-s: var(--td-size-9);
83+
--td-comp-size-m: var(--td-size-10);
84+
--td-comp-size-l: var(--td-size-11);
85+
--td-comp-size-xl: var(--td-size-12);
86+
--td-comp-size-xxl: var(--td-size-13);
87+
--td-comp-size-xxxl: var(--td-size-14);
88+
--td-comp-size-xxxxl: var(--td-size-15);
89+
--td-comp-size-xxxxxl: var(--td-size-16);
90+
--td-pop-padding-s: var(--td-size-2);
91+
--td-pop-padding-m: var(--td-size-3);
92+
--td-pop-padding-l: var(--td-size-4);
93+
--td-pop-padding-xl: var(--td-size-5);
94+
--td-pop-padding-xxl: var(--td-size-6);
95+
--td-comp-paddingLR-xxs: var(--td-size-1);
96+
--td-comp-paddingLR-xs: var(--td-size-2);
97+
--td-comp-paddingLR-s: var(--td-size-4);
98+
--td-comp-paddingLR-m: var(--td-size-5);
99+
--td-comp-paddingLR-l: var(--td-size-6);
100+
--td-comp-paddingLR-xl: var(--td-size-8);
101+
--td-comp-paddingLR-xxl: var(--td-size-10);
102+
--td-comp-paddingTB-xxs: var(--td-size-1);
103+
--td-comp-paddingTB-xs: var(--td-size-2);
104+
--td-comp-paddingTB-s: var(--td-size-4);
105+
--td-comp-paddingTB-m: var(--td-size-5);
106+
--td-comp-paddingTB-l: var(--td-size-6);
107+
--td-comp-paddingTB-xl: var(--td-size-8);
108+
--td-comp-paddingTB-xxl: var(--td-size-10);
109+
--td-comp-margin-xxs: var(--td-size-1);
110+
--td-comp-margin-xs: var(--td-size-2);
111+
--td-comp-margin-s: var(--td-size-4);
112+
--td-comp-margin-m: var(--td-size-5);
113+
--td-comp-margin-l: var(--td-size-6);
114+
--td-comp-margin-xl: var(--td-size-7);
115+
--td-comp-margin-xxl: var(--td-size-8);
116+
--td-comp-margin-xxxl: var(--td-size-10);
117+
--td-comp-margin-xxxxl: var(--td-size-12);
118+
}

‎packages/theme-generator/src/common/themes/core.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,20 +74,25 @@ export function initThemeStyleSheet(themeName) {
7474

7575
if (extra) {
7676
extraStyleSheet.textContent = extra;
77+
applyCommonThemeStyles(true);
7778
} else {
7879
extraStyleSheet.remove();
79-
initCommonStyleSheet();
80+
applyCommonThemeStyles();
8081
}
8182
}
8283

83-
function initCommonStyleSheet() {
84+
function applyCommonThemeStyles(reset = false) {
8485
const deviceType = getCurrentDevice();
8586
const commonThemes = BUILT_IN_THEMES[deviceType]?.common;
8687
if (!commonThemes) return;
8788

8889
Object.entries(commonThemes).forEach(([key, theme]) => {
8990
const commonId = `${CUSTOM_COMMON_ID_PREFIX}-${key}`;
9091
const commonStyleSheet = appendStyleSheet(commonId);
92+
if (reset) {
93+
commonStyleSheet.remove();
94+
return;
95+
}
9196
commonStyleSheet.textContent = theme;
9297
});
9398
}

‎packages/theme-generator/src/font-panel/built-in/font-map.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,23 @@
1-
export const fontSizeSteps = {
1+
export const FONT_SIZE_TOKEN_LIST = [
2+
{ label: '--td-font-size-link-small' },
3+
{ label: '--td-font-size-link-medium' },
4+
{ label: '--td-font-size-link-large' },
5+
{ label: '--td-font-size-mark-small', isBold: true },
6+
{ label: '--td-font-size-mark-medium', isBold: true },
7+
{ label: '--td-font-size-body-small' },
8+
{ label: '--td-font-size-body-medium' },
9+
{ label: '--td-font-size-body-large' },
10+
{ label: '--td-font-size-title-small', isBold: true },
11+
{ label: '--td-font-size-title-medium', isBold: true },
12+
{ label: '--td-font-size-title-large', isBold: true },
13+
{ label: '--td-font-size-headline-small', isBold: true },
14+
{ label: '--td-font-size-headline-medium', isBold: true },
15+
{ label: '--td-font-size-headline-large', isBold: true },
16+
{ label: '--td-font-size-display-medium', isBold: true },
17+
{ label: '--td-font-size-display-large', isBold: true },
18+
];
19+
20+
export const FONT_SIZE_STEPS = {
221
1: [
322
{ name: '--td-font-size-link-small', value: '12px' },
423
{ name: '--td-font-size-link-medium', value: '13px' },
@@ -91,13 +110,16 @@ export const fontSizeSteps = {
91110
], // 特大号
92111
};
93112

94-
export const fontSizeLabels = {
95-
1: '超小号',
96-
2: '小号',
97-
3: '默认',
98-
4: '大号',
99-
5: '特大号',
100-
};
113+
export const FONT_SIZE_OPTIONS = [
114+
{ label: '超小号', enLabel: 'mini', value: 1 },
115+
{ label: '小号', enLabel: 'small', value: 2 },
116+
{ label: '默认', enLabel: 'default', value: 3 },
117+
{ label: '大号', enLabel: 'large', value: 4 },
118+
{ label: '特大号', enLabel: 'max', value: 5 },
119+
{ label: '自定义', enLabel: 'customized', value: 6, disabled: true },
120+
];
121+
122+
export const FONT_SIZE_LABELS = Object.fromEntries(FONT_SIZE_OPTIONS.map((item, index) => [index + 1, item.label]));
101123

102124
export const FONT_COLOR_TOKEN_MAP = [
103125
{ name: '--td-text-color-primary', from: '--td-font-gray-1' },

‎packages/theme-generator/src/font-panel/built-in/line-height-map.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,27 @@ export const LINE_HEIGHT_OPTIONS = [
1818
{ label: '自定义', enLabel: 'customized', value: 6, disabled: true },
1919
];
2020

21-
export function updateLineHeightTokens(commonVal, type = 'plus') {
22-
const LINE_HEIGHT_VAR = [
23-
'link-small',
24-
'link-medium',
25-
'link-large',
26-
'mark-small',
27-
'mark-medium',
28-
'body-small',
29-
'body-medium',
30-
'body-large',
31-
'title-small',
32-
'title-medium',
33-
'title-large',
34-
'headline-small',
35-
'headline-medium',
36-
'headline-large',
37-
'display-medium',
38-
'display-large',
39-
];
21+
const LINE_HEIGHT_TOKENS = [
22+
'link-small',
23+
'link-medium',
24+
'link-large',
25+
'mark-small',
26+
'mark-medium',
27+
'body-small',
28+
'body-medium',
29+
'body-large',
30+
'title-small',
31+
'title-medium',
32+
'title-large',
33+
'headline-small',
34+
'headline-medium',
35+
'headline-large',
36+
'display-medium',
37+
'display-large',
38+
];
4039

41-
LINE_HEIGHT_VAR.forEach((size) => {
40+
export function updateLineHeightTokens(commonVal, type = 'plus') {
41+
LINE_HEIGHT_TOKENS.forEach((size) => {
4242
const fontSizeToken = `--td-font-size-${size}`;
4343
const lineHeightToken = `--td-line-height-${size}`;
4444
const fontSize = getTokenValue(fontSizeToken);

‎packages/theme-generator/src/font-panel/components/FontColorAdjust.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,18 @@ export default {
114114
return flatten(this.originColorPalette);
115115
},
116116
},
117+
mounted() {
118+
this.$nextTick(() => {
119+
// 手动修复高亮部分的尺寸异常情况
120+
// TODO 待接入最新版的 TD 后可解决并移除
121+
const body = handleAttach();
122+
const block = body.querySelector('.t-radio-group__bg-block');
123+
if (block) {
124+
block.style.width = '96%';
125+
block.style.left = '5px';
126+
}
127+
});
128+
},
117129
methods: {
118130
handleAttach,
119131
handleClickIdx(idx) {
@@ -158,10 +170,6 @@ export default {
158170
/deep/ .t-radio-group__bg-block {
159171
border-radius: 5px;
160172
background-color: var(--bg-color-theme-surface);
161-
// 手动修复高亮部分的尺寸异常情况
162-
// TODO 待接入最新版的 TD 后可解决并移除
163-
width: 99% !important;
164-
left: 1px !important;
165173
}
166174
}
167175
}

0 commit comments

Comments
 (0)