From cdfe156adfe6f0ce4a42d7b7aaaf3a6a1d509824 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 12:59:52 -0700 Subject: [PATCH 01/10] Add Fluent colors object, theme, and a basic example of applying the theme to a component --- .../components/fluent/theme/FluentColors.ts | 288 ++++++++++++++++++ .../components/fluent/theme/FluentTheme.ts | 22 ++ .../fluent/theme/FluentThemePage.tsx | 44 +++ .../examples/FluentTheme.Basic.Example.tsx | 21 ++ .../experiments/src/demo/AppDefinition.tsx | 6 + 5 files changed, 381 insertions(+) create mode 100644 packages/experiments/src/components/fluent/theme/FluentColors.ts create mode 100644 packages/experiments/src/components/fluent/theme/FluentTheme.ts create mode 100644 packages/experiments/src/components/fluent/theme/FluentThemePage.tsx create mode 100644 packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts new file mode 100644 index 00000000000000..29ef3d690573b8 --- /dev/null +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -0,0 +1,288 @@ +export const FluentColors: any = { + // Gray + 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", + + // Illustration + 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", + + // Communication + communication90: "#004578", + communication80: "#005a9e", + communication70: "#106ebe", + communication60: "#0078d7", + communication50: "#2b88d8", + communication40: "#71afe5", + communication30: "#c7e0f4", + communication20: "#deecf9", + communication10: "#eff6fc", + + // Excel + excel70: "#002901", + excel60: "#0b4218", + excel50: "#165a2f", + excel40: "#217346", + excel30: "#4c916c", + excel20: "#77b091", + excel10: "#a2ceb7", + + // PowerPoint + powerPoint70: "#620000", + powerPoint60: "#7e180e", + powerPoint50: "#9b2f1c", + powerPoint40: "#b7472a", + powerPoint30: "#c96c54", + powerPoint20: "#dc927e", + powerPoint10: "#eeb7a9", + + // Word + word70: "#001b59", + word60: "#0e2f6f", + word50: "#1d4384", + word40: "#2b579a", + word30: "#557bb3", + word20: "#7f9ecc", + word10: "#a9c2e6", + + // OneNote + oneNote80: "#4c0f6c", + oneNote70: "#5c1384", + oneNote60: "#7719aa", + oneNote50: "#9953c0", + oneNote40: "#d0afe2", + oneNote30: "#ddc5ec", + oneNote20: "#efdffa", + oneNote10: "#f5edfd", + + // Teams + teams70: "#001765", + teams60: "#1c2d7e", + teams50: "#394296", + teams40: "#5558af", + teams30: "#787bc3", + teams20: "#9b9dd8", + teams10: "#bec0ec", + + // High contrast + contrastBlackDisabled: "#00ff00", + contrastWhiteDisabled: "#600000", + contrastBlackSelected: "#1aebff", + contrastWhiteSelected: "#37006e" +}; diff --git a/packages/experiments/src/components/fluent/theme/FluentTheme.ts b/packages/experiments/src/components/fluent/theme/FluentTheme.ts new file mode 100644 index 00000000000000..cee096619b09d6 --- /dev/null +++ b/packages/experiments/src/components/fluent/theme/FluentTheme.ts @@ -0,0 +1,22 @@ +import { createTheme, ITheme } from "office-ui-fabric-react"; +import { FluentColors } from "@uifabric/experiments/lib/components/fluent/theme/FluentColors"; + +const FluentTheme: ITheme = createTheme({ + palette: { + black: FluentColors.black, + neutralDark: FluentColors.gray190, + neutralPrimary: FluentColors.gray160, + neutralPrimaryAlt: FluentColors.gray150, + neutralSecondary: FluentColors.gray130, + neutralTertiary: FluentColors.gray90, + neutralTertiaryAlt: FluentColors.gray60, + neutralQuaternary: FluentColors.gray50, + neutralQuaternaryAlt: FluentColors.gray40, + neutralLight: FluentColors.gray30, + neutralLighter: FluentColors.gray20, + neutralLighterAlt: FluentColors.gray10, + white: FluentColors.white + } +}); + +export default FluentTheme; diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx new file mode 100644 index 00000000000000..419e0b015aaf9c --- /dev/null +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -0,0 +1,44 @@ +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 ( + +

+ We're updating Fabric to use new colors from the{" "} + Fluent Design System. + Before these colors become the defaults, this theme is provided as + a way to preview how the color changes will affect your app. +

+ + } + isHeaderVisible={this.props.isHeaderVisible} + exampleCards={ +
+ + + +
+ } + /> + ); + } +} diff --git a/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx b/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx new file mode 100644 index 00000000000000..b06aedcd2e52aa --- /dev/null +++ b/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import { Link, Customizer } 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 ( +
+

+ Disabled link (current theme) +

+ + +

+ Disabled link (Fluent theme) +

+ +
+ ); + } +} diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx index 8b2c57b9839ca6..3ae07750547d4c 100644 --- a/packages/experiments/src/demo/AppDefinition.tsx +++ b/packages/experiments/src/demo/AppDefinition.tsx @@ -81,6 +81,12 @@ export const AppDefinition: IAppDefinition = { key: 'Nav', name: 'Nav', url: '#/examples/nav' + }, + { + component: require("../components/fluent/theme/FluentThemePage").FluentThemePage, + key: "FluentTheme", + name: "Fluent Theme", + url: "#/examples/fluenttheme" } ] } From 1abc9bc7728fab2099e64c1977f5c7d7cc345496 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 13:44:15 -0700 Subject: [PATCH 02/10] Add more documentation and an example of Breadcrumb --- .../fluent/theme/FluentThemePage.tsx | 8 +++-- .../examples/FluentTheme.Basic.Example.tsx | 32 +++++++++++++------ 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx index 419e0b015aaf9c..c92caf5315dcdc 100644 --- a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -23,7 +23,11 @@ export class FluentThemePage extends React.Component< We're updating Fabric to use new colors from the{" "} Fluent Design System. Before these colors become the defaults, this theme is provided as - a way to preview how the color changes will affect your app. + a way to preview how the color changes will affect your app. Note + that theming requires components to be written using{" "} + + mergeStyles + , and this conversion work has not been completed.

} @@ -31,7 +35,7 @@ export class FluentThemePage extends React.Component< exampleCards={
diff --git a/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx b/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx index b06aedcd2e52aa..7f51b8f380ffc3 100644 --- a/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx +++ b/packages/experiments/src/components/fluent/theme/examples/FluentTheme.Basic.Example.tsx @@ -1,21 +1,35 @@ -import * as React from "react"; -import { Link, Customizer } from "office-ui-fabric-react"; -import FluentTheme from "@uifabric/experiments/lib/components/fluent/theme/fluentTheme"; +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 (
-

- Disabled link (current theme) -

+

Current theme

+ {this._renderComponents()} +

Fluent theme

-

- Disabled link (Fluent theme) -

+ {this._renderComponents()}
); } + + private _renderComponents(): JSX.Element { + return ( +
+ Disabled link + +
+ ); + } } From e4a79aa1f21d33fb2e5c1eda43149fa73b58f328 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 13:45:43 -0700 Subject: [PATCH 03/10] Add change file --- .../miwhea-fluent-experiment_2018-05-03-20-45.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/experiments/miwhea-fluent-experiment_2018-05-03-20-45.json diff --git a/common/changes/@uifabric/experiments/miwhea-fluent-experiment_2018-05-03-20-45.json b/common/changes/@uifabric/experiments/miwhea-fluent-experiment_2018-05-03-20-45.json new file mode 100644 index 00000000000000..a8f7b0d0062dfa --- /dev/null +++ b/common/changes/@uifabric/experiments/miwhea-fluent-experiment_2018-05-03-20-45.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Adds a Fluent theme experiment", + "type": "minor" + } + ], + "packageName": "@uifabric/experiments", + "email": "mike@mikewheaton.ca" +} \ No newline at end of file From 34aaee547eda508649f3cedb7184dd1103860302 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 14:11:30 -0700 Subject: [PATCH 04/10] Fix quote marks --- .../components/fluent/theme/FluentColors.ts | 538 +++++++++--------- 1 file changed, 269 insertions(+), 269 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts index 29ef3d690573b8..32bbae1f168167 100644 --- a/packages/experiments/src/components/fluent/theme/FluentColors.ts +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -1,288 +1,288 @@ export const FluentColors: any = { // Gray - 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", + 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', // Illustration - 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", + 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', // Communication - communication90: "#004578", - communication80: "#005a9e", - communication70: "#106ebe", - communication60: "#0078d7", - communication50: "#2b88d8", - communication40: "#71afe5", - communication30: "#c7e0f4", - communication20: "#deecf9", - communication10: "#eff6fc", + communication90: '#004578', + communication80: '#005a9e', + communication70: '#106ebe', + communication60: '#0078d7', + communication50: '#2b88d8', + communication40: '#71afe5', + communication30: '#c7e0f4', + communication20: '#deecf9', + communication10: '#eff6fc', // Excel - excel70: "#002901", - excel60: "#0b4218", - excel50: "#165a2f", - excel40: "#217346", - excel30: "#4c916c", - excel20: "#77b091", - excel10: "#a2ceb7", + excel70: '#002901', + excel60: '#0b4218', + excel50: '#165a2f', + excel40: '#217346', + excel30: '#4c916c', + excel20: '#77b091', + excel10: '#a2ceb7', // PowerPoint - powerPoint70: "#620000", - powerPoint60: "#7e180e", - powerPoint50: "#9b2f1c", - powerPoint40: "#b7472a", - powerPoint30: "#c96c54", - powerPoint20: "#dc927e", - powerPoint10: "#eeb7a9", + powerPoint70: '#620000', + powerPoint60: '#7e180e', + powerPoint50: '#9b2f1c', + powerPoint40: '#b7472a', + powerPoint30: '#c96c54', + powerPoint20: '#dc927e', + powerPoint10: '#eeb7a9', // Word - word70: "#001b59", - word60: "#0e2f6f", - word50: "#1d4384", - word40: "#2b579a", - word30: "#557bb3", - word20: "#7f9ecc", - word10: "#a9c2e6", + word70: '#001b59', + word60: '#0e2f6f', + word50: '#1d4384', + word40: '#2b579a', + word30: '#557bb3', + word20: '#7f9ecc', + word10: '#a9c2e6', // OneNote - oneNote80: "#4c0f6c", - oneNote70: "#5c1384", - oneNote60: "#7719aa", - oneNote50: "#9953c0", - oneNote40: "#d0afe2", - oneNote30: "#ddc5ec", - oneNote20: "#efdffa", - oneNote10: "#f5edfd", + oneNote80: '#4c0f6c', + oneNote70: '#5c1384', + oneNote60: '#7719aa', + oneNote50: '#9953c0', + oneNote40: '#d0afe2', + oneNote30: '#ddc5ec', + oneNote20: '#efdffa', + oneNote10: '#f5edfd', // Teams - teams70: "#001765", - teams60: "#1c2d7e", - teams50: "#394296", - teams40: "#5558af", - teams30: "#787bc3", - teams20: "#9b9dd8", - teams10: "#bec0ec", + teams70: '#001765', + teams60: '#1c2d7e', + teams50: '#394296', + teams40: '#5558af', + teams30: '#787bc3', + teams20: '#9b9dd8', + teams10: '#bec0ec', // High contrast - contrastBlackDisabled: "#00ff00", - contrastWhiteDisabled: "#600000", - contrastBlackSelected: "#1aebff", - contrastWhiteSelected: "#37006e" + contrastBlackDisabled: '#00ff00', + contrastWhiteDisabled: '#600000', + contrastBlackSelected: '#1aebff', + contrastWhiteSelected: '#37006e' }; From d41674be12296349adda7d20b6d3a638b1e7ac89 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 15:05:17 -0700 Subject: [PATCH 05/10] Fix quotes --- .../components/fluent/theme/FluentColors.ts | 1 + .../components/fluent/theme/FluentTheme.ts | 4 +-- .../fluent/theme/FluentThemePage.tsx | 28 +++++++++---------- .../experiments/src/demo/AppDefinition.tsx | 8 +++--- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts index 32bbae1f168167..39a57a63280914 100644 --- a/packages/experiments/src/components/fluent/theme/FluentColors.ts +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -1,3 +1,4 @@ +/* tslint:disable:no-any */ export const FluentColors: any = { // Gray black: '#000000', diff --git a/packages/experiments/src/components/fluent/theme/FluentTheme.ts b/packages/experiments/src/components/fluent/theme/FluentTheme.ts index cee096619b09d6..8996e3b7564e4c 100644 --- a/packages/experiments/src/components/fluent/theme/FluentTheme.ts +++ b/packages/experiments/src/components/fluent/theme/FluentTheme.ts @@ -1,5 +1,5 @@ -import { createTheme, ITheme } from "office-ui-fabric-react"; -import { FluentColors } from "@uifabric/experiments/lib/components/fluent/theme/FluentColors"; +import { createTheme, ITheme } from 'office-ui-fabric-react'; +import { FluentColors } from '@uifabric/experiments/lib/components/fluent/theme/FluentColors'; const FluentTheme: ITheme = createTheme({ palette: { diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx index c92caf5315dcdc..219d16b2bfcd78 100644 --- a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -1,42 +1,42 @@ -import * as React from "react"; +import * as React from 'react'; import { IComponentDemoPageProps, ComponentPage, ExampleCard -} from "@uifabric/example-app-base"; +} 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; +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 (

