Figma Docs Cleanup (#3153)

sites/next.skeleton.dev/src/components/docs/FigmaBuyNow.astro

@@ -35,8 +35,9 @@ import { Check as IconCheck } from 'lucide-react';
 	});
 </script>
 
-<div class="flex flex-col bg-transparent rounded-container border-[1px] border-surface-200-800 shadow-lg overflow-hidden">
+<div class="w-full max-w-[960px] flex flex-col card bg-surface-50-950 border-[1px] border-surface-200-800 overflow-hidden">
 	<div class="flex flex-col p-6 w-full">
+		<h2 class="h2 pb-8" id="get-access">Get Access</h2>
 		<span class="text-xl font-semibold h-full pb-6">Figma UI Kit for Skeleton includes:</span>
 		<div class="flex flex-col gap-3">
 			<div class="flex flex-row items-center gap-3">

sites/next.skeleton.dev/src/content/docs/guides/figma.mdx

@@ -20,17 +20,24 @@ import { Clock3 } from 'lucide-react';
 import { Shapes } from 'lucide-react';
 import { SwatchBook } from 'lucide-react';
 
-<p class="type-scale-5">Explore step-by-step guides to unlock the full potential of Skeleton in your design workflow. Whether you're setting up for the first time or mastering advanced features, these tutorials will guide you every step of the way.</p>
+<p class="text-2xl">Explore step-by-step guides to unlock the full potential of Skeleton in your design workflow. Whether you're setting up for the first time or mastering advanced features, these tutorials will guide you every step of the way.</p>
 
-Discover all the benefits of Skeleton Figma UI library:
-<figure class="card-filled-enhanced flex justify-center p-8">
+## Get Access
+
+Review the benefits of the Figma UI Kit for Skeleton.
+
+<figure class="linker">
 	<a
-		class="btn preset-filled"
+		class="linker-item"
 		href="/figma#get-access"
 		target="_blank"
 	>
 		Get the Figma UI Kit &rarr;
 	</a>
 </figure>
 
+## Guides
+
+Follow along with our step-by-step guides.
+
 <NavGrid collection="docs" path="figma/" classes="md:grid-cols-1" />

sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-1.mdx

@@ -21,11 +21,10 @@ import ImgCreateNewFile from '@images/tutorials/figma/chapter-1/04_createNewFile
 import ImgSelectLibrary from '@images/tutorials/figma/chapter-1/05_selectLibrary.webp';
 import ImgUseLibrary from '@images/tutorials/figma/chapter-1/06_useLibrary.webp';
 
----
 
-## How to Install the Figma Library
+<p className="text-2xl">For best results, a <a href="https://www.figma.com/pricing/#figma" class="chip preset-filled-primary-500 mx-1" target="_blank">Figma Professional Team Plan</a> (or higher) is recommended.</p>
 
-For best results, a <a href="https://www.figma.com/pricing/#figma" class="chip preset-filled mx-1" target="_blank">Figma Professional Team Plan</a> (or higher) is recommended.
+## How to Install the Figma Library
 
 <Process>
     <ProcessStep step="1">
@@ -39,7 +38,7 @@ For best results, a <a href="https://www.figma.com/pricing/#figma" class="chip p
                 <p>Complete set of themed components for Skeleton v3</p>
             </div>
             </div>
-            <a href="https://polar.sh/skeleton-kit/" type="button" class="btn preset-filled-primary-500" target="_blank">Purchase</a>
+            <a href="https://polar.sh/skeleton-kit/" type="button" class="btn preset-filled" target="_blank">Purchase</a>
         </div>
     </ProcessStep>
 

sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-2.mdx

@@ -28,18 +28,19 @@ import ImgPasteTheme from '@images/tutorials/figma/chapter-2/06_pasteTheme.webp'
 import ImgPublish from '@images/tutorials/figma/chapter-2/07_publish.webp';
 import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdates.webp';
 
----
+## Prerequisites
+
+- [Chapter 1: Set-up Skeleton Figma Library](chapter-1)
 
