Rename @uifabric/styling to @fluentui/style-utilities (microsoft#15567)

.github/CODEOWNERS

@@ -69,9 +69,9 @@ packages/foundation/ @dzearing @khmakoto
 packages/merge-styles/ @dzearing
 packages/monaco-editor/ @ecraig12345
 packages/react-hooks/ @ecraig12345
-packages/styling/ @dzearing
-packages/styling/src/interfaces/ @phkuo
-packages/styling/src/styles/ @phkuo
+packages/style-utilities/ @dzearing
+packages/style-utilities/src/interfaces/ @phkuo
+packages/style-utilities/src/styles/ @phkuo
 packages/tsx-editor/ @ecraig12345
 # packages/utilities/
 packages/utilities/positioning/ @joschect

.vscode/launch.json

@@ -89,7 +89,7 @@
       "program": "${workspaceRoot}/scripts/just-scripts.js",
       "stopOnEntry": false,
       "args": ["build"],
-      "cwd": "${workspaceRoot}/packages/styling",
+      "cwd": "${workspaceRoot}/packages/style-utilities",
       "runtimeExecutable": null,
       "runtimeArgs": ["--nolazy", "--debug"],
       "env": {

apps/public-docsite-resources/src/components/pages/ColorsPage.tsx

@@ -118,7 +118,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
       this._fabricSlotWidget(FabricSlots.white),
     ];
 
-    const stylingUrl = 'https://github.com/microsoft/fluentui/tree/master/packages/styling';
+    const stylingUrl = 'https://github.com/microsoft/fluentui/tree/master/packages/style-utilities';
 
     return (
       <div className="ms-themer">

change/@fluentui-common-styles-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/common-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:03.705Z"
+}

change/@fluentui-react-button-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:20.294Z"
+}

change/@fluentui-react-checkbox-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:21.848Z"
+}

change/@fluentui-react-internal-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-internal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:23.536Z"
+}

change/@fluentui-react-link-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:24.689Z"
+}

change/@fluentui-react-slider-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:25.772Z"
+}

change/@fluentui-react-tabs-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:27.080Z"
+}

change/@fluentui-react-theme-provider-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-theme-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:28.871Z"
+}

change/@fluentui-react-toggle-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-toggle",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:30.297Z"
+}

change/@fluentui-style-utilities-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/style-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:33.317Z"
+}

change/@uifabric-api-docs-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/api-docs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:40:59.193Z"
+}

change/@uifabric-date-time-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/date-time",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:05.758Z"
+}

change/@uifabric-experiments-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:10.229Z"
+}

change/@uifabric-file-type-icons-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/file-type-icons",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:11.911Z"
+}

change/@uifabric-foundation-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:13.875Z"
+}

change/@uifabric-icons-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/icons",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:15.800Z"
+}

change/@uifabric-mdl2-theme-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/mdl2-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:17.383Z"
+}

change/@uifabric-styling-2020-09-30-13-43-32-merge-oufr-react.json

@@ -1,7 +1,7 @@
 {
   "type": "minor",
   "comment": "Rename office-ui-fabric-react package and update references",
-  "packageName": "@uifabric/styling",
+  "packageName": "@fluentui/style-utilities",
   "email": "[email protected]",
   "dependentChangeType": "patch",
   "date": "2020-09-30T20:43:26.403Z"

change/@uifabric-styling-2020-10-15-02-05-19-dep-fixes.json

@@ -1,7 +1,7 @@
 {
   "type": "none",
   "comment": "Update npmignore",
-  "packageName": "@uifabric/styling",
+  "packageName": "@fluentui/style-utilities",
   "email": "[email protected]",
   "dependentChangeType": "none",
   "date": "2020-10-15T09:02:18.383Z"

change/@uifabric-tsx-editor-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/tsx-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:35.461Z"
+}

change/@uifabric-utilities-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:41.190Z"
+}

change/@uifabric-variants-2020-10-16-15-41-44-rename-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
+  "packageName": "@uifabric/variants",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T22:41:44.852Z"
+}

packages/api-docs/config/api-docs.js

