Merge pull request #21692 from overleaf/jdt-premium-secondary-button

Add premium-secondary button style

GitOrigin-RevId: 79ac9004a0b081eb1e7ac2af88ca1f976b997fe0

services/web/frontend/js/features/ui/components/types/button-props.ts

@@ -32,5 +32,6 @@ export type ButtonProps = {
     | 'danger'
     | 'danger-ghost'
     | 'premium'
+    | 'premium-secondary'
     | 'link'
 }

services/web/frontend/stories/ui/button.stories.tsx

@@ -41,6 +41,7 @@ const meta: Meta<typeof Button> = {
         'danger',
         'danger-ghost',
         'premium',
+        'premium-secondary',
       ],
     },
   },

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -91,6 +91,17 @@
       background: var(--blue-70);
     }
   }
+
+  &.btn-premium-secondary {
+    @include ol-button-variant(
+      $color: var(--blue-60),
+      $background: var(--bg-light-primary),
+      $border: var(--blue-60),
+      $hover-background: var(--bg-info-03),
+      $hover-border: var(--blue-60),
+      $borderless: false
+    );
+  }
 }
 
 // Link buttons

services/web/frontend/stylesheets/components/buttons.less

@@ -132,6 +132,11 @@
   }
 }
 
+.btn-premium-secondary {
+  .btn-bordered();
+  .button-variant(@blue-60, @white, @blue-60);
+}
+
 .reset-btns {
   // reset all buttons back to their original colors
   .btn-danger {