Merge pull request smeup#2034 from smeup/feat/f-button/darkmode

feat / black-mode button
apuliasoft · Sep 2, 2024 · 5375960 · 5375960
2 parents 71033bf + 9a834ab
commit 5375960
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 2 deletions.
diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
@@ -122,6 +122,18 @@ <h5>Neutral : Black mode</h5>
                 styling="flat"
                 black-mode
             ></kup-button>
+            <kup-button
+                label="Flat"
+                class="kup-neutral"
+                styling="flat"
+                icon="favorite"
+                black-mode
+            ></kup-button>
+            <kup-button
+                class="kup-large kup-neutral"
+                icon="favorite"
+                black-mode
+            ></kup-button>
         </div>
 
         <h4>Danger:</h4>

diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts b/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts
@@ -11,6 +11,7 @@ import {
  * Used to export every prop in an object.
  */
 export enum KupButtonListProps {
+    blackMode = 'Forced component on a black background. It prescinds the theme',
     contentAlign = 'Manage the align contents of the button. It could be right, left, center, around, evenly, between. Center is the default',
     columns = 'Number of columns.',
     customStyle = 'Custom style of the component.',

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
@@ -64,6 +64,11 @@ export class KupButtonList {
     /*-------------------------------------------------*/
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
+    /**
+     * Sets the type of the button.
+     * @default false
+     */
+    @Prop() blackMode: boolean = false;
     /**
      * Sets the type of the button.
      * @default null
@@ -231,6 +236,7 @@ export class KupButtonList {
         }
 
         const props: FButtonProps = {
+            blackMode: data.blackMode,
             contentAlign: data.contentAlign,
             checked: data.checked,
             disabled: data.disabled,
@@ -310,6 +316,9 @@ export class KupButtonList {
         if (this.customStyle != null && this.customStyle.trim() != '') {
             data.customStyle = this.customStyle;
         }
+        if (this.blackMode == true) {
+            data.blackMode = true;
+        }
         if (this.disabled == true || node.disabled == true) {
             data.disabled = true;
         }

diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md
@@ -7,6 +7,7 @@
 
 | Property        | Attribute        | Description                                                                                                          | Type                                                                                                                                                    | Default                    |
 | --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| `blackMode`     | `black-mode`     | Sets the type of the button.                                                                                         | `boolean`                                                                                                                                               | `false`                    |
 | `columns`       | `columns`        | Number of columns.                                                                                                   | `number`                                                                                                                                                | `0`                        |
 | `contentAlign`  | `content-align`  | Sets the type of the button.                                                                                         | `FButtonAlign.AROUND \| FButtonAlign.BETWEEN \| FButtonAlign.CENTER \| FButtonAlign.EVENLY \| FButtonAlign.LEFT \| FButtonAlign.RIGHT`                  | `FButtonAlign.CENTER`      |
 | `customStyle`   | `custom-style`   | Custom style of the component.                                                                                       | `string`                                                                                                                                                | `''`                       |

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -516,10 +516,26 @@
     }
     &.#{$kup-class-black-mode} {
       .button {
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: #fff;
+        --kup_button_background_color_hover: #393939;
+        --kup_button_background_color_focus: #525252;
+        --kup_button_background_color_active: #525252;
+        .f-image .iconWrapper .f-image__icon {
+          background: #fff !important;
+        }
       }
       .icon-button {
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: #fff;
+        .f-image .iconWrapper .f-image__icon {
+          background: #fff !important;
+        }
+        &:hover {
+          background-color: #393939;
+        }
+        &:focus,
+        &:active {
+          background-color: #525252;
+        }
       }
     }
   }