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/PageHeader.wrn
+148 -148
View File
@@ -42,32 +42,32 @@ component PageHeader {
data-max-width='{maxWidth}'
data-border-bottom='{borderBottom ? "true" : "false"}'
aria-labelledby='{id}'
class='wire-page-header {class}'
class='wrn-page-header {class}'
>
<div
class="wire-page-header__decoration"
class="wrn-page-header__decoration"
aria-hidden="true"
>
<span
class="wire-page-header__glow wire-page-header__glow--one"
class="wrn-page-header__glow wrn-page-header__glow--one"
>
</span>
<span
class="wire-page-header__glow wire-page-header__glow--two"
class="wrn-page-header__glow wrn-page-header__glow--two"
>
</span>
<span
class="wire-page-header__grid-pattern"
class="wrn-page-header__grid-pattern"
>
</span>
</div>
<div
class="wire-page-header__inner"
class="wrn-page-header__inner"
>
{#if showBreadcrumbs && breadcrumbs.length > 0}
<div
class="wire-page-header__breadcrumb"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
label="Breadcrumb"
@@ -80,7 +80,7 @@ component PageHeader {
</div>
{:else if showBreadcrumbs && breadcrumbParent}
<div
class="wire-page-header__breadcrumb"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
label="Breadcrumb"
@@ -104,7 +104,7 @@ current: true
</div>
{:else if showBreadcrumbs && (breadcrumbCurrent || title)}
<div
class="wire-page-header__breadcrumb"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
label="Breadcrumb"
@@ -124,33 +124,33 @@ current: true
{/if}
<div
class="wire-page-header__layout"
class="wrn-page-header__layout"
>
<div
class="wire-page-header__content"
class="wrn-page-header__content"
>
<div
class="wire-page-header__intro"
class="wrn-page-header__intro"
>
{#if icon}
<span
class="wire-page-header__icon-wrap"
class="wrn-page-header__icon-wrap"
>
{#if icon === "sparkles"}
<span
class="icon-[lucide--sparkles] wire-page-header__icon"
class="icon-[lucide--sparkles] wrn-page-header__icon"
aria-hidden="true"
>
</span>
{:else if icon === "component"}
<span
class="icon-[lucide--component] wire-page-header__icon"
class="icon-[lucide--component] wrn-page-header__icon"
aria-hidden="true"
>
</span>
{:else}
<span
class='{icon} wire-page-header__icon'
class='{icon} wrn-page-header__icon'
aria-hidden="true"
>
</span>
@@ -159,19 +159,19 @@ current: true
{/if}
<div
class="wire-page-header__copy"
class="wrn-page-header__copy"
>
{#if eyebrow}
<div
class="wire-page-header__eyebrow-row"
class="wrn-page-header__eyebrow-row"
>
<span
class="wire-page-header__eyebrow-mark"
class="wrn-page-header__eyebrow-mark"
aria-hidden="true"
>
</span>
<p
class="wire-page-header__eyebrow"
class="wrn-page-header__eyebrow"
>
{eyebrow}
</p>
@@ -181,7 +181,7 @@ current: true
{#if title}
<h1
id='{id}'
class="wire-page-header__title"
class="wrn-page-header__title"
>
{title}
</h1>
@@ -189,14 +189,14 @@ current: true
{#if description}
<p
class="wire-page-header__description"
class="wrn-page-header__description"
>
{description}
</p>
{/if}
<div
class="wire-page-header__meta"
class="wrn-page-header__meta"
>
<slot
name="meta"
@@ -209,7 +209,7 @@ current: true
{#if primaryLabel || secondaryLabel}
<div
class="wire-page-header__actions"
class="wrn-page-header__actions"
>
{#if secondaryLabel}
<Button
@@ -219,7 +219,7 @@ current: true
size='{compact ? "sm" : "default"}'
variant="outline"
color='{color}'
class="wire-page-header__action wire-page-header__action--secondary"
class="wrn-page-header__action wrn-page-header__action--secondary"
/>
{/if}
@@ -231,7 +231,7 @@ current: true
size='{compact ? "sm" : "default"}'
variant="default"
color='{color}'
class="wire-page-header__action wire-page-header__action--primary"
class="wrn-page-header__action wrn-page-header__action--primary"
/>
{/if}
@@ -242,7 +242,7 @@ current: true
</div>
{:else}
<div
class="wire-page-header__actions wire-page-header__actions--slot-only"
class="wrn-page-header__actions wrn-page-header__actions--slot-only"
>
<slot
name="actions"
@@ -253,7 +253,7 @@ current: true
</div>
<div
class="wire-page-header__body"
class="wrn-page-header__body"
>
<slot></slot>
</div>
@@ -262,88 +262,88 @@ current: true
}
style {
.wire-page-header {
--page-header-accent: var(--wire-color-primary);
--page-header-soft: var(--wire-color-primary-soft);
--page-header-muted: var(--wire-color-primary-muted);
--page-header-accent-text: var(--wire-color-primary-text);
.wrn-page-header {
--page-header-accent: var(--wrn-color-primary);
--page-header-soft: var(--wrn-color-primary-soft);
--page-header-muted: var(--wrn-color-primary-muted);
--page-header-accent-text: var(--wrn-color-primary-text);
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
color: var(--wire-color-text);
background: var(--wire-color-background);
color: var(--wrn-color-text);
background: var(--wrn-color-background);
}
.wire-page-header[data-color="secondary"] {
--page-header-accent: var(--wire-color-secondary);
--page-header-soft: var(--wire-color-secondary-soft);
--page-header-muted: var(--wire-color-secondary-muted);
--page-header-accent-text: var(--wire-color-secondary-text);
.wrn-page-header[data-color="secondary"] {
--page-header-accent: var(--wrn-color-secondary);
--page-header-soft: var(--wrn-color-secondary-soft);
--page-header-muted: var(--wrn-color-secondary-muted);
--page-header-accent-text: var(--wrn-color-secondary-text);
}
.wire-page-header[data-color="info"] {
--page-header-accent: var(--wire-color-info);
--page-header-soft: var(--wire-color-info-soft);
--page-header-muted: var(--wire-color-info-muted);
--page-header-accent-text: var(--wire-color-info-text);
.wrn-page-header[data-color="info"] {
--page-header-accent: var(--wrn-color-info);
--page-header-soft: var(--wrn-color-info-soft);
--page-header-muted: var(--wrn-color-info-muted);
--page-header-accent-text: var(--wrn-color-info-text);
}
.wire-page-header[data-color="success"] {
--page-header-accent: var(--wire-color-success);
--page-header-soft: var(--wire-color-success-soft);
--page-header-muted: var(--wire-color-success-muted);
--page-header-accent-text: var(--wire-color-success-text);
.wrn-page-header[data-color="success"] {
--page-header-accent: var(--wrn-color-success);
--page-header-soft: var(--wrn-color-success-soft);
--page-header-muted: var(--wrn-color-success-muted);
--page-header-accent-text: var(--wrn-color-success-text);
}
.wire-page-header[data-color="warning"] {
--page-header-accent: var(--wire-color-warning);
--page-header-soft: var(--wire-color-warning-soft);
--page-header-muted: var(--wire-color-warning-muted);
--page-header-accent-text: var(--wire-color-warning-text);
.wrn-page-header[data-color="warning"] {
--page-header-accent: var(--wrn-color-warning);
--page-header-soft: var(--wrn-color-warning-soft);
--page-header-muted: var(--wrn-color-warning-muted);
--page-header-accent-text: var(--wrn-color-warning-text);
}
.wire-page-header[data-color="danger"] {
--page-header-accent: var(--wire-color-danger);
--page-header-soft: var(--wire-color-danger-soft);
--page-header-muted: var(--wire-color-danger-muted);
--page-header-accent-text: var(--wire-color-danger-text);
.wrn-page-header[data-color="danger"] {
--page-header-accent: var(--wrn-color-danger);
--page-header-soft: var(--wrn-color-danger-soft);
--page-header-muted: var(--wrn-color-danger-muted);
--page-header-accent-text: var(--wrn-color-danger-text);
}
.wire-page-header[data-variant="soft"] {
background: var(--wire-color-surface);
.wrn-page-header[data-variant="soft"] {
background: var(--wrn-color-surface);
}
.wire-page-header[data-variant="raised"] {
background: var(--wire-color-surface-raised);
box-shadow: var(--wire-shadow-sm);
.wrn-page-header[data-variant="raised"] {
background: var(--wrn-color-surface-raised);
box-shadow: var(--wrn-shadow-sm);
}
.wire-page-header[data-variant="tinted"] {
.wrn-page-header[data-variant="tinted"] {
background:
linear-gradient(135deg, var(--page-header-soft), transparent 72%),
var(--wire-color-background);
var(--wrn-color-background);
}
.wire-page-header[data-variant="solid"] {
.wrn-page-header[data-variant="solid"] {
color: #ffffff;
background: var(--page-header-accent);
}
.wire-page-header[data-variant="minimal"] {
.wrn-page-header[data-variant="minimal"] {
background: transparent;
}
.wire-page-header[data-border-bottom="true"] {
border-bottom: 1px solid var(--wire-color-border);
.wrn-page-header[data-border-bottom="true"] {
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-page-header[data-variant="solid"][data-border-bottom="true"] {
.wrn-page-header[data-variant="solid"][data-border-bottom="true"] {
border-bottom-color: rgba(255, 255, 255, 0.18);
}
.wire-page-header__decoration {
.wrn-page-header__decoration {
position: absolute;
inset: 0;
z-index: -1;
@@ -351,7 +351,7 @@ current: true
pointer-events: none;
}
.wire-page-header__glow {
.wrn-page-header__glow {
position: absolute;
display: block;
border-radius: 999px;
@@ -359,7 +359,7 @@ current: true
opacity: 0.17;
}
.wire-page-header__glow--one {
.wrn-page-header__glow--one {
top: -9rem;
right: -5rem;
width: 24rem;
@@ -367,7 +367,7 @@ current: true
background: var(--page-header-accent);
}
.wire-page-header__glow--two {
.wrn-page-header__glow--two {
bottom: -10rem;
left: 18%;
width: 18rem;
@@ -376,30 +376,30 @@ current: true
opacity: 0.13;
}
.wire-page-header__grid-pattern {
.wrn-page-header__grid-pattern {
position: absolute;
inset: 0;
opacity: 0.2;
background-image:
linear-gradient(to right, var(--wire-color-border) 1px, transparent 1px),
linear-gradient(to bottom, var(--wire-color-border) 1px, transparent 1px);
linear-gradient(to right, var(--wrn-color-border) 1px, transparent 1px),
linear-gradient(to bottom, var(--wrn-color-border) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 78%);
}
.wire-page-header[data-variant="minimal"] .wire-page-header__decoration,
.wire-page-header[data-compact="true"] .wire-page-header__grid-pattern {
.wrn-page-header[data-variant="minimal"] .wrn-page-header__decoration,
.wrn-page-header[data-compact="true"] .wrn-page-header__grid-pattern {
display: none;
}
.wire-page-header[data-variant="solid"] .wire-page-header__grid-pattern {
.wrn-page-header[data-variant="solid"] .wrn-page-header__grid-pattern {
opacity: 0.1;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
}
.wire-page-header__inner {
.wrn-page-header__inner {
position: relative;
width: 100%;
max-width: 80rem;
@@ -407,67 +407,67 @@ current: true
padding: 1.25rem 1rem 2.75rem;
}
.wire-page-header[data-max-width="compact"] .wire-page-header__inner,
.wire-page-header[data-max-width="lg"] .wire-page-header__inner {
.wrn-page-header[data-max-width="compact"] .wrn-page-header__inner,
.wrn-page-header[data-max-width="lg"] .wrn-page-header__inner {
max-width: 64rem;
}
.wire-page-header[data-max-width="wide"] .wire-page-header__inner,
.wire-page-header[data-max-width="2xl"] .wire-page-header__inner {
.wrn-page-header[data-max-width="wide"] .wrn-page-header__inner,
.wrn-page-header[data-max-width="2xl"] .wrn-page-header__inner {
max-width: 90rem;
}
.wire-page-header[data-max-width="full"] .wire-page-header__inner {
.wrn-page-header[data-max-width="full"] .wrn-page-header__inner {
max-width: none;
}
.wire-page-header[data-compact="true"] .wire-page-header__inner {
.wrn-page-header[data-compact="true"] .wrn-page-header__inner {
padding-top: 1rem;
padding-bottom: 1.75rem;
}
.wire-page-header[data-size="lg"] .wire-page-header__inner {
.wrn-page-header[data-size="lg"] .wrn-page-header__inner {
padding-bottom: 3.5rem;
}
.wire-page-header__breadcrumb {
.wrn-page-header__breadcrumb {
display: flex;
align-items: center;
min-width: 0;
margin-bottom: 1.75rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-page-header[data-variant="solid"] .wire-page-header__breadcrumb {
.wrn-page-header[data-variant="solid"] .wrn-page-header__breadcrumb {
border-bottom-color: rgba(255, 255, 255, 0.18);
}
.wire-page-header[data-compact="true"] .wire-page-header__breadcrumb {
.wrn-page-header[data-compact="true"] .wrn-page-header__breadcrumb {
margin-bottom: 1.25rem;
padding-bottom: 0.7rem;
}
.wire-page-header__layout {
.wrn-page-header__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
align-items: start;
}
.wire-page-header__content,
.wire-page-header__copy {
.wrn-page-header__content,
.wrn-page-header__copy {
min-width: 0;
}
.wire-page-header__intro {
.wrn-page-header__intro {
display: flex;
align-items: flex-start;
gap: 1rem;
min-width: 0;
}
.wire-page-header__icon-wrap {
.wrn-page-header__icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -479,34 +479,34 @@ current: true
background: var(--page-header-soft);
border: 1px solid var(--page-header-muted);
border-radius: 1rem;
box-shadow: var(--wire-shadow-sm);
box-shadow: var(--wrn-shadow-sm);
}
.wire-page-header[data-compact="true"] .wire-page-header__icon-wrap {
.wrn-page-header[data-compact="true"] .wrn-page-header__icon-wrap {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.8rem;
}
.wire-page-header[data-variant="solid"] .wire-page-header__icon-wrap {
.wrn-page-header[data-variant="solid"] .wrn-page-header__icon-wrap {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
}
.wire-page-header__icon {
.wrn-page-header__icon {
width: 1.35rem;
height: 1.35rem;
}
.wire-page-header__eyebrow-row {
.wrn-page-header__eyebrow-row {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.wire-page-header__eyebrow-mark {
.wrn-page-header__eyebrow-mark {
width: 1.75rem;
height: 2px;
flex: 0 0 auto;
@@ -514,7 +514,7 @@ current: true
border-radius: 999px;
}
.wire-page-header__eyebrow {
.wrn-page-header__eyebrow {
margin: 0;
color: var(--page-header-accent-text);
font-size: 0.72rem;
@@ -524,20 +524,20 @@ current: true
text-transform: uppercase;
}
.wire-page-header[data-variant="solid"] .wire-page-header__eyebrow,
.wire-page-header[data-variant="solid"] .wire-page-header__title,
.wire-page-header[data-variant="solid"] .wire-page-header__description {
.wrn-page-header[data-variant="solid"] .wrn-page-header__eyebrow,
.wrn-page-header[data-variant="solid"] .wrn-page-header__title,
.wrn-page-header[data-variant="solid"] .wrn-page-header__description {
color: #ffffff;
}
.wire-page-header[data-variant="solid"] .wire-page-header__eyebrow-mark {
.wrn-page-header[data-variant="solid"] .wrn-page-header__eyebrow-mark {
background: rgba(255, 255, 255, 0.8);
}
.wire-page-header__title {
.wrn-page-header__title {
max-width: 54rem;
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-size: clamp(2rem, 4vw, 3.75rem);
font-weight: 800;
line-height: 1.08;
@@ -545,42 +545,42 @@ current: true
text-wrap: balance;
}
.wire-page-header[data-compact="true"] .wire-page-header__title {
.wrn-page-header[data-compact="true"] .wrn-page-header__title {
font-size: clamp(1.75rem, 3vw, 2.65rem);
}
.wire-page-header[data-size="lg"] .wire-page-header__title {
.wrn-page-header[data-size="lg"] .wrn-page-header__title {
font-size: clamp(2.35rem, 5vw, 4.5rem);
}
.wire-page-header__description {
.wrn-page-header__description {
max-width: 48rem;
margin: 0.9rem 0 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 1rem;
line-height: 1.75;
text-wrap: pretty;
}
.wire-page-header[data-size="lg"] .wire-page-header__description {
.wrn-page-header[data-size="lg"] .wrn-page-header__description {
font-size: 1.075rem;
}
.wire-page-header[data-variant="solid"] .wire-page-header__description {
.wrn-page-header[data-variant="solid"] .wrn-page-header__description {
opacity: 0.82;
}
.wire-page-header__meta:empty,
.wire-page-header__body:empty,
.wire-page-header__actions--slot-only:empty {
.wrn-page-header__meta:empty,
.wrn-page-header__body:empty,
.wrn-page-header__actions--slot-only:empty {
display: none;
}
.wire-page-header__meta {
.wrn-page-header__meta {
margin-top: 1.1rem;
}
.wire-page-header__actions {
.wrn-page-header__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -593,77 +593,77 @@ current: true
* stylesheet beats anything this container merely passes down by
* inheritance. State it, at a specificity the app can still override.
*/
.wire-page-header__body {
color: var(--wire-color-text);
.wrn-page-header__body {
color: var(--wrn-color-text);
margin-top: 1.75rem;
}
.wire-page-header[data-align="center"] .wire-page-header__layout {
.wrn-page-header[data-align="center"] .wrn-page-header__layout {
justify-items: center;
text-align: center;
}
.wire-page-header[data-align="center"] .wire-page-header__intro {
.wrn-page-header[data-align="center"] .wrn-page-header__intro {
flex-direction: column;
align-items: center;
}
.wire-page-header[data-align="center"] .wire-page-header__eyebrow-row,
.wire-page-header[data-align="center"] .wire-page-header__actions {
.wrn-page-header[data-align="center"] .wrn-page-header__eyebrow-row,
.wrn-page-header[data-align="center"] .wrn-page-header__actions {
justify-content: center;
}
.wire-page-header[data-align="center"] .wire-page-header__title,
.wire-page-header[data-align="center"] .wire-page-header__description {
.wrn-page-header[data-align="center"] .wrn-page-header__title,
.wrn-page-header[data-align="center"] .wrn-page-header__description {
margin-inline: auto;
}
.wire-page-header[data-align="right"] .wire-page-header__layout {
.wrn-page-header[data-align="right"] .wrn-page-header__layout {
justify-items: end;
text-align: right;
}
.wire-page-header[data-align="right"] .wire-page-header__intro {
.wrn-page-header[data-align="right"] .wrn-page-header__intro {
flex-direction: row-reverse;
}
.wire-page-header[data-align="right"] .wire-page-header__eyebrow-row,
.wire-page-header[data-align="right"] .wire-page-header__actions {
.wrn-page-header[data-align="right"] .wrn-page-header__eyebrow-row,
.wrn-page-header[data-align="right"] .wrn-page-header__actions {
justify-content: flex-end;
}
.wire-page-header[data-align="right"] .wire-page-header__title,
.wire-page-header[data-align="right"] .wire-page-header__description {
.wrn-page-header[data-align="right"] .wrn-page-header__title,
.wrn-page-header[data-align="right"] .wrn-page-header__description {
margin-left: auto;
}
@media (min-width: 640px) {
.wire-page-header__inner {
.wrn-page-header__inner {
padding-inline: 1.5rem;
}
.wire-page-header__intro {
.wrn-page-header__intro {
gap: 1.25rem;
}
}
@media (min-width: 1024px) {
.wire-page-header__inner {
.wrn-page-header__inner {
padding-inline: 2rem;
}
.wire-page-header__layout {
.wrn-page-header__layout {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 2.5rem;
}
.wire-page-header[data-align="center"] .wire-page-header__layout,
.wire-page-header[data-align="right"] .wire-page-header__layout {
.wrn-page-header[data-align="center"] .wrn-page-header__layout,
.wrn-page-header[data-align="right"] .wrn-page-header__layout {
grid-template-columns: minmax(0, 1fr);
}
.wire-page-header__actions {
.wrn-page-header__actions {
align-self: start;
justify-self: end;
justify-content: flex-end;
@@ -673,22 +673,22 @@ current: true
}
@media (max-width: 639px) {
.wire-page-header__intro {
.wrn-page-header__intro {
flex-direction: column;
}
.wire-page-header__actions {
.wrn-page-header__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.wire-page-header__action {
.wrn-page-header__action {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.wire-page-header__glow {
.wrn-page-header__glow {
filter: blur(52px);
}
}