[WB-1814.5] Refactor IconButton to use semantic colors (#2449)

## Summary:

Next step is to refactor the `IconButton` component to use semantic colors.

Besides the migration, this PR also includes the following changes:

- Reworked the theme structure to make it closer to the semanticColor structure.
- Moved all the color-related CSS properties to a separate function (`getStylesByKind`).
- Added `border` to all the states to prepare the work for Polaris as these
icon buttons will look similar to the Button ones.

### Implementation plan:

1. #2439
2. #2440
3. #2441
4. #2446
5. IconButton (current PR)
6. Clickable, Link
7. Modal
8. Popover, Tooltip
9. Pill, Toolbar


Issue: WB-1814

## Test plan:

Verify that the Chromatic snapshots are unchanged.

URL: `/?path=/story/packages-iconbutton-all-variants--default`

Author: jandrade

Reviewers: jandrade, marcysutton, beaesguerra

Required Reviewers:

Approved By: marcysutton, beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2449

Author: jandrade

.changeset/sixty-jars-guess.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon-button": patch
+---
+
+Migrate to semanticColor tokens

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

@@ -6,7 +6,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import paperPlaneIcon from "@phosphor-icons/core/fill/paper-plane-tilt-fill.svg";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 
@@ -16,11 +16,7 @@ import IconButton from "@khanacademy/wonder-blocks-icon-button";
  */
 export default {
     title: "Packages / IconButton / All Variants",
-    parameters: {
-        docs: {
-            autodocs: false,
-        },
-    },
+    tags: ["!autodocs"],
 } as Meta;
 
 type StoryComponentType = StoryObj<typeof IconButton>;
@@ -52,7 +48,9 @@ const KindVariants = ({
                                     : styles.darkDefault),
                         ]}
                     >
-                        <LabelMedium style={light && {color: color.white}}>
+                        <LabelMedium
+                            style={light && {color: semanticColor.text.inverse}}
+                        >
                             {kind}-default
                         </LabelMedium>
                         <View style={[styles.iconButtons]}>
@@ -79,7 +77,9 @@ const KindVariants = ({
                                     : styles.darkDefault),
                         ]}
                     >
-                        <LabelMedium style={light && {color: color.white}}>
+                        <LabelMedium
+                            style={light && {color: semanticColor.text.inverse}}
+                        >
                             {kind}-destructive
                         </LabelMedium>
                         <View style={[styles.iconButtons]}>
@@ -106,7 +106,9 @@ const KindVariants = ({
                                     : styles.darkDefault),
                         ]}
                     >
-                        <LabelMedium style={light && {color: color.white}}>
+                        <LabelMedium
+                            style={light && {color: semanticColor.text.inverse}}
+                        >
                             {kind}-disabled
                         </LabelMedium>
                         <View style={[styles.iconButtons]}>
@@ -178,10 +180,10 @@ export const Active: StoryComponentType = {
 
 const styles = StyleSheet.create({
     darkDefault: {
-        backgroundColor: color.darkBlue,
+        backgroundColor: semanticColor.surface.inverse,
     },
     darkKhanmigo: {
-        backgroundColor: color.eggplant,
+        backgroundColor: semanticColor.khanmigo.primary,
     },
     grid: {
         display: "grid",

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

@@ -16,7 +16,7 @@ import {MemoryRouter, Route, Switch} from "react-router";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon-button/package.json";
@@ -397,7 +397,7 @@ export const SubmittingForms: StoryComponentType = {
 
 const styles = StyleSheet.create({
     dark: {
-        backgroundColor: color.darkBlue,
+        backgroundColor: semanticColor.surface.inverse,
         padding: spacing.medium_16,
     },
     arrowsWrapper: {