utopia icon indicating copy to clipboard operation
utopia copied to clipboard

(Dark Mode) - update icons

Open maltenuhn opened this issue 3 years ago • 0 comments

Problem We have theoretical support for a dark mode. For it to work, we need to update our use of icons, since at the moment they are hardcoded where placed

Approach

  • [ ] Keep filenames as-is.
  • [ ] Remove 'theme' from the icon path, move icons one folder up
  • [ ] Create a semantic mapping inside theme (think theme.icons.secondary: 'gray')
  • [ ] Update the <Icon>, <Icons.*> components
  • [ ] For manual references to icons, create a helper function to map semantic to colour based on theme and
  • [ ] implement it where they're being used
  • [ ] update figma to not include 'theme' as part of the export

Theme mapping In order to map colours to semantics, we can start with this schema. If it's not exhaustive, let's discuss:

light theme:

main: black
secondary: darkgray
subdued: lightgrey
inverted: white
primary: blue
accent1: purple
accent2: orange
accent3: green

dark theme:

main: white
secondary: lightgrey
subdued: gray
inverted: black
primary: blue
accent1: purple
accent2: orange
accent3: green

maltenuhn avatar Jun 30 '21 15:06 maltenuhn