Component variants

For the laziest devs that only need a quick context menu, I packed a couple of default variants inside the component. To control variants you have the variant prop that accepts an object with three possible properties.

prop	values	description
opacity	"transparent" or "solid"	The opacity prop changes the opacity of the component. By default it's set to transparent, which allows to barely see the content underneath the menu. Otherwise you can use solid, which has full opacity.
theme	"light" or "dark"	The theme prop changes the color of the menu. By default it's set to light. It's suggested to tweak the colors of the menu to reflect the ones on your app, or vice versa.
elevation	"raised" or "flat"	The elevation prop enables or disables the box-shadow of the menu. By default it's set to raised.

<ContextMenu variant = {{
  opacity: "transparent" | "solid",
  theme: "light" | "dark",
  elevation: "raised" | "flat",
}}>
...

Default color values

The default colors for both themes are:

.light {
  background-color: rgb(240, 240, 240);
  color: rgb(50, 50, 50);
}

.dark {
  background-color: rgb(50, 50, 50);
  color: rgb(240, 240, 240);
}

light solid flat

dark solid flat

light solid raised

dark solid raised

light transparent flat

dark transparent flat

light transparent raised

dark transparent raised