- We're updating Fabric to use new colors from the{" "} - Fluent Design System. + We're updating Fabric to use new colors from the{ ' ' } + Fluent Design System. Before these colors become the defaults, this theme is provided as a way to preview how the color changes will affect your app. Note - that theming requires components to be written using{" "} - + that theming requires components to be written using{ ' ' } + mergeStyles , and this conversion work has not been completed.

} - isHeaderVisible={this.props.isHeaderVisible} + isHeaderVisible={ this.props.isHeaderVisible } exampleCards={
diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx index 3ae07750547d4c..f93c450e5416c9 100644 --- a/packages/experiments/src/demo/AppDefinition.tsx +++ b/packages/experiments/src/demo/AppDefinition.tsx @@ -83,10 +83,10 @@ export const AppDefinition: IAppDefinition = { url: '#/examples/nav' }, { - component: require("../components/fluent/theme/FluentThemePage").FluentThemePage, - key: "FluentTheme", - name: "Fluent Theme", - url: "#/examples/fluenttheme" + component: require('../components/fluent/theme/FluentThemePage').FluentThemePage, + key: 'FluentTheme', + name: 'Fluent Theme', + url: '#/examples/fluenttheme' } ] } From 4d9a9a83a4b973a74e4ef692a85496ed1e59ded9 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 15:09:35 -0700 Subject: [PATCH 06/10] Split colors into separate groups --- .../components/fluent/theme/FluentColors.ts | 43 +++++++++++-------- .../components/fluent/theme/FluentTheme.ts | 28 ++++++------ .../fluent/theme/FluentThemePage.tsx | 3 +- 3 files changed, 41 insertions(+), 33 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts index 39a57a63280914..32ac0dea1ed594 100644 --- a/packages/experiments/src/components/fluent/theme/FluentColors.ts +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -1,6 +1,5 @@ /* tslint:disable:no-any */ -export const FluentColors: any = { - // Gray +export const GrayColors: any = { black: '#000000', gray220: '#11100f', gray210: '#161514', @@ -24,9 +23,10 @@ export const FluentColors: any = { gray30: '#edebe9', gray20: '#f3f2f1', gray10: '#faf9f8', - white: '#ffffff', + white: '#ffffff' +}; - // Illustration +export const IllustrationColors: any = { pinkRed40: '#750b1c', pinkRed30: '#761721', pinkRed20: '#e6808a', @@ -222,9 +222,10 @@ export const FluentColors: any = { pink40: '#c30052', pink30: '#ea005e', pink20: '#ee3f86', - pink10: '#edbed3', + pink10: '#edbed3' +} - // Communication +export const CommunicationColors: any = { communication90: '#004578', communication80: '#005a9e', communication70: '#106ebe', @@ -233,36 +234,40 @@ export const FluentColors: any = { communication40: '#71afe5', communication30: '#c7e0f4', communication20: '#deecf9', - communication10: '#eff6fc', + communication10: '#eff6fc' +}; - // Excel +export const ExcelColors: any = { excel70: '#002901', excel60: '#0b4218', excel50: '#165a2f', excel40: '#217346', excel30: '#4c916c', excel20: '#77b091', - excel10: '#a2ceb7', + excel10: '#a2ceb7' +}; - // PowerPoint +export const PowerPointColors: any = { powerPoint70: '#620000', powerPoint60: '#7e180e', powerPoint50: '#9b2f1c', powerPoint40: '#b7472a', powerPoint30: '#c96c54', powerPoint20: '#dc927e', - powerPoint10: '#eeb7a9', + powerPoint10: '#eeb7a9' +}; - // Word +export const WordColors: any = { word70: '#001b59', word60: '#0e2f6f', word50: '#1d4384', word40: '#2b579a', word30: '#557bb3', word20: '#7f9ecc', - word10: '#a9c2e6', + word10: '#a9c2e6' +}; - // OneNote +export const OneNoteColors: any = { oneNote80: '#4c0f6c', oneNote70: '#5c1384', oneNote60: '#7719aa', @@ -270,18 +275,20 @@ export const FluentColors: any = { oneNote40: '#d0afe2', oneNote30: '#ddc5ec', oneNote20: '#efdffa', - oneNote10: '#f5edfd', + oneNote10: '#f5edfd' +}; - // Teams +export const TeamsColors: any = { teams70: '#001765', teams60: '#1c2d7e', teams50: '#394296', teams40: '#5558af', teams30: '#787bc3', teams20: '#9b9dd8', - teams10: '#bec0ec', + teams10: '#bec0ec' +}; - // High contrast +export const HighContrastColors: any = { contrastBlackDisabled: '#00ff00', contrastWhiteDisabled: '#600000', contrastBlackSelected: '#1aebff', diff --git a/packages/experiments/src/components/fluent/theme/FluentTheme.ts b/packages/experiments/src/components/fluent/theme/FluentTheme.ts index 8996e3b7564e4c..f51f1fef0c4df5 100644 --- a/packages/experiments/src/components/fluent/theme/FluentTheme.ts +++ b/packages/experiments/src/components/fluent/theme/FluentTheme.ts @@ -1,21 +1,21 @@ import { createTheme, ITheme } from 'office-ui-fabric-react'; -import { FluentColors } from '@uifabric/experiments/lib/components/fluent/theme/FluentColors'; +import { GrayColors } from '@uifabric/experiments/lib/components/fluent/theme/FluentColors'; const FluentTheme: ITheme = createTheme({ palette: { - black: FluentColors.black, - neutralDark: FluentColors.gray190, - neutralPrimary: FluentColors.gray160, - neutralPrimaryAlt: FluentColors.gray150, - neutralSecondary: FluentColors.gray130, - neutralTertiary: FluentColors.gray90, - neutralTertiaryAlt: FluentColors.gray60, - neutralQuaternary: FluentColors.gray50, - neutralQuaternaryAlt: FluentColors.gray40, - neutralLight: FluentColors.gray30, - neutralLighter: FluentColors.gray20, - neutralLighterAlt: FluentColors.gray10, - white: FluentColors.white + 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 } }); diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx index 219d16b2bfcd78..60a9517bf1e3af 100644 --- a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -6,7 +6,8 @@ import { } 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; +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, From 33f8bb5cf794dfbe1288227455151d83705a1c00 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Thu, 3 May 2018 15:42:35 -0700 Subject: [PATCH 07/10] Update documentation --- .../src/components/fluent/theme/FluentThemePage.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx index 60a9517bf1e3af..4ba5236bacd95f 100644 --- a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -24,11 +24,15 @@ export class FluentThemePage extends React.Component< We're updating Fabric to use new colors from the{ ' ' } Fluent Design System. Before these colors become the defaults, this theme is provided as - a way to preview how the color changes will affect your app. Note - that theming requires components to be written using{ ' ' } + a way to preview how the color changes will affect your app. +

+

+ For components that have been converted to{ ' ' } mergeStyles - , and this conversion work has not been completed. + , 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 loadTheme() function.

} From a470b9f2c51bde8c744d49db7180ee619d0aeb4b Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Mon, 7 May 2018 09:15:12 -0700 Subject: [PATCH 08/10] Add missing semicolon --- .../experiments/src/components/fluent/theme/FluentColors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts index 32ac0dea1ed594..66fefe0c424917 100644 --- a/packages/experiments/src/components/fluent/theme/FluentColors.ts +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -223,7 +223,7 @@ export const IllustrationColors: any = { pink30: '#ea005e', pink20: '#ee3f86', pink10: '#edbed3' -} +}; export const CommunicationColors: any = { communication90: '#004578', From cac96178c57126b2c59774082c97952236bd12b5 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Mon, 7 May 2018 09:23:10 -0700 Subject: [PATCH 09/10] Link to loadTheme function --- .../src/components/fluent/theme/FluentThemePage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx index 4ba5236bacd95f..bb5e023424a59f 100644 --- a/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx +++ b/packages/experiments/src/components/fluent/theme/FluentThemePage.tsx @@ -32,7 +32,11 @@ export class FluentThemePage extends React.Component< mergeStyles , 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 loadTheme() function. + custom components), use the + + loadTheme() + + function.

} From 0ab113b549096c08eefb8a4bfa7eec543ae37028 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Mon, 7 May 2018 10:02:33 -0700 Subject: [PATCH 10/10] Remove app-specific colors --- .../components/fluent/theme/FluentColors.ts | 51 ------------------- 1 file changed, 51 deletions(-) diff --git a/packages/experiments/src/components/fluent/theme/FluentColors.ts b/packages/experiments/src/components/fluent/theme/FluentColors.ts index 66fefe0c424917..a471b3e919f004 100644 --- a/packages/experiments/src/components/fluent/theme/FluentColors.ts +++ b/packages/experiments/src/components/fluent/theme/FluentColors.ts @@ -237,57 +237,6 @@ export const CommunicationColors: any = { communication10: '#eff6fc' }; -export const ExcelColors: any = { - excel70: '#002901', - excel60: '#0b4218', - excel50: '#165a2f', - excel40: '#217346', - excel30: '#4c916c', - excel20: '#77b091', - excel10: '#a2ceb7' -}; - -export const PowerPointColors: any = { - powerPoint70: '#620000', - powerPoint60: '#7e180e', - powerPoint50: '#9b2f1c', - powerPoint40: '#b7472a', - powerPoint30: '#c96c54', - powerPoint20: '#dc927e', - powerPoint10: '#eeb7a9' -}; - -export const WordColors: any = { - word70: '#001b59', - word60: '#0e2f6f', - word50: '#1d4384', - word40: '#2b579a', - word30: '#557bb3', - word20: '#7f9ecc', - word10: '#a9c2e6' -}; - -export const OneNoteColors: any = { - oneNote80: '#4c0f6c', - oneNote70: '#5c1384', - oneNote60: '#7719aa', - oneNote50: '#9953c0', - oneNote40: '#d0afe2', - oneNote30: '#ddc5ec', - oneNote20: '#efdffa', - oneNote10: '#f5edfd' -}; - -export const TeamsColors: any = { - teams70: '#001765', - teams60: '#1c2d7e', - teams50: '#394296', - teams40: '#5558af', - teams30: '#787bc3', - teams20: '#9b9dd8', - teams10: '#bec0ec' -}; - export const HighContrastColors: any = { contrastBlackDisabled: '#00ff00', contrastWhiteDisabled: '#600000',