-**Prerequisites:** <br /> 
-&#9679; Completed [Chapter 1: Set-up Skeleton Figma Library](chapter-1)
+---
 
 ## Import Custom Theme
 
 <Process>
     <ProcessStep step="1">
         ### Open Skeleton v3 Figma Library
 
-        
+
         <Image src={ImgOpenSkeleton} class="rounded-container" alt="Create New Project" />
     </ProcessStep>
 
@@ -102,7 +103,8 @@ import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdat
 
 ## Apply Custom Theme in Project
 
-### Prerequisites:
+### Prerequisites
+
 - Completed [Chapter 1: Set-up Skeleton Figma Library](chapter-1#how-to-install-the-figma-library)
 - Completed [Chapter 2: Import Custom Theme](#import-custom-theme)
 
@@ -111,8 +113,8 @@ import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdat
         ### Open Project
 
         Open the project where the `Skeleton Figma Library` is applied.
-        
-        <Image src={ImgOpenProject} class="rounded-container" alt="Use Library" />    
+
+        <Image src={ImgOpenProject} class="rounded-container" alt="Use Library" />
     </ProcessStep>
 
     <ProcessStep step="2">
@@ -129,7 +131,7 @@ import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdat
         In the `Pages` section⁴ on the right panel, click `Apply variable mode`, hover over `Theme`, and select your imported theme⁵.
 
         <Image src={ImgSwitchTheme} class="rounded-container" alt="Use Library" />
-        
+
         Voilà! Your theme is now applied to the components.
 
         <Image src={ImgSwitchThemeResult} class="rounded-container" alt="Use Library" />
@@ -141,7 +143,7 @@ import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdat
         Skeleton themes include `light` and `dark` modes by default. Switch modes the same way you switch themes: in the `Pages` section⁶, click `Apply variable mode`, hover over `Color Scheme`, and select the scheme⁷.
 
         <Image src={ImgSwitchColorScheme} class="rounded-container" alt="Use Library" />
-        
+
         Your components are now in the `Dark` `Color Scheme`.
 
         <Image src={ImgSwitchColorSchemeResult} class="rounded-container" alt="Use Library" />

sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-3.mdx

@@ -21,18 +21,15 @@ import ImgSelectNewSkeleton from '@images/tutorials/figma/chapter-3/04_selectNew
 import ImgRemoveOld from '@images/tutorials/figma/chapter-3/removeOld.webp';
 import { ChevronDown, BookOpen } from 'lucide-svelte';
 
-
----
-
-<p className='text-xl'>Skeleton is continually evolving, and to ensure that your design remains in harmony with it, it's essential to keep the Skeleton Figma UI library up to date. </p>
+<p className="text-2xl">Skeleton is continually evolving, and to ensure that your design remains in harmony with it, it's essential to keep the Skeleton Figma UI library up to date.</p>
 
 ## How to update the library
 
 <Process>
     <ProcessStep step="1">
-        ### Download the latest version of the Skeleton Figma UI library 
+        ### Download the latest version of the Skeleton Figma UI library
 
-        <a href='https://polar.sh/skeleton-kit/' className='btn preset-filled-primary-500'>Download</a>
+        <a href='https://polar.sh/skeleton-kit/' className='btn preset-filled'>Download</a>
     </ProcessStep>
 
     <ProcessStep step="2">
@@ -45,7 +42,7 @@ import { ChevronDown, BookOpen } from 'lucide-svelte';
     <ProcessStep step="3">
         ### Publish new version
 
-        Double-click the new version of Skeleton v3 Figma UI Library to open it. 
+        Double-click the new version of Skeleton v3 Figma UI Library to open it.
 
         <p className="relative">At the top left, next to the library file name, click the  <span class="badge-icon preset-filled"><ChevronDown size={16}/></span> ⁵ icon and select `Publish library…` ⁶. In the modal, click `Publish` ⁷ and wait for the library to finish publishing.</p>
         <Image src={ImgPublishLib} class="rounded-container" alt="Publish library" />