Skip to content

Commit 99884f8

Browse files
musalegavinbarronMnickii
authored
fix: use fluentui token to set person/login background (#2435)
change from tranparent bg to fluentui token make the person and login backgrounds transparent Style the background of a specific element Add people-picker component to show applyTheme usage updating color scheme for person and adding customized hover colors for secondary text correcting the application of custom colors for light mode --------- Signed-off-by: Martin Musale <[email protected]> Co-authored-by: Gavin Barron <[email protected]> Co-authored-by: Nickii Miaro <[email protected]>
1 parent 6b1dc4d commit 99884f8

File tree

5 files changed

+81
-20
lines changed

5 files changed

+81
-20
lines changed

‎packages/mgt-components/src/components/mgt-login/mgt-login.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ $button-padding: var(--login-button-padding, 0);
4545
&:hover,
4646
&:focus-within {
4747
background: $signed-in-hover-background-color;
48+
49+
--secondary-text-color: var(--secondary-text-hover-color);
4850
}
4951
}
5052
}

‎packages/mgt-components/src/components/mgt-login/mgt-login.theme.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ $signed-in-background-color: var(--login-signed-in-background, transparent);
1212
$signed-in-hover-background-color: #{var(--login-signed-in-hover-background, var(--neutral-fill-stealth-hover))};
1313
$login-command-btn-text-color: #{var(--login-command-button-text-color, var(--neutral-fill-foreground-rest))};
1414
$login-command-btn-bg-color: #{var(--login-command-button-background-color, var(--neutral-fill-stealth-rest))};
15-
$login-command-btn-bg-hover-color: #{var(--login-command-button-hover-background-color, var(--neutral-fill-stealth-hover))};
15+
$login-command-btn-bg-hover-color: #{var(
16+
--login-command-button-hover-background-color,
17+
var(--neutral-fill-stealth-hover)
18+
)};
1619
$login-add-account-btn-text-color: #{var(--login-add-account-button-text-color, var(--neutral-fill-foreground-rest))};
1720
$login-add-account-btn-bg-color: #{var(--login-add-account-button-background-color, var(--neutral-fill-stealth-rest))};
18-
$login-add-account-btn-hover-bg-color: #{var(--login-add-account-button-hover-background-color, var(--neutral-fill-stealth-hover))};
21+
$login-add-account-btn-hover-bg-color: #{var(
22+
--login-add-account-button-hover-background-color,
23+
var(--neutral-fill-stealth-hover)
24+
)};

‎packages/mgt-components/src/components/mgt-person/mgt-person.theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
$person-background-color: var(--person-background-color, transparent);
1111
$person-line1-text-color: var(--person-line1-text-color, var(--neutral-foreground-rest));
12-
$person-line2-text-color: var(--person-line2-text-color, var(--neutral-foreground-hint));
13-
$person-line3-text-color: var(--person-line3-text-color, var(--neutral-foreground-hint));
14-
$person-line4-text-color: var(--person-line4-text-color, var(--neutral-foreground-hint));
12+
$person-line2-text-color: var(--person-line2-text-color, var(--secondary-text-color));
13+
$person-line3-text-color: var(--person-line3-text-color, var(--secondary-text-color));
14+
$person-line4-text-color: var(--person-line4-text-color, var(--secondary-text-color));
1515
$person-initials-text-color: var(--person-initials-text-color, var(--neutral-fill-strong-hover));
1616
$person-initials-background-color: var(--person-initials-background-color, var(--neutral-fill-secondary-rest));

‎packages/mgt-components/src/styles/theme-manager.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
StandardLuminance,
2929
SwatchRGB
3030
} from '@fluentui/web-components';
31+
import { DesignToken } from '@microsoft/fast-foundation';
3132
// @microsoft/fast-colors is a transitive dependency of @fluentui/web-components, no need to explicitly add it to package.json
3233
import { parseColorHexRGB } from '@microsoft/fast-colors';
3334

@@ -36,6 +37,12 @@ import { parseColorHexRGB } from '@microsoft/fast-colors';
3637
*/
3738
type Theme = 'light' | 'dark' | 'default' | 'contrast';
3839

