Skip to content

[email protected]
Compare
Choose a tag to compare
@taysea taysea released this 05 Feb 21:16
· 35 commits to master since this release
[email protected]
f270a23
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Changes

There are no breaking API changes from v0.9.0. The below changes are updates to design token values to reflect a major visual update to the HPE theme.

Colors

  • color.background.screenOverlay updated from base.color.black.opacity50 to base.color.black.opacity12.
  • color.background.info updated from color.background.contrast to base.color.blue.400-opacity12.
  • color.background.warning light mode value updated from base.color.yellow.400-opacity24 to base.color.yellow.400-opacity12.
  • color.background.critical light mode value updated from base.color.red.500-opacity24 to base.color.red.500-opacity12.
  • color.background.ok light mode value updated from base.color.green.400-opacity24 to base.color.green.400-opacity12.
  • color.background.primary.strong updated from base.color.green.600 to base.color.green.700 in light mode and base.color.green.600 to #007C60 in dark mode.
  • color.background.primary.strong.hover updated from base.color.green.700 to base.color.green.800 in light mode and base.color.green.600 to #00513F in dark mode.
  • color.background.selected.primary.strong updated from base.color.brand to color.background.primary.strong.
  • color.background.selected.primary.strong.hover updated from base.color.brand to color.background.primary.strong.hover.
  • color.border.selected updated from base.color.green.600 to base.color.green.700 in light mode.
  • color.border.critical updated from color.border.default to base.color.red.800 in light mode and color.border.default to color.foreground.critical in dark mode.
  • color.text.critical updated from color.text.default to base.color.red.800 in light mode and color.foreground.critical in dark mode.
  • color.text.anchor updated from color.text.strong to color.text.primary.
  • color.text.anchor.hover updated from color.text.strong to color.text.primary-hover.
  • color.icon.info updated from color.icon.default to base.color.blue.900 in light mode and color.icon.default to base.color.blue.700 in dark mode.
  • color.icon.primary updated from base.color.green.600 to base.color.green.800 in light mode and base.color.green.600 to base.color.green.500 in dark mode.

Typography

Heading

Heading sizes, line-heights, and font-weights have been adjusted to improve legibility and page hierarchy.

heading.xlarge

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

heading.large

  • 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.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.small

  • 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.xsmall

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

heading.xxsmall

  • fontSize updated from 12px to 16px (exported as rem)
  • lineHeight updated from 12px to 18px (exported as rem)
Screenshot 2025-02-06 at 9 33 11 AM

Text

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

Screenshot 2025-02-06 at 9 30 49 AM

Anchor

  • Anchor color has been updated from color.text.strong to color.text.primary.
Screenshot 2025-02-06 at 9 30 38 AM

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 color.background.primary.strong.

Primary

button.primary.rest

  • background pulls in updated value from color.background.primary.strong.
  • fontWeight updated from bold to semibold.

button.primary.hover

  • background pulls in updated value from color.background.primary.strong.hover.
  • fontWeight updated from bold to semibold.

button.primary.selected.rest

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

button.primary.selected.hover

  • background updated from color.background.contrast to color.background.primary.xstrong.
  • fontWeight updated from bold to semibold.
Screenshot 2025-02-06 at 9 45 49 AM

Secondary

button.secondary.rest

  • background updated from color.transparent to color.background.contrast.
  • borderColor updated from brand to color.transparent
  • textColor updated from color.text.strong to color.text.primary
  • iconColor updated from color.icon.strong to color.icon.primary.

button.secondary.hover

  • background updated from color.transparent to color.background.contrast.
  • borderColor updated from brand to color.transparent
  • textColor updated from color.text.strong to color.text.primary
  • iconColor updated from color.icon.strong to color.icon.primary.

button.secondary.disabled.rest

  • borderColor updated from color.border.disabled to color.transparent

button.secondary.selected.rest

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

button.secondary.selected.hover

  • background updated from color.background.contrast to color.background.selected.primary.hover.
  • textColor updated from color.text.strong to color.text.primary.
  • iconColor updated from color.icon.strong to color.icon.primary.
Screenshot 2025-02-06 at 9 45 30 AM

Default

button.default.rest

  • fontWeight updated from semibold to medium.

