feat(activity-indicator): update to new visual language

.changeset/solid-mugs-jog.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": minor
+---
+
+**Activity Indicator Updates:**
+
+- **Stacks Classic**: Updated activity indicator component to the new visual language (default 16x16). Introduced `.s-activity-indicator__sm` variant (10x10). 
+
+- **Stacks Svelte**: Added new `ActivityIndicator` component.

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -5,9 +5,15 @@ describe("activity-indicator", () => {
     runA11yTests({
         baseClass: "s-activity-indicator",
         variants: ["danger", "success", "warning"],
+        modifiers: {
+            primary: ["sm"],
+        },
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
         },
+        excludedTestids: [
+            /^s-activity-indicator-(?=.*sm).*new$/, // s-activity-indicator with content in sm size not supported
+        ],
     });
 });

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less

@@ -1,7 +1,8 @@
 .s-activity-indicator {
-    --_ai-translucent: var(--translucent-secondary);
     --_ai-bg: var(--theme-secondary-400);
     --_ai-fc: var(--white);
+    --_ai-min-size: var(--su-static16);
+    --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
 
     .highcontrast-mode({
         --_ai-bg: var(--theme-secondary-500);
@@ -10,7 +11,6 @@
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-        --_ai-translucent: var(--translucent-error);
 
         .highcontrast-mode({
             --_ai-bg: var(--red-500);
@@ -19,7 +19,6 @@
 
     &&__success {
         --_ai-bg: var(--green-400);
-        --_ai-translucent: var(--translucent-success);
 
         .highcontrast-mode({
             --_ai-bg: var(--green-500);
@@ -29,25 +28,31 @@
     &&__warning {
         --_ai-bg: var(--yellow-400);
         --_ai-fc: var(--_black-static);
-        --_ai-translucent: var(--translucent-warning);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
             --_ai-fc: var(--white);
         });
     }
 
+    &&__sm {
+        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-p: 0;
+    }
+
     background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
     color: var(--_ai-fc);
+    min-width: var(--_ai-min-size);
+    min-height: var(--_ai-min-size);
+    padding: var(--_ai-p);
 
     border-radius: 1000px;
-    display: inline-block;
+    display: inline-flex;
     font-size: var(--fs-fine);
-    font-weight: 700;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
+    font-weight: 600;
+    line-height: 1.1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
     text-transform: uppercase;
 }

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.visual.test.ts

@@ -6,10 +6,16 @@ describe("activity-indicator", () => {
     runVisualTests({
         baseClass: "s-activity-indicator",
         variants: ["danger", "success", "warning"],
+        modifiers: {
+            primary: ["sm"],
+        },
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
         },
+        excludedTestids: [
+            /^s-activity-indicator-(?=.*sm).*new$/, // s-activity-indicator with content in sm size not supported
+        ],
         template: ({ component, testid }) => html`
             <div
                 class="d-inline-flex ai-center jc-center hs1 ws1 p8"