Skip to content

v5.0.0

Choose a tag to compare

View all tags
@taysea taysea released this 22 Mar 19:33
· 132 commits to master since this release
v5.0.0
e010db1

To support HPE’s brand strategy, grommet-theme-hpe v5.0.0 includes revisions to core styles reflecting the latest brand expression for HPE products.

For migration help, read the Migrating from v4.x to 5.x guide.

Colors:

  • Changed light mode text-strong to #444444.
  • Changed light mode text to #6F6F6F.
  • Changed selected-background to brand.
  • Changed selected-text to text-primary-button (white, necessary to meet color contrast on HPE green background).
  • Changed control to brand.

Accordion:

  • Changed title to use heading level: 3.
  • Changed expand and collapse icons to Down and Up.

Anchor:

  • Changed color to text-strong.
  • For sizes large and greater, changed weight to bold (700).
  • For sizes large and greater, changed color to brand.

Button:

  • Increased rounding on all button kinds and sizes from 2em (full rounding). The exception is toolbar buttons which retain the existing 6px radius.
  • For medium buttons, changed padding to 6px vertical and 18px horizontal for buttons with labels and to 9px for icon-only buttons to ensure a 36px height.
  • For small buttons, changed padding to 6px vertical and 18px horizontal for buttons with labels and to 9px for icon-only buttons to ensure a 36px height.
  • For large buttons, changed padding to 8px vertical and 24px horizontal for buttons with labels and to 15px for icon-only buttons to ensure a 48px height.
  • Removed border from toolbar button.
  • Changed hover treatment of primary buttons to use a linear-gradient.
  • Changed disabled treatment of buttons to use opacity: 0.3.
  • Reduced size of badge to be more proportional with reduced icon sizes.
  • Changed default badge color to text-strong to fix color contrast ratio and align with button label color.

Calendar:

  • Changed use of Heading to Text for proper semantic rendering of month and year.
  • Changed use of FormNext and FormPrevious icons to Next and Previous.
  • Changed selected day to have background brand and color text-primary-button (white, necessary to meet color contrast requirement on HPE green background).

CheckBox:

  • Changed selected state to use brand.

DataTable:

  • Changed heading cell weight to 500.
  • Changed primary key weight to 400 and color to text-strong.
  • Increased pinned cell background blur to 12px.
  • Refinements to icons supporting sorting and grouping.

Heading:

The following are formatted as font-size / line-height / font-weight.

Level 1:

  • small: 24px / 24px / 500
  • medium: 36px / 36px / 400
  • large: 48px / 48px / 400
  • xlarge: 60px / 60px / 400

Level 2:

  • small: 20px / 20px / 500
  • medium: 24px / 24px / 500
  • large: 36px / 36px / 400
  • xlarge: 48px / 48px / 400

Level 3:

  • small: 16px / 16px / 600
  • medium: 20px / 20px / 500
  • large: 24px / 24px / 500
  • xlarge: 36px / 36px / 500

Level 4:

  • small: 12px / 12px / 600
  • medium: 16px / 16px / 600
  • large: 20px / 20px / 500
  • xlarge: 24px / 24px / 500

Level 5:

  • small: 12px / 12px / 600
  • medium: 12px / 12px / 600
  • large: 16px / 16px / 600
  • xlarge: 20px / 20px / 500

Level 6:

  • small: 12px / 12px / 600
  • medium: 12px / 12px / 600
  • large: 12px / 12px / 600
  • xlarge: 16px / 16px / 600

Icons:

  • Changed sizing to align with font-size values: small (16px), medium (18px), large (24px), xlarge (30px), xxlarge (36px).
  • Added disabledScaleDown which ensures for certain simple icons (Close, LinkNext, etc.) that the stroke does not scale down at smaller sizes which was creating undesirably thin icons.

Layer:

  • Changed layer overlay background color.
  • Added blur(12px) to overlay.

Menu:

  • Changed icon to Down.
  • Updated horizontal padding to 18px and vertical padding to 6px to align with default button.

NameValuePair:

  • Changed name color to text-strong.
  • Changed name weight to 500.

Notification:

  • Changed weight to 500 and color to text-strong.

PageHeader:

  • Changed subtitle to size xlarge.
  • Added responsive behavior to PageHeader subtitle so it sizes down to medium at small breakpoint.

Paragraph:

The following are formatted as font-size / line-height / font-weight / max-width.

  • xsmall: 14px / 16px / 400 / 25em
  • small: 16px / 20px / 400 / 25em
  • medium: 18px / 24px / 400 / 25em
  • large: 24px / 32px / 400 / 25em
  • xlarge: 30px / 36px / 300 / 25em
  • xxlarge: 36px / 40px / 300 / 25em

RadioButton:

  • Changed selected state to use brand.

RangeInput:

  • Changed color to brand.

RangeSelector:

  • Changed color to brand.

Select:

  • Changed selected state to use brand.
  • Changed weight of selected option to use bold in order to meet color contrast requirement on HPE green background.
  • Changed icon to Down.

Spinner:

  • Changed color to brand.

Tab:

  • Changed color to text.
  • Changed weight of active tab to bold.
  • Changed border color of active tab to brand.
  • Reduced border size of active tab to medium (4px).
  • Added border color of border-weak on hover.
  • Changed horizontal pad of tab to 18px to align with Button.

Tabs:

  • Added alignSelf: “start” to ensure bottom border under all tab controls is only under the tabs rather than extending across entire container.
  • Reduced border size under all tab controls to xsmall.
  • Changed border color under all tab controls to border-weak.

Table:

  • Changed footer font-weight to 500.

Tag:

  • Changed value font-weight to 500.

Text:

The following are formatted as font-size / line-height / font-weight.

  • xsmall: 14px / 16px / 400
  • small: 16px / 20px / 400
  • medium: 18px / 24px / 400 (not changed)
  • large: 24px / 32px / 400
  • xlarge: 30px / 36px / 300
  • xxlarge: 36px / 40px / 300
  • 3xl: 42px / 46px / 300
  • 4xl: 48px / 48px / 300
  • 5xl: 72px / 72px / 300
  • 6xl: 72px / 72px / 300

NEW hpePop theme:

The hpePop theme extends the hpe theme and is intended for use in external facing websites such as dotCom and other marketing contexts. The hpePop theme scales up typography to better support marketing experiences in readability and brand perception.

For migration help, read the Migrating from v4.x to 5.x guide.

Assets 2
Loading