@momentum-design/components 0.120.13 → 0.120.15

package/dist/components/button/button.component.d.ts

@@ -41,6 +41,14 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @csspart button-text - Text label of the button, passed in default slot
  * @csspart prefix - Content before the text label, passed in `prefix` slot
  * @csspart postfix - Content after the text label, passed in `postfix` slot
+ *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
+ * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
+ * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
+ * @cssproperty --mdc-button-line-height - Line height of the button text
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -52,6 +52,14 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @csspart button-text - Text label of the button, passed in default slot
  * @csspart prefix - Content before the text label, passed in `prefix` slot
  * @csspart postfix - Content after the text label, passed in `postfix` slot
+ *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
+ * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
+ * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
+ * @cssproperty --mdc-button-line-height - Line height of the button text
  */
 class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {

package/dist/components/button/button.styles.js

@@ -1,44 +1,19 @@
 import { css } from 'lit';
 const styles = css `
   :host {
-    background-color: transparent;
+    --mdc-button-prefix-icon-size: 1rem;
+    --mdc-button-postfix-icon-size: 1rem;
+    --mdc-button-line-height: var(--mds-font-lineheight-body-large);
+
+    background: var(
+      --mdc-button-background
+    ); /* Using background instead of background-color since gradients are not supported in background-color */
+    border-color: var(--mdc-button-border-color);
     border-radius: 1.25rem;
+    color: var(--mdc-button-text-color);
     font-weight: var(--mds-font-apps-body-large-medium-font-weight);
     outline: none;
-
-    --mdc-button-primary-color: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-button-primary-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-primary-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
-    --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
-    --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
-
-    --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
-    --mdc-button-secondary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
-    --mdc-button-secondary-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-button-secondary-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-
-    --mdc-button-tertiary-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-button-tertiary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-tertiary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
-    --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
-    --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
-
-    --mdc-button-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
-    --mdc-button-active-hover-background-color: var(--mds-color-theme-button-secondary-active-hover);
-    --mdc-button-active-pressed-background-color: var(--mds-color-theme-button-secondary-active-pressed);
-    --mdc-button-active-disabled-background-color: var(--mds-color-theme-button-secondary-active-disabled);
-
-    --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
-    --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
-    --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
-    --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
-
-    --mdc-button-prefix-icon-size: 1rem;
-    --mdc-button-postfix-icon-size: 1rem;
+    line-height: var(--mdc-button-line-height);
   }
 
   :host([size='64']) {
@@ -71,76 +46,57 @@ const styles = css `
 
   :host([active][color='default']:not([variant='primary'])) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
-    background: var(--mdc-button-active-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-active-normal);
   }
   :host([active][color='default']:not([variant='primary']):hover) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
-    background: var(--mdc-button-active-hover-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-active-hover);
   }
   :host([active][color='default']:not([variant='primary']):active),
   :host([active][color='default']:not([variant='primary']).pressed) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
-    background: var(--mdc-button-active-pressed-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-active-pressed);
   }
   :host([active][color='default']:not([variant='primary'])[disabled]),
   :host([active][color='default']:not([variant='primary'])[soft-disabled]) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
