feat: adds support for link buttons

HiDeoo · Sep 20, 2024 · ffb4574 · ffb4574
1 parent 165b89b
commit ffb4574
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/docs/src/content/docs/examples/link-buttons.mdx b/docs/src/content/docs/examples/link-buttons.mdx
@@ -0,0 +1,31 @@
+---
+title: Link Buttons
+---
+
+import { LinkButton } from '@astrojs/starlight/components'
+
+## No icons
+
+<LinkButton href="/getting-started/">Get started</LinkButton>
+<LinkButton href="https://starlight.astro.build/" variant="secondary">
+  Related: Starlight
+</LinkButton>
+<LinkButton href="https://docs.astro.build/" variant="minimal">
+  Related: Astro
+</LinkButton>
+
+## With icons
+
+<LinkButton href="/getting-started/" icon="rocket">
+  Get started
+</LinkButton>
+<LinkButton
+  href="https://starlight.astro.build/"
+  variant="secondary"
+  icon="external"
+>
+  Related: Starlight
+</LinkButton>
+<LinkButton href="https://docs.astro.build/" variant="minimal" icon="external">
+  Related: Astro
+</LinkButton>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -15,10 +15,10 @@ hero:
     - text: Getting Started
       link: /getting-started/
       icon: rocket
-      variant: primary
     - text: Examples
       link: /examples/asides/
       icon: external
+      variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components'

diff --git a/packages/starlight-theme-rapide/styles.css b/packages/starlight-theme-rapide/styles.css
@@ -662,46 +662,6 @@ starlight-tabs ul[role='tablist'] a[role='tab']:not([aria-selected='true']):hove
   flex-shrink: 0;
 }
 
-/* Hero */
-
-.hero .action {
-  border: 1px solid transparent;
-  padding: 0.75rem 1rem;
-}
-
-.hero .action svg {
-  font-size: 1.25rem;
-}
-
-.hero .action.primary {
-  background-color: var(--sl-color-green-low);
-  border: 1px solid var(--sl-color-green);
-  color: var(--sl-color-green-high);
-}
-
-.hero .action.primary:is(:hover, :focus-visible) {
-  border-color: oklch(52% 0.11 var(--sl-hue-green));
-  color: var(--sl-color-green-accent-invert);
-}
-
-.hero .action.secondary {
-  border-color: var(--sl-color-gray-2);
-  color: var(--sl-color-gray-2);
-}
-
-.hero .action.secondary:is(:hover, :focus-visible) {
-  border-color: var(--sl-color-accent-high);
-  color: var(--sl-color-accent-high);
-}
-
-.hero .action.minimal:is(:hover, :focus-visible) {
-  color: var(--sl-color-accent-high);
-}
-
-.hero .action.minimal {
-  padding-inline: 0.25rem;
-}
-
 /* Steps */
 
 .sl-steps > li:last-of-type::after {
@@ -741,3 +701,42 @@ starlight-tabs ul[role='tablist'] a[role='tab']:not([aria-selected='true']):hove
   --sl-badge-danger-bg: var(--sl-color-red-low);
   --sl-badge-danger-text: var(--sl-color-red-high);
 }
+
+/* Link Buttons */
+
+:is(.hero, .sl-markdown-content) .sl-link-button {
+  padding: 0.75rem 1rem;
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button svg {
+  font-size: 1.25rem;
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.primary {
+  background-color: var(--sl-color-green-low);
+  border: 1px solid var(--sl-color-green);
+  color: var(--sl-color-green-high);
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.primary:is(:hover, :focus-visible) {
+  border-color: oklch(52% 0.11 var(--sl-hue-green));
+  color: var(--sl-color-green-accent-invert);
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.secondary {
+  border-color: var(--sl-color-gray-2);
+  color: var(--sl-color-gray-2);
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.secondary:is(:hover, :focus-visible) {
+  border-color: var(--sl-color-accent-high);
+  color: var(--sl-color-accent-high);
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.minimal {
+  padding-inline: 0.25rem;
+}
+
+:is(.hero, .sl-markdown-content) .sl-link-button.minimal:is(:hover, :focus-visible) {
+  color: var(--sl-color-accent-high);
+}