Dynamic themes for playground (#733)

* New styles

* Almost finished

* Tabs

* Finished dynamic styling

Author: huv1k

packages/graphql-playground-react/.babelrc

@@ -1,12 +1,4 @@
 {
-  "presets": [
-    "es2015",
-    "es2016",
-    "react"
-  ],
-  "plugins": [
-    "styled-jsx-postcss/babel",
-    "babel-plugin-styled-components",
-    "babel-plugin-polished"
-  ]
+  "presets": ["es2015", "es2016", "react"],
+  "plugins": ["styled-jsx-postcss/babel", "babel-plugin-styled-components"]
 }

packages/graphql-playground-react/package.json

@@ -50,7 +50,6 @@
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
     "babel-loader": "7.1.4",
-    "babel-plugin-polished": "1.1.0",
     "babel-plugin-styled-components": "1.5.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-es2016": "6.24.1",
@@ -137,7 +136,6 @@
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^8.4.1",
     "marked": "^0.3.19",
-    "polished": "^1.9.0",
     "postcss-modules": "^1.1.0",
     "prettier": "^1.13.0",
     "prop-types": "^15.6.0",
@@ -164,10 +162,9 @@
     "redux-saga": "^0.16.0",
     "reselect": "^3.0.1",
     "seamless-immutable": "^7.0.1",
-    "styled-components": "^3.1.6",
+    "styled-components": "^3.3.2",
     "styled-jsx": "^2.2.1",
     "styled-jsx-postcss": "timsuchanek/styled-jsx-postcss#build3",
-    "styled-theming": "^2.2.0",
     "subscriptions-transport-ws": "^0.9.5",
     "utility-types": "^1.0.0",
     "webpack-bundle-analyzer": "^2.9.2",

packages/graphql-playground-react/src/components/FileEditor.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { styled } from '../styled'
-import * as theme from 'styled-theming'
 import { QueryEditor } from './Playground/QueryEditor'
 import { createStructuredSelector } from 'reselect'
 import { getFile } from '../state/sessions/selectors'
@@ -41,13 +40,8 @@ export default connect(
   { onChange: editFile },
 )(FileEditor)
 
-const backgroundColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue10,
-  dark: p => p.theme.colours.darkBlue,
-})
-
 const Wrapper = styled.div`
-  background: ${backgroundColor};
+  background: ${p => p.theme.editorColours.resultBackground};
   position: relative;
   .variable-editor {
     height: 100% !important;

packages/graphql-playground-react/src/components/HistoryPopup.tsx

@@ -5,11 +5,8 @@ import { HistoryFilter } from '../types'
 import HistoryItems from './HistoryPopup/HistoryItems'
 import { Icon } from 'graphcool-styles'
 import { modalStyle } from '../constants'
-import { withTheme, LocalThemeInterface } from './Theme'
-import * as cn from 'classnames'
 import { QueryEditor } from './Playground/QueryEditor'
 import { styled } from '../styled'
-import * as theme from 'styled-theming'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { getHistory } from '../state/history/selectors'
@@ -35,11 +32,8 @@ export interface State {
   searchTerm: string
 }
 
-class HistoryPopup extends React.Component<
-  ReduxProps & LocalThemeInterface,
-  State
-> {
-  constructor(props: ReduxProps & LocalThemeInterface) {
+class HistoryPopup extends React.Component<ReduxProps, State> {
+  constructor(props: ReduxProps) {
     super(props)
     const selectedItemIndex = props.items.keySeq().first() || ''
     this.state = {
@@ -50,7 +44,6 @@ class HistoryPopup extends React.Component<
   }
   render() {
     const { searchTerm, selectedFilter } = this.state
-    const { localTheme } = this.props
     const items = this.props.items.filter(item => {
       return selectedFilter === 'STARRED'
         ? item.starred
@@ -65,25 +58,15 @@ class HistoryPopup extends React.Component<
     ) as any
     selectedItem =
       selectedItem && selectedItem.toJS ? selectedItem.toJS() : undefined
-    let customModalStyle = modalStyle
-    if (localTheme === 'light') {
-      customModalStyle = {
-        ...modalStyle,
-        overlay: {
-          ...modalStyle.overlay,
-          backgroundColor: 'rgba(255,255,255,0.9)',
-        },
-      }
-    }
 
     return (
       <Modal
         isOpen={this.props.isOpen}
         onRequestClose={this.props.closeHistory}
         contentLabel="GraphiQL Session History"
-        style={customModalStyle}
+        style={modalStyle}
       >
-        <Wrapper className={localTheme}>
+        <Wrapper>
           <Left>
             <HistoryHeader
               onSelectFilter={this.handleSelectFilter}
@@ -113,16 +96,8 @@ class HistoryPopup extends React.Component<
                   />
                 </Use>
               </RightHeader>
-              <Big
-                className={cn({
-                  'docs-graphiql': localTheme === 'light',
-                })}
-              >
-                <GraphiqlWrapper
-                  className={cn({
-                    'graphiql-wrapper': localTheme === 'light',
-                  })}
-                >
+              <Big>
+                <GraphiqlWrapper>
                   <Container>
                     <QueryWrap>
                       <QueryEditor value={selectedItem.query} />
@@ -168,17 +143,15 @@ const mapStateToProps = createStructuredSelector({
   isOpen: getHistoryOpen,
 })
 
-export default withTheme<{}>(
-  connect(
-    mapStateToProps,
-    {
-      closeHistory,
-      openHistory,
-      duplicateSession,
-      toggleHistoryItemStarring,
-    },
-  )(HistoryPopup),
-)
+export default connect(
+  mapStateToProps,
+  {
+    closeHistory,
+    openHistory,
+    duplicateSession,
+    toggleHistoryItemStarring,
+  },
+)(HistoryPopup)
 
 const Wrapper = styled.div`
   display: flex;
