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

package/lib/components/select/select.less

@@ -1,13 +1,13 @@
 .s-select {
-    --_se-arrow-bc: currentColor transparent;
-    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-arrow-fc: currentColor;
     --_se-select-bc: var(--bc-darker);
     --_se-select-bg: var(--white);
     --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
     --_se-select-px: 0.7em;
-    --_se-select-py: 0.6em;
+    --_se-select-py: var(--su-static8);
     --_se-select-fs: var(--fs-body1);
+    --_se-select-lh: var(--lh-base);
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
@@ -23,30 +23,15 @@
 
     .validation-states(se-select);
 
-    .is-disabled & {
-        --_se-arrow-bc: var(--bc-dark) transparent;
-    }
-
     &&__sm {
         .size-styles(sm; se-select; @styles: fs);
-        // --_se-select-fs: var(--fs-caption);
-    }
-
-    &&__md {
-        .size-styles(md; se-select; @styles: br, fs);
-        --_se-select-py: 0.5em;
+        --_se-select-lh: var(--lh-sm);
+        --_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
     }
 
     &&__lg {
-        .size-styles(lg; se-select; @styles: br, fs);
-        --_se-select-px: 0.6em;
-        --_se-select-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; se-select; @styles: br, fs);
-        --_se-select-px: 0.5em;
-        --_se-select-py: 0.4em;
+        .size-styles(md; se-select; @styles: fs);
+        --_se-select-lh: var(--lh-lg);
     }
 
     // CHILD ELEMENTS
@@ -55,26 +40,29 @@
         .webkit-autofill();
     }
 
-    &:before,
-    &:after { // menu arrows
-        border-color: var(--_se-arrow-bc);
-        border-style: solid;
-        border-width: var(--_se-arrow-size);
+    &:after { // Chevron16UpDown icon
+        background-color: currentColor;
         content: "";
+        height: var(--su-static16);
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
         pointer-events: none;
         position: absolute;
-        right: calc(var(--su-static12) + var(--su-static1));
+        right: calc(var(--su32) - var(--su-static24));
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--su-static16);
         z-index: var(--zi-selected);
     }
 
-    &:after {
-        border-bottom-width: 0;
-        top: calc(50% + var(--su-static1));
-    }
+    .is-disabled & {
+        --_se-arrow-fc: var(--bc-dark);
 
-    &:before {
-        border-top-width: 0;
-        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+        &:after {
+            background-color: var(--_se-arrow-fc);
+        }
     }
 
     > select { // Menu
@@ -82,7 +70,8 @@
         fieldset[disabled] &,
         &[disabled] {
             cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
+            --_se-select-fc: var(--black-300);
+            --_se-select-bg: var(--black-100);
         }
 
         &[readonly],
@@ -118,7 +107,7 @@
         appearance: none;
         font-family: inherit;
         height: 100%; // Fill the height of its parent
-        line-height: var(--lh-sm);
+        line-height: var(--_se-select-lh);
         outline: 0;
         padding-right: var(--su32);
         position: relative; // This prevents Firefox from requiring a second click to select options

package/lib/components/skeleton/skeleton.less

@@ -45,7 +45,7 @@
             var(--_sk-bg-1) 83%
         );
         background-size: 400% 100%;
-        border-radius: var(--br-lg);
+        border-radius: var(--br-md);
         display: block;
         height: var(--su16);
         position: relative;

package/lib/components/tag/tag.less

@@ -2,84 +2,87 @@
     // Base
     --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
     --_ta-bg: var(--theme-tag-background-color, var(--black-150));
-    --_ta-fc: var(--theme-tag-color, var(--black-500));
+    --_ta-fc: var(--theme-tag-color, var(--black-600));
     // Hover
     --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
     --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
     --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
     // Other
-    --_ta-br: var(--br-sm);
     --_ta-fs: var(--fs-caption);
-    --_ta-lh: 1.846153846;
-    --_ta-pl: var(--_ta-px);
-    --_ta-pr: var(--_ta-px);
-    --_ta-px: var(--su4);
-    --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
+    --_ta-pb: calc(var(--_ta-pt) + var(--su1));
+    --_ta-pl: var(--su8);
+    --_ta-pr: var(--su8);
+    --_ta-pt: var(--su4);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         &: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));
+
+            &.s-tag__ignored {
+                --_ta-fc: var(--black-500);
+            }
         }
     });
 
     // MODIFIERS
     // Sizes
