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/AuthForm.wrn
+49 -49
View File
@@ -49,9 +49,9 @@ component AuthForm {
}
view {
<section class="wire-auth-form wire-component--color-{color} wire-component--size-{size} {class}">
<section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}">
<header>
<span class="wire-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
<span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
<div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
</header>
<form
@@ -79,56 +79,56 @@ component AuthForm {
<PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
{/if}
{#if mode === "sign-in" && showRemember}
<div class="wire-auth-form__options">
<div class="wrn-auth-form__options">
<Checkbox label="Remember this device" name="rememberDevice" value="on" />
<a href="/forgot-password">Forgot password?</a>
</div>
{/if}
<Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wire-auth-form__submit" />
<Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wrn-auth-form__submit" />
</form>
<slot />
</section>
}
style {
.wire-auth-form {
.wrn-auth-form {
width: 100%;
}
.wire-auth-form > header {
.wrn-auth-form > header {
display: flex;
margin-bottom: 1.5rem;
align-items: flex-start;
gap: 0.85rem;
}
.wire-auth-form__icon {
.wrn-auth-form__icon {
width: 2rem;
height: 2rem;
flex: none;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
.wire-auth-form h2 {
.wrn-auth-form h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 650;
letter-spacing: -0.025em;
}
.wire-auth-form header p {
.wrn-auth-form header p {
margin: 0.35rem 0 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.75rem;
line-height: 1.5;
}
.wire-auth-form form {
.wrn-auth-form form {
display: grid;
gap: 1rem;
}
.wire-auth-form__options {
.wrn-auth-form__options {
display: flex;
align-items: center;
justify-content: space-between;
@@ -136,82 +136,82 @@ component AuthForm {
font-size: 0.7rem;
}
.wire-auth-form__options a {
color: var(--wire-color-primary);
.wrn-auth-form__options a {
color: var(--wrn-color-primary);
text-decoration: none;
}
.wire-auth-form__submit {
.wrn-auth-form__submit {
width: 100%;
justify-content: center;
}
/* 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;
}
}