Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from Nov 15, 2019

Conversation

@TheSisb
Copy link
Collaborator

TheSisb commented Nov 14, 2019

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)
@now

This comment has been minimized.

Copy link

now bot commented Nov 14, 2019

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

Copy link
Contributor

two24studios left a comment

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

@TheSisb TheSisb force-pushed the design-tokens/box-shadow-updates branch from e7236ba to d00ae31 Nov 15, 2019
@serifluous

This comment has been minimized.

Copy link
Contributor

serifluous commented Nov 15, 2019

Fixes for SG:

  • red-90 --> #470500

Fixes for Console:

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

sorry 😰

@TheSisb

This comment has been minimized.

Copy link
Collaborator Author

TheSisb commented Nov 15, 2019

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

@now now bot temporarily deployed to staging Nov 15, 2019 Inactive
## Blues transparent based on primary blue
palette-blue-60-transparent-10: "rgba(2, 123, 200, 0.1)"
palette-blue-60-transparent-20: "rgba(2, 123, 200, 0.2)"
palette-blue-60-transparent-30: "rgba(2, 123, 200, 0.3)"
palette-blue-60-transparent-40: "rgba(2, 123, 200, 0.4)"
palette-blue-60-transparent-50: "rgba(2, 123, 200, 0.5)"
palette-blue-60-transparent-60: "rgba(2, 123, 200, 0.6)"
palette-blue-60-transparent-70: "rgba(2, 123, 200, 0.7)"
palette-blue-60-transparent-80: "rgba(2, 123, 200, 0.8)"
palette-blue-60-transparent-90: "rgba(2, 123, 200, 0.9)"
palette-blue-60-transparent-100: "rgba(2, 123, 200, 1)"
Comment on lines 14 to 24

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 15, 2019

Contributor

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

This comment has been minimized.

Copy link
@TheSisb

TheSisb Nov 15, 2019

Author Collaborator

Good catch!

@@ -43,10 +43,10 @@ props:

# primary background
color-background-primary-darker:
value: "{!palette-blue-70}"
value: "{!palette-blue-90}"

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 15, 2019

Contributor

This should be blue-80

comment: Darker background for primary actions or highlights
color-background-primary-dark:
value: "{!palette-blue-60}"
value: "{!palette-blue-80}"

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 15, 2019

Contributor

This should be blue-70

@@ -31,10 +31,10 @@ props:
value: "{!palette-blue-40}"
comment: Light shade of link text to be used in interactions
color-text-link-dark:
value: "{!palette-blue-70}"
value: "{!palette-blue-80}"

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 15, 2019

Contributor

This should be blue-70

comment: Dark shade of link text to be used in interactions
color-text-link-darker:
value: "{!palette-blue-80}"
value: "{!palette-blue-90}"

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 15, 2019

Contributor

This should be blue-80

@TheSisb TheSisb merged commit 98d70cc into master Nov 15, 2019
8 checks passed
8 checks passed
Semantic Pull Request ready to be squashed
Details
ci/circleci: applitools Your tests passed on CircleCI!
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: prettier Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
now Deployment has completed
Details
scm/applitools No baseline conflicts found! (6 changes found)
Details
tests/applitools All visual tests passed! (29 tests)
Details
@TheSisb TheSisb deleted the design-tokens/box-shadow-updates branch Nov 15, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.