Rimble Theme

Rimble Components come with built-in access to the Rimble theme. The theme file contains an object which holds values for common variables such as color, fonts, box shadows, and more.

Rimble's full theme.js is as follows:

// rimble theme.js
{
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
fontWeights: [0, 300, 400, 600, 700],
letterSpacings: [0, 1, 2, 4, 8],
lineHeights: {
solid: 1,
title: 1.25,
copy: 1.5,
},
fonts: {
serif: 'athelas, georgia, times, serif',
sansSerif: '"Source Sans Pro", -apple-system, sans-serif',
},
space: [0, 4, 8, 16, 32, 64, 128, 256],
radii: ['0', '4px', '8px', '16px'],
width: [0, 16, 32, 64, 128, 256],
minWidths: [0, 16, 32, 64, 128, 256],
maxWidths: [0, 16, 32, 64, 128, 256, 512, 768, 1024, 1536],
heights: [0, 16, 32, 64, 128, 256],
minHeights: [0, 16, 32, 64, 128, 256],
maxHeights: [0, 16, 32, 64, 128, 256],
borders: [0, '1px solid transparent'],
borderWidths: ['0', '1px', '2px', '4px'],
shadows: [
'0',
'0px 2px 4px rgba(0, 0, 0, 0.1)',
'0px 8px 16px rgba(0, 0, 0, 0.1)',
'0 7px 14px rgba(50,50,93,.1)',
],
opacity: {
disabled: 0.4,
},
colors: {
primary: blurple.base,
'primary-light': blurple.light[1],
'primary-dark': blurple.dark[1],
blue: baseColors.consensysblue,
copyColor: '#3F3D4B',
black: '#000e1a',
'near-black': '#111',
'dark-gray': '#333',
'mid-gray': '#555',
grey: '#CCC',
silver: '#999',
'light-silver': '#aaa',
'moon-gray': '#ccc',
'light-gray': '#eee',
'near-white': '#f4f4f4',
white: '#fff',
transparent: 'transparent',
blacks: [
'rgba(0,0,0,.0125)',
'rgba(0,0,0,.025)',
'rgba(0,0,0,.05)',
'rgba(0,0,0,.1)',
'rgba(0,0,0,.2)',
'rgba(0,0,0,.3)',
'rgba(0,0,0,.4)',
'rgba(0,0,0,.5)',
'rgba(0,0,0,.6)',
'rgba(0,0,0,.7)',
'rgba(0,0,0,.8)',
'rgba(0,0,0,.9)',
],
whites: [
'rgba(255,255,255,.0125)',
'rgba(255,255,255,.025)',
'rgba(255,255,255,.05)',
'rgba(255,255,255,.1)',
'rgba(255,255,255,.2)',
'rgba(255,255,255,.3)',
'rgba(255,255,255,.4)',
'rgba(255,255,255,.5)',
'rgba(255,255,255,.6)',
'rgba(255,255,255,.7)',
'rgba(255,255,255,.8)',
'rgba(255,255,255,.9)',
],
success: green.base,
warning: yellow.base,
danger: red.base,
info: blue.base,
},
zIndices: [0, 9, 99, 999, 9999],
messageStyle: {
base: {
color: shade(0.4, '#AAA'),
backgroundColor: tint(0.9, '#AAA'),
borderColor: '#AAA',
},
success: {
color: shade(0.4, green.base),
backgroundColor: tint(0.9, green.base),
borderColor: green.base,
},
warning: {
color: shade(0.4, yellow.base),
backgroundColor: tint(0.9, yellow.base),
borderColor: yellow.base,
},
danger: {
color: shade(0.4, red.base),
backgroundColor: tint(0.9, red.base),
borderColor: red.base,
},
info: {
color: shade(0.4, blue.base),
backgroundColor: tint(0.9, blue.base),
borderColor: blue.base,
},
},
buttons: {
primary: {
color: blurple.text,
backgroundColor: blurple.base,
// use css custom props
'--main-color': blurple.base,
'--contrast-color': blurple.text,
},
success: {
'--main-color': green.base,
'--contrast-color': green.text,
},
danger: {
'--main-color': red.base,
'--contrast-color': red.text,
},
},
buttonSizes: {
small: {
fontSize: '0.75rem',
height: '2rem',
minWidth: '2rem',
padding: '0 1rem',
},
medium: {
fontSize: '1rem',
height: '3rem',
minWidth: '3rem',
},
large: {
fontSize: '1.5rem',
height: '4rem',
minWidth: '4rem',
},
},
};

Custom theming

Custom theming is an optional way to override the Rimble values that control color, spacing, typography, and other aspects of our components.

1. You can override the entire theme for an entire tree of components using the <ThemeProvider> from styled-components:

import {Box, Button, Text, theme as rimbleTheme} from 'rimble-ui'
import {ThemeProvider} from 'styled-components'
// a theme with custom spacing and font sizes
const theme = {
...rimbleTheme,
space: [0, 8, 16, 32, 64],
fontSizes: [10, 12, 16, 24, 48]
}
// override
theme.colors.black = '#111'
export default () => (
<ThemeProvider theme={theme}>
<Box color='black' p={4}>
<Text fontSize={4}>Hello, world!</Text>
</Box>
</ThemeProvider>
)

2. You can merge the Rimble theme with your custom theme using Object.assign:

import {ThemeProvider} from `styled-components`
import {theme} from 'rimble-ui'
const customTheme = { ... }
const App = (props) => {
return (
<div>
<ThemeProvider theme={Object.assign({}, theme, customTheme)}> // matching keys in customTheme will override keys in the Rimble theme
<div>your app here</div>
</ThemeProvider>
</div>
)
}

3. You can theme individual components by passing the theme prop directly:

import {Text} from 'rimble-ui'
const theme = {
colors: {
magenta: '#f0f'
}
}
export default () => (
<Text theme={theme} color='magenta'>Hi, I'm magenta!</Text>
)

Read the styled-system docs

for more information on theming in styled-system.

(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute

Rimble Theme

On this Page