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

… of tokens (microsoft#21053) * 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-radio: Replacing use of functions in makeStyles with direct use of tokens. * Moving tokens.ts into src/ and out of src/global. * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Fixing build error.
mlp73 · Jan 17, 2022 · 1b2f264 · 1b2f264
1 parent 1f140be
commit 1b2f264
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 45 deletions.
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -7,9 +7,9 @@ export const radioClassName = 'fui-Radio';
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: theme => ({
+  root: {
     // TODO Add default styles for the root element
-  }),
+  },
 
   // TODO add additional classes for different states and/or slots
 });

diff --git a/packages/react-radio/src/components/RadioItem/useRadioItemStyles.ts b/packages/react-radio/src/components/RadioItem/useRadioItemStyles.ts
@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
 import type { RadioItemState } from './RadioItem.types';
 
 export const radioItemClassName = 'fui-RadioItem';
@@ -8,93 +10,93 @@ export const radioItemClassName = 'fui-RadioItem';
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: theme => ({
+  root: {
     display: 'inline-flex',
     position: 'relative',
     alignSelf: 'flex-start',
     alignItems: 'center',
     ...shorthands.padding('4px'),
     userSelect: 'none',
     cursor: 'pointer',
-  }),
+  },
 
-  checked: theme => ({
-    color: theme.colorNeutralForeground1,
+  checked: {
+    color: tokens.colorNeutralForeground1,
 
     // TODO: neutralForegroundInverted change to NeutralForegroundOnBrand once it's added
     [`& .${radioItemClassName}-indicator`]: {
-      backgroundColor: theme.colorCompoundBrandBackground,
-      color: theme.colorNeutralForegroundInverted,
-      borderColor: theme.colorBrandBackground,
+      backgroundColor: tokens.colorCompoundBrandBackground,
+      color: tokens.colorNeutralForegroundInverted,
+      borderColor: tokens.colorBrandBackground,
       boxShadow: '0 0 0 2px currentColor inset',
     },
 
     ':active': {
       [`& .${radioItemClassName}-indicator`]: {
-        backgroundColor: theme.colorCompoundBrandBackgroundPressed,
+        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
       },
     },
 
     ':hover': {
       [`& .${radioItemClassName}-indicator`]: {
-        backgroundColor: theme.colorCompoundBrandBackgroundHover,
+        backgroundColor: tokens.colorCompoundBrandBackgroundHover,
       },
     },
-  }),
+  },
 
-  unchecked: theme => ({
-    color: theme.colorNeutralForeground3,
+  unchecked: {
+    color: tokens.colorNeutralForeground3,
 
     [`& .${radioItemClassName}-indicator`]: {
-      borderColor: theme.colorNeutralStrokeAccessible,
+      borderColor: tokens.colorNeutralStrokeAccessible,
       '& > *': {
         opacity: 0,
       },
     },
 
     ':hover': {
-      color: theme.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2,
 
       [`& .${radioItemClassName}-indicator`]: {
-        borderColor: theme.colorNeutralStrokeAccessibleHover,
+        borderColor: tokens.colorNeutralStrokeAccessibleHover,
       },
     },
 
     ':active': {
-      color: theme.colorNeutralForeground1,
+      color: tokens.colorNeutralForeground1,
 
       [`& .${radioItemClassName}-indicator`]: {
-        borderColor: theme.colorNeutralStrokeAccessiblePressed,
+        borderColor: tokens.colorNeutralStrokeAccessiblePressed,
       },
     },
-  }),
+  },
 
-  disabled: theme => ({
-    color: theme.colorNeutralForegroundDisabled,
+  disabled: {
+    color: tokens.colorNeutralForegroundDisabled,
     cursor: 'default',
 
     [`& .${radioItemClassName}-indicator`]: {
-      borderColor: theme.colorNeutralStrokeDisabled,
-      color: theme.colorNeutralForegroundDisabled,
-      backgroundColor: theme.colorNeutralBackground1,
+      borderColor: tokens.colorNeutralStrokeDisabled,
+      color: tokens.colorNeutralForegroundDisabled,
+      backgroundColor: tokens.colorNeutralBackground1,
     },
 
     ':hover': {
       [`& .${radioItemClassName}-indicator`]: {
-        borderColor: theme.colorNeutralStrokeDisabled,
-        color: theme.colorNeutralForegroundDisabled,
-        backgroundColor: theme.colorNeutralBackground1,
+        borderColor: tokens.colorNeutralStrokeDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        backgroundColor: tokens.colorNeutralBackground1,
       },
     },
 
     ':active': {
       [`& .${radioItemClassName}-indicator`]: {
-        borderColor: theme.colorNeutralStrokeDisabled,
-        color: theme.colorNeutralForegroundDisabled,
-        backgroundColor: theme.colorNeutralBackground1,
+        borderColor: tokens.colorNeutralStrokeDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        backgroundColor: tokens.colorNeutralBackground1,
       },
     },
-  }),
+  },
 
   bottomLabelPosition: {
     display: 'flex',
@@ -144,14 +146,14 @@ const useLabelStyles = makeStyles({
     cursor: 'pointer',
   },
 
-  disabled: theme => ({
+  disabled: {
     cursor: 'not-allowed',
-    color: theme.colorNeutralForegroundDisabled,
-  }),
+    color: tokens.colorNeutralForegroundDisabled,
+  },
 });
 
 const useIndicatorStyles = makeStyles({
-  indicator: theme => ({
+  indicator: {
     width: '100%',
     height: '100%',
     fill: 'currentColor',
@@ -162,19 +164,19 @@ const useIndicatorStyles = makeStyles({
     position: 'absolute',
     boxSizing: 'border-box',
     ...shorthands.borderStyle('solid'),
-    ...shorthands.borderRadius(theme.borderRadiusCircular),
-    ...shorthands.borderWidth(theme.strokeWidthThin),
-  }),
+    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    ...shorthands.borderWidth(tokens.strokeWidthThin),
+  },
 });
 
 const useSubtextStyles = makeStyles({
-  subtext: theme => ({
+  subtext: {
     display: 'block',
-    fontFamily: theme.fontFamilyBase,
-    fontSize: theme.fontSizeBase200,
-    lineHeight: theme.lineHeightBase200,
-    fontWeight: theme.fontWeightRegular,
-  }),
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase200,
+    lineHeight: tokens.lineHeightBase200,
+    fontWeight: tokens.fontWeightRegular as React.CSSProperties['fontWeight'],
+  },
 });
 
 /**