Kup-card-box fixes

smeup · Mar 5, 2024 · 877c640 · 877c640
1 parent 533c623
commit 877c640
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 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
@@ -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
@@ -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
@@ -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-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
@@ -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;