fix: Clean up library-item CSS #2204

Reorganize by variant with co-located
breakpoints, remove redundant declarations,
fix card border visibility in dark mode.

Author: julioest

static/css/v3/category-tags.css

@@ -99,7 +99,7 @@
 /* Dark theme: use semantic variables from themes.css only (no raw primitives) */
 html.dark .category-tag--neutral {
   background: var(--color-tag-neutral-bg);
-  border-color: var(--color-tag-stroke);
+  border-color: var(--color-tag-neutral-border);
   color: var(--color-text-secondary);
 }
 

static/css/v3/library-item.css

@@ -6,29 +6,32 @@
    Lookbook/examples so the item surface colours are visible. Remove when
    the component is used on a real page with its own background. */
 .v3-examples-section__example-box:has(.library-item-list) {
-  background: #F7FDFE;
+  background: var(--color-surface-mid);
 }
 
-/* ---------- Base / reset ---------- */
+/* ---------- Containers ---------- */
 
 .library-item-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: 160px 3fr minmax(180px, 2fr) minmax(180px, 2fr) auto auto;
+  grid-template-columns: 160px 2fr 1fr 1fr 1fr auto;
   column-gap: var(--space-xl);
   max-width: 1408px;
   width: 100%;
 }
 
-.library-item {
-  box-sizing: border-box;
+.library-item-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: var(--space-large);
 }
 
-.library-item p {
-  margin: 0;
-  padding: 0;
+@media (max-width: 1024px) {
+  .library-item-card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
 }
 
 /* ---------- Shared element styles ---------- */
@@ -47,11 +50,16 @@ a.library-item__name:hover {
   text-decoration: underline;
 }
 
+.library-item p {
+  margin: 0;
+  padding: 0;
+}
+
 .library-item__description {
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-default);
-  letter-spacing: -0.14px; /* no matching design token available */
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
 }
 
@@ -75,12 +83,16 @@ a.library-item__name:hover {
 
 .library-item__cpp-version--desktop {
   display: inline-flex;
+  width: fit-content;
+  justify-self: center;
 }
 
 /* ==========================================================================
-   List variant — horizontal row (desktop)
+   List variant
    ========================================================================== */
 
+/* ---------- Desktop ---------- */
+
 .library-item--list {
   display: grid;
   grid-column: 1 / -1;
@@ -102,12 +114,13 @@ a.library-item__name:hover {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-self: start;
   gap: var(--space-s);
 }
 
 .library-item--list .library-item__contributor {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: var(--space-default);
 }
 
@@ -121,91 +134,27 @@ a.library-item__name:hover {
   margin-left: var(--space-xl);
 }
 
-/* ---------- Card grid — equal-width columns, equal-height rows ---------- */
-
-.library-item-card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: var(--space-large);
-}
-
-/* ==========================================================================
-   Card variant — vertical stack
-   ========================================================================== */
-
-.library-item--card {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  column-gap: var(--space-large);
-  width: 100%;
-  border-radius: var(--border-radius-xl);
-  border: 1px solid var(--color-stroke-weak);
-  background: var(--color-surface-weak);
-  padding: var(--space-large);
-}
-
-.library-item--card .library-item__header {
-  grid-column: 1;
-  grid-row: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-large);
-}
-
-.library-item--card .library-item__actions {
-  grid-column: 2;
-  grid-row: 1;
-  display: flex;
-  align-items: start;
-  justify-content: end;
-}
-
-.library-item--card .library-item__cpp-version--desktop {
-  display: none;
-}
-
-.library-item--card .library-item__cpp-version {
-  display: inline-flex;
-}
-
-.library-item--card .library-item__tags {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-s);
-}
-
-.library-item--card .library-item__contributor {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  display: flex;
-  align-items: center;
-  gap: var(--space-default);
-  margin-top: auto;
-  padding-top: var(--space-large);
-}
-
-/* ==========================================================================
-   Tablet (≤ 1024px)
-   ========================================================================== */
+/* ---------- Tablet (≤ 1024px) ---------- */
 
 @media (max-width: 1024px) {
   .library-item-list {
-    grid-template-columns: 120px 2fr minmax(100px, 1fr) minmax(140px, 1fr) min-content auto;
+    grid-template-columns: auto 2fr 1fr 1fr min-content auto;
     /* Figma specifies --space-large here, but long descriptions cause overflow
        at tablet widths. Using --space-default until content constraints are
        defined. */
     column-gap: var(--space-default);
   }
 
+  .library-item--list .user-profile {
+    align-items: normal;
+  }
+
   .library-item--list .library-item__actions > .btn-icon-library {
     margin-left: var(--space-default);
   }
 }
 
