Element v5 initially sets out to be a release targeting parity with v4 visually, maintaining much of the aesthetic whilst updating our token structure under the hood, alongside some updates on components to support updated requirements from current and upcoming designs. Whilst we endeavour to list updates here, individual component pages will list information about them more granularly.
The tech stack and requirements for Element remain the same with this version.
Component updates
Renamed
- CTAButton has been replaced with Button, with an updated API.
- CTALink has been replaced with Link, maintaining much of its API, but replacing TextLink using an inline property.
New
Deprecated
- DescriptionList - this is a simple typographic composition.
- Small - <P size=”sm” … instead.
- Label - <P size=”sm” … instead.
- Lead - <P size=”lg” … instead.
- TextLink - <Link inline ... instead.
Design token updates
We have made an effort to shorten the token structure whilst keeping them functional and descriptive, for more intuitive usage. The main manifestation of this is in excluding the type of token (primitive, semantic, or component) out of the token structures - we found that explicitly denoting this added little value, whilst increasing tokens lengths considerably.
e.g. “gradientTo” in JS becomes “gradient-to” in CSS.
Responsive tokens
When using CSS tokens, media-query based tokens are placed within media-query blocks, and so are dynamically switched between size settings determined in the system, i.e. as a consumer you don’t need to set these. For example, var(—font-size-md) has a value set as default (mobile first), then in a media-query is updated with another value; and this is all contained in our required theme.css file.
In JavaScript, however, due to considerably different operation of viewport size querying, tokens are still provided in multiple sizes. Following the same example above, we have both theme.font.size.md.mediaQuery.sm and theme.font.size.md.mediaQuery.lg to be switched by the consumer.
Breakpoints have been updated too:
/* Element v4 */
small: 576
medium: 768
large: 1200
/* Element v5 */
small: 576
medium: 960 // updated
large: 1200
Spacing tokens
The spacing array has been updated from an array of 0-15, to a much more extensible array, multiplying previous keys by 100 to allow some intermediate spacing values. In this sense, the 4px base scale (previously 1, now 100) is still available in increments of 100 between 100-1500.
Components making use of spacing properties (such as Margin and Stack) have been updated to maintain the 1-15 key as their API, handling this change internally. However, use of space tokens will need to be adjusted to access using the new keys, e.g. space[1] => space[100] .