Calvein

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

Calvein

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

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

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

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

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

{"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

{"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

$scroll-shadow
  background linear-gradient(white 30%, rgba(black, 0)),
    linear-gradient(rgba(black, 0) 10px, white 70%) bottom,
    radial-gradient(at top, rgba(black, 0.2), transparent 70%),
    radial-gradient(at bottom, rgba(black, 0.2), transparent 70%) bottom
  background-repeat no-repeat
  background-size 100% 20px, 100% 20px, 100% 10px, 100% 10px
  background-attachment local, local, scroll, scroll

Calvein

@require 'control'
@require 'menu'
@require 'mixins'
@require 'multi'
@require 'spinner'

Calvein

[
  {
    "name": "Tony Abbott",
    "img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/EZ5/upload_ref_binary/EZ5.JPG",
    "electorate": "Warringah",
    "state": "New South Wales"
  },
  {
    "name": "Anthony Albanese",
    "img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/R36/upload_ref_binary/R36.jpg",