fix light theme

timsuchanek · timsuchanek · commit 3bc901141e2d · 2018-04-12T15:16:57.000+02:00
diff --git a/packages/graphql-playground-react/package.json b/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",
diff --git a/packages/graphql-playground-react/release.sh b/packages/graphql-playground-react/release.sh
@@ -2,7 +2,7 @@
 
 set -e
 
-npm publish
+#npm publish
 
 curl -X POST \
   http://purge.jsdelivr.net/ \
diff --git a/packages/graphql-playground-react/src/components/Playground/Tab.tsx b/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;
           }
diff --git a/packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx b/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,
 })
 
diff --git a/packages/graphql-playground-react/src/components/ProjectsSideNav.tsx b/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;
diff --git a/packages/graphql-playground-react/src/components/ProjectsSideNavItem.tsx b/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};
   }
 `
diff --git a/packages/graphql-playground-react/src/state/workspace/reducers.ts b/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',
+)
diff --git a/packages/graphql-playground-react/src/styled/theme.ts b/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 {
diff --git a/packages/graphql-playground-react/src/styles/graphiql_dark.css b/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;
diff --git a/packages/graphql-playground-react/src/styles/graphiql_light.css b/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 {
diff --git a/packages/graphql-playground-react/tsconfig.json b/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"
   ]
-}
+}
diff --git a/packages/graphql-playground-react/yarn.lock b/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"

Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {`
`75`	`75`	`margin-left: 0;`
`76`	`76`	`}`
`77`	`77`	`.light.tab {`
	`78`	`+ color: $darkBlue80;`
`78`	`79`	`background-color: #e7eaec;`
`79`	`80`	`&.active {`
`80`	`81`	`background-color: #eeeff0;`
`@@ -144,6 +145,12 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {`
`144`	`145`	`@p: .o100;`
`145`	`146`	`}`
`146`	`147`	`}`
	`148`	`+`
	`149`	`+ .light.tab .operation-name,`
	`150`	`+ .light.tab :global(input) {`
	`151`	`+ color: $darkBlue80;`
	`152`	`+ }`
	`153`	`+`
`147`	`154`	`.tab :global(input) {`
`148`	`155`	`opacity: 1 !important;`
`149`	`156`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import * as React from 'react'`
`2`	`2`	`import * as cx from 'classnames'`
`3`	`3`	`import { styled } from '../styled/index'`
	`4`	`+import * as theme from 'styled-theming'`
`4`	`5`
`5`	`6`	`export interface Props {`
`6`	`7`	`env: string`
`@@ -36,6 +37,16 @@ export default class ProjectsSideNavItem extends React.Component<Props, {}> {`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`
	`40`	`+const textColor = theme('mode', {`
	`41`	`+ light: p => p.theme.colours.darkBlue80,`
	`42`	`+ dark: p => p.theme.colours.white,`
	`43`	`+})`
	`44`	`+`
	`45`	`+const backgroundColor = theme('mode', {`
	`46`	`+ light: p => p.theme.colours.lighterGrey,`
	`47`	`+ dark: p => p.theme.colours.darkBlue,`
	`48`	`+})`
	`49`	`+`
`39`	`50`	const ListItem = styled.div`
`40`	`51`	`padding: 10px 10px;`
`41`	`52`	`font-weight: 600;`
@@ -55,7 +66,7 @@ const ListItem = styled.div`
`55`	`66`	`padding-right: 10px;`
`56`	`67`	`}`
`57`	`68`	`&.active {`
`58`		`- background: ${p => p.theme.colours.darkBlue};`
	`69`	`+ background: ${backgroundColor};`
`59`	`70`	`position: relative;`
`60`	`71`	`&:before {`
`61`	`72`	`content: '';`
@@ -69,9 +80,9 @@ const ListItem = styled.div`
`69`	`80`	`}`
`70`	`81`	`}`
`71`	`82`	`&:hover {`
`72`		`- background: ${p => p.theme.colours.darkBlue};`
	`83`	`+ background: ${backgroundColor};`
`73`	`84`	`.count {`
`74`		`- color: white;`
	`85`	`+ color: ${textColor};`
`75`	`86`	`}`
`76`	`87`	`}`
`77`	`88`	`
@@ -90,6 +101,6 @@ const Count = styled.div`
`90`	`101`	`color: rgba(255, 255, 255, 0.3);`
`91`	`102`	`transition: 0.1s linear all;`
`92`	`103`	`&.active {`
`93`		`- color: white;`
	`104`	`+ color: ${textColor};`
`94`	`105`	`}`
`95`	`106`	`
Original file line number	Diff line number	Diff line change
`@@ -152,4 +152,7 @@ function normalizeSettings(settings) {`
`152`	`152`	`return settings`
`153`	`153`	`}`
`154`	`154`
`155`		`-export const getTheme = createSelector([getSettings], s => s.theme \|\| 'dark')`
	`155`	`+export const getTheme = createSelector(`
	`156`	`+ [getSettings],`
	`157`	`+ s => s['editor.theme'] \|\| 'dark',`
	`158`	`+)`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@ export interface Colours {`
`21`	`21`	`paleGrey: string`
`22`	`22`	`red: string`
`23`	`23`	`purple: string`
	`24`	`+ lightGrey: string`
	`25`	`+ lighterGrey: string`
`24`	`26`	`}`
`25`	`27`
`26`	`28`	`export const colours: Colours = {`
`@@ -47,6 +49,8 @@ export const colours: Colours = {`
`47`	`49`
`48`	`50`	`paleText: 'rgba(0, 0, 0, 0.5)',`
`49`	`51`	`paleGrey: '#f3f4f4', // use for bgs, borders, etc`
	`52`	`+ lightGrey: '#eeeff0',`
	`53`	`+ lighterGrey: '#f6f7f7',`
`50`	`54`	`}`
`51`	`55`
`52`	`56`	`export interface Sizes {`
Original file line number	Diff line number	Diff line change
`@@ -242,7 +242,7 @@`
`242`	`242`	`.docs-graphiql .variable-editor .cm-variable,`
`243`	`243`	`.docs-graphiql .variable-editor .cm-punctuation,`
`244`	`244`	`.docs-graphiql .variable-editor .cm-string {`
`245`		`- color: rgb(28, 191, 50);`
	`245`	`+ color: #328c8c;`
`246`	`246`	`}`
`247`	`247`
`248`	`248`	`.docs-graphiql .graphiql-container .codemirrorWrap {`