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

Color v2 updates #741

Closed
wants to merge 2 commits into from
Closed

Color v2 updates #741

wants to merge 2 commits into from

Conversation

Akatori-Design
Copy link
Contributor

Description

Light Theme Updates

// updated border default to be accessible.
	•	border.default: {grey.200} → {grey.400}
	
// linked icon to text.
	•	icon.default: {grey.900} → {text.default}
	•	icon.alternative: {grey.500} → {text.alternative}
	•	icon.muted: {grey.300} → {text.muted}

// added 3 new colors
	•	background-muted: New → {grey.050}
	•	background-muted-hover: New → #E7EBEE
	•	background-muted-pressed: New → #DBE0E6

// Updated most descriptions to match the latest in Figma
	•	see all descriptions

Dark Theme Updates

// updated default & alternative to be darker.
	•	background-default: {grey.800} → {grey.900}
	•	background-alternative: {grey.900} → {grey.1000}

	
// updated hover & pressed to follow 
	•	background-default-hover: #313235 → #1E2124
	•	background-default-pressed: #3F4145 → #272B2F

	
	•	background-alternative-hover: #1F2123 → #0A0A0A
	•	background-alternative-pressed: #2E3033 → #141414

	
// updated border to match light theme contrast level
	•	border.default: {grey.400} → {grey.500}

	
// Adjusting dark mode contrast against updated background colors, and to match contrast level w light theme.
	•	text.alternative: {grey.200} → {grey.300}
	•	text.muted: {grey.400} → {grey.500}


// linked icon to text
	•	icon.default: {grey.000} → {text.default}
	•	icon.alternative: {grey.300} → {text.alternative}
	•	icon.muted: {grey.500} → {text.muted}

// added 3 new colors
	•	background-muted: New → {grey.800}
	•	background-muted-hover: New → #2D3034
	•	background-muted-pressed: New → #363B3F

// Updated most descriptions to match the latest in Figma
	•	see all descriptions

DARK THEME UPDATES:
- background color updates
- background new colors
- text, icon, border color updates.
- general description updates.
Light Theme Updates

	•	border.default: {grey.200} → {grey.400}

	•	icon.default: {grey.900} → {text.default}
	•	icon.alternative: {grey.500} → {text.alternative}
	•	icon.muted: {grey.300} → {text.muted}

	•	background-muted: New → {grey.050}
	•	background-muted-hover: New → #E7EBEE
	•	background-muted-pressed: New → #DBE0E6

Dark Theme Updates

	•	background-default: {grey.800} → {grey.900}
	•	background-alternative: {grey.900} → {grey.1000}

	•	background-default-hover: #313235 → #1E2124
	•	background-default-pressed: #3F4145 → #272B2F

	•	background-alternative-hover: #1F2123 → #0A0A0A
	•	background-alternative-pressed: #2E3033 → #141414

	•	border.default: {grey.400} → {grey.500}

	•	text.alternative: {grey.200} → {grey.300}
	•	text.muted: {grey.400} → {grey.500}

	•	icon.default: {grey.000} → {text.default}
	•	icon.alternative: {grey.300} → {text.alternative}
	•	icon.muted: {grey.500} → {text.muted}

	•	background-muted: New → {grey.800}
	•	background-muted-hover: New → #2D3034
	•	background-muted-pressed: New → #363B3F

Also most descriptions were updated to the latest.
@Akatori-Design Akatori-Design added color Tokens related to color team-design-system All issues relating to design system labels Nov 7, 2024
@Akatori-Design Akatori-Design requested a review from a team as a code owner November 7, 2024 00:21
Copy link
Collaborator

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

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

This looks awesome @Akatori-Design, we just need to run the automations and wait for this repo to be migrated to the monorepo and we can merge it there

@georgewrmarshall
Copy link
Collaborator

georgewrmarshall commented Nov 26, 2024

This library has now been migrated into the metamask-design-system. This PR has been locked and this repo will be archived shortly. Going forward, releases of this library will only include changes made in the metamask module template.

  • Please push this branch to metamask design system and open a new PR there.
  • Optionally, add a link pointing to the discussion in this PR to provide context.

@MetaMask MetaMask locked and limited conversation to collaborators Nov 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
color Tokens related to color team-design-system All issues relating to design system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants