import { css, component } from 'foliage-react';

const thing = css`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`;

export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });

const Example = () => (
  <>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </>
);

import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
const theme = {
  main: '--theme-main',
};

const button = css`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: var(${theme.main});
  border: 2px solid var(${theme.main});
`;

const Button = component('button', button);

const primaryTheme = createGlobalStyle`
  :root {
    ${theme.main}: palevioletred;
  }
`;

const secondaryTheme = createGlobalStyle`
  :root {
    ${theme.main}: mediumseagreen;
  }
`;

const Example = () => (
  <>
    <Global styles={primaryTheme} />
    <Button />
  </>
);

import { css, component } from 'foliage-react';

const baseStyles = css`
  color: white;
  background-color: mediumseagreen;
  border-radius: 4px;
`;

export const Button = component('button', baseStyles, {
  variants: {
    color: {
      gray: css`
        background-color: gainsboro;
      `,
      blue: css`
        background-color: dodgerblue;
      `,
    },
    size: {
      md: css`
        height: 26px;
      `,
      lg: css`
        height: 36px;
      `,
    },
  },
  compound: [
    {
      color: 'blue',
      size: 'lg',
      css: css`
        background-color: purple;
      `,
    },
  ],
  defaults: {
    color: 'gray',
    size: 'md',
  },
});