@stackoverflow/stacks 1.9.5 → 1.10.0

package/README.md

@@ -89,9 +89,10 @@ npm run test:unit:watch
 
 ### Visual Regression Tests
 
-**Prerequisite:** 
-In order to pull and upload baseline images you need to have `git lfs` installed in your local machine. Please follow [this guide](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) to install that.
-
+**Prerequisites:** 
+- `git lfs` ([installation docs](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage))
+- `docker` ([installation docs](https://docs.docker.com/engine/install/))
+- `pwsh` ([Installation docs](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3))
 
 This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
 Visual regression tests end with this suffix `*.visual.test.ts`.

package/dist/css/stacks.css

@@ -58,7 +58,7 @@ main {
  * Add the correct margin in IE 8.
  */
 figure {
-  margin: 1em 40px;
+  margin: 1em calc(var(--su-static32) + var(--su-static8));
 }
 /**
  * 1. Add the correct box sizing in Firefox.
@@ -264,7 +264,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+  outline: var(--su-static1) dotted ButtonText;
 }
 /**
  * Correct the padding in Firefox.
@@ -333,8 +333,7 @@ textarea {
 [type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
-  outline-offset: -2px;
-  /* 2 */
+  outline-offset: calc(var(--su-static2) * -1);
 }
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
@@ -443,6 +442,9 @@ body.theme-highcontrast .s-activity-indicator {
   --_ai-bg: var(--yellow-600);
   --_ai-focus-ring: var(--focus-ring-warning);
 }
+.s-anchors {
+  --_an-a-fc-visited: var(--_an-a-fc);
+}
 .s-anchors.s-anchors__underlined a:not(.s-link),
 .s-anchors.s-anchors__underlined .s-btn.s-btn__link {
   text-decoration: underline;
@@ -454,6 +456,7 @@ body.theme-highcontrast .s-activity-indicator {
 .s-anchors.s-anchors__default {
   --_an-a-fc: var(--theme-link-color);
   --_an-a-fc-hover: var(--theme-link-color-hover);
+  --_an-a-fc-visited: var(--theme-link-color-visited);
 }
 .s-anchors.s-anchors__grayscale {
   --_an-a-fc: var(--black-700);
@@ -467,6 +470,18 @@ body.theme-highcontrast .s-activity-indicator {
   --_an-a-fc: var(--black-500);
   --_an-a-fc-hover: var(--black-400);
 }
+.s-anchors.s-anchors__danger a:not(.s-link),
+.s-anchors.s-anchors__default a:not(.s-link),
+.s-anchors.s-anchors__grayscale a:not(.s-link),
+.s-anchors.s-anchors__inherit a:not(.s-link),
+.s-anchors.s-anchors__muted a:not(.s-link),
+.s-anchors.s-anchors__danger .s-btn.s-btn__link,
+.s-anchors.s-anchors__default .s-btn.s-btn__link,
+.s-anchors.s-anchors__grayscale .s-btn.s-btn__link,
+.s-anchors.s-anchors__inherit .s-btn.s-btn__link,
+.s-anchors.s-anchors__muted .s-btn.s-btn__link {
+  color: var(--_an-a-fc, inherit);
+}
 .s-anchors.s-anchors__danger a:not(.s-link):hover,
 .s-anchors.s-anchors__default a:not(.s-link):hover,
 .s-anchors.s-anchors__grayscale a:not(.s-link):hover,
@@ -509,16 +524,6 @@ body.theme-highcontrast .s-activity-indicator {
 .s-anchors.s-anchors__muted .s-btn.s-btn__link:active:visited {
   color: var(--_an-a-fc-hover);
 }
-.s-anchors.s-anchors__danger a:not(.s-link),
-.s-anchors.s-anchors__default a:not(.s-link),
-.s-anchors.s-anchors__grayscale a:not(.s-link),
-.s-anchors.s-anchors__inherit a:not(.s-link),
-.s-anchors.s-anchors__muted a:not(.s-link),
-.s-anchors.s-anchors__danger .s-btn.s-btn__link,
-.s-anchors.s-anchors__default .s-btn.s-btn__link,
-.s-anchors.s-anchors__grayscale .s-btn.s-btn__link,
-.s-anchors.s-anchors__inherit .s-btn.s-btn__link,
-.s-anchors.s-anchors__muted .s-btn.s-btn__link,
 .s-anchors.s-anchors__danger a:not(.s-link):visited,
 .s-anchors.s-anchors__default a:not(.s-link):visited,
 .s-anchors.s-anchors__grayscale a:not(.s-link):visited,
@@ -529,7 +534,7 @@ body.theme-highcontrast .s-activity-indicator {
 .s-anchors.s-anchors__grayscale .s-btn.s-btn__link:visited,
 .s-anchors.s-anchors__inherit .s-btn.s-btn__link:visited,
 .s-anchors.s-anchors__muted .s-btn.s-btn__link:visited {
-  color: var(--_an-a-fc, inherit);
+  color: var(--_an-a-fc-visited, inherit);
 }
 .s-avatar {
   --_av-size: var(--su-static16);
@@ -549,7 +554,7 @@ body.theme-highcontrast .s-activity-indicator {
 }
 body.theme-highcontrast .s-avatar {
   background-color: var(--black);
-  box-shadow: 0 0 0 1px var(--black);
+  box-shadow: 0 0 0 var(--su-static1) var(--black);
   color: var(--white);
 }
 body.theme-highcontrast .s-avatar .s-avatar--letter {
@@ -854,12 +859,12 @@ a.s-badge:hover {
   color: var(--_no-fc);
   border-style: solid;
   font-size: var(--fs-body1);
-  border-width: var(--su-static1) 0;
+  border-width: 0 0 var(--su-static1);
   inset: 0 0 auto 0;
   padding: var(--su12);
   position: fixed;
-  -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
-  transform: translate3d(0, var(--_no-x-offset), 0);
+  -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
+  transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
   width: 100%;
   z-index: calc(var(--zi-navigation-fixed) - 1);
 }
@@ -1060,16 +1065,17 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   background: var(--_no-btn-bg-focus);
 }
 .s-banner[aria-hidden="true"] {
-  --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
+  --_no-x-offset: -1;
   opacity: 0;
   visibility: hidden;
 }
 .s-banner[aria-hidden="false"] {
-  --_no-x-offset: calc(var(--su48) + var(--su1));
+  --_no-x-offset: 1;
   opacity: 1;
   visibility: visible;
 }
-.s-banner.is-pinned {
+.s-banner[aria-hidden="false"].is-pinned {
+  --_no-x-offset: 0;
   z-index: calc(var(--zi-navigation-fixed) + 1);
 }
 .s-banner__body-pt {
@@ -1161,7 +1167,7 @@ a.s-block-linka.s-block-link__right.is-selected,
 a.s-block-link.s-block-link__right.is-selected,
 .s-block-linka.s-block-link__right.is-selected,
 .s-block-link.s-block-link__right.is-selected {
-  --_li-block-bs-offset-x: -3px;
+  --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4));
 }
 a.s-block-linka.s-block-link__danger,
 a.s-block-link.s-block-link__danger,
@@ -1231,9 +1237,7 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
 .s-btn {
   --_bu-baw: var(--su-static1);
   --_bu-bc: transparent;
-  --_bu-bg: transparent;
-  --_bu-br: var(--br-sm);
-  --_bu-bs: none;
+  --_bu-br: var(--br-md);
   --_bu-fc: var(--theme-button-color);
   --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
   --_bu-fs: var(--fs-body1);
@@ -1245,14 +1249,13 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-fc-active: var(--theme-button-hover-color);
   --_bu-fc-hover: var(--theme-button-hover-color);
   --_bu-fc-selected: var(--theme-button-selected-color);
-  --_bu-filled-bc: var(--theme-button-filled-border-color);
-  --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
+  --_bu-filled-bc: transparent;
+  --_bu-filled-bc-active: transparent;
   --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
-  --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
+  --_bu-filled-bc-selected: transparent;
   --_bu-filled-bg: var(--theme-button-filled-background-color);
   --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
   --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
-  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
   --_bu-filled-fc: var(--theme-button-filled-color);
   --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
   --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
@@ -1266,10 +1269,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-dropdown-bw: var(--su-static4);
   --_bu-number-fc: var(--white);
   --_bu-number-fc-selected: var(--_bu-number-fc);
-  background-color: var(--_bu-bg);
+  background-color: var(--_bu-bg, inherit);
   border: var(--_bu-baw) solid var(--_bu-bc);
   border-radius: var(--_bu-br);
-  box-shadow: var(--_bu-bs);
+  box-shadow: none;
   color: var(--_bu-fc);
   font-size: var(--_bu-fs);
   padding: var(--_bu-p);
@@ -1284,18 +1287,6 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   text-decoration: none;
   user-select: none;
 }
-@media (prefers-color-scheme: dark) {
-  body.theme-system .s-btn {
-    --_bu-bs: none;
-    --_bu-filled-bs: var(--_bu-bs);
-  }
-}
-body.theme-dark .s-btn,
-.theme-dark__forced .s-btn,
-body.theme-system .theme-dark__forced .s-btn {
-  --_bu-bs: none;
-  --_bu-filled-bs: var(--_bu-bs);
-}
 body.theme-highcontrast .s-btn {
   --_bu-bc: currentColor;
   --_bu-filled-bc: var(--_bu-bc);
@@ -1310,8 +1301,6 @@ body.theme-highcontrast .s-btn:not(.s-btn__primary):not(.s-btn__muted):not(.s-bt
 fieldset[disabled] .s-btn,
 .s-btn[disabled],
 .s-btn[aria-disabled="true"] {
-  --_bu-bs: none !important;
-  --_bu-filled-bs: var(--_bu-bs);
   opacity: var(--_o-disabled-static);
   pointer-events: none;
   text-decoration: none;
@@ -1328,7 +1317,7 @@ button[type="reset"] .s-btn {
   padding-left: 2.2em;
 }
 .s-btn.is-loading .svg-icon:first-child {
-  margin-left: -23px;
+  margin-left: calc((var(--su-static24) - var(--su-static1)) * -1);
   opacity: 0;
 }
 .s-btn.is-selected,
@@ -1360,19 +1349,14 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
   --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
   --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
 }
-.s-btn.is-selected:not(:focus),
-.s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
-  box-shadow: none;
-}
 .s-btn.s-btn__filled {
   border-color: var(--_bu-filled-bc);
   background-color: var(--_bu-filled-bg);
-  box-shadow: var(--_bu-filled-bs);
   color: var(--_bu-filled-fc);
 }
 .s-btn.s-btn__outlined {
   border-color: var(--_bu-outlined-bc);
-  background-color: var(--_bu-outlined-bg);
+  background-color: var(--_bu-outlined-bg, inherit);
 }
 .s-btn.s-btn__link:focus,
 .s-btn.s-btn__unset:focus,
@@ -1383,8 +1367,6 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
 .s-btn.s-btn__link {
   --_bu-baw: 0;
   --_bu-br: 0;
-  --_bu-bs: none;
-  --_bu-filled-bs: var(--_bu-bs);
   --_bu-focus-ring: none;
   --_bu-p: 0;
   --_li-fc: var(--theme-link-color);
@@ -1453,6 +1435,7 @@ body.theme-highcontrast .s-btn.s-btn__link {
   text-decoration: underline !important;
 }
 .s-btn.s-btn__link.s-link__visited {
+  --_li-fc: var(--theme-link-color-visited);
   --_li-fc-hover: var(--theme-link-color-hover);
   --_li-fc-visited: var(--theme-link-color-visited);
 }
@@ -1507,8 +1490,6 @@ button.s-btn.s-btn__link:focus {
   --_bu-baw: 0;
   --_bu-bg: none;
   --_bu-br: 0;
-  --_bu-bs: none;
-  --_bu-filled-bs: var(--_bu-bs);
   --_bu-fc: unset;
   --_bu-focus-ring: none;
   --_bu-p: 0;
@@ -1569,7 +1550,6 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-filled-bg-active: var(--red-700);
   --_bu-filled-bg-hover: var(--red-600);
   --_bu-filled-bg-selected: var(--red-800);
-  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-filled-fc: var(--white);
   --_bu-filled-fc-active: var(--_bu-filled-fc);
   --_bu-filled-fc-hover: var(--_bu-filled-fc);
@@ -1614,9 +1594,9 @@ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
   --_bu-bg-active: var(--black-050);
   --_bu-bg-hover: var(--black-025);
   --_bu-bg-selected: var(--black-075);
-  --_bu-fc: var(--black-500);
+  --_bu-fc: var(--black-700);
   --_bu-fc-active: var(--_bu-fc);
-  --_bu-fc-hover: var(--black-600);
+  --_bu-fc-hover: var(--black-700);
   --_bu-fc-selected: var(--black-700);
   --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
   --_bu-filled-bc: transparent;
@@ -1625,13 +1605,12 @@ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
   --_bu-filled-bg-active: var(--black-200);
   --_bu-filled-bg-hover: var(--black-150);
   --_bu-filled-bg-selected: var(--black-350);
-  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-filled-fc: var(--black-700);
   --_bu-filled-fc-active: var(--_bu-filled-fc);
   --_bu-filled-fc-hover: var(--_bu-filled-fc);
   --_bu-filled-fc-selected: var(--black-800);
-  --_bu-outlined-bc: var(--black-300);
-  --_bu-outlined-bc-selected: var(--black-400);
+  --_bu-outlined-bc: var(--black-200);
+  --_bu-outlined-bc-selected: var(--black-200);
   --_bu-outlined-bg-selected: var(--_bu-bg-selected);
   --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 }
@@ -1652,7 +1631,6 @@ body.theme-highcontrast .s-btn.s-btn__muted.s-btn__filled {
   --_bu-bg-active: var(--theme-button-primary-active-background-color);
   --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
   --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
-  --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-fc: var(--theme-button-primary-color);
   --_bu-fc-active: var(--theme-button-primary-hover-color);
   --_bu-fc-hover: var(--theme-button-primary-hover-color);
@@ -1753,14 +1731,14 @@ body.theme-highcontrast .s-btn.s-btn__github {
 .s-btn--radio {
   border: 0;
   clip-path: inset(50%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  margin: -1px;
+  clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1));
+  height: var(--su-static1);
+  margin: calc(var(--su-static1) * -1);
   overflow-wrap: normal;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+  width: var(--su-static1);
 }
 .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover,
 .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus {
@@ -2293,7 +2271,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
   --_in-bc: var(--bc-darker);
   --_in-bc-focus: var(--theme-secondary-300);
   --_in-bg: var(--white);
-  --_in-br: var(--br-sm);
+  --_in-br: var(--br-md);
   --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   --_in-c: unset;
   --_in-fc: var(--fc-dark);
@@ -2418,7 +2396,7 @@ body.theme-highcontrast .has-warning .s-textarea {
   .s-input.s-textarea__md,
   .s-textarea.s-input__md,
   .s-textarea.s-textarea__md {
-    --_in-fs: 17px;
+    --_in-fs: calc(var(--su-static16) + var(--su-static1));
     --_in-py: 0.4em;
   }
 }
@@ -2561,18 +2539,18 @@ body.theme-highcontrast .s-input:focus-within {
 }
 .s-input-fill.order-first {
   --_if-blw: var(--su-static1);
-  --_if-blr: var(--br-sm);
+  --_if-blr: var(--br-md);
 }
 .s-input-fill.order-last {
   --_if-brw: var(--su-static1);
-  --_if-brr: var(--br-sm);
+  --_if-brr: var(--br-md);
 }
 .s-input-icon {
   --_ii-fc: unset;
   --_ii-r: 0.7em;
   color: var(--_ii-fc);
   right: var(--_ii-r);
-  margin-top: -9px;
+  margin-top: calc((var(--su-static8) + var(--su-static1)) * -1);
   pointer-events: none;
   position: absolute;
   top: 50%;
@@ -2810,6 +2788,7 @@ a.s-link__underlined,
 }
 a.s-link__visited,
 .s-link.s-link__visited {
+  --_li-fc: var(--theme-link-color-visited);
   --_li-fc-hover: var(--theme-link-color-hover);
   --_li-fc-visited: var(--theme-link-color-visited);
 }
@@ -3251,7 +3230,7 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   pointer-events: none;
   position: absolute;
   right: 0.9em;
-  top: calc(50% - 2px);
+  top: calc(50% - var(--su-static2));
   z-index: var(--zi-active);
 }
 .s-navigation .s-navigation--item:hover,
@@ -3288,7 +3267,7 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   color: var(--_no-fc);
   border-style: solid;
   font-size: var(--fs-body1);
-  border-radius: var(--br-sm);
+  border-radius: var(--br-md);
   border-width: var(--su-static1);
   padding: var(--su16);
 }
@@ -3496,7 +3475,7 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
   --_pt-breadcrums-mb: var(--su8);
   align-items: var(--_pt-ai);
   flex-direction: var(--_pt-fd);
-  border-bottom: 1px solid var(--bc-medium);
+  border-bottom: var(--su-static1) solid var(--bc-medium);
   display: flex;
   justify-content: space-between;
   padding-bottom: var(--su16);
@@ -4899,7 +4878,7 @@ body.theme-highcontrast .s-prose {
   --_se-select-bc-focus: var(--theme-secondary-300);
   --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   --_se-select-bg: var(--white);
-  --_se-select-br: var(--br-sm);
+  --_se-select-br: var(--br-md);
   --_se-select-fc: var(--black);
   --_se-select-px: 0.7em;
   --_se-select-py: 0.6em;
@@ -4909,7 +4888,7 @@ body.theme-highcontrast .s-prose {
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .s-select {
-    --_se-select-fs: 16px;
+    --_se-select-fs: var(--su-static16);
     --_se-select-px: 0.55em;
     --_se-select-py: 0.4em;
   }
@@ -5217,9 +5196,9 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
 }
 .s-sidebarwidget .s-sidebarwidget--subnav li {
   background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--black-100%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
-  background-position: 0 calc((1.2em - 10px) / 2);
+  background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2);
   background-repeat: no-repeat;
-  background-size: auto 10px;
+  background-size: auto calc(var(--su-static8) + var(--su-static2));
   margin-top: var(--su-static12);
   padding-left: var(--su-static16);
 }
@@ -5256,7 +5235,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
   border-radius: var(--br-sm);
   clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
   content: '';
-  height: calc(2px + var(--br-sm));
+  height: calc(var(--su-static2) + var(--br-sm));
   left: calc(var(--su-static1) * -1);
   pointer-events: none;
   position: absolute;
@@ -5329,7 +5308,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
   border-color: transparent;
   border-left-color: currentColor;
   filter: invert(0);
-  transform-origin: 50% 50% 1px;
+  transform-origin: 50% 50% var(--su-static1);
 }
 .is-loading:before {
   border-color: currentColor;
@@ -5570,7 +5549,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
 .s-table td.s-table--progress-bar {
   --_ta-td-blw: 0;
   --_ta-td-pl: 0;
-  --_ta-td-w: 120px;
+  --_ta-td-w: calc(var(--su-static12) * 10);
 }
 .s-table tfoot td {
   border-bottom-color: var(--_ta-foot-td-bc, var(--_ta-td-bc));
@@ -6027,13 +6006,13 @@ body.theme-highcontrast .s-topbar {
   position: absolute;
   content: '';
   left: 0;
-  top: -5px;
+  top: calc(var(--su-static1) - var(--su-static6));
   transition: top, transform;
   transition-duration: 0.1s;
   transition-timing-function: ease-in-out;
 }
 .s-topbar .s-topbar--menu-btn span:after {
-  top: 5px;
+  top: calc(var(--su-static6) - var(--su-static1));
 }
 .s-topbar .s-topbar--menu-btn.is-selected {
   color: var(--theme-topbar-item-color-current);
@@ -6194,7 +6173,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected .s-activity-indicator,
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator,
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus .s-activity-indicator {
-  top: calc(50% - 18px);
+  top: calc(50% - calc(var(--su16) + var(--su2)));
   box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
 }
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .svg-icon {
@@ -6202,8 +6181,8 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
 }
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .s-activity-indicator {
   position: absolute;
-  top: calc(50% - 14px);
-  right: 2px;
+  top: calc(50% - calc(var(--su12) + var(--su2)));
+  right: var(--su-static2);
   transition: top var(--te-smooth) 0.15s;
   box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color);
 }
@@ -6273,7 +6252,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
 .s-topbar .s-topbar--searchbar .s-select {
   max-width: calc(var(--s-step) * 2) !important;
   align-self: stretch;
-  margin-right: -1px;
+  margin-right: calc(var(--su-static1) * -1);
   color: var(--theme-topbar-select-color);
 }
 .s-topbar .s-topbar--searchbar .s-select:before,
@@ -6639,9 +6618,9 @@ body {
   --ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
   --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
   --theme-body-font-family: var(--ff-sans);
-  --fs-fine: 11px;
-  --fs-caption: 12px;
-  --fs-body1: 13px;
+  --fs-fine: calc(var(--su-static12) - var(--su-static1));
+  --fs-caption: var(--su-static12);
+  --fs-body1: calc(var(--su-static12) + var(--su-static1));
   --fs-body2: 1.15384615rem;
   --fs-body3: 1.30769231rem;
   --fs-subheading: 1.46153846rem;
@@ -6686,9 +6665,9 @@ body {
   --zi-navigation-fixed: 5050;
   --zi-modals-background: 8050;
   --zi-modals: 9000;
-  --br-sm: 3px;
-  --br-md: 5px;
-  --br-lg: 7px;
+  --br-sm: calc(var(--su-static4));
+  --br-md: calc(var(--su-static6));
+  --br-lg: calc(var(--su-static8));
   --br-circle: 50%;
   --te-smooth-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --te-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -6718,7 +6697,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
   --theme-background-color: var(--white);
   --theme-link-color: var(--theme-secondary-400);
   --theme-link-color-hover: var(--theme-secondary-350);
-  --theme-link-color-visited: var(--theme-secondary-500);
+  --theme-link-color-visited: var(--theme-secondary-700);
   --theme-button-color: var(--theme-secondary-400);
   --theme-button-background-color: transparent;
   --theme-button-hover-color: var(--theme-secondary-500);
@@ -16850,7 +16829,7 @@ p {
 .fs-category.has-border {
   width: 100%;
   padding: var(--su4) 0;
-  border-top: 1px solid var(--bc-medium);
+  border-top: var(--su-static1) solid var(--bc-medium);
 }
 .fc-dark {
   color: var(--fc-dark) !important;
@@ -17293,14 +17272,14 @@ ol {
 }
 .v-visible-sr {
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1));
   clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
+  height: var(--su-static1);
+  margin: calc(var(--su-static1) * -1);
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+  width: var(--su-static1);
   overflow-wrap: normal;
 }
 .float-left {
@@ -23178,7 +23157,7 @@ body {
 @media (max-width: 640px) {
   html ,
   html  body {
-    font-size: 11px;
+    font-size: calc(var(--su-static12) - var(--su-static1));
   }
 }
 body {