Skip to content

SASS Variables

Theme Slot SASS Variable Color
accent $ouif-accent    #8764b8
accentButtonBackground $ouif-accentButtonBackground    #8764b8
accentButtonText $ouif-accentButtonText    #ffffff
actionLink $ouif-actionLink    #333333
actionLinkHovered $ouif-actionLinkHovered    #212121
backgroundImageUri $ouif-backgroundImageUri    none
backgroundOverlay $ouif-backgroundOverlay    
black $ouif-black    #000000
blackTranslucent40 $ouif-blackTranslucent40    rgba(0,0,0,.4)
blockingBackground $ouif-blockingBackground    rgba(234, 67, 0, .2)
blue $ouif-blue    #0078d4
blueDark $ouif-blueDark    #002050
blueLight $ouif-blueLight    #00bcf2
blueMid $ouif-blueMid    #00188f
bodyBackground $ouif-bodyBackground    #ffffff
bodyDivider $ouif-bodyDivider    #eaeaea
bodyFrameBackground $ouif-bodyFrameBackground    #ffffff
bodyFrameDivider $ouif-bodyFrameDivider    #eaeaea
bodyStandoutBackground $ouif-bodyStandoutBackground    #f8f8f8
bodySubtext $ouif-bodySubtext    #666666
bodyText $ouif-bodyText    #333333
bodyTextChecked $ouif-bodyTextChecked    #000000
buttonBackground $ouif-buttonBackground    #f4f4f4
buttonBackgroundChecked $ouif-buttonBackgroundChecked    #c8c8c8
buttonBackgroundCheckedHovered $ouif-buttonBackgroundCheckedHovered    #eaeaea
buttonBackgroundDisabled $ouif-buttonBackgroundDisabled    #f4f4f4
buttonBackgroundHovered $ouif-buttonBackgroundHovered    #eaeaea
buttonBackgroundPressed $ouif-buttonBackgroundPressed    #eaeaea
buttonBorder $ouif-buttonBorder    transparent
buttonBorderDisabled $ouif-buttonBorderDisabled    transparent
buttonText $ouif-buttonText    #333333
buttonTextChecked $ouif-buttonTextChecked    #212121
buttonTextCheckedHovered $ouif-buttonTextCheckedHovered    #000000
buttonTextDisabled $ouif-buttonTextDisabled    #a6a6a6
buttonTextHovered $ouif-buttonTextHovered    #212121
buttonTextPressed $ouif-buttonTextPressed    #212121
defaultStateBackground $ouif-defaultStateBackground    #f8f8f8
dialogBorder $ouif-dialogBorder    #f4f4f4
disabledBackground $ouif-disabledBackground    #f4f4f4
disabledBodySubtext $ouif-disabledBodySubtext    #c8c8c8
disabledBodyText $ouif-disabledBodyText    #a6a6a6
disabledSubtext $ouif-disabledSubtext    #d0d0d0
disabledText $ouif-disabledText    #a6a6a6
elevation16 $ouif-elevation16    0 0 5px 0 rgba(0,0,0,.4)
elevation4 $ouif-elevation4    0 0 5px 0 rgba(0,0,0,.4)
elevation64 $ouif-elevation64    0 0 5px 0 rgba(0,0,0,.4)
elevation8 $ouif-elevation8    0 0 5px 0 rgba(0,0,0,.4)
errorBackground $ouif-errorBackground    rgba(232, 17, 35, .2)
errorText $ouif-errorText    #a80000
focusBorder $ouif-focusBorder    #666666
green $ouif-green    #107c10
greenDark $ouif-greenDark    #004b1c
greenLight $ouif-greenLight    #bad80a
inputBackground $ouif-inputBackground    #ffffff
inputBackgroundChecked $ouif-inputBackgroundChecked    #0078d4
inputBackgroundCheckedHovered $ouif-inputBackgroundCheckedHovered    #106ebe
inputBorder $ouif-inputBorder    #a6a6a6
inputBorderHovered $ouif-inputBorderHovered    #333333
inputFocusBorderAlt $ouif-inputFocusBorderAlt    #0078d4
inputForegroundChecked $ouif-inputForegroundChecked    #ffffff
inputPlaceholderText $ouif-inputPlaceholderText    #666666
inputText $ouif-inputText    #333333
inputTextHovered $ouif-inputTextHovered    #212121
link $ouif-link    #0078d4
linkHovered $ouif-linkHovered    #004578
listBackground $ouif-listBackground    #ffffff
listHeaderBackgroundHovered $ouif-listHeaderBackgroundHovered    #f4f4f4
listHeaderBackgroundPressed $ouif-listHeaderBackgroundPressed    #eaeaea
listItemBackgroundChecked $ouif-listItemBackgroundChecked    #eaeaea
listItemBackgroundCheckedHovered $ouif-listItemBackgroundCheckedHovered    #dadada
listItemBackgroundHovered $ouif-listItemBackgroundHovered    #f4f4f4
listText $ouif-listText    #333333
listTextColor $ouif-listTextColor    #333333
magenta $ouif-magenta    #b4009e
magentaDark $ouif-magentaDark    #5c005c
magentaLight $ouif-magentaLight    #e3008c
menuBackground $ouif-menuBackground    #ffffff
menuDivider $ouif-menuDivider    #c8c8c8
menuHeader $ouif-menuHeader    #0078d4
menuIcon $ouif-menuIcon    #0078d4
menuItemBackgroundChecked $ouif-menuItemBackgroundChecked    #eaeaea
menuItemBackgroundHovered $ouif-menuItemBackgroundHovered    #f4f4f4
menuItemBackgroundPressed $ouif-menuItemBackgroundPressed    #eaeaea
menuItemText $ouif-menuItemText    #333333
menuItemTextHovered $ouif-menuItemTextHovered    #212121
neutralDark $ouif-neutralDark    #212121
neutralLight $ouif-neutralLight    #eaeaea
neutralLighter $ouif-neutralLighter    #f4f4f4
neutralLighterAlt $ouif-neutralLighterAlt    #f8f8f8
neutralPrimary $ouif-neutralPrimary    #333333
neutralPrimaryAlt $ouif-neutralPrimaryAlt    #3c3c3c
neutralQuaternary $ouif-neutralQuaternary    #d0d0d0
neutralQuaternaryAlt $ouif-neutralQuaternaryAlt    #dadada
neutralSecondary $ouif-neutralSecondary    #666666
neutralSecondaryAlt $ouif-neutralSecondaryAlt    #767676
neutralTertiary $ouif-neutralTertiary    #a6a6a6
neutralTertiaryAlt $ouif-neutralTertiaryAlt    #c8c8c8
orange $ouif-orange    #d83b01
orangeLight $ouif-orangeLight    #ea4300
orangeLighter $ouif-orangeLighter    #ff8c00
primaryBackground $ouif-primaryBackground    #ffffff
primaryButtonBackground $ouif-primaryButtonBackground    #0078d4
primaryButtonBackgroundDisabled $ouif-primaryButtonBackgroundDisabled    #f4f4f4
primaryButtonBackgroundHovered $ouif-primaryButtonBackgroundHovered    #106ebe
primaryButtonBackgroundPressed $ouif-primaryButtonBackgroundPressed    #005a9e
primaryButtonBorder $ouif-primaryButtonBorder    transparent
primaryButtonText $ouif-primaryButtonText    #ffffff
primaryButtonTextDisabled $ouif-primaryButtonTextDisabled    #d0d0d0
primaryButtonTextHovered $ouif-primaryButtonTextHovered    #ffffff
primaryButtonTextPressed $ouif-primaryButtonTextPressed    #ffffff
primaryText $ouif-primaryText    #333333
purple $ouif-purple    #5c2d91
purpleDark $ouif-purpleDark    #32145a
purpleLight $ouif-purpleLight    #b4a0ff
red $ouif-red    #e81123
redDark $ouif-redDark    #a80000
roundedCorner2 $ouif-roundedCorner2    0px
smallInputBorder $ouif-smallInputBorder    #666666
successBackground $ouif-successBackground    rgba(186, 216, 10, .2)
successText $ouif-successText    #107C10
suiteBarBackground $ouif-suiteBarBackground    #0078d4
suiteBarDisabledText $ouif-suiteBarDisabledText    #eaeaea
suiteBarText $ouif-suiteBarText    #ffffff
teal $ouif-teal    #008272
tealDark $ouif-tealDark    #004b50
tealLight $ouif-tealLight    #00b294
themeDark $ouif-themeDark    #005a9e
themeDarkAlt $ouif-themeDarkAlt    #106ebe
themeDarker $ouif-themeDarker    #004578
themeLight $ouif-themeLight    #c7e0f4
themeLighter $ouif-themeLighter    #deecf9
themeLighterAlt $ouif-themeLighterAlt    #eff6fc
themePrimary $ouif-themePrimary    #0078d4
themeSecondary $ouif-themeSecondary    #2b88d8
themeTertiary $ouif-themeTertiary    #71afe5
topBarBackground $ouif-topBarBackground    #eaeaea
topBarHoverText $ouif-topBarHoverText    #333333
topBarText $ouif-topBarText    #666666
variantBorder $ouif-variantBorder    #eaeaea
variantBorderHovered $ouif-variantBorderHovered    #a6a6a6
warningBackground $ouif-warningBackground    rgba(255, 185, 0, .2)
warningHighlight $ouif-warningHighlight    #ffb900
warningText $ouif-warningText    #333333
white $ouif-white    #ffffff
whiteTranslucent40 $ouif-whiteTranslucent40    rgba(255,255,255,.4)
yellow $ouif-yellow    #ffb900
yellowDark $ouif-yellowDark    #d29200
yellowLight $ouif-yellowLight    #fff100

