feat: Final fixes (#117)

* Fix button styles * Improve templates * Allow button to go full width and consistently use data attributes * Adapt design tokens
jkimmeyer · Nov 26, 2023 · e7e2a6e · e7e2a6e
1 parent 41ab783
commit e7e2a6e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`
-        <a class="button" href="${href}" ?icon-only="${iconOnly}" {{> dataAttributes}}>
+        <a class="button" href="${href}" ?data-icon-only="${iconOnly}" ?data-full-width="${fullWidth}" {{> dataAttributes}}>
           ${innerHtml}
         </a>
       `;
     } else {
       return html`
-        <button class="button" ?disabled="${disabled}" ?icon-only="${iconOnly}" {{> dataAttributes}}>
+        <button class="button" ?disabled="${disabled}" ?data-icon-only="${iconOnly}" ?data-full-width="${fullWidth}" {{> dataAttributes}}>
           ${innerHtml}
         </button>
       `;

diff --git 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
@@ -39,6 +39,7 @@ export class {{properCase meta.prefix }}Input extends LitElement {
         margin: 0;
         padding: 0;
         font: inherit;
+        outline: none;
       }
 
       .sr-only {