Sass Variables of all theme slots

_theming.scss

$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]";

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!

Bookmarked @StfBauer – thanks for sharing!

Meanwhile this Gist is a bit outdated - I created a npm package that allows you to consume those variables easier.
NPM Package: https://www.npmjs.com/package/spfx-uifabric-themes
Git Repository: https://github.com/StfBauer/spfx-uifabric-themes
Blog Post:

• https://n8d.at/blog/how-to-handle-typography-in-spfx-projects-with-spfx-officeui-themes/
• https://n8d.at/blog/npm-package-for-office-ui-fabric-colours-released-ok-a-while-back/