@@ -196,11 +169,6 @@ const Right = styled.div`
   z-index: 2;
 `
 
-const rightBackgroundColor = theme('mode', {
-  light: '#f6f7f7',
-  dark: p => p.theme.colours.darkBlue,
-})
-
 const RightHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -211,7 +179,7 @@ const RightHeader = styled.div`
   padding-top: 20px;
   padding-bottom: 20px;
 
-  background: ${rightBackgroundColor};
+  background: ${p => p.theme.editorColours.resultBackground};
 `
 
 const RightEmpty = styled.div`
@@ -220,17 +188,12 @@ const RightEmpty = styled.div`
   justify-content: center;
   align-items: center;
 
-  background: ${rightBackgroundColor};
+  background: ${p => p.theme.editorColours.resultBackground};
 `
 
-const color = theme('mode', {
-  dark: p => p.theme.colours.white60,
-  light: p => p.theme.colours.darkBlue60,
-})
-
 const RightEmptyText = styled.div`
   font-size: 16px;
-  color: ${color};
+  color: ${p => p.theme.editorColours.text};
 `
 
 const View = styled.div`

packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx

@@ -7,12 +7,8 @@
  */
 
 import * as React from 'react'
-import * as cx from 'classnames'
-import { withTheme, LocalThemeInterface } from '../Theme'
 import ExecuteButtonOperation from './ExecuteButtonOperation'
 import { withProps, styled } from '../../styled'
-import * as theme from 'styled-theming'
-import { mix, lighten } from 'polished'
 import { connect } from 'react-redux'
 import { runQuery, stopQuery } from '../../state/sessions/actions'
 import { createStructuredSelector } from 'reselect'
@@ -44,10 +40,7 @@ let firstTime = true
  * What a nice round shiny button. Shows a drop-down when there are multiple
  * queries to run.
  */
