Semantic slot updates nov2018 5.0 (#7237)

* hand cherry picked updates from PR #7176 * change logs * change single quotes back to double quotes * add back deprecated slot for backwards compatibility * newlines at end of files * update disabledBodySubtext for non-text elements that used disabledBodyText
microsoft · Nov 28, 2018 · d6b3b71 · d6b3b71
1 parent 98e1f3c
commit d6b3b71
Show file tree

Hide file tree

Showing 17 changed files with 309 additions and 166 deletions.
diff --git a/common/changes/@uifabric/styling/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json b/common/changes/@uifabric/styling/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "semantic slot updates",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "v-jescla@microsoft.com"
+}
diff --git a/common/changes/@uifabric/variants/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json b/common/changes/@uifabric/variants/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "semantic slot updates",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "v-jescla@microsoft.com"
+}
diff --git a/common/changes/office-ui-fabric-react/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json b/common/changes/office-ui-fabric-react/semanticSlotUpdatesNov2018_5.0_2018-11-27-23-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "semantic slot updates",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jescla@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -16,13 +16,14 @@ $linkHoveredColor: "[theme:linkHovered, default: #004578]";
 
 $disabledBackgroundColor: "[theme:disabledBackground, default: #f4f4f4]";
 $disabledTextColor: "[theme:disabledText, default: #a6a6a6]";
-$disabledBodyTextColor: "[theme:disabledText, default: #c8c8c8]";
+$disabledBodyTextColor: "[theme:disabledBodyText, default: #a6a6a6]";
 $disabledSubtextColor: "[theme:disabledSubtext, default: #dadada]";
+$disabledBodySubtextColor: "[theme:disabledBodySubtext, default: #c8c8c8]";
 
 $focusBorderColor: "[theme:focusBorder, default: #000000]";
 $variantBorderColor: "[theme:variantBorder, default: #eaeaea]";
 $variantBorderHoveredColor: "[theme:variantBorderHovered, default: #a6a6a6]";
-$defaultStateBackgroundColor: "[theme:defaultStateBackground, default: #eaeaea]";
+$defaultStateBackgroundColor: "[theme:defaultStateBackground, default: #f8f8f8]";
 
 $errorTextColor: "[theme:errorText, default: #a80000]";
 $warningTextColor: "[theme:warningText, default: #333333]";
@@ -35,12 +36,14 @@ $successBackgroundColor: "[theme:successBackground, default: rgba(186,216,10,.2)
 /* Input controls */
 $inputBorderColor: "[theme:inputBorder, default: #a6a6a6]";
 $smallInputBorderColor: "[theme:inputBorder, default: #666666]";
-$inputBorderHoveredColor: "[theme:inputBorderHovered, default: #212121]";
+$inputBorderHoveredColor: "[theme:inputBorderHovered, default: #333333]";
 $inputBackgroundColor: "[theme:inputBackground, default: #ffffff]";
 $inputBackgroundCheckedColor: "[theme:inputBackgroundChecked, default: #0078d4]";
 $inputBackgroundCheckedHoveredColor: "[theme:inputBackgroundCheckedHovered, default: #106ebe]";
 $inputForegroundCheckedColor: "[theme:inputForegroundChecked, default: #ffffff]";
 $inputFocusBorderAltColor: "[theme:inputFocusBorderAlt, default: #0078d4]";
+$inputTextColor: "[theme:inputText, default: #333333]";
+$inputTextHoveredColor: "[theme:inputTextHovered, default: #212121]";
 $inputPlaceholderTextColor: "[theme:inputPlaceholderText, default: #666666]";
 
 /* Buttons */
@@ -65,8 +68,11 @@ $primaryButtonBorderColor: "[theme:primaryButtonText, default: transparent]";
 $primaryButtonTextColor: "[theme:primaryButtonText, default: #ffffff]";
 $primarybuttonTextHoveredColor: "[theme:primaryButtonTextHovered, default: #ffffff]";
 $primaryButtonTextPressedColor: "[theme:primaryButtonTextPressed, default: #ffffff]";
+$accentButtonBackgroundColor: "[theme:accentButtonBackground, default: #0078d4]";
+$accentButtonTextColor: "[theme:accentButtonText, default: #ffffff]";
 
 /* Menus */
+
 $menuBackgroundColor: "[theme:menuBackground, default: #ffffff]";
 $menuDividerColor: "[theme:menuDivider, default: #c8c8c8]";
 $menuIconColor: "[theme:menuIcon, default: #0078d4]";
@@ -86,4 +92,4 @@ $listHeaderBackgroundHoveredColor: "[theme:listHeaderBackgroundHovered, default:
 $listHeaderBackgroundPressedColor: "[theme:listHeaderBackgroundPressed, default: #eaeaea]";
 
 // DEPRECATED SLOTS