-    &&__xs {
-        .size-styles(xs; ta; @styles: fs);
-        --_ta-lh: 1.4;
-        --_ta-px: var(--su2);
-    }
     &&__sm {
-        .size-styles(sm; ta; @styles: fs);
-        --_ta-lh: 1.5;
-    }
-    &&__md {
-        --_ta-px: var(--su6);
-        --_ta-fs: var(--fs-body2);
-        --_ta-lh: 1.733333333;
+        --_ta-pl: var(--su4);
+        --_ta-pr: var(--su4);
+        --_ta-pt: var(--su1);
     }
     &&__lg {
-        --_ta-br: calc(var(--br-sm) + var(--su-static1));
-        --_ta-fs: var(--fs-subheading);
-        --_ta-lh: 1.684210526;
-        --_ta-px: var(--su6);
+        --_ta-fs: var(--fs-body1);
+        --_ta-pt: var(--su4);
     }
 
     // VARIANTS
-    // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored,
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
-        --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
-        --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
-        // --_ta-before-icon defined per variant
-
         &:before {
-            height: var(--_ta-before-size);
-            width: var(--_ta-before-size);
+            // --_ta-before-icon defined per variant
             -webkit-mask: var(--_ta-before-icon) no-repeat center;
             mask: var(--_ta-before-icon) no-repeat center;
 
             background-color: currentColor;
             content: "";
             display: block;
-            left: var(--su-static4);
-            margin-right: var(--su2);
-            position: absolute;
-            top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
+            height: calc(var(--su-static16) - var(--su-static2));
             -webkit-mask-size: contain;
-            mask-size: contain;
+            mask-size: contain;            
+            width: calc(var(--su-static16) - var(--su-static2));
         }
+    }
 
-        position: relative;
+    &&__deleted,
+    &&__ignored {
+        &,
+        &.s-tag__required:not(&__moderator),
+        &.s-tag__moderator {
+            --_ta-bc-hover: var(--_ta-bc);
+            --_ta-bg-hover: var(--_ta-bg);
+            --_ta-fc-hover: var(--_ta-fc);
+        }
+    }
+    
+    // TODO SHINE this is considered inaccessible. Discuss w/ design.
+    &&__deleted {
+        --_ta-fc: var(--black-500);
+
+        &.s-tag__required:not(&__moderator) {
+            --_ta-bc: var(--black-300);
+            --_ta-fc: var(--black-400);
+        }
     }
 
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
+    // TODO SHINE this is considered inaccessible. Discuss w/ design.
     &&__ignored {
+        --_ta-bg-hover: var(--_ta-bg);
         --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
+        --_ta-fc: var(--black-400);
+        --_ta-fc-hover: var(--black-400);
     }
 
     // moderator overrides other required
@@ -93,51 +96,44 @@
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
-        --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
-        --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
+        --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-500)));
         --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
-        --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
-        --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
     }
 
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
-        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
+        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
     }
 
     // CHILD ELEMENTS
