Merge pull request #1848 from smeup/chip-test

Chip test
smeup · Apr 4, 2024 · dd9b670 · dd9b670
2 parents 58dadce + 0a9f742
commit dd9b670
Show file tree

Hide file tree

Showing 22 changed files with 118 additions and 58 deletions.
diff --git 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-00);
+  border-radius: var(--kup-radius-01);
   border: 1px solid var(--kup-gray-color-30);
   color: var(--kup-gray-color-90);
   display: flex;

diff --git a/packages/ketchup/src/assets/image-list.js b/packages/ketchup/src/assets/image-list.js
@@ -595,6 +595,11 @@ const data = [
         isExpanded: false,
         value: 'Framework',
         visible: true,
+        badgeData: [
+            {
+                text: '2',
+            },
+        ],
     },
     {
         children: [

diff --git a/packages/ketchup/src/calendar.html b/packages/ketchup/src/calendar.html
@@ -32,9 +32,9 @@
             }
 
             h1 {
-                background-color: var(--kup-primary-color);
+                background-color: var(--kup-gray-color-90);
                 border-radius: 4px;
-                color: var(--kup-text-on-primary-color);
+                color: var(--kup-gray-color-10);
                 line-height: 2em;
                 margin-top: 0;
                 text-align: center;

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
@@ -61,7 +61,7 @@
 
     .box {
       background-color: var(--kup_box_background_color);
-      border-radius: var(--kup-radius-00);
+      border-radius: var(--kup-radius-01);
       flex-grow: 1;
       cursor: pointer;
       position: relative;

diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
@@ -18,23 +18,23 @@
 :host {
   --kup_calendar_background_color: var(
     --kup-calendar-background-color,
-    var(--kup-background-color)
+    var(--kup-gray-color-10)
   );
   --kup_calendar_border_color: var(
     --kup-calendar-border-color,
-    var(--kup-border-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_event_background_color: var(
     --kup-calendar-event-background-color,
-    var(--kup-primary-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_event_border_radius: var(
     --kup-calendar-event-border-radius,
     4px
   );
   --kup_calendar_event_color: var(
     --kup-calendar-event-color,
-    var(--kup-text-on-primary-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_font_family: var(
     --kup-calendar-font-family,
@@ -43,27 +43,27 @@
   --kup_calendar_font_size: var(--kup-calendar-font-size, var(--kup-font-size));
   --kup_calendar_header_background_color: var(
     --kup-calendar-header-background-color,
-    var(--kup-title-background-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_header_color: var(
     --kup-calendar-header-color,
-    var(--kup-title-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_navigator_border: var(
     --kup-calendar-navigator-border,
-    2px solid var(--kup-border-color)
+    1px solid var(--kup-gray-color-20)
   );
   --kup_calendar_no_work_day_background_color: var(
     --kup-calendar-no-work-day-background-color,
     rgba(var(--kup-disabled-background-color-rgb), 0.5)
   );
   --kup_calendar_no_work_day_color: var(
     --kup-calendar-no-work-day-color,
-    var(--kup-disabled-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_today_background_color: var(
     --kup-calendar-today-background-color,
-    rgba(var(--kup-primary-color-rgb), 0.125)
+    var(--kup-gray-color-30)
   );
 
   background-color: var(--kup_calendar_background_color);
@@ -76,27 +76,23 @@
 
 .navigation {
   align-items: center;
-  border-left: var(--kup_calendar_navigator_border);
-  border-right: var(--kup_calendar_navigator_border);
-  border-top: var(--kup_calendar_navigator_border);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   display: flex;
   justify-content: space-between;
+  background-color: var(--kup_calendar_background_color);
 
   &__left {
     --kup-font-size: 0.875em;
     display: flex;
+    margin-left: var(--kup-space-03);
   }
 
   &__right {
     display: flex;
+    margin-right: var(--kup-space-03);
   }
 
   &__title {
-    font-size: 1.25em;
-    font-weight: 400;
-    letter-spacing: 0.1892857em;
+    @include kup-heading-02;
     margin: 0px;
     padding: 0px 0.5em;
 
@@ -178,6 +174,7 @@
   .fc-list-day-cushion {
     background: var(--kup_calendar_header_background_color);
     color: var(--kup_calendar_header_color);
+    @include kup-heading-01;
   }
 
   .fc-list-event:hover td {
@@ -188,7 +185,6 @@
   .fc-daygrid-event,
   .fc-timegrid-event {
     background: var(--kup_calendar_event_background_color);
-    border-radius: var(--kup_calendar_event_border_radius);
     border: none;
     border-color: var(--kup_calendar_event_background_color);
     color: var(--kup_calendar_event_color);
@@ -217,18 +213,18 @@
   .navigation {
     flex-direction: column;
   }
-  .calendar{
+  .calendar {
     height: 100%;
-    .fc-view-harness{
+    .fc-view-harness {
       min-height: 450px;
     }
   }
-  
-  .navigation .navigation__left{
+
+  .navigation .navigation__left {
     font-size: 20px;
     gap: 8px;
   }
-  .navigation .navigation__right .f-chip .chip-set .chip-set__item{
+  .navigation .navigation__right .f-chip .chip-set .chip-set__item {
     font-size: 16px;
   }
 }
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
@@ -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-00);
+  border-radius: var(--kup-radius-01);
   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-dialog/kup-dialog.scss b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
@@ -7,10 +7,7 @@
     --kup-dialogheader-text-color,
     var(--kup-gray-color-70)
   );
-  --kup_dialog_background_color: var(
-    --kup-header-text-color,
-    var(--kup-gray-color-0)
-  );
+  --kup_dialog_background_color: var(--kup-layer-0, var(--kup-gray-color-0));
   --kup_dialog_header_height: var(--kup-dialog-header-height, 2em);
 
   box-sizing: border-box;

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
@@ -5,15 +5,15 @@
 :host(.#{$kup-class-shaped}) {
   .dropdown-button__primary-action {
     .button {
-      border-top-left-radius: var(--kup-radius-00);
-      border-bottom-left-radius: var(--kup-radius-00);
+      border-top-left-radius: var(--kup-radius-01);
+      border-bottom-left-radius: var(--kup-radius-01);
     }
   }
 
   .dropdown-button__dropdown-action {
     .button {
-      border-top-right-radius: var(--kup-radius-00);
-      border-bottom-right-radius: var(--kup-radius-00);
+      border-top-right-radius: var(--kup-radius-01);
+      border-bottom-right-radius: var(--kup-radius-01);
     }
   }
 }

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
@@ -26,15 +26,15 @@
 
 .f-button.dropdown-button__dropdown-action.dropdown-only {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
   }
 }
 
 .f-button.dropdown-button__dropdown-action {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
     box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 
     .button__icon {

diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
@@ -126,7 +126,7 @@ export class KupImageList {
      * When enabled displays Material's ripple effect on clicked items.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
     /**
      * Number of rows to display in the grid layout.
      * @default null

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
@@ -27,7 +27,7 @@
   );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --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-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-00);
+  border-radius: var(--kup-radius-01);
   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-00);
+  border-radius: var(--kup-radius-01);
   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
@@ -9,7 +9,7 @@
 
 .ganttContainer {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   overflow: hidden;
   padding: var(--kup-space-05);
 }

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
@@ -11,7 +11,7 @@
   border: none;
   text-align: left;
   box-sizing: border-box;
-  color: var(--kup-gray-color-0);
+  color: var(--kup-layer-0);
   cursor: pointer;
   padding: var(--kup-space-03) var(--kup-space-05);
   &:hover {

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
@@ -1,6 +1,6 @@
 .tasks {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   padding: var(--kup-space-05);
   margin-right: var(--kup-space-05);
 }

diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
@@ -74,6 +74,7 @@
       gap: 8px;
       margin: 0px;
       border: none;
+      flex: 1 0;
       outline: 2px solid transparent;
       outline-offset: -2px;
       background: none;

diff --git 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-00)
+    var(--kup-radius-01)
   );
   --kup_button_font_family: var(
     --kup-button-font-family,
@@ -323,7 +323,10 @@
 
     &:hover,
     &:focus {
-      background-color: rgba(var(--kup_button_text_color_rgb), 0.125);
+      background-color: var(--kup-primary-color-60);
+      .icon-button__icon .f-image__icon {
+        background: var(--kup-primary-color-0) !important;
+      }
     }
 
     .icon-button__icon {
@@ -419,6 +422,50 @@
     }
   }
 
+  .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__icon .f-image__icon {
+        background: var(--kup-gray-color-0) !important;
+      }
+    }
+
+    .icon-button__icon {
+      display: flex;
+      margin: auto;
+
+      &.icon-button__icon--on {
+        display: 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);
+    }
+  }
+
   &.#{$kup-class-full-height} {
     height: 100%;
 

diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss
@@ -1,7 +1,7 @@
 .f-chip {
   --kup_chip_background_color: var(
     --kup-chip-background-color,
-    var(--kup-gray-color-20)
+    var(--kup-gray-color-30)
   );
   --kup_chip_border_color: var(
     --kup-chip-border-color,

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
@@ -1,7 +1,7 @@
 .f-progress-bar {
   --kup_progressbar_border_radius: var(
     --kup-progressbar-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_progressbar_font_family: var(
     --kup-progressbar-font-family,