@mirai/ui 1.1.6 → 1.1.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.
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
|
|
@@ -30,30 +30,28 @@ button.secondary {
|
|
|
30
30
|
color: var(--mirai-ui-button-background);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
button.button:not(:disabled).secondary:
|
|
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),
|
|
36
|
-
|
|
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-
|
|
42
|
+
color: var(--mirai-ui-button-transparent-color);
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
button.transparent:not(:disabled):
|
|
45
|
+
button.transparent:not(:disabled):active,
|
|
45
46
|
button.transparent:not(:disabled):hover {
|
|
46
|
-
background-color: var(--mirai-ui-
|
|
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):
|
|
51
|
+
button.button:not(:disabled):not(.secondary):not(.transparent):active,
|
|
50
52
|
button.button:not(:disabled):not(.secondary):not(.transparent):hover {
|
|
51
|
-
|
|
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 */
|
|
@@ -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);
|