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

package/lib/atomic/misc.less

@@ -297,7 +297,7 @@
 //  $  OUTLINE
 //  ----------------------------------------------------------------------------
 .outline-none { outline: 0 !important; }
-.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
+.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); } // TODO SHINE revisit this value once theme colors are finalized
 
 .f\:outline-ring {
     &:focus,

package/lib/atomic/typography.less

@@ -37,36 +37,22 @@ p {
 .fs-body3 { font-size: var(--fs-body3) !important; }
 .fs-body2 { font-size: var(--fs-body2) !important; }
 .fs-body1 { font-size: var(--fs-body1) !important; }
-
-.fs-caption,
-.fs-category { font-size: var(--fs-caption) !important; }
+.fs-caption { font-size: var(--fs-caption) !important; }
 .fs-fine { font-size: var(--fs-fine) !important; }
 
 #stacks-internals #screen-sm({
-    .fs-display4 { font-size: 3.8rem !important; }
-    .fs-display3 { font-size: 3.3rem !important; }
-    .fs-display2 { font-size: 3rem !important; }
-    .fs-display1 { font-size: 2.6rem !important; }
-    .fs-headline2 { font-size: 2.3rem !important; }
-    .fs-headline1 { font-size: 2rem !important; }
-    .fs-title { font-size: 1.8rem !important; }
-    .fs-subheading { font-size: 1.6rem !important; }
-    .fs-body3 { font-size: 1.4rem !important; }
-    .fs-body2 { font-size: 1.3rem !important; }
+    .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
+    .fs-display3 { font-size: calc(var(--fs-display3) * .5139) !important; } // ~37px
+    .fs-display2 { font-size: calc(var(--fs-display2) * .5862) !important; } // ~34px
+    .fs-display1 { font-size: calc(var(--fs-display1) * .6304) !important; }  // ~29px
+    .fs-headline2 { font-size: calc(var(--fs-headline2) * .7224) !important; } // ~26px
+    .fs-headline1 { font-size: calc(var(--fs-headline1) * .8215) !important; } // ~23px
+    .fs-title { font-size: calc(var(--fs-title) * .9094) !important; } // ~20px
+    .fs-subheading { font-size: calc(var(--fs-subheading) * .8998) !important; } // ~18px
+    .fs-body3 { font-size: calc(var(--fs-body3) * .8888) !important; } // ~16px
+    .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
 }, @force-selector: true);
 
-.fs-category {
-    font-weight: 700;
-    text-transform: uppercase;
-
-    // If a top border is desired
-    &.has-border {
-        width: 100%;
-        padding: var(--su4) 0;
-        border-top: var(--su-static1) solid var(--bc-medium);
-    }
-}
-
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
@@ -89,7 +75,8 @@ p {
 
 //  --  Font Weight
 .fw-normal { font-weight: 400 !important; }
-.fw-bold { font-weight: 700 !important; }
+.fw-medium { font-weight: 500 !important; }
+.fw-bold { font-weight: 600 !important; }
 
 //  --  Font Styles
 .fs-normal { font-style: normal !important; }

package/lib/base/body.less

@@ -24,13 +24,6 @@ body {
     line-height: var(--lh-base);
 }
 
-#stacks-internals #screen-sm({
-    &,
-    body {
-        font-size: 11px;
-    }
-}, @force-selector: true);
-
 body {
     box-sizing: border-box;
     min-height: 100%;
@@ -41,4 +34,6 @@ body {
     *:after {
         box-sizing: inherit;
     }
+
+    // TODO SHINE set max width here
 }

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,5 +1,5 @@
 .s-activity-indicator {
-    --_ai-bg: var(--theme-secondary-400);
+    --_ai-bg: var(--pink-400);
     --_ai-fc: var(--white);
     --_ai-min-size: var(--su-static16);
     --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
@@ -27,7 +27,6 @@
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-        --_ai-fc: var(--_black-static);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast

package/lib/components/anchor/anchor.less

@@ -28,7 +28,7 @@
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
         --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
         --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
         --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));

package/lib/components/badge/badge.less

@@ -62,18 +62,18 @@
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-300);
-        --_ba-bg: var(--gold-100);
+        --_ba-bc: var(--yellow-300);
+        --_ba-bg: var(--yellow-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-300);
-        --_ba-bg: var(--silver-100);
+        --_ba-bc: var(--blue-300);
+        --_ba-bg: var(--blue-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-300);
-        --_ba-bg: var(--bronze-100);
+        --_ba-bc: var(--orange-300);
+        --_ba-bg: var(--orange-100);
     }
 
     // Number counts

