Merge pull request #44 from skellock/window-styling

Updates the window styling & color variables.

Author: skellock

src/main/main-window/main-window.ts

@@ -29,9 +29,11 @@ export function createMainWindow(appPath: string) {
     y: windowState.y,
     show: false,
     useContentSize: true,
-    titleBarStyle: 'hidden',
+    titleBarStyle: 'hidden-inset',
     autoHideMenuBar: true,
-    backgroundColor: '#fff',
+    // backgroundColor: '#fff',
+    vibrancy: 'light',
+    transparent: true,
     title: app.getName(),
     webPreferences: {
       backgroundThrottling: false,

src/renderer/features/app/app.tsx

@@ -1,19 +1,24 @@
 import * as React from 'react'
 import { WelcomeScreen } from '..'
-import { styles, cssProps, colors } from '../../platform'
-import { css, compose } from 'glamor'
+import { styles, colors } from '../../platform'
+import { compose } from 'glamor'
 
-const ROOT = compose(
-  styles.fullScreen,
-  cssProps({
-    backgroundColor: colors.background,
-  }),
-)
+const ROOT = compose(styles.fullScreen, {
+  background: colors.window.background,
+  borderRadius: 0,
+  '& ::-webkit-scrollbar': {
+    backgroundColor: colors.scrollbar.base,
+    width: 12,
+    height: 12,
+  },
+  '& ::-webkit-scrollbar-track': { backgroundColor: colors.scrollbar.track },
+  '& ::-webkit-scrollbar-thumb': { backgroundColor: colors.scrollbar.thumb, borderRadius: 4 },
+})
 
 export class App extends React.Component<{}, {}> {
   render() {
     return (
-      <div {...css(ROOT)}>
+      <div {...ROOT}>
         <WelcomeScreen />
       </div>
     )

src/renderer/features/example-using-tabs/header/header.tsx

@@ -10,7 +10,7 @@ import {
   commandOrControlKey,
   EnterAnimation,
 } from '../../../platform'
-import { css, compose } from 'glamor'
+import { css } from 'glamor'
 
 export type SampleTabType = 'one' | 'two' | 'three'
 
@@ -24,20 +24,20 @@ const KEY_2 = `${commandOrControlKey}+2`
 const KEY_3 = `${commandOrControlKey}+3`
 
 // an extra layer just for the drag style due to electron bug
-const ROOT = styles.windowDrag
+const ROOT = css(styles.windowDrag)
 
-const BAR = compose(
+const BAR = css(
   styles.row,
+  styles.windowDrag,
   cssProps({
     paddingLeft: spacing.medium,
     paddingRight: spacing.medium,
     paddingTop: spacing.small,
-    backgroundColor: colors.navBackground,
+    backgroundColor: colors.nav.background,
     justifyContent: 'center',
     borderBottom: 1,
-    borderBottomColor: colors.line,
+    borderBottomColor: colors.nav.line,
     borderBottomStyle: 'solid',
-    boxShadow: `0px 2px 10px ${colors.navBackground}`,
   }),
 )
 
@@ -62,7 +62,7 @@ export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
     const { tab } = this.props
 
     return (
-      <div {...css(ROOT)}>
+      <div {...ROOT}>
         <EnterAnimation animation='slide' delay={100} y={-60}>
           <div {...BAR}>
             <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />

src/renderer/features/example-using-tabs/header/index.ts

@@ -22,13 +22,13 @@ const BASE = compose(
 )
 
 const ACTIVE = cssProps({
-  borderBottom: colors.line,
+  borderBottom: colors.nav.line,
   borderBottomWidth: 2,
   borderBottomStyle: 'solid',
 })
 
-const BASE_TEXT = cssProps({ color: colors.navInactive, fontSize: fontSizes.mediumPlus })
-const ACTIVE_TEXT = cssProps({ color: colors.navActive })
+const BASE_TEXT = cssProps({ color: colors.nav.inactive, fontSize: fontSizes.mediumPlus })
+const ACTIVE_TEXT = cssProps({ color: colors.nav.active })
 
 /**
  * A tab component that you click on.  Not the tab panel.

src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx

@@ -9,15 +9,15 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-f6nk39"=""
+      "data-css-6bregx"=""
     />
 
 ## children have priority over text
 
 > Snapshot 1
 
     <p
-      "data-css-f6nk39"=""
+      "data-css-6bregx"=""
     >
       one
     </p>
@@ -27,7 +27,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-f6nk39"=""
+      "data-css-6bregx"=""
     >
       hi
     </p>
@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-f6nk39"=""
+      "data-css-6bregx"=""
     >
       hello
     </p>
@@ -47,7 +47,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <p
-      "data-css-19csgvw"=""
+      "data-css-rouig7"=""
     >
       one
     </p>

src/renderer/platform/components/tab/tab.tsx

@@ -1,52 +1,71 @@
-/**
- * Named colours.
- */
-const palette = {
-  bluez: ['#2B3A45', '#56748A', '#9CD4FC', '#D2EBFD', '#EDF7FE'],
-  beige: ['#383330', '#585350', '#a8a3a0', '#d8d3d0', '#f8f3f0'],
-  mint: ['#385350', '#587370', '#a8c3c0', '#d8e3e0', '#f8ffff'],
-  purps: ['#503853', '#705873', '#c0a8c3', '#e0d8e3', '#fff8ff'],
-  grayscale: ['#1d1d1d', '#2d2d2d', '#333', '#666', '#888', '#aaa', '#ddd', '#e6e6e6', '#f0f0f0'],
-  cherry: '#d44',
+// =--- theme colors ------>
+
+// const mintScale = ['#385350', '#587370', '#A8C3C0', '#D8E3E0', '#F8FFFF']
+// const purpleScale = ['#503853', '#705873', '#C0A8C3', '#E0D8E3', '#FFF8FF']
+const blueScale = ['#2B3A45', '#56748A', '#9CD4FC', '#D2EBFD', '#EDF7FE']
+const beigeScale = ['#383330', '#585350', '#A8A3A0', '#D8D3D0', '#F8F3F0']
+
+// choose a primaries (frequent use) & secondaries (rare use)
+const primaryScale = beigeScale
+const secondaryScale = blueScale
+
+// a healthy selection of grays
+const grayScale = [
+  '#1D1D1D',
+  '#2D2D2D',
+  '#333',
+  '#666',
+  '#888',
+  '#AAA',
+  '#DDD',
+  '#E6E6E6',
+  '#F0F0F0',
+]
+
+// black is 1st, white is last
+const black = grayScale[0]
+const white = grayScale[grayScale.length - 1]
+
+// =--- colors with specific meaning ------>
+
+const sentiment = {
+  error: '#D44',
+  success: '#4D4',
+  warning: '#DD4',
 }
 
-/**
- * The dominant color scale.
- */
-const dominant = palette.beige
+// =--- special-use window chrome ------>
+
+const window = { background: 'transparent' }
+const scrollbar = {
+  base: 'transparent',
+  track: 'rgba(0, 0, 0, 0.04)',
+  thumb: 'rgba(0, 0, 0, 0.1)',
+}
+
+// =--- special-use window chrome ------>
+
+const text = grayScale[0]
+const line = primaryScale[1]
+const nav = {
+  line,
+  background: primaryScale[2],
+  inactive: primaryScale[3],
+  active: primaryScale[1],
+}
 
 /**
  * These are the various roles that colour plays in the system.
  */
 export const colors = {
-  /**
-   * The color palette if you need it, but prefer to use the other
-   * roles since it is easier to make sweeping chanegs.
-   */
-  palette,
-
-  /** 
-   * The default dackground color.
-   */
-  background: dominant[4],
-
-  /**
-   * The background color navigation.
-   */
-  navBackground: dominant[2],
-  /** the line color of the nav */
-  navLine: dominant[1],
-  /** Navigation foreground when it isn't active. */
-  navInactive: dominant[3],
-  /** Navigation foreground when active. */
-  navActive: dominant[1],
-
-  /** Normal reading text. */
-  text: palette.grayscale[2],
-
-  /** When something goes wrong. */
-  error: palette.cherry,
-
-  /** Subtle lines like dividers. */
-  line: dominant[1],
+  primaryScale,
+  secondaryScale,
+  black,
+  white,
+  window,
+  scrollbar,
+  nav,
+  line,
+  text,
+  sentiment,
 }

src/renderer/platform/components/text/text.test.js.md

@@ -1,5 +1,5 @@
 export const fontSizes = {
-  small: 12,
-  medium: 15,
-  mediumPlus: 18,
+  small: 11,
+  medium: 13,
+  mediumPlus: 14,
 }