@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

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

@@ -13,11 +13,11 @@
     --_ps-stats-fd: column;
     --_ps-stats-w: calc(var(--su96) + var(--su12));
     // Stats item modifiers
-    --_ps-has-answers-bc: var(--green-700);
+    --_ps-has-answers-bc: var(--green-500);
     --_ps-has-answers-bg: unset;
-    --_ps-has-answers-fc: var(--green-700);
-    --_ps-has-accepted-answers-bc: var(--green-700);
-    --_ps-has-accepted-answers-bg: var(--green-700);
+    --_ps-has-answers-fc: var(--green-500);
+    --_ps-has-accepted-answers-bc: var(--green-500);
+    --_ps-has-accepted-answers-bg: var(--green-500);
     --_ps-has-accepted-answers-fc: var(--white);
     --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
 
@@ -50,15 +50,15 @@
     &&__deleted,
     &&__ignored {
         --_ps-o: 0.75;
-        --_ps-has-answers-bc: var(--black-300);
+        --_ps-has-answers-bc: var(--black-350);
         --_ps-has-answers-bg: transparent;
         --_ps-has-answers-fc: var(--_ps-state-fc);
         --_ps-has-accepted-answers-bc: transparent;
-        --_ps-has-accepted-answers-bg: var(--black-050);
+        --_ps-has-accepted-answers-bg: var(--black-150);
         --_ps-has-accepted-answers-fc: var(--_ps-state-fc);
-        --_ps-meta-tags-tag-bg: var(--black-050);
+        --_ps-meta-tags-tag-bg: var(--black-150);
         --_ps-meta-tags-tag-fc: var(--_ps-state-fc);
-        --_ps-state-fc: var(--black-500);
+        --_ps-state-fc: var(--black-400);
 
         .s-post-summary--meta-tags {
             a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
@@ -73,7 +73,7 @@
                     });
 
                     background-color: var(--_ps-meta-tags-tag-bg);
-                    color: var(--black-600);
+                    color: var(--black-500);
                 }
             }
         }
@@ -97,26 +97,26 @@
     }
 
     &&__deleted {
-        --_ps-bg: var(--red-025);
-        --_ps-has-accepted-answers-bg: var(--black-075);
-        --_ps-has-accepted-answers-fc: var(--black-600);
-        --_ps-meta-tags-tag-bg: var(--black-075);
+        --_ps-bg: var(--red-100);
+        --_ps-has-accepted-answers-bg: var(--black-200);
+        --_ps-has-accepted-answers-fc: var(--black-500);
+        --_ps-meta-tags-tag-bg: var(--black-200);
 
         .is-deleted,
         .s-badge__danger.s-badge__filled {
             .dark-mode({
-                background-color: var(--red-800);
+                background-color: var(--red-600);
                 color: var(--white);
             });
 
-            background-color: var(--red-600);
+            background-color: var(--red-500);
         }
     }
 
     &&__watched {
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
-            --_ps-bg: var(--yellow-050);
-            --_ps-stats-fc: var(--black-500);
+            --_ps-bg: var(--yellow-200);
+            --_ps-stats-fc: var(--black-400);
             --_ps-content-title-a-fc: var(--theme-post-title-color);
             --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
             --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
@@ -137,7 +137,7 @@
 
                 .s-user-card--rep,
                 .s-user-card--time {
-                    color: var(--black-600);
+                    color: var(--black-500);
                 }
             }
         }
@@ -156,10 +156,10 @@
 
             &:before {
                 .highcontrast-mode({
-                    background: var(--black-600);
+                    background: var(--black-500);
                 });
 
-                background: var(--black-150);
+                background: var(--black-250);
                 border-radius: var(--su8);
                 bottom: 0;
                 content: "";
@@ -177,7 +177,7 @@
 
         &--answer-excerpt {
             .v-truncate4;
-            color: var(--black-600);
+            color: var(--black-500);
             margin-bottom: var(--su8);
         }
 
@@ -374,56 +374,56 @@
             }
 
             &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
