PR #10: Add ms-accent variable

Update typography styles
n8design · Dec 20, 2018 · e9d9653 · e9d9653
1 parent dd61014
commit e9d9653
Show file tree

Hide file tree

Showing 6 changed files with 1,847 additions and 983 deletions.
diff --git a/_office.theme.typography.scss b/_office.theme.typography.scss
@@ -1,4 +1,4 @@
-@mixin uiUseRem($rem){
+@mixin uiUseRem($rem) {
     $useRem: $rem !global;
 }
 
@@ -36,27 +36,25 @@
         $fdTitle: nth($fontDef, 1); // get font weight
         $fdWeight: nth($fontDef, 2); // 
         $fdValue: $fdWeight; // @warn $fdTitle $fabric-font    $fdTitle == nth($fabric-font, 1);
-
         @if $fdTitle==nth($fabric-font, 1) {
             font-weight: call($fdValue);
         }
-
     }
 }
 
 // Converts the font size out In EM
 @mixin uiFontSize($fabric-font) {
-
-        @each $fontDef in $fontSizes {
-
-            // check Office UI Frabric name
-            $fdTitle: nth($fontDef, 1); // base office ui fabric in PX value
-            $fdSizePx: nth($fontDef, 2); // base office ui fabric in EM value
-            $fdSizeEm: if($useRem, pxToRem($fdSizePx), pxToEm($fdSizePx)); // get font weight
-            $fdWeight: nth($fontDef, 3);
-
-            @if $fdTitle==$fabric-font {
-                font-size: $fdSizeEm;
-            }
+
+    @each $fontDef in $fontSizes {
+
+        // check Office UI Frabric name
+        $fdTitle: nth($fontDef, 1); // base office ui fabric in PX value
+        $fdSizePx: nth($fontDef, 2); // base office ui fabric in EM value
+        $fdSizeEm: if($useRem, pxToRem($fdSizePx), pxToEm($fdSizePx)); // get font weight
+        $fdWeight: nth($fontDef, 3);
+
+        @if $fdTitle==$fabric-font {
+            font-size: $fdSizeEm;
         }
-    }
+    }
+}
diff --git a/_office.theme.vars.scss b/_office.theme.vars.scss
@@ -86,4 +86,7 @@ $ms-severeWarningText:		   "[theme:severeWarningText, default: #333333]";
 /** Success **/
 $ms-success:		           "[theme:success, default: #107c10]";
 $ms-successBackground:		   "[theme:successBackground, default: #dff6dd]";
-$ms-successText:		       "[theme:successText, default: #333333]";
+$ms-successText:		       "[theme:successText, default: #333333]";
+
+/* Misc Colors */
+$ms-accent:                    "[theme:accent, default: #8764b8]";
diff --git a/index.js b/index.js
@@ -199,7 +199,7 @@ const nsPrefix = "ouif-"
 export default function uiFabricCSS() {
 
     // createCSSVariables() {
-    let themeCache = null,
+    var themeCache = null,
         allVariables = [];
 
     if (document.getElementById(cssVarThemeID)) {
@@ -212,9 +212,9 @@ export default function uiFabricCSS() {
 
         if ('theme' in themeCache && themeCache.theme !== undefined) {
 
-            let keys = Object.keys(themeCache.theme);
+            var keys = Object.keys(themeCache.theme);
 
-            keys.forEach(element => {
+            keys.forEach(function(element){
                 allVariables.push('    --' + nsPrefix + element + ': ' + themeCache.theme[element] + ';');
             });
 
@@ -230,13 +230,13 @@ export default function uiFabricCSS() {
 
     }
 
-    var includeInRoot = `:root{
-          ${allVariables.sort().join('\r\n')}
-      }`;
+    var includeInRoot = ':root{'+
+          allVariables.sort().join('\r\n')
+      '}';
 
-    let styleSheetFragment = document.createElement('style');
+    var styleSheetFragment = document.createElement('style');
     styleSheetFragment.id = cssVarThemeID;
     styleSheetFragment.innerHTML = includeInRoot;
     document.head.appendChild(styleSheetFragment);
 
-};
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spfx-uifabric-themes",
-  "version": "0.4.0",
+  "version": "0.5.0-0",
   "description": "Include theme slots in your SharePoint Framework Project",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "sass-test.sh": "^1.4.0"
   },
   "devDependencies": {
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
     "gulp-mocha": "^6.0.0",
     "mocha": "^5.2.0",
     "sass-true": "^4.0.0",

diff --git a/tests/fonttest.scss b/tests/fonttest.scss
@@ -219,7 +219,6 @@ $fontsExpectedRem: (
                     @include uiFontSize(su);
                     @include uiUseRem(false);
                     @include uiFontSize(su);
-
                 }
                 @include expect {
                     font-size: #{nth($fontSizeExpectedRem, 1)};
@@ -230,3 +229,4 @@ $fontsExpectedRem: (
 
 }
 
+