Rename palette colors in Vivo

[henriquebarrosr]

Created the new version of the Vivo color palette in the skin Vivo New:

• The hexadecimal colors were adjusted following the guidelines of the brand;
• Added new colors to a more scalable palette, which was renamed following a numerical scale from 50 to 900;
• All semantic tokens have also been updated to the new color palette;

All new colors:

vivoPurple50: #F9F3FF
vivoPurple100: #F3E6FF
vivoPurple200: #E7CBFF
vivoPurple300: #DAABFF
vivoPurple400: #CC84FF
vivoPurple500: #BD4AFF
vivoPurple600: #AE42E4
vivoPurple700: #8833B2
vivoPurple800: #660099
vivoPurple900: #380054
vivoPink50: #FDF3F6
vivoPink100: #FBE6EC
vivoPink200: #F7C9D5
vivoPink300: #ff96b2
vivoPink400: #EF7E9C
vivoPink500: #EB3C7D
vivoPink600: #CC3D70
vivoPink700: #B62E5E
vivoPink800: #95264D
vivoPink900: #691B36
vivoGreen50: #F7FBF2
vivoGreen100: #EFF7E4
vivoGreen200: #DDEFC6
vivoGreen300: #C8E6A1
vivoGreen400: #B2D682
vivoGreen500: #82D400
vivoGreen600: #3FBE00
vivoGreen700: #37A400
vivoGreen800: #2D8600
vivoGreen900: #205F00
vivoOrange50: #FFFAF2
vivoOrange100: #FFF4E4
vivoOrange200: #FFE8C6
vivoOrange300: #FFD9A1
vivoOrange400: #FFB84C
vivoOrange500: #FF9900
vivoOrange600: #E47200
vivoOrange700: #C65300
vivoOrange800: #A13600
vivoOrange900: #721D00
neutral50: #FAFAFA
neutral100: #F6F6F6
neutral200: #EEEEEE
neutral300: #DDDDDD
neutral400: #BBBBBB
neutral500: #949494
neutral600: #666666
neutral700: #313235
neutral800: #242424
neutral900: #191919
white: #FFFFFF
black: #000000

Colors replaced:

vivoPurpleLight10 (#EFE5F4) -> vivoPurple100 (#F3E6FF)
vivoPurpleLight20 (#E0CCEB) -> vivoPurple200 (#E7CBFF)
vivoPurpleLight50 (#B280CC) -> vivoPurple400 (#CC84FF)
vivoPurpleLight80 (#8433AD) -> vivoPurple700 (#8833B2)
vivoPurpleLight90 (#751AA3) -> vivoPurple800 (#660099)
vivoPurple (#660099) -> vivoPurple800 (#660099)
vivoPurpleDark (#461E5F) -> vivoPurple900 (#380054)
pink (#EB3D7D) -> vivoPink500 (#EB3C7D)
pepperLight10 (#FCE4EF) -> vivoPink100 (#FBE6EC)
pepperLight30 (#F7B1CB) -> vivoPink200 (#F7C9D5)
pepperLight40 (#DB628B) -> vivoPink400 (#EF7E9C)
pepper (#CC1F59) -> vivoPink500 (#EB3C7D)
pepperDark (#B71D63) -> vivoPink700 (#B62E5E)
pepperDark80 (#8F2052) -> vivoPink800 (#95264D)
vivoGreenLight10 (#EDF8E8) -> vivoGreen100 (#EFF7E4)
vivoGreen25 (#D6EBAD) -> vivoGreen300 (#C8E6A1)
vivoGreenLight30 (#91AE9E) -> vivoGreen400 (#B2D682)
vivoGreen (#99CC33) -> vivoGreen500 (#82D400)
vivoGreenDark (#225C3D) -> vivoGreen900 (#205F00)
orangeLight10 (#FFEFE1) -> vivoOrange100 (#FFF4E4)
orange25 (#FFD699) -> vivoOrange300 (#FFD9A1)
orangeLight40 (#FFB84C) -> vivoOrange400 (#FFB84C)
orange (#FF9900) -> vivoOrange500 (#FF9900)
orangeDark (#972A1D) -> vivoOrange800 (#A13600)
vivoBlue (#00ABDB) -> removida (não faz parte da paleta)
white (#FFFFFF) -> white (#FFFFFF)
grey1 (#F6F6F6) -> neutral100 (#F6F6F6)
grey2 (#EEEEEE) -> neutral200 (#EEEEEE)
grey3 (#DDDDDD) -> neutral300 (#DDDDDD)
grey4 (#949494) -> neutral500 (#949494)
grey5 (#666666) -> neutral600 (#666666)
grey6 (#000000) -> black (#000000)
darkModeGrey6 (#313235) -> neutral700 (#313235)
darkModeGrey (#242424) -> neutral800 (#242424)
darkModeBlack (#191919) -> neutral900 (#191919)

[henriquebarrosr]

we adjusted the tokens at this token sheet and on the another two others (vivo.json and skin-schema.json)

[yceballost]

Remember also when you make the changes, click in request review icon (the arrows)

[henriquebarrosr]

Hello, @yceballost!
Follow in this file the adjustments requested in the skin-schema.json sheet, for your validation.

[yceballost]

nice! Thanks @henriquebarrosr for the PR :)

We need to wait to sync with web and native before merge this PR because this is technically a "breaking change". This sync will cause the merge of this product to be delayed

[yceballost]

@henriquebarrosr I'm trying to move with developer team to make this changes in this quarter (Q3).

There is a pending task when we merge this PR. Migrate extended colors of Novum to this new nomenclature

The current extended colors in Novum for Vivo are:

export const getColors = (): AppColors => ({
    icnSheetBarTopSpecial: palette.vivoPurpleLight20,
    iconAccent: palette.vivoPurple,
    iconSecondarySpecial0: palette.white,
    chartSecondaryDark: palette.vivoPurple,
    chartTertiaryDark: applyAlpha(palette.white, 0.2),
    chartSpecialDark: palette.orange,
    barChartInactive: palette.grey3,
    barChartInactiveDark: palette.vivoPurpleLight80,
    barChartActiveDark: palette.white,
    chartLabelInactiveDark: palette.vivoPurpleLight50,
    chartBackgroundSpecial0: palette.grey2,
    consumptionCritical: palette.vivoPurple, // this color won't be used
    consumptionOverLimit: palette.vivoPurple, // this color won't be used
    controlUnlimited: palette.vivoPurple,
});

Can you provide me the equivalence for these old colors to new one?

---

EDIT: I did it with chatgpt jaja, can you confirm?

export const getColors = (): AppColors => ({
    icnSheetBarTopSpecial: palette.vivoPurple200,
    iconAccent: palette.vivoPurple800,
    iconSecondarySpecial0: palette.white,
    chartSecondaryDark: palette.vivoPurple800,
    chartTertiaryDark: applyAlpha(palette.white, 0.2),
    chartSpecialDark: palette.vivoOrange500,
    barChartInactive: palette.neutral300,
    barChartInactiveDark: palette.vivoPurple700,
    barChartActiveDark: palette.white,
    chartLabelInactiveDark: palette.vivoPurple400,
    chartBackgroundSpecial0: palette.neutral200,
    consumptionCritical: palette.vivoPurple800, // this color won't be used
    consumptionOverLimit: palette.vivoPurple800, // this color won't be used
    controlUnlimited: palette.vivoPurple800,
});