@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/components/table/table.less

@@ -1,9 +1,9 @@
 .s-table {
-    @ta-cell-border: var(--su-static1) solid var(--bc-medium);
+    @ta-cell-border: var(--su1) solid var(--bc-medium);
     @ta-columns: (100% / 12);
 
     --_ta-tbody-tbody-bc: var(--bc-medium);
-    --_ta-tbody-tbody-bw: var(--su-static2);
+    --_ta-tbody-tbody-bw: var(--su2);
     --_ta-tbody-tr-even-bg: unset;
     --_ta-td-bbw: 0;
     --_ta-td-bc: var(--bc-medium);
@@ -22,6 +22,13 @@
     --_ta-th-va: middle;
     --_ta-th-w: unset;
 
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
+
     // VARIANTS
     &&__stripes {
         --_ta-tbody-tr-even-bg: var(--black-100);
@@ -68,7 +75,7 @@
         --_ta-td-bc: transparent;
         --_ta-th-bc: transparent;
         --_ta-tbody-tbody-bc: transparent; // [1]
-        --_ta-tbody-tbody-bw: var(--su-static12); // [1]
+        --_ta-tbody-tbody-bw: var(--su12); // [1]
         --_ta-thead-th-bg: transparent;
 
         thead th {
@@ -135,7 +142,7 @@
                 border: 0;
                 cursor: pointer;
                 display: flex;
-                gap: var(--su-static4);
+                gap: var(--su4);
                 font-weight: inherit;
                 margin: calc(var(--_ta-th-p) * -1);
                 padding: var(--_ta-th-p);
@@ -164,6 +171,29 @@
     }
 
     // CHILD ELEMENTS
+    td,
+    tr {
+        a:not([class]) {
+            &:active,
+            &:hover {
+                color: var(--theme-link-color-hover, var(--blue-400));
+                text-decoration: underline;
+            }
+
+            &:visited {
+                color: var(--theme-link-color-visited, var(--black-400));
+            }
+
+            &:hover:visited {
+                color: var(--theme-link-color-hover, var(--blue-400));
+            }
+        }
+
+        color: var(--theme-link-color, var(--black-600));
+        text-decoration: none;
+        cursor: pointer;
+    }
+
     & &--cell {
         .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) {
             &@{i} { // generates iterated cell classes
@@ -202,10 +232,6 @@
     }
 
     td {
-        .s-checkbox {
-            display: block;
-        }
-
         &.s-table--bulk {
             --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px
         }
@@ -218,14 +244,14 @@
         &.s-table--progress-bar {
             --_ta-td-blw: 0;
             --_ta-td-pl: 0;
-            --_ta-td-w: calc(var(--su-static12) * 10); // 120px
+            --_ta-td-w: calc(var(--su12) * 10); // 120px
         }
 
-        border: var(--su-static1) solid var(--_ta-td-bc);
-        border-bottom-width: var(--_ta-td-bbw, var(--su-static1));
-        border-left-width: var(--_ta-td-blw, var(--su-static1));
-        border-right-width: var(--_ta-td-brw, var(--su-static1));
-        border-top-width: var(--_ta-td-btw, var(--su-static1));
+        border: var(--su1) solid var(--_ta-td-bc);
+        border-bottom-width: var(--_ta-td-bbw, var(--su1));
+        border-left-width: var(--_ta-td-blw, var(--su1));
+        border-right-width: var(--_ta-td-brw, var(--su1));
+        border-top-width: var(--_ta-td-btw, var(--su1));
         font-size: var(--_ta-td-fs);
         font-weight: var(--_ta-td-fw);
         padding: var(--_ta-td-p);
@@ -249,16 +275,12 @@
     }
 
     th {
-        .s-checkbox {
-            display: block;
-        }
-
         &.s-table--bulk {
             --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
         }
 
-        border: var(--su-static1) solid var(--_ta-th-bc);
-        border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw);
+        border: var(--su1) solid var(--_ta-th-bc);
+        border-width: var(--su1) var(--su1) var(--_ta-th-bbw);
         font-size: var(--_ta-th-fs);
         padding: var(--_ta-th-p);
         padding-top: var(--_ta-th-pt, var(--_ta-th-p));
@@ -282,8 +304,8 @@
 
     tr {
         &:last-of-type {
-            --_ta-td-bbw: var(--su-static1);
-            --_ta-th-bbw: var(--su-static1);
+            --_ta-td-bbw: var(--su1);
+            --_ta-th-bbw: var(--su1);
         }
 
         &.is-disabled {
@@ -305,5 +327,9 @@
     width: 100%;
 }
 
+// TABLE LAYOUT ATOMIC CLASSES
+.tl-fixed { table-layout: fixed !important; }
+.tl-auto { table-layout: auto !important; }
+
 // [1]  This makes the border transparent, so we need to use whitespace
 //      to achieve the same effect a 2px gray border achieves.

package/lib/components/tag/tag.less

@@ -16,6 +16,11 @@
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
+        &:is(a),
+        a[href] {
+            text-decoration: underline;
+        }
+
         &:not(&__moderator):not(&__required) {
             --_ta-bc: var(--theme-tag-border-color, var(--black-300));
             --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
@@ -49,10 +54,10 @@
             background-color: currentColor;
             content: "";
             display: block;
-            height: calc(var(--su-static16) - var(--su-static2));
+            height: calc(var(--su16) - var(--su2));
             -webkit-mask-size: contain;
             mask-size: contain;            
-            width: calc(var(--su-static16) - var(--su-static2));
+            width: calc(var(--su16) - var(--su2));
         }
     }
 
@@ -105,6 +110,15 @@
     }
 
     // CHILD ELEMENTS
+    a {
+        &:focus-visible {
+            .focus-styles();
+        }
+
+        color: var(--_ta-fc) !important;
+        margin: calc(var(--_ta-pt) * -1) calc(var(--_ta-pr) * -1) calc(var(--_ta-pb) * -1) calc(var(--_ta-pl) * -1);
+        padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
+    }
     // Dismiss
     &:has(> &--dismiss) {
         --_ta-pr: var(--su2);
@@ -141,12 +155,17 @@
             height: 100%;
         }
 
-        max-width: calc(var(--su-static16) + var(--su-static2));
+        max-width: calc(var(--su16) + var(--su2));
         margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
     }
 
     // INTERACTION
-    a& {
+    &:has([href]),
+    a {
+        text-decoration: none;
+    }
+
+    a:not([class]) {
         &:hover,
         &:active {
             background-color: var(--_ta-bg-hover);
@@ -160,11 +179,11 @@
     }
 
     background-color: var(--_ta-bg);
-    border: var(--su-static1) solid var(--_ta-bc);
+    border: var(--su1) solid var(--_ta-bc);
     color: var(--_ta-fc);
     font-size: var(--_ta-fs);
     padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
-
+    
     align-items: center;
     display: inline-flex;
     gap: var(--su4);

package/lib/components/toast/toast.less

@@ -13,11 +13,13 @@
 
     .s-notice {
         box-shadow: var(--bs-sm);
-        max-width: 44rem;
+        max-width: 38.5rem;
         padding-bottom: var(--su8);
         padding-top: var(--su8);
         pointer-events: all;
-        width: 100%;
+        display: flex;
+        align-items: center;
+        min-width: var(--su448);
     }
 
     display: flex;

package/lib/components/toggle-switch/toggle-switch.less

@@ -3,7 +3,7 @@
     @ts-bg-image-fill-dark: .set-white-dark()[default];
     @ts-bg-image-fill-esc: escape("@{ts-bg-image-fill}"); // color escaped for URL usage
     @ts-bg-image-fill-dark-esc: escape("@{ts-bg-image-fill-dark}"); // color escaped for URL usage
-    --_ts-bg: var(--black-350);
+    --_ts-bg: var(--black-300);
     --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-esc}'/%3e%3c/svg%3e");
     --_ts-bg-ps: left center;
     --_ts-multiple-bg: unset;
@@ -22,21 +22,15 @@
         }
     }
 
