import * as React from "react";
import './App.css';
// import {color} from '@styled-system/color';
import Button from "./components/parts/Button";

import { ThemeProvider } from 'emotion-theming'
import ButtonComposer from "./components/composers/ButtonComposer";
import GridCol from "./components/layout/GridCol";
const mode = '';

const baseTheme = {
  space: [0, 2, 4, 8, 16, 32],
  fontSizes: [8, 12, 18, 24, 32],
  sizes: [100, 200, 300],
  colors: {    
    primary: "#bada55",
    neutral: "#555",
    modes: {
      dark: {
        primary: "red",
        neutral: "red",
      }
    }
  }
}
const colors = {...baseTheme.colors, ...baseTheme.colors.modes[mode]};
const theme = {...baseTheme, colors}

function onClick() {
  console.log('clicked' );
}
const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <div style={{padding: '20px'}}>
      </div>
    </ThemeProvider>
  );
}
export default App;