-    background: var(--mdc-button-active-disabled-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-active-disabled);
   }
 
   :host([variant='primary']) {
-    background: var(--mdc-button-primary-background-color);
-    color: var(--mdc-button-primary-color);
+    --mdc-button-background: var(--mds-color-theme-button-primary-normal);
+    --mdc-button-text-color: var(--mds-color-theme-inverted-text-primary-normal);
   }
   :host([variant='primary']:hover) {
-    background: var(--mdc-button-primary-hover-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-primary-hover);
   }
   :host([variant='primary']:active),
   :host([variant='primary'].pressed) {
-    background: var(--mdc-button-primary-pressed-background-color);
-  }
-  :host([variant='primary'][disabled]),
-  :host([variant='primary'][soft-disabled]) {
-    background: var(--mdc-button-primary-disabled-background-color);
-    color: var(--mdc-button-primary-disabled-color);
-    cursor: auto;
+    --mdc-button-background: var(--mds-color-theme-button-primary-pressed);
   }
 
   :host([variant='secondary']) {
-    color: var(--mdc-button-secondary-color);
-    border-color: var(--mdc-button-secondary-border-color);
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-button-normal);
   }
   :host([variant='secondary']:hover) {
-    background: var(--mdc-button-secondary-hover-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
   :host([variant='secondary']:active),
   :host([variant='secondary'].pressed) {
-    background: var(--mdc-button-secondary-pressed-background-color);
-  }
-  :host([variant='secondary'][disabled]),
-  :host([variant='secondary'][soft-disabled]) {
-    color: var(--mdc-button-primary-disabled-color);
-    border-color: var(--mdc-button-secondary-disabled-border-color);
-    background: var(--mdc-button-secondary-disabled-background-color);
-    cursor: auto;
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
   :host([variant='tertiary']) {
-    border-color: transparent;
-    color: var(--mdc-button-tertiary-color);
+    --mdc-button-border-color: transparent;
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
   }
   :host([variant='tertiary']:hover) {
-    background: var(--mdc-button-tertiary-hover-background-color);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
   :host([variant='tertiary']:active),
   :host([variant='tertiary'].pressed) {
-    background: var(--mdc-button-tertiary-pressed-background-color);
-  }
-  :host([variant='tertiary'][disabled]),
-  :host([variant='tertiary'][soft-disabled]) {
-    color: var(--mdc-button-tertiary-disabled-color);
-    background: var(--mdc-button-tertiary-disabled-background-color);
-    cursor: auto;
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
   :host([size='64'][data-btn-type='icon']),
@@ -155,25 +111,23 @@ const styles = css `
   }
   :host([size='40']) {
     font-size: var(--mds-font-size-body-large);
-    line-height: var(--mdc-button-line-height-size-40);
     padding: 0 1rem;
     gap: 0.5rem;
   }
   :host([size='32']) {
     font-size: var(--mds-font-size-body-large);
-    line-height: var(--mdc-button-line-height-size-32);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
   :host([size='28']) {
     font-size: var(--mds-font-size-body-midsize);
-    line-height: var(--mdc-button-line-height-size-28);
+    line-height: var(--mds-font-lineheight-body-midsize);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
   :host([size='24']) {
     font-size: var(--mds-font-size-body-small);
-    line-height: var(--mdc-button-line-height-size-24);
+    line-height: var(--mds-font-lineheight-body-small);
     padding: 0 0.625rem;
     gap: 0.25rem;
   }
@@ -182,58 +136,140 @@ const styles = css `
     aspect-ratio: 1;
   }
 
-  :host([color='accent']) {
-    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-accent-pressed);
+  :host([color='accent'][variant='primary']) {
+    --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-background: var(--mds-color-theme-button-accent-normal);
+  }
+  :host([color='accent'][variant='primary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-accent-hover);
+  }
+  :host([color='accent'][variant='primary']:active),
+  :host([color='accent'][variant='primary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-accent-pressed);
+  }
+
+  :host([color='accent'][variant='secondary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-theme-normal);
+  }
+  :host([color='accent'][variant='secondary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='accent'][variant='secondary']:active),
+  :host([color='accent'][variant='secondary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
+  }
+
+  :host([color='positive'][variant='primary']) {
+    --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-background: var(--mds-color-theme-button-join-normal);
+  }
+  :host([color='positive'][variant='primary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-join-hover);
+  }
+  :host([color='positive'][variant='primary']:active),
+  :host([color='positive'][variant='primary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-join-pressed);
+  }
+
+  :host([color='positive'][variant='secondary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-success-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-join-normal);
+  }
+  :host([color='positive'][variant='secondary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='positive'][variant='secondary']:active),
+  :host([color='positive'][variant='secondary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
+  }
 
-    --mdc-button-secondary-color: var(--mds-color-theme-text-accent-normal);
-    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-theme-normal);
-    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  :host([color='negative'][variant='primary']) {
+    --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-background: var(--mds-color-theme-button-cancel-normal);
+  }
+  :host([color='negative'][variant='primary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-cancel-hover);
+  }
+  :host([color='negative'][variant='primary']:active),
+  :host([color='negative'][variant='primary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-cancel-pressed);
   }
-  :host([color='positive']) {
-    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-join-pressed);
 
-    --mdc-button-secondary-color: var(--mds-color-theme-text-success-normal);
-    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-join-normal);
-    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  :host([color='negative'][variant='secondary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-error-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-cancel-normal);
+  }
+  :host([color='negative'][variant='secondary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='negative'][variant='secondary']:active),
+  :host([color='negative'][variant='secondary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
-  :host([color='negative']) {
-    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-cancel-pressed);
 
-    --mdc-button-secondary-color: var(--mds-color-theme-text-error-normal);
-    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-cancel-normal);
-    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  :host([color='promotional'][variant='primary']) {
+    --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-background: var(--mds-color-theme-common-button-promotion-normal);
+  }
+  :host([color='promotional'][variant='primary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-common-button-promotion-hover);
+  }
+  :host([color='promotional'][variant='primary']:active),
+  :host([color='promotional'][variant='primary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-common-button-promotion-active);
   }
-  :host([color='promotional']) {
-    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-common-button-promotion-active);
 
-    --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-promotion-normal);
-    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  :host([color='promotional'][variant='secondary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-border-color: var(--mds-color-theme-outline-promotion-normal);
+  }
+  :host([color='promotional'][variant='secondary']:hover) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='promotional'][variant='secondary']:active),
+  :host([color='promotional'][variant='secondary'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
   :host([inverted][variant='primary'][color='default']) {
-    --mdc-button-primary-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-button-primary-background-color: var(--mds-color-theme-inverted-button-primary-normal);
-    --mdc-button-primary-hover-background-color: var(--mds-color-theme-inverted-button-primary-hover);
-    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-inverted-button-primary-pressed);
-    --mdc-button-primary-disabled-background-color: var(--mds-color-theme-inverted-button-primary-disabled);
-    --mdc-button-primary-disabled-color: var(--mds-color-theme-inverted-text-primary-disabled);
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-background: var(--mds-color-theme-inverted-button-primary-normal);
+  }
+
+  :host([inverted][variant='primary'][color='default']:hover) {
+    --mdc-button-background: var(--mds-color-theme-inverted-button-primary-hover);
+  }
+
+  :host([inverted][variant='primary'][color='default']:active),
+  :host([inverted][variant='primary'][color='default'].pressed) {
+    --mdc-button-background: var(--mds-color-theme-inverted-button-primary-pressed);
+  }
+  :host([inverted][variant='primary'][color='default'][disabled]),
+  :host([inverted][variant='primary'][color='default'][soft-disabled]) {
+    --mdc-button-background: var(--mds-color-theme-inverted-button-primary-disabled);
+    --mdc-button-text-color: var(--mds-color-theme-inverted-text-primary-disabled);
+    cursor: auto;
+  }
+
+  :host([variant='primary'][disabled]),
+  :host([variant='primary'][soft-disabled]) {
+    --mdc-button-background: var(--mds-color-theme-button-primary-disabled);
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-disabled);
+    cursor: auto;
+  }
+  :host([variant='secondary'][disabled]),
+  :host([variant='secondary'][soft-disabled]) {
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-button-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-disabled);
+    cursor: auto;
+  }
+  :host([variant='tertiary'][disabled]),
+  :host([variant='tertiary'][soft-disabled]) {
+    --mdc-button-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-button-background: var(--mds-color-theme-button-secondary-disabled);
+    cursor: auto;
   }
 
   :host([data-btn-type='pill'])::part(button-text),

package/dist/components/buttonlink/buttonlink.component.d.ts

@@ -27,6 +27,13 @@ declare const ButtonLink_base: import("../../utils/mixins/index.types").Construc
  * @csspart button-text - The slot containing the buttonlink text.
  * @csspart postfix-icon - The postfix icon element.
  *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background color of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
+ * @cssproperty --mdc-button-line-height - Line height of the button text
+ * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
+ * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  */
 declare class ButtonLink extends ButtonLink_base {
     /**

package/dist/components/buttonlink/buttonlink.component.js

@@ -39,6 +39,13 @@ import styles from './buttonlink.styles';
  * @csspart button-text - The slot containing the buttonlink text.
  * @csspart postfix-icon - The postfix icon element.
  *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background color of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
+ * @cssproperty --mdc-button-line-height - Line height of the button text
+ * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
+ * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  */
 class ButtonLink extends ButtonComponentMixin(Linksimple) {
     constructor() {

package/dist/components/buttonlink/buttonlink.styles.js

@@ -47,12 +47,12 @@ const styles = css `
   }
 
   :host([variant='secondary'])::part(anchor) {
-    border-color: var(--mdc-button-secondary-border-color);
+    border-color: var(--mdc-button-border-color);
   }
 
   :host([variant='secondary'][disabled])::part(anchor),
   :host([variant='secondary'][soft-disabled])::part(anchor) {
-    border-color: var(--mdc-button-secondary-disabled-border-color);
+    border-color: var(--mdc-button-border-color);
   }
 `;
 export default [styles, ...hostFocusRingStyles(true)];

package/dist/components/buttonsimple/buttonsimple.component.d.ts

@@ -15,6 +15,11 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
  *
  * @tagname mdc-buttonsimple
+ *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background color of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
  */
 declare class Buttonsimple extends Buttonsimple_base {
     /**

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -27,6 +27,11 @@ import styles from './buttonsimple.styles';
  * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
  *
  * @tagname mdc-buttonsimple
+ *
+ * @cssproperty --mdc-button-height - Height for button size
+ * @cssproperty --mdc-button-background - Background color of the button
+ * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-text-color - Text color of the button
  */
 class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Component))) {
     /** @internal */

package/dist/components/buttonsimple/buttonsimple.styles.js

@@ -4,61 +4,56 @@ const styles = [
     hostFitContentStyles,
     css `
     :host {
-      border: 0.0625rem solid transparent;
+      --mdc-button-height: unset;
+      --mdc-button-background: transparent;
+      --mdc-button-border-color: transparent;
+      --mdc-button-text-color: unset;
+
+      border: 0.0625rem solid var(--mdc-button-border-color);
       cursor: pointer;
       user-select: none;
 
-      background-color: var(--mds-color-theme-text-primary-normal);
-      color: var(--mds-color-theme-inverted-text-secondary-normal);
+      background-color: var(--mdc-button-background);
+      color: var(--mdc-button-text-color);
       font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      height: var(--mdc-button-height);
       outline: none;
-
-      --mdc-button-height-size-124: 7.75rem;
-      --mdc-button-height-size-88: 5.5rem;
-      --mdc-button-height-size-72: 4.5rem;
-      --mdc-button-height-size-64: 4rem;
-      --mdc-button-height-size-52: 3.25rem;
-      --mdc-button-height-size-40: 2.5rem;
-      --mdc-button-height-size-32: 2rem;
-      --mdc-button-height-size-28: 1.75rem;
-      --mdc-button-height-size-24: 1.5rem;
-      --mdc-button-height-size-20: 1.25rem;
     }
 
     :host([disabled]),
     :host([soft-disabled]) {
-      background-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-button-background: var(--mds-color-theme-text-primary-disabled);
     }
     :host([size='124']) {
-      height: var(--mdc-button-height-size-124);
+      --mdc-button-height: 7.75rem;
     }
     :host([size='88']) {
-      height: var(--mdc-button-height-size-88);
+      --mdc-button-height: 5.5rem;
     }
     :host([size='72']) {
-      height: var(--mdc-button-height-size-72);
+      --mdc-button-height: 4.5rem;
     }
     :host([size='64']) {
-      height: var(--mdc-button-height-size-64);
+      --mdc-button-height: 4rem;
     }
     :host([size='52']) {
-      height: var(--mdc-button-height-size-52);
+      --mdc-button-height: 3.25rem;
     }
     :host([size='40']) {
-      height: var(--mdc-button-height-size-40);
+      --mdc-button-height: 2.5rem;
     }
     :host([size='32']) {
-      height: var(--mdc-button-height-size-32);
+      --mdc-button-height: 2rem;
     }
     :host([size='28']) {
-      height: var(--mdc-button-height-size-28);
+      --mdc-button-height: 1.75rem;
       font-size: var(--mds-font-size-body-midsize);
     }
     :host([size='24']) {
-      height: var(--mdc-button-height-size-24);
+      --mdc-button-height: 1.5rem;
     }
     :host([size='20']) {
-      height: var(--mdc-button-height-size-20);
+      --mdc-button-height: 1.25rem;
     }
   `,
     ...hostFocusRingStyles(),

package/dist/components/checkbox/checkbox.component.d.ts

@@ -86,7 +86,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     formStateRestoreCallback(state: string): void;
     /**
      * Toggles the state of the checkbox element.
-     * If the element is not disabled, then
+     * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
      */
     private toggleState;

package/dist/components/checkbox/checkbox.component.js

@@ -151,11 +151,11 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
     }
     /**
      * Toggles the state of the checkbox element.
-     * If the element is not disabled, then
+     * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
      */
     toggleState() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.softDisabled && !this.readonly) {
             this.checked = !this.checked;
             this.indeterminate = false;
         }
@@ -167,6 +167,9 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      */
     handleKeyDown(event) {
         var _a;
+        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+            event.preventDefault();
+        }
         if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
@@ -194,6 +197,8 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         ?checked="${this.checked}"
         ?indeterminate="${this.indeterminate}"
         ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        ?soft-disabled="${this.softDisabled}"
       >
         <input
           id="${this.inputId}"
@@ -206,6 +211,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
           aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           tabindex="${this.disabled ? -1 : 0}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"