Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Adding shadows to design tokens #137

Merged
merged 8 commits into from
Jun 24, 2022
Merged

Adding shadows to design tokens #137

merged 8 commits into from
Jun 24, 2022

Conversation

georgewrmarshall
Copy link
Collaborator

@georgewrmarshall georgewrmarshall commented May 11, 2022

Description

Adding shadows to design tokens.

The main architecture decisions for shadow tokens is to split up the size(x,y,blur,spread) and colors(neutral, primary, error/danger)

This adds 3 new colors to the colors:

  • shadow/default
  • primary/shadow
  • error/shadow

Screenshots

shadow

References

https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/DS-Colors-%26-Shadows-%2F-Light-Theme?node-id=753%3A801
https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/DS-Colors-%26-Shadows-%2F-Dark-Theme?node-id=522%3A1022

@georgewrmarshall georgewrmarshall added color Tokens related to color shadow labels May 11, 2022
@metamaskbot
Copy link
Collaborator

Builds ready [f662993]

@metamaskbot
Copy link
Collaborator

Builds ready [a59dd02]

@metamaskbot
Copy link
Collaborator

Builds ready [0aed8db]

@georgewrmarshall georgewrmarshall marked this pull request as ready for review May 12, 2022 00:26
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner May 12, 2022 00:26
@georgewrmarshall georgewrmarshall requested a review from Cal-L May 12, 2022 00:27
@metamaskbot
Copy link
Collaborator

Builds ready [465862f]

@metamaskbot
Copy link
Collaborator

Builds ready [9abf171]

src/js/colors/colors.ts Outdated Show resolved Hide resolved
docs/Shadows.mdx Outdated Show resolved Hide resolved
@georgewrmarshall georgewrmarshall self-assigned this May 20, 2022
@georgewrmarshall georgewrmarshall added the code Issue related to code work label May 20, 2022
@metamaskbot
Copy link
Collaborator

Builds ready [415cd4f]

@georgewrmarshall georgewrmarshall requested a review from Cal-L June 21, 2022 23:23
@metamaskbot
Copy link
Collaborator

Builds ready [c2597fd]

@metamaskbot
Copy link
Collaborator

Builds ready [e29bded]

Cal-L
Cal-L previously approved these changes Jun 23, 2022
Copy link
Collaborator

@Cal-L Cal-L left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

<Story id="shadows-shadows--size" />
</Canvas>

| Size | JS | CSS |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these token sizes and colors align in figma?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great question these should align with the tokens in Figma yes. I think Figma library is currently out of date @Akatori-Design

docs/Shadows.mdx Outdated Show resolved Hide resolved
docs/Shadows.stories.tsx Show resolved Hide resolved
docs/components/Text/Text.tsx Show resolved Hide resolved
@metamaskbot
Copy link
Collaborator

Builds ready [c55bf5a]

@georgewrmarshall georgewrmarshall requested review from Cal-L and removed request for Cal-L June 23, 2022 23:35
@metamaskbot
Copy link
Collaborator

Builds ready [526d538]

@metamaskbot
Copy link
Collaborator

Builds ready [e2538d7]

@metamaskbot
Copy link
Collaborator

Builds ready [e26f734]

Copy link
Collaborator

@Cal-L Cal-L left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@georgewrmarshall georgewrmarshall merged commit 1ee2005 into main Jun 24, 2022
@georgewrmarshall georgewrmarshall deleted the add/shadows branch June 24, 2022 00:03
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
code Issue related to code work color Tokens related to color shadow
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants