import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import {
  createUseStyles,
  ThemeProvider,
  useTheme
} from "https://cdn.skypack.dev/react-jss@10.0.0-alpha.26";

const BRAND_COLOR = "#F06D06";

const useStyles = createUseStyles({
  button: {
    font: {
      size: 24,
      weight: 900
    },
    background: "none",
    border: `2px solid ${BRAND_COLOR}`,
    color: ({ theme }) => theme.color,
    color: BRAND_COLOR,
    margin: 10,
    "&:hover": {
      color: "black"
    }
  },
  primaryButton: {
    extend: "button",
    background: BRAND_COLOR,
    color: "white"
  }
});

const Comp = () => {
  const theme = useTheme();
  const classes = useStyles({ theme });

  return (
    <div>
      <button className={classes.button}>Button</button>
      <button className={classes.primaryButton} primary>
        Button
      </button>
    </div>
  );
};

const theme = {
  background: "#f7df1e",
  color: "#24292e"
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Comp />
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));