Skip to content

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

This release provides production-ready support for HPE Design Tokens with styles in alignment with the existing HPE theme (grommet-theme-hpe v5).

hpe-design-tokens v1.0.0 applies the updated look and feel of the HPE theme. Therefore to ease adoption of design tokens, v0.9.0 allows teams with existing applications to adopt design tokens while maintaining styling that aligns with existing theming. There are no breaking API changes from v0.9.0 to v1.0.0. The only changes are value changes to reflect the updated HPE theme.

Breaking changes

  • b87e080: - Renamed 3xl, 4xl, 5xl text and anchor sizes to 3xlarge, 4xlarge, and 5xlarge for consistency with other t-shirt size naming.
  • 6df1814: - Updated anchor.disabled tokens to be structured as anchor.disabled.rest.
  • 6df1814: - Updated dataCell.primary.disabled tokens to be structured as dataCell.primary.disabled.rest.
  • 66ca9da:
    • Renamed exports from "base" to "primitives" (e.g., "base.css" --> "primitives.css").
    • Removed "default" from CJS/ESM component token exports (e.g., "components.default.cjs" --> "components.js"). No effect on import.
    • Removed light/dark, medium/small modes from ESM/CommonJS exports. Because these now return CSS variable refs, we don't need separate mode exports. (e.g., "color.light.js" --> "color.js").
  • cb9764f: - Moved fontWeight tokens for checkbox, switch, and radiobutton label under each state.
  • fc7ba24:
    • Renamed color.background.primary.default --> color.background.primary.strong.
    • Renamed color.background.selected.strong.enabled --> color.background.selected.primary.strong.
    • Renamed color.background.selected.strong.hover --> color.background.selected.primary.strong.hover.
    • Renamed color.background.selected.weak.enabled --> color.background.selected.primary.
    • Renamed color.background.selected.weak.hover --> color.background.selected.primary.hover.
    • Renamed color.text.onPrimary --> color.text.onPrimaryStrong.
    • Renamed color.text.heading.default --> color.text.heading.
    • Renamed color.text.onSelectedStrong --> color.text.onSelectedPrimaryStrong.
    • Renamed color.text.onSelected --> color.text.onSelectedPrimary.
    • Renamed color.text.onStrong.default --> color.text.onStrong.
    • Renamed color.text.onCritical.default --> color.text.onCritical.
    • Renamed color.text.onWarning.default --> color.text.onWarning.
    • Renamed color.text.onOk.default --> color.text.onOk.
    • Renamed color.text.onInfo.default --> color.text.onInfo.
    • Renamed color.text.onUnknown.default --> color.text.onUnknown.
    • Renamed color.icon.onPrimary --> color.icon.onPrimaryStrong.
    • Renamed color.icon.onSelectedStrong --> color.icon.onSelectedPrimaryStrong.
    • Renamed color.icon.onSelected --> color.icon.onSelectedPrimary.
  • 6c11700:
    • Removed color.text.xweak, color.icon.xweak, color.text.brand, color.icon.brand.
    • Renamed enabled in component tokens to rest.
    • Removed checkbox.control.selected.disabled (use checkbox.control.disabled.rest).
    • Removed radiobutton.control.selected.disabled (use radiobutton.control.disabled.rest).
    • Removed dataCell.primary.disabled (use dataCell.disabled.rest).
    • Restructured Anchor token structure from anchor.[size].default to anchor.default.[size] in alignment with button token structure.
  • f9c30cc:
    • Updated borderWidth scale values (and removed unused value of xlarge).
    • Removed incorrect dataCell.pinned.rest.backgroundColor in favor of existing dataCell.pinned.rest.background.
  • 2b30ef4:
    • Changed ESM/CommonJS exports to resolve to CSS variables rather than raw values.
    • Changed structure of "color" exports to flatten color name after the category (e.g., hpe.color.background.selected.weak --> hpe.color.background['selected-weak']).
  • a334ab2: - Removed "!" namespaced decorative colors (e.g., hpe.color.decorative.green!).
  • 38aad17: - Removed component-specific focus tokens in favor of relying on global focusIndicator tokens.
  • c376a85:
    • Removed fontStack.code.
    • Removed display.medium.
    • Removed text.6xl, anchor.6xl.
  • 52674f0:
    • Removed formField.input.group.item.status.critical tokens.
    • Removed formField text "error" tokens for complex states, now only support error.rest, error.hover, error.focus.
    • Renamed formField "enabled" tokens to "rest".
    • Renamed formField "status.critical" tokens to "error.rest".
    • Renamed formField "disabled" tokens to "disabled.rest".
    • Renamed formField "readOnly" tokens to "readOnly.rest".
    • Renamed base.static tokens to static.
  • c3982ea: - Renamed default dimension mode from "medium" to "default".
  • dc6b0f3:
    • Renamed size.icon[t-shirt size] to icon[t-shirt size].size (e.g., size.icon.xsmall --> icon.xsmall.size).
    • Renamed size.container[t-shirt size] to container[t-shirt size] (e.g., size.container.medium --> container.medium).
    • Renamed all default component tokens to include "default" namespace (e.g., checkbox.control.rest.background --> checkbox.default.control.rest.background).

Added

  • 6df1814: - Added color.text.anchor, color.text.anchor.hover.
  • 083dab9:
    • Added anchor.default.xsmall tokens.
    • Added color.decorative.neutral, color.decorative.neutral.hover
  • f9c30cc: - Added iconColor for select.option states.
  • 2b30ef4: - Added new export hpe-design-tokens/grommet.
  • 11926ea: - Added iconColor tokens to formField label.
  • 38aad17: - Added drop.boxShadow.
  • 52674f0: - Added formField.input.group.container.error.rest tokens.

Updated

  • 6df1814: - Fixed color-background-screenOverlay.
  • 38aad17: - Fixed icon.info and background.info to correct values.
  • 78fb822: Fixed formField.input.group.container.enabled.background, formField.input.group.container.hover.background to color.transparent.
  • 6700928: - Fixed container token values in "small" mode to remain the same as "default" mode, in alignment with current behavior.
  • 1affdd5: - Fixed t-shirt scales and values for spacing and container tokens.
  • 11926ea:
    • Fixed switch.medium.label.lineHeight.
    • Fixed formField.input.group.container.error.rest.borderColor.
    • Fixed formField.input.group.container.disabled.rest.background.
    • Fixed formField.help.disabled.rest.textColor.
    • Fixed base.color.grey.1000 which is used by light mode for color.text.strong.
  • e3bf8e6: - Fixed shadow.small dimension and shadow.large dark mode color.
Assets 2
Loading