Refresh UI components and showcase; release updated framework packages

This commit is contained in:
Clintchiz committed 2026-09-20 18:13:24 +05:30
1 parent d800228585
commit c77f5e1cec
293 files changed
+22544 -35778

No files matched your search

+15 -9
View File
@@ -122,6 +122,7 @@ component Badge {
.wrn-next__badge {
--wrn-badge-color: var(--wrn-color-primary);
--wrn-badge-ink: var(--wrn-color-primary-text);
position: relative;
isolation: isolate;
display: inline-flex;
@@ -136,9 +137,9 @@ component Badge {
border: 1px solid var(--wrn-badge-color);
border-radius: 999px;
background: var(--wrn-badge-color);
box-shadow: 0 4px 12px color-mix(in srgb, var(--wrn-badge-color) 18%, transparent);
box-shadow: none;
font-size: 0.75rem;
font-weight: 750;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
@@ -166,23 +167,28 @@ component Badge {
}
.wrn-next__badge[data-color="secondary"] {
--wrn-badge-color: #737373;
--wrn-badge-color: var(--wrn-color-secondary);
--wrn-badge-ink: var(--wrn-color-secondary-text);
}
.wrn-next__badge[data-color="success"] {
--wrn-badge-color: #0f9f8f;
--wrn-badge-color: var(--wrn-color-success);
--wrn-badge-ink: var(--wrn-color-success-text);
}
.wrn-next__badge[data-color="info"] {
--wrn-badge-color: #2563eb;
--wrn-badge-color: var(--wrn-color-info);
--wrn-badge-ink: var(--wrn-color-info-text);
}
.wrn-next__badge[data-color="danger"] {
--wrn-badge-color: #ef3340;
--wrn-badge-color: var(--wrn-color-danger);
--wrn-badge-ink: var(--wrn-color-danger-text);
}
.wrn-next__badge[data-color="warning"] {
--wrn-badge-color: #eab308;
--wrn-badge-color: var(--wrn-color-warning);
--wrn-badge-ink: var(--wrn-color-warning-text);
}
.wrn-next__badge[data-color="dark"] {
@@ -199,14 +205,14 @@ component Badge {
}
.wrn-next__badge[data-variant="soft"] {
color: var(--wrn-badge-color);
color: var(--wrn-badge-ink, var(--wrn-badge-color));
border-color: transparent;
background: color-mix(in srgb, var(--wrn-badge-color) 15%, var(--wrn-color-surface));
box-shadow: none;
}
.wrn-next__badge[data-variant="outline"] {
color: var(--wrn-badge-color);
color: var(--wrn-badge-ink, var(--wrn-badge-color));
background: transparent;
box-shadow: none;
}