WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/MetricCard.wrn
+155 -155
View File
@@ -41,7 +41,7 @@ component MetricCard {
if (disabled || !selectable) {
return
}
if (sourceEvent.target.closest(".wire-metric-card__action")) {
if (sourceEvent.target.closest(".wrn-metric-card__action")) {
return
}
output.select({
@@ -78,92 +78,92 @@ component MetricCard {
data-icon-style='{iconStyle}'
data-disabled='{disabled ? "true" : "false"}'
data-selectable='{selectable ? "true" : "false"}'
class='wire-metric-card {class}'
class='wrn-metric-card {class}'
role='{selectable ? "button" : ""}'
tabindex='{selectable && !disabled ? "0" : "-1"}'
@click='selectCard(event)'
@keydown='if (selectable && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); selectCard(event) }'
style='--wire-metric-progress: {progress}%;'
style='--wrn-metric-progress: {progress}%;'
>
<div class="wire-metric-card__top">
<div class="wire-metric-card__heading">
<div class="wrn-metric-card__top">
<div class="wrn-metric-card__heading">
{#if label}
<p class="wire-metric-card__label">{label}</p>
<p class="wrn-metric-card__label">{label}</p>
{/if}
{#if badge}
<span class="wire-metric-card__badge">{badge}</span>
<span class="wrn-metric-card__badge">{badge}</span>
{/if}
</div>
{#if icon}
<div class="wire-metric-card__icon" aria-hidden="true">
<div class="wrn-metric-card__icon" aria-hidden="true">
<span class='{icon}'></span>
</div>
{/if}
</div>
<div class="wire-metric-card__value-row">
<div class="wrn-metric-card__value-row">
{#if prefix}
<span class="wire-metric-card__prefix">{prefix}</span>
<span class="wrn-metric-card__prefix">{prefix}</span>
{/if}
<strong class="wire-metric-card__value">{value}</strong>
<strong class="wrn-metric-card__value">{value}</strong>
{#if suffix}
<span class="wire-metric-card__suffix">{suffix}</span>
<span class="wrn-metric-card__suffix">{suffix}</span>
{/if}
</div>
{#if description}
<p class="wire-metric-card__description">{description}</p>
<p class="wrn-metric-card__description">{description}</p>
{/if}
<slot></slot>
{#if progress >= 0}
<div class="wire-metric-card__progress-block">
<div class="wire-metric-card__progress-meta">
<div class="wrn-metric-card__progress-block">
<div class="wrn-metric-card__progress-meta">
<span>{progressLabel || "Progress"}</span>
<strong>{progress}%</strong>
</div>
<div
class="wire-metric-card__progress-track"
class="wrn-metric-card__progress-track"
role="progressbar"
aria-label='{progressLabel || label}'
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow='{progress}'
>
<span class="wire-metric-card__progress-value"></span>
<span class="wrn-metric-card__progress-value"></span>
</div>
</div>
{/if}
{#if trend || trendLabel}
<div
class="wire-metric-card__trend"
class="wrn-metric-card__trend"
data-direction='{trendDirection}'
>
{#if trendDirection === "up" || trendDirection === "positive"}
<span class="icon-[lucide--trending-up] wire-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--trending-up] wrn-metric-card__trend-icon" aria-hidden="true"></span>
{:else if trendDirection === "down" || trendDirection === "negative"}
<span class="icon-[lucide--trending-down] wire-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--trending-down] wrn-metric-card__trend-icon" aria-hidden="true"></span>
{:else}
<span class="icon-[lucide--minus] wire-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--minus] wrn-metric-card__trend-icon" aria-hidden="true"></span>
{/if}
{#if trend}
<strong class="wire-metric-card__trend-value">{trend}</strong>
<strong class="wrn-metric-card__trend-value">{trend}</strong>
{/if}
{#if trendLabel}
<span class="wire-metric-card__trend-label">{trendLabel}</span>
<span class="wrn-metric-card__trend-label">{trendLabel}</span>
{/if}
</div>
{/if}
<div class="wire-metric-card__footer">
<div class="wrn-metric-card__footer">
<slot name="footer"></slot>
{#if href}
@@ -171,32 +171,32 @@ component MetricCard {
href='{href}'
target='{target}'
rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
class="wire-metric-card__action"
class="wrn-metric-card__action"
aria-disabled='{disabled ? "true" : "false"}'
@click='activateAction(event)'
>
<span>{actionLabel || "View details"}</span>
{#if actionIcon}
<span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
{:else if external}
<span class="wire-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
{:else if showArrow}
<span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
{/if}
</a>
{:else if actionLabel}
<button
type="button"
class="wire-metric-card__action"
class="wrn-metric-card__action"
disabled='{disabled}'
@click='activateAction(event)'
>
<span>{actionLabel}</span>
{#if actionIcon}
<span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
{:else if showArrow}
<span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
{/if}
</button>
{/if}
@@ -205,13 +205,13 @@ component MetricCard {
}
style {
.wire-metric-card {
--metric-accent: var(--wire-color-primary);
--metric-accent-hover: var(--wire-color-primary-hover);
--metric-accent-soft: var(--wire-color-primary-soft);
--metric-accent-muted: var(--wire-color-primary-muted);
--metric-contrast: var(--wire-color-primary-contrast);
--metric-border: color-mix(in srgb, var(--metric-accent) 16%, var(--wire-color-border));
.wrn-metric-card {
--metric-accent: var(--wrn-color-primary);
--metric-accent-hover: var(--wrn-color-primary-hover);
--metric-accent-soft: var(--wrn-color-primary-soft);
--metric-accent-muted: var(--wrn-color-primary-muted);
--metric-contrast: var(--wrn-color-primary-contrast);
--metric-border: color-mix(in srgb, var(--metric-accent) 16%, var(--wrn-color-border));
position: relative;
isolation: isolate;
@@ -221,14 +221,14 @@ component MetricCard {
min-width: 0;
height: 100%;
padding: 1.5rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
background:
radial-gradient(
circle at 100% 0%,
color-mix(in srgb, var(--metric-accent) 8%, transparent),
transparent 36%
),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
border: 1px solid var(--metric-border);
border-radius: 1.25rem;
box-shadow:
@@ -242,75 +242,75 @@ component MetricCard {
background-color 180ms ease;
}
.wire-metric-card[data-color="secondary"] {
--metric-accent: var(--wire-color-secondary);
--metric-accent-hover: var(--wire-color-secondary-hover);
--metric-accent-soft: var(--wire-color-secondary-soft);
--metric-accent-muted: var(--wire-color-secondary-muted);
--metric-contrast: var(--wire-color-secondary-contrast);
.wrn-metric-card[data-color="secondary"] {
--metric-accent: var(--wrn-color-secondary);
--metric-accent-hover: var(--wrn-color-secondary-hover);
--metric-accent-soft: var(--wrn-color-secondary-soft);
--metric-accent-muted: var(--wrn-color-secondary-muted);
--metric-contrast: var(--wrn-color-secondary-contrast);
}
.wire-metric-card[data-color="info"] {
--metric-accent: var(--wire-color-info);
--metric-accent-hover: var(--wire-color-info-hover);
--metric-accent-soft: var(--wire-color-info-soft);
--metric-accent-muted: var(--wire-color-info-muted);
--metric-contrast: var(--wire-color-info-contrast);
.wrn-metric-card[data-color="info"] {
--metric-accent: var(--wrn-color-info);
--metric-accent-hover: var(--wrn-color-info-hover);
--metric-accent-soft: var(--wrn-color-info-soft);
--metric-accent-muted: var(--wrn-color-info-muted);
--metric-contrast: var(--wrn-color-info-contrast);
}
.wire-metric-card[data-color="success"] {
--metric-accent: var(--wire-color-success);
--metric-accent-hover: var(--wire-color-success-hover);
--metric-accent-soft: var(--wire-color-success-soft);
--metric-accent-muted: var(--wire-color-success-muted);
--metric-contrast: var(--wire-color-success-contrast);
.wrn-metric-card[data-color="success"] {
--metric-accent: var(--wrn-color-success);
--metric-accent-hover: var(--wrn-color-success-hover);
--metric-accent-soft: var(--wrn-color-success-soft);
--metric-accent-muted: var(--wrn-color-success-muted);
--metric-contrast: var(--wrn-color-success-contrast);
}
.wire-metric-card[data-color="warning"] {
--metric-accent: var(--wire-color-warning);
--metric-accent-hover: var(--wire-color-warning-hover);
--metric-accent-soft: var(--wire-color-warning-soft);
--metric-accent-muted: var(--wire-color-warning-muted);
--metric-contrast: var(--wire-color-warning-contrast);
.wrn-metric-card[data-color="warning"] {
--metric-accent: var(--wrn-color-warning);
--metric-accent-hover: var(--wrn-color-warning-hover);
--metric-accent-soft: var(--wrn-color-warning-soft);
--metric-accent-muted: var(--wrn-color-warning-muted);
--metric-contrast: var(--wrn-color-warning-contrast);
}
.wire-metric-card[data-color="danger"] {
--metric-accent: var(--wire-color-danger);
--metric-accent-hover: var(--wire-color-danger-hover);
--metric-accent-soft: var(--wire-color-danger-soft);
--metric-accent-muted: var(--wire-color-danger-muted);
--metric-contrast: var(--wire-color-danger-contrast);
.wrn-metric-card[data-color="danger"] {
--metric-accent: var(--wrn-color-danger);
--metric-accent-hover: var(--wrn-color-danger-hover);
--metric-accent-soft: var(--wrn-color-danger-soft);
--metric-accent-muted: var(--wrn-color-danger-muted);
--metric-contrast: var(--wrn-color-danger-contrast);
}
.wire-metric-card[data-size="sm"] {
.wrn-metric-card[data-size="sm"] {
padding: 1.1rem;
border-radius: 1rem;
}
.wire-metric-card[data-size="lg"] {
.wrn-metric-card[data-size="lg"] {
padding: 1.9rem;
border-radius: 1.5rem;
}
.wire-metric-card[data-variant="soft"] {
.wrn-metric-card[data-variant="soft"] {
background:
linear-gradient(135deg, var(--metric-accent-soft), transparent 68%),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
box-shadow: none;
}
.wire-metric-card[data-variant="raised"] {
.wrn-metric-card[data-variant="raised"] {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 64px color-mix(in srgb, black 16%, transparent);
}
.wire-metric-card[data-variant="outline"] {
.wrn-metric-card[data-variant="outline"] {
background: transparent;
box-shadow: none;
}
.wire-metric-card[data-variant="minimal"] {
.wrn-metric-card[data-variant="minimal"] {
padding-inline: 0;
background: transparent;
border-color: transparent;
@@ -318,7 +318,7 @@ component MetricCard {
box-shadow: none;
}
.wire-metric-card[data-variant="solid"] {
.wrn-metric-card[data-variant="solid"] {
color: var(--metric-contrast);
background:
linear-gradient(135deg, color-mix(in srgb, white 10%, transparent), transparent 58%),
@@ -327,51 +327,51 @@ component MetricCard {
box-shadow: 0 20px 52px color-mix(in srgb, var(--metric-accent) 28%, transparent);
}
.wire-metric-card[data-variant="gradient"] {
.wrn-metric-card[data-variant="gradient"] {
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--metric-accent) 20%, var(--wire-color-surface-raised)),
var(--wire-color-surface-raised) 58%
color-mix(in srgb, var(--metric-accent) 20%, var(--wrn-color-surface-raised)),
var(--wrn-color-surface-raised) 58%
);
}
.wire-metric-card[data-disabled="true"] {
.wrn-metric-card[data-disabled="true"] {
cursor: not-allowed;
opacity: 0.58;
pointer-events: none;
}
.wire-metric-card[data-selectable="true"]:not([data-disabled="true"]) {
.wrn-metric-card[data-selectable="true"]:not([data-disabled="true"]) {
cursor: pointer;
}
.wire-metric-card[data-hover="lift"]:hover {
.wrn-metric-card[data-hover="lift"]:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wrn-color-border));
box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
}
.wire-metric-card[data-hover="border"]:hover {
.wrn-metric-card[data-hover="border"]:hover {
border-color: var(--metric-accent);
}
.wire-metric-card[data-hover="glow"]:hover {
border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wire-color-border));
.wrn-metric-card[data-hover="glow"]:hover {
border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wrn-color-border));
box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
}
.wire-metric-card[data-align="center"] {
.wrn-metric-card[data-align="center"] {
align-items: center;
text-align: center;
}
.wire-metric-card[data-align="right"] {
.wrn-metric-card[data-align="right"] {
align-items: flex-end;
text-align: right;
}
.wire-metric-card__top {
.wrn-metric-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
@@ -379,7 +379,7 @@ component MetricCard {
width: 100%;
}
.wire-metric-card__heading {
.wrn-metric-card__heading {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -387,15 +387,15 @@ component MetricCard {
min-width: 0;
}
.wire-metric-card__label {
.wrn-metric-card__label {
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.84rem;
font-weight: 600;
line-height: 1.4;
}
.wire-metric-card__badge {
.wrn-metric-card__badge {
display: inline-flex;
align-items: center;
min-height: 1.45rem;
@@ -409,20 +409,20 @@ component MetricCard {
line-height: 1;
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__label,
.wire-metric-card[data-variant="solid"] .wire-metric-card__description,
.wire-metric-card[data-variant="solid"] .wire-metric-card__trend-label,
.wire-metric-card[data-variant="solid"] .wire-metric-card__progress-meta {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__label,
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__description,
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__trend-label,
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__progress-meta {
color: color-mix(in srgb, currentColor 78%, transparent);
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__badge {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__badge {
color: currentColor;
background: color-mix(in srgb, white 14%, transparent);
border-color: color-mix(in srgb, white 22%, transparent);
}
.wire-metric-card__icon {
.wrn-metric-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -436,30 +436,30 @@ component MetricCard {
font-size: 1.25rem;
}
.wire-metric-card[data-icon-style="ghost"] .wire-metric-card__icon {
.wrn-metric-card[data-icon-style="ghost"] .wrn-metric-card__icon {
background: transparent;
border-color: transparent;
}
.wire-metric-card[data-icon-style="outline"] .wire-metric-card__icon {
.wrn-metric-card[data-icon-style="outline"] .wrn-metric-card__icon {
background: transparent;
border-color: color-mix(in srgb, var(--metric-accent) 34%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--metric-accent) 34%, var(--wrn-color-border));
}
.wire-metric-card[data-icon-style="solid"] .wire-metric-card__icon,
.wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
.wrn-metric-card[data-icon-style="solid"] .wrn-metric-card__icon,
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__icon {
color: var(--metric-contrast);
background: var(--metric-accent);
border-color: transparent;
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__icon {
color: currentColor;
background: color-mix(in srgb, white 14%, transparent);
border-color: color-mix(in srgb, white 20%, transparent);
}
.wire-metric-card__value-row {
.wrn-metric-card__value-row {
display: flex;
align-items: baseline;
gap: 0.2rem;
@@ -467,16 +467,16 @@ component MetricCard {
margin-top: 1.15rem;
}
.wire-metric-card[data-align="center"] .wire-metric-card__value-row {
.wrn-metric-card[data-align="center"] .wrn-metric-card__value-row {
justify-content: center;
}
.wire-metric-card[data-align="right"] .wire-metric-card__value-row {
.wrn-metric-card[data-align="right"] .wrn-metric-card__value-row {
justify-content: flex-end;
}
.wire-metric-card__value {
color: var(--wire-color-text);
.wrn-metric-card__value {
color: var(--wrn-color-text);
font-size: clamp(2rem, 5vw, 2.8rem);
font-weight: 700;
line-height: 0.98;
@@ -485,117 +485,117 @@ component MetricCard {
font-variant-numeric: tabular-nums;
}
.wire-metric-card[data-size="sm"] .wire-metric-card__value {
.wrn-metric-card[data-size="sm"] .wrn-metric-card__value {
font-size: clamp(1.65rem, 4vw, 2.15rem);
}
.wire-metric-card[data-size="lg"] .wire-metric-card__value {
.wrn-metric-card[data-size="lg"] .wrn-metric-card__value {
font-size: clamp(2.45rem, 6vw, 3.5rem);
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__value {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__value {
color: currentColor;
}
.wire-metric-card__prefix,
.wire-metric-card__suffix {
.wrn-metric-card__prefix,
.wrn-metric-card__suffix {
color: var(--metric-accent);
font-size: 1rem;
font-weight: 700;
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__prefix,
.wire-metric-card[data-variant="solid"] .wire-metric-card__suffix {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__prefix,
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__suffix {
color: currentColor;
}
.wire-metric-card__description {
.wrn-metric-card__description {
max-width: 38rem;
margin: 0.8rem 0 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.86rem;
line-height: 1.7;
}
.wire-metric-card__progress-block {
.wrn-metric-card__progress-block {
width: 100%;
margin-top: 1.25rem;
}
.wire-metric-card__progress-meta {
.wrn-metric-card__progress-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.45rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.75rem;
}
.wire-metric-card__progress-track {
.wrn-metric-card__progress-track {
width: 100%;
height: 0.42rem;
overflow: hidden;
background: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
background: color-mix(in srgb, var(--wrn-color-border) 72%, transparent);
border-radius: 999px;
}
.wire-metric-card__progress-value {
.wrn-metric-card__progress-value {
display: block;
width: clamp(0%, var(--wire-metric-progress), 100%);
width: clamp(0%, var(--wrn-metric-progress), 100%);
height: 100%;
background: var(--metric-accent);
border-radius: inherit;
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__progress-track {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__progress-track {
background: color-mix(in srgb, white 20%, transparent);
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__progress-value {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__progress-value {
background: currentColor;
}
.wire-metric-card__trend {
.wrn-metric-card__trend {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.42rem;
margin-top: 1.15rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.76rem;
line-height: 1.4;
}
.wire-metric-card[data-align="center"] .wire-metric-card__trend {
.wrn-metric-card[data-align="center"] .wrn-metric-card__trend {
align-self: center;
}
.wire-metric-card[data-align="right"] .wire-metric-card__trend {
.wrn-metric-card[data-align="right"] .wrn-metric-card__trend {
align-self: flex-end;
}
.wire-metric-card__trend[data-direction="up"],
.wire-metric-card__trend[data-direction="positive"] {
color: var(--wire-color-success);
.wrn-metric-card__trend[data-direction="up"],
.wrn-metric-card__trend[data-direction="positive"] {
color: var(--wrn-color-success);
}
.wire-metric-card__trend[data-direction="down"],
.wire-metric-card__trend[data-direction="negative"] {
color: var(--wire-color-danger);
.wrn-metric-card__trend[data-direction="down"],
.wrn-metric-card__trend[data-direction="negative"] {
color: var(--wrn-color-danger);
}
.wire-metric-card__trend-icon {
.wrn-metric-card__trend-icon {
width: 0.95rem;
height: 0.95rem;
}
.wire-metric-card__trend-label {
color: var(--wire-color-text-muted);
.wrn-metric-card__trend-label {
color: var(--wrn-color-text-muted);
font-weight: 500;
}
.wire-metric-card__footer {
.wrn-metric-card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -606,7 +606,7 @@ component MetricCard {
padding-top: 1.35rem;
}
.wire-metric-card__action {
.wrn-metric-card__action {
appearance: none;
padding: 0;
background: transparent;
@@ -628,43 +628,43 @@ component MetricCard {
gap 160ms ease;
}
.wire-metric-card__action:hover {
.wrn-metric-card__action:hover {
gap: 0.62rem;
color: var(--metric-accent-hover);
}
.wire-metric-card[data-variant="solid"] .wire-metric-card__action {
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__action {
color: currentColor;
}
.wire-metric-card__action-icon {
.wrn-metric-card__action-icon {
width: 1rem;
height: 1rem;
}
.wire-metric-card__action:focus-visible {
outline: 2px solid var(--wire-color-focus);
.wrn-metric-card__action:focus-visible {
outline: 2px solid var(--wrn-color-focus);
outline-offset: 4px;
border-radius: 0.35rem;
}
@media (max-width: 639px) {
.wire-metric-card {
.wrn-metric-card {
padding: 1.2rem;
}
.wire-metric-card__value {
.wrn-metric-card__value {
font-size: 2.05rem;
}
}
@media (prefers-reduced-motion: reduce) {
.wire-metric-card,
.wire-metric-card__action {
.wrn-metric-card,
.wrn-metric-card__action {
transition: none;
}
.wire-metric-card[data-hover="lift"]:hover {
.wrn-metric-card[data-hover="lift"]:hover {
transform: none;
}
}