Skip to content

Commit 98246dd

Browse files
zzcrzzcr
authored
refactor(theme): [color-picker] refactor color-picker theme vars (#2243)
* refactor(theme): [color-picker] refactor color-picker theme vars * fix: fix e2e error
1 parent 7f5f4ac commit 98246dd

File tree

7 files changed

+138
-301
lines changed

7 files changed

+138
-301
lines changed

‎examples/sites/demos/pc/app/color-picker/size.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
33
test('测试尺寸', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('color-picker#size')
6-
await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '64px')
7-
await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '48px')
8-
await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '36px')
6+
await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '48px')
7+
await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '40px')
8+
await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '28px')
99
await expect(page.locator('.tiny-color-picker.tiny-color-picker--mini')).toHaveCSS('width', '24px')
1010
})

‎packages/theme/src/color-picker/index.less‎

Lines changed: 14 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
55

66
.@{color-picker-prefix-cls} {
7-
.component-css-vars-color-picker();
7+
.inject-ColorPicker-vars();
88

99
position: relative;
1010
width: 32px;
1111
height: 32px;
12-
border-radius: var(--ti-color-picker-border-radius-sm);
13-
border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
12+
border-radius: var(--tv-ColorPicker-border-radius-xs);
13+
border: 1px solid var(--tv-ColorPicker-border-color);
1414
box-sizing: content-box;
15-
padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
15+
padding: var(--tv-ColorPicker-padding-y) var(--tv-ColorPicker-padding-x);
1616
cursor: pointer;
1717

1818
&__inner {
@@ -21,125 +21,26 @@
2121
height: 100%;
2222
align-items: center;
2323
justify-content: center;
24-
border-radius: var(--ti-color-picker-border-radius-sm);
25-
background: var(--ti-color-picker-bg-color);
24+
border-radius: var(--tv-ColorPicker-border-radius-xs);
2625
}
2726

28-
&__wrapper {
29-
display: flex;
30-
flex-direction: column;
31-
position: absolute;
32-
max-width: 300px;
33-
z-index: var(--ti-color-picker__select__wrapper-zindex);
34-
margin-top: var(--ti-color-picker-spacing);
35-
background: var(--ti-color-picker__wrapper-bg);
36-
gap: var(--ti-color-picker-spacing);
37-
padding: var(--ti-color-picker-spacing-2x);
38-
box-shadow: var(--ti-color-picker-shadow);
39-
40-
&__tools {
41-
display: flex;
42-
43-
.tiny-input {
44-
flex: 1 0 0;
45-
}
46-
47-
.tiny-button-group {
48-
flex: 0 0 auto;
49-
}
50-
}
51-
52-
&__inner {
53-
display: flex;
54-
gap: 12px;
55-
&__color-select {
56-
width: 280px;
57-
height: 180px;
58-
position: relative;
59-
60-
.white {
61-
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
62-
}
63-
64-
.black {
65-
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
66-
}
67-
68-
.white,
69-
.black {
70-
position: absolute;
71-
inset: 0;
72-
}
73-
74-
.cursor {
75-
position: absolute;
76-
width: 12px;
77-
height: 12px;
78-
border-radius: 100%;
79-
border: 1px solid white;
80-
background: rgba(0, 0, 0, .15);
81-
box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
82-
}
83-
}
84-
85-
&__hue-select {
86-
position: relative;
87-
width: 18px;
88-
border-radius: var(--ti-color-picker-border-radius-xs);
89-
background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
90-
91-
div {
92-
position: absolute;
93-
top: 0;
94-
width: 100%;
95-
height: 4px;
96-
background: #fff;
97-
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
98-
border-radius: 1px;
99-
}
100-
}
101-
}
102-
103-
&__alpha {
104-
position: relative;
105-
width: 100%;
106-
height: 20px;
107-
border-radius: var(--ti-color-picker-border-radius-xs);
108-
margin-top: var(--ti-color-picker-spacing-2x);
109-
&__slider {
110-
width: 100%;
111-
height: 100%;
112-
}
113-
114-
&__thumb {
115-
width: 4px;
116-
height: 100%;
117-
position: absolute;
118-
top: 0;
119-
left: 0;
120-
background: #fff;
121-
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
122-
border-radius: 1px;
123-
}
124-
}
125-
}
12627
&--large {
127-
width: var(--ti-color-picker-size-large-width);
128-
height: var(--ti-color-picker-size-large-height);
28+
width: var(--tv-ColorPicker-size-large-width);
29+
height: var(--tv-ColorPicker-size-large-height);
12930
}
13031

13132
&--small {
132-
width: var(--ti-color-picker-size-small-width);
133-
height: var(--ti-color-picker-size-small-height);
33+
width: var(--tv-ColorPicker-size-small-width);
34+
height: var(--tv-ColorPicker-size-small-height);
13435
}
13536

13637
&--medium {
137-
width: var(--ti-color-picker-size-medium-width);
138-
height: var(--ti-color-picker-size-medium-height);
38+
width: var(--tv-ColorPicker-size-medium-width);
39+
height: var(--tv-ColorPicker-size-medium-height);
13940
}
14041

14142
&--mini {
142-
width: var(--ti-color-picker-size-mini-width);
143-
height: var(--ti-color-picker-size-mini-height);
43+
width: var(--tv-ColorPicker-size-mini-width);
44+
height: var(--tv-ColorPicker-size-mini-height);
14445
}
145-
}
46+
}

