[email protected]

Breaking changes

• #4447 e601f2a: Renamed size.content to size.container, base.static.content to base.static.container
• #4448 133aa8f: Removed paragraph tokens, moved paragraph.[size].maxWidth tokens text.[size].maxWidth

Updated

• #4469 1117f91: Updated dark and light mode of color.background.primary.hover, updated dark mode of color.decorative.brand

[email protected]

• Fixed CSS output for dimension.medium.css by removing incorrect media query introduced in v0.5.0.

[email protected]

Breaking changes

component.default.json

• Restructured button.[t-shirt size].[kind] to button.[kind].[t-shirt size] (e.g., button.medium.primary.paddingY —> button.primary.medium.paddingY)

The reason for this restructuring is for the token namespace/architecture to lead with “function” and follow with “form”:

• generic function = UI control (e.g., button)
• specific function = Variant of the control tailored to the use-case (e.g., button.primary)
• style = State context (e.g., button.primary.enabled.background) + dimension context (e.g., button.primary.medium.paddingY)

component.default.json

• Removed switch.medium.width (use switch.medium.control.track.width)
• Removed switch.medium.height (use switch.medium.control.track.height)
• Removed switch.medium.borderRadius (use switch.medium.control.track.borderRadius)
• Removed switch.medium.borderWidth (use switch.medium.control.track.borderWidth)

color.light.json, color.dark.json

• Removed color.shadow.weak (use shadow.small for full shadow style)
• Removed color.shadow.default (use shadow.medium for full shadow style)
• Removed color.shadow.strong (use shadow.large for full shadow style)

Added

color.light.json, color.dark.json

• color.decorative.brand

global.default.json

• focusIndicator.outlineOffset
• focusIndicator.boxShadow

Updated

color.light.json

• color.background.unknown from base.color.grey.50 to base.color.black.opacity4

color.dark.json

• color.background.unknown from base.color.grey.1200 to base.color.white.opacity6

[email protected]

Added

color.light.json, color.dark.json

• ec8f38d - color.border.critical, color.border.info, color.border.ok, color.border.warning, color.border.unknown
• 0bf081b - color.background.neutral.xstrong

component.default.json

• 96c0d71
  • formField.medium.input.group.item.textToIconX
  • formField.medium.input.group.item.textToElementX
  • formField.medium.input.container.textToIconX
  • formField.medium.input.container.textToElementX

Updated

component.default.json

• 740101a - Button tokens to use element tokens and static sizing
• 86db503 - Drop tokens to use static sizing
• 8526d51 - Menu tokens to use static sizing and color.transparent
• a898dec - Select tokens to use static sizing and color.transparent
• 74c508e - Checkbox and switch tokens to use base.dimension tokens instead of lineHeight, checkbox.enabled.background, and checkbox.hover.background
• 64b7fb9 - dataCell, headerCell, and footerCell tokens to use color.transparent, also fixed some incorrectly mapped textColor tokens
• 0c40456 - formField tokens to use color.transparent and formField.error.[state].textColor to use color.text.critical
• d171ce5 - radioButton tokens to use color.transparent and base.dimension tokens instead of lineHeight

[email protected]

Breaking changes

dimension.large.json has been renamed to dimension.medium.json, meaning large export is now medium.

For CSS:

- hpe-design-tokens/dist/css/dimension.large.css
+ hpe-design-tokens/dist/css/dimension.medium.css

For ESM:

- import { large } from 'hpe-design-tokens';
+ import { medium } from 'hpe-design-tokens';

...

- large.hpe.spacing.medium
+ medium.hpe.spacing.medium

For CJS:

- const { large } = require('hpe-design-tokens');
+ const { large } = require('hpe-design-tokens');

...

- large.hpe.spacing.medium
+ medium.hpe.spacing.medium

color.light.json, color.dark.json

• Renamed color.background.overlay to color.background.screenOverlay
• Renamed background.status.[statusKind] to background.[statusKind] (e.g., background.status.info —> background.info)
• Renamed color.icon.status.[statusKind] to color.icon.[statusKind] (e.g., color.icon.status.info —> color.icon.info)
• Renamed elevation tokens to shadow (e.g., elevation.small —> shadow.small)
• Removed color.text.inverse.default
• Removed Weak DataVis colors (e.g., color.dataVis.20Weak)

