fix light theme

packages/graphql-playground-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-react",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
@@ -116,7 +116,7 @@
   "dependencies": {
     "apollo-link": "^1.0.7",
     "apollo-link-http": "^1.3.2",
-    "apollo-link-ws": "^1.0.7",
+    "apollo-link-ws": "1.0.4",
     "calculate-size": "^1.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.36.0",

packages/graphql-playground-react/release.sh

@@ -2,7 +2,7 @@
 
 set -e
 
-npm publish
+#npm publish
 
 curl -X POST \
   http://purge.jsdelivr.net/ \

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

@@ -75,6 +75,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
             margin-left: 0;
           }
           .light.tab {
+            color: $darkBlue80;
             background-color: #e7eaec;
             &.active {
               background-color: #eeeff0;
@@ -144,6 +145,12 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
               @p: .o100;
             }
           }
+
+          .light.tab .operation-name,
+          .light.tab :global(input) {
+            color: $darkBlue80;
+          }
+
           .tab :global(input) {
             opacity: 1 !important;
           }

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

@@ -173,7 +173,7 @@ const inactiveFontColor = theme('mode', {
 })
 
 const fontColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue60,
+  light: p => p.theme.colours.darkBlue80,
   dark: p => p.theme.colours.white60,
 })
 

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

@@ -126,32 +126,34 @@ const mapStateToProps = createStructuredSelector({
 export default connect(mapStateToProps, { openConfigTab })(ProjectsSideNav)
 
 const textColor = theme('mode', {
-  light: p => p.theme.colours.white,
+  light: p => p.theme.colours.darkBlue80,
   dark: p => p.theme.colours.white,
 })
 
 const backgroundColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue,
+  light: p => p.theme.colours.lightGrey,
   dark: p => p.theme.colours.darkBlue,
 })
 
 const darkerBackgroundColor = theme('mode', {
-  light: p => p.theme.colours.darkerBlue,
+  // light: p => '#dbdee0',
+  light: p => p.theme.colours.lightGrey,
   dark: p => p.theme.colours.darkerBlue,
 })
 
 const borderColor = theme('mode', {
-  light: p => p.theme.colours.darkestBlue,
+  light: p => '#dbdee0',
+  // light: p => p.theme.colours.lightGrey,
   dark: p => p.theme.colours.darkestBlue,
 })
 
 const footerBackgroundColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue,
+  light: p => p.theme.colours.lighterGrey,
   dark: p => p.theme.colours.darkBlue,
 })
 
 const buttonFontColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue,
+  light: p => p.theme.colours.lightGrey,
   dark: p => p.theme.colours.darkBlue,
 })
 
@@ -166,12 +168,12 @@ const buttonHoverBackgroundColor = theme('mode', {
 })
 
 const iconColor = theme('mode', {
-  light: p => p.theme.colours.white20,
+  light: p => p.theme.colours.darkBlue20,
   dark: p => p.theme.colours.white20,
 })
 
 const iconColorActive = theme('mode', {
-  light: p => p.theme.colours.white60,
+  light: p => p.theme.colours.darkBlue60,
   dark: p => p.theme.colours.white60,
 })
 
@@ -184,10 +186,7 @@ const SideNav = styled.div`
   background: ${backgroundColor};
   flex: 0 222px;
   color: ${textColor};
-
-    @p: .white, .relative, .bgDarkBlue;
-    border-right: 6px solid ${borderColor};
-  }
+  border-right: 6px solid ${borderColor};
   .left-content.light {
     @p: .bgWhite70, .black60;
   }
@@ -212,7 +211,7 @@ const List = styled.div`
 const Title = styled.div`
   font-size: 16px;
   font-weight: 600;
-  color: white;
+  color: ${textColor};
 `
 
 const TitleRow = styled.div`
@@ -241,7 +240,7 @@ const TitleRow = styled.div`
 
 const ProjectName = styled.div`
   font-size: 14px;
-  color: white;
+  color: ${textColor};
   font-weight: 600;
   letter-spacing: 0.53px;
   margin-left: 30px;

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as cx from 'classnames'
 import { styled } from '../styled/index'
+import * as theme from 'styled-theming'
 
 export interface Props {
   env: string
@@ -36,6 +37,16 @@ export default class ProjectsSideNavItem extends React.Component<Props, {}> {
   }
 }
 
+const textColor = theme('mode', {
+  light: p => p.theme.colours.darkBlue80,
+  dark: p => p.theme.colours.white,
+})
+
+const backgroundColor = theme('mode', {
+  light: p => p.theme.colours.lighterGrey,
+  dark: p => p.theme.colours.darkBlue,
+})
+
 const ListItem = styled.div`
   padding: 10px 10px;
   font-weight: 600;
