WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): replace Tailwind utilities with local styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 13:58:13 +05:30
parent ff62918dbb
commit 5c2c6a0a8f
11 changed files with 473 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/TextLink.wrn
+66 -28
View File
@@ -29,18 +29,16 @@ label: string = "Learn more"
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
class='inline-flex min-w-0 {class}'
class='wire-text-link {class}'
>
{#if disabled}
<span
aria-disabled="true"
class="inline-flex cursor-not-allowed items-center gap-2 font-semibold opacity-50"
class:text-sm='size === "sm" || size === "default"'
class:text-base='size === "md"'
class:text-lg='size === "lg"'
class="wire-text-link__control"
data-size='{size}'
>
{#if icon && iconPosition === "start"}
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
<span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
{/if}
<span>{label}</span>
</span>
@@ -49,42 +47,82 @@ label: string = "Learn more"
href='{href}'
target='{target}'
rel='{external ? (rel || "noopener noreferrer") : rel}'
class="group inline-flex items-center gap-2 rounded-md font-semibold outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)]"
class:text-sm='size === "sm" || size === "default"'
class:text-base='size === "md"'
class:text-lg='size === "lg"'
class:text-[var(--wire-color-primary)]='color === "primary"'
class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
class:text-[var(--wire-color-secondary)]='color === "secondary"'
class:text-[var(--wire-color-success)]='color === "success"'
class:text-[var(--wire-color-warning-text)]='color === "warning"'
class:text-[var(--wire-color-danger)]='color === "danger"'
class:text-[var(--wire-color-info)]='color === "info"'
class:text-[var(--wire-color-text)]='color === "neutral"'
class:underline='underline'
class:underline-offset-4='underline'
class:rounded-lg='variant === "button"'
class:bg-[var(--wire-color-primary-soft)]='variant === "button" && color === "primary"'
class:px-3='variant === "button"'
class:py-2='variant === "button"'
class="wire-text-link__control"
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
data-underline='{underline ? "true" : "false"}'
>
{#if icon && iconPosition === "start"}
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
<span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
{/if}
<span>{label}</span>
{#if icon && iconPosition === "end"}
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
<span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
{/if}
{#if external}
<span class="icon-[lucide--external-link] size-4 shrink-0" aria-hidden="true"></span>
<span class="icon-[lucide--external-link] wire-text-link__icon" aria-hidden="true"></span>
{:else if showArrow}
<span class="icon-[lucide--arrow-right] size-4 shrink-0 transition-transform group-hover:translate-x-1" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wire-text-link__icon wire-text-link__arrow" aria-hidden="true"></span>
{/if}
</a>
{/if}
</span>
}
style {
.wire-text-link {
display: inline-flex;
min-width: 0;
}
.wire-text-link__control {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: var(--wire-radius-sm);
color: var(--wire-color-primary);
font-weight: 600;
outline: none;
transition: color var(--wire-motion-base) var(--wire-ease-standard);
}
span.wire-text-link__control {
cursor: not-allowed;
opacity: 0.5;
}
.wire-text-link__control[data-size="sm"],
.wire-text-link__control[data-size="default"] { font-size: 0.875rem; }
.wire-text-link__control[data-size="md"] { font-size: 1rem; }
.wire-text-link__control[data-size="lg"] { font-size: 1.125rem; }
.wire-text-link__control[data-color="secondary"] { color: var(--wire-color-secondary); }
.wire-text-link__control[data-color="success"] { color: var(--wire-color-success); }
.wire-text-link__control[data-color="warning"] { color: var(--wire-color-warning-text); }
.wire-text-link__control[data-color="danger"] { color: var(--wire-color-danger); }
.wire-text-link__control[data-color="info"] { color: var(--wire-color-info); }
.wire-text-link__control[data-color="neutral"] { color: var(--wire-color-text); }
.wire-text-link__control[data-color="primary"]:hover { color: var(--wire-color-primary-hover); }
.wire-text-link__control[data-underline="true"] {
text-decoration: underline;
text-underline-offset: 0.25rem;
}
.wire-text-link__control[data-variant="button"] {
padding: 0.5rem 0.75rem;
border-radius: var(--wire-radius);
}
.wire-text-link__control[data-variant="button"][data-color="primary"] {
background: var(--wire-color-primary-soft);
}
.wire-text-link__control:focus-visible {
outline: 2px solid var(--wire-color-focus);
outline-offset: 2px;
}
.wire-text-link__icon { width: 1rem; height: 1rem; flex: none; }
.wire-text-link__arrow { transition: transform var(--wire-motion-base) var(--wire-ease-standard); }
.wire-text-link__control:hover .wire-text-link__arrow { transform: translateX(0.25rem); }
}
}