fix(ui): render polished SSR-safe component variants
This commit is contained in:
+258
-6
@@ -4,6 +4,17 @@
|
||||
* Override any of these classes in your own CSS (it loads after ui.css).
|
||||
*/
|
||||
|
||||
/* SSR visibility fallback. The reactive runtime also manages `data-show`, but
|
||||
* server-rendered components must not flash or permanently expose inactive
|
||||
* branches before hydration (for example an action's link and button at once). */
|
||||
[data-show=""],
|
||||
[data-show="false"],
|
||||
[data-show="0"],
|
||||
[data-show="null"],
|
||||
[data-show="undefined"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- Layout --------------------------------------------------------------- */
|
||||
.wire-container {
|
||||
width: 100%;
|
||||
@@ -109,13 +120,16 @@
|
||||
padding: 0.55rem 0.9rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
min-height: 44px;
|
||||
transition:
|
||||
filter 0.15s ease,
|
||||
background 0.15s ease,
|
||||
transform 0.04s ease;
|
||||
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: translateY(1px);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.wire-btn:focus-visible {
|
||||
outline: 2px solid var(--wire-color-primary);
|
||||
@@ -130,9 +144,12 @@
|
||||
.wire-btn--primary {
|
||||
background: var(--wire-color-primary);
|
||||
color: var(--wire-color-primary-contrast);
|
||||
box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 20%, transparent);
|
||||
}
|
||||
.wire-btn--primary:hover {
|
||||
background: var(--wire-color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
|
||||
}
|
||||
.wire-btn--danger {
|
||||
background: var(--wire-color-danger);
|
||||
@@ -146,6 +163,25 @@
|
||||
.wire-btn--ghost:hover {
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
.wire-btn--secondary {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
border-color: var(--wire-color-border);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-btn--secondary:hover {
|
||||
color: var(--wire-color-primary);
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border));
|
||||
background: var(--wire-color-surface-2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.wire-btn:disabled,
|
||||
.wire-btn[aria-busy="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-btn--sm {
|
||||
padding: 0.35rem 0.6rem;
|
||||
@@ -155,8 +191,9 @@
|
||||
padding: 0.55rem 0.9rem;
|
||||
}
|
||||
.wire-btn--lg {
|
||||
padding: 0.7rem 1.2rem;
|
||||
font-size: 1.05rem;
|
||||
min-height: 3.5rem;
|
||||
padding: 0.8rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* --- Inputs --------------------------------------------------------------- */
|
||||
@@ -275,6 +312,36 @@
|
||||
.wire-alert--warning {
|
||||
border-left-color: var(--wire-color-warning);
|
||||
}
|
||||
.wire-alert--rich {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
padding: 1rem;
|
||||
border-left-width: 1px;
|
||||
border-radius: var(--wire-radius);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-alert--rich .wire-alert__icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: calc(var(--wire-radius-sm) * 0.8);
|
||||
background: color-mix(in srgb, currentColor 12%, transparent);
|
||||
}
|
||||
.wire-alert--rich .wire-alert__body {
|
||||
margin: 0.25rem 0 0;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.wire-alert__dismiss {
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wire-alert__dismiss:hover {
|
||||
background: color-mix(in srgb, currentColor 8%, transparent);
|
||||
}
|
||||
|
||||
/* --- Card ----------------------------------------------------------------- */
|
||||
.wire-card {
|
||||
@@ -283,6 +350,35 @@
|
||||
border-radius: var(--wire-radius);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
color: var(--wire-color-text);
|
||||
transition:
|
||||
border-color var(--wire-motion-base),
|
||||
box-shadow var(--wire-motion-slow),
|
||||
transform var(--wire-motion-slow) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-card--padding-none {
|
||||
padding: 0;
|
||||
}
|
||||
.wire-card--padding-sm {
|
||||
padding: 1rem;
|
||||
}
|
||||
.wire-card--padding-md {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.wire-card--padding-lg {
|
||||
padding: 2rem;
|
||||
}
|
||||
.wire-card--glass {
|
||||
background: color-mix(in srgb, var(--wire-color-surface) 78%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.wire-card--elevated {
|
||||
box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
|
||||
}
|
||||
.wire-card--interactive:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
||||
box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 11%, transparent);
|
||||
}
|
||||
|
||||
/* --- Avatar --------------------------------------------------------------- */
|
||||
@@ -940,6 +1036,162 @@
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
.wire-catalog-action > :only-child {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Authentication compositions intentionally mirror the polished identity
|
||||
* experience: compact hierarchy, generous controls, and token-driven color. */
|
||||
.wire-auth-card {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: clamp(1.25rem, 4vw, 2rem);
|
||||
border-color: color-mix(in srgb, var(--wire-color-border) 82%, transparent);
|
||||
background: color-mix(in srgb, var(--wire-color-surface) 94%, transparent);
|
||||
box-shadow: 0 1.5rem 5rem color-mix(in srgb, var(--wire-color-text) 8%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.wire-auth-card > .wire-eyebrow {
|
||||
justify-self: start;
|
||||
margin-bottom: 0.9rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 24%, transparent);
|
||||
border-radius: 999px;
|
||||
color: var(--wire-color-primary);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 9%, transparent);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.wire-auth-card > h3 {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text);
|
||||
font-size: clamp(1.9rem, 5vw, 2.5rem);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.wire-auth-card > h3 + p {
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.wire-auth-card > .wire-catalog-card__image {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.wire-auth-action {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.wire-auth-action > :where(a, button) {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 5.5rem;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
text-align: left;
|
||||
border-radius: var(--wire-radius);
|
||||
}
|
||||
.wire-auth-action__icon {
|
||||
display: grid;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
place-items: center;
|
||||
border-radius: calc(var(--wire-radius-sm) * 0.9);
|
||||
color: currentColor;
|
||||
background: color-mix(in srgb, currentColor 12%, transparent);
|
||||
}
|
||||
.wire-auth-action__copy {
|
||||
min-width: 0;
|
||||
}
|
||||
.wire-auth-action__label {
|
||||
display: block;
|
||||
font-weight: 750;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.wire-auth-action__description {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: color-mix(in srgb, currentColor 66%, transparent);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.wire-auth-action__arrow {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
opacity: 0.65;
|
||||
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-auth-action > :where(a, button):hover .wire-auth-action__arrow {
|
||||
transform: translateX(0.25rem);
|
||||
}
|
||||
|
||||
.wire-auth-field {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.wire-auth-field__control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.wire-auth-field__input {
|
||||
width: 100%;
|
||||
min-height: 3.5rem;
|
||||
padding-inline: 3rem;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
transition:
|
||||
border-color var(--wire-motion-base),
|
||||
box-shadow var(--wire-motion-base),
|
||||
background var(--wire-motion-base);
|
||||
}
|
||||
.wire-auth-field__input:focus {
|
||||
border-color: var(--wire-color-primary);
|
||||
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
||||
}
|
||||
.wire-auth-field__icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
z-index: 1;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
color: var(--wire-color-muted);
|
||||
pointer-events: none;
|
||||
transition: color var(--wire-motion-base);
|
||||
}
|
||||
.wire-auth-field__control:focus-within .wire-auth-field__icon {
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
.wire-auth-field__toggle {
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: calc(var(--wire-radius-sm) * 0.75);
|
||||
color: var(--wire-color-muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wire-auth-field__toggle:hover {
|
||||
color: var(--wire-color-primary);
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
.wire-auth-field__toggle:focus-visible {
|
||||
outline: 2px solid var(--wire-color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.wire-catalog-form,
|
||||
.wire-catalog-collection,
|
||||
.wire-catalog-section {
|
||||
|
||||
Reference in New Issue
Block a user