- Modernize progress indicators according to the MD3 Specs and reuse existing MD theme foundation tokens (motion, shape etc) where appropriate.
- Extract component tokens to a separate file for easier maintenance
Current State
Existing "Activity Indicator" and "Progress Bar" components correspond to MD3 Progress Indicators.
Activity Indicator
MD3 spec: Progress indicators (Circular)
Specs link: https://m3.material.io/components/progress-indicators/specs
Color tokens
Spacing / sizing
Behavior
Notes
- Rename to match MD3:
CircularProgressIndicator and move to a “Progress Indicators” directory together with Linear Progress Indicator.
- Entire rendering approach is MD2-era (two clipped half-border views). MD3-compliant implementation needs SVG or canvas-based arc for rounded caps and track
Progress Bar
MD3 spec: Linear progress indicator
Specs link: https://m3.material.io/components/progress-indicators/specs
Color tokens
Spacing / sizing
Behavior
Notes
- Should be renamed
LinearProgressIndicator and placed in a shared ProgressIndicator/ directory alongside ActivityIndicator (circular), matching MD3 naming
ProgressBar name and the color prop (which bypasses the token system) are library-level issues to address at rename time
Current State
Existing "Activity Indicator" and "Progress Bar" components correspond to MD3 Progress Indicators.
Activity Indicator
MD3 spec: Progress indicators (Circular)
Specs link: https://m3.material.io/components/progress-indicators/specs
Color tokens
secondaryContainer); onlyprimaryis renderedSpacing / sizing
size / 10(2.4dp @ small, 4.8dp @ large). MD3 specifies a fixed 4dp stroke for both indicator and trackBehavior
Notes
CircularProgressIndicatorand move to a “Progress Indicators” directory together with Linear Progress Indicator.Progress Bar
MD3 spec: Linear progress indicator
Specs link: https://m3.material.io/components/progress-indicators/specs
Color tokens
color || theme.colors.primary✅theme.colors.surfaceVariant; spec requiressecondaryContainer❌primary)Spacing / sizing
borderRadius; speccorner.fullrequiresborderRadius: 2for 4dp heightborderRadius; same issue as trackBehavior
scaleX✅Notes
LinearProgressIndicatorand placed in a sharedProgressIndicator/directory alongsideActivityIndicator(circular), matching MD3 namingProgressBarname and thecolorprop (which bypasses the token system) are library-level issues to address at rename time