Merge pull request #2113 from smeup/feat/button/change-default-button

smeup · Oct 14, 2024 · ef19224 · ef19224
2 parents efc0067 + 0aaf3b7
commit ef19224
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 7 deletions.
diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx b/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx
@@ -238,7 +238,7 @@ export class KupButtonList {
                 : false,
             shaped: data.shaped,
             sizing: data.sizing,
-            styling: data.id === this.selected ? 'raised' : data.styling,
+            styling: data.styling,
             toggable: data.toggable,
             trailingIcon: data.trailingIcon,
             title: data.title,

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -325,6 +325,47 @@
       }
     }
 
+    &.button--flat {
+      --kup_button_text_color: var(--kup-primary-color-60);
+      color: var(--kup_button_text_color);
+      background-color: transparent;
+
+      &:hover {
+        --kup_button_background_color_hover: var(--kup-gray-color-10-hover);
+        background-color: var(--kup_button_background_color_hover);
+      }
+
+      &:hover .f-image .f-image__icon,
+      &:hover .f-image .f-image__placeholder {
+        background-color: var(--kup_button_text_color) !important;
+      }
+
+      &:focus {
+        border: 1px solid var(--kup_button_border_color);
+        background-color: transparent;
+      }
+
+      &:focus .f-image .f-image__icon,
+      &:focus .f-image .f-image__placeholder {
+        background-color: var(--kup_button_text_color) !important;
+      }
+
+      &:active {
+        border: 1px solid var(--kup_button_border_color);
+        --kup_button_background_color_active: var(--kup-gray-color-20-hover);
+        background-color: var(--kup_button_background_color_active);
+      }
+
+      &:active .f-image .f-image__icon,
+      &:active .f-image .f-image__placeholder {
+        --kup_button_text_color: var(--kup-primary-color-60);
+      }
+
+      &.button--disabled {
+        border-color: var(--kup_button_border_color_disabled);
+      }
+    }
+
     &.button--no-label {
       min-width: unset;
       padding: 0 0.5em;
@@ -478,6 +519,33 @@
           --kup_button_border_color: var(--kup-gray-color-40);
         }
       }
+
+      &.button--flat {
+        --kup_button_text_color: var(--kup-gray-color-70);
+        &:hover {
+          --kup_button_background_color_hover: var(--kup-gray-color-10-hover);
+          background-color: var(--kup_button_background_color_hover);
+        }
+
+        &:active {
+          --kup_button_background_color_active: var(--kup-gray-color-20-hover);
+          background-color: var(--kup_button_background_color_active);
+          .f-image .f-image__icon,
+          .f-image .f-image__placeholder {
+            background-color: var(--kup-gray-color-70) !important;
+          }
+        }
+
+        &:focus {
+          border: 1px solid var(--kup-gray-color-70);
+          background-color: transparent;
+        }
+
+        &.button--disabled {
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
+          --kup_button_border_color: var(--kup-gray-color-40);
+        }
+      }
     }
 
     .icon-button {
@@ -666,6 +734,38 @@
           --kup_button_border_color: var(--kup-gray-color-40);
         }
       }
+
+      &.button--flat {
+        --kup_button_text_color: var(--kup-danger-color-60);
+        &:hover {
+          --kup_button_background_color_hover: var(--kup-danger-color-70);
+          --kup_button_text_color_hover: var(--kup-primary-color-0);
+          color: var(--kup_button_text_color_hover);
+          .f-image__icon,
+          .f-image__placeholder {
+            background: var(--kup_button_text_color_hover) !important;
+          }
+        }
+
+        &:active {
+          border: 1px solid var(--kup-danger-color-60);
+          --kup_button_background_color_active: var(--kup-danger-color-80);
+          .f-image__icon,
+          .f-image__placeholder {
+            background: var(--kup_button_text_color_hover) !important;
+          }
+        }
+
+        &:focus {
+          --kup_button_background_color_focus: var(--kup-danger-color-80);
+          --kup_button_text_color: var(--kup-primary-color-0);
+        }
+
+        &.button--disabled {
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
+          --kup_button_border_color: var(--kup-gray-color-40);
+        }
+      }
     }
   }
 

diff --git a/packages/ketchup/src/f-components/f-button/f-button.tsx b/packages/ketchup/src/f-components/f-button/f-button.tsx
@@ -87,6 +87,7 @@ function renderButton(props: FButtonProps): VNode {
         button: true,
         'button--disabled': props.disabled ? true : false,
         'button--floating': isFloating ? true : false,
+        'button--flat': isFlat ? true : false,
         'button--outlined': isOutlined ? true : false,
         'button--raised': isRaised ? true : false,
         'button--no-label': !props.label || props.label === ' ' ? true : false,

diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -3,8 +3,8 @@
         "cssVariables": {
             "--kup-primary-color": "#068a9c",
             "--kup-primary-color-0": "#ffffff",
-            "--kup-primary-color-10": "#A5E6F0",
-            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-10": "#def8fb",
+            "--kup-primary-color-20": "#caebf1",
             "--kup-primary-color-30": "#5CB0C0",
             "--kup-primary-color-40": "#3E9EAF",
             "--kup-primary-color-50": "#068A9C",
@@ -118,8 +118,8 @@
         "cssVariables": {
             "--kup-primary-color": "#068a9c",
             "--kup-primary-color-0": "#ffffff",
-            "--kup-primary-color-10": "#A5E6F0",
-            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-10": "#def8fb",
+            "--kup-primary-color-20": "#caebf1",
             "--kup-primary-color-30": "#5CB0C0",
             "--kup-primary-color-40": "#3E9EAF",
             "--kup-primary-color-50": "#068A9C",
@@ -362,8 +362,8 @@
         "cssVariables": {
             "--kup-primary-color": "#068a9c",
             "--kup-primary-color-0": "#ffffff",
-            "--kup-primary-color-10": "#A5E6F0",
-            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-10": "#def8fb",
+            "--kup-primary-color-20": "#caebf1",
             "--kup-primary-color-30": "#5CB0C0",
             "--kup-primary-color-40": "#3E9EAF",
             "--kup-primary-color-50": "#068A9C",