-                background-color: var(--blue-600);
+                background-color: var(--blue-500);
                 color: var(--white);
             }
 
             // Hotness
             &.is-warm {
-                color: var(--_ps-state-fc, var(--yellow-900));
+                color: var(--_ps-state-fc, var(--yellow-600));
             }
 
             &.is-hot {
-                color: var(--_ps-state-fc, var(--orange-800));
+                color: var(--_ps-state-fc, var(--orange-600));
             }
 
             &.is-supernova {
-                color: var(--_ps-state-fc, var(--red-800));
+                color: var(--_ps-state-fc, var(--red-600));
             }
 
             // Status
             &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
-                background-color: var(--black-100);
-                border-color: var(--black-600);
-                color: var(--black-900);
+                background-color: var(--black-225);
+                border-color: var(--black-500);
+                color: var(--black-600);
             }
 
             &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
-                background-color: var(--red-100);
-                border-color: var(--red-600);
-                color: var(--red-900);
+                background-color: var(--red-300);
+                border-color: var(--red-500);
+                color: var(--red-600);
             }
 
             &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
-                background-color: var(--blue-100);
-                border-color: var(--blue-600);
-                color: var(--blue-900);
+                background-color: var(--blue-300);
+                border-color: var(--blue-500);
+                color: var(--blue-600);
             }
 
             &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
-                background-color: var(--black-700);
+                background-color: var(--black-500);
                 color: var(--white);
             }
 
             &.is-published {
-                background-color: var(--black-050);
-                color: var(--black-800);
+                background-color: var(--black-150);
+                color: var(--black-600);
             }
 
             &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
-                background-color: var(--yellow-100);
-                border-color: var(--yellow-600);
-                color: var(--yellow-900);
+                background-color: var(--yellow-300);
+                border-color: var(--yellow-500);
+                color: var(--yellow-600);
             }
 
             &__emphasized {

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

@@ -3,7 +3,7 @@
     @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_pr-bar: var(--br-sm);
-    --_pr-bg: var(--black-200);
+    --_pr-bg: var(--black-300);
     --_pr-h: unset;
     --_pr-size: unset;
     --_pr-w: 100%;
@@ -20,26 +20,26 @@
 
     // MODIFIERS
     &&__brand {
-        --_pr-bar-bg: var(--orange-500);
+        --_pr-bar-bg: var(--orange-400);
     }
 
     &&__bronze {
-        --_pr-bar-bg: var(--bronze-lighter);
-        --_pr-label-bc: var(--bronze-darker);
+        --_pr-bar-bg: var(--bronze-100);
+        --_pr-label-bc: var(--bronze-400);
     }
 
     &&__gold {
-        --_pr-bar-bg: var(--gold-lighter);
-        --_pr-label-bc: var(--gold-darker);
+        --_pr-bar-bg: var(--gold-100);
+        --_pr-label-bc: var(--gold-400);
     }
 
     &&__info {
-        --_pr-bar-bg: var(--blue-500);
+        --_pr-bar-bg: var(--blue-400);
     }
 
     &&__silver {
-        --_pr-bar-bg: var(--silver-lighter);
-        --_pr-label-bc: var(--silver-darker);
+        --_pr-bar-bg: var(--silver-100);
+        --_pr-label-bc: var(--silver-400);
     }
 
     // VARIANTS
@@ -108,12 +108,12 @@
     }
 
     &&__privilege {
-        --_pr-bar-bg: var(--green-050);
+        --_pr-bar-bg: var(--green-200);
         --_pr-label-ai: center;
         --_pr-label-bc: var(--green-400);
         --_pr-label-jc: center;
 
-        .highcontrast-mode({ --_pr-bar-bg: var(--green-200); });
+        .highcontrast-mode({ --_pr-bar-bg: var(--green-300); });
     }
 
     // TODO move `.s-progress__stepped` to entirely separate component (or consider deprecating)
@@ -135,7 +135,7 @@
                     }
                 }
 
-                background: var(--black-300);
+                background: var(--black-350);
                 border-radius: 0;
                 height: var(--su-static6);
                 position: absolute;
@@ -146,7 +146,7 @@
             &--label { // Override a ton of properties
                 border: 0;
                 border-radius: 0;
-                color: var(--black-500);
+                color: var(--black-400);
                 display: block;
                 font-size: var(--fs-body1);
                 height: auto;
@@ -203,9 +203,9 @@
                 });
 
                 align-items: center;
-                background: var(--black-300);
+                background: var(--black-350);
                 border-radius: 100%;
-                color: @white;
+                color: var(--_white-static);
                 display: flex;
                 height: var(--su-static24);
                 justify-content: center;

