Small paragraph buttons in seven theme

A bit of an unfortunate situation because module is applying CSS classes and fixes for themes instead of inverted situation where themes should be doing this. But what to do I guess it would be very hard for Claro theme to inject needed button--small CSS class on theme level.

I see more additional stuff from Claro like button--extrasmall CSS class added to paragraph code. This, and maybe more CSS classes we will add from Claro in future, could potentially create problems - it could randomly clash with contrib modules CSS rules, etc.

Anyway

1. +++ b/css/paragraphs.actions.scss
   @@ -125,4 +125,15 @@
   +  @at-root #block-seven-content {
   ...
   +    .paragraphs-add-wrapper {
   

   Minor thing but, not sure should we use @at-root here to keep this in context of current scope - this is a fix that is fixing both current and .paragraphs-add-wrapper scopes. I would move this outside of current scope so we do not need to write @at-root.

2. +++ b/css/paragraphs.actions.scss
   @@ -125,4 +125,15 @@
   +      .button {
   

   This rule is restoring regular button size because of applying `button--small` CSS class rule. Shouldn't we use here `button--small` instead of `button` and state in CSS selector exactly why this rule is applied?

Beside this, tested current patch and it does solve issues described in description.

Changes looks good. Just one thingy:

+++ b/css/paragraphs.actions.css
@@ -127,8 +127,9 @@
+#block-seven-content .paragraphs-actions .button--small,
+#block-seven-content .paragraphs-add-wrapper .button--small,
+#block-seven-content .paragraphs-dropbutton-wrapper .button--small {

Instead of this can we just write:

#block-seven-content .button--small {

Tried this for first two selectors and it seems it works fine. I can't reproduce `.paragraphs-dropbutton-wrapper` selector but I guess it will also work?

+++ b/css/paragraphs.actions.scss
@@ -126,3 +126,12 @@
+// We added button-small class for the Claro theme UX definitions.
+// We therefore need to reset small button styles for the Seven theme.
+#block-seven-content {
+  .button--small {
+    padding: 4px 1.5em;
+    font-size: 0.875rem;
+  }

content is the name of the block id, while it is usually like this, it doesn't seem like a good idea to hardcode this. It's not nice, but what we could do is check the active them and then add a separate library with a separate file for seven specific overrides. in a follow-up, we could consider moving other seven specific styling in there as well.

if (\Drupal::theme()->getActiveTheme()->getName() == 'seven') {
add second seven specific library
}

Checked latest changes in the patch, looks good.

Tested against Drupal 8.9.3 and Drupal 9.0.3 with latest paragraphs dev version and this patch. Buttons in Seven theme looks good, and I don't see any special problem with Claro related to buttons.

Thanks everyone.