Customising a button for different situations

[dipunm]

For context, here are a few button types on different backgrounds:

Light mode:

Dark mode:

More context:
This is an app I am building, and I have noticed that this is the default way that various buttons look on different surfaces. The purple box is coloured tertiary, so I would like to be able to set some variable on the buttons to make them re-colour themselves for that type of surface.

I see the variables I have to set (eg: https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss) but I also see label-text-color and pressed-label-text-color etc, and I'm wondering the following:

1. What is the correct colour to pick?
2. How do I ensure that the correct colour adapts for both dark and light mode?
3. Do I need to set both pressed and non-pressed colours, or will/can the component work out the non-normal states from the normal colour settings?

[asyncLiz]

The purple box is coloured tertiary

First step, these boxes should use their corresponding background container token (--md-sys-color-tertiary-container), not the content color token (--md-sys-color-tertiary). In this case, the box's styles should be

.box {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

1. What is the correct colour to pick?

A tertiary container's foreground color content is on-tertiary-container. Since buttons are foreground content, they can use this value for proper contrast.

2. How do I ensure that the correct colour adapts for both dark and light mode?

Check out our "How do I change the color of a button?" FAQ.

The tl;dr is to map the component's key tone colors to another system key tone color. Buttons use the primary key tone, so we can map this to appropriate system colors for a tertiary container.

.tertiary .button {
  /* Remap the "primary" tokens to "on-tertiary-container" */
  --md-sys-color-primary: var(--md-sys-color-on-tertiary-container);

  /* The opposite of "on-tertiary-container" is "tertiary-container" */
  --md-sys-color-on-primary: var(--md-sys-color-tertiary-container);
}

Example playground: https://lit.dev/playground/#gist=3530adee2c9f86629000644f547a46fa

3. Do I need to set both pressed and non-pressed colours, or will/can the component work out the non-normal states from the normal colour settings?

When you set component tokens instead of system tokens, yes, you need to set each state. We generally recommend changing the system token mapping rather than individual component tokens because of this.

In some spots (like shape), we don't have system tokens so component tokens must be used.

There are other use cases for component tokens too, such as re-mapping what system tokens they use by default. For example, changing all buttons to use the "secondary" color by default.

[isaacwein]

to color a <md-filled-button class="error-button">Complete</md-filled-button> i need to add all of this variables, then if I want to style another button like <md-outlined-button> i need to do it all for the outlined button too, also if I want secondary color I need to make a secondary class too

.error-button {
    --md-filled-button-container-color: var(--md-sys-color-error);
    --md-filled-button-focus-label-text-color: var(--md-sys-color-on-error);
    --md-filled-button-hover-label-text-color: var(--md-sys-color-on-error);
    --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error);
    --md-filled-button-label-text-color: var(--md-sys-color-on-error);
    --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-error);
    --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-error);
    --md-filled-button-icon-color: var(--md-sys-color-on-error);
    --md-filled-button-focus-icon-color: var(--md-sys-color-on-error);
    --md-filled-button-hover-icon-color: var(--md-sys-color-on-error);
    --md-filled-button-pressed-icon-color: var(--md-sys-color-on-error);
}

is there an option to add a color for example color="error" and it will do all of that for me?

it's not hard to do but I feel like I am doing it so much in my code like it must be a shortcut here

[asyncLiz]

https://github.com/material-components/material-web/blob/main/docs/support.md#how-do-i-change-the-color-of-a-button has some suggestions. You can change system variables to make this easier than changing each component one.