Skip to content

Commit dec09cf

Browse files
tpenguinltgtpenguinltg
authored
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.
1 parent 7a0e081 commit dec09cf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+136
-127
lines changed

‎src/AppBar/AppBar.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import {
34
AppBar,
45
Toolbar,
@@ -13,19 +14,12 @@ import logoIMG from '../assets/images/logo.png';
1314
export default {
1415
title: 'AppBar',
1516
component: AppBar,
16-
decorators: [
17-
story => (
18-
<div
19-
style={{
20-
padding: '5rem',
21-
background: 'teal'
22-
}}
23-
>
24-
{story()}
25-
</div>
26-
)
27-
]
17+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2818
};
19+
const Wrapper = styled.div`
20+
padding: 5rem;
21+
background: ${({ theme }) => theme.desktopBackground};
22+
`;
2923

3024
export const Default = () => {
3125
const [open, setOpen] = React.useState(false);

‎src/Bar/Bar.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import { Bar, AppBar, Toolbar, Button } from 'react95';
45

56
export default {
67
title: 'Bar',
78
component: Bar,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: 'teal'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => (
2317
<AppBar>

‎src/Counter/Counter.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Counter, Panel, Button } from 'react95';
55

66
const Wrapper = styled.div`
77
padding: 5rem;
8-
background: teal;
8+
background: ${({ theme }) => theme.desktopBackground};
99
.counter-wrapper {
1010
display: flex;
1111
margin-top: 1rem;

‎src/DatePicker/DatePicker.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
// ⭕️ DON'T SHOW DATEPICKER BEFORE IT'S FINISHED AND TESTED ⭕️
22

33
// import React from 'react';
4+
// import styled from 'styled-components';
45
// import { DatePicker } from 'react95';
56

67
// export default {
78
// title: 'DatePicker',
89
// component: DatePicker,
9-
// decorators: [
10-
// story => (
11-
// <div
12-
// style={{
13-
// padding: '5rem',
14-
// background: 'teal'
15-
// }}
16-
// >
17-
// {story()}
18-
// </div>
19-
// )
20-
// ]
10+
// decorators: [story => <Wrapper>{story()}</Wrapper>]
2111
// };
12+
// const Wrapper = styled.div`
13+
// padding: 5rem;
14+
// background: ${({ theme }) => theme.desktopBackground};
15+
// `;
2216

2317
// export const Default = () => (
2418
// <DatePicker onAccept={date => console.log(date)} />

‎src/Desktop/Desktop.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import { Desktop } from 'react95';
45

56
export default {
67
title: 'Desktop',
78
component: Desktop,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: 'teal'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => (
2317
<Desktop backgroundStyles={{ background: 'blue' }} />

‎src/Divider/Divider.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import { Divider, List, ListItem } from 'react95';
45

56
export default {
67
title: 'Divider',
78
component: Divider,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: 'teal'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => (
2317
<>

‎src/Fieldset/Fieldset.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React, { useState } from 'react';
2+
import styled from 'styled-components';
23

34
import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95';
45

56
export default {
67
title: 'Fieldset',
78
component: Fieldset,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: 'teal'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => (
2317
<Window>

‎src/Hourglass/Hourglass.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import { Hourglass } from 'react95';
45

56
export default {
67
title: 'Hourglass',
78
component: Hourglass,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: '#008080'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => <Hourglass size={32} />;
2317

‎src/List/List.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { List, ListItem, Bar, Divider } from 'react95';
55

66
const Wrapper = styled.div`
77
padding: 5rem;
8-
background: teal;
8+
background: ${({ theme }) => theme.desktopBackground};
99
display: flex;
1010
align-items: center;
1111
& > * {

‎src/Radio/Radio.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313

1414
const Wrapper = styled.div`
1515
padding: 5rem;
16-
background: teal;
16+
background: ${({ theme }) => theme.desktopBackground};
1717
#cutout {
1818
background: ${({ theme }) => theme.canvas};
1919
color: ${({ theme }) => theme.materialText};

‎src/Table/Table.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import {
45
Table,
@@ -23,19 +24,12 @@ export default {
2324
TableHeadCell,
2425
TableDataCell
2526
},
26-
decorators: [
27-
story => (
28-
<div
29-
style={{
30-
padding: '5rem',
31-
background: 'teal'
32-
}}
33-
>
34-
{story()}
35-
</div>
36-
)
37-
]
27+
decorators: [story => <Wrapper>{story()}</Wrapper>]
3828
};
29+
const Wrapper = styled.div`
30+
padding: 5rem;
31+
background: ${({ theme }) => theme.desktopBackground};
32+
`;
3933

4034
export const Default = () => (
4135
<Window style={{ width: 320 }}>

‎src/Tabs/Tabs.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import styled from 'styled-components';
23

34
import {
45
Tabs,
@@ -17,19 +18,12 @@ export default {
1718
title: 'Tabs',
1819
component: Tabs,
1920
subcomponents: { Tab, TabBody },
20-
decorators: [
21-
story => (
22-
<div
23-
style={{
24-
padding: '5rem',
25-
background: '#008080'
26-
}}
27-
>
28-
{story()}
29-
</div>
30-
)
31-
]
21+
decorators: [story => <Wrapper>{story()}</Wrapper>]
3222
};
23+
const Wrapper = styled.div`
24+
padding: 5rem;
25+
background: ${({ theme }) => theme.desktopBackground};
26+
`;
3327
export const Default = () => {
3428
const [state, setState] = useState({
3529
activeTab: 0

‎src/Tooltip/Tooltip.stories.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23

34
import { Tooltip, Button } from 'react95';
45

56
export default {
67
title: 'Tooltip',
78
component: Tooltip,
8-
decorators: [
9-
story => (
10-
<div
11-
style={{
12-
padding: '5rem',
13-
background: '#008080'
14-
}}
15-
>
16-
{story()}
17-
</div>
18-
)
19-
]
9+
decorators: [story => <Wrapper>{story()}</Wrapper>]
2010
};
11+
const Wrapper = styled.div`
12+
padding: 5rem;
13+
background: ${({ theme }) => theme.desktopBackground};
14+
`;
2115

2216
export const Default = () => (
2317
<Tooltip text='I see you! 🤷‍' enterDelay={100} leaveDelay={500}>

‎src/Window/Window.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
};
1818
const Wrapper = styled.div`
1919
padding: 5rem;
20-
background: teal;
20+
background: ${({ theme }) => theme.desktopBackground};
2121
.window-header {
2222
display: flex;
2323
align-items: center;

‎src/common/themes/aiee.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default {
1717
canvasTextInvert: 'rgb(0,62,109)',
1818
checkmark: 'rgb(0,62,1090)',
1919
checkmarkDisabled: 'rgb(88,152,231)',
20+
desktopBackground: 'rgb(68,125,183)',
2021
flatDark: 'rgb(211,214,217)',
2122
flatLight: 'rgb(238,244,252)',
2223
focusSecondary: 'rgb(250,254,255)',

‎src/common/themes/ash.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default {
1616
canvasTextInvert: 'rgb(255, 255, 255)',
1717
checkmark: 'rgb(0, 0, 0)',
1818
checkmarkDisabled: 'rgb(128, 128, 128)',
19+
desktopBackground: 'rgb(0, 0, 0)',
1920
flatDark: 'rgb(63, 63, 63)',
2021
flatLight: 'rgb(96, 96, 96)',
2122
focusSecondary: 'rgb(175, 175, 175)',

‎src/common/themes/azureOrange.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
canvasTextInvert: '#000000',
1515
checkmark: '#000000',
1616
checkmarkDisabled: '#05427f',
17+
desktopBackground: '#008080',
1718
flatDark: '#9e9e9e',
1819
flatLight: '#d8d8d8',
1920
focusSecondary: '#171123',

‎src/common/themes/bee.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
canvasTextInvert: '#ffffff',
1515
checkmark: '#0C1618',
1616
checkmarkDisabled: '#846d06',
17+
desktopBackground: '#008080',
1718
flatDark: '#9e9e9e',
1819
flatLight: '#d8d8d8',
1920
focusSecondary: '#fefe03',

‎src/common/themes/blackAndWhite.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
canvasTextInvert: '#ffffff',
1515
checkmark: '#000000',
1616
checkmarkDisabled: '#888c8f',
17+
desktopBackground: '#ffffff',
1718
flatDark: '#9e9e9e',
1819
flatLight: '#d8d8d8',
1920
focusSecondary: '#fefe03',

‎src/common/themes/blue.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default {
1717
canvasTextInvert: 'rgb(255, 255, 255)',
1818
checkmark: 'rgb(0, 0, 0)',
1919
checkmarkDisabled: 'rgb(49, 131, 221)',
20+
desktopBackground: 'rgb(58, 110, 165)',
2021
flatDark: 'rgb(49, 131, 221)',
2122
flatLight: 'rgb(166, 202, 240)',
2223
focusSecondary: 'rgb(211, 228, 248)',

‎src/common/themes/brick.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
canvasTextInvert: '#ffffff',
1515
checkmark: '#020000',
1616
checkmarkDisabled: '#6c684b',
17+
desktopBackground: '#420000',
1718
flatDark: '#9e9e9e',
1819
flatLight: '#d8d8d8',
1920
focusSecondary: '#fefe03',

0 commit comments

Comments
 (0)