Refresh UI components and showcase; release updated framework packages
This commit is contained in:
Clintchiz committed
1 parent
d800228585
commit
c77f5e1cec
293 files changed
+22544
-35778
No files matched your search
@@ -1,7 +1,9 @@
|
||||
@import "tailwindcss";
|
||||
@import "./workspace-preview.css";
|
||||
@plugin "@iconify/tailwind4";
|
||||
@source "../**/*.wrn";
|
||||
@source "../../../packages/ui/components/*.wrn";
|
||||
@source "../../../../packages/ui/components/*.wrn";
|
||||
@source "../../../../packages/ui/styles/*.wrn";
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
@@ -116,11 +118,11 @@ html[data-ui-scale="compact"] {
|
||||
}
|
||||
|
||||
html[data-ui-scale="comfortable"] {
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html[data-ui-scale="large"] {
|
||||
font-size: 19px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
html[data-ui-style="soft"] {
|
||||
@@ -422,7 +424,7 @@ html[data-design-panel-open] .design-panel {
|
||||
.docs-intro h1,
|
||||
.page-marketplace h1 {
|
||||
margin: 0.5rem 0;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
@@ -666,7 +668,7 @@ html[data-design-panel-open] .design-panel {
|
||||
|
||||
.showcase-title {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 4.5rem);
|
||||
font-size: clamp(1.75rem, 3vw, 2.75rem);
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
@@ -704,7 +706,7 @@ html[data-design-panel-open] .design-panel {
|
||||
|
||||
.showcase-category:hover {
|
||||
border-color: var(--wrn-color-primary);
|
||||
transform: translateY(-2px);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.showcase-grid {
|
||||
@@ -834,7 +836,7 @@ html[data-design-panel-open] .design-panel {
|
||||
.showcase-brand {
|
||||
gap: 0.6rem;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 850;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@@ -927,7 +929,7 @@ html[data-design-panel-open] .design-panel {
|
||||
.docs-shell {
|
||||
display: grid;
|
||||
min-height: calc(100vh - 4rem);
|
||||
grid-template-columns: 17rem minmax(0, 1fr);
|
||||
grid-template-columns: 15rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.docs-directory {
|
||||
@@ -1017,7 +1019,7 @@ html[data-design-panel-open] .design-panel {
|
||||
width: 100%;
|
||||
max-width: 100rem;
|
||||
margin: 0 auto;
|
||||
padding: clamp(1.5rem, 3vw, 3rem);
|
||||
padding: clamp(1rem, 2.5vw, 2rem);
|
||||
}
|
||||
|
||||
.docs-breadcrumbs {
|
||||
@@ -1041,7 +1043,7 @@ html[data-design-panel-open] .design-panel {
|
||||
}
|
||||
|
||||
.detail-hero h1 {
|
||||
font-size: clamp(2.4rem, 5vw, 4rem);
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
@@ -1085,12 +1087,12 @@ html[data-design-panel-open] .design-panel {
|
||||
.playground-workbench,
|
||||
.demo-case,
|
||||
.docs-table-wrap {
|
||||
border-radius: 0.85rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.playground-section {
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.playground-workbench {
|
||||
@@ -1192,18 +1194,7 @@ html[data-design-panel-open] .design-panel {
|
||||
/* --- Modern documentation experience ----------------------------------- */
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 10% -10%,
|
||||
color-mix(in srgb, var(--wrn-color-primary) 16%, transparent),
|
||||
transparent 32rem
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 92% 8%,
|
||||
color-mix(in srgb, var(--wrn-color-info) 12%, transparent),
|
||||
transparent 28rem
|
||||
),
|
||||
var(--wrn-color-bg);
|
||||
background: var(--wrn-color-bg);
|
||||
}
|
||||
|
||||
.showcase-header {
|
||||
@@ -1220,19 +1211,19 @@ body {
|
||||
|
||||
.showcase-main {
|
||||
width: min(100% - 2rem, 92rem);
|
||||
padding-block: clamp(2.5rem, 6vw, 6rem);
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.showcase-hero {
|
||||
position: relative;
|
||||
max-width: 68rem;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: clamp(3rem, 7vw, 6rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.showcase-hero--home {
|
||||
max-width: 76rem;
|
||||
padding-block: clamp(2rem, 6vw, 5rem);
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.showcase-eyebrow,
|
||||
@@ -1246,7 +1237,7 @@ body {
|
||||
gap: 0.45rem;
|
||||
color: var(--wrn-color-primary);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 850;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1261,10 +1252,10 @@ body {
|
||||
|
||||
.showcase-title {
|
||||
max-width: 72rem;
|
||||
font-size: clamp(3rem, 8vw, 7.5rem);
|
||||
font-weight: 850;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.075em;
|
||||
font-size: clamp(2.25rem, 5vw, 4rem);
|
||||
font-weight: 650;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.showcase-title em {
|
||||
@@ -1274,7 +1265,7 @@ body {
|
||||
}
|
||||
|
||||
.showcase-hero--category .showcase-title {
|
||||
font-size: clamp(3.25rem, 7vw, 6.5rem);
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
.showcase-description {
|
||||
@@ -1293,7 +1284,7 @@ body {
|
||||
.home-primary-action,
|
||||
.home-secondary-action {
|
||||
display: inline-flex;
|
||||
min-height: 3.25rem;
|
||||
min-height: var(--wrn-control-height-lg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.65rem;
|
||||
@@ -1315,12 +1306,12 @@ body {
|
||||
border-color: var(--wrn-color-primary);
|
||||
color: var(--wrn-color-primary-contrast);
|
||||
background: var(--wrn-color-primary);
|
||||
box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wrn-color-primary) 24%, transparent);
|
||||
box-shadow: var(--wrn-shadow-sm);
|
||||
}
|
||||
|
||||
.home-primary-action:hover,
|
||||
.home-secondary-action:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1328,9 +1319,9 @@ body {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: clamp(4rem, 8vw, 7rem);
|
||||
margin-bottom: 2.5rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.5rem;
|
||||
border-radius: var(--wrn-radius-lg);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
}
|
||||
@@ -1373,7 +1364,7 @@ body {
|
||||
.home-section-heading h2,
|
||||
.detail-section-heading h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-size: clamp(1.25rem, 2vw, 1.75rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
@@ -1395,11 +1386,11 @@ body {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
min-height: 8rem;
|
||||
min-height: 6rem;
|
||||
overflow: hidden;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.25rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
color: var(--wrn-color-text);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@@ -1416,7 +1407,7 @@ body {
|
||||
|
||||
.home-category:hover {
|
||||
border-color: color-mix(in srgb, var(--wrn-color-primary) 55%, var(--wrn-color-border));
|
||||
transform: translateY(-3px);
|
||||
transform: none;
|
||||
box-shadow: var(--wrn-shadow-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1467,7 +1458,7 @@ body {
|
||||
.catalog-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.4rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
transition:
|
||||
@@ -1478,7 +1469,7 @@ body {
|
||||
|
||||
.catalog-card:hover {
|
||||
border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border));
|
||||
transform: translateY(-4px);
|
||||
transform: none;
|
||||
box-shadow: var(--wrn-shadow-2);
|
||||
}
|
||||
|
||||
@@ -1491,20 +1482,13 @@ body {
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
color: var(--wrn-color-text);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 20%,
|
||||
color-mix(in srgb, var(--wrn-color-primary) 14%, transparent),
|
||||
transparent 58%
|
||||
),
|
||||
linear-gradient(135deg, var(--wrn-color-bg), var(--wrn-color-surface-2));
|
||||
text-decoration: none;
|
||||
background: var(--wrn-color-surface-soft);
|
||||
}
|
||||
|
||||
.catalog-card-preview::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.38;
|
||||
opacity: 0.12;
|
||||
background-image:
|
||||
linear-gradient(var(--wrn-color-border) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px);
|
||||
@@ -1590,19 +1574,14 @@ body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
margin-bottom: clamp(4rem, 8vw, 7rem);
|
||||
padding: clamp(2rem, 5vw, 4.5rem);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 2rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 86% 15%,
|
||||
color-mix(in srgb, var(--wrn-color-primary) 18%, transparent),
|
||||
transparent 22rem
|
||||
),
|
||||
linear-gradient(135deg, var(--wrn-color-surface), var(--wrn-color-surface-2));
|
||||
box-shadow: var(--wrn-shadow-2);
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 0 1.5rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-hero-copy {
|
||||
@@ -1613,9 +1592,9 @@ body {
|
||||
|
||||
.detail-hero h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(3rem, 7vw, 6rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.07em;
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.detail-hero p {
|
||||
@@ -1658,7 +1637,7 @@ body {
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.5rem;
|
||||
border-radius: var(--wrn-radius-lg);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-2);
|
||||
}
|
||||
@@ -2015,7 +1994,7 @@ body {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.25rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
|
||||
@@ -2058,7 +2037,7 @@ body {
|
||||
.demo-case {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.5rem;
|
||||
border-radius: var(--wrn-radius-lg);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
}
|
||||
@@ -2290,7 +2269,7 @@ body {
|
||||
.docs-table-wrap {
|
||||
overflow: auto;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.25rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
}
|
||||
@@ -2427,7 +2406,7 @@ body {
|
||||
}
|
||||
|
||||
.showcase-title {
|
||||
font-size: clamp(2.8rem, 15vw, 5rem);
|
||||
font-size: clamp(1.75rem, 7vw, 2.5rem);
|
||||
}
|
||||
|
||||
.home-category-grid {
|
||||
@@ -2435,17 +2414,24 @@ body {
|
||||
}
|
||||
|
||||
.detail-hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1.5rem;
|
||||
border-radius: 1.4rem;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: .75rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
}
|
||||
|
||||
.detail-hero-icon {
|
||||
display: none;
|
||||
display: grid;
|
||||
width: 3.5rem;
|
||||
border-radius: 1rem;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-hero-icon > span { width: 1.5rem; height: 1.5rem; }
|
||||
|
||||
.detail-hero h1 {
|
||||
font-size: clamp(2.7rem, 14vw, 4.5rem);
|
||||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||||
}
|
||||
|
||||
.demo-case-header {
|
||||
@@ -2476,7 +2462,7 @@ body {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.25rem;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
background: color-mix(in srgb, var(--wrn-color-surface-raised) 92%, transparent);
|
||||
color: var(--wrn-color-text);
|
||||
}
|
||||
@@ -2753,6 +2739,16 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
:is(.demo-render, .playground-preview-source):has(.wrn-next--date-picker) {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
:is(.demo-render, .playground-preview-source):has(.wrn-next--advanced-select) {
|
||||
padding: 2rem;
|
||||
min-height: 28rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Interactive overlay previews -------------------------------------------------
|
||||
Overlay components must begin closed and remain usable inside catalog cards,
|
||||
detail demos, and the live playground. */
|
||||
@@ -2988,3 +2984,66 @@ body {
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Give examples room to behave like their real application containers. */
|
||||
.demo-render:has(.wrn-next--carousel),
|
||||
.playground-preview-source:has(.wrn-next--carousel) {
|
||||
padding: 0;
|
||||
}
|
||||
.demo-render > .wrn-next--card,
|
||||
.playground-preview-source > .wrn-next--card {
|
||||
width: 100%;
|
||||
}
|
||||
.docs-directory a[aria-current="page"] {
|
||||
background: var(--wrn-color-primary-soft);
|
||||
color: var(--wrn-color-primary-text);
|
||||
box-shadow: inset 3px 0 var(--wrn-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.demo-render,
|
||||
.playground-preview-source {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 2rem;
|
||||
background: var(--wrn-color-bg);
|
||||
}
|
||||
.demo-render > *,
|
||||
.playground-preview-source > * {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.demo-render:has(.wrn-next--accordion) {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
[data-docs-empty][hidden] { display:none !important; }
|
||||
.demo-render:has(.wrn-back-to-top), .playground-preview-source:has(.wrn-back-to-top) { position:relative; transform:translateZ(0); }
|
||||
.demo-render:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table), .playground-preview-source:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) { padding:1rem; }
|
||||
.demo-case:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) .demo-workbench { grid-template-columns:minmax(0,1fr); }
|
||||
|
||||
.example-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; }
|
||||
.example-card { display:block; overflow:hidden; border:1px solid var(--wrn-color-border); border-radius:12px; color:var(--wrn-color-text); background:var(--wrn-color-surface); text-decoration:none; }
|
||||
.example-card__art { display:grid; place-items:center; height:9rem; background:var(--wrn-color-surface-2); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-card__art span { width:2.5rem; height:2.5rem; color:var(--wrn-color-primary-text); }
|
||||
.example-card > div:last-child { padding:1.25rem; }
|
||||
.example-card h2 { font-size:1.1rem; margin:0 0 .5rem; }
|
||||
.example-card p { font-size:.875rem; color:var(--wrn-color-muted); min-height:2.8rem; }
|
||||
.example-card strong { font-size:.8rem; color:var(--wrn-color-primary-text); }
|
||||
.example-toolbar { display:flex; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--wrn-color-border); background:var(--wrn-color-surface); }
|
||||
.example-code-panel { margin:2rem auto; width:min(100% - 2rem,80rem); border:1px solid var(--wrn-color-border); border-radius:10px; overflow:hidden; background:var(--wrn-color-surface); }
|
||||
.example-code-panel header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-code-panel h2 { font-size:1rem; margin:0; }
|
||||
.example-code-panel button { padding:.45rem .8rem; border:1px solid var(--wrn-color-border); border-radius:6px; background:var(--wrn-color-surface-2); color:var(--wrn-color-text); cursor:pointer; }
|
||||
.example-code-panel pre { margin:0; padding:1.25rem; max-height:32rem; overflow:auto; font-size:.8rem; white-space:pre; }
|
||||
.example-code-panel summary { padding:1rem; cursor:pointer; }
|
||||
.block-live-preview { padding:clamp(1rem,3vw,2rem); border:1px solid var(--wrn-color-border); border-radius:10px; background:var(--wrn-color-bg); overflow:auto; }
|
||||
.example-form-page { max-width:42rem; margin:3rem auto; padding:1.5rem; display:grid; gap:1.5rem; }
|
||||
.example-form-page h1 { margin:0; font-size:1.75rem; }
|
||||
|
||||
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,5vw,5rem); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.gallery-header nav { display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; }
|
||||
.gallery-main { max-width:1440px; margin:auto; padding:clamp(1rem,4vw,4rem); }
|
||||
.template-products { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1.25rem; }
|
||||
@media(max-width:600px) { .gallery-header { align-items:flex-start; flex-direction:column; } }
|
||||
|
||||
.playground-preview-source:has(.wrn-confetti), .demo-render:has(.wrn-confetti) { justify-items:center; overflow:hidden; }
|
||||
Reference in new issue
Block a user