@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.11

package/lib/components/navigation/navigation.less

@@ -4,18 +4,20 @@
     --_na-p: var(--su2) 0;
     --_na-gap: var(--su4);
     --_na-item-bg: none;
-    --_na-item-fc: var(--black-500);
+    --_na-item-fc: var(--black-400);
     --_na-item-fs: unset;
-    --_na-item-p: var(--su6) var(--su12);
-    --_na-item-py: var(--su12);
+    --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
     --_na-item-ws: nowrap;
-    --_na-item-bg-hover: var(--black-200);
+    --_na-item-bg-hover: var(--black-100);
     --_na-item-fc-hover: var(--_na-item-fc);
-    --_na-item-selected-bg: var(--theme-primary);
-    --_na-item-selected-fc: var(--white);
-    --_na-item-selected-bg-hover: var(--theme-primary-500);
+    --_na-item-selected-bg: none;
+    --_na-item-selected-fc: var(--black-600);
+    --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
+    --_na-item-selected-h: var(--su-static2);
     --_na-item-text-ta: center;
-    --_na-title-mt: var(--su16);
+    --_na-title-mt: var(--su24);
+    --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
+    --_na-after-bg-color: var(--black-400);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -33,7 +35,7 @@
 
     &&__sm {
         --_na-item-fs: var(--fs-caption);
-        --_na-item-p: var(--su4) var(--su12);
+        --_na-item-p: var(--su6) var(--su4);
     }
 
     &&__vertical {
@@ -42,19 +44,20 @@
         --_na-p: 0;
         --_na-item-text-ta: unset;
         --_na-item-ws: normal;
-    }
+        --_na-item-selected-h: 0;
+        --_na-item-p: var(--su6) var(--su8);
+        & .s-navigation--item {
+            &.is-selected {
+                --_na-item-bg: var(--black-150);
+            }
 
-    // VARIANTS
-    &&__muted {
-        --_na-item-selected-bg: var(--black-150);
-        --_na-item-selected-fc: var(--black-600);
-        --_na-item-selected-bg-hover: var(--_na-item-bg);
-
-        .highcontrast-mode({
-            --_na-item-selected-bg: var(--black-600);
-            --_na-item-selected-fc: var(--black-150);
-            --_na-item-selected-bg-hover: var(--black-600);
-        });
+            &:has(.s-navigation--icon) {
+                --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
+            }
+            &:has(.s-navigation--avatar) {
+                --_na-item-p: var(--su12) var(--su8);
+            }
+        }
     }
 
     // CHILD ELEMENTS
@@ -65,8 +68,18 @@
             --_na-item-fc-hover: var(--_na-item-fc);
             --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
 
+            &:before {
+                content: "";
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: var(--_na-item-selected-h);
+                background-color: var(--_na-item-selected-fc);
+            }
+
             .highcontrast-mode({
-                text-decoration: none;
+                --_na-item-fc-hover: var(--white);
             });
 
             font-weight: bold;
@@ -75,22 +88,22 @@
         // TODO: include child component class (without variant) on selector
         &__dropdown {
             &:after {
-                border-style: solid;
-                border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
-                border-color: currentColor transparent;
+                mask-image: var(--_na-after-mask);
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background-color: var(--_na-after-bg-color);
                 content: "";
-                pointer-events: none;
-                position: absolute;
-                right: 0.9em;
-                top: calc(50% - var(--su-static2)); // 50% - 2px
-                z-index: var(--zi-active);
+                height: var(--su12);
+                width: var(--su12);
+                margin-left: var(--su8);
             }
-
-            padding-right: 2em;
         }
 
         &:hover,
         &:active {
+            .highcontrast-mode({
+                --_na-after-bg-color: var(--white);
+            });
             background-color: var(--_na-item-bg-hover);
             color: var(--_na-item-fc-hover);
         }
@@ -108,7 +121,7 @@
 
         align-items: center;
         border: none; // Reset some things for when the navigation item is also a button
-        border-radius: 1000px;
+        border-radius: var(--br-md);
         box-shadow: none;
         cursor: pointer;
         display: flex;
@@ -136,12 +149,23 @@
             --_na-title-mt: 0;
         }
 
-        margin-top: var(--_na-title-mt);
+        & .s-btn {
+            color: var(--black-400);
+        }
 
