feat: use LinkButton, adjust styles

Author: matoous

src/components/content/Button.astro

@@ -5,12 +5,16 @@ sidebar:
   order: 60
 ---
 
-import { Aside } from '@astrojs/starlight/components';
-import Button from '@components/content/Button.astro';
+import { Aside, LinkButton } from '@astrojs/starlight/components';
 
 To use PrestaShop with SumUp, download the SumUp Payment module plugin, which requires configuration in your SumUp dashboard.
 
-<Button href="https://addons.prestashop.com/en/payment-card-wallet/44630-sumup-payment.html">Download PrestaShop Plugin</Button>
+<LinkButton
+  href="https://addons.prestashop.com/en/payment-card-wallet/44630-sumup-payment.html"
+  icon="external"
+>
+  Download PrestaShop Plugin
+</LinkButton>
 
 ## Prerequisites
 

src/content/docs/online-payments/plugins/prestashop.mdx

@@ -5,18 +5,20 @@ sidebar:
   order: 80
 ---
 
-import { Aside } from "@astrojs/starlight/components";
-import Button from "@components/content/Button.astro";
+import { Aside, LinkButton } from "@astrojs/starlight/components";
 
 The [SumUp Payment Gateway for WooCommerce](https://wordpress.org/plugins/sumup-payment-gateway-for-woocommerce/) enables payments on WordPress sites without coding, enabling your customizations and providing your customers the convenience of securely buying products from your website without being redirected to other pages. The plugin supports major cards (Visa, Mastercard, Amex, Diners, Discover, JCB) via embedded forms. Transactions are processed through the SumUp payment platform with [transaction history provided in the SumUp Dashboard](https://me.sumup.com/sales/transactions).
 
 <Aside type="note">
   The SumUp WooCommerce plugin is SCA ready and compliant with PCI standards.
 </Aside>
 
-<Button href="https://wordpress.org/plugins/sumup-payment-gateway-for-woocommerce/">
+<LinkButton
+  href="https://wordpress.org/plugins/sumup-payment-gateway-for-woocommerce/"
+  icon="external"
+>
   Go to plugin page
-</Button>
+</LinkButton>
 
 ## Prerequisites
 

src/content/docs/online-payments/plugins/woocommerce.mdx

@@ -7,7 +7,6 @@ sidebar:
 ---
 
 import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
-import Button from '@components/content/Button.astro';
 import Image from '@components/content/Image.astro';
 
 SumUp's React Native Payment SDK provides a payment sheet that is displayed on top of your app. It collects user payment details, confirms a payment, and saves a card for future usage. Moreover, it allows a user to use Apple Pay or Google Pay to process payments.

src/content/docs/online-payments/sdks/react-native.mdx

@@ -27,3 +27,53 @@
   --sl-color-orange: var(--cui-border-warning);
   --sl-color-orange-low: var(--cui-bg-warning);
 }
+
+/* Bring Starlight LinkButton closer to Circuit UI button styling. */
+.sl-link-button {
+  border-radius: var(--cui-border-radius-byte);
+  font-weight: var(--cui-font-weight-semibold);
+  line-height: var(--cui-body-m-line-height);
+  padding: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo))
+    calc(var(--cui-spacings-giga) - var(--cui-border-width-kilo));
+  transition:
+    opacity var(--cui-transitions-default),
+    color var(--cui-transitions-default),
+    background-color var(--cui-transitions-default),
+    border-color var(--cui-transitions-default);
+}
+
+.sl-link-button.primary {
+  color: var(--cui-fg-on-strong);
+  background-color: var(--cui-bg-accent-strong);
+  border-color: transparent;
+}
+
+.sl-link-button.primary:hover {
+  color: var(--cui-fg-on-strong-hovered);
+  background-color: var(--cui-bg-accent-strong-hovered);
+  border-color: transparent;
+}
+
+.sl-link-button.primary:active {
+  color: var(--cui-fg-on-strong-pressed);
+  background-color: var(--cui-bg-accent-strong-pressed);
+  border-color: transparent;
+}
+
+.sl-link-button.secondary {
+  color: var(--cui-fg-normal);
+  background-color: var(--cui-bg-normal);
+  border-color: var(--cui-border-normal);
+}
+
+.sl-link-button.secondary:hover {
+  color: var(--cui-fg-normal-hovered);
+  background-color: var(--cui-bg-subtle-hovered);
+  border-color: var(--cui-border-normal-hovered);
+}
+
+.sl-link-button.secondary:active {
+  color: var(--cui-fg-normal-pressed);
+  background-color: var(--cui-bg-subtle-pressed);
+  border-color: var(--cui-border-normal-pressed);
+}