office-ui-fabric-rails 2.5.0.0

data/vendor/assets/scss/_Fabric.Responsive.Variables.scss

@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric responsive variables
+
+
+//== Variables for responsive breakpoints
+//
+
+// Small screen / phone (320px - 479px)
+$ms-screen-sm-min:       320px;
+
+// Medium screen / tablet (480px - 639px)
+$ms-screen-md-min:       480px;
+
+// Large screen / tablet (640px - 1023px)
+$ms-screen-lg-min:       640px;
+
+// Extra large screen / tablet (1024px - 1365px)
+$ms-screen-xl-min:       1024px;
+
+// Extra extra large screen / desktop (1366px - 1919px)
+$ms-screen-xxl-min:      1366px;
+
+// Extra extra extra large screen / desktop (1366px and up)
+$ms-screen-xxxl-min:     1920px;
+
+// Set all maxes since order matters in SASS
+$ms-screen-sm-max:       ($ms-screen-md-min - 1);
+$ms-screen-md-max:       ($ms-screen-lg-min - 1);
+$ms-screen-lg-max:       ($ms-screen-xl-min - 1);
+$ms-screen-xl-max:       ($ms-screen-xxl-min - 1);
+$ms-screen-xxl-max:      ($ms-screen-xxxl-min - 1);

data/vendor/assets/scss/_Fabric.Typography.Fonts.scss

