feat(odyssey-react): update Button size styles

okta · May 5, 2022 · 251fdab · 251fdab
1 parent 03df79d
commit 251fdab
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/odyssey-react/src/components/Button/Button.module.scss b/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));
 }
diff --git a/packages/odyssey-react/src/components/Button/Button.theme.ts b/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,
 });