From e61168ac3b3d48bbea3d9ae259a19e19f1264cf9 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Wed, 16 Aug 2023 10:23:14 +0000 Subject: [PATCH 1/9] fix accessibility contrast --- .../src/components/mgt-file/mgt-file.scss | 2 ++ .../src/components/mgt-file/mgt-file.theme.scss | 4 ++-- .../src/components/mgt-login/mgt-login.scss | 1 + .../src/components/mgt-picker/mgt-picker.scss | 16 ++++++++++++++-- .../components/mgt-picker/mgt-picker.theme.scss | 1 + 5 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss index 3dbb11b2d9..5a21d4cbea 100644 --- a/packages/mgt-components/src/components/mgt-file/mgt-file.scss +++ b/packages/mgt-components/src/components/mgt-file/mgt-file.scss @@ -48,6 +48,8 @@ $line3-text-transform: var(--file-line3-text-transform, initial); background-color: $file-background-color-hover; border-radius: $file-border-radius; cursor: pointer; + + --secondary-text-color: var(--secondary-text-hover-color); } &:focus, diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss index 8e15b366de..9534118f8e 100644 --- a/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss +++ b/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss @@ -6,8 +6,8 @@ */ $line1-color: var(--file-line1-color, var(--neutral-foreground-rest)); -$line2-color: var(--file-line2-color, var(--neutral-foreground-hint)); -$line3-color: var(--file-line3-color, var(--neutral-foreground-hint)); +$line2-color: var(--file-line2-color, var(--secondary-text-color)); +$line3-color: var(--file-line3-color, var(--secondary-text-color)); $file-background-color: var(--file-background-color); $file-background-color-focus: var(--file-background-color-focus, var(--neutral-fill-hover)); $file-background-color-hover: var(--file-background-color-hover, var(--neutral-fill-hover)); diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss index 69a756437c..1f7f02cad9 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss @@ -108,6 +108,7 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(- margin-top: 4px; background: $login-popup-background-color; list-style-type: none; + cursor: pointer; &:hover { background: $login-account-item-hover-bg-color; diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss index 2aa13f9094..aeccd543e7 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -11,11 +11,23 @@ :host { --max-height: var(--picker-max-height, 380px); - + font-family: $font-family; - .picker { + .picker { background-color: $picker-background-color; + + fluent-combobox { + &::part(control) { + .selected-value { + color: $picker-text-color; + } + + &:hover { + --secondary-text-color: var(--secondary-text-hover-color); + } + } + } } } diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss index e328b1b987..bd210d2554 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss @@ -8,3 +8,4 @@ @import '../../styles/shared-sass-variables'; $picker-background-color: var(--picker-background-color, transparent); +$picker-text-color: var(--picker-text-color, var(--secondary-text-color)); From 6611d40fc86ec79a09147225d4ddd24f870ef636 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Wed, 16 Aug 2023 17:26:18 +0300 Subject: [PATCH 2/9] fix placeholder hover --- .../src/components/mgt-picker/mgt-picker.scss | 6 ++++-- .../src/components/mgt-picker/mgt-picker.theme.scss | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss index aeccd543e7..6cc7c45a42 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -19,12 +19,14 @@ fluent-combobox { &::part(control) { - .selected-value { + &::placeholder { color: $picker-text-color; } &:hover { - --secondary-text-color: var(--secondary-text-hover-color); + &::placeholder { + color: $picker-text-hover-color; + } } } } diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss index bd210d2554..83d26f2c14 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss @@ -9,3 +9,4 @@ $picker-background-color: var(--picker-background-color, transparent); $picker-text-color: var(--picker-text-color, var(--secondary-text-color)); +$picker-text-hover-color: var(--picker-text-color-hover, var(--secondary-text-hover-color)); From a34f9888dc00e124b8927e8617001f56fc764607 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Mon, 21 Aug 2023 13:26:41 +0300 Subject: [PATCH 3/9] remove login changes --- packages/mgt-components/src/components/mgt-login/mgt-login.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss index 1f7f02cad9..69a756437c 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss @@ -108,7 +108,6 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(- margin-top: 4px; background: $login-popup-background-color; list-style-type: none; - cursor: pointer; &:hover { background: $login-account-item-hover-bg-color; From 14cc8fdd38f1c3040e5ff2b90fc7571fef7f836e Mon Sep 17 00:00:00 2001 From: Nickii Miaro Date: Tue, 22 Aug 2023 16:53:53 +0300 Subject: [PATCH 4/9] adds pointer cursor to logged in accounts (#2674) Co-authored-by: Musale Martin --- packages/mgt-components/src/components/mgt-login/mgt-login.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss index 69a756437c..1f7f02cad9 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss @@ -108,6 +108,7 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(- margin-top: 4px; background: $login-popup-background-color; list-style-type: none; + cursor: pointer; &:hover { background: $login-account-item-hover-bg-color; From 3ef559549179416ac4ba4a359859eec266c6b294 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Mon, 4 Sep 2023 15:11:03 +0300 Subject: [PATCH 5/9] fix build --- .../mgt-components/src/components/mgt-picker/mgt-picker.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss index 5225c2bb22..6cc7c45a42 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -11,6 +11,7 @@ :host { --max-height: var(--picker-max-height, 380px); + font-family: $font-family; .picker { From 4dba5e8399d0dc4f73d44fa0980d41a6010053e0 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Mon, 18 Sep 2023 13:18:07 +0300 Subject: [PATCH 6/9] change picker-text-color --- .../src/components/mgt-picker/mgt-picker.scss | 16 ++++++++++++++++ .../components/mgt-picker/mgt-picker.theme.scss | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss index 6cc7c45a42..1aba5900db 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -19,6 +19,22 @@ fluent-combobox { &::part(control) { + input.selected-value { + color: $picker-text-color; + } + + &::-webkit-input-placeholder { + color: $picker-text-color; + } + + &::-moz-placeholder { + color: $picker-text-color; + } + + &::-ms-placeholder { + color: $picker-text-color; + } + &::placeholder { color: $picker-text-color; } diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss index 83d26f2c14..88cf0a1590 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss @@ -8,5 +8,5 @@ @import '../../styles/shared-sass-variables'; $picker-background-color: var(--picker-background-color, transparent); -$picker-text-color: var(--picker-text-color, var(--secondary-text-color)); +$picker-text-color: var(--picker-text-color, var(--neutral-foreground-rest)); $picker-text-hover-color: var(--picker-text-color-hover, var(--secondary-text-hover-color)); From 8ccc8f81bfceff91dfc69209b75457b2a085af36 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Mon, 18 Sep 2023 23:51:06 +0300 Subject: [PATCH 7/9] update picker color, update file theme colors --- .../mgt-file-list/mgt-file-list.scss | 2 +- .../mgt-file-list/mgt-file-list.theme.scss | 7 ++-- .../src/components/mgt-picker/mgt-picker.scss | 32 +++++-------------- 3 files changed, 14 insertions(+), 27 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss index 6ac9169acd..0da61457bc 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss @@ -76,7 +76,7 @@ $progress-ring-size: var(--progress-ring-size, 24px); --file-padding: 10px 20px 10px 20px; --file-padding-inline-start: 24px; --file-border-radius: 2px; - --file-background-color: var(--file-item-background-color, var(--neutral-layer-floating)); + --file-background-color: var(--file-item-background-color, var(--neutral-layer-1)); } } } diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss index 956003f4c8..aaabd9bf0b 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss @@ -9,5 +9,8 @@ @import '../../components/mgt-file/mgt-file.theme'; $file-list-background-color: var(--file-list-background-color, var(--neutral-layer-floating)); -$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-floating)); -$show-more-button-background-color--hover: var(--show-more-button-background-color-hover, var(-neutral-fill-hover)); +$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-stroke-divider-rest)); +$show-more-button-background-color--hover: var( + --show-more-button-background-color-hover, + var(--neutral-fill-input-alt-active) +); diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss index 1aba5900db..303de4a335 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -16,33 +16,17 @@ .picker { background-color: $picker-background-color; + } - fluent-combobox { - &::part(control) { - input.selected-value { - color: $picker-text-color; - } - - &::-webkit-input-placeholder { - color: $picker-text-color; - } - - &::-moz-placeholder { - color: $picker-text-color; - } - - &::-ms-placeholder { - color: $picker-text-color; - } + fluent-combobox { + &::part(selected-value) { + &::placeholder { + color: $picker-text-color; + } + &:hover { &::placeholder { - color: $picker-text-color; - } - - &:hover { - &::placeholder { - color: $picker-text-hover-color; - } + color: $picker-text-hover-color; } } } From e01b9df100d984a969319fbcb1c5a1b069bd0366 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Mon, 25 Sep 2023 13:26:55 +0300 Subject: [PATCH 8/9] fix people picker colors, remove file-list box shadow --- .../mgt-file-list/mgt-file-list.scss | 1 - .../mgt-people-picker.theme.scss | 46 +++++++++++++------ 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss index 0da61457bc..39c0fcd587 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss @@ -39,7 +39,6 @@ $progress-ring-size: var(--progress-ring-size, 24px); :host .file-list-wrapper { background-color: $file-list-background-color; - box-shadow: $file-list-box-shadow; border: $file-list-border; position: relative; display: flex; diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss index e786919afb..7169e2cdb1 100644 --- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss +++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss @@ -7,25 +7,43 @@ @import '../../styles/shared-sass-variables'; -$input-background: padding-box linear-gradient( - var(--people-picker-input-background, var(--neutral-fill-input-rest)), - var(--people-picker-input-background, var(--neutral-fill-input-rest))), +$input-background: padding-box + linear-gradient( + var(--people-picker-input-background, var(--neutral-fill-input-rest)), + var(--people-picker-input-background, var(--neutral-fill-input-rest)) + ), border-box var(--people-picker-input-border-color, var(--neutral-stroke-input-rest)); -$input-hover-background: padding-box linear-gradient( - var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)), - var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))), +$input-hover-background: padding-box + linear-gradient( + var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)), + var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)) + ), border-box var(--people-picker-input-hover-border-color, var(--neutral-stroke-input-hover)); -$input-focus-background: padding-box linear-gradient( - var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)), - var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))), +$input-focus-background: padding-box + linear-gradient( + var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)), + var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)) + ), border-box var(--people-picker-input-focus-border-color, var(--neutral-stroke-input-focus)); $placeholder-text-color: var(--people-picker-input-placeholder-text-color, var(--input-placeholder-rest)); $placeholder-hover-text-color: var(--people-picker-input-placeholder-hover-text-color, var(--input-placeholder-hover)); $placeholder-focus-text-color: var(--people-picker-input-placeholder-focus-text-color, var(--input-placeholder-filled)); -$selected-option-bg: var(--people-picker-selected-option-background-color, var(--person-background-color, var(--neutral-layer-3))); +$selected-option-bg: var( + --people-picker-selected-option-background-color, + var(--person-background-color, var(--neutral-layer-3)) +); $selected-option-highlight-bg: var(--people-picker-selected-option-highlight-background-color, var(--accent-fill-rest)); -$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-fill-rest)); -$dropdown-result-bg-color: var(--people-picker-dropdown-result-background-color, var(--person-background-color, transparent)); -$dropdown-result-hover-bg-color: var(--people-picker-dropdown-result-hover-background-color, var(--person-background-color, var(--neutral-layer-2))); -$dropdown-result-focus-bg-color: var(--people-picker-dropdown-result-focus-background-color, var(--person-background-color, var(--neutral-layer-2))); +$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-layer-card-container)); +$dropdown-result-bg-color: var( + --people-picker-dropdown-result-background-color, + var(--person-background-color, transparent) +); +$dropdown-result-hover-bg-color: var( + --people-picker-dropdown-result-hover-background-color, + var(--person-background-color, var(--neutral-fill-rest)) +); +$dropdown-result-focus-bg-color: var( + --people-picker-dropdown-result-focus-background-color, + var(--person-background-color, var(--neutral-fill-rest)) +); $no-results-color: var(--people-picker-no-results-text-color, var(--neutral-foreground-hint)); From 59f2ddf71a3e05ccefdb6c56da5e74511eb06298 Mon Sep 17 00:00:00 2001 From: Mnickii Date: Tue, 3 Oct 2023 12:02:42 +0300 Subject: [PATCH 9/9] change placeholder color --- .../src/components/mgt-picker/mgt-picker.theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss index 88cf0a1590..f38687f8c6 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss @@ -8,5 +8,5 @@ @import '../../styles/shared-sass-variables'; $picker-background-color: var(--picker-background-color, transparent); -$picker-text-color: var(--picker-text-color, var(--neutral-foreground-rest)); +$picker-text-color: var(--picker-text-color, var(--input-filled-placeholder-rest)); $picker-text-hover-color: var(--picker-text-color-hover, var(--secondary-text-hover-color));