feat(odyssey-react): update Button size styles

Author: edburyenegren-okta

packages/odyssey-react/src/components/Button/Button.module.scss

@@ -18,7 +18,7 @@
   margin-block: var(--MarginBlock);
   margin-inline: var(--MarginInline);
   padding-block: calc(var(--PaddingBlock) - var(--BorderWidth));
-  padding-inline: var(--PaddingInline);
+  padding-inline: calc(var(--PaddingInline) - var(--BorderWidth));
   transition-property: color, background-color, border-color, outline-offset,
     outline-color;
   transition-duration: var(--TransitionDuration);
@@ -172,11 +172,11 @@
 
 .sSize {
   padding-block: calc(var(--SmallSizePaddingBlock) - var(--BorderWidth));
-  padding-inline: var(--SmallSizePaddingInline);
+  padding-inline: calc(var(--SmallSizePaddingInline) - var(--BorderWidth));
   font-size: var(--SmallSizeFontSize);
 }
 
 .lSize {
   padding-block: calc(var(--LargeSizePaddingBlock) - var(--BorderWidth));
-  padding-inline: var(--LargeSizePaddingInline);
+  padding-inline: calc(var(--LargeSizePaddingInline) - var(--BorderWidth));
 }

packages/odyssey-react/src/components/Button/Button.theme.ts

@@ -16,7 +16,7 @@ export const theme: ThemeReducer = (theme) => ({
   // eslint-disable-next-line @okta/odyssey/no-invalid-theme-properties
   MarginBlock: 0,
   MarginInline: 0,
-  PaddingBlock: theme.SpaceScale1,
+  PaddingBlock: theme.SpaceScale2,
   PaddingInline: theme.SpaceScale2,
   TransitionDuration: theme.TransitionDurationBase,
   TransitionTimingFunction: theme.TransitionTimingBase,
@@ -98,11 +98,11 @@ export const theme: ThemeReducer = (theme) => ({
   WideLayoutMarginInline: 0,
 
   // Small Size
-  SmallSizeFontSize: theme.FontSizeCaption,
-  SmallSizePaddingBlock: theme.SpaceScale0,
-  SmallSizePaddingInline: theme.SpaceScale1,
+  SmallSizeFontSize: theme.FontSizeBody,
+  SmallSizePaddingBlock: theme.SpaceScale1,
+  SmallSizePaddingInline: theme.SpaceScale2,
 
   // Large Size
-  LargeSizePaddingBlock: theme.SpaceScale2,
+  LargeSizePaddingBlock: theme.SpaceScale3,
   LargeSizePaddingInline: theme.SpaceScale3,
 });