Design System
Arwes uses a HOC to provide a design theme for the components. This provider should be at the root of the application and receives a theme object. This will set the design settings to use in the components and for you to extend new ones.
import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider, createTheme } from 'arwes'; const App = () => ( <ThemeProvider theme={createTheme()}> <div>My Project</div> </ThemeProvider> ); ReactDOM.render(<App />, document.querySelector('#root'));
The main component which every application should have is the <Arwes />
component.
It wraps the application with global styles and animations.
import { ThemeProvider, createTheme, Arwes } from 'arwes'; const App = () => ( <ThemeProvider theme={createTheme()}> <Arwes> <h1>My App</h1> <p>A SciFi Project</p> </Arwes> </ThemeProvider> );
Now you’ll see the new styles. All components under the theme provider will use the styles provided. For example:
import { ThemeProvider, createTheme, Arwes, Button } from 'arwes'; const App = () => ( <ThemeProvider theme={createTheme()}> <Arwes> <div style={{ padding: 20 }}> <Button>My Button</Button> </div> </Arwes> </ThemeProvider> );
Theme
The theme let you define the colors, dimensions, sizes and some styles and animation effects for your components.
The colors are scoped by the object color
and each of them have
3 variations: base
, dark
and light
. The variations are defined by
accent
, the default is 20% (0.2).
The backgrounds are scoped by the object background
and each of them have 4
variations named level0
, level1
, level2
and level3
, each more
lighted. By default the increment in light is by 1.5% (0.015).
Most components have the ability to get a layer
to define its color/background.
For example, the <Button />
by default takes the control
layer. We can change it
to any other:
const App = () => ( <ThemeProvider theme={createTheme()}> <Arwes> <div style={{ padding: 20 }}> <Button layer='success'>My Button</Button> </div> </Arwes> </ThemeProvider> );
By default the theme extends the default one but you can customize the settings. For example to change the primary and header colors:
const myTheme = { color: { primary: { base: '#be26fc', dark: '#8e1bbd', light: '#c95bf6' }, header: { base: '#fc26fa', dark: '#a818a7', light: '#f458f2' } } }; const App = () => ( <ThemeProvider theme={createTheme(myTheme)}> <Arwes> <div style={{ padding: 20 }}> <h1>My App</h1> <p>A SciFi Project</p> </div> </Arwes> </ThemeProvider> );
You can see the complete list of styles to define in the Arwes file /src/tools/createTheme/theme.js.
Customize your components
You can use the withStyles
HOC to get the theme and set the styles using the
React JSS HOC underneat. Read its docs for more
details in how it works. For example:
import { ThemeProvider, createTheme, withStyles, Arwes } from 'arwes'; const styles = theme => ({ root: { padding: [theme.padding, 0], background: theme.background.primary.level0 }, title: { textDecoration: 'underline' } }); const MyHeader = withStyles(styles)(({ classes, children }) => ( <header className={classes.root}> <h1 className={classes.title}>{children}</h1> </header> )); const App = () => ( <ThemeProvider theme={createTheme()}> <Arwes> <MyHeader>Arwes Project</MyHeader> <p>A SciFi Project</p> </Arwes> </ThemeProvider> );
You can use the theme provided by the <ThemeProvider />
in the components
as expected so you can build your own Arwes components.
All children components using withStyles()
will receive the processed theme
and the classes
generated. The built-in Arwes components have already this
HOC, but you can overwrite the styles provided if you need to.