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/FeatureCard.wrn
+177 -177
View File
@@ -48,61 +48,61 @@ component FeatureCard {
data-image-aspect='{imageAspect}'
data-disabled='{disabled ? "true" : "false"}'
data-stretched-link='{stretchedLink ? "true" : "false"}'
class='wire-feature-card {class}'
class='wrn-feature-card {class}'
role="listitem"
aria-disabled='{disabled ? "true" : "false"}'
>
{#if image}
<div class="wire-feature-card__media">
<div class="wrn-feature-card__media">
<img
src='{image}'
alt='{imageAlt}'
loading='{imageLoading}'
class="wire-feature-card__image"
class="wrn-feature-card__image"
/>
<div class="wire-feature-card__media-overlay" aria-hidden="true"></div>
<div class="wrn-feature-card__media-overlay" aria-hidden="true"></div>
</div>
{/if}
<slot name="media"></slot>
<div class="wire-feature-card__body">
<div class="wire-feature-card__top">
<div class="wire-feature-card__leading">
<div class="wrn-feature-card__body">
<div class="wrn-feature-card__top">
<div class="wrn-feature-card__leading">
<slot name="icon"></slot>
{#if icon}
<div class="wire-feature-card__icon" aria-hidden="true">
<div class="wrn-feature-card__icon" aria-hidden="true">
<span class='{icon}'></span>
</div>
{/if}
</div>
{#if badge}
<span class="wire-feature-card__badge" data-color='{badgeColor}'>
<span class="wrn-feature-card__badge" data-color='{badgeColor}'>
{badge}
</span>
{/if}
</div>
<div class="wire-feature-card__copy">
<div class="wrn-feature-card__copy">
{#if eyebrow}
<p class="wire-feature-card__eyebrow">{eyebrow}</p>
<p class="wrn-feature-card__eyebrow">{eyebrow}</p>
{/if}
<h3 class="wire-feature-card__title">{title}</h3>
<h3 class="wrn-feature-card__title">{title}</h3>
{#if description}
<p class="wire-feature-card__description">{description}</p>
<p class="wrn-feature-card__description">{description}</p>
{/if}
</div>
<div class="wire-feature-card__content">
<div class="wrn-feature-card__content">
<slot></slot>
</div>
<div class="wire-feature-card__footer">
<div class="wire-feature-card__footer-content">
<div class="wrn-feature-card__footer">
<div class="wrn-feature-card__footer-content">
<slot name="footer"></slot>
</div>
@@ -111,21 +111,21 @@ component FeatureCard {
href='{href}'
target='{target}'
rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
class="wire-feature-card__action"
class="wrn-feature-card__action"
aria-label='{actionLabel + ": " + title}'
>
<span>{actionLabel}</span>
{#if actionIcon}
<span class='wire-feature-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-feature-card__action-icon {actionIcon}' aria-hidden="true"></span>
{:else if external}
<span class="wire-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
{:else if showArrow}
<span class="wire-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
{/if}
</a>
{:else if actionLabel}
<span class="wire-feature-card__action wire-feature-card__action--disabled">
<span class="wrn-feature-card__action wrn-feature-card__action--disabled">
<span>{actionLabel}</span>
</span>
{/if}
@@ -135,13 +135,13 @@ component FeatureCard {
}
style {
.wire-feature-card {
--feature-accent: var(--wire-color-primary);
--feature-accent-hover: var(--wire-color-primary-hover);
--feature-accent-soft: var(--wire-color-primary-soft);
--feature-accent-muted: var(--wire-color-primary-muted);
--feature-contrast: var(--wire-color-primary-contrast);
--feature-border: color-mix(in srgb, var(--feature-accent) 16%, var(--wire-color-border));
.wrn-feature-card {
--feature-accent: var(--wrn-color-primary);
--feature-accent-hover: var(--wrn-color-primary-hover);
--feature-accent-soft: var(--wrn-color-primary-soft);
--feature-accent-muted: var(--wrn-color-primary-muted);
--feature-contrast: var(--wrn-color-primary-contrast);
--feature-border: color-mix(in srgb, var(--feature-accent) 16%, var(--wrn-color-border));
position: relative;
isolation: isolate;
@@ -151,14 +151,14 @@ component FeatureCard {
min-width: 0;
height: 100%;
overflow: hidden;
color: var(--wire-color-text);
color: var(--wrn-color-text);
background:
radial-gradient(
circle at 100% 0%,
color-mix(in srgb, var(--feature-accent) 7%, transparent),
transparent 34%
),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
border: 1px solid var(--feature-border);
border-radius: 1.25rem;
box-shadow:
@@ -171,43 +171,43 @@ component FeatureCard {
background-color 180ms ease;
}
.wire-feature-card[data-color="secondary"] {
--feature-accent: var(--wire-color-secondary);
--feature-accent-hover: var(--wire-color-secondary-hover);
--feature-accent-soft: var(--wire-color-secondary-soft);
--feature-accent-muted: var(--wire-color-secondary-muted);
--feature-contrast: var(--wire-color-secondary-contrast);
.wrn-feature-card[data-color="secondary"] {
--feature-accent: var(--wrn-color-secondary);
--feature-accent-hover: var(--wrn-color-secondary-hover);
--feature-accent-soft: var(--wrn-color-secondary-soft);
--feature-accent-muted: var(--wrn-color-secondary-muted);
--feature-contrast: var(--wrn-color-secondary-contrast);
}
.wire-feature-card[data-color="info"] {
--feature-accent: var(--wire-color-info);
--feature-accent-soft: var(--wire-color-info-soft);
--feature-accent-muted: var(--wire-color-info-muted);
--feature-contrast: var(--wire-color-info-contrast);
.wrn-feature-card[data-color="info"] {
--feature-accent: var(--wrn-color-info);
--feature-accent-soft: var(--wrn-color-info-soft);
--feature-accent-muted: var(--wrn-color-info-muted);
--feature-contrast: var(--wrn-color-info-contrast);
}
.wire-feature-card[data-color="success"] {
--feature-accent: var(--wire-color-success);
--feature-accent-soft: var(--wire-color-success-soft);
--feature-accent-muted: var(--wire-color-success-muted);
--feature-contrast: var(--wire-color-success-contrast);
.wrn-feature-card[data-color="success"] {
--feature-accent: var(--wrn-color-success);
--feature-accent-soft: var(--wrn-color-success-soft);
--feature-accent-muted: var(--wrn-color-success-muted);
--feature-contrast: var(--wrn-color-success-contrast);
}
.wire-feature-card[data-color="warning"] {
--feature-accent: var(--wire-color-warning);
--feature-accent-soft: var(--wire-color-warning-soft);
--feature-accent-muted: var(--wire-color-warning-muted);
--feature-contrast: var(--wire-color-warning-contrast);
.wrn-feature-card[data-color="warning"] {
--feature-accent: var(--wrn-color-warning);
--feature-accent-soft: var(--wrn-color-warning-soft);
--feature-accent-muted: var(--wrn-color-warning-muted);
--feature-contrast: var(--wrn-color-warning-contrast);
}
.wire-feature-card[data-color="danger"] {
--feature-accent: var(--wire-color-danger);
--feature-accent-soft: var(--wire-color-danger-soft);
--feature-accent-muted: var(--wire-color-danger-muted);
--feature-contrast: var(--wire-color-danger-contrast);
.wrn-feature-card[data-color="danger"] {
--feature-accent: var(--wrn-color-danger);
--feature-accent-soft: var(--wrn-color-danger-soft);
--feature-accent-muted: var(--wrn-color-danger-muted);
--feature-contrast: var(--wrn-color-danger-contrast);
}
.wire-feature-card::before {
.wrn-feature-card::before {
position: absolute;
top: 0;
right: 0;
@@ -219,34 +219,34 @@ component FeatureCard {
opacity: 0.8;
}
.wire-feature-card__media {
.wrn-feature-card__media {
position: relative;
overflow: hidden;
background: var(--wire-color-surface-soft);
background: var(--wrn-color-surface-soft);
border-bottom: 1px solid var(--feature-border);
}
.wire-feature-card[data-image-aspect="square"] .wire-feature-card__media {
.wrn-feature-card[data-image-aspect="square"] .wrn-feature-card__media {
aspect-ratio: 1;
}
.wire-feature-card[data-image-aspect="portrait"] .wire-feature-card__media {
.wrn-feature-card[data-image-aspect="portrait"] .wrn-feature-card__media {
aspect-ratio: 4 / 5;
}
.wire-feature-card[data-image-aspect="standard"] .wire-feature-card__media {
.wrn-feature-card[data-image-aspect="standard"] .wrn-feature-card__media {
aspect-ratio: 4 / 3;
}
.wire-feature-card[data-image-aspect="wide"] .wire-feature-card__media {
.wrn-feature-card[data-image-aspect="wide"] .wrn-feature-card__media {
aspect-ratio: 16 / 9;
}
.wire-feature-card[data-image-aspect="cinema"] .wire-feature-card__media {
.wrn-feature-card[data-image-aspect="cinema"] .wrn-feature-card__media {
aspect-ratio: 21 / 9;
}
.wire-feature-card__image {
.wrn-feature-card__image {
display: block;
width: 100%;
height: 100%;
@@ -254,14 +254,14 @@ component FeatureCard {
transition: transform 300ms ease;
}
.wire-feature-card__media-overlay {
.wrn-feature-card__media-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, black 18%, transparent));
}
.wire-feature-card__body {
.wrn-feature-card__body {
display: flex;
flex: 1;
flex-direction: column;
@@ -269,15 +269,15 @@ component FeatureCard {
padding: 1.5rem;
}
.wire-feature-card[data-size="sm"] .wire-feature-card__body {
.wrn-feature-card[data-size="sm"] .wrn-feature-card__body {
padding: 1.1rem;
}
.wire-feature-card[data-size="lg"] .wire-feature-card__body {
.wrn-feature-card[data-size="lg"] .wrn-feature-card__body {
padding: 1.85rem;
}
.wire-feature-card__top {
.wrn-feature-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
@@ -285,13 +285,13 @@ component FeatureCard {
min-width: 0;
}
.wire-feature-card__leading {
.wrn-feature-card__leading {
display: flex;
align-items: center;
min-width: 0;
}
.wire-feature-card__icon {
.wrn-feature-card__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
@@ -305,48 +305,48 @@ component FeatureCard {
box-shadow: 0 1px 0 color-mix(in srgb, white 7%, transparent) inset;
}
.wire-feature-card__icon > span {
.wrn-feature-card__icon > span {
width: 1.35rem;
height: 1.35rem;
}
.wire-feature-card[data-icon-size="sm"] .wire-feature-card__icon {
.wrn-feature-card[data-icon-size="sm"] .wrn-feature-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.8rem;
}
.wire-feature-card[data-icon-size="sm"] .wire-feature-card__icon > span {
.wrn-feature-card[data-icon-size="sm"] .wrn-feature-card__icon > span {
width: 1.1rem;
height: 1.1rem;
}
.wire-feature-card[data-icon-size="lg"] .wire-feature-card__icon {
.wrn-feature-card[data-icon-size="lg"] .wrn-feature-card__icon {
width: 3.6rem;
height: 3.6rem;
border-radius: 1.05rem;
}
.wire-feature-card[data-icon-size="lg"] .wire-feature-card__icon > span {
.wrn-feature-card[data-icon-size="lg"] .wrn-feature-card__icon > span {
width: 1.65rem;
height: 1.65rem;
}
.wire-feature-card[data-icon-style="solid"] .wire-feature-card__icon {
.wrn-feature-card[data-icon-style="solid"] .wrn-feature-card__icon {
color: var(--feature-contrast);
background: var(--feature-accent);
border-color: color-mix(in srgb, white 18%, transparent);
box-shadow: 0 10px 24px color-mix(in srgb, var(--feature-accent) 24%, transparent);
}
.wire-feature-card[data-icon-style="outline"] .wire-feature-card__icon {
.wrn-feature-card[data-icon-style="outline"] .wrn-feature-card__icon {
color: var(--feature-accent);
background: transparent;
border-color: color-mix(in srgb, var(--feature-accent) 38%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--feature-accent) 38%, var(--wrn-color-border));
box-shadow: none;
}
.wire-feature-card[data-icon-style="ghost"] .wire-feature-card__icon {
.wrn-feature-card[data-icon-style="ghost"] .wrn-feature-card__icon {
width: auto;
height: auto;
padding: 0.25rem;
@@ -356,7 +356,7 @@ component FeatureCard {
box-shadow: none;
}
.wire-feature-card__badge {
.wrn-feature-card__badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
@@ -372,42 +372,42 @@ component FeatureCard {
border-radius: 999px;
}
.wire-feature-card__badge[data-color="secondary"] {
color: var(--wire-color-secondary);
background: var(--wire-color-secondary-soft);
border-color: color-mix(in srgb, var(--wire-color-secondary) 20%, transparent);
.wrn-feature-card__badge[data-color="secondary"] {
color: var(--wrn-color-secondary);
background: var(--wrn-color-secondary-soft);
border-color: color-mix(in srgb, var(--wrn-color-secondary) 20%, transparent);
}
.wire-feature-card__badge[data-color="info"] {
color: var(--wire-color-info);
background: var(--wire-color-info-soft);
border-color: color-mix(in srgb, var(--wire-color-info) 20%, transparent);
.wrn-feature-card__badge[data-color="info"] {
color: var(--wrn-color-info);
background: var(--wrn-color-info-soft);
border-color: color-mix(in srgb, var(--wrn-color-info) 20%, transparent);
}
.wire-feature-card__badge[data-color="success"] {
color: var(--wire-color-success);
background: var(--wire-color-success-soft);
border-color: color-mix(in srgb, var(--wire-color-success) 20%, transparent);
.wrn-feature-card__badge[data-color="success"] {
color: var(--wrn-color-success);
background: var(--wrn-color-success-soft);
border-color: color-mix(in srgb, var(--wrn-color-success) 20%, transparent);
}
.wire-feature-card__badge[data-color="warning"] {
color: var(--wire-color-warning-text);
background: var(--wire-color-warning-soft);
border-color: color-mix(in srgb, var(--wire-color-warning) 22%, transparent);
.wrn-feature-card__badge[data-color="warning"] {
color: var(--wrn-color-warning-text);
background: var(--wrn-color-warning-soft);
border-color: color-mix(in srgb, var(--wrn-color-warning) 22%, transparent);
}
.wire-feature-card__badge[data-color="danger"] {
color: var(--wire-color-danger);
background: var(--wire-color-danger-soft);
border-color: color-mix(in srgb, var(--wire-color-danger) 20%, transparent);
.wrn-feature-card__badge[data-color="danger"] {
color: var(--wrn-color-danger);
background: var(--wrn-color-danger-soft);
border-color: color-mix(in srgb, var(--wrn-color-danger) 20%, transparent);
}
.wire-feature-card__copy {
.wrn-feature-card__copy {
min-width: 0;
margin-top: 1.25rem;
}
.wire-feature-card__eyebrow {
.wrn-feature-card__eyebrow {
margin: 0 0 0.5rem;
color: var(--feature-accent);
font-size: 0.72rem;
@@ -417,9 +417,9 @@ component FeatureCard {
text-transform: uppercase;
}
.wire-feature-card__title {
.wrn-feature-card__title {
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.35;
@@ -428,29 +428,29 @@ component FeatureCard {
transition: color 180ms ease;
}
.wire-feature-card[data-size="sm"] .wire-feature-card__title {
.wrn-feature-card[data-size="sm"] .wrn-feature-card__title {
font-size: 1rem;
}
.wire-feature-card[data-size="lg"] .wire-feature-card__title {
.wrn-feature-card[data-size="lg"] .wrn-feature-card__title {
font-size: 1.3rem;
}
.wire-feature-card__description {
.wrn-feature-card__description {
margin: 0.75rem 0 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.9rem;
line-height: 1.65;
text-wrap: pretty;
}
.wire-feature-card[data-size="sm"] .wire-feature-card__description {
.wrn-feature-card[data-size="sm"] .wrn-feature-card__description {
margin-top: 0.6rem;
font-size: 0.82rem;
line-height: 1.55;
}
.wire-feature-card[data-size="lg"] .wire-feature-card__description {
.wrn-feature-card[data-size="lg"] .wrn-feature-card__description {
font-size: 0.98rem;
}
@@ -459,17 +459,17 @@ component FeatureCard {
* stylesheet beats anything this container merely passes down by
* inheritance. State it, at a specificity the app can still override.
*/
.wire-feature-card__content {
color: var(--wire-color-text);
.wrn-feature-card__content {
color: var(--wrn-color-text);
min-width: 0;
margin-top: 1rem;
}
.wire-feature-card__content:empty {
.wrn-feature-card__content:empty {
display: none;
}
.wire-feature-card__footer {
.wrn-feature-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
@@ -479,17 +479,17 @@ component FeatureCard {
padding-top: 1.35rem;
}
.wire-feature-card__footer-content {
.wrn-feature-card__footer-content {
position: relative;
z-index: 3;
min-width: 0;
}
.wire-feature-card__footer-content:empty {
.wrn-feature-card__footer-content:empty {
display: none;
}
.wire-feature-card__action {
.wrn-feature-card__action {
position: relative;
z-index: 2;
display: inline-flex;
@@ -509,115 +509,115 @@ component FeatureCard {
gap 180ms ease;
}
.wire-feature-card__action::before {
.wrn-feature-card__action::before {
position: absolute;
inset: -0.4rem -0.55rem;
content: "";
border-radius: 0.75rem;
}
.wire-feature-card[data-stretched-link="true"] .wire-feature-card__action::after {
.wrn-feature-card[data-stretched-link="true"] .wrn-feature-card__action::after {
position: absolute;
inset: auto;
z-index: 1;
content: "";
}
.wire-feature-card[data-stretched-link="true"] .wire-feature-card__action {
.wrn-feature-card[data-stretched-link="true"] .wrn-feature-card__action {
position: static;
}
.wire-feature-card[data-stretched-link="true"] .wire-feature-card__action::after {
.wrn-feature-card[data-stretched-link="true"] .wrn-feature-card__action::after {
position: absolute;
inset: 0;
border-radius: inherit;
}
.wire-feature-card__action:hover {
.wrn-feature-card__action:hover {
color: var(--feature-accent-hover, var(--feature-accent));
gap: 0.65rem;
}
.wire-feature-card__action:focus-visible {
outline: 2px solid var(--wire-color-focus);
.wrn-feature-card__action:focus-visible {
outline: 2px solid var(--wrn-color-focus);
outline-offset: 4px;
border-radius: 0.55rem;
}
.wire-feature-card__action-icon {
.wrn-feature-card__action-icon {
width: 1rem;
height: 1rem;
transition: transform 180ms ease;
}
.wire-feature-card__action:hover .wire-feature-card__action-icon {
.wrn-feature-card__action:hover .wrn-feature-card__action-icon {
transform: translateX(0.15rem);
}
.wire-feature-card__action--disabled {
color: var(--wire-color-text-muted);
.wrn-feature-card__action--disabled {
color: var(--wrn-color-text-muted);
opacity: 0.7;
}
.wire-feature-card[data-align="center"] .wire-feature-card__body {
.wrn-feature-card[data-align="center"] .wrn-feature-card__body {
align-items: center;
text-align: center;
}
.wire-feature-card[data-align="center"] .wire-feature-card__top,
.wire-feature-card[data-align="center"] .wire-feature-card__footer {
.wrn-feature-card[data-align="center"] .wrn-feature-card__top,
.wrn-feature-card[data-align="center"] .wrn-feature-card__footer {
width: 100%;
justify-content: center;
}
.wire-feature-card[data-align="center"] .wire-feature-card__action {
.wrn-feature-card[data-align="center"] .wrn-feature-card__action {
margin-inline: auto;
}
.wire-feature-card[data-align="right"] .wire-feature-card__body {
.wrn-feature-card[data-align="right"] .wrn-feature-card__body {
align-items: flex-end;
text-align: right;
}
.wire-feature-card[data-align="right"] .wire-feature-card__top,
.wire-feature-card[data-align="right"] .wire-feature-card__footer {
.wrn-feature-card[data-align="right"] .wrn-feature-card__top,
.wrn-feature-card[data-align="right"] .wrn-feature-card__footer {
width: 100%;
justify-content: flex-end;
}
.wire-feature-card[data-variant="raised"] {
.wrn-feature-card[data-variant="raised"] {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 20px 50px color-mix(in srgb, black 17%, transparent);
}
.wire-feature-card[data-variant="soft"] {
.wrn-feature-card[data-variant="soft"] {
background:
linear-gradient(135deg, var(--feature-accent-soft), transparent 68%),
var(--wire-color-surface-raised);
border-color: color-mix(in srgb, var(--feature-accent) 22%, var(--wire-color-border));
var(--wrn-color-surface-raised);
border-color: color-mix(in srgb, var(--feature-accent) 22%, var(--wrn-color-border));
box-shadow: none;
}
.wire-feature-card[data-variant="outline"] {
.wrn-feature-card[data-variant="outline"] {
background: transparent;
box-shadow: none;
}
.wire-feature-card[data-variant="ghost"] {
.wrn-feature-card[data-variant="ghost"] {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.wire-feature-card[data-variant="minimal"] {
.wrn-feature-card[data-variant="minimal"] {
background: transparent;
border-color: transparent;
border-radius: 0;
box-shadow: none;
}
.wire-feature-card[data-variant="solid"] {
.wrn-feature-card[data-variant="solid"] {
color: var(--feature-contrast);
background:
linear-gradient(135deg, color-mix(in srgb, white 9%, transparent), transparent 60%),
@@ -626,97 +626,97 @@ component FeatureCard {
box-shadow: 0 22px 54px color-mix(in srgb, var(--feature-accent) 28%, transparent);
}
.wire-feature-card[data-variant="solid"] .wire-feature-card__title,
.wire-feature-card[data-variant="solid"] .wire-feature-card__description,
.wire-feature-card[data-variant="solid"] .wire-feature-card__eyebrow,
.wire-feature-card[data-variant="solid"] .wire-feature-card__action {
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__title,
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__description,
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__eyebrow,
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__action {
color: var(--feature-contrast);
}
.wire-feature-card[data-variant="solid"] .wire-feature-card__description {
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__description {
opacity: 0.8;
}
.wire-feature-card[data-variant="solid"] .wire-feature-card__icon,
.wire-feature-card[data-variant="solid"] .wire-feature-card__badge {
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__icon,
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__badge {
color: var(--feature-contrast);
background: color-mix(in srgb, white 12%, transparent);
border-color: color-mix(in srgb, white 20%, transparent);
}
.wire-feature-card[data-variant="gradient"] {
.wrn-feature-card[data-variant="gradient"] {
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feature-accent) 24%, transparent), transparent 44%),
linear-gradient(145deg, var(--wire-color-surface-raised), color-mix(in srgb, var(--feature-accent) 8%, var(--wire-color-surface-raised)));
border-color: color-mix(in srgb, var(--feature-accent) 26%, var(--wire-color-border));
linear-gradient(145deg, var(--wrn-color-surface-raised), color-mix(in srgb, var(--feature-accent) 8%, var(--wrn-color-surface-raised)));
border-color: color-mix(in srgb, var(--feature-accent) 26%, var(--wrn-color-border));
}
.wire-feature-card[data-hover="lift"]:not([data-disabled="true"]):hover {
.wrn-feature-card[data-hover="lift"]:not([data-disabled="true"]):hover {
transform: translateY(-0.3rem);
border-color: color-mix(in srgb, var(--feature-accent) 48%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--feature-accent) 48%, var(--wrn-color-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 58px color-mix(in srgb, black 20%, transparent);
}
.wire-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
.wrn-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 58px color-mix(in srgb, black 20%, transparent);
}
.wire-feature-card[data-hover="border"]:not([data-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--feature-accent) 58%, var(--wire-color-border));
.wrn-feature-card[data-hover="border"]:not([data-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--feature-accent) 58%, var(--wrn-color-border));
}
.wire-feature-card[data-hover="glow"]:not([data-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--feature-accent) 54%, var(--wire-color-border));
.wrn-feature-card[data-hover="glow"]:not([data-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--feature-accent) 54%, var(--wrn-color-border));
box-shadow: 0 20px 60px color-mix(in srgb, var(--feature-accent) 22%, transparent);
}
.wire-feature-card:not([data-disabled="true"]):hover .wire-feature-card__image {
.wrn-feature-card:not([data-disabled="true"]):hover .wrn-feature-card__image {
transform: scale(1.035);
}
.wire-feature-card:not([data-disabled="true"]):hover .wire-feature-card__title {
.wrn-feature-card:not([data-disabled="true"]):hover .wrn-feature-card__title {
color: var(--feature-accent);
}
.wire-feature-card[data-variant="solid"]:not([data-disabled="true"]):hover .wire-feature-card__title {
.wrn-feature-card[data-variant="solid"]:not([data-disabled="true"]):hover .wrn-feature-card__title {
color: var(--feature-contrast);
}
.wire-feature-card[data-disabled="true"] {
.wrn-feature-card[data-disabled="true"] {
pointer-events: none;
opacity: 0.55;
filter: saturate(0.65);
}
@media (min-width: 48rem) {
.wire-feature-card[data-image-position="left"],
.wire-feature-card[data-image-position="right"] {
.wrn-feature-card[data-image-position="left"],
.wrn-feature-card[data-image-position="right"] {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}
.wire-feature-card[data-image-position="right"] {
.wrn-feature-card[data-image-position="right"] {
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}
.wire-feature-card[data-image-position="right"] .wire-feature-card__media {
.wrn-feature-card[data-image-position="right"] .wrn-feature-card__media {
order: 2;
border-right: 0;
border-bottom: 0;
border-left: 1px solid var(--feature-border);
}
.wire-feature-card[data-image-position="left"] .wire-feature-card__media {
.wrn-feature-card[data-image-position="left"] .wrn-feature-card__media {
border-right: 1px solid var(--feature-border);
border-bottom: 0;
}
.wire-feature-card[data-image-position="left"] .wire-feature-card__media,
.wire-feature-card[data-image-position="right"] .wire-feature-card__media {
.wrn-feature-card[data-image-position="left"] .wrn-feature-card__media,
.wrn-feature-card[data-image-position="right"] .wrn-feature-card__media {
height: 100%;
min-height: 15rem;
aspect-ratio: auto;
@@ -724,10 +724,10 @@ component FeatureCard {
}
@media (prefers-reduced-motion: reduce) {
.wire-feature-card,
.wire-feature-card__image,
.wire-feature-card__action,
.wire-feature-card__action-icon {
.wrn-feature-card,
.wrn-feature-card__image,
.wrn-feature-card__action,
.wrn-feature-card__action-icon {
transition: none;
}
}