diff --git a/src/components/progress/themes/circular/shared/circular.progress.indigo.scss b/src/components/progress/themes/circular/shared/circular.progress.indigo.scss new file mode 100644 index 000000000..6de1900ee --- /dev/null +++ b/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)); +} diff --git a/src/components/progress/themes/circular/themes.ts b/src/components/progress/themes/circular/themes.ts index 1f51a102d..096e50954 100644 --- a/src/components/progress/themes/circular/themes.ts +++ b/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} `, }; diff --git a/src/components/progress/themes/linear/shared/linear.progress.indigo.scss b/src/components/progress/themes/linear/shared/linear.progress.indigo.scss index 1667a85ea..1aae0d4b1 100644 --- a/src/components/progress/themes/linear/shared/linear.progress.indigo.scss +++ b/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(