diff --git a/docs/Status.mdx b/docs/Status.mdx
index a265d2ba..40bc6787 100644
--- a/docs/Status.mdx
+++ b/docs/Status.mdx
@@ -66,5 +66,5 @@ import Badge from '../packages/core/components/badge';
 
 | Component | Status |
 |:----------|:-------|
-| [Dialog](/overlays/dialog) | <Badge intent="danger">Paused</Badge> |
-| [Tooltips](/overlays/tooltips) | <Badge intent="danger">Paused</Badge> |
+| [Dialog](/overlays/dialog) | <Badge intent="success">Complete</Badge> |
+| [Tooltip](/overlays/tooltip) | <Badge intent="success">Complete</Badge> |
diff --git a/packages/core/components/breadcrumbs/index.js b/packages/core/components/breadcrumbs/index.js
index 8ff89357..2b7c9f8d 100644
--- a/packages/core/components/breadcrumbs/index.js
+++ b/packages/core/components/breadcrumbs/index.js
@@ -138,7 +138,7 @@ const Breadcrumbs = ({
 }) => {
   const sep = (
     <Separator color={colorSeparator}>
-      {separator || <Icon name={separatorIcon} color={colorSeparator} />}
+      {separator || <Icon name={separatorIcon} color={colorSeparator} aria-hidden="true" />}
     </Separator>
   );
 
diff --git a/packages/core/components/button/index.js b/packages/core/components/button/index.js
index 3c13345a..9a690a48 100644
--- a/packages/core/components/button/index.js
+++ b/packages/core/components/button/index.js
@@ -15,10 +15,6 @@ import {
 } from "../../constants";
 import Icon from "../icon";
 
-const ButtonIcon = styled(Icon)`
-  flex: none;
-`;
-
 const ButtonChildren = styled.span`
   display: inline-flex;
   align-items: center;
@@ -49,7 +45,7 @@ const ButtonLoading = styled.span`
   align-items: center;
   justify-content: center;
 
-  > ${ButtonIcon} {
+  > .icon {
     animation: 2s ${animateLoading} linear infinite;
   }
 `;
@@ -69,7 +65,7 @@ const StyledButton = styled.button`
   text-decoration: ${props => (!props.textDecoration ? "none" : "")};
   font-family: ${props =>
     !props.fontFamily ? themeGet("button.base.fonts.font", "fonts.body") : ""};
-  
+
   ${props => buttonStates(props)}
   ${props => buttonScaling(props)}
 
@@ -210,7 +206,7 @@ function buttonStates(props) {
         background-color: ${bgDisabled};
         color: ${fgDisabled};
       `}
-      
+
     ${props =>
       props.disabled &&
       props.appearance === "prominent" &&
@@ -228,13 +224,13 @@ const Button = ({ iconBefore, iconAfter, isLoading, children, ...props }) => {
         iconAfter={iconAfter}
         isLoading={isLoading}
       >
-        {iconBefore && <ButtonIcon name={iconBefore} mr={1} />}
+        {iconBefore && <Icon name={iconBefore} flex="none" mr={1} aria-hidden="true" />}
         {children}
-        {iconAfter && <ButtonIcon name={iconAfter} ml={1} />}
+        {iconAfter && <Icon name={iconAfter} flex="none" ml={1} aria-hidden="true" />}
       </ButtonChildren>
       {isLoading && (
         <ButtonLoading>
-          <ButtonIcon name="load" />
+          <Icon name="load" flex="none" className="icon" aria-label="Loading" />
         </ButtonLoading>
       )}
     </StyledButton>
diff --git a/packages/core/components/callout/index.js b/packages/core/components/callout/index.js
index ebde9a50..29a1078d 100644
--- a/packages/core/components/callout/index.js
+++ b/packages/core/components/callout/index.js
@@ -93,7 +93,7 @@ const Callout = ({ icon, iconSize, intent, title, children, ...props }) => {
   return (
     <StyledCallout {...props} intent={intent} icon={!!iconName}>
       {iconName &&
-        <Icon name={iconName} size={iconSize} flex="none" my={0} mx={2} />
+        <Icon name={iconName} size={iconSize} flex="none" my={0} mx={2} aria-hidden="true" />
       }
       <Box flex="auto">
         {title &&
diff --git a/packages/core/components/checkbox/index.js b/packages/core/components/checkbox/index.js
index 567ed1b7..7870e37b 100644
--- a/packages/core/components/checkbox/index.js
+++ b/packages/core/components/checkbox/index.js
@@ -8,6 +8,7 @@ import { COMMON, FLEX_ITEM, LAYOUT, MISC, POSITION } from "../../constants";
 const StyledCheckbox = styled.span`
   position: relative;
   display: inline-block;
+  vertical-align: middle;
 
   &:focus-within {
     outline: 0;
diff --git a/packages/core/components/dialog/index.js b/packages/core/components/dialog/index.js
index 1c861940..066196c8 100644
--- a/packages/core/components/dialog/index.js
+++ b/packages/core/components/dialog/index.js
@@ -1,24 +1,32 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from 'styled-components'
-import {color, opacity, boxShadow, borders, borderColor, borderRadius, themeGet} from 'styled-system';
+import { themeGet } from 'styled-system';
+import { COMMON, BORDER, MISC } from "../../constants";
 import ReactModal from 'react-modal';
-import Box from '../box';
 
 let isAppElementSet = false;
 
-const StyledDialog = styled(Box)`
-  ${color}
-  ${boxShadow}
-  ${borders}
-  ${borderColor}
-  ${borderRadius}
+const StyledDialog = styled.div`
   flex: auto;
   width: 100%;
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   outline: none;
+
+  min-width: ${themeGet("dialog.minWidths.minWidth")};
+  max-width: ${themeGet("dialog.maxWidths.maxWidth")};
+  min-height: ${themeGet("dialog.minHeights.minHeight")};
+  max-height: ${themeGet("dialog.maxHeights.maxHeight")};
+  padding: ${themeGet("dialog.space.p")};
+  background-color: ${themeGet("dialog.colors.bg")};
+  box-shadow: ${themeGet("dialog.shadows.boxShadow")};
+
+  ${themeGet("dialog.styles")}
+  ${COMMON}
+  ${BORDER}
+  ${MISC}
 `;
 
 const Dialog = ({
@@ -70,7 +78,7 @@ const Dialog = ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: `rgba(0, 0, 0, ${themeGet(`opacity.${opacity}`, opacity)(props)})`,
+    backgroundColor: `rgba(0, 0, 0, ${opacity})`,
     zIndex: 1000000
   };
 
@@ -168,13 +176,9 @@ Dialog.setAppElement = element => ReactModal.setAppElement(element);
 
 Dialog.propTypes = {
   ...ReactModal.propTypes,
-  ...Box.propTypes,
-  ...color.propTypes,
-  ...opacity.propTypes,
-  ...boxShadow.propTypes,
-  ...borders.propTypes,
-  ...borderColor.propTypes,
-  ...borderRadius.propTypes,
+  ...COMMON.propTypes,
+  ...BORDER.propTypes,
+  ...MISC.propTypes,
   appElementId: PropTypes.string
 };
 
@@ -192,17 +196,7 @@ Dialog.defaultProps = {
     beforeClose: 'modal-dialog__content--before-close'
   },
   bodyOpenClassName: 'body--modal-dialog-open',
-  opacity: 0.6,
-  boxShadow: 'dialog.boxShadow',
-  minWidth: '24rem',
-  maxWidth: '80%',
-  minHeight: '16rem',
-  maxHeight: '90%',
-  pt: 'dialog.p',
-  pb: 'dialog.p',
-  pl: 'dialog.p',
-  pr: 'dialog.p',
-  bg: 'dialog.bg'
+  opacity: 0.5
 };
 
 export default Dialog;
diff --git a/packages/core/components/dialog/index.mdx b/packages/core/components/dialog/index.mdx
index 0a0af15c..583298a1 100644
--- a/packages/core/components/dialog/index.mdx
+++ b/packages/core/components/dialog/index.mdx
@@ -6,48 +6,90 @@ route: /overlays/dialog
 
 import { Playground, Props } from 'docz'
 import Dialog from './'
-import Button from '../../../core/components/button'
+import Button from '../button'
+import Heading from '../heading'
 
 # Dialog
 
 Opinionated wrapper around [react-modal](http://reactcommunity.org/react-modal/),
 an accessible modal dialog component for React.
 
+## Configuration
+
+### Setup
+Note you must call `Dialog.setAppElement(element)` *before* the first use of this
+component in your app, where `element` is your app root's html element, or its id.
+Alternatively, pass in the `appElementId` prop on the first use.
+
+### Opening and closing
 The only required prop is `isOpen`, which is a toggle for displaying the dialog.
 See [react-modal](http://reactcommunity.org/react-modal/) for details and general usage.
 
-Note you must call `Dialog.setAppElement(element)` *before* the first use of this
-component in your app, where `element` is the html element, or id thereof, of your
-app root. Alternatively, pass in the `appElementId` prop on the first use.
+Once the dialog is open, you must set `isOpen` to `false` to close it. It is
+recommended you do this in the `onRequestClose` handler, which by default will be
+called when the user presses the ESC key or clicks the overlay.
+
+### Styling
 
 `Dialog` will ignore any styles passed in via react-modal's `style` prop. Instead
-certain styles can be configured via styled-system props (see table below) and
-the rest are hard-coded opinions within the `Dialog` component.
+certain styles can be configured via the theme properties (see below), or their
+corresponding styled-system props, and the rest are hard-coded opinions within
+the `Dialog` component.
 
-Notable props include `opacity` for adjusting the scrim opacity, `boxShadow` for
-setting the dialog drop shadow, and `closeTimeoutMS` for adjusting the transition
-timing. Transitions are hard-coded for now. Only the timing is adjustable.
+Overlay opacity can be adjusted via the `opacity` prop.
 
-## Basic usage
+### Transitions
+Transitions are hard-coded for now, although transition timing is adjustable
+via the `closeTimeoutMS` prop.
 
-Set `isOpen` to `true` below to trigger the dialog. There's no way to close it
-in docz, so refresh when you're done.
+## Basic usage
 
 <Playground>
-    <Dialog isOpen={false} width="50%" height="50%" appElementId="root">
-        <Button block>Howdy ho</Button>
-    </Dialog>
+    {class Example extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = { open: false };
+        }
+
+        handleOpen() {
+            this.setState({ open: true });
+        }
+
+        handleClose() {
+            this.setState({ open: false });
+        }
+
+        render() {
+            return (
+                <>
+                    <Button
+                        onClick={() => this.handleOpen()}
+                    >
+                        Open Dialog
+                    </Button>
+                    <Dialog
+                        appElementId="root"
+                        isOpen={this.state.open}
+                        onRequestClose={() => this.handleClose()}
+                    >
+                        <Heading>Hello World</Heading>
+                    </Dialog>
+                </>
+            );
+        }
+    }}
 </Playground>
 
 
-### PropTypes
+## PropTypes
 | Prop | Type | Required | Default | Description |
 |:-----|:-----|:---------|:--------|:------------|
 | appElementId | string | no | | id of app root element |
 | isOpen | bool | yes | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
-| onAfterOpen | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
-| onRequestClose | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
+| opacity | number | no | `0.5` | overlay opacity |
 | closeTimeoutMS | number | no | `150` | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
+| onRequestClose | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
+| onAfterOpen | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
 | contentLabel | string | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
 | portalClassName | string | no | `modal-dialog` | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
 | overlayClassName | object | no | `{ base: 'modal-dialog__overlay', afterOpen: 'modal-dialog__overlay--after-open', beforeClose: 'modal-dialog__overlay--before-close'}`  | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
@@ -65,14 +107,42 @@ in docz, so refresh when you're done.
 | data | object | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
 | overlayRef | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
 | contentRef | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) |
-| Box props | | | | see [Box](/components/box) |
-| minWidth | string | no | `30rem` | |
-| maxWidth | string | no | `80%` | |
-| minHeight | string | no | `40rem` | |
-| minHeight | string | no | `90%` | |
-| opacity | number | no | `0.6` | scrim opacity |
-| boxShadow | number or string | no | `5` | should be a key in theme shadows |
-| bg | string | no | `white` | dialog background |
-| border | string | no | | |
-| borderColor | string | no | | |
-| borderRadius | string | no | | |
+| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
+| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
+| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |
+
+
+## Theming
+
+### Schema
+```
+{
+  space: {
+    p
+  },
+  minWidths: {
+    minWidth
+  },
+  maxWidths: {
+    maxWidth
+  },
+  minHeights: {
+    minHeight
+  },
+  maxHeights: {
+    maxHeight
+  },
+  colors: {
+    bg
+  },
+  shadows: {
+    boxShadow
+  },
+  styles: css`
+    ...
+  `
+}
+```
+
+- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/dialog)
+- [Learn more about themeing](#)
diff --git a/packages/core/components/grouper/index.js b/packages/core/components/grouper/index.js
index 91916790..a2dadb02 100644
--- a/packages/core/components/grouper/index.js
+++ b/packages/core/components/grouper/index.js
@@ -15,6 +15,7 @@ const InnerGrouper = styled.div`
   display: flex;
   flex-wrap: wrap;
   flex-direction: ${props => (props.vertical ? "column" : "row")};
+  justify-content: ${props => props.justify};
   align-items: ${props => props.align};
   width: 100%;
   height: 100%;
@@ -38,10 +39,10 @@ const InnerGrouper = styled.div`
   }
 `;
 
-const Grouper = ({ vertical, align, gutter, children, ...props }) => {
+const Grouper = ({ vertical, justify, align, gutter, children, ...props }) => {
   return (
     <OuterGrouper {...props}>
-      <InnerGrouper vertical={vertical} align={align} gutter={gutter}>
+      <InnerGrouper vertical={vertical} justify={justify} align={align} gutter={gutter}>
         {children}
       </InnerGrouper>
     </OuterGrouper>
@@ -52,11 +53,13 @@ Grouper.propTypes = {
   ...COMMON.propTypes,
   ...LAYOUT.propTypes,
   vertical: PropTypes.bool,
+  justify: PropTypes.string,
   align: PropTypes.string,
   gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 Grouper.defaultProps = {
+  justify: "flex-start",
   align: "center"
 }
 
diff --git a/packages/core/components/grouper/index.mdx b/packages/core/components/grouper/index.mdx
index 976603de..b8bc0520 100644
--- a/packages/core/components/grouper/index.mdx
+++ b/packages/core/components/grouper/index.mdx
@@ -88,7 +88,7 @@ Renders a horizontal or vertical group of items.
 </Playground>
 
 
-## Align
+## Align and Justify
 
 <Playground>
   <Grouper gutter={0} align="stretch">
@@ -97,12 +97,20 @@ Renders a horizontal or vertical group of items.
   </Grouper>
 </Playground>
 
+<Playground>
+  <Grouper justify="flex-end">
+    <Button>Hello</Button>
+    <Button>Crazy</Button>
+    <Button>World</Button>
+  </Grouper>
+</Playground>
 
 
 ## PropTypes
 | Prop | Type | Required | Default | Description |
 |:-----|:-----|:---------|:--------|:------------|
 | vertical | bool | no | false | |
+| justify | string | no | "flex-start" | passed to `justify-content` CSS property |
 | align | string | no | "center" | passed to `align-items` CSS property |
 | gutter | string or number | no | `space.2` | gap between children |
 | `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
diff --git a/packages/core/components/radio/index.js b/packages/core/components/radio/index.js
index 73e32fa4..52bf11b4 100644
--- a/packages/core/components/radio/index.js
+++ b/packages/core/components/radio/index.js
@@ -8,6 +8,7 @@ import { COMMON, FLEX_ITEM, LAYOUT, MISC, POSITION } from "../../constants";
 const StyledRadio = styled.span`
   position: relative;
   display: inline-block;
+  vertical-align: middle;
 
   &:focus-within {
     outline: 0;
diff --git a/packages/core/components/tooltip/index.js b/packages/core/components/tooltip/index.js
index 5c3cdc56..14bd94ab 100644
--- a/packages/core/components/tooltip/index.js
+++ b/packages/core/components/tooltip/index.js
@@ -1,30 +1,33 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
-import {
-  space,
-  color,
-  borderRadius,
-  boxShadow,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  textAlign,
-  themeGet
-} from "styled-system";
+import styled from "styled-components";
+import { themeGet } from "styled-system";
+import { COMMON, BORDER, TYPOGRAPHY, MISC } from "../../constants";
+
 import TooltipJS from "tooltip.js";
 
 const TooltipContent = styled.span`
-  ${space}
-  ${color}
-  ${borderRadius}
-  ${boxShadow}
-  ${fontFamily}
-  ${fontSize}
-  ${fontWeight}
-  ${textAlign}
   position: relative;
   display: inline-block;
+  font-family: inherit;
+  font-weight: normal;
+  text-align: center;
+
+  padding-top: ${themeGet("tooltip.space.py")};
+  padding-right: ${themeGet("tooltip.space.px")};
+  padding-bottom: ${themeGet("tooltip.space.py")};
+  padding-left: ${themeGet("tooltip.space.px")};
+  border-radius: ${themeGet("tooltip.radii.borderRadius")};
+  background-color: ${themeGet("tooltip.colors.bg")};
+  color: ${themeGet("tooltip.colors.color")};
+  font-size: ${themeGet("tooltip.fontSizes.fontSize")};
+  box-shadow: ${themeGet("tooltip.shadows.boxShadow")};
+
+  ${themeGet("tooltip.styles")}
+  ${COMMON}
+  ${BORDER}
+  ${TYPOGRAPHY}
+  ${MISC}
 
   .tooltip-arrow {
     width: 0;
@@ -32,7 +35,9 @@ const TooltipContent = styled.span`
     border-style: solid;
     position: absolute;
     margin: 5px;
-    border-color: ${props => themeGet(`colors.${props.bg}`, props.bg)};
+    border-color: ${props => props.bg
+      ? themeGet(`colors.${props.bg}`, props.bg)
+      : themeGet('tooltip.colors.bg')};
   }
 
   .tooltip[x-placement^="top"] & {
@@ -174,14 +179,10 @@ class Tooltip extends React.Component {
 }
 
 Tooltip.propTypes = {
-  ...space.propTypes,
-  ...color.propTypes,
-  ...borderRadius.propTypes,
-  ...boxShadow.propTypes,
-  ...fontFamily.propTypes,
-  ...fontSize.propTypes,
-  ...fontWeight.propTypes,
-  ...textAlign.propTypes,
+  ...COMMON.propTypes,
+  ...BORDER.propTypes,
+  ...TYPOGRAPHY.propTypes,
+  ...MISC.propTypes,
   show: PropTypes.bool,
   hasArrow: PropTypes.bool,
   placement: PropTypes.oneOf([
@@ -217,18 +218,6 @@ Tooltip.propTypes = {
 };
 
 Tooltip.defaultProps = {
-  pt: "tooltip.py",
-  pb: "tooltip.py",
-  pl: "tooltip.px",
-  pr: "tooltip.px",
-  color: "tooltip.color",
-  bg: "tooltip.bg",
-  borderRadius: "tooltip.borderRadius",
-  boxShadow: "tooltip.boxShadow",
-  fontFamily: "inherit",
-  fontSize: "tooltip.fontSize",
-  fontWeight: "normal",
-  textAlign: "center",
   show: undefined,
   hasArrow: false,
   placement: "top",
diff --git a/packages/core/components/tooltip/index.mdx b/packages/core/components/tooltip/index.mdx
index 28d08b5c..341d805c 100644
--- a/packages/core/components/tooltip/index.mdx
+++ b/packages/core/components/tooltip/index.mdx
@@ -13,8 +13,8 @@ import Swatch from '../swatch/'
 
 # Tooltip
 
-Renders a tooltip near an element in response to hover, click, focus, or programmatic
-control.
+Renders a tooltip near an element in response to hover, click, focus, or
+programmatic control.
 
 To use, (1) nest the Tooltip component inside the component that should trigger it,
 and (2) add `data-tooltip` to the trigger component. See examples below.
@@ -25,7 +25,7 @@ Components that represent singleton elements (eg, `<img>`, `<input>`) cannot use
 
 Future work: Consider alternative backing libraries (currently Tooltip.js, from Popper.js).
 
-### Component authoring
+## Component authoring
 
 When *authoring* a component that does not render `props.children` and that might
 be used with a Tooltip, you must do something like the following. See
@@ -50,16 +50,14 @@ const Foo = ({children, ...props}) => {
 <Playground>
     <Text my={8} py={1} bg="grayLight3" textAlign="center" data-tooltip>
         Hover here
-        <Tooltip>Ahoy there!</Tooltip>
+        <Tooltip placement="right">Ahoy there!</Tooltip>
     </Text>
 
     <Box my={8}>
         <Button data-tooltip>
             Click me
-            <Tooltip trigger="click" hasArrow placement="right" bg="secondary">
-                <Box p={2}>
-                    <Button bg="white" color="black">But don't click me</Button>
-                </Box>
+            <Tooltip trigger="click" hasArrow bg="secondary" closeOnClickOutside>
+                <Box p={2} bg="transparent" color="white">But don't click me</Box>
             </Tooltip>
         </Button>
     </Box>
@@ -73,18 +71,10 @@ const Foo = ({children, ...props}) => {
 </Playground>
 
 
-### PropTypes
+## PropTypes
 
 | Prop | Type | Required | Default | Description |
 |:-----|:-----|:---------|:--------|:------------|
-| ${space} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${color} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${borderRadius} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${boxShadow} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${fontFamily} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${fontSize} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${fontWeight} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
-| ${textAlign} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
 | show | bool | no | `undefined` | For programmatic control |
 | trigger | string | no | `hover focus` | Space-separated list of events that trigger tooltip. Can be 'hover', 'click', 'focus', 'manual'. 'manual' cannot be combined with others. |
 | hasArrow | bool | no | `false` | Render arrow |
@@ -95,3 +85,39 @@ const Foo = ({children, ...props}) => {
 | xOffset | number or string | no | `0` | |
 | yOffset | number or string | no | `0` | |
 | options | object | no | | Gets passed to underlying [Tooltip.js library](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/tooltip-documentation.md) |
+| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
+| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
+| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
+| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |
+
+
+## Theming
+
+### Schema
+```
+{
+  space: {
+    py,
+    px
+  },
+  colors: {
+    color,
+    bg
+  },
+  radii: {
+    borderRadius
+  },
+  shadows: {
+    boxShadow
+  },
+  fontSizes: {
+    fontSize
+  },
+  styles: css`
+    ...
+  `
+}
+```
+
+- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/tooltip)
+- [Learn more about themeing](#)
diff --git a/packages/core/theme/components/dialog/index.js b/packages/core/theme/components/dialog/index.js
index 81abd2ec..800d5c84 100644
--- a/packages/core/theme/components/dialog/index.js
+++ b/packages/core/theme/components/dialog/index.js
@@ -1,11 +1,26 @@
+import { css } from "styled-components";
+
 export const theme = {
   space: {
     p: 3
   },
+  minWidths: {
+    minWidth: "24rem"
+  },
+  maxWidths: {
+    maxWidth: "80%"
+  },
+  minHeights: {
+    minHeight: "16rem"
+  },
+  maxHeights: {
+    maxHeight: "90%"
+  },
   colors: {
     bg: "white"
   },
   shadows: {
     boxShadow: 5
-  }
+  },
+  styles: css``
 };
diff --git a/packages/core/theme/components/tooltip/index.js b/packages/core/theme/components/tooltip/index.js
index 0349bbcc..223c562c 100644
--- a/packages/core/theme/components/tooltip/index.js
+++ b/packages/core/theme/components/tooltip/index.js
@@ -1,3 +1,5 @@
+import { css } from "styled-components";
+
 export const theme = {
   space: {
     py: "0.4rem",
@@ -15,5 +17,6 @@ export const theme = {
   },
   fontSizes: {
     fontSize: 1
-  }
+  },
+  styles: css``
 };