@@ -55,7 +66,7 @@ const ListItem = styled.div`
     padding-right: 10px;
   }
   &.active {
-    background: ${p => p.theme.colours.darkBlue};
+    background: ${backgroundColor};
     position: relative;
     &:before {
       content: '';
@@ -69,9 +80,9 @@ const ListItem = styled.div`
     }
   }
   &:hover {
-    background: ${p => p.theme.colours.darkBlue};
+    background: ${backgroundColor};
     .count {
-      color: white;
+      color: ${textColor};
     }
   }
 `
@@ -90,6 +101,6 @@ const Count = styled.div`
   color: rgba(255, 255, 255, 0.3);
   transition: 0.1s linear all;
   &.active {
-    color: white;
+    color: ${textColor};
   }
 `

packages/graphql-playground-react/src/state/workspace/reducers.ts

@@ -152,4 +152,7 @@ function normalizeSettings(settings) {
   return settings
 }
 
-export const getTheme = createSelector([getSettings], s => s.theme || 'dark')
+export const getTheme = createSelector(
+  [getSettings],
+  s => s['editor.theme'] || 'dark',
+)

packages/graphql-playground-react/src/styled/theme.ts

@@ -21,6 +21,8 @@ export interface Colours {
   paleGrey: string
   red: string
   purple: string
+  lightGrey: string
+  lighterGrey: string
 }
 
 export const colours: Colours = {
@@ -47,6 +49,8 @@ export const colours: Colours = {
 
   paleText: 'rgba(0, 0, 0, 0.5)',
   paleGrey: '#f3f4f4', // use for bgs, borders, etc
+  lightGrey: '#eeeff0',
+  lighterGrey: '#f6f7f7',
 }
 
 export interface Sizes {

packages/graphql-playground-react/src/styles/graphiql_dark.css

@@ -371,6 +371,7 @@
   font-family: 'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono',
     'Monaco', monospace;
   font-size: 14px;
+  font-weight: 500;
   height: 100%;
   left: 0;
   position: absolute;

packages/graphql-playground-react/src/styles/graphiql_light.css

@@ -242,7 +242,7 @@
 .docs-graphiql .variable-editor .cm-variable,
 .docs-graphiql .variable-editor .cm-punctuation,
 .docs-graphiql .variable-editor .cm-string {
-  color: rgb(28, 191, 50);
+  color: #328c8c;
 }
 
 .docs-graphiql .graphiql-container .codemirrorWrap {

packages/graphql-playground-react/tsconfig.json

@@ -13,6 +13,7 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": false,
+    "skipLibCheck": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
@@ -29,4 +30,4 @@
     "examples",
     "build"
   ]
-}
+}

packages/graphql-playground-react/yarn.lock

@@ -159,10 +159,6 @@
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.0.tgz#b85a0bcf1e1cc84eb4901b7e96966aedc6f078d1"
 
-"@types/node@^9.4.6":
-  version "9.6.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.4.tgz#0ef7b4cfc3499881c81e0ea1ce61a23f6f4f5b42"
-
 "@types/podium@*":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/podium/-/podium-1.0.0.tgz#bfaa2151be2b1d6109cc69f7faa9dac2cba3bb20"
@@ -334,11 +330,11 @@ apollo-link-http@^1.3.2:
   dependencies:
     apollo-link "^1.0.7"
 
-apollo-link-ws@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.7.tgz#6cc3903cbfbbefe213ea9fc8121f5fed3cef1823"
+apollo-link-ws@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.4.tgz#d0067aa0204470dbd3955aa5204f8dd72d389350"
   dependencies:
-    apollo-link "^1.2.1"
+    apollo-link "^1.0.7"
 
 apollo-link@^1.0.7:
   version "1.0.7"
@@ -348,14 +344,6 @@ apollo-link@^1.0.7:
     apollo-utilities "^1.0.0"
     zen-observable "^0.6.0"
 
-apollo-link@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
-  dependencies:
-    "@types/node" "^9.4.6"
-    apollo-utilities "^1.0.0"
-    zen-observable-ts "^0.8.6"
-
 apollo-utilities@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.4.tgz#560009ea5541b9fdc4ee07ebb1714ee319a76c15"
@@ -8966,16 +8954,10 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
-zen-observable-ts@^0.8.6:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.8.tgz#1a586dc204fa5632a88057f879500e0d2ba06869"
-  dependencies:
-    zen-observable "^0.7.0"
-
 zen-observable@^0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.6.1.tgz#01dbed3bc8d02cbe9ee1112c83e04c807f647244"
 
-zen-observable@^0.7.0, zen-observable@^0.7.1:
+zen-observable@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.7.1.tgz#f84075c0ee085594d3566e1d6454207f126411b3"