[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