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/AuthSplitLayout.wrn
+84 -84
View File
@@ -12,13 +12,13 @@ component AuthSplitLayout {
view {
<main
class="wire-auth-split wire-component--color-{color} wire-component--size-{size} {class}"
class="wrn-auth-split wrn-component--color-{color} wrn-component--size-{size} {class}"
>
<section
class="wire-auth-split__content"
class="wrn-auth-split__content"
>
<div
class="wire-auth-split__brand"
class="wrn-auth-split__brand"
>
<span
class="icon-[lucide--shield-check]"
@@ -28,10 +28,10 @@ component AuthSplitLayout {
<span><strong>{brand}</strong><small>Unified identity and access</small></span>
</div>
<div
class="wire-auth-split__message"
class="wrn-auth-split__message"
>
<span
class="wire-auth-split__eyebrow"
class="wrn-auth-split__eyebrow"
>
{eyebrow}
</span>
@@ -40,7 +40,7 @@ component AuthSplitLayout {
<p>{description}</p>
{/if}
<div
class="wire-auth-split__features"
class="wrn-auth-split__features"
>
{#each features as item}
<article>
@@ -62,16 +62,16 @@ component AuthSplitLayout {
/>
</div>
<small
class="wire-auth-split__legal"
class="wrn-auth-split__legal"
>
Authorised access only · Activity may be monitored and audited.
</small>
</section>
<section
class="wire-auth-split__form"
class="wrn-auth-split__form"
>
<div
class="wire-auth-split__form-inner"
class="wrn-auth-split__form-inner"
>
<slot
name="form"
@@ -83,24 +83,24 @@ component AuthSplitLayout {
style {
/* Shared authentication shell and forms */
.wire-auth-split {
.wrn-auth-split {
display: grid;
width: 100%;
height: 100dvh;
min-height: 0;
overflow: hidden;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
color: var(--wire-color-text);
background: var(--wire-color-bg);
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
}
.wire-auth-split__content,
.wire-auth-split__form {
.wrn-auth-split__content,
.wrn-auth-split__form {
min-width: 0;
padding: clamp(1.5rem, 5vw, 5rem);
}
.wire-auth-split__content {
.wrn-auth-split__content {
display: flex;
height: 100dvh;
min-height: 0;
@@ -110,54 +110,54 @@ component AuthSplitLayout {
background:
radial-gradient(
circle at 15% 15%,
color-mix(in srgb, var(--wire-color-primary) 22%, transparent),
color-mix(in srgb, var(--wrn-color-primary) 22%, transparent),
transparent 34%
),
linear-gradient(145deg, var(--wire-color-surface-2), var(--wire-color-bg));
border-right: 1px solid var(--wire-color-border);
linear-gradient(145deg, var(--wrn-color-surface-2), var(--wrn-color-bg));
border-right: 1px solid var(--wrn-color-border);
}
.wire-auth-split__brand {
.wrn-auth-split__brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.wire-auth-split__brand > span:first-child {
.wrn-auth-split__brand > span:first-child {
width: 2.5rem;
height: 2.5rem;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
.wire-auth-split__brand > span:last-child {
.wrn-auth-split__brand > span:last-child {
display: grid;
}
.wire-auth-split__brand strong {
.wrn-auth-split__brand strong {
font-size: 0.875rem;
font-weight: 650;
}
.wire-auth-split__brand small,
.wire-auth-split__legal {
color: var(--wire-color-muted);
.wrn-auth-split__brand small,
.wrn-auth-split__legal {
color: var(--wrn-color-muted);
font-size: 0.65rem;
}
.wire-auth-split__message {
.wrn-auth-split__message {
width: min(100%, 36rem);
margin-block: 3rem;
}
.wire-auth-split__eyebrow {
color: var(--wire-color-primary);
.wrn-auth-split__eyebrow {
color: var(--wrn-color-primary);
font-size: 0.7rem;
font-weight: 650;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.wire-auth-split__message h1 {
.wrn-auth-split__message h1 {
max-width: 14ch;
margin: 0.65rem 0 0;
font-size: clamp(2rem, 4vw, 3.75rem);
@@ -166,50 +166,50 @@ component AuthSplitLayout {
line-height: 1.08;
}
.wire-auth-split__message > p {
.wrn-auth-split__message > p {
max-width: 34rem;
margin: 1rem 0 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.875rem;
line-height: 1.7;
}
.wire-auth-split__features {
.wrn-auth-split__features {
display: grid;
margin-top: 2rem;
gap: 1rem;
}
.wire-auth-split__features article {
.wrn-auth-split__features article {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.wire-auth-split__features article > span:first-child {
.wrn-auth-split__features article > span:first-child {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.1rem;
flex: none;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
.wire-auth-split__features article > span:last-child {
.wrn-auth-split__features article > span:last-child {
display: grid;
}
.wire-auth-split__features strong {
.wrn-auth-split__features strong {
font-size: 0.75rem;
font-weight: 600;
}
.wire-auth-split__features small {
.wrn-auth-split__features small {
margin-top: 0.15rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.68rem;
}
.wire-auth-split__form {
.wrn-auth-split__form {
display: grid;
height: 100dvh;
min-height: 0;
@@ -217,39 +217,39 @@ component AuthSplitLayout {
overflow-y: auto;
overscroll-behavior: contain;
place-items: center;
background: var(--wire-color-surface);
background: var(--wrn-color-surface);
}
.wire-auth-split__form-inner {
.wrn-auth-split__form-inner {
width: min(100%, 30rem);
}
@media (max-width: 800px) {
.wire-auth-split {
.wrn-auth-split {
height: auto;
min-height: 100dvh;
overflow: visible;
grid-template-columns: 1fr;
}
.wire-auth-split__content {
.wrn-auth-split__content {
height: auto;
min-height: auto;
overflow: visible;
padding-bottom: 2rem;
border-right: 0;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-auth-split__message {
.wrn-auth-split__message {
margin-block: 2rem 0;
}
.wire-auth-split__message h1 {
.wrn-auth-split__message h1 {
font-size: clamp(1.75rem, 8vw, 2.5rem);
}
.wire-auth-split__features,
.wire-auth-split__legal {
.wrn-auth-split__features,
.wrn-auth-split__legal {
display: none;
}
.wire-auth-split__form {
.wrn-auth-split__form {
height: auto;
min-height: auto;
overflow: visible;
@@ -260,70 +260,70 @@ component AuthSplitLayout {
/* Shared component foundation. */
.wire-component {
--wire-component-color: var(--wire-color-primary);
--wire-component-scale: 1;
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wire-component--color-primary {
--wire-component-color: var(--wire-color-primary);
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wire-component--color-secondary {
--wire-component-color: var(--wire-color-secondary);
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wire-component--color-success {
--wire-component-color: var(--wire-color-success);
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wire-component--color-warning {
--wire-component-color: var(--wire-color-warning);
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wire-component--color-danger {
--wire-component-color: var(--wire-color-danger);
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wire-component--color-info {
--wire-component-color: var(--wire-color-info);
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wire-component--size-xs {
--wire-component-scale: 0.78;
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wire-component--size-sm {
--wire-component-scale: 0.88;
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wire-component--size-default,
.wire-component--size-md {
--wire-component-scale: 1;
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wire-component--size-lg {
--wire-component-scale: 1.14;
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wire-component--size-xl {
--wire-component-scale: 1.28;
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wire-component:not(.wire-btn) {
font-size: calc(1em * var(--wire-component-scale));
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wire-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wire-component-color);
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wire-component p {
.wrn-component p {
margin: 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
line-height: 1.6;
}
}