-    &&__multiple { // TODO split single and multiple toggle into two seperate components
+    &&__multiple {
         input[type="radio"] {
-            &:checked {
-                + label {
-                    &.s-toggle-switch--label-off {
-                        --_ts-multiple-bg: var(--black-400);
-                        --_ts-multiple-fc: var(--white);
-                    }
-
-                    &:not(.s-toggle-switch--label-off) {
-                        --_ts-multiple-bg: var(--green-400);
-                        --_ts-multiple-fc: var(--white);
-                    }
-                }
+            &:checked + label {
+                --_ts-multiple-bg: var(--black-050);
+                --_ts-multiple-fc: var(--black);
+            }
 
+            &:not(:checked) + label {
+                --_ts-multiple-fc: var(--black-400);
             }
 
             &:focus-visible + label {
@@ -53,13 +47,13 @@
             background-color: var(--_ts-multiple-bg);
             color: var(--_ts-multiple-fc);
 
-            border-radius: 1000px;
+            border-radius: var(--br-pill);
             cursor: pointer;
             font-size: var(--fs-body1);
             font-weight: 400;
             line-height: 1;
             margin: 0;
-            padding: 0.5em 0.7em;
+            padding: calc(var(--su4) + var(--su1)) calc(var(--su8) + var(--su2)); //5px 10px
             text-align: center;
             white-space: nowrap;
             width: 100%;
@@ -70,9 +64,11 @@
 
         align-items: stretch;
         display: flex;
+        border: var(--su2) solid var(--black-150);
+        border-radius: var(--br-pill);
+        background-color: var(--black-150);
     }
 
-    input[type="checkbox"], // TODO DEPRECATED: drop support for nested input[type="checkbox"]
     input[type="checkbox"]& {
         &:checked {
             --_ts-bg: var(--green-400);
@@ -97,10 +93,10 @@
         border-radius: 1000px;
         cursor: pointer;
         flex-shrink: 0;
-        height: var(--su-static24);
+        height: var(--su24);
         margin: 0; // guard against production adding 5px of margin to these
         transition: background-position 0.2s ease;
         vertical-align: top;
-        width: calc(var(--su-static48) - var(--su-static4));
+        width: calc(var(--su48) - var(--su4));
     }
 }

package/lib/components/user-card/user-card.less

@@ -1,129 +1,166 @@
 .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);
-
-    // 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);
-    }
+    --_uc-fd: unset;
+    --_uc-column-gap: var(--su6);
+    --_uc-group-gap: var(--su4);
+    --_uc-row-gap: var(--su6);
+    --_uc-username-fs: unset;
+    --_uc-username-p: unset;
+    --_uc-username-bl: unset;
+    --_uc-username-bg: unset;
+    --_uc-username-fc: var(--black-600);
+    --_uc-username-d: unset;
+    --_uc-username-ai: unset;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
 
     // VARIANTS
-    &&__minimal,
-    &&__small {
-        --_uc-d: flex;
-        --_uc-g: var(--su4);
-        --_uc-p: 0;
-        --_uc-info-ai: center;
-        --_uc-info-fd: row;
-    }
+    // SIZES
+    &&__lg {
+        .s-avatar {
+            margin-right: var(--su6);
+        }
+
+        .s-user-card--username {
+            margin-right: var(--su2);
+        }
+
+        .s-user-card--group:has(> .s-user-card--rep) {
+            margin-top: var(--sun2);
+        }
 
-    &&__full {
         --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
+        --_uc-fd: column;
+        --_uc-username-fs: var(--fs-body3);
     }
 
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
+    &&__deleted {
+        --_uc-username-fc: var(--black-400);
     }
 
     // CHILD ELEMENTS
-    & &--location,
-    & &--role {
-        font-size: var(--fs-caption);
+    a {
+        text-decoration: none;
+    }
+
+    & &--bio {
+        .truncation(3);
         color: var(--black-400);
     }
 
-    & &--awards {
-        li {
-            font-size: var(--fs-caption);
-        }
+    & &--recognition {
+        --_uc-row-gap: var(--su4);
 
-        .list-reset;
-        align-items: center;
-        display: flex;
-        gap: var(--su6);
+        &,
+        & a {
+            color: var(--theme-primary);
+        }
     }
 
-    & &--info {
-        align-items: var(--_uc-info-ai);
-        flex-direction: var(--_uc-info-fd);
+    & &--recognition-additional-bling {
+        &,
+        & a {
+            color: var(--theme-primary);
+        }
+    }
 
-        display: flex;
-        gap: var(--su4);
+    & &--rep {
+        color: var(--black-600);
+        font-weight: 600;
     }
 
-    & &--link {
-        font-size: var(--_uc-link-fs);
-        white-space: var(--_uc-link-ws);
+    & &--time {
+        color: var(--black-400);
+    }
 
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0; // Allow things to wrap
+    & &--username {
+        align-items: var(--_uc-username-ai);
+        background-color: var(--_uc-username-bg);
+        border-left: var(--_uc-username-bl);
+        color: var(--_uc-username-fc);
+        display: var(--_uc-username-d);
+        font-size: var(--_uc-username-fs);
+        font-weight: 500;
+        min-width: 0;
         overflow-wrap: break-word;
+        padding: var(--_uc-username-p);
+        word-break: break-all;
     }
 
-    & &--rep {
-        color: var(--_uc-rep-fc);
-
-        font-weight: 700;
+    &--username__op {
+        --_uc-username-p: var(--su3) var(--su4) var(--su3) var(--su4);
+        --_uc-username-bg: var(--blue-100);
+        --_uc-username-bl: var(--su4) solid var(--blue-300);
+        --_uc-username-d: flex;
+        --_uc-username-ai: center;
+        .s-user-card__sm & {
+            --_uc-username-p: 0 var(--su4);
+        }
     }
 
-    & &--tags {
-        align-items: center;
-        min-width: 0; // Allow things to wrap
-        flex-wrap: wrap;
+    // Layout specific
+    & &--column {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--_uc-column-gap);
     }
 
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
+    & &--group {
+        &:has(> .s-avatar) {
+            --_uc-group-gap: var(--su6);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
+        &:has(+ .s-user-card--time) {
+            margin-right: var(--su2);
+        }
+
+        align-items: center;
+        display: flex;
+        gap: var(--_uc-group-gap);
     }
 
-    & &--type {
-        a:not(.s-link) {
-            color: inherit !important;
+    & 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);
+                }
+            }
+        }
+
+        li {
+            align-items: center;
+            display: inline-flex;
+            gap: var(--su2);
         }
 
-        color: var(--_uc-type-fc);
+        .list-reset;
+    }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
+    & &--row {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--_uc-row-gap);
     }
 
     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);
+}