Skip to content

Commit 0a63ca8

Browse files
discreted66discreted66
authored
feat:暗色主题适配 (#2985)
1 parent b7dd780 commit 0a63ca8

File tree

11 files changed

+120
-121
lines changed

11 files changed

+120
-121
lines changed

‎examples/sites/demos/pc/app/milestone/basic-usage.spec.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,26 @@ test('基本用法', async ({ page }) => {
2424
]
2525
const iconStyles = [
2626
{
27-
'background-color': 'rgb(255, 255, 255)',
2827
'color': 'rgb(24, 144, 255)',
2928
'box-shadow': 'none'
3029
},
3130
{
32-
'background-color': 'rgb(255, 255, 255)',
3331
'color': 'rgb(24, 144, 255)',
3432
'box-shadow': 'none'
3533
},
3634
{
37-
'background-color': 'rgb(232, 250, 255)',
3835
'color': 'rgb(255, 255, 255)',
3936
'box-shadow': 'none'
4037
},
4138
{
42-
'background-color': 'rgb(255, 255, 255)',
4339
'color': 'rgba(242, 48, 48, 0.1)',
4440
'box-shadow': 'none'
4541
},
4642
{
47-
'background-color': 'rgb(255, 255, 255)',
4843
'color': 'rgb(237, 247, 223)',
4944
'box-shadow': 'none'
5045
},
5146
{
52-
'background-color': 'rgb(255, 255, 255)',
5347
'color': 'rgb(250, 173, 20)',
5448
'box-shadow': 'none'
5549
}
@@ -93,7 +87,6 @@ test('基本用法', async ({ page }) => {
9387
await expect(flags.nth(i)).toHaveText(flagContents[i])
9488
await expect(flagLines.nth(i)).toHaveCSS('width', '1px')
9589
await expect(flagLines.nth(i)).toHaveCSS('height', '30px')
96-
await expect(flagLines.nth(i)).toHaveCSS('background-color', flagLineColors[i])
9790
await flagLineDots.nth(i).isVisible()
9891
}
9992

‎examples/sites/demos/pc/app/milestone/show-number.spec.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,26 @@ test('序号显示', async ({ page }) => {
2222
]
2323
const iconStyles = [
2424
{
25-
'background-color': 'rgb(255, 255, 255)',
2625
'color': 'rgb(179, 214, 255)',
2726
'box-shadow': 'none'
2827
},
2928
{
30-
'background-color': 'rgb(255, 255, 255)',
3129
'color': 'rgb(179, 214, 255)',
3230
'box-shadow': 'none'
3331
},
3432
{
35-
'background-color': 'rgb(126, 211, 33)',
3633
'color': 'rgb(255, 255, 255)',
3734
'box-shadow': 'none'
3835
},
3936
{
40-
'background-color': 'rgb(255, 255, 255)',
4137
'color': 'rgb(217, 217, 217)',
4238
'box-shadow': 'none'
4339
},
4440
{
45-
'background-color': 'rgb(255, 255, 255)',
4641
'color': 'rgb(245, 34, 45)',
4742
'box-shadow': 'none'
4843
},
4944
{
50-
'background-color': 'rgb(255, 255, 255)',
5145
'color': 'rgb(250, 173, 20)',
5246
'box-shadow': 'none'
5347
}

‎examples/sites/demos/pc/app/milestone/solid-style.spec.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,26 @@ test('实心显示', async ({ page }) => {
2222
]
2323
const iconStyles = [
2424
{
25-
'background-color': 'rgb(255, 255, 255)',
2625
'color': 'rgb(179, 214, 255)',
2726
'box-shadow': 'none'
2827
},
2928
{
30-
'background-color': 'rgb(255, 255, 255)',
3129
'color': 'rgb(179, 214, 255)',
3230
'box-shadow': 'none'
3331
},
3432
{
35-
'background-color': 'rgb(126, 211, 33)',
3633
'color': 'rgb(255, 255, 255)',
3734
'box-shadow': 'none'
3835
},
3936
{
40-
'background-color': 'rgb(255, 255, 255)',
4137
'color': 'rgb(217, 217, 217)',
4238
'box-shadow': 'none'
4339
},
4440
{
45-
'background-color': 'rgb(255, 255, 255)',
4641
'color': 'rgb(245, 34, 45)',
4742
'box-shadow': 'none'
4843
},
4944
{
50-
'background-color': 'rgb(255, 255, 255)',
5145
'color': 'rgb(250, 173, 20)',
5246
'box-shadow': 'none'
5347
}

‎packages/design/saas/src/milestone/index.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ export default {
22
renderless: (props, hooks, { constants }, api) => {
33
return {
44
getMileIcon: (node) => {
5-
const status = props.milestonesStatus[node[props.statusField]] || constants.DEFAULT_COLOR
5+
const status = node[props.statusField]
6+
const statusColor = props.milestonesStatus[status]
7+
const isCompleted = status === constants.STATUS_COMPLETED
68

7-
const isCompleted = node[props.statusField] === props.completedField
8-
const switchColor = isCompleted && !props.solid
9-
const { r, g, b } = api.hexToRgb(status)
10-
11-
return {
12-
background: (switchColor ? constants.DEFAULT_BACK_COLOR : status) + '!important',
13-
color: (switchColor ? status : constants.DEFAULT_BACK_COLOR) + '!important',
14-
boxShadow: `rgba(${r},${g},${b},.4) ${constants.BOX_SHADOW_PX}`
9+
if (statusColor) {
10+
return {
11+
background: props.solid ? statusColor : '',
12+
color: props.solid && !isCompleted ? '#ffffff' : statusColor,
13+
'border-color': statusColor
14+
}
1515
}
1616
},
1717
getFlagStyle: ({ index, idx }) => {

‎packages/renderless/src/milestone/index.ts‎

Lines changed: 7 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -68,59 +68,21 @@ export const flagOperate =
6868
export const getMileIcon =
6969
({ constants, props }: Pick<IMilestoneRenderlessParams, 'constants' | 'props'>) =>
7070
(node: IMilestoneNode): IMilestoneIconStyle => {
71-
const smbConstants = {
72-
STATUS_COLOR_MAP: {
73-
DEFAULT: {
74-
BORDER_COLOR: '#C2C2C2',
75-
BACKGROUND_COLOR: '#FFFFFF',
76-
COLOR: '#191919',
77-
BOX_SHADOW_PX: '0px 0px 0px 4px',
78-
FLAG_CONTENT_CLS: '.content'
79-
},
80-
COMPLETED: {
81-
BORDER_COLOR: '#191919',
82-
BACKGROUND_COLOR: '#FFFFFF',
83-
COLOR: '#191919',
84-
BOX_SHADOW_PX: '0px 0px 0px 4px',
85-
FLAG_CONTENT_CLS: '.content'
86-
},
87-
DOING: {
88-
BORDER_COLOR: '#191919',
89-
BACKGROUND_COLOR: '#191919',
90-
COLOR: '#FFFFFF',
91-
BOX_SHADOW_PX: '0px 0px 0px 4px',
92-
FLAG_CONTENT_CLS: '.content'
93-
}
94-
}
95-
}
9671
const status = node[props.statusField]
9772
// 状态色
9873
const statusColor = props.milestonesStatus[status]
9974

100-
if (props.solid || status === constants.STATUS_MAP.DOING) {
101-
return {
102-
'background-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + '!important',
103-
color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + '!important',
104-
'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR,
105-
boxShadow: 'unset'
106-
}
107-
}
108-
109-
if (status === constants.STATUS_MAP.COMPLETED) {
75+
if (statusColor) {
11076
return {
111-
'background-color': smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + '!important',
112-
color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + '!important',
113-
'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR,
77+
'background-color': props.solid || status === constants.STATUS_MAP.DOING ? statusColor : '',
78+
color: (props.solid
79+
&& status !== constants.STATUS_MAP.COMPLETED
80+
|| status === constants.STATUS_MAP.DOING)
81+
? '#FFFFFF' : statusColor,
82+
'border-color': statusColor,
11483
boxShadow: 'unset'
11584
}
11685
}
117-
118-
return {
119-
background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + '!important',
120-
color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + '!important',
121-
'border-color': statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR,
122-
boxShadow: 'unset'
123-
}
12486
}
12587

12688
export const getMileContent =

‎packages/theme-saas/src/milestone/index.less‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
@apply !bg-color-brand;
1717
&.status-completed {
1818
.@{svg-prefix-cls} {
19-
@apply bg-color-brand;
2019
@apply fill-color-icon-inverse;
2120
}
2221
}
@@ -207,7 +206,7 @@
207206
@apply bg-color-text-disabled;
208207

209208
&.@{milestone-prefix-cls}__line-completed-custom {
210-
@apply !bg-color-text-primary;
209+
@apply bg-color-text-disabled;
211210
}
212211
}
213212

@@ -219,8 +218,8 @@
219218
@apply leading-6;
220219
@apply box-border;
221220
@apply border border-solid border-color-border-disabled;
222-
@apply !text-color-text-disabled;
223-
@apply !bg-color-bg-1;
221+
@apply text-color-text-disabled;
222+
@apply bg-color-bg-1;
224223

225224
.tiny-svg {
226225
@apply fill-color-text-disabled;
@@ -245,9 +244,26 @@
245244
}
246245

247246
&.status-doing {
248-
@apply border-color-border-focus;
249-
@apply !bg-color-brand;
250-
@apply !text-color-text-inverse;
247+
@apply bg-color-discrepancy-2;
248+
@apply text-color-text-inverse;
249+
250+
.tiny-svg {
251+
@apply fill-color-icon-inverse;
252+
}
253+
}
254+
255+
&.status-cancel {
256+
@apply border-color-text-disabled;
257+
@apply text-color-text-disabled;
258+
259+
.tiny-svg {
260+
@apply fill-color-icon-inverse;
261+
}
262+
}
263+
264+
&.status-end {
265+
@apply text-color-warning;
266+
@apply border-color-warning;
251267

252268
.tiny-svg {
253269
@apply fill-color-icon-inverse;
@@ -256,8 +272,7 @@
256272

257273
&.status-back {
258274
@apply border-color-error;
259-
@apply !bg-color-error;
260-
@apply !text-color-text-inverse;
275+
@apply text-color-error;
261276

262277
.tiny-svg {
263278
@apply fill-color-icon-inverse;

‎packages/theme/src/milestone/index.less‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
}
4040

4141
&.is-solid {
42+
4243
&::before {
4344
background: var(--tv-Milestone-bg-color);
4445
}
@@ -64,8 +65,6 @@
6465
font-size: var(--tv-Milestone-font-size);
6566
text-align: center;
6667
border-radius: 50%;
67-
color: #191919;
68-
background: #fff;
6968
cursor: pointer;
7069
z-index: 15;
7170
border: var(--tv-Milestone-icon-border-width) solid;
@@ -75,12 +74,26 @@
7574

7675
.@{svg-prefix-cls} {
7776
font-size: var(--tv-Milestone-icon-size);
78-
fill: var(--tv-Milestone-icon-color);
77+
fill: currentColor;
7978
vertical-align: baseline;
8079
}
8180

82-
&.is-completed {
83-
border: var(--tv-Milestone-icon-border-width-completed) solid;
81+
.custom-milestone {
82+
fill: var(--tv-Milestone-status-completed-border-color);
83+
}
84+
85+
&.status-doing {
86+
background-color: var(--tv-Milestone-icon-color);
87+
color: var(--tv-Milestone-doing-text-color);
88+
}
89+
90+
&.is-completed,
91+
&.status-cancel,
92+
&.status-back,
93+
&.status-end {
94+
border: var(--tv-Milestone-icon-border-width-completed) solid var(--tv-Milestone-status-completed-border-color);
95+
background-color: var(--tv-Milestone-status-completed-bg-color);
96+
color: var(--tv-Milestone-icon-color);
8497
}
8598
}
8699

@@ -111,13 +124,14 @@
111124
margin-top: 8px;
112125
overflow: hidden;
113126
text-align: center;
127+
114128
// 标题
115129
&-name {
116130
float: left;
117131
width: 100%;
118-
color: #333;
119132
font-size: var(--tv-Milestone-font-size);
120133
}
134+
121135
// 日期
122136
&-status {
123137
float: left;
@@ -192,4 +206,4 @@
192206
border: solid 1px;
193207
border-radius: 50%;
194208
}
195-
}
209+
}

‎packages/theme/src/milestone/vars.less‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
.inject-Milestone-vars() {
1414
// 默认字号(不含旗子部分)
1515
--tv-Milestone-font-size: var(--tv-font-size-default, 14px);
16+
// doing状态文本色
17+
--tv-Milestone-doing-text-color: var(--tv-color-text-inverse-tint, #fff);
1618

1719
/* 图标节点部分 */
1820
// 实心显示节点光晕背景色
@@ -41,6 +43,10 @@
4143
--tv-Milestone-status-text-color: var(--tv-color-text-weaken, #808080);
4244
// 节点下方日期文本字号
4345
--tv-Milestone-status-font-size: var(--tv-font-size-sm, 12px);
46+
// 已完成节点边框色
47+
--tv-Milestone-status-completed-border-color: var(--tv-color-border-active, #191919);
48+
// 已完成节点背景色
49+
--tv-Milestone-status-completed-bg-color: var(--tv-color-bg-active-secondary, #ffffff);
4450

4551
/* 旗子部分 */
4652
// 旗子宽度
@@ -56,17 +62,17 @@
5662
// 旗子圆角
5763
--tv-Milestone-flag-border-radius: 0 var(--tv-border-radius-lg, 8px) var(--tv-border-radius-lg, 8px) 0;
5864
// 旗子文本色
59-
--tv-Milestone-text-color: var(--tv-color-text, #191919);
65+
--tv-Milestone-text-color: var(--tv-color-text-active-1, #191919);
6066
// 旗子背景色
6167
--tv-Milestone-flag-bg-color: var(--tv-color-bg, #f5f5f5);
6268
// 旗子标题字重
6369
--tv-Milestone-flag-name-font-weight: var(--tv-font-weight-bold, 600);
6470
// 旗子描述文本色
65-
--tv-Milestone-flag-desc-text-color: var(--tv-color-text-secondary, #595959);
71+
--tv-Milestone-flag-desc-text-color: var(--tv-color-text-active-1, #191919);
6672
// 旗子描述字号大小
6773
--tv-Milestone-flag-desc-font-size: var(--tv-font-size-sm, 12px);
6874

6975
/* 旗子线部分 */
7076
// 旗子线背景色
7177
--tv-Milestone-flag-line-bg-color: var(--tv-color-bg, #f5f5f5);
72-
}
78+
}

0 commit comments

Comments
 (0)