Theme Color

  • 100

     SASS: $theme-100
    Fluent UI: Theme Lighter Alt / themeLighterAlt
  • 200

     SASS: $theme-200
    Fluent UI: Theme Lighter / themeLighter
  • 300

     SASS: $theme-300
    Fluent UI: Theme Light / themeLight
  • 400

     SASS: $theme-400
    Fluent UI: Theme Tertiary / themeTertiary
  • 500

     SASS: $theme-500
    Fluent UI: Theme Secondary / themeSecondary
  • 600

     SASS: $theme-600
    Fluent UI: Theme Primary / themePrimary
  • 700

     SASS: $theme-700
    Fluent UI: Theme Dark Alt / themeDarkAlt
  • 800

     SASS: $theme-800
    Fluent UI: Theme Dark / themeDark
  • 900

     SASS: $theme-900
    Fluent UI: Theme Darker / themeDarker
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Neutral Colors

  • 0

     SASS: $neutral-000
    Fluent UI: White / White
  • 50

     SASS: $neutral-050
    Fluent UI: Neutral Lighter Alt / neutralLighterAlt
  • 100

     SASS: $neutral-100
    Fluent UI: Neutral Lighter / neutralLighter
  • 200

     SASS: $neutral-200
    Fluent UI: Neutral Light / neutralLight
  • 250

     SASS: $neutral-250
    Fluent UI: Neutral Quaternary Alt / neutralQuaternaryAlt
  • 300

     SASS: $neutral-300
    Fluent UI: Neutral Quaternary / neutralQuaternary
  • 350

     SASS: $neutral-350
    Fluent UI: Neutral Tertiary Alt / neutralTertiaryAlt
  • 400

     SASS: $neutral-400
    Fluent UI: Neutral Tertiary / neutralTertiary
  • 450

     SASS: $neutral-450
    Fluent UI: Neutral Secondary Alt / neutralSecondaryAlt
  • 500

     SASS: $neutral-500
    Fluent UI: Neutral Secondary / neutralSecondary
  • 600

     SASS: $neutral-600
    Fluent UI: Neutral Primary Alt / neutralPrimaryAlt
  • 700

     SASS: $neutral-700
    Fluent UI: Neutral Primary / neutralPrimary
  • 800

     SASS: $neutral-800
    Fluent UI: Neutral Dark / neutralDark
  • 900

     SASS: $neutral-900
    Fluent UI: Black / Black
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Button Colors

  • neutral-000

     SASS: $neutral-000
    Fluent UI:  / buttonBackground
  • neutral-100

     SASS: $neutral-100
    Fluent UI: buttonBackgroundDisabled / Button Background Disabled
  • neutral-100

     SASS: $neutral-100
    Fluent UI: Button Background Hovered / buttonBackgroundHovered
  • neutral-100

     SASS: $neutral-100
    Fluent UI: buttonBorderDisabled / buttonBorderDisabled
  • neutral-200

     SASS: $neutral-200
    Fluent UI: Button Background Pressed / buttonBackgroundPressed
  • neutral-200

     SASS: $neutral-200
    Fluent UI: Button Background Checked Hovered / buttonBackgroundCheckedHovered
  • neutral-350

     SASS: $neutral-350
    Fluent UI: buttonBackgroundChecked / buttonBackgroundChecked
  • neutral-400

     SASS: $neutral-400
    Fluent UI: Button Text Disabled / buttonTextDisabled
  • neutral-450

     SASS: $neutral-450
    Fluent UI: Button Border / buttonBorder
  • neutral-700

     SASS: $neutral-700
    Fluent UI: Button Text / buttonText
  • neutral-800

     SASS: $neutral-800
    Fluent UI: Button Text Checked / buttonTextChecked
  • neutral-800

     SASS: $neutral-800
    Fluent UI: Button Text Hovered / buttonTextHovered
  • neutral-800

     SASS: $neutral-800
    Fluent UI: Button Text Pressed / buttonTextPressed
  • neutral-900

     SASS: $neutral-900
    Fluent UI: buttonTextCheckedHovered / buttonTextCheckedHovered
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Button Colors Primary

  • neutral-000

     SASS: $neutral-000
    Fluent UI: Primary Button Text / primaryButtonText
  • neutral-000

     SASS: $neutral-000
    Fluent UI: Primary Button Text Hovered / primaryButtonTextHovered
  • neutral-000

     SASS: $neutral-000
    Fluent UI: Primary Button Text Pressed / primaryButtonTextPressed
  • neutral-100

     SASS: $neutral-100
    Fluent UI: Primary Button Background Disabled / primaryButtonBackgroundDisabled
  • neutral-300

     SASS: $neutral-300
    Fluent UI: Primary Button Text Disabled / primaryButtonTextDisabled
  • theme-600

     SASS: $theme-600
    Fluent UI: Primary Button Background / primaryButtonBackground
  • theme-700

     SASS: $theme-700
    Fluent UI: Primary Button Background Hovered / primaryButtonBackgroundHovered
  • theme-800

     SASS: $theme-800
    Fluent UI:  / primaryButtonBackgroundPressed
  • transparent

     SASS: 
    Fluent UI: Primary Button Border / primaryButtonBorder
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Blues

  • 300

     SASS: $blue-300
    Fluent UI: Blue Light / blueLight
  • 600

     SASS: $blue-600
    Fluent UI: blue / blue
  • 700

     SASS: $blue-700
    Fluent UI: Blue Mid / blueMid
  • 800

     SASS: $blue-800
    Fluent UI: Blue Dark / blueDark

Greens

  • 300

     SASS: $green-300
    Fluent UI: greenLight / greenLight
  • 600

     SASS: $green-600
    Fluent UI: green / green
  • 800

     SASS: $green-800
    Fluent UI: greenDark / greenDark

Magenta

  • 300

     SASS: $magenta-300
    Fluent UI: magentaLight / magentaLight
  • 600

     SASS: $magenta-600
    Fluent UI: magenta / magenta
  • 800

     SASS: $magenta-800
    Fluent UI: magentaDark / magentaDark
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Oranges

  • 200

     SASS: $orange-200
    Fluent UI: orangeLighter / orangeLighter
  • 300

     SASS: $orange-300
    Fluent UI: orangeLight / orangeLight
  • 600

     SASS: $orange-600
    Fluent UI: orange / orange
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Purples

  • 300

     SASS: $purple-300
    Fluent UI: purpleLight / purpleLight
  • 600

     SASS: $purple-600
    Fluent UI: purple / purple
  • 800

     SASS: $purple-800
    Fluent UI: purpleDark / purpleDark
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Reds

  • 600

     SASS: $red-600
    Fluent UI: red / red
  • 800

     SASS: $red-800
    Fluent UI: redDark / redDark
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Teals

  • 300

     SASS: $teal-300
    Fluent UI: tealLight / tealLight
  • 600

     SASS: $teal-600
    Fluent UI: teal / teal
  • 800

     SASS: $teal-800
    Fluent UI: tealDark / tealDark
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Yellow

  • 300

     SASS: $yellow-300
    Fluent UI: yellowLight / yellowLight
  • 600

     SASS: $yellow-600
    Fluent UI: yellow / yellow
  • 800

     SASS: $yellow-800
    Fluent UI: yellowDark / yellowDark
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss