@import '~office-ui-fabric-core/dist/sass/References';
@import './node_modules/spfx-uifabric-themes/office.theme.vars';

/* themed tokens */
$ms-color-themeDarker: "[theme:themeDarker, default: #004578]";
$ms-color-themeDark: "[theme:themeDark, default: #005a9e]";
$ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]";
$ms-color-themePrimary: "[theme:themePrimary, default: #0078d7]";
$ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]";
$ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]";
$ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]";
$ms-color-themeLighter: "[theme:themeLighter, default: #deecf9]";
$ms-color-themeLighterAlt: "[theme:themeLighterAlt, default: #eff6fc]";
$ms-color-black: "[theme:black, default: #000000]";
$ms-color-neutralDark: "[theme:neutralDark, default: #212121]";
$ms-color-neutralPrimary: "[theme:neutralPrimary, default: #333333]";
$ms-color-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default: #3c3c3c]";
$ms-color-neutralSecondary: "[theme:neutralSecondary, default: #666666]";
$ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #767676]";
$ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a6a6a6]";
$ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]";
$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d0d0d0]";
$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #dadada]";
$ms-color-neutralLight: "[theme:neutralLight, default: #eaeaea]";
$ms-color-neutralLighter: "[theme:neutralLighter, default: #f4f4f4]";
$ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #f8f8f8]";
$ms-color-white: "[theme:white, default: #ffffff]";
$ms-color-blackTranslucent40: "[theme:blackTranslucent40, default: rgba(0,0,0,.4)]";
$ms-color-whiteTranslucent40: "[theme:whiteTranslucent40, default: rgba(255,255,255,.4)]";
$ms-color-yellow: "[theme:yellow, default: #ffb900]";
$ms-color-yellowLight: "[theme:yellowLight, default: #fff100]";
$ms-color-orange: "[theme:orange, default: #d83b01]";
$ms-color-orangeLight: "[theme:orangeLight, default: #ff8c00]";
$ms-color-redDark: "[theme:redDark, default: #a80000]";
$ms-color-red: "[theme:red, default: #e81123]";
$ms-color-magentaDark: "[theme:magentaDark, default: #5c005c]";
$ms-color-magenta: "[theme:magenta, default: #b4009e]";
$ms-color-magentaLight: "[theme:magentaLight, default: #e3008c]";
$ms-color-purpleDark: "[theme:purpleDark, default: #32145a]";
$ms-color-purple: "[theme:purple, default: #5c2d91]";
$ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]";
$ms-color-blueDark: "[theme:blueDark, default: #002050]";
$ms-color-blueMid: "[theme:blueMid, default: #00188f]";
$ms-color-blue: "[theme:blue, default: #0078d7]";
$ms-color-blueLight: "[theme:blueLight, default: #00bcf2]";
$ms-color-tealDark: "[theme:tealDark, default: #004b50]";
$ms-color-teal: "[theme:teal, default: #008272]";
$ms-color-tealLight: "[theme:tealLight, default: #00b294]";
$ms-color-greenDark: "[theme:greenDark, default: #004b1c]";
$ms-color-green: "[theme:green, default: #107c10]";
$ms-color-greenLight: "[theme:greenLight, default: #bad80a]";
$ms-color-error: "[theme:error, default: #a80000]";
$ms-color-errorText: "[theme:errorText, default: #333333]";
$ms-color-errorBackground: "[theme:errorBackground, default: #fde7e9]";
$ms-color-success: "[theme:success, default: #107c10]";
$ms-color-successText: "[theme:successText, default: #333333]";
$ms-color-successBackground: "[theme:successBackground, default: #dff6dd]";
$ms-color-alert: "[theme:alert, default: #d83b01]";
$ms-color-alertText: "[theme:alertText, default: #333333]";
$ms-color-alertBackground: "[theme:alertBackground, default: #deecf9]";
$ms-color-warning: "[theme:warning, default: #767676]";
$ms-color-warningText: "[theme:warningText, default: #333333]";
$ms-color-warningBackground: "[theme:warningBackground, default: #fff4ce]";
$ms-color-severeWarning: "[theme:severeWarning, default: #d83b01]";
$ms-color-severeWarningText: "[theme:severeWarningText, default: #333333]";
$ms-color-severeWarningBackground: "[theme:severeWarningBackground, default: #fed9cc]";
$ms-color-info: "[theme:info, default: #767676]";
$ms-color-infoText: "[theme:infoText, default: #333333]";
$ms-color-infoBackground: "[theme:infoBackground, default: #f4f4f4]";
$ms-color-orangeLighter: "[theme:orangeLighter, default: #ea4300]";

