@sme.up/ketchup 9.6.1 → 9.6.3

package/dist/collection/components/kup-image/kup-image.css

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 :host {
   display: block;
   position: relative;

package/dist/collection/components/kup-image-list/kup-image-list-declarations.js

@@ -4,7 +4,9 @@
  */
 export var KupImageListProps;
 (function (KupImageListProps) {
+    KupImageListProps["columns"] = "Can set a specific number of columns";
     KupImageListProps["customStyle"] = "Custom style of the component.";
     KupImageListProps["data"] = "Actual data of the component";
     KupImageListProps["ripple"] = "When enabled displays Material's ripple effect on clicked items.";
+    KupImageListProps["rows"] = "Cam set a specific number of rows. It overwrite the columns flow into rows flow";
 })(KupImageListProps || (KupImageListProps = {}));

package/dist/collection/components/kup-image-list/kup-image-list.css

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 /**
 * @prop --kup-imagelist-background-color: Sets the background color of the component.
 * @prop --kup-imagelist-columns: Sets the number of columns of the grid.
@@ -20,11 +148,13 @@
   );
   --kup_imagelist_columns: var(--kup-imagelist-columns, 4);
   --kup_imagelist_grid_gap: var(--kup-imagelist-grid-gap, 0.5em);
-  --kup_imagelist_image_margin: var(--kup-imagelist-image-margin, 1em auto);
-  --kup_imagelist_image_min_height: var(--kup-imagelist-image-min-height, 64px);
+  --kup_imagelist_image_min_height: var(
+    --kup-imagelist-image-min-height,
+    var(--kup-space-09)
+  );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    8px
+    var(--kup-radius-00)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);
@@ -47,7 +177,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;
 }
@@ -88,14 +222,15 @@
   margin: 0;
 }
 .navigation-bar__title__label {
-  font-size: 1.2em;
-  font-weight: bold;
-  letter-spacing: 0.12em;
   overflow: hidden;
-  padding: 0 0.5em;
   text-overflow: ellipsis;
   text-transform: uppercase;
   white-space: nowrap;
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
 }
 
 .image-list {
@@ -105,37 +240,42 @@
   grid-template-columns: repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));
   margin-top: 1em;
   width: 100%;
+  grid-auto-flow: row;
 }
 .image-list .f-cell {
   height: 100%;
   width: 100%;
 }
+.image-list .f-cell .f-cell__content .image-list__wrapper {
+  padding: var(--kup-space-03) var(--kup-space-02);
+}
 .image-list__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);
 }
+.image-list__item:hover {
+  background-color: var(--kup-gray-color-20);
+}
 .image-list__image.f-image {
-  margin: var(--kup_imagelist_image_margin);
+  margin-bottom: var(--kup-space-03);
 }
 .image-list__image.f-image .f-image__icon {
   min-height: var(--kup_imagelist_image_min_height);
 }
 .image-list__label {
-  color: var(--kup_imagelist_text_color);
-  letter-spacing: 0.12em;
-  margin: var(--kup_imagelist_label_margin);
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
-}
-.image-list .mdc-ripple-surface {
-  --mdc-ripple-fg-opacity: 0.24;
-}
-.image-list .mdc-ripple-surface:before, .image-list .mdc-ripple-surface:after {
-  background-color: var(--kup_imagelist_primary_color);
+  white-space: nowrap;
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
 }
 
 /*-------------------------------------------------*/