jackhowa / marvel-color-switcher

Practice css variables with marvel characters bc bingeing mcu

Marvel Color Switcher

• Inspired by https://epicreact.dev/css-variables/ (code sandbox https://df90h.csb.app/)

pt 1 Goals

• Click to switch between characters
• Change color on character switch using CSS Variables
• Change content as well without url change of character bio
• Maybe change font and other styles as well
• Make sure color contrast of wild marvel colors are still accessible with Google Material Color picker ;) -> somewhat better with lighthouse

pt form picker react-hook-form context

• Update button using v7 of react-hook-form
• Use form context to submit the form change separate from the inputs (mostly unnecessary but poc)

Reach Goals

• IE 11 does not support CSS Variables, but think of a way?
• Create your own color scheme and make your own character live
• Add other custom styles like font-height but whatever
• Do something about data of who picks what

PT 2 CSS Var Picker

• Remove hard-coded css of data scheme
• Add live configurer
• Change live configurer dynamically on state change
• Determine input of variable based on something
• Create your own color scheme and make your own character live
• Do something about data of who picks what
• Post to api of color scheme

Colors

Iron Man

reds #4b0908 #6a0c0b #aa0505

yellows #fbca03 #b97d10

https://colorswall.com/palette/3128/ https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=aa0505&secondary.color=fbca03

Captain America

#0000ff #002d5c #870000 #a5a5ab #f0f0f0

https://www.color-hex.com/color-palette/20730

marvel-color-switcher's Issues

Label accessibility issue

Originally posted by @JackHowa in #6 (comment)

Pixel picker api

This looks like it could be cool

https://web.dev/eyedropper/