Restructure common buttons SASS modules and make `reset` mixin public

src/styles/shared/_index.scss

-@use './components/buttons';
+@use './components/buttons/styles';

src/styles/shared/components/buttons/_base.scss

 @use "sass:map";
 
-@use "@hypothesis/frontend-shared/styles/mixins/focus";
-
 // Set colors for a button
 @mixin _colors($colormap) {
   color: map.get($colormap, 'foreground');
@@ -53,13 +51,6 @@
 
 // Base mixin for buttons.
 @mixin button($options) {
-  // Reset browser defaults
-  @include focus.outline-on-keyboard-focus;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border-style: none;
-
   @include _colors(map.get($options, 'colormap'));
 
   @if map.get($options, 'withStates') {

src/styles/shared/components/buttons/_index.scss

-@use './mixins';
-
-// A button with text, and optionally an icon
-.LabeledButton {
-  @include mixins.LabeledButton;
-}
-
-// A button with only an icon and no label/text
-.IconButton {
-  @include mixins.IconButton;
-}
-
-// A button styled to appear as a link, with underline on hover
-.LinkButton {
-  @include mixins.LinkButton;
-}
+@forward 'config';
+@forward 'mixins';

src/styles/shared/components/buttons/mixins.scss → src/styles/shared/components/buttons/_mixins.scss

@@ -2,11 +2,17 @@
 
 @use "@hypothesis/frontend-shared/styles/mixins/focus";
 
-@use './_config' as c;
-@use './_base' as base;
+@use 'config' as c;
+@use 'base';
 
-// Allow access to the configuration values to users of this module (esp. colors)
-@forward './_config';
+// Basic reset for browser-imposed button styles
+@mixin reset {
+  @include focus.outline-on-keyboard-focus;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border-style: none;
+}
 
 // Base mixin for <button> elements
 @mixin Button($options: ()) {
@@ -33,6 +39,7 @@
   );
   $-options: map.merge($defaultOptions, $options);
 
+  @include reset;
   @include base.button($options: $-options);
 
   // Add styles for supported variants as modifier classes, if `withVariants` enabled

src/styles/shared/components/buttons/_styles.scss

+@use 'mixins';
+
+// A button with text, and optionally an icon
+.LabeledButton {
+  @include mixins.LabeledButton;
+}
+
+// A button with only an icon and no label/text
+.IconButton {
+  @include mixins.IconButton;
+}
+
+// A button styled to appear as a link, with underline on hover
+.LinkButton {
+  @include mixins.LinkButton;
+}

src/styles/sidebar/buttons.scss

@@ -2,7 +2,7 @@
 
 @use '../variables' as var;
 // Button styling for the sidebar extending common button-component styles
-@use '../shared/components/buttons/mixins' as buttons;
+@use '../shared/components/buttons';
 
 // Similar to `.LinkButton`, with inline layout (so button can be used
 // within text)