@mirai/ui 1.1.6 → 1.1.8

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 (10) hide show
  1. package/README.md +11 -6
  2. package/build/components/Button/Button.module.css +11 -13
  3. package/build/components/InputNumber/InputNumber.module.css +1 -1
  4. package/build/components/InputOption/InputOption.module.css +2 -2
  5. package/build/components/InputPhone/InputPhone.module.css +1 -1
  6. package/build/components/InputText/InputText.module.css +1 -1
  7. package/build/primitives/Checkbox/Checkbox.module.css +4 -2
  8. package/build/primitives/Radio/Radio.module.css +38 -4
  9. package/build/theme/default.theme.css +11 -6
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -470,19 +470,23 @@ const MyComponent = (props) => {
470
470
 
471
471
  ```css
472
472
  --mirai-ui-button-background: var(--mirai-ui-accent);
473
- --mirai-ui-button-busy-width: 0%;
474
473
  --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
474
+ --mirai-ui-button-busy-width: 0%;
475
475
  --mirai-ui-button-color: var(--mirai-ui-base);
476
476
  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
477
477
  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
478
478
  --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
479
+ --mirai-ui-button-focus-color: var(--mirai-ui-accent-dark);
480
+ --mirai-ui-button-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border);
479
481
  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
480
- --mirai-ui-button-secondary-background: var(--mirai-ui-base);
481
- --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
482
- --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
483
482
  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
483
+ --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
484
484
  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
485
+ --mirai-ui-button-secondary-background: var(--mirai-ui-base);
486
+ --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
485
487
  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
488
+ --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
489
+ --mirai-ui-button-transparent-color: var(--mirai-ui-content);
486
490
  ```
487
491
 
488
492
  ### Calendar
@@ -759,8 +763,8 @@ const MyComponent = () => {
759
763
 
760
764
  ```css
761
765
  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
762
- --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
763
- --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
766
+ --mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
767
+ --mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
764
768
  ```
765
769
 
766
770
  ### InputPhone
@@ -909,6 +913,7 @@ const MyComponent = (props) => {
909
913
  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
910
914
  --mirai-ui-input-text-error: var(--mirai-ui-error);
911
915
  --mirai-ui-input-text-focus: var(--mirai-ui-content);
916
+ --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
912
917
  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
913
918
  --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
914
919
  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
package/build/components/Button/Button.module.css CHANGED
@@ -30,30 +30,28 @@ button.secondary {
30
30
  color: var(--mirai-ui-button-background);
31
31
  }
32
32
 
33
- button.button:not(:disabled).secondary:focus,
33
+ button.button:not(:disabled).secondary:active,
34
34
  button.button:not(:disabled).secondary:hover {
35
- box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-focus-color), var(--mirai-ui-focus-shadow);
36
- color: var(--mirai-ui-focus-color);
35
+ box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-focus-color),
36
+ var(--mirai-ui-button-focus-shadow);
37
+ color: var(--mirai-ui-button-focus-color);
37
38
  }
38
39
 
39
40
  button.transparent {
40
41
  background-color: transparent;
41
- color: var(--mirai-ui-content);
42
+ color: var(--mirai-ui-button-transparent-color);
42
43
  }
43
44
 
44
- button.transparent:not(:disabled):focus,
45
+ button.transparent:not(:disabled):active,
45
46
  button.transparent:not(:disabled):hover {
46
- background-color: var(--mirai-ui-content-background);
47
+ background-color: var(--mirai-ui-button-transparent-background-active);
48
+ color: var(--mirai-ui-button-focus-color);
47
49
  }
48
50
 
49
- button.button:not(:disabled):not(.secondary):not(.transparent):focus,
51
+ button.button:not(:disabled):not(.secondary):not(.transparent):active,
50
52
  button.button:not(:disabled):not(.secondary):not(.transparent):hover {
51
- background-color: var(--mirai-ui-focus-color);
52
- }
53
-
54
- button.button:not(:disabled):focus,
55
- button.button:not(:disabled):hover {
56
- box-shadow: var(--mirai-ui-focus-shadow);
53
+ box-shadow: var(--mirai-ui-button-focus-shadow);
54
+ background-color: var(--mirai-ui-button-focus-color);
57
55
  }
58
56
 
59
57
  /* -- sizing */
package/build/components/InputNumber/InputNumber.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .inputNumber {
2
- margin-bottom: var(--mirai-ui-input-text-padding-y);
2
+ margin-bottom: var(--mirai-ui-input-text-gap);
3
3
  }
4
4
 
5
5
  .texts {
package/build/components/InputOption/InputOption.module.css CHANGED
@@ -2,8 +2,8 @@
2
2
  align-items: center;
3
3
  display: flex;
4
4
  flex-direction: var(--mirai-ui-row-direction);
5
- gap: var(--mirai-ui-input-option-gap);
6
- margin-bottom: var(--mirai-ui-input-option-padding-y);
5
+ gap: var(--mirai-ui-input-option-gap-x);
6
+ margin-bottom: var(--mirai-ui-input-option-gap-y);
7
7
  position: relative;
8
8
  width: 100%;
9
9
  }
package/build/components/InputPhone/InputPhone.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- margin-bottom: var(--mirai-ui-input-text-padding-y);
2
+ margin-bottom: var(--mirai-ui-input-text-gap);
3
3
  }
