diff --git a/biome.json b/biome.json index f283c16..3d55952 100644 --- a/biome.json +++ b/biome.json @@ -1,5 +1,8 @@ { "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json", + "files": { + "ignore": ["tailwind.config.ts"] + }, "organizeImports": { "enabled": true }, diff --git a/bun.lockb b/bun.lockb index c0e7565..57a2057 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 9feb431..1f18baf 100644 --- a/package.json +++ b/package.json @@ -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 .", @@ -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" } } diff --git a/src/pages/EventHistory.tsx b/src/pages/EventHistory.tsx index 45866f0..16c0a1b 100644 --- a/src/pages/EventHistory.tsx +++ b/src/pages/EventHistory.tsx @@ -22,11 +22,11 @@ export function EventHistory({ return ( <> -
+

Recent

{Object.entries(groups).map(([date, groupEvents]) => ( <> -

{date}

+

{date}

{groupEvents.map((event) => { const source = event.probeId ? probeConfigs.find((it) => it.id === event.probeId) @@ -34,7 +34,7 @@ export function EventHistory({ return (

{source?.title}

-

+

{event.description ? event.description : undefined || event.result === 'success' diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index c28c6af..0fdd2e2 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -45,11 +45,12 @@ export async function StatusPage({ + `} ) : ( - (➠ {defaultTimezone}) + (➠ {defaultTimezone}) ↗ )}

) diff --git a/src/styles.css b/src/styles.scss similarity index 60% rename from src/styles.css rename to src/styles.scss index 674b9fa..eec1826 100644 --- a/src/styles.css +++ b/src/styles.scss @@ -3,7 +3,6 @@ @tailwind utilities; @media (prefers-reduced-motion: reduce) { - *, ::before, ::after { @@ -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; } diff --git a/tailwind.config.ts b/tailwind.config.ts index 2a655ec..936f8d9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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