+        margin-top: var(--_na-title-mt);
         font-size: var(--fs-fine);
-        font-weight: bold;
-        padding: var(--su6) var(--su12);
-        text-transform: uppercase;
+        color: var(--black-400);
+        padding: calc(var(--su16) + var(--su2)) var(--su8);
+    }
+
+    & &--icon {
+        color: inherit;
+        margin-right: var(--su4);
+    }
+
+    & &--avatar {
+        margin-right: var(--su8);
     }
 
     flex-direction: var(--_na-fd);

package/lib/components/notice/notice.less

@@ -158,7 +158,7 @@
         color: var(--_no-code-fc);
         outline: var(--su-static1) solid var(--_no-code-bc);
 
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         padding-left: var(--su2);
         padding-right: var(--su2);
     }

package/lib/components/pagination/pagination.less

@@ -8,70 +8,71 @@
     }
 
     & &--item {
-        --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-darker);
-        --_pa-item-fc: var(--fc-medium);
-        --_pa-item-bg-focus: var(--black-400);
-        --_pa-item-fc-focus: var(--white);
-        --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-darker);
-        --_pa-item-fc-hover: var(--fc-dark);
-
-        // CONTEXTUAL STYLES
-        .highcontrast-mode({ text-decoration: none; });
+        --_pa-item-bg: unset;
+        --_pa-item-br: unset;
+        --_pa-item-fc: var(--black-400);
+        --_pa-item-p: var(--su-static4);
 
         // MODIFIERS
         &.is-selected {
-            --_pa-item-bg: var(--theme-primary);
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: var(--white);
-            --_pa-item-bg-focus: var(--theme-primary-400);
-        }
-        &.s-pagination--item__clear {
-            --_pa-item-bg: transparent;
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: inherit;
+            --_pa-item-fc: var(--black-600);
+
+            &:not(:hover):not(:focus-visible):before {
+                background-color: var(--black-600);
+                content: "";
+                height: var(--su-static2);
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 100%;
+            }
         }
-        // override hover styles to match base styles
-        &.is-selected,
-        &.s-pagination--item__clear {
-            --_pa-item-bc-hover: var(--_pa-item-bc);
-            --_pa-item-bg-hover: var(--_pa-item-bg);
-            --_pa-item-fc-hover: var(--_pa-item-fc);
+        &.s-pagination--item__nav {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-circle);
+            --_pa-item-fc: var(--black-600);
+            --_pa-item-p: var(--su-static6);
+
+            aspect-ratio: 1 / 1;
+
+            &:hover {
+                --_pa-item-bg: var(--black-200);
+            }
         }
 
         // INTERACTION
-        &:hover {
-            background-color: var(--_pa-item-bg-hover);
-            border-color: var(--_pa-item-bc-hover);
-            color: var(--_pa-item-fc-hover);
+        &[href]:hover:not(&__nav) {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-pill);
+            --_pa-item-fc: var(--black-600);
         }
-
         &:focus-visible {
-            .focus-styles(true, true);
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-fc: var(--black-600);
+            .focus-styles(false, true);
         }
-
-        &:focus-visible,
+        &:focus-visible:not(&__nav),
         &.focus-inset-bordered {
-            background-color: var(--_pa-item-bg-focus);
-            color: var(--_pa-item-fc-focus);
+            --_pa-item-br: var(--br-md);
         }
 
         background-color: var(--_pa-item-bg);
-        border: 1px solid var(--_pa-item-bc);
+        border-radius: var(--_pa-item-br);
         color: var(--_pa-item-fc);
+        padding: var(--_pa-item-p);
 
-        border-radius: var(--br-sm);
-        display: inline-block;
-        font-size: var(--fs-body1);
-        line-height: var(--lh-xl);
-        padding: 0 var(--su8);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin: var(--su-static1);
+        position: relative;
     }
 
     &,
     ul {
         display: flex;
+        align-items: center;
         flex-wrap: wrap;
-        gap: var(--su4);
+        gap: var(--su2);
     }
 }

package/lib/components/popover/popover.less

@@ -5,18 +5,6 @@
     --_po-d: none;
     --_po-wmn: 12rem;
     --_po-w: 100%;
