Change theme var names

addons/a11y/src/components/Report/Tags.js

@@ -12,8 +12,8 @@ const Wrapper = styled.div({
 const Item = styled.div(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
-  border: `1px solid ${theme.mainBorderColor}`,
-  borderRadius: theme.mainBorderRadius,
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: theme.appBorderRadius,
 }));
 
 function Tags({ tags }) {

addons/a11y/src/components/Tabs.js

@@ -10,7 +10,7 @@ const Container = styled.div({
 });
 
 const List = styled.div(({ theme }) => ({
-  boxShadow: `${theme.mainBorderColor} 0 -1px 0 0 inset`,
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
   background: '#f8f8fc',
   flexWrap: 'wrap',
   display: 'flex',

addons/knobs/src/components/types/Color.js

@@ -16,7 +16,7 @@ const Swatch = styled.div(({ theme }) => ({
   left: 6,
   width: 16,
   height: 16,
-  boxShadow: `${theme.mainBorderColor} 0 0 0 1px inset`,
+  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
   borderRadius: '1rem',
 }));
 

addons/storysource/src/StoryPanel.js

@@ -9,15 +9,15 @@ import { EVENT_ID } from './events';
 const StyledStoryLink = styled(Link)(({ theme }) => ({
   display: 'block',
   textDecoration: 'none',
-  borderRadius: theme.mainBorderRadius,
+  borderRadius: theme.appBorderRadius,
   '&:hover': {
-    background: theme.background.select,
+    background: theme.background.hoverable,
   },
 }));
 
 const SelectedStoryHighlight = styled.div(({ theme }) => ({
-  background: theme.background.select,
-  borderRadius: theme.mainBorderRadius,
+  background: theme.background.hoverable,
+  borderRadius: theme.appBorderRadius,
 }));
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({

lib/components/src/ActionBar/ActionBar.js

@@ -26,15 +26,15 @@ export const ActionButton = styled.button(({ theme }) => ({
   lineHeight: '16px',
   fontWeight: theme.typography.weight.bold,
 
-  borderTop: `1px solid ${theme.mainBorderColor}`,
-  borderLeft: `1px solid ${theme.mainBorderColor}`,
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  borderLeft: `1px solid ${theme.appBorderColor}`,
   marginLeft: -1,
 
   borderRadius: `4px 0 0 0`,
 
-  '&:not(:last-child)': { borderRight: `1px solid ${theme.mainBorderColor}` },
+  '&:not(:last-child)': { borderRight: `1px solid ${theme.appBorderColor}` },
   '& + *': {
-    borderLeft: `1px solid ${theme.mainBorderColor}`,
+    borderLeft: `1px solid ${theme.appBorderColor}`,
     borderRadius: 0,
   },
 

lib/components/src/Button/Button.js

@@ -37,7 +37,7 @@ const ButtonWrapper = styled.button`
   background: transparent;
 
 
-  font-size: ${props => props.small ? props.theme.typography.size.s1 : props.theme.mainTextSize}px;
+  font-size: ${props => props.small ? props.theme.typography.size.s1 : props.theme.typography.size.s2 - 1}px;
   font-weight: ${props => props.theme.typography.weight.bold};
   line-height: 1;
 

lib/components/src/bar/bar.js

@@ -35,7 +35,7 @@ export const Bar = styled.div(
   ({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
-    background: theme.background.bar,
+    background: theme.barBgColor,
     color: theme.barTextColor,
     height: 40,
     position: 'relative',
@@ -49,9 +49,9 @@ export const Bar = styled.div(
     border
       ? {
           background: `${
-            theme.background.bar
+            theme.barBgColor
           } linear-gradient(to bottom, transparent calc(100% - 1px), ${
-            theme.mainBorderColor
+            theme.appBorderColor
           } calc(100% - 1px))`,
         }
       : {}

lib/components/src/bar/separator.js

@@ -21,7 +21,7 @@ export const Separator = styled.span(
   ({ theme }) => ({
     width: 1,
     height: 24,
-    background: theme.mainBorderColor,
+    background: theme.appBorderColor,
     marginTop: 8,
   }),
   ({ force }) =>

lib/components/src/form/field/field.js

@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 
 const Wrapper = styled.label(({ theme }) => ({
   display: 'flex',
-  borderBottom: `1px solid ${theme.mainBorderColor}`,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   margin: '0 15px',
   padding: '8px 0',
 

lib/components/src/form/input/input.js

@@ -22,11 +22,11 @@ const styles = ({ theme }) => ({
   ...styleResets,
 
   transition: 'all 200ms ease-out',
-  color: 'inherit',
-  background: theme.inputFill,
-  boxShadow: `${theme.inputBorder} 0 0 0 1px inset`,
-  borderRadius: theme.mainBorderRadius,
-  fontSize: theme.mainTextSize,
+  color: theme.input.color || 'inherit',
+  background: theme.input.background,
+  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+  borderRadius: theme.input.borderRadius,
+  fontSize: theme.typography.size.s2 - 1,
   lineHeight: '20px',
   padding: '.42em 1em', // 32
 
@@ -112,20 +112,15 @@ export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, val
 Textarea.displayName = 'Textarea';
 
 export const Button = withProps({ tertiary: true, small: true, inForm: true })(
-  styled(StyledButton)(
-    sizes,
-    validation,
-    ({ theme }) => ({ borderRadius: theme.mainBorderRadius }),
-    {
-      userSelect: 'none',
-      overflow: 'visible',
-      zIndex: 2,
+  styled(StyledButton)(sizes, validation, ({ theme }) => ({ borderRadius: theme.borderRadius }), {
+    userSelect: 'none',
+    overflow: 'visible',
+    zIndex: 2,
 
-      // overrides the default hover from Button
-      '&:hover': {
-        transform: 'none',
-      },
-    }
-  )
+    // overrides the default hover from Button
+    '&:hover': {
+      transform: 'none',
+    },
+  })
 );
 Button.displayName = 'Button';

lib/components/src/placeholder/placeholder.js

@@ -12,7 +12,7 @@ const Message = styled.div`
   padding: 30px;
   text-align: center;
   color: ${props => props.theme.color.dark};
-  font-size: ${props => props.theme.mainTextSize}px;
+  font-size: ${props => props.theme.typography.size.s2 - 1}px;
 `;
 
 export const Placeholder = ({ children, ...props }) => {

lib/components/src/syntaxhighlighter/syntaxhighlighter.js

@@ -30,8 +30,8 @@ const Wrapper = styled.div(
   ({ theme, bordered }) =>
     bordered
       ? {
-          border: `1px solid ${theme.mainBorderColor}`,
-          borderRadius: theme.mainBorderRadius,
+          border: `1px solid ${theme.appBorderColor}`,
+          borderRadius: theme.borderRadius,
           background: theme.background.bar,
         }
       : {}

lib/components/src/tabs/tabs.js

@@ -11,8 +11,8 @@ const Wrapper = styled.div(
     bordered
       ? {
           backgroundClip: 'padding-box',
-          borderRadius: theme.mainBorderRadius,
-          border: `1px solid ${theme.mainBorderColor}`,
+          borderRadius: theme.borderRadius,
+          border: `1px solid ${theme.appBorderColor}`,
         }
       : {},
   ({ absolute }) =>
@@ -58,7 +58,7 @@ const Content = styled.div(
     position: 'relative',
   },
   ({ theme }) => ({
-    fontSize: theme.mainTextSize,
+    fontSize: theme.typography.size.s2 - 1,
   }),
   ({ absolute }) =>
     absolute

lib/components/src/tooltip/ListItem.js

@@ -123,7 +123,7 @@ const Item = styled.a(
     },
 
     '&:hover': {
-      background: theme.background.select,
+      background: theme.background.hoverable,
     },
     '&:hover svg': {
       opacity: 1,

lib/components/src/tooltip/Tooltip.js

@@ -83,7 +83,7 @@ const Wrapper = styled.div(
             drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
-          borderRadius: theme.mainBorderRadius,
+          borderRadius: theme.borderRadius,
           fontSize: theme.typography.size.s1,
         }
       : {

lib/components/src/typography/DocumentFormatting.js

@@ -14,7 +14,7 @@ const Wrapper = styled.div(
 
     h2 {
       font-size: ${props.theme.typography.size.m2}px;
-      border-bottom: 1px solid ${props.theme.mainBorderColor};
+      border-bottom: 1px solid ${props.theme.appBorderColor};
     }
 
     h3 {
@@ -181,7 +181,7 @@ const Wrapper = styled.div(
 
     hr {
       border: 0 none;
-      color: ${props.theme.mainBorderColor};
+      color: ${props.theme.appBorderColor};
       height: 4px;
       padding: 0;
     }
@@ -303,7 +303,7 @@ const Wrapper = styled.div(
       border-collapse: collapse;
     }
     table tr {
-      border-top: 1px solid ${props.theme.mainBorderColor};
+      border-top: 1px solid ${props.theme.appBorderColor};
       background-color: white;
       margin: 0;
       padding: 0;
@@ -315,14 +315,14 @@ const Wrapper = styled.div(
 
     table tr th {
       font-weight: bold;
-      border: 1px solid ${props.theme.mainBorderColor};
+      border: 1px solid ${props.theme.appBorderColor};
       text-align: left;
       margin: 0;
       padding: 6px 13px;
     }
 
     table tr td {
-      border: 1px solid ${props.theme.mainBorderColor};
+      border: 1px solid ${props.theme.appBorderColor};
       text-align: left;
       margin: 0;
       padding: 6px 13px;

lib/theming/src/base.ts

@@ -1,36 +1,5 @@
 import { easing, animation } from './animation';
 
-export const baseFonts = {
-  fontFamily: [
-    '"Nunito Sans"',
-    '-apple-system',
-    '".SFNSText-Regular"',
-    '"San Francisco"',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    '"Helvetica Neue"',
-    'Helvetica',
-    'Arial',
-    'sans-serif',
-  ].join(', '),
-  WebkitFontSmoothing: 'antialiased',
-};
-
-export const monoFonts = {
-  fontFamily: [
-    '"Operator Mono"',
-    '"Fira Code Retina"',
-    '"Fira Code"',
-    '"FiraCode-Retina"',
-    '"Andale Mono"',
-    '"Lucida Console"',
-    'Consolas',
-    'Monaco',
-    'monospace',
-  ].join(', '),
-  WebkitFontSmoothing: 'antialiased',
-};
-
 export const color = {
   // Official color palette
   primary: '#FF4785', // coral
@@ -38,6 +7,7 @@ export const color = {
   tertiary: '#FAFBFC',
   ancillary: '#22a699', // for code
 
+  // Complimentary
   orange: '#FC521F',
   gold: '#FFAE00',
   green: '#66BF3C',
@@ -56,18 +26,22 @@ export const color = {
   darker: '#444444',
   darkest: '#333333',
 
+  // For borders
   border: 'rgba(0,0,0,.1)',
 
   // Status
   positive: '#66BF3C',
   negative: '#FF4400',
   warning: '#E69D00',
+
+  defaultText: '#333333',
+  inverseText: '#FFFFFF',
 };
 
 export const background = {
   app: '#F6F9FC',
   preview: color.lightest,
-  select: '#e3f3ff',
+  hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
 
   // Notification, error, and warning backgrounds
   positive: '#E1FFD4',
@@ -76,6 +50,31 @@ export const background = {
 };
 
 export const typography = {
+  fonts: {
+    base: [
+      '"Nunito Sans"',
+      '-apple-system',
+      '".SFNSText-Regular"',
+      '"San Francisco"',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      'Helvetica',
+      'Arial',
+      'sans-serif',
+    ].join(', '),
+    mono: [
+      '"Operator Mono"',
+      '"Fira Code Retina"',
+      '"Fira Code"',
+      '"FiraCode-Retina"',
+      '"Andale Mono"',
+      '"Lucida Console"',
+      'Consolas',
+      'Monaco',
+      'monospace',
+    ].join(', '),
+  },
   weight: {
     regular: 400,
     bold: 700,
@@ -98,35 +97,38 @@ export const typography = {
 export type Color = typeof color;
 export type Background = typeof background;
 export type Typography = typeof typography;
-export type Easing = typeof easing;
 export type Animation = typeof animation;
+export type Easing = typeof easing;
+
+export type TextSize = number | string;
+export type Brand = string;
 
 export interface Theme {
   color: Color;
   background: Background;
   typography: Typography;
-  easing: Easing;
   animation: Animation;
+  easing: Easing;
 
-  // main
-  mainBorderColor: string;
-  mainBorderRadius: number;
-  mainTextFace: string;
-  monoTextFace: string;
-  mainTextSize: number;
-  mainTextColor: string;
-  mainTextBgColor: string;
-  inverseTextColor: string;
-  inverseTextBgColor: string;
+  input: {
+    border: string;
+    background: string;
+    color: string;
+    borderRadius: number;
+  };
 
-  inputFill: string;
+  // UI
+  layoutMargin: number;
+  appBorderColor: string;
+  appBorderRadius: number;
 
+  // Toolbar default/active colors
   barTextColor: string;
   barSelectedColor: string;
+  barBgColor: string;
 
-  layoutMargin: number;
-
-  brand: (() => object) | null;
+  // Brand logo/text
+  brand: Brand;
 
   code: {
     [key: string]: string | object;

lib/theming/src/create.ts

@@ -1,4 +1,6 @@
-import { Theme, monoFonts, baseFonts, color, typography } from './base';
+// This generates theme variables in the correct shape for the UI
+
+import { Theme, Brand, color, Color, background, typography } from './base';
 import { easing, animation } from './animation';
 import { create as createSyntax } from './modules/syntax';
 
@@ -6,135 +8,118 @@ interface Rest {
   [key: string]: any;
 }
 
-type TextSize = number | string;
-
-const mono = {
-  monoTextFace: monoFonts.fontFamily,
-};
-
 interface ThemeVar {
-  primary: string;
-  secondary: string;
-  tertiary: string;
-  ancillary: string;
+  colorPrimary?: string;
+  colorSecondary?: string;
+  colorTertiary?: string;
+  colorAncillary?: string;
 
-  mainBorderColor: string;
-  mainBorderRadius: number;
+  // UI
+  appBg?: string;
+  appBorderColor?: string;
+  appBorderRadius?: number;
 
   // Typography
-  mainTextFace: string;
-  monoTextFace: string;
-  mainTextSize: TextSize;
+  fontBase?: string;
+  fontCode?: string;
 
-  // Text colors (dark on light)
-  mainAppBackground: string;
-  mainTextColor: string;
-  mainTextBgColor: string;
+  // Text colors
+  textColor?: string;
+  textInverseColor?: string;
 
-  // Text colors (light on dark)
-  inverseTextColor: string;
-  inverseTextBgColor: string;
+  // Toolbar default and active colors
+  barTextColor?: string;
+  barSelectedColor?: string;
+  barBgColor?: string;
 
-  barTextColor: string;
-  barSelectedColor: string;
+  // Form colors
+  inputBg?: string;
+  inputBorder?: string;
+  inputTextColor?: string;
+  inputBorderRadius?: number;
 
-  inputFill: string;
-  inputBorder: string;
+  brand?: Brand;
 }
 
-const createColors = (vars: ThemeVar) => ({
-  // Official color palette
-  primary: vars.primary,
-  secondary: vars.secondary,
-  tertiary: vars.tertiary,
-  ancillary: vars.ancillary,
+const createColors = (vars: ThemeVar): Color => ({
+  // Changeable colors
+  primary: vars.colorPrimary,
+  secondary: vars.colorSecondary,
+  tertiary: vars.colorTertiary,
+  ancillary: vars.colorAncillary,
 
-  orange: '#FC521F',
-  gold: '#FFAE00',
-  green: '#66BF3C',
-  seafoam: '#37D5D3',
-  purple: '#6F2CAC',
-  ultraviolet: '#2A0481',
+  // Complimentary
+  orange: color.orange,
+  gold: color.gold,
+  green: color.green,
+  seafoam: color.seafoam,
+  purple: color.purple,
+  ultraviolet: color.ultraviolet,
 
   // Monochrome
-  lightest: '#FFFFFF',
-  lighter: '#F8F8F8',
-  light: '#F3F3F3',
-  mediumlight: '#EEEEEE',
-  medium: '#DDDDDD',
-  mediumdark: '#999999',
-  dark: '#666666',
-  darker: '#444444',
-  darkest: '#333333',
+  lightest: color.lightest,
+  lighter: color.lighter,
+  light: color.light,
+  mediumlight: color.mediumlight,
+  medium: color.medium,
+  mediumdark: color.mediumdark,
+  dark: color.dark,
+  darker: color.darker,
+  darkest: color.darkest,
 
-  border: 'rgba(0,0,0,.1)',
+  // For borders
+  border: color.border,
 
   // Status
-  positive: '#66BF3C',
-  negative: '#FF4400',
-  warning: '#E69D00',
+  positive: color.positive,
+  negative: color.negative,
+  warning: color.warning,
+
+  defaultText: vars.textColor || color.darkest,
+  inverseText: vars.textInverseColor || color.lightest,
 });
 
 export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
   color: createColors(vars),
   background: {
-    app: vars.mainAppBackground,
+    app: vars.appBg || background.app,
     preview: color.lightest,
-    select: '#e3f3ff',
+    hoverable: background.hoverable, // TODO: change so it responds to whether appColor is light or dark
 
-    // Notification, error, and warning backgrounds
-    positive: '#E1FFD4',
-    negative: '#FEDED2',
-    warning: '#FFF5CF',
+    positive: background.positive,
+    negative: background.negative,
+    warning: background.warning,
   },
   typography: {
-    weight: {
-      regular: 400,
-      bold: 700,
-      black: 900,
-    },
-    size: {
-      s1: 12,
-      s2: 14,
-      s3: 16,
-      m1: 20,
-      m2: 24,
-      m3: 28,
-      l1: 32,
-      l2: 40,
-      l3: 48,
-      code: 90,
+    fonts: {
+      base: vars.fontBase || typography.fonts.base,
+      mono: vars.fontCode || typography.fonts.mono,
     },
+    weight: typography.weight,
+    size: typography.size,
   },
   animation,
   easing,
 
-  // Layout
-  mainBorderColor: color.border,
-  mainBorderRadius: 4,
-
-  // Typography
-  mainTextFace: baseFonts.fontFamily,
-  monoTextFace: monoFonts.fontFamily,
-  mainTextSize: typography.size.s2 - 1, // 13px
-
-  // Text colors (dark on light)
-  mainTextColor: color.darkest,
-  mainTextBgColor: color.lightest,
-
-  // Text colors (light on dark)
-  inverseTextColor: color.lightest,
-  inverseTextBgColor: color.mediumdark,
-
-  barTextColor: color.mediumdark,
-  barSelectedColor: color.secondary,
+  input: {
+    border: vars.inputBorder || color.border,
+    background: vars.inputBg || color.lightest,
+    color: vars.inputTextColor || color.defaultText,
+    borderRadius: vars.inputBorderRadius || vars.appBorderRadius || 4,
+  },
 
+  // UI
   layoutMargin: 10,
+  appBorderColor: vars.appBorderColor || color.border,
+  appBorderRadius: vars.appBorderRadius || 4,
 
-  inputFill: color.lightest,
-  inputBorder: color.border,
+  // Toolbar default/active colors
+  barTextColor: vars.barTextColor || color.mediumdark,
+  barSelectedColor: vars.barSelectedColor || color.secondary,
+  barBgColor: vars.barBgColor || color.lightest,
 
-  brand: null,
+  // Brand logo/text
+  brand: vars.brand || null,
 
   code: createSyntax({
     colors: {
@@ -149,17 +134,17 @@ export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
       blue1: '#0000ff',
       blue2: '#00009f',
     },
-    mono,
+    mono: vars.fontCode || typography.fonts.mono,
   }),
 
   addonActionsTheme: {
-    BASE_FONT_FAMILY: monoFonts.fontFamily,
+    BASE_FONT_FAMILY: typography.fonts.mono,
     BASE_FONT_SIZE: '11px',
     BASE_LINE_HEIGHT: '14px',
     BASE_BACKGROUND_COLOR: 'white',
     BASE_COLOR: 'black',
     ARROW_COLOR: '#6e6e6e',
-    TREENODE_FONT_FAMILY: monoFonts.fontFamily,
+    TREENODE_FONT_FAMILY: typography.fonts.mono,
     TREENODE_FONT_SIZE: '11px',
     TREENODE_LINE_HEIGHT: '14px',
     TREENODE_PADDING_LEFT: 12,

lib/theming/src/global.ts

@@ -1,4 +1,4 @@
-import { baseFonts, monoFonts, Color, Background, Typography } from './base';
+import { Color, Background, Typography } from './base';
 import memoize from 'memoizerific';
 
 type Value = string | number;
@@ -11,7 +11,7 @@ interface Return {
 export const createReset = memoize(1)(
   ({ typography }: { typography: Typography }): Return => ({
     body: {
-      fontFamily: baseFonts.fontFamily,
+      fontFamily: typography.fonts.base,
       fontSize: typography.size.s3,
       margin: 0,
       overflowY: 'auto',
@@ -62,7 +62,7 @@ export const createReset = memoize(1)(
     },
 
     code: {
-      fontFamily: monoFonts.fontFamily,
+      fontFamily: typography.fonts.mono,
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
       display: 'inline-block',
@@ -74,7 +74,7 @@ export const createReset = memoize(1)(
     },
 
     pre: {
-      fontFamily: monoFonts.fontFamily,
+      fontFamily: typography.fonts.mono,
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
       lineHeight: '18px',

lib/theming/src/modules/syntax.ts

@@ -12,11 +12,11 @@ interface ColorsObjectsHash {
 const convertColors = (colors: ColorsHash): ColorsObjectsHash =>
   Object.entries(colors).reduce((acc, [k, v]) => ({ ...acc, [k]: mkColor(v) }), {});
 
-export const create = ({ colors, mono }: { colors: ColorsHash; mono: { monoTextFace: string } }) => {
+export const create = ({ colors, mono }: { colors: ColorsHash; mono: string }) => {
   const colorsObjs = convertColors(colors);
   return {
     token: {
-      fontFamily: mono.monoTextFace,
+      fontFamily: mono,
       WebkitFontSmoothing: 'antialiased',
 
       '&.comment': { ...colorsObjs.green1, fontStyle: 'italic' },

lib/theming/src/themes/dark.ts

@@ -1,33 +1,41 @@
 import { create } from '../create';
 
-import { color, baseFonts, monoFonts, typography, background } from '../base';
+import { color, typography, background } from '../base';
 
-export default create({
-  primary: '#FF4785', // coral
-  secondary: '#1EA7FD', // ocean
-  tertiary: '#FAFBFC',
-  ancillary: '#22a699', // for code
-
-  mainBorderColor: color.border,
-  mainBorderRadius: 4,
-
-  // Typography
-  mainTextFace: baseFonts.fontFamily,
-  monoTextFace: monoFonts.fontFamily,
-  mainTextSize: typography.size.s2 - 1, // 13px
-
-  // Text colors (dark on light)
-  mainAppBackground: background.app,
-  mainTextColor: color.darkest,
-  mainTextBgColor: color.lightest,
-
-  // Text colors (light on dark)
-  inverseTextColor: color.lightest,
-  inverseTextBgColor: color.mediumdark,
-
-  barTextColor: color.mediumdark,
-  barSelectedColor: color.secondary,
-
-  inputFill: color.lightest,
-  inputBorder: color.border,
-});
+// export default create({
+//   // Storybook-specific color palette
+//   color: {
+//     primary: '#FF4785', // coral
+//     secondary: '#1EA7FD', // ocean
+//     tertiary: '#FAFBFC', // neutral buttons
+//     ancillary: '#22a699', // for code
+//   },
+//
+//   // UI colors
+//   bgApp: background.app,
+//   bgHoverItem: background.hoverable,
+//   borderColor: color.border,
+//   borderRadius: 4,
+//
+//   // Typography
+//   baseFont: typography.fonts.base,
+//   codeFont: typography.fonts.mono,
+//   mainTextSize: typography.size.s2 - 1, // 13px
+//
+//
+//
+//   // Text colors (dark on light)
+//
+//   mainTextColor: color.darkest,
+//   mainTextBgColor: color.lightest,
+//
+//   // Text colors (light on dark)
+//   inverseTextColor: color.lightest,
+//   inverseTextBgColor: color.mediumdark,
+//
+//   barTextColor: color.mediumdark,
+//   barSelectedColor: color.secondary,
+//
+//   inputFill: color.lightest,
+//   inputBorder: color.border,
+// });

lib/theming/src/themes/light.ts

@@ -1,33 +1,38 @@
 import { create } from '../create';
 
-import { color, baseFonts, monoFonts, typography, background } from '../base';
+import { color, typography, background } from '../base';
 
 export default create({
-  primary: '#FF4785', // coral
-  secondary: '#1EA7FD', // ocean
-  tertiary: '#FAFBFC',
-  ancillary: '#22a699', // for code
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785', // coral
+  colorSecondary: '#1EA7FD', // ocean
+  colorTertiary: '#FAFBFC', // neutral buttons
+  colorAncillary: '#22a699', // for code
 
-  mainBorderColor: color.border,
-  mainBorderRadius: 4,
+  // UI
+  appBg: background.app,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
 
-  // Typography
-  mainTextFace: baseFonts.fontFamily,
-  monoTextFace: monoFonts.fontFamily,
-  mainTextSize: typography.size.s2 - 1, // 13px
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
 
-  // Text colors (dark on light)
-  mainAppBackground: background.app,
-  mainTextColor: color.darkest,
-  mainTextBgColor: color.lightest,
-
-  // Text colors (light on dark)
-  inverseTextColor: color.lightest,
-  inverseTextBgColor: color.mediumdark,
+  // Text colors
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
 
+  // Toolbar default and active colors
   barTextColor: color.mediumdark,
   barSelectedColor: color.secondary,
+  barBgColor: color.lightest,
 
-  inputFill: color.lightest,
+  // Form colors
+  inputBg: color.lightest,
   inputBorder: color.border,
+  inputTextColor: color.darkest,
+  inputBorderRadius: 4,
+
+  // Brand logo/text
+  brand: null,
 });

lib/ui/src/components/layout/container.js

@@ -41,22 +41,22 @@ const Pane = styled.div(
     switch (border) {
       case 'left': {
         return {
-          borderLeft: `1px solid ${theme.mainBorderColor}`,
+          borderLeft: `1px solid ${theme.appBorderColor}`,
         };
       }
       case 'right': {
         return {
-          borderRight: `1px solid ${theme.mainBorderColor}`,
+          borderRight: `1px solid ${theme.appBorderColor}`,
         };
       }
       case 'top': {
         return {
-          borderTop: `1px solid ${theme.mainBorderColor}`,
+          borderTop: `1px solid ${theme.appBorderColor}`,
         };
       }
       case 'bottom': {
         return {
-          borderBottom: `1px solid ${theme.mainBorderColor}`,
+          borderBottom: `1px solid ${theme.appBorderColor}`,
         };
       }
       default: {
@@ -90,7 +90,7 @@ const Paper = styled.div(
         }
       : {
           background: 'white',
-          borderRadius: theme.mainBorderRadius,
+          borderRadius: theme.borderRadius,
           overflow: 'hidden',
           boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
         }

lib/ui/src/components/layout/draggers.js

@@ -11,7 +11,7 @@ const Handle = styled.div(
     justifyContent: 'center',
     alignItems: 'center',
 
-    color: isDragging ? theme.color.secondary : theme.mainBorderColor,
+    color: isDragging ? theme.color.secondary : theme.appBorderColor,
 
     overflow: 'hidden',
     transition:

lib/ui/src/components/sidebar/SidebarSearch.js

@@ -37,7 +37,7 @@ const CancelButton = styled.button(({ theme }) => ({
   padding: 4,
   textDecoration: 'none',
 
-  background: theme.mainBorderColor,
+  background: theme.appBorderColor,
   borderRadius: '1em',
   cursor: 'pointer',
   opacity: 1,
@@ -57,7 +57,7 @@ const CancelButton = styled.button(({ theme }) => ({
   },
 
   '&:hover': {
-    background: opacify(0.1, theme.mainBorderColor),
+    background: opacify(0.1, theme.appBorderColor),
     '> svg': {
       color: theme.color.darker,
     },
@@ -67,13 +67,13 @@ const CancelButton = styled.button(({ theme }) => ({
 const FilterForm = styled.form(({ theme, focussed }) => ({
   transition: 'all 150ms ease-out',
   borderBottom: focussed ? `1px solid transparent` : '1px solid transparent',
-  borderBottomColor: focussed ? theme.color.dark : opacify(0.1, theme.mainBorderColor),
+  borderBottomColor: focussed ? theme.color.dark : opacify(0.1, theme.appBorderColor),
   outline: 0,
   position: 'relative',
 
   input: {
     color: theme.color.darkest,
-    fontSize: theme.mainTextSize,
+    fontSize: theme.typography.size.s2 - 1,
     lineHeight: '20px',
     paddingTop: '2px',
     paddingBottom: '2px',

lib/ui/src/settings/SettingsFooter.js

@@ -7,7 +7,7 @@ const Footer = styled.div(({ theme }) => ({
   display: 'flex',
   paddingTop: 20,
   marginTop: 20,
-  borderTop: `1px solid ${theme.mainBorderColor}`,
+  borderTop: `1px solid ${theme.appBorderColor}`,
   fontWeight: theme.typography.weight.bold,
 
   '& > * + *': {

lib/ui/src/settings/about.js

@@ -68,8 +68,8 @@ const UpdateMessage = styled.div(
     height: 40,
     padding: '10px 20px',
     marginBottom: 24,
-    borderRadius: theme.mainBorderRadius,
-    border: `1px solid ${theme.mainBorderColor}`,
+    borderRadius: theme.borderRadius,
+    border: `1px solid ${theme.appBorderColor}`,
     textAlign: 'center',
   })
 );
@@ -82,7 +82,7 @@ const ErrorMessage = styled.div(({ theme }) => ({
 const Upgrade = styled.div(({ theme }) => ({
   marginTop: 20,
   paddingBottom: 20,
-  borderTop: `1px solid ${theme.mainBorderColor}`,
+  borderTop: `1px solid ${theme.appBorderColor}`,
 }));
 
 const Container = styled.div({

lib/ui/src/settings/shortcuts.js

@@ -37,7 +37,7 @@ export const GridHeaderRow = styled.div({
 
 export const Row = styled.div(({ theme }) => ({
   padding: '6px 0',
-  borderTop: `1px solid ${theme.mainBorderColor}`,
+  borderTop: `1px solid ${theme.appBorderColor}`,
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 0px',
 }));