Skip to content

Commit

Permalink
fix(theme): proper light/dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
taskylizard committed Feb 18, 2024
1 parent 3119847 commit 3d51660
Show file tree
Hide file tree
Showing 9 changed files with 125 additions and 17 deletions.
3 changes: 3 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
"files": {
"ignore": ["tailwind.config.ts"]
},
"organizeImports": {
"enabled": true
},
Expand Down
Binary file modified bun.lockb
Binary file not shown.
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"db:migrate:prod": "wrangler d1 migrations apply simulation",
"deploy": "wrangler deploy --minify",
"dev": "wrangler dev",
"dev:css": "tailwindcss build -i src/styles.css -o assets/built.css -w",
"build": "tailwindcss build -i src/styles.css -o assets/built.css --minify",
"dev:css": "tailwindcss build -i src/styles.scss -o assets/built.css -w",
"build": "tailwindcss build -i src/styles.scss -o assets/built.css --minify",
"postinstall": "wrangler types && lefthook install",
"format": "biome format --write .",
"lint": "biome lint --apply .",
Expand All @@ -24,9 +24,11 @@
"devDependencies": {
"@biomejs/biome": "1.5.3",
"@cloudflare/workers-types": "^4.20240208.0",
"@radix-ui/colors": "^0.1.9",
"@tailwindcss/typography": "^0.5.10",
"lefthook": "^1.6.1",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"wrangler": "^3.28.1"
"wrangler": "^3.28.3"
}
}
6 changes: 3 additions & 3 deletions src/pages/EventHistory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ export function EventHistory({

return (
<>
<section class="border border-neutral-600 rounded-lg p-4 bg-neutral-800">
<section class="border border-neutral-dark-10 dark:border-neutral-10 rounded-lg p-4 bg-neutral-3 text-neutral-12 dark:bg-neutral-dark-3 dark:text-neutral-dark-12">
<h2 class="text-lg font-semibold mb-4">Recent</h2>
{Object.entries(groups).map(([date, groupEvents]) => (
<>
<h1 class="text-lg font-medium text-neutral-50">{date}</h1>
<h1 class="text-lg font-medium underline">{date}</h1>
{groupEvents.map((event) => {
const source = event.probeId
? probeConfigs.find((it) => it.id === event.probeId)
: webhooksConfigs.find((it) => it.id === event.webhookId)
return (
<div class="py-2">
<h3 class="text-sm font-medium">{source?.title}</h3>
<p class="text-sm text-neutral-500 mt-1">
<p class="text-sm text-neutral-11 dark:text-neutral-dark-11 mt-1">
{event.description
? event.description
: undefined || event.result === 'success'
Expand Down
14 changes: 12 additions & 2 deletions src/pages/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ export async function StatusPage({
<meta property="og:type" content="website" />
<meta name="theme-color" content="#9EB1FF" />
<link rel="stylesheet" href="/built.css" />
<script src="/theme.js" />
</head>

<body>
<main>
<div class="flex flex-col w-full p-4 md:p-6 text-neutral-300">
<div class="flex flex-col w-full p-4 md:p-6 text-neutral-12 dark:text-neutral-dark-12">
<header class="flex items-center h-16 mb-6">
<h1 class="text-2xl font-bold">simulation 🛸</h1>
</header>
Expand All @@ -63,7 +64,7 @@ export async function StatusPage({
<Logs logLines={logLines} timezone={timezone} />
</div>
</div>
<footer class="mt-4 w-full max-w-2xl p-4 text-center text-stone-400">
<footer class="mt-4 w-full max-w-2xl p-4 text-center text-neutral-12 dark:text-neutral-dark-12">
<div class="flex justify-center space-x-2">
<a href="https://github.com/fmhy/simulation" class="px-2">
source
Expand All @@ -72,6 +73,15 @@ export async function StatusPage({
<a href="https://discord.gg/Stz6y6NgNg" class="px-2">
discord
</a>
<span></span>
<a
// biome-ignore lint: don't care
onClick="window.toggleColorScheme()"
type="button"
class="px-2"
>
theme
</a>
{enableExecuteAllProbes && (
<>
<span></span>
Expand Down
6 changes: 4 additions & 2 deletions src/pages/ProbeCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function ProbeCard({
}

return (
<div class="flex flex-col border border-neutral-600 rounded-lg p-4 bg-neutral-800">
<div class="flex flex-col border border-neutral-dark-10 dark:border-neutral-10 rounded-lg p-4 bg-neutral-3 text-neutral-12 dark:bg-neutral-dark-3 dark:text-neutral-dark-12">
<h2 class="text-lg font-semibold mb-2">
{probeConfig.url ? (
<a class="underline underline-offset-4" href={probeConfig.url}>
Expand All @@ -61,7 +61,9 @@ export function ProbeCard({
<span class={clsx('inline-flex w-3 h-3 rounded-full', statusColor)} />
<span>{statusText}</span>
</div>
<p class="text-sm text-neutral-500 mt-2">{statusDesc}</p>
<p class="text-sm text-neutral-11 dark:text-neutral-dark-11 mt-2">
{statusDesc}
</p>
</div>
)
}
4 changes: 2 additions & 2 deletions src/pages/TimezoneSwitcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ export function TimezoneSwitcher({ timezone }: { timezone: string }) {
if (timezone) {
const a = document.getElementById("switch-timezone");
a.style.display = "inline";
a.innerText = "(➠ " + timezone + ")";
a.innerText = "(➠ " + timezone + ")";
a.href = "/?tz=" + timezone;
}
</script>
`}
</>
) : (
<a href="/">(➠ {defaultTimezone})</a>
<a href="/">(➠ {defaultTimezone})</a>
)}
</p>
)
Expand Down
13 changes: 10 additions & 3 deletions src/styles.css → src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
@tailwind utilities;

@media (prefers-reduced-motion: reduce) {

*,
::before,
::after {
Expand All @@ -17,10 +16,18 @@
}
}

:root {
color-scheme: light;

&.dark {
color-scheme: dark;
}
}

a {
@apply text-brand decoration-dashed hover:decoration-solid focus:decoration-solid;
@apply text-sky-10 dark:text-sky-dark-10 decoration-dashed hover:decoration-solid focus:decoration-solid;
}

body {
@apply min-h-screen bg-neutral-900 focus:outline-none;
@apply min-h-screen font-sans antialiased bg-neutral-1 dark:bg-neutral-dark-1 focus:outline-none max-w-none;
}
88 changes: 86 additions & 2 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,95 @@
import * as radixColors from '@radix-ui/colors'
import typography from '@tailwindcss/typography'
import type { Config } from 'tailwindcss'

const colors = {}

Object.entries(radixColors).forEach(([key, value]) => {
const [baseColor, ...prefixes] = key
.split(/(?=[A-Z])/)
.map((word) => word.toLowerCase())
colors[baseColor] ??= {}
Object.entries(value).forEach(([colorKey, colorValue]) => {
colors[baseColor][[...prefixes, colorKey.replace(/\D+/, '')].join('-')] =
colorValue
})
})

const brand = 'violet' as const

const gray = (
{
tomato: 'mauve',
red: 'mauve',
crimson: 'mauve',
pink: 'mauve',
plum: 'mauve',
purple: 'mauve',
violet: 'mauve',

indigo: 'slate',
blue: 'slate',
sky: 'slate',
cyan: 'slate',

teal: 'sage',
mint: 'sage',
green: 'sage',

grass: 'olive',
lime: 'olive',

yellow: 'sand',
amber: 'sand',
orange: 'sand',
brown: 'sand'
} as const
)[brand]

colors['primary'] = colors[brand]
colors['neutral'] = colors[gray]
colors['white'].DEFAULT = 'white'
colors['black'].DEFAULT = 'black'

const prose = {
body: '11',
headings: '12',
lead: '11',
links: 'blue.11',
bold: '12',
counters: '11',
bullets: '12',
hr: '6',
quotes: '12',
'quote-borders': '6',
captions: '11',
code: '12',
'pre-code': '12',
'pre-bg': '3',
'th-borders': '7',
'td-borders': '6'
}

const getProse = (theme: (key: string) => string) => {
const res = {}
Object.keys(prose).forEach((key) => {
const value = `colors.${prose[key].replace(/^\d/, 'gray.$&')}`
res[`--tw-prose-${key}`] = theme(value)
res[`--tw-prose-invert-${key}`] = theme(value.replace(/\d+$/, 'dark-$&'))
})
return res
}

export default {
darkMode: 'class',
content: ['./src/**/*.tsx'],
theme: {
extend: {
colors: { brand: '#9EB1FF' }
colors,
extend: {
typography: ({ theme }) => ({ DEFAULT: { css: getProse(theme) } })
}
}
},
plugins: []
plugins: [typography]
} satisfies Config

0 comments on commit 3d51660

Please sign in to comment.