Skip to Content
Theme GenChangelog

@alza/design-system-gen

0.1.3

Patch Changes

PathFromTo
basic.neutral[400]#B3B3B3#A7A7A7
basic.neutral[500]#757575#6E6E6E
basic.neutral[700]#333333#242424
basic.neutral[800]#1A1A1A#121212
basic.blueDark[300]#B2C3E5#91B7FF
basic.blueDark[400]#8BA3D1#6696E0
basic.blueDark[500]#6482BC#4B7CD1
basic.blueDark[600]#3D62A8#3163C2
basic.orange[900]#663000#472100

Added semantic colors

PathLightDark
texts.text.bodyPlaceholderbasicColors.neutral[400]basicColors.neutral[400]

Changed semantic colors

PathFromTo
texts.text.bodyDisabled.lightbasicColors.neutral[500]basicColors.neutral[400]
borders.border.neutral.dark.valuebasicColors.neutral[900]basicColors.neutral[0]
account.bronze.lightbasicColors.orange[800]basicColors.orange[700]

Renamed semantic colors

FromTo
texts.text.headlinePositivetexts.text.headlineGreen
texts.text.headlineWarningtexts.text.headlineOrange
texts.text.headlineNegativetexts.text.headlineRed
texts.text.bodyPositivetexts.text.bodyGreen
texts.text.bodyWarningtexts.text.bodyOrange
texts.text.bodyNegativetexts.text.bodyRed

Changed theme generator output

TypeScript
  • semantic colors now use CSS variable references with a light-dark(...) fallback (for light-dark polyfill compatibility).
  • theme now adds /** ... */ comments above basic and semantic color properties so hex values are visible on hover.

0.1.1

Patch Changes

Added basic palette

PathValue
basic.steel[100]#F1F3F5
basic.steel[200]#DDE1E7
basic.steel[300]#BEC6D1
basic.steel[400]#9EABBC
basic.steel[500]#7A8AA1
basic.steel[600]#344661
basic.steel[700]#29374D
basic.steel[800]#212C3D
basic.steel[900]#161D29

Added semantic colors

PathLightDark
borders.border.alzaPlusbasicColors.orange[600]basicColors.orange[800]
backgrounds.background.alzaPlusbasicColors.orange[600]basicColors.orange[600]
backgrounds.background.alzaPlusLightbasicColors.orange[100]basicColors.orange[900]
account.bronzebasicColors.orange[800]#E1B100
account.silverbasicColors.neutral[600]#E1B100
account.goldbasicColors.yellow[700]#E1B100
account.benefitbasicColors.blueDark[700]basicColors.blueDark[300]
account.b2bbasicColors.b2b[600]#E1B100
account.isicbasicColors.b2b[600]#E1B100
account.alzaPlusbasicColors.orange[600]basicColors.orange[600]
account.alzaPremiumbasicColors.red[700]#E1B100

Changed semantic colors

PathFromTo
texts.text.headlineNeutral.darkbasicColors.neutral[800]basicColors.neutral[0]
texts.text.headlineNeutralOnDark.darkbasicColors.neutral[0]basicColors.neutral[900]
texts.text.headlinePositive.darkbasicColors.green[800]basicColors.green[600]
texts.text.headlineNegative.darkbasicColors.red[600]#E1B100
texts.text.bodyNeutral.darkbasicColors.neutral[700]basicColors.neutral[200]
texts.text.bodyAdditional.darkbasicColors.neutral[500]basicColors.neutral[400]
texts.text.bodyDisabled.darkbasicColors.neutral[500]#E1B100
texts.text.bodyPositive.darkbasicColors.green[800]basicColors.green[600]
texts.text.bodyWarning.darkbasicColors.orange[600]#E1B100
texts.text.bodyNegative.darkbasicColors.red[600]#E1B100
texts.text.bodyCurrentPrice.darkbasicColors.red[600]basicColors.red[400]
texts.text.bodyOriginalPrice.darkbasicColors.neutral[500]basicColors.neutral[400]
links.link.primary.darkbasicColors.blueDark[700]basicColors.blueDark[300]
borders.border.brand.darkbasicColors.blueDark[200]basicColors.steel[600]
borders.border.positive.darkbasicColors.green[300]#E1B100
borders.border.warning.darkbasicColors.yellow[400]basicColors.yellow[700]
borders.border.negative.darkbasicColors.red[300]#E1B100
borders.border.focused.lightbasicColors.blueDark[700]basicColors.blueDark[600]
borders.border.focused.darkbasicColors.blueDark[700]basicColors.blueDark[300]
borders.border.selected.darkbasicColors.blueDark[700]basicColors.blueDark[300]
backgrounds.background.primary.darkbasicColors.neutral[0]basicColors.neutral[700]
backgrounds.background.secondary.darkbasicColors.neutral[100]basicColors.neutral[800]
backgrounds.background.tertiary.darkbasicColors.neutral[200]basicColors.neutral[900]
backgrounds.background.dark.darkbasicColors.neutral[800]#E1B100
backgrounds.background.disabled.darkbasicColors.neutral[200]#E1B100
backgrounds.background.selected.lightbasicColors.blueLight[200]basicColors.blueDark[100]
backgrounds.background.selected.darkbasicColors.blueLight[200]basicColors.blueDark[900]
backgrounds.background.dialog.light.opacity7580
backgrounds.background.dialog.dark.opacity7590
backgrounds.background.positiveLight.darkbasicColors.green[100]basicColors.green[900]
backgrounds.background.positiveDark.lightbasicColors.green[500]basicColors.green[600]
backgrounds.background.positiveDark.darkbasicColors.green[500]basicColors.green[600]
backgrounds.background.negativeLight.darkbasicColors.red[100]#E1B100
backgrounds.background.warningLight.darkbasicColors.yellow[100]basicColors.yellow[800]
backgrounds.background.warningDark.darkbasicColors.yellow[300]#E1B100
backgrounds.background.brandLight.lightbasicColors.blueDark[100]basicColors.blueDark[200]
backgrounds.background.brandLight.darkbasicColors.blueDark[100]basicColors.steel[700]
backgrounds.background.brandDark.darkbasicColors.blueDark[700]basicColors.blueDark[300]
availability.inStock.darkbasicColors.green[800]basicColors.green[600]
availability.forOrder.darkbasicColors.blueDark[700]basicColors.blueDark[300]

Removed semantic colors

PathFromTo
special.goldbasicColors.yellow[300]removed
special.silverbasicColors.neutral[300]removed
special.bronzebasicColors.orange[400]removed
special.b2bbasicColors.b2b[500]removed
special.benefitbasicColors.blueDark[300]removed
special.isicbasicColors.b2b[500]removed
Last updated on