Migrating from HPE Theme 5.x to 6.x
The refreshed theme supports HPE’s evolving brand strategy, prioritizing usability, clear communication, and accessibility. It employs a clean, flat, and professional aesthetic, reflecting a modern, functional design approach valued by engineering and product teams.
Additionally, grommet-theme-hpe v6.0.0 is built with hpe-design-tokens.
This theme has many enhancements improving accessibility, particularly in areas improving affordance and ensuring proper contrast ratios for text, backgrounds, and interactive element states. Of note, you will notice the use of an expanded green palette developed with HPE brand addressing the contrast ratio challenges when working with HPE green.
To further improve accessibility and enable user preference to drive HPE’s experiences, all typography values have been updated to use rem instead of px. This allows typography sizing to scale according to a user’s browser defined font sizing.
This theme version provides an expanded set of colors that improve accessibility, refine dark mode styling, provide a broader green palette, and offer improved specificity for how and when a color should be used. See New and deprecated colors for full details.
To upgrade to grommet-theme-hpe v6, update your package.json to the latest version. The “peerDependency” versions for grommet and grommet-icons have been updated to v2.45.1 and v4.12.4 respectively, as certain theme code is dependent on these newer versions.
The updated theme employs a clean, flat, and professional aesthetic, reflecting a modern, functional design approach valued by engineering and product teams.
This theme leverages color, contrast, rounded corners, and spacing to structure content, minimizing the use of non-functional borders. Color and spacing define sections and hierarchies, enabling users to quickly scan and understand the information architecture. The absence of heavy borders and strategic spacing creates a sense of openness, reducing visual clutter, allowing the eye to flow naturally between elements. This directs focus to information-dense content and task completion. Finally, this approach offers greater flexibility and modularity, allowing content sections to be presented in various configurations and contexts based on task flows, user preferences, personas, or device.
The default styling of certain components have been updated to align with this design approach, so the below sections will summarize some of the key changes and recommendations.
To align to the new design direction, add background=”background-back” to the application’s wrapper.
In the updated theme, cards sit flat (no elevation) on the page by default where previously they were raised (elevation “medium”). If your application does not have “background-back” defined on the wrapper, you may notice that the visual distinction between the card and the application’s background (previously provided by the Card’s elevation) is no longer there, causing cards to “blend in” with the background.
To align to the new design direction and ensure cards are visible, add background=”background-back” to the application’s wrapper.
BEFORE background-back
AFTER
For cases where cards are placed on a container with “background-front” applied and additional visual distinction between the card and its background is desired, elevation=”medium” can be applied as a prop on Card.
<Card elevation=”medium” ... />
HPE Design tokens introduced an improved, more specific and consistent approach for color names to ensure clarity for how and when a color should be used. Some existing grommet-theme-hpe colors no longer fit this naming taxonomy.
The following colors are now considered deprecated and will be removed in a future major version (timeline to be determined). While these colors are still supported in v6, this table provides a recommendation for which new colors should be used to align with HPE Design tokens.
| Deprecated | New/recommended |
|---|---|
| validation-critical | background-critical |
| validation-warning | background-warning |
| validation-ok | background-ok |
| status-critical | icon-critical or text-critical or foreground-critical |
| status-warning | icon-warning or text-warning or foreground-warning |
| status-ok | icon-ok or text-ok or foreground-primary |
| status-unknown | icon-unknown or text-unknown or foreground-unknown |
| background-layer-overlay | background-screenOverlay |
| active-background | background-active |
| disabled-text | text-disabled |
| active-text | text-strong |
| selected-background | background-selected-primary-strong or background-selected-primary |
| selected-text | text-onSelectedPrimaryStrong or text-onSelectedPrimary |
| blue | decorative-blue |
| green | decorative-green |
| teal | decorative-teal |
| purple | decorative-purple |
| red | decorative-red |
| orange | decorative-orange |
| yellow | decorative-yellow |
| blue! | decorative-blue |
| green! | decorative-green |
| teal! | decorative-teal |
| purple! | decorative-purple |
| red! | decorative-red |
| orange! | decorative-orange |
| yellow! | decorative-yellow |
| placeholder | text-placeholder |
| text-primary-button | text-onPrimaryStrong |
The following is a list of new colors. For full details on color usage, see design tokens documentation.
| New colors |
|---|
| background-contrast-hover |
| background-critical |
| background-warning |
| background-ok |
| background-info |
| background-unknown |
| background-primary-strong |
| background-primary-strong-hover |
| background-primary-xstrong |
| background-selected-primary-strong |
| background-selected-primary-strong-hover |
| background-selected-primary |
| background-selected-primary-hover |
| background-neutral-xstrong |
| border-disabled |
| border-selected |
| border-critical |
| border-info |
| border-ok |
| border-warning |
| border-unknown |
| text-onPrimaryStrong |
| text-primary |
| text-primary-hover |
| text-critical |
| text-warning |
| text-ok |
| text-info |
| text-unknown |
| text-heading |
| text-onSelectedPrimaryStrong |
| text-onSelectedPrimary |
| text-onStrong |
| text-onCritical |
| text-onCritical-strong |
| text-onWarning |
| text-onWarning-strong |
| text-onOk |
| text-onOk-strong |
| text-onInfo |
| text-onInfo-strong |
| text-onUnknown |
| text-onUnknown-strong |
| icon-default |
| icon-strong |
| icon-weak |
| icon-disabled |
| icon-critical |
| icon-warning |
| icon-ok |
| icon-info |
| icon-unknown |
| icon-primary |
| icon-onPrimaryStrong |
| icon-onSelectedPrimaryStrong |
| icon-onSelectedPrimary |
| decorative-brand |
| decorative-green |
| decorative-purple |
| decorative-teal |
| decorative-blue |
| decorative-red |
| decorative-orange |
| decorative-yellow |
| decorative-neutral |
| decorative-neutral-hover |
| dataVis-categorical-10 |
| dataVis-categorical-20 |
| dataVis-categorical-30 |
| dataVis-categorical-40 |
| dataVis-categorical-50 |
| dataVis-categorical-60 |
| dataVis-categorical-70 |
| dataVis-categorical-80 |
| foreground-primary |
| foreground-critical |
| foreground-warning |
| foreground-unknown |
hpe-design-tokens v1.0.0 shipped an updated and expanded range of t-shirt sizing for spacing, radius, width, and height. This provides exciting enhancements based on feedback we’ve received (hint -- additional steps between “medium” and “large” Box sizes, more granularity for spacing like padding, margin, and gap, etc.).
However, in order to enable Grommet-based teams to get on the new HPE theme while minimizing migration overhead of breaking changes, grommet-theme-hpe v6.0.0 does not introduce the updated t-shirt scales and will instead introduce them in the next major version of the theme. The release timeline of v7.0.0 is still being determined. The HPE Design System team will work directly with Grommet-based teams to provide preview branches/beta versions of v7 to those ready to start migrating to the updated t-shirt scales.
If you have any questions or need help with migration, reach out in Slack in #hpe-design-system.