fix: primary button colours (#201)

* fix(button): fix primary colours and is loading with no gutters * chore(snapshots): update snapshots --------- Co-authored-by: Thrasos Kafasis <[email protected]>
epignosis · Sep 6, 2023 · 1c2f00b · 1c2f00b
1 parent fec46be
commit 1c2f00b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 13 deletions.
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button /> matches snapshot 1`] = `
 <div>
   <button
-    class="solid css-19ls4bs-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+    class="solid css-7gkhii-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
   >
     <span
       class="btn-text"
@@ -17,7 +17,7 @@ exports[`<Button /> matches snapshot 1`] = `
 exports[`<Button /> matches snapshot with all props 1`] = `
 <div>
   <button
-    class="my-class rounded solid css-1mguma3-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+    class="my-class rounded solid css-afn1ki-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
     id="my-button"
   >
     <span

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
@@ -39,7 +39,7 @@ const baseButton = (
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: ${noGutters ? 0 : btnPadding[size]};
+    padding: ${noGutters ? "0 0.25rem" : btnPadding[size]};
     border-radius: 5px;
     line-height: 1.125rem;
     cursor: pointer;
@@ -135,9 +135,9 @@ const outlineButton = (button: Theme["button"], color: Color): SerializedStyles
 const ghostButton = (button: Theme["button"], color: Color): SerializedStyles => css`
   background-color: transparent;
   border: none;
+  color: ${button[color].ghost.color};
 
   &:hover {
-    color: ${button[color].ghost.color};
     background-color: ${button[color].ghost.background};
   }
 `;
@@ -186,10 +186,10 @@ const iconAfterButton = (size: Size): SerializedStyles => {
 
 export const btnContainer = (
   { typeScaleSizes, button }: Theme,
-  { color, size, ...attrs }: ButtonAttrs,
+  { color, size, noGutters, ...attrs }: ButtonAttrs,
 ): SerializedStyles => {
   return css`
-    ${baseButton({ typeScaleSizes }, { size, ...attrs })};
+    ${baseButton({ typeScaleSizes }, { size, noGutters, ...attrs })};
 
     &.solid {
       ${solidButton(button, color)};
@@ -260,7 +260,7 @@ export const btnContainer = (
 
     .loading {
       position: relative;
-      inset-inline-start: -12px;
+      inset-inline-start: ${noGutters ? "0" : "-12px"};
     }
   `;
 };
diff --git a/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<Dropdown /> opens the dropdown and matches snapshot 1`] = `
       class="dropdown-button"
     >
       <button
-        class="solid css-19ls4bs-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+        class="solid css-7gkhii-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
       >
         <span
           class="btn-text"

diff --git a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Pagination /> matches snapshot with on page 1`] = `
     id="my-id"
   >
     <button
-      class="previous-page-btn ghost css-1r7tkf0-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+      class="previous-page-btn ghost css-1j7ui09-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
       data-testid="previous-page-btn"
       name="Previous page"
     >
@@ -30,7 +30,7 @@ exports[`<Pagination /> matches snapshot with on page 1`] = `
           class="dropdown-button"
         >
           <button
-            class="ghost icon-after css-19ls4bs-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+            class="ghost icon-after css-7gkhii-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
           >
             <span
               class="btn-text"
@@ -52,7 +52,7 @@ exports[`<Pagination /> matches snapshot with on page 1`] = `
       </div>
     </div>
     <button
-      class="next-page-btn ghost css-1r7tkf0-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+      class="next-page-btn ghost css-1j7ui09-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
       data-testid="next-page-btn"
       name="Next page"
     >

diff --git a/src/theme/default/config/button.ts b/src/theme/default/config/button.ts
@@ -1,3 +1,4 @@
+import Color from "color";
 import { colors } from "../colors";
 
 export default {
@@ -24,15 +25,15 @@ export default {
     },
     ghost: {
       color: colors.primary.base,
-      background: colors.primary.lightest,
+      background: Color(colors.primary.lightest).alpha(0.25).string(),
     },
     outline: {
       color: colors.primary.base,
       borderColor: colors.primary.base,
     },
     link: {
       color: colors.primary.base,
-      hoverColor: colors.primary.lightest,
+      hoverColor: colors.primary.light,
     },
   },
   secondary: {