Skip to content

v8.0.0

Choose a tag to compare

View all tags
@jcfilben jcfilben released this 15 Oct 00:36
· 32 commits to master since this release
v8.0.0
1205e72
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

This release introduces Landmark, the next evolution of the HPE visual language. It aligns the theme with hpe-design-tokens v2-Landmark — delivering an updated color palette, typography, and iconography that reflect HPE’s refreshed brand identity.

Read Migrating from HPE Theme v7.x to v8.x for additional migration details.

Dependencies

  • Updated hpe-design-tokens dependency from ~1.4.0 to ~2.0.0, introducing a refreshed visual design foundation.
  • Dropped support for styled-components v5.
  • Removed grommet-icons peer dependency.
  • Added @hpe-design/icons-grommet peer dependency.
  • Updated theme to use the new icon set from @hpe-design/icons-grommet.

Typography

  • Switched typeface from HPE Metric to Graphik.
  • Updated Text and Heading so that weight="bold" maps to a theme-defined weight of 500.
  • For true bold, use numeric value 800.
  • All typography now uses relative units (em) for better scalability and accessibility.
  • Adjusted heading font sizes to be consistent across levels:
Size Value Unit
xxsmall 14px em
xsmall 16px em
small 18px em
large 24px em
xlarge 32px em
image-20251013-202649


image-20251013-202702

Primary button

New color

A new color background-neutral-xstrong-hover has been added. This is used for the Primary button's hover state.

image-20251013-203626

New primary button treatment

The primary button now features dark tones from the updated neutral palette.

image-20251013-203648

Colors

Removed Colors

Removed the following colors from the theme:

  • decorative-red
  • red
  • red!
  • decorative-orange
  • orange
  • orange!
  • decorative-yellow
  • yellow
  • yellow!
  • decorative-teal
  • teal
  • teal!

These colors are no longer supported and should be replaced with other theme colors.

Brand-Aligned Color Strategy

In line with updated brand guidelines, the primary color palette for both interactive and non-interactive elements is composed of greys and greens.

Colors


image 7

New colors

Data visualisations colors

image-20251013-204824


image-20251013-204831

Status color update

Status backgrounds

image-20251013-204906


image-20251013-204914

Text, surfaces and borders

Text, icons and borders are using the new cooler greys.

Light mode Dark mode
Example assets rendered with cool greys on light background Example assets rendered with cool greys on dark background

HPE icons

To achieve landmark styling, in addition to upgrading to hpe-design-tokens v2-Landmark, users of grommet-icons should migrate to @hpe-design/icons-grommet. Icon migration guide

image-20251013-205042
Assets 2
Loading