package/lib/components/prose/prose.less

@@ -8,7 +8,7 @@
     --_pr-lh: 1.5;
     --_pr-blockquote-ml: 1em;
     --_pr-blockquote-mt: 0;
-    --_pr-blockquote-before-bg: var(--black-150);
+    --_pr-blockquote-before-bg: var(--black-250);
     --_pr-code-fs: var(--fs-body1);
     --_pr-h1-fs: var(--fs-headline1);
     --_pr-h2-fs: var(--fs-title);
@@ -16,10 +16,10 @@
     --_pr-h4-fs: var(--fs-body3);
     --_pr-h5-fs: var(--fs-body2);
     --_pr-h6-fs: var(--fs-body1);
-    --_pr-hr-bg: var(--black-100); // used for both background-color and color properties
+    --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
-    --_pr-kbd-bc: var(--black-300);
-    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
+    --_pr-kbd-bc: var(--black-350);
+    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;
     --_pr-soiler-after-o: unset;
@@ -32,13 +32,13 @@
     // CONDITIONAL STYLES
     .dark-mode({
         --_pr-kbd-bc: transparent;
-        --_pr-kbd-btc: @black-500;
+        --_pr-kbd-btc: var(--black-400);
         --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
     });
 
     .highcontrast-mode({
-        --_pr-blockquote-before-bg: var(--black-600);
-        --_pr-hr-bg: var(--black-500);
+        --_pr-blockquote-before-bg: var(--black-500);
+        --_pr-hr-bg: var(--black-400);
     });
 
     #stacks-internals #screen-sm({
@@ -79,8 +79,8 @@
 
         > code {
             padding: var(--su2) var(--su4);
-            color: var(--black-800);
-            background-color: var(--black-075);
+            color: var(--black-600);
+            background-color: var(--black-200);
             border-radius: var(--br-sm);
         }
     }
@@ -265,7 +265,7 @@
             --_pr-blockquote-ml: 0; // We don't need the intial indentation on nested blockquotes
         }
 
-        color: var(--black-600);
+        color: var(--black-500);
         margin: var(--_pr-blockquote-mt) 1em @pr-spacing var(--_pr-blockquote-ml);
         padding: 0.8em 0.8em 0.8em 1em;
         position: relative;
@@ -315,9 +315,9 @@
         border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
         box-shadow: var(--_pr-kbd-bs);
 
-        background-color: var(--black-075);
+        background-color: var(--black-200);
         border-radius: var(--br-sm);
-        color: var(--black-800);
+        color: var(--black-600);
         display: inline-block;
         font-family: var(--ff-sans);
         font-size: var(--fs-fine);
@@ -385,7 +385,7 @@
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-position: center right;
             background-repeat: no-repeat;
-            color: var(--black-500);
+            color: var(--black-400);
             content: attr(data-spoiler) " ";
             font-size: var(--fs-body1);
             padding-right: calc(var(--su24) - var(--su2));
@@ -409,9 +409,9 @@
 
         cursor: var(--_pr-spoiler-cursor);
 
-        background: var(--black-050);
+        background: var(--black-150);
         border-radius: var(--br-md);
-        color: var(--black-800);
+        color: var(--black-600);
         min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
     }
 

package/lib/components/select/select.less

