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

Color v2 updates#741

Closed
Akatori-Design wants to merge 2 commits into
mainfrom
color-v2-updates
Closed

Color v2 updates#741
Akatori-Design wants to merge 2 commits into
mainfrom
color-v2-updates

Conversation

@Akatori-Design

Copy link
Copy Markdown
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 November 7, 2024 00:21

@georgewrmarshall georgewrmarshall left a comment

Copy link
Copy Markdown
Collaborator

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

georgewrmarshall commented Nov 26, 2024

Copy link
Copy Markdown
Collaborator

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