Skip to content
Merged
7 changes: 3 additions & 4 deletions apps/fabric-website/src/components/App/AppState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,9 @@ export const AppState: IAppState = {
getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/LocalizationPage/LocalizationPage').LocalizationPage))
},
{
title: 'Beta theme generator',
url: '#/styles/themeGenerator',
isHiddenFromMainNav: true,
component: () => <StylesLoadingComponent title='Beta theme generator' />,
title: 'Theme generator',
url: '#/styles/themegenerator',
component: () => <StylesLoadingComponent title='Theme generator' />,
getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage').ThemeGeneratorToolPage))
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ export class ResourcesPage extends React.Component<any, any> {
<li><a className={ styles.relatedLink } href='https://static2.sharepointonline.com/files/fabric/fabric-website/files/segoeui_fabricmdl2_icon_fonts.zip'>Segoe UI and Fabric MDL2 icon font</a></li>
<li><a className={ styles.relatedLink } href='https://microsoft.sharepoint.com/teams/OfficeUIFabric97/SitePages/Fabric%20MDL2%20Icons.aspx'>Segoe UI and Fabric MDL2 icon font (Microsoft employees)</a></li>
</ul>

<h3>Theme generator</h3>
<p>This tool helps you easily create all the shades and slots for a custom theme.</p>
<ul>
<li><a className={ styles.relatedLink } href='#/styles/themegenerator'>Theme generator</a></li>
</ul>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class ColorsPage extends React.Component<any, any> {
/>
<div className={ css(pageStyles.u_maxTextWidth, styles.overview) }>
<h2 id='Overview'>Overview</h2>
<p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone.</p>
<p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone. If you need to customize your theme, see the <a className={ styles.colorsPageLink } href={ '#/styles/themegenerator' }>Theme generator</a>.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this true anymore? I thought we removed all the helper classes.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You tell me :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this blurb refers to Fabric Core which definitely still has these classes.

</div>
<h2 id='implementation'>Implementation</h2>
<p>Colors can be applied to text, backgrounds, or borders using the following class name conventions:</p>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,41 @@
import * as React from 'react';
import { PageHeader } from '../../../components/PageHeader/PageHeader';

import { ThemeGeneratorPage } from 'office-ui-fabric-react/lib/components/ThemeGenerator/ThemeGeneratorPage';
const pageStyles: any = require('../../PageStyles.module.scss');

export class ThemeGeneratorToolPage extends React.Component<any, any> {
public render() {
return (
<div>
<div
className={ pageStyles.basePage }
>
<PageHeader
pageTitle='Theme Generator'
backgroundColor='#006f94'
links={
[
{
'text': 'Overview',
'location': 'Overview'
},
{
'text': 'Output',
'location': 'Output'
},
{
'text': 'Fabric palette',
'location': 'Fabric palette'
},
{
'text': 'Samples',
'location': 'Samples'
},
{
'text': 'Accessibility',
'location': 'Accessibility'
}
]
}
/>

<ThemeGeneratorPage />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/fabric-website",
"comment": "Theme generator: exposing to the website.",
"type": "minor"
}
],
"packageName": "@uifabric/fabric-website",
"email": "[email protected]"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Theme generator: exposing to the website.",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
Original file line number Diff line number Diff line change
@@ -1,70 +1,73 @@
@import '../../common/common';
:global {

.ms-themer {
padding: 12px;
h2, h3, h4 {
color: $ms-color-black;
.overview .themeGeneratorPageLink {
color: $ms-color-themePrimary;
}
}
.ms-themer h3 {
margin: 0;
}

.ms-themer-paletteSlot {
text-align: center;
padding: 16px;
}
.ms-themer {
padding: 12px;
h2, h3, h4 {
color: $ms-color-black;
}
}
.ms-themer h3 {
margin: 0;
}

.ms-themer-swatch {
display: inline-block;
flex-shrink: 0;
height: 36px;
width: 36px;
margin: 4px;
}
.ms-themer-paletteSlot {
text-align: center;
padding: 16px;
}

.ms-themer-swatchBg {
padding: 4px;
font-size: 0;
.ms-themer-swatch {
height: 28px;
width: 28px;
margin: 2px;
display: inline-block;
flex-shrink: 0;
height: 36px;
width: 36px;
margin: 4px;
}
}

.ms-themer-example {
padding: 20px;
max-width: 40%;
}
.ms-themer-swatchBg {
padding: 4px;
font-size: 0;
.ms-themer-swatch {
height: 28px;
width: 28px;
margin: 2px;
}
}

.ms-themer-fabricPalette-root {
display: flex;
> div {
padding-left: 20px;
.ms-themer-example {
padding: 20px;
max-width: 40%;
}
}

.ms-themer-accessibilityTable td {
padding: 4px;
text-align: center;
}
.ms-themer-fabricPalette-root {
display: flex;
> div {
padding-left: 20px;
}
}

.ms-themer-accessibilityTable td {
padding: 4px;
text-align: center;
}

.ms-themer-slot {
display: flex;
align-items: center;
overflow: auto;
}
.ms-themer-slot {
display: flex;
align-items: center;
overflow: auto;
}

.ms-themer-output-root {
display: flex;
textarea {
height: 400px;
width: 280px;
margin-right: 28px;
background-color: white;
color: #333;
.ms-themer-output-root {
display: flex;
textarea {
height: 400px;
width: 280px;
margin-right: 28px;
background-color: white;
color: #333;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta

return (
<div className='ms-themer'>
<p>
This tool helps you easily create all the shades and slots for a custom theme.
The theme can be used by Fabric React's styling package, see the <a href='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/styling'>documentation</a>.
<div className='overview'>
<h2 id='Overview'>Overview</h2>
<p>This tool helps you easily create all the shades and slots for a custom theme.
The theme can be used by Fabric React's styling package, see the <a className={ 'themeGeneratorPageLink' } href='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/styling'>documentation</a>.
<br />
As you modify one of the three base colors, the theme will update automatically based on predefined rules. You can modify each individual slot below as well.
</p>

As you modify one of the three base colors, the theme will update automatically based on predefined rules. You can modify each individual slot below as well.</p>
</div>
{/* Hello! You've found hidden functionality for generating a theme from an image. This uses Microsoft's
* Cognitive Vision API, documented here:
* https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/javascript
Expand Down Expand Up @@ -161,7 +161,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
{ this._outputSection() }
<br />

<h2>Fabric Palette</h2>
<h2 id='Fabric palette'>Fabric palette</h2>
<p>The original Fabric palette slots. These are raw colors with no prescriptive uses. Each one is a shade or tint of a base color.</p>
<div className={ 'ms-themer-fabricPalette-root' }>
<div>{ fabricThemeSlots }</div>
Expand All @@ -176,7 +176,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
</div>
<br />

<h3>Samples</h3>
<h2 id='Samples'>Samples</h2>
{ <div style={ { display: 'flex', flexDirection: 'row' } }>
<div className='ms-themer-example'>
<TextFieldBasicExample />
Expand All @@ -196,7 +196,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
}] }
label='Pick one'
required={ true }
/>,
/>
<ChoiceGroup
options={ [
{
Expand All @@ -221,7 +221,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
</div>
</div> }

<h3>Accessibility</h3>
<h2 id='Accessibility'>Accessibility</h2>
<p>Each pair of colors below should produce legible text and have a minimum contrast ratio of 4.5.</p>
<table className='ms-themer-accessibilityTable'>
<thead>
Expand Down Expand Up @@ -441,7 +441,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta

return (
<div>
<h2>Output</h2>
<h2 id='Output'>Output</h2>
<div className={ 'ms-themer-output-root' }>
<div>
<h3>JSON</h3>
Expand Down
4 changes: 2 additions & 2 deletions packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,8 @@ export const AppDefinition: IAppDefinition = {
{
component: require<any>('../components/ThemeGenerator/ThemeGeneratorPage').ThemeGeneratorPage,
key: 'Theme Generator',
name: 'Beta Theme Generator',
url: '#examples/themeGenerator'
name: 'Theme Generator',
url: '#examples/themegenerator'
},
{
component: require<any>('./ComponentStatus/ComponentStatusPage').ComponentStatusPage,
Expand Down