Merge pull request #1793 from smeup/chip-test

Chip test
smeup · Mar 6, 2024 · d833024 · d833024
2 parents 4a95d7e + 3d2b114
commit d833024
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 38 deletions.
diff --git a/packages/ketchup/src/box.html b/packages/ketchup/src/box.html
@@ -45,6 +45,11 @@
     </head>
 
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true, logLimit: 10000 },
+            };
+        </script>
         <h1> Kanban Box</h1>
         <kup-box id="kanban-box"></kup-box>
         <h1> Graphic Box</h1>

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
@@ -98,8 +98,6 @@
 :host(:not(.#{$kup-class-paddingless})) {
   #box-container {
     .box {
-      padding: 3px;
-
       .box-section {
         .box-object {
           padding: 1px 4px;

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
@@ -12,29 +12,19 @@
 :host {
   --kup_box_background_color: var(
     --kup-box-background-color,
-    var(--kup-background-color)
+    var(--kup-gray-color-10)
   );
-  --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, 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)
-  );
-  --kup_box_primary_color_rgb: var(
-    --kup-box-primary-color-rgb,
-    var(--kup-primary-color-rgb)
+  --kup_box_background_color_hover: var(
+    --kup-box-background-color-hover,
+    var(--kup-gray-color-20)
   );
+  --kup_box_text_color: var(--kup-box-text-color, var(--kup-gray-color-70));
+  --kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-03));
   --kup_box_transition: var(--kup-box-transition, 0.25s);
-
   display: block;
-  font-family: var(--kup_box_font_family);
-  font-size: var(--kup_box_font_size);
 }
 
 .box-component {
-  background: var(--kup_box_background_color);
   transition: border var(--kup_box_transition) ease;
 
   &[#{$kup-dd-drag-over}] {
@@ -46,7 +36,7 @@
 #box-container {
   display: grid;
   grid-gap: var(--kup_box_grid_gap);
-  color: var(--kup_box_color);
+  color: var(--kup_box_text_color);
   overflow: auto;
 
   &.is-kanban {
@@ -68,6 +58,8 @@
   .box-wrapper {
     display: flex;
     align-items: center;
+    background-color: var(--kup_box_background_color);
+    border-radius: var(--kup-radius-00);
 
     .box {
       flex-grow: 1;
@@ -88,11 +80,11 @@
       }
 
       &:hover {
-        box-shadow: var(--kup_box_hover_box_shadow);
+        background-color: var(--kup_box_background_color_hover);
       }
 
       &.selected {
-        background-color: rgba(var(--kup_box_primary_color_rgb), 0.175);
+        background-color: var(---kup_box_background_color_hover);
 
         & .box-section.titled > h3 {
           background-color: transparent;

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
@@ -18,5 +18,6 @@
   .value {
     font-weight: bold;
     padding: 0.5em;
+    @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
@@ -35,7 +35,7 @@
 
   .value {
     padding: 0.5em;
-    font-weight: bold;
+    @include kup-heading-compact-01;
   }
 
   .f-cell .f-cell__text {

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
@@ -19,8 +19,8 @@
   }
 
   .value {
-    font-weight: bold;
     padding-top: 0.5em;
+    @include kup-heading-compact-01;
   }
 
   .f-cell.c-centered .f-cell__content img,

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
@@ -33,7 +33,7 @@
   }
 
   .value {
-    font-weight: bold;
+    @include kup-heading-compact-01;
   }
 
   .table {

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
@@ -25,7 +25,7 @@
   }
 
   .value {
-    font-weight: bold;
+    @include kup-heading-compact-01;
     padding-bottom: 1.25em;
   }
 

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
@@ -28,7 +28,7 @@
   }
 
   .value {
-    font-weight: bold;
+    @include kup-heading-compact-01;
   }
 
   .table {

diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-1.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-1.scss
@@ -18,9 +18,9 @@
     }
 
     .value {
-      font-size: 40px;
       @include kup-heading-08;
       color: var(--kup-dash-value-text-color, var(--kup_dash_value_text_color));
+      font-size: 130%;
     }
   }
 }
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
@@ -25,7 +25,11 @@
   --kup_imagelist_image_min_height: var(--kup-imagelist-image-min-height, 64px);
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    8px
+    var(--kup-radius-00)
+  );
+  --kup_imagelist_box_shadow_hover: var(
+    --kup-box-box-shadow-hover,
+    0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);
@@ -38,6 +42,7 @@
     --kup-imagelist-navbar-background-color,
     transparent
   );
+
   --kup_imagelist_primary_color: var(
     --kup-imagelist-primary-color,
     var(--kup-primary-color)
@@ -48,7 +53,11 @@
   );
   --kup_imagelist_text_color: var(
     --kup-imagelist-text-color,
-    var(--kup-text-color)
+    var(--kup-gray-color-70)
+  );
+  --kup_imagelist_item_background_color: var(
+    --kup-imagelist-item-background-color,
+    var(--kup-gray-color-10)
   );
 
   display: block;
@@ -126,11 +135,15 @@
   }
 
   &__item {
+    background-color: var(--kup_imagelist_item_background_color);
     border-radius: var(--kup_imagelist_item_border_radius);
     cursor: pointer;
     height: var(--kup_imagelist_item_height);
     padding: var(--kup_imagelist_item_padding);
     width: var(--kup_imagelist_item_width);
+    &:hover {
+      box-shadow: var(--kup_imagelist_box_shadow_hover);
+    }
   }
 
   &__image.f-image {
@@ -149,13 +162,4 @@
     text-align: center;
     text-overflow: ellipsis;
   }
-
-  .mdc-ripple-surface {
-    --mdc-ripple-fg-opacity: 0.24;
-
-    &:before,
-    &:after {
-      background-color: var(--kup_imagelist_primary_color);
-    }
-  }
 }