Skip to content

Migrating from HPE Theme 3.x to 4.x

Jump to bottom
Taylor Seamans edited this page Oct 17, 2022 · 2 revisions

grommet-theme-hpe v4.0.0 ships with all of the assets and styling needed to leverage and align with the latest brand updates that aim to make HPE experiences look, feel, and sound more bold, dynamic, human, and trusted.

Notable enhancements

V4 provides the ability for turn-key implementation of HPE distinctive brand assets. New brand ingredients such as CTA buttons, gradient colors and textures, and dynamic typography are executed by a simple prop value:

CTA buttons

<Button kind=”cta-primary” label=”Launch” … />
launch-cta

Gradients and textures

<Box background=”datawave-multi-4” … />
background

Movement in type

<Box background={{ image: ‘purple-magenta-yellow’, clip: ‘text’, rotate: 90 }}  … >
  <Text weight=”bold” size=”xlarge” >Modernize</Text>
  <Text>edge to cloud</Text>
</Box>
gradient-type

Upgrading to v4.x

To upgrade to grommet-theme-hpe v4, simply update your package.json to the latest version. There are no breaking changes in terms of functionality with this release.

If you’re using snapshot tests, there will be changes to those snapshots due to the following changes in styling:

  • Changed CheckBox rounding from 2px to 4px.
  • Changed FormField/input rounding from 4px to 6px.
  • Changed button rounding to 6px for sizes small and medium, 8px for large, and 10px for xlarge.
  • Changed primary Button background to HPE green and secondary Button border to HPE green.
  • Changed font-size of medium button to 19px to meet contrast requirements of text on HPE green.
  • Changed dark mode background, border, text, and validation colors.

Included Distinctive Brand Assets

HPE Green

We wish to be known for our distinctive brand asset HPE Green. In order to incorporate this asset into the experiences we deliver, the green background of primary buttons and green border of secondary buttons will now use HPE green as opposed to the light and dark green variants.

Read Brand Central HPE Green notes.

NEW CTA primary and alternate buttons

CTA primary and alternate buttons provide an opportunity to make the HPE Element a distinctive and recognizable feature associated with key value delivered by HPE’s edge-to-cloud promise.

CTA buttons are not a replacement for primary action buttons. They have a distinct purpose and styling. For details on when to use one versus the other, read the Design System guidance on CTA buttons vs primary action buttons.

These button kinds can be implemented by applying kind=”cta-primary” or kind=”cta-alternate” to Button.

Read Brand Central CTA button notes.

cta-buttons

NEW background gradients and textures

All of the gradient, datawave, and light/shadow assets from Brand Central’s distinctive assets can now be consumed directly from grommet-theme-hpe.

These assets may be seen commonly throughout marketing contexts and should be used more sparingly within platform. However, there are appropriate use cases, such as Call to action cards, where the incorporation of bolder, vibrant elements like these can inspire and entice the user.

Read Brand Central color and texture notes.

pink, yellow, orange colored datawave slices

Increased rounding on buttons and inputs

The use of rounded, soft corners helps convey that an element is interactive as well as creates a more human and approachable feeling.

Buttons will now use 6px rounding for sizes small and medium, 8px for large, and 10px for xlarge compared to the previous 4px, 6px, and 8px values respectively.

button-sizes-rounding

FormFields and inputs will also receive the 6px rounding to align with button treatment. CheckBoxes will receive 4px rounding to maintain the proportional difference in rounding that currently exists between CheckBoxes and other interactive elements.

signup-form

NEW Dark mode palette

To better mirror the light mode experience, the dark mode colors have shifted to a more neutral palette. All Grommet applications automatically support both light and dark modes.

Dark theme mode can be used in the product space for accessibility and low light situations. The v3 deep grey/blue color aligned with Brand's previous standards, but over the years we've found that it didn’t blend with operating system settings for dark modes, there were a lot of color conflicts with the cooler hue of the blueish text being blended with artwork or other interface components, and the text was quite muddy if you compare old to new. The change now aligns our light and dark themes to be more complimentary and increases accessibility. This also brings more seamless alignment with events, hpe.com, and other HPE experiences. The change allows us to more holistically blend our various elements with our palette of colors and content going forward.

NOTE: It will be quite apparent if your implementation has instances where HEX or custom color values were used instead of HPE theme color names. Clean those instances up so that you get the full advantage of the theme and your users get a clean, seamless experience.

To view an application in dark mode, apply themeMode=”dark” to the Grommet tag of the application:

<Grommet theme={hpe} themeMode=”dark”>
…

The HPE Design System site is available in dark mode by using the theme toggle on the far right of the site header.

site-darkmode
Clone this wiki locally