@@ -9,8 +9,8 @@ const apiDocs = require('../lib/index');
 module.exports = {
   apiJsonPaths: [
     // NOTE: when adding new package to this list, also add package dep in package.json.
-    path.resolve(__dirname, '../../date-time-utilities/dist/date-time-utilities.api.json'),
     path.resolve(__dirname, '../../date-time/dist/date-time.api.json'),
+    path.resolve(__dirname, '../../date-time-utilities/dist/date-time-utilities.api.json'),
     path.resolve(__dirname, '../../merge-styles/dist/merge-styles.api.json'),
     path.resolve(__dirname, '../../react/dist/react.api.json'),
     path.resolve(__dirname, '../../react-cards/dist/react-cards.api.json'),
@@ -22,7 +22,7 @@ module.exports = {
     path.resolve(__dirname, '../../react-tabs/dist/react-tabs.api.json'),
     path.resolve(__dirname, '../../react-theme-provider/dist/react-theme-provider.api.json'),
     path.resolve(__dirname, '../../react-toggle/dist/react-toggle.api.json'),
-    path.resolve(__dirname, '../../styling/dist/styling.api.json'),
+    path.resolve(__dirname, '../../style-utilities/dist/style-utilities.api.json'),
     path.resolve(__dirname, '../../theme/dist/theme.api.json'),
     path.resolve(__dirname, '../../utilities/dist/utilities.api.json'),
     // NOTE: when adding new package to this list, also add package dep in package.json.

packages/api-docs/package.json

@@ -39,7 +39,7 @@
     "@uifabric/date-time": "^7.17.16",
     "@uifabric/merge-styles": "^7.19.1",
     "@uifabric/react-cards": "^0.113.3",
-    "@uifabric/styling": "^7.16.9",
+    "@fluentui/style-utilities": "^7.16.9",
     "@uifabric/utilities": "^7.32.3",
     "@microsoft/api-extractor-model": "7.7.1",
     "@microsoft/tsdoc": "0.12.14",

packages/common-styles/package.json

@@ -19,6 +19,6 @@
   },
   "devDependencies": {
     "@uifabric/build": "^7.0.0",
-    "@uifabric/styling": "^7.16.9"
+    "@fluentui/style-utilities": "^7.16.9"
   }
 }

packages/common-styles/scripts/generateDefaultThemeSassFiles.js

@@ -4,7 +4,7 @@
  * used with the legacy version of loadTheme.
  */
 
-const { getTheme } = require('@uifabric/styling');
+const { getTheme } = require('@fluentui/style-utilities');
 const fs = require('fs');
 const path = require('path');
 

packages/date-time/etc/date-time.api.md

@@ -12,12 +12,12 @@ import { ICalloutProps } from '@fluentui/react-internal/lib/Callout';
 import { IComponentAs } from '@uifabric/utilities';
 import { IDateGridStrings } from '@fluentui/date-time-utilities';
 import { IDayGridOptions } from '@fluentui/date-time-utilities';
-import { IProcessedStyleSet } from '@uifabric/styling';
+import { IProcessedStyleSet } from '@fluentui/style-utilities';
 import { IRefObject } from '@uifabric/utilities';
-import { IStyle } from '@uifabric/styling';
+import { IStyle } from '@fluentui/style-utilities';
 import { IStyleFunctionOrObject } from '@uifabric/utilities';
 import { ITextFieldProps } from '@fluentui/react-internal/lib/TextField';
-import { ITheme } from '@uifabric/styling';
+import { ITheme } from '@fluentui/style-utilities';
 import * as React from 'react';
 
 // @public (undocumented)

packages/date-time/package.json

@@ -53,7 +53,7 @@
     "@microsoft/load-themed-styles": "^1.10.26",
     "@uifabric/react-hooks": "^7.13.5",
     "@uifabric/set-version": "^7.0.23",
-    "@uifabric/styling": "^7.16.9",
+    "@fluentui/style-utilities": "^7.16.9",
     "@uifabric/utilities": "^7.32.3",
     "tslib": "^1.10.0"
   },

packages/date-time/src/components/Calendar/Calendar.styles.ts

@@ -1,5 +1,5 @@
 import { ICalendarStyleProps, ICalendarStyles } from './Calendar.types';
