@alza/design-system-gen
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