-    // arrow
-    --_po-arrow-fc: var(--white);
-    --_po-arrow-b: unset;
-    --_po-arrow-l: unset;
-    --_po-arrow-r: unset;
-    --_po-arrow-t: unset;
-    --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
-    --_po-arrow-after-b: unset;
-    --_po-arrow-after-l: unset;
-    --_po-arrow-after-r: unset;
-    --_po-arrow-after-t: unset;
-    --_po-arrow-after-bs: unset;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
     --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
@@ -24,10 +12,7 @@
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_po-bg: var(--black-200);
-        --_po-bc: var(--bc-light);
-        --_po-bs: var(--bs-lg);
-        --_po-arrow-fc: var(--black-200);
+        --_po-bg: var(--black-100);
     });
 
     // MODIFIERS
@@ -41,97 +26,12 @@
     }
 
     // CHILD ELEMENTS
-    // Arrow
-    &[data-popper-placement^="top"] > &--arrow,
-    & &--arrow__bc,
-    & &--arrow__bl,
-    & &--arrow__br {
-        --_po-arrow-b: var(--_po-arrow-ps);
-        --_po-arrow-after-b: var(--su-static1);
-        --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="bottom"] > &--arrow,
-    & &--arrow__tc,
-    & &--arrow__tl,
-    & &--arrow__tr {
-        --_po-arrow-t: var(--_po-arrow-ps);
-        --_po-arrow-after-t: var(--su-static1);
-        --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="left"] > &--arrow,
-    & &--arrow__rc,
-    & &--arrow__rt,
-    & &--arrow__rb {
-        --_po-arrow-r: var(--_po-arrow-ps);
-        --_po-arrow-after-r: var(--su-static1);
-        --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="right"] > &--arrow,
-    & &--arrow__lc,
-    & &--arrow__lt,
-    & &--arrow__lb {
-        --_po-arrow-l: var(--_po-arrow-ps);
-        --_po-arrow-after-l: var(--su-static1);
-        --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
-    }
-    & &--arrow__tc,
-    & &--arrow__bc {
-        --_po-arrow-l: calc(50% - var(--su6));
-    }
-    & &--arrow__lc,
-    & &--arrow__rc {
-        --_po-arrow-t: calc(50% - var(--su6));
-    }
-    & &--arrow__tr,
-    .s-popover--arrow__br {
-        --_po-arrow-r: var(--su12);
-    }
-    & &--arrow__rb,
-    & &--arrow__lb {
-        --_po-arrow-b: var(--su12);
-    }
-    & &--arrow {
-        &,
-        &:before,
-        &:after {
-            display: block;
-            height: var(--su12);
-            position: absolute;
-            width: var(--su12);
-            z-index: -1;
-        }
-        &:before, // This renders our border
-        &:after {
-            content: '';
-            transform: rotate(45deg);
-        }
-        &:after { // This renders our foreground color
-            bottom: var(--_po-arrow-after-b);
-            box-shadow: var(--_po-arrow-after-bs);
-            left: var(--_po-arrow-after-l);
-            right: var(--_po-arrow-after-r);
-            top: var(--_po-arrow-after-t);
-
-            background: currentColor;
-            border-radius: calc(var(--su-static1) * 1.5);
-        }
-
-        bottom: var(--_po-arrow-b);
-        color: var(--_po-arrow-fc);
-        left: var(--_po-arrow-l);
-        right: var(--_po-arrow-r);
-        top: var(--_po-arrow-t);
-    }
     // Close btn
     & &--close {
         float: right; // Use floats for title wrapping
         top: calc(var(--su8) * -1); // Compensate for s-popover's padding
         right: calc(var(--su8) * -1); // Compensate for s-popover's padding
-        padding: var(--su8) !important;
+        padding: var(--su6) !important;
     }
 
     & &--content {
@@ -142,7 +42,7 @@
     }
 
     background-color: var(--_po-bg);
-    border: 1px solid var(--_po-bc);
+    border: var(--su-static1) solid var(--_po-bc);
     box-shadow: var(--_po-bs);
     display: var(--_po-d);
     min-width: var(--_po-wmn);

package/lib/components/popover/popover.ts

@@ -231,12 +231,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
                         offset: [0, 10], // The entire popover should be 10px away from the element
                     },
                 },
-                {
-                    name: "arrow",
-                    options: {
-                        element: ".s-popover--arrow",
-                    },
-                },
             ],
         });
     }

package/lib/components/popover/tooltip.ts

