Remove buttons SASS

Instead, use SASS from `frontend-shared` package

src/styles/annotator/components/AdderToolbar.scss

-@use "../../shared/components/buttons";
+@use '@hypothesis/frontend-shared/styles/components/buttons';
+
 @use "../mixins/layout";
 @use "../mixins/molecules";
 @use "../mixins/utils";

src/styles/annotator/components/Toolbar.scss

 @use "sass:color";
 
-@use '../variables' as var;
+@use '@hypothesis/frontend-shared/styles/components/buttons' as shared-buttons;
 
-@use '../../shared/components/buttons' as shared-buttons;
+@use '../variables' as var;
 
 @use '../mixins/buttons';
 @use '../mixins/layout';

src/styles/shared/_index.scss

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

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

-@use "sass:map";
-
-// Set colors for a button
-@mixin _colors($colormap) {
-  color: map.get($colormap, 'foreground');
-  background-color: map.get($colormap, 'background');
-
-  &:disabled {
-    color: map.get($colormap, 'disabled-foreground');
-  }
-}
-
-// Set hover colors and transition for a button
-@mixin _hover-state($colormap) {
-  &:hover:not([disabled]) {
-    color: map.get($colormap, 'hover-foreground');
-    background-color: map.get($colormap, 'hover-background');
-  }
-  transition: color 0.2s ease-out, background-color 0.2s ease-out,
-    opacity 0.2s ease-out;
-}
-
-// Set active state colors for a button
-@mixin _active-state($colormap) {
-  &[aria-expanded='true'],
-  &[aria-pressed='true'] {
-    color: map.get($colormap, 'active-foreground');
-    @if map.get($colormap, 'active-background') {
-      background-color: map.get($colormap, 'active-background');
-    }
-
-    &:hover:not([disabled]) {
-      color: map.get($colormap, 'hover-foreground');
-    }
-
-    &:focus:not([disabled]) {
-      color: map.get($colormap, 'active-foreground');
-    }
-  }
-}
-
-// Variant mixin: may be be used by variants (BEM modifier classes)
-@mixin button--variant($options) {
-  @include _colors(map.get($options, 'colormap'));
-  @if map.get($options, 'withStates') {
-    @include _active-state(map.get($options, 'colormap'));
-    @include _hover-state(map.get($options, 'colormap'));
-  }
-  @content;
-}
-
-// Base mixin for buttons.
-@mixin button($options) {
-  @include _colors(map.get($options, 'colormap'));
-
-  @if map.get($options, 'withStates') {
-    @include _active-state(map.get($options, 'colormap'));
-    @include _hover-state(map.get($options, 'colormap'));
-  }
-
-  border-radius: map.get($options, 'border-radius');
-  border: none;
-  padding: 0.5em;
-
-  &--small {
-    padding: 0.25em;
-  }
-
-  &--large {
-    padding: 0.75em;
-  }
-
-  font-size: 1em;
-  font-weight: 700;
-  white-space: nowrap; // Keep multi-word button labels from wrapping
-
-  @if map.get($options, 'inline') {
-    display: inline;
-  } @else {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  @if map.get($options, 'withLayout') {
-    &--icon-left svg {
-      margin-right: map.get($options, 'margin');
-    }
-
-    &--icon-right svg {
-      margin-left: map.get($options, 'margin');
-    }
-    // When a button has "layout", that indicates it has some textual content:
-    // Size text to the contextual 1em, and adjust the icon to look balanced.
-    // H frontend app buttons tend to apply an icon:text ratio of ~1.25:1
-    svg {
-      width: 1.25em;
-      height: 1.25em;
-    }
-  } @else {
-    // In the case where an icon is the only content in a <button> element,
-    // size the icon based on contextual font-size. i.e. the icon IS
-    // the content
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-  }
-}

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

-@use 'sass:map';
-@use '../../variables' as var;
-
-// Map variables to local tokens
-$touch-target-size: var.$touch-target-size !default;
-
-$color-g1: var.$color-grey-1 !default;
-$color-g2: var.$color-grey-2 !default;
-$color-g3: var.$color-grey-3 !default;
-$color-g4: var.$color-grey-4 !default;
-$color-g6: var.$color-grey-6 !default;
-$color-g7: var.$color-grey-7 !default;
-$color-gsemi: var.$color-grey-semi !default;
-$color-gmid: var.$color-grey-mid !default;
-$color-brand: var.$color-brand !default;
-$color-link-hover: var.$color-link-hover !default;
-
-// Colors for labeled buttons
-$LabeledButton-colors: (
-  'foreground': $color-gmid,
-  'background': $color-g1,
-  'hover-foreground': $color-g7,
-  'hover-background': $color-g2,
-  'active-foreground': $color-g7,
-  'disabled-foreground': $color-gmid,
-);
-
-// Variant currently unused
-$LabeledButton-colors--light: $LabeledButton-colors;
-
-$LabeledButton-colors--primary: (
-  'foreground': $color-g1,
-  'background': $color-gmid,
-  'hover-foreground': $color-g1,
-  'hover-background': $color-g6,
-  'active-foreground': $color-g1,
-  'disabled-foreground': $color-g4,
-);
-
-$LabeledButton-colors--dark: (
-  'foreground': $color-gmid,
-  'background': transparent,
-  'hover-foreground': $color-g7,
-  'hover-background': $color-g3,
-  'active-foreground': $color-gmid,
-  'active-background': $color-g3,
-  'disabled-foreground': $color-gmid,
-);
-
-// Colors for icon-only buttons
-$IconButton-colors: (
-  'foreground': $color-gmid,
-  'background': transparent,
-  'hover-foreground': $color-g7,
-  'hover-background': transparent,
-  'active-foreground': $color-brand,
-  'disabled-foreground': $color-gmid,
-);
-
-$IconButton-colors--light: (
-  'foreground': $color-gsemi,
-  'background': transparent,
-  'hover-foreground': $color-g6,
-  'hover-background': transparent,
-  'active-foreground': $color-gsemi,
-  'disabled-foreground': $color-gsemi,
-);
-
-$IconButton-colors--primary: (
-  'foreground': $color-brand,
-  'background': transparent,
-  'hover-foreground': $color-brand,
-  'hover-background': transparent,
-  'active-foreground': $color-brand,
-  'disabled-foreground': $color-gmid,
-);
-
-// Variant currently unused
-$IconButton-colors--dark: $IconButton-colors;
-
-// Colors for buttons styled as "links"
-$LinkButton-colors: (
-  'foreground': $color-gmid,
-  'background': transparent,
-  'hover-foreground': $color-link-hover,
-  'hover-background': transparent,
-  'active-foreground': $color-g7,
-  'disabled-foreground': $color-gmid,
-);
-
-// Variant currently unused
-$LinkButton-colors--light: $LinkButton-colors;
-
-$LinkButton-colors--primary: (
-  'foreground': $color-brand,
-  'background': transparent,
-  'hover-foreground': $color-brand,
-  'hover-background': transparent,
-  'active-foreground': $color-brand,
-  'disabled-foreground': $color-gmid,
-);
-
-$LinkButton-colors--dark: (
-  'foreground': $color-g7,
-  'background': transparent,
-  'hover-foreground': $color-link-hover,
-  'hover-background': transparent,
-  'active-foreground': $color-g7,
-  'disabled-foreground': $color-gmid,
-);
-
-$-IconButton: (
-  'normal': $IconButton-colors,
-  'primary': $IconButton-colors--primary,
-  'dark': $IconButton-colors--dark,
-  'light': $IconButton-colors--light,
-);
-
-$-LabeledButton: (
-  'normal': $LabeledButton-colors,
-  'primary': $LabeledButton-colors--primary,
-  'dark': $LabeledButton-colors--dark,
-  'light': $LabeledButton-colors--light,
-);
-
-$-LinkButton: (
-  'normal': $LinkButton-colors,
-  'primary': $LinkButton-colors--primary,
-  'dark': $LinkButton-colors--dark,
-  'light': $LinkButton-colors--light,
-);
-
-// Return a color map corresponding to a button component-variant combination
-// Defaults to `LabeledButton--normal`
-@function colors-for($button-type: 'LabeledButton', $variant: 'normal') {
-  $colors: map.get($-LabeledButton, 'normal');
-
-  @if $button-type == 'IconButton' {
-    $colors: map.get($-IconButton, $variant);
-  }
-  @if $button-type == 'LabeledButton' {
-    $colors: map.get($-LabeledButton, $variant);
-  }
-  @if $button-type == 'LinkButton' {
-    $colors: map.get($-LinkButton, $variant);
-  }
-
-  @return $colors;
-}

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

-@forward 'config' show colors-for;
-@forward 'mixins' show reset, Button, IconButton, LabeledButton, LinkButton;

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

-@use "sass:map";
-
-@use "@hypothesis/frontend-shared/styles/mixins/focus";
-
-@use 'config' as c;
-@use 'base';
-
-// 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: ()) {
-  $defaultOptions: (
-    // What colors should be used for this button's styling?
-    'colormap': c.$LabeledButton-colors,
-    // And for its variants...needed if `withVariants` is true (true is default)
-    'colormap--primary': c.$LabeledButton-colors--primary,
-    'colormap--dark': c.$LabeledButton-colors--dark,
-    'colormap--light': c.$LabeledButton-colors--light,
-    // Should this button apply an inline layout? (default is flex)
-    'inline': false,
-    // Should styling be added for "active" and "hover" states for this <button>?
-    'withStates': true,
-    // Should styling be added to support the layout of multiple sub-elements
-    // of this <button>? Not needed if <button> contains only one child.
-    'withLayout': false,
-    // Provide styling for light, primary and dark variants? If this is true,
-    // make sure all variant colormaps are provided
-    'withVariants': true,
-    // Internal margin around SVG icon
-    'margin': 0.5em,
-    'border-radius': 2px
-  );
-  $-options: map.merge($defaultOptions, $options);
-
-  @include reset;
-  @include base.button($options: $-options);
-
-  // Add styles for supported variants as modifier classes, if `withVariants` enabled
-  @if (map.get($-options, 'withVariants')) {
-    &--light {
-      $-light-options: (
-        'colormap': map.get($-options, 'colormap--light'),
-        'withStates': map.get($-options, 'withStates'),
-      );
-      @include base.button--variant($-light-options);
-    }
-
-    &--primary {
-      $-primary-options: (
-        'colormap': map.get($-options, 'colormap--primary'),
-        'withStates': map.get($-options, 'withStates'),
-      );
-      @include base.button--variant($-primary-options);
-    }
-
-    &--dark {
-      $-dark-options: (
-        'colormap': map.get($-options, 'colormap--dark'),
-        'withStates': map.get($-options, 'withStates'),
-      );
-      @include base.button--variant($-dark-options);
-    }
-  }
-  @content;
-}
-
-// Base mixin for a button with an icon and no label/content. Supports
-// variants and sizes. Will assert responsive touch-target sizing in
-// --medium (default) and --large variants.
-@mixin IconButton($options: ()) {
-  $defaultOptions: (
-    'colormap': c.$IconButton-colors,
-    'colormap--light': c.$IconButton-colors--light,
-    'colormap--primary': c.$IconButton-colors--primary,
-    'colormap--dark': c.$IconButton-colors--dark,
-    'responsive': true,
-  );
-  $-options: map.merge($defaultOptions, $options);
-
-  @include Button($-options) {
-    // Establish a minimum touch-target for touch devices if 'responsive'
-    // option is enabled (default). This is not applied to the `--small`
-    // size variant.
-    @if map.get($-options, 'responsive') {
-      @media (pointer: coarse) {
-        &--medium,
-        &--large {
-          min-width: c.$touch-target-size;
-          min-height: c.$touch-target-size;
-        }
-      }
-    }
-  }
-
-  @content;
-}
-
-// Base mixin for a button that has text/content and, optionally, an icon.
-// Supports variants and sizes.
-@mixin LabeledButton($options: ()) {
-  $defaultOptions: (
-    'colormap': c.$LabeledButton-colors,
-    'colormap--light': c.$LabeledButton-colors--light,
-    'colormap--primary': c.$LabeledButton-colors--primary,
-    'colormap--dark': c.$LabeledButton-colors--dark,
-    'withLayout': true,
-  );
-  $-options: map.merge($defaultOptions, $options);
-
-  @include Button($-options);
-
-  @content;
-}
-
-// Base mixin for a button styled to look like an <a> link. Supports variants
-// but not pressed/active states at present.
-@mixin LinkButton($options: ()) {
-  $defaultOptions: (
-    'colormap': c.$LinkButton-colors,
-    'colormap--light': c.$LinkButton-colors--light,
-    'colormap--primary': c.$LinkButton-colors--primary,
-    'colormap--dark': c.$LinkButton-colors--dark,
-  );
-  $-options: map.merge($defaultOptions, $options);
-  @include Button($-options) {
-    // Lighter font weight for link-styled buttons
-    font-weight: 400;
-    // Add an underline on hover
-    &:hover:not([disabled]) {
-      text-decoration: underline;
-    }
-
-    &--primary {
-      // Primary variant has bolder text (and also different colors)
-      font-weight: 500;
-    }
-  }
-
-  // Remove padding to allow button to appear flush with surrounding content
-  padding: 0;
-  @content;
-}

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

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

src/styles/sidebar/components/SelectionTabs.scss

-@use "../../shared/components/buttons";
+@use '@hypothesis/frontend-shared/styles/components/buttons';
 
 @use "../../mixins/layout";
 @use "../../mixins/utils";

src/styles/sidebar/sidebar.scss

@@ -12,7 +12,7 @@
 @use '@hypothesis/frontend-shared/styles';
 
 // Temporary shared styles
-// FIXME: Replace with shared-package variant when available
+// FIXME: Currently needed for Dialog styling
 @use '../shared';
 
 // Custom button styling for the application

src/styles/ui-playground/_shared.scss

@@ -3,6 +3,9 @@
 @use '../sidebar/elements';
 @use '../variables' as var;
 
+// Shared styles from frontend-shared package
+@use '@hypothesis/frontend-shared/styles';
+// Shared styles from components/styles temporarily still in this repository
 @use '../shared';
 
 body {