/** Semantic Color Variables - taken from 
 * https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/common/_semanticColorVariables.scss
 */
$focusedBorderColor: $ms-color-neutralSecondary;

$bodyBackgroundColor: $ms-color-white;
$bodyForegroundColor: $ms-color-neutralPrimary;

/* Primary item colors, used for Nav, DetailsList headers, Pivots */
$unselectedBackgroundColor: $bodyBackgroundColor;
$unselectedForegroundColor: $bodyForegroundColor;

$disabledBackgroundColor: $bodyBackgroundColor;
$disabledForegroundColor: $ms-color-neutralTertiaryAlt;

$unselectedHoverBackgroundColor: $ms-color-neutralLighterAlt;
$unselectedHoverForegroundColor: $bodyForegroundColor;

$unselectedActiveBackgroundColor: $ms-color-neutralLight;
$unselectedActiveForegroundColor: $bodyForegroundColor;

$selectedBackgroundColor: $ms-color-neutralLighter;
$selectedForegroundColor: $ms-color-neutralPrimary;

$selectedHoverBackgroundColor: $ms-color-neutralLighter;
$selectedHoverForegroundColor: $ms-color-neutralDark;

$selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt;
$selectedActiveForegroundColor: $ms-color-neutralPrimary;

$dividerColor: $ms-color-neutralLight;

// *** New semantic slots
// todo: convert to theme tokens

/*** BASIC ***/
$bodyBackgroundColor: $ms-color-white;
$bodyTextColor: $ms-color-neutralPrimary;
$bodySubtextColor: $ms-color-neutralSecondary;

$disabledBackgroundColor: $ms-color-neutralLighter;
$disabledTextColor: $ms-color-neutralTertiaryAlt;
$disabledSubtextColor: $ms-color-neutralQuaternary;

$focusBorderColor: $ms-color-black;

// $errorBackgroundColor: todo
$errorTextColor: $ms-color-redDark;

/*** Text fields ***/
$fieldBackgroundColor: $ms-color-white;
$fieldTextColor: $ms-color-neutralPrimary;

$fieldBorderColor: $ms-color-neutralTertiary;
$fieldBorderHoverColor: $ms-color-neutralDark;
$fieldBorderFocusColor: $ms-color-themePrimary;

$fieldPlaceholderColor: $ms-color-neutralTertiary;

/*** State controls ***/
$controlBackgroundColor: $ms-color-white;
$controlBackgroundSelectedColor: $ms-color-themePrimary;
$controlBackgroundSelectedHoverColor: $ms-color-themeDarkAlt;

$controlForegroundColor: $ms-color-neutralPrimary;
$controlForegroundHoverColor: $ms-color-black;
$controlForegroundSelectedColor: $ms-color-white;

$controlBorderUnselectedColor: $ms-color-neutralTertiary;
$controlBorderUnselectedHoverColor: $ms-color-neutralPrimary;
// $controlBorderSelectedColor: unused
$controlBorderSelectedHoverColor: $ms-color-themePrimary;

/*** Menus ***/
$menuBackgroundColor: $ms-color-white;
$menuBackgroundHoverColor: $ms-color-neutralLighter;
$menuBackgroundSelectedColor: $ms-color-neutralQuaternaryAlt;

$menuTextColor: $ms-color-neutralPrimary;
$menuTextSelectedColor: $ms-color-black;
$menuTextDisabledColor: $ms-color-neutralTertiaryAlt;

$menuIconColor: $ms-color-themePrimary;

$menuHeaderColor: $ms-color-themePrimary;

$menuDividerColor: $ms-color-neutralLight;

/*** Lists ***/
$listBackgroundColor: transparent;
$listTextColor: $ms-color-neutralPrimary;

$listItemHoverColor: $ms-color-neutralLighter;
$listItemSelectedColor: $ms-color-neutralQuaternary;
$listItemSelectedHoverColor: $ms-color-neutralQuaternaryAlt;