style: global css heading font to semibold from bold and FAQs spacing between chevron and text (#15)

* style: accordion trigger and chevron gap set for FAQs

* fix: figma width

Author: BeEnAyA

apps/website/src/components/home/faq-accordion.tsx

@@ -47,7 +47,7 @@ export default function FAQAccordion() {
 		<Accordion size="lg" type="single" className="w-full" collapsible variant="open">
 			{CONTENT.map(({ title, content, icon: Icon }) => (
 				<AccordionItem key={title} value={title}>
-					<AccordionTrigger>
+					<AccordionTrigger className="gap-2">
 						<div className="flex items-center gap-3">
 							<Icon size={24} strokeWidth={1.5} className="text-fg-secondary shrink-0" aria-hidden="true" />
 							<span>{title}</span>

apps/website/src/components/mdx-components-docs.tsx

@@ -195,7 +195,7 @@ const components = (examples: typeof Examples | undefined) => ({
 		return <AccordionItem {...props} />
 	},
 	AccordionTrigger: (props: AccordionTriggerProps) => {
-		return <AccordionTrigger {...props} />
+		return <AccordionTrigger className="gap-2" {...props} />
 	},
 	AccordionContent: (props: AccordionContentProps) => {
 		return <AccordionContent {...props} />

apps/website/src/content/docs/getting-started/figma.mdx

@@ -7,7 +7,7 @@ description: Get the full Radian Figma kit for free in Figma community
 Available on the Figma Community, Radian is a free design system and UI kit built for solo designers, freelancers, startups, agencies, and organizations. With ever-expanding UI
 layouts, components and patterns, Radian keeps evolving to support your growth and collaboration.
 
-<Image src="/doc/figmacoverimage.png" width="716" height="405" alt="Figma Cover Image" loading="eager" />
+<Image src="/doc/figmacoverimage.png" width="720" height="405" alt="Figma Cover Image" loading="eager" />
 
 <br />
 
@@ -17,19 +17,19 @@ layouts, components and patterns, Radian keeps evolving to support your growth a
 
 1. **Get the File:** Get the Radian design system file from Figma community
 
-<Image src="/doc/downloadfigmafile.png" width="716" height="450" alt="Download Figma File" loading="eager" />
+<Image src="/doc/downloadfigmafile.png" width="720" height="450" alt="Download Figma File" loading="eager" />
 2. **Make a Copy:** Duplicate the file and move it to your intended project folder. Rename the file to “Project_Name Design System”
 
-<Image src="/doc/duplicatefile.png" width="716" height="450" alt="Duplicate File" loading="eager" />
+<Image src="/doc/duplicatefile.png" width="720" height="450" alt="Duplicate File" loading="eager" />
 3. **Tweaks:** Define primary colors, or fonts that aligns with your project
 
-<Image src="/doc/colorprimitive.png" width="716" height="450" alt="Map Colors" loading="eager" />
+<Image src="/doc/colorprimitive.png" width="720" height="450" alt="Map Colors" loading="eager" />
 4. **Start Building:** All you components will be adjusted to your selected color and fonts. Publish the library and start building your app.
 
-<Image src="/doc/colormapped.png" width="716" height="450" alt="Color Mapped" loading="eager" />
+<Image src="/doc/colormapped.png" width="720" height="450" alt="Color Mapped" loading="eager" />
 5. **New Theme:** All the design structure remains the same, just the brand color is changed.
 
-<Image src="/doc/newtheme.png" width="716" height="450" alt="New Theme" loading="eager" />
+<Image src="/doc/newtheme.png" width="720" height="450" alt="New Theme" loading="eager" />
 
 ## Whats Inside?
 

apps/website/src/css/globals.css

@@ -203,7 +203,7 @@
 
 /* Heading 1 */
 @utility heading-1 {
-	@apply font-heading text-[2.25rem] font-bold leading-[2.75rem];
+	@apply font-heading text-[2.25rem] font-semibold leading-[2.75rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 3rem;
@@ -218,7 +218,7 @@
 
 /* Heading 2 */
 @utility heading-2 {
-	@apply font-heading text-[2rem] font-bold leading-[2.5rem];
+	@apply font-heading text-[2rem] font-semibold leading-[2.5rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 2.5rem;
@@ -233,7 +233,7 @@
 
 /* Heading 3 */
 @utility heading-3 {
-	@apply font-heading text-[1.875rem] font-bold leading-[2.375rem];
+	@apply font-heading text-[1.875rem] font-semibold leading-[2.375rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 2.25rem;
@@ -248,7 +248,7 @@
 
 /* Heading 4 */
 @utility heading-4 {
-	@apply font-heading text-[1.75rem] font-bold leading-[2.25rem];
+	@apply font-heading text-[1.75rem] font-semibold leading-[2.25rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 1.875rem;
@@ -263,7 +263,7 @@
 
 /* Heading 5 */
 @utility heading-5 {
-	@apply font-heading text-[1.5rem] font-bold leading-[2rem];
+	@apply font-heading text-[1.5rem] font-semibold leading-[2rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 1.5rem;
@@ -278,7 +278,7 @@
 
 /* Heading 6 */
 @utility heading-6 {
-	@apply font-heading text-[1.25rem] font-bold leading-[1.75rem];
+	@apply font-heading text-[1.25rem] font-semibold leading-[1.75rem];
 
 	@media (width >=theme(--breakpoint-sm)) {
 		font-size: 1.25rem;

apps/website/src/css/website.css

@@ -72,13 +72,14 @@
 	html {
 		scroll-behavior: smooth;
 	}
+
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6,
-	[class^="heading-"] {
+	:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6) {
 		@apply tracking-[-0.01em];
 	}
 }