From 122f88df1dfe093d72ed8753c27af7dd93f215d0 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 11:46:11 +0200 Subject: [PATCH 01/14] fix textfield placeholder --- packages/ketchup/src/components.d.ts | 10 ++++++++++ .../src/components/kup-text-field/kup-text-field.tsx | 6 ++++++ .../f-text-field/f-text-field-declarations.ts | 1 + .../src/f-components/f-text-field/f-text-field.tsx | 6 +----- packages/ketchup/src/text-field.html | 3 ++- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index b36cd408c6..6fa18a6fbb 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -3911,6 +3911,11 @@ export namespace Components { * @default false */ "outlined": boolean; + /** + * Set the placeholder value. It's an example, not a label. + * @default false + */ + "placeholder": string; /** * When set, appear 2 buttons to increment and decrement the value. * @default false @@ -8687,6 +8692,11 @@ declare namespace LocalJSX { * @default false */ "outlined"?: boolean; + /** + * Set the placeholder value. It's an example, not a label. + * @default false + */ + "placeholder"?: string; /** * When set, appear 2 buttons to increment and decrement the value. * @default false diff --git a/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx b/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx index 2c7bac61f1..fdd4dcb7b8 100644 --- a/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx +++ b/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx @@ -189,6 +189,11 @@ export class KupTextField { * @default false */ @Prop() outlined: boolean = false; + /** + * Set the placeholder value. It's an example, not a label. + * @default false + */ + @Prop() placeholder: string = ''; /** * When set, appear 2 buttons to increment and decrement the value. * @default false @@ -613,6 +618,7 @@ export class KupTextField { min: this.min, name: this.name, outlined: this.outlined, + placeholder: this.placeholder, quantityButtons: this.quantityButtons, readOnly: this.readOnly, secondary: this.rootElement.classList.contains('kup-secondary') diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field-declarations.ts b/packages/ketchup/src/f-components/f-text-field/f-text-field-declarations.ts index 44f3cf0526..6dbf2417a7 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field-declarations.ts +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field-declarations.ts @@ -26,6 +26,7 @@ export interface FTextFieldProps extends FComponent { label?: string; leadingLabel?: boolean; name?: string; + placeholder?: string; outlined?: boolean; quantityButtons?: boolean; readOnly?: boolean; diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx b/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx index 835b16ec6b..15b791f6eb 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx @@ -230,11 +230,7 @@ function setContent(props: FTextFieldProps): HTMLDivElement { class="mdc-text-field__input" disabled={props.disabled} readOnly={props.readOnly} - placeholder={ - props.fullWidth && !props.outlined - ? props.label - : undefined - } + placeholder={props.placeholder} maxlength={props.maxLength} size={props.size} value={value} diff --git a/packages/ketchup/src/text-field.html b/packages/ketchup/src/text-field.html index 3adcc38000..5cc1f0a9df 100644 --- a/packages/ketchup/src/text-field.html +++ b/packages/ketchup/src/text-field.html @@ -45,7 +45,8 @@

Simple text field

Date: Mon, 10 Jun 2024 11:47:05 +0200 Subject: [PATCH 02/14] Update f-text-field.scss --- .../ketchup/src/f-components/f-text-field/f-text-field.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 19546c11e0..66a8a99e28 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -559,5 +559,9 @@ -webkit-mask: var(--kup-search-icon); mask: var(--kup-search-icon); } + .mdc-text-field__input::placeholder { + opacity: 1; + color: var(--kup-gray-color-50); + } } } From 230904b1f538ddfdd8ef9a64e0a58be32007c1ce Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:00:13 +0200 Subject: [PATCH 03/14] variables --- .../kup-theme/kup-theme-application.scss | 36 +++++++++++++++-- .../src/managers/kup-theme/themes.json | 40 +++++++++++++++++++ 2 files changed, 73 insertions(+), 3 deletions(-) diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index f7ae29b419..f1a03d1f4e 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -5,20 +5,50 @@ :root { // KUP-TOKEN LAYER // + // BACKGROUND --kup-background-0: var(--kup-gray-color-0); + --kup-background-0-hover: var(--kup-gray-color-10-hover); + --kup-background-0-active: var(--kup-gray-color-30); + --kup-background-0-selected: var(--kup-gray-color-20); + --kup-background-0-selected-hover: var(--kup-gray-color-20-hover); --kup-background-brand: var(--kup-primary-color-60); + + // LAYER --kup-layer-0: var(--kup-gray-color-0); - --kup-layer-0-selected: var(--kup-gray-color-10); + --kup-layer-0-hover: var(--kup-gray-color-0-hover); + --kup-layer-0-selected: var(--kup-gray-color-20); + --kup-layer-0-focus: var(--kup-gray-color-30); --kup-layer-1: var(--kup-gray-color-10); + --kup-layer-1-hover: var(--kup-gray-color-10-hover); --kup-layer-1-selected: var(--kup-gray-color-20); - --kup-layer-2: var(--kup-gray-color-20); - --kup-layer-2-selected: var(--kup-gray-color-30); + --kup-layer-1-focus: var(--kup-gray-color-30); + + // BORDER + --kup-border-interactive: var(--kup-primary-color-60); --kup-border-subtle: var(--kup-gray-color-20); + --kup-border-subtle-hover: var(--kup-gray-color-20-hover); --kup-border-subtle-selected: var(--kup-gray-color-30); + --kup-border-subtle-focus: var(--kup-gray-color-40); --kup-border-strong: var(--kup-gray-color-50); + --kup-border-disabled: var(--kup-gray-color-30); + + // TEXT + --kup-text-color: var(--kup-primary-color-60); --kup-text-primary: var(--kup-gray-color-90); --kup-text-secondary: var(--kup-gray-color-70); --kup-text-placeholder: var(--kup-gray-color-40); + --kup-text-helper: var(--kup-gray-color-60); + --kup-text-error: var(--kup-danger-color-60); + --kup-text-disabled: var(--kup-danger-color-30); + + //BUTTON + // TO BE DONE + --kup-button-primary: var(--kup-primary-color-60); + --kup-button-primary-hover: var(--kup-primary-color-70); + --kup-button-primary-active: var(--kup-primary-color-80); + --kup-button-primary: var(--kup-primary-color-60); + --kup-button-primary-hover: var(--kup-primary-color-70); + --kup-button-primary-active: var(--kup-primary-color-80); // KUP ICON LAYER // --kup-icon-layer: var(--kup-gray-color-70); diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index a4319bc6f2..3d41d299b3 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -23,6 +23,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -127,6 +137,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -236,6 +256,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -349,6 +379,16 @@ "--kup-gray-color-70": "#E0E0E0", "--kup-gray-color-80": "#f4f4f4", "--kup-gray-color-90": "#ffffff", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", From f168b6027c84a45c6e35b349e2686950497dc99b Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:00:19 +0200 Subject: [PATCH 04/14] Update f-text-field.scss --- .../f-text-field/f-text-field.scss | 71 ++++++++++--------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 66a8a99e28..dac629fc36 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -10,18 +10,26 @@ --kup-textfield-background-color-rgb, var(--kup-gray-color-10-rgb) ); + --kup_textfield_background_color: var( + --kup-textfield-background-color, + var(--kup-layer-1) + ); + --kup_textfield_background_color_hover: var( + --kup-textfield-background-color-hover, + var(--kup-layer-1-hover) + ); --kup_textfield_border_color: var( --kup-textfield-border-color, - var(--kup-gray-color-50) + var(--kup-border-strong) ); - --kup_textfield_color: var(--kup-textfield-color, var(--kup-gray-color-90)); + --kup_textfield_border_color_hover: var( + --kup-textfield-border-color-hover, + var(--kup-border-interactive) + ); + --kup_textfield_color: var(--kup-textfield-color, var(--kup-text-primary)); --kup_textfield_label_color: var( --kup-textfield-label-color, - var(--kup-gray-color-70) - ); - --kup_textfield_color_rgb: var( - --kup-textfield-color-rgb, - var(--kup-text-color-rgb) + var(--kup-text-secondary) ); --kup_textfield_fullwidth_height: var( --kup-textfield-fullwidth-height, @@ -44,18 +52,10 @@ ); --kup_textfield_primary_color: var( --kup-textfield-primary-color, - var(--kup-primary-color-60) - ); - --kup_textfield_primary_color_rgb: var( - --kup-textfield-primary-color-rgb, - var(--kup-primary-color-rgb) + var(--kup-text-main) ); --kup_textfield_text_align: var(--kup-textfield-text-align, start); --kup_textfield_width: var(--kup-textfield-width, 100%); - --kup_disabled_background_color_rgb: var( - --kup-disabled-background-color-rgb, - var(--kup-disabled-color-rgb) - ); --mdc-theme-primary: var(--kup_textfield_primary_color); --mdc-shape-small: 0px; @@ -91,6 +91,9 @@ @include kup-body-compact-01; padding: 6px 0px; } + .mdc-text-field__input::placeholder { + opacity: 1; + } } .mdc-quantity-buttons { @@ -107,7 +110,7 @@ align-items: center; &:hover { - background-color: var(--kup-gray-color-20); + background-color: var(kup_textfield_background_color); } &:focus { @@ -123,7 +126,7 @@ content: ''; width: 1px; height: 50%; - background-color: var(--kup-gray-color-20); + background-color: var(--kup_textfield_background_color); position: absolute; top: 50%; right: -0.5px; @@ -166,7 +169,7 @@ pointer-events: all; &.#{$kup-icon-clear}:hover { - background-color: var(--kup-danger-color); + background-color: var(--kup-danger-color-60); } } @@ -178,8 +181,8 @@ } &.mdc-text-field--read-only { - --kup_textfield_border_color: var(--kup-gray-color-30); - --kup_textfield_background_color_rgb: var(--kup-gray-color-0); + --kup_textfield_border_color: var(--kup-border-disabled); + --kup_textfield_background_color_rgb: var(--kup-layer-0); pointer-events: none; .#{$kup-icon}, button { @@ -204,8 +207,7 @@ } &.mdc-text-field--focused:not(.mdc-text-field--disabled) { - // border: 1px solid var(--kup_textfield_primary_color); - outline: 2px solid var(--kup_textfield_primary_color); + outline: 2px solid var(--kup_textfield_border_color_hover); } &.mdc-text-field--filled:not(.mdc-text-field--disabled) @@ -385,8 +387,7 @@ } &.mdc-text-field--error { - // border: 1px solid var(--kup-danger-color); - outline: 2px solid var(--kup-danger-color); + outline: 2px solid var(--kup-danger-color-60); } &.mdc-text-field--textarea { @@ -434,7 +435,7 @@ } &.mdc-text-field--read-only { - --kup_textfield_border_color: var(--kup-gray-color-30); + --kup_textfield_border_color: var(--kup-border-disabled); pointer-events: none; .#{$kup-icon}, button { @@ -462,7 +463,7 @@ } .mdc-error-message { - color: var(--kup-danger-color); + color: var(--kup-danger-color-60); } .mdc-label-container { @@ -526,13 +527,13 @@ } &.#{$kup-class-danger} { - --kup-textfield-primary-color: var(--kup-danger-color); - --kup-textfield-primary-color-rgb: var(--kup-danger-color-rgb); + --kup-textfield-primary-color: var(--kup-danger-color-60); + --kup-textfield-primary-color-rgb: var(--kup-danger-color-60-rgb); } &.#{$kup-class-info} { - --kup-textfield-primary-color: var(--kup-info-color); - --kup-textfield-primary-color-rgb: var(--kup-info-color-rgb); + --kup-textfield-primary-color: var(--kup-info-color-50); + --kup-textfield-primary-color-rgb: var(--kup-info-color-50-rgb); } &.#{$kup-class-secondary} { @@ -541,13 +542,13 @@ } &.#{$kup-class-success} { - --kup-textfield-primary-color: var(--kup-success-color); - --kup-textfield-primary-color-rgb: var(--kup-success-color-rgb); + --kup-textfield-primary-color: var(--kup-success-color-60); + --kup-textfield-primary-color-rgb: var(--kup-success-color-60-rgb); } &.#{$kup-class-warning} { - --kup-textfield-primary-color: var(--kup-warning-color); - --kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb); + --kup-textfield-primary-color: var(--kup-warning-40-color); + --kup-textfield-primary-color-rgb: var(--kup-warning-color-40-rgb); } .#{$kup-icon}.#{$kup-icon-clear} { From 584976bc2c8c297d0f79d56cacd29e9db2dfcfee Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:04:26 +0200 Subject: [PATCH 05/14] update kup-accordion --- .../styles/kup-accordion-classes.scss | 14 +++++++------- .../kup-accordion/styles/kup-accordion-main.scss | 10 +++++----- .../managers/kup-theme/kup-theme-application.scss | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss index 0c18ca15c4..f44060a589 100644 --- a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss +++ b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss @@ -15,14 +15,14 @@ } :host(.#{$kup-class-danger}) { - --kup-accordion-primary-color: var(--kup-danger-color); - --kup-accordion-primary-color-rgb: var(--kup-danger-color-rgb); + --kup-accordion-primary-color: var(--kup-danger-color-60); + --kup-accordion-primary-color-rgb: var(--kup-danger-color-60-rgb); --kup-accordion-text-on-primary-color: white; } :host(.#{$kup-class-info}) { - --kup-accordion-primary-color: var(--kup-info-color); - --kup-accordion-primary-color-rgb: var(--kup-info-color-rgb); + --kup-accordion-primary-color: var(--kup-info-50-color); + --kup-accordion-primary-color-rgb: var(--kup-info-color-50-rgb); --kup-accordion-text-on-primary-color: white; } @@ -34,12 +34,12 @@ :host(.#{$kup-class-success}) { --kup-accordion-primary-color: var(--kup-success-color-40); - --kup-accordion-primary-color-rgb: var(--kup-success-color-rgb); + --kup-accordion-primary-color-rgb: var(--kup-success-color-40-rgb); --kup-accordion-text-on-primary-color: white; } :host(.#{$kup-class-warning}) { - --kup-accordion-primary-color: var(--kup-warning-color); - --kup-accordion-primary-color-rgb: var(--kup-warning-color-rgb); + --kup-accordion-primary-color: var(--kup-warning-40-color); + --kup-accordion-primary-color-rgb: var(--kup-warning-color-40-rgb); --kup-accordion-text-on-primary-color: white; } diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss index a575d95696..95578a3b93 100644 --- a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss +++ b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss @@ -18,7 +18,7 @@ :host { --kup_accordion_border_top_color: var( --kup-accordion-border-top-color, - var(--kup-gray-color-20) + var(--kup-border-subtle) ); --kup_accordion_item_small_height: var( --kup-accordion-item-small-height, @@ -30,7 +30,7 @@ ); --kup_accordion_item_outline_color_active: var( --kup-accordion-item-outline-color-focus, - var(--kup-primary-color-60) + var(--kup-border-interactive) ); --kup_accordion_item_large_height: var( --kup-accordion-item-medium-height, @@ -38,11 +38,11 @@ ); --kup_accordion_header_background_color: var( --kup-accordion-header-background-color, - var(--kup-gray-color-0) + var(--kup-layer-0) ); --kup_accordion_header_background_color_hover: var( --kup-accordion-header-background-color-hover, - var(--kup-gray-color-20) + var(--kup-layer-0-hover) ); --kup_accordion_header_padding: var( --kup-accordion-header-padding, @@ -50,7 +50,7 @@ ); --kup_accordion_dropdown_icon_color: var( --kup-accordio-dropdown-icon-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_accordion_transition: var(--kup-accordion-transition, 80ms); diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index f1a03d1f4e..a4c2614096 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -33,7 +33,7 @@ --kup-border-disabled: var(--kup-gray-color-30); // TEXT - --kup-text-color: var(--kup-primary-color-60); + --kup-text-main: var(--kup-primary-color-60); --kup-text-primary: var(--kup-gray-color-90); --kup-text-secondary: var(--kup-gray-color-70); --kup-text-placeholder: var(--kup-gray-color-40); From 91e1195ea6c7f16aa99392064e761ef41f59ade2 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:32:32 +0200 Subject: [PATCH 06/14] Update kup-box-main.scss --- .../kup-box/styles/kup-box-main.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 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 index bf08afe8ca..a6825eefaa 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 @@ -10,14 +10,19 @@ */ :host { - --kup_box_background_color: var(--kup-layer-1, var(--kup-gray-color-10)); + --kup_box_background_color: var(--kup-box-background-color, var(--kup-layer-1)); --kup_box_background_color_hover: var( --kup-box-background-color-hover, - var(--kup-gray-color-20) + var(--kup-layer-1-hover) ); - --kup_box_text_color: var(--kup-text-secondary, var(--kup-gray-color-70)); + --kup_box_background_color_selected: var( + --kup-box-background-color-selected, + var(--kup-layer-1-selected) + ); + --kup_box_text_color: var(--kup-box-text-color, var(--kup-text-secondary)); --kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-03)); --kup_box_transition: var(--kup-box-transition, 0.25s); + --kup_box_border_color_drag:var(--kup-box-border-color-drag, var(--kup-border-interactive)) display: block; --kup_box_padding: var(--kup-box-padding, var(--kup-space-05)); @@ -28,7 +33,7 @@ &[#{$kup-dd-drag-over}] { position: relative; - border: 3px dashed var(--kup-border-color); + border: 3px dashed var(--kup_box_border_color_drag); } } @@ -84,7 +89,7 @@ } &.selected { - background-color: var(--kup_box_background_color_hover); + background-color: var(--kup_box_background_color_selected); & .box-section.titled > h3 { background-color: transparent; @@ -96,7 +101,7 @@ } &[#{$kup-dd-drag-over}] { - border: 3px dashed var(--kup-border-color); + border: 3px dashed var(--kup_box_border_color_drag); position: relative; z-index: 2; } @@ -133,7 +138,7 @@ &.collapse-section { .header { border-top: 1px solid var(--kup-border-color); - color: rgba(var(--kup-text-color-rgb), 0.75); + color: rgba(var(--kup-text-secondary-rgb), 0.75); display: flex; justify-content: space-around; width: 100%; From 2211c91004c1bba889828ca1070af8837e43ad31 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:46:24 +0200 Subject: [PATCH 07/14] update kup-calendar --- .../components/kup-calendar/kup-calendar.scss | 24 +++++++++++-------- .../kup-theme/kup-theme-application.scss | 4 ++++ 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss index 9f45952042..f31b42f689 100644 --- a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss +++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss @@ -18,11 +18,11 @@ :host { --kup_calendar_background_color: var( --kup-calendar-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_calendar_border_color: var( --kup-calendar-border-color, - var(--kup-gray-color-20) + var(--kup-border-subtle) ); --kup_calendar_event_background_color: var( --kup-calendar-event-background-color, @@ -34,7 +34,7 @@ ); --kup_calendar_event_color: var( --kup-calendar-event-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_calendar_font_family: var( --kup-calendar-font-family, @@ -43,27 +43,31 @@ --kup_calendar_font_size: var(--kup-calendar-font-size, var(--kup-font-size)); --kup_calendar_header_background_color: var( --kup-calendar-header-background-color, - var(--kup-gray-color-20) + var(--kup-layer-2) ); --kup_calendar_header_color: var( --kup-calendar-header-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_calendar_navigator_border: var( --kup-calendar-navigator-border, - 1px solid var(--kup-gray-color-20) + 1px solid var(--kup-border-subtle) ); --kup_calendar_no_work_day_background_color: var( --kup-calendar-no-work-day-background-color, - var(--kup-gray-color-0) + var(--kup-layer-0) ); --kup_calendar_no_work_day_color: var( --kup-calendar-no-work-day-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_calendar_today_background_color: var( --kup-calendar-today-background-color, - var(--kup-gray-color-20) + var(--kup-layer-2) + ); + --kup_calendar_border_top_color: var( + --kup-calendar-border-top-color, + var(--kup-border-interactive) ); --fc-border-color: var(--kup_calendar_border_color); @@ -216,7 +220,7 @@ td.fc-day-today { background-color: var(--kup_calendar_today_background_color); - border-top: 2px solid var(--kup-primary-color-60); + border-top: 2px solid var(--kup_calendar_border_top_color); } td.fc-day-sun, diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index a4c2614096..6d9bc6df7c 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -22,6 +22,10 @@ --kup-layer-1-hover: var(--kup-gray-color-10-hover); --kup-layer-1-selected: var(--kup-gray-color-20); --kup-layer-1-focus: var(--kup-gray-color-30); + --kup-layer-2: var(--kup-gray-color-20); + --kup-layer-2-hover: var(--kup-gray-color-20-hover); + --kup-layer-2-selected: var(--kup-gray-color-30); + --kup-layer-2-focus: var(--kup-gray-color-40); // BORDER --kup-border-interactive: var(--kup-primary-color-60); From 823d52d32fd6cf5e112eec1e185cdbd6d2ac387a Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 12:59:00 +0200 Subject: [PATCH 08/14] kup token review --- packages/ketchup-showcase/public/showcase.css | 4 +- packages/ketchup-showcase/src/App.vue | 4 +- .../card/examples/CardCollapsible.vue | 2 +- .../advanced/card/examples/CardDialog.vue | 2 +- .../advanced/card/examples/CardStandard.vue | 2 +- .../dashboard/examples/DashboardLogin.vue | 2 +- .../basic/image/examples/ImageCss.vue | 4 +- .../kup-debug/examples/KupDebugTester.vue | 4 +- .../examples/KupDynamicPositionFeatures.vue | 2 +- .../examples/KupInteractFeatures.vue | 2 +- .../examples/KupLanguageFeatures.vue | 2 +- .../kup-theme/examples/KupThemeFeatures.vue | 6 +- .../kup-theme/examples/KupThemeMaker.vue | 4 +- .../examples/KupTooltipFeatures.vue | 2 +- packages/ketchup/src/calendar.html | 4 +- packages/ketchup/src/card-performance.html | 2 +- .../kup-box/styles/kup-box-classes.scss | 2 +- .../kup-box/styles/kup-box-main.scss | 8 +- .../components/kup-calendar/kup-calendar.scss | 10 +- .../kup-card/box/kup-card-box-1.scss | 4 +- .../kup-card/box/kup-card-box-2.scss | 4 +- .../kup-card/box/kup-card-box-3.scss | 4 +- .../kup-card/box/kup-card-box-4.scss | 4 +- .../kup-card/box/kup-card-box-5.scss | 4 +- .../kup-card/box/kup-card-box-6.scss | 4 +- .../kup-card/box/kup-card-box-7.scss | 4 +- .../kup-card/box/kup-card-box-8.scss | 4 +- .../built-in/kup-card-built-in-1.scss | 4 +- .../built-in/kup-card-built-in-3.scss | 2 +- .../built-in/kup-card-built-in-4.scss | 4 +- .../built-in/kup-card-built-in-5.scss | 2 +- .../kup-card/dialog/kup-card-dialog-2.scss | 2 +- .../kup-card/dialog/kup-card-dialog-3.scss | 2 +- .../scalable/kup-card-scalable-10.scss | 2 +- .../kup-card/scalable/kup-card-scalable.scss | 2 +- .../standard/kup-card-standard-12.scss | 4 +- .../standard/kup-card-standard-13.scss | 2 +- .../standard/kup-card-standard-14.scss | 4 +- .../standard/kup-card-standard-15.scss | 4 +- .../styles/kup-color-picker-main.scss | 2 +- .../styles/kup-data-table-main.scss | 10 +- .../kup-drawer/styles/kup-drawer-main.scss | 4 +- .../kup-family-tree/kup-family-tree.scss | 4 +- .../src/components/kup-form/kup-form.scss | 2 +- .../styles/kup-image-list-main.scss | 14 +- .../kup-list/styles/kup-list-main.scss | 4 +- .../kup-magic-box/kup-magic-box.scss | 2 +- .../styles/kup-photo-frame-main.scss | 2 +- .../kup-planner/utils/gantt-table.module.scss | 18 +- .../kup-gantt-calendar.scss | 2 +- .../kup-grid-renderer/kup-grid-renderer.scss | 6 +- .../utils/kup-switcher/kup-switcher.scss | 4 +- .../src/components/kup-qlik/kup-qlik.scss | 254 +++++++++--------- .../styles/kup-snackbar-main.scss | 5 +- .../kup-spinner/styles/kup-spinner-main.scss | 2 +- .../components/kup-tab-bar/kup-tab-bar.scss | 4 +- .../kup-tree/styles/kup-tree-main.scss | 8 +- packages/ketchup/src/debug.html | 2 +- packages/ketchup/src/design-system.html | 2 +- .../src/f-components/f-button/f-button.scss | 12 +- .../src/f-components/f-button/f-button.tsx | 4 +- .../src/f-components/f-cell/f-cell.scss | 2 +- .../f-components/f-checkbox/f-checkbox.scss | 14 +- .../f-components/f-paginator/f-paginator.scss | 2 +- .../f-progress-bar/f-progress-bar.scss | 2 +- .../src/f-components/f-radio/f-radio.scss | 8 +- .../f-text-field/f-text-field.scss | 2 +- packages/ketchup/src/kupinteract.html | 4 +- .../src/managers/kup-debug/kup-debug.ts | 8 +- .../kup-theme/kup-theme-declarations.ts | 2 +- 70 files changed, 270 insertions(+), 275 deletions(-) diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css index 923abe3954..57edf0d039 100644 --- a/packages/ketchup-showcase/public/showcase.css +++ b/packages/ketchup-showcase/public/showcase.css @@ -38,10 +38,10 @@ } code.flat { - background: var(--kup-gray-color-10); + background: var(--kup-layer-1); border-radius: var(--kup-radius-00); border: 1px solid var(--kup-gray-color-30); - color: var(--kup-gray-color-90); + color: var(--kup-text-primary); display: flex; font-family: var(--kup-font-family-monospace); font-size: 14px; diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue index 02676db509..fe5fa907c8 100644 --- a/packages/ketchup-showcase/src/App.vue +++ b/packages/ketchup-showcase/src/App.vue @@ -1115,7 +1115,7 @@ label { } .version { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); box-sizing: border-box; font-weight: 600; margin-top: auto; @@ -1215,7 +1215,7 @@ a.footer__icon--trailing { #rasterize-viewer { background: var(--kup-background-color); bottom: 0; - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); height: 30vh; overflow: auto; position: fixed; diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue index 552818f473..37d2137c49 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue @@ -138,7 +138,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], image: [ { data: [ diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue index be3ba3a7b6..ba71d185be 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue @@ -313,7 +313,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], combobox: [ { data: { diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue index d1bfacc2f8..7b6542c6ea 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue @@ -1164,7 +1164,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], combobox: [ { data: { diff --git a/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue b/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue index 3eefd0028f..a28ad3cdd2 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue @@ -241,7 +241,7 @@ export default { } .login-box { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); box-shadow: var(--kup-box-shadow); margin: 4px; padding: 8px; diff --git a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue index 8143ebd436..8ecd858842 100644 --- a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue +++ b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue @@ -33,7 +33,7 @@
.anchor-point { align-items: center; - border: 2px var(--kup-border-color); + border: 2px var(--kup-border-subtle); border-style: inset; box-sizing: border-box; display: flex; diff --git a/packages/ketchup-showcase/src/views/framework/kup-interact/examples/KupInteractFeatures.vue b/packages/ketchup-showcase/src/views/framework/kup-interact/examples/KupInteractFeatures.vue index 371242fe41..43d83a7e21 100644 --- a/packages/ketchup-showcase/src/views/framework/kup-interact/examples/KupInteractFeatures.vue +++ b/packages/ketchup-showcase/src/views/framework/kup-interact/examples/KupInteractFeatures.vue @@ -336,7 +336,7 @@ export default { .interact-example { align-items: center; background: var(--kup-background-color); - border: 2px var(--kup-border-color); + border: 2px var(--kup-border-subtle); box-sizing: border-box; display: flex; height: 6em; diff --git a/packages/ketchup-showcase/src/views/framework/kup-language/examples/KupLanguageFeatures.vue b/packages/ketchup-showcase/src/views/framework/kup-language/examples/KupLanguageFeatures.vue index 4a0cde9789..02852190df 100644 --- a/packages/ketchup-showcase/src/views/framework/kup-language/examples/KupLanguageFeatures.vue +++ b/packages/ketchup-showcase/src/views/framework/kup-language/examples/KupLanguageFeatures.vue @@ -185,7 +185,7 @@ export default { const row: KupDataRow = { cells: { KEYS: { - style: { borderRight: '1px solid var(--kup-border-color)' }, + style: { borderRight: '1px solid var(--kup-border-subtle)' }, value: key, }, }, diff --git a/packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeFeatures.vue b/packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeFeatures.vue index 5a2c002598..c5043450f4 100644 --- a/packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeFeatures.vue +++ b/packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeFeatures.vue @@ -209,7 +209,7 @@ export default { themeWrapper.classList.add('theme-wrapper'); themeWrapper.style.backgroundColor = variables['--kup-background-color']; - themeWrapper.style.borderColor = variables['--kup-border-color']; + themeWrapper.style.borderColor = variables['--kup-border-subtle']; themeWrapper.id = theme; themeWrapper.title = 'Toggle ' + theme + ' theme'; themeWrapper.onclick = () => setTheme(theme); @@ -296,7 +296,7 @@ export default { label: 'Color', }, isEditable: true, - style: { borderRight: '1px solid var(--kup-border-color)' }, + style: { borderRight: '1px solid var(--kup-border-subtle)' }, value: colorCheck.hexColor, }, }, @@ -357,7 +357,7 @@ export default { 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 a374756661..c7097f057a 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 @@ -67,7 +67,7 @@ // :host(:not(.#{$kup-class-borderless})) { // .box { -// border: 1px solid var(--kup-border-color); +// border: 1px solid var(--kup-border-subtle); // } // } 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 a6825eefaa..761ddc6b15 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 @@ -137,7 +137,7 @@ // collapsible sections &.collapse-section { .header { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); color: rgba(var(--kup-text-secondary-rgb), 0.75); display: flex; justify-content: space-around; @@ -177,7 +177,7 @@ } &.titled { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); padding-top: 5px; position: relative; margin: 10px; @@ -219,7 +219,7 @@ .row-action-menu { background: var(--kup-background-color); - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); position: absolute; top: 0; @@ -241,7 +241,7 @@ line-height: 30px; &:not(:last-child) { - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); } } } diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss index f31b42f689..2ad90434e8 100644 --- a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss +++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss @@ -167,11 +167,11 @@ border-color: var(--kup_calendar_border_color); } - .fc-theme-standard td, - .fc-theme-standard th, - .fc-theme-standard .fc-list { - border: 1px solid var(--kup_calendar_border_color); - } + // .fc-theme-standard td, + // .fc-theme-standard th, + // .fc-theme-standard .fc-list { + // border: 1px solid var(--kup_calendar_border_color); + // } .fc-col-header-cell { background: var(--kup_calendar_header_background_color); 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 8aef87925c..2ba75222c9 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 @@ -1,6 +1,6 @@ .box-layout-1 { - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; table { 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 index 7417751cdc..26e70bc111 100644 --- 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 @@ -1,6 +1,6 @@ .box-layout-2 { - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; table { 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 fddcaf587d..28529dd245 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 @@ -1,6 +1,6 @@ .box-layout-3 { - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { 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 444a914fd5..71558c6252 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 @@ -1,8 +1,8 @@ .box-layout-4 { display: flex; height: 100%; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { 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 93027568c2..c5e4784d8d 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 @@ -1,8 +1,8 @@ .box-layout-5 { display: flex; height: 100%; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { 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 8d6bec2d17..dad6c66327 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 @@ -1,8 +1,8 @@ .box-layout-6 { display: flex; height: 100%; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { 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 9d3db346de..214ef580ba 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 @@ -1,8 +1,8 @@ .box-layout-7 { display: flex; height: 100%; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { 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 index 738239600a..e694127fcc 100644 --- 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,8 +1,8 @@ .box-layout-8 { display: flex; height: 100%; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-70); + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); @include kup-body-compact-01; .container { diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss index d64ee70d6f..167c04c0ee 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss @@ -1,8 +1,8 @@ .built-in-layout-1 { - --kup_card_text_color: var(--kup-card-text-color, var(--kup-gray-color-90)); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-primary)); --kup_card_background_color: var( --kup-card-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_card_selected_color: var( --kup-card-selected-color, diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss index 04286a7711..dac1e5bfef 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss @@ -16,7 +16,7 @@ } .sub-chip { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); max-height: 33vh; overflow: auto; width: 100%; diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss index 9d7688f329..579e7562b7 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss @@ -9,7 +9,7 @@ @mixin border-deco() { //Firefox bug: https://github.com/Sphinxxxx/vanilla-picker/issues/1 // outline: 1px solid silver; - box-shadow: 0 0 0 1px var(--kup-border-color); + box-shadow: 0 0 0 1px var(--kup-border-subtle); } //The arrow is only used in popup mode @@ -226,7 +226,7 @@ outline: none; &:focus, &:active { - box-shadow: 0 0 2px 1px var(--kup-border-color); + box-shadow: 0 0 2px 1px var(--kup-border-subtle); } } button { diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss index e8482d9c7f..e7ba9b092e 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss @@ -1,7 +1,7 @@ .built-in-layout-5 { --kup_card_background_color: var( --kup-card-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_card_box_shadow: var( --kup-box-shadow, diff --git a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss index 0005f74b6e..0bb3c39792 100644 --- a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss +++ b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss @@ -22,7 +22,7 @@ } .section-2 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); display: grid; grid-gap: 0.5em; grid-template-columns: repeat(2, auto); diff --git a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss index 7317df54af..530b95f44b 100644 --- a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss +++ b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss @@ -43,7 +43,7 @@ color: var(--kup-text-color); font-family: var(--kup-font-family-monospace); white-space: nowrap; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); line-height: 1.75em; } } 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 8143044f3a..41194053a3 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,5 +1,5 @@ .scalable-layout-10 { - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); color: var(--kup-gray-color-70); height: 100%; display: flex; diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss index aaa236f138..faf9d6b86e 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss @@ -10,7 +10,7 @@ @import 'kup-card-scalable-10.scss'; .scalable-card { - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); align-items: center; border-radius: var(--kup-space-00); display: flex; 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 84975a8331..6c3e0010ea 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 @@ -9,7 +9,7 @@ .section-1 { display: inline-flex; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); width: 100%; kup-button { margin: 0; @@ -20,7 +20,7 @@ display: flex; flex-direction: column; &.has-content { - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); padding: var(--kup-space-05); } kup-date-picker:first-of-type, diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss index 62c088f657..881833b503 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss @@ -40,7 +40,7 @@ color: var(--kup-text-color); font-family: var(--kup-font-family-monospace); white-space: nowrap; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); line-height: 1.75em; } } 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 809270ec4a..701613de1d 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 @@ -114,7 +114,7 @@ .sub-chip { max-width: 25vw; overflow: auto; - box-shadow: 0 3px 2px -2px var(--kup-border-color); + box-shadow: 0 3px 2px -2px var(--kup-border-subtle); } .sub-field { @@ -122,7 +122,7 @@ flex-direction: column; gap: var(--kup-space-03); &.has-content { - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); padding: 0.5em 0; } kup-date-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 41cd1c76d1..ade8cfff5e 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 @@ -84,7 +84,7 @@ } .section-2 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); box-sizing: border-box; height: 180px; opacity: 1; @@ -136,7 +136,7 @@ } .section-3 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); display: flex; justify-content: flex-end; padding: 6px { diff --git a/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss b/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss index 9e3abe979b..0de8b1e049 100644 --- a/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss +++ b/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss @@ -43,7 +43,7 @@ width: 1.5em; margin: 0.25em; border-radius: 50%; - border: 0.1em solid var(--kup-border-color); + border: 0.1em solid var(--kup-border-subtle); background-color: transparent; cursor: pointer; 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 6153b1a517..fb6a98cc05 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 @@ -36,7 +36,7 @@ :host { --kup_datatable_background_color: var( --kup-datatable-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_datatable_background_color_active: var( --kup-datatable-background-color-active, @@ -296,7 +296,7 @@ th { .header-cell { &__content { - color: var(--kup-gray-color-90); + color: var(--kup-text-primary); display: flex; justify-content: space-between; padding: 0.5em 0.6em; @@ -322,7 +322,7 @@ th { &__icons { display: flex; .kup-icon { - background-color: var(--kup-gray-color-90); + background-color: var(--kup-text-primary); } } @@ -519,7 +519,7 @@ th.obj:hover span:not(.overlay-action) { height: 0; border-top-left-radius: 25px 30px; border-top-right-radius: 25px 30px; - background-color: var(--kup-border-color); + background-color: var(--kup-border-subtle); transition: height 0.25s; &.toggled { background-color: var(--kup-primary-color); @@ -555,7 +555,7 @@ th.obj:hover span:not(.overlay-action) { .actions-wrapper { display: flex; justify-content: flex-end; - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); margin-top: var(--kup-space-03); .insert-button, .delete-button, diff --git a/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss b/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss index 9707635128..289f622200 100644 --- a/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss +++ b/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss @@ -21,11 +21,11 @@ ); --kup_drawer_background_color: var( --kup-drawer-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_drawer_permanent_border: var( --kup-drawer-permanent-border, - 1px solid var(--kup-border-color) + 1px solid var(--kup-border-subtle) ); --kup_drawer_slide_transition: var(--kup-drawer-slide-transition, 300ms); --kup_drawer_transition: var(--kup-drawer-transition, 250ms); diff --git a/packages/ketchup/src/components/kup-family-tree/kup-family-tree.scss b/packages/ketchup/src/components/kup-family-tree/kup-family-tree.scss index ebfbd8dc76..79b9a29a77 100644 --- a/packages/ketchup/src/components/kup-family-tree/kup-family-tree.scss +++ b/packages/ketchup/src/components/kup-family-tree/kup-family-tree.scss @@ -12,7 +12,7 @@ :host { --kup_familytree_item_background_color: var( --kup-layer-1, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_familytree_border_color: var( --kup-familytree-border-color, @@ -34,7 +34,7 @@ --kup_familytree_item_width: var(--kup-familytree-item-width, 280px); --kup_familytree_lines_color: var( --kup-familytree-lines-color, - var(--kup-border-color) + var(--kup-border-subtle) ); display: block; diff --git a/packages/ketchup/src/components/kup-form/kup-form.scss b/packages/ketchup/src/components/kup-form/kup-form.scss index d057c8cc67..b38a26af77 100644 --- a/packages/ketchup/src/components/kup-form/kup-form.scss +++ b/packages/ketchup/src/components/kup-form/kup-form.scss @@ -58,7 +58,7 @@ } &--titled { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); padding-top: 5px; position: relative; margin: 10px; 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 35df53867a..0a8d039996 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 @@ -55,7 +55,7 @@ ); --kup_imagelist_item_background_color: var( --kup-imagelist-item-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); display: block; @@ -128,7 +128,7 @@ .f-cell { height: 100%; width: 100%; - .f-cell__content{ + .f-cell__content { height: 100%; } .f-cell__content .image-list__wrapper { @@ -139,11 +139,11 @@ position: relative; height: 100%; } - .f-cell__content .image-list__wrapper.images{ + .f-cell__content .image-list__wrapper.images { height: 100%; justify-content: flex-end; - .f-image{ + .f-image { position: unset; overflow: auto; height: 100%; @@ -170,12 +170,11 @@ padding-bottom: 0px; box-sizing: border-box; width: 100%; - height: calc(100% - 16px - var(--kup-space-03)*2); + height: calc(100% - 16px - var(--kup-space-03) * 2); overflow: hidden; - .f-image__icon { - mask-size: 100%!important; + mask-size: 100% !important; } } @@ -189,7 +188,6 @@ } } - @media screen and (min-width: 678px) { :host { --kup_imagelist_columns: var(--kup-imagelist-columns, 8); 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 index 6ac1b97aad..6a382cc582 100644 --- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss +++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss @@ -18,7 +18,7 @@ :host { --kup_list_background_color: var( --kup-list-background-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_list_background_color_hover: var( --kup-list-background-color-hover, @@ -33,7 +33,7 @@ ); --kup_list_text_color_hover: var( --kup-list-text-color-hover, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --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)); diff --git a/packages/ketchup/src/components/kup-magic-box/kup-magic-box.scss b/packages/ketchup/src/components/kup-magic-box/kup-magic-box.scss index 65b2347de7..28ba005246 100644 --- a/packages/ketchup/src/components/kup-magic-box/kup-magic-box.scss +++ b/packages/ketchup/src/components/kup-magic-box/kup-magic-box.scss @@ -14,7 +14,7 @@ } .magic-box-wrapper { - border: 3px dashed var(--kup-border-color); + border: 3px dashed var(--kup-border-subtle); box-sizing: border-box; display: flex; flex-direction: column; diff --git a/packages/ketchup/src/components/kup-photo-frame/styles/kup-photo-frame-main.scss b/packages/ketchup/src/components/kup-photo-frame/styles/kup-photo-frame-main.scss index be9ab39658..594babbb4d 100644 --- a/packages/ketchup/src/components/kup-photo-frame/styles/kup-photo-frame-main.scss +++ b/packages/ketchup/src/components/kup-photo-frame/styles/kup-photo-frame-main.scss @@ -6,7 +6,7 @@ :host { --kup_photoframe_border: var( --kup-photoframe-border, - 1px inset var(--kup-border-color) + 1px inset var(--kup-border-subtle) ); --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 2000ms); diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss index 6e41812522..7ce330c76f 100644 --- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss +++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss @@ -17,16 +17,16 @@ padding-right: 10px; display: table-cell; vertical-align: middle; - border-bottom: 1px solid var(--kup-border-color, #acacac); - border-top: 1px solid var(--kup-border-color, #acacac); + border-bottom: 1px solid var(--kup-border-subtle, #acacac); + border-top: 1px solid var(--kup-border-subtle, #acacac); padding-left: 12px; &:first-child { - border-left: 1px solid var(--kup-border-color, #acacac); + border-left: 1px solid var(--kup-border-subtle, #acacac); border-bottom-left-radius: 4px; border-top-left-radius: 4px; } &:last-child { - border-right: 1px solid var(--kup-border-color, #acacac); + border-right: 1px solid var(--kup-border-subtle, #acacac); border-bottom-right-radius: 4px; border-top-right-radius: 4px; } @@ -84,7 +84,7 @@ } .project { - background: var(--kup-gray-color-10); + background: var(--kup-layer-1); border-bottom: 1px solid var(--kup-gray-color-20); border-radius: var(--kup-radius-00); box-sizing: border-box; @@ -121,8 +121,8 @@ box-sizing: border-box; grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr); place-items: center; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-90); + background-color: var(--kup-layer-1); + color: var(--kup-text-primary); font-weight: 400; & > * { @@ -154,8 +154,8 @@ border-radius: var(--kup-radius-00); grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr); place-items: center; - background-color: var(--kup-gray-color-10); - color: var(--kup-gray-color-90); + background-color: var(--kup-layer-1); + color: var(--kup-text-primary); font-weight: 400; box-sizing: border-box; diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss index 14797a8307..960f3f1ed0 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss @@ -27,7 +27,7 @@ } .calendarHeader { - fill: var(--kup-gray-color-10); + fill: var(--kup-layer-1); stroke: var(--kup-gray-color-20); stroke-width: 1.4; @include kup-heading-compact-01; diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss index 73265e6852..2c55d49472 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss @@ -1,5 +1,5 @@ .gridRow { - fill: var(--kup-gray-color-10); + fill: var(--kup-layer-1); } .gridRowLine { @@ -60,5 +60,5 @@ } .ghost-preview { - opacity: 0.5; -} \ No newline at end of file + opacity: 0.5; +} diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss index 9213fbef5a..6be9b33fd5 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss @@ -16,9 +16,9 @@ cursor: pointer; padding: var(--kup-space-03) var(--kup-space-05); &:hover { - background-color: var(--kup-gray-color-90); + background-color: var(--kup-text-primary); } - &:focus{ + &:focus { background-color: var(--kup-primary-color-60); } } diff --git a/packages/ketchup/src/components/kup-qlik/kup-qlik.scss b/packages/ketchup/src/components/kup-qlik/kup-qlik.scss index a873e0074f..d0fe0b5f3a 100644 --- a/packages/ketchup/src/components/kup-qlik/kup-qlik.scss +++ b/packages/ketchup/src/components/kup-qlik/kup-qlik.scss @@ -1,138 +1,138 @@ -.kup-qlik-container-fluid{ - width: 100%; +.kup-qlik-container-fluid { + width: 100%; } .kup-qlik-container { - width: 100%; + width: 100%; } -@media (min-width: 576px) { - .kup-qlik-container { - width: 576px; - } - - .kup-qlik-row > .qvobject { - flex: 0 0 auto; - min-width: 100px; - margin: 0px auto 5px auto; - } - } +@media (min-width: 576px) { + .kup-qlik-container { + width: 576px; + } + + .kup-qlik-row > .qvobject { + flex: 0 0 auto; + min-width: 100px; + margin: 0px auto 5px auto; + } +} // Medium devices (tablets, 768px and up) -@media (min-width: 768px) { - .kup-qlik-container { - width: 768px; - } - - .kup-qlik-row > .qvobject { - flex: 0 0 auto; - min-width: 100px; - margin: 0px auto 5px auto; - } - } +@media (min-width: 768px) { + .kup-qlik-container { + width: 768px; + } + + .kup-qlik-row > .qvobject { + flex: 0 0 auto; + min-width: 100px; + margin: 0px auto 5px auto; + } +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) { - .kup-qlik-container { - width: 992px; - } - - .kup-qlik-row > .qvobject { - flex: 0 0 auto; - min-width: 100px; - margin: 0px auto 5px auto; - } - } +@media (min-width: 992px) { + .kup-qlik-container { + width: 992px; + } + + .kup-qlik-row > .qvobject { + flex: 0 0 auto; + min-width: 100px; + margin: 0px auto 5px auto; + } +} // Extra large devices (large desktops, 1200px and up) -@media (min-width: 1200px) { - .kup-qlik-container { - width: 1200px; - } - - .kup-qlik-row > .qvobject { - flex: 0 0 auto; - min-width: 100px; - margin: 0px auto 5px auto; - } - } - - .kup-qlik-row { - display: flex; - display: ms-flexbox; - flex-wrap: wrap; - -ms-flex-wrap: wrap; - margin-bottom: 5px; - - .size-M{ - height: var(--lyo_obj-height); - } - - .size-S{ - height: calc(var(--lyo_obj-height)/2); - } - - .size-XS{ - height: calc(var(--lyo_obj-height)/3); - } - - .size-L{ - height: calc(var(--lyo_obj-height)*2); - } - - .size-XL{ - height: calc(var(--lyo_obj-height)*3); - } - - .bordered { - border: 1px solid var(--kup-border-color,#969696); - } - - .width-1 { - width: 8.3333%; - } - - .width-2 { - width: 16.6666%; - } - - .width-3 { - width: 25%; - } - - .width-4 { - width: 33.3333%; - } - - .width-5 { - width: 41.6666%; - } - - .width-6 { - width: 50%; - } - - .width-7 { - width: 58.3333%; - } - - .width-8 { - width: 66.6666%; - } - - .width-9 { - width: 75%; - } - - .width-10 { - width: 83.3333%; - } - - .width-11 { - width: 91.6666%; - } - - .width-12 { - width: 100%; - } -} \ No newline at end of file +@media (min-width: 1200px) { + .kup-qlik-container { + width: 1200px; + } + + .kup-qlik-row > .qvobject { + flex: 0 0 auto; + min-width: 100px; + margin: 0px auto 5px auto; + } +} + +.kup-qlik-row { + display: flex; + display: ms-flexbox; + flex-wrap: wrap; + -ms-flex-wrap: wrap; + margin-bottom: 5px; + + .size-M { + height: var(--lyo_obj-height); + } + + .size-S { + height: calc(var(--lyo_obj-height) / 2); + } + + .size-XS { + height: calc(var(--lyo_obj-height) / 3); + } + + .size-L { + height: calc(var(--lyo_obj-height) * 2); + } + + .size-XL { + height: calc(var(--lyo_obj-height) * 3); + } + + .bordered { + border: 1px solid var(--kup-border-subtle, #969696); + } + + .width-1 { + width: 8.3333%; + } + + .width-2 { + width: 16.6666%; + } + + .width-3 { + width: 25%; + } + + .width-4 { + width: 33.3333%; + } + + .width-5 { + width: 41.6666%; + } + + .width-6 { + width: 50%; + } + + .width-7 { + width: 58.3333%; + } + + .width-8 { + width: 66.6666%; + } + + .width-9 { + width: 75%; + } + + .width-10 { + width: 83.3333%; + } + + .width-11 { + width: 91.6666%; + } + + .width-12 { + width: 100%; + } +} diff --git a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss index 858debbbe1..4e5e25aac9 100644 --- a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss +++ b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss @@ -9,10 +9,7 @@ var(--kup-gray-color-80) ); - --kup_snackbar_text_color: var( - --kup-snackbar-text-color, - var(--kup-gray-color-10) - ); + --kup_snackbar_text_color: var(--kup-snackbar-text-color, var(--kup-layer-1)); animation: snackbar-show 125ms; bottom: 0; diff --git a/packages/ketchup/src/components/kup-spinner/styles/kup-spinner-main.scss b/packages/ketchup/src/components/kup-spinner/styles/kup-spinner-main.scss index 9531201144..823f4d6687 100644 --- a/packages/ketchup/src/components/kup-spinner/styles/kup-spinner-main.scss +++ b/packages/ketchup/src/components/kup-spinner/styles/kup-spinner-main.scss @@ -5,7 +5,7 @@ :host { --kup_spinner_border_color: var( --kup-spinner-border-color, - var(--kup-border-color) + var(--kup-border-subtle) ); display: block; diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss index 5a937f5eaa..f80761ed6d 100644 --- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss +++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss @@ -23,7 +23,7 @@ ); --kup_tabbar_text_color_active: var( --kup-tabbar-text-color-active, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_tabbar_border_color_dense: var( --kup-tabbar-border-color-dense, @@ -124,7 +124,7 @@ background: var(--kup-gray-color-20); border-right: 1px solid var(--kup_tabbar_border_color_dense); &.tab--active { - background: var(--kup-gray-color-10); + background: var(--kup-layer-1); } &:hover { background: var(--kup-gray-color-30); 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 8481e4d5f9..a0cef6763e 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 @@ -43,7 +43,7 @@ --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, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_tree_color_rgb: var(--kup-tree-color-rgb, var(--kup-text-color-rgb)); --kup_tree_font_family: var(--kup-tree-font-family, var(--kup-font-family)); @@ -58,7 +58,7 @@ --kup_tree_font_size: var(--kup-tree-font-size, var(--kup-font-size)); --kup_tree_text_hover_color: var( --kup-tree-text-hover-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_tree_icon_color: var(--kup-tree-icons-color, var(--kup-gray-color-70)); @@ -127,7 +127,7 @@ } tbody { - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); tr { } @@ -139,7 +139,7 @@ } tfoot { - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); } tr, diff --git a/packages/ketchup/src/debug.html b/packages/ketchup/src/debug.html index 8322c0e86e..6f2fa0aef6 100644 --- a/packages/ketchup/src/debug.html +++ b/packages/ketchup/src/debug.html @@ -61,7 +61,7 @@ } #debug-wrapper { - border: 1px solid var(--kup-border-color, black); + border: 1px solid var(--kup-border-subtle, black); } diff --git a/packages/ketchup/src/design-system.html b/packages/ketchup/src/design-system.html index 032a41090d..311856c525 100644 --- a/packages/ketchup/src/design-system.html +++ b/packages/ketchup/src/design-system.html @@ -60,7 +60,7 @@ width: 50px; height: 50px; border-radius: 50%; - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); } .selector { diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss index 47024d477b..0d0baa18a8 100644 --- a/packages/ketchup/src/f-components/f-button/f-button.scss +++ b/packages/ketchup/src/f-components/f-button/f-button.scss @@ -361,8 +361,8 @@ &.#{$kup-class-neutral} { .button { --kup_button_background_color: var(--kup-gray-color-70); - --kup_button_border_color_focus: var(--kup-gray-color-90); - --kup_button_text_color: var(--kup-gray-color-90); + --kup_button_border_color_focus: var(--kup-text-primary); + --kup_button_text_color: var(--kup-text-primary); &:hover { --kup_button_background_color_hover: var(--kup-gray-color-80); @@ -392,12 +392,12 @@ } &:active { - --kup_button_background_color_active: var(--kup-gray-color-90); + --kup_button_background_color_active: var(--kup-text-primary); --kup_button_text_color: var(--kup-gray-color-0); } &:focus { - --kup_button_background_color_focus: var(--kup-gray-color-90); + --kup_button_background_color_focus: var(--kup-text-primary); --kup_button_text_color: var(--kup-gray-color-0); } @@ -415,12 +415,12 @@ } &:focus { - background-color: var(--kup-gray-color-90); + background-color: var(--kup-text-primary); color: var(--kup-gray-color-0); } &:active { - background-color: var(--kup-gray-color-90); + background-color: var(--kup-text-primary); } &.button--disabled { diff --git a/packages/ketchup/src/f-components/f-button/f-button.tsx b/packages/ketchup/src/f-components/f-button/f-button.tsx index c37b53bc8d..3bdfb3ca90 100644 --- a/packages/ketchup/src/f-components/f-button/f-button.tsx +++ b/packages/ketchup/src/f-components/f-button/f-button.tsx @@ -68,7 +68,7 @@ function renderButton(props: FButtonProps): VNode { const propsFImage: FImageProps = { color: props.neutral - ? `var(--kup-gray-color-90)` + ? `var(--kup-text-primary)` : props.disabled ? `var(--kup_button_text_color_disabled)` : isOutlined || isFlat @@ -139,7 +139,7 @@ function renderButton(props: FButtonProps): VNode { function renderIconButton(props: FButtonProps): VNode { const propsFImage: FImageProps = { color: props.neutral - ? `var(--kup-gray-color-90)` + ? `var(--kup-text-primary)` : props.disabled ? `var(--kup_button_text_color_disabled)` : `var(--kup_button_text_color)`, diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.scss b/packages/ketchup/src/f-components/f-cell/f-cell.scss index eb9d32d040..9176fbd64a 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.scss +++ b/packages/ketchup/src/f-components/f-cell/f-cell.scss @@ -159,7 +159,7 @@ .input-field { background: none; border: none; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); height: var(--kup_textfield_fullwidth_height) !important; outline: none; padding: 4px; 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 41e198ccb3..dcfdaa2dc7 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -6,32 +6,32 @@ ); --kup_checkbox_disabled_checkmark_color: var( --kup-checkbox-disabled-checkmark-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_checkbox_padding: var(--kup-checkbox-padding, 11px); --kup_checkbox_primary_color: var( --kup-checkbox-primary-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_checkbox_primary_color_rgb: var( --kup-checkbox-primary-color-rgb, - var(--kup-gray-color-90-rgb) + var(--kup-text-primary-rgb) ); --kup_checkbox_text_color: var( --kup-checkbox-text-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_checkbox_text_color_rgb: var( --kup-checkbox-text-color-rgb, - var(--kup-gray-color-90-rgb) + var(--kup-text-primary-rgb) ); --kup_checkbox_text_on_primary_color: var( --kup-checkbox-text-on-primary-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_checkbox_text_on_primary_color_rgb: var( --kup-checkbox-text-on-primary-color-rgb, - var(--kup-gray-color-10-rgb) + var(--kup-layer-1-rgb) ); @include kup-body-compact-01; diff --git a/packages/ketchup/src/f-components/f-paginator/f-paginator.scss b/packages/ketchup/src/f-components/f-paginator/f-paginator.scss index 68970931e2..64454f3dd5 100644 --- a/packages/ketchup/src/f-components/f-paginator/f-paginator.scss +++ b/packages/ketchup/src/f-components/f-paginator/f-paginator.scss @@ -1,5 +1,5 @@ .f-paginator { - background-color: var(--kup-gray-color-10); + background-color: var(--kup-layer-1); display: flex; flex-wrap: wrap; align-items: center; 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 054e8ab14d..ecd62b88c4 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 @@ -26,7 +26,7 @@ ); --kup_progressbar_activebar_text_color: var( --kup-progressbar-text-on-primary-color, - var(--kup-gray-color-10) + var(--kup-layer-1) ); --kup_progressbar_track_background_color: var( --kup-progressbar-track-background-color, diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index 3a3dfb6ae5..90f821ee94 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -4,7 +4,7 @@ --kup_radio_font_weight: var(--kup-radio-font-weight, 400); --kup_radio_outer_circle_color: var( --kup-radio-outer-circle-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_radio_focus_color: var( --kup-radio-focus-color, @@ -12,13 +12,13 @@ ); --kup_radio_primary_color: var( --kup-radio-primary-color, - var(--kup-gray-color-90) + var(--kup-text-primary) ); --kup_radio_primary_color_rgb: var( --kup-radio-primary-color-rgb, - var(--kup-gray-color-90-rgb) + var(--kup-text-primary-rgb) ); - --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-gray-color-90)); + --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-primary)); --kup_radio_text_color_disabled: var( --kup-radio-text-color-disabled, var(--kup-gray-color-30) diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index dac629fc36..2f440b01cc 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -8,7 +8,7 @@ .f-text-field { --kup_textfield_background_color_rgb: var( --kup-textfield-background-color-rgb, - var(--kup-gray-color-10-rgb) + var(--kup-layer-1-rgb) ); --kup_textfield_background_color: var( --kup-textfield-background-color, diff --git a/packages/ketchup/src/kupinteract.html b/packages/ketchup/src/kupinteract.html index 1054dc7a25..1517d1c546 100644 --- a/packages/ketchup/src/kupinteract.html +++ b/packages/ketchup/src/kupinteract.html @@ -28,7 +28,7 @@ padding: 1rem; } #wrapper { - border: 3px solid var(--kup-border-color); + border: 3px solid var(--kup-border-subtle); height: 500px; overflow: auto; padding: 30px; @@ -43,7 +43,7 @@ } .handle { background-color: var(--kup-primary-color); - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); color: var(--kup-text-on-primary-color); margin: auto; padding: 5px; diff --git a/packages/ketchup/src/managers/kup-debug/kup-debug.ts b/packages/ketchup/src/managers/kup-debug/kup-debug.ts index e4dc8a6b02..bf9d51ede8 100644 --- a/packages/ketchup/src/managers/kup-debug/kup-debug.ts +++ b/packages/ketchup/src/managers/kup-debug/kup-debug.ts @@ -107,7 +107,7 @@ export class KupDebug { icon: 'power_settings_new', id: 'kup-debug-off', customStyle: - ':host {--kup-font-size: 0.875em; border-left: 1px solid var(--kup-border-color); border-right: 1px solid var(--kup-border-color);}', + ':host {--kup-font-size: 0.875em; border-left: 1px solid var(--kup-border-subtle); border-right: 1px solid var(--kup-border-subtle);}', title: dom.ketchup.language.translate(KupLanguageDebug.OFF), }, { @@ -121,7 +121,7 @@ export class KupDebug { { checked: this.autoPrint, customStyle: - ':host {--kup-font-size: 0.875em; border-right: 1px solid var(--kup-border-color);}', + ':host {--kup-font-size: 0.875em; border-right: 1px solid var(--kup-border-subtle);}', icon: 'speaker_notes', iconOff: 'speaker_notes_off', id: 'kup-debug-autoprint', @@ -149,7 +149,7 @@ export class KupDebug { { className: 'kup-full-height', customStyle: - ':host {border-left: 1px solid var(--kup-border-color);}', + ':host {border-left: 1px solid var(--kup-border-subtle);}', icon: 'download', id: 'kup-debug-dl-props', label: 'Props', @@ -161,7 +161,7 @@ export class KupDebug { { className: 'kup-full-height', customStyle: - ':host {border-right: 1px solid var(--kup-border-color);}', + ':host {border-right: 1px solid var(--kup-border-subtle);}', icon: 'download', id: 'kup-debug-dl-all', label: dom.ketchup.language.translate( diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts index 4b50f952b9..5c988d9b7d 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts @@ -290,7 +290,7 @@ export enum KupThemeColorValues { TITLE_BACKGROUND = '--kup-title-background-color', TITLE = '--kup-title-color', ICON = '--kup-gray-color-70', - BORDER = '--kup-border-color', + BORDER = '--kup-border-subtle', INFO = '--kup-info-color', SUCCESS = '--kup-success-color-40', WARNING = '--kup-warning-color-40', From e88ee2a1149056d2226e477b92fef678dc67f6ff Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 14:20:50 +0200 Subject: [PATCH 09/14] update kup-data-table --- .../styles/kup-data-table-main.scss | 30 +++++++++++-------- .../kup-theme/kup-theme-application.scss | 4 +++ 2 files changed, 21 insertions(+), 13 deletions(-) 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 fb6a98cc05..909f9c1bf2 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 @@ -38,13 +38,17 @@ --kup-datatable-background-color, var(--kup-layer-1) ); - --kup_datatable_background_color_active: var( - --kup-datatable-background-color-active, - var(--kup-gray-color-20) + --kup_datatable_th_background_color: var( + --kup-datatable-th-background-color, + var(--kup-layer-2) + ); + --kup_datatable_background_color_selected: var( + --kup-datatable-background-color-selected, + var(--kup-layer-1-selected) ); --kup_datatable_border: var( --kup-datatable-border-color, - 1px solid var(--kup-gray-color-20) + 1px solid var(--kup-border-subtle) ); --kup_datatable_font_family: var( --kup-datatable-font-family, @@ -69,11 +73,11 @@ --kup_datatable_background_color_hover: var( --kup-datatable-background-color-hover, - var(--kup-gray-color-20) + var(--kup-layer-1-hover) ); --kup_datatable_text_color_hover: var( --kup-datatable-background-color-hover, - var(--kup-gray-color-80) + var(--kup-text-primary) ); display: block; @@ -280,7 +284,7 @@ table { } th { - background-color: var(--kup-gray-color-20); + background-color: var(--kup_datatable_th_background_color); border: var(--kup_datatable_th_border); border-left: 0 none; // Important: only the first cell must have the border left, otherwise the th will have a visual 2px border between each other. box-sizing: border-box; @@ -375,7 +379,7 @@ tbody { &.selected { td { - background-color: var(--kup_datatable_background_color_active); + background-color: var(--kup_datatable_background_color_selected); } } @@ -388,9 +392,9 @@ tbody { // grouping &.group { - background: var(--kup-gray-color-20); + background: var(--kup-layer-3); border-top: var(--kup_datatable_border); - color: var(--kup-gray-color-70); + color: var(--kup-text-secondary); font-weight: bold; cursor: pointer; @@ -418,7 +422,7 @@ tbody { @include kup-heading-compact-01; } & .kup-icon { - background-color: var(--kup-gray-color-70); + background-color: var(--kup-text-secondary); } } @@ -427,7 +431,7 @@ tbody { padding: 0.5em 0.6em; &.negative-number { - color: var(--kup-danger-color); + color: var(--kup-danger-color-60); } } } @@ -499,7 +503,7 @@ th.obj:hover span:not(.overlay-action) { text-overflow: ellipsis; transition: color 200ms; &:hover { - color: var(--kup-gray-color-70); + color: var(--kup-text-secondary); } } } diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index 6d9bc6df7c..a97c64fc46 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -26,6 +26,10 @@ --kup-layer-2-hover: var(--kup-gray-color-20-hover); --kup-layer-2-selected: var(--kup-gray-color-30); --kup-layer-2-focus: var(--kup-gray-color-40); + --kup-layer-3: var(--kup-gray-color-30); + --kup-layer-3-hover: var(--kup-gray-color-30-hover); + --kup-layer-3-selected: var(--kup-gray-color-40); + --kup-layer-3-focus: var(--kup-gray-color-50); // BORDER --kup-border-interactive: var(--kup-primary-color-60); From ce432a8bb2f53daafbc04803da4864235b2dfe23 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 14:48:02 +0200 Subject: [PATCH 10/14] update components --- .../src/components/kup-dialog/kup-dialog.scss | 15 +++++--- .../kup-drawer/styles/kup-drawer-main.scss | 2 +- .../src/components/kup-form/kup-form.scss | 4 +-- .../src/components/kup-gauge/kup-gauge.scss | 4 +-- .../styles/kup-image-list-main.scss | 8 +++-- .../kup-input-panel/kup-input-panel.scss | 30 ++++++++++------ .../kup-list/styles/kup-list-main.scss | 8 ++--- .../components/kup-nav-bar/kup-nav-bar.scss | 6 +++- .../kup-planner/utils/gantt-table.module.scss | 8 ++--- .../kup-gantt-calendar.scss | 8 ++--- .../utils/kup-gantt/kup-gantt.scss | 2 +- .../kup-grid-renderer/kup-grid-renderer.scss | 6 ++-- .../utils/kup-task-list/kup-task-list.scss | 2 +- .../styles/kup-snackbar-main.scss | 11 ++++-- .../components/kup-tab-bar/kup-tab-bar.scss | 14 ++++---- .../kup-tree/styles/kup-tree-main.scss | 35 +++++++++++-------- .../kup-theme/kup-theme-application.scss | 5 +++ 17 files changed, 104 insertions(+), 64 deletions(-) diff --git a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss index 34f63b40be..ac31f3f396 100644 --- a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss +++ b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss @@ -4,10 +4,17 @@ :host { --kup_dialogheader_text_color: var( - --kup-text-secondary, - var(--kup-gray-color-70) + --kup-dialogheader-text-color, + var(--kup-text-secondary) + ); + --kup_dialog_background_color: var( + --kup-dialog-background-color, + var(--kup-layer-0) + ); + --kup_dialog_header_background_color: var( + --kup-dialog-header-background-color, + var(--kup-layer-1) ); - --kup_dialog_background_color: var(--kup-layer-0, var(--kup-gray-color-0)); --kup_dialog_header_height: var(--kup-dialog-header-height, 2em); box-sizing: border-box; @@ -43,7 +50,7 @@ position: relative; width: 100%; min-height: 50px; - background-color: var(--kup-layer-2, var(--kup-gray-color-20)); + background-color: var(--kup_dialog_header_background_color); &__title { padding: var(--kup-space-05); diff --git a/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss b/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss index 289f622200..246094b0d0 100644 --- a/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss +++ b/packages/ketchup/src/components/kup-drawer/styles/kup-drawer-main.scss @@ -17,7 +17,7 @@ --kup_drawer_slotted_color: var( --kup-drawer-slotted-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_drawer_background_color: var( --kup-drawer-background-color, diff --git a/packages/ketchup/src/components/kup-form/kup-form.scss b/packages/ketchup/src/components/kup-form/kup-form.scss index b38a26af77..d086798722 100644 --- a/packages/ketchup/src/components/kup-form/kup-form.scss +++ b/packages/ketchup/src/components/kup-form/kup-form.scss @@ -11,9 +11,9 @@ :host { --kup_form_background_color: var( --kup-form-background-color, - var(--kup-background-color) + var(--kup-layer-0) ); - --kup_form_color: var(--kup-form-color, var(--kup-text-color)); + --kup_form_color: var(--kup-form-color, var(--kup-text-secondary)); --kup_form_font_family: var(--kup-form-font-family, var(--kup-font-family)); --kup_form_font_size: var(--kup-form-font-size, var(--kup-font-size)); --kup_form_label_alignment: var(--kup-form-label-alignment); diff --git a/packages/ketchup/src/components/kup-gauge/kup-gauge.scss b/packages/ketchup/src/components/kup-gauge/kup-gauge.scss index 034738e8b8..18e719e2c5 100644 --- a/packages/ketchup/src/components/kup-gauge/kup-gauge.scss +++ b/packages/ketchup/src/components/kup-gauge/kup-gauge.scss @@ -6,12 +6,12 @@ */ :host { - --kup_gauge_color: var(--kup-gauge-color, var(--kup-text-color)); + --kup_gauge_color: var(--kup-gauge-color, var(--kup-text-secondary)); --kup_gauge_font_family: var(--kup-gauge-font-family, var(--kup-font-family)); --kup_gauge_font_size: var(--kup-gauge-font-size, var(--kup-font-size)); --kup_gauge_needle_color: var( --kup-gauge-needle-color, - var(--kup-text-color) + var(--kup-text-secondary) ); display: inline-block; 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 0a8d039996..1e8e90ce64 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 @@ -51,12 +51,16 @@ ); --kup_imagelist_text_color: var( --kup-imagelist-text-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_imagelist_item_background_color: var( --kup-imagelist-item-background-color, var(--kup-layer-1) ); + --kup_imagelist_item_background_color_hover: var( + --kup-imagelist-item-background-color-hover, + var(--kup-layer-1-hover) + ); display: block; } @@ -160,7 +164,7 @@ padding: var(--kup_imagelist_item_padding); width: var(--kup_imagelist_item_width); &:hover { - background-color: var(--kup-gray-color-20); + background-color: var(--kup_imagelist_item_background_color_hover); } } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss index 0e67bc73dc..7d82e0c16e 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss @@ -9,11 +9,22 @@ */ :host { - --kup_input_panel_background_color: var(--kup-input-panel-background-color, - var(--kup-background-color)); - --kup_input_panel_color: var(--kup-input-panel-color, var(--kup-text-color)); - --kup_input_panel_font_family: var(--kup-input-panel-font-family, var(--kup-font-family)); - --kup_input_panel_font_size: var(--kup-input-panel-font-size, var(--kup-font-size)); + --kup_input_panel_background_color: var( + --kup-input-panel-background-color, + var(--kup-layer-0) + ); + --kup_input_panel_color: var( + --kup-input-panel-color, + var(--kup-text-secondary) + ); + --kup_input_panel_font_family: var( + --kup-input-panel-font-family, + var(--kup-font-family) + ); + --kup_input_panel_font_size: var( + --kup-input-panel-font-size, + var(--kup-font-size) + ); --kup_input_panel_label_alignment: var(--kup-input-panel-label-alignment); --kup_input_panel_label_width: var(--kup-input-panel-label-width); --kup_input_panel_padding: var(--kup-input-panel-padding, 1em 0); @@ -42,11 +53,10 @@ display: grid; .f-cell__content { - >* { + > * { width: 100%; } } - } &__horizontal-section { @@ -63,10 +73,9 @@ flex-direction: column; justify-content: center; - >.f-cell { + > .f-cell { flex: 1; } - } .f-cell.number-cell { @@ -76,6 +85,5 @@ font-family: var(--kup_cell_font_family); } } - } -} \ No newline at end of file +} 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 index 6a382cc582..94f7e696bf 100644 --- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss +++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss @@ -22,14 +22,14 @@ ); --kup_list_background_color_hover: var( --kup-list-background-color-hover, - var(--kup-gray-color-20) + var(--kup-layer-1-hover) ); - --kup_list_focus_color: var(--kup-list-focus-color, var(--kup-primary-color)); - --kup_list_text_color: var(--kup-list-text-color, var(--kup-gray-color-70)); + --kup_list_focus_color: var(--kup-list-focus-color, var(--kup-text-main)); + --kup_list_text_color: var(--kup-list-text-color, var(--kup-text-secondary)); --kup_list_item_text_color: var( --kup-list-item-text-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_list_text_color_hover: var( --kup-list-text-color-hover, diff --git a/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss b/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss index 8756186912..400aa1089a 100644 --- a/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss +++ b/packages/ketchup/src/components/kup-nav-bar/kup-nav-bar.scss @@ -14,6 +14,10 @@ --kup-navbar-item-color, var(--kup-primary-color-0) ); + --kup_navbar_background_color: var( + --kup-navbar-background-color, + var(--kup-layer-0-inverted) + ); --kup_navbar_box_shadow: var( --kup-navbar-box-shadow, 0 2px 4px -1px rgba(128, 128, 128, 0.2), @@ -51,7 +55,7 @@ } .nav-bar { - background-color: var(--kup-navbar-background-color); + background-color: var(--kup_navbar_background_color); // box-shadow: var(--kup_navbar_box_shadow); box-sizing: border-box; color: var(--kup_navbar_item_color); diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss index 7ce330c76f..2c9b2f31e8 100644 --- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss +++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss @@ -85,10 +85,10 @@ .project { background: var(--kup-layer-1); - border-bottom: 1px solid var(--kup-gray-color-20); + border-bottom: 1px solid var(--kup-border-subtle); border-radius: var(--kup-radius-00); box-sizing: border-box; - color: var(--kup-text-color, #595959); + color: var(--kup-text-secondary); cursor: pointer; display: grid; font-weight: 400; @@ -117,7 +117,7 @@ .subrow { cursor: pointer; display: grid; - border-bottom: 1px solid var(--kup-gray-color-20); + border-bottom: 1px solid var(--kup-border-subtle); box-sizing: border-box; grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr); place-items: center; @@ -150,7 +150,7 @@ padding: var(--kup-space-03); cursor: pointer; display: grid; - border-bottom: 1px solid var(--kup-gray-color-20); + border-bottom: 1px solid var(--kup-border-subtle); border-radius: var(--kup-radius-00); grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr); place-items: center; diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss index 960f3f1ed0..9afe963049 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.scss @@ -1,6 +1,6 @@ .calendarBottomText { text-anchor: middle; - fill: var(--kup-gray-color-70); + fill: var(--kup-text-secondary); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -11,12 +11,12 @@ } .calendarTopTick { - stroke: var(--kup-gray-color-20); + stroke: var(--kup-border-subtle); } .calendarTopText { text-anchor: middle; - fill: var(--kup-gray-color-70); + fill: var(--kup-text-secondary); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -28,7 +28,7 @@ .calendarHeader { fill: var(--kup-layer-1); - stroke: var(--kup-gray-color-20); + stroke: var(--kup-border-subtle); stroke-width: 1.4; @include kup-heading-compact-01; } diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss index 768e01e20d..3345982457 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss @@ -8,7 +8,7 @@ } .ganttContainer { - background: var(--kup-gray-color-20); + background: var(--kup-layer-2); border-radius: var(--kup-radius-00); overflow: hidden; padding: var(--kup-space-05); diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss index 2c55d49472..2c0241ede7 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.scss @@ -7,7 +7,7 @@ } .gridTick { - stroke: var(--kup-gray-color-20); + stroke: var(--kup-border-subtle); } .barHandle { @@ -37,7 +37,7 @@ } .barLabel { - fill: var(--kup-gray-colo-0); + fill: var(--kup-layer-0); text-anchor: middle; font-weight: lighter; -webkit-touch-callout: none; @@ -49,7 +49,7 @@ } .barLabelOutside { - fill: var(--kup-gray-color-70); + fill: var(--kup-text-secondary); text-anchor: start; -webkit-touch-callout: none; -webkit-user-select: none; diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss index bba02947fb..3909520e88 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss +++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss @@ -1,5 +1,5 @@ .tasks { - background: var(--kup-gray-color-20); + background: var(--kup-layer-2); border-radius: var(--kup-radius-00); padding: var(--kup-space-05); margin-right: var(--kup-space-05); diff --git a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss index 4e5e25aac9..55e72f7b33 100644 --- a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss +++ b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss @@ -1,12 +1,17 @@ :host { --kup_snackbar_border_left_color: var( --kup-snackbar-border-left-color, - var(--kup-primary-color-60) + var(--kup-border-interactive) ); --kup_snackbar_background_color: var( --kup-snackbar-background-color, - var(--kup-gray-color-80) + var(--kup-layer-0-inverted) + ); + + --kup_snackbar_text_color: var( + --kup-snackbar-text-color, + var(--kup-text-primary-inverted) ); --kup_snackbar_text_color: var(--kup-snackbar-text-color, var(--kup-layer-1)); @@ -42,7 +47,7 @@ .snackbar { align-items: center; background-color: var(--kup_snackbar_background_color); - color: var(--kup-navbar-color); + color: var(--kup_snackbar_text_color); display: flex; justify-content: space-between; max-width: 672px; diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss index f80761ed6d..56f1b4efb5 100644 --- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss +++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss @@ -11,15 +11,15 @@ :host { --kup_tabindicator_border_bottom_color: var( --kup-tab-indicator-border-bottom-color, - var(--kup-gray-color-20) + var(--kup-layer-2) ); --kup_tabindicator_border_bottom_color_active: var( --kup-tabindicator-border-bottom-color-active, - var(--kup-primary-color-60) + var(--kup-border-interactive) ); --kup_tabbar_text_color: var( --kup-tabbar-text-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_tabbar_text_color_active: var( --kup-tabbar-text-color-active, @@ -27,7 +27,7 @@ ); --kup_tabbar_border_color_dense: var( --kup-tabbar-border-color-dense, - var(--kup-gray-color-50) + var(--kup-border-strong) ); --kup_tabbar_font_size: var(--kup-tabbar-font-size, var(--kup-font-size)); @@ -116,12 +116,12 @@ } } &[disabled] { - --kup_tabindicator_border_bottom_color: var(--kup-gray-color-30); - --kup_tabbar_text_color: var(--kup-gray-color-30); + --kup_tabindicator_border_bottom_color: var(--kup-border-disabled); + --kup_tabbar_text_color: var(--kup-text-disabled); pointer-events: none; } &.kup-dense { - background: var(--kup-gray-color-20); + background: var(--kup-layer-2); border-right: 1px solid var(--kup_tabbar_border_color_dense); &.tab--active { background: var(--kup-layer-1); 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 a0cef6763e..5dd2ee14b3 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 @@ -17,30 +17,40 @@ :host { --kup_tree_header_background_color: var( --kup-tree-header-background-color, - var(--kup-gray-color-20) + var(--kup-layer-2) + ); + + --kup_tree_body_background_color: var( + --kup-tree-body-background-color, + var(--kup-layer-1) + ); + + --kup_tree_body_background_color_hover: var( + --kup-tree-body-background-color-hover, + var(--kup-layer-1-hover) ); --kup_tree_border_color: var( --kup-tree-border-color, - var(--kup-gray-color-20) + var(--kup-border-subtle) ); --kup_tree_tr_outline_color: var( --kup-tree-tr-outline-color, - var(--kup-primary-color-60) + var(--kup-border-interactive) ); --kup_tree_tr_background_color_hover: var( --kup-tree-tr-background-color-hover, - var(--kup-gray-color-20) + var(--kup-layer-1-hover) ); --kup_tree_tr_background_color_focus: var( --kup-tree-tr-background-color-focus, - var(--kup-gray-color-30) + var(--kup-layer-1-selected) ); - --kup_tree_text_color: var(--kup-tree-text-color, var(--kup-gray-color-70)); + --kup_tree_text_color: var(--kup-tree-text-color, var(--kup-text-secondary)); --kup_tree_header_text_color: var( --kup-tree-header-text-color, var(--kup-text-primary) @@ -49,7 +59,7 @@ --kup_tree_font_family: var(--kup-tree-font-family, var(--kup-font-family)); --kup_tree_filter_background_color: var( --kup-tree-filter-background-color, - var(--kup-background-color) + var(--kup-layer-1) ); --kup_tree_font_family_monospace: var( --kup-tree-font-family-monospace, @@ -60,7 +70,7 @@ --kup-tree-text-hover-color, var(--kup-text-primary) ); - --kup_tree_icon_color: var(--kup-tree-icons-color, var(--kup-gray-color-70)); + --kup_tree_icon_color: var(--kup-tree-icons-color, var(--kup-text-secondary)); display: block; font-family: var(--kup_tree_font_family); @@ -127,7 +137,7 @@ } tbody { - background-color: var(--kup-layer-1); + background-color: var(--kup_tree_body_background_color); tr { } @@ -139,7 +149,7 @@ } tfoot { - background-color: var(--kup-layer-1); + background-color: var(--kup_tree_body_background_color); } tr, @@ -238,10 +248,7 @@ } &--selected:not(.kup-tree__node--disabled) td { - // outline-offset: -2px; background-color: var(--kup_tree_tr_background_color_focus); - // outline: 2px solid var(--kup_tree_tr_outline_color); - // border-left: 4px solid var(--kup_tree_tr_outline_color); } } @@ -308,7 +315,7 @@ tfoot { font-weight: bold; padding: 0.5em 0.3125em; &:hover { - background-color: var(--kup-background-color); + background-color: var(--kup_tree_body_background_color_hover); } &:first-of-type { border: none; diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index a97c64fc46..e4992f6a67 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -18,6 +18,10 @@ --kup-layer-0-hover: var(--kup-gray-color-0-hover); --kup-layer-0-selected: var(--kup-gray-color-20); --kup-layer-0-focus: var(--kup-gray-color-30); + --kup-layer-0-inverted: var(--kup-gray-color-90); + --kup-layer-0-inverted-hover: var(--kup-gray-color-90-hover); + --kup-layer-0-inverted-selected: var(--kup-gray-color-80); + --kup-layer-0-inverted-focus: var(--kup-gray-color-70); --kup-layer-1: var(--kup-gray-color-10); --kup-layer-1-hover: var(--kup-gray-color-10-hover); --kup-layer-1-selected: var(--kup-gray-color-20); @@ -43,6 +47,7 @@ // TEXT --kup-text-main: var(--kup-primary-color-60); --kup-text-primary: var(--kup-gray-color-90); + --kup-text-primary-inverted: var(--kup-gray-color-0); --kup-text-secondary: var(--kup-gray-color-70); --kup-text-placeholder: var(--kup-gray-color-40); --kup-text-helper: var(--kup-gray-color-60); From f53174d6edd23e49bdbfb4c80f5f1ccbddba44fd Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 14:53:28 +0200 Subject: [PATCH 11/14] update f-components --- packages/ketchup/src/f-components/f-chip/f-chip.scss | 8 ++++---- .../ketchup/src/f-components/f-paginator/f-paginator.scss | 8 ++++---- .../src/f-components/f-progress-bar/f-progress-bar.scss | 6 +++--- packages/ketchup/src/f-components/f-radio/f-radio.scss | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index 0cbac42569..815da295a0 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -1,11 +1,11 @@ .f-chip { --kup_chip_background_color: var( --kup-chip-background-color, - var(--kup-gray-color-30) + var(--kup-layer-3) ); --kup_chip_border_color: var( --kup-chip-border-color, - var(--kup-gray-color-80) + var(--kup-border-strong) ); --kup_chip_border_radius: var( --kup-chip-border-radius, @@ -21,13 +21,13 @@ --kup_chip_padding: var(--kup-chip-padding, var(--kup-space-03)); --kup_chip_primary_color: var( --kup-chip-primary-color, - var(--kup-gray-color-80) + var(--kup-text-primary) ); --kup_chip_primary_color_rgb: var( --kup-chip-primary-color-rgb, var(--kup-primary-color-rgb) ); - --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-gray-color-80)); + --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-text-primary)); --kup_chip_text_color_rgb: var( --kup-chip-text-color-rgb, var(--kup-text-color-rgb) diff --git a/packages/ketchup/src/f-components/f-paginator/f-paginator.scss b/packages/ketchup/src/f-components/f-paginator/f-paginator.scss index 64454f3dd5..7064387113 100644 --- a/packages/ketchup/src/f-components/f-paginator/f-paginator.scss +++ b/packages/ketchup/src/f-components/f-paginator/f-paginator.scss @@ -7,7 +7,7 @@ .load-more-button { padding: 0; - border-right: 1px solid var(--kup-gray-color-30); + border-right: 1px solid var(--kup-border-subtle); flex: 2; button { width: 100%; @@ -24,13 +24,13 @@ &.page-selector { padding: 0 var(--kup-space-05); - border-right: 1px solid var(--kup-gray-color-30); + border-right: 1px solid var(--kup-border-subtle); flex: 2; } &.rows-selector { padding: 0 var(--kup-space-05); - border-right: 1px solid var(--kup-gray-color-30); + border-right: 1px solid var(--kup-border-subtle); flex: 2; } } @@ -59,6 +59,6 @@ border-right: none; } .load-more-button { - border-left: 1px solid var(--kup-gray-color-30); + border-left: 1px solid var(--kup-border-subtle); } } 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 ecd62b88c4..7b137aac0e 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 @@ -18,11 +18,11 @@ ); --kup_progressbar_text_color: var( --kup-progressbar-text-color, - var(--kup-gray-color-70) + var(--kup-text-secondary) ); --kup_progressbar_text_color_rgb: var( --kup-progressbar-text-color-rgb, - var(--kup-text-color-70-rgb) + var(--kup-text-secondary-rgb) ); --kup_progressbar_activebar_text_color: var( --kup-progressbar-text-on-primary-color, @@ -30,7 +30,7 @@ ); --kup_progressbar_track_background_color: var( --kup-progressbar-track-background-color, - var(--kup-gray-color-20) + var(--kup-layer-2) ); --kup_progressbar_width: var(--kup-progressbar-width, 100%); diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index 90f821ee94..836924d623 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -21,7 +21,7 @@ --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-primary)); --kup_radio_text_color_disabled: var( --kup-radio-text-color-disabled, - var(--kup-gray-color-30) + var(--kup-text-disabled) ); font-family: var(--kup_radio_font_family); From 92f93eb3e8f0998a1ea87ef442044f7f75c46a1a Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 10 Jun 2024 15:03:42 +0200 Subject: [PATCH 12/14] minor fixes --- .../src/f-components/f-progress-bar/f-progress-bar.scss | 2 +- .../ketchup/src/f-components/f-text-field/f-text-field.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) 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 7b137aac0e..bbc4627834 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-layer-2) + var(--kup-layer-3) ); --kup_progressbar_width: var(--kup-progressbar-width, 100%); diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 2f440b01cc..24be5f40ff 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -8,7 +8,7 @@ .f-text-field { --kup_textfield_background_color_rgb: var( --kup-textfield-background-color-rgb, - var(--kup-layer-1-rgb) + var(--kup-layer-1) ); --kup_textfield_background_color: var( --kup-textfield-background-color, @@ -150,7 +150,7 @@ outline: 2px solid transparent; outline-offset: -2px; border-bottom: 1px solid var(--kup_textfield_border_color); - background: rgb(var(--kup_textfield_background_color_rgb)); + background-color: var(--kup_textfield_background_color_rgb); align-items: center; padding: 0px var(--kup-space-05); @@ -326,7 +326,7 @@ } &:not(.mdc-text-field--disabled) { - background-color: rgb(var(--kup_textfield_background_color_rgb)); + background-color: var(--kup_textfield_background_color_rgb); } } From 5452fb2509cd2c29a31ebf2a0e141cde918a6775 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 11 Jun 2024 16:05:50 +0200 Subject: [PATCH 13/14] general fixes --- packages/ketchup-showcase/public/showcase.css | 2 +- .../built-in/kup-card-built-in-1.scss | 2 +- .../built-in/kup-card-built-in-5.scss | 15 +- .../scalable/kup-card-scalable-10.scss | 10 +- .../kup-card/scalable/kup-card-scalable.scss | 11 +- .../styles/kup-data-table-main.scss | 7 +- .../styles/kup-data-table-paginator.scss | 2 +- .../src/components/kup-list/kup-list.tsx | 2 +- .../kup-planner/utils/gantt-table.module.scss | 2 +- .../components/kup-tab-bar/kup-tab-bar.scss | 6 +- .../src/f-components/f-image/f-image.tsx | 2 +- .../src/f-components/f-radio/f-radio.scss | 4 +- .../f-text-field/f-text-field.scss | 1 - .../kup-theme/kup-theme-component.scss | 4 +- .../kup-theme/kup-theme-declarations.ts | 2 +- .../src/managers/kup-theme/themes.json | 150 ++++++++++++++++++ 16 files changed, 195 insertions(+), 27 deletions(-) diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css index 57edf0d039..1bcd9fbc31 100644 --- a/packages/ketchup-showcase/public/showcase.css +++ b/packages/ketchup-showcase/public/showcase.css @@ -40,7 +40,7 @@ code.flat { background: var(--kup-layer-1); border-radius: var(--kup-radius-00); - border: 1px solid var(--kup-gray-color-30); + border: 1px solid var(--kup-border-subtle); color: var(--kup-text-primary); display: flex; font-family: var(--kup-font-family-monospace); diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss index 167c04c0ee..d59bac926a 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss @@ -10,7 +10,7 @@ ); --kup_card_selected_color_hover: var( --kup-card-selected-color-hover, - var(--kup-gray-color-30) + var(--kup-layer-1-hover) ); --kup_card_box_shadow: var( --kup-box-shadow, diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss index e7ba9b092e..6cb312a105 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss @@ -3,14 +3,19 @@ --kup-card-background-color, var(--kup-layer-1) ); + --kup_card_background_color_hover: var( + --kup-card-background-color-hover, + var(--kup-layer-1-hover) + ); --kup_card_box_shadow: var( --kup-box-shadow, 0px 3px 6px 0 rgba(0, 0, 0, 0.3) ); - --kup-card_border_color: var( + --kup_card_border_color: var( --kup-card-border-color, - var(--kup-gray-color-20) + var(--kup-border-subtle) ); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); background: var(--kup_card_background_color); box-shadow: var(--kup_card_box_shadow); box-sizing: border-box; @@ -23,8 +28,8 @@ > tr > td { > div.value { text-align: right; - color: var(--kup-text-color, var(--kup-gray-color-70)); - border-bottom: 1px solid var(--kup-card_border_color); + color: var(--kup_card_text_color); + border-bottom: 1px solid var(--kup_card_border_color); min-height: 1.5em; } @@ -44,7 +49,7 @@ text-transform: capitalize; &:hover { - background-color: var(--kup-gray-color-30); + background-color: var(--kup_card_background_color_hover); } } } 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 41194053a3..1565e0c4c1 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,6 +1,12 @@ .scalable-layout-10 { - background-color: var(--kup-layer-1); - color: var(--kup-gray-color-70); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + + background-color: var(--kup_card_background_color); + color: var(--kup_card_text_color); height: 100%; display: flex; justify-content: unset; diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss index faf9d6b86e..8c05cbf306 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss @@ -10,7 +10,15 @@ @import 'kup-card-scalable-10.scss'; .scalable-card { - background-color: var(--kup-layer-1); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + + background-color: var(--kup_card_background_color); + color: var(--kup_card_text_color); + align-items: center; border-radius: var(--kup-space-00); display: flex; @@ -29,5 +37,4 @@ width: 100%; box-sizing: border-box; padding: var(--kup-space-03); - color: var(--kup-gray-color-70); } 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 909f9c1bf2..83a1e395e9 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 @@ -64,7 +64,7 @@ ); --kup_datatable_th_border: var( --kup-datatable-th-border, - 1px solid var(--kup-gray-color-30) + 1px solid var(--kup-border-subtle) ); --kup_datatable_th_resize_handle_width: var( --kup-datatable-th-resize-handle-width, @@ -79,6 +79,7 @@ --kup-datatable-background-color-hover, var(--kup-text-primary) ); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); display: block; font-family: var(--kup_datatable_font_family); @@ -106,7 +107,7 @@ table { background-color: var(--kup_datatable_background_color); border-spacing: 0; // [TFixed-1] border-collapse: separate; // [TFixed-1] - color: var(--kup-gray-color-70); + color: var(--kup_card_text_color); min-width: intrinsic; /* Safari/WebKit uses a non-standard name */ min-width: -moz-max-content; /* Firefox/Gecko */ min-width: -webkit-max-content; /* Chrome */ @@ -124,7 +125,7 @@ table { &[#{$kup-dd-drag-over}] { td { &:first-of-type { - box-shadow: inset 4px 0px 0px 0px var(--kup-gray-color-30); + box-shadow: inset 4px 0px 0px 0px var(--kup_datatable_th_border); } } } diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-paginator.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-paginator.scss index 75b9b43715..6cc6ec251e 100644 --- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-paginator.scss +++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-paginator.scss @@ -24,6 +24,6 @@ min-width: fit-content; } .above-wrapper.paginator-top { - border-bottom: 1px solid var(--kup-gray-color-20); + border-bottom: 1px solid var(--kup-border-subtle); } } diff --git a/packages/ketchup/src/components/kup-list/kup-list.tsx b/packages/ketchup/src/components/kup-list/kup-list.tsx index e3017b3523..823fc42a27 100644 --- a/packages/ketchup/src/components/kup-list/kup-list.tsx +++ b/packages/ketchup/src/components/kup-list/kup-list.tsx @@ -543,7 +543,7 @@ export class KupList { #getIconTag(icon: string, placeholderIcon: string) { const large: boolean = this.rootElement.classList.contains('kup-large'); const propsFImage = { - color: `var(--kup-gray-color-70)`, + color: `var(--kup-list-fimage-color, var(--kup-text-secondary))`, sizeX: large ? '24px' : '16px', sizeY: large ? '24px' : '16px', }; diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss index 2c9b2f31e8..abe0168521 100644 --- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss +++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss @@ -137,7 +137,7 @@ } .subrow:last-of-type { - border-bottom: 1px solid var(--kup-gray-color-30); + border-bottom: 1px solid var(--kup-border-subtle); } .subrow:has(+ .subrow), diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss index 56f1b4efb5..995cd05d38 100644 --- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss +++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss @@ -101,7 +101,7 @@ &:hover { background-color: rgba(var(--kup_tabbar_primary_color_rgb), 0.075); .tab-indicator .tab-indicator__content--underline { - --kup_tabindicator_border_bottom_color: var(--kup-gray-color-50); + --kup_tabindicator_border_bottom_color: var(--kup-border-strong); } } &.tab--active { @@ -124,10 +124,10 @@ background: var(--kup-layer-2); border-right: 1px solid var(--kup_tabbar_border_color_dense); &.tab--active { - background: var(--kup-layer-1); + background: var(--kup-layer-2-selected); } &:hover { - background: var(--kup-gray-color-30); + background: var(--kup-layer-2-hover); } .tab-indicator { height: 2px; diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx index bbf98ad04e..95b3cf9a0f 100644 --- a/packages/ketchup/src/f-components/f-image/f-image.tsx +++ b/packages/ketchup/src/f-components/f-image/f-image.tsx @@ -86,7 +86,7 @@ function createIcon( [iconClass]: true, }; const style: GenericObject = { - background: color ? color : `var(--kup-gray-color-70)`, + background: color ? color : `var(--kup-text-secondary)`, }; if (icon.indexOf('--kup') > -1) { let themeIcon: string = icon.replace('--', ''); diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index 836924d623..beb03ea325 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -147,8 +147,8 @@ } &.radio--disabled { - --kup_radio_outer_circle_color: var(--kup-gray-color-30); - --kup_radio_text_color: var(--kup-gray-color-30); + --kup_radio_outer_circle_color: var(--kup-border-disabled); + --kup_radio_text_color: var(--kup-text-disabled); pointer-events: none; + label { diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 24be5f40ff..831810ee12 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -562,7 +562,6 @@ } .mdc-text-field__input::placeholder { opacity: 1; - color: var(--kup-gray-color-50); } } } diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss index f9a6e4d786..c2ed6256c5 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss @@ -2,9 +2,9 @@ /* D i a l o g */ /*-------------------------------------------------*/ [kup-dialog] { - border-top: 4px solid var(--kup-gray-color-70); + border-top: 4px solid var(--kup-border-strong); animation: fade-in-down cubic-bezier(0.455, 0.03, 0.515, 0.955) s ease-in-out; - background-color: var(--kup-gray-color-0); + background-color: var(--kup-layer-0); margin: 0; position: absolute; -ms-touch-action: none; diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts index 5c988d9b7d..bdf8b0f730 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts @@ -289,7 +289,7 @@ export enum KupThemeColorValues { HOVER = '--kup-hover-color', TITLE_BACKGROUND = '--kup-title-background-color', TITLE = '--kup-title-color', - ICON = '--kup-gray-color-70', + ICON = '--kup-text-secondary', BORDER = '--kup-border-subtle', INFO = '--kup-info-color', SUCCESS = '--kup-success-color-40', diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 3d41d299b3..e19db6d45d 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -503,6 +503,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -612,6 +622,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -726,6 +746,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -840,6 +870,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -954,6 +994,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1074,6 +1124,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1188,6 +1248,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1308,6 +1378,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1422,6 +1502,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1549,6 +1639,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -1663,6 +1763,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1784,6 +1894,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -1904,6 +2024,16 @@ "--kup-gray-color-70": "#C6C6C6", "--kup-gray-color-80": "#E0E0E0", "--kup-gray-color-90": "#f4f4f4", + "--kup-gray-color-90-hover": "#E8E8E8", + "--kup-gray-color-80-hover": "#E8E8E8", + "--kup-gray-color-70-hover": "#D1D1D1", + "--kup-gray-color-60-hover": "#B5B5B5", + "--kup-gray-color-50-hover": "#999999", + "--kup-gray-color-40-hover": "#7A7A7A", + "--kup-gray-color-30-hover": "#5E5E5E", + "--kup-gray-color-20-hover": "#5B5B5B", + "--kup-gray-color-10-hover": "#474747", + "--kup-gray-color-0-hover": "#333333", "--kup-success-color-20": "#0e6027", "--kup-success-color-40": "#198038", "--kup-success-color-60": "#42be65", @@ -2022,6 +2152,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", @@ -2139,6 +2279,16 @@ "--kup-gray-color-70": "#525252", "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", + "--kup-gray-color-0-hover": "#E8E8E8", + "--kup-gray-color-10-hover": "#E8E8E8", + "--kup-gray-color-20-hover": "#D1D1D1", + "--kup-gray-color-30-hover": "#B5B5B5", + "--kup-gray-color-40-hover": "#999999", + "--kup-gray-color-50-hover": "#7A7A7A", + "--kup-gray-color-60-hover": "#5E5E5E", + "--kup-gray-color-70-hover": "#5B5B5B", + "--kup-gray-color-80-hover": "#474747", + "--kup-gray-color-90-hover": "#333333", "--kup-success-color-20": "#a7f0ba", "--kup-success-color-40": "#42be65", "--kup-success-color-60": "#198038", From 38c1a4dccf4cc6fd05b2468e750b56bd70a2b1e2 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 11 Jun 2024 16:29:37 +0200 Subject: [PATCH 14/14] f-checkbox fix --- .../f-components/f-checkbox/f-checkbox.scss | 27 +++++++------------ .../kup-theme/kup-theme-application.scss | 2 +- 2 files changed, 11 insertions(+), 18 deletions(-) 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 dcfdaa2dc7..32bf5eef28 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -6,32 +6,24 @@ ); --kup_checkbox_disabled_checkmark_color: var( --kup-checkbox-disabled-checkmark-color, - var(--kup-layer-1) + var(--kup-border-disabled) ); --kup_checkbox_padding: var(--kup-checkbox-padding, 11px); --kup_checkbox_primary_color: var( --kup-checkbox-primary-color, var(--kup-text-primary) ); - --kup_checkbox_primary_color_rgb: var( - --kup-checkbox-primary-color-rgb, - var(--kup-text-primary-rgb) - ); --kup_checkbox_text_color: var( --kup-checkbox-text-color, var(--kup-text-primary) ); - --kup_checkbox_text_color_rgb: var( - --kup-checkbox-text-color-rgb, - var(--kup-text-primary-rgb) - ); --kup_checkbox_text_on_primary_color: var( --kup-checkbox-text-on-primary-color, var(--kup-layer-1) ); - --kup_checkbox_text_on_primary_color_rgb: var( - --kup-checkbox-text-on-primary-color-rgb, - var(--kup-layer-1-rgb) + --kup_checkbox_text_disabled: var( + --kup-checkbox-text-disabled, + var(--kup-text-disabled) ); @include kup-body-compact-01; @@ -84,7 +76,7 @@ transition: background-color 125ms linear; &:hover { - background: rgba(var(--kup_checkbox_primary_color_rgb), 0.125); + // background: rgba(--kup_checkbox_disabled_checkmark_color, 0.5); label { color: var(--kup_checkbox_primary_color); @@ -129,7 +121,7 @@ box-sizing: border-box; width: 18px; height: 18px; - border: 1px solid rgba(var(--kup_checkbox_text_color_rgb), 1); + border: 1px solid var(--kup_checkbox_text_color); border-radius: 2px; background-color: transparent; pointer-events: none; @@ -193,20 +185,21 @@ &.checkbox--disabled { pointer-events: none; + cursor: not-allowed; + label { pointer-events: none; - color: rgba(var(--kup_checkbox_text_color_rgb), 0.325); + color: var(--kup_checkbox_text_disabled); } .checkbox__background { background-color: transparent; - border-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325); + border-color: var(--kup_checkbox_disabled_checkmark_color); } &.checkbox--checked { .checkbox__background { - background-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325); + background-color: var(--kup_checkbox_disabled_checkmark_color); border-color: transparent; } diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index e4992f6a67..ba9a27c559 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -52,7 +52,7 @@ --kup-text-placeholder: var(--kup-gray-color-40); --kup-text-helper: var(--kup-gray-color-60); --kup-text-error: var(--kup-danger-color-60); - --kup-text-disabled: var(--kup-danger-color-30); + --kup-text-disabled: var(--kup-gray-color-30); //BUTTON // TO BE DONE