Skip to content

Commit 5b5d616

Browse files
beth-panxnmetulev
beth-panx
and
nmetulev
authored
Theming (#793)
* Add mgt-login theme * Remove unused people picker css var * Add theme for agenda * Add mgt-person theme * Add theme for mgt-people * Add theme for mgt-tasks * Remove comment * Add theme to mgt-todo * Add person-card theme * Add stories for dark theme * Seperating shared vars and styles. * Update mgt-login to use common theme * Update people-picker common var * Add mgt-channel-picker common themes * use common vars for mgt-person theme * Add common theme to agenda and people * Add person card common theme * Fix box shadow common var * Design feedback * Update documentation Co-authored-by: Nikola Metulev <[email protected]>
1 parent 487a40b commit 5b5d616

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+983
-1504
lines changed

‎artifacts/install.ps1‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ function Get-Packages {
2020
Write-Output $output
2121
}
2222

23-
$packages = Get-Packages mgt-element mgt-msal-provider mgt mgt-react
23+
$packages = Get-Packages mgt-element mgt-msal-provider mgt-proxy-provider mgt-sharepoint-provider mgt-teams-provider mgt-components mgt mgt-react
2424

2525
npm i $packages

‎gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const PACKAGE_VERSION = '[VERSION]';
3737

3838
function runSass() {
3939
return gulp
40-
.src('src/**/!(shared-styles).scss')
40+
.src('src/**/!(shared)*.scss')
4141
.pipe(sass())
4242
.pipe(cleanCSS())
4343
.pipe(gap.prependText(scssFileHeader))

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"lint": "lerna run --parallel --stream --scope @microsoft/* lint",
2222
"pack": "shx rm -rf artifacts/*.tgz && lerna exec --stream --scope @microsoft/* -- npm pack",
2323
"prepare": "lerna bootstrap --force-local",
24+
"sass": "lerna run sass --scope @microsoft/*",
2425
"serve": "es-dev-server --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
2526
"serve:https": "es-dev-server --http2 --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
2627
"start": "npm-run-all prettier:check watch:serve",

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

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@
77

88
@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
99
@import '../../styles/shared-styles.scss';
10+
@import './mgt-agenda.theme.scss';
1011

1112
:host .header,
1213
mgt-agenda .header {
1314
margin: var(--agenda-header-margin, 40px 10px 14px 10px);
14-
font-family: var(--default-font-family);
15+
font-family: $font-family;
1516
font-size: var(--agenda-header-font-size, 24px);
16-
color: var(--agenda-header-color, #333333);
17+
color: $header__color;
1718
}
1819

1920
:host .agenda > .group:first-child > .header,
@@ -26,16 +27,16 @@ mgt-agenda .agenda-list {
2627
list-style-type: none;
2728
padding: 0;
2829
margin: 0;
29-
font-family: var(--default-font-family);
30+
font-family: $font-family;
3031
font-style: normal;
3132
font-weight: normal;
3233
}
3334

3435
:host .event,
3536
mgt-agenda .event {
36-
background: var(--event-background, #ffffff);
37+
background: set-var(event__background-color, $theme-default, $agenda);
3738
border: var(--event-border, solid 2px rgba(0, 0, 0, 0));
38-
box-shadow: var(--event-box-shadow, 0px 2px 8px rgba(0, 0, 0, 0.092));
39+
box-shadow: var(--event-box-shadow, 0px 2px 8px set-var(box-shadow__color, $theme-default, $common));
3940
margin: var(--event-margin, 0px 10px 14px 10px);
4041
padding: var(--event-padding, 0px);
4142
display: flex;
@@ -51,7 +52,7 @@ mgt-agenda .event-time-container {
5152
display: flex;
5253
flex-direction: column;
5354
margin: 18px 38px 18px 18px;
54-
width: 120px;
55+
width: 125px;
5556
}
5657

5758
:host .narrow .event-time-container,
@@ -62,7 +63,7 @@ mgt-agenda .narrow .event-time-container {
6263
:host .event-time,
6364
mgt-agenda .event-time {
6465
font-size: var(--event-time-font-size, 12px);
65-
color: var(--event-time-color, #000000);
66+
color: $event__time__color;
6667
font-weight: 600;
6768
}
6869

@@ -85,7 +86,7 @@ mgt-agenda .narrow .event-details-container {
8586
mgt-agenda .event-subject {
8687
margin: 0px 18px 0px 0px;
8788
font-size: var(--event-subject-font-size, 19px);
88-
color: var(--event-subject-color, #333333);
89+
color: $event__subject__color;
8990
}
9091

9192
:host .event-location-container,
@@ -94,11 +95,22 @@ mgt-agenda .event-location-container {
9495
margin: 8px 18px 0px 0px;
9596
}
9697

98+
:host .event-location-icon svg,
99+
mgt-agenda .event-location-icon svg {
100+
height: 12px;
101+
}
102+
103+
:host .event-location-icon svg path,
104+
mgt-agenda .event-location-icon svg path {
105+
stroke: $event__location__color;
106+
}
107+
97108
:host .event-location,
98109
mgt-agenda .event-location {
99110
font-size: var(--event-location-font-size, 12px);
100-
color: var(--event-location-color, #000000);
111+
color: $event__location__color;
101112
margin: 0px 0px 0px 4px;
113+
line-height: 17px;
102114
}
103115

104116
:host .event-attendees,
@@ -117,7 +129,7 @@ mgt-agenda .event-other-container {
117129

118130
:host .loading-element,
119131
mgt-agenda .loading-element {
120-
background: #f2f2f2;
132+
background: set-var(event__background-color, $theme-default, $agenda);
121133
border-radius: 1px;
122134
}
123135

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
@import '../../styles/shared-sass-variables.scss';
8+
9+
$event__time__color: var(--event-time-color, set-var(color, $theme-default, $common));
10+
$event__subject__color: var(--event-subject-color, set-var(color__sub1, $theme-default, $common));
11+
$event__location__color: var(--event-location-color, set-var(color, $theme-default, $common));
12+
$header__color: var(--agenda-header-color, set-var(color__sub1, $theme-default, $common));
13+
14+
$agenda: (
15+
event__background-color: (
16+
_var: --event-background-color,
17+
light: $background-color__main--light,
18+
dark: $background-color__sub1--dark
19+
)
20+
);
21+
22+
@include create-themes($agenda);

‎packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { getDayOfWeekString, getMonthString } from '../../utils/Utils';
1313
import '../mgt-person/mgt-person';
1414
import { styles } from './mgt-agenda-css';
1515
import { getEventsPageIterator } from './mgt-agenda.graph';
16+
import { SvgIcon, getSvg } from '../../utils/SvgHelper';
1617

1718
/**
1819
* Web Component which represents events in a user or group calendar.
@@ -26,8 +27,8 @@ import { getEventsPageIterator } from './mgt-agenda.graph';
2627
* @cssprop --event-box-shadow - {String} Event box shadow color and size
2728
* @cssprop --event-margin - {String} Event margin
2829
* @cssprop --event-padding - {String} Event padding
29-
* @cssprop --event-background - {Color} Event background color
30-
* @cssprop --event-border - {String} Event border color
30+
* @cssprop --event-background-color - {Color} Event background color
31+
* @cssprop --event-border - {String} Event border style
3132
* @cssprop --agenda-header-margin - {String} Agenda header margin size
3233
* @cssprop --agenda-header-font-size - {Length} Agenda header font size
3334
* @cssprop --agenda-header-color - {Color} Agenda header color
@@ -380,20 +381,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
380381

381382
return html`
382383
<div class="event-location-container">
383-
<svg width="10" height="13" viewBox="0 0 10 13" fill="none" xmlns="http://www.w3.org/2000/svg">
384-
<path
385-
fill-rule="evenodd"
386-
clip-rule="evenodd"
387-
d="M4.99989 6.49989C4.15159 6.49989 3.46143 5.81458 3.46143 4.97224C3.46143 4.12965 4.15159 3.44434 4.99989 3.44434C5.84845 3.44434 6.53835 4.12965 6.53835 4.97224C6.53835 5.81458 5.84845 6.49989 4.99989 6.49989Z"
388-
stroke="black"
389-
/>
390-
<path
391-
fill-rule="evenodd"
392-
clip-rule="evenodd"
393-
d="M8.1897 7.57436L5.00029 12L1.80577 7.56765C0.5971 6.01895 0.770299 3.47507 2.17681 2.12383C2.93098 1.39918 3.93367 1 5.00029 1C6.06692 1 7.06961 1.39918 7.82401 2.12383C9.23075 3.47507 9.40372 6.01895 8.1897 7.57436Z"
394-
stroke="black"
395-
/>
396-
</svg>
384+
<div class="event-location-icon">${getSvg(SvgIcon.OfficeLocation)}</div>
397385
<div class="event-location" aria-label="${event.location.displayName}">${event.location.displayName}</div>
398386
</div>
399387
`;

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

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
99
@import '../../styles/shared-styles.scss';
10+
@import './mgt-login.theme.scss';
1011

1112
:host,
1213
mgt-login {
@@ -16,15 +17,9 @@ mgt-login {
1617
--height: '100%';
1718
--margin: 0;
1819
--padding: 12px 20px;
19-
--color: #{$ms-color-neutralPrimary};
20-
--color-hover: var(--theme-primary-color);
21-
--background-color: transparent;
22-
--background-color--hover: #{$ms-color-neutralLight};
23-
--popup-content-background-color: white;
2420
--popup-command-font-size: #{$ms-font-size-s};
2521
--popup-command-margin: 16px 0 0;
2622
--popup-padding: 24px 48px 16px 24px;
27-
--popup-color: #{$ms-color-neutralPrimary};
2823
}
2924

3025
:host .root,
@@ -37,23 +32,23 @@ mgt-login .root {
3732
mgt-login .login-button {
3833
display: flex;
3934
align-items: center;
40-
font-family: var(--default-font-family);
35+
font-family: $font-family;
4136
font-size: var(--font-size);
4237
font-weight: var(--font-weight);
4338
width: var(--width);
4439
height: var(--height);
4540
margin: var(--margin);
4641
padding: var(--padding);
47-
color: var(--color);
48-
background-color: var(--background-color);
42+
color: $button__color;
43+
background-color: var(--button-background-color, transparent);
4944
border: none;
5045
cursor: pointer;
5146
transition: color 0.3s, background-color 0.3s;
5247

5348
&:hover {
54-
color: var(--color-hover);
55-
--color: var(--color-hover);
56-
background-color: var(--background-color--hover);
49+
color: $button__color--hover;
50+
--color: #{$button__color--hover};
51+
background-color: $button__background-color--hover;
5752
}
5853

5954
&:focus {
@@ -79,12 +74,12 @@ mgt-login .login-icon {
7974

8075
:host .popup,
8176
mgt-login .popup {
82-
font-family: var(--default-font-family);
83-
background: var(--popup-content-background-color);
77+
font-family: $font-family;
78+
background-color: $popup__background-color;
8479
min-width: 240px;
8580
z-index: 1;
86-
color: var(--popup-color);
87-
--color: var(--popup-color);
81+
color: $popup__color;
82+
--color: #{$popup__color};
8883
}
8984

9085
:host .popup-content,
@@ -103,18 +98,18 @@ mgt-login .popup-commands ul {
10398

10499
:host .popup-command,
105100
mgt-login .popup-command {
106-
font-family: var(--default-font-family);
101+
font-family: $font-family;
107102
font-size: var(--popup-command-font-size);
108103
font-weight: var(--font-weight);
109-
color: var(--theme-primary-color);
110-
background-color: transparent;
104+
color: #{$commblue_primary};
105+
background-color: $popup__background-color;
111106
border: none;
112107
padding: 0;
113108
cursor: pointer;
114109
transition: color 0.3s;
115110

116111
&:hover {
117-
color: var(--theme-dark-color);
112+
color: #{$commblue_shade20};
118113
}
119114
}
120115

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
@import '../../styles/shared-sass-variables.scss';
9+
10+
$button__color--hover: var(--button-color--hover, #{$commblue_primary});
11+
$button__color: var(--button-color, set-var(color__sub1, $theme-default, $common));
12+
$button__background-color--hover: var(
13+
--button-background-color--hover,
14+
set-var(background-color--hover, $theme-default, $common)
15+
);
16+
$popup__color: var(--popup-color, set-var(color__sub1, $theme-default, $common));
17+
$popup__background-color: var(--popup-background-color, set-var(background-color__sub1, $theme-default, $common));

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,12 @@ import { strings } from './strings';
4040
* @cssprop --height - {String} Login height percentage
4141
* @cssprop --margin - {String} Margin size
4242
* @cssprop --padding - {String} Padding size
43-
* @cssprop --color - {Color} Login font color
44-
* @cssprop --background-color - {Color} Login background color
45-
* @cssprop --background-color--hover - {Color} Login background hover color
46-
* @cssprop --popup-content-background-color - {Color} Popup content background color
43+
* @cssprop --button-color - {Color} Login button font color
44+
* @cssprop --button-color--hover - {Color} Login button font hover color
45+
* @cssprop --button-background-color - {Color} Login button background color
46+
* @cssprop --button-background-color--hover - {Color} Login background hover color
47+
* @cssprop --popup-background-color - {Color} Popup background color
48+
* @cssprop --popup-color - {Color} Popup font color
4749
* @cssprop --popup-command-font-size - {Length} Popup command font size
4850
*/
4951
@customElement('mgt-login')

0 commit comments

Comments
 (0)