@@ -137,22 +137,10 @@ export class TooltipController extends BasePopoverController {
             }
         }
 
-        const arrow = popover.querySelector(".s-popover--arrow");
-
         // clear and set the content of the popover
         popover.innerHTML = "";
         popover.appendChild(content);
 
-        // create the arrow if necessary
-        if (arrow) {
-            popover.appendChild(arrow);
-        } else {
-            popover.insertAdjacentHTML(
-                "beforeend",
-                `<div class="s-popover--arrow"></div>`
-            );
-        }
-
         this.scheduleUpdate();
 
         return popover;

package/lib/components/post-summary/post-summary.less

@@ -5,7 +5,7 @@
     --_ps-o: unset;
     // Child components
     --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
-    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
+    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
     --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
     --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
     --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
@@ -76,6 +76,7 @@
 
                     background-color: var(--_ps-meta-tags-tag-bg);
                     color: var(--black-500);
+                    border-color: var(--black-300);
                 }
             }
         }
@@ -119,7 +120,7 @@
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
             --_ps-bg: var(--yellow-100);
             --_ps-stats-fc: var(--black-400);
-            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
+            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
             --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
             --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
             --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
@@ -368,7 +369,7 @@
             &.is-pinned,
             &.is-published,
             &.is-review {
-                border-radius: var(--br-sm);
+                border-radius: var(--br-md);
                 padding: var(--su2) var(--su4);
             }
 

package/lib/components/progress-bar/progress-bar.less

@@ -2,13 +2,13 @@
     // COMPONENT-SPECIFIC CONSTANTS
     @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_pr-bar: var(--br-sm);
+    --_pr-bar: var(--br-md);
     --_pr-bg: var(--black-300);
     --_pr-h: unset;
     --_pr-size: unset;
     --_pr-w: 100%;
     --_pr-hmn: var(--su-static4);
-    --_pr-bar-bar: var(--br-sm);
+    --_pr-bar-bar: var(--br-md);
     --_pr-bar-bg: var(--green-400);
     --_pr-bar-hmn: var(--su-static4);
     --_pr-label-ai: unset;
@@ -23,14 +23,15 @@
         --_pr-bar-bg: var(--orange-400);
     }
 
+    // TODO SPARK I've changed metallic colors here to use their new non-metallic equivalents
     &&__bronze {
-        --_pr-bar-bg: var(--bronze-100);
-        --_pr-label-bc: var(--bronze-400);
+        --_pr-bar-bg: var(--orange-100);
+        --_pr-label-bc: var(--orange-400);
     }
 
     &&__gold {
-        --_pr-bar-bg: var(--gold-100);
-        --_pr-label-bc: var(--gold-400);
+        --_pr-bar-bg: var(--yellow-100);
+        --_pr-label-bc: var(--yellow-400);
     }
 
     &&__info {
@@ -38,8 +39,8 @@
     }
 
     &&__silver {
-        --_pr-bar-bg: var(--silver-100);
-        --_pr-label-bc: var(--silver-400);
+        --_pr-bar-bg: var(--blue-100);
+        --_pr-label-bc: var(--blue-400);
     }
 
     // VARIANTS
@@ -161,7 +162,7 @@
                 &.is-active {
                     .s-progress {
                         &--bar.s-progress--bar__left {
-                            background: var(--theme-secondary-400);
+                            background: var(--theme-secondary);
                         }
 
                         &--label {
@@ -169,8 +170,8 @@
                         }
 
                         &--stop {
-                            background: var(--theme-secondary-400);
-                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
+                            background: var(--theme-secondary);
+                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
                         }
                     }
                 }
@@ -179,7 +180,7 @@
                     .s-progress {
                         &--bar,
                         &--stop {
-                            background: var(--theme-secondary-400);
+                            background: var(--theme-secondary);
                         }
 
                         &--label {

package/lib/components/prose/prose.less

@@ -81,7 +81,7 @@
             padding: var(--su2) var(--su4);
             color: var(--black-600);
             background-color: var(--black-200);
-            border-radius: var(--br-sm);
+            border-radius: var(--br-md);
         }
     }
 
@@ -316,7 +316,7 @@
         box-shadow: var(--_pr-kbd-bs);
 
         background-color: var(--black-200);
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         color: var(--black-600);
         display: inline-block;
         font-family: var(--ff-sans);