element.default.json

• Renamed component tokens to element tokens (eg., component.medium.fontSize —> element.medium.fontSize)

component.default.json

• Renamed formField valueText tokens to value (e.g., formField.valueText.enabled.textColor --> formField.value.enabled.textColor)
• Renamed formField placeholderText tokens to placeholder (e.g., formField.placeholderText.enabled.textColor --> formField.placeholder.enabled.textColor)
• Renamed formField errorText tokens to error (e.g., formField.errorText.enabled.textColor --> formField.error.enabled.textColor)
• Renamed formField labelText tokens to label (e.g., formField.labelText.enabled.textColor --> formField.label.enabled.textColor)
• Renamed formField infoText tokens to info (e.g., formField.infoText.enabled.textColor --> formField.info.enabled.textColor)
• Renamed formField helpText tokens to help (e.g., formField.helpText.enabled.textColor --> formField.help.enabled.textColor)
• Removed Anchor emphasized tokens

primitive.base.json

• Removed base.color.dataVis.green1000
• Removed base.color.dataVis.green325
• Removed base.color.dataVis.green3250opacity50
• Removed base.color.dataVis.pink1000
• Removed base.color.dataVis.pink325
• Removed base.color.dataVis.pink325-opacity50
• Removed base.color.dataVis.purple1000
• Removed base.color.dataVis.purple325
• Removed base.color.dataVis.purple325-opacity50
• Removed base.color.dataVis.blue1000
• Removed base.color.dataVis.blue325
• Removed base.color.dataVis.blue325-opacity50

Added

component.default.json

• button.[t-shirt size].[kind].iconOnly.minWidth (e.g., button.medium.primary.iconOnly.minWidth)
• formField.error.status.critical.iconColor

Updated

color.light.json

• color.dataVis.categorical.80 from base.color.dataVis.blue325 to base.color.dataVis.grape1

devDependencies

• style-dictionary from ^3.9.2 to ^4.2.0
• style-dictionary-utils from ^2.0.7 to ^3.0.0

[email protected]

Added

primitive.base.json

• base.static.radius.full
• base.dimensions.350
• color.dataVis.green1
• color.dataVis.darkblue1
• color.dataVis.purple1
• color.dataVis.gold1
• color.dataVis.lightblue1
• color.dataVis.pink1
• color.dataVis.blue1
• color.dataVis.grape1
• color.dataVis.darkblue2
• color.dataVis.purple2
• color.dataVis.gold2
• color.dataVis.lightblue2
• color.dataVis.pink2
• color.dataVis.blue2
• color.dataVis.purple3
• color.green.650
• color.grey.600
• color.orange.600
• color.red.600

color.light.json, color.dark.json

• color.background.selected.strong.hover
• color.foreground.primary
• color.foreground.critical
• color.foreground.warning
• color.foreground.unknown
• color.foreground.primary
• color.text.critical
• color.text.warning
• color.text.info
• color.text.ok
• color.text.unknown
• color.text.onCritical.default
• color.text.onCritical.strong
• color.text.onWarning.default
• color.text.onWarning.strong
• color.text.onOk.default
• color.text.onOk.strong
• color.text.onWarning.default
• color.text.onWarning.strong
• color.text.onInfo.default
• color.text.onInfo.strong
• color.text.onUnknown.default
• color.text.onUnknown.strong
• color.text.onStrong

component.default.json

• button.xsmall tokens
• component.xsmall.icon.size
• component.small.icon.size
• component.medium.icon.size
• component.large.icon.size
• component.xlarge.icon.size
• dataCell.enabled.iconColor
• dataCell.hover.iconColor
• dataCell.disabled.iconColor
• dataCell.pinned.iconColor
• dataCell.primary.enabled.iconColor
• dataCell.primary.hover.iconColor
• dataCell.primary.disabled.iconColor
• dataCell.primary.pinned.iconColor
• headerCell.enabled.iconColor
• headerCell.hover.iconColor
• headerCell.pinned.iconColor
• footerCell.enabled.iconColor
• footerCell.hover.iconColor
• footerCell.pinned.iconColor
• formField.errorText.enabled.iconColor
• formField.errorText.hover.iconColor
• formField.errorText.focus.iconColor
• formField.errorText.disabled.iconColor
• formField.errorText.readOnly.iconColor

