diff --git a/__snapshots__/snackbar.md b/__snapshots__/snackbar.md index 35ed392de..9fe21b75e 100644 --- a/__snapshots__/snackbar.md +++ b/__snapshots__/snackbar.md @@ -9,6 +9,8 @@ position="BOTTOM-CENTER" >
- ``` #### `should have internal contents (dismissible) - flavor = 'legacy'` @@ -234,7 +248,6 @@ - ``` #### `should have internal contents (slotted action) - flavor = 'legacy'` @@ -253,6 +266,5 @@ - ``` diff --git a/components/snackbar/src/vwc-snackbar.scss b/components/snackbar/src/vwc-snackbar.scss index b87c6b286..f25033fa6 100644 --- a/components/snackbar/src/vwc-snackbar.scss +++ b/components/snackbar/src/vwc-snackbar.scss @@ -33,7 +33,7 @@ $spacing: 16px; } .mdc-snackbar__label { - @include typography.typography-cat-shorthand('body-2'); + @include typography.typography-cat-shorthand('body-1'); padding: 22px $spacing; color: var(#{scheme-variables.$vvd-color-on-canvas}); -webkit-font-smoothing: initial; @@ -41,12 +41,14 @@ $spacing: 16px; } .icon { + flex-shrink: 0; margin-block-end: auto; - margin-block-start: 20px; + margin-block-start: 16px; margin-inline-start: $spacing; .vwc-snackbar-legacy & { #{connotation.$vvd-color-connotation}: initial; color: var(#{scheme-variables.$vvd-color-on-canvas}); + margin-block-start: 20px; } } @@ -85,13 +87,22 @@ $spacing: 16px; border-inline-start: 8px solid var(#{connotation.$vvd-color-connotation}); } } + .header-and-label { + padding: 22px $spacing; + > .heading { + @include typography.typography-cat-shorthand('body-2-bold'); + } + } + .mdc-snackbar__label { + @include typography.typography-cat-shorthand('body-2'); + } } -.vwc-snackbar-legacy .header-and-label { - padding: 22px $spacing; +.header-and-label { + padding: 16px $spacing; > .heading { - @include typography.typography-cat-shorthand('body-2-bold'); + @include typography.typography-cat-shorthand('body-1-bold'); color: var(#{scheme-variables.$vvd-color-on-canvas}); margin-block-end: 4px; margin-block-start: 0; diff --git a/components/snackbar/src/vwc-snackbar.ts b/components/snackbar/src/vwc-snackbar.ts index ca1bdd9da..7b90f38a2 100644 --- a/components/snackbar/src/vwc-snackbar.ts +++ b/components/snackbar/src/vwc-snackbar.ts @@ -118,7 +118,7 @@ export class VWCSnackbar extends MWCSnackbarBase { @keydown="${this._handleKeydown}">