Apply v2 color fixes (round 3)

lib/components/badge/badge.less

@@ -56,17 +56,17 @@
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-400);
+        --_ba-bc: var(--gold-300);
         --_ba-bg: var(--gold-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-400);
+        --_ba-bc: var(--silver-300);
         --_ba-bg: var(--silver-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-400);
+        --_ba-bc: var(--bronze-300);
         --_ba-bg: var(--bronze-100);
     }
 
@@ -97,12 +97,12 @@
     }
 
     &&__rep {
-        --_ba-bc: var(--green-400);
+        --_ba-bc: var(--green-300);
         --_ba-fc: var(--green-400);
     }
 
     &&__rep-down {
-        --_ba-bc: var(--red-400);
+        --_ba-bc: var(--red-300);
         --_ba-fc: var(--red-400);
     }
 
@@ -162,7 +162,7 @@
 
     &&__staff {
         // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-400);
+        --_ba-bc: var(--orange-300);
         --_ba-bg: var(--orange-200);
         --_ba-fc: var(--orange-600);
     }
@@ -176,7 +176,7 @@
     }
 
     &&__danger {
-        --_ba-bc: var(--red-400);
+        --_ba-bc: var(--red-300);
         --_ba-bg: var(--red-200);
         --_ba-fc: var(--red-600);
 
@@ -186,19 +186,19 @@
         }
     }
     &&__info {
-        --_ba-bc: var(--blue-400);
+        --_ba-bc: var(--blue-300);
         --_ba-bg: var(--blue-200);
         --_ba-fc: var(--blue-600);
     }
 
     &&__warning {
-        --_ba-bc: var(--yellow-400);
+        --_ba-bc: var(--yellow-300);
         --_ba-bg: var(--yellow-200);
         --_ba-fc: var(--yellow-600);
     }
 
     &&__muted {
-        --_ba-bc: var(--black-400);
+        --_ba-bc: var(--black-300);
         --_ba-bg: var(--black-200);
         --_ba-fc: var(--black-500);
 

lib/components/description/description.less

@@ -3,7 +3,7 @@
         opacity: var(--_o-disabled-static);
     }
 
-    color: var(--fc-medium);
+    color: var(--fc-light);
     font-size: var(--fs-caption);
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }

lib/components/input_textarea/input_textarea.less

@@ -1,6 +1,6 @@
 .s-input,
 .s-textarea {
-    --_in-bc: var(--bc-dark);
+    --_in-bc: var(--bc-darker);
     --_in-bc-focus: var(--theme-secondary-400);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);

lib/components/label/label.less

@@ -89,7 +89,7 @@
 
     font-size: var(--_la-fs);
 
-    color: var(--fc-dark);
+    color: var(--fc-medium);
     font-family: inherit;
     font-weight: 600;
     padding: 0 var(--su2); // Helps the label visually line up with inputs

lib/components/notice/notice.less

@@ -1,6 +1,6 @@
 .construct-notice-component(@baseClass) {
     --_no-bc: var(--black-225);
-    --_no-bg: var(--black-150);
+    --_no-bg: var(--black-100);
     --_no-fc: var(--black-500);
     --_no-btn-bg-focus: var(--black-225);
     --_no-btn-bg-active: var(--black-250);

lib/components/page-title/page-title.less

@@ -31,7 +31,7 @@
     & &--header {
         color: var(--fc-dark);
         font-size: var(--fs-headline1);
-        font-weight: normal;
+        font-weight: bold;
         line-height: var(--lh-sm);
         margin: 0;
         margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️

lib/components/pagination/pagination.less

@@ -1,10 +1,10 @@
 .s-pagination {
     & &--item {
         --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-medium);
+        --_pa-item-bc: var(--bc-darker);
         --_pa-item-fc: var(--fc-medium);
         --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-dark);
+        --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
 
         // CONTEXTUAL STYLES

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-500);
+    --_ps-has-answers-bc: var(--green-400);
     --_ps-has-answers-bg: unset;
-    --_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-answers-fc: var(--green-400);
+    --_ps-has-accepted-answers-bc: var(--green-400);
+    --_ps-has-accepted-answers-bg: var(--green-400);
     --_ps-has-accepted-answers-fc: var(--white);
     --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
 

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

@@ -135,7 +135,7 @@
                     }
                 }
 
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 0;
                 height: var(--su-static6);
                 position: absolute;
@@ -203,7 +203,7 @@
                 });
 
                 align-items: center;
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 100%;
                 color: var(--_white-static);
                 display: flex;

lib/components/prose/prose.less

@@ -18,7 +18,7 @@
     --_pr-h6-fs: var(--fs-body1);
     --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
-    --_pr-kbd-bc: var(--black-350);
+    --_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 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;

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

@@ -69,7 +69,7 @@
             &__expanding-control {
                 &:before {
                     border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--bc-dark);
+                    border-left-color: var(--black-400);
                     border-right-width: 0;
                     content: '';
                     float: left;

lib/components/tag/tag.less

@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_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-300);
-        --_ta-fc-selected: var(--red-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--orange-100);
+        --_ta-fc: var(--orange-500);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--orange-200);
+        --_ta-fc-hover: var(--orange-600);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--orange-300);
+        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
+        --_ta-bg: var(--black-150);
+        --_ta-fc: var(--black-400);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
+        --_ta-bg-hover: var(--black-200);
+        --_ta-fc-hover: var(--black-500);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-300);
+        --_ta-bg-selected: var(--black-225);
         --_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-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);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--theme-secondary-500);
+        --_ta-fc: var(--white);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--theme-secondary-400);
+        --_ta-fc-hover: var(--white);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--theme-secondary-600);
+        --_ta-fc-selected: var(--white);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

lib/components/user-card/user-card.less

@@ -21,7 +21,7 @@
     }
 
     &&__highlighted {
-        --_uc-bg: var(--theme-secondary-200);
+        --_uc-bg: var(--theme-secondary-100);
         --_uc-bar: var(--br-md);
         --_uc-time-fc: var(--black-500);
         --_uc-type-fc: var(--black-500);

lib/exports/color-sets.less

@@ -38,7 +38,7 @@
     400: hsl(210, 8%, 42%);
     500: hsl(210, 8%, 25%);
     600: hsl(210, 8%, 5%);
-    default: hsl(210, 8%, 5%);
+    default: hsl(0, 0%, 0%);
 }
 .set-black-dark() {
     050: hsl(210, 3%, 15%);
@@ -66,7 +66,7 @@
     400: hsl(212, 8%, 35%);
     500: hsl(210, 8%, 25%);
     600: hsl(210, 8%, 5%);
-    default: hsl(210, 8%, 5%);
+    default: hsl(0, 0%, 0%);
 }
 
 .set-black-hc-dark() {

lib/exports/theme.less

@@ -42,11 +42,11 @@
     --theme-button-outlined-selected-border-color: var(--theme-secondary-400); // TODO now same as unselected border-color above (above was 350)
 
     // Tags
-    --theme-tag-color: var(--theme-secondary-600);
-    --theme-tag-background-color: var(--theme-secondary-200);
+    --theme-tag-color: var(--theme-secondary-500);
+    --theme-tag-background-color: var(--theme-secondary-100);
     --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-600); // TODO was 900, now same as base tag color
-    --theme-tag-hover-background-color: var(--theme-secondary-300);
+    --theme-tag-hover-color: var(--theme-secondary-600);
+    --theme-tag-hover-background-color: var(--theme-secondary-200);
     --theme-tag-hover-border-color: transparent;
 
     // Topbar