@yup/taro-ui 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/components/button/style/index.css +29 -5
  2. package/es/components/checkbox/style/index.css +31 -7
  3. package/es/components/form/style/index.css +30 -6
  4. package/es/components/input/style/index.css +28 -4
  5. package/es/components/radio/style/group.css +25 -1
  6. package/es/components/radio/style/radio.css +29 -5
  7. package/es/components/toast/style/index.css +27 -3
  8. package/es/global.css +7 -4
  9. package/package.json +4 -1
package/es/components/button/style/index.css CHANGED
@@ -1,7 +1,31 @@
1
1
  :root,
2
2
  page {
3
- --border-radius: 8px;
4
- --button-height: 48px;
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
26
+ page {
27
+ --border-radius: calc(8px * var(--ypmini-hd));
28
+ --button-height: calc(48px * var(--ypmini-hd));
5
29
  --default-button-background: #f5f7fc;
6
30
  --default-button-text-color: rgba(0, 0, 0, 0.65);
7
31
  --primary-button-background: var(--yp-color-primary);
@@ -12,10 +36,10 @@ page {
12
36
  --secondary-button-text-color: #ffffff;
13
37
  }
14
38
  .ypmini-taro-button {
15
- padding: 0px 24px;
39
+ padding: 0 48px;
16
40
  border: unset;
17
41
  font-weight: bold;
18
- font-size: 17px;
42
+ font-size: 34px;
19
43
  width: auto;
20
44
  height: var(--button-height);
21
45
  line-height: var(--button-height);
@@ -64,5 +88,5 @@ page {
64
88
  .ypmini-taro-button-icon {
65
89
  display: flex;
66
90
  align-items: center;
67
- margin-right: 4px;
91
+ margin-right: 8px;
68
92
  }
package/es/components/checkbox/style/index.css CHANGED
@@ -1,20 +1,44 @@
1
1
  :root,
2
2
  page {
3
- --checkbox-button-font-size: 17px;
4
- --checkbox-button-border-radius: 8px;
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
26
+ page {
27
+ --checkbox-button-font-size: calc(17px * var(--ypmini-hd));
28
+ --checkbox-button-border-radius: calc(8px * var(--ypmini-hd));
5
29
  --checkbox-button-background-color: #f5f7fc;
6
30
  --checkbox-button-text-color: #000000d9;
7
31
  --checkbox-button-checked-background-color: #e0f3ff;
8
32
  --checkbox-button-checked-text-color: var(--yp-color-primary);
9
33
  --checkbox-button-checked-border-color: var(--yp-color-primary);
10
- --checkbox-button-height: 52px;
34
+ --checkbox-button-height: calc(52px * var(--ypmini-hd));
11
35
  }
12
36
  .ypmini-checkbox-button {
13
37
  background-color: var(--checkbox-button-background-color);
14
38
  color: var(--checkbox-button-text-color);
15
39
  font-size: var(--checkbox-button-font-size);
16
40
  text-align: center;
17
- padding: 0px 16px;
41
+ padding: 0px 32px;
18
42
  height: var(--checkbox-button-height);
19
43
  line-height: var(--checkbox-button-height);
20
44
  box-sizing: border-box;
@@ -24,7 +48,7 @@ page {
24
48
  background-color: var(--checkbox-button-checked-background-color);
25
49
  color: var(--checkbox-button-checked-text-color);
26
50
  border-color: var(--checkbox-button-checked-border-color);
27
- border-width: 1px;
51
+ border-width: 2px;
28
52
  border-style: solid;
29
53
  }
30
54
  .ypmini-checkbox-group {
@@ -37,10 +61,10 @@ page {
37
61
  margin-top: 0px;
38
62
  }
39
63
  .ypmini-checkbox-group.ypmini-checkbox-group-block .ypmini-checkbox:not(:first-child) {
40
- margin-top: 12px;
64
+ margin-top: 24px;
41
65
  margin-left: 0px;
42
66
  }
43
67
  .ypmini-checkbox-group .ypmini-checkbox:not(:first-child) {
44
- margin-left: 12px;
68
+ margin-left: 24px;
45
69
  margin-top: 0px;
46
70
  }
package/es/components/form/style/index.css CHANGED
@@ -1,13 +1,37 @@
1
1
  :root,
2
2
  page {
3
- --form-item-label-width: 60px;
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
26
+ page {
27
+ --form-item-label-width: calc(60px * var(--ypmini-hd));
4
28
  }
5
29
  .ypmini-form.ypmini-form-vertical .ypmini-form-item .yp-form-item-label {
6
- margin-bottom: 12px;
7
- padding-top: 16px;
30
+ margin-bottom: 24px;
31
+ padding-top: 32px;
8
32
  }
9
33
  .ypmini-form.ypmini-form-vertical .ypmini-form-item:not(:first-child) {
10
- margin-top: 16px;
34
+ margin-top: 32px;
11
35
  }
12
36
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item {
13
37
  display: flex;
@@ -21,7 +45,7 @@ page {
21
45
  flex: 1;
22
46
  }
23
47
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item:not(:first-child) {
24
- margin-top: 16px;
48
+ margin-top: 32px;
25
49
  }
26
50
  .ypmini-form-item-required .yp-form-item-label::before {
27
51
  content: '*';
@@ -30,5 +54,5 @@ page {
30
54
  .ypmini-form-item .yp-form-item-label {
31
55
  color: #000000d9;
32
56
  font-weight: bold;
33
- font-size: 19px;
57
+ font-size: 38px;
34
58
  }
package/es/components/input/style/index.css CHANGED
@@ -1,4 +1,28 @@
1
1
  :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
2
26
  page {
3
27
  --input-placeholder-color: rgba(0, 0, 0, 0.25);
4
28
  --input-text-color: var(--yp-color-text);
@@ -7,9 +31,9 @@ page {
7
31
  .ypmini-taro-input-wrapper {
8
32
  display: flex;
9
33
  font-size: var(--input-font-size);
10
- padding: 16px 12px;
11
- border-radius: 8px;
12
- border: 1px solid #e9edf3;
34
+ padding: 32px 24px;
35
+ border-radius: 16px;
36
+ border: 2px solid #e9edf3;
13
37
  box-sizing: border-box;
14
38
  }
15
39
  .ypmini-taro-input {
@@ -22,7 +46,7 @@ page {
22
46
  }
23
47
  .ypmini-taro-input-count {
24
48
  color: rgba(0, 0, 0, 0.45);
25
- font-size: 15px;
49
+ font-size: 30px;
26
50
  display: flex;
27
51
  align-items: center;
28
52
  }
package/es/components/radio/style/group.css CHANGED
@@ -1,3 +1,27 @@
1
+ :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
1
25
  .ypmini-radio-group {
2
26
  display: flex;
3
27
  }
@@ -8,5 +32,5 @@
8
32
  flex: 1;
9
33
  }
10
34
  .ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
11
- margin-left: 12px;
35
+ margin-left: 24px;
12
36
  }
package/es/components/radio/style/radio.css CHANGED
@@ -1,20 +1,44 @@
1
1
  :root,
2
2
  page {
3
- --radio-button-font-size: 17px;
4
- --radio-button-border-radius: 8px;
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
26
+ page {
27
+ --radio-button-font-size: calc(17px * var(--ypmini-hd));
28
+ --radio-button-border-radius: calc(8px * var(--ypmini-hd));
5
29
  --radio-button-background-color: #f5f7fc;
6
30
  --radio-button-text-color: #000000d9;
7
31
  --radio-button-checked-background-color: #e0f3ff;
8
32
  --radio-button-checked-text-color: var(--yp-color-primary);
9
33
  --radio-button-checked-border-color: var(--yp-color-primary);
10
- --radio-button-height: 52px;
34
+ --radio-button-height: calc(52px * var(--ypmini-hd));
11
35
  }
12
36
  .ypmini-taro-radio-button {
13
37
  background-color: var(--radio-button-background-color);
14
38
  color: var(--radio-button-text-color);
15
39
  font-size: var(--radio-button-font-size);
16
40
  text-align: center;
17
- padding: 0px 16px;
41
+ padding: 0px 32px;
18
42
  height: var(--radio-button-height);
19
43
  line-height: var(--radio-button-height);
20
44
  box-sizing: border-box;
@@ -24,6 +48,6 @@ page {
24
48
  background-color: var(--radio-button-checked-background-color);
25
49
  color: var(--radio-button-checked-text-color);
26
50
  border-color: var(--radio-button-checked-border-color);
27
- border-width: 1px;
51
+ border-width: 2px;
28
52
  border-style: solid;
29
53
  }
package/es/components/toast/style/index.css CHANGED
@@ -1,4 +1,28 @@
1
1
  :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
7
+ --yp-color-primary: #0092ff;
8
+ --yp-color-text: rgba(0, 0, 0, 0.85);
9
+ --yp-color-text-light: #0092ff;
10
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
11
+ --yp-border-color: #e9edf3;
12
+ --yp-color-text-primary: #333;
13
+ --yp-color-text-link: var(--yp-color-primary);
14
+ --yp-color-text-secondary: #666;
15
+ --yp-color-text-disabled: #ccc;
16
+ --yp-color-text-placeholder: #999;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
18
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
19
+ --yp-radio-button-checked-color: var(--yp-color-primary);
20
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
21
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
24
+ }
25
+ :root,
2
26
  page {
3
27
  --toast-z-index: 9999;
4
28
  }
@@ -9,8 +33,8 @@ page {
9
33
  transform: translate(-50%, -50%);
10
34
  background: rgba(0, 0, 0, 0.7);
11
35
  color: #fff;
12
- padding: 12px;
13
- border-radius: 4px;
36
+ padding: 24px;
37
+ border-radius: 8px;
14
38
  display: flex;
15
39
  align-items: center;
16
40
  z-index: var(--toast-z-index);
@@ -19,5 +43,5 @@ page {
19
43
  word-break: break-word;
20
44
  }
21
45
  .ypmini-toast-content {
22
- font-size: 14px;
46
+ font-size: 28px;
23
47
  }
package/es/global.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
2
6
  page {
3
7
  --yp-color-primary: #0092ff;
4
8
  --yp-color-text: rgba(0, 0, 0, 0.85);
@@ -10,12 +14,11 @@ page {
10
14
  --yp-color-text-secondary: #666;
11
15
  --yp-color-text-disabled: #ccc;
12
16
  --yp-color-text-placeholder: #999;
13
- --yp-font-size-default: 17px;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
14
18
  --yp-radio-circle-checked-color: var(--yp-color-primary);
15
19
  --yp-radio-button-checked-color: var(--yp-color-primary);
16
20
  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
17
21
  --yp-checkbox-button-checked-color: var(--yp-color-primary);
18
- --yp-border-radius-base: 4px;
19
- --yp-border-radius-button: 8px;
20
- --yp-space-horizontal-base: 12px;
22
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
23
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
21
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yup/taro-ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "鱼泡 Taro UI组件库",
5
5
  "type": "module",
6
6
  "main": "es/index.js",
@@ -119,5 +119,8 @@
119
119
  "@yup/taro-checkbox": "^0.9.1",
120
120
  "@yup/taro-form": "^0.9.1",
121
121
  "@yup/taro-radio": "^0.9.1"
122
+ },
123
+ "overrides": {
124
+ "minimatch": "^5.1.0"
122
125
  }
123
126
  }