Skip to content

Commit 42f2cc9

Browse files
committed
fix(material-experimental/theming): set up padding tokens
Adds the proper paddings to the M3 buttons.
1 parent 30ecbd0 commit 42f2cc9

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

src/material-experimental/theming/_custom-tokens.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,10 @@
390390
/// @return {Map} A set of custom tokens for the mat-button
391391
@function text-button($systems, $exclude-hardcoded) {
392392
@return (
393+
horizontal-padding: _hardcode(12px, $exclude-hardcoded),
394+
with-icon-horizontal-padding: _hardcode(16px, $exclude-hardcoded),
395+
icon-spacing: _hardcode(8px, $exclude-hardcoded),
396+
icon-offset: _hardcode(-4px, $exclude-hardcoded),
393397
state-layer-color: map.get($systems, md-sys-color, primary),
394398
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
395399
ripple-color: mat.private-safe-color-change(
@@ -408,6 +412,9 @@
408412
/// @return {Map} A set of custom tokens for the mat-flat-button
409413
@function filled-button($systems, $exclude-hardcoded) {
410414
@return (
415+
horizontal-padding: _hardcode(24px, $exclude-hardcoded),
416+
icon-spacing: _hardcode(8px, $exclude-hardcoded),
417+
icon-offset: _hardcode(-8px, $exclude-hardcoded),
411418
state-layer-color: map.get($systems, md-sys-color, on-primary),
412419
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
413420
ripple-color: mat.private-safe-color-change(
@@ -426,6 +433,9 @@
426433
/// @return {Map} A set of custom tokens for the mat-raised-button
427434
@function elevated-button($systems, $exclude-hardcoded) {
428435
@return (
436+
horizontal-padding: _hardcode(24px, $exclude-hardcoded),
437+
icon-spacing: _hardcode(8px, $exclude-hardcoded),
438+
icon-offset: _hardcode(-8px, $exclude-hardcoded),
429439
state-layer-color: map.get($systems, md-sys-color, primary),
430440
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
431441
ripple-color: mat.private-safe-color-change(
@@ -444,6 +454,9 @@
444454
/// @return {Map} A set of custom tokens for the mat-outlined-button
445455
@function outlined-button($systems, $exclude-hardcoded) {
446456
@return (
457+
horizontal-padding: _hardcode(24px, $exclude-hardcoded),
458+
icon-spacing: _hardcode(8px, $exclude-hardcoded),
459+
icon-offset: _hardcode(-8px, $exclude-hardcoded),
447460
state-layer-color: map.get($systems, md-sys-color, primary),
448461
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
449462
ripple-color: mat.private-safe-color-change(

0 commit comments

Comments
 (0)