Merge ce9944b into 26b2623

src/components/progress/themes/circular/shared/circular.progress.indigo.scss

@@ -0,0 +1,18 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $indigo;
+
+:host {
+    --diameter: 48px;
+}
+
+[part~='label'] {
+    @include type-style('subtitle-2');
+
+    color: var-get($theme, 'text-color');
+}
+
+[part~='fill'] {
+    stroke-width: calc(var(--stroke-thickness) + rem(1px));
+}

src/components/progress/themes/circular/themes.ts

@@ -16,6 +16,7 @@ import { styles as sharedLight } from './light/circular.progress.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/circular.progress.bootstrap.css.js';
 import { styles as fluent } from './shared/circular.progress.fluent.css.js';
+import { styles as indigo } from './shared/circular.progress.indigo.css.js';
 
 const light = {
   shared: css`
@@ -31,7 +32,7 @@ const light = {
     ${fluent} ${fluentLight}
   `,
   indigo: css`
-    ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 
@@ -49,7 +50,7 @@ const dark = {
     ${fluent} ${fluentDark}
   `,
   indigo: css`
-    ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 

src/components/progress/themes/linear/shared/linear.progress.indigo.scss

@@ -7,6 +7,14 @@ $theme: $indigo;
 $stripe-size: rem(6px);
 $stripe-space: rem(14px);
 
+:host {
+    gap: rem(4px);
+}
+
+[part~='value'] {
+    @include type-style('subtitle-2');
+}
+
 [part~='striped']:not([part~='indeterminate']) {
     /* stylelint-disable */
     background: var-get($theme, 'fill-color-default') repeating-linear-gradient(