feat(user card) - Update User card to new SHINE design (part 1)

.changeset/beige-cycles-spend.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update User card to new SHINE design (part 1)

packages/stacks-classic/lib/components/user-card/user-card.less

@@ -1,129 +1,94 @@
 .s-user-card {
     --_uc-ai: center;
-    --_uc-bg: unset;
-    --_uc-bar: unset;
-    --_uc-d: grid;
-    --_uc-fc: unset;
-    --_uc-g: var(--su4) var(--su8);
-    --_uc-p: var(--su8);
-    --_uc-info-ai: unset;
-    --_uc-info-fd: column;
-    --_uc-link-fs: var(--fs-caption);
-    --_uc-link-ws: unset;
-    --_uc-rep-fc: unset;
-    --_uc-time-fc: var(--black-400);
-    --_uc-time-ws: unset;
-    --_uc-type-fc: var(--theme-primary-400);
+    --_uc-fd: unset;
+    --_uc-username-fs: unset;
 
-    // MODIFIERS
-    &&__deleted {
-        --_uc-fc: var(--black-400);
-    }
-
-    &&__highlighted {
-        --_uc-bg: var(--theme-secondary-100);
-        --_uc-bar: var(--br-md);
-        --_uc-time-fc: var(--black-500);
-        --_uc-type-fc: var(--black-500);
+    // VARIANTS
+    // SIZES
+    &&__lg {
+        --_uc-ai: flex-start;
+        --_uc-fd: column;
+        --_uc-username-fs: var(--fs-body3);
     }
 
-    // VARIANTS
-    &&__minimal,
-    &&__small {
-        --_uc-d: flex;
-        --_uc-g: var(--su4);
-        --_uc-p: 0;
-        --_uc-info-ai: center;
-        --_uc-info-fd: row;
+    // CHILD ELEMENTS
+    & &--bio {
+        .truncation(3);
+        color: var(--black-400);
     }
 
-    &&__full {
-        --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
+    & &--recognition {
+        &,
+        & a {
+            color: var(--theme-primary) !important;
+        }
     }
 
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
+    & &--rep {
+        font-weight: 600;
     }
 
-    // CHILD ELEMENTS
-    & &--location,
-    & &--role {
-        font-size: var(--fs-caption);
+    & &--time {
         color: var(--black-400);
     }
 
-    & &--awards {
-        li {
-            font-size: var(--fs-caption);
-        }
+    & &--username {
+        font-size: var(--_uc-username-fs);
+        font-weight: 500;
+    }
 
-        .list-reset;
-        align-items: center;
+    // Layout specific
+    & &--column,
+    & &--row {
         display: flex;
         gap: var(--su6);
     }
 
-    & &--info {
-        align-items: var(--_uc-info-ai);
-        flex-direction: var(--_uc-info-fd);
+    & &--column {
+        align-items: flex-start;
+        flex-direction: column;
+    }
 
+    & &--group {
+        align-items: center;
         display: flex;
         gap: var(--su4);
     }
 
-    & &--link {
-        font-size: var(--_uc-link-fs);
-        white-space: var(--_uc-link-ws);
-
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0; // Allow things to wrap
-        overflow-wrap: break-word;
-    }
+    & ul&--group {
+        &.s-user-card--group__split {
+            li:not(:last-child) {
+                &:after {
+                    background-color: var(--black-350);
+                    content: "";
+                    display: block;
+                    margin-left: var(--su4);
+                    width: var(--su4);
+                    height: var(--su4);
+                }
+            }
+        }
 
-    & &--rep {
-        color: var(--_uc-rep-fc);
+        li {
+            align-items: center;
+            display: inline-flex;
+            gap: var(--su2);
+        }
 
-        font-weight: 700;
+        .list-reset;
     }
 
-    & &--tags {
+    & &--row {
         align-items: center;
-        min-width: 0; // Allow things to wrap
+        flex-direction: row;
         flex-wrap: wrap;
     }
 
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
-
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
-    }
-
-    & &--type {
-        a:not(.s-link) {
-            color: inherit !important;
-        }
-
-        color: var(--_uc-type-fc);
-
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-    }
-
     align-items: var(--_uc-ai);
-    background-color: var(--_uc-bg);
-    border-radius: var(--_uc-bar);
-    color: var(--_uc-fc);
-    display: var(--_uc-d);
-    gap: var(--_uc-g);
-
-    grid-template-columns: auto 1fr;
-    line-height: 1;
-    padding: var(--_uc-p);
-}
+    color: var(--black-500);
+    display: flex;
+    flex-direction: var(--_uc-fd);
+    flex-wrap: wrap;
+    font-size: var(--fs-caption);
+    gap: var(--su6);
+}

packages/stacks-docs/_data/site-navigation.json

@@ -355,7 +355,8 @@
             },
             {
               "title": "User cards",
-              "url": "/product/components/user-cards/"
+              "url": "/product/components/user-cards/",
+              "new": true
             },
             {
               "title": "Vote",