4
4
 
5
5
  .prefix {
package/build/components/InputText/InputText.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .inputContainer {
2
2
  flex: 1;
3
- margin-bottom: var(--mirai-ui-input-text-padding-y);
3
+ margin-bottom: var(--mirai-ui-input-text-gap);
4
4
  position: relative;
5
5
  }
6
6
 
package/build/primitives/Checkbox/Checkbox.module.css CHANGED
@@ -55,7 +55,8 @@
55
55
  top: 0;
56
56
  }
57
57
 
58
- @media only screen and (max-width: 431px) {
58
+ /* S */
59
+ @media only screen and (max-width: 430px) {
59
60
  .checkbox {
60
61
  height: var(--mirai-ui-checkbox-size-mobile);
61
62
  width: var(--mirai-ui-checkbox-size-mobile);
@@ -67,7 +68,8 @@
67
68
  }
68
69
  }
69
70
 
70
- @media only screen and (min-width: 430px) {
71
+ /* M & L */
72
+ @media only screen and (min-width: 431px) {
71
73
  .checkbox {
72
74
  height: var(--mirai-ui-checkbox-size);
73
75
  width: var(--mirai-ui-checkbox-size);
package/build/primitives/Radio/Radio.module.css CHANGED
@@ -1,7 +1,5 @@
1
1
  .radio {
2
2
  position: relative;
3
- height: var(--mirai-ui-radio-size);
4
- width: var(--mirai-ui-radio-size);
5
3
  }
6
4
 
7
5
  .radio input {
@@ -10,14 +8,12 @@
10
8
  border-radius: 50%;
11
9
  box-sizing: border-box;
12
10
  cursor: pointer;
13
- height: var(--mirai-ui-radio-size);
14
11
  margin: 0;
15
12
  outline: none;
16
13
  user-select: none;
17
14
  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
18
15
  border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
19
16
  box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
20
- width: var(--mirai-ui-radio-size);
21
17
 
22
18
  appearance: none;
23
19
  -webkit-appearance: none;
@@ -74,3 +70,41 @@
74
70
  margin-right: 0;
75
71
  top: 0;
76
72
  }
73
+
74
+ /* S */
75
+ @media only screen and (max-width: 430px) {
76
+ .radio {
77
+ height: var(--mirai-ui-radio-size-mobile);
78
+ width: var(--mirai-ui-radio-size-mobile);
79
+ }
80
+
81
+ .radio input {
82
+ height: var(--mirai-ui-radio-size-mobile);
83
+ width: var(--mirai-ui-radio-size-mobile);
84
+ }
85
+
86
+ .radio .checkmark {
87
+ margin: calc(var(--mirai-ui-radio-size-mobile) / 4);
88
+ height: calc(var(--mirai-ui-radio-size-mobile) / 2);
89
+ width: calc(var(--mirai-ui-radio-size-mobile) / 2);
90
+ }
91
+ }
92
+
93
+ /* M & L */
94
+ @media only screen and (min-width: 431px) {
95
+ .radio {
96
+ height: var(--mirai-ui-radio-size);
97
+ width: var(--mirai-ui-radio-size);
98
+ }
99
+
100
+ .radio input {
101
+ height: var(--mirai-ui-radio-size);
102
+ width: var(--mirai-ui-radio-size);
103
+ }
104
+
105
+ .radio .checkmark {
106
+ margin: calc(var(--mirai-ui-radio-size) / 4);
107
+ height: calc(var(--mirai-ui-radio-size) / 2);
108
+ width: calc(var(--mirai-ui-radio-size) / 2);
109
+ }
110
+ }
package/build/theme/default.theme.css CHANGED
@@ -167,19 +167,23 @@
167
167
 
168
168
  /* Button */
169
169
  --mirai-ui-button-background: var(--mirai-ui-accent);
170
- --mirai-ui-button-busy-width: 0%;
171
170
  --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
171
+ --mirai-ui-button-busy-width: 0%;
172
172
  --mirai-ui-button-color: var(--mirai-ui-base);
173
173
  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
174
174
  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
175
175
  --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
176
+ --mirai-ui-button-focus-color: var(--mirai-ui-accent-dark);
177
+ --mirai-ui-button-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border);
176
178
  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
177
- --mirai-ui-button-secondary-background: var(--mirai-ui-base);
178
- --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
179
- --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
180
179
  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
180
+ --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
181
181
  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
182
+ --mirai-ui-button-secondary-background: var(--mirai-ui-base);
183
+ --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
182
184
  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
185
+ --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
186
+ --mirai-ui-button-transparent-color: var(--mirai-ui-content);
183
187
 
184
188
  /* Calendar */
185
189
  --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
@@ -202,8 +206,8 @@
202
206
 
203
207
  /* InputOption */
204
208
  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
205
- --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
206
- --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
209
+ --mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
210
+ --mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
207
211
 
208
212
  /* InputSelect */
209
213
 
@@ -212,6 +216,7 @@
212
216
  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
213
217
  --mirai-ui-input-text-error: var(--mirai-ui-error);
214
218
  --mirai-ui-input-text-focus: var(--mirai-ui-content);
219
+ --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
215
220
  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
216
221
  --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
217
222
  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",