-/* ==========================================================================
-   Mobile (≤ 767px) — list items switch to card-like layout
-   ========================================================================== */
+/* ---------- Mobile (≤ 767px) — switches to card-like layout ---------- */
 
 @media (max-width: 767px) {
   .library-item-list {
@@ -217,6 +166,7 @@ a.library-item__name:hover {
   .library-item--list {
     display: grid;
     grid-template-columns: 1fr auto;
+    row-gap: var(--space-medium);
     border-bottom: 1px solid var(--color-stroke-weak);
     border-radius: 0;
     background: var(--color-surface-weak);
@@ -242,20 +192,14 @@ a.library-item__name:hover {
     grid-row: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--space-default);
-
-    padding-bottom: 0;
+    gap: var(--space-card);
   }
 
   /* Actions — doc icon only, top-right */
   .library-item--list .library-item__actions {
     grid-column: 2;
     grid-row: 1;
-    display: flex;
-    align-items: start;
-    justify-content: end;
     min-width: unset;
-    padding: 0;
   }
 
   /* Version tag swap — hide desktop, show mobile (inline with tags) */
@@ -271,38 +215,86 @@ a.library-item__name:hover {
   .library-item--list .library-item__tags {
     grid-column: 1 / -1;
     grid-row: 2;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--space-s);
-
   }
 
   /* Contributor — full width, bottom */
   .library-item--list .library-item__contributor {
     grid-column: 1 / -1;
     grid-row: 3;
-    display: flex;
-    align-items: center;
-    gap: var(--space-default);
-    border-top: none;
-
     margin-top: auto;
   }
+}
 
-  /* ---------- Card variant — mobile overrides ---------- */
+/* ==========================================================================
+   Card variant
+   ========================================================================== */
 
-  .library-item--card {
-    max-width: none;
-    padding: var(--space-large);
-    gap: var(--space-large);
+/* ---------- Desktop ---------- */
+
+.library-item--card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--space-large);
+  width: 100%;
+  border-radius: var(--border-radius-xl);
+  border: 1px solid var(--color-stroke-mid);
+  background: var(--color-surface-weak);
+  padding: var(--space-large);
+}
+
+.library-item--card .library-item__header {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-large);
+}
+
+.library-item--card .library-item__actions {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  align-items: start;
+  justify-content: end;
+}
+
+.library-item--card .library-item__cpp-version--desktop {
+  display: none;
+}
+
+.library-item--card .library-item__cpp-version {
+  display: inline-flex;
+}
+
+.library-item--card .library-item__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.library-item--card .library-item__contributor {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--space-default);
+  margin-top: auto;
+  padding-top: var(--space-large);
+}
+
+/* ---------- Mobile (≤ 767px) ---------- */
+
+@media (max-width: 767px) {
+  .library-item-card-grid {
+    gap: var(--space-medium);
   }
 
-  .library-item--card .library-item__header,
-  .library-item--card .library-item__actions,
-  .library-item--card .library-item__tags,
-  .library-item--card .library-item__contributor {
-    padding: 0;
+  .library-item--card .library-item__header {
+    gap: var(--space-card);
   }
 
+  .library-item--card .library-item__contributor {
+    padding-top: var(--space-card);
+  }
 }