Skip to content

Define Design System Colors#9007

Merged
brad-decker merged 2 commits intodevelopfrom
colors
Jul 17, 2020
Merged

Define Design System Colors#9007
brad-decker merged 2 commits intodevelopfrom
colors

Conversation

@brad-decker
Copy link
Copy Markdown
Contributor

@brad-decker brad-decker commented Jul 15, 2020

Changes

  1. Adds a new variables folder at ui/app/css/variables
  2. Adds a new colors.scss file in said folder
  3. Moves valid color declarations from old variables file into new colors file
  4. Supplements the previously existing colors to create a full list of defined colors from the design system.
  5. Updates the import order to give precedence to the new setup
  6. Removes superfluous color declarations that are not used in the code or were duplicated.

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [6cfcc73]
Page Load Metrics (628 ± 37 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint299940189
domContentLoaded3457526267837
load3467546287837
domInteractive3457526267837

$Grey-900: #141618;

$Green-000: #f3fcf5;
$Green-100: #d6ffdf;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is listed as different in the Figma 🤔

Suggested change
$Green-100: #d6ffdf;
$Green-100: #e6f9ea;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yours matches the color used in Figma, but not the written hex code. So I guess yours is correct.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah there were a couple instances of that. We should probably move away from writing the hex value directly on the sheet and instead just use the color variable name. We can figure out the hex values by clicking the swatch

$Orange-900: #321602;

$Yellow-100: #fefcde;
$Yellow-500: #ffd33d;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The Figma uses a different color here:

Suggested change
$Yellow-500: #ffd33d;
$Yellow-500: #f66a0a;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Though the Yellow referenced in the figma is #ffd33d 🤔
I guess yours is correct here as well.

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Copy link
Copy Markdown
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

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

LGTM!

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [df56869]
Page Load Metrics (1030 ± 122 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint32332886531
domContentLoaded61214111022251121
load61414141030254122
domInteractive61214111022251121

@brad-decker brad-decker merged commit 9bf748e into develop Jul 17, 2020
@brad-decker brad-decker deleted the colors branch July 17, 2020 16:13
@brad-decker
Copy link
Copy Markdown
Contributor Author

Update fonts

2 similar comments
@brad-decker
Copy link
Copy Markdown
Contributor Author

Update fonts

@brad-decker
Copy link
Copy Markdown
Contributor Author

Update fonts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants