@stackoverflow/stacks 2.1.1 → 2.2.0

package/dist/css/stacks.css

@@ -669,10 +669,12 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_ba-bg: var(--black-150);
   --_ba-fc: var(--black-500);
   --_ba-fs: var(--fs-caption);
+  --_ba-fw: normal;
   --_ba-g: 0.3em;
   --_ba-lh: 2;
   --_ba-px: var(--su6);
   --_ba-py: 0;
+  --_ba-tt: unset;
   --_ba-wmn: 0;
   align-self: var(--_ba-as);
   background-color: var(--_ba-bg);
@@ -680,13 +682,14 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   color: var(--_ba-fc);
   font-size: var(--_ba-fs);
   gap: var(--_ba-g);
+  font-weight: var(--_ba-fw);
   line-height: var(--_ba-lh);
   min-width: var(--_ba-wmn);
   padding: var(--_ba-py) var(--_ba-px);
+  text-transform: var(--_ba-tt);
   align-items: center;
   border-radius: var(--br-sm);
   display: inline-flex;
-  font-weight: normal;
   justify-content: center;
   text-decoration: none;
   vertical-align: middle;
@@ -703,6 +706,9 @@ body.theme-highcontrast .s-badge__moderator,
 body.theme-highcontrast .s-badge__staff {
   --_ba-bc: currentColor;
 }
+body.theme-highcontrast .s-badge__new {
+  --_ba-fc: var(--purple-600);
+}
 .s-badge.s-badge__xs,
 .s-badge.s-badge__sm {
   --_ba-as: flex-start;
@@ -844,6 +850,13 @@ body.theme-highcontrast .s-badge__staff {
   --_ba-bg: var(--black-500);
   --_ba-fc: var(--white);
 }
+.s-badge.s-badge__new {
+  --_ba-bc: var(--_ba-bg);
+  --_ba-bg: var(--purple-100);
+  --_ba-fc: var(--purple-400);
+  --_ba-fw: bold;
+  --_ba-tt: uppercase;
+}
 .s-badge--image,
 .s-badge .s-badge--image {
   align-self: center;
@@ -7633,12 +7646,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --yellow-400: hsl(43, 90%, 75%);
   --yellow-500: hsl(43, 90%, 82%);
   --yellow-600: hsl(43, 90%, 91%);
-  --purple-100: hsl(237, 43%, 37%);
-  --purple-200: hsl(237, 51%, 52%);
-  --purple-300: hsl(237, 63%, 62%);
-  --purple-400: hsl(237, 89%, 83%);
-  --purple-500: hsl(237, 89%, 89%);
-  --purple-600: hsl(237, 89%, 94%);
+  --purple-100: hsl(237, 26%, 23%);
+  --purple-200: hsl(237, 26%, 44%);
+  --purple-300: hsl(237, 26%, 56%);
+  --purple-400: hsl(237, 98%, 87%);
+  --purple-500: hsl(237, 98%, 92%);
+  --purple-600: hsl(237, 98%, 96%);
   --gold-100: hsl(45, 29%, 24%);
   --gold-200: hsl(45, 47%, 37%);
   --gold-300: hsl(45, 92%, 62%);
@@ -7765,12 +7778,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --yellow-400: hsl(43, 90%, 75%);
     --yellow-500: hsl(43, 90%, 82%);
     --yellow-600: hsl(43, 90%, 91%);
-    --purple-100: hsl(237, 43%, 37%);
-    --purple-200: hsl(237, 51%, 52%);
-    --purple-300: hsl(237, 63%, 62%);
-    --purple-400: hsl(237, 89%, 83%);
-    --purple-500: hsl(237, 89%, 89%);
-    --purple-600: hsl(237, 89%, 94%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 44%);
+    --purple-300: hsl(237, 26%, 56%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 92%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 29%, 24%);
     --gold-200: hsl(45, 47%, 37%);
     --gold-300: hsl(45, 92%, 62%);
@@ -8011,12 +8024,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --yellow-400: hsl(43, 75%, 75%);
   --yellow-500: hsl(48, 74%, 91%);
   --yellow-600: hsl(44, 74%, 91%);
-  --purple-100: hsl(237, 24%, 23%);
-  --purple-200: hsl(237, 24%, 23%);
-  --purple-300: hsl(237, 60%, 82%);
-  --purple-400: hsl(237, 60%, 82%);
-  --purple-500: hsl(237, 62%, 96%);
-  --purple-600: hsl(237, 62%, 96%);
+  --purple-100: hsl(237, 26%, 23%);
+  --purple-200: hsl(237, 26%, 23%);
+  --purple-300: hsl(237, 98%, 87%);
+  --purple-400: hsl(237, 98%, 87%);
+  --purple-500: hsl(237, 98%, 96%);
+  --purple-600: hsl(237, 98%, 96%);
   --gold-100: hsl(45, 22%, 25%);
   --gold-200: hsl(45, 22%, 25%);
   --gold-300: hsl(45, 92%, 62%);
@@ -8125,12 +8138,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --yellow-400: hsl(43, 75%, 75%);
     --yellow-500: hsl(48, 74%, 91%);
     --yellow-600: hsl(44, 74%, 91%);
-    --purple-100: hsl(237, 24%, 23%);
-    --purple-200: hsl(237, 24%, 23%);
-    --purple-300: hsl(237, 60%, 82%);
-    --purple-400: hsl(237, 60%, 82%);
-    --purple-500: hsl(237, 62%, 96%);
-    --purple-600: hsl(237, 62%, 96%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 23%);
+    --purple-300: hsl(237, 98%, 87%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 96%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 22%, 25%);
     --gold-200: hsl(45, 22%, 25%);
     --gold-300: hsl(45, 92%, 62%);
@@ -20284,6 +20297,32 @@ ol {
   background-position: top -10px center;
   background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
 }
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
+}
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+  border-color: var(--focus-neutral) !important;
+  box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
+}
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+  border-color: var(--focus-theme) !important;
+  box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
 .of-contain {
   object-fit: contain !important;
 }