fix(design-tokens): update some blues, reds, and focus shadow

[TheSisb]

What changed:

Console:
    Aliases
        blue-60 —> #027BC8
        blue-90 —> #032D62
        red-60 —> #E22525
        red-90 —> #600101
    Tokens (border + background)
        primary-dark --> blue-80
        primary-darker —> blue-90
        destructive-dark --> red-80
        destructive-darker —> red-90

SG:
    Aliases
        red-90 —> #480500
    Tokens (border + background)
        primary-dark --> blue-70
        primary-darker —> blue-80
        destructive --> red-50
        destructive-darker —> red-90

Both SG and console:
    Focus outline should be 80% opacity on the primary color
        Console: rgba(blue-60, 0.8)
        SG: rgba(blue-50, 0.8)

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/twilio-dsys/paste/ixc6enf3z
🌍 Preview: https://paste-git-design-tokens-box-shadow-updates.twilio-dsys.now.sh

[two24studios]

For SendGrid, it looks like the values for color-border-primary-dark and color-border-primary-darker need to match the same values for the background-colors... you can notice the border color is a touch lighter than the background color.

color-background-primary-dark & color-border-primary-dark should map to blue-70
color-background-primary-darker & color-border-primary-darker should map to blue-80

[serifluous]

Fixes for SG:

• red-90 --> #470500

Fixes for Console:

• blue-60 --> #027AC5
• blue-90 --> #032C5E

sorry 😰

[TheSisb]

More changes because buttons looked weird:

    Focus outline should be 80% opacity on the primary color (This should be tokenized if it isn't already, and it seems like it may need to pull in the token on the button styles).
        Console: rgba(2, 123, 200, 0.8)
        SG: rgba(51, 104, 250, 0.8)
    Primary button
        On hover should use borderColors.colorBorderPrimaryDarker, backgroundColors.colorBackgroundPrimaryDarker
        On focus should use borderColors.colorBorderPrimaryDarker
        When active should use backgroundColors.colorBackgroundPrimaryDark
    Secondary button
        On hover should use textColors.colorTextLinkDarker
        On focus should use textColors.colorTextLinkDarker, borderColors.colorBorderPrimaryDarker
        When disabled should use borderColors.colorBorderPrimaryLight

[serifluous]

With the blue-60 change, the rgb value needs to change to 2, 122, 197

[TheSisb]

Good catch!

[serifluous]

This should be blue-80

[serifluous]

This should be blue-70

[serifluous]

This should be blue-70

[serifluous]

This should be blue-80