diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..b64458dbf1 Binary files /dev/null and b/.DS_Store differ diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000000..353dd0c3ec Binary files /dev/null and b/packages/.DS_Store differ diff --git a/packages/ketchup/src/card.html b/packages/ketchup/src/card.html index b1ab673bca..9cc95a3bd4 100644 --- a/packages/ketchup/src/card.html +++ b/packages/ketchup/src/card.html @@ -301,6 +301,13 @@

Scalable layouts

size-x="300px" size-y="300px" > +

Dialog layouts

+
@@ -104,13 +109,11 @@

Stacked series

Combo chart

- +

Timeline chart

- - 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 684fe56da5..1649389239 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 @@ -58,10 +58,10 @@ .box-wrapper { display: flex; align-items: center; - background-color: var(--kup_box_background_color); - border-radius: var(--kup-radius-00); .box { + background-color: var(--kup_box_background_color); + border-radius: var(--kup-radius-00); flex-grow: 1; cursor: pointer; position: relative; @@ -84,7 +84,7 @@ } &.selected { - background-color: var(---kup_box_background_color_hover); + background-color: var(--kup_box_background_color_hover); & .box-section.titled > h3 { background-color: transparent; diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss index 0da6420150..9f75e9bb48 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss @@ -1,6 +1,5 @@ .built-in-layout-2 { background-color: var(--kup-background-color); - border-radius: 4px; 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-card/scalable/kup-card-scalable-10.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss index f2f65bc422..8143044f3a 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss @@ -1,24 +1,11 @@ -.scalable-layout-9 { - background-color: var(--color-1); - color: var(--color-2); +.scalable-layout-10 { + background-color: var(--kup-gray-color-10); + color: var(--kup-gray-color-70); height: 100%; display: flex; justify-content: unset; overflow: auto; - border-radius: 4px; - - .section-1 { - background-color: var(--color-0); - width: 20%; - height: 100%; - } - - .section-2 { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } + width: 100%; .text { display: flex; @@ -26,15 +13,16 @@ flex-direction: column; } - .descr { - font-size: 80%; + .number { + display: flex; + justify-content: space-between; } - .value { - font-size: 220%; + .title { + font-size: 120%; } - .buttons { + .buttons { height: max-content; margin-bottom: 2%; } @@ -42,4 +30,4 @@ .f-button { float: right; } -} \ No newline at end of file +} diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx index 89b4a455b6..50a905d7ee 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx @@ -595,7 +595,7 @@ export function create9(component: KupCard): VNode { } /** - * 9th scalable card layout, tile view. + * 10th scalable card layout, tile view. * @param {KupCard} component - Card component. * @returns {VNode} 8th scalable layout virtual node. */ @@ -615,11 +615,21 @@ export function create10(component: KupCard): VNode { component.data.color && component.data.color.length > 2 ? component.data.color[2] : `var(${KupThemeColorValues.TEXT})`; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Image color + + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; // Main text const mainText = component.data.text && component.data.text.length > 0 ? component.data.text[0] : null; + // Sub text const subText = component.data.text && component.data.text.length > 1 @@ -647,12 +657,88 @@ export function create10(component: KupCard): VNode { class={`scalable-layout-${component.layoutNumber}`} style={CSSVariables} > -
-
-
-
-
{mainText}
-
{subText}
+
+
+
{mainText}
+
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
{subText}
+
+
+
+
+ ); +} + +/** + * 11th scalable card layout, icon with title and subtitle. + * @param {KupCard} component - Card component. + * @returns {VNode} 8th scalable layout virtual node. + */ +export function create11(component: KupCard): VNode { + //Image color + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Title, subtitle + let textIndex: number = 0; + const textArray: string[] = component.data['text'] + ? component.data['text'] + : []; + return ( +
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
+ {textArray[textIndex] ? textArray[textIndex] : ''} +
+
+
+
+ {textArray[++textIndex] ? textArray[textIndex] : ''}
diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss index 555a06c3a6..84975a8331 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss @@ -21,7 +21,7 @@ flex-direction: column; &.has-content { border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + padding: var(--kup-space-05); } kup-date-picker:first-of-type, kup-time-picker:first-of-type { @@ -35,6 +35,7 @@ flex-direction: column; max-height: 20vh; overflow: auto; + padding: var(--kup-space-05); kup-checkbox { margin-left: 0; margin-right: auto; diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss index 7429feee42..809270ec4a 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss @@ -53,6 +53,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -70,11 +71,13 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } @@ -105,7 +108,7 @@ } .sub-formula { - padding: 0.5em; + padding: 0.5em 0; } .sub-chip { @@ -117,9 +120,10 @@ .sub-field { display: flex; flex-direction: column; + gap: var(--kup-space-03); &.has-content { border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + padding: 0.5em 0; } kup-date-picker:first-of-type, kup-time-picker:first-of-type { diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss index 036dee1f1e..41cd1c76d1 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss @@ -54,6 +54,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -71,11 +72,13 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } @@ -112,6 +115,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-body-compact-01; } &__value { @@ -122,6 +126,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-heading-compact-01; } } diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 32b9ccd3cf..90175f1053 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -5741,7 +5741,7 @@ export class KupDataTable { ) : null} {this.insertMode !== '' ? ( { if (this.insertMode === 'form') { diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss index 73033cfd8e..6153b1a517 100644 --- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss +++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss @@ -67,6 +67,15 @@ 3px ); + --kup_datatable_background_color_hover: var( + --kup-datatable-background-color-hover, + var(--kup-gray-color-20) + ); + --kup_datatable_text_color_hover: var( + --kup-datatable-background-color-hover, + var(--kup-gray-color-80) + ); + display: block; font-family: var(--kup_datatable_font_family); font-size: var(--kup_datatable_font_size); @@ -111,7 +120,7 @@ table { &[#{$kup-dd-drag-over}] { td { &:first-of-type { - box-shadow: inset 4px 0px 0px 0px var(--kup-secondary-color); + box-shadow: inset 4px 0px 0px 0px var(--kup-gray-color-30); } } } @@ -157,22 +166,24 @@ table { } tfoot { - td { - border-bottom: var(--kup_datatable_border); - border-right: var(--kup_datatable_border); - box-sizing: border-box; - height: 36px; - text-align: right; - font-weight: bold; - padding: 0.5em 0.6em; - &:hover { - background-color: var(--kup_datatable_background_color); - } - &:first-of-type { - // border-left: var(--kup_datatable_border); - } - &:last-of-type { - border-right: none; + tr { + td { + border-bottom: var(--kup_datatable_border); + border-right: var(--kup_datatable_border); + box-sizing: border-box; + height: 36px; + text-align: right; + font-weight: bold; + padding: 0.5em 0.6em; + &:hover { + background-color: var(--kup_datatable_background_color); + } + &:first-of-type { + // border-left: var(--kup_datatable_border); + } + &:last-of-type { + border-right: none; + } } } } @@ -370,8 +381,8 @@ tbody { &:hover:not(.group):not(.selected) { td { - color: var(--kup-hover-color); - background-color: var(--kup-hover-background-color); + color: var(--kup_datatable_text_color_hover); + background-color: var(--kup_datatable_background_color_hover); } } diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss index 14d3ffc45e..9a9d14e5aa 100644 --- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss +++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss @@ -5,7 +5,7 @@ sticky-header { .persistent-header { & ~ sticky-header { background: var(--kup-gray-color-20); - box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); + // box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); color: var(--kup-title-color); display: block; opacity: 0; 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 732b02027c..0fe41edf6d 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 @@ -21,16 +21,14 @@ ); --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, 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); --kup_imagelist_item_width: var(--kup-imagelist-item-width, auto); @@ -106,14 +104,11 @@ } &__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; + @include kup-body-compact-01; } } } @@ -132,6 +127,9 @@ .f-cell { height: 100%; width: 100%; + .f-cell__content .image-list__wrapper { + padding: var(--kup-space-03); + } } &__item { @@ -142,12 +140,12 @@ padding: var(--kup_imagelist_item_padding); width: var(--kup_imagelist_item_width); &:hover { - box-shadow: var(--kup_imagelist_box_shadow_hover); + background-color: var(--kup-gray-color-20); } } &__image.f-image { - margin: var(--kup_imagelist_image_margin); + margin-bottom: var(--kup-space-03); .f-image__icon { min-height: var(--kup_imagelist_image_min_height); @@ -155,11 +153,9 @@ } &__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; + @include kup-label-01; } } 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 index d647fb2c84..04ad1b87a2 100644 --- a/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss +++ b/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss @@ -40,7 +40,6 @@ var(--kup-gray-color-30) ); - --kup_tree_border: var(--kup-tree-border, 1px solid var(--kup-border-color)); --kup_tree_text_color: var(--kup-tree-text-color, var(--kup-gray-color-70)); --kup_tree_header_text_color: var( --kup-tree-header-text-color, @@ -301,8 +300,8 @@ tfoot { td { - border-bottom: var(--kup_tree_border); - border-right: var(--kup_tree_border); + border-bottom: solid 1px var(--kup_tree_border_color); + border-right: solid 1px var(--kup_tree_border_color); box-sizing: border-box; height: 36px; text-align: right; @@ -313,7 +312,7 @@ tfoot { } &:first-of-type { border: none; - border-right: var(--kup_tree_border); + border-right: solid 1px var(--kup_tree_border_color); } } } @@ -339,8 +338,8 @@ tfoot { display: table-header-group; tr { - border-left: var(--kup_tree_border); - border-right: var(--kup_tree_border); + border-left: solid 1px var(--kup_tree_border_color); + border-right: solid 1px var(--kup_tree_border_color); th span { @include kup-heading-compact-01; } diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss index cfaba3f16d..41e198ccb3 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -1,4 +1,9 @@ .f-checkbox { + --kup_danger_icon_color: var(--kup-danger-color, var(--kup-danger-color-50)); + --kup_warning_icon_color: var( + --kup-warning-color, + var(--kup-warning-color-40) + ); --kup_checkbox_disabled_checkmark_color: var( --kup-checkbox-disabled-checkmark-color, var(--kup-gray-color-10) @@ -214,7 +219,7 @@ } } .checkbox__error-message { - color: var(--kup-accent-red-color); + color: var(--kup_danger_icon_color); } } } @@ -233,17 +238,17 @@ } .checkbox__error-message { - color: var(--kup-accent-red-color); + color: var(--kup_danger_icon_color); } &.checkbox--error { .checkbox__background { - border-color: var(--kup-accent-red-color); + border-color: var(--kup_danger_icon_color); } } &.#{$kup-class-danger} { - --kup-checkbox-primary-color: var(--kup-danger-color); + --kup-checkbox-primary-color: var(--kup_danger_icon_color); --kup-checkbox-primary-color-rgb: var(--kup-danger-color-rgb); --kup-checkbox-text-on-primary-color: white; --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255; diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx index 5976da1c12..eed5ce2548 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx @@ -24,8 +24,8 @@ export const FCheckbox: FunctionalComponent = ( const propsFImage: FImageProps = { color: props.error - ? `var(--kup-accent-red-color)` - : `var(--kup-accent-orange-color)`, + ? `var(--kup_danger_icon_color)` + : `var(--kup_warning_icon_color)`, resource: props.error ? 'error' : 'warning', sizeX: '1.15em', sizeY: '1.15em', 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 index 29bd819383..054e8ab14d 100644 --- 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 @@ -30,7 +30,7 @@ ); --kup_progressbar_track_background_color: var( --kup-progressbar-track-background-color, - var(--kup-gray-color-10) + var(--kup-gray-color-20) ); --kup_progressbar_width: var(--kup-progressbar-width, 100%); @@ -156,8 +156,8 @@ cursor: default; display: block; font-size: 0.25em; - left: 0.4em; - line-height: 2.75em; + left: 0.6em; + line-height: 3em; position: absolute; right: 0.4em; text-align: center; diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 51afe7daa2..7321244b60 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -24,7 +24,15 @@ "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", "--kup-gray-color-100": "#161616", - "--kup-danger-color-10": "da inserire il codice per il kup danger colors", + "--kup-danger-color-50": "#fa4d56", + "--kup-danger-color-60": "#da1e28", + "--kup-danger-color-70": "#ba1b23", + "--kup-danger-color-80": "#750e13", + "--kup-success-color-40": "#42be65", + "--kup-success-color-60": "#198038", + "--kup-info-color-50": "#4589ff", + "--kup-info-color-70": "#0043ce", + "--kup-warning-color-40": "#f1c21b", "--kup-background-color": "#ffffff", "--kup-navbar-background-color": "#161616", "--kup-navbar-color": "#ffffff", diff --git a/packages/ketchup/src/progress-bar.html b/packages/ketchup/src/progress-bar.html index 77ec277b7e..ca436305b3 100644 --- a/packages/ketchup/src/progress-bar.html +++ b/packages/ketchup/src/progress-bar.html @@ -20,9 +20,15 @@ +
-
+ + +