Skip to content

Commit 89b79e9

Browse files
musalemusale
authored
feat: use fluentui tokens for theming file and file-list (#2044)
set the mgt tokens for CSS customization use fluentui CSS tokens for theming add specific CSS tokens for file component add a Custom CSS styling story for file prune tokens from other components. add the mgt-file-upload CSS tokens change to neutral-layer colors for bg contrasting remove tabindex attribute as element is not clickable set tabindex on the first element and on the selected item for better ac11y hooks on tab set the focused item index Use the :focus and :focus-within selectors
1 parent cf62f80 commit 89b79e9

File tree

14 files changed

+519
-561
lines changed

14 files changed

+519
-561
lines changed

‎packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss‎

Lines changed: 39 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,23 @@
99
@import '../../styles/shared-styles.scss';
1010
@import './mgt-file-list.theme.scss';
1111

12-
$file-item-background-color--hover: set-var(list__item__background-color--hover, $theme-default, $file-list);
13-
$file-item-background-color--active: set-var(list__item__background-color--active, $theme-default, $file-list);
14-
$background-color: set-var(list__background-color, $theme-default, $file-list);
15-
$file-list-border-radius: var(--file-list-border-radius, 4px);
16-
$file-list-box-shadow: var(
17-
--file-list-box-shadow,
18-
0px 3.2px 7.2px rgba(0, 0, 0, 0.132),
19-
0px 0.6px 1.8px rgba(0, 0, 0, 0.108)
20-
);
12+
$file-list-border-radius: var(--file-list-border-radius, 8px);
13+
$file-list-box-shadow: var(--file-list-box-shadow, var(--elevation-shadow-card-rest));
2114
$file-list-border: var(--file-list-border, none);
22-
$file-item-border-radius: var(--file-item-border-radius, 2px);
23-
$file-item-margin: var(--file-item-margin, 0 4px 0 4px);
15+
$file-list-padding: var(--file-list-padding, 0);
16+
$file-list-margin: var(--file-list-margin, 0);
17+
2418
$show-more-button-font-size: var(--show-more-button-font-size, 12px);
25-
$show-more-button-padding: var(--show-more-button-padding, 6px);
26-
$show-more-button-border-bottom-right-radius: var(--show-more-button-border-bottom-right-radius, 8px);
27-
$show-more-button-border-bottom-left-radius: var(--show-more-button-border-bottom-left-radius, 8px);
28-
$show-more-button-background-color--hover: var(--show-more-button-background-color--hover, $show_more_button_hover);
19+
$show-more-button-padding: var(--show-more-button-padding, 0px);
20+
$show-more-button-border-bottom-right-radius: var(
21+
--show-more-button-border-bottom-right-radius,
22+
$file-list-border-radius
23+
);
24+
$show-more-button-border-bottom-left-radius: var(
25+
--show-more-button-border-bottom-left-radius,
26+
$file-list-border-radius
27+
);
28+
2929
$progress-ring-size: var(--progress-ring-size, 24px);
3030

3131
:host {
@@ -35,7 +35,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
3535
.title {
3636
font-size: 14px;
3737
font-weight: 600;
38-
color: set-var(title__color__subtitle, $theme-default, $common);
3938
padding: 20px 0 12px;
4039
line-height: 19px;
4140
}
@@ -46,61 +45,48 @@ $progress-ring-size: var(--progress-ring-size, 24px);
4645
}
4746

4847
:host .file-list-wrapper {
49-
background-color: $background-color;
48+
background-color: $file-list-background-color;
5049
box-shadow: $file-list-box-shadow;
5150
border-radius: $file-list-border-radius;
5251
border: $file-list-border;
5352
position: relative;
54-
color: $color;
5553
display: flex;
5654
flex-direction: column;
5755
border-radius: 8px;
5856
.title {
5957
font-size: 14px;
6058
font-weight: 600;
61-
color: set-var(title__color__subtitle, $theme-default, $common);
6259
margin: 0 20px -15px 20px;
6360
}
6461

6562
.file-list {
6663
display: flex;
67-
padding: var(--file-list-padding, 4px 0);
68-
margin: var(--file-list-margin, 0);
64+
padding: $file-list-padding;
65+
margin: $file-list-margin;
6966
flex-direction: column;
7067
list-style: none;
7168

7269
.file-item {
73-
border-top: var(--file-item-border-top, none);
74-
border-left: var(--file-item-border-left, none);
75-
border-right: var(--file-item-border-right, none);
76-
border-bottom: var(--file-item-border-bottom, none);
77-
margin: $file-item-margin;
78-
padding-inline-start: var(--file-item-padding-inline-start, 24px);
79-
padding-top: var(--file-item-padding-top, 10px);
80-
padding-bottom: var(--file-item-padding-bottom, 8px);
81-
border-radius: $file-item-border-radius;
8270
cursor: pointer;
71+
border-radius: var(--file-border-radius);
72+
margin: var(--file-margin, 2px 4px);
8373

84-
.mgt-file-item {
85-
--file-background-color: $background-color;
74+
&:focus,
75+
&:focus-within {
76+
--file-background-color: var(--file-background-color-focus,var(--neutral-layer-2));
8677
}
8778

88-
&:hover,
89-
&.focused {
90-
background-color: $file-item-background-color--hover;
91-
92-
.mgt-file-item {
93-
--file-background-color: $file-item-background-color--hover;
94-
}
79+
&.selected{
80+
--file-background-color: var(--file-background-color-active,var(--neutral-layer-3));
9581
}
9682

97-
&:active,
98-
&.selected {
99-
background-color: $file-item-background-color--active;
100-
101-
.mgt-file-item {
102-
--file-background-color: $file-item-background-color--active;
103-
}
83+
.mgt-file-item {
84+
--file-padding: 10px 8px 10px 8px;
85+
--file-padding-inline-start: 24px;
86+
--file-border-radius: 2px;
87+
--file-background-color: var(--neutral-layer-1);
88+
--file-background-color-focus: var(--neutral-layer-2);
89+
--file-background-color-hover: var(--neutral-layer-2);
10490
}
10591
}
10692
}
@@ -117,10 +103,16 @@ $progress-ring-size: var(--progress-ring-size, 24px);
117103
padding: $show-more-button-padding;
118104
border-bottom-right-radius: $show-more-button-border-bottom-right-radius;
119105
border-bottom-left-radius: $show-more-button-border-bottom-left-radius;
120-
cursor: pointer;
106+
background-color: $show-more-button-background-color;
107+
border-top-left-radius: 0px;
108+
border-top-right-radius: 0px;
121109

122110
&:hover {
123111
background-color: $show-more-button-background-color--hover;
124112
}
113+
114+
&-text {
115+
font-size: $show-more-button-font-size;
116+
}
125117
}
126118
}

‎packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,8 @@
66
*/
77

88
@import '../../styles/shared-sass-variables.scss';
9+
@import '../../components/mgt-file/mgt-file.theme.scss';
910

10-
$file-list: (
11-
list__item__background-color--hover: (
12-
_var: --file-item-background-color--hover,
13-
light: rgba(247, 247, 247, 1),
14-
dark: #0078d4
15-
),
16-
list__item__background-color--active: (
17-
_var: --file-item-background-color--active,
18-
light: rgba(251, 251, 251, 1),
19-
dark: #238ada
20-
),
21-
list__background-color: (
22-
_var: --file-list-background-color,
23-
light: $list__background-color--light,
24-
dark: #424242
25-
),
26-
upload__button__background-color: (
27-
_var: --file-upload-button-background-color,
28-
light: rgb(243, 242, 241),
29-
dark: #006cbe
30-
),
31-
upload__dialog__background-color: (
32-
_var: --file-upload-dialog-background-color,
33-
light: rgba(0, 0, 0, 0.1),
34-
dark: rgba(black, 0.3)
35-
),
36-
upload__dialog__content__background-color: (
37-
_var: --file-upload-dialog-content-background-color,
38-
light: rgb(255, 255, 255),
39-
dark: #787878
40-
),
41-
upload__dialog__content__color: (
42-
_var: --file-upload-dialog-content-color,
43-
light: rgb(50, 49, 48),
44-
dark: #000
45-
),
46-
upload__dialog__primarybutton__color: (
47-
_var: --file-upload-dialog-primarybutton-color,
48-
light: rgb(255, 255, 255),
49-
dark: rgb(255, 255, 255)
50-
),
51-
upload__dialog__primarybutton__background-color: (
52-
_var: --file-upload-dialog-primarybutton-background-color,
53-
light: #006cbe,
54-
dark: #006cbe
55-
)
56-
);
57-
58-
@include create-themes($file-list);
11+
$file-list-background-color: var(--file-list-background-color, var(--neutral-layer-1));
12+
$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-1));
13+
$show-more-button-background-color--hover: var(--show-more-button-background-color-hover, var(--neutral-layer-2));

0 commit comments

Comments
 (0)