visual-framework
Use primary text colour for vf-list
The variants of vf-list that have a 16px font size also use the secondary text colour #373a36. We should change the colour of these variants to the primary text colour #1A1C1A
On inspection of the vf-list variants, the affected examples have been listed below.
List of examples affected in the vf-list:
@bhushan-ebi Dev Tasks
- Investigate if the colour inconsistency affects just the vf-list examples or the cases where it has be used on services and sites
- Update the colour of the listed variants from the secondary text colour #373A36 to the primary text colour #1A1C1A to ensure consistency
@Adedoyinebi Documentation Task
- Create a follow up task to create documentation to the vf-list as there is no documentation on this component
On further investigation in this task it was found that changing the colour from secondary to primary would have widespread impact on other components. Finding: The _typography.scss file has a mixin named set-type() which returns the secondary colour #373A36 for text-body--3, text-body--4, text-body--5. This mixin is being called from multiple component SCSS files and so changing the mixin to return primary colour #1A1C1A would affect all these components. Since both the colours are nearly similar we can still do this change but further discussion is needed among team members before we go ahead.
Other similar issue which needs to be reviewed - https://github.com/visual-framework/vf-core/issues/1949
The best practice from patterns observed in other design systems showed a consistent use of colours in the defined list items, some examples are:
Gov.uk’s design system (Lists)
- All list types and defined texts use the same primary text colour from the colour token.
- All the list variants use the same default text colour #303030 (RGBA: 48,48, 48,1). " —p-colour-text"
To ensure consistency of the design of vf list items I would recommend that the variants be updated to the primary text colour #1A1C1A
@bhushan-ebi Next steps:
Update the following list items colour to the primary text colour #1A1C1A:
Follow up task has been created for the implementation of this update https://github.com/visual-framework/vf-core/issues/2041. Closing this task.