Progress
Visual indicators that show the completion status of tasks, loading states, or multi-step processes.
On this page
This documentation is a work in progress and may contain incomplete or outdated
information. If you have any feedback or suggestions, please open an issue on GitHub.
Tokens
Design tokens that control the visual appearance, spacing, and behavioral characteristics of progress components, ensuring consistent progress indication across different interface contexts and maintaining design system coherence.
Theming Tokens
Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.
Legend:
- Granular tokens that affect only this component.
- Granular tokens that affect other components.
- Semantic tokens that affect the whole application.
- Base tokens that affect the whole application.
Color
| Component Token | Base Token |
|---|---|
| color.progress.fg-past | {color.context.neutral.contrast-color} |
| color.progress.bg-past | {color.context.neutral.base-color} |
| color.progress.border-past | {color.context.neutral.base-color} |
| color.progress.fg-current | {color.context.primary.contrast-color} |
| color.progress.bg-current | {color.context.primary.base-color} |
| color.progress.border-current | {color.context.primary.base-color} |
| color.progress.fg-next | {color.context.default.contrast-color} |
| color.progress.bg-next | {color.context.default.base-color} |
| color.progress.border-next | {color.context.default.base-color} |
| color.context.default.fg-main | {color.base.context.light.default.fg-main} |
| color.context.primary.fg-main | {color.base.context.light.primary.fg-main} |
| color.context.primary.base-color | {color.base.context.light.primary.base-color} |
| color.context.primary.contrast-color | {color.base.context.light.primary.contrast-color} |
| color.context.default.dim-slight | {color.base.context.light.default.dim-slight} |
Typography
| Component Token | Base Token |
|---|---|
| font.text.small.normal | {fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.small}, fontSize: {typography.fontSize.text.small}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}} |
| font.text.large.strong | {fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.strong}, lineHeight: {typography.lineHeight.text.large}, fontSize: {typography.fontSize.text.large}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}} |
| font.text.medium.strong | {fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.strong}, lineHeight: {typography.lineHeight.text.medium}, fontSize: {typography.fontSize.text.medium}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}} |
Sizing
| Component Token | Base Token |
|---|---|
| size.icon.glyph.small | {size.unit.20} |
| size.asset.separator | {size.unit.1} |
| size.unit.24 | {dimension.base.24} |
| size.unit.4 | {dimension.base.4} |
| size.unit.32 | {dimension.base.32} |
Spacing
| Component Token | Base Token |
|---|---|
| space.context.2xsmall | {size.base.4} |
| space.context.xsmall | {size.base.8} |
| space.context.medium | {size.base.16} |
Border Radius
| Component Token | Base Token |
|---|---|
| borderRadius.context.xsmall | {borderRadius.base.xsmall} |
| borderRadius.context.round-32 | {size.base.16} |