-$menuItemBackgroundCheckedColor: "[theme:menuItemBackgroundChecked, default: #eaeaea]";
+$menuItemBackgroundCheckedColor: "[theme:menuItemBackgroundChecked, default: #eaeaea]";
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts
@@ -20,12 +20,12 @@ export const getStyles = memoizeFunction((
   const checkmarkFontColorCheckedDisabled = semanticColors.disabledBackground;
   const checkboxBorderColor = semanticColors.smallInputBorder;
   const checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;
-  const checkboxBorderColorDisabled = semanticColors.disabledBodyText;
+  const checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;
   const checkboxBorderHoveredColor = semanticColors.inputBorderHovered;
   const checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;
   const checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
   const checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
-  const checkboxBackgroundDisabled = semanticColors.disabledBodyText;
+  const checkboxBackgroundDisabled = semanticColors.disabledBodySubtext;
   const checkboxTextColor = semanticColors.bodyText;
   const checkboxTextColorDisabled = semanticColors.disabledText;
 

diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -49,10 +49,10 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
         z-index: 1;
       }
       &:hover .ms-Checkbox-checkbox {
-        border-color: #212121;
+        border-color: #333333;
       }
       &:focus .ms-Checkbox-checkbox {
-        border-color: #212121;
+        border-color: #333333;
       }
       &:hover .ms-Checkbox-text {
         color: #000000;

diff --git a/...e-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.deprecated.test.tsx.snap b/...e-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.deprecated.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           top: -2px;
         }
         &:hover {
-          border-color: #212121;
+          border-color: #333333;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           -ms-high-contrast-adjust: none;
@@ -349,7 +349,7 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
           top: -2px;
         }
         &:hover {
-          border-color: #212121;
+          border-color: #333333;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           -ms-high-contrast-adjust: none;

diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           top: -2px;
         }
         &:hover {
-          border-color: #212121;
+          border-color: #333333;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           -ms-high-contrast-adjust: none;
@@ -348,7 +348,7 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
           top: -2px;
         }
         &:hover {
-          border-color: #212121;
+          border-color: #333333;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           -ms-high-contrast-adjust: none;

diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
@@ -53,7 +53,7 @@ export function getStyles(props: IRatingStyleProps): IRatingStyles {
   const ratingStarUncheckedHoverColor = palette.themePrimary;
   const ratingStarUncheckedHoverSelectedColor = palette.themeDark;
   const ratingStarCheckedColor = semanticColors.bodyTextChecked;
-  const ratingStarDisabledColor = semanticColors.disabledBodyText;
+  const ratingStarDisabledColor = semanticColors.disabledBodySubtext;
 
   return {
     root: [

diff --git a/...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
           min-width: 86px;
         }
         &:hover {
-          border-color: #212121;
+          border-color: #333333;
           outline: 2px dashed transparent;
         }
         @media screen and (-ms-high-contrast: active){&:hover {

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
@@ -27,14 +27,14 @@ export const getClassNames = memoizeFunction((
   const pillUncheckedBackground = semanticColors.bodyBackground;
   const pillCheckedBackground = semanticColors.inputBackgroundChecked;
   const pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered;
-  const pillCheckedDisabledBackground = semanticColors.disabledBodyText;
+  const pillCheckedDisabledBackground = semanticColors.disabledBodySubtext;
   const thumbBackground = semanticColors.inputBorderHovered;
   const thumbCheckedBackground = semanticColors.inputForegroundChecked;
-  const thumbDisabledBackground = semanticColors.disabledBodyText;
+  const thumbDisabledBackground = semanticColors.disabledBodySubtext;
   const thumbCheckedDisabledBackground = semanticColors.disabledBackground;
   const pillBorderColor = semanticColors.smallInputBorder;
   const pillBorderHoveredColor = semanticColors.inputBorderHovered;
-  const pillBorderDisabledColor = semanticColors.disabledBodyText;
+  const pillBorderDisabledColor = semanticColors.disabledBodySubtext;
   const textDisabledColor = semanticColors.disabledText;
 
   styles = styles || {};

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`Toggle renders toggle correctly 1`] = `
             z-index: 1;
           }
           &:hover {
-            border-color: #212121;
+            border-color: #333333;
           }
           @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
             border-color: Highlight;
@@ -107,7 +107,7 @@ exports[`Toggle renders toggle correctly 1`] = `
         className=
             ms-Toggle-thumb
             {
-              background-color: #212121;
+              background-color: #333333;
               border-color: transparent;
               border-radius: .5em;
               border-style: solid;