diff --git a/design-tokens-b.css b/design-tokens-b.css
index 00fa1c3..8d4c415 100644
--- a/design-tokens-b.css
+++ b/design-tokens-b.css
@@ -23,7 +23,7 @@
/* Color Palette */
--pano-black-1: hsla(0, 0%, 100%, 1);
- --pano-black-2: hsla(0, 0%, 80%, 1);
+ --pano-black-2: hsla(0, 0%, 60%, 1);
--pano-black-3: hsla(0, 0%, 40%, 1);
--pano-black-4: hsla(0, 0%, 20%, 1);
--pano-black-5: hsla(0, 0%, 0%, 1);
@@ -42,7 +42,7 @@
/* Color */
--color-primary: var(--pano-black-5);
--color-on-primary: var(--pano-white);
- --color-primary-container: var(--pano-black-3);
+ --color-primary-container: var(--pano-black-2);
--color-primary-on-container: var(--pano-black);
--color-secondary: var(--pano-royal-blue-5);
diff --git a/plop-templates/button/component.json b/plop-templates/button/component.json
index 036a54f..7fc69ff 100644
--- a/plop-templates/button/component.json
+++ b/plop-templates/button/component.json
@@ -13,15 +13,23 @@
},
"iconOnly": {
"type": "boolean",
- "default": false
+ "default": false,
+ "attribute": "icon-only"
},
"iconBefore": {
"type": "string",
- "default": ""
+ "default": "",
+ "attribute": "icon-before"
+ },
+ "fullWidth": {
+ "type": "boolean",
+ "default": false,
+ "attribute": "full-width"
},
"iconAfter": {
"type": "string",
- "default": ""
+ "default": "",
+ "attribute": "icon-after"
},
"href": {
"type": "string",
diff --git a/plop-templates/button/component.styles.ts b/plop-templates/button/component.styles.ts
index f783c1d..df3ae71 100644
--- a/plop-templates/button/component.styles.ts
+++ b/plop-templates/button/component.styles.ts
@@ -22,6 +22,11 @@ export const buttonStyles = css`
color: var(--button-color);
background-color: var(--button-background-color);
cursor: pointer;
+
+ &[data-full-width] {
+ width: 100%;
+ display: flex;
+ }
}
/* Link Styles */
@@ -51,7 +56,7 @@ export const buttonStyles = css`
filter: brightness(var(--interaction-state-active));
}
-.button[icon-only] {
+.button[data-icon-only] {
aspect-ratio: 1;
}
diff --git a/plop-templates/button/component.ts b/plop-templates/button/component.ts
index f919bf5..bb4d3e2 100644
--- a/plop-templates/button/component.ts
+++ b/plop-templates/button/component.ts
@@ -55,6 +55,7 @@ export class {{properCase meta.prefix}}Button extends LitElement {
iconAfter,
label,
href,
+ fullWidth,
disabled
} = this;
@@ -73,13 +74,13 @@ export class {{properCase meta.prefix}}Button extends LitElement {
if(href) {
return html`
- dataAttributes}}>
+ dataAttributes}}>
${innerHtml}
`;
} else {
return html`
-