@vonage/vwc-button 2.33.0 → 2.34.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +9 -9
- package/vwc-button.css.js +1 -1
- package/vwc-button.css.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-button",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.34.1",
|
|
4
4
|
"description": "button component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/button#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@material/mwc-button": "^0.22.1",
|
|
30
|
-
"@vonage/vvd-core": "2.
|
|
31
|
-
"@vonage/vvd-foundation": "2.
|
|
32
|
-
"@vonage/vvd-style-coupling": "2.
|
|
33
|
-
"@vonage/vwc-icon": "2.
|
|
30
|
+
"@vonage/vvd-core": "2.34.1",
|
|
31
|
+
"@vonage/vvd-foundation": "2.34.1",
|
|
32
|
+
"@vonage/vvd-style-coupling": "2.34.1",
|
|
33
|
+
"@vonage/vwc-icon": "2.34.1",
|
|
34
34
|
"lit-element": "^2.4.0",
|
|
35
35
|
"lit-html": "^1.3.0",
|
|
36
36
|
"tslib": "^2.3.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@vonage/vvd-design-tokens": "2.
|
|
40
|
-
"@vonage/vvd-typography": "2.
|
|
41
|
-
"@vonage/vvd-umbrella": "2.
|
|
39
|
+
"@vonage/vvd-design-tokens": "2.34.1",
|
|
40
|
+
"@vonage/vvd-typography": "2.34.1",
|
|
41
|
+
"@vonage/vvd-umbrella": "2.34.1",
|
|
42
42
|
"typescript": "^4.3.2"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "90017917cfc9a4ea2acfa0761c2daf777eb3d503"
|
|
45
45
|
}
|
package/vwc-button.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation-diverse);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation-diverse)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:currentColor;display:flex}.mdc-button>.trailing-icon vwc-icon,.mdc-button>.leading-icon vwc-icon{--gutter: 8px}:host([enlarged]) .mdc-button>.trailing-icon vwc-icon,:host([enlarged]) .mdc-button>.leading-icon vwc-icon{--gutter: 10px}:host([stacked]) .mdc-button>.trailing-icon vwc-icon,:host([stacked]) .mdc-button>.leading-icon vwc-icon{--gutter: 0}.mdc-button>.trailing-icon vwc-icon{margin-inline-start:var(--gutter)}.mdc-button>.leading-icon vwc-icon{margin-inline-end:var(--gutter)}:host([dense]) .mdc-button{--button-block-size: 32px}:host([dense]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 16px)}:host([enlarged]) .mdc-button{--button-block-size: 48px}:host([enlarged]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 24px)}:host([raised]) .mdc-button,:host([unelevated]) .mdc-button{--mdc-ripple-color: var(--vvd-button-on-color, var(--layout-color-text))}:host([unelevated]) .mdc-button{--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-fill));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-text))}.mdc-button:not(.layout-filled){--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-text));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-fill))}:host([dense]) .mdc-button{--mdc-button-horizontal-padding: 12px}:host([enlarged]) .mdc-button{--mdc-button-horizontal-padding: 20px}.mdc-button.button-stacked{--button-block-size: 68px;flex-direction:column;line-height:normal}:host([enlarged]) .mdc-button.button-stacked{--button-block-size: 80px}:host([dense]) .mdc-button.button-stacked{--button-block-size: 56px}.mdc-button.button-stacked>.leading-icon vwc-icon,.mdc-button.button-stacked .leading-icon ::slotted(*){margin-block-end
|
|
2
|
+
export const style = css `:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation-diverse);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation-diverse)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:currentColor;display:flex}.mdc-button>.trailing-icon vwc-icon,.mdc-button>.leading-icon vwc-icon{--gutter: 8px}:host([enlarged]) .mdc-button>.trailing-icon vwc-icon,:host([enlarged]) .mdc-button>.leading-icon vwc-icon{--gutter: 10px}:host([stacked]) .mdc-button>.trailing-icon vwc-icon,:host([stacked]) .mdc-button>.leading-icon vwc-icon{--gutter: 0}.mdc-button>.trailing-icon vwc-icon{margin-inline-start:var(--gutter)}.mdc-button>.leading-icon vwc-icon{margin-inline-end:var(--gutter)}:host([dense]) .mdc-button{--button-block-size: 32px}:host([dense]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 16px)}:host([enlarged]) .mdc-button{--button-block-size: 48px}:host([enlarged]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 24px)}:host([raised]) .mdc-button,:host([unelevated]) .mdc-button{--mdc-ripple-color: var(--vvd-button-on-color, var(--layout-color-text))}:host([unelevated]) .mdc-button{--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-fill));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-text))}.mdc-button:not(.layout-filled){--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-text));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-fill))}:host([dense]) .mdc-button{--mdc-button-horizontal-padding: 12px}:host([enlarged]) .mdc-button{--mdc-button-horizontal-padding: 20px}.mdc-button.button-stacked{--button-block-size: 68px;flex-direction:column;line-height:normal}:host([enlarged]) .mdc-button.button-stacked{--button-block-size: 80px}:host([dense]) .mdc-button.button-stacked{--button-block-size: 56px}.mdc-button.button-stacked>.leading-icon vwc-icon,.mdc-button.button-stacked .leading-icon ::slotted(*){margin-block-end:8px}.mdc-button.button-stacked>.trailing-icon vwc-icon,.mdc-button.button-stacked .trailing-icon ::slotted(*){margin-block-start:8px}.mdc-button.button-stacked .trailing-icon ::slotted(*),.mdc-button.button-stacked .leading-icon ::slotted(*){margin-inline-end:0;margin-inline-start:0}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-button-shape:6px}:host([shape=pill i]){--vvd-button-shape:24px}`;
|
|
3
3
|
//# sourceMappingURL=vwc-button.css.js.map
|
package/vwc-button.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-button.css.js","sourceRoot":"","sources":["src/vwc-button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-button.css.js","sourceRoot":"","sources":["src/vwc-button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,q3OAAq3O,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation-diverse);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation-diverse)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:currentColor;display:flex}.mdc-button>.trailing-icon vwc-icon,.mdc-button>.leading-icon vwc-icon{--gutter: 8px}:host([enlarged]) .mdc-button>.trailing-icon vwc-icon,:host([enlarged]) .mdc-button>.leading-icon vwc-icon{--gutter: 10px}:host([stacked]) .mdc-button>.trailing-icon vwc-icon,:host([stacked]) .mdc-button>.leading-icon vwc-icon{--gutter: 0}.mdc-button>.trailing-icon vwc-icon{margin-inline-start:var(--gutter)}.mdc-button>.leading-icon vwc-icon{margin-inline-end:var(--gutter)}:host([dense]) .mdc-button{--button-block-size: 32px}:host([dense]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 16px)}:host([enlarged]) .mdc-button{--button-block-size: 48px}:host([enlarged]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 24px)}:host([raised]) .mdc-button,:host([unelevated]) .mdc-button{--mdc-ripple-color: var(--vvd-button-on-color, var(--layout-color-text))}:host([unelevated]) .mdc-button{--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-fill));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-text))}.mdc-button:not(.layout-filled){--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-text));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-fill))}:host([dense]) .mdc-button{--mdc-button-horizontal-padding: 12px}:host([enlarged]) .mdc-button{--mdc-button-horizontal-padding: 20px}.mdc-button.button-stacked{--button-block-size: 68px;flex-direction:column;line-height:normal}:host([enlarged]) .mdc-button.button-stacked{--button-block-size: 80px}:host([dense]) .mdc-button.button-stacked{--button-block-size: 56px}.mdc-button.button-stacked>.leading-icon vwc-icon,.mdc-button.button-stacked .leading-icon ::slotted(*){margin-block-end:8px}.mdc-button.button-stacked>.trailing-icon vwc-icon,.mdc-button.button-stacked .trailing-icon ::slotted(*){margin-block-start:8px}.mdc-button.button-stacked .trailing-icon ::slotted(*),.mdc-button.button-stacked .leading-icon ::slotted(*){margin-inline-end:0;margin-inline-start:0}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-button-shape:6px}:host([shape=pill i]){--vvd-button-shape:24px}`;"]}
|