Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit dec09cf

Browse files
authoredJan 15, 2022
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>

1 commit comments

Comments
 (1)

vercel[bot] commented on Jan 15, 2022

@vercel[bot]
Please sign in to comment.