@pathscale/ui 0.0.165 → 0.0.166
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/badge/Badge.css +65 -0
- package/dist/components/badge/Badge.d.ts +3 -3
- package/dist/index.css +76 -0
- package/package.json +1 -1
package/dist/badge/Badge.css
CHANGED
|
@@ -45,6 +45,14 @@
|
|
|
45
45
|
@apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
.badge--xs {
|
|
49
|
+
@apply min-h-3 min-w-3 rounded-lg text-[9px] leading-[1.2];
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.badge--xl {
|
|
53
|
+
@apply min-h-9 min-w-9 rounded-2xl text-sm leading-[1.43];
|
|
54
|
+
}
|
|
55
|
+
|
|
48
56
|
/* ==========================================================================
|
|
49
57
|
Color variants - set foreground color
|
|
50
58
|
========================================================================== */
|
|
@@ -69,6 +77,22 @@
|
|
|
69
77
|
--badge-fg: var(--color-danger);
|
|
70
78
|
}
|
|
71
79
|
|
|
80
|
+
.badge--neutral {
|
|
81
|
+
--badge-fg: var(--color-neutral);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.badge--info {
|
|
85
|
+
--badge-fg: var(--color-info);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.badge--error {
|
|
89
|
+
--badge-fg: var(--color-error);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.badge--ghost {
|
|
93
|
+
--badge-fg: currentColor;
|
|
94
|
+
}
|
|
95
|
+
|
|
72
96
|
/* ==========================================================================
|
|
73
97
|
Variant styles
|
|
74
98
|
========================================================================== */
|
|
@@ -85,6 +109,17 @@
|
|
|
85
109
|
/* Soft/muted background - compound variants below handle bg/fg per color */
|
|
86
110
|
}
|
|
87
111
|
|
|
112
|
+
.badge--outline {
|
|
113
|
+
--badge-border: var(--badge-bg);
|
|
114
|
+
background-color: transparent;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.badge--dash {
|
|
118
|
+
--badge-border: var(--badge-bg);
|
|
119
|
+
background-color: transparent;
|
|
120
|
+
border-style: dashed;
|
|
121
|
+
}
|
|
122
|
+
|
|
88
123
|
/* ==========================================================================
|
|
89
124
|
Placement variants
|
|
90
125
|
========================================================================== */
|
|
@@ -138,6 +173,21 @@
|
|
|
138
173
|
--badge-fg: var(--color-danger-foreground);
|
|
139
174
|
}
|
|
140
175
|
|
|
176
|
+
.badge--primary.badge--neutral {
|
|
177
|
+
--badge-bg: var(--color-neutral);
|
|
178
|
+
--badge-fg: var(--color-neutral-foreground);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.badge--primary.badge--info {
|
|
182
|
+
--badge-bg: var(--color-info);
|
|
183
|
+
--badge-fg: var(--color-info-foreground);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.badge--primary.badge--error {
|
|
187
|
+
--badge-bg: var(--color-error);
|
|
188
|
+
--badge-fg: var(--color-error-foreground);
|
|
189
|
+
}
|
|
190
|
+
|
|
141
191
|
/* ==========================================================================
|
|
142
192
|
Compound variants - Soft (muted background)
|
|
143
193
|
========================================================================== */
|
|
@@ -166,3 +216,18 @@
|
|
|
166
216
|
--badge-bg: var(--color-danger-soft);
|
|
167
217
|
--badge-fg: var(--color-danger-soft-foreground);
|
|
168
218
|
}
|
|
219
|
+
|
|
220
|
+
.badge--soft.badge--neutral {
|
|
221
|
+
--badge-bg: var(--color-neutral);
|
|
222
|
+
--badge-fg: var(--color-neutral-foreground);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.badge--soft.badge--info {
|
|
226
|
+
--badge-bg: var(--color-info-soft);
|
|
227
|
+
--badge-fg: var(--color-info-soft-foreground);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.badge--soft.badge--error {
|
|
231
|
+
--badge-bg: var(--color-error-soft);
|
|
232
|
+
--badge-fg: var(--color-error-soft-foreground);
|
|
233
|
+
}
|
|
@@ -5,9 +5,9 @@ interface BadgeAnchorProps extends JSX.HTMLAttributes<HTMLSpanElement> {
|
|
|
5
5
|
children: JSX.Element;
|
|
6
6
|
}
|
|
7
7
|
declare const BadgeAnchor: (props: BadgeAnchorProps) => JSX.Element;
|
|
8
|
-
type BadgeColor = "default" | "accent" | "success" | "warning" | "danger";
|
|
9
|
-
type BadgeVariant = "primary" | "secondary" | "soft";
|
|
10
|
-
type BadgeSize = "sm" | "md" | "lg";
|
|
8
|
+
type BadgeColor = "default" | "accent" | "success" | "warning" | "danger" | "neutral" | "primary" | "secondary" | "info" | "error" | "ghost";
|
|
9
|
+
type BadgeVariant = "primary" | "secondary" | "soft" | "outline" | "dash";
|
|
10
|
+
type BadgeSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
11
11
|
type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
12
12
|
interface BadgeRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> {
|
|
13
13
|
class?: string;
|
package/dist/index.css
CHANGED
|
@@ -59,6 +59,25 @@
|
|
|
59
59
|
line-height: 1.34;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.badge--xs {
|
|
63
|
+
min-height: calc(var(--spacing, .25rem) * 3);
|
|
64
|
+
min-width: calc(var(--spacing, .25rem) * 3);
|
|
65
|
+
border-radius: var(--radius-lg, .5rem);
|
|
66
|
+
--tw-leading: 1.2;
|
|
67
|
+
font-size: 9px;
|
|
68
|
+
line-height: 1.2;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.badge--xl {
|
|
72
|
+
min-height: calc(var(--spacing, .25rem) * 9);
|
|
73
|
+
min-width: calc(var(--spacing, .25rem) * 9);
|
|
74
|
+
border-radius: var(--radius-2xl, 1rem);
|
|
75
|
+
font-size: var(--text-sm, .875rem);
|
|
76
|
+
line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
|
|
77
|
+
--tw-leading: 1.43;
|
|
78
|
+
line-height: 1.43;
|
|
79
|
+
}
|
|
80
|
+
|
|
62
81
|
.badge--accent {
|
|
63
82
|
--badge-fg: var(--color-accent);
|
|
64
83
|
}
|
|
@@ -79,6 +98,33 @@
|
|
|
79
98
|
--badge-fg: var(--color-danger);
|
|
80
99
|
}
|
|
81
100
|
|
|
101
|
+
.badge--neutral {
|
|
102
|
+
--badge-fg: var(--color-neutral);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.badge--info {
|
|
106
|
+
--badge-fg: var(--color-info);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.badge--error {
|
|
110
|
+
--badge-fg: var(--color-error);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.badge--ghost {
|
|
114
|
+
--badge-fg: currentColor;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.badge--outline {
|
|
118
|
+
--badge-border: var(--badge-bg);
|
|
119
|
+
background-color: #0000;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.badge--dash {
|
|
123
|
+
--badge-border: var(--badge-bg);
|
|
124
|
+
background-color: #0000;
|
|
125
|
+
border-style: dashed;
|
|
126
|
+
}
|
|
127
|
+
|
|
82
128
|
.badge--top-right {
|
|
83
129
|
top: calc(var(--spacing, .25rem) * 0);
|
|
84
130
|
right: calc(var(--spacing, .25rem) * 0);
|
|
@@ -132,6 +178,21 @@
|
|
|
132
178
|
--badge-fg: var(--color-danger-foreground);
|
|
133
179
|
}
|
|
134
180
|
|
|
181
|
+
.badge--primary.badge--neutral {
|
|
182
|
+
--badge-bg: var(--color-neutral);
|
|
183
|
+
--badge-fg: var(--color-neutral-foreground);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.badge--primary.badge--info {
|
|
187
|
+
--badge-bg: var(--color-info);
|
|
188
|
+
--badge-fg: var(--color-info-foreground);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.badge--primary.badge--error {
|
|
192
|
+
--badge-bg: var(--color-error);
|
|
193
|
+
--badge-fg: var(--color-error-foreground);
|
|
194
|
+
}
|
|
195
|
+
|
|
135
196
|
.badge--soft.badge--accent {
|
|
136
197
|
--badge-bg: var(--color-accent-soft);
|
|
137
198
|
--badge-fg: var(--color-accent-soft-foreground);
|
|
@@ -157,6 +218,21 @@
|
|
|
157
218
|
--badge-fg: var(--color-danger-soft-foreground);
|
|
158
219
|
}
|
|
159
220
|
|
|
221
|
+
.badge--soft.badge--neutral {
|
|
222
|
+
--badge-bg: var(--color-neutral);
|
|
223
|
+
--badge-fg: var(--color-neutral-foreground);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.badge--soft.badge--info {
|
|
227
|
+
--badge-bg: var(--color-info-soft);
|
|
228
|
+
--badge-fg: var(--color-info-soft-foreground);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.badge--soft.badge--error {
|
|
232
|
+
--badge-bg: var(--color-error-soft);
|
|
233
|
+
--badge-fg: var(--color-error-soft-foreground);
|
|
234
|
+
}
|
|
235
|
+
|
|
160
236
|
@property --tw-font-weight {
|
|
161
237
|
syntax: "*";
|
|
162
238
|
inherits: false
|