admin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: light mode primary to dark, cyan as accent via oklch classes
Docker Build / Build and Push Docker Image (push) Successful in 4m19s
Details

Browse Source
This commit is contained in:
admin
2026-06-14 18:33:13 +08:00
parent 296120641a
commit ca47fd18f5
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/home/components/sections/hero.tsx
Vendored
+14 -14
View File
@@ -51,7 +51,7 @@ export function Hero(props: HeroProps) {
className='pointer-events-none absolute inset-0 opacity-[0.035] dark:opacity-[0.04]'
style={{
backgroundImage:
'radial-gradient(circle, var(--primary) 0.5px, transparent 0.5px)',
'radial-gradient(circle, var(--ring) 0.5px, transparent 0.5px)',
backgroundSize: '24px 24px',
}}
/>
@@ -71,18 +71,18 @@ export function Hero(props: HeroProps) {
<div className='flex min-h-[calc(100svh-3rem)] flex-col items-center justify-center py-20 text-center'>
{/* Badge */}
<div className='mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-card px-3.5 py-1.5 text-xs font-medium text-muted-foreground'>
<span className='inline-block size-1.5 rounded-full bg-primary animate-pulse' />
<span className='inline-block size-1.5 rounded-full bg-[oklch(0.65_0.17_210)] animate-pulse' />
{t('OpenAI-compatible API gateway')}
</div>
{/* Headline */}
<h1 className='max-w-xl text-[clamp(2rem,5.5vw,3.8rem)] leading-[1.08] font-bold tracking-[-0.025em] text-foreground'>
{t('One endpoint')}{' '}
<span className='text-primary'>{t('for every model')}</span>
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'>{t('for every model')}</span>
</h1>
{/* Subtitle */}
<p className='mt-4 max-w-sm text-[15px] leading-relaxed text-muted-foreground'>
<p className='mt-4 max-w-md text-[15px] leading-relaxed text-muted-foreground'>
{t('Route, monitor, and manage LLM traffic through a single gateway. Switch providers in seconds.')}
</p>
@@ -107,7 +107,7 @@ export function Hero(props: HeroProps) {
</Button>
<Link
to='/pricing'
className='h-10 inline-flex items-center rounded-lg px-4 text-sm font-medium text-muted-foreground transition-colors duration-200 hover:text-primary'
className='h-10 inline-flex items-center rounded-lg px-4 text-sm font-medium text-muted-foreground transition-colors duration-200 hover:text-[oklch(0.65_0.17_210)] dark:hover:text-primary'
>
{t('Pricing')}
</Link>
@@ -131,9 +131,9 @@ export function Hero(props: HeroProps) {
{/* Content */}
<div className='p-5 font-mono text-[13px] leading-[1.9]'>
<div>
<span className='text-primary'>$</span>{' '}
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'>$</span>{' '}
<span className='text-foreground'>curl</span>{' '}
<span className='text-primary'>{serverAddress}/v1/chat/completions</span>{' '}
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'>{serverAddress}/v1/chat/completions</span>{' '}
<span className='text-muted-foreground'>\</span>
</div>
<div className='pl-4'>
@@ -154,19 +154,19 @@ export function Hero(props: HeroProps) {
</div>
<div>
<span className='text-muted-foreground'>{"{"}</span>
<span className='text-primary'> "model"</span>
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'> "model"</span>
<span className='text-muted-foreground'>:</span>
<span className='text-foreground/70'> "gpt-4o"</span>
<span className='text-muted-foreground'>,</span>
<span className='text-primary'> "usage"</span>
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'> "usage"</span>
<span className='text-muted-foreground'>:</span>
<span className='text-muted-foreground'> {"{ \"prompt_tokens\": 12, \"completion_tokens\": 47 }"}</span>
<span className='text-muted-foreground'>{"}"}</span>
</div>
</div>
<div className='mt-2'>
<span className='text-primary'>$</span>
<span className='ml-1 inline-block h-3.5 w-[6px] animate-pulse bg-primary align-middle' />
<span className='text-[oklch(0.65_0.17_210)] dark:text-primary'>$</span>
<span className='ml-1 inline-block h-3.5 w-[6px] animate-pulse bg-[oklch(0.65_0.17_210)] dark:bg-primary align-middle' />
</div>
</div>
</div>
@@ -187,10 +187,10 @@ export function Hero(props: HeroProps) {
{features.map((feature) => (
<div
key={feature.title}
className='group rounded-lg border border-border bg-card p-5 transition-colors duration-200 hover:border-primary/30'
className='group rounded-lg border border-border bg-card p-5 transition-colors duration-200 hover:border-[oklch(0.65_0.17_210/0.3)] dark:hover:border-primary/30'
>
<div className='mb-3 flex size-8 items-center justify-center rounded-md bg-primary/8'>
<feature.icon className='size-4 text-primary' />
<div className='mb-3 flex size-8 items-center justify-center rounded-md bg-[oklch(0.65_0.17_210/0.08)] dark:bg-primary/8'>
<feature.icon className='size-4 text-[oklch(0.65_0.17_210)] dark:text-primary' />
</div>
<h3 className='text-[13px] font-semibold text-foreground'>
{t(feature.title)}
web/default/src/styles/theme.css
Vendored
+3 -3
View File
@@ -100,15 +100,15 @@ For commercial licensing, please contact admin@modelstoken.com
* in theme-presets.css. Default mirrors `--font-sans` so behavior is
* identical when no font preference is set. */
--font-body: var(--font-sans);
/* Termius-inspired light mode: clean whites, cyan primary, deep text */
/* Termius light: deep primary for buttons, cyan for accents/links */
--background: oklch(0.985 0.002 260);
--foreground: oklch(0.145 0.015 260);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0.015 260);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0.015 260);
--primary: oklch(0.65 0.17 210);
--primary-foreground: oklch(1 0 0);
--primary: oklch(0.16 0.02 260);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.955 0.005 260);
--secondary-foreground: oklch(0.205 0.015 260);
--muted: oklch(0.955 0.005 260);