@@ -1,8 +1,8 @@
 .s-select {
     --_se-arrow-bc: currentColor transparent;
     --_se-arrow-size: var(--su-static4); // Constant
-    --_se-select-bc: var(--bc-darker);
-    --_se-select-bc-focus: var(--theme-secondary-300);
+    --_se-select-bc: var(--bc-dark);
+    --_se-select-bc-focus: var(--theme-secondary-400);
     --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_se-select-bg: var(--white);
     --_se-select-br: var(--br-md);
@@ -26,7 +26,7 @@
     .validation-states(se-select);
 
     .is-disabled & {
-        --_se-arrow-bc: var(--bc-darker) transparent;
+        --_se-arrow-bc: var(--bc-dark) transparent;
     }
 
     &&__sm {
@@ -90,8 +90,8 @@
         &[readonly],
         .is-readonly & { // [1]
             --_se-select-bc: var(--bc-light);
-            --_se-select-bg: var(--black-050);
-            --_se-select-fc: var(--black-200);
+            --_se-select-bg: var(--black-150);
+            --_se-select-fc: var(--black-300);
 
             .highcontrast-mode({
                 --_se-select-fc: var(--fc-light);

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -14,7 +14,7 @@
         a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
             &,
             &:visited {
-                color: var(--black-500);
+                color: var(--black-400);
             }
         }
     }
@@ -26,7 +26,7 @@
 
     // CHILD ELEMENTS
     & &--action {
-        color: var(--blue);
+        color: var(--blue-400);
         float: right;
         font-size: var(--fs-fine);
         line-height: calc(var(--fs-body1) * 1.5); // 19.5px - line-height should be the same as in the outside element, so the header and action baselines line up
@@ -69,7 +69,7 @@
             &__expanding-control {
                 &:before {
                     border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--bc-darker);
+                    border-left-color: var(--bc-dark);
                     border-right-width: 0;
                     content: '';
                     float: left;
@@ -100,9 +100,9 @@
             outline: none;
         }
 
-        background: var(--black-025);
+        background: var(--black-100);
         border-top: var(--su-static1) solid var(--_sw-header-bc);
-        color: var(--black-600);
+        color: var(--black-500);
         font-size: var(--fs-body2);
         font-weight: normal;
         margin: 0;
@@ -115,7 +115,7 @@
             &[aria-current="true"],
             &[aria-current="page"] {
                 &:before {
-                    border-left-color: var(--theme-primary-color);
+                    border-left-color: var(--theme-primary);
                     border-left-style: solid;
                     border-left-width: calc(var(--su-static1) * 3); // 3px
                     content: '';
@@ -153,12 +153,12 @@
                     }
                 }
 
-                #stacks-internals #bullet-arrow(var(--theme-primary-color));
+                #stacks-internals #bullet-arrow(var(--theme-primary));
                 color: var(--black);
                 font-weight: bold;
             }
 
-            #stacks-internals #bullet-arrow(var(--black-100));
+            #stacks-internals #bullet-arrow(var(--black-225));
             background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
             background-repeat: no-repeat;
             background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
@@ -215,10 +215,10 @@
 // COLOR ALTERNATIVES
 .alternate-color(@name) {
     &.s-sidebarwidget__@{name} {
-        --_sw-bc: var(~"--@{name}-200");
+        --_sw-bc: var(~"--@{name}-300");
 
         .highcontrast-mode({
-            --_sw-bc: var(~"--@{name}-700");
+            --_sw-bc: var(~"--@{name}-500");
         });
 
         &:after,
@@ -228,11 +228,11 @@
         }
 
         .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-100");
+            background-color: var(~"--@{name}-300");
             color: var(--fc-medium);
         }
 
-        background-color: var(~"--@{name}-050");
+        background-color: var(~"--@{name}-200");
         border-color: var(--_sw-bc);
     }
 }

package/lib/components/table/table.less

@@ -13,7 +13,7 @@
     --_ta-td-ta: left;
     --_ta-td-va: middle;
     --_ta-td-w: unset;
-    --_ta-thead-th-bg: var(--black-025);
+    --_ta-thead-th-bg: var(--black-100);
     --_ta-th-bbw: 0;
     --_ta-th-bc: var(--bc-medium);
     --_ta-th-fs: unset;
@@ -24,8 +24,8 @@
 
     // VARIANTS
     &&__stripes {
-        --_ta-tbody-tr-even-bg: var(--black-025);
-        --_ta-thead-th-bg: var(--black-050);
+        --_ta-tbody-tr-even-bg: var(--black-100);
+        --_ta-thead-th-bg: var(--black-150);
     }
 
     // MODIFIERS
@@ -113,7 +113,7 @@
 
         thead th {
             border-top-color: transparent;
-            border-bottom-color: var(--bc-darker);
+            border-bottom-color: var(--bc-dark);
             font-size: inherit;
             text-transform: initial;
             letter-spacing: initial;
@@ -142,7 +142,7 @@
             }
 
             &.is-sorted { //  Selected state
-                color: var(--black-900);
+                color: var(--black-600);
             }
 
             color: var(--fc-light);
@@ -285,8 +285,8 @@
         }
 
         &.is-disabled {
-            background-color: var(--black-025);
-            --_ta-tbody-tr-even-bg: var(--black-025);
+            background-color: var(--black-100);
+            --_ta-tbody-tr-even-bg: var(--black-100);
 
             th:not(.is-enabled),
             td:not(.is-enabled) {

package/lib/components/tag/tag.less

@@ -4,11 +4,11 @@
     --_ta-bc-selected: transparent;
     --_ta-bg: var(--theme-tag-background-color);
     --_ta-bg-hover: var(--theme-tag-hover-background-color);
-    --_ta-bg-selected: var(--theme-secondary-200);
+    --_ta-bg-selected: var(--theme-secondary-300);
     --_ta-br: var(--br-sm);
     --_ta-fc: var(--theme-tag-color);
     --_ta-fc-hover: var(--theme-tag-hover-color);
-    --_ta-fc-selected: var(--theme-secondary-900);
+    --_ta-fc-selected: var(--theme-secondary-600);
     --_ta-fs: var(--fs-caption);
     --_ta-lh: 1.846153846;
     --_ta-pl: var(--_ta-px);
@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_ta-bc: var(--red-200);
-        --_ta-bg: var(--red-050);
-        --_ta-fc: var(--red-800);
-        --_ta-bc-hover: var(--red-300);
-        --_ta-bg-hover: var(--red-100);
-        --_ta-fc-hover: var(--red-900);
+        --_ta-bc: var(--red-300);
+        --_ta-bg: var(--red-200);
+        --_ta-fc: var(--red-600);
+        --_ta-bc-hover: var(--red-400);
+        --_ta-bg-hover: var(--red-300);
+        --_ta-fc-hover: var(--red-600);
         --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-200);
-        --_ta-fc-selected: var(--red-800);
+        --_ta-bg-selected: var(--red-300);
+        --_ta-fc-selected: var(--red-600);
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
+        --_ta-bg: var(--black-200);
+        --_ta-fc: var(--black-500);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
+        --_ta-bg-hover: var(--black-225);
+        --_ta-fc-hover: var(--black-600);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
+        --_ta-bg-selected: var(--black-300);
+        --_ta-fc-selected: var(--black-600);
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-darker);
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
-        --_ta-bc-hover: var(--black-300);
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
-        --_ta-bc-selected: var(--black-500);
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
+        --_ta-bc: var(--bc-dark);
+        --_ta-bg: var(--black-200);
+        --_ta-fc: var(--black-500);
+        --_ta-bc-hover: var(--black-350);
+        --_ta-bg-hover: var(--black-225);
+        --_ta-fc-hover: var(--black-600);
+        --_ta-bc-selected: var(--black-400);
+        --_ta-bg-selected: var(--black-300);
+        --_ta-fc-selected: var(--black-600);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

