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

fix(ui): polish linked catalog cards

Browse Source
This commit is contained in:
Clintchiz
2026-07-19 21:29:25 +05:30
parent a3e21163c1
commit dcdb5e766d
56 changed files with 236 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.2.62",
"version": "0.2.63",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/test/ui.test.ts
+3
View File
@@ -82,6 +82,9 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
expect(css).toMatch(/:root\s*\{[^}]*--color-violet-600: var\(--wire-color-primary\)/s);
expect(css).toContain(".wire-bg-primary");
expect(css).toContain(".wire-text-muted");
expect(css).toContain(".wire-visually-hidden");
expect(css).toContain(".wire-catalog-card--channel::before");
expect(css).toContain(".wire-catalog-card--integration::before");
});
test("page shells leave background ownership to the page", () => {
packages/ui/ui.css
+70 -2
View File
@@ -1338,30 +1338,98 @@
.wire-muted {
color: var(--wire-color-muted);
}
.wire-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.wire-catalog-card {
position: relative;
display: grid;
gap: 0.75rem;
align-content: start;
gap: 0.85rem;
min-width: 0;
padding: clamp(1rem, 3vw, 1.5rem);
min-height: 13rem;
overflow: hidden;
padding: clamp(1.25rem, 3vw, 1.75rem);
isolation: isolate;
transition:
border-color 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-catalog-card::before {
display: grid;
width: 2.75rem;
height: 2.75rem;
place-items: center;
margin-bottom: 0.35rem;
color: var(--wire-color-primary);
font-size: 1.15rem;
font-weight: 800;
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
border-radius: calc(var(--wire-radius) * 0.8);
background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
}
.wire-catalog-card--channel::before {
content: "◉";
}
.wire-catalog-card--integration::before {
content: "⌘";
}
.wire-catalog-card--campaign::before {
content: "↗";
}
.wire-catalog-card h3,
.wire-catalog-card p {
margin: 0;
}
.wire-catalog-card h3 {
color: var(--wire-color-text);
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.25;
}
.wire-catalog-card p {
color: var(--wire-color-muted);
line-height: 1.6;
}
.wire-catalog-card:has(.wire-catalog-card__link)::after {
content: "→";
position: absolute;
right: 1.25rem;
bottom: 1.1rem;
z-index: 1;
color: var(--wire-color-primary);
font-size: 1.2rem;
font-weight: 800;
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
}
.wire-catalog-card__link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.wire-catalog-card__link:focus-visible {
outline: 2px solid var(--wire-color-primary);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.wire-catalog-card:has(.wire-catalog-card__link):hover {
border-color: color-mix(in srgb, var(--wire-color-primary) 48%, var(--wire-color-border));
box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
transform: translateY(-3px);
}
.wire-catalog-card:has(.wire-catalog-card__link):hover::after {
transform: translateX(0.25rem);
}
}
.wire-catalog-card--glass {
background: color-mix(in srgb, var(--wire-color-surface) 80%, transparent);
backdrop-filter: blur(12px);