@alza/design-system-gen
0.1.3
Patch Changes
| Path | From | To |
|---|---|---|
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
| Path | Light | Dark |
|---|---|---|
texts.text.bodyPlaceholder | basicColors.neutral[400] | basicColors.neutral[400] |
Changed semantic colors
| Path | From | To |
|---|---|---|
texts.text.bodyDisabled.light | basicColors.neutral[500] | basicColors.neutral[400] |
borders.border.neutral.dark.value | basicColors.neutral[900] | basicColors.neutral[0] |
account.bronze.light | basicColors.orange[800] | basicColors.orange[700] |
Renamed semantic colors
| From | To |
|---|---|
texts.text.headlinePositive | texts.text.headlineGreen |
texts.text.headlineWarning | texts.text.headlineOrange |
texts.text.headlineNegative | texts.text.headlineRed |
texts.text.bodyPositive | texts.text.bodyGreen |
texts.text.bodyWarning | texts.text.bodyOrange |
texts.text.bodyNegative | texts.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
| Path | Value |
|---|---|
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
| Path | Light | Dark |
|---|---|---|
borders.border.alzaPlus | basicColors.orange[600] | basicColors.orange[800] |
backgrounds.background.alzaPlus | basicColors.orange[600] | basicColors.orange[600] |
backgrounds.background.alzaPlusLight | basicColors.orange[100] | basicColors.orange[900] |
account.bronze | basicColors.orange[800] | #E1B100 |
account.silver | basicColors.neutral[600] | #E1B100 |
account.gold | basicColors.yellow[700] | #E1B100 |
account.benefit | basicColors.blueDark[700] | basicColors.blueDark[300] |
account.b2b | basicColors.b2b[600] | #E1B100 |
account.isic | basicColors.b2b[600] | #E1B100 |
account.alzaPlus | basicColors.orange[600] | basicColors.orange[600] |
account.alzaPremium | basicColors.red[700] | #E1B100 |
Changed semantic colors
| Path | From | To |
|---|---|---|
texts.text.headlineNeutral.dark | basicColors.neutral[800] | basicColors.neutral[0] |
texts.text.headlineNeutralOnDark.dark | basicColors.neutral[0] | basicColors.neutral[900] |
texts.text.headlinePositive.dark | basicColors.green[800] | basicColors.green[600] |
texts.text.headlineNegative.dark | basicColors.red[600] | #E1B100 |
texts.text.bodyNeutral.dark | basicColors.neutral[700] | basicColors.neutral[200] |
texts.text.bodyAdditional.dark | basicColors.neutral[500] | basicColors.neutral[400] |
texts.text.bodyDisabled.dark | basicColors.neutral[500] | #E1B100 |
texts.text.bodyPositive.dark | basicColors.green[800] | basicColors.green[600] |
texts.text.bodyWarning.dark | basicColors.orange[600] | #E1B100 |
texts.text.bodyNegative.dark | basicColors.red[600] | #E1B100 |
texts.text.bodyCurrentPrice.dark | basicColors.red[600] | basicColors.red[400] |
texts.text.bodyOriginalPrice.dark | basicColors.neutral[500] | basicColors.neutral[400] |
links.link.primary.dark | basicColors.blueDark[700] | basicColors.blueDark[300] |
borders.border.brand.dark | basicColors.blueDark[200] | basicColors.steel[600] |
borders.border.positive.dark | basicColors.green[300] | #E1B100 |
borders.border.warning.dark | basicColors.yellow[400] | basicColors.yellow[700] |
borders.border.negative.dark | basicColors.red[300] | #E1B100 |
borders.border.focused.light | basicColors.blueDark[700] | basicColors.blueDark[600] |
borders.border.focused.dark | basicColors.blueDark[700] | basicColors.blueDark[300] |
borders.border.selected.dark | basicColors.blueDark[700] | basicColors.blueDark[300] |
backgrounds.background.primary.dark | basicColors.neutral[0] | basicColors.neutral[700] |
backgrounds.background.secondary.dark | basicColors.neutral[100] | basicColors.neutral[800] |
backgrounds.background.tertiary.dark | basicColors.neutral[200] | basicColors.neutral[900] |
backgrounds.background.dark.dark | basicColors.neutral[800] | #E1B100 |
backgrounds.background.disabled.dark | basicColors.neutral[200] | #E1B100 |
backgrounds.background.selected.light | basicColors.blueLight[200] | basicColors.blueDark[100] |
backgrounds.background.selected.dark | basicColors.blueLight[200] | basicColors.blueDark[900] |
backgrounds.background.dialog.light.opacity | 75 | 80 |
backgrounds.background.dialog.dark.opacity | 75 | 90 |
backgrounds.background.positiveLight.dark | basicColors.green[100] | basicColors.green[900] |
backgrounds.background.positiveDark.light | basicColors.green[500] | basicColors.green[600] |
backgrounds.background.positiveDark.dark | basicColors.green[500] | basicColors.green[600] |
backgrounds.background.negativeLight.dark | basicColors.red[100] | #E1B100 |
backgrounds.background.warningLight.dark | basicColors.yellow[100] | basicColors.yellow[800] |
backgrounds.background.warningDark.dark | basicColors.yellow[300] | #E1B100 |
backgrounds.background.brandLight.light | basicColors.blueDark[100] | basicColors.blueDark[200] |
backgrounds.background.brandLight.dark | basicColors.blueDark[100] | basicColors.steel[700] |
backgrounds.background.brandDark.dark | basicColors.blueDark[700] | basicColors.blueDark[300] |
availability.inStock.dark | basicColors.green[800] | basicColors.green[600] |
availability.forOrder.dark | basicColors.blueDark[700] | basicColors.blueDark[300] |
Removed semantic colors
| Path | From | To |
|---|---|---|
special.gold | basicColors.yellow[300] | removed |
special.silver | basicColors.neutral[300] | removed |
special.bronze | basicColors.orange[400] | removed |
special.b2b | basicColors.b2b[500] | removed |
special.benefit | basicColors.blueDark[300] | removed |
special.isic | basicColors.b2b[500] | removed |
Last updated on