Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat: give component examples a theme specific background #316

Merged
merged 3 commits into from
Oct 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -687,13 +687,24 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
</Grid.Column>
)}

<Grid.Column
width={16}
className={`rendered-example ${this.getKebabExamplePath()}`}
style={{ padding: '2rem' }}
>
<div dir={showRtl ? 'rtl' : undefined}>{exampleElement}</div>
</Grid.Column>
<Provider.Consumer
render={({ siteVariables }) => {
return (
<Grid.Column
width={16}
dir={showRtl ? 'rtl' : undefined}
className={`rendered-example ${this.getKebabExamplePath()}`}
style={{
padding: '2rem',
backgroundColor: siteVariables.bodyBackground,
color: siteVariables.bodyColor,
}}
>
{exampleElement}
</Grid.Column>
)
}}
/>
<Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
{this.renderJSX()}
{this.renderError()}
Expand Down
9 changes: 9 additions & 0 deletions src/themes/teams-dark/siteVariables.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { white } from '../teams/siteVariables'

//
// COLORS
//
export const black = '#201f1f'
export const gray02 = '#bfbfbf'
export const gray03 = '#a6a6a6'
export const gray04 = '#808080'
Expand All @@ -24,3 +27,9 @@ export const magenta = '#cf6098'
export const orchid = '#ae3d84'
export const red = '#d74654'
export const red08 = '#4f232b'

//
// SEMANTIC ASSIGNMENTS
//
export const bodyBackground = black
export const bodyColor = white
6 changes: 6 additions & 0 deletions src/themes/teams-high-contrast/siteVariables.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { white } from '../teams/siteVariables'

//
// COLORS
//
export const black = '#000'

//
// SEMANTIC ASSIGNMENTS
//
export const bodyBackground = black
export const bodyColor = white
1 change: 1 addition & 0 deletions src/themes/teams/siteVariables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,5 +87,6 @@ export const bodyMargin = 0
export const bodyFontFamily =
'"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
export const bodyFontSize = '1.4rem'
export const bodyBackground = white
export const bodyColor = black
export const bodyLineHeight = lineHeightBase