react-ui
Version:
Customisable components and primitives based on design tokens
386 lines (375 loc) • 6.85 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-00d81fcb.js');
/*
Tokens:
Define your scales first
*/
var tokens = {
name: 'React UI Base',
space: {
0: 0,
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
11: '44px',
12: '48px',
13: '52px',
14: '56px',
15: '60px',
16: '64px'
},
radii: [0, '2px', '4px', '50%'],
fontSizes: {
0: 0,
1: '10px',
2: '12px',
3: '14px',
4: '16px',
5: '20px',
6: '24px',
7: '32px',
8: '48px',
9: '64px',
10: '72px'
},
fontWeights: {
thin: 100,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
},
lineHeights: {
compact: '1.2',
"default": '1.6',
cosy: '2'
},
breakpoints: {
0: '576px',
1: '768px',
2: '992px'
},
durations: {
0: 0,
1: '75ms',
2: '100ms',
3: '150ms',
4: '200ms',
5: '300ms',
6: '500ms',
7: '1000ms',
8: '2500ms'
},
// based on elevation levels
shadows: {
0: 'none',
1: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
2: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
3: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
4: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
},
colors: {}
}; // recommended: use the same space grid for size
tokens.sizes = _rollupPluginBabelHelpers._objectSpread2({}, tokens.space);
/*
Decisions:
You can create aliases in scales based on the scale.
*/
tokens.fontSizes.Heading = {
page: 8,
// reads from tokens.fontSizes.8
section: 6,
paragraph: 4
}; // we define these at the tokens level
// so that they can be used by other
// components as well
tokens.colors.text = {
body: 'black',
link: 'blue',
subtle: 'grey',
error: 'red'
};
/*
Component styles:
You can define styles, sizes and variants here
*/
var components = {
/** Global */
Global: {
':root': {}
},
/** Atoms */
Avatar: {
sizes: {
small: 6,
medium: 8,
large: 12
}
},
Button: {
sizes: {
small: 6,
medium: 8,
large: 10
},
fontSize: 3,
borderRadius: 1,
paddingX: 3,
variants: {
primary: {// primary is the default variant for buttons
},
secondary: {
backgroundColor: 'black',
color: 'white'
},
link: {
color: 'text.link',
border: 'none',
background: 'none'
}
}
},
Checkbox: {
border: '1px solid'
},
Heading: {},
Image: {},
Input: {
// recommended: match sizes of input and buttons so
// that they go well together in forms next to other
sizes: {
small: 6,
medium: 8,
large: 10
},
fontSize: 3,
borderRadius: 1,
paddingX: 2,
backgroundColor: 'white',
borderColor: 'black',
color: 'text.body',
'::placeholder': {
color: 'text.subtle'
},
'&[aria-invalid]': {
borderColor: 'red'
}
},
Link: {
variants: {
"default": {
color: 'blue',
':hover': {
color: 'darkblue'
}
},
subtle: {
color: 'grey',
// match Text.variants.subtle
':hover': {
color: 'darkblue'
}
}
}
},
Select: {
// recommended: match styles of input
sizes: {
small: 6,
medium: 8,
large: 10
},
fontSize: 3,
borderRadius: 1,
paddingX: 2,
backgroundColor: 'white',
borderColor: 'black',
color: 'text.body',
'&[aria-invalid]': {
borderColor: 'red'
}
},
Skeleton: {
backgroundColor: 'lightgrey',
highlightColor: 'white',
height: 4,
borderRadius: 2,
animationDuration: 8
},
Spinner: {
sizes: {
small: 2,
medium: 4,
large: 6
},
borderColor: 'white',
borderLeftColor: 'black'
},
Switch: {
colors: {
backgroundOff: 'grey',
backgroundOn: 'green'
}
},
Text: {
variants: {
"default": {
color: 'inherit'
},
body: {
color: 'text.body'
},
subtle: {
color: 'text.subtle'
},
danger: {
color: 'text.error'
}
}
},
Textarea: {
// recommended: match styles of input
sizes: {
small: 6,
medium: 8,
large: 10
},
fontSize: 3,
borderRadius: 1,
paddingX: 2,
paddingY: 2,
backgroundColor: 'white',
color: 'text.body',
'::placeholder': {
color: 'text.subtle'
},
'&[aria-invalid]': {
borderColor: 'red'
}
},
/** Molecules */
Alert: {
fontSize: 3,
padding: 4,
border: '1px solid',
variants: {
"default": {
backgroundColor: 'white',
color: 'black',
borderColor: 'black'
},
warning: {
backgroundColor: 'yellow',
color: 'black',
borderColor: 'black'
}
}
},
Breadcrumb: {
fontSize: 3
},
BreadcrumbSeparator: {
display: 'inline-block',
color: 'text.subtle',
paddingX: 2
},
BreadcrumbItem: {
display: 'inline-block',
'&[aria-current]': {
color: 'text.body'
}
},
Card: {
width: '500px',
backgroundColor: 'white',
border: '1px solid',
borderColor: 'silver',
padding: 5,
borderRadius: 2,
boxShadow: 2,
overflow: 'hidden'
},
DialogContent: {
backgroundColor: 'white',
padding: 6
},
DialogOverlay: {
backgroundColor: 'rgba(0,0,0,0.6)'
},
Form: {
paddingY: 4
},
FormLabel: {
fontSize: 2,
marginBottom: 1,
color: 'text.body'
},
FormHeader: {
color: 'text.body',
fontSize: 5,
fontWeight: 'normal'
},
MenuList: {
backgroundColor: 'white',
color: 'text.body',
fontSize: 3,
borderRadius: 2,
marginTop: 1,
boxShadow: 3
},
MenuItem: {
paddingY: 2,
paddingX: 3,
'&[data-selected]': {
backgroundColor: 'blue',
color: 'white'
}
},
Paragraph: {},
TabList: {
borderColor: 'grey'
},
Tab: {
outline: 'none',
fontSize: 3,
height: 8,
marginRight: 6,
':hover': {
color: 'text.link'
},
'&[data-selected]': {
color: 'text.link'
}
},
TabPanel: {
fontSize: 3,
paddingY: 4,
outline: 'none'
},
Tooltip: {
backgroundColor: 'black',
color: 'white',
paddingX: 1,
paddingY: 1,
fontSize: 2,
lineHeight: 1
}
};
var theme = {
tokens: tokens,
components: components
};
exports.components = components;
exports.default = theme;
exports.tokens = tokens;