From ae64fa4478b335a20b3f2d2b808df86d3a025204 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 6 Mar 2024 11:48:37 +0100 Subject: [PATCH 1/2] kup-box: design and token application --- packages/ketchup/src/box.html | 5 ++++ .../kup-box/styles/kup-box-classes.scss | 2 -- .../kup-box/styles/kup-box-main.scss | 30 +++++++------------ .../kup-card/box/kup-card-box-1.scss | 1 + .../kup-card/box/kup-card-box-3.scss | 2 +- .../kup-card/box/kup-card-box-4.scss | 2 +- .../kup-card/box/kup-card-box-5.scss | 2 +- .../kup-card/box/kup-card-box-6.scss | 2 +- .../kup-card/box/kup-card-box-7.scss | 2 +- .../styles/kup-image-list-main.scss | 26 +++++++++------- 10 files changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/ketchup/src/box.html b/packages/ketchup/src/box.html index abe6ebb2e8..44dbe8e036 100644 --- a/packages/ketchup/src/box.html +++ b/packages/ketchup/src/box.html @@ -45,6 +45,11 @@ +

Kanban Box

Graphic Box

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 index d0101d868e..a374756661 100644 --- 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 index 25de0b44ca..684fe56da5 100644 --- 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 index 3de0ea1340..53d4968342 100644 --- 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 index 2ad2eb7ec2..f0eb59b02a 100644 --- 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 index 727c7db9fb..f34df00f8b 100644 --- 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 index c3ebaa8dae..7a94b8d927 100644 --- 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 index 9377b50370..7512dfd2cd 100644 --- 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 index 9bbed913de..6fd852fe1c 100644 --- 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-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss index f02a2a4546..732b02027c 100644 --- 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); - } - } } From 3d2b11415d857f702f7c8f1735feeef63d060505 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 6 Mar 2024 16:10:22 +0100 Subject: [PATCH 2/2] Update kup-card-scalable-1.scss --- .../src/components/kup-card/scalable/kup-card-scalable-1.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index a536f2f79b..9c052b7b30 100644 --- 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%; } } }