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` - `; diff --git a/plop-templates/input/component.styles.ts b/plop-templates/input/component.styles.ts index 10c6965..2dc49b0 100644 --- a/plop-templates/input/component.styles.ts +++ b/plop-templates/input/component.styles.ts @@ -13,7 +13,7 @@ export const inputStyles = css` .input--field { width: 100%; - border: 1px solid var(--color-primary); + border: 1px solid var(--color-black); border-radius: var(--space-4); padding-block: var(--input-padding-block); padding-inline: calc(var(--space-8) * 0.5); @@ -26,6 +26,13 @@ export const inputStyles = css` .input[data-icon-after] & { padding-right: var(--icon-padding); } + + &:focus, + &:hover, + &:active { + outline: none; + border-color: var(--color-primary); + } } {{#each variants.sizes}} diff --git a/plop-templates/input/component.ts b/plop-templates/input/component.ts index 30acd0c..e29edc5 100644 --- a/plop-templates/input/component.ts +++ b/plop-templates/input/component.ts @@ -39,6 +39,7 @@ export class {{properCase meta.prefix }}Input extends LitElement { margin: 0; padding: 0; font: inherit; + outline: none; } .sr-only {