MetaMask / design-tokens

Design tokens to be used throughout MetaMask products
https://metamask.github.io/design-tokens/?path=/docs/getting-started-introduction--docs
Apache License 2.0
28 stars 16 forks source link

Color v2 updates #741

Closed Akatori-Design closed 1 day ago

Akatori-Design commented 2 weeks ago

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