Skip to content

fix: light mode contrast #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
osbre wants to merge 10 commits into from
Closed

fix: light mode contrast #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
157cd5f
fix(light): strengthen code block border
osbre Sep 7, 2026
fa87778
fix(light): replace border-color glow with a real shadow
osbre Sep 7, 2026
cf9547a
fix(light): use tinted overlays for highlight, diff and marks
osbre Sep 7, 2026
4856ae9
fix(light): unify greys on the slate family
osbre Sep 7, 2026
f2dceb9
fix(light): lift surfaces off a tinted page ground
osbre Sep 7, 2026
2324791
fix(light): make callout text readable, move colour to an accent bar
osbre Sep 7, 2026
29f9480
fix(light): give interactive surfaces their own token pair
osbre Sep 7, 2026
2c8591e
fix(light): float the header on a white surface
osbre Sep 7, 2026
e618d25
fix(light): shift the text ramp one step darker
osbre Sep 7, 2026
f1b0349
fix(light): use the logo blue for primary
osbre Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Web/Code/code.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</p>
<textarea name="code" id="code" class="font-mono bg-(--code-background) p-4 border-(--ui-border-muted) border-2 rounded focus:outline-none w-full text-(--foreground)" rows="20" autofocus>{{ $code }}</textarea>
<div class="flex justify-end">
<button type="submit" class="no-primary cursor-pointer rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
<button type="submit" class="no-primary cursor-pointer rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-surface) hover:bg-(--ui-bg-surface-hover) disabled:bg-(--ui-bg-surface) aria-disabled:bg-(--ui-bg-surface) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
Submit
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Web/Code/code_preview.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class="bg-white hover:bg-tempest-blue-500 shadow-xl p-2 border-2 hover:border-wh

<div class="top-0 left-0 absolute flex justify-center items-center w-full h-full">
<div
class="bg-(--ui-bg) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-auto"
class="bg-(--ui-bg-surface) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-auto"
:class="implode([
$center ? 'text-center' : '',
($clean || $blank) ?: 'border',
Expand Down
2 changes: 1 addition & 1 deletion src/Web/Documentation/show.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class="
<x-icon name="tabler:x" class="group-data-[sidebar-visible=false]:hidden size-6 -translate-x-px" />
</button>
<!-- Mobile sidebar -->
<div data-sidebar data-visible="false" class="xl:hidden data-[visible=false]:opacity-0 data-[visible=false]:scale-80 data-[visible=false]:pointer-events-none fixed inset-3 lg:max-h-[50vh] lg:right-3 lg:inset-auto lg:bottom-24 border border-(--ui-border) rounded-xl overflow-auto z-[9] bg-(--ui-bg) text-(--ui-text) p-8 starting:opacity-0 starting:scale-90 transition origin-bottom-right">
<div data-sidebar data-visible="false" class="xl:hidden data-[visible=false]:opacity-0 data-[visible=false]:scale-80 data-[visible=false]:pointer-events-none fixed inset-3 lg:max-h-[50vh] lg:right-3 lg:inset-auto lg:bottom-24 border border-(--ui-border) rounded-xl overflow-auto z-[9] bg-(--ui-bg-surface) text-(--ui-text) p-8 starting:opacity-0 starting:scale-90 transition origin-bottom-right">
<div class="gap-x-2 grid grid-cols-1 min-[375px]:grid-cols-2 lg:grid-cols-1 text-sm sm:text-base">
<!-- Menu -->
<nav class="lg:hidden flex flex-col gap-y-8 overflow-hidden">
Expand Down
2 changes: 1 addition & 1 deletion src/Web/Homepage/home.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
With zero configuration and zero boilerplate, Tempest gives you the architectural freedom to focus entirely on your business logic.
</p>
<div class="flex items-center gap-x-2 mt-6 md:mt-8 lg:mt-10 xl:mt-12 font-medium">
<a :href="uri([DocumentationController::class, 'index'])" class="bg-(--ui-bg-inverted) text-(--ui-bg) hover:bg-(--ui-bg-inverted)/90 rounded-xl px-5 py-2.5 gap-1.5 transition">
<a :href="uri([DocumentationController::class, 'index'])" class="bg-(--ui-bg-inverted) text-(--ui-bg-surface) hover:bg-(--ui-bg-inverted)/90 rounded-xl px-5 py-2.5 gap-1.5 transition">
Get started
</a>
<button onclick="scrollToFeatures()" class="cursor-pointer hidden min-[401px]:flex text-(--ui-text) hover:bg-(--ui-info)/10 group rounded-xl px-4 py-2.5 items-center gap-x-2 transition">
Expand Down
2 changes: 1 addition & 1 deletion src/Web/Homepage/x-home-section.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</p>
</div>
<div class="mt-8">
<a :href="$linkUri" class="group no-primary rounded-lg font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3.5 py-2 gap-2.5 ring ring-inset ring-(--ui-border) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
<a :href="$linkUri" class="group no-primary rounded-lg font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3.5 py-2 gap-2.5 ring ring-inset ring-(--ui-border) text-(--ui-text) bg-(--ui-bg-surface) hover:bg-(--ui-bg-surface-hover) disabled:bg-(--ui-bg-surface) aria-disabled:bg-(--ui-bg-surface) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
<div class="relative flex justify-center items-center size-4.5">
<x-icon :name="$icon" class="absolute inset-0 opacity-100 group-hover:opacity-0 size-full group-hover:scale-80 transition delay-100 group-hover:delay-0"/>
<x-icon name="tabler:arrow-right" class="absolute inset-0 opacity-0 group-hover:opacity-100 size-full scale-20 group-hover:scale-100 transition -translate-x-1/2 group-hover:translate-x-0 delay-0 group-hover:delay-100"/>
Expand Down
16 changes: 10 additions & 6 deletions src/Web/assets/highlighting.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root {
--code-border: var(--ui-border);
--code-border: var(--ui-border-accented);
--code-background: var(--ui-bg-elevated);
--code-foreground: var(--ui-text);
--code-keyword: #4f95d1;
Expand All @@ -9,9 +9,9 @@
--code-value: #515248;
--code-variable: #515248;
--code-comment: #888888;
--code-highlight: #22dddd33;
--code-addition: #00ff0022;
--code-deletion: #ff000011;
--code-highlight: #e8edf3;
--code-addition: #e6ffec;
--code-deletion: #ffebe9;
--code-gutter: #555555;
--code-gutter-addition: #34a853;
--code-gutter-deletion: #ea4334;
Expand All @@ -21,6 +21,8 @@
--code-passive: #dcfce7;
--code-complex-phrase: #f3e8ff;
--code-qualified: #f1f5f9;
--code-mark-a: #fdf0a8;
--code-mark-b: #f3ddf8;
}

