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/SectionHeader.wrn
+50 -50
View File
@@ -16,40 +16,40 @@ component SectionHeader {
<header
{...attrs}
data-ui-component="SectionHeader"
class='wire-section-header {class}'
class='wrn-section-header {class}'
data-align='{align}'
data-size='{size}'
data-color='{color}'
data-max-width='{maxWidth}'
>
<div class="wire-section-header__copy">
<div class="wire-section-header__eyebrow-row">
<div class="wrn-section-header__copy">
<div class="wrn-section-header__eyebrow-row">
<slot name="icon"></slot>
<p class="wire-section-header__eyebrow" data-show="eyebrow">{eyebrow}</p>
<p class="wrn-section-header__eyebrow" data-show="eyebrow">{eyebrow}</p>
</div>
{#if headingLevel === 1}
<h1 id='{id}' class="wire-section-header__title">{title}</h1>
<h1 id='{id}' class="wrn-section-header__title">{title}</h1>
{:else if headingLevel === 3}
<h3 id='{id}' class="wire-section-header__title">{title}</h3>
<h3 id='{id}' class="wrn-section-header__title">{title}</h3>
{:else}
<h2 id='{id}' class="wire-section-header__title">{title}</h2>
<h2 id='{id}' class="wrn-section-header__title">{title}</h2>
{/if}
<p class="wire-section-header__description" data-show="description">{description}</p>
<p class="wrn-section-header__description" data-show="description">{description}</p>
<slot></slot>
</div>
<div class="wire-section-header__actions">
<div class="wrn-section-header__actions">
<slot name="actions"></slot>
</div>
</header>
}
style {
.wire-section-header {
--section-header-accent: var(--wire-color-primary);
.wrn-section-header {
--section-header-accent: var(--wrn-color-primary);
--section-header-title: 1.875rem;
display: flex;
flex-direction: column;
@@ -57,76 +57,76 @@ component SectionHeader {
min-width: 0;
}
.wire-section-header[data-color="secondary"] {
--section-header-accent: var(--wire-color-secondary);
.wrn-section-header[data-color="secondary"] {
--section-header-accent: var(--wrn-color-secondary);
}
.wire-section-header[data-color="success"] {
--section-header-accent: var(--wire-color-success);
.wrn-section-header[data-color="success"] {
--section-header-accent: var(--wrn-color-success);
}
.wire-section-header[data-color="warning"] {
--section-header-accent: var(--wire-color-warning-text);
.wrn-section-header[data-color="warning"] {
--section-header-accent: var(--wrn-color-warning-text);
}
.wire-section-header[data-color="danger"] {
--section-header-accent: var(--wire-color-danger);
.wrn-section-header[data-color="danger"] {
--section-header-accent: var(--wrn-color-danger);
}
.wire-section-header[data-color="info"] {
--section-header-accent: var(--wire-color-info);
.wrn-section-header[data-color="info"] {
--section-header-accent: var(--wrn-color-info);
}
.wire-section-header[data-align="center"] {
.wrn-section-header[data-align="center"] {
align-items: center;
text-align: center;
}
.wire-section-header[data-align="right"] {
.wrn-section-header[data-align="right"] {
align-items: flex-end;
text-align: right;
}
.wire-section-header__copy {
.wrn-section-header__copy {
min-width: 0;
}
.wire-section-header[data-align="center"] .wire-section-header__copy {
.wrn-section-header[data-align="center"] .wrn-section-header__copy {
margin-inline: auto;
}
.wire-section-header[data-max-width="xl"] .wire-section-header__copy {
.wrn-section-header[data-max-width="xl"] .wrn-section-header__copy {
max-width: 36rem;
}
.wire-section-header[data-max-width="2xl"] .wire-section-header__copy {
.wrn-section-header[data-max-width="2xl"] .wrn-section-header__copy {
max-width: 42rem;
}
.wire-section-header[data-max-width="3xl"] .wire-section-header__copy {
.wrn-section-header[data-max-width="3xl"] .wrn-section-header__copy {
max-width: 48rem;
}
.wire-section-header[data-max-width="4xl"] .wire-section-header__copy {
.wrn-section-header[data-max-width="4xl"] .wrn-section-header__copy {
max-width: 56rem;
}
.wire-section-header__eyebrow-row {
.wrn-section-header__eyebrow-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.wire-section-header[data-align="center"] .wire-section-header__eyebrow-row {
.wrn-section-header[data-align="center"] .wrn-section-header__eyebrow-row {
justify-content: center;
}
.wire-section-header[data-align="right"] .wire-section-header__eyebrow-row {
.wrn-section-header[data-align="right"] .wrn-section-header__eyebrow-row {
justify-content: flex-end;
}
.wire-section-header__eyebrow {
.wrn-section-header__eyebrow {
margin: 0;
color: var(--section-header-accent);
font-size: 0.75rem;
@@ -135,35 +135,35 @@ component SectionHeader {
text-transform: uppercase;
}
.wire-section-header[data-size="lg"] .wire-section-header__eyebrow {
.wrn-section-header[data-size="lg"] .wrn-section-header__eyebrow {
font-size: 0.875rem;
}
.wire-section-header__title {
.wrn-section-header__title {
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-size: var(--section-header-title);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.wire-section-header__description {
.wrn-section-header__description {
margin: 1rem 0 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 1rem;
line-height: 1.7;
}
.wire-section-header[data-size="sm"] .wire-section-header__description {
.wrn-section-header[data-size="sm"] .wrn-section-header__description {
font-size: 0.875rem;
}
.wire-section-header[data-size="lg"] .wire-section-header__description {
.wrn-section-header[data-size="lg"] .wrn-section-header__description {
font-size: 1.125rem;
}
.wire-section-header__actions {
.wrn-section-header__actions {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
@@ -171,12 +171,12 @@ component SectionHeader {
gap: 0.75rem;
}
.wire-section-header[data-align="center"] .wire-section-header__actions {
.wrn-section-header[data-align="center"] .wrn-section-header__actions {
justify-content: center;
}
.wire-section-header[data-align="right"] .wire-section-header__actions,
.wire-section-header[data-align="split"] .wire-section-header__actions {
.wrn-section-header[data-align="right"] .wrn-section-header__actions,
.wrn-section-header[data-align="split"] .wrn-section-header__actions {
justify-content: flex-end;
}
@@ -184,30 +184,30 @@ component SectionHeader {
* Heading sizes scale up with the viewport rather than being fixed, and
* split only becomes a row once there is width for two columns.
*/
.wire-section-header[data-size="sm"] {
.wrn-section-header[data-size="sm"] {
--section-header-title: 1.5rem;
}
.wire-section-header[data-size="lg"] {
.wrn-section-header[data-size="lg"] {
--section-header-title: 2.25rem;
}
@media (min-width: 640px) {
.wire-section-header {
.wrn-section-header {
--section-header-title: 2.25rem;
}
.wire-section-header[data-size="sm"] {
.wrn-section-header[data-size="sm"] {
--section-header-title: 1.75rem;
}
.wire-section-header[data-size="lg"] {
.wrn-section-header[data-size="lg"] {
--section-header-title: 3rem;
}
}
@media (min-width: 1024px) {
.wire-section-header[data-align="split"] {
.wrn-section-header[data-align="split"] {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;