‎packages/theme/src/color-picker/vars.less‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,34 @@
1-
.component-css-vars-color-picker() {
2-
// 默认按钮背景色(hide)
3-
--ti-color-picker-bg-color: var(--ti-common-color-transparent, transparent);
1+
.inject-ColorPicker-vars() {
42
// 按钮边框色
5-
--ti-color-picker-border-color: var(--ti-base-color-common-2, #808080);
6-
// 按钮边框厚度
7-
--ti-color-picker-border-weight: var(--ti-common-border-weight-normal, 1px);
8-
// 没用(hide)
9-
--ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal, 6px);
3+
--tv-ColorPicker-border-color: var(--tv-color-border-ghost);
104
// 按钮边框圆角
11-
--ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1, 2px);
12-
// 没用(hide)
13-
--ti-color-picker-border-radius: var(--ti-common-border-radius-2, 4px);
5+
--tv-ColorPicker-border-radius-md: var(--tv-border-radius-md);
6+
// 按钮边框小圆角
7+
--tv-ColorPicker-border-radius-xs: var(--tv-border-radius-xs);
148
// 按钮垂直内边距
15-
--ti-color-picker-padding-vertical: var(--ti-common-space-base, 4px);
9+
--tv-ColorPicker-padding-y: var(--tv-space-sm);
1610
// 按钮水平内边距
17-
--ti-color-picker-padding-horizontal: var(--ti-common-space-base, 4px);
18-
// 没用(hide)
19-
--ti-color-picker-spacing-2x: var(--ti-common-space-2x, 8px);
20-
// 没用(hide)
21-
--ti-color-picker-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
22-
// 没用(hide)
23-
--ti-color-picker__select__wrapper-zindex: 1000;
11+
--tv-ColorPicker-padding-x: var(--tv-space-sm);
2412
// 没用(hide)
25-
--ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f0f0f0);
13+
--tv-ColorPicker-spacing-2x: var(--tv-space-md);
2614

2715
// 超大尺寸高度
28-
--ti-color-picker-size-large-height: var(--ti-common-size-16x, 64px);
16+
--tv-ColorPicker-size-large-height: var(--tv-size-height-xl);
2917
// 超大尺寸宽度
30-
--ti-color-picker-size-large-width: var(--ti-common-size-16x, 64px);
18+
--tv-ColorPicker-size-large-width: var(--tv-size-height-xl);
3119

3220
// 中等尺寸高度
33-
--ti-color-picker-size-medium-height: var(--ti-common-size-12x, 48px);
21+
--tv-ColorPicker-size-medium-height: var(--tv-size-height-lg);
3422
// 中等尺寸最小宽度
35-
--ti-color-picker-size-medium-width: var(--ti-common-size-12x, 48px);
23+
--tv-ColorPicker-size-medium-width: var(--tv-size-height-lg);
3624

3725
// 小型高度
38-
--ti-color-picker-size-small-height: var(--ti-common-size-9x, 36px);
26+
--tv-ColorPicker-size-small-height: var(--tv-size-height-sm);
3927
// 小尺寸宽度
40-
--ti-color-picker-size-small-width: var(--ti-common-size-9x, 36px);
28+
--tv-ColorPicker-size-small-width: var(--tv-size-height-sm);
4129

4230
// 迷你尺寸按钮高度
43-
--ti-color-picker-size-mini-height: var(--ti-common-size-6x, 24px);
31+
--tv-ColorPicker-size-mini-height: var(--tv-size-height-xs);
4432
// 迷你尺寸宽度
45-
--ti-color-picker-size-mini-width: var(--ti-common-size-6x, 24px);
46-
}
33+
--tv-ColorPicker-size-mini-width: var(--tv-size-height-xs);
34+
}

0 commit comments

Comments
 (0)