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..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; @@ -76,7 +75,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-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss index a1783b489a..03ab924fdf 100644 --- a/packages/mgt-components/src/components/mgt-file/mgt-file.scss +++ b/packages/mgt-components/src/components/mgt-file/mgt-file.scss @@ -47,6 +47,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-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)); 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 a8ad4c6ff8..303de4a335 100644 --- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss +++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss @@ -12,9 +12,25 @@ :host { --max-height: var(--picker-max-height, 380px); + font-family: $font-family; + .picker { background-color: $picker-background-color; } + + fluent-combobox { + &::part(selected-value) { + &::placeholder { + color: $picker-text-color; + } + + &:hover { + &::placeholder { + color: $picker-text-hover-color; + } + } + } + } } [dir='rtl'] { 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..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,3 +8,5 @@ @import '../../styles/shared-sass-variables'; $picker-background-color: var(--picker-background-color, transparent); +$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));