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

Installing design tokens and writing docs in storybook #13657

Merged
merged 3 commits into from
Feb 23, 2022

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Feb 17, 2022

Fixes: #13564

Explanation: Installing @metamask/design-tokens repo and adding guidelines on how to use colors.

  • Docs could be improved by giving color swatches and descriptions I'll update this once we expose the token.json from the design-tokens repo.

Manual testing steps:

Screenshots

CSS variables available to use in styles

Screen Shot 2022-02-17 at 12 48 00 PM

Color Documentation

screencapture-localhost-6006-2022-02-23-07_15_09

@georgewrmarshall georgewrmarshall added area-documentation Issues relating to documentation, in the codebase and off. area-UI Relating to the user interface. type-story labels Feb 17, 2022
@georgewrmarshall georgewrmarshall self-assigned this Feb 17, 2022
@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Collaborator

Builds ready [61c2303]
Page Load Metrics (1150 ± 28 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint691157557497239
domContentLoaded1072128611485828
load1078128611505828
domInteractive1072128611485828

highlights:

storybook

digiwand
digiwand previously approved these changes Feb 18, 2022
Copy link
Contributor

@digiwand digiwand left a comment

Choose a reason for hiding this comment

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

⭐ ___ ⭐ This is looking awesome! I have some optional suggestions and thoughts. No blockers.

I wonder if it would be helpful to mirror this content in the @metamask/design-tokens repo

.storybook/3.COLORS.stories.mdx Outdated Show resolved Hide resolved
.storybook/3.COLORS.stories.mdx Outdated Show resolved Hide resolved
.storybook/3.COLORS.stories.mdx Show resolved Hide resolved
.storybook/3.COLORS.stories.mdx Outdated Show resolved Hide resolved
@georgewrmarshall georgewrmarshall force-pushed the feat/13564-design-token-instal-and-docs branch from a6b4fbd to bfbb6d6 Compare February 22, 2022 21:49
@georgewrmarshall georgewrmarshall marked this pull request as ready for review February 22, 2022 21:57
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner February 22, 2022 21:57
@metamaskbot
Copy link
Collaborator

Builds ready [bfbb6d6]
Page Load Metrics (1127 ± 23 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint721169508498239
domContentLoaded1058126511254924
load1058126511274923
domInteractive1058126511254924

highlights:

storybook

Copy link
Contributor

@digiwand digiwand left a comment

Choose a reason for hiding this comment

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

LGreatTM! Thanks for addressing all of my thoughts and NITs :)

@georgewrmarshall georgewrmarshall merged commit a1eaa33 into develop Feb 23, 2022
@georgewrmarshall georgewrmarshall deleted the feat/13564-design-token-instal-and-docs branch February 23, 2022 02:26
@github-actions github-actions bot locked and limited conversation to collaborators Feb 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-documentation Issues relating to documentation, in the codebase and off. area-UI Relating to the user interface. type-story
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Import color design tokens from design token library
4 participants