button variants

Author: Templarian

src/components/pg/button/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

src/components/pg/button/__examples__/basic/basic.ts

@@ -1,10 +1,12 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 
+import style from './basic.css';
 import template from './basic.html';
 
 @Component({
   selector: 'x-pg-button-basic',
-  template
+  style,
+  template,
 })
 export default class XPgButtonBasic extends HTMLElement {
 

src/components/pg/button/__examples__/states/states.css

@@ -0,0 +1,3 @@
+h4 {
+  margin-block: 0.25rem;
+}

src/components/pg/button/__examples__/states/states.ts

@@ -1,11 +1,13 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgButton from '../../button';
 
+import style from './states.css';
 import template from './states.html';
 
 @Component({
   selector: 'x-pg-button-states',
-  template
+  style,
+  template,
 })
 export default class XPgButtonStates extends HTMLElement {
   @Part() $active: PgButton;

src/components/pg/button/__examples__/variants/variants.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

src/components/pg/button/__examples__/variants/variants.html

@@ -0,0 +1,10 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button variant="brand">Example Button</pg-button>
+    <pg-button variant="brand"><pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon></pg-button>
+    <pg-button variant="brand">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      With Icon
+    </pg-button>
+  </div>
+</div>

src/components/pg/button/__examples__/variants/variants.ts

@@ -0,0 +1,13 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import style from './variants.css';
+import template from './variants.html';
+
+@Component({
+  selector: 'x-pg-button-variants',
+  style,
+  template,
+})
+export default class XPgVariantsBasic extends HTMLElement {
+
+}

src/components/pg/button/button.css

@@ -2,7 +2,7 @@
   display: inline-flex;
 }
 
-[part="button"] {
+[part=button] {
   display: flex;
   align-items: center;
   align-content: center;
@@ -17,25 +17,26 @@
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);
   cursor: var(--pg-button-cursor, var(--pg-cursor-default, default));
+  gap: var(--pg-button-gap, 0.325rem);
 }
 
-[part="button"]:hover {
+[part=button]:hover {
   --pg-button-border-color: var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
   color: var(--pg-button-hover-color, #FFFFFF);
   --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);
 }
 
-[part="button"]:active {
+[part=button]:active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   position: relative;
 }
 
-[part="button"]:focus-visible {
+[part=button]:focus-visible {
   position: relative;
 }
 
-[part="button"]:active::before {
+[part=button]:active::before {
   content: '';
   position: absolute;
   top: -1px;
@@ -45,7 +46,7 @@
   border-radius: var(--pg-button-border-radius, 0.25rem);
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
-[part="button"]:focus-visible::before {
+[part=button]:focus-visible::before {
   pointer-events: none;
   content: '';
   position: absolute;
@@ -57,37 +58,46 @@
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
-[part="button"].start {
+[part=button].start {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   margin-right: -1px;
 }
 
-[part="button"].center {
+[part=button].center {
   border-radius: 0;
   margin-right: -1px;
 }
 
-[part="button"].end {
+[part=button].end {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-[part="button"].active {
+[part=button].active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   background-color: rgba(69, 60, 79, 0.1);
   color: var(--pg-button-color, #453C4F);
 }
-[part="button"].active:hover {
+[part=button].active:hover {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   background-color: var(--pg-button-color, #453C4F);
-  color: var(--pg-button-hover-color, #fff);
+  color: var(--pg-button-hover-color, #FFFFFF);
 }
 
-[part="button"].block {
+[part=button].block {
   flex: 1;
 }
 
+[part=button].brand {
+  --pg-button-background-color: #453C4F;
+  --pg-button-color: #FFFFFF;
+}
+[part=button].brand:hover {
+  --pg-button-hover-background-color: color-mix(in oklab, var(--pg-button-background-color), white 10%);
+  --pg-button-hover-border-color: color-mix(in oklab, var(--pg-button-background-color), white 10%);
+}
+
 ::slotted {
   align-self: center;
-}
+}

src/components/pg/button/button.ts

@@ -1,14 +1,17 @@
-import { Component, Part, Prop, normalizeBoolean } from '@pictogrammers/element';
+import { Component, Part, Prop, normalizeBoolean, normalizeString } from '@pictogrammers/element';
 
 import template from './button.html';
 import style from './button.css';
 
+const variants = ['neutral', 'brand'];
+
 @Component({
   selector: 'pg-button',
   style,
   template
 })
 export default class PgButton extends HTMLElement {
+  @Prop(normalizeString) variant: string = 'neutral';
   @Prop(normalizeBoolean) active: boolean = false;
   @Prop(normalizeBoolean) block: boolean = false;
   @Prop(normalizeBoolean) start: boolean = false;
@@ -27,6 +30,13 @@ export default class PgButton extends HTMLElement {
   }
 
   render(changes) {
+    if (changes.variant) {
+      if (!variants.includes(this.variant)) {
+        throw new Error(`invalid variant ${this.variant}`);
+      }
+      this.$button.classList.toggle('neutral', this.variant === 'neutral');
+      this.$button.classList.toggle('brand', this.variant === 'brand');
+    }
     if (changes.active) {
       this.$button.classList.toggle('active', this.active);
     }

src/components/pg/inputText/inputText.css

@@ -11,8 +11,8 @@
   font-size: 1rem;
   outline: none;
   field-sizing: content;
-  min-width: calc(100% - 0.5rem - 2px);
-  max-width: calc(var(--pg-input-text-max-width, 100%) - 0.5rem - 2px);
+  min-width: calc(100% - 1.5rem - 2px);
+  max-width: calc(var(--pg-input-text-max-width, 100%) - 1.5rem - 2px);
   background-color: transparent;
 }