Brand Refresh - Design System site guidance to reflect brand refresh enhancements

[SOjaHPE]

The changes made to grommet and the HPE Theme to support the latest brand refresh changes, those have been pushed to the Grommet and Figma component, stylesheet and tokens. The remaining work to close out the Brand Refresh project is to update the DS guidance to properly communicate these changes.

Where is the ux debt, in areas that touch on any guidance covering typography, the dynamic sizing of icons in buttons, button guidance where ever there are call outs that might reflect the old bold, non-brand green need to be updated. This might take a coordinate team swarm to identify where gaps exist.

We should look at this as possible two stages, the low hanging fruit, what can we get accomplished quickly. And create any follow-on tickets to track larger efforts that might exist.

---

Deliverables: This is intended to be a efficient, gut-check time-boxed review of all site content (possibly a small group spend 45-60 min together), think PRty, but for site review.

• Identify any items which need to be adjusted.
• If possible, fix items in real-time.
• Record any larger items and share findings to discuss next steps.

---

Cleanups:

• [x] Fix actions menu style

Sentence case:

• [x] Sentence case "Show Me More" on home page
• [x] feedback buttons on home page
• [x] "Background Colors Guidance" anchor

Content accuracy: Issue opened https://github.com/grommet/hpe-design-system/issues/3335

• [ ] Confirm "Our Brand" content accuracy/if this content is up-to-date
• [ ] Adjust "Green color accessibility" documentation to clarify that "light" and "dark" green should only be used for "status"? Maybe add content about need for minimum of 19px and bold and #FFFFFF for text on HPE brand green.
• [ ] Button icons content feels out of place and unnecessary, proposing we remove: https://design-system.hpe.design/foundation/icons#button-icons
• [ ] Fix stack example (or remove content since button "badge" is recommended for this pattern?): https://design-system.hpe.design/components/stack
• [ ] Only "end truncation" (browser default) is supported. Should we remove other truncation types? https://design-system.hpe.design/components/datatable#options-for-positioning-truncation
• [ ] Assess accuracy of Tabs alignment content (I don't believe justify="start" is necessary anymore: https://design-system.hpe.design/components/tabs#alignment

Update bold to medium:

• [x] https://design-system.hpe.design/foundation/icons#resource-actions
• [x] https://design-system.hpe.design/components/page
• [x] Markdown table
• [x] List titles
• [x] Show example code" collapsible label
• [x] Tip example
• [x] NameValueList
• [x] List
• [x] Page Layouts diagrams
• [x] Emphasized text in content-driven layout
• [x] List in center layer
• [x] List with range selector
• [x] List with select
• [x] List examples
• [x] DataSummary
• [x] DataTable Order Name should not be bolded: https://design-system.hpe.design/components/datatable#selecting-multiple-records-and-batch-actions

Screenshots: Issue opened https://github.com/grommet/hpe-design-system/issues/3336

• [ ] DataTable screenshots are out of date with latest theme: https://design-system.hpe.design/components/datatable#1-separate-columns-for-status-and-state
• [ ] Navigation screenshots are out of date with latest theme: https://design-system.hpe.design/templates/side-to-side-navigation#tab-guidelines

Icon (remove use of Form icons):

• [x] Footer examples
• [x] https://design-system.hpe.design/components/button#button-with-icon
• [x] Add height="medium" to HPE icon: https://design-system.hpe.design/components/menu#within-a-header

Typography:

• [x] Host 0 is very small, confirm heading level/size: https://design-system.hpe.design/templates/forms/managing-child-objects#required-children

Misc:

• [x] Fix alignment of Card example: https://design-system.hpe.design/components/card
• [x] Reduce padding to 12px/use local ButtonGroup: https://design-system.hpe.design/components/button#button-ordering
• [ ] Update Case study to use notification component: https://github.com/grommet/hpe-design-system/issues/3336
• [x] Custom form label, revert to default: https://design-system.hpe.design/templates/forms#customize

[taysea]

Closing, PRs for quick wins have been merged. Follow on tickets:

• 3335

• 3336