diff --git a/apps/fabric-website/src/components/App/AppState.tsx b/apps/fabric-website/src/components/App/AppState.tsx index e7ab867cda10dd..e27d0c9e6c9bc8 100644 --- a/apps/fabric-website/src/components/App/AppState.tsx +++ b/apps/fabric-website/src/components/App/AppState.tsx @@ -91,10 +91,9 @@ export const AppState: IAppState = { getComponent: cb => require.ensure([], (require) => cb(require('../../pages/Styles/LocalizationPage/LocalizationPage').LocalizationPage)) }, { - title: 'Beta theme generator', - url: '#/styles/themeGenerator', - isHiddenFromMainNav: true, - component: () => , + title: 'Theme generator', + url: '#/styles/themegenerator', + component: () => , getComponent: cb => require.ensure([], (require) => cb(require('../../pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage').ThemeGeneratorToolPage)) }, { diff --git a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx index a898a09daa3063..3a3629c0ff2d86 100644 --- a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx +++ b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx @@ -59,6 +59,12 @@ export class ResourcesPage extends React.Component {
  • Segoe UI and Fabric MDL2 icon font
  • Segoe UI and Fabric MDL2 icon font (Microsoft employees)
    • + +

    Theme generator

    +

    This tool helps you easily create all the shades and slots for a custom theme.

    + diff --git a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx index e92d5cfaa5d8d9..62125bd95e0928 100644 --- a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx +++ b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx @@ -38,7 +38,7 @@ export class ColorsPage extends React.Component { />

    Overview

    -

    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 color accessibility guidance (PDF) to ensure that your text can be ready by everyone.

    +

    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 color accessibility guidance (PDF) to ensure that your text can be ready by everyone. If you need to customize your theme, see the Theme generator.

    Implementation

    Colors can be applied to text, backgrounds, or borders using the following class name conventions:

    diff --git a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx index 54a960c3bd44cb..e69897d0ad1437 100644 --- a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx +++ b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx @@ -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 { public render() { return ( -
    +
    diff --git a/common/changes/@uifabric/fabric-website/show-theme-generator_2018-03-13-16-46.json b/common/changes/@uifabric/fabric-website/show-theme-generator_2018-03-13-16-46.json new file mode 100644 index 00000000000000..6d09ac7e6bd66f --- /dev/null +++ b/common/changes/@uifabric/fabric-website/show-theme-generator_2018-03-13-16-46.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/fabric-website", + "comment": "Theme generator: exposing to the website.", + "type": "minor" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/show-theme-generator_2018-03-13-16-46.json b/common/changes/office-ui-fabric-react/show-theme-generator_2018-03-13-16-46.json new file mode 100644 index 00000000000000..ab7550c52fe227 --- /dev/null +++ b/common/changes/office-ui-fabric-react/show-theme-generator_2018-03-13-16-46.json @@ -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": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss index a03b7501d462be..f6fe372072610a 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss @@ -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; + } } -} } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx index 4023244f968729..2f30f2ad6dd9ce 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx @@ -110,13 +110,13 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta return (
    -

    - 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 documentation. +

    +

    Overview

    +

    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 documentation.
    - 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. -

    - + 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.

    +
    {/* 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 @@ -161,7 +161,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta { this._outputSection() }
    -

    Fabric Palette

    +

    Fabric palette

    The original Fabric palette slots. These are raw colors with no prescriptive uses. Each one is a shade or tint of a base color.

    { fabricThemeSlots }
    @@ -176,7 +176,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta

    -

    Samples

    +

    Samples

    {
    @@ -196,7 +196,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta }] } label='Pick one' required={ true } - />, + />
    } -

    Accessibility

    +

    Accessibility

    Each pair of colors below should produce legible text and have a minimum contrast ratio of 4.5.

    @@ -441,7 +441,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta return (
    -

    Output

    +

    Output

    JSON

    diff --git a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx index 31b1229fc9fcb2..c4d075aaf7ad8e 100644 --- a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx +++ b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx @@ -359,8 +359,8 @@ export const AppDefinition: IAppDefinition = { { component: require('../components/ThemeGenerator/ThemeGeneratorPage').ThemeGeneratorPage, key: 'Theme Generator', - name: 'Beta Theme Generator', - url: '#examples/themeGenerator' + name: 'Theme Generator', + url: '#examples/themegenerator' }, { component: require('./ComponentStatus/ComponentStatusPage').ComponentStatusPage,