material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 21:57:41 +03:00
Code Issues Projects Releases Wiki Activity

refactor(checkbox): reduce CSS size by removing private custom properties

Browse Source 
`--_private` custom properties aren't needed since checkbox does not have multiple variants that share styles.

CSS size before:
8567b / 1668b gzip

CSS size after:
6277b / 1387b gzip
-27% / -17%

PiperOrigin-RevId: 599262324
This commit is contained in:
Elizabeth Mitchell 2024-01-17 12:58:11 -08:00 committed by Copybara-Service
parent 041adf0ced
commit 042b4aadfd
1 changed files with 70 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
checkbox/internal/_checkbox.scss
View File

@ -49,38 +49,43 @@ $_checkmark-bottom-left: 7px, -14px;
@mixin styles() { @mixin styles() {
$tokens: tokens.md-comp-checkbox-values(); $tokens: tokens.md-comp-checkbox-values();
// Support logical shape properties
$container-shape: map.get($tokens, 'container-shape');
$tokens: map.set(
$tokens,
'container-shape-start-start',
var(--md-checkbox-container-shape, #{$container-shape})
);
$tokens: map.set(
$tokens,
'container-shape-start-end',
var(--md-checkbox-container-shape, #{$container-shape})
);
$tokens: map.set(
$tokens,
'container-shape-end-end',
var(--md-checkbox-container-shape, #{$container-shape})
);
$tokens: map.set(
$tokens,
'container-shape-end-start',
var(--md-checkbox-container-shape, #{$container-shape})
);
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-checkbox-#{$token}, #{$value}));
}
:host { :host {
@each $token, $value in $tokens { border-start-start-radius: map.get($tokens, 'container-shape-start-start');
--_#{$token}: var(--md-checkbox-#{$token}, #{$value}); 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');
// Support logical shape properties
--_container-shape-start-start: var(
--md-checkbox-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-checkbox-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-checkbox-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-checkbox-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);
display: inline-flex; display: inline-flex;
height: var(--_container-size); height: map.get($tokens, 'container-size');
position: relative; position: relative;
vertical-align: top; // Fix extra space when placed inside display: block vertical-align: top; // Fix extra space when placed inside display: block
width: var(--_container-size); width: map.get($tokens, 'container-size');
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
cursor: pointer; cursor: pointer;
} }
@ -90,7 +95,7 @@ $_checkmark-bottom-left: 7px, -14px;
} }
:host([touch-target='wrapper']) { :host([touch-target='wrapper']) {
margin: max(0px, ((48px - var(--_container-size)) / 2)); margin: max(0px, ((48px - map.get($tokens, 'container-size')) / 2));
} }
md-focus-ring { md-focus-ring {
@ -140,14 +145,14 @@ $_checkmark-bottom-left: 7px, -14px;
} }
.outline { .outline {
border-color: var(--_outline-color); border-color: map.get($tokens, 'outline-color');
border-style: solid; border-style: solid;
border-width: var(--_outline-width); border-width: map.get($tokens, 'outline-width');
box-sizing: border-box; box-sizing: border-box;
} }
.background { .background {
background-color: var(--_selected-container-color); background-color: map.get($tokens, 'selected-container-color');
} }
// Background and icon transitions. // Background and icon transitions.
@ -181,17 +186,17 @@ $_checkmark-bottom-left: 7px, -14px;
// Ripple // Ripple
md-ripple { md-ripple {
border-radius: var(--_state-layer-shape); border-radius: map.get($tokens, 'state-layer-shape');
height: var(--_state-layer-size); height: map.get($tokens, 'state-layer-size');
inset: unset; inset: unset;
width: var(--_state-layer-size); width: map.get($tokens, 'state-layer-size');
@include ripple.theme( @include ripple.theme(
( (
hover-color: var(--_hover-state-layer-color), hover-color: map.get($tokens, 'hover-state-layer-color'),
hover-opacity: var(--_hover-state-layer-opacity), hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
pressed-color: var(--_pressed-state-layer-color), pressed-color: map.get($tokens, 'pressed-state-layer-color'),
pressed-opacity: var(--_pressed-state-layer-opacity), pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
) )
); );
} }
@ -199,10 +204,11 @@ $_checkmark-bottom-left: 7px, -14px;
.selected md-ripple { .selected md-ripple {
@include ripple.theme( @include ripple.theme(
( (
hover-color: var(--_selected-hover-state-layer-color), hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
hover-opacity: var(--_selected-hover-state-layer-opacity), hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
pressed-color: var(--_selected-pressed-state-layer-color), pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
pressed-opacity: var(--_selected-pressed-state-layer-opacity), pressed-opacity:
map.get($tokens, 'selected-pressed-state-layer-opacity'),
) )
); );
} }
@ -217,9 +223,9 @@ $_checkmark-bottom-left: 7px, -14px;
// 2. Long end // 2. Long end
// - the larger trailing part of the checkmark // - the larger trailing part of the checkmark
// - the entirety of the indeterminate mark // - the entirety of the indeterminate mark
fill: var(--_selected-icon-color); fill: map.get($tokens, 'selected-icon-color');
height: var(--_icon-size); height: map.get($tokens, 'icon-size');
width: var(--_icon-size); width: map.get($tokens, 'icon-size');
} }
// The short end of the checkmark. Initially hidden underneath the // The short end of the checkmark. Initially hidden underneath the
@ -327,42 +333,42 @@ $_checkmark-bottom-left: 7px, -14px;
// States // States
:where(:hover) .outline { :where(:hover) .outline {
border-color: var(--_hover-outline-color); border-color: map.get($tokens, 'hover-outline-color');
border-width: var(--_hover-outline-width); border-width: map.get($tokens, 'hover-outline-width');
} }
:where(:hover) .background { :where(:hover) .background {
background: var(--_selected-hover-container-color); background: map.get($tokens, 'selected-hover-container-color');
} }
:where(:hover) .icon { :where(:hover) .icon {
fill: var(--_selected-hover-icon-color); fill: map.get($tokens, 'selected-hover-icon-color');
} }
:where(:focus-within) .outline { :where(:focus-within) .outline {
border-color: var(--_focus-outline-color); border-color: map.get($tokens, 'focus-outline-color');
border-width: var(--_focus-outline-width); border-width: map.get($tokens, 'focus-outline-width');
} }
:where(:focus-within) .background { :where(:focus-within) .background {
background: var(--_selected-focus-container-color); background: map.get($tokens, 'selected-focus-container-color');
} }
:where(:focus-within) .icon { :where(:focus-within) .icon {
fill: var(--_selected-focus-icon-color); fill: map.get($tokens, 'selected-focus-icon-color');
} }
:where(:active) .outline { :where(:active) .outline {
border-color: var(--_pressed-outline-color); border-color: map.get($tokens, 'pressed-outline-color');
border-width: var(--_pressed-outline-width); border-width: map.get($tokens, 'pressed-outline-width');
} }
:where(:active) .background { :where(:active) .background {
background: var(--_selected-pressed-container-color); background: map.get($tokens, 'selected-pressed-container-color');
} }
:where(:active) .icon { :where(:active) .icon {
fill: var(--_selected-pressed-icon-color); fill: map.get($tokens, 'selected-pressed-icon-color');
} }
// Don't animate to/from disabled states because the outline is hidden when // Don't animate to/from disabled states because the outline is hidden when
@ -374,9 +380,9 @@ $_checkmark-bottom-left: 7px, -14px;
} }
:where(.disabled) .outline { :where(.disabled) .outline {
border-color: var(--_disabled-outline-color); border-color: map.get($tokens, 'disabled-outline-color');
border-width: var(--_disabled-outline-width); border-width: map.get($tokens, 'disabled-outline-width');
opacity: var(--_disabled-container-opacity); opacity: map.get($tokens, 'disabled-container-opacity');
} }
:where(.selected.disabled) .outline { :where(.selected.disabled) .outline {
@ -388,12 +394,12 @@ $_checkmark-bottom-left: 7px, -14px;
:where(.selected.disabled) .background { :where(.selected.disabled) .background {
// Set disabled opacity only when selected since opacity is used to show // Set disabled opacity only when selected since opacity is used to show
// or hide the container background. // or hide the container background.
background: var(--_selected-disabled-container-color); background: map.get($tokens, 'selected-disabled-container-color');
opacity: var(--_selected-disabled-container-opacity); opacity: map.get($tokens, 'selected-disabled-container-opacity');
} }
:where(.disabled) .icon { :where(.disabled) .icon {
fill: var(--_selected-disabled-icon-color); fill: map.get($tokens, 'selected-disabled-icon-color');
} }
@media (forced-colors: active) { @media (forced-colors: active) {