+ class="w-full h-64 md:h-80 object-cover rounded-panel shadow-xs">
Ordering for a crowd?
diff --git a/src/main/styles/admin.css b/src/main/styles/admin.css
index 8682d38..b9b178f 100644
--- a/src/main/styles/admin.css
+++ b/src/main/styles/admin.css
@@ -11,7 +11,7 @@
* on the photo pickers needs.
*/
@utility btn {
- @apply inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium
+ @apply inline-flex items-center justify-center gap-1.5 rounded-field px-3 py-1.5 text-sm font-medium
transition-colors;
}
@@ -31,18 +31,18 @@
/* Square, for the arrows and the crosses — a row of these is how anything gets reordered. */
@utility btn-icon {
- @apply inline-flex items-center justify-center w-7 h-7 rounded-md border border-bakery-300
+ @apply inline-flex items-center justify-center w-7 h-7 rounded-field border border-bakery-300
text-bakery-700 hover:bg-bakery-100 transition-colors
disabled:opacity-30 disabled:cursor-not-allowed;
}
@utility field {
- @apply w-full rounded-md border border-bakery-300 bg-white px-3 py-2 text-sm
+ @apply w-full rounded-field border border-bakery-300 bg-white px-3 py-2 text-sm
focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500;
}
@utility card {
- @apply rounded-lg border border-bakery-200 bg-white p-4 shadow-sm;
+ @apply rounded-panel border border-bakery-200 bg-white p-4 shadow-sm;
}
@utility card-heading {
diff --git a/src/main/styles/components.css b/src/main/styles/components.css
index 07cf441..713e00c 100644
--- a/src/main/styles/components.css
+++ b/src/main/styles/components.css
@@ -70,7 +70,7 @@
* `panel-lift` is one you can click, and it rises rather than just darkening.
*/
@utility panel {
- @apply bg-white rounded-3xl border border-bakery-200/70;
+ @apply bg-white rounded-panel border border-bakery-200/70;
box-shadow: var(--shadow-card);
}
diff --git a/src/main/styles/theme.css b/src/main/styles/theme.css
index 257db9d..768c765 100644
--- a/src/main/styles/theme.css
+++ b/src/main/styles/theme.css
@@ -38,6 +38,16 @@
--color-bakery-800: #37412f;
--color-bakery-900: #232b1e;
+ /*
+ * CORNERS. Two decisions, named, so "how round is a card" is answered once rather than per template.
+ *
+ * A card is 12px. It was 24px (Tailwind's rounded-3xl), which is the roundest thing on the page and
+ * reads as a phone app; a bakery's printed card has a corner you can see. Fields are tighter again, and
+ * buttons stay fully round — the pill is the brand's button shape and always was.
+ */
+ --radius-panel: 0.75rem;
+ --radius-field: 0.5rem;
+
/*
* Shadows tinted with the darkest sage rather than black. A neutral grey shadow on a cream page reads
* as a UI panel floating over a screen; a warm one reads as card stock lying on a counter, which is