@@ -0,0 +1,170 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Font definitions
+
+
+// Font weights.
+$ms-light:     "Segoe UI Light";
+$ms-regular:   "Segoe UI Regular";
+$ms-semibold:  "Segoe UI Semibold";
+$ms-semilight: "Segoe UI Semilight";
+
+
+// Font paths.
+$ms-font-directory:         "https://appsforoffice.microsoft.com/fabric/fonts";
+$ms-font-path-arabic:       "SegoeUI-Arabic";
+$ms-font-path-cyrillic:     "SegoeUI-Cyrillic";
+$ms-font-path-easteuropean: "SegoeUI-EastEuropean";
+$ms-font-path-greek:        "SegoeUI-Greek";
+$ms-font-path-hebrew:       "SegoeUI-Hebrew";
+$ms-font-path-vietnamese:   "SegoeUI-Vietnamese";
+$ms-font-path-westeuropean: "SegoeUI-WestEuropean";
+
+
+/*
+  Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+// Mixins to generate @font-face rules for unique languages.
+@mixin SegoeUILight($ms-font-language, $ms-font-path) {
+  @font-face {
+    font-family: "#{$ms-light} #{$ms-font-language}";
+    src: local("Segoe UI Light"),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@mixin SegoeUIRegular($ms-font-language, $ms-font-path) {
+  @font-face {
+    font-family: "#{$ms-regular} #{$ms-font-language}";
+    src: local("Segoe UI"),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@mixin SegoeUISemilight($ms-font-language, $ms-font-path) {
+  @font-face {
+    font-family: "#{$ms-semilight} #{$ms-font-language}";
+    src: local("Segoe UI Semilight"),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@mixin SegoeUISemibold($ms-font-language, $ms-font-path) {
+  @font-face {
+    font-family: "#{$ms-semibold} #{$ms-font-language}";
+    src: local("Segoe UI Semibold"),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'),
+         url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+// Mixins to generate language-specific font faces.
+@mixin SegoeUIArabicLight {
+  @include SegoeUILight("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicRegular {
+  @include SegoeUIRegular("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemibold {
+  @include SegoeUISemibold("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemilight {
+  @include SegoeUISemilight("Arabic", $ms-font-path-arabic);
+}
+
+@mixin SegoeUICyrillicLight {
+  @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicRegular {
+  @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemibold {
+  @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemilight {
+  @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic);
+}
+
+@mixin SegoeUIEastEuropeanLight {
+  @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanRegular {
+  @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemibold {
+  @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemilight {
+  @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean);
+}
+
+@mixin SegoeUIGreekLight {
+  @include SegoeUILight("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekRegular {
+  @include SegoeUIRegular("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemibold {
+  @include SegoeUISemibold("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemilight {
+  @include SegoeUISemilight("Greek", $ms-font-path-greek);
+}
+
+@mixin SegoeUIHebrewLight {
+  @include SegoeUILight("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewRegular {
+  @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemibold {
+  @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemilight {
+  @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew);
+}
+
+@mixin SegoeUIVietnameseLight {
+  @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseRegular {
+  @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemibold {
+  @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemilight {
+  @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese);
+}
+
+@mixin SegoeUIWestEuropeanLight {
+  @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanRegular {
+  @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemibold {
+  @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemilight {
+  @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean);
+}

data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss

@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Language override definitions
+
+
+// A mixin that overrides all of the font classes for languages that
+// use system fonts. A single font-family is used for all weights.
+@mixin language-override-system-fonts($ms-lang-code, $ms-font-family) {
+  *[lang="#{$ms-lang-code}"] {
+    .ms-font-mi,
+    .ms-font-xs,
+    .ms-font-s,
+    .ms-font-s-plus,
+    .ms-font-m,
+    .ms-font-m-plus,
+    .ms-font-l,
+    .ms-font-xl,
+    .ms-font-xxl,
+    .ms-font-su,
+    .ms-fontWeight-light,
+    .ms-fontWeight-light-hover:hover,
+    .ms-fontWeight-semilight,
+    .ms-fontWeight-semilight-hover:hover,
+    .ms-fontWeight-regular,
+    .ms-fontWeight-regular-hover:hover,
+    .ms-fontWeight-semibold,
+    .ms-fontWeight-semibold-hover:hover {
+      font-family: $ms-font-family;
+    }
+  }
+}
+
+// Base font stack.
+$ms-font-system-base: 'Segoe UI', Tahoma, Arial, sans-serif;
+
+// Variables for each of the non-distributed (native) font stacks.
+$ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base;
+$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base;
+$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base;
+$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base;
+$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base;
+
+
+//== Web fonts
+// 
+// A mixin that overrides all of the font classes for languages that use
+// distributed web fonts. These reference different fonts for each weight.
+@mixin language-override-web-fonts($ms-lang-code, $ms-font-family-light, $ms-font-family-semilight, $ms-font-family-regular, $ms-font-family-semibold) {
+  *[lang="#{$ms-lang-code}"] {
+    .ms-font-xl,
+    .ms-font-xxl,
+    .ms-fontWeight-light,
+    .ms-fontWeight-light-hover:hover {
+      font-family: $ms-font-family-light;
+    }
+    .ms-font-l,
+    .ms-font-su,
+    .ms-fontWeight-semilight,
+    .ms-fontWeight-semilight-hover:hover {
+      font-family: $ms-font-family-semilight;
+    }
+    .ms-fontWeight-regular,
+    .ms-fontweight-regular-hover:hover {
+      font-family: $ms-font-family-regular;
+    }
+    .ms-font-mi,
+    .ms-fontWeight-semibold,
+    .ms-fontWeight-semibold-hover:hover {
+      font-family: $ms-font-family-semibold;
+    }
+  }
+}
+
+// Variables for each of the web font stacks.
+
+// East European
+$ms-font-family-light-eastEuropean:       'Segoe UI Light EastEuropean', $ms-font-family-light;
+$ms-font-family-semilight-eastEuropean:   'Segoe UI Semilight EastEuropean', $ms-font-family-semilight;
+$ms-font-family-regular-eastEuropean:     'Segoe UI Regular EastEuropean', $ms-font-family-regular;
+$ms-font-family-semibold-eastEuropean:    'Segoe UI Semibold EastEuropean', $ms-font-family-semibold;
+
+// Cyrillic
+$ms-font-family-light-cyrillic:           'Segoe UI Light Cyrillic', $ms-font-family-light;
+$ms-font-family-semilight-cyrillic:       'Segoe UI Semilight Cyrillic', $ms-font-family-semilight;
+$ms-font-family-regular-cyrillic:         'Segoe UI Regular Cyrillic', $ms-font-family-regular;
+$ms-font-family-semibold-cyrillic:        'Segoe UI Semibold Cyrillic', $ms-font-family-semibold;
+
+// Leelawadee
+$ms-font-family-semilight-leelawadee:     'Leelawadee UI Semilight', 'Kmer UI', $ms-font-family-semilight;
+$ms-font-family-regular-leelawadee:       'Leelawadee UI Regular', 'Kmer UI', $ms-font-family-regular;
+$ms-font-family-semibold-leelawadee:      'Leelawadee UI Bold', 'Kmer UI', $ms-font-family-semibold;
+
+// Arabic
+$ms-font-family-light-arabic:             'Segoe UI Light Arabic', $ms-font-family-light;
+$ms-font-family-semilight-arabic:         'Segoe UI Semilight Arabic', $ms-font-family-semilight;
+$ms-font-family-regular-arabic:           'Segoe UI Regular Arabic', $ms-font-family-regular;
+$ms-font-family-semibold-arabic:          'Segoe UI Semibold Arabic', $ms-font-family-semibold;
+
+// Greek
+$ms-font-family-light-greek:              'Segoe UI Light Greek', $ms-font-family-light;
+$ms-font-family-semilight-greek:          'Segoe UI Semilight Greek', $ms-font-family-semilight;
+$ms-font-family-regular-greek:            'Segoe UI Regular Greek', $ms-font-family-regular;
+$ms-font-family-semibold-greek:           'Segoe UI Semibold Greek', $ms-font-family-semibold;
+
+// Hebrew
+$ms-font-family-light-hebrew:             'Segoe UI Light Hebrew', $ms-font-family-light;
+$ms-font-family-semilight-hebrew:         'Segoe UI Semilight Hebrew', $ms-font-family-semilight;
+$ms-font-family-regular-hebrew:           'Segoe UI Regular Hebrew', $ms-font-family-regular;
+$ms-font-family-semibold-hebrew:          'Segoe UI Semibold Hebrew', $ms-font-family-semibold;
+
+// Vietnamese
+$ms-font-family-light-vietnamese:         'Segoe UI Light Vietnamese', $ms-font-family-light;
+$ms-font-family-semilight-vietnamese:     'Segoe UI Semilight Vietnamese', $ms-font-family-semilight;
+$ms-font-family-regular-vietnamese:       'Segoe UI Regular Vietnamese', $ms-font-family-regular;
+$ms-font-family-semibold-vietnamese:      'Segoe UI Semibold Vietnamese', $ms-font-family-semibold;

data/vendor/assets/scss/_Fabric.Typography.Variables.scss

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Typography variables
+
+
+$ms-font-family-light:     'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-regular:   'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semibold:  'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+
+
+//== Type sizes
+//
+
+$ms-font-size-su:          42px;
+$ms-font-size-xxl:         28px;
+$ms-font-size-xl:          21px;
+$ms-font-size-l:           17px;
+$ms-font-size-m-plus:      15px;
+$ms-font-size-m:           14px;
+$ms-font-size-s-plus:      13px;
+$ms-font-size-s:           12px;
+$ms-font-size-xs:          11px;
+$ms-font-size-mi:          10px;

data/vendor/assets/scss/_Fabric.Typography.scss

@@ -0,0 +1,357 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Typographic mixins arranged with appropriate size and family combinations.
+@import 'Fabric.Typography.Variables';
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+@mixin ms-font-su {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-light;
+  font-size: $ms-font-size-su;
+  font-weight: normal;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+@mixin ms-font-xxl {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-light;
+  font-size: $ms-font-size-xxl;
+  font-weight: normal;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+@mixin ms-font-xl {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-light;
+  font-size: $ms-font-size-xl;
+  font-weight: normal;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-l {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-semilight;
+  font-size: $ms-font-size-l;
+  font-weight: normal;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-m-plus {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-regular;
+  font-size: $ms-font-size-m-plus;
+  font-weight: normal;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-m {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-regular;
+  font-size: $ms-font-size-m;
+  font-weight: normal;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-s-plus {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-regular;
+  font-size: $ms-font-size-s-plus;
+  font-weight: normal;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-s {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-regular;
+  font-size: $ms-font-size-s;
+  font-weight: normal;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-xs {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-regular;
+  font-size: $ms-font-size-xs;
+  font-weight: normal;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+@mixin ms-font-mi {
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-semibold;
+  font-size: $ms-font-size-mi;
+  font-weight: normal;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+@mixin ms-fontWeight-light{
+  font-family: $ms-font-family-light;
+}
+
+@mixin ms-fontWeight-semilight{
+  font-family: $ms-font-family-semilight;
+}
+
+@mixin ms-fontWeight-regular {
+  font-family: $ms-font-family-regular;
+}
+
+@mixin ms-fontWeight-semibold {
+  font-family: $ms-font-family-semibold;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+  font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+  font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xl {
+  font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+  font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+  font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+  font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+  font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+  font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+  font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+  font-size: $ms-font-size-mi;
+}
+
+// Theme colors
+@mixin ms-fontColor-themeDarker {
+  color: $ms-color-themeDarker;
+}
+
+@mixin ms-fontColor-themeDark {
+  color: $ms-color-themeDark;
+}
+
+@mixin ms-fontColor-themeDarkAlt {
+  color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-fontColor-themePrimary {
+  color: $ms-color-themePrimary;
+}
+
+@mixin ms-fontColor-themeSecondary {
+  color: $ms-color-themeSecondary;
+}
+
+@mixin ms-fontColor-themeTertiary {
+  color: $ms-color-themeTertiary;
+}
+
+@mixin ms-fontColor-themeLight {
+  color: $ms-color-themeLight;
+}
+
+@mixin ms-fontColor-themeLighter {
+  color: $ms-color-themeLighter;
+}
+
+@mixin ms-fontColor-themeLighterAlt {
+  color: $ms-color-themeLighterAlt;
+}
+
+
+// Neutral colors
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+
+@mixin ms-fontColor-neutralDark {
+  color: $ms-color-neutralDark;
+}
+
+@mixin ms-fontColor-neutralPrimary {
+  color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-fontColor-neutralPrimaryAlt {
+  color: $ms-color-neutralPrimaryAlt;
+}
+
+@mixin ms-fontColor-neutralSecondary {
+ color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-fontColor-neutralSecondaryAlt { 
+  color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-fontColor-neutralTertiary {
+  color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-fontColor-neutralTertiaryAlt { 
+  color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-fontColor-neutralLight {
+  color: $ms-color-neutralLight;
+}
+
+@mixin ms-fontColor-neutralLighter {
+  color: $ms-color-neutralLighter;
+}
+
+@mixin ms-fontColor-neutralLighterAlt {
+  color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+// Brand and accent colors
+@mixin ms-fontColor-yellow {
+  color: $ms-color-yellow;
+}
+
+@mixin ms-fontColor-yellowLight {
+  color: $ms-color-yellowLight;
+}
+
+@mixin ms-fontColor-orange {
+  color: $ms-color-orange;
+}
+
+@mixin ms-fontColor-orangeLight {
+  color: $ms-color-orangeLight;
+}
+
+@mixin ms-fontColor-orangeLighter {
+  color: $ms-color-orangeLighter;
+}
+
+@mixin ms-fontColor-redDark {
+  color: $ms-color-redDark;
+}
+
+@mixin ms-fontColor-red {
+  color: $ms-color-red;
+}
+
+@mixin ms-fontColor-magentaDark {
+  color: $ms-color-magentaDark;
+}
+
+@mixin ms-fontColor-magenta {
+  color: $ms-color-magenta;
+}
+
+@mixin ms-fontColor-magentaLight {
+  color: $ms-color-magentaLight;
+}
+
+@mixin ms-fontColor-purpleDark {
+  color: $ms-color-purpleDark;
+}
+
+@mixin ms-fontColor-purple {
+  color: $ms-color-purple;
+}
+
+@mixin ms-fontColor-purpleLight {
+  color: $ms-color-purpleLight;
+}
+
+@mixin ms-fontColor-blueDark {
+  color: $ms-color-blueDark;
+}
+
+@mixin ms-fontColor-blueMid {
+  color: $ms-color-blueMid;
+}
+
+@mixin ms-fontColor-blue {
+  color: $ms-color-blue;
+}
+
+@mixin ms-fontColor-blueLight {
+  color: $ms-color-blueLight;
+}
+
+@mixin ms-fontColor-tealDark {
+  color: $ms-color-tealDark;
+}
+
+@mixin ms-fontColor-teal {
+  color: $ms-color-teal;
+}
+
+@mixin ms-fontColor-tealLight {
+  color: $ms-color-tealLight;
+}
+
+@mixin ms-fontColor-greenDark {
+  color: $ms-color-greenDark;
+}
+
+@mixin ms-fontColor-green {
+  color: $ms-color-green;
+}
+
+@mixin ms-fontColor-greenLight {
+  color: $ms-color-greenLight;
+}
+
+// Message colors
+@mixin ms-fontColor-info {
+  color: $ms-color-info;
+}
+
+@mixin ms-fontColor-success {
+  color: $ms-color-success;
+}
+
+@mixin ms-fontColor-alert {
+  color: $ms-color-alert;
+}
+
+@mixin ms-fontColor-error {
+  color: $ms-color-error;
+}