mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-29 09:50:10 -06:00
fix: zinc to slate, lighter heading and page titles
This commit is contained in:
ShubhamPalriwala
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Integrate code actions in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
#### Actions
|
||||
|
||||
# Code Actions
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Utilize Formbricks' No-Code Actions like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
#### Actions
|
||||
|
||||
# No-Code Actions
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Actions in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking actions for granular surveying.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
#### Actions
|
||||
|
||||
# What are actions and why are they useful?
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ export const meta = {
|
||||
"Generate, store, and delete personal API keys for secure Formbricks access. Ensure safekeeping to prevent unauthorized account control.",
|
||||
};
|
||||
|
||||
[API]()
|
||||
#### API
|
||||
|
||||
# API Key Setup
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Explore Formbricks' APIs: Public Client API for client-side tasks, and User API for account management with secure API Key authentication.",
|
||||
};
|
||||
|
||||
[API]()
|
||||
#### API
|
||||
|
||||
# API Overview
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ export const meta = {
|
||||
"Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
|
||||
};
|
||||
|
||||
[Client API]()
|
||||
#### Client API
|
||||
|
||||
# Responses API
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ export const meta = {
|
||||
description: "Learn how to use the Formbricks Webhook API.",
|
||||
};
|
||||
|
||||
[Webhook API]()
|
||||
#### Webhook API
|
||||
|
||||
# Webhook API
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. All open-source.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
#### Attributes
|
||||
|
||||
# Setting attributes with code
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Identify users with Formbricks by setting User ID, email, and custom attributes. Enhance survey targeting and recontacting while maintaining user privacy.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
#### Attributes
|
||||
|
||||
# Identifying Users
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"How to use attributes for user segmentation, enhancing survey targeting & results. Improve feedback quality and make data-driven decisions.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
#### Attributes
|
||||
|
||||
# What are attributes and why are they useful?
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ export const meta = {
|
||||
description: "To know how to decrease churn, you have to understand it. Use a micro-survey.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Learn from Churn
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ export const meta = {
|
||||
description: "Docs Feedback allows you to measure how clear your documentation is.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Docs Feedback
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const meta = {
|
||||
description: "Follow up with users who used a specific feature. Gather feedback and improve your product.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Feature Chaser
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ export const meta = {
|
||||
description: "The Feedback Box gives your users a direct channel to share their feedback and feel heard.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Feedback Box
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const meta = {
|
||||
description: "Understand how to improve the trial conversions to get more paying customers.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Improve Trial Conversion
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export const meta = {
|
||||
description: "Invite only power users to schedule an interview with your product team.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# In-app Interview Prompt
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const meta = {
|
||||
description: "The Product-Market Fit survey helps you measure, well, Product-Market Fit (PMF).",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
#### Best Practices
|
||||
|
||||
# Product-Market Fit Survey
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ export const meta = {
|
||||
description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
#### Contributing
|
||||
|
||||
# Demo App
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ export const meta = {
|
||||
description: "How to contribute to Formbricks",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
#### Contributing
|
||||
|
||||
# Contribution Guide
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ export const meta = {
|
||||
description: "Setup a development environment for Formbricks.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
#### Contributing
|
||||
|
||||
# Setup Dev Environment
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ export const meta = {
|
||||
"Formbricks is a complex application in constant development. Sometimes, things don't go as planned. Here are some tips to help you troubleshoot.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
#### Contributing
|
||||
|
||||
# Troubleshooting
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ export const meta = {
|
||||
description: "Get your first in app survey response in 10 minutes.",
|
||||
};
|
||||
|
||||
[Getting Started](#)
|
||||
#### Getting Started
|
||||
|
||||
# Quickstart
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ export const meta = {
|
||||
description: "Wire up Formbricks with Zapier and 5000+ other apps",
|
||||
};
|
||||
|
||||
[Integrations]()
|
||||
#### Integrations
|
||||
|
||||
# Zapier Setup
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Master in-product micro-surveys with Formbricks: user-friendly form builder, precise targeting, seamless integration, and insightful analytics for SaaS products.",
|
||||
};
|
||||
|
||||
[Introduction](#)
|
||||
#### Introduction
|
||||
|
||||
# How Formbricks works
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"The ultimate survey solution for SaaS, offering in-depth micro-surveys, precise targeting, and seamless integrations. Discover the difference today!",
|
||||
};
|
||||
|
||||
[Introduction](#)
|
||||
#### Introduction
|
||||
|
||||
# Why is Formbricks better?
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ export const meta = {
|
||||
description: "Prefill data in your surveys to make it easier for your users to provide feedback.",
|
||||
};
|
||||
|
||||
[Link Surveys]()
|
||||
#### Link Surveys
|
||||
|
||||
# Data Prefilling in Link Surveys
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export const meta = {
|
||||
"Identify users in link surveys via URL parameter. Connect responses to existing users in Formbricks.",
|
||||
};
|
||||
|
||||
[Link Surveys]()
|
||||
#### Link Surveys
|
||||
|
||||
# User Identification in Link Surveys
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Utilize Docker-Compose for easy deployment on your machine. Clone the repo, configure settings, and build the image to access the app on localhost.",
|
||||
};
|
||||
|
||||
[Self-hosting]()
|
||||
#### Self-Hosting
|
||||
|
||||
# Self Hosting Formbricks
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Utilize Docker-Compose for easy deployment on your machine. Clone the repo, configure settings, and build the image to access the app on localhost.",
|
||||
};
|
||||
|
||||
[Self-hosting]()
|
||||
#### Self-Hosting
|
||||
|
||||
# Running Formbricks with Docker
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Build the Formbricks Image right from the open-sourced codebase and make changes however needed. Deploy it then with the freedom of customizing even the compile-time environment variables.",
|
||||
};
|
||||
|
||||
[Self-hosting]()
|
||||
#### Self-Hosting
|
||||
|
||||
# Building and Running Formbricks from Source
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export const meta = {
|
||||
"Utilize Docker-Compose for easy deployment on your machine. Clone the repo, configure settings, and build the image to access the app on localhost.",
|
||||
};
|
||||
|
||||
[Self-hosting]()
|
||||
#### Self-Hosting
|
||||
|
||||
# Deploying Formbricks to Production
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@ export default function NotFound() {
|
||||
<>
|
||||
<HeroPattern />
|
||||
<div className="mx-auto flex h-full max-w-xl flex-col items-center justify-center py-16 text-center">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-white">404</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-white">Page not found</h1>
|
||||
<p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-white">404</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-slate-900 dark:text-white">Page not found</h1>
|
||||
<p className="mt-2 text-base text-slate-600 dark:text-slate-400">
|
||||
Sorry, we couldn’t find the page you’re looking for.
|
||||
</p>
|
||||
<Button href="/" arrow="right" className="mt-8">
|
||||
|
||||
@@ -73,8 +73,8 @@ const bestPractices: Array<BestPractice> = [
|
||||
|
||||
function BestPracticeIcon({ icon: Icon }: { icon: BestPractice["icon"] }) {
|
||||
return (
|
||||
<div className="dark:bg-white/7.5 dark:ring-white/15 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:group-hover:bg-emerald-300/10 dark:group-hover:ring-emerald-400">
|
||||
<Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-emerald-300/10 dark:group-hover:stroke-emerald-400" />
|
||||
<div className="dark:bg-white/7.5 dark:ring-white/15 flex h-7 w-7 items-center justify-center rounded-full bg-slate-900/5 ring-1 ring-slate-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-slate-900/25 dark:group-hover:bg-emerald-300/10 dark:group-hover:ring-emerald-400">
|
||||
<Icon className="h-5 w-5 fill-slate-700/10 stroke-slate-700 transition-colors duration-300 group-hover:stroke-slate-900 dark:fill-white/10 dark:stroke-slate-400 dark:group-hover:fill-emerald-300/10 dark:group-hover:stroke-emerald-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -134,18 +134,18 @@ function BestPractice({ resource }: { resource: BestPractice }) {
|
||||
<div
|
||||
key={resource.href}
|
||||
onMouseMove={onMouseMove}
|
||||
className="dark:bg-white/2.5 group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:hover:shadow-black/5">
|
||||
className="dark:bg-white/2.5 group relative flex rounded-2xl bg-slate-50 transition-shadow hover:shadow-md hover:shadow-slate-900/5 dark:hover:shadow-black/5">
|
||||
<BestPracticePattern {...resource.pattern} mouseX={mouseX} mouseY={mouseY} />
|
||||
<div className="ring-zinc-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
|
||||
<div className="ring-slate-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-slate-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
|
||||
<div className="relative rounded-2xl px-4 pb-4 pt-16">
|
||||
<BestPracticeIcon icon={resource.icon} />
|
||||
<h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
|
||||
<h3 className="mt-4 text-sm font-semibold leading-7 text-slate-900 dark:text-white">
|
||||
<Link href={resource.href}>
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
{resource.name}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{resource.description}</p>
|
||||
<p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{resource.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -157,7 +157,7 @@ export function BestPractices() {
|
||||
<Heading level={2} id="resources">
|
||||
Best Practices
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-slate-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{bestPractices.map((resource) => (
|
||||
<BestPractice key={resource.href} resource={resource} />
|
||||
))}
|
||||
|
||||
@@ -16,13 +16,13 @@ function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
|
||||
|
||||
const variantStyles = {
|
||||
primary:
|
||||
"rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-teal-400/10 dark:text-teal-400 dark:ring-1 dark:ring-inset dark:ring-teal-400/20 dark:hover:bg-teal-400/10 dark:hover:text-teal-300 dark:hover:ring-teal-300",
|
||||
"rounded-full bg-slate-900 py-1 px-3 text-white hover:bg-slate-700 dark:bg-teal-400/10 dark:text-teal-400 dark:ring-1 dark:ring-inset dark:ring-teal-400/20 dark:hover:bg-teal-400/10 dark:hover:text-teal-300 dark:hover:ring-teal-300",
|
||||
secondary:
|
||||
"rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
|
||||
"rounded-full bg-slate-100 py-1 px-3 text-slate-900 hover:bg-slate-200 dark:bg-slate-800/40 dark:text-slate-400 dark:ring-1 dark:ring-inset dark:ring-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-300",
|
||||
filled:
|
||||
"rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-teal-500 dark:text-white dark:hover:bg-teal-400",
|
||||
"rounded-full bg-slate-900 py-1 px-3 text-white hover:bg-slate-700 dark:bg-teal-500 dark:text-white dark:hover:bg-teal-400",
|
||||
outline:
|
||||
"rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
|
||||
"rounded-full py-1 px-3 text-slate-700 ring-1 ring-inset ring-slate-900/10 hover:bg-slate-900/2.5 hover:text-slate-900 dark:text-slate-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
|
||||
text: "text-teal-500 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-600",
|
||||
};
|
||||
|
||||
|
||||
@@ -74,10 +74,10 @@ function CopyButton({ code }: { code: string }) {
|
||||
<span
|
||||
aria-hidden={copied}
|
||||
className={clsx(
|
||||
"pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300",
|
||||
"pointer-events-none flex items-center gap-0.5 text-slate-400 transition duration-300",
|
||||
copied && "-translate-y-1.5 opacity-0"
|
||||
)}>
|
||||
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
|
||||
<ClipboardIcon className="h-5 w-5 fill-slate-500/20 stroke-slate-500 transition-colors group-hover/button:stroke-slate-400" />
|
||||
Copy
|
||||
</span>
|
||||
<span
|
||||
@@ -98,14 +98,14 @@ function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-b-white/7.5 bg-white/2.5 dark:bg-white/1 flex h-9 items-center gap-2 border-y border-t-transparent bg-zinc-900 px-4 dark:border-b-white/5">
|
||||
<div className="border-b-white/7.5 bg-white/2.5 dark:bg-white/1 flex h-9 items-center gap-2 border-y border-t-transparent bg-slate-900 px-4 dark:border-b-white/5">
|
||||
{tag && (
|
||||
<div className="dark flex">
|
||||
<Tag variant="small">{tag}</Tag>
|
||||
</div>
|
||||
)}
|
||||
{tag && label && <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />}
|
||||
{label && <span className="font-mono text-xs text-zinc-400">{label}</span>}
|
||||
{tag && label && <span className="h-0.5 w-0.5 rounded-full bg-slate-500" />}
|
||||
{label && <span className="font-mono text-xs text-slate-400">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -160,7 +160,7 @@ function CodeGroupHeader({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
|
||||
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-slate-700 bg-slate-800 px-4 dark:border-slate-800 dark:bg-transparent">
|
||||
{title && <h3 className="mr-auto pt-3 text-xs font-semibold text-white">{title}</h3>}
|
||||
{hasTabs && (
|
||||
<Tab.List className="-mb-px flex gap-4 text-xs font-medium">
|
||||
@@ -170,7 +170,7 @@ function CodeGroupHeader({
|
||||
"ui-not-focus-visible:outline-none border-b py-3 transition",
|
||||
childIndex === selectedIndex
|
||||
? "border-emerald-500 text-emerald-400"
|
||||
: "border-transparent text-zinc-400 hover:text-zinc-300"
|
||||
: "border-transparent text-slate-400 hover:text-slate-300"
|
||||
)}>
|
||||
{getPanelTitle(isValidElement(child) ? child.props : {})}
|
||||
</Tab>
|
||||
@@ -281,7 +281,7 @@ export function CodeGroup({
|
||||
let hasTabs = Children.count(children) >= 1;
|
||||
|
||||
let containerClassName =
|
||||
"not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
|
||||
"not-prose my-6 overflow-hidden rounded-2xl bg-slate-900 shadow-md dark:ring-1 dark:ring-white/10";
|
||||
let header = (
|
||||
<CodeGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
|
||||
{children}
|
||||
|
||||
@@ -24,7 +24,7 @@ function FeedbackButton(props: Omit<React.ComponentPropsWithoutRef<"button">, "t
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
className="hover:bg-zinc-900/2.5 px-3 text-sm font-medium text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white"
|
||||
className="hover:bg-slate-900/2.5 px-3 text-sm font-medium text-slate-600 transition hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -39,10 +39,10 @@ const FeedbackForm = forwardRef<
|
||||
ref={ref}
|
||||
onSubmit={onSubmit}
|
||||
className="absolute inset-0 flex items-center justify-center gap-6 md:justify-start">
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400">Was this page helpful?</p>
|
||||
<div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Was this page helpful?</p>
|
||||
<div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-full border border-slate-900/10 dark:border-white/10">
|
||||
<FeedbackButton data-response="Yes 👍">Yes 👍</FeedbackButton>
|
||||
<div className="bg-zinc-900/10 dark:bg-white/10" />
|
||||
<div className="bg-slate-900/10 dark:bg-white/10" />
|
||||
<FeedbackButton data-response="No 👎">No 👎</FeedbackButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -28,7 +28,7 @@ function PageLink({
|
||||
href={page.href}
|
||||
tabIndex={-1}
|
||||
aria-hidden="true"
|
||||
className="text-base font-semibold text-zinc-900 transition hover:text-zinc-600 dark:text-white dark:hover:text-zinc-300">
|
||||
className="text-base font-semibold text-slate-900 transition hover:text-slate-600 dark:text-white dark:hover:text-slate-300">
|
||||
{page.title}
|
||||
</Link>
|
||||
</>
|
||||
@@ -107,15 +107,15 @@ function SocialLink({
|
||||
return (
|
||||
<Link href={href} className="group">
|
||||
<span className="sr-only">{children}</span>
|
||||
<Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
|
||||
<Icon className="h-5 w-5 fill-slate-700 transition group-hover:fill-slate-900 dark:group-hover:fill-slate-500" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function SmallPrint() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-between gap-5 border-t border-zinc-900/5 pt-8 dark:border-white/5 sm:flex-row">
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400">
|
||||
<div className="flex flex-col items-center justify-between gap-5 border-t border-slate-900/5 pt-8 dark:border-white/5 sm:flex-row">
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||
Formbricks GmbH © 2023. All rights reserved.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
|
||||
@@ -31,11 +31,11 @@ export function GettingStarted() {
|
||||
<Heading level={2} id="getting-started">
|
||||
Quick Resources
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-slate-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{gettingStarted.map((guide) => (
|
||||
<div key={guide.href}>
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">{guide.name}</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{guide.description}</p>
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-white">{guide.name}</h3>
|
||||
<p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{guide.description}</p>
|
||||
<p className="mt-4">
|
||||
<Button href={guide.href} variant="text" arrow="right">
|
||||
Read more
|
||||
|
||||
@@ -16,7 +16,7 @@ function TopLevelNavItem({ href, children }: { href: string; children: React.Rea
|
||||
<li>
|
||||
<Link
|
||||
href={href}
|
||||
className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">
|
||||
className="text-sm leading-5 text-slate-600 transition hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
||||
{children}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -42,8 +42,8 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
|
||||
"fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
|
||||
!isInsideMobileNavigation && "backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80",
|
||||
isInsideMobileNavigation
|
||||
? "bg-white dark:bg-zinc-900"
|
||||
: "bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]"
|
||||
? "bg-white dark:bg-slate-900"
|
||||
: "bg-white/[var(--bg-opacity-light)] dark:bg-slate-900/[var(--bg-opacity-dark)]"
|
||||
)}
|
||||
style={
|
||||
{
|
||||
@@ -54,7 +54,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
|
||||
<div
|
||||
className={clsx(
|
||||
"absolute inset-x-0 top-full h-px transition",
|
||||
(isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5"
|
||||
(isInsideMobileNavigation || !mobileNavIsOpen) && "bg-slate-900/7.5 dark:bg-white/7.5"
|
||||
)}
|
||||
/>
|
||||
<Search />
|
||||
@@ -74,7 +74,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
|
||||
<TopLevelNavItem href="https://formbricks.com/discord">Join our Discord</TopLevelNavItem>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="md:dark:bg-white/15 hidden md:block md:h-5 md:w-px md:bg-zinc-900/10" />
|
||||
<div className="md:dark:bg-white/15 hidden md:block md:h-5 md:w-px md:bg-slate-900/10" />
|
||||
<div className="flex gap-4">
|
||||
<MobileSearch />
|
||||
<ThemeToggle />
|
||||
|
||||
@@ -25,8 +25,8 @@ function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-x-3">
|
||||
{tag && <Tag>{tag}</Tag>}
|
||||
{tag && label && <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" />}
|
||||
{label && <span className="font-mono text-xs text-zinc-400">{label}</span>}
|
||||
{tag && label && <span className="h-0.5 w-0.5 rounded-full bg-slate-300 dark:bg-slate-600" />}
|
||||
{label && <span className="font-mono text-xs text-slate-400">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -36,8 +36,8 @@ function Anchor({ id, inView, children }: { id: string; inView: boolean; childre
|
||||
<Link href={`#${id}`} className="group text-inherit no-underline hover:text-inherit">
|
||||
{inView && (
|
||||
<div className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
|
||||
<div className="group/anchor block h-5 w-5 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
|
||||
<AnchorIcon className="h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" />
|
||||
<div className="group/anchor block h-5 w-5 rounded-lg bg-slate-50 ring-1 ring-inset ring-slate-300 transition hover:ring-slate-500 dark:bg-slate-800 dark:ring-slate-700 dark:hover:bg-slate-700 dark:hover:ring-slate-600">
|
||||
<AnchorIcon className="h-5 w-5 stroke-slate-500 transition dark:stroke-slate-400 dark:group-hover/anchor:stroke-white" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -25,7 +25,7 @@ export function Layout({
|
||||
<motion.header
|
||||
layoutScroll
|
||||
className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex">
|
||||
<div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-4 lg:dark:border-white/10 xl:w-80">
|
||||
<div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-slate-900/10 lg:px-6 lg:pb-8 lg:pt-4 lg:dark:border-white/10 xl:w-80">
|
||||
<div className="hidden lg:flex">
|
||||
<Link href="/" aria-label="Home">
|
||||
<FooterLogo className="h-8" />
|
||||
|
||||
@@ -37,12 +37,12 @@ const libraries = [
|
||||
export function Libraries() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-zinc-900/5 dark:border-white/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3">
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 dark:border-white/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3">
|
||||
{libraries.map((library) => (
|
||||
<div key={library.name} className="flex flex-row-reverse gap-6">
|
||||
<div className="flex-auto">
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">{library.name}</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{library.description}</p>
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-white">{library.name}</h3>
|
||||
<p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{library.description}</p>
|
||||
<p className="mt-4">
|
||||
<Button href={library.href} variant="text" arrow="right">
|
||||
Read more
|
||||
|
||||
@@ -65,7 +65,7 @@ function MobileNavigationDialog({ isOpen, close }: { isOpen: boolean; close: ()
|
||||
leave="duration-200 ease-in"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0">
|
||||
<div className="fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-sm dark:bg-black/40" />
|
||||
<div className="fixed inset-0 top-14 bg-slate-400/20 backdrop-blur-sm dark:bg-black/40" />
|
||||
</Transition.Child>
|
||||
|
||||
<Dialog.Panel>
|
||||
@@ -90,7 +90,7 @@ function MobileNavigationDialog({ isOpen, close }: { isOpen: boolean; close: ()
|
||||
leaveTo="-translate-x-full">
|
||||
<motion.div
|
||||
layoutScroll
|
||||
className="ring-zinc-900/7.5 fixed bottom-0 left-0 top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 dark:bg-zinc-900 dark:ring-zinc-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10">
|
||||
className="ring-slate-900/7.5 fixed bottom-0 left-0 top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-slate-900/10 ring-1 dark:bg-slate-900 dark:ring-slate-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10">
|
||||
<Navigation />
|
||||
</motion.div>
|
||||
</Transition.Child>
|
||||
@@ -125,10 +125,10 @@ export function MobileNavigation() {
|
||||
<IsInsideMobileNavigationContext.Provider value={true}>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
|
||||
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-slate-900/5 dark:hover:bg-white/5"
|
||||
aria-label="Toggle navigation"
|
||||
onClick={toggle}>
|
||||
<ToggleIcon className="w-2.5 stroke-zinc-900 dark:stroke-white" />
|
||||
<ToggleIcon className="w-2.5 stroke-slate-900 dark:stroke-white" />
|
||||
</button>
|
||||
{!isInsideMobileNavigation && (
|
||||
<Suspense fallback={null}>
|
||||
|
||||
@@ -30,7 +30,7 @@ function TopLevelNavItem({ href, children }: { href: string; children: React.Rea
|
||||
<li className="md:hidden">
|
||||
<Link
|
||||
href={href}
|
||||
className="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">
|
||||
className="block py-1 text-sm text-slate-600 transition hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
||||
{children}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -58,12 +58,12 @@ function NavLink({
|
||||
"flex justify-between gap-2 py-1 pr-3 text-sm transition",
|
||||
isAnchorLink ? "pl-7" : "pl-4",
|
||||
active
|
||||
? "text-zinc-900 dark:text-white"
|
||||
: "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
|
||||
? "text-slate-900 dark:text-white"
|
||||
: "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
|
||||
)}>
|
||||
<span className="truncate">{children}</span>
|
||||
{tag && (
|
||||
<Tag variant="small" color="zinc">
|
||||
<Tag variant="small" color="slate">
|
||||
{tag}
|
||||
</Tag>
|
||||
)}
|
||||
@@ -94,7 +94,7 @@ function VisibleSectionHighlight({ group, pathname }: { group: NavGroup; pathnam
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 0.2 } }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="bg-zinc-800/2.5 dark:bg-white/2.5 absolute inset-x-0 top-0 will-change-transform"
|
||||
className="bg-slate-800/2.5 dark:bg-white/2.5 absolute inset-x-0 top-0 will-change-transform"
|
||||
style={{ borderRadius: 8, height, top }}
|
||||
/>
|
||||
);
|
||||
@@ -131,14 +131,14 @@ function NavigationGroup({ group, className }: { group: NavGroup; className?: st
|
||||
|
||||
return (
|
||||
<li className={clsx("relative mt-6", className)}>
|
||||
<motion.h2 layout="position" className="text-xs font-semibold text-zinc-900 dark:text-white">
|
||||
<motion.h2 layout="position" className="text-xs font-semibold text-slate-900 dark:text-white">
|
||||
{group.title}
|
||||
</motion.h2>
|
||||
<div className="relative mt-3 pl-2">
|
||||
<AnimatePresence initial={!isInsideMobileNavigation}>
|
||||
{isActiveGroup && <VisibleSectionHighlight group={group} pathname={pathname || "/docs"} />}
|
||||
</AnimatePresence>
|
||||
<motion.div layout className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5" />
|
||||
<motion.div layout className="absolute inset-y-0 left-2 w-px bg-slate-900/10 dark:bg-white/5" />
|
||||
<AnimatePresence initial={false}>
|
||||
{isActiveGroup && <ActivePageMarker group={group} pathname={pathname || "/docs"} />}
|
||||
</AnimatePresence>
|
||||
|
||||
@@ -152,8 +152,8 @@ function SearchResult({
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
"group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50",
|
||||
resultIndex > 0 && "border-t border-zinc-100 dark:border-zinc-800"
|
||||
"group block cursor-default px-4 py-3 aria-selected:bg-slate-50 dark:aria-selected:bg-slate-800/50",
|
||||
resultIndex > 0 && "border-t border-slate-100 dark:border-slate-800"
|
||||
)}
|
||||
aria-labelledby={`${id}-hierarchy ${id}-title`}
|
||||
{...autocomplete.getItemProps({
|
||||
@@ -163,20 +163,20 @@ function SearchResult({
|
||||
<div
|
||||
id={`${id}-title`}
|
||||
aria-hidden="true"
|
||||
className="text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white">
|
||||
className="text-sm font-medium text-slate-900 group-aria-selected:text-emerald-500 dark:text-white">
|
||||
<HighlightQuery text={result.title} query={query} />
|
||||
</div>
|
||||
{hierarchy.length > 0 && (
|
||||
<div
|
||||
id={`${id}-hierarchy`}
|
||||
aria-hidden="true"
|
||||
className="text-2xs mt-1 truncate whitespace-nowrap text-zinc-500">
|
||||
className="text-2xs mt-1 truncate whitespace-nowrap text-slate-500">
|
||||
{hierarchy.map((item, itemIndex, items) => (
|
||||
<Fragment key={itemIndex}>
|
||||
<HighlightQuery text={item} query={query} />
|
||||
<span
|
||||
className={
|
||||
itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-zinc-300 dark:text-zinc-700"
|
||||
itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-slate-300 dark:text-slate-700"
|
||||
}>
|
||||
/
|
||||
</span>
|
||||
@@ -200,10 +200,10 @@ function SearchResults({
|
||||
if (collection.items.length === 0) {
|
||||
return (
|
||||
<div className="p-6 text-center">
|
||||
<NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
|
||||
<p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
|
||||
<NoResultsIcon className="mx-auto h-5 w-5 stroke-slate-900 dark:stroke-slate-600" />
|
||||
<p className="mt-2 text-xs text-slate-700 dark:text-slate-400">
|
||||
Nothing found for{" "}
|
||||
<strong className="break-words font-semibold text-zinc-900 dark:text-white">
|
||||
<strong className="break-words font-semibold text-slate-900 dark:text-white">
|
||||
‘{query}’
|
||||
</strong>
|
||||
. Please try again.
|
||||
@@ -240,11 +240,11 @@ const SearchInput = forwardRef<
|
||||
|
||||
return (
|
||||
<div className="group relative flex h-12">
|
||||
<SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500" />
|
||||
<SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-slate-500" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
className={clsx(
|
||||
"flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
|
||||
"flex-auto appearance-none bg-transparent pl-10 text-slate-900 outline-none placeholder:text-slate-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
|
||||
autocompleteState.status === "stalled" ? "pr-11" : "pr-4"
|
||||
)}
|
||||
{...inputProps}
|
||||
@@ -264,7 +264,7 @@ const SearchInput = forwardRef<
|
||||
/>
|
||||
{autocompleteState.status === "stalled" && (
|
||||
<div className="absolute inset-y-0 right-3 flex items-center">
|
||||
<LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />
|
||||
<LoadingIcon className="h-5 w-5 animate-spin stroke-slate-200 text-slate-900 dark:stroke-slate-800 dark:text-emerald-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -325,7 +325,7 @@ function SearchDialog({
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0">
|
||||
<div className="fixed inset-0 bg-zinc-400/25 backdrop-blur-sm dark:bg-black/40" />
|
||||
<div className="fixed inset-0 bg-slate-400/25 backdrop-blur-sm dark:bg-black/40" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]">
|
||||
@@ -337,7 +337,7 @@ function SearchDialog({
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95">
|
||||
<Dialog.Panel className="ring-zinc-900/7.5 mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 dark:bg-zinc-900 dark:ring-zinc-800 sm:max-w-xl">
|
||||
<Dialog.Panel className="ring-slate-900/7.5 mx-auto transform-gpu overflow-hidden rounded-lg bg-slate-50 shadow-xl ring-1 dark:bg-slate-900 dark:ring-slate-800 sm:max-w-xl">
|
||||
<div {...autocomplete.getRootProps({})}>
|
||||
<form
|
||||
ref={formRef}
|
||||
@@ -352,7 +352,7 @@ function SearchDialog({
|
||||
/>
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="dark:bg-white/2.5 border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5"
|
||||
className="dark:bg-white/2.5 border-t border-slate-200 bg-white empty:hidden dark:border-slate-100/5"
|
||||
{...autocomplete.getPanelProps({})}>
|
||||
{autocompleteState.isOpen && (
|
||||
<SearchResults
|
||||
@@ -410,11 +410,11 @@ export function Search() {
|
||||
<div className="hidden lg:block lg:max-w-md lg:flex-auto">
|
||||
<button
|
||||
type="button"
|
||||
className="ui-not-focus-visible:outline-none hidden h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex"
|
||||
className="ui-not-focus-visible:outline-none hidden h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-slate-500 ring-1 ring-slate-900/10 transition hover:ring-slate-900/20 dark:bg-white/5 dark:text-slate-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex"
|
||||
{...buttonProps}>
|
||||
<SearchIcon className="h-5 w-5 stroke-current" />
|
||||
Find something...
|
||||
<kbd className="text-2xs ml-auto text-zinc-400 dark:text-zinc-500">
|
||||
<kbd className="text-2xs ml-auto text-slate-400 dark:text-slate-500">
|
||||
<kbd className="font-sans">{modifierKey}</kbd>
|
||||
<kbd className="font-sans">K</kbd>
|
||||
</kbd>
|
||||
@@ -433,10 +433,10 @@ export function MobileSearch() {
|
||||
<div className="contents lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="ui-not-focus-visible:outline-none flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 lg:hidden"
|
||||
className="ui-not-focus-visible:outline-none flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-slate-900/5 dark:hover:bg-white/5 lg:hidden"
|
||||
aria-label="Find something..."
|
||||
{...buttonProps}>
|
||||
<SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
|
||||
<SearchIcon className="h-5 w-5 stroke-slate-900 dark:stroke-white" />
|
||||
</button>
|
||||
<Suspense fallback={null}>
|
||||
<SearchDialog className="lg:hidden" {...dialogProps} />
|
||||
|
||||
@@ -26,10 +26,10 @@ const colorStyles = {
|
||||
medium:
|
||||
"ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400",
|
||||
},
|
||||
zinc: {
|
||||
small: "text-zinc-400 dark:text-zinc-500",
|
||||
slate: {
|
||||
small: "text-slate-400 dark:text-slate-500",
|
||||
medium:
|
||||
"ring-zinc-200 bg-zinc-50 text-zinc-500 dark:ring-zinc-500/20 dark:bg-zinc-400/10 dark:text-zinc-400",
|
||||
"ring-slate-200 bg-slate-50 text-slate-500 dark:ring-slate-500/20 dark:bg-slate-400/10 dark:text-slate-400",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -35,10 +35,10 @@ export function ThemeToggle() {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
|
||||
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-slate-900/5 dark:hover:bg-white/5"
|
||||
aria-label={mounted ? `Switch to ${otherTheme} theme` : "Toggle theme"}
|
||||
onClick={() => setTheme(otherTheme)}>
|
||||
<SunIcon className="h-5 w-5 stroke-zinc-900 dark:hidden" />
|
||||
<SunIcon className="h-5 w-5 stroke-slate-900 dark:hidden" />
|
||||
<MoonIcon className="hidden h-5 w-5 stroke-white dark:block" />
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -70,7 +70,7 @@ export function Properties({ children }: { children: React.ReactNode }) {
|
||||
<div className="my-6">
|
||||
<ul
|
||||
role="list"
|
||||
className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5">
|
||||
className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-900/5 p-0 dark:divide-white/5">
|
||||
{children}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@ export function Property({
|
||||
{type && (
|
||||
<>
|
||||
<dt className="sr-only">Type</dt>
|
||||
<dd className="font-mono text-xs text-zinc-400 dark:text-zinc-500">{type}</dd>
|
||||
<dd className="font-mono text-xs text-slate-400 dark:text-slate-500">{type}</dd>
|
||||
</>
|
||||
)}
|
||||
<dt className="sr-only">Description</dt>
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
--shiki-color-text: theme("colors.white");
|
||||
--shiki-token-constant: theme("colors.emerald.300");
|
||||
--shiki-token-string: theme("colors.emerald.300");
|
||||
--shiki-token-comment: theme("colors.zinc.500");
|
||||
--shiki-token-comment: theme("colors.slate.500");
|
||||
--shiki-token-keyword: theme("colors.sky.300");
|
||||
--shiki-token-parameter: theme("colors.pink.300");
|
||||
--shiki-token-function: theme("colors.violet.300");
|
||||
--shiki-token-string-expression: theme("colors.emerald.300");
|
||||
--shiki-token-punctuation: theme("colors.zinc.200");
|
||||
--shiki-token-punctuation: theme("colors.slate.200");
|
||||
}
|
||||
|
||||
[inert] ::-webkit-scrollbar {
|
||||
|
||||
@@ -4,41 +4,41 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
||||
return {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
"--tw-prose-body": theme("colors.zinc.700"),
|
||||
"--tw-prose-headings": theme("colors.zinc.900"),
|
||||
"--tw-prose-body": theme("colors.slate.700"),
|
||||
"--tw-prose-headings": theme("colors.slate.900"),
|
||||
"--tw-prose-links": theme("colors.teal.500"),
|
||||
"--tw-prose-links-hover": theme("colors.teal.600"),
|
||||
"--tw-prose-links-underline": theme("colors.teal.500 / 0.3"),
|
||||
"--tw-prose-bold": theme("colors.zinc.900"),
|
||||
"--tw-prose-counters": theme("colors.zinc.500"),
|
||||
"--tw-prose-bullets": theme("colors.zinc.300"),
|
||||
"--tw-prose-hr": theme("colors.zinc.900 / 0.05"),
|
||||
"--tw-prose-quotes": theme("colors.zinc.900"),
|
||||
"--tw-prose-quote-borders": theme("colors.zinc.200"),
|
||||
"--tw-prose-captions": theme("colors.zinc.500"),
|
||||
"--tw-prose-code": theme("colors.zinc.900"),
|
||||
"--tw-prose-code-bg": theme("colors.zinc.100"),
|
||||
"--tw-prose-code-ring": theme("colors.zinc.300"),
|
||||
"--tw-prose-th-borders": theme("colors.zinc.300"),
|
||||
"--tw-prose-td-borders": theme("colors.zinc.200"),
|
||||
"--tw-prose-bold": theme("colors.slate.900"),
|
||||
"--tw-prose-counters": theme("colors.slate.500"),
|
||||
"--tw-prose-bullets": theme("colors.slate.300"),
|
||||
"--tw-prose-hr": theme("colors.slate.900 / 0.05"),
|
||||
"--tw-prose-quotes": theme("colors.slate.900"),
|
||||
"--tw-prose-quote-borders": theme("colors.slate.200"),
|
||||
"--tw-prose-captions": theme("colors.slate.500"),
|
||||
"--tw-prose-code": theme("colors.slate.900"),
|
||||
"--tw-prose-code-bg": theme("colors.slate.100"),
|
||||
"--tw-prose-code-ring": theme("colors.slate.300"),
|
||||
"--tw-prose-th-borders": theme("colors.slate.300"),
|
||||
"--tw-prose-td-borders": theme("colors.slate.200"),
|
||||
|
||||
"--tw-prose-invert-body": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-body": theme("colors.slate.400"),
|
||||
"--tw-prose-invert-headings": theme("colors.white"),
|
||||
"--tw-prose-invert-links": theme("colors.teal.400"),
|
||||
"--tw-prose-invert-links-hover": theme("colors.teal.500"),
|
||||
"--tw-prose-invert-links-underline": theme("colors.teal.500 / 0.3"),
|
||||
"--tw-prose-invert-bold": theme("colors.white"),
|
||||
"--tw-prose-invert-counters": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-bullets": theme("colors.zinc.600"),
|
||||
"--tw-prose-invert-counters": theme("colors.slate.400"),
|
||||
"--tw-prose-invert-bullets": theme("colors.slate.600"),
|
||||
"--tw-prose-invert-hr": theme("colors.white / 0.05"),
|
||||
"--tw-prose-invert-quotes": theme("colors.zinc.100"),
|
||||
"--tw-prose-invert-quote-borders": theme("colors.zinc.700"),
|
||||
"--tw-prose-invert-captions": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-quotes": theme("colors.slate.100"),
|
||||
"--tw-prose-invert-quote-borders": theme("colors.slate.700"),
|
||||
"--tw-prose-invert-captions": theme("colors.slate.400"),
|
||||
"--tw-prose-invert-code": theme("colors.white"),
|
||||
"--tw-prose-invert-code-bg": theme("colors.zinc.700 / 0.15"),
|
||||
"--tw-prose-invert-code-bg": theme("colors.slate.700 / 0.15"),
|
||||
"--tw-prose-invert-code-ring": theme("colors.white / 0.1"),
|
||||
"--tw-prose-invert-th-borders": theme("colors.zinc.600"),
|
||||
"--tw-prose-invert-td-borders": theme("colors.zinc.700"),
|
||||
"--tw-prose-invert-th-borders": theme("colors.slate.600"),
|
||||
"--tw-prose-invert-td-borders": theme("colors.slate.700"),
|
||||
|
||||
// Base
|
||||
color: "var(--tw-prose-body)",
|
||||
@@ -183,7 +183,7 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
||||
// Headings
|
||||
h1: {
|
||||
color: "var(--tw-prose-headings)",
|
||||
fontWeight: "700",
|
||||
fontWeight: "500",
|
||||
fontSize: theme("fontSize.2xl")[0],
|
||||
...theme("fontSize.2xl")[1],
|
||||
marginBottom: theme("spacing.2"),
|
||||
@@ -205,6 +205,15 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
||||
marginBottom: theme("spacing.2"),
|
||||
},
|
||||
|
||||
h4: {
|
||||
color: "var(--tw-prose-body)",
|
||||
fontSize: theme("fontSize.base")[0],
|
||||
...theme("fontSize.base")[1],
|
||||
fontWeight: "300",
|
||||
marginTop: theme("spacing.10"),
|
||||
marginBottom: theme("spacing.2"),
|
||||
},
|
||||
|
||||
// Media
|
||||
"img, video, figure": {
|
||||
marginTop: theme("spacing.8"),
|
||||
|
||||
Reference in New Issue
Block a user