[WB-1852.2] Remove Button.light variant, modify actionStyles to support Button instances (#2563)

## Summary:

This PR mainly removes the `light` prop from the `Button` component and its
associated styles. The `light` prop was used to apply a light theme to the
button, but it is no longer maintained and has been removed to simplify the
codebase.

The `inverse` action style can now be used as a replacement for these kind of
scenarhos.

### Details:

- Button:
  - Removed the `light` prop as it is no longer maintained.
  - Simplified pseudo-states (e.g. `:hover`, `:active`), instead of using `:hover:not("aria-disabled=true)`.
- Styles: Adjusted `actionStyles.inverse` to account for `Button` instances.


Issue: https://khanacademy.atlassian.net/browse/WB-1852

## Test plan:

Navigate to the `Button` component in storybook and verify that the `light` prop
is no longer available.

Test the `inverse` action style in storybook to ensure it looks as expected with
`Button` instances.

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2563

Author: jandrade

.changeset/fluffy-donuts-drop.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": major
+---
+
+Removes the `light` prop as it is no longer maintained. Simplifes pseudo-states (e.g. `:hover`, `:active`).

.changeset/grumpy-seas-crash.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-styles": patch
+---
+
+Adjust `actionStyles.inverse` to account for `Button` instances

__docs__/wonder-blocks-button/button-variants.stories.tsx

@@ -8,7 +8,7 @@ import {allModes} from "../../.storybook/modes";
 
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import Button from "@khanacademy/wonder-blocks-button";
 
@@ -44,29 +44,18 @@ function VariantsGroup({
     color = "default",
     disabled = false,
     label = "Button",
-    light,
     size,
 }: {
     color?: ButtonProps["color"];
     disabled?: ButtonProps["disabled"];
     label?: string;
-    light: boolean;
     size: ButtonProps["size"];
 }) {
-    const theme = React.useContext(ThemeSwitcherContext);
     const category = disabled ? "disabled" : color;
 
     return (
-        <View
-            style={[
-                styles.variants,
-                light &&
-                    (theme === "khanmigo"
-                        ? styles.darkKhanmigo
-                        : styles.darkDefault),
-            ]}
-        >
-            <LabelMedium style={[styles.label, light && styles.inverseLabel]}>
+        <View style={[styles.variants]}>
+            <LabelMedium style={styles.label}>
                 {size} / {category}
             </LabelMedium>
             {kinds.map((kind) => (
@@ -75,7 +64,6 @@ function VariantsGroup({
                         onClick={action("clicked")}
                         disabled={disabled}
                         kind={kind}
-                        light={light}
                         color={color}
                         size={size}
                     >
@@ -86,7 +74,6 @@ function VariantsGroup({
                         onClick={action("clicked")}
                         disabled={disabled}
                         kind={kind}
-                        light={light}
                         color={color}
                         size={size}
                         startIcon={paperPlaneIcon}
@@ -98,7 +85,6 @@ function VariantsGroup({
                         onClick={action("clicked")}
                         disabled={disabled}
                         kind={kind}
-                        light={light}
                         color={color}
                         size={size}
                         endIcon={paperPlaneIcon}
@@ -111,46 +97,17 @@ function VariantsGroup({
     );
 }
 
-const KindVariants = ({light}: {light: boolean}) => {
-    return (
-        <>
-            {sizes.map((size) => (
-                <React.Fragment key={size}>
-                    {colors.map((color) => (
-                        <React.Fragment key={color}>
-                            <VariantsGroup
-                                size={size}
-                                color={color}
-                                light={light}
-                            />
-                            {light && (
-                                <VariantsGroup
-                                    size={size}
-                                    color={color}
-                                    disabled={true}
-                                    light={light}
-                                />
-                            )}
-                        </React.Fragment>
-                    ))}
-                    {!light && (
-                        <VariantsGroup
-                            size={size}
-                            disabled={true}
-                            light={light}
-                        />
-                    )}
-                </React.Fragment>
-            ))}
-        </>
-    );
-};
-
 const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
     <View style={{marginBottom: spacing.large_24}}>
         <HeadingLarge>{themeName} theme</HeadingLarge>
-        <KindVariants light={false} />
-        <KindVariants light={true} />
+        {sizes.map((size) => (
+            <React.Fragment key={size}>
+                {colors.map((color) => (
+                    <VariantsGroup key={color} size={size} color={color} />
+                ))}
+                <VariantsGroup size={size} disabled={true} />
+            </React.Fragment>
+        ))}
     </View>
 );
 
@@ -189,12 +146,6 @@ export const Active: StoryComponentType = {
 };
 
 const styles = StyleSheet.create({
-    darkDefault: {
-        backgroundColor: color.darkBlue,
-    },
-    darkKhanmigo: {
-        backgroundColor: color.eggplant,
-    },
     variants: {
         justifyContent: "flex-start",
         padding: spacing.medium_16,
@@ -206,7 +157,4 @@ const styles = StyleSheet.create({
     label: {
         minWidth: 150,
     },
-    inverseLabel: {
-        color: semanticColor.text.inverse,
-    },
 });

__docs__/wonder-blocks-button/button.argtypes.ts

@@ -4,15 +4,9 @@ import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 export default {
     children: {
-        description: "Text to appear on the button.",
         type: {name: "string", required: true},
     },
     startIcon: {
-        description: `A Phosphor icon asset (imported as a static SVG file)
-            that will appear at the start of the button (left for LTR, right
-            for RTL).`,
-        type: {name: "other", value: "PhosphorIconAsset", required: false},
-        control: {type: "select"},
         options: Object.keys(IconMappings),
         mapping: IconMappings,
         table: {
@@ -21,11 +15,6 @@ export default {
         },
     },
     endIcon: {
-        description: `A Phosphor icon asset (imported as a static SVG file)
-            that will appear at the end of the button (right for LTR, left
-            for RTL).`,
-        type: {name: "other", value: "PhosphorIconAsset", required: false},
-        control: {type: "select"},
         options: Object.keys(IconMappings),
         mapping: IconMappings,
         table: {
@@ -34,104 +23,21 @@ export default {
         },
     },
     spinner: {
-        description: "If true, replaces the contents with a spinner.",
         control: {type: "boolean"},
         table: {
             category: "Layout",
-            type: {
-                summary: "boolean",
-                detail: "Setting this prop to `true` will disable the button.",
-            },
-        },
-    },
-    color: {
-        description: "The color of the button, either blue or red.",
-        options: ["default", "destructive"],
-        control: {type: "radio"},
-        table: {
-            category: "Theming",
-            type: {
-                summary: `"default" | "destructive"`,
-            },
-        },
-    },
-    kind: {
-        description:
-            "The kind of the button, either primary, secondary, or tertiary.",
-        options: ["primary", "secondary", "tertiary"],
-        control: {type: "select"},
-        table: {
-            type: {summary: "primary | secondary | tertiary"},
-            defaultValue: {
-                detail: `
-                - Primary buttons have background colors.\n- Secondary buttons have a border and no background color.\n- Tertiary buttons have no background or border.
-                `,
-            },
-        },
-    },
-    light: {
-        description: "Whether the button is on a dark/colored background.",
-        control: {type: "boolean"},
-        table: {
-            category: "Theming",
-            type: {
-                summary: "boolean",
-                detail: "Sets primary button background color to white, and secondary and tertiary button title to color.",
-            },
         },
     },
     size: {
-        description: "The size of the button.",
-        options: ["small", "medium", "large"],
         control: {type: "select"},
         table: {
             category: "Layout",
-            defaultValue: {
-                detail: `"medium" = height: 40; "small" = height: 32; "large" = height: 56;`,
-            },
             type: {
                 summary: `"medium" | "small" | "large"`,
             },
         },
     },
-    disabled: {
-        description: "Whether the button is disabled.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-        },
-    },
-    id: {
-        description: "An optional id attribute.",
-        control: {type: "text"},
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-    },
-    testId: {
-        description: "Test ID used for e2e testing.",
-        control: {type: "text"},
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-    },
-
-    tabIndex: {
-        description: "Set the tabindex attribute on the rendered element.",
-        control: {type: "number", min: -1},
-        table: {
-            type: {
-                summary: "number",
-            },
-        },
-    },
     style: {
-        description: "Optional custom styles.",
         table: {
             category: "Layout",
             type: {
@@ -140,7 +46,6 @@ export default {
         },
     },
     labelStyle: {
-        description: "Optional custom styles for the inner label.",
         table: {
             category: "Layout",
             type: {
@@ -149,7 +54,6 @@ export default {
         },
     },
     className: {
-        description: "Adds CSS classes to the Button.",
         control: {type: "text"},
         table: {
             category: "Layout",
@@ -163,9 +67,6 @@ export default {
      */
     onClick: {
         action: "clicked",
-        description: `Function to call when button is clicked.
-        This callback should be used for things like marking BigBingo conversions. It should NOT be used to redirect to a different URL or to prevent navigation via e.preventDefault(). The event passed to this handler will have its preventDefault() and stopPropagation() methods stubbed out.
-        `,
         table: {
             category: "Events",
             type: {
@@ -179,39 +80,24 @@ export default {
      * Navigation
      */
     skipClientNav: {
-        description: `Whether to avoid using client-side navigation. If the URL passed to href is local to the client-side, e.g. /math/algebra/eval-exprs, then it tries to use react-router-dom's Link component which handles the client-side navigation. You can set "skipClientNav" to true avoid using client-side nav entirely.`,
         control: {type: "boolean"},
         table: {
             category: "Navigation",
-            type: {
-                summary: "Note",
-                detail: "All URLs containing a protocol are considered external, e.g. https://khanacademy.org/math/algebra/eval-exprs will trigger a full page reload.",
-            },
         },
     },
     rel: {
-        description: `Specifies the type of relationship between the current document and the linked document. Should only be used when "href" is specified. This defaults to "noopener noreferrer" when target="_blank", but can be overridden by setting this prop to something else.`,
         control: {type: "text"},
         table: {
             category: "Navigation",
-            type: {
-                summary: "string",
-            },
         },
     },
     target: {
-        description: `A target destination window for a link to open in. Should only be used
-        * when "href" is specified.`,
         control: {type: "text"},
         table: {
             category: "Navigation",
-            type: {
-                summary: "string",
-            },
         },
     },
     href: {
-        description: "URL to navigate to.",
         control: {type: "text"},
         table: {
             category: "Navigation",
@@ -222,7 +108,6 @@ export default {
         },
     },
     beforeNav: {
-        description: `Run async code before navigating. If the promise returned rejects then navigation will not occur. If both safeWithNav and beforeNav are provided, beforeNav will be run first and safeWithNav will only be run if beforeNav does not reject.`,
         table: {
             category: "Navigation",
             type: {
@@ -231,7 +116,6 @@ export default {
         },
     },
     safeWithNav: {
-        description: `Run async code in the background while client-side navigating. If the browser does a full page load navigation, the callback promise must be settled before the navigation will occur. Errors are ignored so that navigation is guaranteed to succeed.`,
         table: {
             category: "Navigation",
             type: {