Merge pull request #1792 from smeup/chip-test

Chip test
smeup · Mar 5, 2024 · 4a95d7e · 4a95d7e
2 parents 651f4de + 877c640
commit 4a95d7e
Show file tree

Hide file tree

Showing 27 changed files with 465 additions and 173 deletions.
diff --git 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-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-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
@@ -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
@@ -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-compact-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-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-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-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-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
@@ -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
@@ -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
@@ -28,7 +28,7 @@ export class KupCustomTaskListHeader {
             <div
                 class="custom-task-list-wrapper"
                 style={{
-                    height: '50px',
+                    height: '25px',
                     fontFamily: this.fontFamily,
                     fontSize: this.fontSize,
                 }}