feat: improve readability on light mode

This commit is contained in:
Henry
2025-10-15 22:10:31 +01:00
parent 6c90de2b00
commit ff0eb1de1c
6 changed files with 12 additions and 12 deletions

View File

@@ -53,7 +53,7 @@ const Cta = ({ theme }: { theme: string }) => {
<h2 className="text-balance text-4xl font-bold tracking-tight text-light-1000 dark:text-dark-1000 sm:text-4xl">
{t`Get started for free today`}
</h2>
<p className="text-md/8 mx-auto mt-6 max-w-[375px] text-pretty text-light-900 dark:text-dark-900">
<p className="text-md/8 mx-auto mt-6 max-w-[375px] text-pretty text-light-950 dark:text-dark-900">
{t`Unlimited boards, unlimited lists, unlimited cards. No credit card required.`}
</p>
<Link href="/signup">

View File

@@ -146,7 +146,7 @@ const Faqs = () => {
<p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
{t`Questions?`}
</p>
<p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
<p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-light-950 dark:text-dark-900">
<Trans>
Find answers to common questions about the project. Can't find what
you're looking for? Feel free to{" "}

View File

@@ -135,7 +135,7 @@ const Features = ({ theme }: { theme: "light" | "dark" }) => {
<p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
{t`Kanban reimagined`}
</p>
<p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
<p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-light-950 dark:text-dark-900">
{t`Simple, visual task management that just works. Drag and drop cards, collaborate with your team, and get more done.`}
</p>
<div className="mx-auto mt-16 w-full max-w-7xl">

View File

@@ -65,7 +65,7 @@ export default function HomeView() {
</Trans>
</p>
<p className="text-md mt-3 max-w-[450px] text-center text-dark-900 lg:max-w-[600px] lg:text-lg">
<p className="text-md mt-3 max-w-[450px] text-center text-light-950 dark:text-dark-900 lg:max-w-[600px] lg:text-lg">
{t`A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place.`}
</p>
@@ -79,7 +79,7 @@ export default function HomeView() {
{t`Self host with Github`}
</Button>
</div>
<p className="mt-4 text-center text-sm text-dark-900">
<p className="mt-4 text-center text-sm text-light-950 dark:text-dark-900">
{t`No credit card required`}
</p>
</div>

View File

@@ -22,9 +22,9 @@ const CellValue = ({ value }: { value: boolean | string }) => {
);
}
return value ? (
<HiCheckCircle className="h-5 w-5 text-dark-900 dark:text-dark-1000" />
<HiCheckCircle className="h-5 w-5 text-light-950 dark:text-dark-1000" />
) : (
<HiXCircle className="h-5 w-5 text-light-600 dark:text-dark-600" />
<HiXCircle className="h-5 w-5 text-light-700 dark:text-dark-600" />
);
};
@@ -195,7 +195,7 @@ const FeatureComparisonTable = ({
return (
<section aria-labelledby="comparison-heading" className="w-full px-4">
<div className="mx-auto max-w-6xl py-8 lg:py-10">
<div className="grid grid-cols-3 gap-x-8 border-t border-light-300 before:block dark:border-dark-300">
<div className="grid grid-cols-3 gap-x-8 border-t border-light-500 before:block dark:border-dark-300">
{products.map((product) => (
<div key={product.id} aria-hidden="true" className="-mt-px">
<div
@@ -252,7 +252,7 @@ const FeatureComparisonTable = ({
>
{feature.label}
{featureIdx !== section.features.length - 1 ? (
<div className="absolute inset-x-8 mt-3 h-px bg-light-300 dark:bg-dark-300" />
<div className="absolute inset-x-8 mt-3 h-px bg-light-500 dark:bg-dark-300" />
) : null}
</th>
{products.map((p) => (
@@ -281,7 +281,7 @@ const FeatureComparisonTable = ({
{products.map((product) => (
<div
key={product.id}
className={`${product.featured ? "ring-1 ring-dark-200 dark:ring-dark-800" : "ring-0"} rounded-lg`}
className={`${product.featured ? "ring-1 ring-light-500 dark:ring-dark-800" : "ring-0"} rounded-2xl`}
/>
))}
</div>

View File

@@ -42,7 +42,7 @@ export default function PricingView() {
<p className="mt-4 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-5xl">
{t`Simple pricing`}
</p>
<p className="text:md lg:text-md mt-6 max-w-[500px] text-center text-dark-900">
<p className="text:md lg:text-md mt-6 max-w-[500px] text-center text-light-950 dark:text-dark-900">
{t`Get started for free, with no usage limits. For collaboration, upgrade to a plan that fits the size of your team.`}
</p>
</div>
@@ -61,7 +61,7 @@ export default function PricingView() {
<p className="mt-4 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
{t`Feature breakdown`}
</p>
<p className="text-md lg:text-md my-4 max-w-[500px] text-center text-dark-900">
<p className="text-md lg:text-md my-4 max-w-[500px] text-center text-light-950 dark:text-dark-900">
{t`Compare our features to see why Kan is the best choice.`}
</p>
<div className="mt-2">