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/Blockquote.wrn
+115 -115
View File
@@ -18,7 +18,7 @@ component Blockquote {
view {
<figure
{...attrs}
class="wire-component wire-next--blockquote wire-component--color-{color} wire-component--size-{size} {class}"
class="wrn-component wrn-next--blockquote wrn-component--color-{color} wrn-component--size-{size} {class}"
data-size="{size}"
data-color="{color}"
data-align="{align}"
@@ -27,10 +27,10 @@ component Blockquote {
>
<blockquote cite="{citationUrl}">
{#if quoteMark}
<span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
<span class="wrn-next__blockquote-mark" aria-hidden="true">“</span>
{/if}
<div class="wire-next__blockquote-copy">
<div class="wrn-next__blockquote-copy">
{#if quote}
<p>{quote}</p>
{:else}
@@ -40,17 +40,17 @@ component Blockquote {
</blockquote>
{#if citation || citationTitle || avatarSrc}
<figcaption class="wire-next__blockquote-citation">
<figcaption class="wrn-next__blockquote-citation">
{#if avatarSrc}
<img
class="wire-next__blockquote-avatar"
class="wrn-next__blockquote-avatar"
src="{avatarSrc}"
alt="{avatarAlt}"
loading="lazy"
/>
{/if}
<span class="wire-next__blockquote-attribution">
<span class="wrn-next__blockquote-attribution">
{#if citation}
{#if citationUrl}
<cite><a href="{citationUrl}">{citation}</a></cite>
@@ -66,59 +66,59 @@ component Blockquote {
}
style {
.wire-next--blockquote {
--wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary));
--wire-blockquote-font-size: 1.125rem;
--wire-blockquote-mark-size: 4.25rem;
.wrn-next--blockquote {
--wrn-blockquote-color: var(--wrn-component-color, var(--wrn-color-primary));
--wrn-blockquote-font-size: 1.125rem;
--wrn-blockquote-mark-size: 4.25rem;
display: grid;
gap: 1.25rem;
width: 100%;
color: var(--wire-color-text);
color: var(--wrn-color-text);
text-align: left;
}
.wire-next--blockquote[data-size="xs"] {
--wire-blockquote-font-size: 0.875rem;
--wire-blockquote-mark-size: 3rem;
.wrn-next--blockquote[data-size="xs"] {
--wrn-blockquote-font-size: 0.875rem;
--wrn-blockquote-mark-size: 3rem;
}
.wire-next--blockquote[data-size="sm"] {
--wire-blockquote-font-size: 1rem;
--wire-blockquote-mark-size: 3.5rem;
.wrn-next--blockquote[data-size="sm"] {
--wrn-blockquote-font-size: 1rem;
--wrn-blockquote-mark-size: 3.5rem;
}
.wire-next--blockquote[data-size="md"],
.wire-next--blockquote[data-size="default"] {
--wire-blockquote-font-size: 1.125rem;
.wrn-next--blockquote[data-size="md"],
.wrn-next--blockquote[data-size="default"] {
--wrn-blockquote-font-size: 1.125rem;
}
.wire-next--blockquote[data-size="lg"] {
--wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
--wire-blockquote-mark-size: 5rem;
.wrn-next--blockquote[data-size="lg"] {
--wrn-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
--wrn-blockquote-mark-size: 5rem;
}
.wire-next--blockquote[data-size="xl"] {
--wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
--wire-blockquote-mark-size: 5.75rem;
.wrn-next--blockquote[data-size="xl"] {
--wrn-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
--wrn-blockquote-mark-size: 5.75rem;
}
.wire-next--blockquote > blockquote {
.wrn-next--blockquote > blockquote {
position: relative;
display: block;
min-width: 0;
margin: 0;
padding-top: calc(var(--wire-blockquote-mark-size) * 0.78);
padding-top: calc(var(--wrn-blockquote-mark-size) * 0.78);
}
.wire-next__blockquote-mark {
.wrn-next__blockquote-mark {
position: absolute;
top: 0;
inset-inline: 0;
display: block;
width: 100%;
color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text));
color: color-mix(in srgb, var(--wrn-blockquote-color) 28%, var(--wrn-color-text));
font-family: Georgia, "Times New Roman", serif;
font-size: var(--wire-blockquote-mark-size);
font-size: var(--wrn-blockquote-mark-size);
font-style: normal;
font-weight: 700;
line-height: 0.8;
@@ -126,213 +126,213 @@ component Blockquote {
user-select: none;
}
.wire-next__blockquote-copy {
.wrn-next__blockquote-copy {
min-width: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: var(--wire-blockquote-font-size);
font-size: var(--wrn-blockquote-font-size);
line-height: 1.55;
text-wrap: pretty;
}
.wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy {
.wrn-next--blockquote[data-italic="true"] .wrn-next__blockquote-copy {
font-style: italic;
}
.wire-next__blockquote-copy > :first-child {
.wrn-next__blockquote-copy > :first-child {
margin-top: 0;
}
.wire-next__blockquote-copy > :last-child {
.wrn-next__blockquote-copy > :last-child {
margin-bottom: 0;
}
.wire-next__blockquote-citation {
.wrn-next__blockquote-citation {
display: inline-flex;
gap: 0.75rem;
align-items: center;
width: fit-content;
margin-inline-start: 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.875rem;
line-height: 1.35;
}
.wire-next__blockquote-avatar {
.wrn-next__blockquote-avatar {
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent);
border: 2px solid color-mix(in srgb, var(--wrn-blockquote-color) 35%, transparent);
border-radius: 999px;
object-fit: cover;
}
.wire-next__blockquote-attribution {
.wrn-next__blockquote-attribution {
display: grid;
gap: 0.15rem;
}
.wire-next__blockquote-attribution cite {
color: var(--wire-color-text);
.wrn-next__blockquote-attribution cite {
color: var(--wrn-color-text);
font-style: normal;
font-weight: 700;
}
.wire-next__blockquote-attribution a {
.wrn-next__blockquote-attribution a {
color: inherit;
text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent);
text-decoration-color: color-mix(in srgb, var(--wrn-blockquote-color) 55%, transparent);
text-underline-offset: 0.2em;
}
.wire-next__blockquote-attribution a:hover {
color: var(--wire-blockquote-color);
.wrn-next__blockquote-attribution a:hover {
color: var(--wrn-blockquote-color);
}
.wire-next--blockquote[data-align="center"] {
.wrn-next--blockquote[data-align="center"] {
text-align: center;
}
.wire-next--blockquote[data-align="right"],
.wire-next--blockquote[data-align="end"] {
.wrn-next--blockquote[data-align="right"],
.wrn-next--blockquote[data-align="end"] {
text-align: right;
}
.wire-next--blockquote[data-align="center"] > blockquote,
.wire-next--blockquote[data-align="right"] > blockquote,
.wire-next--blockquote[data-align="end"] > blockquote {
.wrn-next--blockquote[data-align="center"] > blockquote,
.wrn-next--blockquote[data-align="right"] > blockquote,
.wrn-next--blockquote[data-align="end"] > blockquote {
text-align: inherit;
}
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark {
.wrn-next--blockquote[data-align="center"] .wrn-next__blockquote-mark {
text-align: center;
}
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark {
.wrn-next--blockquote[data-align="right"] .wrn-next__blockquote-mark,
.wrn-next--blockquote[data-align="end"] .wrn-next__blockquote-mark {
text-align: end;
}
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation {
.wrn-next--blockquote[data-align="center"] .wrn-next__blockquote-citation {
margin-inline: auto;
}
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation {
.wrn-next--blockquote[data-align="right"] .wrn-next__blockquote-citation,
.wrn-next--blockquote[data-align="end"] .wrn-next__blockquote-citation {
margin-inline-start: auto;
}
.wire-next--blockquote[data-variant="bordered"],
.wire-next--blockquote[data-variant="border"],
.wire-next--blockquote[data-variant="left-border"] {
.wrn-next--blockquote[data-variant="bordered"],
.wrn-next--blockquote[data-variant="border"],
.wrn-next--blockquote[data-variant="left-border"] {
padding-inline-start: 1.5rem;
border-inline-start: 4px solid var(--wire-blockquote-color);
border-inline-start: 4px solid var(--wrn-blockquote-color);
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark {
.wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-mark,
.wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-mark,
.wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-mark {
display: none;
}
.wire-next--blockquote[data-variant="bordered"] > blockquote,
.wire-next--blockquote[data-variant="border"] > blockquote,
.wire-next--blockquote[data-variant="left-border"] > blockquote {
.wrn-next--blockquote[data-variant="bordered"] > blockquote,
.wrn-next--blockquote[data-variant="border"] > blockquote,
.wrn-next--blockquote[data-variant="left-border"] > blockquote {
display: block;
padding-top: 0;
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy {
.wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-copy,
.wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-copy,
.wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-copy {
padding-top: 0;
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation {
.wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-citation,
.wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-citation,
.wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-citation {
margin-inline-start: 0;
}
@media (max-width: 480px) {
.wire-next--blockquote {
--wire-blockquote-mark-size: 3.25rem;
--wire-blockquote-font-size: 1rem;
.wrn-next--blockquote {
--wrn-blockquote-mark-size: 3.25rem;
--wrn-blockquote-font-size: 1rem;
gap: 1rem;
}
.wire-next--blockquote[data-size="lg"],
.wire-next--blockquote[data-size="xl"] {
--wire-blockquote-font-size: 1.25rem;
.wrn-next--blockquote[data-size="lg"],
.wrn-next--blockquote[data-size="xl"] {
--wrn-blockquote-font-size: 1.25rem;
}
.wire-next__blockquote-citation {
.wrn-next__blockquote-citation {
margin-inline-start: 0;
}
}
/* 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;
}
}