40+
const secondaryTextDefault = '#717171';
41+
const secondaryTextColor = DesignToken.create<string>('secondary-text-color').withDefault(secondaryTextDefault);
42+
const secondaryTextHoverDefault = '#1a1a1a';
43+
const secondaryTextHoverColor =
44+
DesignToken.create<string>('secondary-text-hover-color').withDefault(secondaryTextHoverDefault);
45+
3946
/**
4047
* Helper function to apply fluent ui theme to an element
4148
*
@@ -133,14 +140,20 @@ const getThemeSettings = (theme: Theme): ColorScheme => {
133140
foregroundOnAccentRest.setValueFor(element, SwatchRGB.from(parseColorHexRGB('#ffffff')));
134141
foregroundOnAccentHover.setValueFor(element, SwatchRGB.from(parseColorHexRGB('#ffffff')));
135142
foregroundOnAccentFocus.setValueFor(element, SwatchRGB.from(parseColorHexRGB('#ffffff')));
143+
secondaryTextColor.setValueFor(element, '#8e8e8e');
144+
secondaryTextHoverColor.setValueFor(element, '#ffffff');
136145
}
137146
};
138147
case 'light':
139148
default:
140149
return {
141150
accentBaseColor: '#0f6cbd',
142151
neutralBaseColor: '#616161',
143-
baseLayerLuminance: StandardLuminance.LightMode
152+
baseLayerLuminance: StandardLuminance.LightMode,
153+
designTokenOverrides: element => {
154+
secondaryTextColor.setValueFor(element, secondaryTextDefault);
155+
secondaryTextHoverColor.setValueFor(element, secondaryTextHoverDefault);
156+
}
144157
};
145158
}
146159
};

‎stories/components/theme-toggle/themeToggle.js‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,23 +58,63 @@ body {
5858
`;
5959

6060
export const themingWithoutToggle = () => html`
61-
<mgt-login id="login-one"></mgt-login>
62-
<mgt-login id="login-two"></mgt-login>
63-
<mgt-login id="login-three"></mgt-login>
61+
<h2>Style the page</h2>
62+
<p>
63+
This page has the provided light theme applied by calling <code>applyTheme('light')</code>.
64+
and applying some basic css rules to the body tag<br/>
65+
This function uses a default value of document for the second optional element parameter,
66+
which is used below to set the dark theme.<br/>
67+
Refer to the CSS and JS tabs for details.
68+
</p>
6469
65-
<!-- The login components are in the default light theme on a light
66-
background. We are setting the component with id "login-two" to the dark
67-
theme colors using JavaScript. -->
70+
<h2>Style the background of a component</h2>
71+
<p>
72+
The first login component is in the default light theme on a light
73+
background. We are setting the background of the component with id "login-two"
74+
to the <code>aliceblue</code> color using CSS.<br/>
75+
Check the CSS tab.
76+
</p>
77+
<mgt-login id="login-one"></mgt-login>
78+
<mgt-login id="login-two"></mgt-login>
79+
<mgt-login id="login-three"></mgt-login>
6880
69-
<script>
70-
import { applyTheme } from '@microsoft/mgt';
71-
const loginTwo = document.querySelector("#login-two");
81+
<h2>Style using <code>applyTheme</code> function </h2>
82+
<p>
83+
The first picker component is in the default light theme on a light
84+
background. We are setting the "picker-two" and "login-three" components to the dark theme using JavaScript.
85+
Because the login component is transparent it is necessary to set the background color using CSS.<br/>
86+
Refer to the CSS and JS tabs for details.
87+
</p>
88+
<mgt-people-picker id="picker-one"></mgt-people-picker>
89+
<br>
90+
<mgt-people-picker id="picker-two"></mgt-people-picker>
91+
<style>
92+
body {
93+
background-color: var(--fill-color);
94+
font-family: var(--body-font);
95+
}
96+
#login-two {
97+
background-color: aliceblue;
98+
}
99+
#login-three {
100+
background-color: var(--fill-color);
101+
}
102+
</style>
72103
73-
if(loginTwo){
74-
// apply the dark theme on the second login component only.
75-
applyTheme('dark', loginTwo)
76-
}
77-
</script>
104+
<script>
105+
import { applyTheme } from '@microsoft/mgt';
106+
applyTheme('light');
107+
const darkElements = [
108+
document.querySelector("#picker-two"),
109+
document.querySelector("#login-three")
110+
];
111+
for (const element of darkElements) {
112+
if(element){
113+
// apply the dark theme on the second picker component only.
114+
applyTheme('dark', element)
115+
}
116+
}
117+
</script>
78118
`;
79119

80120
export const localization = () => html`

0 commit comments

Comments
 (0)