react-checkbox: Replacing use of functions in makeStyles with direct …

…use of tokens (microsoft#21041) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * react-checkbox: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Fixing build error. * Change files * Update @fluentui-react-checkbox-98de0bef-6373-4cbf-aa25-a2f8c808a0ac.json * Removing makeStyles changes, replacing wrong values with shorthands in useCheckboxStyles.
mlp73 · Jan 17, 2022 · 7c3db70 · 7c3db70
1 parent df1faa7
commit 7c3db70
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 45 deletions.
diff --git a/change/@fluentui-react-checkbox-98de0bef-6373-4cbf-aa25-a2f8c808a0ac.json b/change/@fluentui-react-checkbox-98de0bef-6373-4cbf-aa25-a2f8c808a0ac.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Replacing use of functions in makeStyles with direct use of tokens.",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -1,5 +1,6 @@
 import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
 import { CheckboxState } from './Checkbox.types';
 
 export const checkboxClassName = 'fui-Checkbox';
@@ -33,79 +34,79 @@ const useRootStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),
 
   // These `__Colors` styles are mutually exclusive: exactly one should be applied at any time
-  uncheckedColors: theme => ({
-    color: theme.colorNeutralForeground3,
+  uncheckedColors: {
+    color: tokens.colorNeutralForeground3,
     [`& .${indicatorClassName}`]: {
-      borderColor: theme.colorNeutralStrokeAccessible,
+      ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
     },
 
     ':hover': {
-      color: theme.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2,
       [`& .${indicatorClassName}`]: {
-        borderColor: theme.colorNeutralStrokeAccessibleHover,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
       },
     },
 
     ':active:hover': {
-      color: theme.colorNeutralForeground1,
+      color: tokens.colorNeutralForeground1,
       [`& .${indicatorClassName}`]: {
-        borderColor: theme.colorNeutralStrokeAccessiblePressed,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
       },
     },
-  }),
+  },
 
-  checkedColors: theme => ({
-    color: theme.colorNeutralForeground1,
+  checkedColors: {
+    color: tokens.colorNeutralForeground1,
     [`& .${indicatorClassName}`]: {
-      backgroundColor: theme.colorCompoundBrandBackground,
-      color: theme.colorNeutralForegroundOnBrand,
-      borderColor: theme.colorCompoundBrandBackground,
+      backgroundColor: tokens.colorCompoundBrandBackground,
+      color: tokens.colorNeutralForegroundOnBrand,
+      ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
     },
 
     ':hover': {
       [`& .${indicatorClassName}`]: {
-        backgroundColor: theme.colorCompoundBrandBackgroundHover,
-        borderColor: theme.colorCompoundBrandBackgroundHover,
+        backgroundColor: tokens.colorCompoundBrandBackgroundHover,
+        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),
       },
     },
 
     ':active:hover': {
       [`& .${indicatorClassName}`]: {
-        backgroundColor: theme.colorCompoundBrandBackgroundPressed,
-        borderColor: theme.colorCompoundBrandBackgroundPressed,
+        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
+        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),
       },
     },
-  }),
+  },
 
-  mixedColors: theme => ({
-    color: theme.colorNeutralForeground1,
+  mixedColors: {
+    color: tokens.colorNeutralForeground1,
     [`& .${indicatorClassName}`]: {
-      borderColor: theme.colorCompoundBrandStroke,
-      color: theme.colorCompoundBrandForeground1,
+      ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
+      color: tokens.colorCompoundBrandForeground1,
     },
 
     ':hover': {
       [`& .${indicatorClassName}`]: {
-        borderColor: theme.colorCompoundBrandStrokeHover,
-        color: theme.colorCompoundBrandForeground1Hover,
+        ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
+        color: tokens.colorCompoundBrandForeground1Hover,
       },
     },
 
     ':active:hover': {
       [`& .${indicatorClassName}`]: {
-        borderColor: theme.colorCompoundBrandStrokePressed,
-        color: theme.colorCompoundBrandForeground1Pressed,
+        ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
+        color: tokens.colorCompoundBrandForeground1Pressed,
       },
     },
-  }),
+  },
 
-  disabledColors: theme => ({
-    color: theme.colorNeutralForegroundDisabled,
+  disabledColors: {
+    color: tokens.colorNeutralForegroundDisabled,
     [`& .${indicatorClassName}`]: {
-      borderColor: theme.colorNeutralStrokeDisabled,
-      color: theme.colorNeutralForegroundDisabled,
+      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+      color: tokens.colorNeutralForegroundDisabled,
     },
-  }),
+  },
 });
 
 const useInputStyles = makeStyles({
@@ -123,7 +124,7 @@ const useInputStyles = makeStyles({
 });
 
 const useIndicatorStyles = makeStyles({
-  base: theme => ({
+  base: {
     alignSelf: 'flex-start',
     boxSizing: 'border-box',
     flexShrink: 0,
@@ -133,11 +134,11 @@ const useIndicatorStyles = makeStyles({
     justifyContent: 'center',
     ...shorthands.overflow('hidden'),
 
-    ...shorthands.border(theme.strokeWidthThin, 'solid'),
-    ...shorthands.borderRadius(theme.borderRadiusSmall),
+    ...shorthands.border(tokens.strokeWidthThin, 'solid'),
+    ...shorthands.borderRadius(tokens.borderRadiusSmall),
     fill: 'currentColor',
     cursor: 'inherit',
-  }),
+  },
 
   medium: {
     width: indicatorSizeMedium,
@@ -149,9 +150,9 @@ const useIndicatorStyles = makeStyles({
     height: indicatorSizeLarge,
   },
 
-  circular: theme => ({
-    ...shorthands.borderRadius(theme.borderRadiusCircular),
-  }),
+  circular: {
+    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+  },
 
   unchecked: {
     '& > *': {
@@ -170,12 +171,12 @@ const useLabelStyles = makeStyles({
 
   // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
   // This prevents the label from expanding the height of the Checkbox, but preserves line height if the label wraps.
-  medium: theme => ({
-    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${theme.lineHeightBase300}) / 2)`, 0),
-  }),
-  large: theme => ({
-    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${theme.lineHeightBase300}) / 2)`, 0),
-  }),
+  medium: {
+    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),
+  },
+  large: {
+    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),
+  },
 });
 
 /**