button.default.hover

  • fontWeight updated from semibold to medium.

button.default.selected.rest

  • textColor updated from color.text.strong to color.text.primary.
  • iconColor updated from color.icon.strong to color.icon.primary.

button.default.selected.hover

  • textColor updated from color.text.strong to color.text.primary.
  • iconColor updated from color.icon.strong to color.icon.primary.
Screenshot 2025-02-06 at 9 45 08 AM

Toolbar

button.toolbar.rest

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

button.toolbar.hover

  • textColor updated from color.text.strong to color.text.default.
  • iconColor updated from color.icon.strong to color.icon.default.

button.toolbar.disabled.rest

  • borderColor updated from color.border.disabled to color.transparent.

button.toolbar.selected.rest

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

button.toolbar.selected.hover

  • background updated from color.background.contrast to color.background.selected.primary.hover.
  • textColor updated from color.text.strong to color.text.primary.
  • iconColor updated from color.icon.strong to color.icon.primary.
Screenshot 2025-02-07 at 8 50 42 AM

Inputs

Checkbox

checkbox.default.control.rest

  • background updated from color.background.default to color.transparent.

checkbox.default.control.hover

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

checkbox.default.control.selected.rest / checkbox.default.indeterminate.rest

  • background pulls in updated color.background.primary.strong.

checkbox.default.control.selected.hover / checkbox.default.indeterminate.hover

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

checkbox.default.label

  • fontWeight across all states updated from medium to regular.

checkbox.default.medium.control

  • borderRadius updated from static.radius.xxsmall to static.radius.xsmall.
Screenshot 2025-02-07 at 8 57 53 AM

Switch

switch.default.control.track.rest

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

switch.default.control.track.hover

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

switch.default.control.track.disabled.rest

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

switch.default.control.track.selected.rest

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

switch.default.control.selected.track.hover

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

switch.default.label

  • fontWeight across all states updated from medium to regular.

switch.default.medium.control.handle

  • height, width updated from base.dimension.600 to base.dimension.500.
Screenshot 2025-02-06 at 9 47 32 AM

RadioButton

radioButton.default.control.selected.rest

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

radioButton.default.control.selected.hover

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

radioButton.default.label

  • fontWeight across all states updated from medium to regular.
Screenshot 2025-02-07 at 8 57 02 AM

FormField

formField.default.medium.value

  • fontWeight updated from medium to regular.

formField.default.medium.input.container

  • borderRadius updated from static.radius.xsmall to static.radius.small.

formField.default.medium.input.group.container

  • borderRadius updated from static.radius.xsmall to static.radius.small.
  • paddingY updated from static.spacing.3xsmall to static.spacing.none.

formField.default.medium.input.group.item

  • paddingX updated from static.spacing.xsmall to static.spacing.xxsmall.
  • borderRadius updated from radius.none to radius.xsmall.

formField.default.input.group.container.error.rest

  • borderColor updated from color.border.strong to color.border.critical.

formField.default.input.container.error.rest

  • borderColor updated from color.border.strong to color.border.critical.

formField.default.error.rest

  • textColor updated from color.text.strong to color.text.critical.
  • iconColor updated from color.icon.strong to color.icon.critical.

formField.default.error.hover

  • textColor updated from color.text.strong to color.text.critical.
  • iconColor updated from color.icon.strong to color.icon.critical.

formField.default.value

  • textColor updated from color.text.default to color.text.strong.
Screenshot 2025-02-06 at 9 49 27 AM Screenshot 2025-02-06 at 9 49 39 AM

Visualizations

DataCell

dataCell.default.selected.rest, dataCell.primary.selected.rest

  • borderColor updated from color.transparent to color.border.weak.

dataCell.default.selected.rest, dataCell.primary.selected.rest

  • background updated from color.transparent to color.background.active.

dataCell.default.selected.hover, dataCell.primary.selected.hover

  • background updated from color.transparent to color.background.contrast.hover.

dataCell.default.medium

  • paddingTop updated from static.spacing.3xsmall to static.spacing.xsmall.
  • paddingBottom updated from 5px to 11px.
Screenshot 2025-02-07 at 8 55 36 AM
Assets 2
Loading