microsoft · mikewheaton · May 7, 2018 · May 3, 2018 · May 3, 2018 · May 3, 2018
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Adds a Fluent theme experiment",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "mike@mikewheaton.ca"
+}
@@ -0,0 +1,245 @@
+/* tslint:disable:no-any */
+export const GrayColors: any = {
+  black: '#000000',
+  gray220: '#11100f',
+  gray210: '#161514',
+  gray200: '#1b1a19',
+  gray190: '#201f1e',
+  gray180: '#252423',
+  gray170: '#292827',
+  gray160: '#323130',
+  gray150: '#3b3a39',
+  gray140: '#484644',
+  gray130: '#605e5c',
+  gray120: '#797775',
+  gray110: '#8a8886',
+  gray100: '#979593',
+  gray90: '#a19f9d',
+  gray80: '#b3b0ad',
+  gray70: '#bebbb8',
+  gray60: '#c8c6c4',
+  gray50: '#d2d0ce',
+  gray40: '#e1dfdd',
+  gray30: '#edebe9',
+  gray20: '#f3f2f1',
+  gray10: '#faf9f8',
+  white: '#ffffff'
+};
+
+export const IllustrationColors: any = {
+  pinkRed40: '#750b1c',
+  pinkRed30: '#761721',
+  pinkRed20: '#e6808a',
+  pinkRed10: '#f4abba',
+  red160: '#7f1d10',
+  red150: '#a80000',
+  red140: '#a52613',
+  red130: '#a4262c',
+  red120: '#c50f1f',
+  red110: '#e81123',
+  red100: '#f03a17',
+  red90: '#d13438',
+  red80: '#e74856',
+  red70: '#ef6950',
+  red60: '#ff4343',
+  red50: '#ff6767',
+  red40: '#ee9889',
+  red30: '#ff8c8c',
+  red20: '#eec7c2',
+  red10: '#ffc0c0',
+  redOrange60: '#4d291c',
+  redOrange50: '#7f2f08',
+  redOrange40: '#603d30',
+  redOrange30: '#a74019',
+  redOrange20: '#da3b01',
+  redOrange10: '#f2d5c9',
+  orange190: '#7f4200',
+  orange180: '#8e562e',
+  orange170: '#ab620d',
+  orange160: '#b05e0d',
+  orange150: '#d47300',
+  orange140: '#d48c00',
+  orange130: '#ca5010',
+  orange120: '#ac744c',
+  orange110: '#ff8c00',
+  orange100: '#f7630c',
+  orange90: '#bb9167',
+  orange80: '#f7894a',
+  orange70: '#ffaa44',
+  orange60: '#d8b094',
+  orange50: '#f7b189',
+  orange40: '#ffc988',
+  orange30: '#ffe5b6',
+  orange20: '#f7d7c4',
+  orange10: '#ffdabb',
+  orangeYellow60: '#986f0b',
+  orangeYellow50: '#c19c00',
+  orangeYellow40: '#eaa300',
+  orangeYellow30: '#ffb900',
+  orangeYellow20: '#ffc83d',
+  orangeYellow10: '#ffd679',
+  yellow50: '#dfbe00',
+  yellow40: '#fff100',
+  yellow30: '#fce100',
+  yellow20: '#faec6e',
+  yellow10: '#f9f1a5',
+  yellowGreen70: '#8cbd18',
+  yellowGreen60: '#a4cf0c',
+  yellowGreen50: '#bad80a',
+  yellowGreen40: '#d1ec3c',
+  yellowGreen30: '#e4f577',
+  yellowGreen20: '#d5e5ae',
+  yellowGreen10: '#f8ffb3',
+  green140: '#0b6a0b',
+  green130: '#498205',
+  green120: '#107c10',
+  green110: '#599b00',
+  green100: '#13a10e',
+  green90: '#6bb700',
+  green80: '#73aa24',
+  green70: '#16c60c',
+  green60: '#7cd300',
+  green50: '#47d041',
+  green40: '#9ad93a',
+  green30: '#79db75',
+  green20: '#b7df74',
+  green10: '#aae5aa',
+  greenCyan180: '#2d3f3a',
+  greenCyan170: '#00722e',
+  greenCyan160: '#3b534d',
+  greenCyan150: '#10893e',
+  greenCyan140: '#00ae56',
+  greenCyan130: '#486860',
+  greenCyan120: '#00cc6a',
+  greenCyan110: '#00cea6',
+  greenCyan100: '#567c73',
+  greenCyan90: '#38d487',
+  greenCyan80: '#7d9d95',
+  greenCyan70: '#41dabc',
+  greenCyan60: '#70dda5',
+  greenCyan50: '#a3bfb7',
+  greenCyan40: '#81e6d3',
+  greenCyan30: '#a8e5c2',
+  greenCyan20: '#cae0d9',
+  greenCyan10: '#c2f2e9',
+  cyan230: '#005e50',
+  cyan220: '#006666',
+  cyan210: '#005b70',
+  cyan200: '#008272',
+  cyan190: '#038387',
+  cyan180: '#006f94',
+  cyan170: '#4a5459',
+  cyan160: '#009ca4',
+  cyan150: '#00b294',
+  cyan140: '#0099bc',
+  cyan130: '#00b7c3',
+  cyan120: '#5a686c',
+  cyan110: '#69797e',
+  cyan100: '#00bcf2',
+  cyan90: '#30c6cc',
+  cyan80: '#859599',
+  cyan70: '#31d2f7',
+  cyan60: '#61d6d6',
+  cyan50: '#a0aeb2',
+  cyan40: '#69eaff',
+  cyan30: '#91e5df',
+  cyan20: '#bac8cc',
+  cyan10: '#99ecff',
+  cyanBlue100: '#003966',
+  cyanBlue90: '#394146',
+  cyanBlue80: '#004e8c',
+  cyanBlue70: '#0063b1',
+  cyanBlue60: '#0078d7',
+  cyanBlue50: '#3a96dd',
+  cyanBlue40: '#83beec',
+  cyanBlue30: '#7ba7ff',
+  cyanBlue20: '#abc9ed',
+  cyanBlue10: '#b3dbf2',
+  blue150: '#11255e',
+  blue140: '#242466',
+  blue130: '#00188f',
+  blue120: '#19318d',
+  blue110: '#0027b4',
+  blue100: '#0037da',
+  blue90: '#203dbd',
+  blue80: '#0046ff',
+  blue70: '#2849ec',
+  blue60: '#4f6bed',
+  blue50: '#3b78ff',
+  blue40: '#7c96f9',
+  blue30: '#b5b5e2',
+  blue20: '#bebee5',
+  blue10: '#c3c3f4',
+  blueMagenta250: '#401b6c',
+  blueMagenta240: '#4e257f',
+  blueMagenta230: '#373277',
+  blueMagenta220: '#49397a',
+  blueMagenta210: '#32318c',
+  blueMagenta200: '#5c2e91',
+  blueMagenta190: '#49409a',
+  blueMagenta180: '#5e4a9d',
+  blueMagenta170: '#413eb3',
+  blueMagenta160: '#744da9',
+  blueMagenta150: '#5a4ebc',
+  blueMagenta140: '#735bc1',
+  blueMagenta130: '#8764b8',
+  blueMagenta120: '#4f4bd9',
+  blueMagenta110: '#6b69d6',
+  blueMagenta100: '#7160e8',
+  blueMagenta90: '#886ce4',
+  blueMagenta80: '#8378de',
+  blueMagenta70: '#8e8cd8',
+  blueMagenta60: '#a992d4',
+  blueMagenta50: '#9c89e9',
+  blueMagenta40: '#9a95de',
+  blueMagenta30: '#a68dff',
+  blueMagenta20: '#b4a0ff',
+  blueMagenta10: '#cfc4f5',
+  magenta160: '#5c005c',
+  magenta150: '#460f54',
+  magenta140: '#5c126b',
+  magenta130: '#800074',
+  magenta120: '#721481',
+  magenta110: '#9a0089',
+  magenta100: '#881798',
+  magenta90: '#b4009e',
+  magenta80: '#c239b3',
+  magenta70: '#b146c2',
+  magenta60: '#cc76ca',
+  magenta50: '#c182d1',
+  magenta40: '#e476c1',
+  magenta30: '#de94e0',
+  magenta20: '#e8a3de',
+  magenta10: '#dea2ed',
+  magentaPink70: '#6b0036',
+  magentaPink60: '#77004d',
+  magentaPink50: '#9b0062',
+  magentaPink40: '#bf0077',
+  magentaPink30: '#e3008c',
+  magentaPink20: '#e43ba6',
+  magentaPink10: '#f965bf',
+  pink50: '#970044',
+  pink40: '#c30052',
+  pink30: '#ea005e',
+  pink20: '#ee3f86',
+  pink10: '#edbed3'
+};
+
+export const CommunicationColors: any = {
+  communication90: '#004578',
+  communication80: '#005a9e',
+  communication70: '#106ebe',
+  communication60: '#0078d7',
+  communication50: '#2b88d8',
+  communication40: '#71afe5',
+  communication30: '#c7e0f4',
+  communication20: '#deecf9',
+  communication10: '#eff6fc'
+};
+
+export const HighContrastColors: any = {
+  contrastBlackDisabled: '#00ff00',
+  contrastWhiteDisabled: '#600000',
+  contrastBlackSelected: '#1aebff',
+  contrastWhiteSelected: '#37006e'
+};
@@ -0,0 +1,22 @@
+import { createTheme, ITheme } from 'office-ui-fabric-react';
+import { GrayColors } from '@uifabric/experiments/lib/components/fluent/theme/FluentColors';
+
+const FluentTheme: ITheme = createTheme({
+  palette: {
+    black: GrayColors.black,
+    neutralDark: GrayColors.GrayColors190,
+    neutralPrimary: GrayColors.GrayColors160,
+    neutralPrimaryAlt: GrayColors.GrayColors150,
+    neutralSecondary: GrayColors.GrayColors130,
+    neutralTertiary: GrayColors.GrayColors90,
+    neutralTertiaryAlt: GrayColors.GrayColors60,
+    neutralQuaternary: GrayColors.GrayColors50,
+    neutralQuaternaryAlt: GrayColors.GrayColors40,
+    neutralLight: GrayColors.GrayColors30,
+    neutralLighter: GrayColors.GrayColors20,
+    neutralLighterAlt: GrayColors.GrayColors10,
+    white: GrayColors.white
+  }
+});
+
+export default FluentTheme;
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  IComponentDemoPageProps,
+  ComponentPage,
+  ExampleCard
+} from '@uifabric/example-app-base';
+
+import { FluentThemeBasicExample } from '@uifabric/experiments/lib/components/fluent/theme/examples/FluentTheme.Basic.Example';
+const FluentThemeBasicExampleCode =
+  require('!raw-loader!@uifabric/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx') as string;
+
+export class FluentThemePage extends React.Component<
+  IComponentDemoPageProps,
+  {}
+  > {
+  public render(): JSX.Element {
+    return (
+      <ComponentPage
+        title='Fluent Theme'
+        componentName='FluentTheme'
+        overview={
+          <div>
+            <p>
+              We're updating Fabric to use new colors from the{ ' ' }
+              <a href='https://fluent.microsoft.com/'>Fluent Design System</a>.
+              Before these colors become the defaults, this theme is provided as
+              a way to preview how the color changes will affect your app.
+            </p>
+            <p>
+              For components that have been converted to{ ' ' }
+              <a href='https://github.com/OfficeDev/office-ui-fabric-react/wiki/mergeStyles'>
+                mergeStyles
+              </a>, the Customizer component can be used to apply the theme. See
+              the examples below. For all other components (including your app's
+              custom components), use the
+              <a href='https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/styles/theme.ts#L80'>
+                loadTheme()
+              </a>
+              function.
+            </p>
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+        exampleCards={
+          <div>
+            <ExampleCard
+              title='Using Customizer to theme components'
+              code={ FluentThemeBasicExampleCode }
+            >
+              <FluentThemeBasicExample />
+            </ExampleCard>
+          </div>
+        }
+      />
+    );
+  }
+}
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Link, Customizer, Breadcrumb } from 'office-ui-fabric-react';
+import FluentTheme from '@uifabric/experiments/lib/components/fluent/theme/FluentTheme';
+
+export class FluentThemeBasicExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    return (
+      <div>
+        <h2>Current theme</h2>
+        {this._renderComponents()}
+
+        <h2>Fluent theme</h2>
+        <Customizer settings={{ theme: FluentTheme }}>
+          {this._renderComponents()}
+        </Customizer>
+      </div>
+    );
+  }
+
+  private _renderComponents(): JSX.Element {
+    return (
+      <div>
+        <Link disabled={true}>Disabled link</Link>
+        <Breadcrumb
+          items={[
+            { text: 'Files', key: 'Files' },
+            { text: 'This is folder 1', key: 'f1' },
+            { text: 'This is folder 2', key: 'f2' },
+            { text: 'This is folder 3', key: 'f3', isCurrentItem: true }
+          ]}
+        />
+      </div>
+    );
+  }
+}
@@ -81,6 +81,12 @@ export const AppDefinition: IAppDefinition = {
           key: 'Nav',
           name: 'Nav',
           url: '#/examples/nav'
+        },
+        {
+          component: require<any>('../components/fluent/theme/FluentThemePage').FluentThemePage,
+          key: 'FluentTheme',
+          name: 'Fluent Theme',
+          url: '#/examples/fluenttheme'
         }
       ]
     }