From fb4edb65c1b6c633ff75d3a53ca197a24726e319 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 8 Apr 2024 09:51:41 +0200
Subject: [PATCH 1/5] f-button : icon button and danger

---
 .../src/f-components/f-button/f-button.scss   | 115 ++++++++----------
 1 file changed, 53 insertions(+), 62 deletions(-)

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
index 16e8197e63..26b2728735 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -49,7 +49,7 @@
   );
   --kup_button_border_radius: var(
     --kup-button-border-radius,
-    var(--kup-radius-01)
+    var(--kup-radius-00)
   );
   --kup_button_font_family: var(
     --kup-button-font-family,
@@ -420,49 +420,49 @@
         }
       }
     }
-  }
-
-  .icon-button {
-    background-color: transparent;
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    border: none;
-    outline: none;
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-    padding: 0.75em;
-    @include kup-body-compact-01;
-    .icon-button__icon .f-image__icon {
-      background: var(--kup-gray-color-70);
-    }
 
-    &:hover,
-    &:focus {
-      background-color: var(--kup-gray-color-60);
+    .icon-button {
+      background-color: transparent;
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      border: none;
+      outline: none;
+      text-decoration: none;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.75em;
+      @include kup-body-compact-01;
       .icon-button__icon .f-image__icon {
-        background: var(--kup-gray-color-0) !important;
+        background: var(--kup-gray-color-70);
       }
-    }
 
-    .icon-button__icon {
-      display: flex;
-      margin: auto;
+      &:hover,
+      &:focus {
+        background-color: var(--kup-gray-color-60);
+        .icon-button__icon .f-image__icon {
+          background: var(--kup-gray-color-0) !important;
+        }
+      }
 
-      &.icon-button__icon--on {
-        display: none;
+      .icon-button__icon {
+        display: flex;
+        margin: auto;
+
+        &.icon-button__icon--on {
+          display: none;
+        }
       }
-    }
 
-    &.button--disabled {
-      opacity: 0.75;
-      pointer-events: none;
-    }
+      &.button--disabled {
+        opacity: 0.75;
+        pointer-events: none;
+      }
 
-    .icon-button__spinner-container {
-      width: var(--kup_button_spinner_width);
-      height: var(--kup_button_spinner_height);
+      .icon-button__spinner-container {
+        width: var(--kup_button_spinner_width);
+        height: var(--kup_button_spinner_height);
+      }
     }
   }
 
@@ -488,16 +488,6 @@
     }
   }
 
-  // &.#{$kup-class-shaped} {
-  //   .button {
-  //     border-radius: 18px;
-
-  //     &.button--floating {
-  //       border-radius: 50% 0;
-  //     }
-  //   }
-  // }
-
   &.#{$kup-class-slim} {
     button {
       font-size: 0.675em;
@@ -516,41 +506,42 @@
     }
   }
 
