feat: configure custom OKLCH theme, fonts, and dark mode tokens
This commit is contained in:
@@ -4,7 +4,10 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tauri + React + Typescript</title>
|
||||
<title>OpenPylon</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -43,6 +43,16 @@
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-pylon-bg: var(--pylon-bg);
|
||||
--color-pylon-surface: var(--pylon-surface);
|
||||
--color-pylon-column: var(--pylon-column);
|
||||
--color-pylon-accent: var(--pylon-accent);
|
||||
--color-pylon-text: var(--pylon-text);
|
||||
--color-pylon-text-secondary: var(--pylon-text-secondary);
|
||||
--color-pylon-danger: var(--pylon-danger);
|
||||
--font-heading: "Instrument Serif", Georgia, serif;
|
||||
--font-body: "Satoshi", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -78,6 +88,13 @@
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--pylon-bg: oklch(97% 0.005 80);
|
||||
--pylon-surface: oklch(99% 0.003 80);
|
||||
--pylon-column: oklch(95% 0.008 80);
|
||||
--pylon-accent: oklch(55% 0.12 160);
|
||||
--pylon-text: oklch(25% 0.015 50);
|
||||
--pylon-text-secondary: oklch(55% 0.01 50);
|
||||
--pylon-danger: oklch(55% 0.18 25);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -112,15 +129,32 @@
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
--pylon-bg: oklch(18% 0.01 50);
|
||||
--pylon-surface: oklch(22% 0.01 50);
|
||||
--pylon-column: oklch(20% 0.012 50);
|
||||
--pylon-accent: oklch(60% 0.12 160);
|
||||
--pylon-text: oklch(90% 0.01 50);
|
||||
--pylon-text-secondary: oklch(55% 0.01 50);
|
||||
--pylon-danger: oklch(60% 0.18 25);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground;
|
||||
font-family: "Satoshi", system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user