My reset css (colors + font-family)

index.js

var element = document.body;

var colors = ['--blue',
'--indigo',
'--purple',
'--pink',
'--red',
'--orange',
'--yellow',
'--green',
'--teal',
'--cyan',
'--white',
'--gray',
'--primary',
'--secondary',
'--success',
'--info',
'--warning',
'--danger',
'--light',
'--dark'];

const App = () => {
  return <div className="list">
    {colors.map(color => {
        const value = getComputedStyle(element).getPropertyValue(color);
         const style = {backgroundColor: value};
       return <div style={style} className="item">
           {color.replace('--', '')}
         </div>
    })}
  </div>
}

ReactDOM.render(<App />, document.getElementById('root'));

reset.css

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: var(--font-family-monospace);
}

/*
Button appearance
box-shadow: var(--color) (opacity .4) blur: 70px spread: 8px
*/

http://output.jsbin.com/noxizeqela