Updated

dimension.large.json

• icon.xsmall from base.dimension.400 to base.dimension.350

dimension.small.json

• icon.xsmall from base.dimension.400 to base.dimension.350

color.light.json

• color.icon.status.critical from base.color.red.550 to base.color.red.600
• color.icon.status.warning from base.color.orange.400 to base.color.orange.600
• color.icon.status.ok from base.color.green.400 to base.color.green.650
• color.icon.status.unknown from base.color.grey.400 to base.color.grey.600
• color.dataVis.categorical.10. from base.color.dataVis.green1000 to base.color.dataVis.green1
• color.dataVis.categorical.20 from base.color.dataVis.green325 to base.color.dataVis.darkblue1
• color.dataVis.categorical.30 from base.color.dataVis.pink1000 to base.color.dataVis.purple1
• color.dataVis.categorical.40 from base.color.dataVis.pink325 to base.color.dataVis.purple1
• color.dataVis.categorical.50 from base.color.dataVis.purple1000 to base.color.dataVis.lightblue1
• color.dataVis.categorical.60 from base.color.dataVis.purple325 to base.color.dataVis.pink1
• color.dataVis.categorical.70 from base.color.dataVis.blue1000 to base.color.dataVis.blue1

color.dark.json

• color.icon.status.critical from base.color.red.750 to base.color.red.550
• color.icon.status.warning from base.color.orange.700 to base.color.orange.600
• color.icon.status.ok from base.color.green.700 to base.color.green.500
• color.dataVis.categorical.10. from TBD to base.color.dataVis.green1
• color.dataVis.categorical.20 from TBD to base.color.dataVis.darkblue2
• color.dataVis.categorical.30 from TBD to base.color.dataVis.gold2
• color.dataVis.categorical.40 from TBD to base.color.dataVis.purple2
• color.dataVis.categorical.50 from TBD to base.color.dataVis.lightblue2
• color.dataVis.categorical.60 from TBD to base.color.dataVis.pink2
• color.dataVis.categorical.70 from TBD to base.color.dataVis.blue2
• color.dataVis.categorical.80 from TBD to base.color.dataVis.purple3

component.default.json

• formField.label.disabled.textColor from color.text.strong to color.text.disabled
• component.xsmall.paddingX.wide from 9 to base.dimension.225 (equates to 9)
• component.small.paddingX.wide from 9 to base.static.spacing.small
• component.medium.paddingX.wide from 15 to base.dimension.450
• component.large.lineHeight from text.xlarge.lineHeight to text.large.lineHeight
• component.large.paddingY from 8 to 9
• component.large.paddingX.narrow from 9 to base.dimension.225 (equates to 9)
• component.large.paddingX.default from 18 to base.dimension.450 (equates to 18)
• component.large.paddingX.wide from 24 to base.dimension.600 (equates to 24)
• component.xlarge.fontSize from text.xlarge.lineHeight to text.xlarge.fontSize
• component.xlarge.paddingX.narrow from 16 to base.dimension.500
• component.xlarge.paddingX.default from 24 to base.dimension.600 (equates to 24)

[email protected]

We’re excited to announce the release of hpe-design-tokens v0.1.0, our first iteration of design tokens for HPE products. 🚀

Design tokens enable the delivery of a unified visual language for HPE, allowing HPE’s brand and expression to evolve and change overtime with ease and minimal impact to design and development teams.

Currently, this release is optional for all design system users. The purpose of this release is to test design tokens in preparation for the v1 release. So use them, break them, test them and let us know what works and what can be improved.

How to get started:

Read up and learn more about HPE design tokens. You’ll find an overview and docs for Using tokens in Figma and Using tokens in code. Also, you can use this handy All design tokens table to browse the HPE design token catalog.