displayCardGradient token

[aweell]

Description

With the new brand definition O2 will start using a different colors in the display card gradients. In order to keep the definition i all brands but o2 we need to tokenize the gradient.

The current definition:

linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 29.02%, rgba(0, 0, 0, 0.7) 100%)

The new o2 definition (WIP in https://github.com/Telefonica/mistica-design/issues/1689):

linear-gradient(180deg, rgba(0, 80, 255, 0) 0%, rgba(0, 80, 255, 0.6) 29.02%, rgba(0, 80, 255, 1) 100%)

With the new gradient definition:

"cardContentOverlay": {
    "type": "linear-gradient",
    "value": {
        "angle": 180,
        "colors": [
            {"value": "rgba({palette.beyondBlue}, 0)", "stop": 0},
            {"value": "rgba({palette.beyondBlue}, 0.4)", "stop": 0.3},
            {"value": "rgba({palette.beyondBlue}, 0.7)", "stop": 1},
        ],
    },
    "description": "beyondBlue"
},

Tasks

• [x] Update specs
• [x] Update brand libraries
• [x] Add to mobile library
• [x] Add to desktop library
• [ ] Add to UI Kit
• [ ] Android ticket
• [ ] iOS ticket
• [x] Web ticket

[yceballost]

0.29 could be 0.3 to round this number...? 😬

[aweell]

Yes, i donno why is 29.02% in production