Update Button tokens to use full lightness and bebop spectrum

Author: Mitch-At-Work

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts

@@ -215,8 +215,7 @@ const useRootStyles = makeStyles({
         display: 'none',
       },
       [`& .${buttonClassNames.icon}`]: {
-        // Subtle shares hover state with selected state
-        color: semanticTokens.groupButtonSubtleIconForegroundHoverSelected,
+        color: semanticTokens.groupButtonSubtleIconForegroundHover,
       },
     },
 
@@ -231,8 +230,7 @@ const useRootStyles = makeStyles({
         display: 'none',
       },
       [`& .${buttonClassNames.icon}`]: {
-        // Subtle shares pressed state with selected state
-        color: semanticTokens.groupButtonSubtleIconForegroundPressedSelected,
+        color: semanticTokens.groupButtonSubtleIconForegroundPressed,
       },
     },
 
@@ -545,14 +543,7 @@ const useRootDisabledStyles = makeStyles({
 });
 
 const useRootFocusStyles = makeStyles({
-  // Shape variations
-  circular: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerCircular }),
-  rounded: {
-    /* The rounded styles are exactly the same as the base styles. */
-  },
-  square: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerSquare }),
-  // Primary styles
-  primary: {
+  base: {
     ...createCustomFocusIndicatorStyle({
       ...shorthands.borderColor(semanticTokens.groupFocusInnerStroke),
       boxShadow: `${semanticTokens.groupButtonShadow}, ${tokens.shadow2}, 0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} inset,  0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusOnbrandStroke} inset`,
@@ -573,6 +564,14 @@ const useRootFocusStyles = makeStyles({
       }),
     },
   },
+  // Shape variations
+  circular: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerCircular }),
+  rounded: {
+    /* The rounded styles are exactly the same as the base styles. */
+  },
+  square: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerSquare }),
+  // Primary styles
+  primary: {},
   secondary: {
     // The secondary focus styles are exactly the same as the base styles.
   },
@@ -675,8 +674,7 @@ export const useSemanticButtonStyles = (_state: unknown): ButtonState => {
     appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
 
     // Focus styles
-    appearance === 'primary' && rootFocusStyles.primary,
-    appearance === 'secondary' && rootFocusStyles.secondary,
+    rootFocusStyles.base,
     rootFocusStyles[size],
     rootFocusStyles[shape],
 

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts

@@ -15,6 +15,7 @@ const useRootCheckedStyles = makeStyles({
     ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeSelected),
     color: semanticTokens.groupButtonNeutralForegroundSelected,
     ...shorthands.borderWidth(semanticTokens.groupButtonStrokewidth),
+    fontWeight: semanticTokens.groupButtonFontweightSelected,
     [`& .${buttonClassNames.icon}`]: {
       color: semanticTokens.groupButtonNeutralIconForegroundSelected,
     },
@@ -59,21 +60,25 @@ const useRootCheckedStyles = makeStyles({
     color: semanticTokens.groupButtonOutlineForegroundSelected,
     ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected),
     ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected),
+    ...createCustomFocusIndicatorStyle({
+      ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected),
+      ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected),
+    }),
     [`& .${buttonClassNames.icon}`]: {
       color: semanticTokens.groupButtonOutlineIconForegroundSelected,
     },
 
     ':hover': {
+      backgroundColor: semanticTokens.groupButtonOutlineBackgroundHoverSelected,
+      ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected),
       ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected),
     },
 
     ':hover:active': {
+      backgroundColor: semanticTokens.groupButtonOutlineBackgroundPressedSelected,
       ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected),
-    },
-
-    ...createCustomFocusIndicatorStyle({
       ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected),
-    }),
+    },
   },
   primary: {
     backgroundColor: semanticTokens.groupButtonPrimaryBackgroundSelected,
@@ -94,6 +99,13 @@ const useRootCheckedStyles = makeStyles({
   },
   secondary: {
     /* The secondary styles are exactly the same as the base styles. */
+    ':hover': {
+      backgroundColor: semanticTokens.groupButtonNeutralBackgroundHoverSelected,
+    },
+
+    ':hover:active': {
+      backgroundColor: semanticTokens.groupButtonNeutralBackgroundPressedSelected,
+    },
   },
   subtle: {
     backgroundColor: semanticTokens.groupButtonSubtleBackgroundSelected,
@@ -105,12 +117,18 @@ const useRootCheckedStyles = makeStyles({
     },
 
     ':hover': {
+      backgroundColor: semanticTokens.groupButtonSubtleBackgroundHoverSelected,
+      ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeSelected),
+      color: semanticTokens.groupButtonSubtleForegroundSelected,
       [`& .${buttonClassNames.icon}`]: {
         color: semanticTokens.groupButtonSubtleIconForegroundHoverSelected,
       },
     },
 
     ':hover:active': {
+      backgroundColor: semanticTokens.groupButtonSubtleBackgroundPressedSelected,
+      ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeSelected),
+      color: semanticTokens.groupButtonSubtleForegroundSelected,
       [`& .${buttonClassNames.icon}`]: {
         color: semanticTokens.groupButtonSubtleIconForegroundPressedSelected,
       },