feat(themes): add desktopBackground prop to all themes (#238)

* feat(themes): map Windows theme Background to desktopBackground theme prop

* feat(themes): add desktopBackground prop to themes by tPenguinLTG

* feat(themes): add desktopBackground prop to Windows-inspired themes

Use colors from original Windows theme.

* feat(themes): add desktopBackground prop to all other themes

Use placeholder #008080 (teal) until more background colours are designed.

* feat(themes): add desktopBackground prop to docz default theme

* feat(themes): use desktopBackground theme prop where appropriate

Create a styled Wrapper component that consumes the theme and uses the
desktopBackground prop.

Author: tpenguinltg

src/AppBar/AppBar.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   AppBar,
   Toolbar,
@@ -13,19 +14,12 @@ import logoIMG from '../assets/images/logo.png';
 export default {
   title: 'AppBar',
   component: AppBar,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: 'teal'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => {
   const [open, setOpen] = React.useState(false);

src/Bar/Bar.stories.js

@@ -1,23 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Bar, AppBar, Toolbar, Button } from 'react95';
 
 export default {
   title: 'Bar',
   component: Bar,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: 'teal'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => (
   <AppBar>

src/Counter/Counter.stories.js

@@ -5,7 +5,7 @@ import { Counter, Panel, Button } from 'react95';
 
 const Wrapper = styled.div`
   padding: 5rem;
-  background: teal;
+  background: ${({ theme }) => theme.desktopBackground};
   .counter-wrapper {
     display: flex;
     margin-top: 1rem;

src/DatePicker/DatePicker.stories.js

@@ -1,24 +1,18 @@
 // ⭕️ DON'T SHOW DATEPICKER BEFORE IT'S FINISHED AND TESTED ⭕️
 
 // import React from 'react';
+// import styled from 'styled-components';
 // import { DatePicker } from 'react95';
 
 // export default {
 //   title: 'DatePicker',
 //   component: DatePicker,
-//   decorators: [
-//     story => (
-//       <div
-//         style={{
-//           padding: '5rem',
-//           background: 'teal'
-//         }}
-//       >
-//         {story()}
-//       </div>
-//     )
-//   ]
+//  decorators: [story => <Wrapper>{story()}</Wrapper>]
 // };
+// const Wrapper = styled.div`
+//   padding: 5rem;
+//   background: ${({ theme }) => theme.desktopBackground};
+// `;
 
 // export const Default = () => (
 //   <DatePicker onAccept={date => console.log(date)} />

src/Desktop/Desktop.stories.js

@@ -1,23 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Desktop } from 'react95';
 
 export default {
   title: 'Desktop',
   component: Desktop,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: 'teal'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => (
   <Desktop backgroundStyles={{ background: 'blue' }} />

src/Divider/Divider.stories.js

@@ -1,23 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Divider, List, ListItem } from 'react95';
 
 export default {
   title: 'Divider',
   component: Divider,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: 'teal'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => (
   <>

src/Fieldset/Fieldset.stories.js

@@ -1,23 +1,17 @@
 import React, { useState } from 'react';
+import styled from 'styled-components';
 
 import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95';
 
 export default {
   title: 'Fieldset',
   component: Fieldset,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: 'teal'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => (
   <Window>

src/Hourglass/Hourglass.stories.js

@@ -1,23 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Hourglass } from 'react95';
 
 export default {
   title: 'Hourglass',
   component: Hourglass,
-  decorators: [
-    story => (
-      <div
-        style={{
-          padding: '5rem',
-          background: '#008080'
-        }}
-      >
-        {story()}
-      </div>
-    )
-  ]
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
 
 export const Default = () => <Hourglass size={32} />;
 

src/List/List.stories.js

@@ -5,7 +5,7 @@ import { List, ListItem, Bar, Divider } from 'react95';
 
 const Wrapper = styled.div`
   padding: 5rem;
-  background: teal;
+  background: ${({ theme }) => theme.desktopBackground};
   display: flex;
   align-items: center;
   & > * {

src/Radio/Radio.stories.js

@@ -13,7 +13,7 @@ import {
 
 const Wrapper = styled.div`
   padding: 5rem;
-  background: teal;
+  background: ${({ theme }) => theme.desktopBackground};
   #cutout {
     background: ${({ theme }) => theme.canvas};
     color: ${({ theme }) => theme.materialText};