Refactore button styles

app/components/button.hbs

@@ -1,30 +1,36 @@
-<button
-  disabled={{this.disabled}}
-  type={{this.type}}
-  class="
-    inline-flex
-    items-center
-    px-3
-    py-2
-    cursor-pointer
-    border
-    border-gray
-    bg-white
-    {{if @group "first:rounded-l-md last:rounded-r-md" "rounded-md"}}
-    text-gray-700
-    hover:bg-gray-50
-    focus:outline-none
-    {{if this.isActive "bg-gray-50"}}
-  "
-  {{on "click" this.handleClick}}
-  ...attributes
->
-  {{#if this.isPending}}
-    <MdIcon::Loading @spin={{true}} class="mx-1"/>
-  {{else if @icon}}
-    <@icon class="mx-1"/>
-  {{/if}}
-  {{#if this.text}}
-    <span class="mx-1">{{this.text}}</span>
-  {{/if}}
-</button>
+{{#let
+  'inline-flex items-center cursor-pointer border border-transparent hover:opacity-80 active:opacity-60 focus:outline-none'
+  (hash
+    primary='text-white bg-primary'
+    default='text-white bg-gray'
+    outline='text-gray border-gray'
+  )
+  (hash
+    small='px-2.5 py-1.5 text-sm' default='px-3 py-2 leading-4 text-sm'
+  ) as |commonClasses styleClasses sizeClasses|
+}}
+  <button
+    disabled={{this.disabled}}
+    type={{this.type}}
+    class="{{commonClasses}}
+
+      {{get styleClasses this.style}}
+
+      {{get sizeClasses this.size}}
+
+      {{if @group 'first:rounded-l-md last:rounded-r-md' 'rounded-md'}}"
+    ...attributes
+    {{on 'click' this.handleClick}}
+  >
+    {{#if this.isPending}}
+      <MdIcon::Loading @spin={{true}} class="mx-1" />
+    {{else if @icon}}
+      <@icon class="mx-1" />
+    {{/if}}
+    {{#if this.text}}
+      <span class="mx-1">
+        {{this.text}}
+      </span>
+    {{/if}}
+  </button>
+{{/let}}

app/components/button.js

@@ -5,6 +5,14 @@ import { tracked } from '@glimmer/tracking';
 export default class ButtonComponent extends Component {
   @tracked _state = 'default';
 
+  get style() {
+    return this.args.style ?? 'default';
+  }
+
+  get size() {
+    return this.args.size ?? 'default';
+  }
+
   get isActive() {
     return (
       this.args.group &&

app/templates/admin/indexes/item/settings.hbs

@@ -23,13 +23,20 @@
 <div class="mb-4">
   <Button
     @text="Update"
+    @style="primary"
+    @size="small"
     @onClick={{fn
       this.update
       'updateDisplayedAttributes'
       @model.displayedAttributes
     }}
   />
-  <Button @text="Reset" @onClick={{fn this.reset 'resetDisplayedAttributes'}} />
+  <Button
+    @text="Reset"
+    @size="small"
+    @style="outline"
+    @onClick={{fn this.reset 'resetDisplayedAttributes'}}
+  />
 </div>
 {{!--
 <RoyalTable @data={{@model.attributes}} as |Row data|>

config/tailwind.config.js

@@ -7,11 +7,11 @@ const light = '#FAFAFA';
 
 // const  light = '#E5E7EB';
 // const secondary = '#374151';
-const gray = '#e1dfe2';
+// const gray = '#e1dfe2';
 const text = '#252526';
 const dark = '#1E1E1E';
 // const primary = '#2563EB';
-const primary = '#ff5caa';
+// const primary = '#ff5caa';
 
 module.exports = {
   content: ['./app/**/*.html', './app/**/*.hbs'],
@@ -23,7 +23,11 @@ module.exports = {
         // gray,
         dark,
         text,
-        primary,
+        primary: {
+          light: colors.pink['100'],
+          DEFAULT: colors.pink['500'],
+          dark: colors.pink['800'],
+        },
 
         gray: {
           light: colors.gray['100'],