diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/base.css | 24 | ||||
| -rw-r--r-- | src/styles/tokens.css | 22 |
2 files changed, 21 insertions, 25 deletions
diff --git a/src/styles/base.css b/src/styles/base.css index 8a67f66..5849103 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -8,22 +8,17 @@ } :root { - font-family: - 'Inter', - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; + font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text); background-color: var(--bg); + scrollbar-gutter: stable; } body { min-height: 100dvh; + background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -33,19 +28,22 @@ } h1 { - font-size: 1.875rem; + font-size: 1.25rem; font-weight: 700; - letter-spacing: -0.02em; } h2 { - font-size: 1.25rem; - font-weight: 600; - letter-spacing: -0.01em; + font-size: 1rem; + font-weight: 700; } button { cursor: pointer; font-family: inherit; } + + :focus-visible { + outline: 2px solid var(--accent); + outline-offset: 1px; + } } diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 4ab1f05..e60a00e 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -1,26 +1,24 @@ @layer tokens { :root { --white: oklch(1 0 0); - --bg: oklch(0.97 0.006 70); - --nav-height: 3rem; + --font-sans: + system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, sans-serif; + --nav-height: 2.75rem; + --bg: var(--white); --surface: var(--white); - --surface-hover: oklch(from var(--accent) 0.99 0.008 h); - --border: oklch(0.91 0.006 70); + --border: oklch(0.87 0.008 70); --text: oklch(0.25 0.006 55); - --text-secondary: oklch(0.58 0.01 50); + --text-secondary: oklch(0.55 0.01 50); - --accent: oklch(0.66 0.12 30); + --accent: oklch(0.52 0.09 165); --accent-hover: oklch(from var(--accent) calc(l - 0.06) c h); + --warn: oklch(0.58 0.11 70); + --warn-bg: oklch(from var(--warn) l c h / 0.12); --success: oklch(0.72 0.07 140); --danger: oklch(0.6 0.16 28); - - --shadow: oklch(from var(--text) l c h / 0.06); - --shadow-accent: oklch(from var(--accent) l c h / 0.1); - --shadow-accent-focus: oklch(from var(--accent) l c h / 0.15); - --shadow-accent-lg: oklch(from var(--accent) l c h / 0.2); --danger-bg: oklch(from var(--danger) l c h / 0.08); - --danger-hover-bg: oklch(from var(--danger) l c h / 0.1); } } |