Skip to content

Instantly share code, notes, and snippets.

@StfBauer StfBauer/_theming.scss
Last active May 3, 2018

Embed
What would you like to do?
Sass Variables of all theme slots
$ms-greenLight: "[theme:greenLight, default:#bad80a]";
$ms-neutralSecondaryAlt: "[theme:info, default:#767676]";
$ms-neutralLight: "[theme:infoBackground, default:#eaeaea]";
$ms-magenta: "[theme:magenta, default:#b4009e]";
$ms-magentaDark: "[theme:magentaDark, default:#5c005c]";
$ms-magentaLight: "[theme:magentaLight, default:#e3008c]";
$ms-neutralDark: "[theme:neutralDark, default:#212121]";
$ms-neutralLight: "[theme:neutralLight, default:#eaeaea]";
$ms-neutralLighter: "[theme:neutralLighter, default:#f4f4f4]";
$ms-neutralLighterAlt: "[theme:neutralLighterAlt, default:#f8f8f8]";
$ms-neutralPrimary: "[theme:neutralPrimary, default:#333333]";
$ms-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3C3C3C]";
$ms-neutralQuaternary: "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
$ms-neutralQuaternaryAlt: "[theme:neutralQuaternary, default:#dadada]";
$ms-neutralSecondary: "[theme:neutralQuaternaryAlt, default:#666666]";
$ms-neutralSecondaryAlt: "[theme:neutralSecondary, default:#767676]";
$ms-neutralTertiary: "[theme:neutralSecondaryAlt, default:#a6a6a6]";
$ms-neutralTertiaryAlt: "[theme:neutralTertiary, default:#c8c8c8]";
$ms-white: "[theme:neutralTertiaryAlt, default:#ffffff]";
$ms-orange: "[theme:orange, default:#d83b01]";
$ms-orangeLight: "[theme:orangeLight, default:#ea4300]";
$ms-orangeLighter: "[theme:orangeLighter, default:#ff8c00]";
$ms-primaryBackground: "[theme:primaryBackground, default:#0078d7]";
$ms-primaryText: "[theme:primaryText, default:#0078d7]";
$ms-purple: "[theme:purple, default:#5c2d91]";
$ms-purpleDark: "[theme:purpleDark, default:#32145a]";
$ms-purpleLight: "[theme:purpleLight, default:#b4a0ff]";
$ms-red: "[theme:red, default:#e81123]";
$ms-redDark: "[theme:redDark, default:#a80000]";
$ms-success: "[theme:success, default:#107c10]";
$ms-successBackground: "[theme:successBackground, default:#dff6dd]";
$ms-teal: "[theme:teal, default:#008272]";
$ms-tealDark: "[theme:tealDark, default:#004b50]";
$ms-tealLight: "[theme:tealLight, default:#00b294]";
$ms-themeAccent: "[theme:themeAccent, default:inherit]";
$ms-themeAccentTranslucent10: "[theme:themeAccentTranslucent10, default:inherit]";
$ms-themeDark: "[theme:themeDark, default:#005a9e]";
$ms-themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
$ms-themeDarker: "[theme:themeDarker, default:#004578]";
$ms-themeLight: "[theme:themeLight, default:#b3d6f2]";
$ms-themeLightAlt: "[theme:themeLightAlt, default:inherit]";
$ms-themeLighter: "[theme:themeLighter, default:#deecf9]";
$ms-themeLighterAlt: "[theme:themeLighterAlt, default:#eff6fc]";
$ms-themePrimary: "[theme:themePrimary, default:#0078d7]";
$ms-themeSecondary: "[theme:themeSecondary, default:#2488d8]";
$ms-themeTertiary: "[theme:themeTertiary, default:#69afe5]";
$ms-themeTertiaryAlt: "[theme:themeTertiaryAlt, default:#c8c8c8]";
$ms-white: "[theme:white, default:#ffffff]";
$ms-whiteTranslucent40: "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
$ms-yellow: "[theme:yellow, default:#ffb900]";
$ms-yellowLight: "[theme:yellowLight, default:#fff100]";
@thechriskent

This comment has been minimized.

Copy link

commented Aug 18, 2017

Appears to be missing:

$ms-green:                      "[theme:green, default:#107c10]";
$ms-greenDark:              "[theme:greenDark, default:#004b1c]";
$ms-blueDark:                "[theme:blueDark, default:#002050]";
$ms-blueMid:                 "[theme:blueMid, default:#00188f]";
$ms-blue:                       "[theme:blue, default:#0078d7]";
$ms-blueLight:               "[theme:blueLight, default:#00bcf2]";

Love this by the way!

@patrickabel

This comment has been minimized.

Copy link

commented Dec 5, 2017

Bookmarked @StfBauer – thanks for sharing!

@StfBauer

This comment has been minimized.

Copy link
Owner Author

commented Dec 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.