Proper color for TableRow/zebraStyles

[rafael-sepeda]

Currently in code for rows with Zebra style we use a hardcoded color value:

const zebraStyles = (active, hover) => css`
    &:nth-child(even) {
        background-color: rgb(249, 250, 251);
    }
....

this is not good. I propose 2 options:

1. Add a new AUTHENTIC_BLUE_25 color

We can just simply add a new Brand color to our color library:

export enum Colors {
...
    AUTHENTIC_BLUE_50 = '#F1F2F4',
    AUTHENTIC_BLUE_25 = '#F9FAFB',
...

that we will use then for Zebra

const zebraStyles = (active, hover) => css`
    &:nth-child(even) {
        background-color: ${Colors.AUTHENTIC_BLUE_25};
    }
....

2. Migrate Tables to tokens

Best for this, we would still need the new brand color AUTHENTIC_BLUE_25 = '#F9FAFB' but we can do that without it and add right in the token for the color to define the color value with Alpha. Something like:

export const SemanticColors = {
    table: {
      zebraStyles: {
        backgroundSecondary: `rgba(${Colors.AUTHENTIC_BLUE_50}, 0.4)`
....

actually, this is how currently the tokens are set in the Figma Tokens file:

    "table": {
      "zebraStyles": {
        "backgroundSecondary": {
          "value": "rgba($colors.brand.authenticBlue.50, 0.4)",
          "type": "color"
        },
        "backgroundHover": {
          "value": "$colors.brand.actionBlue.100",
          "type": "color"
        },
        "backgroundActive": {
          "value": "$colors.brand.actionBlue.150",
          "type": "color"
        }
      },
      "linesStyles": {
        "backgroundHover": {
          "value": "$colors.brand.actionBlue.50",
          "type": "color"
        },
        "backgroundActive": {
          "value": "$colors.brand.actionBlue.100",
          "type": "color"
        },
...

But, probably a proper brand color as a basis for the token would be better.