@uncinq/css-components 1.16.6 → 1.17.0
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/css/components/badge.css +10 -10
- package/css/components/button.css +20 -20
- package/docs/buttons/btn.md +2 -2
- package/package.json +1 -1
package/css/components/badge.css
CHANGED
|
@@ -25,52 +25,52 @@
|
|
|
25
25
|
/* Variants */
|
|
26
26
|
.badge-brand {
|
|
27
27
|
--badge-color-background: var(--color-brand);
|
|
28
|
-
--badge-color-background-hover: var(--color-brand-
|
|
28
|
+
--badge-color-background-hover: var(--color-brand-hover);
|
|
29
29
|
--badge-color-text: var(--color-text-on-brand);
|
|
30
30
|
}
|
|
31
31
|
.badge-danger {
|
|
32
32
|
--badge-color-background: var(--color-danger);
|
|
33
|
-
--badge-color-background-hover: var(--color-danger-
|
|
33
|
+
--badge-color-background-hover: var(--color-danger-hover);
|
|
34
34
|
--badge-color-text: var(--color-text-on-danger);
|
|
35
35
|
}
|
|
36
36
|
.badge-dark {
|
|
37
37
|
--badge-color-background: var(--color-dark);
|
|
38
|
-
--badge-color-background-hover: var(--color-dark-
|
|
38
|
+
--badge-color-background-hover: var(--color-dark-hover);
|
|
39
39
|
--badge-color-text: var(--color-text-on-dark);
|
|
40
40
|
}
|
|
41
41
|
.badge-info {
|
|
42
42
|
--badge-color-background: var(--color-info);
|
|
43
|
-
--badge-color-background-hover: var(--color-info-
|
|
43
|
+
--badge-color-background-hover: var(--color-info-hover);
|
|
44
44
|
--badge-color-text: var(--color-text-on-info);
|
|
45
45
|
}
|
|
46
46
|
.badge-light {
|
|
47
47
|
--badge-color-background: var(--color-light);
|
|
48
|
-
--badge-color-background-hover: var(--color-light-
|
|
48
|
+
--badge-color-background-hover: var(--color-light-hover);
|
|
49
49
|
--badge-color-text: var(--color-text-on-light);
|
|
50
50
|
}
|
|
51
51
|
.badge-neutral {
|
|
52
52
|
--badge-color-background: var(--color-neutral);
|
|
53
|
-
--badge-color-background-hover: var(--color-neutral-
|
|
53
|
+
--badge-color-background-hover: var(--color-neutral-hover);
|
|
54
54
|
--badge-color-text: var(--color-text-on-neutral);
|
|
55
55
|
}
|
|
56
56
|
.badge-primary {
|
|
57
57
|
--badge-color-background: var(--color-brand);
|
|
58
|
-
--badge-color-background-hover: var(--color-brand-
|
|
58
|
+
--badge-color-background-hover: var(--color-brand-hover);
|
|
59
59
|
--badge-color-text: var(--color-text-on-brand);
|
|
60
60
|
}
|
|
61
61
|
.badge-secondary {
|
|
62
62
|
--badge-color-background: var(--color-neutral);
|
|
63
|
-
--badge-color-background-hover: var(--color-neutral-
|
|
63
|
+
--badge-color-background-hover: var(--color-neutral-hover);
|
|
64
64
|
--badge-color-text: var(--color-text-on-neutral);
|
|
65
65
|
}
|
|
66
66
|
.badge-success {
|
|
67
67
|
--badge-color-background: var(--color-success);
|
|
68
|
-
--badge-color-background-hover: var(--color-success-
|
|
68
|
+
--badge-color-background-hover: var(--color-success-hover);
|
|
69
69
|
--badge-color-text: var(--color-text-on-success);
|
|
70
70
|
}
|
|
71
71
|
.badge-warning {
|
|
72
72
|
--badge-color-background: var(--color-warning);
|
|
73
|
-
--badge-color-background-hover: var(--color-warning-
|
|
73
|
+
--badge-color-background-hover: var(--color-warning-hover);
|
|
74
74
|
--badge-color-text: var(--color-text-on-warning);
|
|
75
75
|
}
|
|
76
76
|
}
|
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
/* Variants */
|
|
56
56
|
.btn-brand {
|
|
57
57
|
--btn-color-background: var(--color-brand);
|
|
58
|
-
--btn-color-background-hover: var(--color-brand-
|
|
58
|
+
--btn-color-background-hover: var(--color-brand-hover);
|
|
59
59
|
--btn-color-border: var(--color-brand);
|
|
60
|
-
--btn-color-border-hover: var(--color-brand-
|
|
60
|
+
--btn-color-border-hover: var(--color-brand-hover);
|
|
61
61
|
--btn-color-text: var(--color-text-on-brand);
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -72,17 +72,17 @@
|
|
|
72
72
|
|
|
73
73
|
.btn-danger {
|
|
74
74
|
--btn-color-background: var(--color-danger);
|
|
75
|
-
--btn-color-background-hover: var(--color-danger-
|
|
75
|
+
--btn-color-background-hover: var(--color-danger-hover);
|
|
76
76
|
--btn-color-border: var(--color-danger);
|
|
77
|
-
--btn-color-border-hover: var(--color-danger-
|
|
77
|
+
--btn-color-border-hover: var(--color-danger-hover);
|
|
78
78
|
--btn-color-text: var(--color-text-on-danger);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.btn-dark {
|
|
82
82
|
--btn-color-background: var(--color-dark);
|
|
83
|
-
--btn-color-background-hover: var(--color-dark-
|
|
83
|
+
--btn-color-background-hover: var(--color-dark-hover);
|
|
84
84
|
--btn-color-border: var(--color-dark);
|
|
85
|
-
--btn-color-border-hover: var(--color-dark-
|
|
85
|
+
--btn-color-border-hover: var(--color-dark-hover);
|
|
86
86
|
--btn-color-text: var(--color-text-on-dark);
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -97,17 +97,17 @@
|
|
|
97
97
|
|
|
98
98
|
.btn-info {
|
|
99
99
|
--btn-color-background: var(--color-info);
|
|
100
|
-
--btn-color-background-hover: var(--color-info-
|
|
100
|
+
--btn-color-background-hover: var(--color-info-hover);
|
|
101
101
|
--btn-color-border: var(--color-info);
|
|
102
|
-
--btn-color-border-hover: var(--color-info-
|
|
102
|
+
--btn-color-border-hover: var(--color-info-hover);
|
|
103
103
|
--btn-color-text: var(--color-text-on-info);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.btn-light {
|
|
107
107
|
--btn-color-background: var(--color-light);
|
|
108
|
-
--btn-color-background-hover: var(--color-light-
|
|
108
|
+
--btn-color-background-hover: var(--color-light-hover);
|
|
109
109
|
--btn-color-border: var(--color-light);
|
|
110
|
-
--btn-color-border-hover: var(--color-light-
|
|
110
|
+
--btn-color-border-hover: var(--color-light-hover);
|
|
111
111
|
--btn-color-text: var(--color-text-on-light);
|
|
112
112
|
}
|
|
113
113
|
|
|
@@ -129,41 +129,41 @@
|
|
|
129
129
|
|
|
130
130
|
.btn-neutral {
|
|
131
131
|
--btn-color-background: var(--color-neutral);
|
|
132
|
-
--btn-color-background-hover: var(--color-neutral-
|
|
132
|
+
--btn-color-background-hover: var(--color-neutral-hover);
|
|
133
133
|
--btn-color-border: var(--color-neutral);
|
|
134
|
-
--btn-color-border-hover: var(--color-neutral-
|
|
134
|
+
--btn-color-border-hover: var(--color-neutral-hover);
|
|
135
135
|
--btn-color-text: var(--color-text-on-neutral);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.btn-primary {
|
|
139
139
|
--btn-color-background: var(--color-brand);
|
|
140
|
-
--btn-color-background-hover: var(--color-brand-
|
|
140
|
+
--btn-color-background-hover: var(--color-brand-hover);
|
|
141
141
|
--btn-color-border: var(--color-brand);
|
|
142
|
-
--btn-color-border-hover: var(--color-brand-
|
|
142
|
+
--btn-color-border-hover: var(--color-brand-hover);
|
|
143
143
|
--btn-color-text: var(--color-text-on-brand);
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
.btn-secondary {
|
|
147
147
|
--btn-color-background: var(--color-neutral);
|
|
148
|
-
--btn-color-background-hover: var(--color-neutral-
|
|
148
|
+
--btn-color-background-hover: var(--color-neutral-hover);
|
|
149
149
|
--btn-color-border: var(--color-neutral);
|
|
150
|
-
--btn-color-border-hover: var(--color-neutral-
|
|
150
|
+
--btn-color-border-hover: var(--color-neutral-hover);
|
|
151
151
|
--btn-color-text: var(--color-text-on-neutral);
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.btn-success {
|
|
155
155
|
--btn-color-background: var(--color-success);
|
|
156
|
-
--btn-color-background-hover: var(--color-success-
|
|
156
|
+
--btn-color-background-hover: var(--color-success-hover);
|
|
157
157
|
--btn-color-border: var(--color-success);
|
|
158
|
-
--btn-color-border-hover: var(--color-success-
|
|
158
|
+
--btn-color-border-hover: var(--color-success-hover);
|
|
159
159
|
--btn-color-text: var(--color-text-on-success);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
.btn-warning {
|
|
163
163
|
--btn-color-background: var(--color-warning);
|
|
164
|
-
--btn-color-background-hover: var(--color-warning-
|
|
164
|
+
--btn-color-background-hover: var(--color-warning-hover);
|
|
165
165
|
--btn-color-border: var(--color-warning);
|
|
166
|
-
--btn-color-border-hover: var(--color-warning-
|
|
166
|
+
--btn-color-border-hover: var(--color-warning-hover);
|
|
167
167
|
--btn-color-text: var(--color-text-on-warning);
|
|
168
168
|
}
|
|
169
169
|
|
package/docs/buttons/btn.md
CHANGED
|
@@ -35,9 +35,9 @@ Each sets four properties together: background, border, their hover values, and
|
|
|
35
35
|
```css
|
|
36
36
|
.btn-danger {
|
|
37
37
|
--btn-color-background: var(--color-danger);
|
|
38
|
-
--btn-color-background-hover: var(--color-danger-
|
|
38
|
+
--btn-color-background-hover: var(--color-danger-hover);
|
|
39
39
|
--btn-color-border: var(--color-danger);
|
|
40
|
-
--btn-color-border-hover: var(--color-danger-
|
|
40
|
+
--btn-color-border-hover: var(--color-danger-hover);
|
|
41
41
|
--btn-color-text: var(--color-text-on-danger);
|
|
42
42
|
}
|
|
43
43
|
```
|