package/lib/components/toggle-switch/toggle-switch.a11y.test.ts

@@ -64,10 +64,6 @@ describe("toggle-switch", () => {
             template: ({ component, testid }) => html`
                 <div data-testid="${testid}">${component}</div>
             `,
-            skippedTestids: [
-                "s-toggle-switch-dark-multiple", // TODO fix contrast issue
-                "s-toggle-switch-light-multiple", // TODO fix contrast issue
-            ],
         });
     });
 });

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

@@ -1,9 +1,9 @@
 .s-toggle-switch {
-    --_ts-bg: var(--black-300);
+    --_ts-bg: var(--black-350);
     --_ts-bg-ps: left center;
     --_ts-bs-color: transparent;
     --_ts-multiple-bg: unset;
-    --_ts-multiple-fc: var(--black-500);
+    --_ts-multiple-fc: var(--black-400);
 
     fieldset[disabled] &,
     &[disabled] {
@@ -19,7 +19,7 @@
             &:checked {
                 + label {
                     &.s-toggle-switch--label-off {
-                        --_ts-multiple-bg: var(--black-500);
+                        --_ts-multiple-bg: var(--black-400);
                         --_ts-multiple-fc: var(--white);
 
                         .dark-mode({ --_ts-multiple-bg: var(--black-350); });
@@ -27,7 +27,7 @@
 
                     &:not(.s-toggle-switch--label-off) {
                         --_ts-multiple-bg: var(--green-400);
-                        --_ts-multiple-fc: @white;
+                        --_ts-multiple-fc: var(--_white-static);
 
                         .highcontrast-mode({ --_ts-multiple-fc: var(--white); });
                     }