@neble/compact v1.0.4

neble-ui-compact

Object based React UI component builder

import compact, { ThemeProvider, keyframes } from "@neble/compact";

const scaleUp = keyframes({
  "0%": { transform: "scale(1)" },
  "100%": { transform: "scale(1.5)" }
});

const Typography = compact("p", (theme) => ({
  default: {
    css: {
      color: theme.palette.primary.main,
      "&:hover": {
        animation: `${scaleUp} 200ms`
      }
    },
    variants: {
      header: "h1"
    }
  },
  variants: {
    italic: {
      [true]: {
        css: {
          fontStyle: "italic"
        }
      }
    },
    header: {
      default: {
        css: `
        fontSize: bold;
        `
      },
      types: {
        h1: {
          element: "h1",
          css: {
            fontSize: 30
          },
          classNames: ["header-h1"]
        },
        h2: {
          element: "h2",
          css: {
            fontSize: 20
          },
          classNames: ["header-h2"]
        }
      }
    },
    color: (name) => ({
      color: theme.palette[name].main
    })
  }
})).child("List", (theme) => ({
  element: "span", // default element div
  variants: {}
}));

const App = () => {
  return (
    <ThemeProvider theme={customTheme}>
      <Typography italic header="h2" color="blue">
        Typography <Typography.List>child</Typography.List>
      </Typography>
    </ThemeProvider>
  );
};