-  // kup-danger --> TO BE DONE
-
   &.#{$kup-class-danger} {
     .button {
-      // ghost
       --kup_button_background_color: transparent;
-      --kup_button_border_color_focus: var(--kup-gray-color-90);
-      --kup_button_text_color: var(--kup-danger);
+      --kup_button_border_color_focus: var(--kup-danger-color-60);
+      --kup_button_text_color: var(--kup-danger-color-60);
 
       &:hover {
-        --kup_button_background_color_hover: var(--kup-gray-color-80);
+        --kup_button_background_color_hover: var(--kup-danger-color-70);
+        --kup_button_text_color: var(--kup-gray-color-0);
       }
 
       &:focus {
-        --kup_button_border_color_focus: var(--kup-gray-color-80);
+        --kup_button_border_color_focus: var(--kup-danger-color-80);
+        --kup_button_text_color: var(--kup-gray-color-0);
       }
 
       &:active {
-        --kup_button_background_color_active: var(--kup-gray-color-80);
+        --kup_button_background_color_active: var(--kup-danger-color-80);
+        --kup_button_text_color: var(--kup-gray-color-0);
       }
 
       &.button--floating,
       &.button--raised {
         --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_background_color: var(--kup-danger-color-60);
 
         &:hover {
-          --kup_button_background_color_hover: var(--kup-gray-color-80);
+          --kup_button_background_color_hover: var(--kup-danger-color-70);
         }
 
         &:active {
-          --kup_button_background_color_active: var(--kup-gray-color-90);
+          --kup_button_background_color_active: var(--kup-danger-color-80);
         }
 
         &:focus {
-          --kup_button_background_color_focus: var(--kup-gray-color-90);
+          --kup_button_background_color_focus: var(--kup-danger-color-80);
           background-color: var(--kup_button_background_color_focus);
         }
 
@@ -560,20 +551,20 @@
       }
 
       &.button--outlined {
-        --kup_button_border_color: var(--kup-gray-color-70);
-        --kup_button_text_color: var(--kup-gray-color-70);
+        --kup_button_border_color: var(--kup-danger-color-60);
+        --kup_button_text_color: var(--kup-danger-color-60);
         &:hover {
-          --kup_button_background_color_hover: var(--kup-gray-color-80);
+          --kup_button_background_color_hover: var(--kup-danger-color-70);
           --kup_button_text_color_hover: var(--kup-gray-color-0);
         }
 
         &:focus {
-          --kup_button_background_color_focus: var(--kup-gray-color-90);
+          --kup_button_background_color_focus: var(--kup-danger-color-80);
           --kup_button_text_color: var(--kup-gray-color-0);
         }
 
         &:active {
-          --kup_button_background_color_active: var(--kup-gray-color-90);
+          --kup_button_background_color_active: var(--kup-danger-color-80);
         }
 
         &.button--disabled {

From b9699f62d11bd48ea9b7b2deb489ec5b195173bc Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 8 Apr 2024 09:51:56 +0200
Subject: [PATCH 2/5] NC : Fix token

---
 packages/ketchup-showcase/public/showcase.css |   2 +-
 .../kup-box/styles/kup-box-main.scss          |   2 +-
 .../built-in/kup-card-built-in-1.scss         |   2 +-
 .../styles/kup-dropdown-button-classes.scss   |   8 +-
 .../styles/kup-dropdown-button-main.scss      |   8 +-
 .../src/components/kup-image-list/readme.md   | 114 ++++++++++--------
 .../styles/kup-image-list-main.scss           |   2 +-
 .../src/components/kup-input-panel/readme.md  |   7 ++
 .../ketchup/src/components/kup-pdf/readme.md  |   7 ++
 .../kup-planner/utils/gantt-table.module.scss |   4 +-
 .../utils/kup-gantt/kup-gantt.scss            |   2 +-
 .../utils/kup-task-list/kup-task-list.scss    |   2 +-
 .../f-progress-bar/f-progress-bar.scss        |   2 +-
 .../src/managers/kup-theme/themes.json        |  21 +---
 14 files changed, 93 insertions(+), 90 deletions(-)

diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css
index 2173efd8c6..923abe3954 100644
--- a/packages/ketchup-showcase/public/showcase.css
+++ b/packages/ketchup-showcase/public/showcase.css
@@ -39,7 +39,7 @@
 
 code.flat {
   background: var(--kup-gray-color-10);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   border: 1px solid var(--kup-gray-color-30);
   color: var(--kup-gray-color-90);
   display: flex;
diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
index 45f14326c6..1649389239 100644
--- a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
+++ b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
@@ -61,7 +61,7 @@
 
     .box {
       background-color: var(--kup_box_background_color);
-      border-radius: var(--kup-radius-01);
+      border-radius: var(--kup-radius-00);
       flex-grow: 1;
       cursor: pointer;
       position: relative;
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
index 977e82968f..d64ee70d6f 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
@@ -17,7 +17,7 @@
     0px 3px 6px 0 rgba(0, 0, 0, 0.3)
   );
   background-color: var(--kup_card_background_color);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
     0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
index e700015437..6d8161c577 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
@@ -5,15 +5,15 @@
 :host(.#{$kup-class-shaped}) {
   .dropdown-button__primary-action {
     .button {
-      border-top-left-radius: var(--kup-radius-01);
-      border-bottom-left-radius: var(--kup-radius-01);
+      border-top-left-radius: var(--kup-radius-00);
+      border-bottom-left-radius: var(--kup-radius-00);
     }
   }
 
   .dropdown-button__dropdown-action {
     .button {
-      border-top-right-radius: var(--kup-radius-01);
-      border-bottom-right-radius: var(--kup-radius-01);
+      border-top-right-radius: var(--kup-radius-00);
+      border-bottom-right-radius: var(--kup-radius-00);
     }
   }
 }
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
index c5877e1a04..85c816a53f 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
@@ -26,15 +26,15 @@
 
 .f-button.dropdown-button__dropdown-action.dropdown-only {
   .button {
-    border-top-left-radius: var(--kup-radius-01);
-    border-bottom-left-radius: var(--kup-radius-01);
+    border-top-left-radius: var(--kup-radius-00);
+    border-bottom-left-radius: var(--kup-radius-00);
   }
 }
 
 .f-button.dropdown-button__dropdown-action {
   .button {
-    border-top-left-radius: var(--kup-radius-01);
-    border-bottom-left-radius: var(--kup-radius-01);
+    border-top-left-radius: var(--kup-radius-00);
+    border-bottom-left-radius: var(--kup-radius-00);
     box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 
     .button__icon {
diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md
index 209db1e778..a2a137b58b 100644
--- a/packages/ketchup/src/components/kup-image-list/readme.md
+++ b/packages/ketchup/src/components/kup-image-list/readme.md
@@ -2,26 +2,29 @@
 
 <!-- Auto Generated Below -->
 
+
 ## Properties
 
-| Property | Attribute | Description | Type | Default |
-| --- | --- | --- | --- | --- |
-| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `4` |
-| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` |
-| `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` |
-| `rows` | `rows` | Number of rows to display in the grid layout. | `number` | `null` |
-| `selectedNode` | -- | An array of integers containing the path to a selected child.\  | `number[]` | `[]` |
-| `stateId` | `state-id` |  | `string` | `''` |
-| `store` | -- |  | `KupStore` | `undefined` |
+| Property       | Attribute      | Description                                                      | Type                     | Default     |
+| -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- |
+| `columns`      | `columns`      | Number of columns to display in the grid layout.                 | `number`                 | `null`      |
+| `customStyle`  | `custom-style` | Custom style of the component.                                   | `string`                 | `''`        |
+| `data`         | --             | Actual data of the component.                                    | `KupImageListDataNode[]` | `[]`        |
+| `ripple`       | `ripple`       | When enabled displays Material's ripple effect on clicked items. | `boolean`                | `false`     |
+| `rows`         | `rows`         | Number of rows to display in the grid layout.                    | `number`                 | `null`      |
+| `selectedNode` | --             | An array of integers containing the path to a selected child.\   | `number[]`               | `[]`        |
+| `stateId`      | `state-id`     |                                                                  | `string`                 | `''`        |
+| `store`        | --             |                                                                  | `KupStore`               | `undefined` |
+
 
 ## Events
 
-| Event | Description | Type |
-| --- | --- | --- |
-| `kup-imagelist-click` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-contextmenu` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-dblclick` |  | `CustomEvent<KupImageListEventPayload>` |
+| Event                       | Description | Type                                    |
+| --------------------------- | ----------- | --------------------------------------- |
+| `kup-imagelist-click`       |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-contextmenu` |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-dblclick`    |             | `CustomEvent<KupImageListEventPayload>` |
+
 
 ## Methods
 
@@ -31,8 +34,8 @@ Used to retrieve component's props values.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name           | Type      | Description                                                                            |
+| -------------- | --------- | -------------------------------------------------------------------------------------- |
 | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. |
 
 #### Returns
@@ -49,61 +52,66 @@ This method is used to trigger a new render of the component.
 
 Type: `Promise<void>`
 
+
+
 ### `setProps(props: GenericObject) => Promise<void>`
 
 Sets the props to the component.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name    | Type            | Description                                                  |
+| ------- | --------------- | ------------------------------------------------------------ |
 | `props` | `GenericObject` | - Object containing props that will be set to the component. |
 
 #### Returns
 
 Type: `Promise<void>`
 
+
+
+
 ## CSS Custom Properties
 
-| Name | Description |
-| --- | --- |
-| `--kup-imagelist-background-color` | Sets the background color of the component. |
-| `--kup-imagelist-columns` | Sets the number of columns of the grid. |
-| `--kup-imagelist-grid-gap` | Sets the gap of the grid. |
-| `--kup-imagelist-image-margin` | Sets the margin of the images. |
-| `--kup-imagelist-image-min-height` | Sets the minimun height of the images (useful for icons). |
-| `--kup-imagelist-item-border-radius` | Sets the border radius of items. |
-| `--kup-imagelist-item-height` | Sets the height of an item. |
-| `--kup-imagelist-item-padding` | Sets the padding of an item. |
-| `--kup-imagelist-item-width` | Sets the width of an item. |
-| `--kup-imagelist-label-margin` | Sets the margin of the labels. |
-| `--kup-imagelist-primary-color` | Sets the primary color of the component (ripple effect). |
-| `--kup-imagelist-primary-color-rgb` | Sets the RGB values of the primary color. |
-| `--kup-imagelist-text-color` | Sets the text color of the labels. |
+| Name                                 | Description                                               |
+| ------------------------------------ | --------------------------------------------------------- |
+| `--kup-imagelist-background-color`   | Sets the background color of the component.               |
+| `--kup-imagelist-columns`            | Sets the number of columns of the grid.                   |
+| `--kup-imagelist-grid-gap`           | Sets the gap of the grid.                                 |
+| `--kup-imagelist-image-margin`       | Sets the margin of the images.                            |
+| `--kup-imagelist-image-min-height`   | Sets the minimun height of the images (useful for icons). |
+| `--kup-imagelist-item-border-radius` | Sets the border radius of items.                          |
+| `--kup-imagelist-item-height`        | Sets the height of an item.                               |
+| `--kup-imagelist-item-padding`       | Sets the padding of an item.                              |
+| `--kup-imagelist-item-width`         | Sets the width of an item.                                |
+| `--kup-imagelist-label-margin`       | Sets the margin of the labels.                            |
+| `--kup-imagelist-primary-color`      | Sets the primary color of the component (ripple effect).  |
+| `--kup-imagelist-primary-color-rgb`  | Sets the RGB values of the primary color.                 |
+| `--kup-imagelist-text-color`         | Sets the text color of the labels.                        |
+
 
 ## Dependencies
 
 ### Depends on
 
--   [kup-card](../kup-card)
--   [kup-dialog](../kup-dialog)
--   [kup-badge](../kup-badge)
--   [kup-autocomplete](../kup-autocomplete)
--   [kup-chip](../kup-chip)
--   [kup-text-field](../kup-text-field)
--   [kup-color-picker](../kup-color-picker)
--   [kup-combobox](../kup-combobox)
--   [kup-date-picker](../kup-date-picker)
--   [kup-rating](../kup-rating)
--   [kup-time-picker](../kup-time-picker)
--   [kup-image](../kup-image)
--   [kup-button-list](../kup-button-list)
--   [kup-chart](../kup-chart)
--   [kup-gauge](../kup-gauge)
--   [kup-progress-bar](../kup-progress-bar)
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+- [kup-badge](../kup-badge)
+- [kup-autocomplete](../kup-autocomplete)
+- [kup-chip](../kup-chip)
+- [kup-text-field](../kup-text-field)
+- [kup-color-picker](../kup-color-picker)
+- [kup-combobox](../kup-combobox)
+- [kup-date-picker](../kup-date-picker)
+- [kup-rating](../kup-rating)
+- [kup-time-picker](../kup-time-picker)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-chart](../kup-chart)
+- [kup-gauge](../kup-gauge)
+- [kup-progress-bar](../kup-progress-bar)
 
 ### Graph
-
 ```mermaid
 graph TD;
   kup-image-list --> kup-card
@@ -275,6 +283,6 @@ graph TD;
   style kup-image-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
----
+----------------------------------------------
 
-_Built with [StencilJS](https://stenciljs.com/)_
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
index 64f9ea0983..cc5d0edadd 100644
--- a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
+++ b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -27,7 +27,7 @@
   );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    var(--kup-radius-01)
+    var(--kup-radius-00)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
index f0732adc04..b545d935ce 100644
--- a/packages/ketchup/src/components/kup-input-panel/readme.md
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -136,6 +136,7 @@ graph TD;
   kup-autocomplete --> kup-list
   kup-autocomplete --> kup-card
   kup-autocomplete --> kup-dialog
+  kup-autocomplete --> kup-badge
   kup-list --> kup-list
   kup-list --> kup-radio
   kup-list --> kup-card
@@ -154,18 +155,23 @@ graph TD;
   kup-chip --> kup-badge
   kup-text-field --> kup-card
   kup-text-field --> kup-dialog
+  kup-text-field --> kup-badge
   kup-color-picker --> kup-card
   kup-color-picker --> kup-dialog
+  kup-color-picker --> kup-badge
   kup-combobox --> kup-list
   kup-combobox --> kup-card
   kup-combobox --> kup-dialog
+  kup-combobox --> kup-badge
   kup-date-picker --> kup-card
   kup-date-picker --> kup-dialog
+  kup-date-picker --> kup-badge
   kup-rating --> kup-card
   kup-rating --> kup-dialog
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
+  kup-time-picker --> kup-badge
   kup-image --> kup-spinner
   kup-image --> kup-card
   kup-image --> kup-dialog
@@ -191,6 +197,7 @@ graph TD;
   kup-button --> kup-badge
   kup-checkbox --> kup-card
   kup-checkbox --> kup-dialog
+  kup-checkbox --> kup-badge
   kup-data-table --> kup-card
   kup-data-table --> kup-list
   kup-data-table --> kup-switch
diff --git a/packages/ketchup/src/components/kup-pdf/readme.md b/packages/ketchup/src/components/kup-pdf/readme.md
index 2d4a9ef8e7..258ec00db5 100644
--- a/packages/ketchup/src/components/kup-pdf/readme.md
+++ b/packages/ketchup/src/components/kup-pdf/readme.md
@@ -112,6 +112,7 @@ graph TD;
   kup-autocomplete --> kup-list
   kup-autocomplete --> kup-card
   kup-autocomplete --> kup-dialog
+  kup-autocomplete --> kup-badge
   kup-list --> kup-list
   kup-list --> kup-radio
   kup-list --> kup-card
@@ -130,18 +131,23 @@ graph TD;
   kup-chip --> kup-badge
   kup-text-field --> kup-card
   kup-text-field --> kup-dialog
+  kup-text-field --> kup-badge
   kup-color-picker --> kup-card
   kup-color-picker --> kup-dialog
+  kup-color-picker --> kup-badge
   kup-combobox --> kup-list
   kup-combobox --> kup-card
   kup-combobox --> kup-dialog
+  kup-combobox --> kup-badge
   kup-date-picker --> kup-card
   kup-date-picker --> kup-dialog
+  kup-date-picker --> kup-badge
   kup-rating --> kup-card
   kup-rating --> kup-dialog
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
+  kup-time-picker --> kup-badge
   kup-image --> kup-spinner
   kup-image --> kup-card
   kup-image --> kup-dialog
@@ -167,6 +173,7 @@ graph TD;
   kup-button --> kup-badge
   kup-checkbox --> kup-card
   kup-checkbox --> kup-dialog
+  kup-checkbox --> kup-badge
   kup-data-table --> kup-card
   kup-data-table --> kup-list
   kup-data-table --> kup-switch
diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
index 9aad09070a..f34ee5eb20 100644
--- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
@@ -5,7 +5,7 @@
 .project {
   background: var(--kup-gray-color-10);
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   box-sizing: border-box;
   color: var(--kup-text-color, #595959);
   cursor: pointer;
@@ -70,7 +70,7 @@
   cursor: pointer;
   display: grid;
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr);
   place-items: center;
   background-color: var(--kup-gray-color-10);
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
index 70b5131405..dade94b983 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
@@ -9,7 +9,7 @@
 
 .ganttContainer {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   overflow: hidden;
   padding: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
index cec6699b74..bba02947fb 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
@@ -1,6 +1,6 @@
 .tasks {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   padding: var(--kup-space-05);
   margin-right: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
index fad52bde4c..054e8ab14d 100644
--- a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
+++ b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
@@ -1,7 +1,7 @@
 .f-progress-bar {
   --kup_progressbar_border_radius: var(
     --kup-progressbar-border-radius,
-    var(--kup-radius-01)
+    var(--kup-radius-00)
   );
   --kup_progressbar_font_family: var(
     --kup-progressbar-font-family,
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index 74e4806778..8444770a33 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -23,7 +23,6 @@
             "--kup-gray-color-70": "#525252",
             "--kup-gray-color-80": "#393939",
             "--kup-gray-color-90": "#262626",
-            "--kup-gray-color-100": "#161616",
             "--kup-danger-color-50": "#fa4d56",
             "--kup-danger-color-60": "#da1e28",
             "--kup-danger-color-70": "#ba1b23",
@@ -123,7 +122,6 @@
             "--kup-gray-color-70": "#525252",
             "--kup-gray-color-80": "#393939",
             "--kup-gray-color-90": "#262626",
-            "--kup-gray-color-100": "#161616",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -225,7 +223,6 @@
             "--kup-gray-color-70": "#C6C6C6",
             "--kup-gray-color-80": "#E0E0E0",
             "--kup-gray-color-90": "#f4f4f4",
-            "--kup-gray-color-100": "#ffffff",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -327,7 +324,6 @@
             "--kup-gray-color-70": "#E0E0E0",
             "--kup-gray-color-80": "#f4f4f4",
             "--kup-gray-color-90": "#ffffff",
-            "--kup-gray-color-100": "#ffffff",
             "--kup-accent-red-color": "#da1e28",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -428,7 +424,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -523,7 +518,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -617,7 +611,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -711,7 +704,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -805,7 +797,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -905,7 +896,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -999,7 +989,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1099,7 +1088,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1193,7 +1181,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1300,7 +1287,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1394,7 +1380,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1495,7 +1480,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1595,7 +1579,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1693,7 +1676,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1790,7 +1772,6 @@
             "--kup-gray-color-70": "#636363",
             "--kup-gray-color-80": "#474747",
             "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
@@ -1861,4 +1842,4 @@
             "url('https://fonts.googleapis.com/css2?family=Abel&display=swap')"
         ]
     }
-}
\ No newline at end of file
+}

From 193b765f922637c357e72ee8700bdd9579eb877b Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 8 Apr 2024 11:59:43 +0200
Subject: [PATCH 3/5] f-button : fix token and new example

---
 packages/ketchup/src/button.html              | 35 +++++++++++++++++--
 .../src/f-components/f-button/f-button.scss   | 33 ++++++++++-------
 .../src/managers/kup-theme/themes.json        | 20 ++++++++---
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
index a756f59dbd..ddb7a3a763 100644
--- a/packages/ketchup/src/button.html
+++ b/packages/ketchup/src/button.html
@@ -114,6 +114,38 @@ <h4>Neutral:</h4>
             disabled
         ></kup-button>
 
+        <h4>Danger:</h4>
+        <kup-button label="Raised" class="kup-danger"></kup-button>
+        <kup-button
+            label="Raised & Disabled"
+            class="kup-danger"
+            disabled
+        ></kup-button>
+        <kup-button
+            label="Outlined"
+            class="kup-danger"
+            styling="outlined"
+        ></kup-button>
+        <kup-button
+            label="Outlined & Disabled"
+            class="kup-danger"
+            styling="outlined"
+            disabled
+        ></kup-button>
+        <kup-button label="Flat" class="kup-danger" styling="flat"></kup-button>
+        <kup-button
+            label="Flat"
+            class="kup-danger"
+            styling="flat"
+            icon="favorite"
+        ></kup-button>
+        <kup-button
+            label="Flat & Disabled"
+            class="kup-danger"
+            styling="flat"
+            disabled
+        ></kup-button>
+
         <h4>Styling:</h4>
         <kup-button label="Raised"></kup-button>
         <kup-button label="Raised & disabled" disabled></kup-button>
@@ -237,8 +269,7 @@ <h4>All variants:</h4>
             ></kup-spinner>
         </kup-button>
         <hr />
-        <kup-button class="kup-danger" label="danger"></kup-button>
-        <kup-button class="kup-success" label="danger"></kup-button>
+
         <script>
             document.addEventListener('kup-manager-ready', () => {
                 const kupManager = document.documentElement.ketchup;
diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
index 26b2728735..47024d477b 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -116,7 +116,7 @@
       color: var(--kup-primary-color-0);
 
       .f-image__icon {
-        background: var(--kup-primary-color-0) !important;
+        background: var(--kup-gray-color-0) !important;
         color: var(--kup-primary-color-0);
       }
     }
@@ -252,7 +252,7 @@
       }
 
       &:hover .f-image .f-image__icon {
-        --kup_button_background_color_hover: var(--kup-primary-color-0);
+        --kup_button_background_color_hover: var(--kup-gray-color-0);
         background-color: var(--kup_button_background_color_hover) !important;
       }
 
@@ -366,14 +366,20 @@
 
       &:hover {
         --kup_button_background_color_hover: var(--kup-gray-color-80);
+        --kup_button_text_color: var(--kup-gray-color-0);
+        .button__label {
+          color: var(--kup_button_text_color);
+        }
       }
 
       &:focus {
         --kup_button_border_color_focus: var(--kup-gray-color-80);
+        --kup_button_text_color: var(--kup-gray-color-0);
       }
 
       &:active {
         --kup_button_background_color_active: var(--kup-gray-color-70);
+        --kup_button_text_color: var(--kup-gray-color-0);
       }
 
       &.button--floating,
@@ -382,14 +388,17 @@
 
         &:hover {
           --kup_button_background_color_hover: var(--kup-gray-color-80);
+          --kup_button_text_color: var(--kup-gray-color-0);
         }
 
         &:active {
           --kup_button_background_color_active: var(--kup-gray-color-90);
+          --kup_button_text_color: var(--kup-gray-color-0);
         }
 
         &:focus {
           --kup_button_background_color_focus: var(--kup-gray-color-90);
+          --kup_button_text_color: var(--kup-gray-color-0);
         }
 
         &.button--disabled {
@@ -401,17 +410,17 @@
         --kup_button_border_color: var(--kup-gray-color-70);
         --kup_button_text_color: var(--kup-gray-color-70);
         &:hover {
+          --kup_button_text_color: var(--kup-gray-color-0);
           --kup_button_background_color_hover: var(--kup-gray-color-80);
-          --kup_button_text_color_hover: var(--kup-gray-color-0);
         }
 
         &:focus {
-          --kup_button_background_color_focus: var(--kup-gray-color-90);
-          --kup_button_text_color: var(--kup-gray-color-0);
+          background-color: var(--kup-gray-color-90);
+          color: var(--kup-gray-color-0);
         }
 
         &:active {
-          --kup_button_background_color_active: var(--kup-gray-color-90);
+          background-color: var(--kup-gray-color-90);
         }
 
         &.button--disabled {
@@ -514,22 +523,22 @@
 
       &:hover {
         --kup_button_background_color_hover: var(--kup-danger-color-70);
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
       }
 
       &:focus {
         --kup_button_border_color_focus: var(--kup-danger-color-80);
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
       }
 
       &:active {
         --kup_button_background_color_active: var(--kup-danger-color-80);
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
       }
 
       &.button--floating,
       &.button--raised {
-        --kup_button_text_color: var(--kup-gray-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
         --kup_button_background_color: var(--kup-danger-color-60);
 
         &:hover {
@@ -555,12 +564,12 @@
         --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-gray-color-0);
+          --kup_button_text_color_hover: var(--kup-primary-color-0);
         }
 
         &:focus {
           --kup_button_background_color_focus: var(--kup-danger-color-80);
-          --kup_button_text_color: var(--kup-gray-color-0);
+          --kup_button_text_color: var(--kup-primary-color-0);
         }
 
         &:active {
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index 8444770a33..390646350d 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -154,7 +154,10 @@
             "--kup-success-color-60": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
-            "--kup-danger-color": "#a6192e",
+            "--kup-danger-color-50": "#fa4d56",
+            "--kup-danger-color-60": "#da1e28",
+            "--kup-danger-color-70": "#ba1b23",
+            "--kup-danger-color-80": "#750e13",
             "--kup-spinner-color": "#fddc69",
             "--kup-chart-color-1": "#60c3fc",
             "--kup-chart-color-2": "#e268d8",
@@ -255,7 +258,10 @@
             "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
-            "--kup-danger-color": "#a6192e",
+            "--kup-danger-color-50": "#fa4d56",
+            "--kup-danger-color-60": "#da1e28",
+            "--kup-danger-color-70": "#ba1b23",
+            "--kup-danger-color-80": "#750e13",
             "--kup-spinner-color": "#fddc69",
             "--kup-chart-color-1": "#60c3fc",
             "--kup-chart-color-2": "#e268d8",
@@ -356,7 +362,10 @@
             "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
-            "--kup-danger-color": "#da1e28",
+            "--kup-danger-color-50": "#fa4d56",
+            "--kup-danger-color-60": "#da1e28",
+            "--kup-danger-color-70": "#ba1b23",
+            "--kup-danger-color-80": "#750e13",
             "--kup-spinner-color": "#fddc69",
             "--kup-chart-color-1": "#60c3fc",
             "--kup-chart-color-2": "#e268d8",
@@ -454,7 +463,10 @@
             "--kup-info-color": "#2592df",
             "--kup-success-color": "#4d9f02",
             "--kup-warning-color": "#ffc107",
-            "--kup-danger-color": "#d91e18",
+            "--kup-danger-color-50": "#fa4d56",
+            "--kup-danger-color-60": "#da1e28",
+            "--kup-danger-color-70": "#ba1b23",
+            "--kup-danger-color-80": "#750e13",
             "--kup-spinner-color": "#1D1D1B",
             "--kup-chart-color-1": "#ff5959",
             "--kup-chart-color-2": "#e0a0a0",

From ef6f1443456499dd4cba7e0f592bad770bd52507 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 8 Apr 2024 12:28:37 +0200
Subject: [PATCH 4/5] kup-tree : minor fixes

---
 packages/ketchup-showcase/src/App.vue                           | 2 +-
 .../ketchup/src/components/kup-tree/styles/kup-tree-main.scss   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue
index 776ba01ffc..02676db509 100644
--- a/packages/ketchup-showcase/src/App.vue
+++ b/packages/ketchup-showcase/src/App.vue
@@ -903,7 +903,7 @@ export default {
                 value: 'kup-token',
               },
             },
-            icon: 'token',
+            icon: 'dns',
             value: 'KupToken',
             visible: true,
           },
diff --git a/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss b/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss
index 04ad1b87a2..5af7da890d 100644
--- a/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss
+++ b/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss
@@ -60,7 +60,7 @@
     --kup-tree-text-hover-color,
     var(--kup-gray-color-90)
   );
-  --kup_tree_icon_color: var(--kup-tree-icon-color, var(--kup-gray-color-70));
+  --kup_tree_icon_color: var(--kup-tree-icons-color, var(--kup-gray-color-70));
 
   display: block;
   font-family: var(--kup_tree_font_family);

From ffa1e8a3357f41ca6d337a2003aa364847cf6fa8 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 8 Apr 2024 16:03:37 +0200
Subject: [PATCH 5/5] kup-navbar : Design token

---
 packages/ketchup/src/assets/nav-bar.js        |  4 +-
 .../components/kup-nav-bar/kup-nav-bar.scss   | 66 ++++++++++---------
 .../src/managers/kup-theme/themes.json        |  6 +-
 packages/ketchup/src/nav-bar.html             | 10 +--
 4 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/ketchup/src/assets/nav-bar.js b/packages/ketchup/src/assets/nav-bar.js
index 05f5b54321..15f0e65188 100644
--- a/packages/ketchup/src/assets/nav-bar.js
+++ b/packages/ketchup/src/assets/nav-bar.js
@@ -41,8 +41,8 @@ dropdownEl.addEventListener('kup-dropdownbutton-itemclick', (e) => {
 switchEl.addEventListener('kup-switch-change', (e) => {
     console.log(e.type, e);
     if (e.detail.value === 'on') {
-        document.documentElement.ketchup.theme.set('dark');
+        document.documentElement.ketchup.theme.set('octane');
     } else {
-        document.documentElement.ketchup.theme.set('ketchup');
+        document.documentElement.ketchup.theme.set('darkGreyOctane');
     }
 });
diff --git a/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss b/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss
index 39925bb802..8756186912 100644
--- a/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss
+++ b/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss
@@ -10,6 +10,10 @@
 */
 
 :host {
+  --kup_navbar_item_color: var(
+    --kup-navbar-item-color,
+    var(--kup-primary-color-0)
+  );
   --kup_navbar_box_shadow: var(
     --kup-navbar-box-shadow,
     0 2px 4px -1px rgba(128, 128, 128, 0.2),
@@ -48,9 +52,9 @@
 
 .nav-bar {
   background-color: var(--kup-navbar-background-color);
-  box-shadow: var(--kup_navbar_box_shadow);
+  // box-shadow: var(--kup_navbar_box_shadow);
   box-sizing: border-box;
-  color: var(--kup-navbar-color);
+  color: var(--kup_navbar_item_color);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -71,21 +75,21 @@
   }
 
   ::slotted(*) {
-    --kup-button-primary-color: var(--kup-navbar-color);
-    --kup-button-primary-color-rgb: var(--kup-navbar-color-rgb);
-    --kup-button-primary-color-h: var(--kup-navbar-color-h);
-    --kup-button-primary-color-s: var(--kup-navbar-color-s);
-    --kup-button-primary-color-l: var(--kup-navbar-color-l);
-    --kup-switch-label-color: var(--kup-navbar-color);
-    --kup-switch-primary-color: var(--kup-navbar-color);
-    --kup-switch-primary-color-rgb: var(--kup-navbar-color-rgb);
-    --kup-textfield-color: var(--kup-navbar-color);
-    --kup-textfield-color-rgb: var(--kup-navbar-color-rgb);
-    --kup-tree-color: var(--kup-navbar-color);
-    --kup-tree-color-rgb: var(--kup-navbar-color-rgb);
+    --kup-button-primary-color: var(--kup_navbar_item_color);
+    --kup-button-primary-color-rgb: var(--kup_navbar_item_color-rgb);
+    --kup-button-primary-color-h: var(--kup_navbar_item_color-h);
+    --kup-button-primary-color-s: var(--kup_navbar_item_color-s);
+    --kup-button-primary-color-l: var(--kup_navbar_item_color-l);
+    --kup-switch-label-color: var(--kup_navbar_item_color);
+    --kup-switch-primary-color: var(--kup_navbar_item_color);
+    --kup-switch-primary-color-rgb: var(--kup_navbar_item_color);
+    --kup-textfield-color: var(--kup_navbar_item_color);
+    --kup-textfield-color-rgb: var(--kup_navbar_item_color-rgb);
+    --kup-tree-color: var(--kup_navbar_item_color);
+    --kup-tree-color-rgb: var(--kup_navbar_item_color-rgb);
 
-    color: var(--kup-navbar-color);
-    fill: var(--kup-navbar-color);
+    color: var(--kup_navbar_item_color);
+    fill: var(--kup_navbar_item_color);
     margin: 0;
   }
 }
@@ -119,22 +123,20 @@
 }
 
 ::slotted(*) {
-  --kup-button-primary-color: var(--kup-navbar-color);
-  --kup-button-primary-color-rgb: var(--kup-navbar-color-rgb);
-  --kup-button-primary-color-h: var(--kup-navbar-color-h);
-  --kup-button-primary-color-s: var(--kup-navbar-color-s);
-  --kup-button-primary-color-l: var(--kup-navbar-color-l);
-  --kup-switch-label-color: var(--kup-navbar-color);
-  --kup-switch-primary-color: var(--kup-navbar-color);
-  --kup-switch-primary-color-rgb: var(--kup-navbar-color-rgb);
-  --kup-textfield-color: var(--kup-navbar-color);
-  --kup-textfield-color-rgb: var(--kup-navbar-color-rgb);
-  --kup-textfield-primary-color: var(--kup-navbar-color);
-  --kup-textfield-primary-color-rgb: var(--kup-navbar-color-rgb);
-  --kup-tree-color: var(--kup-navbar-color);
-  --kup-tree-color-rgb: var(--kup-navbar-color-rgb);
+  --kup-button-primary-color: var(--kup_navbar_item_color);
+  --kup-button-primary-color-rgb: var(--kup_navbar_item_color-rgb);
+  --kup-button-primary-color-h: var(--kup_navbar_item_color-h);
+  --kup-button-primary-color-s: var(--kup_navbar_item_color-s);
+  --kup-button-primary-color-l: var(--kup_navbar_item_color-l);
+  --kup-switch-label-color: var(--kup_navbar_item_color);
+  --kup-switch-primary-color: var(--kup_navbar_item_color);
+  --kup-switch-primary-color-rgb: var(--kup_navbar_item_color);
+  --kup-textfield-color: var(--kup_navbar_item_color);
+  --kup-textfield-color-rgb: var(--kup_navbar_item_color-rgb);
+  --kup-tree-color: var(--kup_navbar_item_color);
+  --kup-tree-color-rgb: var(--kup_navbar_item_color-rgb);
 
-  color: var(--kup-navbar-color);
-  fill: var(--kup-navbar-color);
+  color: var(--kup_navbar_item_color);
+  fill: var(--kup_navbar_item_color);
   margin: 0;
 }
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index 390646350d..abc79f818e 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -34,7 +34,6 @@
             "--kup-warning-color-40": "#f1c21b",
             "--kup-background-color": "#ffffff",
             "--kup-navbar-background-color": "#161616",
-            "--kup-navbar-color": "#ffffff",
             "--kup-drawer-background-color": "#f4f4f4",
             "--kup-drawer-color": "#535353",
             "--kup-navbar-height": "64px",
@@ -129,7 +128,6 @@
             "--kup-accent-white-color": "#FFFFFF",
             "--kup-background-color": "#F4F4F4",
             "--kup-navbar-background-color": "#161616",
-            "--kup-navbar-color": "#ffffff",
             "--kup-drawer-background-color": "#ffffff",
             "--kup-drawer-color": "#535353",
             "--kup-navbar-height": "64px",
@@ -232,8 +230,7 @@
             "--kup-accent-green-color": "#A4BA4C",
             "--kup-accent-white-color": "#FFFFFF",
             "--kup-background-color": "#161616",
-            "--kup-navbar-background-color": "#068a9c",
-            "--kup-navbar-color": "#ffffff",
+            "--kup-navbar-background-color": "#161616",
             "--kup-drawer-background-color": "#ffffff",
             "--kup-drawer-color": "#535353",
             "--kup-navbar-height": "64px",
@@ -337,7 +334,6 @@
             "--kup-accent-white-color": "#FFFFFF",
             "--kup-background-color": "#262626",
             "--kup-navbar-background-color": "#161616",
-            "--kup-navbar-color": "#ffffff",
             "--kup-drawer-background-color": "#161616",
             "--kup-drawer-color": "#535353",
             "--kup-navbar-height": "64px",
diff --git a/packages/ketchup/src/nav-bar.html b/packages/ketchup/src/nav-bar.html
index 588ff2dea2..70710cb813 100644
--- a/packages/ketchup/src/nav-bar.html
+++ b/packages/ketchup/src/nav-bar.html
@@ -26,10 +26,6 @@
                 font-size: var(--kup-font-size);
             }
 
-            kup-switch {
-                --kup-primary-color: var(--kup-secondary-color);
-            }
-
             kup-dropdown-button {
                 bottom: 10px;
                 position: fixed;
@@ -60,7 +56,11 @@
                     icon="bug"
                 ></kup-button
                 ><kup-button slot="right" icon="magnify"></kup-button
-                ><kup-button slot="left" id="drawer-button" icon="menu"></kup-button
+                ><kup-button
+                    slot="left"
+                    id="drawer-button"
+                    icon="menu"
+                ></kup-button
                 ><span slot="left">Nav bar</span></kup-nav-bar
             >
             <kup-drawer class="kup-permanent"></kup-drawer>