@yup/taro-ui 0.0.5 → 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 +31 -6
  2. package/es/components/checkbox/style/index.css +33 -8
  3. package/es/components/form/style/index.css +32 -7
  4. package/es/components/input/style/index.css +30 -5
  5. package/es/components/radio/style/group.css +25 -1
  6. package/es/components/radio/style/radio.css +31 -6
  7. package/es/components/toast/style/index.css +29 -4
  8. package/es/global.css +9 -5
  9. package/package.json +4 -1
package/es/components/button/style/index.css CHANGED
@@ -1,6 +1,31 @@
1
- body {
2
- --border-radius: 8px;
3
- --button-height: 48px;
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,
26
+ page {
27
+ --border-radius: calc(8px * var(--ypmini-hd));
28
+ --button-height: calc(48px * var(--ypmini-hd));
4
29
  --default-button-background: #f5f7fc;
5
30
  --default-button-text-color: rgba(0, 0, 0, 0.65);
6
31
  --primary-button-background: var(--yp-color-primary);
@@ -11,10 +36,10 @@ body {
11
36
  --secondary-button-text-color: #ffffff;
12
37
  }
13
38
  .ypmini-taro-button {
14
- padding: 0px 24px;
39
+ padding: 0 48px;
15
40
  border: unset;
16
41
  font-weight: bold;
17
- font-size: 17px;
42
+ font-size: 34px;
18
43
  width: auto;
19
44
  height: var(--button-height);
20
45
  line-height: var(--button-height);
@@ -63,5 +88,5 @@ body {
63
88
  .ypmini-taro-button-icon {
64
89
  display: flex;
65
90
  align-items: center;
66
- margin-right: 4px;
91
+ margin-right: 8px;
67
92
  }
package/es/components/checkbox/style/index.css CHANGED
@@ -1,19 +1,44 @@
1
- body {
2
- --checkbox-button-font-size: 17px;
3
- --checkbox-button-border-radius: 8px;
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,
26
+ page {
27
+ --checkbox-button-font-size: calc(17px * var(--ypmini-hd));
28
+ --checkbox-button-border-radius: calc(8px * var(--ypmini-hd));
4
29
  --checkbox-button-background-color: #f5f7fc;
5
30
  --checkbox-button-text-color: #000000d9;
6
31
  --checkbox-button-checked-background-color: #e0f3ff;
7
32
  --checkbox-button-checked-text-color: var(--yp-color-primary);
8
33
  --checkbox-button-checked-border-color: var(--yp-color-primary);
9
- --checkbox-button-height: 52px;
34
+ --checkbox-button-height: calc(52px * var(--ypmini-hd));
10
35
  }
11
36
  .ypmini-checkbox-button {
12
37
  background-color: var(--checkbox-button-background-color);
13
38
  color: var(--checkbox-button-text-color);
14
39
  font-size: var(--checkbox-button-font-size);
15
40
  text-align: center;
16
- padding: 0px 16px;
41
+ padding: 0px 32px;
17
42
  height: var(--checkbox-button-height);
18
43
  line-height: var(--checkbox-button-height);
19
44
  box-sizing: border-box;
@@ -23,7 +48,7 @@ body {
23
48
  background-color: var(--checkbox-button-checked-background-color);
24
49
  color: var(--checkbox-button-checked-text-color);
25
50
  border-color: var(--checkbox-button-checked-border-color);
26
- border-width: 1px;
51
+ border-width: 2px;
27
52
  border-style: solid;
28
53
  }
29
54
  .ypmini-checkbox-group {
@@ -36,10 +61,10 @@ body {
36
61
  margin-top: 0px;
37
62
  }
38
63
  .ypmini-checkbox-group.ypmini-checkbox-group-block .ypmini-checkbox:not(:first-child) {
39
- margin-top: 12px;
64
+ margin-top: 24px;
40
65
  margin-left: 0px;
41
66
  }
42
67
  .ypmini-checkbox-group .ypmini-checkbox:not(:first-child) {
43
- margin-left: 12px;
68
+ margin-left: 24px;
44
69
  margin-top: 0px;
45
70
  }
package/es/components/form/style/index.css CHANGED
@@ -1,12 +1,37 @@
1
- body {
2
- --form-item-label-width: 60px;
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,
26
+ page {
27
+ --form-item-label-width: calc(60px * var(--ypmini-hd));
3
28
  }
4
29
  .ypmini-form.ypmini-form-vertical .ypmini-form-item .yp-form-item-label {
5
- margin-bottom: 12px;
6
- padding-top: 16px;
30
+ margin-bottom: 24px;
31
+ padding-top: 32px;
7
32
  }
8
33
  .ypmini-form.ypmini-form-vertical .ypmini-form-item:not(:first-child) {
9
- margin-top: 16px;
34
+ margin-top: 32px;
10
35
  }
11
36
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item {
12
37
  display: flex;
@@ -20,7 +45,7 @@ body {
20
45
  flex: 1;
21
46
  }
22
47
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item:not(:first-child) {
23
- margin-top: 16px;
48
+ margin-top: 32px;
24
49
  }
25
50
  .ypmini-form-item-required .yp-form-item-label::before {
26
51
  content: '*';
@@ -29,5 +54,5 @@ body {
29
54
  .ypmini-form-item .yp-form-item-label {
30
55
  color: #000000d9;
31
56
  font-weight: bold;
32
- font-size: 19px;
57
+ font-size: 38px;
33
58
  }
package/es/components/input/style/index.css CHANGED
@@ -1,4 +1,29 @@
1
- body {
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,
26
+ page {
2
27
  --input-placeholder-color: rgba(0, 0, 0, 0.25);
3
28
  --input-text-color: var(--yp-color-text);
4
29
  --input-font-size: var(--yp-font-size-default);
@@ -6,9 +31,9 @@ body {
6
31
  .ypmini-taro-input-wrapper {
7
32
  display: flex;
8
33
  font-size: var(--input-font-size);
9
- padding: 16px 12px;
10
- border-radius: 8px;
11
- border: 1px solid #e9edf3;
34
+ padding: 32px 24px;
35
+ border-radius: 16px;
36
+ border: 2px solid #e9edf3;
12
37
  box-sizing: border-box;
13
38
  }
14
39
  .ypmini-taro-input {
@@ -21,7 +46,7 @@ body {
21
46
  }
22
47
  .ypmini-taro-input-count {
23
48
  color: rgba(0, 0, 0, 0.45);
24
- font-size: 15px;
49
+ font-size: 30px;
25
50
  display: flex;
26
51
  align-items: center;
27
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,19 +1,44 @@
1
- body {
2
- --radio-button-font-size: 17px;
3
- --radio-button-border-radius: 8px;
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,
26
+ page {
27
+ --radio-button-font-size: calc(17px * var(--ypmini-hd));
28
+ --radio-button-border-radius: calc(8px * var(--ypmini-hd));
4
29
  --radio-button-background-color: #f5f7fc;
5
30
  --radio-button-text-color: #000000d9;
6
31
  --radio-button-checked-background-color: #e0f3ff;
7
32
  --radio-button-checked-text-color: var(--yp-color-primary);
8
33
  --radio-button-checked-border-color: var(--yp-color-primary);
9
- --radio-button-height: 52px;
34
+ --radio-button-height: calc(52px * var(--ypmini-hd));
10
35
  }
11
36
  .ypmini-taro-radio-button {
12
37
  background-color: var(--radio-button-background-color);
13
38
  color: var(--radio-button-text-color);
14
39
  font-size: var(--radio-button-font-size);
15
40
  text-align: center;
16
- padding: 0px 16px;
41
+ padding: 0px 32px;
17
42
  height: var(--radio-button-height);
18
43
  line-height: var(--radio-button-height);
19
44
  box-sizing: border-box;
@@ -23,6 +48,6 @@ body {
23
48
  background-color: var(--radio-button-checked-background-color);
24
49
  color: var(--radio-button-checked-text-color);
25
50
  border-color: var(--radio-button-checked-border-color);
26
- border-width: 1px;
51
+ border-width: 2px;
27
52
  border-style: solid;
28
53
  }
package/es/components/toast/style/index.css CHANGED
@@ -1,4 +1,29 @@
1
- body {
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,
26
+ page {
2
27
  --toast-z-index: 9999;
3
28
  }
4
29
  .ypmini-toast-container {
@@ -8,8 +33,8 @@ body {
8
33
  transform: translate(-50%, -50%);
9
34
  background: rgba(0, 0, 0, 0.7);
10
35
  color: #fff;
11
- padding: 12px;
12
- border-radius: 4px;
36
+ padding: 24px;
37
+ border-radius: 8px;
13
38
  display: flex;
14
39
  align-items: center;
15
40
  z-index: var(--toast-z-index);
@@ -18,5 +43,5 @@ body {
18
43
  word-break: break-word;
19
44
  }
20
45
  .ypmini-toast-content {
21
- font-size: 14px;
46
+ font-size: 28px;
22
47
  }
package/es/global.css CHANGED
@@ -1,4 +1,9 @@
1
- body {
1
+ :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ }
5
+ :root,
6
+ page {
2
7
  --yp-color-primary: #0092ff;
3
8
  --yp-color-text: rgba(0, 0, 0, 0.85);
4
9
  --yp-color-text-light: #0092ff;
@@ -9,12 +14,11 @@ body {
9
14
  --yp-color-text-secondary: #666;
10
15
  --yp-color-text-disabled: #ccc;
11
16
  --yp-color-text-placeholder: #999;
12
- --yp-font-size-default: 17px;
17
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
13
18
  --yp-radio-circle-checked-color: var(--yp-color-primary);
14
19
  --yp-radio-button-checked-color: var(--yp-color-primary);
15
20
  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
16
21
  --yp-checkbox-button-checked-color: var(--yp-color-primary);
17
- --yp-border-radius-base: 4px;
18
- --yp-border-radius-button: 8px;
19
- --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));
20
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yup/taro-ui",
3
- "version": "0.0.5",
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
  }