🐛 Fix Action Buttons size and display, and add example to Storybook

frontend/src/app/main/ui/ds/buttons/_buttons.scss

@@ -20,14 +20,18 @@
   --button-focus-inner-ring-color: initial;
   --button-focus-outer-ring-color: initial;
 
+  --button-width: initial;
+  --button-height: #{$sz-32};
+
   appearance: none;
-  height: $sz-32;
+
-  border: none;
+  width: var(--button-width);
-  border-radius: $br-8;
+  height: var(--button-height);
 
   background: var(--button-bg-color);
   color: var(--button-fg-color);
   border: $b-1 solid var(--button-border-color);
+  border-radius: $br-8;
 
   &:hover {
     --button-bg-color: var(--button-hover-bg-color);
@@ -130,21 +134,3 @@
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }
-
-%base-button-action {
-  --button-bg-color: transparent;
-  --button-fg-color: var(--color-foreground-secondary);
-
-  --button-hover-bg-color: transparent;
-  --button-hover-fg-color: var(--color-accent-primary);
-
-  --button-active-bg-color: var(--color-background-quaternary);
-
-  --button-disabled-bg-color: transparent;
-  --button-disabled-fg-color: var(--color-accent-primary-muted);
-
-  --button-focus-bg-color: transparent;
-  --button-focus-fg-color: var(--color-accent-primary);
-  --button-focus-inner-ring-color: transparent;
-  --button-focus-outer-ring-color: var(--color-accent-primary);
-}

frontend/src/app/main/ui/ds/buttons/buttons.mdx

@@ -45,6 +45,24 @@ These are available in the `app.main.ds.foundations.assets.icon` namespace.
 
 <Canvas of={ButtonStories.WithIcon} />
 
+```clj
+[:> icon-button* {:variant "primary"
+                  :icon i/effects}]
+```
+
+<Canvas of={IconButtonStories.Primary} />
+
+### Action Buttons
+
+Action buttons are a variant of `icon-button*` (`"action"`) but smaller.
+
+```clj
+[:> icon-button* {:variant "action"
+                  :icon i/effects}]
+```
+
+<Canvas of={IconButtonStories.Action} />
+
 ### Accessibility
 
 Icon buttons require an `aria-label`. This is also shown in a tooltip on hovering the button.

frontend/src/app/main/ui/ds/buttons/icon_button.scss

@@ -10,10 +10,12 @@
 
 .icon-button {
   @extend %base-button;
-  width: #{$sz-32};
+
-  display: flex;
+  --button-width: #{$sz-32};
-  justify-content: center;
+  --button-height: #{$sz-32};
-  align-items: center;
+
+  display: grid;
+  place-content: center;
 }
 
 .icon-button-primary {
@@ -33,5 +35,22 @@
 }
 
 .icon-button-action {
-  @extend %base-button-action;
+  --button-bg-color: transparent;
+  --button-fg-color: var(--color-foreground-secondary);
+
+  --button-hover-bg-color: transparent;
+  --button-hover-fg-color: var(--color-accent-primary);
+
+  --button-active-bg-color: var(--color-background-quaternary);
+
+  --button-disabled-bg-color: transparent;
+  --button-disabled-fg-color: var(--color-accent-primary-muted);
+
+  --button-focus-bg-color: transparent;
+  --button-focus-fg-color: var(--color-accent-primary);
+  --button-focus-inner-ring-color: transparent;
+  --button-focus-outer-ring-color: var(--color-accent-primary);
+
+  --button-width: #{$sz-24};
+  --button-height: #{$sz-24};
 }