import React from 'react';
import { ResponsiveProvider, ThemeProvider } from 'app-studio';

const Root = () => {
    return (<ResponsiveProvider>
                <ThemeProvider>
                    <App />
                </ThemeProvider>
            </ResponsiveProvider>);
};

import React from 'react';
import { View } from 'app-studio';

function Example() {
    return (
        <View 
    backgroundColor="grey" 
    padding={20}
    on={{ hover: { backgroundColor: 'blue.100' } }}
    >
            Hello
        </View>
    );
}

import React from 'react';
import { ResponsiveProvider } from 'app-studio';

const Example = () => {
  const { screen, on } = useResponsive();
  const responsive = {
    xs: {
      backgroundColor: 'red',
    },
    sm: {
      backgroundColor: 'green',
    },
    md: {
      backgroundColor: 'blue',
    },
    lg: {
      backgroundColor: 'yellow',
    },
    xl: {
      backgroundColor: 'red',
    },
  };

  return (
    <View size={100} 
    {...responsive[screen]}       
>
      {screen} -  mobile : {on('mobile') ? 'yes' : 'no'}
    </View>
  );
}

const App = () => (<ResponsiveProvider 
    breakpoints={{
        xs: 0,
        sm: 340,
        md: 560,
        lg: 1080,
        xl: 1300,
    }} 

    devices={{  
        mobile: ['xs', 'sm'],
        tablet: ['md', 'lg'],
        desktop: ['lg', 'xl']
    }}
    >
    <Exemple />
<ResponsiveProvider>);

import React from 'react';
import { ThemeProvider, View } from 'app-studio';

const theme = {

  colors: {
     orange: '#fff7ed', 
     cyan:'#ecfeff',
  },
  palette:{
    blueGray: {
      50: '#f8fafc',
      100: '#f1f5f9',
      200: '#e2e8f0',
      300: '#cbd5e1',
      400: '#94a3b8',
      500: '#64748b',
      600: '#475569',
      700: '#334155',
      800: '#1e293b',
      900: '#0f172a',
    },
  }
    
};

function Example() {
    return (
        <ThemeProvider theme={theme}>
      <View backgroundColor="cyan">
              <Text color="blue.200">Hello</Text>
      </View>
        </ThemeProvider>
    );
}