diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 895a4774f..242cf4c52 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -344,14 +344,6 @@ export const _generateStyles = (
     theme: ButtonThemeContract,
     themeName: string,
 ) => {
-    const colorToAction = light
-        ? buttonColor === "destructive"
-            ? "destructiveInverse"
-            : "progressiveInverse"
-        : buttonColor === "destructive"
-        ? "destructive"
-        : "progressive";
-    const themeColorAction = theme.color[colorToAction];
     const color: string =
         buttonColor === "destructive"
             ? theme.color.bg.critical.default
@@ -376,34 +368,36 @@ export const _generateStyles = (
 
     let newStyles: Record<string, CSSProperties> = {};
     if (kind === "primary") {
+        const colorToAction = light
+            ? buttonColor === "destructive"
+                ? "destructiveLight"
+                : "progressiveLight"
+            : buttonColor === "destructive"
+            ? "destructive"
+            : "progressive";
+        const themeColorAction = theme.color[colorToAction];
+
         // Default styles
-        const bgColor = themeColorAction.default.background;
-        const textColor = themeColorAction.default.foreground;
-        const outlineColor = themeColorAction.default.background;
 
         const focusStyling = {
-            outlineColor: light ? theme.color.light.border : outlineColor,
+            outlineColor: themeColorAction.default.background,
             outlineOffset: theme.border.offset.primary,
             outlineStyle: "solid",
             outlineWidth: theme.border.width.focused,
         };
 
         const activePressedStyling = {
-            background: light ? fadedColor : activeColor,
-            outlineColor: light ? fadedColor : activeColor,
+            background: themeColorAction.press.background,
+            outlineColor: themeColorAction.press.border,
+            outlineOffset: theme.border.offset.primary,
+            outlineStyle: "solid",
+            outlineWidth: theme.border.width.focused,
         };
 
-        const inverseBgColor = themeColorAction.default.background;
-        const inverseTextColor = themeColorAction.default.foreground;
-        const disabledBgColor = themeColorAction.disabled.background;
-        const disabledInverseBgColor = themeColorAction.disabled.background;
-        const disabledFgColor = themeColorAction.disabled.foreground;
-        const disabledInverseFgColor = themeColorAction.disabled.foreground;
-
         newStyles = {
             default: {
-                background: light ? inverseBgColor : bgColor,
-                color: light ? inverseTextColor : textColor,
+                background: themeColorAction.default.background,
+                color: themeColorAction.default.foreground,
                 paddingInline: padding,
                 // TODO(WB-1844): Change this when we get final designs for
                 // hover.
@@ -416,59 +410,50 @@ export const _generateStyles = (
             focused: focusStyling,
             pressed: activePressedStyling,
             disabled: {
-                background: light ? disabledInverseBgColor : disabledBgColor,
-                color: light ? disabledInverseFgColor : disabledFgColor,
+                background: themeColorAction.disabled.background,
+                color: themeColorAction.disabled.foreground,
                 cursor: "default",
                 ":focus-visible": {
                     ...focusStyling,
-                    outlineColor: light
-                        ? disabledInverseBgColor
-                        : disabledBgColor,
+                    outlineColor: themeColorAction.disabled.border,
                 },
             },
         };
     } else if (kind === "secondary") {
-        const secondaryBorderColor =
-            buttonColor === "destructive"
-                ? theme.color.border.secondary.critical
-                : theme.color.border.secondary.action;
-        const secondaryActiveColor =
-            buttonColor === "destructive"
-                ? theme.color.bg.secondary.active.critical
-                : theme.color.bg.secondary.active.action;
+        const colorToAction = !light
+            ? buttonColor === "destructive"
+                ? "destructiveOutline"
+                : "progressiveOutline"
+            : buttonColor === "destructive"
+            ? "destructiveOutlineLight"
+            : "progressiveOutlineLight";
+        const themeColorAction = theme.color[colorToAction];
 
         const focusStyling = {
-            background: light
-                ? theme.color.bg.secondary.inverse
-                : theme.color.bg.secondary.focus,
+            background: themeColorAction.hover.background,
             borderColor: "transparent",
-            outlineColor: light ? theme.color.border.primary.inverse : color,
+            outlineColor: themeColorAction.hover.border,
             outlineStyle: "solid",
             outlineWidth: theme.border.width.focused,
         };
 
         const activePressedStyling = {
-            background: light ? activeColor : secondaryActiveColor,
-            color: light ? fadedColor : activeColor,
+            background: themeColorAction.press.background,
+            color: themeColorAction.press.foreground,
             borderColor: "transparent",
-            outlineColor: light ? fadedColor : activeColor,
+            outlineColor: themeColorAction.press.border,
             outlineStyle: "solid",
             outlineWidth: theme.border.width.focused,
         };
 
         newStyles = {
             default: {
-                background: light
-                    ? theme.color.bg.secondary.inverse
-                    : theme.color.bg.secondary.default,
-                color: light ? theme.color.text.inverse : color,
-                borderColor: light
-                    ? theme.color.border.secondary.inverse
-                    : secondaryBorderColor,
+                background: themeColorAction.default.background,
+                color: themeColorAction.default.foreground,
+                borderColor: themeColorAction.default.border,
                 borderStyle: "solid",
                 borderWidth: theme.border.width.secondary,
-                paddingLeft: padding,
-                paddingRight: padding,
+                paddingInline: padding,
                 // TODO(WB-1844): Change this when we get final designs for
                 // hover.
                 [":hover:not([aria-disabled=true])" as any]: focusStyling,
@@ -480,15 +465,12 @@ export const _generateStyles = (
             focused: focusStyling,
             pressed: activePressedStyling,
             disabled: {
-                color: light
-                    ? theme.color.text.secondary.inverse
-                    : theme.color.text.disabled,
-                outlineColor: light ? fadedColor : theme.color.border.disabled,
+                color: themeColorAction.disabled.foreground,
+                borderColor: themeColorAction.disabled.border,
                 cursor: "default",
                 ":focus-visible": {
-                    outlineColor: light
-                        ? theme.color.border.secondary.inverse
-                        : theme.color.border.disabled,
+                    borderColor: themeColorAction.disabled.foreground,
+                    outlineColor: themeColorAction.disabled.foreground,
                     outlineStyle: "solid",
                     outlineWidth: theme.border.width.disabled,
                 },
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index 60cd23f2b..f72c7176a 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -9,42 +9,144 @@ const textUnderlineOffset = tokens.spacing.xxxSmall_4;
 
 const theme = {
     color: {
+        // kind=primary / color=default / light=false
         progressive: {
+            // filled
             ...semanticColor.action.progressive,
             disabled: {
+                border: semanticColor.action.disabled.default,
                 background: semanticColor.action.disabled.default,
                 foreground: semanticColor.action.disabled.secondary,
             },
         },
-        progressiveInverse: {
+        // kind=primary / color=default / light=true
+        progressiveLight: {
             ...semanticColor.action.progressiveInverse,
+            press: {
+                ...semanticColor.action.progressiveInverse.press,
+                border: semanticColor.action.progressiveInverse.press
+                    .background,
+            },
             disabled: {
+                border: semanticColor.action.progressiveInverse.press
+                    .background,
                 background:
                     semanticColor.action.progressiveInverse.press.background,
                 foreground:
-                    semanticColor.action.progressiveInverse.press.foreground,
+                    semanticColor.action.progressiveInverse.default.foreground,
+            },
+        },
+        // outlined buttons
+        // kind=secondary / color=default / light=false
+        progressiveOutline: {
+            ...semanticColor.action.progressiveInverse,
+            default: {
+                ...semanticColor.action.progressiveInverse.default,
+                // NOTE: This is a special case for the secondary button
+                background: "transparent",
+            },
+            disabled: {
+                border: semanticColor.action.disabled.default,
+                background:
+                    semanticColor.action.progressiveInverse.press.background,
+                foreground: semanticColor.text.disabled,
+            },
+        },
+        // kind=secondary / color=default / light=true
+        progressiveOutlineLight: {
+            default: {
+                border: tokens.color.white64,
+                background: "transparent",
+                foreground: semanticColor.text.inverse,
+            },
+            hover: {
+                border: semanticColor.border.inverse,
+                background: "transparent",
+                foreground: semanticColor.text.inverse,
+            },
+            press: {
+                border: semanticColor.border.inverse,
+                background: semanticColor.action.progressive.press.background,
+                foreground: semanticColor.text.inverse,
+            },
+            disabled: {
+                border: semanticColor.action.progressiveInverse.press
+                    .background,
+                background:
+                    semanticColor.action.progressiveInverse.press.background,
+                foreground: tokens.color.white50,
             },
         },
+        // kind=primary / color=destructive / light=false
         destructive: {
             ...semanticColor.action.destructive,
             disabled: {
+                border: semanticColor.action.disabled.default,
                 background: semanticColor.action.disabled.default,
                 foreground: semanticColor.action.disabled.secondary,
             },
         },
-        destructiveInverse: {
+        // kind=primary / color=destructive / light=true
+        destructiveLight: {
             ...semanticColor.action.destructiveInverse,
+            press: {
+                ...semanticColor.action.destructiveInverse.press,
+                border: semanticColor.action.destructiveInverse.press
+                    .background,
+            },
             disabled: {
+                border: semanticColor.action.destructiveInverse.press
+                    .background,
                 background:
                     semanticColor.action.destructiveInverse.press.background,
                 foreground:
-                    semanticColor.action.destructiveInverse.press.foreground,
+                    semanticColor.action.destructiveInverse.default.foreground,
+            },
+        },
+        // outlined buttons
+        // kind=secondary / color=destructive / light=false
+        destructiveOutline: {
+            ...semanticColor.action.destructiveInverse,
+            disabled: {
+                border: semanticColor.action.disabled.default,
+                background:
+                    semanticColor.action.destructiveInverse.press.background,
+                foreground: semanticColor.text.disabled,
+            },
+        },
+        // kind=secondary / color=destructive / light=true
+        destructiveOutlineLight: {
+            default: {
+                border: tokens.color.white64,
+                background: "transparent",
+                foreground: semanticColor.text.inverse,
+            },
+            hover: {
+                border: semanticColor.border.inverse,
+                background: "transparent",
+                foreground: semanticColor.text.inverse,
+            },
+            press: {
+                border: semanticColor.border.inverse,
+                background: semanticColor.action.progressive.press.background,
+                foreground: semanticColor.text.inverse,
+            },
+            disabled: {
+                border: semanticColor.action.destructiveInverse.press
+                    .background,
+                background:
+                    semanticColor.action.destructiveInverse.press.background,
+                foreground: tokens.color.white50,
             },
         },
         // NOTE: These colors will be removed from WB as soon as we remove the
         // light variant.
         light: {
             border: semanticColor.border.inverse,
+            borderSecondary: tokens.color.white64,
+            backgroundSecondary: "none",
+            foregroundSecondary: semanticColor.text.inverse,
+            disabledForegroundSecondary: tokens.color.white50,
         },
 
         bg: {