.dark {
Expand All @@ -46,6 +48,8 @@
--code-passive: #b877db80;
--code-complex-phrase: #25b0bc33;
--code-qualified: #6c6f9333;
--code-mark-a: #ffff0033;
--code-mark-b: #ff00ff33;
}

.prose pre {
Expand Down Expand Up @@ -143,10 +147,10 @@
}

.hl-a {
background-color: #ffff0077;
background-color: var(--code-mark-a);
}
.hl-b {
background-color: #ff00ff33;
background-color: var(--code-mark-b);
}

.hl-addition {
Expand Down
37 changes: 25 additions & 12 deletions src/Web/assets/main.entrypoint.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,29 +66,36 @@
--ui-header-height: --spacing(28);
}

--ui-primary: hsl(212.1, 87.8%, 64.5%);
/* Logo blue (#0071BC) */
--ui-primary: hsl(203.9, 100%, 36.9%);
--ui-secondary: var(--color-green-500);
--ui-success: var(--color-green-500);
--ui-info: var(--color-blue-500);
--ui-warning: var(--color-yellow-600);
--ui-error: var(--color-red-500);

--ui-text-dimmed: var(--color-slate-400);
--ui-text-muted: var(--color-slate-500);
--ui-text-toned: var(--color-slate-600);
--ui-text: var(--color-slate-700);
--ui-text-dimmed: var(--color-slate-500);
--ui-text-muted: var(--color-slate-600);
--ui-text-toned: var(--color-slate-700);
--ui-text: var(--color-slate-800);
--ui-text-highlighted: var(--color-slate-900);

--ui-bg: var(--color-white);
--ui-bg-muted: var(--color-slate-50);
--ui-bg-elevated: var(--color-neutral-50);
--ui-bg-accented: var(--color-neutral-200);
--ui-bg-inverted: var(--color-neutral-900);
--ui-bg: var(--color-slate-50);
--ui-bg-muted: var(--color-slate-100);
--ui-bg-elevated: var(--color-white);
--ui-bg-accented: var(--color-slate-200);
--ui-bg-inverted: var(--color-slate-900);

/* Interactive surfaces: sit above the ground, darken on hover */
--ui-bg-surface: var(--color-white);
--ui-bg-surface-hover: var(--color-slate-100);

--ui-border: var(--color-slate-200);
--ui-border-muted: var(--color-slate-200);
--ui-border-accented: var(--color-slate-300);
--ui-border-inverted: var(--color-slate-900);

--ui-shadow: 0 2px 12px rgb(15 23 42 / 0.08);
}

