Calvein

{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#002b36","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#839496","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#839496","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu

Calvein

{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#fdf6e3","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#657b83","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#657b83","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu

Calvein

#define S_base03        #002b36
#define S_base02        #073642
#define S_base01        #586e75
#define S_base00        #657b83
#define S_base0         #839496
#define S_base1         #93a1a1
#define S_base2         #eee8d5
#define S_base3         #fdf6e3

*background:            S_base03

Calvein

[colors]
background = #1b2b34
foreground = #d8dee9
transparent = #00ffffff

base08 = #ec5f67
red    = #ec5f67
base09 = #f99157
orange = #f99157
base0a = #fac863

Calvein

React/Redux architecture

Tools

• [Visual Studio Code]: For its [TypeScript] integration
• [TypeScript]: Which can also replace React's PropTypes
• [Create React app]: For a PoC or a small project, you can easily [use TypeScript following this guide]
• [Storybook]: To develop your component standalone, see Storybook-driven development
• [Babel]
• [Webpack]

Calvein

<Dropdown
  trigger={({ toggle }) => (
    <Button
      isDropdown
      icon={<IconDecoration />}
      iconActive={<IconDecorationFill />}
      onClick={toggle}
    >
      Decoration
    </Button>

Calvein

let Component = () => {
  return (
    <>
      <Toggle defaultIsOn>
        {({ isOn, toggle }) => (
          <button onClick={toggle}>
            is {isOn ? 'on' : 'off'}
          </button>
          <Modal isOpen={isOn}>
            Hello