@neovici/cosmoz-badge 1.0.0 → 1.0.1
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/dist/cosmoz-badge.d.ts +1 -1
- package/dist/cosmoz-badge.js +1 -1
- package/dist/styles.js +30 -1
- package/package.json +2 -2
package/dist/cosmoz-badge.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @element cosmoz-badge
|
|
5
5
|
*
|
|
6
|
-
* @attr {string} type - Badge type: pill (default), color, modern
|
|
6
|
+
* @attr {string} type - Badge type: pill (default), color, modern, icon
|
|
7
7
|
* @attr {string} color - Badge color: gray (default), brand, error, warning, success
|
|
8
8
|
* @attr {string} size - Badge size: sm, md (default), lg
|
|
9
9
|
* @attr {boolean} dot - Show a colored dot indicator before text
|
package/dist/cosmoz-badge.js
CHANGED
|
@@ -6,7 +6,7 @@ import { styles } from './styles';
|
|
|
6
6
|
*
|
|
7
7
|
* @element cosmoz-badge
|
|
8
8
|
*
|
|
9
|
-
* @attr {string} type - Badge type: pill (default), color, modern
|
|
9
|
+
* @attr {string} type - Badge type: pill (default), color, modern, icon
|
|
10
10
|
* @attr {string} color - Badge color: gray (default), brand, error, warning, success
|
|
11
11
|
* @attr {string} size - Badge size: sm, md (default), lg
|
|
12
12
|
* @attr {boolean} dot - Show a colored dot indicator before text
|
package/dist/styles.js
CHANGED
|
@@ -39,7 +39,7 @@ export const styles = css `
|
|
|
39
39
|
|
|
40
40
|
:host([color='brand']) .badge {
|
|
41
41
|
background-color: var(--cz-color-bg-brand);
|
|
42
|
-
color: var(--cz-color-text-brand);
|
|
42
|
+
color: var(--cz-color-text-on-brand);
|
|
43
43
|
border-color: var(--cz-color-brand-200);
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -167,10 +167,39 @@ export const styles = css `
|
|
|
167
167
|
padding: ${sp(1)} ${sp(2.5)};
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
+
/* =========================================
|
|
171
|
+
* ICON-ONLY TYPE
|
|
172
|
+
* ========================================= */
|
|
173
|
+
:host([type='icon']) .badge {
|
|
174
|
+
padding: ${sp(2)};
|
|
175
|
+
gap: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
:host([type='icon'][size='sm']) .badge {
|
|
179
|
+
padding: ${sp(1.5)};
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([type='icon'][size='lg']) .badge {
|
|
183
|
+
padding: ${sp(2.5)};
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([type='icon']) .dot,
|
|
187
|
+
:host([type='icon']) slot[name='prefix'],
|
|
188
|
+
:host([type='icon']) slot[name='suffix'] {
|
|
189
|
+
display: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host([type='icon']) ::slotted(svg) {
|
|
193
|
+
width: ${sp(3)};
|
|
194
|
+
height: ${sp(3)};
|
|
195
|
+
}
|
|
196
|
+
|
|
170
197
|
/* =========================================
|
|
171
198
|
* SLOTTED CONTENT (icons, images, flags)
|
|
172
199
|
* ========================================= */
|
|
173
200
|
::slotted(svg) {
|
|
201
|
+
width: ${sp(3)};
|
|
202
|
+
height: ${sp(3)};
|
|
174
203
|
color: var(--cz-color-fg-quaternary);
|
|
175
204
|
}
|
|
176
205
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-badge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A customizable badge web component built with Untitled UI design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@neovici/cosmoz-icons": "^1.5.0",
|
|
62
|
-
"@neovici/cosmoz-tokens": "^3.3.
|
|
62
|
+
"@neovici/cosmoz-tokens": "^3.3.1",
|
|
63
63
|
"@pionjs/pion": "^2.5.2",
|
|
64
64
|
"lit-html": "^3.3.1"
|
|
65
65
|
},
|