-class ExecuteButton extends React.Component<
-  LocalThemeInterface & ReduxProps,
-  State
-> {
+class ExecuteButton extends React.Component<ReduxProps, State> {
   constructor(props) {
     super(props)
 
@@ -102,10 +95,9 @@ class ExecuteButton extends React.Component<
     )
 
     return (
-      <Wrapper className={this.props.localTheme}>
+      <Wrapper>
         <Button
-          className={cx(this.props.localTheme)}
-          isRunning={String(this.props.queryRunning)}
+          isRunning={this.props.queryRunning}
           onMouseDown={onMouseDown}
           onClick={onClick}
           title="Execute Query (Ctrl-Enter)"
@@ -193,12 +185,10 @@ const mapStateToProps = createStructuredSelector({
   sessionId: getSelectedSessionIdFromRoot,
 })
 
-export default withTheme<{}>(
-  connect(
-    mapStateToProps,
-    { runQuery, stopQuery },
-  )(toJS(ExecuteButton)),
-)
+export default connect(
+  mapStateToProps,
+  { runQuery, stopQuery },
+)(toJS(ExecuteButton))
 
 const Wrapper = styled.div`
   position: absolute;
@@ -208,35 +198,8 @@ const Wrapper = styled.div`
   margin: 0 14px 0 28px;
 `
 
-const buttonBackground = theme.variants('mode', 'isRunning', {
-  true: {
-    light: p => p.theme.colours.red,
-    dark: p => p.theme.colours.red,
-  },
-  false: {
-    dark: 'rgb(185, 191, 196)',
-    light: p => mix(0.6, p.theme.colours.darkBlue, 'white'),
-  },
-})
-
-const buttonBackgroundHover = theme.variants('mode', 'isRunning', {
-  true: {
-    light: p => lighten(0.1, p.theme.colours.red),
-    dark: p => lighten(0.1, p.theme.colours.red),
-  },
-  false: {
-    dark: 'rgb(195, 201, 206)',
-    light: p => mix(0.8, p.theme.colours.darkBlue, 'white'),
-  },
-})
-
-const buttonBorderColor = theme('mode', {
-  light: '#eeeff0',
-  dark: 'rgb(11, 20, 28)',
-})
-
 interface ButtonProps {
-  isRunning: string
+  isRunning: boolean
 }
 
 const Button = withProps<ButtonProps>()(styled.div)`
@@ -249,16 +212,22 @@ const Button = withProps<ButtonProps>()(styled.div)`
 
   border-radius: 100%;
   transition: background-color 100ms;
-  background-color: ${buttonBackground};
-  border: 6px solid ${buttonBorderColor};
+  background-color: ${p =>
+    p.isRunning
+      ? p.theme.editorColours.executeButtonSubscription
+      : p.theme.editorColours.executeButton};
+  border: 6px solid ${p => p.theme.editorColours.executeButtonBorder};
   cursor: pointer;
 
   svg {
     fill: ${p => (p.theme.mode === 'light' ? 'white' : 'inherit')};
   }
 
   &:hover {
-    background-color: ${buttonBackgroundHover};
+    background-color:${p =>
+      p.isRunning
+        ? p.theme.editorColours.executeButtonSubscriptionHover
+        : p.theme.editorColours.executeButtonHover};
   }
 `
 

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -715,7 +715,9 @@ const VariableEditorSubtitle = withProps<TitleProps>()(styled.span)`
   margin-right: 10px;
   cursor: pointer;
   color: ${p =>
-    p.isOpen ? p.theme.colours.text : p.theme.colours.textInactive};
+    p.isOpen
+      ? p.theme.editorColours.drawerText
+      : p.theme.editorColours.drawerTextInactive};
 `
 
 const ResponseTracking = styled(BottomDrawer)`
@@ -728,7 +730,7 @@ const ResponseTrackingTitle = withProps<TitleProps>()(
   text-align: right;
   background: ${p => p.theme.editorColours.rightDrawerBackground};
   cursor: ${props => (props.isOpen ? 's-resize' : 'n-resize')};
-  color: ${p => p.theme.colours.textInactive};
+  color: ${p => p.theme.editorColours.drawerTextInactive};
 `
 
 interface QueryProps {
@@ -760,7 +762,7 @@ const Intro = styled.div`
 const Listening = styled.div`
   position: absolute;
   bottom: 0;
-  color: ${p => p.theme.colours.text};
+  color: ${p => p.theme.editorColours.text};
   background: ${p => p.theme.editorColours.resultBackground};
   font-size: ${p => p.theme.sizes.small16};
   font-family: ${p => p.theme.settings['editor.fontFamily']};

packages/graphql-playground-react/src/components/Playground/ResponseTracing.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
-import { $v } from 'graphcool-styles'
 import TracingRow from './TracingRow'
-import * as theme from 'styled-theming'
 import styled from '../../styled/styled'
 import { createStructuredSelector } from 'reselect'
 import {
@@ -38,16 +36,11 @@ export interface ReduxProps {
   queryRunning: boolean
 }
 
-const textColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue60,
-  dark: p => p.theme.colours.white,
-})
-
 const TracingWrapper = styled.div`
   padding-top: 16px;
   padding-left: 25px;
   padding-right: 25px;
-  color: ${textColor};
+  color: ${p => p.theme.editorColours.text};
   overflow: auto;
   position: relative;
   height: 100%;
@@ -58,7 +51,7 @@ const ReRun = styled.div`
 `
 const NotSupported = styled.div`
   font-size: 14px;
-  color: ${$v.lightOrange};
+  color: rgba(241, 143, 1, 1);
 `
 
 const TracingRows = styled.div`