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

chore(release): refresh private package staging
Quality / quality (ubuntu-latest) (push) Failing after 14m12s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-10 00:55:12 +05:30
parent bca9549f3a
commit db612df6cd
69 changed files with 5421 additions and 7243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.publish/ui/components/button.wrn
+300
View File
@@ -164,4 +164,304 @@ label: string = "Button"
{/if}
</span>
}
style {
.wire-spinner {
display: inline-block;
width: 1.15rem;
height: 1.15rem;
border: 2px solid var(--wire-color-border);
border-top-color: var(--wire-color-primary);
border-radius: 999px;
animation: wire-spin 0.7s linear infinite;
}
.wire-spinner--inline {
width: 1rem;
height: 1rem;
}
@keyframes wire-spin {
to {
transform: rotate(360deg);
}
}
/* --- Button --------------------------------------------------------------- */
.wire-btn {
position: relative;
--wire-btn-color: var(--wire-color-primary);
--wire-btn-contrast: var(--wire-color-primary-contrast);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
border-radius: var(--wire-radius-sm);
padding: 0 0.75rem;
cursor: pointer;
text-decoration: none;
min-height: 2rem;
transition:
color var(--wire-motion-base) var(--wire-ease-standard),
border-color var(--wire-motion-base) var(--wire-ease-standard),
background var(--wire-motion-base) var(--wire-ease-standard),
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
transform var(--wire-motion-base) var(--wire-ease-emphasized);
}
.wire-btn:active {
transform: scale(0.98);
}
.wire-btn:focus-visible {
outline: 2px solid var(--wire-color-primary);
outline-offset: 2px;
}
.wire-btn--color-primary {
--wire-btn-color: var(--wire-color-primary);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-secondary {
--wire-btn-color: var(--wire-color-muted);
--wire-btn-contrast: var(--wire-color-bg);
}
.wire-btn--color-success {
--wire-btn-color: var(--wire-color-success);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-warning {
--wire-btn-color: var(--wire-color-warning);
--wire-btn-contrast: var(--wire-color-bg);
}
.wire-btn--color-danger {
--wire-btn-color: var(--wire-color-danger);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-info {
--wire-btn-color: var(--wire-color-info);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--variant-default,
.wire-btn--variant-solid,
.wire-btn--default,
.wire-btn--solid,
.wire-btn--primary {
color: var(--wire-btn-contrast);
background: var(--wire-btn-color);
box-shadow:
0 1px 2px color-mix(in srgb, black 20%, transparent),
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 72%, transparent);
}
.wire-btn--variant-default:hover,
.wire-btn--variant-solid:hover,
.wire-btn--default:hover,
.wire-btn--solid:hover,
.wire-btn--primary:hover {
background: color-mix(in srgb, var(--wire-btn-color) 84%, black);
transform: translateY(-1px);
box-shadow:
0 0.35rem 0.9rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent),
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 82%, transparent);
}
.wire-btn--variant-outline,
.wire-btn--outline {
color: var(--wire-btn-color);
background: transparent;
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
}
.wire-btn--variant-outline:hover,
.wire-btn--outline:hover {
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
border-color: var(--wire-btn-color);
}
.wire-btn--variant-destructive,
.wire-btn--danger,
.wire-btn--destructive {
color: var(--wire-btn-color);
background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent);
border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent);
}
.wire-btn--danger,
.wire-btn--destructive {
--wire-btn-color: var(--wire-color-danger);
}
.wire-btn--variant-destructive:hover,
.wire-btn--danger:hover,
.wire-btn--destructive:hover {
background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
}
.wire-btn--variant-ghost,
.wire-btn--ghost {
background: transparent;
color: var(--wire-btn-color);
}
.wire-btn--variant-ghost:hover,
.wire-btn--ghost:hover {
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
}
.wire-btn--variant-secondary,
.wire-btn--secondary {
color: var(--wire-color-text);
background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface));
border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border));
box-shadow: var(--wire-shadow-1);
}
.wire-btn--variant-secondary:hover,
.wire-btn--secondary:hover {
color: var(--wire-btn-color);
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface));
transform: translateY(-2px);
}
.wire-btn--variant-link,
.wire-btn--link {
min-height: auto;
padding: 0;
color: var(--wire-btn-color);
background: transparent;
border-color: transparent;
border-radius: 0;
text-underline-offset: 0.22em;
}
.wire-btn--variant-link:hover,
.wire-btn--link:hover {
text-decoration: underline;
}
.wire-btn:disabled,
.wire-btn[aria-busy="true"] {
cursor: not-allowed;
opacity: 0.58;
transform: none;
box-shadow: none;
}
.wire-btn--size-xs,
.wire-btn--xs {
min-height: 1.5rem;
padding-inline: 0.5rem;
gap: 0.25rem;
font-size: 0.75rem;
}
.wire-btn--size-sm,
.wire-btn--sm {
min-height: 2.125rem;
padding-inline: 0.625rem;
gap: 0.25rem;
font-size: 0.8rem;
}
.wire-btn--size-default,
.wire-btn--md {
min-height: 2.5rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
}
.wire-btn--size-lg,
.wire-btn--lg {
min-height: 2.75rem;
padding-inline: 0.875rem;
font-size: 0.925rem;
}
.wire-btn--size-icon,
.wire-btn--size-icon-xs,
.wire-btn--size-icon-sm,
.wire-btn--size-icon-lg,
.wire-btn--icon,
.wire-btn--icon-xs,
.wire-btn--icon-sm,
.wire-btn--icon-lg {
flex: none;
padding: 0;
}
.wire-btn--size-icon,
.wire-btn--icon {
width: 2rem;
height: 2rem;
}
.wire-btn--size-icon-xs,
.wire-btn--icon-xs {
width: 1.5rem;
min-height: 1.5rem;
}
.wire-btn--size-icon-sm,
.wire-btn--icon-sm {
width: 1.75rem;
min-height: 1.75rem;
}
.wire-btn--size-icon-lg,
.wire-btn--icon-lg {
width: 2.25rem;
min-height: 2.25rem;
}
.wire-btn__icon {
width: 1rem;
height: 1rem;
flex: none;
}
.wire-btn__label {
font-weight: 650;
}
.wire-btn:hover > .wire-btn__tooltip,
.wire-btn:focus-visible > .wire-btn__tooltip {
opacity: 1;
transform: translate(-50%, 0);
}
.wire-action {
position: relative;
display: inline-flex;
}
.wire-btn--pill {
border-radius: 999px;
}
.wire-btn--with-description {
min-height: 3.5rem;
justify-content: flex-start;
padding: 0.6rem 0.875rem;
text-align: left;
}
.wire-btn__copy {
display: grid;
min-width: 0;
gap: 0.15rem;
}
.wire-btn__description {
color: currentColor;
font-size: 0.75rem;
font-weight: 450;
line-height: 1.35;
opacity: 0.74;
}
.wire-btn__tooltip {
position: absolute;
z-index: 80;
inset-block-end: calc(100% + 0.5rem);
inset-inline-start: 50%;
width: max-content;
max-width: min(16rem, calc(100vw - 2rem));
padding: 0.4rem 0.6rem;
color: var(--wire-color-bg);
background: var(--wire-color-text);
border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border));
border-radius: var(--wire-radius-sm);
box-shadow: var(--wire-shadow-2);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 0.25rem);
transition:
opacity var(--wire-motion-fast) var(--wire-ease-standard),
transform var(--wire-motion-fast) var(--wire-ease-standard);
}
}
}