@stackoverflow/stacks 2.0.8 → 2.0.9

package/dist/css/stacks.css

@@ -411,11 +411,11 @@ fieldset {
   position: relative;
 }
 .s-activity-indicator {
-  --_ai-focus-ring: var(--focus-ring);
+  --_ai-translucent: var(--translucent-secondary);
   --_ai-bg: var(--theme-secondary-400);
   --_ai-fc: var(--white);
   background-color: var(--_ai-bg);
-  box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
+  box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
   color: var(--_ai-fc);
   border-radius: 1000px;
   display: inline-block;
@@ -432,14 +432,14 @@ body.theme-highcontrast .s-activity-indicator {
 }
 .s-activity-indicator.s-activity-indicator__danger {
   --_ai-bg: var(--red-400);
-  --_ai-focus-ring: var(--focus-ring-error);
+  --_ai-translucent: var(--translucent-error);
 }
 body.theme-highcontrast .s-activity-indicator.s-activity-indicator__danger {
   --_ai-bg: var(--red-500);
 }
 .s-activity-indicator.s-activity-indicator__success {
   --_ai-bg: var(--green-400);
-  --_ai-focus-ring: var(--focus-ring-success);
+  --_ai-translucent: var(--translucent-success);
 }
 body.theme-highcontrast .s-activity-indicator.s-activity-indicator__success {
   --_ai-bg: var(--green-500);
@@ -447,7 +447,7 @@ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__success {
 .s-activity-indicator.s-activity-indicator__warning {
   --_ai-bg: var(--yellow-400);
   --_ai-fc: var(--_black-static);
-  --_ai-focus-ring: var(--focus-ring-warning);
+  --_ai-translucent: var(--translucent-warning);
 }
 body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
   --_ai-bg: var(--yellow-500);
@@ -4148,7 +4148,7 @@ body.theme-highcontrast .s-progress.s-progress__privilege {
 }
 .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--stop {
   background: var(--theme-secondary-400);
-  box-shadow: 0 0 0 var(--su-static6) var(--focus-ring);
+  box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
 }
 .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--bar,
 .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--stop {
@@ -7561,6 +7561,11 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
   --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
   --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
   --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
+  --translucent-secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
+  --translucent-success: hsla(140, 40%, 75%, 0.4);
+  --translucent-warning: hsla(47, 79%, 58%, 0.4);
+  --translucent-error: hsla(358, 62%, 47%, 0.15);
+  --translucent-muted: hsla(210, 8%, 15%, 0.1);
   --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
   --focus-ring-success: hsla(140, 40%, 75%, 0.4);
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7608,6 +7613,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
   --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.6)));
   --theme-secondary-custom: var(--theme-secondary-custom-400);
   --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+  --theme-secondary-custom-translucent: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
   color: var(--theme-body-font-color, var(--black-600));
 }
 body:not(.theme-highcontrast).theme-dark,
@@ -7687,6 +7693,11 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
   --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
   --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+  --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+  --translucent-success: hsla(140, 40%, 75%, 0.4);
+  --translucent-warning: hsla(47, 79%, 58%, 0.4);
+  --translucent-error: hsla(358, 62%, 47%, 0.15);
+  --translucent-muted: hsla(210, 8%, 15%, 0.1);
   --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
   --focus-ring-success: hsla(140, 40%, 75%, 0.4);
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7734,6 +7745,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8)));
   --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
   --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+  --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
   color: var(--theme-body-font-color, var(--black-600));
 }
 @media (prefers-color-scheme: dark) {
@@ -7811,6 +7823,11 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
     --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
     --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+    --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+    --translucent-success: hsla(140, 40%, 75%, 0.4);
+    --translucent-warning: hsla(47, 79%, 58%, 0.4);
+    --translucent-error: hsla(358, 62%, 47%, 0.15);
+    --translucent-muted: hsla(210, 8%, 15%, 0.1);
     --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7858,6 +7875,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8)));
     --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
     --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+    --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
     color: var(--theme-body-font-color, var(--black-600));
   }
 }
@@ -7935,6 +7953,11 @@ body.theme-highcontrast.theme-system .theme-light__forced {
   --bs-md: none;
   --bs-lg: none;
   --bs-xl: none;
+  --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+  --translucent-success: hsla(140, 40%, 40%, 0.9);
+  --translucent-warning: hsla(47, 76%, 46%, 0.9);
+  --translucent-error: hsla(358, 62%, 47%, 0.9);
+  --translucent-muted: hsla(210, 8%, 55%, 0.95);
   --focus-ring: hsla(206, 100%, 40%, 0.9);
   --focus-ring-success: hsla(140, 40%, 40%, 0.9);
   --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -8042,6 +8065,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --bs-md: none;
   --bs-lg: none;
   --bs-xl: none;
+  --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+  --translucent-success: hsla(140, 40%, 40%, 0.9);
+  --translucent-warning: hsla(47, 76%, 46%, 0.9);
+  --translucent-error: hsla(358, 62%, 47%, 0.9);
+  --translucent-muted: hsla(210, 8%, 55%, 0.95);
   --focus-ring: hsla(206, 100%, 40%, 0.9);
   --focus-ring-success: hsla(140, 40%, 40%, 0.9);
   --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -8149,6 +8177,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --bs-md: none;
     --bs-lg: none;
     --bs-xl: none;
+    --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+    --translucent-success: hsla(140, 40%, 40%, 0.9);
+    --translucent-warning: hsla(47, 76%, 46%, 0.9);
+    --translucent-error: hsla(358, 62%, 47%, 0.9);
+    --translucent-muted: hsla(210, 8%, 55%, 0.95);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -20722,11 +20755,11 @@ ol {
   outline: 0 !important;
 }
 .outline-ring {
-  outline: solid var(--su-static4) var(--focus-ring);
+  outline: solid var(--su-static4) var(--translucent-secondary);
 }
 .f\:outline-ring:focus,
 .f\:outline-ring:focus-within {
-  outline: solid var(--su-static4) var(--focus-ring);
+  outline: solid var(--su-static4) var(--translucent-secondary);
 }
 .fill-current {
   fill: currentColor !important;