From 5c13d1e2d1014cf2cb2ddfb57ebd6f841aecdde2 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Fri, 1 Mar 2024 17:37:37 +0100
Subject: [PATCH 1/3] kup-tree, kup-box

---
 .../kup-box/styles/kup-box-classes.scss       | 10 +++++-----
 .../kup-card/box/kup-card-box-2.scss          | 20 ++++++++++---------
 .../styles/kup-data-table-main.scss           |  6 +++++-
 .../kup-tree/styles/kup-tree-main.scss        |  8 ++++----
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss
index 1fdee3dd5a..d0101d868e 100644
--- a/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss
+++ b/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss
@@ -65,11 +65,11 @@
   }
 }
 
-:host(:not(.#{$kup-class-borderless})) {
-  .box {
-    border: 1px solid var(--kup-border-color);
-  }
-}
+// :host(:not(.#{$kup-class-borderless})) {
+//   .box {
+//     border: 1px solid var(--kup-border-color);
+//   }
+// }
 
 :host(.#{$kup-class-flat-on-hover}) {
   #box-container .box-wrapper .box:hover {
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
index c2e5e5640b..1abf7b9b0f 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
@@ -1,23 +1,25 @@
 .box-layout-2 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
-  font-size: var(--kup-font-size);
-  padding: 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-01;
 
   table {
     width: 100%;
+    display: grid;
+    gap: var(--kup-space-05);
+    tr {
+      display: flex;
+      justify-content: space-between;
+    }
   }
 
   .label {
     max-width: 50%;
-    overflow: hidden;
-    padding: 0.5em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .value {
-    padding: 0.5em;
     font-weight: bold;
+    @include kup-heading-compact-01;
   }
 }
diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss
index 0a506cd0bd..c04eddcaf8 100644
--- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss
+++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss
@@ -38,6 +38,10 @@
     --kup-datatable-background-color,
     var(--kup-gray-color-10)
   );
+  --kup_datatable_background_color_active: var(
+    --kup-datatable-background-color-active,
+    var(--kup-gray-color-20)
+  );
   --kup_datatable_border: var(
     --kup-datatable-border-color,
     1px solid var(--kup-gray-color-20)
@@ -360,7 +364,7 @@ tbody {
 
     &.selected {
       td {
-        background-color: rgba(var(--kup-primary-color-rgb), 0.175);
+        background-color: var(--kup_datatable_background_color_active);
       }
     }
 
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 813aab6847..861bced630 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
@@ -169,7 +169,7 @@
       & .kup-tree__icon ~ .cell-content,
       & .kup-tree__icon + .cell-content {
         display: inline-block;
-        vertical-align: 0.3em;
+        vertical-align: 0.2em;
         @include kup-body-compact-01;
       }
     }
@@ -192,9 +192,9 @@
     &__icon {
       display: inline-block;
       margin-right: 0.4em;
-      height: 1.5em;
-      min-width: 1.5em;
-      width: 1.5em;
+      height: 16px;
+      min-width: 16px;
+      width: 16px;
     }
 
     &__node__expander {

From 533c62363ebac951e6f9dd9ba6da45e4455cb256 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 4 Mar 2024 12:12:13 +0100
Subject: [PATCH 2/3] kup-planner : functional redesign and token

---
 .../src/components/kup-badge/readme.md        |   2 +
 .../kup-planner/kup-planner-declarations.ts   |   8 +-
 .../components/kup-planner/kup-planner.scss   |   3 +-
 .../src/components/kup-planner/readme.md      |  31 ++--
 .../utils/custom-task-list-header.tsx         |   2 +-
 .../kup-planner/utils/gantt-table.module.scss |  40 +++--
 .../kup-gantt-calendar.scss                   |  13 +-
 .../utils/kup-gantt/kup-gantt.scss            |  14 +-
 .../kup-grid-renderer/kup-grid-renderer.scss  |   8 +-
 .../utils/kup-planner-renderer.tsx            |   1 -
 .../utils/kup-switcher/kup-switcher.scss      |  27 ++-
 .../kup-planner/utils/kup-switcher/readme.md  | 155 ++++++++++++++++++
 .../utils/kup-task-list/kup-task-list.scss    |   8 +-
 .../components/kup-planner/utils/readme.md    | 151 +++++++++++++++++
 14 files changed, 381 insertions(+), 82 deletions(-)

diff --git a/packages/ketchup/src/components/kup-badge/readme.md b/packages/ketchup/src/components/kup-badge/readme.md
index 077a5ffce8..fe841b80bd 100644
--- a/packages/ketchup/src/components/kup-badge/readme.md
+++ b/packages/ketchup/src/components/kup-badge/readme.md
@@ -111,6 +111,7 @@ Type: `Promise<void>`
  - [kup-numeric-picker](../kup-numeric-picker)
  - [kup-planner](../kup-planner)
  - [kup-snackbar](../kup-snackbar)
+ - [kup-switcher](../kup-planner/utils/kup-switcher)
  - [kup-tab-bar](../kup-tab-bar)
  - [kup-text-field](../kup-text-field)
  - [kup-time-picker](../kup-time-picker)
@@ -170,6 +171,7 @@ graph TD;
   kup-numeric-picker --> kup-badge
   kup-planner --> kup-badge
   kup-snackbar --> kup-badge
+  kup-switcher --> kup-badge
   style kup-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-planner/kup-planner-declarations.ts b/packages/ketchup/src/components/kup-planner/kup-planner-declarations.ts
index f58eb26a28..4f4b43b5b6 100644
--- a/packages/ketchup/src/components/kup-planner/kup-planner-declarations.ts
+++ b/packages/ketchup/src/components/kup-planner/kup-planner-declarations.ts
@@ -133,10 +133,10 @@ export const defaultStylingOptions = {
     listCellWidth: '300px',
     rowHeight: 40,
     barFill: 90,
-    projectProgressColor: '#CBCBCB',
-    projectProgressSelectedColor: '#CBCBCB',
-    projectBackgroundColor: '#CBCBCB',
-    projectBackgroundSelectedColor: '#CBCBCB',
+    projectProgressColor: '#C6C6C6',
+    projectProgressSelectedColor: '#C6C6C6',
+    projectBackgroundColor: '#C6C6C6',
+    projectBackgroundSelectedColor: '#C6C6C6',
     barProgressColor: '#A2A415',
     barProgressSelectedColor: '#A2A415',
     barBackgroundColor: '#A2A415',
diff --git a/packages/ketchup/src/components/kup-planner/kup-planner.scss b/packages/ketchup/src/components/kup-planner/kup-planner.scss
index cb5da0876d..ddd4ca7f99 100644
--- a/packages/ketchup/src/components/kup-planner/kup-planner.scss
+++ b/packages/ketchup/src/components/kup-planner/kup-planner.scss
@@ -3,8 +3,7 @@
 }
 
 .filter {
-  margin: 12px 10px 12px 0;
-  padding: 0 10px;
+  margin-bottom: var(--kup-space-04);
 }
 
 .planner-render {
diff --git a/packages/ketchup/src/components/kup-planner/readme.md b/packages/ketchup/src/components/kup-planner/readme.md
index e921a56be3..3df208b5b8 100644
--- a/packages/ketchup/src/components/kup-planner/readme.md
+++ b/packages/ketchup/src/components/kup-planner/readme.md
@@ -143,18 +143,10 @@ graph TD;
   kup-planner --> kup-badge
   kup-planner-renderer --> kup-switcher
   kup-planner-renderer --> kup-gantt
-  kup-gantt --> kup-standard-tooltip
-  kup-gantt --> kup-task-list-header
-  kup-gantt --> kup-task-list-table
-  kup-gantt --> kup-task-list
-  kup-gantt --> kup-task-gantt
-  kup-gantt --> kup-tooltip
-  kup-gantt --> kup-vertical-scroll
-  kup-gantt --> kup-horizontal-scroll
-  kup-task-list --> kup-custom-task-list-header
-  kup-task-list --> kup-custom-task-list-table
-  kup-task-gantt --> kup-gantt-calendar
-  kup-task-gantt --> kup-grid-renderer
+  kup-switcher --> kup-badge
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
   kup-card --> kup-autocomplete
   kup-card --> kup-chip
   kup-card --> kup-text-field
@@ -194,9 +186,6 @@ graph TD;
   kup-dialog --> kup-badge
   kup-dialog --> kup-card
   kup-dialog --> kup-dialog
-  kup-badge --> kup-badge
-  kup-badge --> kup-card
-  kup-badge --> kup-dialog
   kup-chip --> kup-card
   kup-chip --> kup-dialog
   kup-chip --> kup-badge
@@ -305,6 +294,18 @@ graph TD;
   kup-tree --> kup-gauge
   kup-tree --> kup-progress-bar
   kup-tree --> kup-badge
+  kup-gantt --> kup-standard-tooltip
+  kup-gantt --> kup-task-list-header
+  kup-gantt --> kup-task-list-table
+  kup-gantt --> kup-task-list
+  kup-gantt --> kup-task-gantt
+  kup-gantt --> kup-tooltip
+  kup-gantt --> kup-vertical-scroll
+  kup-gantt --> kup-horizontal-scroll
+  kup-task-list --> kup-custom-task-list-header
+  kup-task-list --> kup-custom-task-list-table
+  kup-task-gantt --> kup-gantt-calendar
+  kup-task-gantt --> kup-grid-renderer
   style kup-planner fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-planner/utils/custom-task-list-header.tsx b/packages/ketchup/src/components/kup-planner/utils/custom-task-list-header.tsx
index faa2ed621a..35224e3d57 100644
--- a/packages/ketchup/src/components/kup-planner/utils/custom-task-list-header.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/custom-task-list-header.tsx
@@ -28,7 +28,7 @@ export class KupCustomTaskListHeader {
             <div
                 class="custom-task-list-wrapper"
                 style={{
-                    height: '50px',
+                    height: '25px',
                     fontFamily: this.fontFamily,
                     fontSize: this.fontSize,
                 }}
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 c0949e9fd7..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
@@ -1,12 +1,11 @@
 .container {
-  padding: 0 10px;
-  margin-right: 10px;
+  margin-top: var(--kup-space-04);
 }
 
 .project {
-  background: var(--kup-background-color, #ffffff);
-  border: 1px solid var(--kup-border-color, #acacac);
-  border-radius: 4px;
+  background: var(--kup-gray-color-10);
+  border-bottom: 1px solid var(--kup-gray-color-20);
+  border-radius: var(--kup-radius-00);
   box-sizing: border-box;
   color: var(--kup-text-color, #595959);
   cursor: pointer;
@@ -14,6 +13,7 @@
   font-weight: 400;
   grid-template-columns: var(--grid-project-columns, 1fr 1fr 1fr);
   place-items: center;
+  padding: var(--kup-space-03);
 
   & > * {
     font-size: 14px;
@@ -22,28 +22,26 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
+    @include kup-body-compact-01;
   }
 
   & .main {
     font-weight: 700;
     width: 100%;
     padding-left: 4px;
+    @include kup-heading-compact-01;
   }
 }
 
 .subrow {
   cursor: pointer;
   display: grid;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #acacac;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-bottom: 1px solid var(--kup-gray-color-20);
   box-sizing: border-box;
   grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr);
   place-items: center;
-  background: #ffffff;
-  color: #595959;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-90);
   font-weight: 400;
 
   & > * {
@@ -53,9 +51,14 @@
     overflow: hidden;
     white-space: nowrap;
     width: 100%;
+    @include kup-label-01;
   }
 }
 
+.subrow:last-of-type {
+  border-bottom: 1px solid var(--kup-gray-color-30);
+}
+
 .subrow:has(+ .subrow),
 .project:has(+ .subrow) {
   border-bottom-left-radius: 0;
@@ -63,16 +66,15 @@
 }
 
 .timeline {
+  padding: var(--kup-space-03);
   cursor: pointer;
   display: grid;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #cbcbcb;
-  border-radius: 4px;
+  border-bottom: 1px solid var(--kup-gray-color-20);
+  border-radius: var(--kup-radius-00);
   grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr);
   place-items: center;
-  background: #fff;
-  color: #595959;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-90);
   font-weight: 400;
   box-sizing: border-box;
 
@@ -83,11 +85,13 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
+    @include kup-body-compact-01;
   }
 
   & .main {
     font-weight: 700;
     width: 100%;
     padding-left: 4px;
+    @include kup-heading-compact-01;
   }
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss
index 1be99d3f65..14797a8307 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss
@@ -1,31 +1,34 @@
 .calendarBottomText {
   text-anchor: middle;
-  fill: #333;
+  fill: var(--kup-gray-color-70);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
+  @include kup-body-compact-01;
 }
 
 .calendarTopTick {
-  stroke: #e6e4e4;
+  stroke: var(--kup-gray-color-20);
 }
 
 .calendarTopText {
   text-anchor: middle;
-  fill: #555;
+  fill: var(--kup-gray-color-70);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
+  @include kup-body-compact-01;
 }
 
 .calendarHeader {
-  fill: #ffffff;
-  stroke: #e0e0e0;
+  fill: var(--kup-gray-color-10);
+  stroke: var(--kup-gray-color-20);
   stroke-width: 1.4;
+  @include kup-heading-compact-01;
 }
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 d687393fb1..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
@@ -8,11 +8,10 @@
 }
 
 .ganttContainer {
-  background: #efefef;
-  border-radius: 8px;
-  margin: 12px;
+  background: var(--kup-gray-color-20);
+  border-radius: var(--kup-radius-00);
   overflow: hidden;
-  padding: 12px;
+  padding: var(--kup-space-05);
 }
 
 .ganttVerticalContainer {
@@ -31,10 +30,3 @@
 .task-gantt {
   overflow: hidden;
 }
-
-.tasks {
-  border-radius: 8px;
-  background: #efefef;
-  margin: 12px;
-  padding: 12px;
-}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss
index a8d12cc01f..95f569c54b 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss
@@ -1,5 +1,5 @@
 .gridRow {
-  fill: #fff;
+  fill: var(--kup-gray-color-10);
 }
 
 .gridRowLine {
@@ -7,7 +7,7 @@
 }
 
 .gridTick {
-  stroke: #e6e4e4;
+  stroke: var(--kup-gray-color-20);
 }
 
 .barHandle {
@@ -37,7 +37,7 @@
 }
 
 .barLabel {
-  fill: #fff;
+  fill: var(--kup-gray-colo-0);
   text-anchor: middle;
   font-weight: lighter;
   -webkit-touch-callout: none;
@@ -49,7 +49,7 @@
 }
 
 .barLabelOutside {
-  fill: #555;
+  fill: var(--kup-gray-color-70);
   text-anchor: start;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
index 87b34c724c..91ded12df6 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
@@ -24,7 +24,6 @@ import {
 import { KupDates } from '../../../managers/kup-dates/kup-dates';
 import { ganttDateTimeFormatters } from './kup-planner-time-formatter';
 import { CustomTooltipHOC } from './custom-tool-tip';
-
 @Component({
     tag: 'kup-planner-renderer',
     styleUrl: '',
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
index 76af7e5b34..ef1437161b 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
@@ -2,31 +2,24 @@
   display: grid;
   grid-auto-flow: column;
   grid-gap: 8px;
-  margin-left: 12px;
   width: max-content;
+  margin-bottom: var(--kup-space-05);
 }
 
 .button {
-  background: transparent;
-  border-color: var(--kup-primary-color, #003b77);
-  border-radius: 4px;
-  border-width: 1px;
-  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2),
-    0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14),
-    0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);
+  background-color: var(--kup-gray-color-70);
+  border: none;
+  text-align: left;
   box-sizing: border-box;
-  color: var(--kup-primary-color, #003b77);
+  color: var(--kup-gray-color-0);
   cursor: pointer;
-  font-size: 11px;
-  height: 32px;
-  min-width: 64px;
+  padding: var(--kup-space-03) var(--kup-space-05);
+  &:hover {
+    background-color: var(--kup-gray-color-90);
+  }
 }
 
 .label {
-  font-family: var(--kup-font-family, inherit);
-  font-size: 11px;
-  letter-spacing: 0.0892857143em;
   text-decoration: none;
-  text-transform: uppercase;
-  padding: 0 6px;
+  @include kup-body-compact-01;
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/readme.md
index f8b805e9fc..596d1de6b9 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/readme.md
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/readme.md
@@ -18,9 +18,164 @@
 
  - [kup-planner-renderer](..)
 
+### Depends on
+
+- [kup-badge](../../../kup-badge)
+
 ### Graph
 ```mermaid
 graph TD;
+  kup-switcher --> kup-badge
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
+  kup-card --> kup-autocomplete
+  kup-card --> kup-chip
+  kup-card --> kup-text-field
+  kup-card --> kup-color-picker
+  kup-card --> kup-combobox
+  kup-card --> kup-date-picker
+  kup-card --> kup-rating
+  kup-card --> kup-time-picker
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-chart
+  kup-card --> kup-gauge
+  kup-card --> kup-progress-bar
+  kup-card --> kup-badge
+  kup-card --> kup-button
+  kup-card --> kup-list
+  kup-card --> kup-spinner
+  kup-card --> kup-checkbox
+  kup-card --> kup-data-table
+  kup-card --> kup-tab-bar
+  kup-card --> kup-tree
+  kup-card --> kup-switch
+  kup-card --> kup-dropdown-button
+  kup-card --> kup-card
+  kup-card --> kup-dialog
+  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
+  kup-list --> kup-dialog
+  kup-list --> kup-badge
+  kup-radio --> kup-card
+  kup-radio --> kup-dialog
+  kup-dialog --> kup-badge
+  kup-dialog --> kup-card
+  kup-dialog --> kup-dialog
+  kup-chip --> kup-card
+  kup-chip --> kup-dialog
+  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
+  kup-image --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
+  kup-button-list --> kup-dropdown-button
+  kup-button-list --> kup-card
+  kup-button-list --> kup-dialog
+  kup-button-list --> kup-badge
+  kup-dropdown-button --> kup-list
+  kup-dropdown-button --> kup-card
+  kup-dropdown-button --> kup-dialog
+  kup-dropdown-button --> kup-badge
+  kup-chart --> kup-card
+  kup-chart --> kup-dialog
+  kup-gauge --> kup-card
+  kup-gauge --> kup-dialog
+  kup-progress-bar --> kup-card
+  kup-progress-bar --> kup-dialog
+  kup-button --> kup-card
+  kup-button --> kup-dialog
+  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
+  kup-data-table --> kup-button
+  kup-data-table --> kup-spinner
+  kup-data-table --> kup-form
+  kup-data-table --> kup-image
+  kup-data-table --> kup-dialog
+  kup-data-table --> kup-checkbox
+  kup-data-table --> kup-combobox
+  kup-data-table --> kup-badge
+  kup-data-table --> kup-autocomplete
+  kup-data-table --> kup-chip
+  kup-data-table --> kup-text-field
+  kup-data-table --> kup-color-picker
+  kup-data-table --> kup-date-picker
+  kup-data-table --> kup-rating
+  kup-data-table --> kup-time-picker
+  kup-data-table --> kup-button-list
+  kup-data-table --> kup-chart
+  kup-data-table --> kup-gauge
+  kup-data-table --> kup-progress-bar
+  kup-switch --> kup-card
+  kup-switch --> kup-dialog
+  kup-form --> kup-card
+  kup-form --> kup-dialog
+  kup-form --> kup-autocomplete
+  kup-form --> kup-chip
+  kup-form --> kup-text-field
+  kup-form --> kup-color-picker
+  kup-form --> kup-combobox
+  kup-form --> kup-date-picker
+  kup-form --> kup-rating
+  kup-form --> kup-time-picker
+  kup-form --> kup-image
+  kup-form --> kup-button-list
+  kup-form --> kup-chart
+  kup-form --> kup-gauge
+  kup-form --> kup-progress-bar
+  kup-form --> kup-badge
+  kup-tab-bar --> kup-card
+  kup-tab-bar --> kup-dialog
+  kup-tab-bar --> kup-badge
+  kup-tree --> kup-card
+  kup-tree --> kup-list
+  kup-tree --> kup-text-field
+  kup-tree --> kup-dialog
+  kup-tree --> kup-autocomplete
+  kup-tree --> kup-chip
+  kup-tree --> kup-color-picker
+  kup-tree --> kup-combobox
+  kup-tree --> kup-date-picker
+  kup-tree --> kup-rating
+  kup-tree --> kup-time-picker
+  kup-tree --> kup-image
+  kup-tree --> kup-button-list
+  kup-tree --> kup-chart
+  kup-tree --> kup-gauge
+  kup-tree --> kup-progress-bar
+  kup-tree --> kup-badge
   kup-planner-renderer --> kup-switcher
   style kup-switcher fill:#f9f,stroke:#333,stroke-width:4px
 ```
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 8ca1bcde97..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,8 +1,8 @@
 .tasks {
-  border-radius: 8px;
-  background: #efefef;
-  margin: 12px;
-  padding: 12px;
+  background: var(--kup-gray-color-20);
+  border-radius: var(--kup-radius-00);
+  padding: var(--kup-space-05);
+  margin-right: var(--kup-space-05);
 }
 
 .taskListWrapper {
diff --git a/packages/ketchup/src/components/kup-planner/utils/readme.md b/packages/ketchup/src/components/kup-planner/utils/readme.md
index 2e99b46ef1..376fa3d151 100644
--- a/packages/ketchup/src/components/kup-planner/utils/readme.md
+++ b/packages/ketchup/src/components/kup-planner/utils/readme.md
@@ -28,6 +28,157 @@
 graph TD;
   kup-planner-renderer --> kup-switcher
   kup-planner-renderer --> kup-gantt
+  kup-switcher --> kup-badge
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
+  kup-card --> kup-autocomplete
+  kup-card --> kup-chip
+  kup-card --> kup-text-field
+  kup-card --> kup-color-picker
+  kup-card --> kup-combobox
+  kup-card --> kup-date-picker
+  kup-card --> kup-rating
+  kup-card --> kup-time-picker
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-chart
+  kup-card --> kup-gauge
+  kup-card --> kup-progress-bar
+  kup-card --> kup-badge
+  kup-card --> kup-button
+  kup-card --> kup-list
+  kup-card --> kup-spinner
+  kup-card --> kup-checkbox
+  kup-card --> kup-data-table
+  kup-card --> kup-tab-bar
+  kup-card --> kup-tree
+  kup-card --> kup-switch
+  kup-card --> kup-dropdown-button
+  kup-card --> kup-card
+  kup-card --> kup-dialog
+  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
+  kup-list --> kup-dialog
+  kup-list --> kup-badge
+  kup-radio --> kup-card
+  kup-radio --> kup-dialog
+  kup-dialog --> kup-badge
+  kup-dialog --> kup-card
+  kup-dialog --> kup-dialog
+  kup-chip --> kup-card
+  kup-chip --> kup-dialog
+  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
+  kup-image --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
+  kup-button-list --> kup-dropdown-button
+  kup-button-list --> kup-card
+  kup-button-list --> kup-dialog
+  kup-button-list --> kup-badge
+  kup-dropdown-button --> kup-list
+  kup-dropdown-button --> kup-card
+  kup-dropdown-button --> kup-dialog
+  kup-dropdown-button --> kup-badge
+  kup-chart --> kup-card
+  kup-chart --> kup-dialog
+  kup-gauge --> kup-card
+  kup-gauge --> kup-dialog
+  kup-progress-bar --> kup-card
+  kup-progress-bar --> kup-dialog
+  kup-button --> kup-card
+  kup-button --> kup-dialog
+  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
+  kup-data-table --> kup-button
+  kup-data-table --> kup-spinner
+  kup-data-table --> kup-form
+  kup-data-table --> kup-image
+  kup-data-table --> kup-dialog
+  kup-data-table --> kup-checkbox
+  kup-data-table --> kup-combobox
+  kup-data-table --> kup-badge
+  kup-data-table --> kup-autocomplete
+  kup-data-table --> kup-chip
+  kup-data-table --> kup-text-field
+  kup-data-table --> kup-color-picker
+  kup-data-table --> kup-date-picker
+  kup-data-table --> kup-rating
+  kup-data-table --> kup-time-picker
+  kup-data-table --> kup-button-list
+  kup-data-table --> kup-chart
+  kup-data-table --> kup-gauge
+  kup-data-table --> kup-progress-bar
+  kup-switch --> kup-card
+  kup-switch --> kup-dialog
+  kup-form --> kup-card
+  kup-form --> kup-dialog
+  kup-form --> kup-autocomplete
+  kup-form --> kup-chip
+  kup-form --> kup-text-field
+  kup-form --> kup-color-picker
+  kup-form --> kup-combobox
+  kup-form --> kup-date-picker
+  kup-form --> kup-rating
+  kup-form --> kup-time-picker
+  kup-form --> kup-image
+  kup-form --> kup-button-list
+  kup-form --> kup-chart
+  kup-form --> kup-gauge
+  kup-form --> kup-progress-bar
+  kup-form --> kup-badge
+  kup-tab-bar --> kup-card
+  kup-tab-bar --> kup-dialog
+  kup-tab-bar --> kup-badge
+  kup-tree --> kup-card
+  kup-tree --> kup-list
+  kup-tree --> kup-text-field
+  kup-tree --> kup-dialog
+  kup-tree --> kup-autocomplete
+  kup-tree --> kup-chip
+  kup-tree --> kup-color-picker
+  kup-tree --> kup-combobox
+  kup-tree --> kup-date-picker
+  kup-tree --> kup-rating
+  kup-tree --> kup-time-picker
+  kup-tree --> kup-image
+  kup-tree --> kup-button-list
+  kup-tree --> kup-chart
+  kup-tree --> kup-gauge
+  kup-tree --> kup-progress-bar
+  kup-tree --> kup-badge
   kup-gantt --> kup-standard-tooltip
   kup-gantt --> kup-task-list-header
   kup-gantt --> kup-task-list-table

From 877c640a05e6296587db20308a5b7f12958b0f44 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Tue, 5 Mar 2024 16:59:02 +0100
Subject: [PATCH 3/3] Kup-card-box fixes

---
 .../kup-box/styles/kup-box-main.scss          |  2 +-
 .../kup-card/box/kup-card-box-1.scss          |  8 ++--
 .../kup-card/box/kup-card-box-2.scss          |  2 +-
 .../kup-card/box/kup-card-box-3.scss          |  8 ++--
 .../kup-card/box/kup-card-box-4.scss          |  8 ++--
 .../kup-card/box/kup-card-box-5.scss          |  8 ++--
 .../kup-card/box/kup-card-box-6.scss          |  8 ++--
 .../kup-card/box/kup-card-box-7.scss          |  8 ++--
 .../kup-card/box/kup-card-box-8.scss          | 13 +++----
 .../kup-list/styles/kup-list-main.scss        | 31 ++++++++++------
 .../kup-tree/styles/kup-tree-main.scss        | 37 +++++--------------
 11 files changed, 60 insertions(+), 73 deletions(-)

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 70f6d8fc40..25de0b44ca 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
@@ -17,7 +17,7 @@
   --kup_box_color: var(--kup-box-color, var(--kup-text-color));
   --kup_box_font_family: var(--kup-box-font-family, var(--kup-font-family));
   --kup_box_font_size: var(--kup-box-font-size, var(--kup-font-size));
-  --kup_box_grid_gap: var(--kup-box-grid-gap, 1em);
+  --kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-05));
   --kup_box_hover_box_shadow: var(
     --kup-box-hover-box-shadow,
     0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss
index 746c7cf89d..3de0ea1340 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss
@@ -1,8 +1,8 @@
 .box-layout-1 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
-  font-size: var(--kup-font-size);
-  padding: 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   table {
     width: 100%;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
index 1abf7b9b0f..13e592aa69 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss
@@ -2,7 +2,7 @@
   background-color: var(--kup-gray-color-10);
   color: var(--kup-gray-color-70);
   padding: var(--kup-space-05);
-  @include kup-body-01;
+  @include kup-body-compact-01;
 
   table {
     width: 100%;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss
index 5d762d9548..2ad2eb7ec2 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss
@@ -1,8 +1,8 @@
 .box-layout-3 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
-  font-size: var(--kup-font-size);
-  padding: 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     display: flex;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss
index 52dc86c8da..727c7db9fb 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss
@@ -1,10 +1,10 @@
 .box-layout-4 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
   display: flex;
-  font-size: var(--kup-font-size);
   height: 100%;
-  padding: 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     margin: auto;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss
index b9730cedb8..c3ebaa8dae 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss
@@ -1,10 +1,10 @@
 .box-layout-5 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
   display: flex;
-  font-size: var(--kup-font-size);
   height: 100%;
-  padding: 1em 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     display: flex;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss
index ec92f2a74a..9377b50370 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss
@@ -1,10 +1,10 @@
 .box-layout-6 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
   display: flex;
-  font-size: var(--kup-font-size);
   height: 100%;
-  padding: 1em 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     display: flex;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss
index e3a82dbe37..9bbed913de 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss
@@ -1,10 +1,10 @@
 .box-layout-7 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
   display: flex;
-  font-size: var(--kup-font-size);
   height: 100%;
-  padding: 1em 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     height: 100%;
diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss
index 908983da4c..b95cc6d431 100644
--- a/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss
+++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss
@@ -1,10 +1,10 @@
 .box-layout-8 {
-  background-color: var(--kup-background-color);
-  color: var(--kup-text-color);
   display: flex;
-  font-size: var(--kup-font-size);
   height: 100%;
-  padding: 1em 0.5em;
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
+  padding: var(--kup-space-05);
+  @include kup-body-compact-01;
 
   .container {
     height: 100%;
@@ -24,8 +24,7 @@
   }
 
   .value {
-    font-weight: bold;
-    padding-bottom: 1.25em;
+    @include kup-heading-compact-01;
   }
 
   tr:last-child {
@@ -36,7 +35,7 @@
 
   .table {
     box-sizing: border-box;
-    padding: 1.25em;
+    padding-top: var(--kup-space-05);
     padding-bottom: 0;
   }
 
diff --git a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
index 3953f982b5..9b493cfdf1 100644
--- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
+++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
@@ -16,14 +16,21 @@
 */
 
 :host {
-  --kup_list_background: var(--kup-list-background, var(--kup-gray-color-10));
-  --kup_list_background_hover: var(
-    --kup-list-background-hover,
+  --kup_list_background_color: var(
+    --kup-list-background-color,
+    var(--kup-gray-color-10)
+  );
+  --kup_list_background_color_hover: var(
+    --kup-list-background-color-hover,
     var(--kup-gray-color-20)
   );
 
   --kup_list_focus_color: var(--kup-list-focus-color, var(--kup-primary-color));
-  --kup_list_color: var(--kup-list-color, var(--kup-gray-color-70));
+  --kup_list_text_color: var(--kup-list-text-color, var(--kup-gray-color-70));
+  --kup_list_text_color_hover: var(
+    --kup-list-text-color-hover,
+    var(--kup-gray-color-90)
+  );
   --kup_list_font_family: var(--kup-list-font-family, var(--kup-font-family));
   --kup_list_font_size: var(--kup-list-font-size, var(--kup-font-size));
   --kup_list_font_weight: var(--kup-list-font-weight, 400);
@@ -63,8 +70,8 @@
 }
 
 .list {
-  background: var(--kup_list_background);
-  color: var(--kup_list_color);
+  background: var(--kup_list_background_color);
+  color: var(--kup_list_text_color);
   font-weight: var(--kup_list_font_weight);
   letter-spacing: 0.009375em;
   line-height: 1.5em;
@@ -106,8 +113,8 @@
     &.list-item--activated .list-item__graphic,
     &.list-item--selected,
     &.list-item--selected .list-item__graphic {
-      background-color: var(--kup_list_background_hover);
-      color: var(--kup-hover-color);
+      background-color: var(--kup_list_background_color_hover);
+      color: var(--kup_list_text_color_hover);
     }
 
     .list-item__text {
@@ -160,7 +167,7 @@
       overflow: hidden;
       margin-top: 0;
       line-height: normal;
-      color: var(--kup_list_color);
+      color: var(--kup_list_text_color);
       opacity: 0.75;
     }
 
@@ -205,8 +212,8 @@
       &:not(.list-item--selected) {
         &:hover,
         &.list-item--focused {
-          background-color: var(--kup_list_background_hover);
-          color: var(--kup-hover-color);
+          background-color: var(--kup_list_background_color_hover);
+          color: var(--kup_list_text_color_hover);
         }
       }
     }
@@ -221,7 +228,7 @@
 
 .kup-menu {
   animation: fade-in 0.25s ease-out;
-  background-color: var(--kup_list_background);
+  background-color: var(--kup_list_background_color);
   box-shadow: var(--kup_list_box_shadow);
   border: 1px solid var(--kup_list_focus_color);
   color: var(--kup-text-color);
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 861bced630..d647fb2c84 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
@@ -57,20 +57,11 @@
     var(--kup-font-family-monospace)
   );
   --kup_tree_font_size: var(--kup-tree-font-size, var(--kup-font-size));
-  --kup_tree_hover_color: var(--kup-tree-hover-color, var(--kup-hover-color));
-  --kup_tree_icon_color: var(--kup-tree-icon-color, var(--kup-gray-color-70));
-  --kup_tree_primary_color: var(
-    --kup-tree-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_tree_primary_color_rgb: var(
-    --kup-tree-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_tree_text_on_primary_color: var(
-    --kup-tree-text-on-primary-color,
-    var(--kup-text-on-primary-color)
+  --kup_tree_text_hover_color: var(
+    --kup-tree-text-hover-color,
+    var(--kup-gray-color-90)
   );
+  --kup_tree_icon_color: var(--kup-tree-icon-color, var(--kup-gray-color-70));
 
   display: block;
   font-family: var(--kup_tree_font_family);
@@ -240,10 +231,10 @@
 
       &:hover:not(.kup-tree__node--disabled):not(.kup-tree__node--selected) td {
         background-color: var(--kup_tree_tr_background_color_hover);
-        color: var(--kup_tree_hover_color);
+        color: var(--kup_tree_text_hover_color);
 
         .#{$kup-icon} {
-          background-color: var(--kup_tree_hover_color);
+          background-color: var(--kup_tree_text_hover_color);
         }
       }
 
@@ -384,11 +375,11 @@ tfoot {
       background-color: var(--kup_tree_tr_background_color_hover);
 
       .cell-content {
-        color: var(--kup_tree_hover_color);
+        color: var(--kup_tree_text_hover_color);
       }
 
       .#{$kup-icon} {
-        background-color: var(--kup_tree_hover_color);
+        background-color: var(--kup_tree_text_hover_color);
       }
     }
 
@@ -401,16 +392,6 @@ tfoot {
       }
     }
 
-    &:first-of-type {
-      .first-node {
-      }
-    }
-
-    &:last-of-type {
-      .first-node {
-      }
-    }
-
     .first-node {
       align-items: center;
       box-sizing: border-box;
@@ -457,7 +438,7 @@ tfoot {
   animation: fade-in 0.25s ease-out;
   background-color: var(--kup-background-color);
   box-shadow: var(--kup-box-shadow);
-  color: var(--kup-text-color);
+  color: var(kup_tree_text_color);
   display: none;
   max-height: 33vh;
   overflow: auto;