refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -22,25 +22,25 @@ component FeatureIconCard {
|
||||
<article
|
||||
data-ui-component="FeatureIconCard"
|
||||
data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
|
||||
class='wire-feature-icon-card {class}'
|
||||
class='wrn-feature-icon-card {class}'
|
||||
>
|
||||
<div
|
||||
class="wire-feature-icon-card__icon"
|
||||
class="wrn-feature-icon-card__icon"
|
||||
data-size='{iconSize}' data-variant='{iconVariant}' data-color='{color}'
|
||||
>
|
||||
<span class='{icon + " wire-feature-icon-card__icon-glyph"}' aria-hidden="true"></span>
|
||||
<span class='{icon + " wrn-feature-icon-card__icon-glyph"}' aria-hidden="true"></span>
|
||||
|
||||
{#if badge}
|
||||
<span class="wire-feature-icon-card__badge">
|
||||
<span class="wrn-feature-icon-card__badge">
|
||||
{badge}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h3 class="wire-feature-icon-card__title">{title}</h3>
|
||||
<h3 class="wrn-feature-icon-card__title">{title}</h3>
|
||||
|
||||
{#if description}
|
||||
<p class="wire-feature-icon-card__description">{description}</p>
|
||||
<p class="wrn-feature-icon-card__description">{description}</p>
|
||||
{/if}
|
||||
|
||||
<slot></slot>
|
||||
@@ -51,7 +51,7 @@ component FeatureIconCard {
|
||||
href='{href}'
|
||||
color='{color}'
|
||||
size="sm"
|
||||
class="wire-feature-icon-card__action"
|
||||
class="wrn-feature-icon-card__action"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -60,24 +60,24 @@ component FeatureIconCard {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wire-color-border); border-radius: calc(var(--wire-radius) * 2); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); transition: transform var(--wire-motion-base), border-color var(--wire-motion-base), box-shadow var(--wire-motion-base); }
|
||||
.wire-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wire-feature-icon-card[data-size="lg"] { padding: 2rem; }
|
||||
.wire-feature-icon-card[data-variant="soft"] { background: var(--wire-color-surface-soft); }
|
||||
.wire-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
|
||||
.wire-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }
|
||||
.wire-feature-icon-card:is([data-hover="lift"], [data-hover="shadow"]):hover { box-shadow: var(--wire-shadow-3); }
|
||||
.wire-feature-icon-card:is([data-hover="lift"], [data-hover="border"]):hover { border-color: var(--wire-color-primary); }
|
||||
.wire-feature-icon-card[data-align="center"] { align-items: center; text-align: center; }
|
||||
.wire-feature-icon-card__icon { position: relative; display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border: 1px solid var(--wire-color-primary-muted); border-radius: calc(var(--wire-radius) * 1.5); color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
|
||||
.wire-feature-icon-card__icon[data-size="sm"] { width: 3rem; height: 3rem; } .wire-feature-icon-card__icon[data-size="lg"] { width: 4rem; height: 4rem; }
|
||||
.wire-feature-icon-card__icon[data-variant="solid"] { color: var(--wire-color-on-primary); background: var(--wire-color-primary); }
|
||||
.wire-feature-icon-card__icon[data-color="success"]:not([data-variant="solid"]) { color: var(--wire-color-success); background: var(--wire-color-success-soft); }
|
||||
.wire-feature-icon-card__icon[data-color="warning"]:not([data-variant="solid"]) { color: var(--wire-color-warning-text); background: var(--wire-color-warning-soft); }
|
||||
.wire-feature-icon-card__icon[data-color="danger"]:not([data-variant="solid"]) { color: var(--wire-color-danger); background: var(--wire-color-danger-soft); }
|
||||
.wire-feature-icon-card__icon-glyph { width: 1.75rem; height: 1.75rem; }
|
||||
.wire-feature-icon-card__badge { position: absolute; top: -0.5rem; right: -0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--wire-color-border); border-radius: 999px; color: var(--wire-color-primary); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
|
||||
.wire-feature-icon-card__title { margin-top: 1.5rem; color: var(--wire-color-text); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
|
||||
.wire-feature-icon-card__description { flex: 1; margin-top: 0.75rem; color: var(--wire-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
|
||||
.wire-feature-icon-card__action { margin-top: 1.5rem; }
|
||||
.wrn-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 2); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: transform var(--wrn-motion-base), border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base); }
|
||||
.wrn-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wrn-feature-icon-card[data-size="lg"] { padding: 2rem; }
|
||||
.wrn-feature-icon-card[data-variant="soft"] { background: var(--wrn-color-surface-soft); }
|
||||
.wrn-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
|
||||
.wrn-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }
|
||||
.wrn-feature-icon-card:is([data-hover="lift"], [data-hover="shadow"]):hover { box-shadow: var(--wrn-shadow-3); }
|
||||
.wrn-feature-icon-card:is([data-hover="lift"], [data-hover="border"]):hover { border-color: var(--wrn-color-primary); }
|
||||
.wrn-feature-icon-card[data-align="center"] { align-items: center; text-align: center; }
|
||||
.wrn-feature-icon-card__icon { position: relative; display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border: 1px solid var(--wrn-color-primary-muted); border-radius: calc(var(--wrn-radius) * 1.5); color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
|
||||
.wrn-feature-icon-card__icon[data-size="sm"] { width: 3rem; height: 3rem; } .wrn-feature-icon-card__icon[data-size="lg"] { width: 4rem; height: 4rem; }
|
||||
.wrn-feature-icon-card__icon[data-variant="solid"] { color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); }
|
||||
.wrn-feature-icon-card__icon[data-color="success"]:not([data-variant="solid"]) { color: var(--wrn-color-success); background: var(--wrn-color-success-soft); }
|
||||
.wrn-feature-icon-card__icon[data-color="warning"]:not([data-variant="solid"]) { color: var(--wrn-color-warning-text); background: var(--wrn-color-warning-soft); }
|
||||
.wrn-feature-icon-card__icon[data-color="danger"]:not([data-variant="solid"]) { color: var(--wrn-color-danger); background: var(--wrn-color-danger-soft); }
|
||||
.wrn-feature-icon-card__icon-glyph { width: 1.75rem; height: 1.75rem; }
|
||||
.wrn-feature-icon-card__badge { position: absolute; top: -0.5rem; right: -0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--wrn-color-border); border-radius: 999px; color: var(--wrn-color-primary); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
|
||||
.wrn-feature-icon-card__title { margin-top: 1.5rem; color: var(--wrn-color-text); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
|
||||
.wrn-feature-icon-card__description { flex: 1; margin-top: 0.75rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
|
||||
.wrn-feature-icon-card__action { margin-top: 1.5rem; }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user