-    & button&--dismiss:not(.s-btn) {
-        all: unset;
+    // Dismiss
+    &:has(> &--dismiss) {
+        --_ta-pr: var(--su2);
     }
-
-    & &--dismiss,
-    & button&--dismiss:not(.s-btn) { // Style adjustment to @Svg.ClearSm
+    & &--dismiss {
         &:focus-visible {
             .focus-styles();
         }
 
         &:hover {
-            .highcontrast-mode({
-                color: var(--white);
-            });
-
             background-color: var(--_ta-fc);
             color: var(--_ta-bg);
         }
 
+        all: unset;
         align-items: center;
-        align-self: stretch;
         background-color: transparent;
-        border-radius: var(--br-sm);
         color: inherit;
         cursor: pointer;
         display: flex;
         justify-content: center;
-        margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
-        padding: var(--_ta-dismiss-padding);
+        margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
+        padding: var(--su2);
     }
 
+    // Sponsor
+    &:has(> &--sponsor) {
+        --_ta-pl: var(--su2);
+    }
     & &--sponsor { // The small sponsor favicon displayed within a tag
         img,
         .svg-icon {
@@ -145,11 +141,8 @@
             height: 100%;
         }
 
-        align-self: center;
-        border-radius: calc(var(--br-sm) - var(--su-static1));
-        display: inline-flex;
-        margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
         max-width: calc(var(--su-static16) + var(--su-static2));
+        margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
     }
 
     // INTERACTION
@@ -168,19 +161,15 @@
 
     background-color: var(--_ta-bg);
     border: var(--su-static1) solid var(--_ta-bc);
-    border-radius: var(--_ta-br);
     color: var(--_ta-fc);
     font-size: var(--_ta-fs);
-    line-height: var(--_ta-lh);
-    padding-left: var(--_ta-pl);
-    padding-right: var(--_ta-pr);
+    padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
 
     align-items: center;
     display: inline-flex;
-    font-weight: 700;
+    gap: var(--su4);
     justify-content: center;
-    min-width: 0;
+    line-height: var(--lh-xs);
     text-decoration: none;
-    vertical-align: middle;
     white-space: nowrap;
 }

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

@@ -1,14 +1,16 @@
 .s-toggle-switch {
     @ts-bg-image-fill: .set-white()[default];
     @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-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}'/%3e%3c/svg%3e");
+    --_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;
     --_ts-multiple-fc: var(--black-400);
 
     .dark-mode({
-        --_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-dark}'/%3e%3c/svg%3e");
+        --_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-dark-esc}'/%3e%3c/svg%3e");
     });
 
     fieldset[disabled] &,

package/lib/components/topbar/topbar.less

@@ -198,7 +198,7 @@
             color: var(--_tb-item-fc);
 
             align-items: center;
-            border-radius: var(--br-sm);
+            border-radius: var(--br-md);
             display: inline-flex;
             padding: 0 calc(var(--su12) - var(--su2));
             position: relative;
@@ -217,7 +217,7 @@
         background-color: var(--_tb-logo-bg);
 
         align-items: center;
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         display: flex;
         height: 100%;
         padding: 0 var(--su8);
@@ -323,7 +323,7 @@
         color: var(--_tb-notice-fc);
         text-decoration: var(--_tb-notice-td);
 
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         display: inline-flex;
         flex-shrink: 0;
         font-size: var(--fs-fine);

package/lib/components/uploader/uploader.less

@@ -69,7 +69,7 @@
             -webkit-mask-image: var(--_up-bg-b-image);
             mask-image: var(--_up-bg-b-image);
             background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
-            border-radius: var(--br-lg);
+            border-radius: var(--br-md);
             content: '';
             display: block;
             inset: 0;
@@ -78,7 +78,7 @@
 
         align-items: center;
         background-color: var(--_up-bg);
-        border-radius: var(--br-lg);
+        border-radius: var(--br-md);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -127,7 +127,7 @@
         }
 
         background-color: var(--white);
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         box-shadow: var(--bs-md);
         max-height: var(--su-static128);
         max-width: 100%;

package/lib/exports/color-mixins.less

@@ -261,19 +261,29 @@
 
     each(@tiers, .(@tier, @k, @i) {
         @stops: 100, 200, 300, 400, 500, 600;
-        @fallbackColor: if(@tier = primary, orange, blue);
+        @fallbackColor: if(@tier = primary, orange, black);
         @baseThemeVar: ~"--theme-@{tier}";
         @customThemeVar: if(@mode = light, ~"@{baseThemeVar}-custom", ~"--theme-dark-@{tier}-custom");
 
         & when (@mode = light), (@mode = dark) {
-            @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
+            & when (@tier = primary) {
+                @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
+            }
+            & when (@tier = secondary) {
+                @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}))";
+            }
             each(@stops, .(@stop, @kStop, @iStop) {
                 @{baseThemeVar}-@{stop}: ~"var(@{customThemeVar}-@{stop}, var(--@{fallbackColor}-@{stop}))";
             });
         }
 
         & when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
-            @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
+            & when (@tier = primary) {
+                @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
+            }
+            & when (@tier = secondary) {
+            @{baseThemeVar}: ~"var(--@{fallbackColor})";
+            }
 
             each(@stops, .(@stop, @kStop, @iStop) {
                 @{baseThemeVar}-@{stop}: ~"var(--@{fallbackColor}-@{stop})";