material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

refactor(dialog): reduce CSS size

Browse Source 
Reduces the size by removing private (`--_*`) custom properties. These are not needed since the component does not share styles across variants.

Size before: 4597b / 1322b gzip
Size after: 4092b (-13%) / 1194b gzip (-10%)

PiperOrigin-RevId: 600905310
This commit is contained in:
Elizabeth Mitchell 2024-01-23 14:18:53 -08:00 committed by Copybara-Service
parent 7f6dda58b5
commit 93071d47bd
1 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
dialog/internal/_dialog.scss
View File

@ -34,37 +34,45 @@
}
@mixin styles() {
$tokens: tokens.md-comp-dialog-values();
$md-sys-color: tokens.md-sys-color-values-light();
$md-sys-motion: tokens.md-sys-motion-values();
$tokens: tokens.md-comp-dialog-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
}
// Support logical shape properties
$tokens: map.merge(
$tokens,
(
'container-shape-start-start':
var(
--md-dialog-container-shape-start-start,
map.get($tokens, 'container-shape')
),
'container-shape-start-end':
var(
--md-dialog-container-shape-start-end,
map.get($tokens, 'container-shape')
),
'container-shape-end-end':
var(
--md-dialog-container-shape-end-end,
map.get($tokens, 'container-shape')
),
'container-shape-end-start':
var(
--md-dialog-container-shape-end-start,
map.get($tokens, 'container-shape')
),
)
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-dialog-#{$token}, #{$value});
}
// Support logical shape properties
--_container-shape-start-start: var(
--md-dialog-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-dialog-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-dialog-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-dialog-container-shape-end-start,
var(--_container-shape)
);
border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-end-radius: var(--_container-shape-end-end);
border-end-start-radius: var(--_container-shape-end-start);
border-start-start-radius: map.get($tokens, 'container-shape-start-start');
border-start-end-radius: map.get($tokens, 'container-shape-start-end');
border-end-end-radius: map.get($tokens, 'container-shape-end-end');
border-end-start-radius: map.get($tokens, 'container-shape-end-start');
display: contents;
margin: auto;
max-height: min(560px, calc(100% - 48px));
@ -123,13 +131,13 @@
.headline {
align-items: center;
color: var(--_headline-color);
color: map.get($tokens, 'headline-color');
display: flex;
flex-direction: column;
font-family: var(--_headline-font);
font-size: var(--_headline-size);
line-height: var(--_headline-line-height);
font-weight: var(--_headline-weight);
font-family: map.get($tokens, 'headline-font');
font-size: map.get($tokens, 'headline-size');
line-height: map.get($tokens, 'headline-line-height');
font-weight: map.get($tokens, 'headline-weight');
position: relative;
}
@ -147,12 +155,12 @@
}
slot[name='icon']::slotted(*) {
color: var(--_icon-color);
color: map.get($tokens, 'icon-color');
fill: currentColor;
font-size: var(--_icon-size);
font-size: map.get($tokens, 'icon-size');
margin-top: 24px;
height: var(--_icon-size);
width: var(--_icon-size);
height: map.get($tokens, 'icon-size');
width: map.get($tokens, 'icon-size');
}
.has-icon slot[name='headline']::slotted(*) {
@ -181,7 +189,7 @@
}
.container::before {
background: var(--_container-color);
background: map.get($tokens, 'container-color');
border-radius: inherit;
content: '';
inset: 0;
@ -208,11 +216,11 @@
}
.content {
color: var(--_supporting-text-color);
font-family: var(--_supporting-text-font);
font-size: var(--_supporting-text-size);
line-height: var(--_supporting-text-line-height);
font-weight: var(--_supporting-text-weight);
color: map.get($tokens, 'supporting-text-color');
font-family: map.get($tokens, 'supporting-text-font');
font-size: map.get($tokens, 'supporting-text-size');
line-height: map.get($tokens, 'supporting-text-line-height');
font-weight: map.get($tokens, 'supporting-text-weight');
height: min-content; // Needed for Safari
position: relative;
}