@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
155 lines • 6.16 kB
JavaScript
define(["require", "exports", "tslib", "@uifabric/variants", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, variants_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.regionStyles = function (props, theme) { return ({
root: {
backgroundColor: theme.semanticColors.bodyBackground,
color: theme.semanticColors.bodyText
}
}); };
// TODO: what is our story with ThemeGeneratorPage? right now it creates palettes, but we don't want to support
// theming through different palette sets. ThemeGeneratorPage should probably be redone to create schemes
// that fill semantic slots.
// TODO: consider how Philip's variants package will play into schemes and default theme.
// * what are the default, fixed variants? neutral, soft, strong
// * do we populate and pregenerate these variants by default? do we take on variants package as a dependency in OUFR?
// * variants assume that palette will also be in scheme.
// * what do we want to limit scheme to?
// * what is the shape of ITheme vs. IScheme?
var invertedPrimaryPalette = {
themePrimary: '#ffffff',
themeLighterAlt: '#767676',
themeLighter: '#a6a6a6',
themeLight: '#c8c8c8',
themeTertiary: '#d0d0d0',
themeSecondary: '#dadada',
themeDarkAlt: '#eaeaea',
themeDark: '#f4f4f4',
themeDarker: '#f8f8f8',
neutralLighterAlt: '#097dd6',
neutralLighter: '#1282d7',
neutralLight: '#2089da',
neutralQuaternaryAlt: '#288edc',
neutralQuaternary: '#3092dd',
neutralTertiaryAlt: '#4fa3e3',
neutralTertiary: '#c8c8c8',
neutralSecondary: '#d0d0d0',
neutralPrimaryAlt: '#dadada',
neutralPrimary: '#ffffff',
neutralDark: '#f4f4f4',
black: '#f8f8f8',
white: '#0078d4',
// TODO: not generated by ThemeGeneratorPage:
blackTranslucent40: 'rgba(0,0,0,.4)',
neutralSecondaryAlt: '#767676',
accent: '#0078d4',
whiteTranslucent40: 'rgba(255,255,255,.4)',
yellowDark: '#d29200',
yellow: '#ffb900',
yellowLight: '#fff100',
orange: '#d83b01',
orangeLight: '#ea4300',
orangeLighter: '#ff8c00',
redDark: '#a80000',
red: '#e81123',
magentaDark: '#5c005c',
magenta: '#b4009e',
magentaLight: '#e3008c',
purpleDark: '#32145a',
purple: '#5c2d91',
purpleLight: '#b4a0ff',
blueDark: '#002050',
blueMid: '#00188f',
blue: '#0078d4',
blueLight: '#00bcf2',
tealDark: '#004b50',
teal: '#008272',
tealLight: '#00b294',
greenDark: '#004b1c',
green: '#107c10',
greenLight: '#bad80a'
};
var invertedDefaultPalette = {
themePrimary: '#ffffff',
themeLighterAlt: '#767676',
themeLighter: '#a6a6a6',
themeLight: '#c8c8c8',
themeTertiary: '#d0d0d0',
themeSecondary: '#dadada',
themeDarkAlt: '#eaeaea',
themeDark: '#f4f4f4',
themeDarker: '#f8f8f8',
neutralLighterAlt: '#0b0b0b',
neutralLighter: '#151515',
neutralLight: '#252525',
neutralQuaternaryAlt: '#2f2f2f',
neutralQuaternary: '#373737',
neutralTertiaryAlt: '#595959',
neutralTertiary: '#c8c8c8',
neutralSecondary: '#d0d0d0',
neutralPrimaryAlt: '#dadada',
neutralPrimary: '#ffffff',
neutralDark: '#f4f4f4',
black: '#f8f8f8',
white: '#000000',
blackTranslucent40: 'rgba(0,0,0,.4)',
neutralSecondaryAlt: '#767676',
accent: '#0078d4',
whiteTranslucent40: 'rgba(255,255,255,.4)',
yellowDark: '#d29200',
yellow: '#ffb900',
yellowLight: '#fff100',
orange: '#d83b01',
orangeLight: '#ea4300',
orangeLighter: '#ff8c00',
redDark: '#a80000',
red: '#e81123',
magentaDark: '#5c005c',
magenta: '#b4009e',
magentaLight: '#e3008c',
purpleDark: '#32145a',
purple: '#5c2d91',
purpleLight: '#b4a0ff',
blueDark: '#002050',
blueMid: '#00188f',
blue: '#0078d4',
blueLight: '#00bcf2',
tealDark: '#004b50',
teal: '#008272',
tealLight: '#00b294',
greenDark: '#004b1c',
green: '#107c10',
greenLight: '#bad80a'
};
exports.defaultTheme = Styling_1.getTheme(true);
exports.neutralTheme = variants_1.getNeutralVariant(exports.defaultTheme);
exports.softTheme = variants_1.getSoftVariant(exports.defaultTheme);
exports.strongTheme = variants_1.getStrongVariant(exports.defaultTheme);
exports.invertedDefaultTheme = Styling_1.createTheme({
palette: invertedDefaultPalette,
semanticColors: {
bodyText: exports.defaultTheme.palette.white,
bodyBackground: exports.defaultTheme.palette.neutralPrimary
}
});
exports.invertedPrimaryTheme = Styling_1.createTheme({
palette: invertedPrimaryPalette,
semanticColors: {
bodyText: exports.defaultTheme.palette.white,
bodyBackground: exports.defaultTheme.palette.themePrimary
}
});
exports.schemeThemeVariants = tslib_1.__assign({}, exports.defaultTheme, { schemes: {
default: exports.defaultTheme,
neutral: exports.neutralTheme,
soft: exports.softTheme,
strong: exports.strongTheme
} });
exports.schemeThemeCustom = tslib_1.__assign({}, exports.defaultTheme, { schemes: {
default: exports.defaultTheme,
neutral: exports.defaultTheme,
soft: exports.invertedPrimaryTheme,
strong: exports.invertedDefaultTheme
} });
});
//# sourceMappingURL=Themes.js.map