.dark {
Expand All @@ -111,11 +118,17 @@
--ui-bg-accented: var(--color-neutral-700);
--ui-bg-inverted: var(--color-white);

/* Interactive surfaces: sit on the ground, lighten on hover */
--ui-bg-surface: var(--color-neutral-950);
--ui-bg-surface-hover: var(--color-neutral-900);

--ui-border: var(--color-neutral-800);
--ui-border-muted: var(--color-neutral-700);
--ui-border-accented: var(--color-neutral-700);
--ui-border-inverted: var(--color-white);

--ui-shadow: 0 2px 12px rgb(0 0 0 / 0.4);

--color-ray-1: var(--color-pink-900);
--color-ray-2: var(--color-indigo-900);
--color-ray-3: var(--color-blue-900);
Expand Down Expand Up @@ -304,15 +317,15 @@ pre {
display: block;
clear:both;
padding: 1em 2ch;
box-shadow: 0 0 15px 5px var(--ui-border);
box-shadow: var(--ui-shadow);
overflow-x: auto;
line-height: 1.8em;
}
}

.prose img {
border-radius: 3px;
box-shadow: 0 0 15px 5px var(--ui-border);
box-shadow: var(--ui-shadow);
}

.swatch {
Expand Down
6 changes: 3 additions & 3 deletions src/Web/assets/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@
}

div.warning {
@apply bg-(--ui-warning)/10 text-(--ui-warning) ring-(--ui-warning)/25
@apply bg-(--ui-warning)/10 border-l-4 border-(--ui-warning) ring-(--ui-warning)/25
[--tw-prose-links:var(--ui-warning)];
}

div.info {
@apply bg-(--ui-info)/5 text-(--ui-info) ring-(--ui-info)/25
@apply bg-(--ui-info)/5 border-l-4 border-(--ui-info) ring-(--ui-info)/25
[--tw-prose-links:var(--ui-info)];
}

div.success {
@apply bg-(--ui-success)/10 text-(--ui-success) ring-(--ui-success)/25
@apply bg-(--ui-success)/10 border-l-4 border-(--ui-success) ring-(--ui-success)/25
[--tw-prose-links:var(--ui-success)];
}

Expand Down
4 changes: 2 additions & 2 deletions src/Web/x-header.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<!-- Header -->
<div class="relative inset-x-0 z-[1] h-(--ui-header-height)">
<header
class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 flex justify-center bg-[transparent] border-b border-transparent data-[scrolling]:border-(--ui-border) w-full duration-200 data-[scrolling]:backdrop-blur data-[scrolling]:bg-(--ui-bg)/75"
class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 flex justify-center bg-[transparent] border-b border-transparent data-[scrolling]:border-(--ui-border) w-full duration-200 data-[scrolling]:backdrop-blur data-[scrolling]:bg-(--ui-bg-surface)/75"
id="header"
>
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-x-4 px-8 py-4 w-full 2xl:max-w-8xl lg:max-w-5xl xl:max-w-7xl">
Expand All @@ -27,7 +27,7 @@ class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 fl
<span class="hidden lg:inline font-medium">Tempest</span>
</a>

<a class="hidden md:inline text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg)/50 px-2 py-1 rounded-lg border border-(--ui-border)" href="https://github.com/tempestphp/tempest-framework/releases/{{ $latest_release }}">
<a class="hidden md:inline text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg-surface)/50 px-2 py-1 rounded-lg border border-(--ui-border)" href="https://github.com/tempestphp/tempest-framework/releases/{{ $latest_release }}">
{{ $this->latest_release }}
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Web/x-search.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button toggle-palette class="hidden sm:flex items-center gap-2 min-w-0 cursor-pointer rounded-lg border border-(--ui-border) bg-(--ui-bg)/50 dark:bg-transparent px-3 py-1.5 text-sm text-(--ui-text-muted) hover:bg-(--ui-bg-elevated) hover:border-(--ui-border-accented) transition group-data-[scrolling]:border-transparent group-data-[scrolling]:bg-transparent group-data-[scrolling]:hover:bg-(--ui-bg-elevated)">
<button toggle-palette class="hidden sm:flex items-center gap-2 min-w-0 cursor-pointer rounded-lg border border-(--ui-border) bg-(--ui-bg-surface)/50 dark:bg-transparent px-3 py-1.5 text-sm text-(--ui-text-muted) hover:bg-(--ui-bg-surface-hover) hover:border-(--ui-border-accented) transition group-data-[scrolling]:border-transparent group-data-[scrolling]:bg-transparent group-data-[scrolling]:hover:bg-(--ui-bg-surface-hover)">
<label for="search" class="sr-only">Search</label>
<x-icon name="tabler:search" class="size-4 shrink-0 text-(--ui-text-dimmed)"/>
<span class="truncate">Search docs, blog...</span>
Expand Down
Loading