aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app.css36
-rw-r--r--src/lib/components/Button.svelte21
-rw-r--r--src/lib/components/FuzzyAutocomplete.svelte11
-rw-r--r--src/lib/components/GroceryRow.svelte18
-rw-r--r--src/lib/components/Nav.svelte52
-rw-r--r--src/lib/components/Row.svelte19
-rw-r--r--src/lib/components/ScoreBadge.svelte3
-rw-r--r--src/lib/components/SectionTitle.svelte7
-rw-r--r--src/lib/components/StatusBadge.svelte7
-rw-r--r--src/routes/groceries/catalog/+page.svelte3
-rw-r--r--src/routes/grocery/[id]/+page.svelte17
-rw-r--r--src/routes/login/+page.svelte3
-rw-r--r--src/routes/projects/[id]/+page.svelte5
-rw-r--r--src/routes/projects/[projectId]/routine/[routineId]/+page.svelte7
-rw-r--r--src/styles/base.css24
-rw-r--r--src/styles/tokens.css22
16 files changed, 95 insertions, 160 deletions
diff --git a/src/app.css b/src/app.css
index 89d3aa9..e94a77e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,11 +8,6 @@
list-style: none;
display: flex;
flex-direction: column;
- gap: 0.375rem;
-}
-
-.item-list--wide {
- gap: 0.5rem;
}
/* Empty state */
@@ -21,10 +16,9 @@
font-size: 0.9375rem;
text-align: center;
background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
+ border: 1px solid var(--border);
margin-top: 1rem;
- padding: 2rem;
+ padding: 1.5rem;
}
/* Error */
@@ -33,7 +27,7 @@
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
background: var(--danger-bg);
- border-radius: 0.5rem;
+ border: 1px solid var(--danger);
}
/* Forms */
@@ -42,10 +36,9 @@
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
- padding: 1rem;
+ padding: 0.875rem;
background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
+ border: 1px solid var(--border);
}
.form-card--compact {
@@ -59,32 +52,24 @@
}
.form-label {
- font-size: 0.75rem;
+ font-size: 0.8125rem;
font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.06em;
color: var(--text-secondary);
}
.form-input,
.form-select {
- padding: 0.75rem 1rem;
- border: 1.5px solid var(--border);
- border-radius: 0.75rem;
+ padding: 0.5rem 0.625rem;
+ border: 1px solid var(--border);
font-size: 1rem;
font-family: inherit;
background: var(--surface);
min-width: 0;
- transition:
- border-color 0.2s,
- box-shadow 0.2s;
}
.form-input:focus,
.form-select:focus {
- outline: none;
border-color: var(--accent);
- box-shadow: 0 0 0 3px var(--shadow-accent-focus);
}
.add-bar {
@@ -103,7 +88,9 @@
display: flex;
align-items: center;
justify-content: space-between;
- padding: 1.25rem 0;
+ padding: 1rem 0 0.5rem;
+ border-bottom: 1px solid var(--border);
+ margin-bottom: 1rem;
}
.back-link {
@@ -115,7 +102,6 @@
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
- transition: color 0.2s;
}
.back-link:hover {
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 27b9b7f..cfd24f7 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -53,32 +53,25 @@
button {
cursor: pointer;
font-family: inherit;
- transition: all 0.2s ease;
border: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
- transform: none;
- box-shadow: none;
}
.primary {
padding: 0.75rem 1.5rem;
- border-radius: 0.75rem;
background: var(--accent);
color: var(--white);
font-size: 0.9375rem;
font-weight: 500;
align-self: flex-start;
- box-shadow: 0 1px 2px var(--shadow);
}
.primary:hover:not(:disabled) {
background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
}
.accent {
@@ -86,7 +79,6 @@
height: 3rem;
flex-shrink: 0;
padding: 0;
- border-radius: 0.75rem;
background: var(--accent);
color: var(--white);
font-size: 1.25rem;
@@ -94,13 +86,10 @@
display: flex;
align-items: center;
justify-content: center;
- box-shadow: 0 1px 2px var(--shadow);
}
.accent:hover:not(:disabled) {
background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
}
.ghost {
@@ -108,7 +97,6 @@
width: 2rem;
aspect-ratio: 1;
padding: 0;
- border-radius: 0.625rem;
background: transparent;
color: var(--text-secondary);
font-size: 1.25rem;
@@ -118,14 +106,12 @@
}
.ghost:hover:not(:disabled) {
- background: var(--danger-hover-bg);
color: var(--danger);
}
.done {
flex-shrink: 0;
padding: 0.5rem 0.875rem;
- border-radius: 0.625rem;
background: var(--success);
color: var(--white);
font-size: 0.875rem;
@@ -133,13 +119,11 @@
}
.done:hover:not(:disabled) {
- filter: brightness(1.05);
- transform: translateY(-1px);
+ background: oklch(from var(--success) calc(l - 0.05) c h);
}
.done.lg {
padding: 0.75rem 1.25rem;
- border-radius: 0.75rem;
font-size: 0.9375rem;
}
@@ -148,10 +132,9 @@
height: 3rem;
flex-shrink: 0;
padding: 0;
- border-radius: 0.75rem;
background: var(--surface);
color: var(--text-secondary);
- border: 1.5px solid var(--border);
+ border: 1px solid var(--border);
font-size: 1.25rem;
font-weight: 500;
display: flex;
diff --git a/src/lib/components/FuzzyAutocomplete.svelte b/src/lib/components/FuzzyAutocomplete.svelte
index f5bef94..da7327e 100644
--- a/src/lib/components/FuzzyAutocomplete.svelte
+++ b/src/lib/components/FuzzyAutocomplete.svelte
@@ -129,8 +129,6 @@
padding: 0.25rem;
background: var(--surface);
border: 1px solid var(--border);
- border-radius: 0.75rem;
- box-shadow: 0 4px 12px var(--shadow-accent);
z-index: 20;
max-height: 16rem;
overflow-y: auto;
@@ -138,7 +136,6 @@
.dropdown li {
padding: 0.5rem 0.625rem;
- border-radius: 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
@@ -146,9 +143,13 @@
gap: 0.5rem;
}
- .dropdown li:hover,
+ .dropdown li:hover {
+ color: var(--accent);
+ }
+
.dropdown li.active {
- background: var(--surface-hover);
+ color: var(--accent);
+ font-weight: 700;
}
.name :global(mark) {
diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte
index 9a88e90..8dc3f76 100644
--- a/src/lib/components/GroceryRow.svelte
+++ b/src/lib/components/GroceryRow.svelte
@@ -61,20 +61,11 @@
padding: 0 0.875rem;
height: 100%;
border: none;
- border-radius: 0.75rem;
- background: var(--surface);
+ background: transparent;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .toggle:hover {
- background: var(--surface-hover);
- box-shadow: 0 2px 6px var(--shadow-accent);
- transform: translateY(-1px);
}
.label {
@@ -94,19 +85,12 @@
display: flex;
align-items: center;
justify-content: center;
- border-radius: 0.75rem;
- background: var(--surface);
color: var(--text-secondary);
text-decoration: none;
font-size: 1rem;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
}
.open:hover {
- background: var(--surface-hover);
color: var(--accent);
- box-shadow: 0 2px 6px var(--shadow-accent);
- transform: translateY(-1px);
}
</style>
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index aa42ace..c5fcc60 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -1,19 +1,27 @@
-<script lang="ts">
+<script>
import { page } from '$app/stores';
</script>
<nav class="navbar">
- <a href="/" class:active={$page.url.pathname === '/'}>Projets</a>
- <a href="/groceries" class:active={$page.url.pathname === '/groceries'}
- >Liste</a
+ <a href="/" data-label="Projets" class:active={$page.url.pathname === '/'}
+ ><span>Projets</span></a
+ >
+ <a
+ href="/groceries"
+ data-label="Liste"
+ class:active={$page.url.pathname === '/groceries'}><span>Liste</span></a
>
<a
href="/groceries/catalog"
- class:active={$page.url.pathname === '/groceries/catalog'}>Catalogue</a
+ data-label="Catalogue"
+ class:active={$page.url.pathname === '/groceries/catalog'}
+ ><span>Catalogue</span></a
>
<a
href="/groceries/categories"
- class:active={$page.url.pathname === '/groceries/categories'}>Catégories</a
+ data-label="Catégories"
+ class:active={$page.url.pathname === '/groceries/categories'}
+ ><span>Catégories</span></a
>
</nav>
@@ -32,23 +40,37 @@
}
.navbar a {
- padding: 0.5rem 1rem;
- border-radius: 9999px;
+ height: 100%;
+ display: inline-grid;
+ align-content: center;
+ padding: 0 0.625rem;
+ font-size: 0.875rem;
color: var(--text-secondary);
text-decoration: none;
- font-size: 0.875rem;
- font-weight: 500;
- transition: all 0.2s ease;
+ }
+
+ /* Bold ghost reserves the bold advance width in the same grid cell, so the
+ active tab's font-weight change never moves its siblings. */
+ .navbar a::before {
+ content: attr(data-label);
+ grid-area: 1 / 1;
+ visibility: hidden;
+ font-weight: 700;
+ }
+
+ .navbar a span {
+ grid-area: 1 / 1;
}
.navbar a:hover {
color: var(--text);
- background: var(--surface);
}
.navbar a.active {
- background: var(--accent);
- color: var(--white);
- box-shadow: 0 1px 2px var(--shadow);
+ color: var(--text);
+ }
+
+ .navbar a.active span {
+ font-weight: 700;
}
</style>
diff --git a/src/lib/components/Row.svelte b/src/lib/components/Row.svelte
index e388392..91c86a5 100644
--- a/src/lib/components/Row.svelte
+++ b/src/lib/components/Row.svelte
@@ -23,32 +23,15 @@
display: flex;
align-items: center;
gap: 0.5rem;
+ border-bottom: 1px solid var(--border);
}
.card {
padding: 0.5rem 0.75rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- transition: all 0.2s ease;
- }
-
- .card:hover {
- box-shadow: 0 2px 6px var(--shadow);
- transform: translateY(-1px);
}
.ref {
padding: 0.875rem 1rem;
gap: 0.75rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- transition: all 0.2s ease;
- }
-
- .ref:hover {
- box-shadow: 0 2px 6px var(--shadow);
- transform: translateY(-1px);
}
</style>
diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte
index ae11918..13205c2 100644
--- a/src/lib/components/ScoreBadge.svelte
+++ b/src/lib/components/ScoreBadge.svelte
@@ -11,7 +11,6 @@
flex-shrink: 0;
min-width: 2.75rem;
padding: 0.25rem 0.5rem;
- border-radius: 9999px;
text-align: center;
font-size: 0.875rem;
font-weight: 700;
@@ -23,7 +22,7 @@
}
.mid {
- background: var(--accent);
+ background: var(--warn);
}
.low {
diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte
index be77a46..518b74a 100644
--- a/src/lib/components/SectionTitle.svelte
+++ b/src/lib/components/SectionTitle.svelte
@@ -11,13 +11,10 @@
<style>
h2,
h3 {
- font-size: 0.75rem;
+ font-size: 0.875rem;
font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--accent);
+ color: var(--text-secondary);
margin: 1.25rem 0 0.5rem;
padding-left: 0.5rem;
- border-left: 3px solid var(--accent);
}
</style>
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index 2bbdf5a..ffa976b 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -38,7 +38,6 @@
justify-content: center;
width: 1.5rem;
height: 1.5rem;
- border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
@@ -50,12 +49,12 @@
}
.due {
- background: var(--shadow-accent);
- color: var(--accent);
+ background: var(--warn-bg);
+ color: var(--warn);
}
.late {
- background: var(--accent);
+ background: var(--warn);
color: var(--white);
}
diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte
index 076d3ce..769b49b 100644
--- a/src/routes/groceries/catalog/+page.svelte
+++ b/src/routes/groceries/catalog/+page.svelte
@@ -122,9 +122,8 @@
.search-input {
width: 100%;
- padding: 0.75rem 1rem;
+ padding: 0.5rem 0.625rem;
border: 1px solid var(--border);
- border-radius: 0.5rem;
background: var(--surface);
color: var(--text);
font-size: 1rem;
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index c672730..56e57fd 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -142,7 +142,7 @@
{/if}
<form method="POST" action="?/delete" use:enhance>
- <ul class="item-list item-list--wide">
+ <ul class="item-list">
{#each data?.references ?? [] as ref (ref.id)}
<Row variant="ref">
<div class="ref-info">
@@ -184,7 +184,6 @@
margin-top: -0.25rem;
visibility: hidden;
opacity: 0;
- transition: opacity 0.2s ease;
min-height: 1.25rem;
}
@@ -215,9 +214,6 @@
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
- background: var(--bg);
- padding: 0.125rem 0.5rem;
- border-radius: 0.375rem;
}
.error {
@@ -227,25 +223,18 @@
hr {
border: none;
- border-top: 1.5px solid var(--border);
+ border-top: 1px solid var(--border);
margin: 1.5rem 0;
}
.delete-item-btn {
margin-top: 1.5rem;
padding: 0.625rem 1.25rem;
- border: 1.5px solid var(--danger);
- border-radius: 0.75rem;
+ border: 1px solid var(--danger);
background: var(--surface);
color: var(--danger);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .delete-item-btn:hover {
- background: var(--danger-bg);
- transform: translateY(-1px);
}
</style>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 3da1529..a95fde7 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -45,8 +45,7 @@
width: min(100%, 24rem);
padding: 1.5rem;
background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 2px 8px var(--shadow);
+ border: 1px solid var(--border);
}
.login-card h1 {
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 0f3e857..37113df 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -271,18 +271,15 @@
gap: 0.5rem;
padding: 0.375rem 0.75rem;
border: none;
- border-radius: 0.625rem;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
- transition: all 0.2s ease;
}
.archived-toggle:hover {
- background: var(--surface);
color: var(--text);
}
@@ -293,7 +290,7 @@
.archived-toggle .count {
min-width: 1.25rem;
padding: 0 0.375rem;
- border-radius: 9999px;
+ border: 1px solid var(--border);
background: var(--surface);
text-align: center;
font-size: 0.75rem;
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 2dc5427..591f4b7 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -304,10 +304,11 @@
.save-check {
position: absolute;
right: 1rem;
- top: 50%;
- transform: translateY(-50%);
+ top: 0;
+ bottom: 0;
+ display: inline-flex;
+ align-items: center;
opacity: 0;
- transition: opacity 0.2s ease;
}
.save-check.visible {
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);
}
}
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 21:25:45 +0000