v6.0.0

The changes in this version reflect a major visual update to the HPE theme. Read Migrating from HPE Theme v5.x to v6.x for additional migration details.

Typography

Heading

Heading sizes, line-heights, and font-weights have been adjusted to improve legibility and page hierarchy. Additionally, all typography has been exported in rem as opposed to px.

heading.level.1.medium

• lineHeight updated from 36px to 40px (exported as rem)
• fontWeight updated from medium to regular

heading.level.2.medium

• fontSize updated from 24px to 28px (exported as rem)
• lineHeight updated from 24px to 32px (exported as rem)
• fontWeight updated from medium to regular

heading.level.3.medium

• fontSize updated from 20px to 24px (exported as rem)
• lineHeight updated from 20px to 28px (exported as rem)
• fontWeight updated from medium to regular

heading.level.4.medium

• fontSize updated from 16px to 20px (exported as rem)
• lineHeight updated from 20px to 24px (exported as rem)
• fontWeight updated from medium to regular

heading.level.5.medium

• fontSize updated from 12px to 18px (exported as rem)
• lineHeight updated from 12px to 20px (exported as rem)

heading.level.6.medium

• fontSize updated from 12px to 16px (exported as rem)
• lineHeight updated from 12px to 18px (exported as rem)

Text

Text font-weights have been updated to use font weight 400 across all text sizes by default.

Anchor

• Anchor color has been updated from text-strong to text-primary.

Buttons

Because of improved color contrast ratios in the updated color palette, all medium buttons have been updated to use 18px (exported as rem) as opposed to 19px which was previously required on HPE green background.

Primary

rest state

• background pulls in darker green from background-primary-strong.
• fontWeight updated from bold to semibold.

hover state

• background pulls in darker green from background-primary-strong-hover.
• fontWeight updated from bold to semibold.

selected state (active={true})

• background updated from background-contrast to background-primary-xstrong.
• fontWeight updated from bold to semibold.

selected + hover state

• background updated from background-contrast to background-primary-xstrong.
• fontWeight updated from bold to semibold.

Secondary

rest state

• background updated from transparent to background-contrast.
• borderColor updated from brand to transparent
• label color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

hover state

• background updated from transparent to background-contrast.
• borderColor updated from brand to transparent
• label color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

selected state (active={true})

• background updated from background-contrast to background-selected-primary.
• label color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

selected + hover state

• background updated from background-contrast to background-selected-primary-hover.
• text color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

Default

rest state

• fontWeight updated from semibold to medium.

hover state

• fontWeight updated from semibold to medium.

selected state (active={true})

• text color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

selected + hover state

• text color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

Toolbar

rest state

• borderColor updated from border-default to transparent.
• text color updated from text-strong to text-default.
• icon color updated from text-strong to icon-default.

hover state

• text color updated from text-strong to text-default.
• icon color updated from text-strong to icon-default.

selected state (active={true})

• background updated from background-contrast to background-selected-primary.
• text color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

selected + hover state

• background updated from background-contrast to background-selected-primary-hover.
• text color updated from text-strong to text-primary.
• icon color updated from text-strong to icon-primary.

ToggleGroup

Applies toolbar Button style to options.

Tabs

• Removes borders
• Applies background-selected-primary-strong to selected tab.

Menu

• Applies padding of 6px around menu items.
• Adds border-radius of 6px onto individual menu items.

Select

• Applies padding of 6px around options.
• Adds border-radius of 6px onto individual options.
• Updates selected background from brand to background-selected-primary and adds selected "marker" for accessibility affordance.

Checkbox

rest state

• background updated from background-default to transparent.

hover state

• background updated from background-default to background-hover.

checked / indeterminate state

• background pulls in updated background-primary-strong.

checked + hover / indeterminate + hover state

• background pulls in updated background-primary-strong-hover.

label

• fontWeight across all states updated from medium to regular.

control

• borderRadius updated from 4px to 6px.

Switch

track rest state

• background updated from background-default to decorative-neutral.
• borderColor updated from border-default to transparent.

track hover state

• background updated from color.default to decorative-neutral-hover.
• borderColor updated from border-strong to transparent.

track disabled state

• background updated from transparent to color.background.disabled.
• borderColor updated from border-default to transparent.

track checked state

• background pulls in updated background-primary-strong.
• borderColor updated from border-default to transparent.

track checked + hover state

• background pulls in updated background-primary-strong-hover.
• borderColor updated from border-strong to transparent.

label

• fontWeight across all states updated from medium to regular.

knob

• height, width updated from 24px to 22px.

RadioButton

rest state

• background updated from background-default to background-selected-primary-strong.
• borderColor updated from border-selected to transparent.
• icon color updated from brand to icon-onSelectedPrimaryStrong.

selected state

• background updated from background-default to background-selected-primary-strong-hover.
• borderColor updated from border-selected to transparent.
• icon color updated from brand to icon-onSelectedPrimaryStrong.

label

• fontWeight across all states updated from medium to regular.

FormField

value

• fontWeight updated from medium to regular.
• text color updated from text-default to text-strong.

input container

• borderRadius updated from 6px to 8px.

group container (around Ch...

v5.8.0

• Fixed color contrast on clear button in Select. #412
• Updated Codeblocks comment color to meet accessibility requirements. #418
• Updated Calendar colors to meet accessibility requirements. #420

v5.7.0

• Updated font URLs based on changes from Brand. (#406)
  NOTE: Depending on how specific an application's Content Security Policy is, it may need to be updated to allow the new URL. “https://www.hpe.com/h41225/hfws-static/” has been updated to “https://www.hpe.com/content/dam/hpe/“.
  Old URL example: https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2
  New URL example: https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2
• Fixed DataTable sorting icons for Ascending and Descending. (#405)
• Fixed text-strong value to meet color contrast requirements on light mode secondary palette. (#402)

v5.6.0

• Added icon color to theme.anchor.icon.color. (#399)
• Updated peer dependency for Grommet to v2.39.0. (#400)

v5.5.0

• Added support for styled-components v6. (#397)

v5.4.0

• Added NEW ToggleGroup styles. (#392)
• Fixed List pinned icon pad to align with onOrder button icons. (#393)

v5.3.1

• Fixed bug with padding on Table header cells. (#386)
• Fixed bug with hover border of CheckBox toggle when used outside of FormField. (#387)

v5.3.0

• Added readOnly styling. (#383)
• Added use client to index.js. (#384)

v5.2.0

NEW Data + friends support:

• Added kind="toolbar" button styling. (#374)

General:

• Fixed h4 weight to render as 600. (#375)

Notification:

• Updated inline direction to column. (#376)
• Updated onClose icon from FormClose to Close. (#376)
• Updated Anchors to use default Anchor styling. (#377)

v5.1.1

• Fixed package.json for npm distribution. (#370)
• Fixed hpePop heading level issue. (#371)