-import { normalize, FontSizes, getFocusStyle } from '@uifabric/styling';
+import { normalize, FontSizes, getFocusStyle } from '@fluentui/style-utilities';
 
 export const styles = (props: ICalendarStyleProps): ICalendarStyles => {
   const { className, theme, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;

packages/date-time/src/components/Calendar/Calendar.types.ts

@@ -1,5 +1,5 @@
 import { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@uifabric/utilities';
-import { IStyle, ITheme } from '@uifabric/styling';
+import { IStyle, ITheme } from '@fluentui/style-utilities';
 import { ICalendarDayProps, ICalendarDayGridStyles } from './CalendarDay/CalendarDay.types';
 import { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types';
 import { IDateGridStrings, DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';

packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx

@@ -3,7 +3,7 @@ import { KeyCodes, css, classNamesFunction } from '@uifabric/utilities';
 import { Icon } from '@fluentui/react-internal/lib/Icon';
 import { addMonths, compareDatePart, getMonthStart, getMonthEnd } from '@fluentui/date-time-utilities';
 import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
-import { IProcessedStyleSet } from '@uifabric/styling';
+import { IProcessedStyleSet } from '@fluentui/style-utilities';
 import { CalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid';
 import { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.types';
 import { useId } from '@uifabric/react-hooks';

packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts

@@ -1,5 +1,5 @@
 import { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
-import { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles } from '@uifabric/styling';
+import { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles } from '@fluentui/style-utilities';
 
 export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {
   const { className, theme, headerIsClickable, showWeekNumbers } = props;

packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.types.ts

@@ -1,6 +1,6 @@
 import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@uifabric/utilities';
 import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from '../Calendar.types';
-import { IStyle, ITheme } from '@uifabric/styling';
+import { IStyle, ITheme } from '@fluentui/style-utilities';
 import {
   ICalendarDayGridProps,
   ICalendarDayGridStyleProps,

packages/date-time/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts

@@ -5,7 +5,7 @@ import {
   ICalendarFormatDateCallbacks,
   AnimationDirection,
 } from '../Calendar.types';
-import { ITheme } from '@uifabric/styling';
+import { ITheme } from '@fluentui/style-utilities';
 import { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';
 
 export interface ICalendarMonth {

packages/date-time/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts

@@ -7,7 +7,7 @@ import {
   IRawStyle,
   AnimationStyles,
   HighContrastSelector,
-} from '@uifabric/styling';
+} from '@fluentui/style-utilities';
 import { AnimationDirection } from '../Calendar.types';
 
 export const getStyles = (props: ICalendarPickerStyleProps): ICalendarPickerStyles => {

packages/date-time/src/components/Calendar/CalendarPicker/CalendarPicker.types.ts

@@ -1,4 +1,4 @@
-import { IStyle, ITheme } from '@uifabric/styling';
+import { IStyle, ITheme } from '@fluentui/style-utilities';
 import { AnimationDirection } from '../Calendar.types';
 
 export interface ICalendarPickerStyleProps {

packages/date-time/src/components/Calendar/CalendarYear/CalendarYear.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@uifabric/utilities';
 import { ICalendarIconStrings, AnimationDirection } from '../Calendar.types';
-import { ITheme } from '@uifabric/styling';
+import { ITheme } from '@fluentui/style-utilities';
 import { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';
 
 export interface ICalendarYear {

packages/date-time/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx

@@ -11,7 +11,7 @@ import {
   compareDates,
 } from '@fluentui/date-time-utilities';
 import { ICalendarDayGridProps, ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';
-import { IProcessedStyleSet } from '@uifabric/styling';
+import { IProcessedStyleSet } from '@fluentui/style-utilities';
 import { DateRangeType, DayOfWeek } from '../Calendar/Calendar.types';
 import { usePrevious, useId } from '@uifabric/react-hooks';
 import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';

packages/date-time/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts

@@ -8,7 +8,7 @@ import {
   IRawStyle,
   keyframes,
   HighContrastSelector,
-} from '@uifabric/styling';
+} from '@fluentui/style-utilities';
 import { DateRangeType } from '@fluentui/date-time-utilities';
 import { AnimationDirection } from '../Calendar/Calendar.types';
 

packages/date-time/src/components/CalendarDayGrid/CalendarDayGrid.types.ts

@@ -7,7 +7,7 @@ import {
   ICalendarFormatDateCallbacks,
   AnimationDirection,
 } from '../Calendar/Calendar.types';
-import { IStyle, ITheme, IProcessedStyleSet } from '@uifabric/styling';
+import { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities';
 import { IDayGridOptions } from '@fluentui/date-time-utilities';
 
 export interface ICalendarDayGrid {