@momentum-design/components 0.120.12 → 0.120.14

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/chip/chip.component.d.ts

@@ -20,6 +20,7 @@ declare const Chip_base: import("../../utils/mixins/index.types").Constructor<im
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ * @cssproperty --mdc-button-height - Height for button size
  *
  * @csspart label - The label part of the chip.
  *

package/dist/components/chip/chip.component.js

@@ -32,6 +32,7 @@ import styles from './chip.styles';
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ * @cssproperty --mdc-button-height - Height for button size
  *
  * @csspart label - The label part of the chip.
  *

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

@@ -30,6 +30,7 @@ declare const LinkButton_base: import("../../utils/mixins/index.types").Construc
  * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
  * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
  * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-button-height - Height for button size
  */
 declare class LinkButton extends LinkButton_base {
     /**

package/dist/components/linkbutton/linkbutton.component.js

@@ -43,6 +43,7 @@ import styles from './linkbutton.styles';
  * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
  * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
  * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-button-height - Height for button size
  */
 class LinkButton extends IconNameMixin(Buttonsimple) {
     constructor() {

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

@@ -34,6 +34,7 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  *
  * @tagname mdc-tab
  *
+ * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
  * @cssproperty --mdc-tab-height - Height of the tab.
  * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab

package/dist/components/tab/tab.component.js

@@ -48,6 +48,7 @@ import styles from './tab.styles';
  *
  * @tagname mdc-tab
  *
+ * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
  * @cssproperty --mdc-tab-height - Height of the tab.
  * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab

package/dist/components/textarea/textarea.component.js

@@ -280,7 +280,7 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         }
         return html `
       <mdc-text part="character-counter" tagname="span" type=${DEFAULTS.CHARACTER_COUNTER_TYPE}>
-        ${this.value.length < 10 ? `0${this.value.length}` : this.value.length}/${this.maxCharacterLimit}
+        ${this.value.length}/${this.maxCharacterLimit}
       </mdc-text>
     `;
     }