package/lib/components/bling/bling.less

@@ -0,0 +1,93 @@
+.s-bling {
+    --_bl-bg: unset;
+    --_bl-size: calc(var(--su8) + var(--su2));
+    // Icon
+    --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
+    --_bl-icon-bg: var(--black-500);
+    --_bl-icon-size: var(--su8);
+
+    // VARIANTS
+    &&__gold,
+    &&__silver {
+        --_bl-icon-size: calc(var(--su8) + var(--su2));
+    }
+
+    &&__activity {
+        --_bl-icon-bg: var(--pink-400);
+    }
+    // Metals
+    &&__gold {
+        --_bl-icon-bg: var(--yellow-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
+    }
+
+    &&__silver {
+        --_bl-icon-bg: var(--blue-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
+    }
+
+    &&__bronze {
+        --_bl-icon-bg: var(--orange-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
+    }
+
+    // MODIFIERS
+    // Filled
+    &&__filled {
+        --_bl-bg: var(--black-225);
+        --_bl-icon-bg: var(--black-600);
+        --_bl-size: var(--su24);
+
+        &.s-bling {
+            &__rep {
+                --_bl-bg: var(--black-300);
+            }
+            &__activity {
+                --_bl-bg: var(--pink-300);
+                --_bl-icon-bg: var(--pink-600);
+            }
+            &__gold {
+                --_bl-bg: var(--yellow-300);
+                --_bl-icon-bg: var(--yellow-600);
+            }
+            &__silver {
+                --_bl-bg: var(--blue-300);
+                --_bl-icon-bg: var(--blue-600);
+            }
+            &__bronze {
+                --_bl-bg: var(--orange-300);
+                --_bl-icon-bg: var(--orange-600);
+            }
+        }
+    }
+
+    // Sizes
+    &&__sm {
+        --_bl-icon-size: var(--su6);
+        --_bl-size: var(--su16);
+    }
+
+    &&__lg {
+        --_bl-size: calc(var(--su24) + var(--su4)); // 28px
+    }
+
+    // CHILD ELEMENTS
+    &:before {
+        -webkit-mask: var(--_bl-icon) no-repeat center;
+        mask: var(--_bl-icon) no-repeat center;
+
+        background-color: var(--_bl-icon-bg);
+        content: "";
+        height: var(--_bl-icon-size);
+        width: var(--_bl-icon-size);
+    }
+
+    background-color: var(--_bl-bg);
+    height: var(--_bl-size);
+    width: var(--_bl-size);
+
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    justify-content: center;
+}

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -48,21 +48,23 @@
     // Less variables for check svg fill color
     @ch-bg-image-fill: .set-white()[default];
     @ch-bg-image-fill-dark: .set-white-dark()[default];
+    @ch-bg-image-fill-esc: escape("@{ch-bg-image-fill}"); // color escaped for URL usage
+    @ch-bg-image-fill-dark-esc: escape("@{ch-bg-image-fill-dark}"); // color escaped for URL usage
 
     // CONTEXTUAL STYLES
     .dark-mode({
         &:checked {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
         &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
     });
 
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-500) !important;
-            --_ch-bg: var(--blue-400);
+            --_ch-bc: var(--black) !important;
+            --_ch-bg: var(--black);
         }
     });
 
@@ -75,16 +77,16 @@
 
     // STATES
     &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary) !important;
+        --_ch-bg: var(--theme-secondary);
     }
 
     &:checked {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     background-image: var(--_ch-bg-image);
@@ -100,7 +102,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-400);
+            --_ch-bc: var(--black);
             outline: var(--su-static1) solid var(--black);
         }
     });
@@ -108,7 +110,7 @@
     // STATES
     &:checked {
         --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary);
         --_ch-bg: var(--white);
     }
 

package/lib/components/link/link.less

@@ -26,7 +26,7 @@ a {
 
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_li-fc: var(--theme-link-color, var(--theme-secondary));
     --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
     --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
     --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));

package/lib/components/link-preview/link-preview.less

@@ -129,7 +129,7 @@
             color: var(--theme-link-color, var(--purple-500));
         }
 
-        color: var(--theme-link-color, var(--theme-secondary-400));
+        color: var(--theme-link-color, var(--theme-secondary));
         cursor: pointer;
         text-decoration: none;
     }

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)));

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

@@ -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/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-md);
     --_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-md) + 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-md);
         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-md) - 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] &,