@mirai/ui 1.1.10 → 1.1.11

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 (4) hide show
  1. package/README.md +10 -6
  2. package/build/components/Button/Button.module.css +7 -7
  3. package/build/theme/default.theme.css +19 -14
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -484,14 +484,16 @@ const MyComponent = (props) => {
484
484
  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
485
485
  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
486
486
  --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
487
- --mirai-ui-button-focus-color: var(--mirai-ui-accent-dark);
488
- --mirai-ui-button-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border);
487
+ --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
488
+ --mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
489
489
  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
490
490
  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
491
491
  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
492
492
  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
493
493
  --mirai-ui-button-secondary-background: var(--mirai-ui-base);
494
- --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
494
+ --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
495
+ --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
496
+ --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
495
497
  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
496
498
  --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
497
499
  --mirai-ui-button-transparent-color: var(--mirai-ui-content);
@@ -1400,9 +1402,11 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
1400
1402
  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
1401
1403
 
1402
1404
  /* focus */
1403
- --mirai-ui-focus-color: var(--mirai-ui-content);
1404
- --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-content-border);
1405
- --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-error-border);
1405
+ --mirai-ui-focus-color: var(--mirai-ui-accent-dark);
1406
+ --mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
1407
+ --mirai-ui-focus-width: var(--mirai-ui-space-XXS);
1408
+ --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-focus-color-shadow);
1409
+ --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
1406
1410
  ```
1407
1411
 
1408
1412
  ## Hooks
package/build/components/Button/Button.module.css CHANGED
@@ -26,15 +26,15 @@ button.button:disabled:not(.busy) {
26
26
 
27
27
  button.secondary {
28
28
  background-color: var(--mirai-ui-button-secondary-background);
29
- box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-background);
30
- color: var(--mirai-ui-button-background);
29
+ box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-color);
30
+ color: var(--mirai-ui-button-secondary-color);
31
31
  }
32
32
 
33
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-button-focus-color),
36
- var(--mirai-ui-button-focus-shadow);
37
- color: var(--mirai-ui-button-focus-color);
35
+ box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color),
36
+ 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-secondary-focus-color-shadow);
37
+ color: var(--mirai-ui-button-secondary-focus-color);
38
38
  }
39
39
 
40
40
  button.transparent {
@@ -50,7 +50,7 @@ button.transparent:not(:disabled):hover {
50
50
 
51
51
  button.button:not(:disabled):not(.secondary):not(.transparent):active,
52
52
  button.button:not(:disabled):not(.secondary):not(.transparent):hover {
53
- box-shadow: var(--mirai-ui-button-focus-shadow);
53
+ box-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-focus-color-shadow);
54
54
  background-color: var(--mirai-ui-button-focus-color);
55
55
  }
56
56
 
@@ -156,7 +156,7 @@ button.button.busy .spinner {
156
156
  .secondary .spinner::before,
157
157
  .secondary .spinner::after {
158
158
  animation-name: mirai-button-secondary-busy;
159
- background-color: var(--mirai-ui-button-secondary-color-active);
159
+ background-color: var(--mirai-ui-button-secondary-color);
160
160
  }
161
161
 
162
162
  .transparent .spinner,
package/build/theme/default.theme.css CHANGED
@@ -1,9 +1,3 @@
1
- /*
2
- ! TODO: Review state: {namespace}-{subject}-{property}-{state}
3
- EX: --mirai-ui-button-background-hover:
4
- --mirai-ui-button-secondary-background-hover
5
- */
6
-
7
1
  :root {
8
2
  /* typography */
9
3
  --mirai-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
@@ -47,18 +41,26 @@
47
41
  --mirai-ui-error: #d32f2f;
48
42
  --mirai-ui-error-background: #fdeded;
49
43
  --mirai-ui-error-border: #fad6d6;
44
+ --mirai-ui-error-light: #e58282;
45
+ --mirai-ui-error-dark: #7f1c1c;
50
46
 
51
47
  --mirai-ui-warning: #663c00;
52
48
  --mirai-ui-warning-background: #fff4e5;
53
49
  --mirai-ui-warning-border: #ffe5c2;
50
+ --mirai-ui-warning-light: #a38a66;
51
+ --mirai-ui-warning-dark: #3d2400;
54
52
 
55
53
  --mirai-ui-success: #1e4620;
56
54
  --mirai-ui-success-background: #edf7ed;
57
55
  --mirai-ui-success-border: #d5ecd5;
56
+ --mirai-ui-success-light: #789079;
57
+ --mirai-ui-success-dark: #122a13;
58
58
 
59
59
  --mirai-ui-info: #014361;
60
60
  --mirai-ui-info-background: #e6f5fd;
61
61
  --mirai-ui-info-border: #c6e8fa;
62
+ --mirai-ui-info-light: #678ea0;
63
+ --mirai-ui-info-dark: #01283a;
62
64
 
63
65
  /* spacing */
64
66
  --mirai-ui-space-XXS: 4px;
@@ -92,8 +94,10 @@
92
94
 
93
95
  /* focus */
94
96
  --mirai-ui-focus-color: var(--mirai-ui-accent-dark);
95
- --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border);
96
- --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-error-border);
97
+ --mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
98
+ --mirai-ui-focus-width: var(--mirai-ui-space-XXS);
99
+ --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-focus-color-shadow);
100
+ --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
97
101
 
98
102
  /* locale */
99
103
  --mirai-ui-row-direction: row;
@@ -173,14 +177,16 @@
173
177
  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
174
178
  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
175
179
  --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);
180
+ --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
181
+ --mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
178
182
  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
179
183
  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
180
184
  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
181
185
  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
182
186
  --mirai-ui-button-secondary-background: var(--mirai-ui-base);
183
- --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
187
+ --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
188
+ --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
189
+ --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
184
190
  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
185
191
  --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
186
192
  --mirai-ui-button-transparent-color: var(--mirai-ui-content);
@@ -286,17 +292,16 @@
286
292
  50%,
287
293
  100% {
288
294
  background-color: var(--mirai-ui-button-color-active);
289
- background-color: var();
290
295
  }
291
296
  }
292
297
 
293
298
  @keyframes mirai-button-secondary-busy {
294
299
  0% {
295
- background-color: var(--mirai-ui-button-background);
300
+ background-color: var(--mirai-ui-button-secondary-background);
296
301
  }
297
302
  50%,
298
303
  100% {
299
- background-color: var(--mirai-ui-button-secondary-color-active);
304
+ background-color: var(--mirai-ui-button-secondary-color);
300
305
  }
301
306
  }
302
307
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",