Based on existing themes slots

Theme Slot SASS Variable Color
ms-font-large-MozOsxFontSmoothing $ouif-font-large-MozOsxFontSmoothing "[theme:ms-font-large-MozOsxFontSmoothing, default: grayscale]"
ms-font-large-WebkitFontSmoothing $ouif-font-large-WebkitFontSmoothing "[theme:ms-font-large-WebkitFontSmoothing, default: antialiased]"
ms-font-large-fontFamily $ouif-font-large-fontFamily "[theme:ms-font-large-fontFamily, default: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-large-fontSize $ouif-font-large-fontSize "[theme:ms-font-large-fontSize, default: 17px]"
ms-font-large-fontWeight $ouif-font-large-fontWeight "[theme:ms-font-large-fontWeight, default: 300]"
ms-font-medium-MozOsxFontSmoothing $ouif-font-medium-MozOsxFontSmoothing "[theme:ms-font-medium-MozOsxFontSmoothing, default: grayscale]"
ms-font-medium-WebkitFontSmoothing $ouif-font-medium-WebkitFontSmoothing "[theme:ms-font-medium-WebkitFontSmoothing, default: antialiased]"
ms-font-medium-fontFamily $ouif-font-medium-fontFamily "[theme:ms-font-medium-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-medium-fontSize $ouif-font-medium-fontSize "[theme:ms-font-medium-fontSize, default: 14px]"
ms-font-medium-fontWeight $ouif-font-medium-fontWeight "[theme:ms-font-medium-fontWeight, default: 400]"
ms-font-mediumPlus-MozOsxFontSmoothing $ouif-font-mediumPlus-MozOsxFontSmoothing "[theme:ms-font-mediumPlus-MozOsxFontSmoothing, default: grayscale]"
ms-font-mediumPlus-WebkitFontSmoothing $ouif-font-mediumPlus-WebkitFontSmoothing "[theme:ms-font-mediumPlus-WebkitFontSmoothing, default: antialiased]"
ms-font-mediumPlus-fontFamily $ouif-font-mediumPlus-fontFamily "[theme:ms-font-mediumPlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-mediumPlus-fontSize $ouif-font-mediumPlus-fontSize "[theme:ms-font-mediumPlus-fontSize, default: 15px]"
ms-font-mediumPlus-fontWeight $ouif-font-mediumPlus-fontWeight "[theme:ms-font-mediumPlus-fontWeight, default: 400]"
ms-font-mega-MozOsxFontSmoothing $ouif-font-mega-MozOsxFontSmoothing "[theme:ms-font-mega-MozOsxFontSmoothing, default: grayscale]"
ms-font-mega-WebkitFontSmoothing $ouif-font-mega-WebkitFontSmoothing "[theme:ms-font-mega-WebkitFontSmoothing, default: antialiased]"
ms-font-mega-fontFamily $ouif-font-mega-fontFamily "[theme:ms-font-mega-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-mega-fontSize $ouif-font-mega-fontSize "[theme:ms-font-mega-fontSize, default: 72px]"
ms-font-mega-fontWeight $ouif-font-mega-fontWeight "[theme:ms-font-mega-fontWeight, default: 100]"
ms-font-small-MozOsxFontSmoothing $ouif-font-small-MozOsxFontSmoothing "[theme:ms-font-small-MozOsxFontSmoothing, default: grayscale]"
ms-font-small-WebkitFontSmoothing $ouif-font-small-WebkitFontSmoothing "[theme:ms-font-small-WebkitFontSmoothing, default: antialiased]"
ms-font-small-fontFamily $ouif-font-small-fontFamily "[theme:ms-font-small-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-small-fontSize $ouif-font-small-fontSize "[theme:ms-font-small-fontSize, default: 12px]"
ms-font-small-fontWeight $ouif-font-small-fontWeight "[theme:ms-font-small-fontWeight, default: 400]"
ms-font-smallPlus-MozOsxFontSmoothing $ouif-font-smallPlus-MozOsxFontSmoothing "[theme:ms-font-smallPlus-MozOsxFontSmoothing, default: grayscale]"
ms-font-smallPlus-WebkitFontSmoothing $ouif-font-smallPlus-WebkitFontSmoothing "[theme:ms-font-smallPlus-WebkitFontSmoothing, default: antialiased]"
ms-font-smallPlus-fontFamily $ouif-font-smallPlus-fontFamily "[theme:ms-font-smallPlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-smallPlus-fontSize $ouif-font-smallPlus-fontSize "[theme:ms-font-smallPlus-fontSize, default: 13px]"
ms-font-smallPlus-fontWeight $ouif-font-smallPlus-fontWeight "[theme:ms-font-smallPlus-fontWeight, default: 400]"
ms-font-superLarge-MozOsxFontSmoothing $ouif-font-superLarge-MozOsxFontSmoothing "[theme:ms-font-superLarge-MozOsxFontSmoothing, default: grayscale]"
ms-font-superLarge-WebkitFontSmoothing $ouif-font-superLarge-WebkitFontSmoothing "[theme:ms-font-superLarge-WebkitFontSmoothing, default: antialiased]"
ms-font-superLarge-fontFamily $ouif-font-superLarge-fontFamily "[theme:ms-font-superLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-superLarge-fontSize $ouif-font-superLarge-fontSize "[theme:ms-font-superLarge-fontSize, default: 42px]"
ms-font-superLarge-fontWeight $ouif-font-superLarge-fontWeight "[theme:ms-font-superLarge-fontWeight, default: 100]"
ms-font-tiny-MozOsxFontSmoothing $ouif-font-tiny-MozOsxFontSmoothing "[theme:ms-font-tiny-MozOsxFontSmoothing, default: grayscale]"
ms-font-tiny-WebkitFontSmoothing $ouif-font-tiny-WebkitFontSmoothing "[theme:ms-font-tiny-WebkitFontSmoothing, default: antialiased]"
ms-font-tiny-fontFamily $ouif-font-tiny-fontFamily "[theme:ms-font-tiny-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-tiny-fontSize $ouif-font-tiny-fontSize "[theme:ms-font-tiny-fontSize, default: 10px]"
ms-font-tiny-fontWeight $ouif-font-tiny-fontWeight "[theme:ms-font-tiny-fontWeight, default: 600]"
ms-font-xLarge-MozOsxFontSmoothing $ouif-font-xLarge-MozOsxFontSmoothing "[theme:ms-font-xLarge-MozOsxFontSmoothing, default: grayscale]"
ms-font-xLarge-WebkitFontSmoothing $ouif-font-xLarge-WebkitFontSmoothing "[theme:ms-font-xLarge-WebkitFontSmoothing, default: antialiased]"
ms-font-xLarge-fontFamily $ouif-font-xLarge-fontFamily "[theme:ms-font-xLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-xLarge-fontSize $ouif-font-xLarge-fontSize "[theme:ms-font-xLarge-fontSize, default: 21px]"
ms-font-xLarge-fontWeight $ouif-font-xLarge-fontWeight "[theme:ms-font-xLarge-fontWeight, default: 100]"
ms-font-xLargePlus-MozOsxFontSmoothing $ouif-font-xLargePlus-MozOsxFontSmoothing "[theme:ms-font-xLargePlus-MozOsxFontSmoothing, default: grayscale]"
ms-font-xLargePlus-WebkitFontSmoothing $ouif-font-xLargePlus-WebkitFontSmoothing "[theme:ms-font-xLargePlus-WebkitFontSmoothing, default: antialiased]"
ms-font-xLargePlus-fontFamily $ouif-font-xLargePlus-fontFamily "[theme:ms-font-xLargePlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-xLargePlus-fontSize $ouif-font-xLargePlus-fontSize "[theme:ms-font-xLargePlus-fontSize, default: 21px]"
ms-font-xLargePlus-fontWeight $ouif-font-xLargePlus-fontWeight "[theme:ms-font-xLargePlus-fontWeight, default: 100]"
ms-font-xSmall-MozOsxFontSmoothing $ouif-font-xSmall-MozOsxFontSmoothing "[theme:ms-font-xSmall-MozOsxFontSmoothing, default: grayscale]"
ms-font-xSmall-WebkitFontSmoothing $ouif-font-xSmall-WebkitFontSmoothing "[theme:ms-font-xSmall-WebkitFontSmoothing, default: antialiased]"
ms-font-xSmall-fontFamily $ouif-font-xSmall-fontFamily "[theme:ms-font-xSmall-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-xSmall-fontSize $ouif-font-xSmall-fontSize "[theme:ms-font-xSmall-fontSize, default: 11px]"
ms-font-xSmall-fontWeight $ouif-font-xSmall-fontWeight "[theme:ms-font-xSmall-fontWeight, default: 400]"
ms-font-xxLarge-MozOsxFontSmoothing $ouif-font-xxLarge-MozOsxFontSmoothing "[theme:ms-font-xxLarge-MozOsxFontSmoothing, default: grayscale]"
ms-font-xxLarge-WebkitFontSmoothing $ouif-font-xxLarge-WebkitFontSmoothing "[theme:ms-font-xxLarge-WebkitFontSmoothing, default: antialiased]"
ms-font-xxLarge-fontFamily $ouif-font-xxLarge-fontFamily "[theme:ms-font-xxLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-xxLarge-fontSize $ouif-font-xxLarge-fontSize "[theme:ms-font-xxLarge-fontSize, default: 28px]"
ms-font-xxLarge-fontWeight $ouif-font-xxLarge-fontWeight "[theme:ms-font-xxLarge-fontWeight, default: 100]"
ms-font-xxLargePlus-MozOsxFontSmoothing $ouif-font-xxLargePlus-MozOsxFontSmoothing "[theme:ms-font-xxLargePlus-MozOsxFontSmoothing, default: grayscale]"
ms-font-xxLargePlus-WebkitFontSmoothing $ouif-font-xxLargePlus-WebkitFontSmoothing "[theme:ms-font-xxLargePlus-WebkitFontSmoothing, default: antialiased]"
ms-font-xxLargePlus-fontFamily $ouif-font-xxLargePlus-fontFamily "[theme:ms-font-xxLargePlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"
ms-font-xxLargePlus-fontSize $ouif-font-xxLargePlus-fontSize "[theme:ms-font-xxLargePlus-fontSize, default: 28px]"
ms-font-xxLargePlus-fontWeight $ouif-font-xxLargePlus-fontWeight "[theme:ms-font-xxLargePlus-fontWeight, default: 100]"