feat(themes): add desktopBackground prop to all themes

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};

src/Table/Table.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import {
   Table,
@@ -23,19 +24,12 @@ export default {
     TableHeadCell,
     TableDataCell
   },
-  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 style={{ width: 320 }}>

src/Tabs/Tabs.stories.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import styled from 'styled-components';
 
 import {
   Tabs,
@@ -17,19 +18,12 @@ export default {
   title: 'Tabs',
   component: Tabs,
   subcomponents: { Tab, TabBody },
-  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 = () => {
   const [state, setState] = useState({
     activeTab: 0

src/Tooltip/Tooltip.stories.js

@@ -1,23 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Tooltip, Button } from 'react95';
 
 export default {
   title: 'Tooltip',
   component: Tooltip,
-  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 = () => (
   <Tooltip text='I see you! 🤷‍' enterDelay={100} leaveDelay={500}>

src/Window/Window.stories.js

@@ -17,7 +17,7 @@ export default {
 };
 const Wrapper = styled.div`
   padding: 5rem;
-  background: teal;
+  background: ${({ theme }) => theme.desktopBackground};
   .window-header {
     display: flex;
     align-items: center;

src/common/themes/aiee.js

@@ -17,6 +17,7 @@ export default {
   canvasTextInvert: 'rgb(0,62,109)',
   checkmark: 'rgb(0,62,1090)',
   checkmarkDisabled: 'rgb(88,152,231)',
+  desktopBackground: 'rgb(68,125,183)',
   flatDark: 'rgb(211,214,217)',
   flatLight: 'rgb(238,244,252)',
   focusSecondary: 'rgb(250,254,255)',

src/common/themes/ash.js

@@ -16,6 +16,7 @@ export default {
   canvasTextInvert: 'rgb(255, 255, 255)',
   checkmark: 'rgb(0, 0, 0)',
   checkmarkDisabled: 'rgb(128, 128, 128)',
+  desktopBackground: 'rgb(0, 0, 0)',
   flatDark: 'rgb(63, 63, 63)',
   flatLight: 'rgb(96, 96, 96)',
   focusSecondary: 'rgb(175, 175, 175)',

src/common/themes/azureOrange.js

@@ -14,6 +14,7 @@ export default {
   canvasTextInvert: '#000000',
   checkmark: '#000000',
   checkmarkDisabled: '#05427f',
+  desktopBackground: '#008080',
   flatDark: '#9e9e9e',
   flatLight: '#d8d8d8',
   focusSecondary: '#171123',

src/common/themes/bee.js

@@ -14,6 +14,7 @@ export default {
   canvasTextInvert: '#ffffff',
   checkmark: '#0C1618',
   checkmarkDisabled: '#846d06',
+  desktopBackground: '#008080',
   flatDark: '#9e9e9e',
   flatLight: '#d8d8d8',
   focusSecondary: '#fefe03',

src/common/themes/blackAndWhite.js

@@ -14,6 +14,7 @@ export default {
   canvasTextInvert: '#ffffff',
   checkmark: '#000000',
   checkmarkDisabled: '#888c8f',
+  desktopBackground: '#ffffff',
   flatDark: '#9e9e9e',
   flatLight: '#d8d8d8',
   focusSecondary: '#fefe03',

src/common/themes/blue.js

@@ -17,6 +17,7 @@ export default {
   canvasTextInvert: 'rgb(255, 255, 255)',
   checkmark: 'rgb(0, 0, 0)',
   checkmarkDisabled: 'rgb(49, 131, 221)',
+  desktopBackground: 'rgb(58, 110, 165)',
   flatDark: 'rgb(49, 131, 221)',
   flatLight: 'rgb(166, 202, 240)',
   focusSecondary: 'rgb(211, 228, 248)',

src/common/themes/brick.js

@@ -14,6 +14,7 @@ export default {
   canvasTextInvert: '#ffffff',
   checkmark: '#020000',
   checkmarkDisabled: '#6c684b',
+  desktopBackground: '#420000',
   flatDark: '#9e9e9e',
   flatLight: '#d8d8d8',
   focusSecondary: '#fefe03',