From 3e6195306eab5525e259e73230c08d9fc91228d1 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 7 Aug 2019 14:27:55 -0700 Subject: [PATCH 1/2] update sass files using script --- .../src/common/_semanticSlots.scss | 16 ++++--- .../src/common/_themeVariables.scss | 44 +++++++++++++------ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss index 9d895c2f16fe66..6dba34056ea80d 100644 --- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss +++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss @@ -1,5 +1,7 @@ /** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */ $bodyBackgroundColor: '[theme:bodyBackground, default: #ffffff]'; +$bodyBackgroundHoveredColor: '[theme:bodyBackgroundHovered, default: #f3f2f1]'; +$bodyBackgroundCheckedColor: '[theme:bodyBackgroundChecked, default: #edebe9]'; $bodyStandoutBackgroundColor: '[theme:bodyStandoutBackground, default: #faf9f8]'; $bodyFrameBackgroundColor: '[theme:bodyFrameBackground, default: #ffffff]'; $bodyFrameDividerColor: '[theme:bodyFrameDivider, default: #edebe9]'; @@ -9,8 +11,8 @@ $bodySubtextColor: '[theme:bodySubtext, default: #605e5c]'; $bodyDividerColor: '[theme:bodyDivider, default: #edebe9]'; $disabledBackgroundColor: '[theme:disabledBackground, default: #f3f2f1]'; $disabledTextColor: '[theme:disabledText, default: #a19f9d]'; -$disabledBodyTextColor: '[theme:disabledBodyText, default: #a19f9d]'; $disabledSubtextColor: '[theme:disabledSubtext, default: #d2d0ce]'; +$disabledBodyTextColor: '[theme:disabledBodyText, default: #a19f9d]'; $disabledBodySubtextColor: '[theme:disabledBodySubtext, default: #c8c6c4]'; $focusBorderColor: '[theme:focusBorder, default: #605e5c]'; $variantBorderColor: '[theme:variantBorder, default: #edebe9]'; @@ -18,25 +20,29 @@ $variantBorderHoveredColor: '[theme:variantBorderHovered, default: #a19f9d]'; $defaultStateBackgroundColor: '[theme:defaultStateBackground, default: #faf9f8]'; $errorTextColor: '[theme:errorText, default: #a4262c]'; $warningTextColor: '[theme:warningText, default: #333333]'; +$successTextColor: '[theme:successText, default: #107C10]'; $errorBackgroundColor: '[theme:errorBackground, default: rgba(245, 135, 145, .2)]'; $blockingBackgroundColor: '[theme:blockingBackground, default: rgba(250, 65, 0, .2)]'; $warningBackgroundColor: '[theme:warningBackground, default: rgba(255, 200, 10, .2)]'; $warningHighlightColor: '[theme:warningHighlight, default: #ffb900]'; $successBackgroundColor: '[theme:successBackground, default: rgba(95, 210, 85, .2)]'; -$inputBorderColor: '[theme:inputBorder, default: #a19f9d]'; +$inputBorderColor: '[theme:inputBorder, default: #8a8886]'; $inputBorderHoveredColor: '[theme:inputBorderHovered, default: #323130]'; $inputBackgroundColor: '[theme:inputBackground, default: #ffffff]'; $inputBackgroundCheckedColor: '[theme:inputBackgroundChecked, default: #0078d4]'; -$inputBackgroundCheckedHoveredColor: '[theme:inputBackgroundCheckedHovered, default: #106ebe]'; +$inputBackgroundCheckedHoveredColor: '[theme:inputBackgroundCheckedHovered, default: #005a9e]'; $inputForegroundCheckedColor: '[theme:inputForegroundChecked, default: #ffffff]'; +$inputIconColor: '[theme:inputIcon, default: #0078d4]'; +$inputIconHoveredColor: '[theme:inputIconHovered, default: #005a9e]'; +$inputIconDisabledColor: '[theme:inputIconDisabled, default: #a19f9d]'; $inputFocusBorderAltColor: '[theme:inputFocusBorderAlt, default: #0078d4]'; $smallInputBorderColor: '[theme:smallInputBorder, default: #605e5c]'; $inputTextColor: '[theme:inputText, default: #323130]'; $inputTextHoveredColor: '[theme:inputTextHovered, default: #201f1e]'; $inputPlaceholderTextColor: '[theme:inputPlaceholderText, default: #605e5c]'; -$buttonBackgroundColor: '[theme:buttonBackground, default: #f3f2f1]'; +$buttonBackgroundColor: '[theme:buttonBackground, default: #ffffff]'; $buttonBackgroundCheckedColor: '[theme:buttonBackgroundChecked, default: #c8c6c4]'; -$buttonBackgroundHoveredColor: '[theme:buttonBackgroundHovered, default: #edebe9]'; +$buttonBackgroundHoveredColor: '[theme:buttonBackgroundHovered, default: #f3f2f1]'; $buttonBackgroundCheckedHoveredColor: '[theme:buttonBackgroundCheckedHovered, default: #edebe9]'; $buttonBackgroundPressedColor: '[theme:buttonBackgroundPressed, default: #edebe9]'; $buttonBackgroundDisabledColor: '[theme:buttonBackgroundDisabled, default: #f3f2f1]'; diff --git a/packages/office-ui-fabric-react/src/common/_themeVariables.scss b/packages/office-ui-fabric-react/src/common/_themeVariables.scss index 1b1d3d7ee2e5e4..2827cf95bc789f 100644 --- a/packages/office-ui-fabric-react/src/common/_themeVariables.scss +++ b/packages/office-ui-fabric-react/src/common/_themeVariables.scss @@ -3,7 +3,7 @@ $ms-font-tinyFontFamily: "[theme:tinyFontFamily, default: 'Segoe UI', 'Segoe UI $ms-font-tinyMozOsxFontSmoothing: "[theme:tinyMozOsxFontSmoothing, default: grayscale]"; $ms-font-tinyWebkitFontSmoothing: "[theme:tinyWebkitFontSmoothing, default: antialiased]"; $ms-font-tinyFontSize: "[theme:tinyFontSize, default: 10px]"; -$ms-font-tinyFontWeight: "[theme:tinyFontWeight, default: 600]"; +$ms-font-tinyFontWeight: "[theme:tinyFontWeight, default: 400]"; @mixin tinyFontBasic { font-size: $ms-font-tinyFontSize; font-weight: $ms-font-tinyFontWeight; @@ -11,7 +11,7 @@ $ms-font-tinyFontWeight: "[theme:tinyFontWeight, default: 600]"; $ms-font-xSmallFontFamily: "[theme:xSmallFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-xSmallMozOsxFontSmoothing: "[theme:xSmallMozOsxFontSmoothing, default: grayscale]"; $ms-font-xSmallWebkitFontSmoothing: "[theme:xSmallWebkitFontSmoothing, default: antialiased]"; -$ms-font-xSmallFontSize: "[theme:xSmallFontSize, default: 11px]"; +$ms-font-xSmallFontSize: "[theme:xSmallFontSize, default: 10px]"; $ms-font-xSmallFontWeight: "[theme:xSmallFontWeight, default: 400]"; @mixin xSmallFontBasic { font-size: $ms-font-xSmallFontSize; @@ -29,7 +29,7 @@ $ms-font-smallFontWeight: "[theme:smallFontWeight, default: 400]"; $ms-font-smallPlusFontFamily: "[theme:smallPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-smallPlusMozOsxFontSmoothing: "[theme:smallPlusMozOsxFontSmoothing, default: grayscale]"; $ms-font-smallPlusWebkitFontSmoothing: "[theme:smallPlusWebkitFontSmoothing, default: antialiased]"; -$ms-font-smallPlusFontSize: "[theme:smallPlusFontSize, default: 13px]"; +$ms-font-smallPlusFontSize: "[theme:smallPlusFontSize, default: 12px]"; $ms-font-smallPlusFontWeight: "[theme:smallPlusFontWeight, default: 400]"; @mixin smallPlusFontBasic { font-size: $ms-font-smallPlusFontSize; @@ -47,17 +47,17 @@ $ms-font-mediumFontWeight: "[theme:mediumFontWeight, default: 400]"; $ms-font-mediumPlusFontFamily: "[theme:mediumPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-mediumPlusMozOsxFontSmoothing: "[theme:mediumPlusMozOsxFontSmoothing, default: grayscale]"; $ms-font-mediumPlusWebkitFontSmoothing: "[theme:mediumPlusWebkitFontSmoothing, default: antialiased]"; -$ms-font-mediumPlusFontSize: "[theme:mediumPlusFontSize, default: 15px]"; +$ms-font-mediumPlusFontSize: "[theme:mediumPlusFontSize, default: 16px]"; $ms-font-mediumPlusFontWeight: "[theme:mediumPlusFontWeight, default: 400]"; @mixin mediumPlusFontBasic { font-size: $ms-font-mediumPlusFontSize; font-weight: $ms-font-mediumPlusFontWeight; } -$ms-font-largeFontFamily: "[theme:largeFontFamily, default: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; +$ms-font-largeFontFamily: "[theme:largeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-largeMozOsxFontSmoothing: "[theme:largeMozOsxFontSmoothing, default: grayscale]"; $ms-font-largeWebkitFontSmoothing: "[theme:largeWebkitFontSmoothing, default: antialiased]"; -$ms-font-largeFontSize: "[theme:largeFontSize, default: 17px]"; -$ms-font-largeFontWeight: "[theme:largeFontWeight, default: 300]"; +$ms-font-largeFontSize: "[theme:largeFontSize, default: 18px]"; +$ms-font-largeFontWeight: "[theme:largeFontWeight, default: 400]"; @mixin largeFontBasic { font-size: $ms-font-largeFontSize; font-weight: $ms-font-largeFontWeight; @@ -65,26 +65,44 @@ $ms-font-largeFontWeight: "[theme:largeFontWeight, default: 300]"; $ms-font-xLargeFontFamily: "[theme:xLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-xLargeMozOsxFontSmoothing: "[theme:xLargeMozOsxFontSmoothing, default: grayscale]"; $ms-font-xLargeWebkitFontSmoothing: "[theme:xLargeWebkitFontSmoothing, default: antialiased]"; -$ms-font-xLargeFontSize: "[theme:xLargeFontSize, default: 21px]"; -$ms-font-xLargeFontWeight: "[theme:xLargeFontWeight, default: 100]"; +$ms-font-xLargeFontSize: "[theme:xLargeFontSize, default: 20px]"; +$ms-font-xLargeFontWeight: "[theme:xLargeFontWeight, default: 600]"; @mixin xLargeFontBasic { font-size: $ms-font-xLargeFontSize; font-weight: $ms-font-xLargeFontWeight; } +$ms-font-xLargePlusFontFamily: "[theme:xLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; +$ms-font-xLargePlusMozOsxFontSmoothing: "[theme:xLargePlusMozOsxFontSmoothing, default: grayscale]"; +$ms-font-xLargePlusWebkitFontSmoothing: "[theme:xLargePlusWebkitFontSmoothing, default: antialiased]"; +$ms-font-xLargePlusFontSize: "[theme:xLargePlusFontSize, default: 24px]"; +$ms-font-xLargePlusFontWeight: "[theme:xLargePlusFontWeight, default: 600]"; +@mixin xLargePlusFontBasic { + font-size: $ms-font-xLargePlusFontSize; + font-weight: $ms-font-xLargePlusFontWeight; +} $ms-font-xxLargeFontFamily: "[theme:xxLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-xxLargeMozOsxFontSmoothing: "[theme:xxLargeMozOsxFontSmoothing, default: grayscale]"; $ms-font-xxLargeWebkitFontSmoothing: "[theme:xxLargeWebkitFontSmoothing, default: antialiased]"; $ms-font-xxLargeFontSize: "[theme:xxLargeFontSize, default: 28px]"; -$ms-font-xxLargeFontWeight: "[theme:xxLargeFontWeight, default: 100]"; +$ms-font-xxLargeFontWeight: "[theme:xxLargeFontWeight, default: 600]"; @mixin xxLargeFontBasic { font-size: $ms-font-xxLargeFontSize; font-weight: $ms-font-xxLargeFontWeight; } +$ms-font-xxLargePlusFontFamily: "[theme:xxLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; +$ms-font-xxLargePlusMozOsxFontSmoothing: "[theme:xxLargePlusMozOsxFontSmoothing, default: grayscale]"; +$ms-font-xxLargePlusWebkitFontSmoothing: "[theme:xxLargePlusWebkitFontSmoothing, default: antialiased]"; +$ms-font-xxLargePlusFontSize: "[theme:xxLargePlusFontSize, default: 32px]"; +$ms-font-xxLargePlusFontWeight: "[theme:xxLargePlusFontWeight, default: 600]"; +@mixin xxLargePlusFontBasic { + font-size: $ms-font-xxLargePlusFontSize; + font-weight: $ms-font-xxLargePlusFontWeight; +} $ms-font-superLargeFontFamily: "[theme:superLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-superLargeMozOsxFontSmoothing: "[theme:superLargeMozOsxFontSmoothing, default: grayscale]"; $ms-font-superLargeWebkitFontSmoothing: "[theme:superLargeWebkitFontSmoothing, default: antialiased]"; $ms-font-superLargeFontSize: "[theme:superLargeFontSize, default: 42px]"; -$ms-font-superLargeFontWeight: "[theme:superLargeFontWeight, default: 100]"; +$ms-font-superLargeFontWeight: "[theme:superLargeFontWeight, default: 600]"; @mixin superLargeFontBasic { font-size: $ms-font-superLargeFontSize; font-weight: $ms-font-superLargeFontWeight; @@ -92,8 +110,8 @@ $ms-font-superLargeFontWeight: "[theme:superLargeFontWeight, default: 100]"; $ms-font-megaFontFamily: "[theme:megaFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]"; $ms-font-megaMozOsxFontSmoothing: "[theme:megaMozOsxFontSmoothing, default: grayscale]"; $ms-font-megaWebkitFontSmoothing: "[theme:megaWebkitFontSmoothing, default: antialiased]"; -$ms-font-megaFontSize: "[theme:megaFontSize, default: 72px]"; -$ms-font-megaFontWeight: "[theme:megaFontWeight, default: 100]"; +$ms-font-megaFontSize: "[theme:megaFontSize, default: 68px]"; +$ms-font-megaFontWeight: "[theme:megaFontWeight, default: 600]"; @mixin megaFontBasic { font-size: $ms-font-megaFontSize; font-weight: $ms-font-megaFontWeight; From 63f860a8977071268ddedaddb82f48028ad7e6f2 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 7 Aug 2019 14:29:37 -0700 Subject: [PATCH 2/2] Change files --- ...fabric-react-2019-08-07-14-29-37-phkuo-updateSass.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/office-ui-fabric-react-2019-08-07-14-29-37-phkuo-updateSass.json diff --git a/change/office-ui-fabric-react-2019-08-07-14-29-37-phkuo-updateSass.json b/change/office-ui-fabric-react-2019-08-07-14-29-37-phkuo-updateSass.json new file mode 100644 index 00000000000000..be153995945bb9 --- /dev/null +++ b/change/office-ui-fabric-react-2019-08-07-14-29-37-phkuo-updateSass.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "Update SASS variables using script", + "packageName": "office-ui-fabric-react", + "email": "phkuo@microsoft.com", + "commit": "3e6195306eab5525e259e73230c08d9fc91228d1", + "date": "2019-08-07T21:29:37.066Z" +}